/* zoae — styles.css
   Light, airy layout (tamooh.ae used as a structural reference) in the zoae brand:
   ink #0F2329, saffron #E3A21A, mint #8FD3C3. Logical properties throughout so an
   Arabic page only needs <html lang="ar" dir="rtl">. */

:root{
  --ink:#0F2329; --ink-2:#0A1A1F; --ink-3:#122A31; --ink-4:#1A363E;
  --page:#FFFFFF; --ground:#F5F7F6; --panel:#EEF2F1; --line:#DDE5E3; --line-2:#C9D4D2;
  --muted:#4D6067; --muted-2:#66787E;
  --accent:#E3A21A; --accent-text:#8A5A00; --accent-deep:#5E3D00;
  --mint:#8FD3C3; --mint-deep:#1F6F5E;
  --on-dark:#EAF1F0; --on-dark-2:#C3D1D3; --on-dark-3:#9FB3B8; --on-dark-4:#7E979D;
  /* card tints */
  --t-sun:#FFF6E3; --t-sun-b:#F3DFB2;
  --t-mint:#E9F7F3; --t-mint-b:#C5E8DF;
  --t-ink:#EDF2F4; --t-ink-b:#D3DEE2;
  --t-sky:#EEF3FC; --t-sky-b:#D4E0F5;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --dir:1;
  --gutter:clamp(16px,4vw,28px);
  --radius:20px;
  --shadow:0 1px 2px rgba(15,35,41,.04),0 12px 32px -18px rgba(15,35,41,.18);
}
:lang(ar){--display:"IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,sans-serif;--body:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif}
[dir="rtl"]{--dir:-1}
[dir="rtl"] .arrow{display:inline-block;transform:scaleX(-1)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent-text);text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px))}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:60;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{inset-block-start:12px}
.arrow{transition:transform .2s}
a:hover > .arrow{transform:translateX(calc(4px * var(--dir)))}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-block-end:14px}
.dark .eyebrow{color:var(--accent)}
h2{font-weight:800;font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.03em;max-width:20ch}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-block-end:44px}
.section-head.center{flex-direction:column;align-items:center;text-align:center}
.section-head.center h2{margin-inline:auto}
.section-sub{max-width:46ch;color:var(--muted);font-size:17.5px}
.center .section-sub{margin-inline:auto}
.dark .section-sub{color:var(--on-dark-2)}
.band{padding-block:clamp(64px,9vw,112px)}
.band.tight{padding-block:clamp(48px,6vw,72px)}
.ground{background:var(--ground)}
.dark{background:var(--ink);color:var(--on-dark)}
.grid-bg{background-image:linear-gradient(rgba(234,241,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(234,241,240,.045) 1px,transparent 1px);background-size:48px 48px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:999px;font:600 15.5px/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;padding:12px 22px;transition:filter .15s,transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:16px;padding:15px 28px;min-height:54px}
.btn-sm{padding:10px 18px;min-height:44px;font-size:15px}
.btn-block{width:100%}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{color:var(--ink);filter:brightness(1.06)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff;background:#163239}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost-dark{color:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(234,241,240,.3);background:transparent}
.btn-ghost-dark:hover{color:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(234,241,240,.65)}
.btn .ico{width:20px;height:20px;flex:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.center .cta-row{justify-content:center}

/* ---------- header ---------- */
.site-head{position:sticky;inset-block-start:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:blur(14px);border-block-end:1px solid rgba(15,35,41,.07);padding-block-start:env(safe-area-inset-top,0px)}
.head-row{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.045em;line-height:1;color:var(--ink);text-decoration:none}
.logo span{color:var(--accent)}
.logo:hover{color:var(--ink)}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:15.5px;padding:10px 14px;border-radius:999px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--ground)}
.head-cta{margin-inline-start:8px}
.menu-btn{display:none;margin-inline-start:auto;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;place-items:center}
.menu-btn svg{width:22px;height:22px}
@media (max-width:900px){
  .menu-btn{display:grid}
  .head-cta{display:none}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;gap:2px;margin:0;padding:10px var(--gutter) 18px;background:#fff;border-block-end:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(15,35,41,.25)}
  .nav.open{display:flex}
  .nav a{padding:14px 12px;font-size:17px;border-radius:12px}
  .nav .nav-cta{display:flex;margin-block-start:8px;justify-content:center;background:var(--accent);color:var(--ink);font-weight:600}
}
@media (min-width:901px){.nav .nav-cta{display:none}}

/* ---------- home hero (light, centered, dotted wave) ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 500px at 50% -10%,#FFF7E6 0%,rgba(255,247,230,0) 60%),var(--page)}
.hero-wave{position:absolute;inset:auto 0 0 0;height:62%;width:100%;pointer-events:none;opacity:.9}
.hero-inner{position:relative;z-index:1;text-align:center;padding-block:clamp(56px,9vw,120px) clamp(96px,13vw,170px);max-width:980px;margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:#fff;border:1px solid var(--t-sun-b);padding:7px 14px;border-radius:999px;margin-block-end:26px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{font-weight:800;font-size:clamp(46px,7.6vw,104px);line-height:.95;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:#9A6600;background:linear-gradient(transparent 70%,#FBE3AC 70%)}
.hero .lede{margin:28px auto 0;max-width:58ch;font-size:clamp(18px,1.7vw,21px);color:var(--muted)}
.hero .cta-row{margin-block-start:36px;justify-content:center}
.trust-line{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:14.5px;color:var(--muted)}
.trust-line li{display:flex;align-items:center;gap:8px}
.trust-line li::before,.checks li::before{content:"";width:16px;height:16px;flex:none;background:var(--mint-deep);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}

/* ---------- tools marquee ---------- */
.tools{border-block:1px solid var(--line);background:#fff;overflow:hidden}
.tools-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);text-align:center;padding-block-start:22px}
.marquee{display:flex;width:max-content;gap:56px;padding-block:18px 24px;animation:marquee 40s linear infinite}
.marquee span{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:#8A9A9F;white-space:nowrap}
.tools:hover .marquee{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:16px 40px;padding-inline:var(--gutter)}.marquee > [aria-hidden]{display:none}}
.marquee .tool{display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.marquee .tool svg{width:26px;height:26px;flex:none}
.marquee .tool svg:not([fill]){fill:currentColor}
.tools-dark .marquee .tool:hover{color:var(--on-dark)}

/* ---------- tinted cards (pillars) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.pillar{position:relative;border-radius:24px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:14px;border:1px solid;transition:transform .25s,box-shadow .25s}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tint-sun{background:var(--t-sun);border-color:var(--t-sun-b)}
.tint-mint{background:var(--t-mint);border-color:var(--t-mint-b)}
.tint-ink{background:var(--t-ink);border-color:var(--t-ink-b)}
.tint-sky{background:var(--t-sky);border-color:var(--t-sky-b)}
.icon-tile{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--accent);flex:none}
.icon-tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile-sun{background:var(--accent);color:var(--ink)}
.tile-mint{background:var(--mint-deep);color:#fff}
.tile-ink{background:var(--ink);color:var(--accent)}
.tile-sky{background:#2F5DA8;color:#fff}
.pillar h3{font-weight:800;font-size:28px;line-height:1.08;letter-spacing:-.02em}
.pillar > p{color:var(--muted)}
.mini{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.mini li{font-size:13.5px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(15,35,41,.08);color:var(--ink)}
.card-link{margin-block-start:auto;padding-block-start:10px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.card-link:hover{color:var(--accent-text)}
.stretched::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ---------- facts ---------- */
.facts-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}
.fact{padding:26px 26px 24px;display:flex;flex-direction:column;gap:6px}
.fact + .fact{border-inline-start:1px solid var(--line)}
.fact strong{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.05}
.fact span{color:var(--muted);font-size:15px;line-height:1.4}
@media (max-width:860px){.facts-row{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-inline-start:0}.fact:nth-child(n+3){border-block-start:1px solid var(--line)}}
@media (max-width:420px){.facts-row{grid-template-columns:1fr}.fact + .fact{border-inline-start:0;border-block-start:1px solid var(--line)}}

/* ---------- problem cards ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pain{background:#fff;border-radius:20px;padding:26px 24px 24px;border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.pain h3{font-weight:700;font-size:20px;line-height:1.28}
.pain-fix{color:var(--muted);font-size:15.5px;border-block-start:1px dashed var(--line-2);padding-block-start:14px;margin-block-start:auto}
.pain-fix span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-deep);margin-block-end:6px}

/* ---------- showcase split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.prose{display:flex;flex-direction:column;gap:16px;color:var(--muted);font-size:17.5px;max-width:60ch}
.prose h2{color:var(--ink);margin-block-end:4px}
.dark .prose{color:var(--on-dark-2)}
.dark .prose h2{color:var(--on-dark)}
.prose strong{color:var(--ink)}
.dark .prose strong{color:var(--on-dark)}
.checks{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li::before{margin-block-start:5px}

/* hero workflow card (kept from the original design) */
.flow{margin:0;position:relative;background:var(--ink-2);border-radius:22px;padding:22px 22px 20px;box-shadow:0 40px 80px -36px rgba(15,35,41,.6),0 0 0 1px rgba(234,241,240,.08)}
.flow-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:18px;font-family:var(--mono);font-size:12px;color:var(--on-dark-4)}
.flow-tag{border:1px solid rgba(234,241,240,.18);border-radius:999px;padding:3px 10px;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;color:var(--on-dark-3)}
.flow-live{display:flex;align-items:center;gap:8px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.flow-steps{position:relative;display:flex;flex-direction:column;gap:12px}
.rail{position:absolute;inset-inline-start:31px;inset-block:24px;width:2px;background:repeating-linear-gradient(#2A464E 0 6px,transparent 6px 12px)}
.pulse{position:absolute;inset-inline-start:26px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(227,162,26,.25),0 0 24px var(--accent);z-index:2;opacity:0}
.step{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding-block:13px;padding-inline:12px 16px;border-radius:14px;background:var(--ink-3);box-shadow:0 0 0 1px rgba(234,241,240,.07)}
.step-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ink-4);color:#CFDCDE}
.step-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step-lbl{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-4)}
.step-ttl{display:block;font-size:15.5px;font-weight:600;color:var(--on-dark);line-height:1.35}
.flow-foot{margin-block-start:18px;padding-block-start:14px;border-block-start:1px solid rgba(234,241,240,.08);display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--on-dark-2)}
.flow-foot strong{font-family:var(--display);font-weight:800;font-size:17px;color:var(--on-dark)}
.s1{box-shadow:0 0 0 1.5px var(--accent)}
.s1 .step-ico{background:var(--accent);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .s1{box-shadow:0 0 0 1px rgba(234,241,240,.07)}
  .s1 .step-ico{background:var(--ink-4);color:#CFDCDE}
  .pulse{animation:zPulse 8s cubic-bezier(.6,0,.4,1) infinite}
  .step{animation:zStep 8s ease-in-out infinite}
  .step .step-ico{animation:zIco 8s ease-in-out infinite;animation-delay:inherit}
  .s2{animation-delay:2s}.s3{animation-delay:4s}.s4{animation-delay:6s}
  .live-dot{animation:zLive 1.6s ease-in-out infinite}
}
@keyframes zPulse{0%{top:20px;opacity:0}4%{opacity:1}25%{top:22%}50%{top:47%}75%{top:72%}92%{opacity:1}100%{top:calc(100% - 32px);opacity:0}}
@keyframes zStep{0%,4%{transform:none;background:var(--ink-3);box-shadow:0 0 0 1px rgba(234,241,240,.07)}9%,22%{transform:translateX(calc(6px * var(--dir)));background:#163239;box-shadow:0 0 0 1.5px var(--accent),0 14px 30px -16px var(--accent)}30%,100%{transform:none;background:var(--ink-3);box-shadow:0 0 0 1px rgba(234,241,240,.07)}}
@keyframes zIco{0%,4%{background:var(--ink-4);color:#CFDCDE}9%,22%{background:var(--accent);color:var(--ink)}30%,100%{background:var(--ink-4);color:#CFDCDE}}
@keyframes zLive{50%{opacity:.35}}
@media (max-width:520px){.flow{padding:18px 14px}.step{padding-inline:10px 12px;gap:12px}.step-ttl{font-size:14.5px}}

/* ---------- process steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.steps li{border-block-start:2px solid rgba(234,241,240,.18);padding-block-start:20px}
.steps li:first-child{border-color:var(--accent)}
.step-num{font-family:var(--mono);font-size:13px;color:var(--on-dark-3)}
.steps li:first-child .step-num{color:var(--accent)}
.steps h3{font-weight:700;font-size:23px;margin-block:10px 8px}
.steps p{color:#B7C7CA;font-size:15.5px}
.band-cta{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-block-start:48px}
.band-cta.center{justify-content:center}

/* ---------- who ---------- */
.who{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.who-photo img{width:100%;height:auto;aspect-ratio:320/380;object-fit:cover;border-radius:24px}
.who-initial{aspect-ratio:320/380;border-radius:24px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:120px;letter-spacing:-.04em;background-image:radial-gradient(circle at 30% 20%,#1A3A43,var(--ink) 70%)}
.who-copy{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.who-copy p{color:var(--muted);font-size:18px}
.who-copy p strong{color:var(--ink)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:12.5px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
@media (max-width:720px){.who{grid-template-columns:1fr}.who-photo{max-width:200px}.who-initial{font-size:80px}}

/* ---------- compare ---------- */
.compare{border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr}
.cmp-row span{padding:20px 26px;border-block-start:1px solid var(--line)}
.cmp-row span:first-child{background:#fff;color:var(--muted)}
.cmp-row span:last-child{background:var(--ink);color:var(--on-dark);border-color:rgba(234,241,240,.1)}
.cmp-head span{border:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding-block:16px}
.cmp-head span:last-child{color:var(--accent)}
@media (max-width:640px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr}
  .cmp-row span{padding:14px 18px 16px;border-block-start:0}
  .cmp-row + .cmp-row span:first-child{border-block-start:1px solid var(--line)}
  .cmp-row:nth-child(2) span:first-child{border-block-start:0}
  .cmp-row span::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-block-end:4px;color:var(--muted-2)}
  .cmp-row span:last-child::before{color:var(--accent)}
}

/* ---------- health check band ---------- */
.hc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.hc h2{margin-block-end:18px}
.hc-sub{color:var(--on-dark-2);font-size:18px;max-width:46ch;margin-block-end:30px}
.hc-card{background:var(--ink-2);border-radius:22px;padding:28px 28px 22px;box-shadow:0 0 0 1px rgba(234,241,240,.08)}
.hc-card-title{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-block-end:14px}
.hc-list{list-style:none;padding:0;margin:0;counter-reset:hc}
.hc-list li{counter-increment:hc;display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding-block:14px;border-block-start:1px solid rgba(234,241,240,.08)}
.hc-list li:first-child{border:0;padding-block-start:0}
.hc-list li::before{content:counter(hc,decimal-leading-zero);grid-row:span 2;font-family:var(--mono);font-size:13px;color:var(--on-dark-3);padding-block-start:3px}
.hc-list strong{font-weight:600;color:var(--on-dark)}
.hc-list span{color:var(--on-dark-3);font-size:15px}
@media (max-width:820px){.hc{grid-template-columns:1fr}}

/* ---------- pricing block ---------- */
.price-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:28px;overflow:hidden;background:var(--ink);color:var(--on-dark);background-image:radial-gradient(600px 300px at 0% 0%,rgba(227,162,26,.18),transparent 70%)}
.price-left{padding:clamp(28px,4vw,48px);border-inline-end:1px solid rgba(234,241,240,.1);display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center;align-items:center}
.price-big{font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,88px);line-height:1;letter-spacing:-.04em;color:var(--accent)}
.price-big small{font-size:.28em;letter-spacing:0;color:var(--on-dark-2);font-weight:600;margin-inline-start:4px}
.price-left p{color:var(--on-dark-2)}
.price-right{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.price-right h3{font-weight:800;font-size:clamp(26px,3vw,34px);line-height:1.12;letter-spacing:-.02em}
.price-right p{color:var(--on-dark-2)}
@media (max-width:780px){.price-card{grid-template-columns:1fr}.price-left{border-inline-end:0;border-block-end:1px solid rgba(234,241,240,.1)}}

/* ---------- faq ---------- */
.faq{display:flex;flex-wrap:wrap;gap:40px 56px}
.faq > div:first-child{flex:1 1 300px}
.faq h2{max-width:13ch}
.faq-list{flex:2 1 560px;min-width:0;border-block-start:1.5px solid var(--ink)}
.faq-list details{border-block-end:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3;padding-block:20px;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.plus{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ground);font-family:var(--mono);font-weight:400;font-size:20px;color:var(--accent-text);transition:transform .2s,background .2s}
details[open] .plus{transform:rotate(45deg);background:var(--t-sun)}
.faq-list details p{color:var(--muted);max-width:64ch;padding-block-end:22px;margin-block-start:-6px}

/* ---------- contact + quick match form ---------- */
.contact{background:var(--accent);color:var(--ink);padding-block:clamp(64px,9vw,112px);background-image:radial-gradient(700px 400px at 100% 0%,rgba(255,255,255,.28),transparent 70%)}
.contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-row{grid-template-columns:1fr}}
.contact h2{font-size:clamp(38px,5.4vw,72px);line-height:.98;letter-spacing:-.04em;max-width:12ch}
.contact-sub{margin-block-start:22px;font-size:19px;max-width:42ch}
.contact-promises{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:10px;font-weight:500}
.contact-promises li{display:flex;gap:10px;align-items:center}
.contact-promises li::before{content:"";width:18px;height:18px;flex:none;background:var(--ink);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.alt-channels{margin-block-start:34px;display:flex;flex-direction:column;gap:10px;max-width:440px}
.alt-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#3A3000}
.channel{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-radius:16px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(15,35,41,.3)}
.channel:hover{color:var(--ink);background:rgba(15,35,41,.06)}
.channel-dark{background:var(--ink);color:var(--on-dark);box-shadow:none}
.channel-dark:hover{background:#163239;color:var(--on-dark)}
.channel-lbl{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.channel-val{font-family:var(--display);font-weight:700;font-size:20px;overflow-wrap:anywhere}

.form-card{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(15,35,41,.5)}
.qm-head{background:var(--ink);color:var(--on-dark);padding:24px 28px 20px;background-image:radial-gradient(400px 200px at 100% 0%,rgba(227,162,26,.22),transparent 70%)}
.qm-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-block-end:6px}
.form-title{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.15}
.qm-sub{color:var(--on-dark-3);font-size:14.5px;margin-block-start:4px}
.qm-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-block-start:16px}
.qm-progress span{height:4px;border-radius:4px;background:rgba(234,241,240,.18);transition:background .3s}
.qm-progress span.on{background:var(--accent)}
.qm-body{padding:22px 28px 26px}
.qm-step{border:0;margin:0;padding:0;min-width:0}
.qm-step legend{font-family:var(--display);font-weight:700;font-size:20px;padding:0;margin-block-end:4px}
.qm-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-block-end:14px}
.qm-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.qm-options{grid-template-columns:1fr}}
.opt-card{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;font-weight:500;font-size:15.5px;line-height:1.3;background:#fff;transition:border-color .15s,background .15s}
.opt-card:hover{border-color:var(--line-2);background:var(--ground)}
.opt-card input{position:absolute;opacity:0;pointer-events:none}
.opt-card .dot{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center}
.opt-card:has(input:checked){border-color:var(--ink);background:var(--t-sun)}
.opt-card:has(input:checked) .dot{border-color:var(--ink)}
.opt-card:has(input:checked) .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.opt-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;margin-block-end:14px;min-width:0}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){.field-pair{grid-template-columns:1fr}}
.field label{font-weight:600;font-size:14.5px}
.req{color:var(--accent-text)}
.opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
.field textarea{resize:vertical;min-height:84px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D6067' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 14px center;padding-inline-end:42px}
[dir="rtl"] .field select{background-position:left 14px center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(227,162,26,.45)}
.field input::placeholder,.field textarea::placeholder{color:#6B7E84}
.field [aria-invalid="true"],.qm-options[aria-invalid="true"] .opt-card{border-color:#B3261E}
.hint{font-size:13.5px;color:var(--muted);margin-block:-6px 14px}
.hint.is-error{color:#B3261E;font-weight:600}
.form-error{color:#B3261E;font-weight:600;font-size:14.5px;margin-block:12px 0}
.form-error:empty{display:none}
.qm-nav{display:flex;gap:10px;margin-block-start:20px}
.qm-nav .btn{flex:1}
.qm-back{flex:0 0 auto!important}
.consent{font-size:13px;color:var(--muted);margin-block-start:14px;text-align:center}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{padding:30px 28px;display:flex;flex-direction:column;gap:12px;font-size:17px}
.form-done .form-title{color:var(--ink)}
.form-done:focus{outline:none}
.qm-submit[disabled]{opacity:.7;cursor:progress}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark-3);font-size:14.5px;padding-block-end:env(safe-area-inset-bottom,0px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 40px;padding-block:56px 32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;flex-direction:column;gap:10px;max-width:36ch}
.foot-col{display:flex;flex-direction:column;gap:2px}
.foot-col h3{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);margin-block-end:8px}
.site-foot a{color:var(--on-dark-2);text-decoration:none;min-height:34px;display:inline-flex;align-items:center}
.site-foot a:hover{color:var(--on-dark)}
.site-foot .logo{color:var(--on-dark);min-height:0;font-size:28px}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:20px 26px;border-block-start:1px solid rgba(234,241,240,.1);font-size:13.5px}

/* ---------- floating WhatsApp ---------- */
.wa-float{position:fixed;inset-inline-end:max(18px,env(safe-area-inset-right,0px));inset-block-end:max(18px,env(safe-area-inset-bottom,0px));z-index:45;width:58px;height:58px;border-radius:50%;background:#1F8F5A;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(15,35,41,.55);transition:transform .2s}
.wa-float:hover{color:#fff;transform:scale(1.06)}
.wa-float svg{width:30px;height:30px}

/* ---------- service pages ---------- */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% -10%,var(--t-sun),transparent 65%),radial-gradient(700px 400px at 0% 100%,var(--t-mint),transparent 60%),var(--page)}
.page-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,88px) clamp(56px,8vw,104px)}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr}}
.page-hero h1{font-weight:800;font-size:clamp(42px,6vw,80px);line-height:.98;letter-spacing:-.04em}
.page-hero .lede{margin-block:24px 34px;font-size:clamp(18px,1.6vw,20px);color:var(--muted);max-width:56ch}
.crumbs{font-size:14px;color:var(--muted);margin-block-end:22px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li + li::before{content:"/";margin-inline-end:6px;color:var(--line-2)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.dark .crumbs,.dark .crumbs a{color:var(--on-dark-3)}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 26px 22px;box-shadow:var(--shadow)}
.aside-card .eyebrow{margin-block-end:12px}
.aside-card .checks{font-size:15.5px;color:var(--muted)}

/* journey (Zoho) */
.journey{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:j}
@media (max-width:980px){.journey{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.journey{grid-template-columns:1fr}}
.journey > li{counter-increment:j;position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px}
.journey > li::before{content:"0" counter(j);font-family:var(--mono);font-size:13px;color:var(--accent-text);background:var(--t-sun);border:1px solid var(--t-sun-b);border-radius:999px;padding:3px 10px;align-self:flex-start}
.journey h3{font-weight:800;font-size:23px;letter-spacing:-.01em}
.journey p{color:var(--muted);font-size:15.5px}
.journey .mini{margin-block-start:auto;padding-block-start:6px}
.journey .mini li{background:var(--ground)}

/* function grid */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fn{border-radius:20px;padding:22px 22px 20px;border:1px solid;display:flex;flex-direction:column;gap:8px}
.fn .icon-tile{width:44px;height:44px;border-radius:12px;margin-block-end:6px}
.fn .icon-tile svg{width:20px;height:20px}
.fn h3{font-weight:700;font-size:19px}
.fn p{color:var(--muted);font-size:15px}
.fn .apps{font-family:var(--mono);font-size:12px;color:var(--muted-2);margin-block-start:auto;padding-block-start:6px}

/* generic feature cards */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.feature h3{font-weight:700;font-size:21px;line-height:1.25}
.feature p{color:var(--muted);font-size:15.5px}
.dark .feature{background:var(--ink-3);border-color:rgba(234,241,240,.08)}
.dark .feature p{color:var(--on-dark-3)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related a{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:20px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink)}
.related a:hover{border-color:var(--ink);color:var(--ink)}
.related strong{font-family:var(--display);font-size:20px}
.related span{color:var(--muted);font-size:15px}

/* ---------- web page: fancy bits ---------- */
.web-hero{position:relative;overflow:hidden;background:var(--ink-2);color:var(--on-dark);isolation:isolate}
.web-hero::before{content:"";position:absolute;inset:-30%;z-index:-1;background:
  radial-gradient(closest-side,rgba(227,162,26,.42),transparent) 10% 20%/50% 50% no-repeat,
  radial-gradient(closest-side,rgba(143,211,195,.32),transparent) 85% 30%/45% 45% no-repeat,
  radial-gradient(closest-side,rgba(47,93,168,.38),transparent) 50% 90%/60% 55% no-repeat;filter:blur(30px)}
@media (prefers-reduced-motion:no-preference){.web-hero::before{animation:mesh 18s ease-in-out infinite alternate}}
@keyframes mesh{50%{transform:translate(4%,-3%) rotate(8deg)}100%{transform:translate(-3%,4%) rotate(-6deg)}}
.web-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,104px) clamp(64px,9vw,120px)}
@media (max-width:960px){.web-hero .wrap{grid-template-columns:1fr}}
.web-hero h1{font-weight:800;font-size:clamp(44px,6.4vw,88px);line-height:.95;letter-spacing:-.045em}
.web-hero h1 .grad{background:linear-gradient(90deg,var(--accent),#F6D58E 40%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.web-hero .lede{margin-block:24px 34px;color:var(--on-dark-2);font-size:clamp(18px,1.6vw,20px);max-width:52ch}
.web-hero .crumbs,.web-hero .crumbs a{color:var(--on-dark-3)}

/* browser mockup */
.mock-stage{position:relative;perspective:1400px}
.browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);transform:rotateY(calc(-10deg * var(--dir))) rotateX(6deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);color:var(--ink)}
.mock-stage:hover .browser{transform:none}
.browser-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F1F4F3;border-block-end:1px solid #E1E7E5}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#D5DDDB}
.browser-url{margin-inline-start:10px;flex:1;height:22px;border-radius:6px;background:#fff;border:1px solid #E1E7E5;font-family:var(--mono);font-size:11px;color:var(--muted-2);display:flex;align-items:center;padding-inline:10px}
.mock{--m-bg:#FFFFFF;--m-ink:#0F2329;--m-acc:#E3A21A;--m-soft:#FFF6E3;background:var(--m-bg);color:var(--m-ink);padding:22px;transition:background .4s,color .4s}
.mock[data-theme="night"]{--m-bg:#0B1418;--m-ink:#EAF1F0;--m-acc:#8FD3C3;--m-soft:#14262C}
.mock[data-theme="bold"]{--m-bg:#F3EDFF;--m-ink:#1D0F3B;--m-acc:#6B3CE0;--m-soft:#E4D8FF}
.mock-nav{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600}
.mock-nav b{font-family:var(--display);font-size:16px}
.mock-nav span{display:flex;gap:10px;opacity:.7}
.mock-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;margin-block:20px 16px}
.mock-hero h4{font-family:var(--display);font-size:24px;line-height:1;margin:0;letter-spacing:-.03em}
.mock-hero h4 em{font-style:normal;color:var(--m-acc)}
.mock-hero p{font-size:11px;opacity:.7;margin-block:8px 12px}
.mock-btn{display:inline-block;font-size:10.5px;font-weight:700;background:var(--m-acc);color:var(--m-bg);padding:7px 12px;border-radius:999px}
.mock-art{aspect-ratio:1;border-radius:14px;background:conic-gradient(from 200deg,var(--m-acc),var(--m-soft),var(--m-acc));position:relative;overflow:hidden}
.mock-art::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--m-bg);opacity:.85}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-cards div{height:46px;border-radius:10px;background:var(--m-soft)}
.theme-switch{display:flex;gap:8px;justify-content:center;margin-block-start:18px;flex-wrap:wrap}
.theme-switch button{font:600 13.5px var(--body);color:var(--on-dark-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.theme-switch button[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.float-chip{position:absolute;z-index:2;background:#fff;color:var(--ink);border-radius:14px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);display:flex;align-items:center;gap:8px}
.float-chip i{width:8px;height:8px;border-radius:50%;background:#1F8F5A;font-style:normal}
.fc-1{inset-block-start:-14px;inset-inline-end:8%}
.fc-2{inset-block-end:58px;inset-inline-start:-18px}
@media (prefers-reduced-motion:no-preference){.float-chip{animation:bob 5s ease-in-out infinite}.fc-2{animation-delay:-2.5s}}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:520px){.fc-2{inset-inline-start:6px}.mock-hero h4{font-size:19px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento > *{border-radius:24px;padding:28px;position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px}
.b-wide{grid-column:span 4}.b-mid{grid-column:span 3}.b-sm{grid-column:span 2}
@media (max-width:960px){.b-wide,.b-mid,.b-sm{grid-column:span 6}}
.bento h3{font-weight:800;font-size:24px;letter-spacing:-.02em}
.bento p{color:var(--muted);font-size:15.5px;max-width:48ch}
.b-ink{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.b-ink p{color:var(--on-dark-2)}
.glow{--mx:50%;--my:50%}
.glow::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(227,162,26,.16),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.glow:hover::before{opacity:1}
.speed{display:flex;gap:14px;flex-wrap:wrap;margin-block-start:auto;padding-block-start:10px}
.gauge{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) calc(var(--v)*1%),rgba(234,241,240,.12) 0);position:relative}
.gauge::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ink)}
.gauge span{position:relative;z-index:1;font-family:var(--display);font-weight:800;font-size:22px;color:var(--on-dark)}
.gauge-lbl{font-size:12.5px;color:var(--on-dark-3);text-align:center;margin-block-start:6px}
.rtl-demo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-start:auto}
.rtl-demo div{border-radius:14px;background:var(--ground);padding:14px;font-size:14px;line-height:1.4}
.rtl-demo div[dir="rtl"]{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",var(--body)}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:auto}
.stack span{font-family:var(--mono);font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--ground);border:1px solid var(--line)}
.b-ink .stack span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--on-dark-2)}

/* ---------- AI page ---------- */
.ai-hero{background:var(--ink-2);color:var(--on-dark);position:relative;overflow:hidden;background-image:radial-gradient(800px 400px at 90% 0%,rgba(143,211,195,.16),transparent 70%),radial-gradient(700px 400px at 0% 100%,rgba(227,162,26,.14),transparent 70%)}
.ai-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,104px) clamp(64px,9vw,120px)}
@media (max-width:960px){.ai-hero .wrap{grid-template-columns:1fr}}
.ai-hero h1{font-weight:800;font-size:clamp(42px,6vw,84px);line-height:.96;letter-spacing:-.045em}
.ai-hero h1 em{font-style:normal;color:var(--mint)}
.ai-hero .lede{margin-block:24px 34px;color:var(--on-dark-2);font-size:clamp(18px,1.6vw,20px);max-width:54ch}
.chat{background:#0E1E23;border-radius:22px;box-shadow:0 0 0 1px rgba(234,241,240,.08),0 40px 80px -40px rgba(0,0,0,.8);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-block-end:1px solid rgba(234,241,240,.08);font-size:14px;font-weight:600}
.chat-head .av{width:30px;height:30px;border-radius:10px;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.chat-head small{display:block;font-weight:400;color:var(--on-dark-4);font-size:12px}
.chat-body{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:340px}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--ink);border-end-end-radius:4px}
.msg.bot{align-self:flex-start;background:#17303A;color:var(--on-dark);border-end-start-radius:4px}
.msg.tool{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--mint);background:transparent;border:1px dashed rgba(143,211,195,.35);padding:7px 11px}
.chat-note{font-family:var(--mono);font-size:11.5px;color:var(--on-dark-4);padding:0 18px 14px}
.js .chat .msg{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.js .chat .msg.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .chat .msg{opacity:1;transform:none}}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:16px;background:#17303A}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--on-dark-3);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.3}}

/* keyword line inside the H1 (SEO) styled as a small kicker */
h1 > .h1-kicker{display:flex;width:fit-content;max-width:100%;font-family:var(--mono);font-weight:400;font-size:12.5px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;margin-block-end:24px}
@media (max-width:520px){h1 > .h1-kicker{font-size:11.5px;letter-spacing:.06em}}

/* ---------- home: dark hero + system map ---------- */
.kicker-dark{background:rgba(255,255,255,.05);border-color:rgba(227,162,26,.35);color:var(--accent)}
.home-hero .trust-line{justify-content:flex-start;color:var(--on-dark-2)}
.home-hero .trust-line li::before{background:var(--mint)}
.sys-card{margin:0;position:relative;background:rgba(14,30,35,.82);border:1px solid rgba(234,241,240,.12);border-radius:24px;padding:18px 18px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 50px 100px -40px rgba(0,0,0,.75);transform:rotateY(calc(-9deg * var(--dir))) rotateX(5deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mock-stage:hover .sys-card{transform:none}
.sys-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:6px;font-family:var(--mono);font-size:12px;color:var(--on-dark-4)}
.sys-map{width:100%;height:auto;overflow:visible}
.sys-lines path{fill:none;stroke:rgba(234,241,240,.2);stroke-width:1.5;stroke-dasharray:4 6}
.sys-pulses circle{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(227,162,26,.9))}
.sys-pulses circle.mint{fill:var(--mint);filter:drop-shadow(0 0 6px rgba(143,211,195,.9))}
.sys-node rect{fill:#13272E;stroke:rgba(234,241,240,.14);stroke-width:1}
.sys-node text{fill:#EAF1F0;font:600 13px var(--body);text-anchor:middle}
.sys-node text.sub{fill:#8FA6AB;font-size:11px;font-weight:400}
.sys-node.core rect{fill:#1A363E;stroke:var(--accent);stroke-width:1.5}
.sys-node .ring{fill:none;stroke:var(--accent);stroke-width:1;opacity:.35;transform-origin:210px 150px;transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .sys-lines path{animation:dash 1.6s linear infinite}
  .sys-node .ring{animation:ring 2.6s ease-out infinite}
}
@keyframes dash{to{stroke-dashoffset:-20}}
@keyframes ring{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.45);opacity:0}}
.float-chip .spark{color:var(--accent-text);font-size:14px}
.home-hero .fc-1{inset-block-start:-16px;inset-inline-end:6%}
.home-hero .fc-2{inset-block-end:40px;inset-inline-start:-22px}
@media (max-width:520px){.home-hero .fc-2{inset-inline-start:6px}.sys-card{padding:14px 10px 12px}}

.tools-dark{background:var(--ink-2);border-block:1px solid rgba(234,241,240,.06)}
.tools-dark .tools-label{color:var(--on-dark-4)}
.tools-dark .marquee span{color:#8FA6AB}

/* hover lift + bento tweaks */
.lift{transition:transform .25s,box-shadow .25s,border-color .25s}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.bento > .tint-sun{background:var(--t-sun);border-color:var(--t-sun-b)}
.bento .card-link{margin-block-start:0;padding-block-start:4px}
.card-link-dark{color:var(--on-dark)}
.card-link-dark:hover{color:var(--accent)}
.journey-strip{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:auto;padding-block-start:8px;counter-reset:js}
.journey-strip span{counter-increment:js;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--ground);border:1px solid var(--line)}
.journey-strip span::before{content:counter(js);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--t-sun);color:var(--accent-text);font-family:var(--mono);font-size:11px}
.pain{position:relative;overflow:hidden}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- small screens ---------- */
@media (max-width:520px){
  body{font-size:16.5px}
  .logo{font-size:27px}
  .hero .cta-row .btn,.page-hero .cta-row .btn{width:100%}
  .pillar{padding:26px 22px}
  .pillar h3{font-size:25px}
}
@media print{.site-head,.wa-float,.form-card,.alt-channels{display:none!important}.dark,.contact{background:none;color:#000}}

/* ==========================================================================
   Theme C · Warm Light heroes (all pages)
   ========================================================================== */
:root{--cream:#F6F3EC;--slate:#3D5459}
.web-hero,.ai-hero,.page-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--cream);background-image:none;color:var(--ink)}
.web-hero::before,.ai-hero::before,.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;filter:none;animation:none;pointer-events:none;background:
  radial-gradient(45% 55% at 0% 0%,rgba(227,162,26,.28),transparent 70%),
  radial-gradient(45% 55% at 100% 100%,rgba(143,211,195,.45),transparent 70%),
  radial-gradient(rgba(15,35,41,.09) 1px,transparent 1.2px) 0 0/22px 22px}
.web-hero h1,.ai-hero h1,.page-hero h1{color:var(--ink)}
.web-hero h1 .grad{background:linear-gradient(90deg,#B97C00,var(--mint-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-hero h1 em{color:var(--mint-deep)}
.web-hero .lede,.ai-hero .lede,.page-hero .lede{color:var(--slate)}
.web-hero .crumbs,.web-hero .crumbs a,.ai-hero .crumbs,.ai-hero .crumbs a{color:var(--muted)}
.web-hero .kicker-dark,.ai-hero .kicker-dark{background:rgba(255,255,255,.6);border-color:rgba(138,90,0,.28);color:var(--accent-text)}
.web-hero .btn-ghost-dark,.ai-hero .btn-ghost-dark{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(15,35,41,.18)}
.web-hero .btn-ghost-dark:hover,.ai-hero .btn-ghost-dark:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.home-hero .trust-line{color:var(--ink)}
.home-hero .trust-line li::before{background:var(--mint-deep)}
.home-hero .sys-card{background:var(--ink);border-color:rgba(15,35,41,.06);box-shadow:0 40px 80px -30px rgba(15,35,41,.45)}
.web-hero .float-chip{box-shadow:0 10px 30px -10px rgba(15,35,41,.35)}
.web-hero .browser{box-shadow:0 40px 80px -30px rgba(15,35,41,.35),0 0 0 1px rgba(15,35,41,.08)}
.web-hero .theme-switch button{color:var(--ink);background:#fff;border-color:rgba(15,35,41,.16)}
.web-hero .theme-switch button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.ai-hero .chat{box-shadow:0 40px 80px -30px rgba(15,35,41,.45)}
.site-head{background:rgba(246,243,236,.86)}

/* ---------- home hero: live activity feed ---------- */
.feed-card{margin:0;background:var(--ink);color:var(--on-dark);border-radius:24px;padding:20px;box-shadow:0 40px 80px -30px rgba(15,35,41,.45)}
.feed{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ev{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ink-3);box-shadow:0 0 0 1px rgba(234,241,240,.07);transition:opacity .4s}
.ev strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ev small{display:block;color:#8FA6AB;font-size:13px;line-height:1.35}
.ev time{font-family:var(--mono);font-size:12px;color:#8FA6AB;white-space:nowrap}
.ev.old{opacity:.55}
.ev-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font:500 13px var(--mono);font-style:normal}
.ev-gold{background:rgba(227,162,26,.16);color:var(--accent)}
.ev-mint{background:rgba(143,211,195,.16);color:var(--mint)}
.ev-green{background:rgba(37,211,102,.14);color:#4ADE80}
.ev-sand{background:rgba(246,213,142,.14);color:#F6D58E}
.ev.in{animation:evIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes evIn{from{opacity:0;transform:translateY(-12px) scale(.98)}}
.feed-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid rgba(234,241,240,.1);font-size:14px;color:#8FA6AB}
.feed-foot strong{font-family:var(--display);font-weight:800;font-size:30px;color:var(--on-dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:520px){.feed-card{padding:16px 12px}.ev{grid-template-columns:34px minmax(0,1fr);padding:10px 12px}.ev time{display:none}.ev-ico{width:34px;height:34px}.feed{min-height:0}}