/* ==========================================================================
   ZimQi website prototype — design system + components
   Brand: hi-vis orange, navy, off-white; green ONLY for approved / ticks.
   Fonts: Baloo 2 (display) + Nunito (body), self-hosted, OFL licence.
   ========================================================================== */

@font-face{font-family:"Baloo 2";src:url("../fonts/baloo2-var-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-var-latin.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  /* Core palette */
  --orange:#FF6B00;        /* hi-vis orange: buttons, accents, Q tail */
  --orange-ink:#B84A00;    /* orange for SMALL TEXT on light backgrounds (AA 4.9:1 on off-white) */
  --orange-50:#FFF1E5;     /* tint for soft backgrounds */
  --orange-100:#FFE0C7;
  --navy:#14264A;          /* text, headers, dark sections */
  --navy-80:#2B3D63;
  --navy-60:#4F5F80;       /* secondary text (AA on off-white) */
  --navy-10:#E7EBF3;
  --offwhite:#FFF8EE;      /* page background */
  --paper:#FFFFFF;         /* cards */
  --green:#1A7F37;         /* APPROVED / ticks only (white text AA 5:1) */
  --green-50:#E6F4EA;

  --font-display:"Baloo 2","Nunito",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-sm:12px; --r-md:20px; --r-lg:32px; --r-pill:999px;
  --shadow-1:0 2px 0 rgba(20,38,74,.08),0 8px 24px rgba(20,38,74,.08);
  --shadow-2:0 4px 0 rgba(20,38,74,.12),0 16px 40px rgba(20,38,74,.14);
  --shadow-pop:4px 4px 0 var(--navy);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--offwhite);color:var(--navy);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--orange-ink)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,107,0,.55);border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.micro{font-size:.8rem;color:rgba(20,38,74,.78)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--offwhite);padding:.75rem 1rem;z-index:100;border-radius:0 0 12px 0}
.skip:focus{left:0}
.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}

/* Placeholder chips: anything the founder must fill/confirm */
.ph{display:inline;background:repeating-linear-gradient(-45deg,var(--orange-50) 0 8px,#fff 8px 16px);border:2px dashed var(--orange);color:var(--navy);border-radius:8px;padding:0 .35em;font-weight:700;font-size:.95em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,238,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:2px solid rgba(20,38,74,.06)}
.nav{display:flex;align-items:center;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;margin-right:auto}
.brand img{height:54px;width:auto;transition:transform .4s var(--bounce)} /* full-body ZimQi emu (master pose) */
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.brand svg{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-links a:not(.btn-start-tg){display:block;padding:.45rem .65rem;border-radius:var(--r-pill);text-decoration:none;font-weight:700;font-size:.95rem;color:var(--navy);white-space:nowrap}
.nav-links a:not(.btn-start-tg):hover,.nav-links a:not(.btn-start-tg)[aria-current="page"]{background:var(--orange-50);color:var(--navy)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:12px;padding:.45rem .6rem;font:inherit;font-weight:800;color:var(--navy);cursor:pointer}
.nav-cta{margin-left:.5rem;flex-shrink:0}
@media (max-width:1080px){
  .nav-toggle{display:inline-flex;align-items:center;gap:.4rem}
  .nav-links{position:absolute;left:1rem;right:1rem;top:76px;flex-direction:column;align-items:stretch;background:var(--paper);border:3px solid var(--navy);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:.75rem;display:none;z-index:100}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn-start-tg){padding:.8rem 1rem;font-size:1.05rem}
  .nav-cta{margin:.5rem 0 0 0}
  .nav-cta .btn-start-tg{width:100%;height:48px}
  .nav > .btn{display:none}
}

/* ---------- Buttons ---------- */
.btn{--bg:var(--orange);--fg:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--bg);color:var(--fg);font-family:var(--font-display);font-weight:800;font-size:1.1rem;line-height:1;padding:.95rem 1.4rem;border-radius:var(--r-pill);border:3px solid var(--navy);box-shadow:var(--shadow-pop);text-decoration:none;cursor:pointer;transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.btn:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:6px 7px 0 var(--navy);color:var(--fg)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.btn--ghost{--bg:var(--paper)}
.btn--navy{--bg:var(--navy);--fg:var(--offwhite)}
.btn--sm{font-size:.95rem;padding:.65rem 1rem;box-shadow:3px 3px 0 var(--navy)}
.btn .tick{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--green);color:#fff;font-size:.8em}

/* ---------- Generic sections ---------- */
section{position:relative}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section--navy{background:var(--navy);color:var(--offwhite)}
.section--navy h2,.section--navy h3{color:var(--offwhite)}
.section--navy a{color:var(--offwhite)}
.section--tint{background:var(--orange-50)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--orange-ink);margin-bottom:.75rem}
.section--navy .eyebrow{color:var(--orange)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--navy-80)}
.section--navy .lead{color:#E4E8F2}
.center{text-align:center}
.center .lead{margin-inline:auto;max-width:44rem}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* Wavy dividers */
.wave{display:block;width:100%;height:clamp(40px,6vw,80px);margin:0;line-height:0}
.wave path{fill:currentColor}
.wave--to-navy{color:var(--navy);background:var(--offwhite)}
.wave--from-navy{color:var(--navy);background:var(--offwhite);transform:scaleY(-1)}
.wave--to-tint{color:var(--orange-50);background:var(--offwhite)}
.wave--from-tint{color:var(--orange-50);background:var(--offwhite);transform:scaleY(-1)}

/* ---------- Cards ---------- */
.card{background:var(--paper);border-radius:var(--r-md);padding:1.6rem;box-shadow:var(--shadow-1);border:2px solid rgba(20,38,74,.08);transition:transform .35s var(--bounce),box-shadow .35s var(--bounce)}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-2)}
.card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.card h3{margin-top:.25rem}
.card p:last-child{margin-bottom:0}
.icon-bubble{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--orange-50);border:2px solid var(--orange);font-size:1.6rem;margin-bottom:.75rem;transition:transform .4s var(--bounce)}
.card:hover .icon-bubble{transform:scale(1.12) rotate(-8deg)}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;font-size:.8rem;padding:.3rem .7rem;border-radius:var(--r-pill);letter-spacing:.02em}
.badge--live{background:var(--green);color:#fff}
.badge--soon{background:var(--navy);color:var(--offwhite)}
.badge--ph{background:var(--orange-50);color:var(--navy);border:2px dashed var(--orange)}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,3rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--orange);opacity:.35;border-radius:8px;z-index:-1;transform:rotate(-1.2deg)}
.hero .sub{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--navy-80);margin:-.2em 0 .8em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0 1rem}
.hero-note{font-size:.95rem;color:var(--navy-60)}
.emu-says{display:inline-flex;gap:.5rem;align-items:center;margin-top:.25rem;padding:.35rem .9rem;border:2px dashed var(--orange);border-radius:var(--r-pill);background:var(--orange-50);font-weight:700;font-size:.95rem;color:var(--navy-80)}
.hero-art{position:relative}
.hero-art .frame{border-radius:var(--r-lg);overflow:hidden;border:4px solid var(--navy);box-shadow:8px 8px 0 var(--navy);transform:rotate(1.2deg)}
.chat-bubble{position:absolute;background:var(--paper);border:3px solid var(--navy);border-radius:18px 18px 18px 4px;padding:.55rem .85rem;font-weight:800;font-size:.92rem;box-shadow:3px 3px 0 var(--navy);display:flex;align-items:center;gap:.5rem;animation:floaty 5s ease-in-out infinite}
.chat-bubble .ok{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--green);color:#fff;font-size:.8em}
.chat-bubble--1{left:-6%;top:12%}
.chat-bubble--2{left:-5%;bottom:5%;animation-delay:-2.5s;border-radius:4px 18px 18px 18px}
.chat-bubble small{display:block;font-weight:600;color:var(--navy-60);font-size:.75rem}
.illus-note{font-size:.75rem;color:var(--navy-60);margin-top:.9rem;text-align:right}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.chat-bubble--1{left:2%;top:-4%}.chat-bubble--2{left:3%;bottom:22%}.chat-bubble{font-size:.8rem;padding:.4rem .65rem}.chat-bubble small{font-size:.68rem}}

/* Trust strip */
.strip{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:center;padding:1rem 0 0;list-style:none;margin:0}
.strip li{display:flex;align-items:center;gap:.5rem;font-weight:800}
.strip .dot{width:26px;height:26px;border-radius:50%;background:var(--orange);display:inline-grid;place-items:center;color:var(--navy);font-size:.8rem;border:2px solid var(--navy)}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:2.5rem}
.step{position:relative;background:var(--paper);border-radius:var(--r-lg);border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy);overflow:hidden;transition:transform .35s var(--bounce)}
.step:hover{transform:translateY(-8px) rotate(-1deg)}
.step:nth-child(2):hover{transform:translateY(-8px) rotate(1deg)}
.step img{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--offwhite);border-bottom:3px solid var(--navy)}
.step-body{padding:1.4rem 1.5rem 1.6rem}
.step-num{position:absolute;top:14px;left:14px;width:52px;height:52px;border-radius:50%;background:var(--orange);border:3px solid var(--navy);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.6rem;box-shadow:3px 3px 0 var(--navy)}
.step-num::before{counter-increment:step;content:counter(step)}

.callout{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;background:var(--paper);border-radius:var(--r-lg);padding:1.5rem 2rem;border:3px dashed var(--orange);margin-top:2.5rem}
.callout img{width:min(260px,40vw);border-radius:var(--r-md)}
@media (max-width:640px){.callout{grid-template-columns:1fr;text-align:center}.callout img{margin-inline:auto}}

/* Feature list */
.feature .badge{margin-bottom:.5rem}

/* Built for crews */
.crew-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.crew-grid .frame{border-radius:var(--r-lg);overflow:hidden;border:4px solid var(--offwhite);box-shadow:8px 8px 0 var(--orange);transform:rotate(-1deg)}
.ticks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.9rem}
.ticks li{display:grid;grid-template-columns:32px 1fr;gap:.75rem;align-items:start}
.ticks li::before{content:"✓";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;margin-top:.1rem}
.ticks.ticks--orange li::before{content:"→";background:var(--orange);color:var(--navy)}
@media (max-width:900px){.crew-grid{grid-template-columns:1fr}}

/* Roadmap (hazard tape) */
.tape{display:inline-block;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--navy) 14px 28px);color:transparent;height:14px;width:100%;border-radius:4px;margin:0 0 1.5rem}
.roadmap-card{position:relative;background:var(--paper);border-radius:var(--r-md);padding:1.3rem 1.3rem 1.2rem;border:2px dashed rgba(20,38,74,.35);transition:transform .35s var(--bounce)}
.roadmap-card:hover{transform:rotate(-1.5deg) scale(1.02)}
.roadmap-card h3{font-size:1.15rem;margin:.6rem 0 .3rem}
.roadmap-card p{font-size:.95rem;color:var(--navy-60);margin:0}
.roadmap-disclaimer{background:var(--navy);color:var(--offwhite);border-radius:var(--r-md);padding:1rem 1.25rem;font-weight:700;margin:0 0 2rem;display:flex;gap:.75rem;align-items:flex-start}

/* Founding crews CTA */
.founding{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;background:var(--orange);border:4px solid var(--navy);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem);box-shadow:10px 10px 0 var(--navy)}
.founding h2{margin-bottom:.3em}
.founding img{width:min(240px,50vw)}
.founding .lead{color:var(--navy)}
@media (max-width:760px){.founding{grid-template-columns:1fr;text-align:center}.founding img{margin-inline:auto;order:-1}}

/* FAQ */
.faq{max-width:52rem;margin:2rem auto 0;display:grid;gap:1rem}
.faq details{background:var(--paper);border-radius:var(--r-md);border:2px solid rgba(20,38,74,.12);box-shadow:var(--shadow-1);transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow-2);border-color:var(--orange)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3.5rem 1.1rem 1.3rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-weight:900;transition:transform .35s var(--bounce)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .answer{padding:0 1.3rem 1.2rem}

/* ---------- Pricing ---------- */
.plans{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-top:2.5rem;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg);padding:1.8rem 1.5rem;border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy);transition:transform .35s var(--bounce)}
.plan:hover{transform:translateY(-8px) rotate(-1deg)}
.plan--pop{background:var(--navy);color:var(--offwhite);box-shadow:6px 6px 0 var(--orange);position:relative}
.plan--pop h3,.plan--pop .price{color:var(--offwhite)}
.plan--pop .ticks li::before{background:var(--orange);color:var(--navy)}
.plan-flag{position:absolute;top:-16px;right:18px;background:var(--orange-50);color:var(--navy);border:3px solid var(--navy);border-radius:var(--r-pill);padding:.25rem .8rem;font-weight:900;font-size:.8rem;transform:rotate(3deg)}
.price{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:1;margin:.4rem 0}
.price small{font-size:1rem;font-weight:700;opacity:.8}
.plan .ticks{margin:1rem 0 1.5rem;font-size:.97rem;flex:1}
.plan .btn{width:100%}
.price-note{font-size:.9rem;color:var(--navy-60)}
.plan--pop .price-note{color:#D5DBE8}
table.credits{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1);margin-top:1.5rem}
.credits th,.credits td{padding:1rem 1.2rem;text-align:left;border-bottom:2px solid var(--navy-10);vertical-align:top}
.credits thead th{background:var(--navy);color:var(--offwhite);font-family:var(--font-display);font-size:1.05rem}
.credits td.num{font-family:var(--font-display);font-weight:800;font-size:1.2rem;white-space:nowrap}
.credits tr:last-child td{border-bottom:0}
.credits tr.free td{background:var(--green-50)}
.table-wrap{overflow-x:auto}

/* ---------- Telegram-style chat mock (no Telegram branding) ---------- */
.phone{max-width:340px;margin-inline:auto;background:var(--navy);border-radius:40px;padding:14px;box-shadow:8px 8px 0 var(--orange)}
.phone-screen{background:#EEF1F7;border-radius:28px;padding:1rem .8rem;display:grid;gap:.6rem;min-height:420px;align-content:start}
.phone-top{display:flex;align-items:center;gap:.6rem;background:var(--paper);border-radius:16px;padding:.5rem .7rem;margin-bottom:.3rem}
.phone-top img{width:36px;height:36px;border-radius:50%}
.phone-top b{display:block;line-height:1.1}
.phone-top small{color:var(--navy-60);font-size:.75rem}
.msg{max-width:85%;padding:.55rem .8rem;border-radius:16px;font-size:.92rem;line-height:1.4;box-shadow:0 1px 0 rgba(20,38,74,.12)}
.msg--bot{background:var(--paper);border-bottom-left-radius:4px}
.msg--me{background:var(--orange-100);margin-left:auto;border-bottom-right-radius:4px}
.msg .chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}
.msg .chip{border:2px solid var(--navy);border-radius:999px;padding:.1rem .55rem;font-weight:800;font-size:.8rem;background:var(--paper)}
.msg .flag{display:inline-block;background:var(--orange-50);border:2px dashed var(--orange);border-radius:8px;padding:0 .3rem;font-weight:800}
.msg .ok{color:var(--green);font-weight:900}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem;background:var(--paper);padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-lg);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.form .row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.field label,.field legend{display:block;font-weight:800;margin-bottom:.35rem}
.field .hint{font-size:.85rem;color:var(--navy-60);font-weight:600}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--navy);background:var(--offwhite);border:2px solid var(--navy-60);border-radius:14px;padding:.8rem .9rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,0,.25)}
fieldset.field{border:0;padding:0;margin:0}
.radio-row{display:flex;flex-wrap:wrap;gap:.6rem}
.radio-row label{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;border:2px solid var(--navy-60);border-radius:999px;padding:.4rem .9rem;cursor:pointer;background:var(--offwhite)}
.radio-row input{width:auto;accent-color:var(--orange)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.95rem}
.consent input{width:22px;height:22px;accent-color:var(--orange);margin-top:.15rem}
.form-status{display:none;grid-template-columns:auto 1fr;gap:1rem;align-items:center;background:var(--orange-50);border:2px dashed var(--orange);border-radius:var(--r-md);padding:1rem}
.form-status.show{display:grid}
.form-status img{width:110px}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 1rem}
.page-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
.page-hero-grid > img{max-height:340px;width:auto;margin-inline:auto;filter:drop-shadow(6px 8px 0 rgba(20,38,74,.12))}
@media (max-width:800px){.page-hero-grid{grid-template-columns:1fr}.page-hero-grid > img{max-height:240px}}
.wiggle{animation:wiggle 4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-4deg)}94%{transform:rotate(4deg)}97%{transform:rotate(-2deg)}}

/* Honesty box */
.honesty{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.honesty > div{background:var(--paper);border-radius:var(--r-md);padding:1.3rem;border:2px solid rgba(20,38,74,.1)}
.honesty h3{display:flex;gap:.5rem;align-items:center;font-size:1.15rem}
.honesty ul{margin:0;padding-left:1.1rem}
.honesty li{margin:.3rem 0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#DCE2EE;padding:3.5rem 0 2rem;font-size:.95rem}
.site-footer a{color:var(--offwhite)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.footer-grid h2{font-size:1.05rem;color:var(--offwhite);margin-bottom:.75rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-brand svg{height:34px;width:auto;margin-bottom:.75rem}
.footer-legal{border-top:1px solid rgba(255,248,238,.18);margin-top:2.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem}
.site-footer .ph{color:var(--navy)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}

/* 404 */
.notfound{text-align:center;padding:clamp(3rem,8vw,6rem) 0}
.notfound img{width:min(320px,70vw);margin:0 auto 1.5rem}
.notfound .big{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,14vw,8rem);line-height:1;color:var(--orange);-webkit-text-stroke:3px var(--navy);text-shadow:6px 6px 0 var(--navy);margin:0}

/* Scroll-in reveal (progressive enhancement; content visible without JS) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s var(--bounce)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .card:hover,.step:hover,.plan:hover,.roadmap-card:hover,.btn:hover{transform:none}
}

/* Cards inside dark sections keep navy headings */
.section--navy .card h3,.section--navy .card{color:var(--navy)}
.center > img{max-width:340px;margin-inline:auto}
/* ---- Who it's for / industries (added for the multi-site repositioning) ---- */
.ind-card{display:flex;flex-direction:column;padding:1rem 1rem 1.4rem}
.ind-card h3{font-size:1.25rem;margin-top:.9rem}
.ind-art{background:var(--orange-50);object-fit:contain;aspect-ratio:16/9;border-radius:calc(var(--r-md) - 6px);overflow:hidden;background:linear-gradient(180deg,var(--orange-50),#fff);display:flex;align-items:flex-end;justify-content:center;border:3px solid var(--navy)}
.ind-art img{height:94%;width:auto;object-fit:contain}
.ind-art--scene img{width:100%;height:100%;object-fit:cover}
.ind-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:0;margin:2rem 0 1rem}
.ind-chips li{background:var(--paper);border:2px solid var(--navy);border-radius:var(--r-pill);padding:.45rem 1rem;font-weight:800;color:var(--navy)}
.ind-list{display:grid;gap:3rem}
.ind-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:center}
.ind-row--flip .ind-row-art{order:2}
.ind-row h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:.2rem}
.ind-row .eyebrow{margin-bottom:0}
.ind-row-art{aspect-ratio:16/10;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--orange-50),#fff);border:4px solid var(--navy);box-shadow:8px 8px 0 var(--navy);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.ind-row--flip .ind-row-art{box-shadow:-8px 8px 0 var(--orange)}
.ind-row-art img{height:92%;width:auto;object-fit:contain}
.ind-row-art--scene img{width:100%;height:100%;object-fit:cover}
.frame-soft{border-radius:var(--r-lg);overflow:hidden;border:4px solid var(--navy);box-shadow:8px 8px 0 var(--orange)}
.frame-soft img{display:block;width:100%;height:auto}
@media (max-width:800px){.ind-row{grid-template-columns:1fr;gap:1.25rem}.ind-row--flip .ind-row-art{order:0}}

/* mobile: keep hero art from pushing content below the fold (CLS) */
.page-hero-grid > img{height:auto;aspect-ratio:auto 444/600}
@media (max-width:640px){.page-hero-grid > img{max-height:200px;width:auto;margin:0 auto}}

/* Start on Telegram button & QR modal (NX-02) */
.btn-start-tg{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange,#FF6B00);color:var(--navy,#14264A);font-family:var(--font-display,inherit);font-weight:800;font-size:18px;line-height:1.2;height:56px;padding:0 24px 0 10px;border-radius:var(--r-pill,999px);border:3px solid var(--navy,#14264A);box-shadow:4px 4px 0 var(--navy,#14264A);text-decoration:none;cursor:pointer;white-space:nowrap;box-sizing:border-box;transition:transform .25s var(--bounce,ease),box-shadow .25s var(--bounce,ease)}
.btn-start-tg:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:6px 7px 0 var(--navy,#14264A);color:var(--navy,#14264A)}
.btn-start-tg:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy,#14264A)}
.btn-start-tg:focus-visible{outline:3px solid var(--navy,#14264A);outline-offset:3px}
.btn-start-tg img,.btn img{display:block;flex-shrink:0;width:24px;height:24px;max-width:24px;max-height:24px;margin:0;filter:none}
.btn-start-tg span{display:inline-block;line-height:1.2;white-space:nowrap}
.btn-start-tg--small{height:40px;padding:0 16px 0 8px;gap:8px;font-size:14px;box-shadow:3px 3px 0 var(--navy,#14264A)}
.btn-start-tg--small img{width:20px;height:20px;max-width:20px;max-height:20px}
.btn-start-tg--secondary{background:#FFFFFF;color:var(--navy,#14264A);height:40px;padding:0 16px 0 8px;gap:8px;font-size:14px;box-shadow:3px 3px 0 var(--navy,#14264A)}
@media (max-width:600px){.btn-start-tg--default{height:52px;width:100%;padding:0 20px 0 10px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.btn-start-tg:hover,.btn-start-tg:active{transform:none}}

/* QR Modal dialog */
.qr-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.qr-modal[hidden]{display:none}
.qr-modal-backdrop{position:absolute;inset:0;background:rgba(255,248,238,0.85);backdrop-filter:blur(6px)}
.qr-modal-dialog{position:relative;background:#FFFFFF;border:4px solid var(--navy,#14264A);border-radius:var(--r-card,20px);box-shadow:8px 8px 0 var(--navy,#14264A);padding:2rem;max-width:440px;width:90%;text-align:center;z-index:1}
.qr-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.8rem;font-weight:700;color:var(--navy,#14264A);cursor:pointer;line-height:1}