/* ============================================================
   TOKENS — copied verbatim from the InfinityDigital design system
   ============================================================ */
:root{
--navy-950:#03061f;--navy-900:#050a30;--navy-800:#0b1247;--navy-700:#141c5e;
--blue-600:#1a2fd6;--blue-500:#233dff;--blue-400:#5568ff;--blue-300:#8f9bff;--blue-100:#dfe3ff;--blue-50:#eef0ff;
--ink-900:#0a0e24;--ink-700:#2b3157;--ink-500:#5a6183;--ink-400:#8a90ac;--ink-300:#b9bdd0;--ink-200:#dcdfe9;--ink-100:#eceef5;
--paper-50:#f4f6fc;--paper-0:#ffffff;
--amber-500:#f5a524;--green-600:#0f9d63;--red-600:#d83a2b;

--surface-page:var(--paper-0);--surface-muted:var(--paper-50);--surface-card:var(--paper-0);
--surface-inverse:var(--navy-900);--surface-inverse-2:var(--navy-800);--surface-accent:var(--blue-50);
--surface-field-inverse:rgba(255,255,255,.06);
--text-heading:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
--text-on-inverse:var(--paper-50);--text-on-inverse-muted:rgba(244,246,252,.66);--text-accent:var(--blue-500);
--border-subtle:var(--ink-200);--border-strong:var(--ink-300);--border-inverse:rgba(244,246,252,.16);--border-focus:var(--blue-500);
--action-primary:var(--blue-500);--action-primary-hover:var(--blue-600);--action-primary-press:#1626ab;
--action-secondary:var(--navy-900);--star:var(--amber-500);--state-success:var(--green-600);--state-error:var(--red-600);
--overlay-hero:linear-gradient(90deg,rgba(5,10,48,.86) 0%,rgba(5,10,48,.66) 48%,rgba(5,10,48,.28) 100%);
--ring-focus:0 0 0 3px rgba(35,61,255,.32);

--font-display:"Instrument Sans",system-ui,sans-serif;--font-body:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--type-hero:clamp(2.5rem,4.6vw,4rem);--type-h1:clamp(2.25rem,3.6vw,3.25rem);--type-h2:clamp(1.875rem,2.6vw,2.5rem);
--type-h3:1.5rem;--type-h4:1.25rem;--type-lead:1.1875rem;--type-body:1.0625rem;--type-small:.9375rem;--type-micro:.8125rem;--type-eyebrow:.75rem;--type-stat:clamp(2rem,3vw,2.75rem);
--lh-tight:1.04;--lh-heading:1.14;--lh-snug:1.35;--lh-body:1.6;
--ls-hero:-0.03em;--ls-heading:-0.02em;--ls-eyebrow:.14em;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--section-y:var(--space-24);--section-y-lg:var(--space-32);--gutter:var(--space-6);--container:1200px;--container-narrow:760px;

--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;
--shadow-sm:0 2px 6px rgba(10,14,36,.07);--shadow-md:0 8px 20px -6px rgba(10,14,36,.14);--shadow-hover:0 16px 32px -10px rgba(10,14,36,.2);--shadow-panel:0 28px 64px -20px rgba(5,10,48,.42);
--dur-base:200ms;--ease-out:cubic-bezier(.2,.7,.3,1);--reveal-shift:20px;--lift:-4px;
}
@media (prefers-reduced-motion:reduce){:root{--dur-base:0ms;--reveal-shift:0px;--lift:0px}}

/* ============================================================ BASE ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);font-weight:var(--fw-bold);margin:0}
h1{font-size:var(--type-h1);letter-spacing:var(--ls-hero)}
h2{font-size:var(--type-h2)}h3{font-size:var(--type-h3)}h4{font-size:var(--type-h4);font-weight:var(--fw-semibold)}
p{margin:0}
a{color:var(--text-accent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-base) var(--ease-out)}
a:hover{color:var(--action-primary-hover)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
::selection{background:var(--blue-100);color:var(--ink-900)}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{scroll-margin-top:80px}
.eyebrow{font-family:var(--font-mono);font-size:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);font-weight:var(--fw-medium)}
.eyebrow.on-dark{color:var(--blue-300)}
.mono{font-family:var(--font-mono)}
.lead{font-size:var(--type-lead);line-height:var(--lh-snug);color:var(--text-muted)}

/* ============ Icon (Lucide via mask) ============ */
.ic{display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex:none;vertical-align:middle}
.ic-16{width:16px;height:16px}.ic-18{width:18px;height:18px}.ic-24{width:24px;height:24px}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--type-body);line-height:1;border-radius:var(--radius-md);border:1px solid transparent;padding:14px 22px;cursor:pointer;text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.btn:hover{transform:scale(1.03);box-shadow:var(--shadow-hover)}
.btn:active{transform:none;background:var(--action-primary-press)}
.btn-primary{background:var(--action-primary);color:#fff}
.btn-primary:hover{background:var(--action-primary);color:#fff}
.btn-outline{background:transparent;color:var(--action-primary);border-color:var(--border-strong)}
.btn-outline:hover{color:var(--action-primary)}
.btn-ondark-outline{background:rgba(255,255,255,.04);color:var(--paper-50);border-color:var(--border-inverse)}
.btn-ondark-outline:hover{color:var(--paper-50)}
.btn-lg{padding:17px 26px;font-size:var(--type-lead)}
.btn-full{width:100%}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

/* ============ Badge ============ */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--type-micro);font-weight:var(--fw-semibold);padding:6px 12px;border-radius:var(--radius-pill);line-height:1}
.badge-ondark{background:rgba(255,255,255,.06);color:var(--blue-300);border:1px solid var(--border-inverse)}
.badge-solid{background:var(--action-primary);color:#fff}
.badge.uppercase{text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-family:var(--font-mono);font-size:var(--type-eyebrow)}

/* ============ Cards ============ */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card-hover:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-hover)}
.card-accent{background:var(--surface-accent);border-color:var(--blue-100)}
.card-ondark{background:rgba(255,255,255,.04);border:1px solid var(--border-inverse);box-shadow:none}

/* ============ Rating stars ============ */
.stars{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--type-small)}
.stars .row{display:inline-flex;gap:2px;color:var(--star)}
.stars .ic{width:18px;height:18px}
.stars .meta{color:var(--text-muted)}
.stars.on-dark .meta{color:var(--text-on-inverse-muted)}

/* ============ Trust bullets ============ */
.tb{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.tb.col{flex-direction:column;gap:var(--space-3)}
.tb li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--type-small)}
.tb li .ic{color:var(--action-primary)}
.tb.on-dark li{color:var(--text-on-inverse-muted)}
.tb.on-dark li .ic{color:var(--blue-400)}

/* ============ Stat ============ */
.stat .v{font-family:var(--font-display);font-size:var(--type-stat);font-weight:var(--fw-bold);letter-spacing:var(--ls-hero);line-height:1;color:var(--text-heading)}
.stat .l{font-size:var(--type-micro);color:var(--text-muted);margin-top:var(--space-2)}
.stat.on-dark .v{color:var(--paper-50)}
.stat.on-dark .l{color:var(--text-on-inverse-muted)}

/* ============ Section heading ============ */
.sh{display:flex;flex-direction:column;gap:var(--space-3);max-width:720px}
.sh .lead{margin-top:var(--space-1)}
.sh.on-dark h2{color:var(--paper-50)}
.sh.on-dark .lead{color:var(--text-on-inverse-muted)}

/* ============ TOP BAR ============ */
.topbar{position:sticky;top:0;z-index:40;background:var(--navy-900);border-bottom:1px solid var(--border-inverse)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) var(--gutter)}
.topbar img{height:30px}
.topbar nav{display:flex;gap:var(--space-6);align-items:center}
.topbar nav a{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--type-small);font-weight:var(--fw-medium)}
.topbar nav a:hover{color:var(--paper-50)}
.topbar .actions{display:flex;gap:var(--space-3);align-items:center}
.topbar .tel{color:var(--blue-300);text-decoration:none;font-family:var(--font-mono);font-size:var(--type-small);display:flex;align-items:center;gap:6px}
@media(max-width:900px){.topbar nav{display:none}}

/* ============ HERO ============ */
.hero{position:relative;background:var(--navy-900);overflow:hidden}
.hero .bg{position:absolute;inset:0;background:radial-gradient(1100px 620px at 78% 12%,rgba(35,61,255,.34),transparent 62%),radial-gradient(760px 520px at 8% 96%,rgba(35,61,255,.16),transparent 60%),var(--navy-900)}
.hero .grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-16);align-items:start;padding-top:var(--space-24);padding-bottom:var(--space-20)}
.hero h1{font-family:var(--font-display);font-size:var(--type-hero);font-weight:var(--fw-bold);letter-spacing:var(--ls-hero);line-height:var(--lh-tight);color:var(--paper-50);max-width:660px;text-wrap:pretty}
.hero .subline{font-size:var(--type-lead);line-height:var(--lh-snug);color:var(--text-on-inverse-muted);max-width:560px;text-wrap:pretty}
.hero .col-left{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.hero .cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.hero .stats{display:flex;gap:var(--space-10);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-inverse)}
.reveal{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ============ QUOTE CALCULATOR ============ */
.qc{background:var(--surface-inverse-2);border:1px solid var(--border-inverse);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.qc h3{font-family:var(--font-display);font-size:var(--type-h4);font-weight:var(--fw-bold);color:var(--text-on-inverse);margin:0}
.qc .sub{font-size:var(--type-micro);color:var(--text-on-inverse-muted)}
.qc .steps{display:flex;gap:6px}
.qc .steps .seg{height:5px;flex:1;border-radius:var(--radius-pill);background:rgba(255,255,255,.12)}
.qc .steps .seg.on{background:var(--blue-500)}
.qc .step-label{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--blue-300)}
.qc .field-label{font-size:var(--type-small);font-weight:var(--fw-semibold);color:var(--paper-50);margin-bottom:var(--space-1)}
.qc .field-hint{font-size:var(--type-micro);color:var(--text-on-inverse-muted);margin-bottom:var(--space-3)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.chips.c1{grid-template-columns:1fr}
.chip{display:flex;align-items:center;gap:var(--space-2);padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-inverse);background:var(--surface-field-inverse);color:var(--paper-50);cursor:pointer;font-size:var(--type-small);transition:all var(--dur-base) var(--ease-out);text-align:left;position:relative}
.chip:hover{border-color:var(--blue-400)}
.chip .ic{color:var(--blue-400)}
.chip.sel{border-color:var(--blue-500);background:rgba(35,61,255,.16)}
.chip.sel .check{margin-left:auto;color:var(--blue-300)}
.chip .check{display:none}
.chip.sel .check{display:inline-block}
.qc input{width:100%;padding:13px 14px;border-radius:var(--radius-md);border:1px solid var(--border-inverse);background:var(--surface-field-inverse);color:var(--paper-50);font-family:var(--font-body);font-size:var(--type-body)}
.qc input::placeholder{color:var(--ink-400)}
.qc input:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--ring-focus)}
.qc .err{color:#ff9c93;font-size:var(--type-micro);margin-top:var(--space-1)}
.qc .nav{display:flex;align-items:center;gap:var(--space-3)}
.qc .foot{font-size:var(--type-micro);color:var(--text-on-inverse-muted);text-align:center}
.qc .telrow{border-top:1px solid var(--border-inverse);padding-top:var(--space-4);font-size:var(--type-small);color:var(--text-on-inverse-muted);text-align:center}
.qc .telrow a{color:var(--blue-300);font-weight:var(--fw-semibold);text-decoration:none}

/* ============ TRUST STRIP ============ */
.trust-strip{background:var(--navy-800);border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse)}
.trust-strip .inner{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between;padding:var(--space-6) var(--gutter)}

/* ============ Generic section ============ */
.sec{padding:var(--section-y) 0}
.sec.muted{background:var(--surface-muted)}
.sec.dark{background:var(--navy-900)}
.sec .content{display:flex;flex-direction:column;gap:var(--space-12)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}

/* ============ Review / Service / Case / Step cards ============ */
.review .q{font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-body);margin-bottom:var(--space-4)}
.review .who{display:flex;align-items:center;gap:var(--space-3)}
.review .avatar{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--blue-50);color:var(--action-primary);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold)}
.review .name{font-weight:var(--fw-semibold);color:var(--text-heading);font-size:var(--type-small)}
.review .city{font-size:var(--type-micro);color:var(--text-muted)}

.service{display:flex;flex-direction:column;gap:var(--space-3);height:100%}
.service .ico{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-50);color:var(--action-primary);display:grid;place-items:center}
.service h4{margin:0}
.service p{font-size:var(--type-small);color:var(--text-muted);line-height:var(--lh-snug)}
.service .bl{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.service .bl li{display:flex;gap:var(--space-2);font-size:var(--type-small);align-items:flex-start}
.service .bl li .ic{color:var(--action-primary);margin-top:2px}
.service .link{margin-top:auto;padding-top:var(--space-3);font-size:var(--type-small);font-weight:var(--fw-semibold);text-decoration:none;display:inline-flex;align-items:center;gap:6px}

.case .thumb{aspect-ratio:16/10;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-muted);border:1px solid var(--border-subtle);margin-bottom:var(--space-4);display:grid;place-items:center}
.case .thumb img{width:100%;height:100%;object-fit:cover}
.case .ph{border:1px dashed var(--border-strong);width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:var(--space-4)}
.case .ph span{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--ink-400)}
.case .client{font-weight:var(--fw-semibold);color:var(--text-heading)}
.case .loc{font-size:var(--type-micro);color:var(--text-muted);font-family:var(--font-mono)}
.case .scope{font-size:var(--type-small);color:var(--text-body);margin:var(--space-2) 0}
.case .outcome{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-semibold);color:var(--action-primary);font-size:var(--type-small);background:var(--blue-50);padding:6px 12px;border-radius:var(--radius-pill)}
.case .quote{font-size:var(--type-small);color:var(--text-muted);font-style:italic;margin-top:var(--space-3)}

.step{display:flex;flex-direction:column;gap:var(--space-3)}
.step .num{font-family:var(--font-display);font-size:var(--type-h3);font-weight:var(--fw-bold);color:var(--blue-400)}
.step h4{color:var(--paper-50)}
.step p{font-size:var(--type-small);color:var(--text-on-inverse-muted);line-height:var(--lh-snug)}
.step .time{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--blue-300);display:inline-flex;align-items:center;gap:6px}

/* ============ Offer ============ */
.offer-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:var(--space-8);align-items:start}
.offer-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}

/* ============ About ============ */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-12);align-items:center}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius-xl);background:var(--surface-muted);border:1px dashed var(--border-strong);display:grid;place-items:center;padding:var(--space-8);text-align:center}
.about-photo span{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--ink-400);line-height:1.6}

/* ============ FAQ ============ */
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{list-style:none;cursor:pointer;padding:var(--space-5) 0;display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--type-h4);color:var(--text-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--action-primary);transition:transform var(--dur-base) var(--ease-out);flex:none}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .ans{padding:0 0 var(--space-5);color:var(--text-body);line-height:var(--lh-body);max-width:660px}

/* ============ FINAL CTA ============ */
.final{position:relative;background:var(--navy-950);overflow:hidden}
.final .bg{position:absolute;inset:0;background:radial-gradient(900px 480px at 20% 0%,rgba(35,61,255,.3),transparent 60%)}
.final .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center;padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg)}
.final h2{font-size:var(--type-h1);letter-spacing:var(--ls-hero);color:var(--paper-50);text-wrap:pretty}
.final p{font-size:var(--type-lead);color:var(--text-on-inverse-muted);max-width:560px}
.final .cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}

/* ============ FOOTER ============ */
footer{background:var(--navy-900);color:var(--text-on-inverse-muted);border-top:1px solid var(--border-inverse)}
footer .inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-10);padding:var(--space-16) var(--gutter) var(--space-10)}
footer img{height:34px;margin-bottom:var(--space-4)}
footer h5{font-family:var(--font-display);color:var(--paper-50);font-size:var(--type-small);margin:0 0 var(--space-4);font-weight:var(--fw-semibold)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
footer a{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--type-small)}
footer a:hover{color:var(--paper-50)}
footer .bottom{border-top:1px solid var(--border-inverse);padding:var(--space-5) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;font-size:var(--type-micro)}

/* ============ MOBILE STICKY BAR ============ */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy-900);border-top:1px solid var(--border-inverse)}
.mobile-bar .row{display:grid;grid-template-columns:1fr 1fr 1fr}
.mobile-bar a{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--paper-50);text-decoration:none;font-size:var(--type-micro);border-right:1px solid var(--border-inverse)}
.mobile-bar a:last-child{border-right:0}
.mobile-bar a .ic{color:var(--blue-400)}
.mobile-bar a.primary{background:var(--action-primary)}
.mobile-bar a.primary .ic{color:#fff}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .hero .grid{grid-template-columns:1fr;gap:var(--space-10)}
  .offer-grid,.about-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .grid-3,.offer-cols{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  footer .inner{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero .stats{flex-wrap:wrap;gap:var(--space-6)}
  .mobile-bar{display:block}
  body{padding-bottom:56px}
  .topbar .actions .btn{display:none}
}