/* ============================================================
   isBrain marketing site — SHARED design system
   Used by every page. Page-specific layout lives in each page's
   own <style> block, built on these tokens + components.
   ============================================================ */
:root{
  --bg:#050810;
  --bg2:#0a1020;
  --panel:#0e1526;
  --panel2:#111a30;
  --ink:#eaf1ff;
  --muted:#95a8c9;
  --stroke:rgba(120,160,220,.16);
  --stroke2:rgba(120,160,220,.30);
  --cyan:#22d3ee;
  --blue:#2f8bff;
  --green:#25c281;
  --amber:#e0a53a;
  --violet:#8b5cf6;
  --red:#f0556b;
  --pink:#ec4899;
  --maxw:1320px;
  --font-latin:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-ar:'Cairo','Segoe UI',Tahoma,sans-serif;
  --font-ta:'Noto Sans Tamil','Nirmala UI',sans-serif;
  --font-hi:'Noto Sans Devanagari','Nirmala UI',sans-serif;
  --font-zh:'Noto Sans SC','Microsoft YaHei',sans-serif;
  --font:var(--font-latin);
}
html[lang="ar"]{--font:var(--font-ar)}
html[lang="ta"]{--font:var(--font-ta)}
html[lang="hi"]{--font:var(--font-hi)}
html[lang="zh"]{--font:var(--font-zh)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 700px at 82% -10%, rgba(47,139,255,.16), transparent 60%),
    radial-gradient(900px 600px at 2% 2%, rgba(139,92,246,.13), transparent 60%),
    var(--bg);
  color:var(--ink);font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 22px;border-radius:12px;font-weight:700;font-size:15px;font-family:inherit;
  border:1px solid transparent;cursor:pointer;transition:.18s transform,.18s box-shadow}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(180deg,#3a95ff,#1f61e6);color:#fff;box-shadow:0 8px 26px rgba(47,139,255,.4)}
.btn-success{background:linear-gradient(180deg,#2fce8c,#1c9c66);color:#04150e;box-shadow:0 8px 26px rgba(37,194,129,.32)}
.btn-amber{background:linear-gradient(180deg,#e9b24a,#c98a24);color:#1a1204;box-shadow:0 8px 26px rgba(224,165,58,.32)}
.btn-amber-o{background:transparent;color:var(--amber);border-color:rgba(224,165,58,.55)}
.btn-outline{background:rgba(255,255,255,.04);border-color:var(--stroke2);color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--stroke2);color:var(--ink);padding:10px 18px}

/* ---------- top bar (page-nav + brand + lang) injected by site.js ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(5,8,16,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke)}
.topbar-inner{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logo{height:58px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(47,139,255,.5))}
@media(max-width:520px){.brand-logo{height:48px}.bw-name{font-size:20px}}
.brand-mark{filter:drop-shadow(0 0 10px rgba(47,139,255,.55))}
.brand-word{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.05}
.bw-name{font-size:23px;letter-spacing:.2px}
.bw-is{color:#e7f0ff;font-weight:500}
.bw-brain{background:linear-gradient(90deg,#2f8bff,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:600}
.brand-tag{font-size:8.5px;letter-spacing:.34em;font-weight:700;margin-top:3px;
  background:linear-gradient(90deg,#e6a63a,#b9791d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.page-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none;max-width:min(66vw,980px)}
.page-nav::-webkit-scrollbar{display:none}
.page-nav a{padding:8px 9px;border-radius:9px;font-size:12.5px;color:var(--muted);white-space:nowrap;
  font-weight:600;white-space:nowrap;transition:.15s}
.page-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.page-nav a.cur{color:#fff;background:rgba(47,139,255,.18)}
/* "Coming Soon" dropdown group */
.nav-group{position:relative;display:inline-flex}
.nav-group-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;background:none;border:0;
  cursor:pointer;font-family:inherit;transition:.15s}
.nav-group-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-group.cur .nav-group-btn{color:#fff;background:rgba(47,139,255,.18)}
.nav-sub{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:190px;
  background:var(--panel2);border:1px solid var(--stroke2);border-radius:12px;padding:6px;
  box-shadow:0 22px 54px rgba(0,0,0,.55);display:none;flex-direction:column;gap:2px;z-index:70}
.nav-group:hover .nav-sub,.nav-group.open .nav-sub{display:flex}
.nav-sub a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);
  font-weight:600;white-space:nowrap;transition:.15s}
.nav-sub a:hover{color:#fff;background:rgba(47,139,255,.15)}
.nav-sub a.cur{color:#fff;background:rgba(47,139,255,.18)}
.nav-group .caret{transition:transform .15s}
.nav-group:hover .caret,.nav-group.open .caret{transform:rotate(180deg)}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* language switch */
.lang-switch{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--stroke2);color:var(--ink);border-radius:10px;padding:9px 13px;
  font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.lang-btn:hover{border-color:var(--cyan)}
.caret{font-size:11px;opacity:.7}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:214px;
  background:var(--panel2);border:1px solid var(--stroke2);border-radius:12px;padding:6px;
  list-style:none;box-shadow:0 22px 54px rgba(0,0,0,.55);display:none;z-index:70}
.lang-menu.open{display:block}
.lang-menu li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  cursor:pointer;font-size:14px}
.lang-menu li:hover{background:rgba(47,139,255,.15)}
.lang-menu li.sel{background:rgba(34,211,238,.15);color:var(--cyan);font-weight:700}
.lang-menu li .lg-native{margin-inline-start:auto;color:var(--muted);font-size:13px}

/* ---------- reusable bits ---------- */
.badge-pill{display:inline-block;border:1px solid var(--stroke2);color:var(--cyan);
  border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:700}
.eyebrow{color:var(--cyan);font-weight:700;letter-spacing:.02em}
.muted{color:var(--muted)}
.glass{background:linear-gradient(180deg,var(--panel),#090e1a);
  border:1px solid var(--stroke);border-radius:18px}

/* page canvas wrapper — gives each replica poster-like framing */
.page{padding:40px 0 70px}
.page-title{font-size:clamp(30px,4.4vw,50px);font-weight:800;line-height:1.12;letter-spacing:-.01em}
.grad-text{background:linear-gradient(180deg,#ffffff,#bcd3ff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cyan{color:var(--cyan)}.blueT{color:#5aa0ff}.greenT{color:#3ad39a}

/* brain logo orb (used on several infographic pages) */
.brain-orb{border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(47,139,255,.28),transparent 66%);
  border:1px solid var(--stroke2);
  box-shadow:0 0 70px rgba(47,139,255,.32),inset 0 0 60px rgba(139,92,246,.22)}

/* footer (shared, injected) */
.site-footer{border-top:1px solid var(--stroke);padding:20px 0;margin-top:10px;background:rgba(5,8,16,.6)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:9px;color:#cfe0ff;font-size:13.5px}
.footer-brand img{height:30px;width:auto;filter:drop-shadow(0 0 8px rgba(47,139,255,.45))}
.footer-brand:hover{color:#fff}
.footer-net{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px}
.footer-links{display:flex;gap:20px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;margin-inline-start:auto}
.footer-links a:hover{color:#fff}
.footer-rights{color:var(--muted);font-size:13.5px}

/* legal / policy pages (Terms of Use, Privacy Policy) */
.legal{max-width:860px;margin:0 auto;padding:40px 0 24px}
.legal-title{font-size:clamp(28px,4vw,40px);font-weight:600;color:#fff;line-height:1.15}
.legal-updated{color:var(--muted);font-size:13.5px;margin-top:10px}
.legal-intro{color:#cfe0ff;font-size:15.5px;line-height:1.75;margin-top:20px}
.legal-sec{margin-top:28px}
.legal-sec h2{font-size:19px;font-weight:600;color:#fff;margin-bottom:9px}
.legal-sec p{color:var(--muted);font-size:14.5px;line-height:1.8}
.legal-sec a{color:var(--cyan)}

/* RTL niceties */
html[dir="rtl"] .flip{transform:scaleX(-1)}

/* responsive base */
@media (max-width:820px){
  .topbar-inner{height:auto;min-height:66px;flex-wrap:wrap;gap:8px 12px;padding-top:7px;padding-bottom:7px}
  .page-nav{display:flex;order:3;flex-basis:100%;max-width:100%;margin-inline-start:0;padding-bottom:3px}
  .page-nav a{font-size:12px;padding:7px 9px}
  .topbar-actions{margin-inline-start:auto}
  .lang-btn .lg-text{display:none}
}
@media (max-width:520px){
  .btn-ghost{display:none}
  .topbar-inner{gap:6px}
  .brand-word{display:none}
  .page-nav{scroll-snap-type:x proximity}
  .page-nav a{scroll-snap-align:start}
}

/* ============================================================
   OVERLAY STAGE — a blank template image is the background and
   translated text is positioned on top of it. Coordinates on
   each .ov are in % of the stage, so they hold at any width.
   Font sizes use cqw (1cqw = 1% of stage width) so text scales
   proportionally with the image.
   ============================================================ */
.stage-wrap{padding:26px 0}
.stage{position:relative;width:100%;max-width:1536px;margin:0 auto;aspect-ratio:1536/1024;
  background:#04070f;border-radius:14px;overflow:hidden;container-type:inline-size;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage.noimg::after{content:attr(data-missing);position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;text-align:center;padding:8%;color:var(--muted);
  font-size:15px;background:repeating-linear-gradient(45deg,#070b16,#070b16 22px,#0a1020 22px,#0a1020 44px)}

/* an overlay text block. Position with inline left/top/width/height (%).
   overflow:hidden GATES the text inside its target box — nothing spills out. */
.ov{position:absolute;z-index:2;color:#fff;text-align:start;line-height:1.2;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.ov.center{text-align:center;align-items:center}
.ov.top{justify-content:flex-start}
.ov h1{font-size:2.6cqw;font-weight:400;line-height:1.16;margin:0}
.ov h2{font-size:2.1cqw;font-weight:400;margin:0}
.ov h3{font-size:1.12cqw;font-weight:400;margin:0}
.ov p{margin:.3cqw 0 0;font-size:1.08cqw;color:#c9d7f2;line-height:1.32;font-weight:400}
.ov .sub{font-size:1.08cqw;color:#c9d7f2;margin-top:.5cqw;font-weight:400}
.ov .desc{font-size:.86cqw;color:#cbd8f2;margin-top:.25cqw;font-weight:400}
.ov .lil{font-size:.8cqw;color:var(--muted);font-weight:400}

/* overlay button labels sitting on the baked-in buttons — centred + clipped */
.ov-btn{position:absolute;z-index:2;display:grid;place-items:center;text-align:center;overflow:hidden;
  font-weight:400;font-size:1.1cqw;color:#fff;padding:0 .5cqw;box-sizing:border-box}
.ov-btn.dark{color:#04150e}
.ov-btn.amber{color:#f2c15a}

/* card caption: a soft scrim keeps text readable over the bright photo,
   and the fixed box height gates title+desc inside the card. */
.ov-card{text-align:center;align-items:center;justify-content:center;padding:.3cqw .5cqw;
  background:linear-gradient(180deg,rgba(4,7,15,.0),rgba(4,7,15,.66) 38%,rgba(4,7,15,.66));
  border-radius:.5cqw}
.ov-card h3{font-size:1.08cqw;font-weight:400;color:#fff}
.ov-card .desc{font-size:.8cqw;font-weight:400;margin-top:.15cqw;color:#d3dff5}

/* tiny caption used over icon rows / bottom bars */
.ov-cap{position:absolute;z-index:2;text-align:center;color:#dbe6ff;overflow:hidden;box-sizing:border-box;
  font-size:.8cqw;font-weight:400;line-height:1.25;padding:0 .3cqw;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.ov-cap b{font-weight:400;font-size:.88cqw;color:#fff}

/* when the stage gets narrow, bump text up a touch for legibility */
@container (max-width:760px){
  .ov h1{font-size:3.2cqw}.ov .sub{font-size:1.5cqw}
  .ov-card .desc,.ov-cap{font-size:1.15cqw}
}

/* ============================================================
   SHARED PAGE COMPONENTS  (used by pages 2–10; homepage keeps
   its own hero/mock styles). No bold anywhere — weights 300–600.
   ============================================================ */
.pg h1,.pg h2,.pg h3,.pg h4{font-weight:500;letter-spacing:-.01em}
.pg .btn{font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.sec{padding:44px 0}
.sec.tight{padding:22px 0}
.sec-head{text-align:center;max-width:820px;margin:0 auto 30px}
.sec-head .eyebrow{display:inline-block;margin-bottom:10px;font-size:13px}
.sec-head h2{font-size:clamp(23px,2.6vw,33px);line-height:1.22}
.sec-head p{color:var(--muted);margin-top:12px;font-size:15.5px}

/* page hero: text column + visual column */
.phero{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:50px 0 24px}
.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--stroke2);
  color:var(--cyan);border-radius:999px;padding:7px 16px;font-size:13px;margin-bottom:20px}
.phero h1{font-size:clamp(28px,3.3vw,44px);line-height:1.16;margin-bottom:16px}
.phero .lead{color:var(--muted);font-size:clamp(15px,1.2vw,17px);max-width:56ch;margin-bottom:22px}
.phero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:1000px){.phero{grid-template-columns:1fr;gap:30px}}

/* photo cards (label + real photo) */
.pcards{display:grid;gap:16px}
.pcards.c2{grid-template-columns:repeat(2,1fr)}
.pcards.c3{grid-template-columns:repeat(3,1fr)}
.pcards.c4{grid-template-columns:repeat(4,1fr)}
.pcards.c5{grid-template-columns:repeat(5,1fr)}
.pcards.c6{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;border:1px solid var(--stroke);border-radius:15px;overflow:hidden;
  background:var(--panel);transition:.2s transform,.2s border-color;min-height:150px;
  display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);border-color:var(--stroke2)}
.pcard .ph{position:relative;height:154px;background-size:cover;background-position:center 24%}
.pcard .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,16,.05),rgba(5,8,16,.72))}
.pcard .bd{padding:13px 15px 16px;position:relative}
.pcard .ic{position:absolute;top:-23px;inset-inline-start:14px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.pcard .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}
.pcard h3{font-size:15.5px;color:#fff;margin:6px 0 5px}
.pcard p{font-size:12.8px;color:var(--muted);line-height:1.5}
.pcard .more{margin-top:9px;font-size:12.5px;color:var(--cyan)}
@media(max-width:1000px){.pcards.c3,.pcards.c4,.pcards.c5,.pcards.c6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pcards{grid-template-columns:1fr!important}}

/* icon accent palette (reusable) — luminous */
.a-violet{background:linear-gradient(135deg,#8b5cf6,#5b34d6);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(139,92,246,.5)}
.a-amber{background:linear-gradient(135deg,#e0a53a,#b97e1f);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(224,165,58,.5)}
.a-red{background:linear-gradient(135deg,#f0556b,#c62d45);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(240,85,107,.5)}
.a-blue{background:linear-gradient(135deg,#2f8bff,#155fd6);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(47,139,255,.5)}
.a-pink{background:linear-gradient(135deg,#ec4899,#b32d6e);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(236,72,153,.5)}
.a-green{background:linear-gradient(135deg,#25c281,#149a63);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(37,194,129,.5)}
.a-cyan{background:linear-gradient(135deg,#22d3ee,#0e93b0)}

/* feature strip */
.fstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;border:1px solid var(--stroke);
  border-radius:16px;padding:22px 18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.fitem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 6px;position:relative}
.fitem+.fitem::before{content:"";position:absolute;inset-inline-start:-8px;top:12%;height:76%;width:1px;background:var(--stroke)}
.fitem .fi{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(34,211,238,.45);background:radial-gradient(circle at 50% 40%,rgba(34,211,238,.16),rgba(47,139,255,.05));
  box-shadow:0 0 22px rgba(34,211,238,.22),inset 0 0 12px rgba(34,211,238,.12)}
.fitem .fi svg{width:23px;height:23px;stroke:var(--cyan);fill:none;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(34,211,238,.7))}
.fitem b{font-weight:500;color:#fff;font-size:14px}
.fitem span{font-size:12.5px;color:var(--muted)}
.fstrip.n6{grid-template-columns:repeat(6,1fr)}
.fstrip.n4{grid-template-columns:repeat(4,1fr)}
.fstrip.n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.fstrip{grid-template-columns:repeat(2,1fr)!important;gap:20px}.fitem+.fitem::before{display:none}}
@media(max-width:600px){.fstrip{grid-template-columns:1fr!important}}

/* generic glass panel */
.gpanel{border:1px solid var(--stroke);border-radius:16px;padding:20px;
  background:linear-gradient(180deg,var(--panel),#090e1a)}
.gpanel h3{font-size:16px;color:#fff;margin-bottom:6px}
.gpanel p{font-size:13.5px;color:var(--muted)}

/* check list (used on several pages) */
.checklist{list-style:none;display:flex;flex-direction:column;gap:13px}
.checklist li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:#dfe8fb}
.checklist li .ck{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(37,194,129,.5);background:rgba(37,194,129,.1)}
.checklist li .ck svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2}

/* horizontal numbered step flow (checks / how / meet) */
.flow{display:grid;gap:16px;align-items:stretch}
.flow.s5{grid-template-columns:repeat(5,1fr)}
.flow.s3{grid-template-columns:repeat(3,1fr)}
.step{position:relative;border:1px solid var(--stroke);border-radius:15px;padding:20px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));text-align:center}
.step .num{position:absolute;top:12px;inset-inline-end:14px;font-size:13px;color:var(--cyan)}
.step .si{width:64px;height:64px;margin:2px auto 14px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(34,211,238,.45);background:radial-gradient(circle at 50% 40%,rgba(34,211,238,.16),rgba(47,139,255,.04));
  box-shadow:0 0 26px rgba(34,211,238,.22),inset 0 0 14px rgba(34,211,238,.12)}
.step .si svg{width:30px;height:30px;stroke:var(--cyan);fill:none;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(34,211,238,.7))}
.step.hot .si{border-color:rgba(224,165,58,.6);background:radial-gradient(circle at 50% 40%,rgba(224,165,58,.18),transparent);box-shadow:0 0 30px rgba(224,165,58,.28)}
.step.hot .si svg{stroke:var(--amber);filter:drop-shadow(0 0 7px rgba(224,165,58,.8))}
.step.ok .si{border-color:rgba(37,194,129,.55);background:radial-gradient(circle at 50% 40%,rgba(37,194,129,.16),transparent);box-shadow:0 0 26px rgba(37,194,129,.24)}
.step.ok .si svg{stroke:var(--green);filter:drop-shadow(0 0 6px rgba(37,194,129,.8))}
.step h3{font-size:15.5px;color:#fff;margin-bottom:7px}
.step p{font-size:12.8px;color:var(--muted);line-height:1.5}
.step.hot{border-color:rgba(224,165,58,.5);box-shadow:0 0 34px rgba(224,165,58,.14)}
.step.ok{border-color:rgba(37,194,129,.45)}
@media(max-width:1000px){.flow.s5{grid-template-columns:repeat(2,1fr)}.flow.s3{grid-template-columns:1fr}}

/* brain orb graphic (how / idea / awareness centres) */
.orb{position:relative;width:min(360px,80%);aspect-ratio:1;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(47,139,255,.30),rgba(139,92,246,.12) 55%,transparent 72%);
  box-shadow:0 0 80px rgba(47,139,255,.30),inset 0 0 60px rgba(139,92,246,.20)}
.orb::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid var(--stroke2);opacity:0}
.orb img{width:92%;filter:drop-shadow(0 0 26px rgba(47,139,255,.45))}

/* ---------- narrow-mobile safety (site-wide) ---------- */
/* grid/flex children default to min-width:auto and overflow — allow them to shrink */
.hero>*,.phero>*,.trio>*,.pcards>*,.fstrip>*,.flow>*,.mock-main,.mock-two>*{min-width:0}
.mock,.mock-frame{max-width:100%}
/* clip decorative glows/bleeds so they never create horizontal scroll */
html,body{overflow-x:clip}
main{overflow-x:clip}
img,.pcard .ph{max-width:100%}
@media (max-width:1000px){
  .hero>*,.phero>*{min-width:0;max-width:100%}
}
@media (max-width:520px){
  .container,.wrap{padding:0 16px}
  h1,h2,.hero h1,.phero h1,.page-title,.sec-head h2{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
  .hero,.phero{padding-top:34px}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
  .mock-body{grid-template-columns:1fr}      /* drop the fixed sidebar column */
  .mock-side{display:none}
  .mock-two{grid-template-columns:1fr}
  /* force hero/phero to a single padded column so nothing overflows */
  .hero,.phero{grid-template-columns:1fr!important;padding-inline:16px!important;gap:26px}
  .hero>*,.phero>*{max-width:100%}
  .hero h1{font-size:26px;line-height:1.2}
  .phero h1{font-size:25px;line-height:1.2}
  .hero-sub,.phero .lead{font-size:15px}
}