:root {
    --cc-accent:      {{ cc('accent_color') }};
    --cc-accent-dark: {{ cc('accent_dark') }};

    /* Sync --default with accent so all legacy CSS updates too */
    --default:        {{ cc('accent_color') }};
    --black:          #0a0a0a;
    --transparent:    #fff0;
    --white:          white;
    --border-color:   #292929;
    --grey:           #1e1e1e;
}

.w-layout-blockcontainer { max-width: 940px; margin-left: auto; margin-right: auto; display: block; }
.w-commerce-commercecartwrapper { display: inline-block; position: relative; }
.w-commerce-commercecartopenlink { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; padding: 9px 15px; text-decoration: none; display: flex; }
.w-commerce-commercecartopenlinkcount { color: #3898ec; text-align: center; background-color: #fff; border-radius: 9px; min-width: 18px; height: 18px; margin-left: 8px; padding-left: 6px; padding-right: 6px; font-size: 11px; font-weight: 700; line-height: 18px; display: inline-block; }
.w-commerce-commercecartcontainerwrapper { z-index: 1001; background-color: #000c; position: fixed; inset: 0; }
.w-commerce-commercecartcontainerwrapper--cartType-modal { flex-direction: column; justify-content: center; align-items: center; display: flex; }
.w-commerce-commercecartcontainerwrapper--cartType-leftSidebar { flex-direction: row; justify-content: flex-start; align-items: stretch; display: flex; }
.w-commerce-commercecartcontainerwrapper--cartType-rightSidebar { flex-direction: row; justify-content: flex-end; align-items: stretch; display: flex; }
.w-commerce-commercecartcontainerwrapper--cartType-leftDropdown { background-color: #0000; position: absolute; inset: 100% auto auto 0; }
.w-commerce-commercecartcontainerwrapper--cartType-rightDropdown { background-color: #0000; position: absolute; inset: 100% 0 auto auto; }
.w-commerce-commercecartcontainer { background-color: #fff; flex-direction: column; width: 100%; min-width: 320px; max-width: 480px; display: flex; overflow: auto; box-shadow: 0 5px 25px #00000040; }
.w-commerce-commercecartheader { border-bottom: 1px solid #e6e6e6; flex: none; justify-content: space-between; align-items: center; padding: 16px 24px; display: flex; position: relative; }
.w-commerce-commercecartheading { margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; }
.w-commerce-commercecartcloselink { width: 16px; height: 16px; }
.w-commerce-commercecartformwrapper { flex-direction: column; flex: 1; display: flex; }
.w-commerce-commercecartform { flex-direction: column; flex: 1; justify-content: flex-start; display: flex; }
.w-commerce-commercecartlist { -webkit-overflow-scrolling: touch; flex: 1; padding: 12px 24px; overflow: auto; }
.w-commerce-commercecartitem { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; display: flex; }
.w-commerce-commercecartitemimage { width: 60px; height: 0%; }
.w-commerce-commercecartiteminfo { flex-direction: column; flex: 1; margin-left: 16px; margin-right: 16px; display: flex; }
.w-commerce-commercecartproductname { font-weight: 700; }
.w-commerce-commercecartoptionlist { margin-bottom: 0; padding-left: 0; text-decoration: none; list-style-type: none; }
.w-commerce-commercecartquantity { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 60px; height: 38px; margin-bottom: 10px; padding: 8px 6px 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecartquantity::placeholder { color: #999; }
.w-commerce-commercecartquantity:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecartfooter { border-top: 1px solid #e6e6e6; flex-direction: column; flex: none; padding: 16px 24px 24px; display: flex; }
.w-commerce-commercecartlineitem { flex: none; justify-content: space-between; align-items: baseline; margin-bottom: 16px; display: flex; }
.w-commerce-commercecartordervalue { font-weight: 700; }
.w-commerce-commercecartapplepaybutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: #000; border-width: 0; border-radius: 2px; align-items: center; height: 38px; min-height: 30px; margin-bottom: 8px; padding: 0; text-decoration: none; display: flex; }
.w-commerce-commercecartapplepayicon { width: 100%; height: 50%; min-height: 20px; }
.w-commerce-commercecartquickcheckoutbutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: #000; border-width: 0; border-radius: 2px; justify-content: center; align-items: center; height: 38px; margin-bottom: 8px; padding: 0 15px; text-decoration: none; display: flex; }
.w-commerce-commercequickcheckoutgoogleicon, .w-commerce-commercequickcheckoutmicrosofticon { margin-right: 8px; display: block; }
.w-commerce-commercecartcheckoutbutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; background-color: #3898ec; border-width: 0; border-radius: 2px; align-items: center; padding: 9px 15px; text-decoration: none; display: block; }
.w-commerce-commercecartemptystate { flex: 1; justify-content: center; align-items: center; padding-top: 100px; padding-bottom: 100px; display: flex; }
.w-commerce-commercecarterrorstate { background-color: #ffdede; flex: none; margin: 0 24px 24px; padding: 10px; }
.w-commerce-commerceaddtocartform { margin: 0 0 15px; }
.w-commerce-commerceaddtocartoptionpillgroup { margin-bottom: 10px; display: flex; }
.w-commerce-commerceaddtocartoptionpill { color: #000; cursor: pointer; background-color: #fff; border: 1px solid #000; margin-right: 10px; padding: 8px 15px; }
.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected { color: #fff; background-color: #000; }
.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; }
.w-commerce-commerceaddtocartquantityinput { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 60px; height: 38px; margin-bottom: 10px; padding: 8px 6px 8px 12px; line-height: 20px; display: block; }
.w-commerce-commerceaddtocartquantityinput::placeholder { color: #999; }
.w-commerce-commerceaddtocartquantityinput:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commerceaddtocartbutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; padding: 9px 15px; text-decoration: none; display: flex; }
.w-commerce-commerceaddtocartbutton.w--ecommerce-add-to-cart-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; }
.w-commerce-commercebuynowbutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; margin-top: 10px; padding: 9px 15px; text-decoration: none; display: inline-block; }
.w-commerce-commercebuynowbutton.w--ecommerce-buy-now-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; }
.w-commerce-commerceaddtocartoutofstock { background-color: #ddd; margin-top: 10px; padding: 10px; }
.w-commerce-commerceaddtocarterror { background-color: #ffdede; margin-top: 10px; padding: 10px; }
.w-commerce-commercecheckoutformcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; }
.w-commerce-commercelayoutcontainer { justify-content: center; align-items: flex-start; display: flex; }
.w-commerce-commercelayoutmain { flex: 0 800px; margin-right: 20px; }
.w-commerce-commercecheckoutcustomerinfowrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutblockheader { background-color: #fff; border: 1px solid #e6e6e6; justify-content: space-between; align-items: baseline; padding: 4px 20px; display: flex; }
.w-commerce-commercecheckoutblockcontent { background-color: #fff; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 20px; }
.w-commerce-commercecheckoutlabel { margin-bottom: 8px; }
.w-commerce-commercecheckoutemailinput { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutemailinput::placeholder { color: #999; }
.w-commerce-commercecheckoutemailinput:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingaddresswrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutshippingfullname { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingfullname::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingfullname:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingstreetaddress { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingstreetaddress::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingstreetaddress:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingstreetaddressoptional { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingstreetaddressoptional::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingstreetaddressoptional:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutrow { margin-left: -8px; margin-right: -8px; display: flex; }
.w-commerce-commercecheckoutcolumn { flex: 1; padding-left: 8px; padding-right: 8px; }
.w-commerce-commercecheckoutshippingcity { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingcity::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingcity:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingstateprovince { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingstateprovince::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingstateprovince:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingzippostalcode { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingzippostalcode::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingzippostalcode:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingcountryselector { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutshippingcountryselector::placeholder { color: #999; }
.w-commerce-commercecheckoutshippingcountryselector:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutshippingmethodswrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutshippingmethodslist { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }
.w-commerce-commercecheckoutshippingmethoditem { background-color: #fff; border-bottom: 1px solid #e6e6e6; flex-direction: row; align-items: baseline; margin-bottom: 0; padding: 16px; font-weight: 400; display: flex; }
.w-commerce-commercecheckoutshippingmethoddescriptionblock { flex-direction: column; flex-grow: 1; margin-left: 12px; margin-right: 12px; display: flex; }
.w-commerce-commerceboldtextblock { font-weight: 700; }
.w-commerce-commercecheckoutshippingmethodsemptystate { text-align: center; background-color: #fff; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 64px 16px; }
.w-commerce-commercecheckoutpaymentinfowrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutcardnumber { -webkit-appearance: none; appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutcardnumber::placeholder { color: #999; }
.w-commerce-commercecheckoutcardnumber:focus, .w-commerce-commercecheckoutcardnumber.-wfp-focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutcardexpirationdate { -webkit-appearance: none; appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutcardexpirationdate::placeholder { color: #999; }
.w-commerce-commercecheckoutcardexpirationdate:focus, .w-commerce-commercecheckoutcardexpirationdate.-wfp-focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutcardsecuritycode { -webkit-appearance: none; appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutcardsecuritycode::placeholder { color: #999; }
.w-commerce-commercecheckoutcardsecuritycode:focus, .w-commerce-commercecheckoutcardsecuritycode.-wfp-focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingaddresstogglewrapper { flex-direction: row; display: flex; }
.w-commerce-commercecheckoutbillingaddresstogglecheckbox { margin-top: 4px; }
.w-commerce-commercecheckoutbillingaddresstogglelabel { margin-left: 8px; font-weight: 400; }
.w-commerce-commercecheckoutbillingaddresswrapper { margin-top: 16px; margin-bottom: 20px; }
.w-commerce-commercecheckoutbillingfullname { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingfullname::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingfullname:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingstreetaddress { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingstreetaddress::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingstreetaddress:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingstreetaddressoptional { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingstreetaddressoptional::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingstreetaddressoptional:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingcity { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingcity::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingcity:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingstateprovince { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingstateprovince::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingstateprovince:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingzippostalcode { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingzippostalcode::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingzippostalcode:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutbillingcountryselector { -webkit-appearance: none; appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; }
.w-commerce-commercecheckoutbillingcountryselector::placeholder { color: #999; }
.w-commerce-commercecheckoutbillingcountryselector:focus { border-color: #3898ec; outline-style: none; }
.w-commerce-commercecheckoutorderitemswrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutsummaryblockheader { background-color: #fff; border: 1px solid #e6e6e6; justify-content: space-between; align-items: baseline; padding: 4px 20px; display: flex; }
.w-commerce-commercecheckoutorderitemslist { margin-bottom: -20px; }
.w-commerce-commercecheckoutorderitem { margin-bottom: 20px; display: flex; }
.w-commerce-commercecheckoutorderitemdescriptionwrapper { flex-grow: 1; margin-left: 16px; margin-right: 16px; }
.w-commerce-commercecheckoutorderitemquantitywrapper { white-space: pre-wrap; display: flex; }
.w-commerce-commercecheckoutorderitemoptionlist { margin-bottom: 0; padding-left: 0; text-decoration: none; list-style-type: none; }
.w-commerce-commercelayoutsidebar { flex: 0 0 320px; position: sticky; top: 20px; }
.w-commerce-commercecheckoutordersummarywrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutsummarylineitem, .w-commerce-commercecheckoutordersummaryextraitemslistitem { flex-direction: row; justify-content: space-between; margin-bottom: 8px; display: flex; }
.w-commerce-commercecheckoutsummarytotal { font-weight: 700; }
.w-commerce-commercecheckoutplaceorderbutton { color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; background-color: #3898ec; border-width: 0; border-radius: 3px; align-items: center; margin-bottom: 20px; padding: 9px 15px; text-decoration: none; display: block; }
.w-commerce-commercecheckouterrorstate { background-color: #ffdede; margin-top: 16px; margin-bottom: 16px; padding: 10px 16px; }
.w-commerce-commercepaypalcheckoutformcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; }
.w-commerce-commercecheckoutcustomerinfosummarywrapper { margin-bottom: 20px; }
.w-commerce-commercecheckoutsummaryitem, .w-commerce-commercecheckoutsummarylabel { margin-bottom: 8px; }
.w-commerce-commercecheckoutsummaryflexboxdiv { flex-direction: row; justify-content: flex-start; display: flex; }
.w-commerce-commercecheckoutsummarytextspacingondiv { margin-right: .33em; }
.w-commerce-commercecheckoutpaymentsummarywrapper { margin-bottom: 20px; }
.w-commerce-commercepaypalcheckouterrorstate { background-color: #ffdede; margin-top: 16px; margin-bottom: 16px; padding: 10px 16px; }
.w-commerce-commerceorderconfirmationcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; }
.w-commerce-commercecheckoutshippingsummarywrapper { margin-bottom: 20px; }
.w-layout-layout { grid-row-gap: 20px; grid-column-gap: 20px; grid-auto-columns: 1fr; justify-content: center; padding: 20px; }
.w-layout-cell { flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex; }

@media screen and (max-width: 991px) { .w-layout-blockcontainer { max-width: 728px; } }
@media screen and (max-width: 767px) {
  .w-layout-blockcontainer { max-width: none; }
  .w-commerce-commercelayoutcontainer { flex-direction: column; align-items: stretch; }
  .w-commerce-commercelayoutmain { flex-basis: auto; margin-right: 0; }
  .w-commerce-commercelayoutsidebar { flex-basis: auto; }
}
@media screen and (max-width: 479px) {
  .w-commerce-commercecartcontainerwrapper--cartType-modal { flex-direction: row; justify-content: center; align-items: stretch; }
  .w-commerce-commercecartcontainerwrapper--cartType-leftDropdown, .w-commerce-commercecartcontainerwrapper--cartType-rightDropdown { flex-direction: row; justify-content: center; align-items: stretch; display: flex; position: fixed; inset: 0; }
  .w-commerce-commercecartquantity, .w-commerce-commerceaddtocartquantityinput, .w-commerce-commercecheckoutemailinput, .w-commerce-commercecheckoutshippingfullname, .w-commerce-commercecheckoutshippingstreetaddress, .w-commerce-commercecheckoutshippingstreetaddressoptional { font-size: 16px; }
  .w-commerce-commercecheckoutrow { flex-direction: column; }
  .w-commerce-commercecheckoutshippingcity, .w-commerce-commercecheckoutshippingstateprovince, .w-commerce-commercecheckoutshippingzippostalcode, .w-commerce-commercecheckoutshippingcountryselector, .w-commerce-commercecheckoutcardnumber, .w-commerce-commercecheckoutcardexpirationdate, .w-commerce-commercecheckoutcardsecuritycode, .w-commerce-commercecheckoutbillingfullname, .w-commerce-commercecheckoutbillingstreetaddress, .w-commerce-commercecheckoutbillingstreetaddressoptional, .w-commerce-commercecheckoutbillingcity, .w-commerce-commercecheckoutbillingstateprovince, .w-commerce-commercecheckoutbillingzippostalcode, .w-commerce-commercecheckoutbillingcountryselector { font-size: 16px; }
}

body {
  background-color: var(--black);
  color: #fff;
  cursor: auto !important;
  background-image: none;
  font-family: 'Segoe UI', sans-serif;
  font-size: 22px;
  line-height: 28px;
}
h2 { margin-top: 20px; margin-bottom: 10px; font-size: 32px; font-weight: 600; line-height: 36px; }
h4 { margin-top: 0; margin-bottom: 10px; font-size: 30px; font-weight: 400; line-height: 28px; }
p { margin-bottom: 0; line-height: 26px; }
blockquote { border-left: 5px solid var(--default); margin-bottom: 10px; padding: 10px 20px; font-size: 18px; line-height: 22px; }

.header { padding-top: 40px; overflow: visible; }
.menu-item { border-bottom: 2px solid var(--transparent); color: var(--white); text-transform: uppercase; margin-left: 15px; margin-right: 15px; padding: 10px 0; font-size: 17px; font-weight: 300; }
.menu-item:hover { color: var(--default); }
.menu-item.w--current { border-bottom-color: var(--default); color: var(--white); margin-left: 15px; margin-right: 15px; padding-right: 0; }
.menu-item.w--current:hover { color: var(--default); }
.logo-img { width: 200px; }
.header-right-side { margin-left: auto; display: flex; }
.cart-button { border: 1px solid var(--border-color); text-align: left; background-color: #fff0; border-radius: 5px; justify-content: center; width: auto; height: auto; padding: 15px; position: relative; }
.header-inner { background-color: var(--grey); border: 1px solid #292929; border-radius: 5px; justify-content: space-between; align-items: center; margin-bottom: 0; padding: 25px; display: flex; }
.logo.w--current { flex: none; }
.main-menu { border: 2px #f9dc4a; border-radius: 0; flex: 0 auto; align-self: center; margin-left: auto; padding: 0; }
.cart-quantity { color: var(--white); background-color: #fff0; min-width: auto; height: auto; padding: 0; font-size: 17px; font-weight: 400; line-height: 18px; position: static; }
.main-container { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; font-size: 20px; font-weight: 300; line-height: 20px; }
.cursor-wrapp { z-index: 9999; justify-content: center; align-items: center; width: 100%; height: 100vh; display: flex; position: fixed; inset: 0%; }
.cursor { z-index: 9999; border: 1px solid var(--default); opacity: 0; cursor: none; border-radius: 50%; justify-content: center; align-items: center; width: 70px; height: 70px; display: flex; position: absolute; }
.hero-section { padding-top: 20px; padding-bottom: 50px; }
.hero-grid { grid-column-gap: 50px; grid-row-gap: 50px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; padding-top: 150px; display: grid; }
.hero-big-text { text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 140px; line-height: 100px; }
.hero-paragraph { margin-bottom: 0; font-weight: 300; }
.hero-projects-link { color: var(--white); justify-content: flex-start; align-items: center; margin-top: 30px; text-decoration: none; display: flex; }
.hero-projects-link-text { border-bottom: 1px solid var(--white); font-weight: 300; line-height: 22px; text-decoration: none; }
.hero-under-text { border-left: 5px solid var(--default); text-transform: uppercase; margin-top: 100px; padding-left: 30px; font-size: 30px; font-weight: 200; line-height: 40px; }
.hero-partners { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-top: 50px; padding-top: 15px; padding-bottom: 15px; overflow: hidden; }
.hero-partners-moving { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.numbers-grid { grid-column-gap: 20px; grid-row-gap: 20px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.numbers-item { border-radius: 5px; flex-flow: column; height: auto; min-height: 320px; padding: 20px; display: flex; }
.numbers-item.numbers-item-grey { background-color: #4a4a4a; }
.numbers-item.numbers-item-orange { background-color: var(--default); }
.numbers-item.numbers-item-dark { background-color: #191919; }
.numbers-item.numbers-item-grey-light { background-color: #939393; }
.number-text-box { margin-top: auto; }
.number-text-small { text-transform: capitalize; }
.number-text-big { margin-bottom: 15px; font-size: 70px; font-weight: 500; line-height: 50px; }
.services-section { padding-top: 150px; }
.main-title { border-bottom: 1px solid var(--default); text-transform: uppercase; margin-top: 0; margin-bottom: 50px; font-size: 80px; font-weight: 600; line-height: 50px; }
.services-item { border-bottom: 1px solid var(--border-color); justify-content: flex-start; align-items: center; padding-top: 20px; padding-bottom: 20px; display: flex; }
.service-nunmber { border: 1px solid var(--border-color); background-color: #191919; border-radius: 4px; padding: 7px; display: inline-block; }
.service-text { text-transform: uppercase; flex: none; margin-left: 15px; font-size: 40px; font-weight: 200; line-height: 30px; }
.service-img { border-radius: 10px; flex: none; width: 600px; margin-left: auto; }
.who-we-are-section { padding-top: 150px; }
.mission-grid { grid-column-gap: 20px; grid-row-gap: 20px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.mission-heading { text-transform: uppercase; flex: none; margin-top: 0; margin-bottom: 0; margin-left: 30px; font-size: 40px; font-weight: 200; line-height: 40px; }
.mission-content { border: 1px solid var(--border-color); border-radius: 10px; justify-content: flex-start; align-items: center; padding: 10px; display: flex; }
.mission-paragraph { margin-bottom: 100px; font-size: 22px; line-height: 28px; }
.mission-orange-box { border: 1px solid var(--default); background-color: var(--default); border-radius: 5px; align-self: flex-start; width: 30px; height: 30px; }
.mission-orange-box.mission-transparent { background-color: var(--transparent); margin-top: 20px; margin-left: 20px; }
.mission-img { border-radius: 10px; flex: 0 auto; width: 240px; margin-left: 40px; }
.work-section { padding-top: 150px; }
.main-title-box { position: relative; }
.all-projects { color: var(--white); text-transform: uppercase; font-size: 18px; position: absolute; top: 10px; right: 0; }
.work-list { grid-column-gap: 20px; grid-row-gap: 40px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.work-item { color: var(--white); text-decoration: none; display: block; }
.heading { margin-top: 30px; margin-bottom: 20px; font-size: 40px; font-weight: 200; line-height: 40px; }
.work-category { text-transform: uppercase; background-color: #1e1e1e; border-radius: 5px; padding: 8px; font-size: 16px; font-weight: 600; line-height: 17px; display: inline-block; }
.testimonials-section { padding-top: 150px; }
.testimonials-grid { grid-column-gap: 20px; grid-row-gap: 20px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.trstimonials-item { border: 1px solid var(--border-color); border-radius: 10px; padding: 30px; }
.testimonials-txt { margin-bottom: 0; margin-left: 20px; font-size: 22px; line-height: 24px; }
.blog-section { padding-top: 150px; }
.blog-list-wrapper { margin-top: 50px; }
.blog-list { grid-column-gap: 40px; grid-row-gap: 40px; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; display: grid; }
.blog-arrow { background-color: #333; border-radius: 50%; justify-content: center; align-items: center; width: 55px; height: 55px; margin-left: 10px; text-decoration: none; display: flex; }
.blog-left { border-radius: 10px; flex: 1; padding: 0; }
.blog-image { border-radius: 5px; width: 390px; margin-left: auto; }
.blog-item { border: 1px solid var(--border-color); cursor: pointer; border-radius: 5px; justify-content: flex-start; align-items: center; padding: 30px; text-decoration: none; display: flex; }
.blog-category { border: 1px solid var(--border-color); color: var(--white); border-radius: 10px; padding: 10px 20px; text-decoration: none; display: inline-block; }
.blog-heading { color: var(--white); text-transform: uppercase; width: 80%; margin-bottom: 0; font-size: 40px; font-weight: 200; line-height: 44px; }
.footer { margin-top: 50px; }
.phone-link { color: #fff; margin-top: 30px; margin-bottom: 30px; font-family: 'Segoe UI', sans-serif; font-size: 60px; font-weight: 400; line-height: 50px; text-decoration: none; display: block; }
.copyright-text { color: #fff; }
.socials { justify-content: center; display: flex; }
.inner-footer { border-style: solid; border-width: 1px 1px 15px; border-color: var(--border-color); text-align: center; border-radius: 5px; padding-top: 110px; padding-bottom: 110px; }
.copyright { justify-content: space-between; align-items: center; padding-top: 30px; padding-bottom: 30px; display: flex; }
.backtotop { border: 1px solid var(--border-color); border-radius: 5px; justify-content: center; align-items: center; width: 80px; height: 40px; display: flex; }
.mail-link { color: #fff; text-align: center; font-size: 36px; text-decoration: none; display: inline-block; }
.social-link { color: var(--white); justify-content: flex-start; align-items: center; margin-right: 20px; text-decoration: none; display: flex; }
.input-style { border: 1px solid var(--border-color); color: #fff; background-color: #fff0; border-radius: 5px; flex: 1; min-height: 50px; margin-bottom: 0; padding: 25px 20px 20px; line-height: 20px; }
.input-style:focus { color: #fff; background-color: #fff0; font-size: 20px; font-weight: 400; }
.input-style::placeholder { color: #fff; font-size: 20px; font-weight: 400; }
.submit-button { float: none; color: #fff; text-transform: uppercase; background-color: #dc5f00; border: 1px solid #242424; border-radius: 5px; margin-top: 20px; margin-left: auto; padding: 20px 40px; font-size: 20px; font-weight: 500; transition: all .3s; }
.submit-button:hover { color: #000; background-color: #fff; }
.pages-body { cursor: auto; }
.checkout { color: var(--black); margin-top: 40px; }
.checkout-button { background-color: var(--default); border-style: solid; border-color: #000; }

#darkyn42, #darkyn36 { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
#darkyn30 { grid-template-rows: auto auto auto; grid-template-columns: 1fr 1fr; }
#darkyn35 { grid-column: span 2 / span 2; }

@media screen and (min-width: 1440px) {
  .menu-item { padding: 10px 0; font-size: 20px; }
  .menu-item.w--current { margin-left: 15px; margin-right: 15px; padding: 10px 0; }
  .header-inner { justify-content: flex-end; display: flex; }
  .main-menu { flex: none; align-self: center; margin-left: auto; }
  .main-container { max-width: 1400px; padding-left: 0; padding-right: 0; }
  .hero-big-text { font-size: 201px; }
  .service-img { width: 770px; }
  .blog-image { width: 420px; }
  .blog-heading { font-size: 50px; line-height: 55px; }
}
@media screen and (min-width: 1920px) {
  .main-container { max-width: 1700px; }
}
@media screen and (max-width: 991px) {
  body { cursor: auto; }
  .menu-item { color: var(--white); font-weight: 300; }
  .menu-item.w--current { color: var(--default); border-bottom-style: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .services-item { display: block; }
  .service-text { margin-top: 20px; margin-bottom: 20px; margin-left: 0; }
  .service-img { flex: 0 auto; order: 0; margin-left: 0; display: block; }
  .mission-grid { grid-column-gap: 60px; grid-row-gap: 60px; grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-image { width: 300px; }
  .blog-heading { width: 100%; }
  .socials { display: flex; }
  #darkyn18 { order: 9999; }
  #darkyn42 { grid-template-rows: auto; grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .logo-img { width: 150px; }
  .service-img { width: 100%; }
  .work-list { grid-template-columns: 1fr; }
  .blog-image { width: 100%; }
  .blog-item { margin-bottom: 0; display: block; }
  .blog-heading { width: 100%; }
  .phone-link { font-size: 50px; line-height: 50px; }
  .socials { flex-flow: column; justify-content: center; align-items: center; }
  .copyright { display: block; }
  .social-link { margin-bottom: 20px; margin-right: 0; }
  #darkyn36 { grid-template-rows: auto; grid-template-columns: 1fr; }
}
@media screen and (max-width: 479px) {
  .hero-big-text { font-size: 60px; line-height: 40px; }
  .numbers-grid { grid-template-columns: 1fr; }
  .main-title { font-size: 30px; line-height: 19px; }
  .phone-link { font-size: 34px; line-height: 40px; }
  .inner-footer { padding-top: 60px; padding-bottom: 60px; }
  .mail-link { font-size: 28px; }
  #darkyn30 { grid-template-rows: auto auto auto; grid-template-columns: 1fr; }
  #darkyn31, #darkyn32, #darkyn33, #darkyn34 { grid-column: span 2 / span 2; }
}

/* ═══════════════════════════════════════════════════════════════
   PART 2 — Custom styles (append after Part 1)
   ═══════════════════════════════════════════════════════════════ */

/* ── HEADER ── */
.header { padding-top: 36px; }
.header-inner { background-color: var(--grey); border: 1px solid var(--border-color); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; gap: 20px; }
.logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo-text span, .logo-text i { color: var(--default); }
.main-menu { display: flex; list-style: none; gap: 0; margin: 0 auto; border: none; background: none; padding: 0; }
.menu-item { color: #ccc; padding: 8px 14px; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; margin: 0; }
.menu-item:hover { color: #fff; }
.menu-item.w--current { border-bottom-color: var(--default); color: #fff; margin: 0; padding-right: 14px; }
.nav-enroll { background: var(--default); color: #fff; padding: 11px 24px; border-radius: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; transition: background .2s; white-space: nowrap; display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.nav-enroll:hover { background: #b84d00; color: #fff; }

/* ── HERO ── */
.hero-section { padding: 0 0 70px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-top: 110px; align-items: center; }
.hero-big-col { display: flex; align-items: center; overflow: hidden; }
.hero-big-col.right { justify-content: flex-end; }
.hero-big-text { text-transform: uppercase; margin: 0; font-size: clamp(80px, 9.5vw, 140px); line-height: 1; font-weight: 800; letter-spacing: -4px; white-space: nowrap; color: #fff; }
.hero-mid { display: flex; flex-direction: column; padding: 0 10px; }
.hero-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--default); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.hero-paragraph { font-weight: 300; font-size: 16px; line-height: 28px; color: #aaa; }
.hero-cta-group { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero-cta-primary { background: var(--default); color: #fff; padding: 13px 26px; border-radius: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 9px; transition: background .2s; text-decoration: none; }
.hero-cta-primary:hover { background: #b84d00; }
.hero-cta-secondary { color: #fff; font-size: 14px; font-weight: 400; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: border-color .2s; text-decoration: none; }
.hero-cta-secondary:hover { border-color: #fff; }
.hero-under-text { border-left: 4px solid var(--default); text-transform: uppercase; margin-top: 40px; padding-left: 16px; font-size: 18px; font-weight: 200; line-height: 30px; color: #ccc; }
.hero-partners { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-top: 60px; padding: 14px 0; overflow: hidden; }
.hero-partners-moving { display: inline-flex; gap: 60px; align-items: center; white-space: nowrap; animation: pbr-marquee 22s linear infinite; }
@keyframes pbr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px; color: #444; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.partner-tag i { color: var(--default); font-size: 8px; }

/* ── NUMBERS ── */
.numbers-section { padding: 60px 0 0; }
.numbers-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.numbers-item { border-radius: 8px; display: flex; flex-direction: column; min-height: 260px; padding: 24px; }
.numbers-item-orange { background-color: var(--default); }
.numbers-item-grey { background-color: #3a3a3a; }
.numbers-item-dark { background-color: #141414; border: 1px solid var(--border-color); }
.numbers-item-grey-light { background-color: #7a7a7a; }
.number-icon { font-size: 20px; opacity: .6; }
.number-text-box { margin-top: auto; }
.number-text-big { font-size: 60px; font-weight: 700; line-height: 50px; margin-bottom: 10px; letter-spacing: -1px; }
.number-text-small { font-size: 14px; font-weight: 300; opacity: .85; text-transform: capitalize; }

/* ── SECTION TITLE ── */
.section-title-wrap { margin-bottom: 50px; }
.main-title { border-bottom: 1px solid var(--default); text-transform: uppercase; margin: 0 0 50px; font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1; padding-bottom: 16px; letter-spacing: -1px; }

/* ── HOME COURSES ── */
.services-section { padding-top: 120px; }
.services-item { border-bottom: 1px solid var(--border-color); display: flex; align-items: stretch; overflow: hidden; transition: background .2s; border-radius: 4px; margin-bottom: 2px; padding: 0; }
.services-item:hover { background: #111; }
.service-left { display: flex; align-items: center; gap: 20px; padding: 24px 24px 24px 0; flex: 1; min-width: 0; }
.service-nunmber { border: 1px solid var(--border-color); background: #111; border-radius: 5px; padding: 8px 12px; font-size: 14px; font-weight: 600; min-width: 46px; text-align: center; flex-shrink: 0; color: #666; display: inline-block; margin-left: 0; }
.service-info { flex: 1; min-width: 0; }
.service-text { font-size: clamp(20px, 2.5vw, 32px); font-weight: 200; text-transform: uppercase; line-height: 1.1; display: block; margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.service-badge { border-radius: 4px; padding: 4px 11px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.badge-rec  { background: rgba(220,95,0,.15);  color: var(--default); border: 1px solid rgba(220,95,0,.4); }
.badge-live { background: rgba(34,197,94,.1);  color: #22c55e;        border: 1px solid rgba(34,197,94,.3); }
.badge-full { background: rgba(99,102,241,.1); color: #818cf8;        border: 1px solid rgba(99,102,241,.3); }
.badge-sig  { background: rgba(234,179,8,.1);  color: #eab308;        border: 1px solid rgba(234,179,8,.3); }
.service-price { font-size: 20px; font-weight: 700; color: var(--default); letter-spacing: -.3px; margin-left: 4px; }
.service-includes { font-size: 12px; color: #666; display: inline-flex; align-items: center; gap: 5px; }
.service-includes i { color: #444; font-size: 11px; }
.service-img { width: 360px; height: auto; min-height: 130px; object-fit: cover; flex-shrink: 0; display: block; border-left: 1px solid var(--border-color); border-radius: 0; margin-left: auto; }

/* ── WHO WE ARE ── */
.who-we-are-section { padding-top: 120px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mission-card { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.mission-header { padding: 24px 28px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 16px; }
.mission-header.right { flex-direction: row-reverse; text-align: right; }
.mission-icon-wrap { width: 48px; height: 48px; border-radius: 8px; background: color-mix(in srgb, var(--default) 12%, transparent); border: 1px solid color-mix(in srgb, var(--default) 20%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mission-icon-wrap i { color: var(--default); font-size: 18px; }
.mission-heading { font-size: 28px; font-weight: 200; text-transform: uppercase; line-height: 1.1; margin: 0; }
.mission-body { display: flex; align-items: stretch; }
.mission-body.reverse { flex-direction: row-reverse; }
.mission-text { padding: 28px; flex: 1; font-size: 17px; line-height: 28px; color: #bbb; }
.mission-img { width: 200px; object-fit: cover; flex-shrink: 0; display: block; border-radius: 0; margin: 0; }
.mission-accent { width: 24px; height: 24px; border-radius: 4px; background: var(--default); margin-top: 20px; }
.mission-accent.outline { background: transparent; border: 1px solid var(--default); }

/* ── STUDENT WORK ── */
.work-section { padding-top: 120px; }
.main-title-box { position: relative; margin-bottom: 50px; }
.main-title-box .main-title { margin-bottom: 0; }
.all-projects { color: #aaa; text-transform: uppercase; font-size: 13px; font-weight: 500; letter-spacing: .5px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 7px; transition: color .2s; text-decoration: none; }
.all-projects:hover { color: var(--default); }
.work-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.work-item { color: #fff; display: block; text-decoration: none; }
.work-img-wrapp { overflow: hidden; border-radius: 8px; height: 220px; border: 1px solid var(--border-color); }
.work-img-wrapp img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.work-item:hover .work-img-wrapp img { transform: scale(1.06); }
.work-heading { margin: 20px 0 12px; font-size: 26px; font-weight: 200; line-height: 1.2; }
.work-category { text-transform: uppercase; background: #181818; border: 1px solid var(--border-color); border-radius: 5px; padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 7px; color: #aaa; }

/* ── TESTIMONIALS ── */
.testimonials-section { padding-top: 120px; }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trstimonials-item { border: 1px solid var(--border-color); border-radius: 10px; padding: 32px; transition: border-color .2s; }
.trstimonials-item:hover { border-color: color-mix(in srgb, var(--default) 40%, transparent); }
.testimonial-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; background: #1a1a1a; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonial-avatar i { color: var(--default); font-size: 22px; }
.testimonial-name { font-size: 20px; font-weight: 400; line-height: 1.1; margin-bottom: 5px; }
.testimonial-role { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 5px; }
.testimonial-stars { color: var(--default); font-size: 13px; margin-bottom: 6px; }
.testimonial-quote-icon { color: var(--default); font-size: 20px; margin-left: auto; align-self: flex-start; opacity: .6; }
.testimonials-txt { font-size: 16px; line-height: 26px; color: #bbb; }

/* ── BLOG ── */
.blog-section { padding-top: 120px; }
.blog-list-wrapper { margin-top: 0; }
.blog-list { display: grid; grid-row-gap: 16px; grid-template-columns: 1fr; }
.blog-item { border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; padding: 28px 32px; gap: 30px; transition: border-color .2s, background .2s; text-decoration: none; }
.blog-item:hover { border-color: color-mix(in srgb, var(--default) 40%, transparent); background: #0f0f0f; }
.blog-left { flex: 1; min-width: 0; padding: 0; border: none; }
.blog-category { color: #666; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; border: none; padding: 0; border-radius: 0; }
.blog-category i { color: var(--default); }
.blog-heading { color: #fff; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 30px); font-weight: 200; line-height: 1.3; margin-bottom: 0; width: auto; }
.blog-footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-color); width: auto; }
.blog-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1a1a1a; border: 1px solid #333; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-author-avatar i { color: var(--default); font-size: 16px; }
.blog-author-name { font-size: 13px; color: #777; }
.blog-arrow { background: #1a1a1a; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; font-size: 14px; flex-shrink: 0; transition: background .2s, border-color .2s; text-decoration: none; }
.blog-item:hover .blog-arrow { background: var(--default); border-color: var(--default); }
.blog-image { border-radius: 8px; width: 300px; height: 150px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-color); margin-left: 0; }

/* ── FOOTER ── */
.footer { margin-top: 80px; }
.inner-footer { border: 1px solid var(--border-color); border-bottom-width: 10px; border-bottom-color: var(--default); border-radius: 8px; padding: 80px 40px; text-align: center; }
.footer-tagline { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: #444; margin-bottom: 20px; }
.mail-link { color: #fff; font-size: 28px; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; transition: color .2s; text-decoration: none; }
.mail-link:hover { color: var(--default); }
.mail-link i { color: var(--default); font-size: 22px; }
.phone-link { color: #fff; font-size: 48px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 28px; letter-spacing: -1px; transition: color .2s; text-decoration: none; font-family: 'Segoe UI', sans-serif; }
.phone-link:hover { color: var(--default); }
.phone-link i { color: var(--default); font-size: 34px; }
.socials { justify-content: center; display: flex; flex-wrap: wrap; gap: 20px; }
.social-link { color: #888; display: flex; align-items: center; gap: 8px; font-size: 14px; border: 1px solid var(--border-color); border-radius: 5px; padding: 9px 18px; transition: color .2s, border-color .2s; text-decoration: none; margin-right: 0; }
.social-link:hover { color: #fff; border-color: #555; }
.social-link i { font-size: 15px; }
.copyright { justify-content: space-between; align-items: center; padding: 24px 0; display: flex; border-top: 1px solid var(--border-color); margin-top: 0; }
.copyright-text { color: #555; font-size: 13px; }
.copyright-text a { color: var(--default); }
.backtotop { border: 1px solid var(--border-color); border-radius: 6px; width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #666; transition: all .2s; text-decoration: none; }
.backtotop:hover { border-color: var(--default); color: var(--default); }

/* ── HOME RESPONSIVE ── */
@media(max-width:1024px){ .service-img { width: 280px; } .blog-image { width: 240px; } }
@media(max-width:991px){ .hero-grid { grid-template-columns: 1fr; padding-top: 60px; gap: 20px; } .hero-big-col { justify-content: flex-start !important; } .hero-mid { padding: 0; } .numbers-grid { grid-template-columns: 1fr 1fr; } .mission-grid, .testimonials-grid { grid-template-columns: 1fr; } .service-img { width: 220px; min-height: 110px; } .work-list { grid-template-columns: 1fr 1fr; } }
@media(max-width:767px){ .main-container { padding: 0 20px; } .work-list { grid-template-columns: 1fr; } .blog-item { flex-direction: column; align-items: flex-start; } .blog-image { width: 100%; height: 160px; } .service-text { font-size: 18px; white-space: normal; } .service-img { display: none; } .phone-link { font-size: 30px; } .main-menu { display: none; } .socials { flex-wrap: wrap; } }
@media(max-width:479px){ .hero-big-text { font-size: 56px; } .numbers-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════
   ENROLL BUTTON + COUPON
   ══════════════════════════════════════════════ */
.pbr-btn-primary { display: block !important; width: 100% !important; background: var(--default) !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: 14px 20px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; text-align: center !important; cursor: pointer !important; transition: background .2s !important; text-decoration: none !important; margin-bottom: 8px !important; box-sizing: border-box !important; font-family: inherit !important; }
.pbr-btn-primary:hover { background: #b84d00 !important; color: #fff !important; }
.pbr-btn-primary:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.pbr-btn-outline { display: block !important; width: 100% !important; background: transparent !important; color: #fff !important; border: 1px solid #444 !important; border-radius: 6px !important; padding: 13px 20px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .6px !important; text-align: center !important; cursor: pointer !important; transition: border-color .2s !important; text-decoration: none !important; margin-bottom: 8px !important; box-sizing: border-box !important; font-family: inherit !important; }
.pbr-btn-outline:hover { border-color: #fff !important; }
.pbr-btn-outline:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.pbr-link-btn { background: none !important; border: none !important; color: #555 !important; font-size: 12px !important; cursor: pointer !important; text-decoration: underline !important; display: block !important; width: 100% !important; text-align: center !important; padding: 6px 0 !important; font-family: inherit !important; }
.pbr-link-btn:hover { color: #aaa !important; }
.pbr-badge-danger { display: block !important; text-align: center !important; background: rgba(239,68,68,.12) !important; color: #ef4444 !important; border: 1px solid rgba(239,68,68,.3) !important; border-radius: 4px !important; padding: 6px 10px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 8px !important; }
.text-muted  { color: #666 !important; font-size: 12px !important; text-align: center !important; display: block !important; margin-bottom: 6px !important; }
.text-center { text-align: center !important; }
.small { font-size: 12px !important; }
.mt-2 { margin-top: 8px !important; }
.mb-2 { margin-bottom: 8px !important; }
.w-100 { width: 100% !important; }
.d-none { display: none !important; }
.mt-1 { margin-top: 4px !important; }
.mt-3 { margin-top: 12px !important; }

/* Coupon */
.pbr-coupon-wrap { margin: 8px 0; width: 100%; box-sizing: border-box; }
.pbr-coupon-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; box-sizing: border-box; }
.pbr-input { width: 100% !important; min-width: 0 !important; background: #1a1a1a !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; padding: 10px 14px !important; font-size: 13px !important; font-family: inherit !important; box-sizing: border-box !important; }
.pbr-input::placeholder { color: #555 !important; }
.pbr-input:focus { outline: none !important; border-color: var(--default) !important; }
.btn-sm { background: transparent !important; color: #fff !important; border: 1px solid #444 !important; border-radius: 6px !important; padding: 10px 16px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; white-space: nowrap !important; cursor: pointer !important; font-family: inherit !important; transition: border-color .2s, color .2s !important; }
.btn-sm:hover { border-color: var(--default) !important; color: var(--default) !important; }
.pbr-btn-ghost, #pbr-remove-coupon { background: rgba(239,68,68,.1) !important; color: #ef4444 !important; border: 1px solid rgba(239,68,68,.3) !important; border-radius: 6px !important; padding: 8px 14px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; font-family: inherit !important; white-space: nowrap !important; margin-top: 6px !important; width: 100% !important; box-sizing: border-box !important; transition: background .2s !important; }
.pbr-btn-ghost:hover, #pbr-remove-coupon:hover { background: rgba(239,68,68,.2) !important; }
#pbr-coupon-msg { font-size: 12px; margin-top: 6px; }
#pbr-coupon-msg .text-success { color: #22c55e !important; }
#pbr-coupon-msg .text-danger  { color: #ef4444 !important; }

/* ══════════════════════════════════════════════
   COURSES INDEX
   ══════════════════════════════════════════════ */
.courses-page-section { padding: 80px 0 120px; position: relative; z-index: 1; }
.courses-page-header { margin-bottom: 60px; }
.courses-page-header .main-title { margin-bottom: 0; }
.pbr-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pbr-card { position: relative; z-index: 1; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: row; background: #0f0f0f; transition: border-color .2s, background .2s; min-height: 220px; }
.pbr-card:hover { border-color: color-mix(in srgb, var(--default) 40%, transparent); background: #111; }
.pbr-card-img-wrap { position: relative; width: 200px; flex-shrink: 0; overflow: hidden; display: block; border-right: 1px solid var(--border-color); }
.pbr-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.pbr-card:hover .pbr-card-img { transform: scale(1.06); }
.pbr-card-num { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.7); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #666; }
.pbr-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; min-width: 0; }
.pbr-card-top { flex: 1; }
.pbr-card-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pbr-card-title { display: block; font-size: clamp(18px, 1.8vw, 26px); font-weight: 200; text-transform: uppercase; line-height: 1.15; color: #fff; text-decoration: none; margin-bottom: 10px; transition: color .2s; }
.pbr-card-title:hover { color: var(--default); }
.pbr-card-desc { font-size: 13px; line-height: 20px; color: #666; font-weight: 300; margin: 0; }
.pbr-card-bottom { margin-top: 18px; }
.pbr-card-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.pbr-meta-tag { font-size: 12px; color: #666; display: inline-flex; align-items: center; gap: 5px; }
.pbr-meta-tag i { color: #444; font-size: 11px; }
.pbr-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pbr-card-price { font-size: 22px; font-weight: 700; color: var(--default); letter-spacing: -.5px; line-height: 1; }
.pbr-enroll-btn { background: var(--default); color: #fff !important; padding: 10px 20px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; display: inline-flex; align-items: center; gap: 7px; transition: background .2s; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; border: none; cursor: pointer; }
.pbr-enroll-btn:hover { background: #b84d00; color: #fff !important; }
.pbr-enroll-btn--outline { background: transparent !important; border: 1px solid var(--border-color) !important; color: #aaa !important; }
.pbr-enroll-btn--outline:hover { border-color: #fff !important; color: #fff !important; }
.pbr-courses-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; color: #555; font-size: 18px; font-weight: 300; }
.pbr-courses-empty i { font-size: 48px; color: #333; display: block; margin-bottom: 20px; }

@media(max-width:991px){ .pbr-cards-grid { grid-template-columns: 1fr; } }
@media(max-width:767px){ .pbr-card { flex-direction: column; } .pbr-card-img-wrap { width: 100%; height: 180px; border-right: none; border-bottom: 1px solid var(--border-color); } }

/* ══════════════════════════════════════════════
   COURSE DETAIL PAGE
   ══════════════════════════════════════════════ */
.cdd-hero { position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; margin: 24px 16px 0; border-radius: 16px; }
.cdd-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(4px) brightness(.2); transform: scale(1.08); z-index: 0; }
.cdd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,1) 100%); z-index: 1; }
.cdd-hero-content { position: relative; z-index: 2; padding-top: 60px; padding-bottom: 60px; width: 100%; }
.cdd-title { font-size: clamp(36px, 5vw, 72px); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -2px; margin: 0 auto 16px; color: #fff; max-width: 700px; text-align: center; }
.cdd-desc { font-size: 15px; line-height: 26px; color: #aaa; font-weight: 300; margin: 0 auto 24px; max-width: 600px; text-align: center; }
.cd-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; justify-content: center; flex-wrap: wrap; }
.cd-breadcrumb a { color: #666 !important; text-decoration: none !important; transition: color .2s; }
.cd-breadcrumb a:hover { color: var(--default) !important; }
.cd-breadcrumb i { font-size: 9px; color: #444; line-height: 1; }
.cd-breadcrumb span { color: #aaa !important; }
.cd-meta-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cd-meta-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 6px 12px; font-size: 11px; font-weight: 600; color: #ccc; text-transform: uppercase; letter-spacing: .5px; }
.cd-meta-pill i { color: var(--default); font-size: 10px; }

.cdd-body { background: #0a0a0a; position: relative; z-index: 1; padding: 70px 0 100px; }
.cdd-body-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.cdd-section { margin-bottom: 56px; }
.cdd-section-title { font-size: clamp(20px, 2.5vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: -1px; color: #fff; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--default); line-height: 1; }

.cd-module { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; margin-bottom: 6px; background: #0f0f0f; }
.cd-module-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #141414; border-bottom: 1px solid var(--border-color); gap: 12px; }
.cd-module-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cd-module-title { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-module-count { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .8px; flex-shrink: 0; }
.cd-lessons-wrap { padding: 2px 0; }
.cd-lesson-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #1a1a1a; transition: background .15s; }
.cd-lesson-item:last-child { border-bottom: none; }
.cd-lesson-item:hover { background: #141414; }
.cd-lesson-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cd-lesson-icon { font-size: 13px; flex-shrink: 0; }
.cd-lesson-icon.preview { color: var(--default); }
.cd-lesson-icon.locked  { color: #2a2a2a; }
.cd-lesson-title { font-size: 13px; font-weight: 300; color: #bbb; }

.cdd-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cdd-sidebar { position: sticky; top: 90px; background: #111; border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; overflow: hidden; box-sizing: border-box; width: 100%; }
.cdd-sidebar-price { font-size: 42px; font-weight: 800; color: var(--default); letter-spacing: -2px; line-height: 1; margin-bottom: 18px; }
.cdd-sidebar-divider { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
.cdd-sidebar-includes { display: flex; flex-direction: column; gap: 0; }
.cdd-whatget-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #444; margin-bottom: 12px; }
.cdd-include-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #888; padding: 7px 0; border-bottom: 1px solid #1a1a1a; }
.cdd-include-item:last-child { border-bottom: none; }
.cdd-include-item i { color: var(--default); width: 14px; font-size: 12px; flex-shrink: 0; }

@media(max-width:991px){ .cdd-body-grid { grid-template-columns: 1fr; } .cdd-sidebar { position: static; } .cdd-reviews-grid { grid-template-columns: 1fr; } }
@media(max-width:767px){ .cdd-title { font-size: 32px; letter-spacing: -1px; } .cdd-sidebar-price { font-size: 32px; } }

/* ══════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════ */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: #0a0a0a; }
.auth-card { background: #111; border: 1px solid var(--border-color); border-radius: 16px; padding: 48px 40px; width: 100%; max-width: 440px; box-sizing: border-box; }
.auth-logo { font-size: 1.1rem; font-weight: 700; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; margin-bottom: 32px; }
.auth-logo i, .auth-logo span { color: var(--default); }
.auth-heading { font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: -1px; color: #fff; margin: 0 0 8px; line-height: 1.1; }
.auth-sub { font-size: 14px; color: #666; font-weight: 300; margin: 0 0 28px; line-height: 22px; }
.auth-alert { border-radius: 8px; padding: 12px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-alert--success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #22c55e; }
.auth-alert--error   { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #ef4444; }
.auth-form-group { margin-bottom: 20px; }
.auth-form-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #666; margin-bottom: 8px; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap i { position: absolute; left: 14px; color: #444; font-size: 14px; pointer-events: none; }
.auth-input { width: 100% !important; background: #1a1a1a !important; border: 1px solid #2a2a2a !important; border-radius: 8px !important; color: #fff !important; padding: 13px 14px 13px 40px !important; font-size: 14px !important; font-family: inherit !important; box-sizing: border-box !important; transition: border-color .2s !important; outline: none !important; }
.auth-input::placeholder { color: #444 !important; }
.auth-input:focus { border-color: var(--default) !important; }
.auth-input.is-invalid { border-color: #ef4444 !important; }
.auth-input-error { font-size: 12px; color: #ef4444; margin: 6px 0 0; display: flex; align-items: center; gap: 5px; }
.auth-btn { width: 100%; background: var(--default); color: #fff; border: none; border-radius: 8px; padding: 14px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; box-sizing: border-box; margin-top: 4px; }
.auth-btn:hover { background: #b84d00; }
.auth-footer { text-align: center; font-size: 12px; color: #444; margin-top: 24px; }
.auth-footer a { color: #666; text-decoration: underline; }
.auth-footer a:hover { color: var(--default); }

/* OTP */
.auth-otp-row { display: flex; flex-direction: row; gap: 10px; margin-bottom: 20px; justify-content: center; flex-wrap: nowrap; }
.auth-otp-box { flex: 0 0 52px; width: 52px; height: 56px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; color: #fff; font-size: 22px; font-weight: 700; text-align: center; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color .2s; caret-color: var(--default); }
.auth-otp-box:focus { border-color: var(--default); background: #1f1f1f; }
.auth-otp-footer { margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.auth-resend-row { font-size: 13px; color: #555; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.auth-link-btn { background: none !important; border: none !important; color: var(--default) !important; font-size: 13px !important; cursor: pointer !important; text-decoration: underline !important; font-family: inherit !important; padding: 0 !important; }
.auth-link-btn:hover { color: #b84d00 !important; }
.auth-timer { font-size: 12px; color: #444; }
.auth-back-link { font-size: 13px; color: #555; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.auth-back-link:hover { color: #fff; }

@media(max-width:479px){ .auth-card { padding: 32px 24px; } .auth-heading { font-size: 22px; } }

/* ── ABOUT PAGE ── */
.about-hero { padding: 80px 0 60px; border-bottom: 1px solid var(--border-color); }
.about-title { font-size: clamp(48px, 7vw, 100px); font-weight: 800; text-transform: uppercase; letter-spacing: -3px; line-height: 1; margin: 12px 0 16px; color: #fff; }
.about-subtitle { font-size: 16px; color: #666; font-weight: 300; margin: 0; }

.about-body { padding: 70px 0 100px; background: #0a0a0a; }
.about-grid { display: grid; grid-template-columns: 1fr 300px; gap: 60px; align-items: start; }

.about-bio-block { margin-bottom: 48px; }
.about-bio-text { font-size: 16px; line-height: 28px; color: #aaa; font-weight: 300; margin: 0; }

.about-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 48px; }
.about-stat-item { background: #111; border: 1px solid var(--border-color); border-radius: 10px; padding: 24px 16px; text-align: center; }
.about-stat-num { font-size: 36px; font-weight: 800; color: var(--default); letter-spacing: -1px; line-height: 1; margin-bottom: 8px; }
.about-stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }

.about-skills-block { margin-bottom: 40px; }
.about-skills-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.about-skill-tag { background: #1a1a1a; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #aaa; display: inline-flex; align-items: center; gap: 8px; }
.about-skill-tag i { color: var(--default); font-size: 12px; }

.about-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Sidebar card */
.about-sidebar { position: sticky; top: 90px; }
.about-instructor-card { background: #111; border: 1px solid var(--border-color); border-radius: 12px; padding: 28px; text-align: center; }
.about-instructor-avatar { width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--default) 12%, transparent); border: 2px solid color-mix(in srgb, var(--default) 30%, transparent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.about-instructor-avatar i { color: var(--default); font-size: 32px; }
.about-instructor-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.about-instructor-role { font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: .8px; }
.about-instructor-divider { border: none; border-top: 1px solid var(--border-color); margin: 20px 0; }
.about-instructor-links { display: flex; flex-direction: column; gap: 8px; }
.about-social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #aaa; text-decoration: none; transition: border-color .2s, color .2s; }
.about-social-btn:hover { border-color: #fff; color: #fff; }
.about-instructor-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.about-instructor-info li { font-size: 13px; color: #666; display: flex; align-items: center; gap: 10px; }
.about-instructor-info i { color: var(--default); width: 14px; font-size: 12px; }

@media(max-width:991px){ .about-grid { grid-template-columns: 1fr; } .about-sidebar { position: static; } .about-stats { grid-template-columns: 1fr 1fr; } }
@media(max-width:479px){ .about-stats { grid-template-columns: 1fr 1fr; } .about-title { font-size: 42px; letter-spacing: -2px; } }

/* ── CONTACT PAGE ── */
.contact-page-wrap { padding: 80px 0 100px; background: #0a0a0a; min-height: 100vh; }
.contact-page-header { margin-bottom: 60px; }
.contact-page-grid { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; }

.contact-form-wrap { background: #111; border: 1px solid var(--border-color); border-radius: 12px; padding: 36px; }
.contact-form-group { margin-bottom: 20px; }
.contact-form-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #666; margin-bottom: 8px; }
.contact-textarea { padding: 14px !important; resize: vertical; min-height: 140px; }

.contact-info-card { background: #111; border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.contact-info-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #1a1a1a; text-decoration: none; color: #fff; transition: color .2s; }
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item:hover { color: var(--default); }
.contact-info-icon { width: 42px; height: 42px; border-radius: 8px; background: color-mix(in srgb, var(--default) 10%, transparent); border: 1px solid color-mix(in srgb, var(--default) 20%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-icon i { color: var(--default); font-size: 16px; }
.contact-info-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
.contact-info-value { font-size: 14px; color: #ccc; font-weight: 400; }

@media(max-width:991px){ .contact-page-grid { grid-template-columns: 1fr; } }

/* ── DASHBOARD ── */
.dash-wrap { padding: 80px 0 100px; background: #0a0a0a; min-height: calc(100vh - 80px); }
.dash-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 16px; flex-wrap: wrap; }
.dash-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; text-transform: uppercase; letter-spacing: -2px; color: #fff; margin: 8px 0 0; line-height: 1; }
.dash-empty { text-align: center; padding: 80px 0; color: #555; }
.dash-empty i { font-size: 48px; color: #333; display: block; margin-bottom: 16px; }
.dash-empty p { font-size: 16px; margin-bottom: 24px; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dash-card { background: #111; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; transition: border-color .2s; }
.dash-card:hover { border-color: color-mix(in srgb, var(--default) 40%, transparent); }
.dash-card-thumb-wrap { display: block; position: relative; height: 180px; overflow: hidden; }
.dash-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.dash-card:hover .dash-card-thumb { transform: scale(1.04); }
.dash-card-completed-badge { position: absolute; top: 10px; right: 10px; background: rgba(34,197,94,.9); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.dash-card-body { padding: 20px; }
.dash-card-title { display: block; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; margin-bottom: 14px; line-height: 1.3; transition: color .2s; }
.dash-card-title:hover { color: var(--default); }
.dash-progress-wrap { margin-bottom: 14px; }
.dash-progress-bar { height: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.dash-progress-fill { height: 100%; background: var(--default); border-radius: 2px; transition: width .5s; }
.dash-progress-label { font-size: 11px; color: #555; }
.dash-card-stats { display: flex; gap: 16px; margin-bottom: 16px; }
.dash-stat { font-size: 12px; color: #555; display: flex; align-items: center; gap: 5px; }
.dash-stat i { color: #333; font-size: 11px; }
.dash-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-icon-btn { background: transparent; border: 1px solid var(--border-color); color: #555; border-radius: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; font-size: 13px; }
.dash-icon-btn:hover { border-color: var(--default); color: var(--default); }

/* Orders */
.dash-orders-list { display: flex; flex-direction: column; gap: 4px; }
.dash-order-row { background: #111; border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; padding: 20px 24px; gap: 20px; transition: border-color .2s; }
.dash-order-row:hover { border-color: rgba(220,95,0,.3); }
.dash-order-info { flex: 1; min-width: 0; }
.dash-order-num { font-size: 12px; color: #555; font-family: monospace; margin-bottom: 4px; }
.dash-order-course { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.dash-order-date { font-size: 12px; color: #555; }
.dash-order-amount { font-size: 18px; font-weight: 700; color: var(--default); flex-shrink: 0; }
.dash-order-status { flex-shrink: 0; }
.dash-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dash-badge--green { background: rgba(34,197,94,.1); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.dash-badge--red   { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.dash-badge--yellow{ background: rgba(234,179,8,.1); color: #eab308; border: 1px solid rgba(234,179,8,.3); }
.dash-order-action { flex-shrink: 0; }

/* Player page */
.pbr-player-page { background: #0a0a0a; min-height: calc(100vh - 80px); padding: 24px 0 60px; }
.pbr-player-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.pbr-player-main { min-width: 0; }
.pbr-lesson-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
.pbr-lesson-desc { font-size: 14px; color: #666; line-height: 24px; margin-top: 8px; }
.pbr-save-indicator { font-size: 12px; color: #22c55e; margin-left: 12px; transition: opacity .3s; opacity: 0; }
.pbr-player-sidebar { background: #111; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; position: sticky; top: 90px; max-height: calc(100vh - 120px); overflow-y: auto; }
.pbr-sidebar-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #555; padding: 16px 16px 8px; border-bottom: 1px solid var(--border-color); margin: 0; }
.pbr-sidebar-module { padding: 0; }
.pbr-sidebar-module-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #444; padding: 12px 16px 6px; }
.pbr-sidebar-lesson { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: #777; text-decoration: none; border-bottom: 1px solid #1a1a1a; transition: background .15s, color .15s; gap: 8px; }
.pbr-sidebar-lesson:hover { background: #1a1a1a; color: #ccc; }
.pbr-sidebar-lesson.active { background: color-mix(in srgb, var(--default) 10%, transparent); color: var(--default); border-left: 3px solid var(--default); }
.pbr-sidebar-lesson.completed { color: #22c55e; }
.pbr-sidebar-lesson.completed i { color: #22c55e; }

@media(max-width:991px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .pbr-player-layout { grid-template-columns: 1fr; }
  .pbr-player-sidebar { position: static; max-height: 400px; }
}
@media(max-width:767px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-order-row { flex-wrap: wrap; gap: 12px; }
}

/* Coupon row height fix */
.pbr-coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.pbr-coupon-row .pbr-input {
  padding: 12px 14px !important;
  height: 46px !important;
  box-sizing: border-box !important;
}
.pbr-coupon-row .btn-sm {
  height: 46px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Phone large display in footer */
.phone-link--large {
    display: block;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    margin: 12px 0 24px;
    letter-spacing: -0.5px;
}
.phone-link--large i {
    color: var(--cc-accent);
}

/* ── Nav user dropdown ─────────────────────────────── */
.nav-user-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 50px;
    color: #fff;
    padding: 6px 12px 6px 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s, background .2s;
}
.nav-user-btn:hover { border-color: var(--cc-accent); background: #1a1a1a; }

.nav-user-chevron {
    font-size: 9px;
    color: #666;
    transition: transform .2s;
}
.nav-user-chevron.open { transform: rotate(180deg); }

.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cc-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-user-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.nav-user-dropdown {
    position: static; /* let menu escape header overflow */
}

.nav-user-menu {
    display: none;
    position: fixed; /* fixed escapes any overflow:hidden parent */
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    min-width: 220px;
    padding: 6px;
    z-index: 9999;
    box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.nav-user-menu.open { display: block; }

.nav-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
}
.nav-user-info strong { display: block; font-size: 13px; color: #fff; }
.nav-user-info small  { display: block; font-size: 11px; color: #555; margin-top: 1px; }

.nav-user-divider { height: 1px; background: #1e1e1e; margin: 4px 0; }

.nav-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #bbb;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.nav-user-item i {
    width: 16px;
    text-align: center;
    color: #555;
    font-size: 13px;
    transition: color .15s;
}
.nav-user-item:hover { background: #1a1a1a; color: #fff; }
.nav-user-item:hover i { color: var(--cc-accent); }

.nav-user-item--danger:hover { background: #1a0a0a; color: #f87171; }
.nav-user-item--danger:hover i { color: #f87171; }

/* ── Profile page ──────────────────────────────────── */
.profile-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    padding: 32px 0 60px;
}

.profile-avatar-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 20px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cc-accent);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.profile-avatar-info strong { font-size: 16px; color: #fff; }
.profile-avatar-info span   { font-size: 13px; color: #666; }

.profile-badge {
    display: inline-block;
    font-size: 11px !important;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa !important;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 2px;
}

.profile-form-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 24px;
}

.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #aaa;
    margin-bottom: 20px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.profile-field label {
    font-size: 13px;
    color: #aaa;
    font-weight: 600;
}
.profile-field label small { color: #555; font-weight: 400; }

.profile-input {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    transition: border-color .2s;
}
.profile-input:focus {
    outline: none;
    border-color: var(--cc-accent);
}
.profile-input--disabled {
    opacity: .4;
    cursor: not-allowed;
}
.profile-input.is-invalid { border-color: #e74c3c; }
.profile-error { font-size: 12px; color: #e74c3c; }

.profile-danger-card { border-color: #2a1a1a; }

/* ── Nav user item overrides (fix global `a` reset conflict) ── */
a.nav-user-item,
a.nav-user-item:visited {
    color: #bbb !important;
    text-decoration: none !important;
    display: flex !important;
}
a.nav-user-item:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}
a.nav-user-item:hover i {
    color: var(--cc-accent) !important;
}

@media (max-width: 767px) {
    /* Root fix — nothing wider than screen */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; width: 100%; }

    /* Header wrapper */
    .header {
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Header inner box */
    .header-inner {
        padding: 10px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    /* Main container — must not overflow */
    .main-container {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* pbr-main wrapper */
    .pbr-main {
        width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 767px) {
    .nav-enroll-text { display: none; }
    .nav-enroll { padding: 10px 12px; }
}

@media (max-width: 767px) {
    /* Hide name in user button — avatar only */
    .nav-user-name { display: none; }
    .nav-user-btn { padding: 4px; border-radius: 50%; }
    .nav-user-chevron { display: none; }

    /* Root overflow fix */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Fix every section that can overflow */
    .header, .header-inner, .main-container,
    .pbr-main, .hero-section, .hero-grid,
    .services-section, .numbers-section,
    .who-we-are-section, .work-section,
    .testimonials-section, .blog-section,
    .footer, .dash-wrap, .cdd-hero,
    .cdd-body, .courses-page-section,
    .auth-wrap, .about-body, .contact-page-wrap {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Hero big text is the main culprit */
    .hero-big-col { display: none !important; }

    /* Fix any element wider than screen */
    .hero-partners-moving { width: max-content; }
    .hero-partners { overflow: hidden !important; }
}

@media (max-width: 767px) {
    .hero-section,
    .hero-grid,
    .hero-mid,
    .hero-cta-group,
    .hero-cta-secondary { 
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* This is likely the culprit — paragraph text overflow */
    .hero-paragraph,
    .hero-under-text {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* partners marquee overflows */
    .hero-partners {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
}

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES
   ══════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Prevent horizontal overflow ── */
    html, body { overflow-x: hidden !important; }
    * { box-sizing: border-box !important; max-width: 100%; }

    /* ── Hero grid column fix ── */
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 32px 0 0 !important;
    }
    .hero-mid {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .hero-paragraph {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
    .hero-cta-group {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    .hero-under-text {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ── Logo smaller ── */
    .logo-text {
        font-size: 0.85rem !important;
        gap: 6px !important;
    }
    .logo-text i { font-size: 14px !important; }

    /* ── Header ── */
    .header { padding-top: 16px; padding-bottom: 8px; }
    .header-inner {
        padding: 12px 16px;
        gap: 10px;
        flex-wrap: nowrap;
        border-radius: 8px;
    }

    /* Hide nav menu on mobile (already hidden via existing rule) */
    .main-menu { display: none !important; }

    /* Logo shrink */
    .logo-text { font-size: 1rem; }

    /* Nav right side — stack or shrink */
    .nav-user-wrap { gap: 6px; }

    /* Dashboard button — icon only on mobile */
    .nav-enroll {
        padding: 9px 14px;
        font-size: 11px;
        letter-spacing: .4px;
    }
    .nav-enroll span { display: none; } /* hide text if you want icon only */

    /* User button — shrink */
    .nav-user-btn {
        font-size: 12px;
    }
    .nav-user-btn > span { display: none; } /* hide name, show avatar only */

    /* ── Main container ── */
    .main-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }

    /* ── Hero ── */
    .hero-grid {
        grid-template-columns: 1fr !important;
        padding-top: 40px !important;
        gap: 16px !important;
    }
    .hero-big-col { display: none !important; } /* hide MAKE / HITS text on mobile */
    .hero-mid { padding: 0 !important; }
    .hero-cta-group { flex-direction: column; align-items: flex-start; }

    /* ── Numbers ── */
    .numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .numbers-item { min-height: 160px; padding: 16px; }
    .number-text-big { font-size: 40px; line-height: 40px; }

    /* ── Courses home ── */
    .services-section { padding-top: 60px; }
    .service-img { display: none !important; }
    .service-text { font-size: 18px !important; white-space: normal !important; }
    .service-left { padding: 16px 0; }

    /* ── Mission ── */
    .mission-grid { grid-template-columns: 1fr !important; }
    .mission-img { display: none; }

    /* ── Work ── */
    .work-list { grid-template-columns: 1fr !important; }

    /* ── Testimonials ── */
    .testimonials-grid { grid-template-columns: 1fr !important; }

    /* ── Blog ── */
    .blog-item { flex-direction: column; align-items: flex-start; padding: 20px; }
    .blog-image { width: 100% !important; height: 160px !important; }

    /* ── Footer ── */
    .inner-footer { padding: 48px 20px; }
    .phone-link { font-size: 32px !important; letter-spacing: -1px; }
    .mail-link { font-size: 20px; }
    .socials { flex-wrap: wrap; gap: 10px; justify-content: center; }
    .social-link { margin-right: 0; font-size: 13px; padding: 8px 14px; }
    .copyright { display: flex; flex-direction: column; gap: 12px; text-align: center; }

    /* ── Course cards ── */
    .pbr-cards-grid { grid-template-columns: 1fr !important; }
    .pbr-card { flex-direction: column !important; }
    .pbr-card-img-wrap { width: 100% !important; height: 180px !important; border-right: none !important; border-bottom: 1px solid var(--border-color); }

    /* ── Course detail ── */
    .cdd-hero { margin: 12px 8px 0; border-radius: 10px; min-height: 300px; }
    .cdd-title { font-size: 28px !important; letter-spacing: -1px; }
    .cdd-body-grid { grid-template-columns: 1fr !important; gap: 24px; }
    .cdd-sidebar { position: static !important; }
    .cdd-sidebar-price { font-size: 32px !important; }
    .cdd-reviews-grid { grid-template-columns: 1fr !important; }

    /* ── Dashboard ── */
    .dash-wrap { padding: 48px 0 60px; }
    .dash-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dash-title { font-size: 28px !important; }
    .dash-grid { grid-template-columns: 1fr !important; }
    .dash-order-row { flex-wrap: wrap; gap: 10px; }

    /* ── Player ── */
    .pbr-player-layout { grid-template-columns: 1fr !important; }
    .pbr-player-sidebar { position: static !important; max-height: 360px; }

    /* ── About ── */
    .about-grid { grid-template-columns: 1fr !important; }
    .about-sidebar { position: static !important; }
    .about-stats { grid-template-columns: 1fr 1fr !important; }
    .about-title { font-size: 40px !important; letter-spacing: -2px; }

    /* ── Contact ── */
    .contact-page-grid { grid-template-columns: 1fr !important; }

    /* ── Auth ── */
    .auth-card { padding: 28px 20px; }
    .auth-otp-row { gap: 6px; }
    .auth-otp-box { flex: 0 0 44px; width: 44px; height: 50px; font-size: 18px; }

    /* ── Profile ── */
    .profile-wrap { padding: 24px 0 48px; }

    /* ── Nav dropdown ── */
    .nav-user-menu {
        min-width: 200px !important;
    }
}

@media (max-width: 479px) {
    .numbers-grid { grid-template-columns: 1fr 1fr !important; }
    .hero-big-text { font-size: 48px !important; }
    .main-title { font-size: 28px !important; line-height: 1 !important; }
    .nav-enroll { padding: 8px 10px; font-size: 10px; }
    .auth-otp-box { flex: 0 0 38px; width: 38px; height: 46px; font-size: 16px; }
}

/* ── Hamburger ── */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Mobile drawer ── */
.nav-mobile-drawer {
    display: none;
    flex-direction: column;
    background: #111;
    border: 1px solid #222;
    border-radius: 0 0 10px 10px;
    padding: 8px;
    margin-top: 8px;
}
.nav-mobile-drawer.open { display: flex; }

.nav-mobile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #ccc;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
.nav-mobile-item i { color: #555; width: 16px; font-size: 13px; }
.nav-mobile-item:hover,
.nav-mobile-item.active { background: #1a1a1a; color: #fff; }
.nav-mobile-item.active i,
.nav-mobile-item:hover i { color: var(--cc-accent); }
.nav-mobile-item--danger { color: #f87171 !important; }
.nav-mobile-item--danger i { color: #f87171 !important; }
.nav-mobile-item--danger:hover { background: #1a0a0a !important; }

.nav-mobile-divider { height: 1px; background: #1e1e1e; margin: 4px 0; }

@media (max-width: 767px) {
    .nav-hamburger { display: flex; }
    .main-menu { display: none !important; }
    /* Hide desktop user dropdown on mobile — drawer handles it */
    .nav-user-wrap { display: none !important; }
}