/* ─────────────────────────────────────────────────────────────
   SIZH IT Solutions — agentic AI site
   Design tokens live in the inlined critical CSS (header.php).
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:#0B1220;--ink-2:#131C2B;--ink-3:#1E2A3D;
  --muted:#5B6878;--muted-2:#8A96A6;
  --line:#E3E8EF;--line-dk:#26324A;
  --paper:#F6F8FB;--white:#fff;
  --brand:#DD1F26;--brand-dk:#B5151B;--brand-soft:#FDECED;
  --accent:#0F62FE;
  --ok:#0E8A5F;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:16px;--radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(11,18,32,.05);
  --shadow:0 18px 50px rgba(11,18,32,.09);
  --shadow-lg:0 30px 80px rgba(11,18,32,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body{margin:0;color:var(--ink);background:var(--white);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,video{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;font-family:var(--display)}
p{margin:0}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}

.container{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.narrow{max-width:900px;margin-right:auto}
.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}

/* ── Header ─────────────────────────────────────────────── */
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:#fff;padding:12px 18px;border-radius:8px;box-shadow:var(--shadow)}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(11,18,32,.05)}
.nav-wrap{height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex:none}
.brand img{display:block;width:auto;height:34px;max-width:none}
.site-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.site-nav a{position:relative;font-weight:600;font-size:14.5px;color:#3A4759;white-space:nowrap;transition:color .18s}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current=page]{color:var(--ink)}
.site-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand)}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:14px 22px;font:600 15px/1 var(--display);cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;text-align:center}
.btn svg{width:17px;flex:none;transition:transform .2s}
.btn:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:hover svg{transform:translateX(3px)}
.btn-brand{background:var(--brand)}
.btn-brand:hover{background:var(--brand-dk)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#fff;color:var(--brand)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.btn-ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn-sm{padding:11px 18px;font-size:13.5px}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-block{width:100%}
.tlink{display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1 var(--display);color:var(--ink)}
.tlink svg{width:17px;transition:transform .2s}
.tlink:hover{color:var(--brand)}
.tlink:hover svg{transform:translateX(4px)}

/* ── Typography helpers ─────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.14em;font:700 11.5px/1.4 var(--display);color:var(--brand);margin:0 0 20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.eyebrow-light{color:#fff}
.eyebrow-light::before{background:var(--brand)}
h1{font:800 clamp(40px,5.4vw,70px)/1.04 var(--display);letter-spacing:-.032em;margin:0 0 24px}
h1 em,h2 em{font-style:normal;color:var(--brand)}
.h2{font:800 clamp(31px,3.8vw,50px)/1.1 var(--display);letter-spacing:-.03em;margin:0}
.h3{font:700 clamp(21px,2vw,26px)/1.25 var(--display);margin:0}
.lede{font-size:19px;line-height:1.62;color:var(--muted);max-width:620px}
.lede-lg{font-size:21px;line-height:1.56;color:var(--muted)}
.section{padding:100px 0}
.section-sm{padding:72px 0}
.dark{background:var(--ink);color:#fff}
.dark .lede,.dark p{color:#A7B3C4}
.dark .h2,.dark h1,.dark h2,.dark h3{color:#fff}
.soft{background:var(--paper)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:52px}
.sec-head.center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto}
.sec-head.center .lede{max-width:none}
.sec-head-row{display:flex;flex-wrap:wrap;gap:24px;align-items:end;justify-content:space-between;margin-bottom:46px}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative;padding:96px 0 84px;background:linear-gradient(180deg,#F7F9FC 0%,#fff 72%);overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-140px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(221,31,38,.09),transparent 66%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;position:relative}
.hero p.lede{margin:0 0 32px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.hero-badges span{font:600 12px/1 var(--display);padding:8px 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:#44526A}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.proof-row{display:grid;grid-template-columns:repeat(4,auto);gap:34px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.proof-row div strong{display:block;font:800 26px/1 var(--display);letter-spacing:-.02em}
.proof-row div span{font-size:12.5px;color:var(--muted)}

/* ── Hero agent visual ──────────────────────────────────── */
.agent-visual{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px;overflow:hidden}
.av-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.av-bar b{font:700 11px/1 var(--display);letter-spacing:.14em;color:#6B7A8D;text-transform:uppercase}
.av-live{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--display);color:var(--ok)}
.av-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.av-flow{display:flex;flex-direction:column;gap:11px}
.av-step{display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:start;padding:13px;border-radius:12px;background:var(--paper)}
@media(prefers-reduced-motion:no-preference){.av-step{opacity:0;transform:translateY(8px);animation:avIn .5s ease forwards}}
.av-step:nth-child(1){animation-delay:.1s}
.av-step:nth-child(2){animation-delay:.35s}
.av-step:nth-child(3){animation-delay:.6s}
.av-step:nth-child(4){animation-delay:.85s}
.av-step:nth-child(5){animation-delay:1.1s}
@keyframes avIn{to{opacity:1;transform:none}}
.av-step i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--brand)}
.av-step i svg{width:16px}
.av-step small{display:block;font:700 9.5px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.av-step b{display:block;font:600 14px/1.35 var(--display)}
.av-step.done{background:#F0FAF5}
.av-step.done i{color:var(--ok)}
.av-foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:600 11px var(--display);color:var(--muted-2)}

/* ── Marquee strip ──────────────────────────────────────── */
.strip{border-block:1px solid var(--line);background:#fff;overflow:hidden}
.strip-inner{display:flex;align-items:center;gap:0;padding:18px 0}
.strip-label{flex:none;font:700 10.5px var(--display);letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;padding-right:28px;border-right:1px solid var(--line);margin-right:28px}
.strip-items{display:flex;gap:40px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.strip-items::-webkit-scrollbar{display:none}
.strip-items b{flex:none;font:700 13px var(--display);letter-spacing:.06em;color:#44526A;white-space:nowrap}

/* ── Card grids ─────────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);padding:32px;transition:box-shadow .25s,transform .25s}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px transparent,var(--shadow)}
.card-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--brand-soft);color:var(--brand);margin-bottom:22px;flex:none}
.card-ico svg{width:23px}
.card h3,.card h2{font:700 21px/1.3 var(--display);margin:0 0 11px}
.card p{color:var(--muted);font-size:15px}
.card-num{position:absolute;top:26px;right:28px;font:700 11px var(--display);color:#C3CCD8}
.card-foot{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;font:700 13.5px var(--display);color:var(--ink)}
.card-foot svg{width:16px;transition:transform .2s}
.card:hover .card-foot{color:var(--brand)}
.card:hover .card-foot svg{transform:translateX(4px)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tags span{font:600 11.5px/1 var(--display);padding:7px 11px;border-radius:999px;background:var(--paper);color:#4A5768}
.dark .tags span{background:rgba(255,255,255,.08);color:#C3CCD8}
.card-list{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.card-list li{display:flex;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.5}
.card-list svg{width:17px;flex:none;color:var(--brand);margin-top:3px}

/* Service cards (bordered matrix) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{position:relative;display:flex;flex-direction:column;padding:38px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:330px;background:#fff;transition:background .25s,color .25s}
.svc:hover{background:var(--ink);color:#fff}
.svc:hover p,.svc:hover small{color:#A7B3C4}
.svc:hover .card-ico{background:rgba(255,255,255,.1);color:#fff}
.svc:hover .tags span{background:rgba(255,255,255,.1);color:#D4DBE4}
.svc small{display:block;font:700 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.svc h2,.svc h3{font:700 22px/1.25 var(--display);margin:0 0 11px}
.svc p{color:var(--muted);font-size:15px;margin-bottom:18px}
.svc .card-foot{color:inherit}

/* ── Capability / step stack ────────────────────────────── */
.stack{display:flex;flex-direction:column}
.stack-row{display:grid;grid-template-columns:44px 1fr 1.25fr;gap:24px;align-items:center;padding:26px 0;border-top:1px solid var(--line-dk)}
.stack-row span{font:700 12px var(--display);color:var(--brand)}
.stack-row h3{font:600 18px var(--display);margin:0}
.stack-row p{margin:0;font-size:14.5px}

/* ── Products ───────────────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.prod-art{position:relative;height:200px;padding:22px;overflow:hidden}
.prod-body{display:flex;flex-direction:column;flex:1;padding:28px}
.prod-body small{font:700 10.5px var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.prod-body h2,.prod-body h3{font:700 23px var(--display);margin:8px 0 10px}
.prod-body p{color:var(--muted);font-size:14.5px}
.prod.featured{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.prod.featured .prod-art{height:auto;min-height:330px}
.prod.featured .prod-body{padding:48px}
.prod.featured h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.028em}
.prod.featured p{font-size:16.5px}
.badge{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;font:700 9.5px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm)}
.badge.live{color:var(--ok)}
.badge.new{color:#fff;background:var(--brand)}

/* Tones */
.tone-cobalt .prod-art{background:linear-gradient(135deg,#E7EEFF,#F4F7FF)}
.tone-violet .prod-art{background:linear-gradient(135deg,#EFE8FF,#F7F4FF)}
.tone-amber  .prod-art{background:linear-gradient(135deg,#FFF2D6,#FFF9EC)}
.tone-emerald .prod-art{background:linear-gradient(135deg,#DFF6EA,#F1FBF6)}
.tone-cyan   .prod-art{background:linear-gradient(135deg,#DDF2F7,#F0FAFC)}
.tone-rose   .prod-art{background:linear-gradient(135deg,#FFE4EA,#FFF3F5)}
.tone-indigo .prod-art{background:linear-gradient(135deg,#E4E8FF,#F3F5FF)}
.tone-teal   .prod-art{background:linear-gradient(135deg,#DCF3F0,#EFFAF8)}
.tone-bg-cobalt{background:#F3F7FF}.tone-bg-violet{background:#F7F4FF}.tone-bg-amber{background:#FFFAEE}
.tone-bg-emerald{background:#F2FBF6}.tone-bg-cyan{background:#F2FBFD}.tone-bg-rose{background:#FFF5F7}
.tone-bg-indigo{background:#F4F6FF}.tone-bg-teal{background:#F1FAF8}

/* Product art mock */
.mock{position:absolute;left:38px;right:-24px;bottom:-14px;top:68px;background:#fff;border-radius:12px 0 0 0;box-shadow:0 -4px 30px rgba(11,18,32,.13);padding:14px;display:flex;gap:11px}
.mock-side{flex:none;width:44px;display:flex;flex-direction:column;gap:7px}
.mock-side i{height:7px;border-radius:3px;background:#E8EDF3}
.mock-side i:first-child{background:var(--brand);opacity:.75}
.mock-main{flex:1;display:flex;flex-direction:column;gap:8px}
.mock-main i{height:9px;border-radius:3px;background:#EEF2F7}
.mock-main i:nth-child(1){width:58%;background:#DDE4EC}
.mock-bars{display:flex;align-items:flex-end;gap:6px;height:62px;margin-top:6px}
.mock-bars b{flex:1;border-radius:4px 4px 0 0;background:#C9D6F5}
.mock-bars b:nth-child(1){height:38%}.mock-bars b:nth-child(2){height:66%}
.mock-bars b:nth-child(3){height:46%}.mock-bars b:nth-child(4){height:84%}
.mock-bars b:nth-child(5){height:58%;background:var(--brand);opacity:.8}

/* Chat mock for the virtual agent */
.chat-mock{position:absolute;z-index:1;inset:64px 26px -10px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 34px rgba(11,18,32,.14);padding:18px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.chat-head i{width:30px;height:30px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff;flex:none}
.chat-head i svg{width:16px}
.chat-head b{font:600 13px var(--display)}
.chat-head small{display:block;font-size:10.5px;color:var(--ok);font-weight:600}
.bubble{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.bubble.them{background:var(--paper);border-bottom-left-radius:4px}
.bubble.us{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bubble.typing{display:flex;gap:4px;align-items:center;width:fit-content}
.bubble.typing i{width:6px;height:6px;border-radius:50%;background:#A9B5C4;animation:dot 1.3s infinite}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── Use cases ──────────────────────────────────────────── */
.uc-group{padding:40px 0;border-top:1px solid var(--line)}
.uc-group:first-child{border-top:0}
.uc-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.uc-head .card-ico{margin:0}
.uc-head h2{font:700 25px var(--display);margin:0}
.uc-head p{color:var(--muted);font-size:14.5px;margin-top:3px}
.uc-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:16px}
.uc-item{padding:22px;border-radius:13px;background:var(--paper);transition:background .2s,transform .2s}
.uc-item:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.uc-item h3{font:600 16px/1.35 var(--display);margin:0 0 7px}
.uc-item p{font-size:14px;color:var(--muted);margin:0}
.uc-item.dk{background:rgba(255,255,255,.05)}
.uc-item.dk:hover{background:rgba(255,255,255,.09);box-shadow:none}
.uc-item.dk p{color:#A7B3C4}

/* ── Hire / pricing ─────────────────────────────────────── */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--line);padding:32px 28px;transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.is-popular{box-shadow:inset 0 0 0 2px var(--brand),var(--shadow)}
.plan-flag{position:absolute;top:-12px;left:28px;font:700 10px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--brand);color:#fff}
.plan-flag.alt{background:var(--ink)}
.plan h3{font:700 20px var(--display);margin:0 0 6px}
.plan .plan-hours{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px}
.plan .plan-hours b{font:800 40px/1 var(--display);letter-spacing:-.03em}
.plan .plan-hours span{font-size:14px;color:var(--muted)}
.plan .plan-dur{font:600 13px var(--display);color:var(--brand);margin-bottom:18px}
.plan > p{font-size:14.5px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.plan-best{font-size:13.5px;color:var(--muted);padding:16px 0}
.plan-best b{display:block;font:700 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.plan ul{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.plan li{display:flex;gap:10px;font-size:14px;color:#44526A;line-height:1.45}
.plan li svg{width:16px;flex:none;color:var(--brand);margin-top:3px}
.plan .btn{margin-top:auto}

.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{padding:28px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.role h3{font:700 18px var(--display);margin:0 0 8px}
.role p{font-size:14px;color:var(--muted);margin-bottom:16px}

.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{position:relative;padding-top:28px;border-top:2px solid var(--line-dk)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:-13px;left:0;background:var(--ink);color:var(--brand);font:700 11px var(--display);padding:4px 9px;border-radius:999px}
.step h3{font:600 17px var(--display);margin:0 0 8px}
.step p{font-size:14.5px}
.light-steps .step{border-color:var(--line)}
.light-steps .step::before{background:var(--brand);color:#fff}

/* ── Page hero ──────────────────────────────────────────── */
.page-hero{padding:78px 0 72px;background:linear-gradient(180deg,var(--paper),#fff);border-bottom:1px solid var(--line)}
.page-hero.dark{background:linear-gradient(170deg,var(--ink),#16213A);border-bottom:0}
.page-hero.dark::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(221,31,38,.2),transparent 48%);pointer-events:none}
.page-hero{position:relative;overflow:hidden}
.page-hero h1{margin-bottom:20px}
.page-hero .lede{max-width:700px}
.page-hero .actions{margin-top:30px}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}
.crumb a:hover{color:var(--brand)}
.dark .crumb,.dark .crumb a{color:#8A96A6}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.panel{display:flex;flex-direction:column;gap:14px;padding:34px;border-radius:var(--radius-lg);background:var(--ink);color:#fff}
.panel small{font:700 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#8A96A6}
.panel b{padding-top:12px;border-top:1px solid var(--line-dk);font:500 15.5px var(--display)}
.panel .card-ico{background:rgba(255,255,255,.1);color:#fff}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.flist{display:flex;flex-direction:column;margin:22px 0}
.flist li{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.flist svg{width:19px;flex:none;color:var(--brand);margin-top:4px}
.dark .flist li{border-color:var(--line-dk);color:#C9D2DD}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--brand);padding-left:15px;margin-top:28px;line-height:1.6}

/* ── Work / case list ───────────────────────────────────── */
.case-list{border-top:1px solid var(--line)}
.case-row{display:grid;grid-template-columns:52px .85fr 1.3fr 44px;gap:28px;align-items:center;padding:28px 12px;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.case-row:hover{background:var(--paper);padding-left:22px}
.case-row .n{font:700 11px var(--display);color:#B9C3D0}
.case-row small{font:700 10.5px var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.case-row h3{font:700 22px var(--display);margin:5px 0 0}
.case-row p{color:var(--muted);font-size:14.5px}
.rarr{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s}
.rarr svg{width:17px}
.case-row:hover .rarr{background:var(--brand);color:#fff;box-shadow:none}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.case-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.case-card[hidden]{display:none}
.case-art{position:relative;height:190px;padding:28px;background:linear-gradient(135deg,var(--ink),#1F3254);color:#fff;overflow:hidden}
.case-art b{font:800 78px/1 var(--display);opacity:.1}
.case-art i{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);width:230px;height:230px;right:-60px;top:-60px}
.case-art i:last-child{width:140px;height:140px;right:-12px;top:-14px}
.case-card > div:last-child{display:flex;flex-direction:column;flex:1;padding:30px}
.case-card h2{font:700 23px var(--display);margin:8px 0 10px}
.case-card p{color:var(--muted);font-size:14.5px}
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filters button{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:10px 17px;font:600 13.5px var(--display);cursor:pointer;transition:.2s}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters button.active{background:var(--ink);color:#fff;box-shadow:none}

.case-detail{padding:82px 0 72px;background:linear-gradient(170deg,var(--ink),#1A2740);color:#fff}
.case-detail .lede{color:#A7B3C4;max-width:760px}
.case-meta{display:flex;flex-wrap:wrap;gap:60px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line-dk)}
.case-meta small{display:block;font:700 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7D8A9C;margin-bottom:7px}
.case-meta span{font:600 15px var(--display)}
.story{max-width:860px}
.story-block{padding:34px 0;border-bottom:1px solid var(--line)}
.story-block h2{font:700 27px/1.3 var(--display);margin:0 0 12px}
.story-block p{color:var(--muted);font-size:16.5px}

/* ── Industries ─────────────────────────────────────────── */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ind{padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;transition:background .2s}
.ind:hover{background:var(--paper)}
.ind h2,.ind h3{font:700 21px var(--display);margin:0 0 10px}
.ind p{color:var(--muted);font-size:14.5px}
.ind small{display:block;font:700 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:22px 0 9px}

/* ── Technology ─────────────────────────────────────────── */
.tech-group{display:grid;grid-template-columns:240px 1fr;gap:30px;padding:26px 0;border-bottom:1px solid var(--line)}
.tech-group h2{font:600 17.5px var(--display);margin:0}
.tech-group > div{display:flex;flex-wrap:wrap;gap:8px}
.tech-group span{padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;transition:.2s}
.tech-group span:hover{box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}

/* ── Stats / values ─────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{padding:30px;border-radius:var(--radius);background:rgba(255,255,255,.05)}
.stat b{display:block;font:800 40px/1 var(--display);letter-spacing:-.03em;color:#fff;margin-bottom:8px}
.stat span{font-size:13.5px;color:#9AA7B8}
.val-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:34px;align-items:start}
.val{padding-left:24px;border-left:1px solid var(--line-dk)}
.val h3{font:600 18px var(--display);margin:0 0 9px;color:#fff}
.val p{font-size:14.5px}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:600 17.5px/1.45 var(--display);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details > p{padding:0 0 24px;color:var(--muted);font-size:15.5px;max-width:760px}

/* ── Closing CTA ────────────────────────────────────────── */
.closing-cta{position:relative;padding:84px 0;background:linear-gradient(135deg,var(--ink),#1B2A45);color:#fff;overflow:hidden}
.closing-cta::before{content:"";position:absolute;top:-200px;right:-100px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(221,31,38,.26),transparent 64%)}
.closing-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.closing-grid h2{font:800 clamp(32px,4.2vw,52px)/1.08 var(--display);letter-spacing:-.032em;margin:0 0 16px}
.closing-grid p{color:#A7B3C4;font-size:16.5px;max-width:520px}
.closing-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.closing-actions .btn{width:100%;max-width:330px}
.closing-points{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.closing-points li{display:flex;gap:10px;align-items:center;font-size:14px;color:#A7B3C4}
.closing-points svg{width:16px;color:var(--brand);flex:none}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:#fff;padding:76px 0 26px}
.footer-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:54px}
.footer-brand p{color:#93A0B1;font-size:14.5px;max-width:380px;margin:20px 0}
.footer-brand img{display:block;width:auto;height:36px;max-width:none}
.footer-contact{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.footer-contact a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:#D4DBE4}
.footer-contact svg{width:15px;color:var(--brand)}
.footer-contact a:hover{color:#fff}
.footer-offices{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer-offices small{display:block;font:700 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7D8A9C;margin-bottom:6px}
.footer-offices span{font-size:13px;color:#A7B3C4;line-height:1.55}
.footer-grid h3{font:700 11px var(--display);letter-spacing:.15em;text-transform:uppercase;color:#7D8A9C;margin:0 0 18px}
.footer-grid > div:not(.footer-brand){display:flex;flex-direction:column;gap:11px}
.footer-grid > div:not(.footer-brand) a{font-size:14px;color:#C3CCD8}
.footer-grid > div:not(.footer-brand) a:hover{color:var(--brand)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:58px;padding-top:24px;border-top:1px solid var(--line-dk);font-size:12.5px;color:#7D8A9C}
.footer-legal a:hover{color:#fff}
.whatsapp-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 10px 28px rgba(37,211,102,.4);transition:transform .2s}
.whatsapp-fab svg{width:27px}
.whatsapp-fab:hover{transform:scale(1.08)}

/* ── Forms ──────────────────────────────────────────────── */
.form-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:36px}
.form-card h2{font:700 23px var(--display);margin:0 0 6px}
.form-card > p{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.form-card label{display:block;font:600 12.5px var(--display);margin-bottom:18px}
.form-card label span{color:var(--brand)}
.form-card input,.form-card select,.form-card textarea{display:block;width:100%;margin-top:7px;padding:12px 14px;border:0;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);outline:none;transition:box-shadow .18s;font-weight:500}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{box-shadow:inset 0 0 0 2px var(--brand);background:#fff}
.form-card textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.honeypot{position:absolute!important;left:-9999px}
.form-status{font-size:13.5px;margin-top:14px;min-height:20px}
.form-status.err{color:var(--brand)}
.form-status.ok{color:var(--ok)}
.form-card > small{display:block;color:var(--muted-2);font-size:11.5px;margin-top:14px;line-height:1.55}
.contact-methods{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.contact-methods > *{display:flex;flex-direction:column;gap:5px;padding-top:15px;border-top:1px solid var(--line)}
.contact-methods small{font:700 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.contact-methods b{font:600 14px/1.5 var(--display)}
.contact-methods a:hover b{color:var(--brand)}

/* ── Legal / 404 ────────────────────────────────────────── */
.prose{max-width:800px}
.prose h2{font:700 22px var(--display);margin:36px 0 12px}
.prose p,.prose li{color:var(--muted);font-size:15.5px;margin-bottom:12px}
.prose ul{list-style:disc;padding-left:22px}
.center-block{text-align:center;max-width:620px;margin-inline:auto}

/* ── Reveal ─────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1080px){
  .site-nav{gap:15px}.site-nav a{font-size:13px}
  .grid-4,.plan-grid,.steps-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .val-grid{grid-template-columns:1fr 1fr}.val-grid > div:first-child{grid-column:1/-1}
  .proof-row{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:980px){
  .hero-grid,.detail-grid,.split,.closing-grid,.sec-head{grid-template-columns:1fr;gap:40px}
  .sec-head{gap:20px;align-items:start}
  .svc-grid,.prod-grid,.grid-3,.ind-grid,.role-grid,.case-grid{grid-template-columns:repeat(2,1fr)}
  .prod.featured{grid-column:span 2;grid-template-columns:1fr}
  .prod.featured .prod-art{min-height:250px}
  .prod.featured .prod-body{padding:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .nav-cta{display:none}
  .closing-actions .btn{max-width:none}
  .section{padding:76px 0}
  .stack-row{grid-template-columns:36px 1fr;gap:16px}
  .stack-row p{grid-column:2}
}
@media(max-width:860px){
  .site-nav{position:fixed;inset:72px 0 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:20px 24px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease,visibility .25s;visibility:hidden;margin:0}
  .site-nav.open{transform:none;visibility:visible}
  .site-nav a{font-size:19px;padding:15px 0;border-bottom:1px solid var(--line)}
  .site-nav a[aria-current=page]::after{display:none}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer}
  .menu-toggle span{width:22px;height:2px;background:var(--ink);transition:.2s}
  .menu-toggle em{position:absolute;left:-9999px}
  .menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:680px){
  .container{width:min(100% - 32px,1200px)}
  .hero{padding:52px 0 60px}
  .section,.section-sm{padding:60px 0}
  .svc-grid,.prod-grid,.grid-3,.grid-2,.grid-4,.ind-grid,.role-grid,.case-grid,.plan-grid,.steps-grid,.stat-grid,.form-row,.footer-grid,.contact-methods,.footer-offices,.val-grid{grid-template-columns:1fr}
  .prod.featured{grid-column:span 1}
  .footer-brand{grid-column:auto}
  .svc{padding:30px 26px;min-height:0}
  .card,.plan,.form-card{padding:26px 22px}
  .tech-group,.case-meta{grid-template-columns:1fr;gap:12px}
  .case-meta{gap:24px;flex-direction:column}
  .case-row{grid-template-columns:34px 1fr 40px;gap:16px}
  .case-row p{grid-column:2/-1}
  .case-row:hover{padding-left:12px}
  .uc-head{flex-wrap:wrap;gap:12px}
  .proof-row{grid-template-columns:1fr 1fr;gap:18px}
  .filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .filters button{white-space:nowrap}
  .footer-bottom{flex-direction:column;gap:8px}
  .reveal{opacity:1;transform:none}
  .steps-grid{gap:34px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .av-step{opacity:1;transform:none}
}
@media print{.site-header,.closing-cta,.whatsapp-fab,.site-footer{display:none}}