/* ==========================================================================
   PrintBump — Design System v4
   Adaptive light/dark, Swahili-first, touch-optimised.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TYPEFACE — Ubuntu, self-hosted from ./fonts (the house font used across
   every ShotusPro mini-app). Weights are declared as ranges so that any value
   the design uses resolves to a real face instead of a synthetic one:
       100–350 → Light      351–450 → Regular
       451–550 → Medium     551–900 → Bold
   font-display:swap keeps text readable immediately on slow connections.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-Light.ttf') format('truetype');
  font-weight: 100 350;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================== 
   PRINTBUMP V5 — THE LIVING PRINT STUDIO
   ========================================================================== */
:root { --ink-blue:#063b78; --ink-deep:#031b39; --paper:#f4f0e5; --signal:#ff5a36; --fresh:#b9ff66; --rule:rgba(3,27,57,.18); }
html { scroll-behavior:smooth; }
body { background:var(--paper); }
#app { max-width:none; overflow:clip; }
.topbar { position:fixed; inset:0 0 auto; width:100%; max-width:none; height:76px; padding:0 clamp(20px,4vw,64px); z-index:100; border:0; background:linear-gradient(180deg,rgba(3,27,57,.72),transparent); color:#fff; transition:background .25s,box-shadow .25s; }
.topbar.is-scrolled { background:rgba(3,27,57,.94); box-shadow:0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px); }
.brand-mark { background:var(--signal); color:#fff; border-radius:4px; transform:rotate(-3deg); }
.brand-name { color:#fff; font-size:1.15rem; letter-spacing:-.04em; }
.desktop-nav { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:34px; }
.desktop-nav a { color:rgba(255,255,255,.82); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.desktop-nav a:hover { color:var(--fresh); }

/* Store — a quiet retail shelf cut into the print editorial flow. */
.store-v5{padding:110px max(24px,calc((100vw - 1180px)/2));background:#fff;color:#0b0c0f;border-block:1px solid #deded8}
.store-head{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-bottom:54px}.store-head h2{margin:8px 0 0;font-size:clamp(3rem,6vw,6.4rem);line-height:.84;letter-spacing:-.065em}.store-head>div:last-child{max-width:410px;justify-self:end}.store-head p{font-size:1rem;line-height:1.65;color:#666;margin:0 0 22px}
.store-bag-button{border:0;border-radius:999px;background:#111;color:#fff;padding:12px 18px;font-weight:800}.store-bag-button span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:8px;border-radius:50%;background:#f97316;color:#111}
.store-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.store-product{position:relative;min-height:420px;padding:0;border:1px solid #e2e2dc;border-radius:5px;background:#f5f5f1;overflow:hidden;text-align:left;color:#111}.store-product-media{display:grid;place-items:center;height:245px;background:#ecece6;overflow:hidden}.store-product-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.store-product:hover img{transform:scale(1.035)}.store-product-placeholder{font-size:4rem;font-weight:900;color:#d0d0c8}.store-product-copy{padding:20px}.store-product-copy small{font-size:.62rem;font-weight:800;letter-spacing:.13em;color:#f97316}.store-product-copy h3{margin:8px 0;font-size:1.25rem;letter-spacing:-.03em}.store-product-copy p{height:40px;margin:0 0 18px;overflow:hidden;color:#6b7280;font-size:.78rem;line-height:1.5}.store-product-buy{display:flex;align-items:center;justify-content:space-between}.store-product-buy strong{font-size:.9rem}.store-product-buy button{width:38px;height:38px;border:0;border-radius:50%;background:#f97316;color:#111;font-size:1.25rem;font-weight:900}.store-empty{grid-column:1/-1;padding:50px;border:1px dashed #ccc;text-align:center;color:#777}
.store-cart-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(10,10,10,.48);opacity:0;pointer-events:none;transition:opacity .25s}.store-cart-backdrop.open{opacity:1;pointer-events:auto}.store-cart{position:fixed;inset:0 0 0 auto;z-index:1201;width:min(460px,100%);padding:26px;background:#fff;color:#111;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s cubic-bezier(.22,1,.36,1)}.store-cart.open{transform:none}.store-cart-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:20px}.store-cart-head small,.store-checkout-kicker{font-size:.6rem;letter-spacing:.14em;color:#f97316;font-weight:900}.store-cart-head h2{margin:4px 0 0;font-size:2rem}.store-cart-head button{border:0;background:none;font-size:2rem}.store-cart-items{flex:1;overflow:auto;padding:15px 0}.store-cart-row{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #eee}.store-cart-row img,.store-cart-thumb{width:54px;height:54px;object-fit:cover;background:#eee;border-radius:5px}.store-cart-row h4{margin:0 0 5px}.store-cart-row small{color:#777}.store-cart-qty{display:flex;align-items:center;gap:8px}.store-cart-qty button{border:1px solid #ddd;background:#fff;width:28px;height:28px;border-radius:50%}.store-cart-foot{border-top:1px solid #ddd;padding-top:18px}.store-cart-foot>div,.store-checkout-total{display:flex;justify-content:space-between;margin-bottom:16px}.store-cart-foot>button,.store-pay-button{width:100%;padding:15px;border:0;border-radius:5px;background:#f97316;color:#111;font-weight:900}.store-checkout-card{max-width:600px}.store-checkout-card h2{font-size:2rem;margin:8px 0 24px}.store-checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.store-checkout-grid .full{grid-column:1/-1}.store-fulfilment{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.store-fulfilment button{padding:12px;border:1px solid #ddd;background:#fff;border-radius:5px;font-weight:800}.store-fulfilment button.selected{background:#111;color:#fff;border-color:#111}.location-capture{width:100%;display:grid;grid-template-columns:auto 1fr;gap:1px 10px;text-align:left;align-items:center;margin-top:10px;padding:13px;border:1px solid #fed7aa;border-radius:5px;background:#fff7ed;color:#111}.location-capture>span{grid-row:1/3;font-size:1.5rem;color:#f97316}.location-capture b{font-size:.8rem}.location-capture small{color:#9a3412}.store-checkout-total{margin-top:18px;padding-top:16px;border-top:1px solid #ddd}.store-checkout-total strong{font-size:1.2rem}
@media(max-width:900px){.store-product-grid{grid-template-columns:repeat(2,1fr)}.store-head{grid-template-columns:1fr;gap:24px}.store-head>div:last-child{justify-self:start}.store-v5{padding:80px 20px}}
@media(max-width:540px){.store-product-grid{grid-template-columns:1fr 1fr;gap:8px}.store-product{min-height:320px}.store-product-media{height:160px}.store-product-copy{padding:13px}.store-product-copy p{display:none}.store-product-copy h3{font-size:.96rem}.store-checkout-grid{grid-template-columns:1fr}.store-checkout-grid .full{grid-column:auto}}
.topbar .lang-switch,.topbar .icon-btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.topbar .lang-opt { color:rgba(255,255,255,.65); }
.topbar .lang-opt[aria-pressed="true"] { background:#fff; color:var(--ink-deep); }

#landingScreen { display:block; max-width:none; padding:0; }
#landingScreen > .hero:not(.hero-v5),#landingScreen > .service-section,#landingScreen > .trust-strip,#landingScreen > .track-prompt { display:none!important; }
.hero-v5 { min-height:100svh; position:relative; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-deep); color:#fff; padding:140px clamp(22px,6vw,92px) 11vh; }
.hero-photo { position:absolute; inset:-8%; background-image:linear-gradient(90deg,rgba(3,27,57,.98) 0%,rgba(3,27,57,.76) 38%,rgba(3,27,57,.05) 72%),url('./assets/print-studio-hero-v1.png'); background-size:cover; background-position:center; will-change:transform; }
.hero-noise { position:absolute; inset:0; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; pointer-events:none; }
.hero-copy { position:relative; z-index:2; width:min(820px,72vw); }
.hero-kicker,.section-label { display:flex; align-items:center; gap:10px; margin:0 0 24px; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700; }
.hero-kicker span { width:28px; height:2px; background:var(--fresh); }
.hero-copy h1 { margin:0; font-size:clamp(3.7rem,8.7vw,9.3rem); line-height:.78; letter-spacing:-.075em; font-weight:700; }
.hero-copy h1 em { color:var(--fresh); font-weight:300; }
.hero-lede { max-width:570px; margin:42px 0 30px; color:rgba(255,255,255,.74); font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-primary,.hero-secondary { min-height:56px; padding:0 24px; border-radius:3px; font:700 .82rem/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.hero-primary { background:var(--signal); border:1px solid var(--signal); color:#fff; }
.hero-primary span:last-child { margin-left:32px; font-size:1.2rem; }
.hero-secondary { border:1px solid rgba(255,255,255,.45); background:rgba(3,27,57,.18); color:#fff; backdrop-filter:blur(8px); }
.hero-primary:hover { background:var(--fresh); border-color:var(--fresh); color:var(--ink-deep); }
.hero-stamp { position:absolute; z-index:3; right:6vw; bottom:10vh; width:150px; height:150px; border:2px dashed var(--signal); border-radius:50%; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--signal); transform:rotate(9deg); }
.hero-stamp b { font-size:4.2rem; line-height:1; letter-spacing:-.08em; }.hero-stamp span{font-size:.66rem;font-weight:700;letter-spacing:.12em;line-height:1.4}
.hero-scroll { position:absolute; z-index:2; right:28px; top:48%; margin:0; writing-mode:vertical-rl; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }.hero-scroll span{color:var(--fresh);margin-top:8px}

.intro-section,.services-v5,.process-v5,.track-v5 { padding:clamp(80px,11vw,160px) clamp(22px,6vw,92px); }
.intro-section { display:grid; grid-template-columns:1fr 2.5fr; gap:6vw; color:var(--ink-deep); border-bottom:1px solid var(--rule); }
.section-label { color:var(--signal); align-self:start; }
.intro-section h2,.section-heading h2,.process-sticky h2,.track-v5 h2 { margin:0; font-size:clamp(2.6rem,5.8vw,6.4rem); line-height:.93; letter-spacing:-.065em; color:var(--ink-deep); }
.intro-note { grid-column:2; max-width:650px; margin-top:22px; padding-left:28px; border-left:3px solid var(--signal); color:#4d5865; font-size:1.05rem; line-height:1.65; }
.services-v5 { background:#fff; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; }
.section-heading h2 { font-size:clamp(2.8rem,5vw,5.5rem); }
.service-grid-v5 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service-tile { position:relative; min-height:580px; padding:24px; overflow:hidden; border:0; border-radius:2px; color:#fff; text-align:left; cursor:pointer; transition:transform .35s var(--ease-spring); }
.service-tile:hover { transform:translateY(-10px); }.service-tile:focus-visible{outline:4px solid var(--signal);outline-offset:4px}
.passport-tile { background:#ff613d; }.document-tile{background:var(--ink-blue)}.photo-tile{background:#202733}
.tile-index { position:relative; z-index:2; font-size:.68rem; letter-spacing:.18em; font-weight:700; }
.tile-art { position:absolute; inset:80px 20px 210px; }
.tile-art i { position:absolute; display:block; background:var(--paper); box-shadow:0 14px 28px rgba(0,0,0,.22); transition:transform .45s var(--ease-spring); }
.passport-tile .tile-art { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:16px; background:var(--paper); transform:rotate(-4deg); box-shadow:0 24px 40px rgba(65,10,0,.26); }
.passport-tile .tile-art i { position:relative; background:linear-gradient(#86b6d9 0 35%,#754d3a 36% 62%,#17253c 63%); box-shadow:none; border:7px solid white; }
.document-tile .tile-art i { inset:8% 8% 0; background:#fff; transform:rotate(-7deg); }.document-tile .tile-art i:after{content:"";position:absolute;inset:20% 12%;background:repeating-linear-gradient(#cad1dc 0 2px,transparent 2px 16px)}.document-tile .tile-art i:nth-child(2){transform:rotate(2deg) translate(10px,8px)}.document-tile .tile-art i:nth-child(3){transform:rotate(8deg) translate(20px,18px)}
.photo-tile .tile-art i { inset:0 6% 6%; border:10px solid white; background:linear-gradient(145deg,#ff7b46,#ffd257 42%,#266f96 43%,#072c42); transform:rotate(7deg); }.photo-tile .tile-art i:nth-child(2){transform:rotate(-8deg) translate(-18px,12px);opacity:.65}
.service-tile:hover .tile-art i:first-child { transform:rotate(-3deg) translateY(-8px); }
.tile-copy { position:absolute; z-index:2; left:24px; right:24px; bottom:25px; display:flex; flex-direction:column; }.tile-copy b{font-size:clamp(1.7rem,2.7vw,2.8rem);letter-spacing:-.045em}.tile-copy small{max-width:340px;margin:10px 0 24px;color:rgba(255,255,255,.76);font-size:.9rem;line-height:1.5}.tile-copy strong{border-top:1px solid rgba(255,255,255,.3);padding-top:17px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.tile-copy strong i{float:right;font-style:normal;font-size:1.2rem}
.process-v5 { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--paper); }.process-sticky{position:sticky;top:120px;align-self:start}.process-sticky h2{font-size:clamp(3rem,5vw,5.6rem)}.process-list{list-style:none;margin:0;padding:0}.process-list li{display:grid;grid-template-columns:70px 1fr;gap:26px;padding:48px 0;border-top:1px solid var(--rule)}.process-list li>span{display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--ink-blue);border-radius:50%;color:var(--ink-blue);font-weight:700}.process-list b{font-size:1.6rem;color:var(--ink-deep)}.process-list p{max-width:430px;margin:10px 0 0;color:#606b77;line-height:1.6}
.track-v5 { display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:end;background:var(--fresh); }.track-v5 h2{font-size:clamp(2.8rem,5vw,5rem)}.track-v5 .section-label{color:var(--ink-blue)}.top-track-form-v5 label{display:block;margin-bottom:10px;color:var(--ink-deep);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.top-track-form-v5>div{display:flex}.top-track-form-v5 input{min-width:0;flex:1;height:60px;padding:0 18px;border:2px solid var(--ink-deep);border-radius:2px 0 0 2px;background:transparent;color:var(--ink-deep);font:700 1rem var(--font-sans)}.top-track-form-v5 button{padding:0 22px;border:0;background:var(--ink-deep);color:#fff;font-weight:700}.top-track-form-v5 button span{margin-left:18px}
.landing-footer { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:54px clamp(22px,6vw,92px);background:var(--ink-deep);color:#fff }.footer-brand{font-size:1.6rem;font-weight:700;color:#fff}.footer-brand span{color:var(--signal)}.landing-footer p{color:rgba(255,255,255,.6);font-size:.8rem}.landing-footer button{border:0;background:none;color:var(--fresh);font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.mobile-dock { display:none; }

@media (max-width:800px){
  body{padding-bottom:74px}.topbar{height:64px;padding:0 16px}.desktop-nav,.topbar #openTrackBtn{display:none}.topbar-actions{gap:6px}.hero-v5{min-height:92svh;padding:110px 20px 70px;align-items:flex-end}.hero-photo{inset:-4%;background-image:linear-gradient(0deg,rgba(3,27,57,.98) 0%,rgba(3,27,57,.7) 52%,rgba(3,27,57,.05)),url('./assets/print-studio-hero-v1.png');background-position:66% center}.hero-copy{width:100%}.hero-copy h1{font-size:clamp(3.45rem,17vw,5.6rem);line-height:.82}.hero-lede{margin:28px 0 24px;font-size:.96rem;max-width:92%}.hero-actions{display:grid;grid-template-columns:1fr}.hero-primary,.hero-secondary{width:100%}.hero-stamp{width:92px;height:92px;right:18px;top:92px;bottom:auto}.hero-stamp b{font-size:2.6rem}.hero-stamp span{font-size:.48rem}.hero-scroll{display:none}
  .intro-section,.services-v5,.process-v5,.track-v5{padding:76px 20px}.intro-section,.process-v5,.track-v5{grid-template-columns:1fr}.intro-section{gap:28px}.intro-section h2{font-size:2.75rem}.intro-note{grid-column:1;margin-top:4px}.section-heading{display:block;margin-bottom:32px}.section-heading h2{font-size:2.8rem}.service-grid-v5{grid-template-columns:1fr}.service-tile{min-height:460px}.process-sticky{position:static}.process-sticky h2{font-size:2.8rem}.process-list li{grid-template-columns:48px 1fr;gap:16px;padding:34px 0}.process-list li>span{width:42px;height:42px}.track-v5{gap:40px}.track-v5 h2{font-size:2.8rem}.top-track-form-v5>div{display:grid;grid-template-columns:1fr}.top-track-form-v5 input{border-radius:2px 2px 0 0}.top-track-form-v5 button{height:54px}.landing-footer{display:block;padding:48px 20px;text-align:center}.landing-footer p{margin:14px 0 24px}
  .mobile-dock{position:fixed;z-index:120;display:grid;grid-template-columns:repeat(4,1fr);left:10px;right:10px;bottom:8px;height:66px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(3,27,57,.94);box-shadow:0 12px 40px rgba(0,0,0,.28);backdrop-filter:blur(18px)}.mobile-dock a,.mobile-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:rgba(255,255,255,.62);font:600 .62rem var(--font-sans);cursor:pointer}.mobile-dock span{font-size:1.2rem;line-height:1}.mobile-dock .active{color:var(--fresh)}
  #wizardScreen~.mobile-dock{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-photo,.hero-stamp{transform:none!important}.service-tile,.tile-art i{transition:none!important}}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-LightItalic.ttf') format('truetype');
  font-weight: 100 350;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 351 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-Italic.ttf') format('truetype');
  font-weight: 351 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 451 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-MediumItalic.ttf') format('truetype');
  font-weight: 451 550;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: UbuntuPrint;
  src: url('./fonts/Ubuntu-BoldItalic.ttf') format('truetype');
  font-weight: 551 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   Theme-independent values live in :root. Every colour is redeclared per
   theme so a single [data-theme] attribute on <html> flips the whole app.
   -------------------------------------------------------------------------- */
:root {
  /* Type scale */
  --font-sans: UbuntuPrint, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.9375rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 400ms;

  /* Layout */
  --shell-max: 540px;
  --bar-h: 78px;

  /* Brand hues shared by both themes */
  --hue-teal:   174;
  --hue-ochre:   28;
}

/* ── LIGHT ────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #F7F7F4;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F2F2EE;
  --surface-3:     #E9E9E3;
  --surface-sunk:  #EFEFEA;

  --text:    #17181A;
  --text-2:  #5A5D63;
  --text-3:  #8B8F97;
  --text-inv: #FFFFFF;

  --border:        rgba(20, 22, 26, 0.10);
  --border-strong: rgba(20, 22, 26, 0.18);
  --border-focus:  var(--brand);

  --brand:        #0F7A6C;
  --brand-hover:  #0C6355;
  --brand-soft:   rgba(15, 122, 108, 0.10);
  --brand-text:   #0B5F53;
  --on-brand:     #FFFFFF;

  --accent:       #C2620E;
  --accent-soft:  rgba(194, 98, 14, 0.11);
  --accent-text:  #9A4E0B;

  --success:      #157F3C;
  --success-soft: rgba(21, 127, 60, 0.11);
  --warn:         #A66200;
  --warn-soft:    rgba(166, 98, 0, 0.12);
  --danger:       #BE1237;
  --danger-soft:  rgba(190, 18, 55, 0.10);
  --info:         #1D5FBF;
  --info-soft:    rgba(29, 95, 191, 0.10);

  --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.05), 0 1px 3px rgba(16, 18, 22, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 18, 22, 0.06), 0 8px 20px rgba(16, 18, 22, 0.07);
  --shadow-lg: 0 8px 24px rgba(16, 18, 22, 0.10), 0 24px 56px rgba(16, 18, 22, 0.12);
  --shadow-brand: 0 6px 20px rgba(15, 122, 108, 0.28);

  --scrim: rgba(18, 20, 24, 0.42);
  --bar-bg: rgba(255, 255, 255, 0.86);
  --hero-wash: radial-gradient(120% 80% at 15% 0%, rgba(15,122,108,0.10) 0%, transparent 60%),
               radial-gradient(90% 70% at 95% 10%, rgba(194,98,14,0.10) 0%, transparent 62%);
}

/* ── DARK ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0B0C0F;
  --bg-elevated:   #14161B;
  --surface:       #14161B;
  --surface-2:     #1B1E25;
  --surface-3:     #242830;
  --surface-sunk:  #101216;

  --text:    #F1F3F6;
  --text-2:  #A0A7B4;
  --text-3:  #6E7684;
  --text-inv: #0B0C0F;

  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --border-focus:  var(--brand);

  --brand:        #2FD4BE;
  --brand-hover:  #4FE0CD;
  --brand-soft:   rgba(47, 212, 190, 0.13);
  --brand-text:   #6FE7D6;
  --on-brand:     #04211D;

  --accent:       #F2A03D;
  --accent-soft:  rgba(242, 160, 61, 0.14);
  --accent-text:  #F7BD75;

  --success:      #35D48A;
  --success-soft: rgba(53, 212, 138, 0.14);
  --warn:         #F0B429;
  --warn-soft:    rgba(240, 180, 41, 0.14);
  --danger:       #FB7185;
  --danger-soft:  rgba(251, 113, 133, 0.14);
  --info:         #60A5FA;
  --info-soft:    rgba(96, 165, 250, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55), 0 28px 64px rgba(0, 0, 0, 0.45);
  --shadow-brand: 0 6px 22px rgba(47, 212, 190, 0.24);

  --scrim: rgba(3, 5, 9, 0.68);
  --bar-bg: rgba(15, 17, 21, 0.86);
  --hero-wash: radial-gradient(120% 80% at 15% 0%, rgba(47,212,190,0.13) 0%, transparent 60%),
               radial-gradient(90% 70% at 95% 10%, rgba(242,160,61,0.10) 0%, transparent 62%);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur-2) var(--ease-soft),
              color var(--dur-2) var(--ease-soft);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

img, svg, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-soft); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   3. SHELL
   -------------------------------------------------------------------------- */
#app {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  flex-shrink: 1;
}

.brand-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
.brand-mark svg { width: 19px; height: 19px; fill: currentColor; }

.brand-name {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Language segmented pill */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lang-opt {
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease-soft),
              background-color var(--dur-1) var(--ease-soft);
}

.lang-opt[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}

/* Icon buttons */
.icon-btn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: transform var(--dur-1) var(--ease-spring),
              color var(--dur-1) var(--ease-soft),
              background-color var(--dur-1) var(--ease-soft);
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn svg { width: 17px; height: 17px; }

/* Theme icons — only the active mode's glyph is shown */
.theme-ico { display: none; }
[data-theme-mode="system"] .theme-ico-system,
[data-theme-mode="light"]  .theme-ico-light,
[data-theme-mode="dark"]   .theme-ico-dark { display: block; }

/* --------------------------------------------------------------------------
   5. LANDING
   -------------------------------------------------------------------------- */
#landingScreen {
  flex: 1;
  padding: 0 var(--sp-4) var(--sp-8);
  animation: fadeUp var(--dur-3) var(--ease-spring) both;
}

.hero {
  position: relative;
  padding: var(--sp-7) var(--sp-1) var(--sp-6);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -40% -30% auto -30%;
  height: 320px;
  background: var(--hero-wash);
  pointer-events: none;
  z-index: -1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}

.hero-tag .pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulseDot 2s var(--ease-soft) infinite;
}

.hero-h1 {
  font-size: clamp(2rem, 9vw, var(--fs-3xl));
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin-bottom: var(--sp-3);
}
.hero-h1 em {
  font-style: normal;
  color: var(--brand);
  display: block;
}

.hero-sub {
  font-size: var(--fs-md);
  color: var(--text-2);
  max-width: 34ch;
  margin-bottom: var(--sp-4);
}

/* ── Top-Front Track Bar ── */
.top-track-card {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-spring);
  animation: fadeUp var(--dur-3) var(--ease-spring) both;
}

.top-track-card:focus-within {
  border-color: var(--brand);
  box-shadow: var(--focus-ring), var(--shadow-md);
  transform: translateY(-1px);
}

.top-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.top-track-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 750;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.top-track-title svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}

.top-track-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-track-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.top-track-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-1);
  outline: none;
  text-transform: uppercase;
  transition: background var(--dur-1) var(--ease-soft),
              border-color var(--dur-1) var(--ease-soft);
}

.top-track-input::placeholder {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-3);
}

.top-track-input:focus {
  background: var(--surface);
  border-color: var(--brand);
}

.top-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--brand-fg);
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-1) var(--ease-spring),
              filter var(--dur-1);
}

.top-track-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.top-track-btn:active {
  transform: scale(0.96);
}

.top-track-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Service cards */
.service-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-card {
  --stagger: 0ms;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft);
  animation: fadeUp var(--dur-3) var(--ease-spring) both;
  animation-delay: var(--stagger);
}
.service-card:nth-child(1) { --stagger: 60ms; }
.service-card:nth-child(2) { --stagger: 120ms; }
.service-card:nth-child(3) { --stagger: 180ms; }

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.service-card:active { transform: scale(0.985); }

.sc-icon-wrap {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: 1.5rem;
  line-height: 1;
}
.sc-icon-passport { background: var(--info-soft); }
.sc-icon-document { background: var(--brand-soft); }
.sc-icon-photo    { background: var(--accent-soft); }

.sc-body { min-width: 0; }

.sc-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.badge-info   { background: var(--info-soft);   color: var(--info); }
.badge-brand  { background: var(--brand-soft);  color: var(--brand-text); }
.badge-accent { background: var(--accent-soft); color: var(--accent-text); }

/* These are <span>s inside a non-flex parent, so they need explicit
   block display to stack instead of running together as inline text. */
.sc-title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 3px;
}

.sc-desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.sc-price {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
}
.sc-price b { color: var(--text); font-weight: 800; }

.sc-arrow {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  transition: background-color var(--dur-2) var(--ease-soft),
              color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-spring);
}
.service-card:hover .sc-arrow {
  background: var(--brand);
  color: var(--on-brand);
  transform: translateX(3px);
}
.sc-arrow svg { width: 14px; height: 14px; }

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
}

.trust-item { text-align: center; }
.trust-icon { font-size: 1.1rem; line-height: 1; margin-bottom: 5px; }
.trust-value {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.trust-label {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  line-height: 1.25;
  margin-top: 1px;
}

.track-prompt {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.track-prompt button {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. WIZARD
   -------------------------------------------------------------------------- */
#wizardScreen {
  display: none;
  flex: 1;
  flex-direction: column;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--sp-5));
}

.wizard-nav {
  position: sticky;
  top: calc(58px + env(safe-area-inset-top));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.wiz-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px 0 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: transform var(--dur-1) var(--ease-spring),
              color var(--dur-1) var(--ease-soft);
}
.wiz-back:active { transform: scale(0.94); }
.wiz-back:hover { color: var(--text); }
.wiz-back svg { width: 14px; height: 14px; }

.wiz-stepper { display: flex; align-items: center; gap: 5px; }

.wiz-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  transition: all var(--dur-2) var(--ease-spring);
}
.wiz-dot.done { background: var(--brand); opacity: 0.5; }
.wiz-dot.active {
  width: 22px;
  background: var(--brand);
}

.wiz-step-text {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.wiz-progress {
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.wiz-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width var(--dur-3) var(--ease-spring);
}

.wiz-content { padding: var(--sp-5) var(--sp-4) 0; }

.step-view { animation: stepIn var(--dur-3) var(--ease-spring) both; }

.step-header { margin-bottom: var(--sp-5); }

.step-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 7px;
}

.step-title {
  font-size: var(--fs-xl);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 5px;
}

.step-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. FORM PRIMITIVES
   -------------------------------------------------------------------------- */
.field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.step-header + .field-label,
.field-group:first-child > .field-label { margin-top: 0; }

.field-group { margin-bottom: var(--sp-4); }
.field-group .field-label { margin-top: 0; margin-bottom: var(--sp-2); }

.field-input {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: border-color var(--dur-1) var(--ease-soft),
              box-shadow var(--dur-1) var(--ease-soft);
  appearance: none;
  -webkit-appearance: none;
}
.field-input::placeholder { color: var(--text-3); font-weight: 400; }
.field-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

select.field-input {
  cursor: pointer;
  padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

textarea.field-input { resize: none; line-height: 1.5; }

.field-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
}
.field-hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   8. UPLOAD ZONE
   -------------------------------------------------------------------------- */
.upload-zone {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-soft),
              background-color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-spring);
}
.upload-zone:hover { border-color: var(--brand); background: var(--brand-soft); }
.upload-zone:active { transform: scale(0.985); }

.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  width: 66px; height: 66px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
  margin-bottom: var(--sp-2);
}
.upload-icon svg { width: 28px; height: 28px; }
.upload-icon.tone-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px var(--accent-soft);
}

.upload-title {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.upload-hint { font-size: var(--fs-sm); color: var(--text-3); }

/* Uploaded file badge */
.file-badge {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  animation: fadeUp var(--dur-2) var(--ease-spring) both;
}
.file-badge-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  font-size: 1.15rem;
}
.file-badge-info { flex: 1; min-width: 0; }
.file-badge-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-badge-pages { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.file-badge-change {
  position: relative;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  overflow: hidden;
}
.file-badge-change input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   9. CROP AREA
   -------------------------------------------------------------------------- */
.crop-area {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  touch-action: none;
}
.crop-area canvas { width: 100%; height: 100%; cursor: grab; }
.crop-area canvas:active { cursor: grabbing; }

.bio-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.bio-oval {
  position: relative;
  width: 54%;
  height: 72%;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50% 50% 46% 46%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.bio-line-eye, .bio-line-chin {
  position: absolute;
  left: -16%;
  right: -16%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.bio-line-eye { top: 38%; }
.bio-line-chin { top: 88%; }
.bio-label {
  position: absolute;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* Zoom slider */
.zoom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.zoom-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }

.zoom-slider {
  flex: 1;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.zoom-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.zoom-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  border-width: 3px;
}

/* Background pills */
.bg-pills { display: flex; gap: var(--sp-2); }

.bg-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  transition: all var(--dur-2) var(--ease-spring);
}
.bg-pill.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-text);
}
.bg-pill:active { transform: scale(0.96); }

.swatch {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.swatch-white { background: #FFFFFF; }
.swatch-blue  { background: #4EA8DE; }
.swatch-grey  { background: #9AA3AF; }

/* --------------------------------------------------------------------------
   10. CHIPS
   -------------------------------------------------------------------------- */
.chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.chips-2col { grid-template-columns: repeat(2, 1fr); }

.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-soft),
              background-color var(--dur-2) var(--ease-soft),
              transform var(--dur-1) var(--ease-spring);
}
.chip:active { transform: scale(0.97); }
.chip:hover { border-color: var(--border-strong); }

.chip.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.chip.selected::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--brand) center / 9px 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  animation: popIn var(--dur-2) var(--ease-spring) both;
}

.chip-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.015em;
  padding-right: 18px;
}
.chip.selected .chip-title { color: var(--brand-text); }

.chip-sub {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  line-height: 1.3;
}

.chip-flag {
  position: absolute;
  top: -7px; left: var(--sp-3);
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. QUANTITY STEPPER
   -------------------------------------------------------------------------- */
.qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.qty-btn {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-1) var(--ease-soft);
}
.qty-btn:hover { background: var(--brand-soft); }
.qty-btn:active { transform: scale(0.9); }
.qty-btn:disabled { opacity: 0.35; pointer-events: none; }

.qty-num {
  min-width: 56px;
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: 850;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. BOTTOM ACTION BAR
   -------------------------------------------------------------------------- */
.bottom-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-bar-inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--bar-h);
}

.price-block { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.price-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.price-amount {
  font-size: var(--fs-xl);
  font-weight: 850;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease-soft);
}
.price-amount.bump { animation: priceBump var(--dur-3) var(--ease-spring); }

.cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.015em;
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-1) var(--ease-soft),
              opacity var(--dur-1) var(--ease-soft);
}
.cta-btn:hover { background: var(--brand-hover); }
.cta-btn:active { transform: scale(0.975); }
.cta-btn:disabled { opacity: 0.6; pointer-events: none; }
.cta-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   13. MODALS
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn var(--dur-2) var(--ease-soft) both;
}
.modal-overlay.open { display: flex; }

.modal-centered { align-items: center; justify-content: center; padding: var(--sp-4); }
.modal-overlay:not(.modal-centered) { align-items: flex-end; justify-content: center; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  border-radius: var(--r-2xl);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: modalPop var(--dur-3) var(--ease-spring) both;
}

.modal-sheet {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  max-height: 88dvh;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: 0;
  box-shadow: var(--shadow-lg);
  animation: sheetUp var(--dur-3) var(--ease-spring) both;
}

.sheet-handle {
  width: 38px; height: 4px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  margin: 0 auto var(--sp-4);
}

.modal-close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--dur-1) var(--ease-spring);
}
.modal-close:active { transform: scale(0.9); }

.modal-title {
  font-size: var(--fs-xl);
  font-weight: 850;
  letter-spacing: -0.035em;
  margin-bottom: 5px;
}
.modal-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.modal-sheet .modal-title,
.modal-sheet .modal-sub { text-align: left; }
.modal-sheet .modal-sub { margin-bottom: var(--sp-4); }

/* Snippe payment ring */
.snippe-ring {
  width: 86px; height: 86px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 2px solid var(--brand);
  position: relative;
}
.snippe-ring::before,
.snippe-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  animation: ripple 2.4s var(--ease-soft) infinite;
}
.snippe-ring::after { animation-delay: 1.2s; }

.snippe-ring-text {
  font-size: var(--fs-xl);
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--brand-text);
}

.snippe-total {
  font-size: var(--fs-2xl);
  font-weight: 850;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.snippe-message {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.snippe-phone-badge {
  display: inline-block;
  padding: 8px var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-5);
}

.progress-shimmer {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.progress-shimmer-fill {
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--brand);
  animation: shimmerSlide 1.6s var(--ease-soft) infinite;
}

.waiting-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}

.retry-btn {
  width: 100%;
  min-height: 46px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background-color var(--dur-1) var(--ease-soft),
              transform var(--dur-1) var(--ease-spring);
}
.retry-btn:hover { background: var(--surface-3); }
.retry-btn:active { transform: scale(0.98); }

/* Success */
.success-check {
  width: 76px; height: 76px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  animation: popIn var(--dur-3) var(--ease-spring) both;
}

.receipt-box {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.receipt-key { font-size: var(--fs-sm); color: var(--text-3); }
.receipt-val {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.receipt-val.brand { color: var(--brand); }
.receipt-val.green { color: var(--success); }

/* Tracking */
.track-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.track-btn {
  flex-shrink: 0;
  padding: 0 var(--sp-5);
  min-height: 52px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: 800;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-1) var(--ease-soft);
}
.track-btn:hover { background: var(--brand-hover); }
.track-btn:active { transform: scale(0.96); }

.track-state {
  text-align: center;
  padding: var(--sp-6) 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.track-state.is-loading { color: var(--brand); }
.track-state.is-error { color: var(--danger); }

.track-card {
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  padding: var(--sp-4);
  animation: fadeUp var(--dur-2) var(--ease-spring) both;
}
.track-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.track-ref {
  font-size: var(--fs-md);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.track-status-pill {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-2xs);
  font-weight: 800;
  white-space: nowrap;
}

.track-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.track-meta b { color: var(--text); }
.track-meta .amount { color: var(--success); font-weight: 800; }

/* Timeline */
.timeline { display: flex; flex-direction: column; }

.tl-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-step:last-child::before { display: none; }
.tl-step.done::before { background: var(--success); }

.tl-icon {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.tl-step.done .tl-icon { background: var(--success); color: #fff; }
.tl-step.current .tl-icon {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.tl-text { padding-top: 3px; }
.tl-text h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.tl-step.current .tl-text h4 { color: var(--brand); font-weight: 800; }
.tl-text p { font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------------------------------
   14. TOASTS
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--sp-4));
  z-index: 200;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: calc(100% - var(--sp-7));
  max-width: 400px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  animation: toastIn var(--dur-3) var(--ease-spring) both;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.toast::before {
  content: '';
  width: 4px;
  align-self: stretch;
  border-radius: var(--r-full);
  background: var(--info);
  flex-shrink: 0;
}
.toast-error::before   { background: var(--danger); }
.toast-success::before { background: var(--success); }

/* --------------------------------------------------------------------------
   15. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes stepIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes shimmerSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes priceBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); color: var(--brand); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE / A11Y
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  :root { --fs-3xl: 1.9rem; --sp-4: 13px; }
  .brand-name { display: none; }
  .chips-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4); }
}

@media (min-width: 541px) {
  .hero { padding-top: var(--sp-8); }
  .bottom-bar { border-inline: 1px solid var(--border); }
}

@media (hover: none) {
  .service-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .service-card:hover .sc-arrow {
    background: var(--surface-2);
    color: var(--text-2);
    transform: none;
  }
  .upload-zone:hover { border-color: var(--border-strong); background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .topbar, .bottom-bar, .modal-overlay, .toast-container { display: none !important; }
}

/* Cascade lock: the V5 landing deliberately escapes the original app shell. */
body { max-width:none; margin:0; background:var(--paper); }
#app { width:100%; max-width:none; margin:0; overflow:clip; background:transparent; box-shadow:none; }
#landingScreen { display:block; width:100%; max-width:none; padding:0; margin:0; }
.topbar { position:fixed; inset:0 0 auto; width:100%; max-width:none; height:76px; padding:0 clamp(20px,4vw,64px); z-index:100; border:0; background:linear-gradient(180deg,rgba(3,27,57,.72),transparent); color:#fff; }
.topbar.is-scrolled { background:rgba(3,27,57,.94); }
.brand-mark { background:var(--signal); color:#fff; border-radius:4px; transform:rotate(-3deg); }
.brand-name { color:#fff; font-size:1.15rem; }
#wizardScreen { padding-top:76px; }
#wizardScreen .wizard-nav { top:76px; }
@media(max-width:800px){body{padding-bottom:74px}.topbar{height:64px;padding:0 16px}.mobile-dock{display:grid}.desktop-nav,.topbar #openTrackBtn{display:none}}
@media(max-width:800px){#wizardScreen{padding-top:64px}#wizardScreen .wizard-nav{top:64px}}

/* Order flow — same visual language as the landing studio. */
[data-theme="light"] { --brand:#063b78; --brand-hover:#032d5f; --brand-soft:rgba(6,59,120,.1); --brand-text:#063b78; --accent:#ff5a36; --accent-soft:rgba(255,90,54,.12); --accent-text:#d63618; --bg:#f4f0e5; --surface-2:#ece7dc; --r-md:8px; --r-lg:12px; --r-xl:16px; --shell-max:680px; }
[data-theme="dark"] { --brand:#b9ff66; --brand-hover:#cbff8c; --brand-soft:rgba(185,255,102,.12); --brand-text:#b9ff66; --accent:#ff7558; --accent-soft:rgba(255,117,88,.13); --accent-text:#ff9a85; --r-md:8px; --r-lg:12px; --r-xl:16px; --shell-max:680px; }
#wizardScreen { min-height:100svh; background:linear-gradient(135deg,var(--bg) 0%,var(--bg) 72%,var(--brand-soft) 72%); }
.wizard-nav { max-width:var(--shell-max); margin-inline:auto; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; }
.wiz-progress { max-width:var(--shell-max); margin-inline:auto; border-radius:0; background:var(--surface-3); }
.wiz-progress-fill { background:var(--accent); }
.wiz-step-text,.step-eyebrow,.field-label { letter-spacing:.12em; text-transform:uppercase; }
.step-title { color:var(--text); font-size:clamp(2rem,6vw,3.2rem); letter-spacing:-.055em; }
.upload-zone { border:2px dashed var(--brand); border-radius:10px; background:linear-gradient(135deg,var(--surface) 0 70%,var(--brand-soft) 70%); }
.upload-zone:hover { border-color:var(--accent); }
.upload-icon { border-radius:4px; background:var(--brand); color:var(--on-brand); transform:rotate(-3deg); }
.chip,.bg-pill,.qty-row,.field-input,.photo-upload-zone,.doc-dropzone { border-radius:7px; }
.chip.selected,.bg-pill.selected { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.chip.selected:after { background:var(--accent); }
.cta-btn { border-radius:5px; background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(255,90,54,.25); }
.cta-btn:hover { background:#e94625; }
.bottom-bar { border-top:3px solid var(--accent); }
.modal-card,.modal-sheet { border-radius:14px; }
.snippe-ring { border-color:var(--accent); color:var(--accent); }
.success-check { border-radius:5px; background:var(--fresh); color:var(--ink-deep); transform:rotate(-3deg); }
.track-status-pill { background:var(--brand-soft); color:var(--brand-text); }
@media(max-width:800px){.wizard-nav{border-inline:0;border-radius:0}.wiz-content{padding-inline:18px}.bottom-bar-inner{padding-inline:18px}}

/* ========================================================================== 
   PRINTBUMP V6 — GALLERY PROOF
   The interface behaves like a designed print specimen, not a card catalogue.
   ========================================================================== */
:root { --proof-white:#f6f7f3; --proof-ink:#11141a; --proof-blue:#2638ff; --proof-red:#f04b2f; --proof-mist:#dce3e9; --proof-line:rgba(17,20,26,.15); }
body { background:var(--proof-white); color:var(--proof-ink); }
.topbar { height:88px; padding-inline:clamp(24px,4.5vw,74px); background:transparent; color:var(--proof-ink); mix-blend-mode:normal; }
.topbar.is-scrolled { height:70px; background:rgba(17,20,26,.95); color:#fff; box-shadow:none; }
.topbar:not(.is-scrolled) .brand-name { color:var(--proof-ink); }
.topbar:not(.is-scrolled) .brand-mark { background:var(--proof-blue); }
.topbar:not(.is-scrolled) .desktop-nav a { color:var(--proof-ink); }
.topbar:not(.is-scrolled) .lang-switch,.topbar:not(.is-scrolled) .icon-btn { background:rgba(255,255,255,.62); border-color:var(--proof-line); color:var(--proof-ink); }
.topbar:not(.is-scrolled) .lang-opt { color:#67707c; }
.topbar:not(.is-scrolled) .lang-opt[aria-pressed="true"] { background:var(--proof-ink); color:#fff; }
#themeToggleBtn { display:none; }
.desktop-nav { gap:42px; }
.desktop-nav a { position:relative; color:#fff; font-size:.68rem; letter-spacing:.18em; }
.desktop-nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:currentColor; transition:right .25s; }
.desktop-nav a:hover:after { right:0; }

.hero-v5 { min-height:100svh; align-items:center; padding:132px clamp(24px,4.5vw,74px) 94px; background:var(--proof-white); color:var(--proof-ink); }
.hero-v5:before { content:"PRINT"; position:absolute; z-index:0; left:-.045em; bottom:-.18em; color:transparent; -webkit-text-stroke:1px rgba(17,20,26,.085); font-weight:700; font-size:clamp(13rem,31vw,35rem); line-height:.8; letter-spacing:-.1em; pointer-events:none; }
.hero-photo { inset:8vh 0 8vh auto; width:53vw; background-image:url('./assets/print-studio-hero-v1.png'); background-size:cover; background-position:62% center; clip-path:polygon(12% 0,100% 0,100% 88%,81% 100%,0 100%,0 15%); filter:saturate(.76) contrast(1.05); box-shadow:-30px 30px 70px rgba(17,20,26,.15); }
.hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(38,56,255,.16),transparent 32%); mix-blend-mode:color; }
.hero-noise { opacity:.055; mix-blend-mode:multiply; }
.hero-copy { width:min(790px,57vw); padding-top:4vh; }
.hero-kicker { margin-bottom:34px; color:var(--proof-blue); }
.hero-kicker>span:first-child { width:54px; background:var(--proof-blue); }
.hero-copy h1 { max-width:840px; color:var(--proof-ink); font-size:clamp(5rem,9.2vw,10.5rem); line-height:.76; letter-spacing:-.09em; text-wrap:balance; }
.hero-copy h1 em { position:relative; color:var(--proof-blue); font-weight:300; z-index:2; }
.hero-copy h1 em:after { content:""; position:absolute; z-index:-1; left:0; right:-.03em; bottom:.08em; height:.07em; background:var(--proof-red); transform:rotate(-1deg); }
.hero-lede { max-width:450px; margin:45px 0 30px; color:#555f6b; font-size:1rem; }
.hero-actions { gap:10px; }
.hero-primary,.hero-secondary { min-height:62px; padding-inline:28px; border-radius:0; }
.hero-primary { background:var(--proof-ink); border-color:var(--proof-ink); }
.hero-primary:hover { background:var(--proof-blue); border-color:var(--proof-blue); color:#fff; }
.hero-secondary { background:rgba(246,247,243,.78); border-color:var(--proof-ink); color:var(--proof-ink); }
.hero-stamp { right:3.8vw; bottom:5vh; width:112px; height:112px; border:1px solid var(--proof-red); color:var(--proof-red); background:rgba(246,247,243,.92); box-shadow:0 10px 30px rgba(17,20,26,.12); }
.hero-stamp:after { content:"QUALITY CHECKED"; position:absolute; top:-21px; white-space:nowrap; font-size:.5rem; font-weight:700; letter-spacing:.18em; }
.hero-stamp b { font-size:3.4rem; }
.hero-scroll { display:none; }
.proof-meta { position:absolute; z-index:4; top:19vh; right:calc(53vw - 140px); display:flex; flex-direction:column; gap:8px; color:var(--proof-ink); font-size:.55rem; font-weight:700; letter-spacing:.18em; writing-mode:vertical-rl; transform:rotate(180deg); }
.proof-meta span:first-child { color:var(--proof-red); }
.proof-rail { position:absolute; z-index:5; left:0; right:0; bottom:0; height:36px; display:flex; align-items:center; gap:24px; padding-inline:clamp(24px,4.5vw,74px); overflow:hidden; background:var(--proof-blue); color:#fff; font-size:.55rem; font-weight:700; letter-spacing:.22em; }
.proof-rail i { flex:1; min-width:30px; height:1px; background:rgba(255,255,255,.35); }

.intro-section { position:relative; min-height:78vh; grid-template-columns:minmax(170px,.55fr) 2.45fr; align-content:center; padding-block:clamp(110px,14vw,210px); background:var(--proof-ink); color:#fff; border:0; }
.intro-section:after { content:"“"; position:absolute; right:4vw; top:-.12em; color:rgba(255,255,255,.035); font-size:34rem; font-weight:700; line-height:1; }
.intro-section .section-label { color:#8e9aff; }
.intro-section h2 { max-width:1200px; color:#fff; font-weight:300; font-size:clamp(3.4rem,6.8vw,7.7rem); line-height:.94; }
.intro-note { max-width:540px; margin-top:54px; padding:0; border:0; color:#abb2bb; font-size:.95rem; }

.services-v5 { padding-top:clamp(90px,10vw,150px); background:var(--proof-white); }
.section-heading { align-items:start; margin-bottom:72px; border-top:1px solid var(--proof-line); padding-top:22px; }
.section-heading h2 { max-width:850px; color:var(--proof-ink); font-weight:300; text-align:right; }
.services-v5 .section-label { color:var(--proof-blue); }
.service-grid-v5 { grid-template-columns:1fr; gap:0; border-top:1px solid var(--proof-line); }
.service-tile { display:grid; grid-template-columns:170px minmax(280px,430px) 1fr; align-items:center; gap:clamp(26px,5vw,90px); min-height:340px; padding:32px 0; border-bottom:1px solid var(--proof-line); border-radius:0; background:transparent; color:var(--proof-ink); isolation:isolate; }
.service-tile:hover { transform:none; color:var(--proof-blue); }
.service-tile:before { content:""; position:absolute; z-index:-1; inset:0; background:var(--proof-blue); transform:scaleY(0); transform-origin:bottom; transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.service-tile:hover:before { transform:scaleY(1); }
.service-tile:hover .tile-copy small,.service-tile:hover .tile-copy strong,.service-tile:hover .tile-index { color:#fff; border-color:rgba(255,255,255,.28); }
.tile-index { align-self:start; padding-top:10px; color:#737c87; font-size:.6rem; }
.tile-art { position:relative; inset:auto; width:100%; height:245px; }
.passport-tile,.document-tile,.photo-tile { background:transparent; }
.passport-tile .tile-art { padding:14px; transform:rotate(-2deg); }
.document-tile .tile-art i { inset:5% 12%; }
.photo-tile .tile-art i { inset:0 8% 5%; }
.tile-copy { position:relative; inset:auto; align-self:end; padding:0 clamp(10px,3vw,46px) 12px 0; }
.tile-copy b { font-size:clamp(3rem,5.4vw,6rem); font-weight:300; line-height:.92; letter-spacing:-.07em; }
.tile-copy small { max-width:440px; margin:22px 0 34px; color:#64707c; font-size:.95rem; }
.tile-copy strong { color:var(--proof-ink); border-color:var(--proof-line); }

.process-v5 { min-height:90vh; grid-template-columns:1.05fr 1fr; background:var(--proof-mist); }
.process-v5 .section-label { color:var(--proof-blue); }
.process-sticky h2 { max-width:650px; color:var(--proof-ink); font-weight:300; }
.process-list { counter-reset:proofstep; }
.process-list li { grid-template-columns:1fr; gap:70px; padding:42px 0 52px; counter-increment:proofstep; }
.process-list li>span { display:none; }
.process-list li:before { content:"0" counter(proofstep); color:var(--proof-blue); font-size:clamp(5rem,9vw,9rem); font-weight:300; line-height:.7; letter-spacing:-.09em; }
.process-list b { font-size:1.45rem; font-weight:500; }
.track-v5 { min-height:70vh; background:var(--proof-blue); color:#fff; }
.track-v5 .section-label { color:#b7c0ff; }
.track-v5 h2 { color:#fff; font-weight:300; font-size:clamp(3.4rem,6vw,7rem); }
.top-track-form-v5 label { color:#fff; }
.top-track-form-v5 input { border-color:rgba(255,255,255,.65); color:#fff; }
.top-track-form-v5 input::placeholder { color:rgba(255,255,255,.5); }
.top-track-form-v5 button { background:#fff; color:var(--proof-blue); }
.landing-footer { padding-block:72px; background:var(--proof-ink); }
.landing-footer button { color:#8e9aff; }

/* The working studio: editorial proof sheet instead of a generic form card. */
[data-theme="light"] { --brand:#2638ff; --brand-hover:#1829eb; --brand-soft:rgba(38,56,255,.08); --brand-text:#2638ff; --accent:#f04b2f; --accent-soft:rgba(240,75,47,.1); --accent-text:#c9341b; --bg:#f6f7f3; --surface:#fff; --surface-2:#edf0f2; --surface-3:#dce3e9; }
#wizardScreen { position:relative; overflow:hidden; background:var(--proof-white); }
#wizardScreen:before { content:"PRINT"; position:fixed; z-index:0; left:-.04em; top:15vh; color:transparent; -webkit-text-stroke:1px rgba(17,20,26,.07); font-size:clamp(11rem,26vw,28rem); line-height:.75; font-weight:700; letter-spacing:-.1em; pointer-events:none; }
#wizardScreen[data-mode="passport"]:before { content:"ID"; }
#wizardScreen[data-mode="document"]:before { content:"PDF"; }
#wizardScreen[data-mode="photo"]:before { content:"HD"; }
.wizard-nav,.wiz-progress,.wiz-content { position:relative; z-index:2; }
.wizard-nav { max-width:760px; padding:14px 20px; border:0; border-bottom:1px solid var(--proof-line); border-radius:0; background:rgba(246,247,243,.88); backdrop-filter:blur(18px); }
.wiz-progress { max-width:760px; height:2px; background:var(--proof-mist); }
.wiz-progress-fill { background:var(--proof-blue); }
.wiz-content { width:min(760px,calc(100% - 40px)); margin:38px auto 70px; padding:clamp(28px,5vw,64px); border:1px solid rgba(17,20,26,.1); background:rgba(255,255,255,.92); box-shadow:0 35px 100px rgba(17,20,26,.1); backdrop-filter:blur(20px); }
.step-title { font-weight:300; color:var(--proof-ink); }
.step-eyebrow { color:var(--proof-blue); }
.upload-zone,.doc-dropzone,.photo-upload-zone { border-color:var(--proof-blue); background:#f9faf7; border-radius:0; }
.upload-icon { background:var(--proof-blue); transform:none; border-radius:0; }
.chip,.bg-pill,.qty-row,.field-input,.photo-upload-zone,.doc-dropzone { border-radius:0; }
.chip.selected,.bg-pill.selected { border-color:var(--proof-blue); box-shadow:inset 5px 0 0 var(--proof-blue); }
.cta-btn { border-radius:0; background:var(--proof-blue); box-shadow:none; }
.cta-btn:hover { background:var(--proof-ink); }
.bottom-bar { border-top:0; box-shadow:0 -1px var(--proof-line); background:rgba(246,247,243,.92); }
.modal-card,.modal-sheet { border-radius:0; border-top:4px solid var(--proof-blue); }

@media(max-width:800px){
  .topbar{height:68px;padding-inline:16px}.topbar:not(.is-scrolled){background:rgba(246,247,243,.9);backdrop-filter:blur(12px)}
  .hero-v5{min-height:100svh;display:block;padding:84px 18px 78px}.hero-v5:before{font-size:17rem;bottom:-.1em}.hero-photo{inset:76px 0 auto auto;width:88vw;height:43vh;clip-path:polygon(10% 0,100% 0,100% 86%,86% 100%,0 100%,0 14%);background-position:68% center}.hero-copy{width:100%;padding-top:40vh}.hero-kicker{margin-bottom:20px}.hero-copy h1{font-size:clamp(3.7rem,17vw,5.6rem);line-height:.78}.hero-lede{margin:26px 0 22px;max-width:100%}.hero-actions{grid-template-columns:1fr 1fr}.hero-primary,.hero-secondary{min-height:56px;padding:0 14px;font-size:.65rem}.hero-primary span:last-child{display:none}.hero-stamp{top:33vh;right:14px;width:76px;height:76px}.hero-stamp b{font-size:2.3rem}.hero-stamp span{display:none}.proof-meta{display:none}.proof-rail{height:30px;gap:12px;padding-inline:18px}.proof-rail i{min-width:10px}
  .intro-section{min-height:auto;grid-template-columns:1fr;padding-block:105px}.intro-section h2{font-size:clamp(3rem,13vw,4.6rem)}.intro-note{margin-top:20px}.intro-section:after{font-size:18rem}
  .section-heading{display:block;margin-bottom:40px}.section-heading h2{text-align:left;font-size:3.2rem}.service-tile{grid-template-columns:1fr;gap:18px;min-height:620px;padding:38px 0}.tile-index{padding:0}.tile-art{height:290px;width:92%;margin:auto}.tile-copy{padding:10px 0}.tile-copy b{font-size:3.5rem}.service-tile:before{display:none}.service-tile:hover{color:var(--proof-ink)}.service-tile:hover .tile-copy small,.service-tile:hover .tile-copy strong,.service-tile:hover .tile-index{color:inherit;border-color:var(--proof-line)}
  .process-v5{min-height:auto;grid-template-columns:1fr;gap:60px}.process-sticky h2{font-size:3.2rem}.process-list li{gap:38px}.process-list li:before{font-size:6.5rem}.track-v5{min-height:auto}.track-v5 h2{font-size:3.3rem}
  .mobile-dock{left:12px;right:12px;bottom:10px;height:62px;border:0;border-radius:4px;background:rgba(17,20,26,.96)}
  #wizardScreen{padding-top:68px}#wizardScreen .wizard-nav{top:68px}.wiz-content{width:calc(100% - 24px);margin-top:20px;padding:26px 18px;box-shadow:0 18px 55px rgba(17,20,26,.08)}
}
@media(prefers-reduced-motion:reduce){.service-tile:before{transition:none}.hero-photo{transform:none!important}}