@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
/* Layout: Charcoal Blue hero with order card, then light sections on a 1160px grid; 60% light neutral, 30% Charcoal Blue, 10% Old Gold (actions only).
   System: every spacing value is a multiple of 4px; cards 25px radius; inner pieces 16px radius; one shared shadow; tap targets 44px minimum; type in rem so it scales with the reader's text size. */
:root{
  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;
  --r-card:25px; --r-inner:16px;
  --tap:44px;

  --blue:#2E5266; --blue-deep:#21404F; --slate:#6E8898; --steel:#9FB1BC; --dust:#D3D0CB;
  --gold:#E2C044; --gold-hover:#D3B033; --on-gold:#1C3341;
  --bg:#F7F8F8; --surface:#FFFFFF; --band:#ECEAE6;
  --fg:#1C3341; --muted:#4F6A79; --line:#D6DDE1;
  --on-blue:#FFFFFF; --on-blue-muted:#C9D5DC; --on-blue-line:rgba(255,255,255,.16); --why-card:#2A4C5E;
  --mark:#2E5266; --mark-cut:#FFFFFF; --field:#FFFFFF; --tile:#E3EAEE; --icon:#2E5266; --num:#2E5266;
  --error:#A23B2A;
  --shadow-c:rgba(20,40,52,.16);
  --shadow:0 12px 32px var(--shadow-c);
  --font-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111E26; --surface:#182A35; --band:#15252F; --fg:#E7EDF0; --muted:#A9BAC4; --line:#2A4251;
    --blue-deep:#1A3241; --why-card:#22404F;
    --mark:#9FB1BC; --mark-cut:#111E26; --field:#111E26; --tile:#22394A; --icon:#9FB1BC; --num:#9FB1BC;
    --error:#E58A78; --gold-hover:#EDCD58; --shadow-c:rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111E26; --surface:#182A35; --band:#15252F; --fg:#E7EDF0; --muted:#A9BAC4; --line:#2A4251;
  --blue-deep:#1A3241; --why-card:#22404F;
  --mark:#9FB1BC; --mark-cut:#111E26; --field:#111E26; --tile:#22394A; --icon:#9FB1BC; --num:#9FB1BC;
  --error:#E58A78; --gold-hover:#EDCD58; --shadow-c:rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s24)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-0.02em}
h2{font-size:clamp(min(2rem,9vw),4.2vw,3rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em}
p{margin:0}
form{margin:0}
img{height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:var(--s1)}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.wa{fill:currentColor;stroke:none}
.channel svg.big.wa{color:#25D366}

.wrap{max-width:1160px;margin:0 auto;padding-left:max(var(--s4),env(safe-area-inset-left,0px));padding-right:max(var(--s4),env(safe-area-inset-right,0px))}
section{padding-block:var(--s32)}
.sec-head{display:grid;gap:var(--s4);margin-bottom:var(--s16);max-width:44rem}
.lede{color:var(--muted);max-width:60ch;font-size:1.0625rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s20);align-items:start}
.two > *{min-width:0}
.stack{display:grid;gap:var(--s6);align-content:start}

/* Shared shapes */
.card{background:var(--surface);color:var(--fg);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--s8)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:var(--s3) var(--s5);border-radius:var(--r-inner);font:600 1rem/1.25 var(--font-body);text-align:center;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-hover)}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.btn svg.i{width:24px;height:24px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.textlink{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;text-decoration:none;color:var(--fg);border-bottom:2px solid var(--gold)}
.textlink:hover{color:var(--blue)}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);padding-block:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);text-decoration:none;font:800 1.25rem/1.1 var(--font-display);letter-spacing:-0.02em;color:var(--fg)}
.brand svg{width:44px;height:36px;flex:none}
.brand .pro{color:var(--icon)}
nav.main{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-left:auto}
nav.main a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--muted)}
nav.main a:hover{color:var(--fg)}
.menu-btn{display:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-inner);color:var(--fg);cursor:pointer}

/* Hero */
.hero{background:var(--blue);color:var(--on-blue);padding-block:var(--s16) var(--s24)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s16);align-items:start}
.hero-copy{display:grid;gap:var(--s6);align-content:start;min-width:0}
.hero h1{font-size:clamp(min(2.5rem,11vw),6vw,4.75rem);font-weight:800;letter-spacing:-0.035em;line-height:1}
.hero h1 span{display:block}
.hero .lede{color:var(--on-blue-muted);font-size:1.125rem;max-width:48ch}
.hero .btn-line{color:var(--on-blue)}
.promises{list-style:none;margin:0;padding:var(--s6) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:var(--s3) var(--s5);border-top:1px solid var(--on-blue-line);font-size:.9375rem}
.promises li{display:flex;gap:var(--s2);align-items:center;font-weight:500;line-height:1.3}
.promises svg{color:var(--gold)}
.hero-art{width:100%;max-width:400px;filter:drop-shadow(var(--shadow))}

/* Order card */
.order{display:grid;gap:var(--s5);min-width:0}
.order h2{font-size:1.625rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:var(--s4)}
.field{display:grid;gap:var(--s2);min-width:0}
.field label{font-size:.875rem;font-weight:600}
.field label span{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--fg);background:var(--field);border:1px solid var(--line);border-radius:var(--r-inner);min-height:var(--tap);padding:var(--s3) var(--s4);width:100%;min-width:0}
textarea{resize:vertical;min-height:112px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--icon);outline-offset:0;border-color:var(--icon)}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--s3)}
.actions .btn-line{color:var(--fg)}
.form-error{color:var(--error);font-weight:600;font-size:.9375rem}
.invalid{border-color:var(--error)!important}

/* Platforms */
.platforms{display:grid;gap:var(--s3);padding-top:var(--s6);border-top:1px solid var(--on-blue-line)}
.platforms p{color:var(--on-blue-muted);font-size:.875rem}
.platforms ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
.platforms li{font:700 1rem/1.3 var(--font-display);color:#FFFFFF;letter-spacing:-0.01em}

/* Services */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1.5fr) auto;gap:var(--s4) var(--s12);align-items:center;padding-block:var(--s8);border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(1.25rem,2.2vw,1.5rem)}
.svc p{color:var(--muted)}
.svc-ic{width:128px;height:104px;display:grid;place-items:center;border-radius:var(--r-inner);background:var(--tile);padding:var(--s3);transition:background .2s}
.svc-ic img{max-width:100%;max-height:80px;width:auto;filter:drop-shadow(var(--shadow))}
.svc:hover .svc-ic{background:color-mix(in srgb,var(--gold) 35%,var(--tile))}

/* Exam prep */
.exam{background:var(--band)}
.feature-art{width:100%;max-width:400px;filter:drop-shadow(var(--shadow))}
.fine{font-size:.9375rem;color:var(--muted)}
.exam-steps{padding:0;overflow:hidden}
.exam-steps > div{display:grid;grid-template-columns:var(--s10) minmax(0,1fr);gap:var(--s4);padding:var(--s6) var(--s8);border-bottom:1px solid var(--line)}
.exam-steps > div:last-child{border-bottom:0}
.exam-steps b{font:800 1.5rem/1.2 var(--font-display);color:var(--num)}
.exam-steps h3{font-size:1.125rem;margin-bottom:var(--s1)}
.exam-steps p{color:var(--muted);font-size:1rem}

/* How to order */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--s12) var(--s8)}
.step{display:grid;gap:var(--s3);align-content:start;padding-top:var(--s6);border-top:1px solid var(--line)}
.step-top{display:flex;justify-content:space-between;align-items:center}
.step-top svg{width:28px;height:28px;color:var(--icon)}
.step .n{font:800 3rem/1 var(--font-display);color:var(--num);letter-spacing:-0.04em}
.step p{color:var(--muted)}
.pay{margin-top:var(--s12);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);color:var(--muted)}
.pay strong{color:var(--fg)}

/* Why us */
.why{background:var(--blue-deep);color:var(--on-blue)}
.why .lede{color:var(--on-blue-muted)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--s6)}
.why-item{background:var(--why-card);color:var(--on-blue);display:grid;gap:var(--s3);align-content:start;padding:var(--s6)}
.why-item .ic{width:var(--s12);height:var(--s12);display:grid;place-items:center;border-radius:var(--r-inner);background:var(--blue-deep);color:var(--gold)}
.why-item .ic svg{width:24px;height:24px}
.why-item h3{font-size:1.125rem}
.why-item p{color:var(--on-blue-muted);font-size:1rem}
.stats{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s20);margin-top:var(--s16);padding-top:var(--s10);border-top:1px solid var(--on-blue-line)}
.stats div{display:grid;gap:var(--s1)}
.stats b{font:800 clamp(2.5rem,5vw,3.5rem)/1 var(--font-display);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.stats span{color:var(--on-blue-muted)}

/* About */
.about p{color:var(--muted)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s3);color:var(--fg)}
.checks svg{color:var(--icon);margin-top:var(--s1)}

/* Subjects */
.subjects{background:var(--band)}
.subj{columns:4 11rem;column-gap:var(--s8);margin:0;padding:0;list-style:none}
.subj li{break-inside:avoid;padding-block:var(--s2);font-weight:500}
.subjects .more{margin-top:var(--s8);color:var(--muted)}

/* FAQ */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s5);align-items:center;min-height:var(--tap);padding-block:var(--s6);font:700 1.125rem/1.3 var(--font-display)}
summary::-webkit-details-marker{display:none}
summary svg{transition:transform .2s}
details[open] summary svg{transform:rotate(45deg)}
details p{color:var(--muted);padding:0 var(--s10) var(--s6) 0;max-width:62ch}

/* Contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.channels{display:grid;gap:var(--s4)}
.channel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s5) var(--s6);background:var(--bg)}
.channel svg.big{width:32px;height:32px;color:var(--icon)}
.channel small{display:block;color:var(--muted);font-size:.875rem}
.channel .val{font-weight:700;font-size:1.0625rem;user-select:all;overflow-wrap:anywhere}
.copy{min-height:var(--tap);min-width:var(--tap);padding:var(--s2) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-inner);font:600 .875rem var(--font-body);color:var(--fg);cursor:pointer}
.copy:hover{border-color:var(--fg)}
.contact-art{width:100%;max-width:200px;filter:drop-shadow(var(--shadow))}
.contact form{display:grid;gap:var(--s4)}

/* Footer */
.site-foot{position:relative;overflow:hidden;isolation:isolate;background:#21404F;color:#F0F4F6;padding-block:var(--s32)}
.foot-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.foot-main{display:flex;flex-direction:column;gap:var(--s10)}
.foot-brand{display:grid;gap:var(--s6);align-content:start;max-width:22rem}
.foot-brand p{color:#F0F4F6}
.site-foot .brand{color:#FFFFFF}
.site-foot .brand svg{--mark:#FFFFFF;--mark-cut:#2E5266}
.site-foot .brand .pro{color:var(--gold)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--s8) var(--s20);flex:1 1 auto;max-width:44rem}
.foot-h{font:700 1rem/1.3 var(--font-display);letter-spacing:0;color:#FFFFFF;margin:0 0 var(--s2)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid}
.foot-cols a,.foot-legal{display:inline-flex;align-items:center;min-height:var(--tap);color:#F0F4F6;text-decoration:none;font-weight:500;font-size:.9375rem}
.foot-cols a:hover,.foot-legal:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:var(--s1)}
.foot-bottom{margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:var(--s2);font-size:.875rem;font-weight:500;color:#F0F4F6}
@media (min-width:64em){.foot-main{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:var(--s20)}}
@media (min-width:48em){.foot-bottom{flex-direction:row;justify-content:space-between;align-items:center}}

/* Floating WhatsApp + toast */
.float-wa{min-height:56px;padding-inline:var(--s6);font-size:1.0625rem;position:fixed;right:calc(var(--s5) + env(safe-area-inset-right,0px));bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:var(--shadow);transition:opacity .2s,transform .2s}
.float-wa svg.i{width:28px;height:28px}
.float-wa.away{opacity:0;transform:translateY(var(--s3));pointer-events:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s24) + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:var(--s3) var(--s4);border-radius:var(--r-inner);box-shadow:var(--shadow);font-weight:600;z-index:70;max-width:calc(100% - var(--s8))}

/* Motion: scroll reveals and floating clay icons */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(var(--s6));transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .reveal.in{opacity:1;transform:none}
  .float{animation:float 6s ease-in-out infinite;animation-delay:var(--fd,0s);will-change:transform}
  @keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(calc(var(--s3) * -1)) rotate(-2deg)}}
}

/* ---- Responsive (em breakpoints follow the reader's text size) ---- */
@media (max-width:64em){
  nav.main{display:none;flex-basis:100%;flex-direction:column;margin-left:0;border-top:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-flex}
}
@media (max-width:60em){
  section{padding-block:var(--s24)}
  .hero .wrap,.two{grid-template-columns:minmax(0,1fr);gap:var(--s12)}
  .hero-art{max-width:300px;justify-self:center}
  .svc{grid-template-columns:96px minmax(0,1fr);gap:var(--s2) var(--s4);align-items:start}
  .svc-ic{width:96px;height:80px;grid-row:span 3}
  .svc-ic img{max-height:56px}
  .svc p,.svc .textlink{grid-column:2}
  .svc .textlink{justify-self:start}
}
@media (max-width:37.5em){
  body{font-size:1rem}
  .top .wrap > .btn-gold{display:none}
  .brand{font-size:1.125rem}
  section{padding-block:var(--s16)}
  .hero{padding-block:var(--s10) var(--s16)}
  .hero-art{display:none}
  .hero .btn-row .btn{flex:1 1 100%}
  .card{padding:var(--s6) var(--s4)}
  .sec-head{margin-bottom:var(--s10)}
  .svc{padding-block:var(--s6)}
  .exam-steps{padding:0}
  .exam-steps > div{padding:var(--s5) var(--s4);gap:var(--s3);grid-template-columns:var(--s8) minmax(0,1fr)}
  .subj{columns:2}
  details p{padding-right:0}
  .channel{grid-template-columns:auto minmax(0,1fr);padding:var(--s4);gap:var(--s3)}
  .channel .copy{grid-column:2;justify-self:start}
  .contact-art{display:none}
  .feature-art{max-width:240px;justify-self:center}
  section{padding-block:var(--s12)}
  .sec-head{margin-bottom:var(--s8)}
  .hero h1{font-size:clamp(min(2.25rem,10vw),9vw,2.75rem)}
  .svc{grid-template-columns:72px minmax(0,1fr);padding-block:var(--s5);column-gap:var(--s3)}
  .svc-ic{width:72px;height:64px;padding:var(--s2)}
  .svc-ic img{max-height:48px}
  .svc h3{font-size:1.125rem}
  .svc p{font-size:.9375rem}
  .why-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--s3)}
  .why-item{padding:var(--s4);gap:var(--s2)}
  .why-item .ic{width:var(--s10);height:var(--s10)}
  .why-item h3{font-size:1rem}
  .why-item p{font-size:.875rem}
  .stats{gap:var(--s6) var(--s10);margin-top:var(--s10);padding-top:var(--s8)}
  .steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--s8) var(--s4)}
  .step{padding-top:var(--s4);gap:var(--s2)}
  .step .n{font-size:2.25rem}
  .step h3{font-size:1.0625rem}
  .step p{font-size:.9375rem}
  .pay{margin-top:var(--s8)}
  .site-foot{padding-block:var(--s16) var(--s24)}
  .foot-bottom{margin-top:var(--s10)}
  .foot-cols{gap:var(--s6) var(--s8)}
  .float-wa span{display:none}
  .float-wa{width:64px;height:64px;padding:0}
  .float-wa svg.i{width:32px;height:32px}
}

/* Legal and error pages */
.legal .wrap{max-width:760px;display:grid;gap:var(--s4)}
.legal h1{font-size:clamp(min(2.25rem,10vw),5vw,3.25rem);font-weight:800;letter-spacing:-0.03em}
.legal h2{font-size:1.5rem;margin-top:var(--s8)}
.legal ul{margin:0;padding-left:var(--s6);display:grid;gap:var(--s2)}
.legal p,.legal li{color:var(--muted)}
.legal a{color:var(--fg);font-weight:600}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:.9375rem;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--fg)}
.notfound .wrap{display:grid;gap:var(--s6);justify-items:start}
.notfound h1{font-size:clamp(min(2.5rem,11vw),6vw,4rem);font-weight:800;letter-spacing:-0.035em}
.notfound img{width:100%;max-width:320px;filter:drop-shadow(var(--shadow))}