/* ============================================================================
   Sericana — public landing · Twinkle rebuild + precision grid integration
   Hand-rolled CSS, no build step. Cache key: styles.css?v=14
   LAYOUT CONTRACT: --cell is the ONE grid knob. Container max-width, column
   widths, gaps, section paddings and card min-heights are EXACT cell
   multiples sharing the canvas-grid origin (grid-bg.js, anchored on
   [data-grid-anchor]). Verify with ?griddebug=1 after every layout change.
   ========================================================================== */

:root{
  /* ───────── precision grid: the ONE knob ───────── */
  --cell: 48px;                                   /* grid module            */
  --grid-cell: var(--cell);                       /* alias read by the JS   */
  --container-cells: 29;                          /* 29 × 48px = 1392px     */
  --gc-maxw: calc(var(--cell) * var(--container-cells));
  --gc-gutter: calc(var(--cell) / 2);             /* 24px; left edge = col 0 */
  --gc-gap-1: var(--cell);                        /*  48px                  */
  --gc-gap-2: calc(var(--cell) * 2);              /*  96px                  */
  --gc-gap-3: calc(var(--cell) * 3);              /* 144px                  */
  /* aliases consumed by the page chrome */
  --gutter: var(--gc-gutter);
  --nav-h:  calc(var(--cell) * 2);                /* 96px = 2 cells         */
  --sect-gap: var(--gc-gap-3);
  --col-right: calc(var(--cell) * 7);             /* 336px intro column     */

  /* ---------- color: surfaces ---------- */
  --bg:            #070316;
  --bg-panel:      #0D0920;
  --bg-chip:       #1C1830;
  --bg-chip-2:     #221E31;

  /* ---------- color: lines ---------- */
  --rule:          rgba(255,255,255,.08);
  --hairline:      rgba(255,255,255,.06);
  --hairline-2:    #262235;
  --border-ghost:  rgba(190,186,205,.35);
  --border-acc:    rgba(154,100,254,.65);
  --grid-line:     rgba(150,140,200,.06);

  /* ---------- color: text ---------- */
  --t-white:       #F6F7FF;
  --t-grey:        #BCB8C9;
  --t-body-hero:   #C8C4D7;
  --t-body:        #9E9AAD;
  --t-body-dim:    #807C90;   /* ≥4.5:1 on --bg (5.03:1) — WCAG 1.4.3 */
  --t-label:       #847F95;   /* ≥4.5:1 on bg/panel/input surfaces — WCAG 1.4.3 */
  --t-nav:         #B5B1C7;

  /* ---------- color: accent ---------- */
  --acc:           #9A64FE;
  --acc-hot:       #8E57FF;
  --acc-glow:      #966DFB;
  --acc-dot:       #9474E4;
  --acc-trace:     #6A55A8;
  --acc-trace-2:   #4A4656;
  --acc-icon:      #A26DFF;
  --acc-ring:      #9165FF;
  --acc-star:      #C9BFFF;

  --err:           #E5484D;   /* consumed by .slx-input.sp-bad (color-mix) */

  /* ---------- gradients & glows ---------- */
  --grad-display:  linear-gradient(180deg,#B18CFF 0%,#9361FF 55%,#5E3E9D 100%);
  --glow-node:     0 0 6px 1px rgba(150,109,251,.8);
  --glow-card:     0 0 0 1px rgba(154,100,254,.25), 0 0 28px rgba(154,100,254,.12);

  /* ---------- type ---------- */
  --font-sans:     "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, monospace;
  --fs-h1:         clamp(40px, 5.2vw, 76px);
  --fs-h1-cta:     clamp(40px, 5vw, 72px);
  --fs-h2:         clamp(30px, 3.6vw, 48px);
  --fs-display:    clamp(64px, 7.6vw, 108px);
  --fs-title:      17px;
  --fs-body:       15px;
  --fs-body-sm:    14px;
  --fs-label:      12px;
  --fs-btn:        14px;

  /* ---------- shape & motion ---------- */
  --r-card:        12px;
  --r-chip:        8px;
  --card-pad:      calc(var(--cell) / 2);          /* 24px */
  --ease:          cubic-bezier(.22, 1, .36, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --reveal-dur:    .55s;
}

/* ── base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--t-body);
  font-size:var(--fs-body); line-height:1.55; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* The ONLY page grid is the unified canvas (grid-bg.js). body's background
   propagates to the root and paints below the negative-z canvas — never give
   page-level wrappers their own opaque backgrounds. */
#sericana-grid-bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; display:block;
}
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(154,100,254,.4); color:#fff; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:2px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-48px; left:var(--gutter); z-index:200; padding:10px 16px;
  background:#6D28D9; color:#fff; font-size:13px; border-radius:0 0 6px 6px;
  /* darker in-family violet: white text = 7.10:1 (≥4.5:1, WCAG 1.4.3) */
  transition:top .2s var(--ease);
}
.skip:focus-visible{ top:0; }

/* ── shared layout (cell-multiple rhythm) ────────────────────────────── */
.wrap{
  width:min(100% - 2*var(--gutter), var(--gc-maxw));
  /* snap to a whole number of cells so the RIGHT edge stays on a gridline
     even when a classic scrollbar shrinks the layout viewport */
  width:round(down, min(100% - 2*var(--gutter), var(--gc-maxw)), var(--cell));
  margin-inline:auto; position:relative; z-index:1;
}

.sect{ margin-top:var(--sect-gap); scroll-margin-top:calc(var(--nav-h) + 12px); }
.sect-top{
  display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--rule); padding-top:14px;
  /* rhythm quantization: the label row occupies EXACTLY one cell (border +
     padding + line ≈ 33.6px naturally), so .head-row starts on a gridline */
  min-height:var(--cell);
}
.label{
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--t-label);
}
.index{
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em;
  color:var(--t-label);
}
.head-row{
  display:grid; grid-template-columns:minmax(0,1fr) var(--col-right);
  column-gap:var(--gc-gap-1); align-items:start;
  margin-top:var(--gc-gap-2);
}
.h2{
  font-size:var(--fs-h2); font-weight:450; line-height:1.13; letter-spacing:0;
  text-transform:uppercase; color:var(--t-white);
}
.lm{ display:block; overflow:hidden; }
.lw{ display:block; }
.tw-b{ color:var(--t-grey); }
.intro{
  font-size:var(--fs-body); line-height:1.55; color:var(--t-body-dim);
  padding-top:var(--cell);   /* one cell (was fluid 34–56px) — keeps every
                                head-row total under the 3-cell quantum */
}
/* rhythm quantization (desktop layouts only): heading/intro blocks round up
   to whole cells so everything that follows them starts on a gridline.
   Verified ≤144px tall at 981–1905px in BOTH languages (max 141px, comp). */
@media (min-width:981px){
  .head-row{ min-height:calc(var(--cell) * 3); }            /* 144px */
  .h1{ height:calc(var(--cell) * 5); }   /* 240px box; 3 lines ≈ 240.3–244px
        overflow invisibly into the flex spacer below — glyphs never clip */
}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — .btn-pop base behavior + skins + .btn-glass liquid skin
   ════════════════════════════════════════════════════════════════════ */
.btn-pop{
  --pop-dur:  .7s;
  --pop-ease: cubic-bezier(0.175, 0.885, 0.32, 2.2);
  --pop-px:   1.5rem;   --pop-py:   .75rem;
  --pop-px-h: 1.75rem;  --pop-py-h: .875rem;
  --pop-r:    1.5rem;   --pop-r-h:  2rem;

  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--pop-py) var(--pop-px);
  border-radius: var(--pop-r);
  border:1px solid transparent; background:none; cursor:pointer;
  font: 500 var(--fs-btn)/1 var(--font-sans);
  color: var(--t-white);
  text-decoration:none; user-select:none; white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    padding        var(--pop-dur) var(--pop-ease),
    border-radius  var(--pop-dur) var(--pop-ease),
    transform      var(--pop-dur) var(--pop-ease),
    background-color .25s var(--ease),
    border-color     .25s var(--ease),
    box-shadow       .25s var(--ease),
    color            .25s var(--ease);
}
.btn-pop .btn-label{
  display:inline-flex; align-items:center; gap:.5em;
  transition: transform var(--pop-dur) var(--pop-ease);
  will-change: transform;
}
.btn-pop:hover,
.btn-pop:focus-visible{
  padding: var(--pop-py-h) var(--pop-px-h);
  border-radius: var(--pop-r-h);
}
.btn-pop:hover .btn-label,
.btn-pop:focus-visible .btn-label{ transform: scale(.95); }
.btn-pop:active{
  transform: translateY(1px) scale(.98);
  transition-duration:.2s;
}
.btn-pop:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
/* compact tuning for nav-height contexts */
.btn-nav{ --pop-px:1.1rem; --pop-py:.6rem; --pop-px-h:1.3rem; --pop-py-h:.7rem;
          --pop-r:1.1rem; --pop-r-h:1.5rem; }

/* .btn-glass — layered liquid-glass skin (add ON TOP of .btn-pop) */
.btn-glass{
  position:relative; isolation:isolate;
  background:transparent;
  box-shadow:
    inset  2px  2px 1px     rgba(255,255,255,.18),
    inset -1px -1px 1px 1px rgba(255,255,255,.12),
    0 8px 24px rgba(7,3,22,.45),
    0 0 24px  rgba(154,100,254,.14);
}
.btn-glass::before{
  content:""; position:absolute; inset:0; z-index:-2;
  border-radius:inherit;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.btn-glass::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background: rgba(124,58,237,.12);
  transition: background-color .25s var(--ease);
}
.btn-glass:hover::after,
.btn-glass:focus-visible::after{ background: rgba(124,58,237,.18); }
/* SVG distortion only where it won't break (WebKit excluded → plain blur) */
@supports (filter: url(#glass-distortion)) and (not (-webkit-hyphens: none)){
  .btn-glass::before{ filter: url(#glass-distortion); }
}
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  .btn-glass::before{ background: rgba(13,9,32,.72); }
}

/* color skins */
.btn-primary{ background: var(--acc); color:#fff; font-weight:600; }
.btn-primary:hover,
.btn-primary:focus-visible{ background: var(--acc-hot); }
.btn-glass.btn-primary{ background:transparent; }
.btn-glass.btn-primary::after{ background: rgba(124,58,237,.55); }
.btn-glass.btn-primary:hover::after,
.btn-glass.btn-primary:focus-visible::after{ background: rgba(124,58,237,.7); }
.btn-ghost{
  border-color:var(--border-ghost);
  color: var(--t-nav); background:transparent;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{ border-color: rgba(246,247,255,.6); color: var(--t-white); }
.btn-outline-acc{
  border-color:var(--border-acc);
  color: var(--t-white); background:transparent;
}
.btn-outline-acc:hover,
.btn-outline-acc:focus-visible{ border-color: var(--acc); }
.btn-block{ width:100%; }
.btn-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.linklike{
  color:var(--t-white); text-decoration:underline; text-underline-offset:3px;
  padding:0; transition:color .16s;
}
.linklike:hover{ color:var(--acc-star); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:80; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .25s var(--ease), backdrop-filter .25s var(--ease);
}
.nav-inner{
  width:min(100% - 2*var(--gutter), var(--gc-maxw));
  width:round(down, min(100% - 2*var(--gutter), var(--gc-maxw)), var(--cell));
  margin-inline:auto;
  display:flex; align-items:center; gap:18px;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.brand{ display:inline-flex; align-items:center; gap:8px; flex:none; }
.brand .logo{ width:28px; height:28px; }
.brand-word{
  font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--t-white);
}
.nav-right{ display:flex; align-items:center; gap:12px; margin-left:auto; flex:none; }

/* expandable tabs (xtabs) — nav links + language switcher */
.xtabs{
  display:inline-flex; align-items:center; gap:4px; padding:4px;
  background:var(--bg-panel);
  border:1px solid var(--rule);
  border-radius:16px;
  font-family:var(--font-sans);
}
.nav-tabs{ margin-inline:auto; }
.xtab{
  display:inline-flex; align-items:center; gap:0; padding:.5rem;
  border:0; border-radius:var(--r-card);
  background:transparent; color:var(--t-nav);
  font:500 var(--fs-btn)/1 var(--font-sans);
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* asymmetric motion: base (= closing) is FAST — dismissal is a side
     effect of clicking elsewhere; the label fades out in 150ms before the
     overflow clip can chop opaque letters. The slow deliberate set lives
     on .open (the transition that applies is the destination state's). */
  transition:
    gap        .35s var(--ease),
    padding    .35s var(--ease),
    background-color .2s ease, color .2s ease;
}
.xtab svg{ flex:0 0 auto; display:block; }
.xtab-label{
  display:inline-block; white-space:nowrap; overflow:hidden;
  max-width:0; opacity:0;
  transition:
    max-width .35s var(--ease),
    opacity   .15s ease;
}
.xtab.open{
  gap:.5rem; padding:.5rem 1rem;
  transition:
    gap        .6s var(--ease) .1s,
    padding    .6s var(--ease) .1s,
    background-color .2s ease, color .2s ease;
}
.xtab.open .xtab-label{
  max-width:var(--xw,200px); opacity:1;
  transition:
    max-width .6s var(--ease) .1s,
    opacity   .4s ease .18s;
}
.xtab.active, .xtab.on{
  background:var(--bg-chip-2);
  color:#A682FF;   /* lighter accent for this state only: 5.59:1 on #221E31 */
}
@media (hover:hover){
  .xtab:not(.active):not(.on):hover{
    background:rgba(255,255,255,.04); color:var(--t-white);
  }
}
.xtab:focus{ outline:none; }
.xtab:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}
.xtab-sep{
  flex:0 0 auto; width:1.2px; height:24px;
  background:var(--hairline-2); border-radius:1px;
}

/* legacy two-button language toggle (footer) */
.lang{ display:inline-flex; border:1px solid var(--hairline-2); border-radius:6px; overflow:hidden; }
.lang button{
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--t-label); padding:7px 9px; line-height:1;
  transition:color .16s, background .16s;
}
.lang button:hover:not(.on){ color:var(--t-white); }
.lang button.on{ background:var(--bg-chip); color:var(--t-white); }

/* ── status badges (.sb) ─────────────────────────────────────────────── */
.sb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  user-select:none;
}
.sb--default{ --sb-acc:var(--acc); --sb-acc-dim:rgba(154,100,254,.45); }
.sb--success{ --sb-acc:#34D399;    --sb-acc-dim:rgba(52,211,153,.45); }
.sb--error  { --sb-acc:#F87171;    --sb-acc-dim:rgba(248,113,113,.45); } /* reserved variant — no current usage */
.sb__seg{ display:inline-flex; align-items:center; gap:7px; }
.sb__label{ font-weight:500; color:var(--t-white); }
.sb__label--muted{ font-weight:400; color:var(--t-body); }
.sb__divider{
  width:1px; height:16px; flex:none;
  background:var(--hairline-2);
}
.sb__icon{
  width:13px; height:13px; flex:none;
  color:var(--sb-acc);
  filter:drop-shadow(0 0 4px var(--sb-acc-dim));
}
.sb__dot{
  position:relative;
  width:7px; height:7px; flex:none;
  border-radius:50%;
  background:var(--sb-acc);
  box-shadow:0 0 6px 1px var(--sb-acc-dim);
}
/* pulse ring on a compositor-friendly pseudo (transform/opacity only) —
   animating box-shadow on the dot itself cost ~40ms/s of main thread */
.sb__dot--pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 2px var(--sb-acc-dim);
  opacity:0;
  animation:sb-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes sb-pulse{
  0%   { transform:scale(1);   opacity:.9; }
  70%  { transform:scale(2.7); opacity:0; }
  100% { transform:scale(2.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .sb__dot--pulse::after{ animation:none; }
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  /* quantize the fold: round DOWN to whole cells so the hero's bottom edge
     (and everything stacked up from it) sits on a gridline at any vh */
  min-height:round(down, calc(100svh - var(--nav-h)), var(--cell));
  display:flex; flex-direction:column;
}
.hero .wrap{
  flex:1; display:flex; flex-direction:column;
  padding-bottom:var(--cell);
}
.hero-badge{ margin-top:var(--cell); align-self:flex-start; }
.h1{
  /* badge block = 28px pill (.sb height) + 68px = exactly 2 cells,
     so the H1's top edge lands on the next gridline */
  margin-top:calc(var(--cell) * 2 - 28px);
  font-size:var(--fs-h1); font-weight:500; line-height:1.07; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--t-white); max-width:100%;
}
.hero-spacer{ flex:1; min-height:0; }
.hero-cta{
  margin-left:auto;
  width:calc(var(--cell) * 9); max-width:100%;
  margin-bottom:var(--cell);
  /* 4-cell block, content hugs its bottom (it was spacer-bottom-anchored
     anyway) → the block's top edge stays on a gridline */
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:calc(var(--cell) * 4);
}
.hero-cta p{ color:var(--t-body-hero); line-height:1.5; margin-bottom:20px; }
.strip-caption{
  display:flex; align-items:center;
  min-height:var(--cell); margin-bottom:0;   /* one-cell band (was 18.6px + 18px) */
}

/* rotating heading (rh) */
.rh-sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.rh-visual{ display:block; }
.rh-slot{
  display:inline-grid;
  overflow:hidden;
  vertical-align:bottom;
  line-height:1.18;
  margin-block:-.055em;
  /* JS sizes the slot to the CURRENT word so the static "." hugs it;
     the width morph is disabled under prefers-reduced-motion (global).
     .45s: lands the trailing "." within ~150ms of the .58s word travel —
     one beat, not two. (Width is a layout prop: NEVER spring/overshoot it.) */
  transition:width .45s var(--ease);
}
.rh-word{
  grid-area:1 / 1;
  justify-self:start;
  white-space:nowrap;
  background:var(--grad-display);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:translateY(150%);
  opacity:0;
  /* ~5.5% overshoot (≈7px at hero size) — a readable spring, not a wiggle */
  transition:transform .58s cubic-bezier(.30, 1.42, .42, 1), opacity .38s ease;
}
.rh-word.is-in  { transform:translateY(0);      opacity:1; }
.rh-word.is-up  { transform:translateY(-150%);  opacity:0; }
.rh-word.is-down{ transform:translateY(150%);   opacity:0; }
@media (prefers-reduced-motion: reduce){
  .rh-word{ transition:none; }
}

/* ecosystem marquee */
.marquee{
  position:relative; z-index:1; overflow:hidden;
  height:var(--cell);                        /* one-cell band (rows centered) */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-track{ display:flex; width:max-content; height:100%; }
.mq-set{
  display:flex; align-items:center; gap:6.5vw; padding-right:6.5vw; height:100%;
}
.mq-set span{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:16px; line-height:22px;
  letter-spacing:.1em; color:var(--t-white); white-space:nowrap;
  opacity:var(--o, 1);
}
.mq-set span:nth-child(3n+2){ --o:.45; }
.mq-set span:nth-child(3n){ --o:.15; }
.mq-i{ width:11px; height:11px; fill:var(--acc-dot); flex:none; }

/* first section snugs to the fold */
#capabilitati{ margin-top:var(--gc-gap-2); }

/* ── (01) bento — capabilities ───────────────────────────────────────── */
.bento{
  display:grid; gap:var(--gc-gap-1);
  margin-top:var(--gc-gap-2);
}
.bento + .bento{ margin-top:var(--gc-gap-1); }
.bento-2{ grid-template-columns:repeat(2, 1fr); }      /* 14 + 1 + 14 = 29 */
.bento-3{ grid-template-columns:repeat(3, 1fr); }      /* 9+1+9+1+9  = 29 */
.cell{
  position:relative; display:flex; flex-direction:column;
  /* opaque panel fill (reference parity): the grid canvas, plus markers and
     stars stay BETWEEN panels, never inside them. Fill only — no box moves. */
  background:var(--bg-panel); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:var(--card-pad); overflow:hidden;
}
.bento-2 .cell{ min-height:calc(var(--cell) * 9); }     /* 432px */
.bento-3 .cell{ min-height:calc(var(--cell) * 8); }     /* 384px */
.cell-h{ font-size:var(--fs-title); font-weight:600; color:var(--t-white); letter-spacing:-.005em; }
.cell-p{ font-size:var(--fs-body-sm); line-height:1.5; color:var(--t-body); margin-top:8px; max-width:52ch; }
.ill{ position:relative; margin-top:auto; flex:1; min-height:0; display:grid; place-items:center; }
.ill > svg{ width:100%; height:100%; max-height:230px; }
.cell-chip{ position:absolute; top:var(--card-pad); right:var(--card-pad); }
.cell-display .numdisp{
  margin-top:auto;
  font-size:var(--fs-display); font-weight:800; letter-spacing:-.02em; line-height:1;
  /* local gradient: hotter lavender top stop = glossy highlight (reference);
     --grad-display itself stays untouched for its other consumers */
  background:linear-gradient(180deg,#C9B2FF 0%,#9361FF 55%,#5E3E9D 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* italic slant via skew (webfont ships no true italic); transform = zero
     layout impact, the box and the grid under it do not move */
  transform:skewX(-6deg);
  filter:drop-shadow(0 6px 0 #241A45) drop-shadow(0 0 34px rgba(154,100,254,.4));
  padding-bottom:10px;
}
.cell-display .cell-h{ margin-top:6px; }

/* shared decorative svg classes (hub / star artboards) */
.tA{ stroke:var(--acc-trace); }
.tB{ stroke:var(--acc-trace-2); }
.dash{ fill:none; stroke-width:1; stroke-dasharray:4 6; }
.solid{ fill:none; stroke-width:1; }              /* etched-PCB primary trace */
.pad{ fill:#0B0722; stroke:#2E2845; stroke-width:1; }
.padf{ fill:#3A3252; stroke:#453C66; }            /* filled end-pad (hub)    */
.tick{ stroke:#2A2440; stroke-width:1; }
.gdot{ fill:var(--acc-glow); }

/* star + orbit (bento c2) */
.ill-star{ min-height:190px; }
.star-stage{ position:relative; width:100%; height:100%; min-height:190px; }
.star-stage > svg{ position:absolute; inset:0; width:100%; height:100%; }
.ped{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width:74%; height:34px; border-radius:50%;
  background:radial-gradient(50% 62% at 50% 50%, rgba(154,100,254,.45), rgba(154,100,254,.05) 72%, transparent);
}
.orb{ position:absolute; left:50%; top:58%; }
.orb i{
  display:block; width:5px; height:5px; border-radius:50%;
  background:var(--acc-dot); box-shadow:var(--glow-node);
}
.orb:nth-of-type(1){ left:16%; top:66%; }
.orb:nth-of-type(2){ left:54%; top:82%; }
.orb:nth-of-type(3){ left:84%; top:58%; }

/* draft chip lanes (bento c4) */
.lanes{ position:relative; width:100%; height:100%; min-height:150px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lane{ position:absolute; left:-4%; right:-4%; height:0; }
.lane::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:repeating-linear-gradient(90deg, #565066 0 5px, transparent 5px 11px);
}
.lane:nth-child(1){ top:24%; } .lane:nth-child(2){ top:52%; } .lane:nth-child(3){ top:80%; }
.lane-chips{
  position:absolute; top:0; transform:translateY(-50%);
  display:flex; gap:clamp(34px, 4vw, 58px); width:max-content;
}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  background:var(--bg-chip-2); border:1px solid #322C47; border-radius:var(--r-chip);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--acc-star);
}
.chip b{ color:var(--acc-icon); font-weight:500; }
.lane:nth-child(2) .lane-chips{ left:-10%; }
.lane:nth-child(3) .lane-chips{ left:-22%; }

/* ── (02) areas of application ───────────────────────────────────────── */
.app-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gc-gap-1);
  margin-top:var(--gc-gap-2);
}
.app-card{ min-height:calc(var(--cell) * 8); }            /* 384px — one cell
   taller than the launch 7: hosts the area illustrations (reference pairs
   every area text block with artwork). EXACTLY +1 cell, so every block
   below shifts a whole grid row — lattice alignment preserved. */
.app-k{ display:block; margin-bottom:14px; color:var(--acc-star); }
.app-chips{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px; padding:0;
}
.app-chips .chip{ font-size:11px; letter-spacing:.08em; padding:6px 12px; }
.app-note{
  margin-top:auto; padding-top:18px;
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.06em; text-transform:uppercase; color:var(--t-label);
}
/* area-card illustration: flex-absorbed like the bento .ill, with the svg
   ABSOLUTE so its intrinsic (viewBox) height adds ZERO content height —
   it only fills slack the card already has, it can never grow the box */
.app-ill{ position:relative; }
.app-ill > svg{ position:absolute; inset:0; width:100%; height:100%; max-height:none; }
.app-outro{
  margin-top:var(--gc-gap-1); text-align:center;
  font-size:var(--fs-title); color:var(--t-grey);
}

/* ── (03) compliance ─────────────────────────────────────────────────── */
.comp-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--gc-gap-1);
  margin-top:var(--gc-gap-2);
}
.comp-card{ min-height:calc(var(--cell) * 5); }           /* 240px */
.comp-card h3{
  font-size:15px; font-weight:600; color:var(--t-white); line-height:1.35;
}
.comp-card p{
  font-size:13px; line-height:1.5; color:var(--t-body); margin-top:10px;
}
.comp-num{ display:block; margin-bottom:14px; }
/* small accent glyph, top-right (absolute: zero layout impact at any width) */
.comp-ic{
  position:absolute; top:var(--card-pad); right:var(--card-pad);
  width:18px; height:18px; color:var(--acc-icon);
  filter:drop-shadow(0 0 5px rgba(154,100,254,.4));
}
.comp-chiprow{
  display:flex; justify-content:center; margin-top:var(--gc-gap-1);
}

/* ── (04) pricing ────────────────────────────────────────────────────── */
.prc-togglewrap{
  margin-top:var(--gc-gap-1);
  display:flex; align-items:center;
  min-height:var(--cell);     /* one-cell band (toggle ≈ 42.6px, centered) →
                                 .prc-grid below starts on a gridline */
}
.prc-toggle{
  display:inline-flex; gap:4px; padding:4px;
  border:1px solid var(--hairline-2); border-radius:16px;
  background:var(--bg-panel);
}
.prc-tg{
  --pop-px:1.1rem; --pop-py:.55rem; --pop-px-h:1.25rem; --pop-py-h:.65rem;
  --pop-r:.9rem; --pop-r-h:1.2rem;
  position:relative; color:var(--t-nav); font-size:13px;
}
.prc-tg:hover{ color:var(--t-white); }
.prc-tg.on{
  color:var(--t-white); background:var(--bg-chip-2);
  box-shadow:0 0 0 1px rgba(154,100,254,.55), 0 4px 14px rgba(0,0,0,.4);
}
.prc-save{
  position:absolute; top:-11px; right:-12px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:500; line-height:1;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  padding:3px 6px; border-radius:3px; background:#6D28D9; color:#fff;
  /* darker violet fill: white text = 7.10:1 (≥4.5:1, WCAG 1.4.3) */
  pointer-events:none;
}
.prc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);     /* 9+1+9+1+9 = 29 */
  gap:var(--gc-gap-1); margin-top:var(--gc-gap-1); align-items:stretch;
}
.prc-card{
  position:relative; display:flex; flex-direction:column;
  padding:var(--card-pad); border:1px solid var(--hairline);
  border-radius:var(--r-card); background:var(--bg-panel);
}
/* lock the card family to the row grid like every other card family.
   Narrow 3-col band wraps more text (content peaks ≈ 550px) → 12 cells;
   from 1367px content ≤ 528px → 11 cells. .prc-feats flex:1 absorbs. */
@media (min-width:981px){
  .prc-card{ min-height:calc(var(--cell) * 12); }          /* 576px */
}
@media (min-width:1367px){
  .prc-card{ min-height:calc(var(--cell) * 11); }          /* 528px */
}
.prc-card.pop{
  outline:2px solid var(--acc); outline-offset:-2px;
  background:linear-gradient(180deg, rgba(154,100,254,.07),
             rgba(154,100,254,.02) 55%, rgba(154,100,254,0)) var(--bg-panel);
}
.prc-pop-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; background:#6D28D9; color:#fff;
  /* darker violet fill: white text = 7.10:1 (≥4.5:1, WCAG 1.4.3) */
}
.prc-name{ font-size:var(--fs-title); font-weight:600; color:var(--t-white); }
.prc-desc{
  margin-top:6px; font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--t-body); min-height:2.6em;
}
.prc-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px;
  margin-top:18px; min-height:76px; align-content:center;
}
.prc-amount{
  font-size:clamp(34px, 2.8vw, 42px); font-weight:700; line-height:1;
  letter-spacing:-.01em; color:var(--t-white); font-variant-numeric:tabular-nums;
}
.prc-card.pop .prc-amount{
  background:var(--grad-display); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.prc-amount-txt{ font-size:clamp(22px, 1.8vw, 26px); font-weight:600; letter-spacing:0; }
.prc-per{ font-size:14px; color:var(--t-body-dim); }
.prc-billed{
  width:100%; margin-top:8px; font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.06em; text-transform:uppercase; color:var(--t-label);
  visibility:hidden;
}
.sect-pricing[data-billing="yearly"] .prc-billed{ visibility:visible; }
.prc-card .btn-pop{ margin-top:18px; }
.prc-feats{ list-style:none; margin:22px 0 0; padding:0; flex:1; }
.prc-feats li{
  display:flex; align-items:flex-start; gap:10px; padding:7px 0;
  font-size:var(--fs-body-sm); line-height:1.5; color:var(--t-body);
}
.prc-feats li .ic{ flex:none; margin-top:3px; color:var(--acc-icon); }
@keyframes prcPop{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.prc-amount.pop-anim{ animation:prcPop .26s var(--ease) both; }
.prc-note{
  margin-top:var(--gc-gap-1);
  font-size:var(--fs-body-sm); color:var(--t-body-dim); text-align:center;
  display:flex; align-items:center; justify-content:center;
  min-height:var(--cell);     /* one-cell band → .prc-cmp lands on a gridline */
}
/* md+ comparison table */
.prc-cmp{ display:none; }
.prc-cmp-h{
  display:flex; align-items:center;
  margin-top:var(--gc-gap-2);
  height:var(--cell);         /* one-cell label band → table top on gridline */
}
.prc-table{
  width:100%; margin-top:0; border-collapse:separate; border-spacing:0;
  font-size:var(--fs-body-sm); line-height:1.5; color:var(--t-body);
}
.prc-table caption{ text-align:left; }
.prc-table thead th{
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--t-label);
  padding:14px 16px; border-bottom:1px solid var(--rule); text-align:center;
}
.prc-table thead th:first-child{ text-align:left; }
.prc-table thead th:nth-child(3){ color:var(--t-white); box-shadow:inset 0 2px 0 var(--acc); }
.prc-table tbody th, .prc-table tbody td{
  padding:13px 16px; border-bottom:1px solid var(--hairline);
}
.prc-table tbody th{ font-weight:400; text-align:left; color:var(--t-body); }
.prc-table tbody td{ text-align:center; color:var(--t-grey); font-variant-numeric:tabular-nums; }
.prc-table th:nth-child(3), .prc-table td:nth-child(3){ background:rgba(154,100,254,.05); }
@media (min-width:981px){
  .prc-cmp{ display:block; }
}

/* ── (05) access CTA panel ───────────────────────────────────────────── */
.cta6{
  display:grid; grid-template-columns:minmax(0,1fr) calc(var(--cell) * 9);
  column-gap:var(--gc-gap-1);                              /* 19+1+9 = 29 */
  margin-top:var(--gc-gap-2); padding-bottom:var(--gc-gap-1);
}
.h1-cta{
  font-size:var(--fs-h1-cta); font-weight:500; line-height:1.06; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--t-white);
}
.cta6-right{ align-self:end; padding-top:48px; }
.cta6-right p{ color:var(--t-body-hero); line-height:1.5; margin-bottom:24px; }

/* ── (06) footer + social card ───────────────────────────────────────── */
.foot{ margin-top:var(--sect-gap); padding-bottom:34px; }
.sc-card{
  --sc-ease: var(--ease);
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:32px 48px;
  padding:var(--card-pad) var(--gc-gap-1);
  margin-top:var(--gc-gap-1);
  background-color:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  font-family:var(--font-sans);
  min-height:calc(var(--cell) * 4);
}
.sc-text{ flex:1 1 320px; min-width:260px; }
.sc-label{
  margin:0 0 14px;
  font:500 var(--fs-label)/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-label);
}
.sc-title{
  margin:0 0 10px;
  font-size:clamp(22px, 2.4vw, 30px); font-weight:600; line-height:1.18;
  color:var(--t-white);
}
.sc-title .sc-dim{ color:var(--t-grey); font-weight:500; }
.sc-body{
  margin:0; max-width:46ch;
  font-size:var(--fs-body-sm); line-height:1.55;
  color:var(--t-body);
}
.sc-cluster{ display:flex; align-items:center; padding:12px 8px; min-height:118px; }
.sc-boxw{ position:relative; display:block; }
.sc-boxw:hover{ z-index:2; }
.sc-boxw + .sc-boxw{ margin-left:10px; transition:margin-left .4s var(--sc-ease); }
.sc-box{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  width:86px; height:94px;
  background:var(--bg-chip);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-card);
  text-decoration:none;
  box-shadow:0 12px 26px rgba(0,0,0,.38);
  transition:transform .4s var(--sc-ease), border-color .2s var(--sc-ease),
             box-shadow .2s var(--sc-ease);
}
.sc-box svg{ width:22px; height:22px; color:var(--acc-icon);
             transition:color .2s var(--sc-ease); }
.sc-name{
  font:500 10px/1 var(--font-mono);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-body);   /* sits on --bg-chip: t-label is marginal there */
  transition:color .2s var(--sc-ease);
}
.sc-box:focus-visible{
  outline:2px solid var(--acc); outline-offset:3px;
  border-color:var(--border-acc);
  box-shadow:var(--glow-card);
}
.sc-box:focus-visible svg{ color:var(--acc-star); }
.sc-card.sc-js .sc-text, .sc-card.sc-js .sc-boxw{ opacity:0; }
.sc-card.sc-js.in .sc-text{ animation:sc-pop .6s var(--sc-ease) both; }
.sc-card.sc-js.in .sc-boxw{ animation:sc-pop .6s var(--sc-ease) both; }
.sc-card.sc-js.in .sc-boxw:nth-child(1){ animation-delay:.2s; }
.sc-card.sc-js.in .sc-boxw:nth-child(2){ animation-delay:.4s; }
.sc-card.sc-js.in .sc-boxw:nth-child(3){ animation-delay:.6s; }
.sc-card.sc-js.in .sc-boxw:nth-child(4){ animation-delay:.8s; }
@keyframes sc-pop{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to{ opacity:1; transform:none; }
}
/* per-box hover — lift + violet glow (ACTION elements, not content cards) */
@media (hover:hover){
  .sc-cluster .sc-boxw .sc-box:hover{
    transform:translateY(-6px); transition-delay:0s;
    border-color:var(--border-acc);
    box-shadow:var(--glow-card);
  }
  .sc-box:hover svg{ color:var(--acc-star); }
  .sc-box:hover .sc-name{ color:var(--t-nav); }
}
@media (prefers-reduced-motion: reduce){
  #sericana-social-card .sc-text, #sericana-social-card .sc-boxw{
    opacity:1; animation:none; }
  #sericana-social-card .sc-boxw, #sericana-social-card .sc-box,
  #sericana-social-card .sc-box svg, #sericana-social-card .sc-name{
    transition:none; }
}
@media (max-width:560px){
  .sc-cluster{ min-height:100px; padding:10px 4px; }
  .sc-box{ width:64px; height:78px; gap:7px; }
  .sc-box svg{ width:19px; height:19px; }
  .sc-name{ font-size:9px; letter-spacing:.07em; }
}

.foot-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);     /* 9+1+9+1+9 = 29 */
  gap:var(--gc-gap-1); margin-top:var(--gc-gap-1);
}
.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot-h{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-label); margin-bottom:4px;
}
.foot-col a, .foot-col .linklike{
  font-size:var(--fs-body-sm); color:var(--t-nav); text-decoration:none;
  transition:color .16s;
}
.foot-col a:hover, .foot-col .linklike:hover{ color:var(--t-white); }
.foot-rule{ border-top:1px solid var(--rule); margin-top:var(--gc-gap-1); }
.foot-legal{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:20px;
}
.foot-legal span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--t-label); text-transform:uppercase;
}

/* back to top */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:70; width:42px; height:42px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--bg-chip); border:1px solid var(--hairline-2); color:var(--t-nav);
  font-size:15px; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), border-color .2s, color .2s;
}
.totop.show{ opacity:1; pointer-events:auto; transform:none; }
.totop:hover{ color:var(--t-white); border-color:var(--border-acc); }

/* ════════════════════════════════════════════════════════════════════
   LOGIN EXPERIENCE (.slx) — full-viewport auth overlay
   ════════════════════════════════════════════════════════════════════ */
@property --slx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

#acces.slx{
  --slx-char-dark:#2A2638;
  --slx-amber:    #DCA54C;
  --slx-char-scale: 1;
  --slx-ink:      #17131F;
  --slx-serif:    Georgia, "Times New Roman", serif;

  position: fixed; inset: 0; z-index: 9999;
  display: none;
  font-family: var(--font-sans);
  color: var(--t-white);
  background:
    radial-gradient(60% 50% at 78% 38%, rgba(154,100,254,.10), transparent 70%),
    radial-gradient(55% 45% at 22% 100%, rgba(154,100,254,.12), transparent 70%),
    var(--bg);
}
#acces.slx.is-open{ display: grid; grid-template-columns: 1fr 1fr; }
.slx .slx-brand{
  position: absolute; top: 22px; left: clamp(20px, 3.8vw, 48px);
  display: flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 500; letter-spacing: .01em; z-index: 3;
}
.slx .slx-logo-ring{ stroke: var(--acc-ring); }
.slx .slx-logo-star{ fill: var(--acc-star); }
.slx .slx-close{
  position: absolute; top: 20px; right: clamp(20px, 3.8vw, 48px);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
  color: var(--t-body); background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .2s, background .2s, transform .2s var(--ease);
}
.slx .slx-close:hover{ color: var(--t-white); background: rgba(255,255,255,.1); transform: rotate(90deg); }

/* left — characters */
.slx .slx-left{ position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.slx .slx-chars{
  display: flex; align-items: flex-end; padding: 0 24px; position: relative;
  transform: scale(var(--slx-char-scale)); transform-origin: bottom center;
}
.slx .slx-chars::after{
  content:''; position: absolute; left: 4%; right: 4%; bottom: -4px; height: 64px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(154,100,254,.22), transparent 70%);
  filter: blur(10px); z-index: -1;
}
@media (max-width: 1380px){ .slx .slx-chars{ --slx-char-scale: .85; } }
@media (max-height: 760px){ .slx .slx-chars{ --slx-char-scale: .72; } }
/* single column + characters hidden below the desktop breakpoint
   (must come AFTER the .slx-left base rule so the cascade lets it win) */
@media (max-width: 1023px){
  #acces.slx.is-open{ grid-template-columns: 1fr; }
  .slx .slx-left{ display: none; }
}
.slx .slx-char{ position: relative; transform-origin: 50% 100%; will-change: transform; flex: none; }
.slx .slx-char-violet{
  width: 180px; height: 400px; z-index: 4;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #AC7CFF 0%, var(--acc) 42%, #6F41C9 100%);
  box-shadow: inset -14px 0 28px rgba(0,0,0,.22), inset 10px 0 22px rgba(255,255,255,.07);
}
.slx .slx-char-dark{
  width: 120px; height: 310px; margin-left: -14px; z-index: 3;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #38334B 0%, var(--slx-char-dark) 60%, #201C2E 100%);
  box-shadow: inset -10px 0 22px rgba(0,0,0,.3), inset 8px 0 18px rgba(255,255,255,.04);
}
.slx .slx-char-dome-a{
  width: 240px; height: 200px; margin-left: -24px; z-index: 2;
  border-radius: 120px 120px 0 0;
  background: linear-gradient(180deg, #EFC678 0%, var(--slx-amber) 55%, #A8762F 100%);
  box-shadow: inset -16px 0 30px rgba(0,0,0,.22), inset 12px 6px 24px rgba(255,255,255,.16);
}
.slx .slx-char-dome-b{
  width: 140px; height: 230px; margin-left: -20px; z-index: 1;
  border-radius: 70px 70px 0 0;
  background: linear-gradient(180deg, #B59AF6 0%, var(--acc-dot) 55%, #6A4FBF 100%);
  box-shadow: inset -12px 0 24px rgba(0,0,0,.26), inset 8px 4px 18px rgba(255,255,255,.12);
}
.slx .slx-eye{
  position: absolute; width: 34px; height: 34px; background: #fff; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.18);
  transition: height .09s ease;
}
.slx .slx-eye-sm{ width: 26px; height: 26px; }
.slx .slx-pupil{ background: var(--slx-ink); border-radius: 50%; will-change: transform; }
.slx .slx-pupil-bare{
  position: absolute; width: 13px; height: 13px; background: var(--slx-ink);
  border-radius: 7px; will-change: transform; transition: height .09s ease;
}
.slx .slx-pupil-xs{ width: 11px; height: 11px; }
.slx .slx-blink{ height: 2px !important; }

/* right — glass card */
.slx .slx-right{
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vh, 48px) clamp(20px, 3.5vw, 56px); overflow-y: auto;
}
.slx .slx-card{
  width: min(100%, 430px); position: relative;
  padding: clamp(28px, 4vh, 40px) clamp(24px, 2.6vw, 36px);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 38%),
              rgba(13, 9, 32, .55);
  border: 1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.3),
              0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(154,100,254,.07);
}
.slx .slx-eyebrow{
  margin: 0 0 10px; font: 500 11px/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-label);
}
.slx .slx-h{
  margin: 0 0 10px; font-family: var(--slx-serif); font-weight: 500;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--t-white); outline: none;
}
.slx .slx-sub{ margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--t-body); }
.slx .slx-btn{
  width: 100%; height: 50px; margin: 0 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 600 15px var(--font-sans); color: var(--t-white);
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.28),
              0 10px 30px rgba(0,0,0,.35);
  /* pop-lite: same overshoot family as the sp-pill spring in this dialog,
     subtler than the page-side 2.2 bezier; no radius/padding morph (pills) */
  transition: background .2s, border-color .2s, box-shadow .2s, transform .45s var(--ease-spring);
}
.slx .slx-btn:hover{ transform: translateY(-1px) scale(1.015); }
.slx .slx-btn:active{ transform: scale(.98); transition-duration: .15s; }
.slx .slx-google{
  background: linear-gradient(180deg, #FFFFFF, #ECEAF6);
  color: var(--slx-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 6px rgba(124,91,214,.28),
              0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.slx .slx-google:hover{ box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(124,91,214,.38),
              0 14px 36px rgba(0,0,0,.5), 0 0 24px rgba(154,100,254,.25); }
.slx .slx-btn-ghost{ font-weight: 500; color: var(--t-body); }
.slx .slx-btn-ghost:hover{ color: var(--t-white); background: rgba(255,255,255,.09); }
.slx .slx-btn-acc{
  background: linear-gradient(180deg, var(--acc), var(--acc-hot));
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 8px rgba(0,0,0,.28),
              0 10px 30px rgba(124,91,214,.35);
}
.slx .slx-btn-acc:hover{ background: linear-gradient(180deg, var(--acc-hot), var(--acc-hot)); }
.slx .slx-btn[disabled]{ opacity: .55; cursor: progress; transform: none; }
.slx .slx-or{
  display:flex; align-items:center; gap:14px; margin:2px 0 12px;
  font: 500 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color: var(--t-label);
}
.slx .slx-or::before, .slx .slx-or::after{
  content:''; flex:1; height:1px; background: var(--hairline);
}

/* frosted pill inputs + animated conic border on focus */
.slx .slx-field{ position: relative; border-radius: 999px; margin: 0 0 12px; }
.slx .slx-field:has(textarea){ border-radius: 22px; }
.slx .slx-field::before{
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--slx-ang, 0deg),
    transparent 0%, var(--acc) 10%, var(--acc-star) 18%, transparent 32%,
    transparent 52%, rgba(154,100,254,.7) 62%, transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.slx .slx-field:focus-within::before{ opacity: 1; }
.slx .slx-input{
  width: 100%; height: 50px; padding: 0 22px; border-radius: 999px;
  font: 400 15px var(--font-sans); color: var(--t-white);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 6px 18px rgba(0,0,0,.18);
  outline: none; transition: border-color .2s, background .2s;
}
.slx .slx-input:focus{ border-color: rgba(154,100,254,.4); background: rgba(255,255,255,.06); }
.slx .slx-input::placeholder{ color: var(--t-label); }
.slx .slx-input.sp-bad{ border-color: color-mix(in srgb, var(--err) 65%, transparent); }
.slx textarea.slx-input{ height: auto; min-height: 96px; padding: 14px 22px; border-radius: 22px; resize: vertical; }
.slx .slx-select{
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239E9AAD' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 20px center;
}
.slx .slx-select option{ background: #141026; color: #F6F7FF; }

/* stepped-progress indicator (sp) — 3 × 8px dots + violet spring pill */
.slx .sp-progress{
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;                       /* dot pitch 36px → pill widths 24/60/96 */
  height: 12px;
  width: 80px;
  margin: 4px 8px 24px;
}
.slx .sp-pill{
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 24px;
  border-radius: 999px;            /* indicator, not a button */
  background: var(--acc);
  box-shadow: 0 0 12px rgba(154, 100, 254, .45);
  /* base (= stepping BACK) is a plain settle — a retreat that bounces
     reads off; the spring lives on the larger (forward) states below */
  transition: width .45s var(--ease);
  z-index: 0;
}
.slx .sp-progress[data-step="2"] .sp-pill,
.slx .sp-progress[data-step="3"] .sp-pill{ transition: width .6s var(--ease-spring); }
.slx .sp-progress[data-step="2"] .sp-pill{ width: 60px; }
.slx .sp-progress[data-step="3"] .sp-pill{ width: 96px; }
.slx .sp-dot{
  position: relative;
  z-index: 1;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc-trace-2);
  transition: background .25s var(--ease) .15s;
}
.slx .sp-progress[data-step="1"] [data-dot="1"],
.slx .sp-progress[data-step="2"] [data-dot="1"],
.slx .sp-progress[data-step="2"] [data-dot="2"],
.slx .sp-progress[data-step="3"] .sp-dot{
  background: var(--t-white);
}
.slx .sp-check{
  width: 18px; flex: 0 0 auto;
}
.slx .slx-legend{
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-label); padding: 0; margin-bottom: 14px;
}
.slx .slx-summary{ margin: 0 0 14px; }
.slx .slx-summary > div{
  display: flex; gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.slx .slx-summary dt{
  flex: 0 0 118px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-label); padding-top: 2px;
}
.slx .slx-summary dd{
  margin: 0; font-size: var(--fs-body-sm);
  color: var(--t-white); overflow-wrap: anywhere;
}

/* form bits */
.slx .slx-pane{ border: 0; margin: 0; padding: 0; min-width: 0; }
.slx .slx-pane[hidden], .slx .slx-view[hidden]{ display: none !important; }
.slx .slx-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.slx .slx-consent{
  display: flex; gap: 10px; align-items: flex-start; margin: 2px 2px 16px;
  font-size: 13px; line-height: 1.5; color: var(--t-body); cursor: pointer;
}
.slx .slx-consent input{
  width: 17px; height: 17px; margin-top: 1px; flex: none;
  accent-color: var(--acc); cursor: pointer;
}
.slx .slx-alt{ margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--t-label); }
.slx .slx-alt a{ color: var(--acc-star); text-decoration: none; border-bottom: 1px solid rgba(201,191,255,.35); }
.slx .slx-alt a:hover{ color: #fff; border-color: #fff; }
.slx .slx-linklike{
  display: block; margin: 4px auto 0; padding: 6px 10px;
  background: none; border: 0; cursor: pointer;
  font: 500 13px var(--font-sans); color: var(--t-label);
}
.slx .slx-linklike:hover{ color: var(--t-white); }
.slx .slx-status{ min-height: 18px; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--t-body); }
.slx .slx-status.err{ color: #FF7A7A; }
.slx .slx-private{
  margin: 22px 0 0; display: flex; justify-content: center;
}
/* success view */
.slx .slx-view-success{ text-align: center; }
.slx .slx-mail{ margin: 6px auto 14px; width: 88px; }
.slx .slx-mail-body{ fill: rgba(154,100,254,.10); stroke: var(--acc-star); stroke-width: 2; }
.slx .slx-mail-flap{ fill: none; stroke: var(--acc-star); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slx .slx-mail-badge{ fill: var(--acc); }
.slx .slx-check{
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 0;
}
.slx .slx-h-success{ font-size: clamp(24px, 2.4vw, 32px); }
.slx :is(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--acc); outline-offset: 2px;
}
/* slx motion (everything behind no-preference) */
@media (prefers-reduced-motion: no-preference){
  .slx.is-open{ animation: slxFade .25s ease; }
  .slx.is-open .slx-card{ animation: slxViewIn .35s var(--ease); }
  .slx .slx-view.slx-out, .slx .slx-pane.slx-out{ animation: slxViewOut .3s var(--ease) forwards; }
  .slx .slx-view.slx-in,  .slx .slx-pane.slx-in{  animation: slxViewIn  .3s var(--ease); }
  .slx .slx-field:focus-within::before{ animation: slxSpin 2.4s linear infinite; }
  .slx .slx-mail{ animation: slxPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  .slx .slx-check{ stroke-dashoffset: 22; animation: slxCheck .35s ease .32s forwards; }
  .slx .sp-check{ animation: sp-pop .4s var(--ease-spring) both; }
}
@keyframes slxFade{ from{ opacity: 0; } }
@keyframes slxViewOut{ to{ opacity: 0; transform: translateY(-20px); filter: blur(8px); } }
@keyframes slxViewIn{ from{ opacity: 0; transform: translateY(20px); filter: blur(8px); } }
@keyframes slxSpin{ to{ --slx-ang: 360deg; } }
@keyframes slxPop{ from{ transform: scale(.4); opacity: 0; } 60%{ transform: scale(1.08); } to{ transform: scale(1); } }
@keyframes slxCheck{ to{ stroke-dashoffset: 0; } }
@keyframes sp-pop{
  0%  { transform: scale(0); }
  60% { transform: scale(1.18); }
  100%{ transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION (page) — gated on .js + motion-ok
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){

  /* marquee conveyor — 48s ≈ 28px/s: calm but visibly alive within the
     first second of attention (70s read as frozen) */
  .mq-track{ animation:mq 48s linear infinite; }

  /* hero intro stagger */
  .js .hero .lw{ animation:lineUp .6s var(--ease) both; }
  .js .hero .lm:nth-child(1) .lw{ animation-delay:.08s; }
  .js .hero .lm:nth-child(2) .lw{ animation-delay:.22s; }
  .js .hero .lm:nth-child(3) .lw{ animation-delay:.36s; }
  .js .hero-badge{ animation:fadeUp .5s var(--ease) both; }
  .js .hero-cta{ animation:fadeUp .55s var(--ease) .55s both; }
  .js .hero .mq-set span{ animation:mqIn .5s var(--ease) both; }
  .js .hero .mq-set span:nth-child(1){ animation-delay:.85s; }
  .js .hero .mq-set span:nth-child(2){ animation-delay:.97s; }
  .js .hero .mq-set span:nth-child(3){ animation-delay:1.09s; }
  .js .hero .mq-set span:nth-child(4){ animation-delay:1.21s; }
  .js .hero .mq-set span:nth-child(5){ animation-delay:1.33s; }
  .js .hero .mq-set span:nth-child(6){ animation-delay:1.45s; }
  .js .hero .mq-set span:nth-child(7){ animation-delay:1.57s; }
  .js .hero .mq-set span:nth-child(8){ animation-delay:1.69s; }
  .js .hero .mq-set:last-child span{ animation-delay:1.69s; }

  /* scroll reveals: masked H2 lines, intro, generic .rev stagger */
  .js .sect .lw, .js .foot .lw{ transform:translateY(112%); transition:transform .6s var(--ease); }
  .js .sect.in .lw, .js .foot.in .lw{ transform:none; }
  .js .sect.in .lm:nth-child(2) .lw{ transition-delay:.12s; }
  .js .sect.in .lm:nth-child(3) .lw{ transition-delay:.24s; }
  .js .sect .intro{ opacity:0; transform:translateY(8px);
    transition:opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s; }
  .js .sect.in .intro{ opacity:1; transform:none; }
  .js .rev{ opacity:0; transform:translateY(14px);
    transition:opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
    transition-delay:calc(var(--d, 0) * 95ms); }
  .js .rev.in{ opacity:1; transform:none; }

  /* draft-chip drift along lanes */
  .lane:nth-child(1) .lane-chips{ animation:laneL 26s linear infinite; }
  .lane:nth-child(2) .lane-chips{ animation:laneR 32s linear infinite; }
  .lane:nth-child(3) .lane-chips{ animation:laneL 22s linear infinite; }

  /* orbit dots (the nth-of-type rule outranks the static 16/54/84% spots) */
  .orb:nth-of-type(1), .orb:nth-of-type(2), .orb:nth-of-type(3){ left:50%; top:58%; }
  .orb{ animation:orbX 9s ease-in-out infinite alternate; }
  .orb i{ animation:orbY 9s ease-in-out infinite alternate; }
  .orb:nth-of-type(2){ animation-delay:-3s; } .orb:nth-of-type(2) i{ animation-delay:-7.5s; }
  .orb:nth-of-type(3){ animation-delay:-6s; } .orb:nth-of-type(3) i{ animation-delay:-10.5s; }
  .orb:nth-of-type(1) i{ animation-delay:-4.5s; }

  /* perf: keep the ambient transform loops on the compositor, and fully
     paused while their section is offscreen (.anim-off, set per-region by
     components.js) or while the auth overlay covers the page (.auth-open
     on <html>). Pause/resume is positionally continuous — no jumps.
     NB: `.lane .lane-chips` (0,3,0) must tie the `.lane:nth-child(n)
     .lane-chips` animation shorthands above and stay AFTER them in the
     file — the shorthand resets play-state. */
  .mq-track, .lane-chips, .orb, .orb i{ will-change:transform; }
  .anim-off .mq-track, .anim-off .lane .lane-chips, .anim-off .orb, .anim-off .orb i,
  .auth-open .mq-track, .auth-open .lane .lane-chips, .auth-open .orb, .auth-open .orb i{
    animation-play-state:paused;
  }
}

/* mq/laneL/laneR travel: percentage translates force main-thread animation
   (the offset depends on the box's own max-content size — and var() refs in
   keyframes also disqualify compositing), so components.js re-declares these
   three @keyframes with measured literal px in an injected <style>
   (#sericana-anim-px), refreshed on load / fonts / resize / lang switch.
   The % versions below are the no-JS fallback — keep them identical. */
@keyframes mq{ to{ transform:translateX(-50%); } }
@keyframes mqIn{ from{ opacity:0; } }
@keyframes lineUp{ from{ transform:translateY(112%); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } }
@keyframes laneL{ to{ transform:translateY(-50%) translateX(-50%); } }
@keyframes laneR{ from{ transform:translateY(-50%) translateX(-50%); } to{ transform:translateY(-50%) translateX(0); } }
@keyframes orbX{ from{ transform:translateX(-96px); } to{ transform:translateX(96px); } }
@keyframes orbY{ from{ transform:translateY(-10px); } to{ transform:translateY(26px); } }

/* ── reduced motion: final states, no loops ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .mq-track{ animation-play-state:paused !important; }
}
/* ── reduced transparency: opaque fills instead of blur ─────────────── */
@media (prefers-reduced-transparency: reduce){
  .nav.scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
  .btn-glass::before{
    -webkit-backdrop-filter:none; backdrop-filter:none; filter:none;
    background: var(--bg-panel);
  }
  .slx .slx-card{ background: var(--bg-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .slx .slx-input, .slx .slx-btn, .slx .slx-close{ -webkit-backdrop-filter: none; backdrop-filter: none; }
  .slx .slx-input{ background: #141026; }
  .slx .slx-btn{ background: var(--bg-chip); }
  .slx .slx-google{ background: #fff; }
  .slx .slx-btn-acc{ background: var(--acc); }
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1280px){
  .comp-grid{ grid-template-columns:repeat(3, 1fr); }
  .comp-card{ min-height:calc(var(--cell) * 4); }
}
@media (max-width: 980px){
  .nav-tabs{ display:none; }
  .head-row{ grid-template-columns:1fr; row-gap:18px; }
  .intro{ padding-top:0; max-width:46ch; }
  .hero-cta{ margin-left:0; width:100%; max-width:46ch; }
  .bento-2, .bento-3{ grid-template-columns:1fr; }
  .bento-2 .cell, .bento-3 .cell{ min-height:calc(var(--cell) * 6); }
  .app-grid{ grid-template-columns:1fr; }
  .comp-grid{ grid-template-columns:1fr 1fr; }
  .prc-grid{ grid-template-columns:1fr; max-width:560px; }
  .prc-card.pop{ order:-1; }
  .cta6{ grid-template-columns:1fr; }
  .cta6-right{ align-self:start; padding-top:40px; max-width:46ch; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  :root{ --fs-h1:clamp(34px, 9.6vw, 44px); --fs-h1-cta:clamp(32px, 9vw, 42px); }
  .nav-right .btn-ghost{ display:none; }
  .hero-badge{ font-size:11px; padding:0 10px; letter-spacing:0; } /* fits 390px */
  .mq-set{ gap:9vw; padding-right:9vw; }
  .comp-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-legal{ flex-direction:column; align-items:flex-start; gap:10px; }
  .cell-display .numdisp{ font-size:clamp(54px, 17vw, 80px); }
}

/* ── mobile nav + small-viewport overflow fixes (CDP-validated) ──────────
   The 48px grid contract lives ≥981px (verified 1440/1905) — these rules
   fire only ≤560/414/360 and never touch the grid band. */
@media (max-width:560px){
  /* un-round ONLY the nav: round(down,…,48px) burned up to 47px of width,
     clipping the Cere acces / Request access CTA (worst +130px at 320 EN) */
  .nav-inner{ width:calc(100% - 2*var(--gutter)); }
  .nav-inner{ gap:12px; }
  .nav-right{ gap:10px; }
  /* lang switcher never stays expanded on mobile — identical to its
     pristine icon-only state (clicking a lang tab added .open → +42px) */
  .nav-right [data-lang-switch] .xtab.open{ gap:0; padding:.5rem; }
  .nav-right [data-lang-switch] .xtab.open .xtab-label{ max-width:0; opacity:0; }
  /* footer social card: 48px side padding + 260px min text in a 240px box
     pushed the title 69px past the border at 320 */
  .sc-card{ padding:var(--card-pad); }
  .sc-text{ min-width:0; flex-basis:220px; }
  /* RO hero badge (326px nowrap pill) clipped 46px at 320 — wrap instead */
  .hero-badge{ white-space:normal; height:auto; min-height:28px; padding:5px 10px; line-height:1.4; }
}
@media (max-width:414px){
  .brand-word{ display:none; } /* logo-only brand; <a> keeps aria-label */
}
@media (max-width:360px){
  .nav-inner{ gap:8px; }
  .nav-right{ gap:8px; }
}

/* ── touch targets ≥44px (coarse pointers only) ──────────────────────────
   Transparent hit-area pseudos: the interactive box grows, zero rendered
   pixels move — grid + inert-card rules untouched. Desktop (fine pointer)
   keeps today's exact hover zones. */
@media (pointer:coarse){
  .xtab{ position:relative; }
  .xtab::after{ content:''; position:absolute; inset:-4px; }          /* 36→44 */
  /* (.btn-nav left as-is: its two pseudo slots belong to the .btn-glass
     skin and the label is a will-change containing block; 107×35 already
     passes WCAG 2.2 AA 24px) */
  .totop::after{ content:''; position:absolute; inset:-1px; }         /* 42→44 */
  .slx-close::after{ content:''; position:absolute; inset:-2px; }     /* 40→44 */
  .slx .slx-linklike{ position:relative; }
  .slx .slx-linklike::after{ content:''; position:absolute; inset:-8px; } /* 29→45 */
  /* footer RO/EN (25px tall): clip per-button so the hit areas can escape
     the group box; adjacent areas touch, never overlap */
  .lang{ overflow:visible; }
  .lang button{ position:relative; }
  .lang button:first-child{ border-radius:5px 0 0 5px; }
  .lang button:last-child{ border-radius:0 5px 5px 0; }
  .lang button::after{ content:''; position:absolute; inset:-10px 0; } /* 25→45 */
  .lang button:first-child::after{ left:-6px; }
  .lang button:last-child::after{ right:-6px; }
}

/* ── print — gradient-clip text gets a solid fallback; chrome hidden ──── */
@media print{
  .skip, .totop, .marquee, #sericana-grid-bg{ display:none !important; }
  .rh-word:not(.is-in){ display:none; }
  .rh-word.is-in, .prc-card.pop .prc-amount, .cell-display .numdisp{
    background:none; -webkit-text-fill-color:initial; color:#333;
    filter:none; transform:none;
  }
  .cell, .prc-card, .comp-card, .app-card, .sc-card,
  .head-row, .sect-top{ break-inside:avoid; }
}

/* ════════════════════════════════════════════════════════════════════
   ⚠ CARD KILL-BLOCK — content cards are visually INERT on hover.
   Iosif's rule. PLACE LAST. Buttons/action elements keep their hover —
   these selectors never match .btn-pop / .sc-box / .xtab elements.
   ════════════════════════════════════════════════════════════════════ */
:is(.cell, .app-card, .comp-card, .prc-card, .sc-card,
    .card, .bento-card, .tile, [data-card]):hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--hairline) !important;
}
:is(.cell, .app-card, .comp-card, .prc-card, .sc-card,
    .card, .bento-card, .tile, [data-card]):hover::before,
:is(.cell, .app-card, .comp-card, .prc-card, .sc-card,
    .card, .bento-card, .tile, [data-card]):hover::after{
  transform: none !important;
  box-shadow: none !important;
}
/* the highlighted pricing tier keeps its STATIC ring on hover (outline is
   untouched by the kill-block, so hover changes nothing — still inert) */
.prc-card.pop, .prc-card.pop:hover{ outline:2px solid var(--acc); outline-offset:-2px; }

/* ════════════════════════════════════════════════════════════════════════
   REDESIGN v15 — Apple-style liquid glass on chrome + buttons + compact nav.
   Desktop-scoped (≥981px); mobile keeps the lighter perf skin defined above.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:981px){

  /* ── liquid-glass buttons: brighter specular edge, clearer refraction ─── */
  .btn-glass{
    box-shadow:
      inset 1.6px 1.6px 0.5px -0.5px rgba(255,255,255,.45),
      inset -1px -1px 1px 0.5px rgba(255,255,255,.12),
      inset 0 0 14px rgba(196,176,255,.10),
      0 10px 30px rgba(7,3,22,.55),
      0 0 28px rgba(154,100,254,.20);
  }
  .btn-glass::before{
    -webkit-backdrop-filter: blur(7px) saturate(1.7) brightness(1.06);
    backdrop-filter: blur(7px) saturate(1.7) brightness(1.06);
  }
  .btn-glass:hover,
  .btn-glass:focus-visible{
    box-shadow:
      inset 1.8px 1.8px 0.5px -0.5px rgba(255,255,255,.58),
      inset -1px -1px 1px 0.5px rgba(255,255,255,.14),
      inset 0 0 16px rgba(196,176,255,.14),
      0 12px 34px rgba(7,3,22,.6),
      0 0 38px rgba(154,100,254,.32);
  }
  /* plain ghost buttons now ride the same glass (still secondary via border) */
  .btn-glass.btn-ghost{ color:var(--t-white); border-color:rgba(246,247,255,.20); }
  .btn-glass.btn-ghost::after{ background:rgba(255,255,255,.04); }
  .btn-glass.btn-ghost:hover::after,
  .btn-glass.btn-ghost:focus-visible::after{ background:rgba(255,255,255,.08); }

  /* ── nav "bar elements": the pill GROUPS become liquid glass too ─────── */
  .xtabs{
    background:rgba(15,11,32,.55);
    border-color:rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(9px) saturate(1.5);
    backdrop-filter:blur(9px) saturate(1.5);
    box-shadow:
      inset 1px 1px 0.5px rgba(255,255,255,.16),
      inset -1px -1px 1px rgba(255,255,255,.05),
      0 6px 20px rgba(7,3,22,.40);
  }

  /* ── compact "mini" nav sizing ──────────────────────────────────────── */
  .nav-inner{ gap:14px; }
  .brand-word{ font-size:18px; }
  .btn-nav{
    --pop-px:.95rem; --pop-py:.48rem; --pop-px-h:1.15rem; --pop-py-h:.58rem;
    --pop-r:.95rem; --pop-r-h:1.25rem; font-size:13px;
  }
  .xtabs{ padding:3px; gap:3px; }
  .xtab{ padding:.42rem; }
  .xtab.open{ padding:.42rem .85rem; }
  .xtab-sep{ height:20px; }
}

/* ── hero: two-column with live console preview ─────────────────────────── */
@media (min-width:981px){
  .hero-grid{
    display:grid;
    grid-template-columns: calc(var(--cell)*16) calc(var(--cell)*12);
    column-gap: var(--cell);
    align-items:center;
    margin-top: var(--cell);
  }
  .hero-lead{ display:flex; flex-direction:column; min-width:0; }
  .hero-lead .hero-badge{ margin-top:0; }
  .hero-lead .h1{ height:auto; margin-top:24px; font-size:clamp(36px, 4vw, 64px); }
  .hero-lead .hero-cta{
    margin:30px 0 0; width:auto; max-width:calc(var(--cell)*13); min-height:0;
  }
  .hero-lead .hero-cta p{ margin-bottom:22px; }
}
@media (max-width:980px){ .hero-preview{ display:none; } }

.hero-preview{ position:relative; align-self:center; perspective:1700px; min-width:0; }
.hp-glow{
  position:absolute; inset:-16% -10% -16% -6%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 56% at 56% 42%, rgba(154,100,254,.30), transparent 72%);
  filter:blur(14px);
}
.hp-panel{
  position:relative; z-index:1; overflow:hidden;
  transform: rotateY(-17deg) rotateX(7deg) rotateZ(1.3deg) scale(1.03);
  transform-origin:62% 50%;
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  background:linear-gradient(180deg, rgba(22,17,44,.94), rgba(11,9,32,.96));
  box-shadow:
    inset 1px 1px 0.5px rgba(255,255,255,.13),
    0 30px 80px rgba(7,3,22,.7),
    0 0 0 1px rgba(154,100,254,.10);
  -webkit-mask-image: radial-gradient(150% 130% at 34% 30%, #000 46%, transparent 97%);
          mask-image: radial-gradient(150% 130% at 34% 30%, #000 46%, transparent 97%);
}
.hp-bar{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--hairline); background:rgba(255,255,255,.02);
}
.hp-dots{ display:inline-flex; gap:5px; }
.hp-dots i{ width:8px; height:8px; border-radius:50%; background:#322C47; }
.hp-title{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--t-grey); }
.hp-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; color:#7BE0A9;
}
.hp-live b{ width:6px; height:6px; border-radius:50%; background:#46D389; box-shadow:0 0 6px #46D389; }
.hp-body{ display:flex; }
.hp-side{
  display:flex; flex-direction:column; gap:14px; align-items:center;
  padding:16px 12px; border-right:1px solid var(--hairline);
}
.hp-ic{ color:var(--t-label); display:block; }
.hp-ic.on{ color:var(--acc-icon); }
.hp-main{ flex:1; padding:16px 16px 18px; min-width:0; }
.hp-metric{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--hairline); border-radius:10px;
  background:rgba(154,100,254,.05);
}
.hp-k{ display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; color:var(--t-label); }
.hp-num{
  display:block; margin-top:3px; font-size:26px; font-weight:700; line-height:1;
  background:var(--grad-display); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hp-spark{ width:108px; height:38px; flex:none; }
.hp-secrow{ display:flex; align-items:center; gap:8px; margin:16px 0 9px; }
.hp-k2{ font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--t-label); }
.hp-count{
  display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px;
  border-radius:5px; background:var(--acc); color:#fff; font-size:10px; font-weight:600;
}
.hp-ap{
  display:flex; align-items:center; gap:9px; padding:9px 11px; margin-top:7px;
  border:1px solid var(--hairline); border-radius:9px; background:var(--bg-chip);
}
.hp-ap-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.hp-ap-t{ flex:1; font-size:11.5px; color:var(--t-grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-pill{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.05em; font-weight:500;
  padding:3px 7px; border-radius:5px; white-space:nowrap;
}
.hp-pill.run{ color:#C9B6FF; background:rgba(154,100,254,.16); }
.hp-ap-dot.run{ background:var(--acc); box-shadow:0 0 6px var(--acc); }
.hp-pill.wait{ color:#F0C98A; background:rgba(214,158,60,.14); }
.hp-ap-dot.wait{ background:#D69E3C; }
.hp-pill.ok{ color:#7BE0A9; background:rgba(70,211,137,.13); }
.hp-ap-dot.ok{ background:#46D389; }

/* ── pricing: dark-gradient cards + filled-circle benefit checks ────────── */
.prc-card{
  background:
    linear-gradient(158deg, rgba(30,24,56,.62), rgba(13,9,32,.20) 48%, rgba(8,5,20,.55)),
    var(--bg-panel);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(7,3,22,.30);
}
.prc-card.pop{
  background:
    linear-gradient(158deg, rgba(154,100,254,.18), rgba(154,100,254,.03) 52%, rgba(8,5,20,.55)),
    var(--bg-panel);
}
.prc-feats li .ic{
  width:18px; height:18px; padding:3.5px; border-radius:50%; margin-top:1px;
  background:rgba(154,100,254,.16); color:var(--acc-star);
}
.prc-card.pop .prc-feats li .ic{ background:var(--acc); color:#fff; }

/* ── display cards — stacked, skewed "agent activity" accent ────────────── */
.dcards{
  display:grid; grid-template-areas:"stack"; place-items:center;
  margin:var(--gc-gap-1) auto var(--gc-gap-2); min-height:248px;
}
.dcard{
  grid-area:stack; position:relative; width:330px; height:124px; padding:15px 18px;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background:rgba(20,15,40,.66); -webkit-backdrop-filter:blur(9px) saturate(1.4);
  backdrop-filter:blur(9px) saturate(1.4);
  box-shadow:inset 1px 1px .5px rgba(255,255,255,.12), 0 20px 44px rgba(7,3,22,.50);
}
.dcard:nth-child(1){ transform:skewY(-8deg) translate(-112px,-46px); opacity:.5; }
.dcard:nth-child(2){ transform:skewY(-8deg) translate(0,0); opacity:.78; }
.dcard:nth-child(3){ transform:skewY(-8deg) translate(112px,46px); }
.dcard-top{ display:flex; align-items:center; gap:9px; }
.dcard-ic{ display:inline-grid; place-items:center; width:25px; height:25px; border-radius:7px; background:var(--acc); color:#fff; flex:none; }
.dcard-t{ font-size:15px; font-weight:600; color:var(--acc-star); }
.dcard-d{ font-size:14px; color:var(--t-grey); }
.dcard-time{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--t-label); }
@media (max-width:720px){
  .dcards{ min-height:210px; }
  .dcard{ width:280px; }
  .dcard:nth-child(1){ transform:skewY(-8deg) translate(-72px,-40px); }
  .dcard:nth-child(3){ transform:skewY(-8deg) translate(72px,40px); }
}