/* ─────────────────────────────────────────────────────────────────────────────
   Self-hosted Persian typography. B Titr carries the display voice, B Nazanin the
   reading voice. Each face is scoped by unicode-range to the Persian/Arabic blocks,
   so Latin text on the English pages — and Latin terms inside Persian copy — falls
   through to the system stack untouched. Fonts are served from this origin only,
   keeping font-src 'self' intact; the woff2 files are subset to the Persian glyph
   set (~17 KB each) and generated by tools/gen-fonts.py.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"B Titr";
  src:url("/media/fonts/BTitr-Bold.woff2") format("woff2");
  font-weight:600 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+00AB,U+00BB,U+2010-2015,U+2018-201F,U+0640;
}
@font-face{
  font-family:"B Nazanin";
  src:url("/media/fonts/BNazanin-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+00AB,U+00BB,U+2010-2015,U+2018-201F,U+0640;
}
@font-face{
  font-family:"B Nazanin";
  src:url("/media/fonts/BNazanin-Bold.woff2") format("woff2");
  font-weight:500 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+00AB,U+00BB,U+2010-2015,U+2018-201F,U+0640;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Design tokens. Every colour in this file resolves through a token declared in
   one of the two blocks below, so a theme is a value swap and never a rule swap.
   The light theme follows the operating system through prefers-color-scheme;
   there is no toggle, because the site ships zero executable JavaScript.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* Accent palette. Product and article-category rules reference these, so one
     flip below re-tints every themed surface. Hues stay distinct but are mixed to
     sit on the deep emerald base rather than fight it. */
  --pal-cyan:#9ce7e0;--pal-orange:#ffb59c;--pal-green:#b6e88a;--pal-gold:#f5d78e;--pal-blue:#a8c8ff;
  --pal-violet:#cbb8ff;--pal-teal:#5fdfc9;--pal-sky:#a6dcff;--pal-pink:#ffa8c0;

  /* Surfaces. The base is a heavily desaturated deep forest green rather than
     black, so the emerald reads even in the shadows. */
  --surface:#001712;
  --surface-glow-a:rgba(128,203,196,.16);
  --surface-glow-b:rgba(0,77,64,.42);
  --surface-glow-c:rgba(156,231,224,.10);
  --surface-muted:linear-gradient(180deg,rgba(0,37,30,.72),rgba(0,23,18,.2));
  --surface-header:rgba(0,17,13,.72);
  --surface-footer:#00110d;
  --surface-card:rgba(255,255,255,.035);
  /* Opaque stand-in wherever backdrop-filter is unavailable. */
  --surface-card-soft:#00251e;
  --surface-video:rgba(255,255,255,.04);
  --surface-frame:#00110d;
  --surface-cta:radial-gradient(circle at 90% 10%,rgba(128,203,196,.16),transparent 34%),rgba(255,255,255,.045);
  --surface-scrim:rgba(0,17,13,.9);
  --surface-vignette:rgba(0,17,13,.85);
  --shadow-frame:rgba(0,0,0,.35);
  --shadow-deep:rgba(0,0,0,.55);

  /* Glass. Depth here is refraction and layering, not black shadow: a blurred
     backdrop, a hairline stroke, and a top-edge inner glow. */
  --glass-blur:24px;
  --glass-stroke:rgba(255,255,255,.15);
  --glass-stroke-active:rgba(128,203,196,.3);
  --glass-inner:inset 0 1px 1px rgba(255,255,255,.1);

  /* Content */
  --on-surface:#e0f2f1;
  --on-surface-emphasis:#ffffff;
  --on-surface-body:#b9d6d0;
  --on-surface-lead:#afefdd;
  --on-surface-variant:#9db3af;
  --outline:rgba(255,255,255,.15);
  --outline-strong:rgba(128,203,196,.34);
  --hero-grid-line:rgba(128,203,196,.045);
  --hero-title:linear-gradient(104deg,#e0f2f1 6%,#9ce7e0 44%,#80cbc4 84%);
  --hero-title-shadow:rgba(128,203,196,.28);

  /* Accents */
  --accent:var(--pal-cyan);
  --accent-bright:#80cbc4;
  --on-accent:#003734;
  --accent-soft:rgba(128,203,196,.08);
  --accent-glow:rgba(128,203,196,.18);
  --violet:var(--pal-violet);
  --violet-soft:rgba(203,184,255,.08);
  --safe:#80cbc4;
  --warn:#f5d78e;
  --skip-surface:#e0f2f1;
  --on-skip:#00201e;

  /* Kernel visual */
  --kernel-bg:radial-gradient(circle at 50% 50%,rgba(128,203,196,.16),rgba(0,45,37,.72) 32%,rgba(0,17,13,0) 72%),radial-gradient(circle at 76% 22%,rgba(128,203,196,.26),transparent 40%),radial-gradient(circle at 22% 80%,rgba(0,77,64,.5),transparent 44%);
  --kernel-spoke:rgba(156,231,224,.06);
  --kernel-inner-glow:rgba(128,203,196,.07);
  --orbit-outer:rgba(156,231,224,.22);
  --orbit-inner:rgba(128,203,196,.26);
  --star:#cbdddc;
  --star-bright:#ffffff;
  --star-warm:#d4e6e5;
  --star-cool:#afefdd;
  --sun-bg:radial-gradient(circle at 38% 32%,#f2fffd,#a4f0e9 36%,#3fb3a8 72%,#00504b);
  --sun-halo-a:rgba(128,203,196,.6);
  --sun-halo-b:rgba(63,179,168,.42);
  --sun-inner:rgba(255,255,255,.45);
  --on-sun:#00201e;
  --on-sun-strong:#00201e;
  --on-sun-dim:#00504b;
  --planet-bg:linear-gradient(158deg,rgba(240,255,253,.97),rgba(206,235,231,.92));
  --planet-outline:rgba(255,255,255,.6);
  --planet-shadow:rgba(0,0,0,.4);
  --on-planet:#0e1e1e;
  --on-planet-icon:#00201e;
  --planet-icon-inset:rgba(255,255,255,.35);
  /* The kernel keeps a night sky in both themes, so its module colours are fixed
     rather than following the light-mode palette. */
  --kernel-cyan:#9ce7e0;--kernel-violet:#cbb8ff;--kernel-green:#b6e88a;--kernel-blue:#a8c8ff;--kernel-gold:#f5d78e;
  --kernel-teal:#5fdfc9;--kernel-sky:#a6dcff;--kernel-orange:#ffb59c;

  /* Type, shape, and spacing scale */
  --font-display:"B Titr","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"B Nazanin",system-ui,-apple-system,"Segoe UI","Vazirmatn",Tahoma,Roboto,Arial,sans-serif;
  --text-display:clamp(1.95rem,4.3vw,3.35rem);
  --text-headline:clamp(1.45rem,2.9vw,2.3rem);
  --text-title:clamp(1.28rem,2.2vw,1.72rem);
  --text-lead:clamp(1rem,1.35vw,1.16rem);
  --text-body:1.03rem;
  --text-label:.76rem;
  --track-display:-.02em;
  --track-label:.17em;
  --r-xs:8px;--r-sm:12px;--r:16px;--r-lg:24px;--r-xl:32px;--r-full:999px;
  --space:8px;
  --gutter:24px;
  --max:1240px;
}

@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;

    /* Same hues, re-mixed for contrast against a light surface. */
    --pal-cyan:#136964;--pal-orange:#a1421c;--pal-green:#3d6b12;--pal-gold:#6f5416;--pal-blue:#2a5bc7;
    --pal-violet:#5b3fb3;--pal-teal:#04695f;--pal-sky:#2c6b96;--pal-pink:#a92e50;

    --surface:#f4fbf8;
    --surface-glow-a:rgba(19,105,100,.10);
    --surface-glow-b:rgba(128,203,196,.16);
    --surface-glow-c:rgba(19,105,100,.06);
    --surface-muted:linear-gradient(180deg,#e6ece9,rgba(244,251,248,.4));
    --surface-header:rgba(244,251,248,.78);
    --surface-footer:#e3eae7;
    --surface-card:rgba(255,255,255,.62);
    --surface-card-soft:#eff5f2;
    --surface-video:rgba(255,255,255,.7);
    --surface-frame:#dbe5e1;
    --surface-cta:radial-gradient(circle at 90% 10%,rgba(19,105,100,.10),transparent 34%),rgba(255,255,255,.66);
    --surface-scrim:rgba(233,239,236,.92);
    --surface-vignette:rgba(22,29,27,.55);
    --shadow-frame:rgba(22,29,27,.12);
    --shadow-deep:rgba(22,29,27,.18);

    --glass-stroke:rgba(19,105,100,.16);
    --glass-stroke-active:rgba(19,105,100,.34);
    --glass-inner:inset 0 1px 1px rgba(255,255,255,.7);

    --on-surface:#161d1b;
    --on-surface-emphasis:#000f0c;
    --on-surface-body:#31403d;
    --on-surface-lead:#3f4947;
    --on-surface-variant:#4c5654;
    --outline:rgba(19,105,100,.16);
    --outline-strong:rgba(19,105,100,.34);
    --hero-grid-line:rgba(19,105,100,.05);
    --hero-title:linear-gradient(104deg,#161d1b 6%,#136964 44%,#04695f 84%);
    --hero-title-shadow:rgba(19,105,100,.16);

    --accent-bright:#04695f;
    --on-accent:#ffffff;
    --accent-soft:rgba(19,105,100,.08);
    --accent-glow:rgba(19,105,100,.18);
    --violet-soft:rgba(91,63,179,.08);
    --safe:#136964;
    --warn:#6f5416;
    --skip-surface:#161d1b;
    --on-skip:#ffffff;

    /* The kernel stays a night sky in both themes: it is a depiction of the
       runtime, not page chrome, and its planets need a dark backdrop to read. */
    --kernel-bg:radial-gradient(circle at 50% 50%,rgba(0,56,46,.96),rgba(0,32,26,.94) 46%,rgba(0,32,26,.6) 72%),radial-gradient(circle at 76% 22%,rgba(128,203,196,.3),transparent 40%),radial-gradient(circle at 22% 80%,rgba(0,77,64,.55),transparent 44%);
    --kernel-spoke:rgba(206,235,231,.08);
    --kernel-inner-glow:rgba(128,203,196,.1);
    --orbit-outer:rgba(206,235,231,.26);
    --orbit-inner:rgba(164,240,233,.28);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;color:var(--on-surface);background:radial-gradient(circle at 82% 8%,var(--surface-glow-a),transparent 42%),radial-gradient(circle at 8% 16%,var(--surface-glow-b),transparent 36%),radial-gradient(circle at 50% 118%,var(--surface-glow-c),transparent 52%),var(--surface);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p{color:var(--on-surface-variant);margin-top:0}
h1,h2,h3{margin-top:0;line-height:1.14;font-weight:800;font-family:var(--font-display)}
h1{font-size:var(--text-display);letter-spacing:var(--track-display);max-width:18ch;line-height:1.1}
[dir=rtl] h1{letter-spacing:0;line-height:1.5}
/* B Nazanin sits smaller on the body than the Latin stack, and B Titr is tall and
   heavy — give Persian a little more size and leading so it reads comfortably. */
[dir=rtl] body{font-size:1.06rem}
[dir=rtl] .lead{line-height:1.95}
[dir=rtl] .prose p,[dir=rtl] .faqItem p,[dir=rtl] .note p{line-height:2.05}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0}
h2{font-size:var(--text-headline);letter-spacing:-.015em;max-width:22ch}
[dir=rtl] h2{letter-spacing:0;line-height:1.45}
h3{font-size:1.12rem}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.narrow{max-width:900px}
.section{padding-block:clamp(72px,9vw,130px);position:relative}
.muted{background:var(--surface-muted);border-block:1px solid var(--outline)}
.eye{color:var(--accent);font-size:var(--text-label);font-weight:800;letter-spacing:var(--track-label);text-transform:uppercase;margin-bottom:18px}
.lead{font-size:var(--text-lead);max-width:62ch;color:var(--on-surface-lead)}
.header{position:sticky;top:0;z-index:50;background:var(--surface-header);backdrop-filter:blur(18px);border-bottom:1px solid var(--outline)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:var(--gutter)}
.brand{display:flex;align-items:center;gap:12px}
.brand>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--outline-strong);border-radius:50%;color:var(--accent);font-weight:900}
.brand b{letter-spacing:.12em}
.brand small{display:block;color:var(--on-surface-variant);font-size:.58rem;letter-spacing:.04em}
.nav nav{display:flex;gap:28px}
.nav nav a,.actions>a:first-child{color:var(--on-surface-variant);font-size:.9rem}
.nav nav>a:hover,.hasSub>a:hover{color:var(--on-surface)}

/* Products mega-menu — pure CSS, revealed on hover and keyboard focus, no script. */
.hasSub{position:relative}
.hasSub>a{display:inline-flex;align-items:center;gap:5px}
.hasSub>a::after{content:"▾";font-size:.7em;color:var(--accent);transition:transform .2s}
.hasSub:hover>a::after,.hasSub:focus-within>a::after{transform:rotate(180deg)}
/* An opaque emerald surface — a dropdown must stay readable over the busy hero, so
   this one does not lean on transparency the way the in-page glass cards do. */
.megaMenu{position:absolute;top:calc(100% + 14px);inset-inline-start:0;z-index:60;width:min(760px,calc(100vw - 40px));padding:18px;border:1px solid var(--glass-stroke-active);border-radius:var(--r-lg);background:var(--surface-card-soft);box-shadow:0 24px 70px var(--shadow-deep),var(--glass-inner);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility .18s}
.hasSub:hover .megaMenu,.hasSub:focus-within .megaMenu{opacity:1;visibility:visible;transform:translateY(0)}
.megaMenu::before{content:"";position:absolute;top:-14px;inset-inline:0;height:14px}
.megaAll{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin-bottom:14px;border-radius:var(--r);border:1px solid var(--outline-strong);background:var(--accent-soft)}
.megaAll b{color:var(--accent);font-size:.95rem}
.megaAll small{color:var(--on-surface-variant);font-size:.76rem}
.megaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.megaCol{display:flex;flex-direction:column;gap:4px}
.megaHead{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:6px}
.megaCol a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);color:var(--on-surface-body);font-size:.82rem}
.megaCol a:hover{background:var(--accent-soft);color:var(--on-surface)}
.megaCol a i{flex:none;display:grid;place-items:center;width:26px;height:22px;border-radius:6px;border:1px solid var(--outline);color:var(--accent);font-style:normal;font-weight:800;font-size:.6rem}
.actions{display:flex;align-items:center;gap:16px}
.skip{position:fixed;top:-90px;inset-inline-start:12px;background:var(--skip-surface);color:var(--on-skip);padding:10px 16px;z-index:99}
.skip:focus{top:12px}
.button{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:var(--r-full);background:linear-gradient(135deg,var(--accent),var(--accent-bright));color:var(--on-accent);font-weight:800;box-shadow:0 12px 34px var(--accent-glow);transition:.2s}
.button:hover{transform:translateY(-2px)}
.button:focus-visible,a:focus-visible{outline:3px solid var(--warn);outline-offset:4px}
.button.small{min-height:42px;font-size:.84rem}
.button.ghost{background:transparent;color:var(--on-surface);box-shadow:none;border-color:var(--outline-strong)}
.row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero{overflow:hidden;padding-top:clamp(80px,10vw,150px)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--hero-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid-line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(black,transparent 82%);pointer-events:none}
.heroGrid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(48px,7vw,100px);align-items:center;position:relative}
.trust{margin-top:100px;padding-block:20px;border-block:1px solid var(--outline);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--on-surface-variant);font-size:.78rem}
.trust span:before{content:"◆";color:var(--safe);margin-inline-end:8px;font-size:.58rem}
.sh{max-width:800px;margin-bottom:54px}
.sh>p:last-child{font-size:1rem}
.grid{display:grid;gap:16px}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
/* Frosted panes: a blurred backdrop, a hairline stroke, and a top-edge inner glow.
   Grouped so every container earns depth the same way. */
.card,.cap,.statBox,.note,.tableWrap,.video,.cta{
  background:var(--surface-card);
  border:1px solid var(--glass-stroke);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-inner)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.cap,.statBox,.note,.tableWrap,.video,.cta{background:var(--surface-card-soft)}
}
.card{padding:28px;min-height:220px;border-radius:var(--r-lg)}
.card>span{color:var(--accent);font-size:.66rem;letter-spacing:.14em}
.card h3{margin-top:28px}
.pipeline{border-top:1px solid var(--outline)}
.pipeline article{display:grid;grid-template-columns:80px 1fr;gap:var(--gutter);padding-block:27px;border-bottom:1px solid var(--outline)}
.pipeline article>b{color:var(--accent);font-size:1.6rem}
.pipeline p{margin-bottom:0}
.security{background:linear-gradient(var(--surface-scrim),var(--surface-scrim)),url("/media/security-mesh.svg") center/cover}
.secGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(45px,8vw,110px)}
.module{min-height:250px;transition:.2s}
.module:hover{transform:translateY(-5px);border-color:var(--glass-stroke-active)}
.module>div{display:flex;align-items:center;justify-content:space-between}
.module i{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--outline-strong);border-radius:13px;color:var(--accent);font-style:normal;font-weight:900}
.videoGrid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(40px,7vw,90px);align-items:center}
.video{padding:10px;border-radius:var(--r-xl);background:var(--surface-video)}
.video video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px}
.reel{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--surface-frame)}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 125% at 50% 44%,transparent 50%,var(--surface-vignette));box-shadow:inset 0 0 0 1px var(--accent-glow),inset 0 0 70px var(--surface-vignette)}
.reel:after{content:"● LIVE";position:absolute;top:15px;inset-inline-start:17px;font-size:.56rem;font-weight:800;letter-spacing:.24em;color:var(--accent);opacity:.85;pointer-events:none}
.reelNote{max-width:52ch;margin:14px auto 0;font-size:.78rem;color:var(--on-surface-variant);text-align:center}
.company{display:grid;grid-template-columns:1fr .85fr;gap:70px}
.final{padding-top:28px}
.cta{padding:clamp(36px,6vw,80px);border-radius:var(--r-xl);background:var(--surface-cta);display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cta h2{max-width:16ch}
footer{padding-top:70px;background:var(--surface-footer);border-top:1px solid var(--outline)}
.footer{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-bottom:50px}
.footer>div:last-child{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.footer a{color:var(--on-surface-variant)}
.legal{padding-block:20px;border-top:1px solid var(--outline);color:var(--on-surface-variant);font-size:.72rem}
.inner{min-height:72vh}
.inner h1{max-width:15ch}
.details{margin-block:55px;border-top:1px solid var(--outline)}
.details article{display:grid;grid-template-columns:70px 1fr;gap:22px;padding-block:23px;border-bottom:1px solid var(--outline)}
.details b{color:var(--accent)}
.details p{margin:0}

@media(max-width:1050px){.nav nav{display:none}.heroGrid,.secGrid,.videoGrid,.company{grid-template-columns:1fr}.kernel{width:min(100%,640px);margin-inline:auto}.grid.four,.grid.three{grid-template-columns:repeat(2,1fr)}}
/* Blur is the most expensive part of the glass treatment; soften it on phones. */
@media(max-width:680px){:root{--glass-blur:14px}}
@media(max-width:680px){.container{width:min(calc(100% - 28px),var(--max))}.brand small,.actions .button{display:none}.actions>a:first-child{font-size:.72rem}.grid.four,.grid.three,.grid.two{grid-template-columns:1fr}.planet{padding:5px 9px 5px 6px;gap:6px}.planet b{font-size:.62rem}.planet i{width:22px;height:22px;font-size:.58rem}.pipeline article{grid-template-columns:50px 1fr}.cta,.footer{grid-template-columns:1fr;display:grid;align-items:start}.placeholder{min-height:220px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media (prefers-reduced-motion: reduce){.reel:after{content:"STILL"}}

/* Galaxy kernel — product modules orbit the core like planets (pure CSS, no JS) */
.hero h1{background:var(--hero-title);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 20px var(--hero-title-shadow))}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.8;background:url("/media/constellation.svg") center/cover no-repeat}
@media (prefers-color-scheme:light){body::before{opacity:.35}}

.kernel{position:relative;aspect-ratio:1;border-radius:50%;background:var(--kernel-bg);box-shadow:0 30px 100px var(--shadow-deep),inset 0 0 120px var(--kernel-inner-glow)}
.kernel::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 0deg,transparent 0 12deg,var(--kernel-spoke) 12deg 12.5deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 60%);mask:radial-gradient(circle,#000 6%,transparent 60%)}
.kernel::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.6;-webkit-mask:radial-gradient(circle,#000 52%,transparent 70%);mask:radial-gradient(circle,#000 52%,transparent 70%);background-image:radial-gradient(1.3px 1.3px at 26% 30%,var(--star-bright),transparent),radial-gradient(1.2px 1.2px at 68% 24%,var(--star-cool),transparent),radial-gradient(1.4px 1.4px at 44% 66%,var(--star-bright),transparent),radial-gradient(1px 1px at 82% 58%,var(--star-warm),transparent),radial-gradient(1.2px 1.2px at 58% 82%,var(--star-bright),transparent),radial-gradient(1px 1px at 34% 48%,var(--star),transparent);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.4}to{opacity:.75}}

.sun{position:absolute;inset:37%;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:var(--sun-bg);box-shadow:0 0 42px var(--sun-halo-a),0 0 100px var(--sun-halo-b),inset 0 0 26px var(--sun-inner)}
.sun small{font-size:.44rem;letter-spacing:.16em;font-weight:800;color:var(--on-sun)}
.sun b{font-family:var(--font-display);font-size:clamp(.7rem,1.4vw,1rem);color:var(--on-sun-strong);line-height:1.05}
.sun em{font-style:normal;font-size:.4rem;letter-spacing:.05em;color:var(--on-sun-dim)}

.orbit-path{position:absolute;border:1px dashed var(--orbit-outer);border-radius:50%;pointer-events:none}
.op-outer{inset:16%}
.op-inner{inset:29%;border-color:var(--orbit-inner)}
.planet{position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:8px;padding:6px 11px 6px 7px;border-radius:12px;white-space:nowrap;background:var(--planet-bg);border:1px solid var(--planet-outline);box-shadow:0 6px 20px var(--planet-shadow),0 0 16px var(--pc,var(--kernel-cyan));pointer-events:none}
.planet i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-xs);font-style:normal;font-weight:800;font-size:.68rem;color:var(--on-planet-icon);background:var(--pc,var(--kernel-cyan));box-shadow:inset 0 0 0 1px var(--planet-icon-inset)}
.planet b{font-size:.73rem;font-weight:700;color:var(--on-planet);letter-spacing:.01em}
.ringA{animation:orbA 64s linear infinite}
.ringB{animation:orbB 40s linear infinite}
/* Orbit slots. The inner ring carries the three layers closest to the kernel in the
   EAOS architecture; the outer ring carries the remaining four, in priority order. */
.pb1{animation-delay:0s}.pb2{animation-delay:-13.34s}.pb3{animation-delay:-26.67s}
.pa1{animation-delay:0s}.pa2{animation-delay:-16s}.pa3{animation-delay:-32s}.pa4{animation-delay:-48s}
.pl-agent-fabric{--pc:var(--kernel-green)}.pl-knowledge{--pc:var(--kernel-blue)}.pl-workflow{--pc:var(--kernel-teal)}
.pl-desktop{--pc:var(--kernel-violet)}.pl-dashboard{--pc:var(--kernel-sky)}
.pl-security{--pc:var(--kernel-orange)}.pl-federation{--pc:var(--kernel-gold)}
@keyframes orbA{0%{top:84%;left:50%;transform:translate(-50%,-50%) scale(1.16);z-index:7;opacity:1}12.5%{top:74%;left:74%;transform:translate(-50%,-50%) scale(1.1);z-index:7;opacity:.98}25%{top:50%;left:84%;transform:translate(-50%,-50%) scale(.94);z-index:7;opacity:.9}37.5%{top:26%;left:74%;transform:translate(-50%,-50%) scale(.78);z-index:2;opacity:.78}50%{top:16%;left:50%;transform:translate(-50%,-50%) scale(.72);z-index:2;opacity:.7}62.5%{top:26%;left:26%;transform:translate(-50%,-50%) scale(.78);z-index:2;opacity:.78}75%{top:50%;left:16%;transform:translate(-50%,-50%) scale(.94);z-index:7;opacity:.9}87.5%{top:74%;left:26%;transform:translate(-50%,-50%) scale(1.1);z-index:7;opacity:.98}100%{top:84%;left:50%;transform:translate(-50%,-50%) scale(1.16);z-index:7;opacity:1}}
@keyframes orbB{0%{top:71%;left:50%;transform:translate(-50%,-50%) scale(1.06);z-index:6;opacity:1}12.5%{top:64.9%;left:64.9%;transform:translate(-50%,-50%) scale(1);z-index:6;opacity:.96}25%{top:50%;left:71%;transform:translate(-50%,-50%) scale(.86);z-index:6;opacity:.9}37.5%{top:35.1%;left:64.9%;transform:translate(-50%,-50%) scale(.72);z-index:2;opacity:.76}50%{top:29%;left:50%;transform:translate(-50%,-50%) scale(.66);z-index:2;opacity:.7}62.5%{top:35.1%;left:35.1%;transform:translate(-50%,-50%) scale(.72);z-index:2;opacity:.76}75%{top:50%;left:29%;transform:translate(-50%,-50%) scale(.86);z-index:6;opacity:.9}87.5%{top:64.9%;left:35.1%;transform:translate(-50%,-50%) scale(1);z-index:6;opacity:.96}100%{top:71%;left:50%;transform:translate(-50%,-50%) scale(1.06);z-index:6;opacity:1}}
@media (prefers-reduced-motion: reduce){.planet{animation:none!important;transform:translate(-50%,-50%)}.pa1{top:84%;left:50%}.pa2{top:50%;left:84%}.pa3{top:16%;left:50%}.pa4{top:50%;left:16%}.pb1{top:71%;left:50%}.pb2{top:39.5%;left:68.2%}.pb3{top:39.5%;left:31.8%}}

/* Product family tag + articles/blog */
.fam{display:inline-block;margin-top:16px;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);border:1px solid var(--outline);border-radius:var(--r-full);padding:3px 11px}
.module .fam+h3{margin-top:12px}
.postGrid{margin-top:8px}
.post{display:flex;flex-direction:column}
.postMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.72rem;color:var(--on-surface-variant)}
.postMeta span{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}
.post h3{margin-top:16px}
.post>p{flex:1}
.postLink{margin-top:16px;color:var(--accent);font-weight:700;font-size:.86rem}
.postLink:hover{text-decoration:underline}
.prose{margin-block:32px}
.prose p{color:var(--on-surface-body);font-size:var(--text-body);line-height:1.85;margin-bottom:18px;max-width:70ch}
.inner .postMeta{margin-bottom:18px}

/* Product catalog + per-product themed pages. Accents follow the palette tokens so
   they flip with the theme; posters keep their own dark-screen accent. */
.p-agent-platform{--accent:var(--pal-green)}.p-knowledge{--accent:var(--pal-blue)}.p-workflow{--accent:var(--pal-teal)}
.p-aepb{--accent:var(--pal-gold)}
.p-ecip{--accent:var(--pal-sky)}.p-cgsp{--accent:var(--pal-orange)}.p-cremp{--accent:var(--pal-gold)}
.p-spidernet{--accent:var(--pal-pink)}.p-forge-ot{--accent:var(--pal-orange)}.p-cybertwin{--accent:var(--pal-cyan)}
.p-dashboard{--accent:var(--pal-sky)}
.p-grc{--accent:var(--pal-gold)}.p-collaboration{--accent:var(--pal-violet)}.p-private-cloud{--accent:var(--pal-blue)}
.p-licensing{--accent:var(--pal-teal)}
/* Matches both the whole-card link on the home page and the product-index card, which
   is an <article> because it carries its own deep links. */
.card.module{display:flex;flex-direction:column}
.module>p{flex:1}
.module:hover{border-color:var(--accent)}
.cardTitle{color:inherit}
.card.module:hover .cardTitle{color:var(--accent)}
/* Deep links into the product page, set smaller than the card copy and separated by
   hairlines rather than bullets so the row stays quiet under the title. */
.cardLinks{display:flex;flex-wrap:wrap;gap:6px 12px;margin:10px 0 4px;font-size:.74rem;line-height:1.6}
.cardLinks a,.cardLinks .isOff{position:relative}
.cardLinks a{color:var(--on-surface-variant);text-decoration:underline;text-decoration-color:var(--outline-strong);text-underline-offset:3px}
.cardLinks a:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* Not yet published: visibly present but inert, so publishing a catalogue later adds
   no new row and shifts nothing. */
.cardLinks .isOff{color:var(--on-surface-variant);opacity:.42;text-decoration:line-through;text-decoration-thickness:1px;cursor:default}
.cardLinks>*+*::before{content:"";position:absolute;inset-inline-start:-7px;top:.25em;bottom:.25em;border-inline-start:1px solid var(--outline)}
/* The same links in the product hero, where they are same-page jumps sitting directly
   under the product name: a step larger than on a card, but still quieter than the lead. */
.prodJump{margin:14px 0 20px;gap:8px 16px;font-size:.84rem}
.prodJump a{color:var(--accent);text-decoration-color:var(--accent-glow)}
.prodJump a:hover{text-decoration-color:var(--accent)}
.prodJump>*+*::before{inset-inline-start:-9px}
/* Anchor targets sit under a sticky header, so give them room to land clear of it. */
#capabilities,#architecture,#catalog{scroll-margin-top:96px}
.prod .prodHero{position:relative;background:radial-gradient(120% 82% at 22% -12%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%)}
.prodHero .reel{margin-top:32px;max-width:960px}
.statRow{display:flex;flex-wrap:wrap;gap:44px;margin-top:34px}
.statCell{display:flex;flex-direction:column}
.statCell b{font-family:var(--font-display);font-size:clamp(2rem,4.4vw,3.1rem);color:var(--accent);line-height:1}
.statCell span{color:var(--on-surface-variant);font-size:.8rem;margin-top:7px;max-width:18ch}
.capGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 40px}
.cap{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r)}
.cap i{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.cap span{color:var(--on-surface-body);font-size:.95rem;line-height:1.6}
@media (max-width:680px){.capGrid{grid-template-columns:1fr}.statRow{gap:26px}}

/* Long-form articles: headings, lists, metric callouts, notes, tables, and FAQ */
.cat-banking{--accent:var(--pal-gold)}.cat-ot{--accent:var(--pal-orange)}.cat-firewall{--accent:var(--pal-cyan)}
.cat-combined{--accent:var(--pal-violet)}.cat-agents{--accent:var(--pal-green)}
.artHero{padding-block:clamp(52px,6vw,86px);background:radial-gradient(120% 82% at 22% -12%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%)}
.artHero .heroGrid{align-items:center}
.heroArt{display:flex;justify-content:center}
.heroArt img{width:100%;max-width:520px;height:auto;display:block}
.badge{display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:var(--r-full);border:1px solid var(--accent);color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.metaLine{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:.78rem;color:var(--on-surface-variant);letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{padding:7px 15px;border-radius:var(--r-full);border:1px solid var(--outline);color:var(--on-surface-variant);font-size:.78rem;font-weight:700;transition:.2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.catSection{padding-block:clamp(46px,5vw,74px);scroll-margin-top:90px}
.catHead{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--outline)}
.catHead img{width:78px;height:auto;flex:none}
.catHead h2{margin:0;max-width:30ch}
.catHead .eye{margin-bottom:6px}
.cardMedia{display:block;margin:-28px -28px 20px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--surface-frame)}
.cardMedia img{width:100%;height:100%;object-fit:cover;display:block}
.post h3 a{display:block}
.post h3 a:hover{color:var(--accent)}
.postFoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.readTime{color:var(--on-surface-variant);font-size:.72rem;white-space:nowrap}
.article h1{max-width:26ch}
.article .artHero+.section{padding-top:clamp(20px,2.5vw,38px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.76rem;color:var(--on-surface-variant);margin-bottom:8px}
.breadcrumb a{color:var(--accent)}
.breadcrumb a:hover{text-decoration:underline}
.leadFigure,.motionFigure{margin:0 0 28px;max-width:70ch}
.motionFigure{margin-block:32px}
.leadFigure img,.motionFigure img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--outline)}
.motionFigure img{background:var(--surface-card)}
.leadFigure figcaption,.motionFigure figcaption{margin-top:10px;font-size:.78rem;color:var(--on-surface-variant);line-height:1.6}
.articleFooter{margin-block:34px;padding-top:26px;border-top:1px solid var(--outline)}
.articleFooter>strong{font-size:.8rem;color:var(--on-surface-variant);letter-spacing:.06em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.tag{padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--outline);color:var(--on-surface-body);font-size:.74rem}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:.8rem;color:var(--on-surface-variant)}
.share a{padding:6px 14px;border-radius:var(--r-full);border:1px solid var(--outline-strong);color:var(--accent);font-weight:700;font-size:.78rem}
.share a:hover{background:var(--accent-soft)}
.articleCta{margin-block:38px;min-height:0}
.articleCta h3{margin-bottom:10px}
.articleCta .row{margin-top:22px}
.backLink{margin-top:10px}
.prose h2{margin-top:44px;margin-bottom:16px;font-size:var(--text-title);max-width:34ch;color:var(--on-surface)}
.prose h3{margin-top:30px;margin-bottom:12px;color:var(--on-surface)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose strong{color:var(--on-surface-emphasis);font-weight:700}
.prose ul,.prose ol{margin:0 0 20px;padding-inline-start:24px;max-width:70ch;color:var(--on-surface-body);font-size:1.01rem;line-height:1.8}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--accent)}
.statBox{display:flex;flex-direction:column;gap:6px;margin:26px 0;padding:20px 24px;max-width:70ch;border-inline-start:3px solid var(--accent);border-radius:var(--r)}
.statBox b{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--accent);line-height:1.1}
.statBox span{color:var(--on-surface-variant);font-size:.86rem;line-height:1.55}
.note{display:block;margin:26px 0;padding:18px 22px;max-width:70ch;border-color:var(--glass-stroke-active);border-radius:var(--r)}
.note p{margin:0;color:var(--on-surface-body);font-size:.96rem;line-height:1.75}
.tableWrap{margin:26px 0;max-width:100%;overflow-x:auto;border-radius:var(--r)}
.tableWrap table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.tableWrap th,.tableWrap td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--outline);vertical-align:top}
.tableWrap thead th{color:var(--accent);font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:var(--accent-soft)}
.tableWrap td{color:var(--on-surface-body);line-height:1.65}
.tableWrap tbody tr:last-child td{border-bottom:0}
.prose blockquote{margin:26px 0;padding:18px 24px;max-width:70ch;border-inline-start:3px solid var(--violet);background:var(--violet-soft);border-radius:0 var(--r) var(--r) 0}
.prose blockquote cite{display:block;margin-top:10px;color:var(--on-surface-variant);font-size:.8rem;font-style:normal}
.faq{margin-block:46px;padding-top:34px;border-top:1px solid var(--outline)}
.faq h2{margin-bottom:22px}
.faqItem{padding-block:18px;border-bottom:1px solid var(--outline)}
.faqItem h3{margin-bottom:9px;font-size:1.02rem;color:var(--on-surface)}
.faqItem p{margin:0;color:var(--on-surface-body);font-size:.96rem;line-height:1.75;max-width:70ch}
[dir=rtl] .prose blockquote{border-radius:var(--r) 0 0 var(--r)}

/* Architecture: macro diagram and the layer cards it indexes */
.diagram{margin:0}
.diagram img{width:100%;height:auto;display:block;border-radius:var(--r-lg);border:1px solid var(--glass-stroke)}
.diagram figcaption{margin-top:12px;font-size:.8rem;color:var(--on-surface-variant);line-height:1.6}
.layerList{display:grid;gap:18px}
.layerCard{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(20px,3vw,40px);align-items:center;min-height:0;padding:22px}
.layerArt img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--glass-stroke)}
.layerBody h3{margin-bottom:10px;font-size:clamp(1.12rem,1.9vw,1.45rem)}
.layerBody .lead{margin-bottom:12px;font-size:1rem;max-width:60ch}
.layerBody>p:last-of-type{margin-bottom:0}
.layerBody .capGrid{margin:18px 0 0}
.layerBody .cap{padding:11px 14px}
.layerBody .cap span{font-size:.88rem}
.ringTag{margin-inline-start:10px;padding:2px 10px;border-radius:var(--r-full);border:1px solid var(--outline);color:var(--on-surface-variant);font-size:.6rem;letter-spacing:.08em}
.architecture .grid.three .card ul{margin:14px 0 0;padding-inline-start:20px;color:var(--on-surface-body);font-size:.92rem;line-height:1.8}
.architecture .grid.three .card li::marker{color:var(--accent)}
@media(max-width:900px){.layerCard{grid-template-columns:1fr}.layerBody .capGrid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────────────────────
   Page-turning catalogue. The site ships zero executable JavaScript, so the book
   is a radio group: one state per page, sibling selectors decide which pages have
   already been turned, and a 3D rotation about the spine does the turning. Each
   page carries its own turn targets, so arming a control needs no per-state rule —
   only the page on top of the stack accepts pointer events. Arrow keys move
   between radios natively, which is the whole keyboard story. The spine follows
   the catalogue's own direction: right-bound for a Persian document, left-bound
   for a Latin one, which is the single --flip-turn swap below.
   ───────────────────────────────────────────────────────────────────────────── */
.flip{position:relative;max-width:1040px;margin-inline:auto}
/* The spine follows the catalogue, not the page around it: a Persian document stays
   right-bound inside the English shell, while the chips and running title below keep
   the reading direction of the page they sit on. */
.flipBook{--flip-turn:180deg}
.flipBook[dir=ltr]{--flip-turn:-180deg}
/* Kept in the layout and focusable: a display:none radio is unreachable by keyboard. */
.flipState{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
/* Clipped to the covers: past ninety degrees a turning leaf sweeps beyond the spine,
   and unclipped it would paint outside the book and widen the page. */
.flipBook{position:relative;aspect-ratio:1750/1237;overflow:hidden;border-radius:var(--r);border:1px solid var(--glass-stroke);background:var(--surface-frame);box-shadow:0 26px 60px -26px var(--shadow-deep);perspective:2800px;perspective-origin:50% 42%}
.flipPage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--flip,0deg));z-index:calc(100 - var(--i));transition:transform .8s cubic-bezier(.42,0,.16,1),z-index 0s .4s}
.flipBook[dir=rtl] .flipPage{transform-origin:right center}
.flipBook[dir=ltr] .flipPage{transform-origin:left center}
.flipPage img{width:100%;height:100%;object-fit:contain;display:block;background:var(--surface-frame);backface-visibility:hidden}
/* The reverse of a turned leaf is paper, not a mirror image of its own front. Every
   face has to declare this: anything left facing double-sided shows through the
   turned leaves as a mirrored ghost on the far side of the spine. */
.flipPage:after{content:"";position:absolute;inset:0;background:var(--surface-card-soft);transform:rotateY(180deg);backface-visibility:hidden}
.fp1{--i:1}.fp2{--i:2}.fp3{--i:3}.fp4{--i:4}.fp5{--i:5}
.fp6{--i:6}.fp7{--i:7}.fp8{--i:8}.fp9{--i:9}.fp10{--i:10}
.fp11{--i:11}.fp12{--i:12}.fp13{--i:13}.fp14{--i:14}.fp15{--i:15}
.fp16{--i:16}.fp17{--i:17}.fp18{--i:18}.fp19{--i:19}.fp20{--i:20}
/* Every leaf before the selected one is already turned. The stacking order flips
   halfway through the rotation, while the leaf is edge-on and the swap is unseen. */
.fs2:checked~.flipBook .fp1,
.fs3:checked~.flipBook :is(.fp1,.fp2),
.fs4:checked~.flipBook :is(.fp1,.fp2,.fp3),
.fs5:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4),
.fs6:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5),
.fs7:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6),
.fs8:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7),
.fs9:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8),
.fs10:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9),
.fs11:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10),
.fs12:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11),
.fs13:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12),
.fs14:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13),
.fs15:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14),
.fs16:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14,.fp15),
.fs17:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14,.fp15,.fp16),
.fs18:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14,.fp15,.fp16,.fp17),
.fs19:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14,.fp15,.fp16,.fp17,.fp18),
.fs20:checked~.flipBook :is(.fp1,.fp2,.fp3,.fp4,.fp5,.fp6,.fp7,.fp8,.fp9,.fp10,.fp11,.fp12,.fp13,.fp14,.fp15,.fp16,.fp17,.fp18,.fp19){--flip:var(--flip-turn);z-index:var(--i)}
/* Turn targets: an outer edge that advances, an inner edge that goes back. */
.flipGo{position:absolute;top:0;bottom:0;width:22%;display:grid;place-items:center;cursor:pointer;pointer-events:none;backface-visibility:hidden;z-index:4}
.flipBack{inset-inline-start:0}
.flipFwd{inset-inline-end:0}
.flipGo span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--glass-stroke-active);background:var(--surface-scrim);color:var(--accent);font-size:1.5rem;line-height:1;opacity:.5;transition:opacity .2s,transform .2s}
.flipGo:hover span{opacity:1;transform:scale(1.09)}
.flipBook[dir=rtl] .flipFwd span:before{content:"\2039"}
.flipBook[dir=rtl] .flipBack span:before{content:"\203a"}
.flipBook[dir=ltr] .flipFwd span:before{content:"\203a"}
.flipBook[dir=ltr] .flipBack span:before{content:"\2039"}
.fs1:checked~.flipBook .fp1 .flipGo,.fs2:checked~.flipBook .fp2 .flipGo,
.fs3:checked~.flipBook .fp3 .flipGo,.fs4:checked~.flipBook .fp4 .flipGo,
.fs5:checked~.flipBook .fp5 .flipGo,.fs6:checked~.flipBook .fp6 .flipGo,
.fs7:checked~.flipBook .fp7 .flipGo,.fs8:checked~.flipBook .fp8 .flipGo,
.fs9:checked~.flipBook .fp9 .flipGo,.fs10:checked~.flipBook .fp10 .flipGo,
.fs11:checked~.flipBook .fp11 .flipGo,.fs12:checked~.flipBook .fp12 .flipGo,
.fs13:checked~.flipBook .fp13 .flipGo,.fs14:checked~.flipBook .fp14 .flipGo,
.fs15:checked~.flipBook .fp15 .flipGo,.fs16:checked~.flipBook .fp16 .flipGo,
.fs17:checked~.flipBook .fp17 .flipGo,.fs18:checked~.flipBook .fp18 .flipGo,
.fs19:checked~.flipBook .fp19 .flipGo,.fs20:checked~.flipBook .fp20 .flipGo{pointer-events:auto}
/* The running title of the open page, cross-faded in place. */
.flipCaps{position:relative;margin-top:20px;min-height:3.2em;text-align:center}
.flipCap{position:absolute;inset-inline:0;top:0;opacity:0;color:var(--on-surface-body);font-size:.92rem;line-height:1.6;transition:opacity .35s}
.fs1:checked~.flipCaps .fc1,.fs2:checked~.flipCaps .fc2,
.fs3:checked~.flipCaps .fc3,.fs4:checked~.flipCaps .fc4,
.fs5:checked~.flipCaps .fc5,.fs6:checked~.flipCaps .fc6,
.fs7:checked~.flipCaps .fc7,.fs8:checked~.flipCaps .fc8,
.fs9:checked~.flipCaps .fc9,.fs10:checked~.flipCaps .fc10,
.fs11:checked~.flipCaps .fc11,.fs12:checked~.flipCaps .fc12,
.fs13:checked~.flipCaps .fc13,.fs14:checked~.flipCaps .fc14,
.fs15:checked~.flipCaps .fc15,.fs16:checked~.flipCaps .fc16,
.fs17:checked~.flipCaps .fc17,.fs18:checked~.flipCaps .fc18,
.fs19:checked~.flipCaps .fc19,.fs20:checked~.flipCaps .fc20{opacity:1}
.flipBar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:8px}
.flipDots{display:flex;flex-wrap:wrap;gap:8px}
.flipDot{min-width:36px;height:36px;display:grid;place-items:center;padding:0 9px;border-radius:var(--r-sm);border:1px solid var(--outline);color:var(--on-surface-variant);font-size:.8rem;font-weight:700;cursor:pointer;transition:.18s}
.flipDot:hover{border-color:var(--outline-strong);color:var(--on-surface)}
.fs1:checked~.flipBar .fd1,.fs2:checked~.flipBar .fd2,
.fs3:checked~.flipBar .fd3,.fs4:checked~.flipBar .fd4,
.fs5:checked~.flipBar .fd5,.fs6:checked~.flipBar .fd6,
.fs7:checked~.flipBar .fd7,.fs8:checked~.flipBar .fd8,
.fs9:checked~.flipBar .fd9,.fs10:checked~.flipBar .fd10,
.fs11:checked~.flipBar .fd11,.fs12:checked~.flipBar .fd12,
.fs13:checked~.flipBar .fd13,.fs14:checked~.flipBar .fd14,
.fs15:checked~.flipBar .fd15,.fs16:checked~.flipBar .fd16,
.fs17:checked~.flipBar .fd17,.fs18:checked~.flipBar .fd18,
.fs19:checked~.flipBar .fd19,.fs20:checked~.flipBar .fd20{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
/* The radio itself is off-screen, so its focus ring has to land on its page chip. */
.fs1:focus-visible~.flipBar .fd1,.fs2:focus-visible~.flipBar .fd2,
.fs3:focus-visible~.flipBar .fd3,.fs4:focus-visible~.flipBar .fd4,
.fs5:focus-visible~.flipBar .fd5,.fs6:focus-visible~.flipBar .fd6,
.fs7:focus-visible~.flipBar .fd7,.fs8:focus-visible~.flipBar .fd8,
.fs9:focus-visible~.flipBar .fd9,.fs10:focus-visible~.flipBar .fd10,
.fs11:focus-visible~.flipBar .fd11,.fs12:focus-visible~.flipBar .fd12,
.fs13:focus-visible~.flipBar .fd13,.fs14:focus-visible~.flipBar .fd14,
.fs15:focus-visible~.flipBar .fd15,.fs16:focus-visible~.flipBar .fd16,
.fs17:focus-visible~.flipBar .fd17,.fs18:focus-visible~.flipBar .fd18,
.fs19:focus-visible~.flipBar .fd19,.fs20:focus-visible~.flipBar .fd20{outline:3px solid var(--warn);outline-offset:3px}
.flipHint{margin-top:16px;text-align:center;color:var(--on-surface-variant);font-size:.78rem;line-height:1.7}
@media(max-width:680px){.flipGo{width:30%}.flipGo span{width:38px;height:38px;font-size:1.2rem;opacity:.8}.flipBar{justify-content:center}.flipDot{min-width:30px;height:30px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.flipPage{transition:none}.flipCap{transition:none}}

/* Company identity: the footer card carried on every page, and the contact panel on
   the demo page. Both read as label/value pairs so the address, the switchboard, and
   the named direct line stay distinguishable at a glance. */
.orgCard{margin-top:20px;display:grid;gap:7px;font-style:normal;color:var(--on-surface-variant);font-size:.8rem;line-height:1.75}
.orgCard b{display:block;color:var(--on-surface);font-size:.86rem;margin-bottom:2px}
.orgCard span{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.orgCard i{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);min-width:44px}
.orgCard a{color:var(--on-surface-body)}
.orgCard a:hover{color:var(--accent)}
.contactCard{margin:44px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contactCard>div{padding:18px 20px;border:1px solid var(--glass-stroke);border-radius:var(--r);background:var(--surface-card)}
.contactCard dt{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.contactCard dd{margin:0;color:var(--on-surface-body);font-size:.94rem;line-height:1.8}
.contactCard a{color:var(--on-surface)}
.contactCard a:hover{color:var(--accent)}
@media(max-width:680px){.contactCard{grid-template-columns:1fr}.orgCard span{grid-template-columns:1fr;gap:0}}