/* ===========================================================================
   /v2 BASE - tokens, sections, brand-ratio rings, reveals, motion.
   Design rules (Avni) - STANDING PRACTICE, carries to the dashboard work:
     RULE A - visual separation by spacing, type scale, color temperature and
              alignment. Borders/backgrounds only where genuinely needed.
     RULE B - blocks stay proportional to their content; no small text
              stretched across a huge full-width row.
     RULE C - headlines break PRETTILY. Safety net: text-wrap:balance on every
              headline, text-wrap:pretty on body leads (fixes orphans in all
              locales incl. RTL, zero markup). Where a headline has a natural
              seam (comma/period) and the balanced split clearly reads better,
              an explicit <br class="hb"> is embedded IN THE TRANSLATION VALUE
              at each locale's own seam - and .hb is display:none below 700px,
              so mobile always wraps naturally (no orphans, no lone words).
   Motion language: ONE easing (--ez) + one duration family. GPU transforms
   only, visibility-gated by v2.js, frozen under prefers-reduced-motion.
   =========================================================================== */
:root{
 --pink-a:#FF4D8D;  --pink-b:#F472B6;
 --pink:var(--pink-a); --pink2:#FF83B4; --pink-deep:#E11D74;
 --ink:#0C2233;--mut:#5B7285;--soft:#8AA1B4;
 --aqua:#06B6D4;--aqua2:#0891B2;--cyan:#22D3EE;--sky:#38BDF8;
 --mint:#34D399;--violet:#A78BFA;--amber:#F59E0B;
 --navy:#081826;--navy2:#050F18;--panel:#0E2536;--dline:#1B3346;
 --bg:#F6FAFD;--tint:#EAF3F9;--card:#fff;--line:#E2EDF4;
 --maxw:1980px;--gut:clamp(22px,4.5vw,90px);
 --ez:cubic-bezier(.22,.61,.36,1);
 /* RULE D reveal tokens - ONE set page-wide, that consistency is the elegance */
 --rv-d:.62s;                          /* arrival duration */
 --rv-ez:cubic-bezier(.22,.61,.21,1);  /* graceful decelerate-into-place */
 --rv-y:12px;                          /* in-place rise */
 --rv-x:28px;                          /* the few earned desktop side-entrances */
 --rv-step:.06s;                       /* sibling cascade step (capped ~.3s) */
 --head:"Bricolage Grotesque","Figtree","Noto Sans Hebrew","Noto Sans",sans-serif;
 --body:"Figtree","Noto Sans Hebrew","Noto Sans",system-ui,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--ink);font:16px/1.62 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.v2 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
.v2 section{position:relative;overflow:hidden;scroll-margin-top:84px}

/* buttons + shine sweep */
.v2 .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;font:700 15px/1 var(--head);padding:16px 28px;border-radius:14px;transition:transform .2s var(--ez),box-shadow .2s var(--ez),background .2s,color .2s,border-color .2s;cursor:pointer;border:0;text-align:center}
.v2 .btn-a{background:var(--aqua);color:#fff;box-shadow:0 14px 34px -12px rgba(6,182,212,.6)}
.v2 .btn-a:hover{background:var(--aqua2);transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(6,182,212,.75)}
.v2 .btn-p{background:var(--pink);color:#fff;box-shadow:0 14px 34px -12px rgba(255,77,141,.65)}
.v2 .btn-p:hover{background:var(--pink-deep);transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(255,77,141,.8)}
.v2 .btn-o{border:1.5px solid var(--line);color:var(--mut);background:#fff}
.v2 .btn-o:hover{color:var(--ink);border-color:#c6d8e4}
.v2 .btn-g{border:1.5px solid rgba(255,255,255,.24);color:#EAF6FB;background:rgba(255,255,255,.04)}
.v2 .btn-g:hover{border-color:var(--cyan);color:#fff;background:rgba(34,211,238,.08)}
.v2 .btn-a::after,.v2 .btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);transform:translateX(-140%);pointer-events:none}
.v2 .btn-a:hover::after,.v2 .btn-p:hover::after{transform:translateX(140%);transition:transform .7s var(--ez)}
[dir="rtl"] .v2 .btn-a::after,[dir="rtl"] .v2 .btn-p::after{transform:translateX(140%)}
[dir="rtl"] .v2 .btn-a:hover::after,[dir="rtl"] .v2 .btn-p:hover::after{transform:translateX(-140%)}

/* ---- BRAND-RATIO RINGS (stroke = 10.5% of diameter, like the logo mark) ---- */
.v2 .rings{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.v2 .rg{position:absolute;border-style:solid;border-radius:50%;
 --tx:0px;--ty:0px;--rtl:1;
 transform:translate3d(calc(var(--tx)*var(--rtl)),var(--ty),0);will-change:transform}
[dir="rtl"] .v2 .rg{--rtl:-1}
.v2js .v2 section.lit .rg{animation:v2ringin 1.1s var(--ez) both}
@keyframes v2ringin{from{scale:.82;opacity:0}}
@media(max-width:700px){.v2 .rg{scale:.5}.v2js .v2 section.lit .rg{animation:none}}
@media(prefers-reduced-motion:reduce){
 .v2 .rg{transform:none!important;will-change:auto}
 .v2js .v2 section.lit .rg{animation:none}
}

/* ---- RULE D: scroll-reveal choreography ----------------------------------
   Slick, not cheap; tidy, not aggressive. EVERYTHING arrives IN PLACE:
   opacity + a small rise on ONE shared curve/duration (the --rv tokens) -
   no side travel, no bounce, nothing over ~14px of movement. The ONLY
   exceptions are a few earned desktop side-entrance moments (.rl/.rr,
   >=701px only, RTL-mirrored) where the asymmetric composition genuinely
   reads better from the side. Feature cards add a hair of scale for
   presence. The gate is .v2rv, added by v2.js AT INIT, which also
   instantly reveals anything already inside the viewport - the first paint
   is never blank and nothing waits for an observer. No-JS hides nothing. */
.v2rv .v2 .reveal{opacity:0;transform:translate3d(0,var(--rv-y),0);
 transition:opacity var(--rv-d) var(--rv-ez) var(--rd,0s),transform var(--rv-d) var(--rv-ez) var(--rd,0s)}
.v2rv .v2 .pcard.reveal,.v2rv .v2 .mcpanel.reveal{transform:translate3d(0,var(--rv-y),0) scale(.985)}
@media(min-width:701px){
 .v2rv .v2 .reveal.rl{transform:translate3d(calc(-1*var(--rv-x)),0,0)}
 .v2rv .v2 .reveal.rr{transform:translate3d(var(--rv-x),0,0)}
 [dir="rtl"] .v2rv .v2 .reveal.rl{transform:translate3d(var(--rv-x),0,0)}
 [dir="rtl"] .v2rv .v2 .reveal.rr{transform:translate3d(calc(-1*var(--rv-x)),0,0)}
}
.v2rv .v2 .reveal.in{opacity:1;transform:none}
/* sibling cascade: one step token, capped at 5 - groups ripple, never wait */
.v2rv .v2 .reveal ul>li,.v2rv .v2 .reveal .cl,.v2rv .v2 .reveal .stat{opacity:0;translate:0 10px;transition:opacity .5s var(--rv-ez),translate .5s var(--rv-ez)}
.v2rv .v2 .reveal.in ul>li,.v2rv .v2 .reveal.in .cl,.v2rv .v2 .reveal.in .stat{opacity:1;translate:0 0}
.v2rv .v2 .reveal.in ul>li:nth-child(1),.v2rv .v2 .reveal.in .cl:nth-child(1),.v2rv .v2 .reveal.in .stat:nth-child(1){transition-delay:calc(var(--rv-step)*1)}
.v2rv .v2 .reveal.in ul>li:nth-child(2),.v2rv .v2 .reveal.in .cl:nth-child(2),.v2rv .v2 .reveal.in .stat:nth-child(2){transition-delay:calc(var(--rv-step)*2)}
.v2rv .v2 .reveal.in ul>li:nth-child(3),.v2rv .v2 .reveal.in .cl:nth-child(3),.v2rv .v2 .reveal.in .stat:nth-child(3){transition-delay:calc(var(--rv-step)*3)}
.v2rv .v2 .reveal.in ul>li:nth-child(4),.v2rv .v2 .reveal.in .cl:nth-child(4),.v2rv .v2 .reveal.in .stat:nth-child(4){transition-delay:calc(var(--rv-step)*4)}
.v2rv .v2 .reveal.in ul>li:nth-child(5),.v2rv .v2 .reveal.in .cl:nth-child(5),.v2rv .v2 .reveal.in .stat:nth-child(5){transition-delay:calc(var(--rv-step)*5)}
@media(prefers-reduced-motion:reduce){
 .v2rv .v2 .reveal,.v2rv .v2 .reveal ul>li,.v2rv .v2 .reveal .cl,.v2rv .v2 .reveal .stat{opacity:1;transform:none;translate:none;transition:none}
}

/* ---- RULE C typography net ----------------------------------------------
   balance on every headline class; pretty on multi-line body copy. The .hb
   hard seams (embedded per locale in the translation values) are desktop-only:
   below 700px they vanish and text-wrap handles wrapping wisely. */
.v2 .side h3,.v2 .pcard h3,.v2 .pane h4,.v2 .nmh,.v2 .prc h3,.v2 .mstep b,.v2 .readsline{text-wrap:balance}
.v2 .lead,.v2 .hero .sub,.v2 .mic,.v2 .pane .pd,.v2 .side p,.v2 .pcard p,.v2 .mstep span,.v2 .prc .for,.v2 details.q p,.v2 .nmgrid li span,.v2 .stat span{text-wrap:pretty}
/* mobile: the seam br becomes a SPACE, not display:none - hiding it glued the
   words tight (seams are authored word<br>word). content:" " lets the heading
   wrap naturally with a real space between the two parts (Avni 2026-08-17). */
@media(max-width:700px){.v2 br.hb{content:" ";display:inline;white-space:pre}}

/* section framing - PLATES (Avni 2026-08-16): every section is ONE solid
   ground with a clean edge; the boundary between two sections is always a
   visible change of ground (white <-> tint <-> dark), never margin alone and
   never a fade. No gradient seams, no edge masks, anywhere. */
.v2 .band{padding:clamp(76px,9vw,150px) 0}
.v2 .white{background:#fff}
.v2 .tint{background:var(--tint)}
.v2 .dark{background:var(--navy);color:#DCEAF3}
/* .darkg = the deep-navy close plate: SOLID (its radial colour washes were
   removed under the no-fades rule; the ring glow carries the atmosphere) */
.v2 .darkg{background:var(--navy2);color:#DCEAF3}
.v2 .light{background:var(--bg)}
.v2 .kick{font:800 12.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua2)}
.v2 .dark .kick,.v2 .darkg .kick{color:var(--cyan)}
.v2 .kick.pk{color:var(--pink-deep)}.v2 .dark .kick.pk,.v2 .darkg .kick.pk{color:var(--pink2)}
.v2 .big{font:800 clamp(2.6rem,6.4vw,6rem)/.92 var(--head);letter-spacing:-.04em;text-wrap:balance;margin-top:14px}
.v2 .dark .big,.v2 .darkg .big{color:#fff}
.v2 .lead{color:var(--mut);font-size:clamp(1.02rem,1.35vw,1.22rem);max-width:40ch;margin-top:20px;line-height:1.5}
.v2 .dark .lead,.v2 .darkg .lead{color:#9FBACD}
.v2 .center{text-align:center}
.v2 .center .lead{margin-inline:auto}

/* asymmetric editorial grid */
.v2 .edito{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,80px);align-items:start}
.v2 .edito.rev>.ecol-a{order:2}.v2 .edito.rev>.ecol-b{order:1}
@media(max-width:900px){.v2 .edito{grid-template-columns:minmax(0,1fr);gap:36px}.v2 .edito.rev>.ecol-a{order:1}.v2 .edito.rev>.ecol-b{order:2}}
.v2 .estick{position:sticky;top:96px}
@media(max-width:900px){.v2 .estick{position:static}}

/* ==== 1. HERO ============================================================= */
/* header is FIXED and transparent over the hero, so the hero carries its own
   top padding and its rings/art scroll beneath the bar */
.v2 .hero{padding:calc(70px + clamp(48px,6vw,90px)) 0 0}
.v2 .hgrid{display:grid;grid-template-columns:1.72fr .82fr;gap:clamp(28px,4vw,70px);align-items:center}
@media(max-width:960px){.v2 .hgrid{grid-template-columns:1fr;gap:40px}}
/* hero H1 tracking: base tightening + 1px of extra air (Avni 2026-08-18) */
.v2 .hero h1{font:800 clamp(2.7rem,7vw,5.6rem)/.94 var(--head);letter-spacing:calc(-.042em + 1px);color:#fff;text-wrap:balance}
.v2 .hero h1 .fl{color:var(--cyan)}
.v2 .hero h1 .fp{color:var(--pink)}
.v2 .hero .q{font:700 14.5px/1.4 var(--head);color:var(--cyan);letter-spacing:.02em;margin-bottom:20px}
.v2 .hero .sub{margin-top:26px;color:#A6C0D2;font-size:clamp(1.05rem,1.5vw,1.28rem);max-width:36ch;line-height:1.55}
.v2 .ctarow{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.v2 .mic{margin-top:18px;font-size:.85rem;color:#7C99AD;max-width:44ch}

/* ---- LIVE PROMPT BOX (the primary hero action): a glowing input that turns
   the visitor's OWN sentence into a build. Plain GET form -> works with no JS.
   The textarea + Build button share one rounded shell; on phones the button
   drops below full-width. RTL: the send glyph mirrors with the flow. */
.v2 .hprompt{margin-top:30px;display:flex;align-items:flex-end;gap:10px;max-width:540px;
 background:rgba(9,26,37,.66);border:1.5px solid rgba(34,211,238,.28);border-radius:20px;
 padding:12px 12px 12px 16px;box-shadow:0 34px 90px -46px rgba(6,182,212,.65);
 backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s}
.v2 .hprompt:focus-within{border-color:var(--cyan);box-shadow:0 34px 100px -40px rgba(34,211,238,.75)}
.v2 .hpin{flex:1;min-width:0;background:transparent;border:0;resize:none;color:#EAF6FB;
 font:500 1.06rem/1.45 var(--body);padding:8px 0;max-height:140px}
.v2 .hpin:focus{outline:0}
.v2 .hpin::placeholder{color:#5E7A90}
.v2 .hpbtn{flex:0 0 auto;gap:8px;padding-inline:20px;align-self:stretch}
.v2 .hpbtn i{font-size:.82em}
.v2 .hprow{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:16px}
.v2 .hprow .qlink{font-weight:600}
.v2 .hprow .sf{color:rgba(255,255,255,.62)}
.v2 .hprow .sf::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);display:inline-block;margin-inline-end:14px;vertical-align:middle}
@media(max-width:520px){
 .v2 .hprompt{flex-direction:column;align-items:stretch;gap:6px;padding:14px}
 .v2 .hpbtn{justify-content:center;padding-block:13px}
}
@media(prefers-reduced-motion:reduce){.v2 .hprompt{backdrop-filter:none}}

/* stats: RULE A - no boxes. Type scale + spacing + a shared hairline above. */
.v2 .stats{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,72px);margin-top:clamp(44px,5vw,64px);padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.v2 .stat b{display:block;font:800 clamp(19px,1.6vw,23px)/1.1 var(--head);color:#fff}
.v2 .stat b i{color:var(--cyan);font-weight:300;margin-inline-end:9px;font-size:.92em}
.v2 .stat:nth-child(even) b i{color:var(--pink2)}
.v2 .stat span{display:block;margin-top:5px;font-size:.87rem;color:#8FA9BC;max-width:24ch}

/* ---- the FILM (redesigned Avni 2026-08-18): WHITE files + zip DROP IN FROM
   THE TOP of the circle -> get pulled to centre -> ONE brand ring (the aqua->
   pink wide-blend, like ours) spins FAST then slowly FADES + SCALES to 0 ->
   the Yetty LOGO fades in SLOWLY while the capability chips appear ONE BY ONE
   (fast, staggered). Everything then stays ALIVE: logo + every chip drift/bob/
   rotate in place with per-element RANDOM timing so no two loops match. Less
   blue overall; the only blue is the brand ring + the aqua accent chips.
   Default (no .play) = the settled end state (logo + floating chips) - what
   no-JS/SEO/reduced-motion visitors see. RTL: --dx flips the file scatter. */
.v2 .film{position:relative;height:480px;--R:1;--dx:1;--zx0:-170px}
[dir="rtl"] .v2 .film{--dx:-1;--zx0:170px}
/* DESKTOP re-centering (Avni 2026-08-18): the settled halo sat too far right in
   its column. A FIXED px pull cannot work: the natural gap between the left
   column's edge and the film's leftmost chip swings from ~+98px at 1440 to
   ~+208px at 1920 (columns are fr-based, the halo is a fixed size), so any one
   value that reads "just past the column" at one width overlaps the column at
   1440 or sits too far right at 1920. Instead the pull is VIEWPORT-RESPONSIVE:
   derived from the measured layout so the film's leftmost chip always lands a
   constant ~25px past the column edge. gap(shift) = shift + (unshifted gap),
   and unshifted gap ~= (colGap + rightCol/2) - chipOffset which tracks the vw,
   so shift = 273px - 24vw holds ~25px clearance across 1122-1980px; clamped to
   0 below ~1122 (narrow desktop keeps its original centred halo, never pushed
   into a column it no longer fits) and to -190px on ultra-wide. Desktop only
   (single-column mobile <=960px untouched); never during the ?animv2=1 intro
   (the film is fixed-centred then). RTL mirrors to the positive value. */
@media(min-width:961px){
 html:not(.v2intro) .v2 .hfilm .film{transform:translateX(var(--film-shift,clamp(-190px,calc(273px - 24vw),0px)))}
 html[dir="rtl"]:not(.v2intro) .v2 .hfilm .film{transform:translateX(clamp(0px,calc(24vw - 273px),190px))}
}
.v2 .fl-files{position:absolute;inset:0;pointer-events:none}
.v2 .fl-file{position:absolute;left:50%;top:50%;opacity:0;display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);color:#EAF6FF;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:5px 9px;white-space:nowrap;
 --FX:calc(var(--fx)*var(--dx));--FY:var(--fy);
 transform:translate(calc(-50% + var(--FX)),calc(-50% + var(--FY)))}
.v2 .fl-file svg{width:11px;height:13px;flex:0 0 auto}
.v2 .fl-zip{position:absolute;left:50%;top:50%;margin:-36px 0 0 -23px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;pointer-events:none;transform:translate(0,-6px)}
.v2 .fl-zip svg{width:46px;height:54px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.v2 .fl-zip span{font:600 10.5px/1 var(--mono);color:#EAF6FF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);border-radius:6px;padding:3px 7px}
/* the ONE ring: the canonical Yetty brand ring - AQUA -> PINK wide blend at
   90deg, border-masked to a transparent centre. Radially asymmetric so its
   FAST spin reads clearly; it then slowly fades + scales to 0. */
.v2 .fl-ringw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none}
.v2 .fl-ring{width:122px;height:122px;border-radius:50%;border:11px solid transparent;
 background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 18%,var(--pink) 82%,var(--pink) 100%) border-box;
 -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;
 box-shadow:0 0 52px rgba(34,211,238,.32),0 0 26px rgba(255,77,141,.22)}
/* the brand finale: circle ALWAYS left of the wordmark - RTL too. The mark is
   the canonical gradient ring: AQUA -> PINK at 90deg (two colours touching in
   the middle), border-masked to a transparent centre. */
.v2 .fl-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - 8px));pointer-events:none}
.v2 .fl-logow{display:flex;direction:ltr;align-items:center;gap:12px;animation:falivelogo 7s ease-in-out infinite}
.v2 .fl-logow .fm{width:46px;height:46px;border-radius:50%;border:5px solid transparent;flex:0 0 auto;
 background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%) border-box;
 -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;
 box-shadow:0 0 40px rgba(34,211,238,.4)}
.v2 .fl-logow .fw{font:800 34px/1 var(--head);color:#fff;letter-spacing:-.02em}
/* capability chips - real links, navy glass, fa-light icons. --ax is the
   per-chip EXCLUSION-ZONE push set by v2.js (chipzone): measured per locale,
   it guarantees no chip ever enters the ring+wordmark bbox (+16px) at any
   float phase, both viewports. */
.v2 .fl-chip{position:absolute;left:50%;top:50%;--X:calc(var(--x)*var(--R) + var(--ax,0px));--Y:calc(var(--y)*var(--R));transform:translate(calc(-50% + var(--X)),calc(-50% + var(--Y)))}
/* chip tiers (Avni 2026-08-17): a few IMPORTANT capabilities are HIGHLIGHTED
   in aqua (.pa) and pink (.pk); the rest sit quietly muted; SSL is SECONDARY
   (.sec) - smaller and dimmest, never featured. */
.v2 .fl-chip .cc{--mx:3px;--my:-5px;--mr:1deg;display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--head);color:#B9CEDB;background:rgba(9,26,37,.8);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:8px 13px;white-space:nowrap;cursor:pointer;backdrop-filter:blur(4px);transition:border-color .2s,color .2s,translate .2s var(--ez);animation:falive var(--fd,5.4s) ease-in-out var(--fo,0s) infinite}
.v2 .fl-chip .cc i{color:#93A9B7;font-size:11px;font-weight:300;transition:color .2s}
.v2 .fl-chip .cc:hover,.v2 .fl-chip .cc:focus-visible{border-color:var(--cyan);color:#fff;translate:0 -3px}
.v2 .fl-chip .cc:hover i{color:var(--cyan)}
/* primary AQUA highlight */
.v2 .fl-chip.pa .cc{color:#DFF8FE;border-color:rgba(34,211,238,.5);box-shadow:0 0 22px -6px rgba(34,211,238,.5)}
.v2 .fl-chip.pa .cc i{color:var(--cyan)}
.v2 .fl-chip.pa .cc:hover{border-color:var(--cyan);color:#fff}
/* primary PINK highlight */
.v2 .fl-chip.pk .cc{border-color:rgba(255,77,141,.5);color:#FFD9E7;box-shadow:0 0 22px -6px rgba(255,77,141,.5)}
.v2 .fl-chip.pk .cc i{color:var(--pink2)}
.v2 .fl-chip.pk .cc:hover{border-color:var(--pink);color:#fff}
.v2 .fl-chip.pk .cc:hover i{color:var(--pink2)}
/* SECONDARY (SSL): smaller + dimmest */
.v2 .fl-chip.sec .cc{font-size:10.5px;padding:6px 11px;color:#6E8FA1;border-color:rgba(138,161,180,.2)}
.v2 .fl-chip.sec .cc i{color:#516F81}
.v2 .fl-chip .cc:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
/* ALIVE idle motion - per-element --mx/--my/--mr (randomised in PHP) keep every
   chip drifting/bobbing/rotating on its own varied path; no two loops match. */
@keyframes falive{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(var(--mx),calc(var(--my)*.45)) rotate(var(--mr))}45%{transform:translate(calc(var(--mx)*.25),var(--my)) rotate(0)}70%{transform:translate(calc(var(--mx)*-.7),calc(var(--my)*.55)) rotate(calc(var(--mr)*-1))}}
@keyframes falivelogo{0%,100%{transform:translate(0,0) scale(1) rotate(0)}25%{transform:translate(2px,-4px) scale(1.02) rotate(.4deg)}50%{transform:translate(0,-6px) scale(1.028) rotate(0)}75%{transform:translate(-2px,-3px) scale(1.02) rotate(-.4deg)}}
@keyframes fspinfast{to{transform:rotate(1260deg)}}
@keyframes fspin{to{transform:rotate(360deg)}}
/* sequence - only under .play (added by v2.js when the film scrolls in) */
/* 1) white files fall from the TOP, staggered, then get pulled to centre */
.play .fl-file{animation:ffdrop .62s cubic-bezier(.3,1.2,.5,1) calc(var(--fi)*.11s) both,ffsuck .5s cubic-bezier(.6,.02,.85,.6) calc(1.75s + var(--fi)*.03s) forwards}
/* 2) white zip drops from the top to centre, then absorbs into the ring */
.play .fl-zip{animation:fzdrop .6s cubic-bezier(.3,1.15,.5,1) 1.45s both,fzabsorb .45s ease 2.55s forwards}
/* 3) ONE brand ring pops, spins FAST, then slowly fades + scales to 0 */
.play .fl-ringw{display:block;animation:fringpop .45s cubic-bezier(.3,1.4,.5,1) 2.5s both,fringgo 1s ease 4.7s forwards}
.play .fl-ring{animation:fspinfast 2.2s cubic-bezier(.4,0,.5,1) 2.55s both}
/* 4) chips appear ONE BY ONE (fast, staggered) as the ring gives way */
.play .fl-chip{animation:fchip .55s cubic-bezier(.3,1.5,.45,1) both;animation-delay:calc(5.3s + var(--i)*55ms)}
/* 5) the Yetty logo fades in SLOWLY (cross-dissolve with the fading ring) */
.play .fl-logo{animation:flogoin 1.3s ease 4.9s both}
@keyframes ffdrop{0%{opacity:0;transform:translate(calc(-50% + var(--FX)),-260px) scale(.82)}30%{opacity:1}100%{opacity:1;transform:translate(calc(-50% + var(--FX)),calc(-50% + var(--FY))) scale(1)}}
@keyframes ffsuck{0%{opacity:1;transform:translate(calc(-50% + var(--FX)),calc(-50% + var(--FY))) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.12)}}
@keyframes fzdrop{0%{opacity:0;transform:translate(0,-230px) scale(.7)}45%{opacity:1}100%{opacity:1;transform:translate(0,-6px) scale(1)}}
@keyframes fzabsorb{0%{opacity:1;transform:translate(0,-6px) scale(1)}100%{opacity:0;transform:translate(0,-6px) scale(.22)}}
@keyframes fringpop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes fringgo{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes fchip{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}45%{opacity:1}100%{transform:translate(calc(-50% + var(--X)),calc(-50% + var(--Y))) scale(1);opacity:1}}
@keyframes flogoin{0%{opacity:0;transform:translate(-50%,calc(-50% - 8px)) scale(.9)}100%{opacity:1;transform:translate(-50%,calc(-50% - 8px)) scale(1)}}
@media(max-width:960px){.v2 .film{height:430px;--R:.72;--zx0:-100px}[dir="rtl"] .v2 .film{--zx0:100px}
 .v2 .fl-chip .cc{font-size:10px;padding:6px 10px}
 .v2 .fl-logow .fm{width:34px;height:34px;border-width:4px}.v2 .fl-logow .fw{font-size:26px}}
/* phone: the outer ring (r=190) must fit a 390px viewport - scale the halo
   down harder and shrink chips so nothing clips at the edges or overlaps */
@media(max-width:700px){.v2 .film{height:360px;--R:.6}
 .v2 .fl-chip{--X:calc(var(--px,var(--x))*var(--R) + var(--ax,0px))} /* phone: wide-label chips spread out */
 .v2 .fl-chip .cc{font-size:9.5px;padding:5px 9px;gap:5px}
 .v2 .fl-chip .cc i{font-size:10px}
 .v2 .fl-logow .fm{width:30px;height:30px;border-width:3.5px}.v2 .fl-logow .fw{font-size:22px}}
@media(max-width:400px){.v2 .film{--R:.55}}
@media(prefers-reduced-motion:reduce){.v2 .film,.v2 .film *{animation:none!important}.v2 .fl-ringw{display:none}}

/* ---- full-bleed logo MARQUEE (flows straight out of the hero) ----
   Bare marks, no boxes. Continuous drift; RTL reverses; reduced-motion =
   static wrapped row. Duplicated track = seamless loop. */
.v2 .marq{position:relative;z-index:2;padding:clamp(36px,4vw,56px) 0 clamp(44px,5vw,72px);overflow:hidden}
.v2 .marq .ml{font:800 11.5px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:#7C99AD;text-align:center;margin-bottom:26px}
.v2 .mtrack{display:inline-flex;gap:clamp(34px,4vw,64px);width:max-content;padding-inline-end:clamp(34px,4vw,64px);animation:marq 36s linear infinite}
.v2 .mgrp{display:inline-flex;gap:clamp(34px,4vw,64px)}
.v2 .mlg{display:inline-flex;align-items:center;gap:10px;font:700 15.5px/1 var(--head);color:rgba(255,255,255,.78);white-space:nowrap;transition:color .25s}
.v2 .mlg:hover{color:#fff}
.v2 .mlg svg{width:20px;height:20px;flex:0 0 auto}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .v2 .mtrack{animation-name:marqrtl}@keyframes marqrtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media(prefers-reduced-motion:reduce){.v2 .mtrack{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.v2 .mgrp.dup{display:none}}

/* ==== 4. THE CAPABILITY SECTION (#what, TINT plate) =======================
   The showcase design, now the page's ONE capability section: it carries all
   8 deep-platform aspects (.sw8). Head row spans the full width; below it the
   compact tab list | pane sit at MATCHED height (grid stretch + a min-height
   on the stage), so the two columns balance instead of a tall list beside a
   short floating card. */
.v2 .swhead .big{font-size:clamp(2.4rem,5.2vw,4.6rem);margin-top:0}
.v2 .swhead .lead{margin-top:16px;max-width:44ch}
.v2 .swgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,3.5vw,64px);align-items:stretch;margin-top:clamp(30px,3.6vw,50px)}
@media(max-width:900px){.v2 .swgrid{grid-template-columns:1fr;gap:26px}}
.v2 .swgrid>*{min-width:0}
.v2 .tabs{display:flex;flex-direction:column;gap:2px;justify-content:center}
.v2 .tab{display:flex;gap:13px;align-items:center;text-align:start;width:100%;background:transparent;border:0;border-inline-start:2px solid transparent;border-radius:0 12px 12px 0;padding:11px 16px;cursor:pointer;font-family:var(--body);transition:border-color .25s,background .25s}
[dir="rtl"] .v2 .tab{border-radius:12px 0 0 12px}
.v2 .tab .tn{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--soft);transition:color .25s,transform .25s var(--ez)}
.v2 .tab b{display:block;font:800 15.5px/1.25 var(--head);color:var(--mut);transition:color .25s}
.v2 .tab span{color:var(--soft);font-size:.86rem;line-height:1.35}
.v2 .tab.on{border-inline-start-color:var(--pink);background:#FFF3F8}
.v2 .tab.on .tn{color:var(--pink-deep);transform:scale(1.08)}
.v2 .tab.on b{color:var(--ink)}
.v2 .tab:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
/* stage: ONE tinted card on the white plate. Panes are GRID-STACKED in one
   cell (the card is as tall as its fullest pane, never clips) and the card
   stretches to the tab column's height, so the row reads balanced. */
.v2 .stage{position:relative;display:grid;width:100%;min-height:400px;border-radius:26px;overflow:hidden;
 background:var(--tint);box-shadow:0 30px 70px -40px rgba(12,50,75,.35);
 padding:clamp(24px,2.6vw,40px) clamp(24px,2.8vw,44px)}
.v2 .stage .sring{position:absolute;border-radius:50%;pointer-events:none}
.v2 .stage .sring.s1{width:340px;height:340px;border:36px solid rgba(6,182,212,.06);inset-inline-end:-130px;top:-130px}
.v2 .pane{grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:scale(.97);transition:opacity .45s var(--ez),transform .45s var(--ez);pointer-events:none;visibility:hidden}
.v2 .pane.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:.05s}
/* the pane's icon composition: the tab icon ghosted at inline-end (same motif
   as the coin panels) - restrained, no fake screenshots */
.v2 .pane .ghost{position:absolute;inset-inline-end:-6px;top:-10px;font-size:150px;font-weight:300;line-height:1;color:rgba(6,182,212,.09);pointer-events:none}
.v2 .phead{display:flex;gap:16px;align-items:center;margin-bottom:14px;position:relative}
.v2 .pane .dring{width:74px;height:74px;flex:0 0 auto;border-radius:50%;border:8px solid var(--aqua);display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 18px 44px -20px rgba(6,182,212,.7);font-size:26px;color:var(--aqua2)}
.v2 .pane .dring i{font-weight:300}
.v2 .pane.on .dring{animation:dpop .55s var(--ez) both}
@keyframes dpop{0%{scale:.7;opacity:0}60%{scale:1.06}100%{scale:1;opacity:1}}
.v2 .pane.on .phead div,.v2 .pane.on .pd{animation:dtx .5s var(--ez) .1s both}
.v2 .pane.on ul{animation:dtx .5s var(--ez) .18s both}
@keyframes dtx{0%{opacity:0;translate:0 10px}100%{opacity:1;translate:0 0}}
.v2 .pane h4{font:800 21px/1.15 var(--head);color:var(--ink)}
.v2 .pane .ps{color:var(--pink-deep);font:700 13px/1.35 var(--head);margin-top:3px}
.v2 .pane .pd{color:var(--mut);font-size:.96rem;line-height:1.55;margin-bottom:16px;max-width:52ch}
.v2 .pane ul{list-style:none;display:grid;gap:10px;margin:0 0 18px}
.v2 .pane li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:#2A4459;line-height:1.45}
.v2 .pane li i{flex:0 0 auto;width:20px;text-align:center;margin-top:3px;font-weight:300;font-size:14px;color:var(--aqua2)}
.v2 .pane li:nth-child(even) i{color:var(--pink-deep)}
.v2 .pane .plink{display:inline-flex;align-items:center;gap:6px;font:700 14.5px/1 var(--head);color:var(--aqua2);margin-top:auto}
@media(prefers-reduced-motion:reduce){.v2 .pane.on .dring,.v2 .pane.on .phead div,.v2 .pane.on .pd,.v2 .pane.on ul{animation:none}}
/* .sw8 - the 8-tab variant on the TINT plate: the stage card flips to WHITE
   (a tint card would sink into the tinted ground) and the tab rows tighten a
   notch so eight two-line tabs stand level with the fuller 6-item pane. */
.v2 .sw8 .tabs{gap:1px}
.v2 .sw8 .tab{padding:8px 15px}
.v2 .sw8 .tab .tn{width:32px;height:32px;font-size:17px}
.v2 .sw8 .tab b{font-size:14.5px}
.v2 .sw8 .tab span{font-size:.84rem;line-height:1.3}
.v2 .sw8 .stage{background:#fff;min-height:460px;box-shadow:0 30px 70px -40px rgba(12,50,75,.4)}
.v2 .sw8 .pane .dring{box-shadow:0 18px 44px -20px rgba(6,182,212,.55)}

/* ==== 4. TWO SIDES + NO MORE - one DARK band ==============================
   Centered title, two flat translucent side panels (aqua / pink tint, no
   gradient washes), then the "no more" strip as the band's second half. */
.v2 .coin2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(36px,5vw,56px)}
@media(max-width:860px){.v2 .coin2{grid-template-columns:1fr}}
.v2 .side{position:relative;border-radius:24px;padding:clamp(28px,3vw,40px);overflow:hidden;transition:transform .3s var(--ez);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.v2 .side:hover{transform:translateY(-4px)}
.v2 .side.you{background:rgba(6,182,212,.09)}
.v2 .side.run{background:rgba(255,77,141,.08)}
/* the one big thin anchor icon - ghosted, inline-end */
.v2 .side .ghost{position:absolute;inset-inline-end:22px;top:20px;font-size:120px;font-weight:300;color:rgba(34,211,238,.10);pointer-events:none;line-height:1}
.v2 .side.run .ghost{color:rgba(255,77,141,.10)}
.v2 .side .stag{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.v2 .side.run .stag{color:var(--pink2)}
.v2 .side h3{font:800 clamp(1.5rem,2.6vw,2rem)/1.12 var(--head);color:#fff;margin:12px 0 8px;letter-spacing:-.02em;position:relative}
.v2 .side p{color:#A6C0D2;font-size:1rem;position:relative}
.v2 .side ul{list-style:none;margin:22px 0 0;display:grid;gap:12px;position:relative}
.v2 .side li{display:flex;align-items:flex-start;gap:12px;color:#CFE0EC;font-size:.98rem;line-height:1.45}
.v2 .side li i{flex:0 0 auto;width:21px;text-align:center;margin-top:3px;color:var(--cyan);font-weight:300}
.v2 .side.run li i{color:var(--pink2)}

/* ==== 6. COMPARISON ======================================================= */
.v2 .cmpwrap{margin-top:clamp(34px,4vw,54px);overflow-x:auto;scrollbar-width:none}
.v2 .cmpwrap::-webkit-scrollbar{display:none}
.v2 table.cmp{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;
 background:rgba(7,20,29,.6);border:1px solid var(--dline);border-radius:20px;overflow:hidden}
.v2 table.cmp th,.v2 table.cmp td{padding:17px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.07)}
.v2 table.cmp tr:last-child td{border-bottom:0}
.v2 table.cmp tbody tr{transition:background .2s}
.v2 table.cmp tbody tr:hover{background:rgba(255,255,255,.03)}
.v2 table.cmp thead th{font:800 14px/1.3 var(--head);color:#BFD6E5;background:rgba(255,255,255,.03)}
.v2 table.cmp thead th.yy{color:#fff;background:var(--aqua)}
.v2 table.cmp td:first-child,.v2 table.cmp th:first-child{text-align:start;color:#DCEAF3;font-weight:600}
.v2 table.cmp td.yy{background:rgba(6,182,212,.09)}
.v2 .mk{width:22px;height:22px;display:inline-block;vertical-align:middle}
.v2 .mk.ok{color:var(--mint)}.v2 .mk.no{color:#3E5C72}.v2 .mk.pa{color:var(--amber)}
.v2 .cmp .yy .mk.ok{color:#67E8F9}
/* deep-dive comparison links - text row, RULE A */
.v2 .dives{display:flex;flex-wrap:wrap;gap:6px clamp(20px,2.5vw,34px);justify-content:center;margin-top:clamp(26px,3vw,38px);font:700 14px/1 var(--head)}
.v2 .dives a{display:inline-flex;align-items:center;gap:7px;min-height:38px;color:#9FDCEC;transition:color .2s}
.v2 .dives a i{font-weight:300;font-size:13px;color:#5E8CA3;transition:color .2s}
.v2 .dives a:hover{color:#fff}
.v2 .dives a:hover i{color:var(--cyan)}

/* ==== 7. MCP - full-bleed DARK band: terminal + steps ===================== */
.v2 .mcpanel{position:relative;color:#DCEAF3;max-width:1400px;margin-inline:auto}
.v2 .mgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.5vw,70px);align-items:center}
@media(max-width:940px){.v2 .mgrid{grid-template-columns:1fr}}
.v2 .msteps{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,3vw,38px)}
.v2 .mstep{display:flex;gap:16px;align-items:flex-start}
.v2 .mstep .mn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:4px solid var(--cyan);display:flex;align-items:center;justify-content:center;font:800 14px/1 var(--head);color:#fff}
.v2 .mstep:nth-child(2) .mn{border-color:var(--pink)}
.v2 .mstep b{display:block;font:800 16.5px/1.3 var(--head);color:#fff;margin-bottom:3px}
.v2 .mstep span{color:#9FBACD;font-size:.92rem;line-height:1.5}
.v2 .mcpanel .ctarow{margin-top:clamp(26px,3vw,36px)}
/* the terminal (ported from the live homepage's MCP scene, v2 palette) */
.v2 .chat{position:relative;display:flex;flex-direction:column;height:clamp(400px,44vw,500px);background:var(--navy2);border:1px solid rgba(34,211,238,.14);border-radius:18px;box-shadow:0 44px 100px rgba(0,0,0,.5);overflow:hidden}
.v2 .chat-h{display:flex;align-items:center;gap:7px;padding:0 16px;height:46px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06);flex:0 0 auto;direction:ltr}
.v2 .chat-h .dot{width:10px;height:10px;border-radius:50%;background:#22394B}
.v2 .chat-h .dot:nth-of-type(1){background:#E5655E}.v2 .chat-h .dot:nth-of-type(2){background:#E0A63B}.v2 .chat-h .dot:nth-of-type(3){background:#43B25C}
.v2 .chat-h .ct{margin-inline-start:8px;font:600 11.5px/1 var(--mono);color:#5E7A90;unicode-bidi:plaintext}
.v2 .chat-h .cm{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);color:var(--mint);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);border-radius:99px;padding:5px 10px;direction:ltr}
.v2 .chat-h .cm i{font-size:7px}
.v2 .chat-b{flex:1;overflow-y:auto;scrollbar-width:none;padding:16px 18px 14px;display:flex;flex-direction:column;gap:7px;direction:ltr;text-align:left;font:500 12.5px/1.7 var(--mono)}
.v2 .chat-b::-webkit-scrollbar{display:none}
.v2 .cmsg{display:flex;align-items:baseline;gap:9px;max-width:100%;opacity:0;transform:translateY(9px);animation:cin .3s ease forwards}
.v2 .cmsg .pfx{flex:0 0 auto;font-weight:700}
.v2 .cmsg .tx{min-width:0;unicode-bidi:plaintext}
.v2 .cmsg.u{color:#EAF6FB}.v2 .cmsg.u .pfx{color:#7FD6E8}
.v2 .cmsg.ai{color:#A9C3D4}.v2 .cmsg.ai .pfx{color:var(--pink2)}
.v2 .cmsg.live{color:#C8DCE8}.v2 .cmsg.live .pfx{color:var(--pink2)}
.v2 .cmsg.live b{font-weight:700;color:#67E8F9;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.v2 .cmsg.live .tx i{color:var(--mint);margin-inline-end:4px}
.v2 .ctool{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1 var(--mono);background:rgba(34,211,238,.08);color:#7FD6E8;border:1px solid rgba(34,211,238,.2);border-radius:9px;padding:7px 10px;direction:ltr;opacity:0;transform:translateY(9px);animation:cin .3s ease forwards}
.v2 .ctool .sp{width:9px;height:9px;border:1.5px solid rgba(127,214,232,.35);border-top-color:#7FD6E8;border-radius:50%;animation:cspin .7s linear infinite}
.v2 .ctool .ok{display:none;color:var(--mint);font-style:normal}
.v2 .ctool.done .sp{display:none}.v2 .ctool.done .ok{display:inline}
.v2 .ctyp{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;opacity:0;animation:cin .25s ease forwards;direction:ltr}
.v2 .ctyp:before{content:"\203A";color:var(--pink2);font:700 12.5px/1.7 var(--mono)}
.v2 .ctyp i{width:8px;height:13px;border-radius:2px;background:#7FD6E8;animation:cblink 1.05s steps(1) infinite}
.v2 .ctyp i:nth-child(2),.v2 .ctyp i:nth-child(3){display:none}
.v2 .cbuild{align-self:flex-start;border-inline-start:2px solid rgba(34,211,238,.25);padding:2px 0 2px 12px;font:600 11px/2 var(--mono);color:#8CA6B8;direction:ltr;text-align:left;min-width:200px;opacity:0;transform:translateY(9px);animation:cin .3s ease forwards}
.v2 .cbuild div{opacity:0;animation:cin .25s ease forwards}
.v2 .cbuild div i{color:var(--mint);margin-right:7px;font-size:10px}
/* typing cursor on user lines + the end-of-film replay affordance */
.v2 .ccur{display:inline-block;width:8px;height:13px;border-radius:2px;background:#7FD6E8;vertical-align:-2px;margin-inline-start:3px;animation:cblink 1.05s steps(1) infinite}
.v2 .creplay{align-self:center;margin-top:10px;display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--mono);color:#7FD6E8;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);border-radius:99px;padding:8px 13px;cursor:pointer;opacity:0;animation:cin .3s ease .25s forwards;transition:border-color .2s,color .2s}
.v2 .creplay:hover{border-color:var(--cyan);color:#fff}
.v2 .creplay i{font-size:11px}
.v2 .cend{align-self:center;text-align:center;font:600 10px/1.6 var(--mono);color:#5E7A90;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;opacity:0;animation:cin .4s ease forwards;unicode-bidi:plaintext}
[dir="rtl"] .v2 .chat-b{direction:rtl;text-align:right}
[dir="rtl"] .v2 .ctyp{direction:rtl}
[dir="rtl"] .v2 .cbuild{border-inline-start:0;border-inline-end:2px solid rgba(34,211,238,.25);padding:2px 12px 2px 0}
@keyframes cin{to{opacity:1;transform:translateY(0)}}
@keyframes cspin{to{transform:rotate(360deg)}}
@keyframes cblink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .v2 .chat-b .cmsg,.v2 .chat-b .ctool,.v2 .chat-b .cbuild,.v2 .chat-b .cbuild div,.v2 .chat-b .cend{opacity:1;transform:none;animation:none}
 .v2 .chat-b .ctool .sp{display:none}.v2 .chat-b .ctool .ok{display:inline}.v2 .ctyp{display:none}}

/* ==== 8. WHO IT IS FOR - three persona cards ==============================
   Centered head, then builders/agencies | designers | owners (step 3 merge).
   Flat tinted cards (no washes). ONE calm aqua accent; the DESIGNER card is
   the pink spark (ship + hand over, no developer in between). RULE A: the
   plate stays white; separation is spacing + the card fill, no fades. Three
   columns hold down to the 700px swipe carousel (2-col would orphan the
   third), then .vswipe (mobile CSS) takes over. */
.v2 .pplcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,54px);align-items:stretch}
.v2 .pcard{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:clamp(24px,2.2vw,32px);overflow:hidden;background:#EEF9FD;box-shadow:0 20px 50px -26px rgba(12,50,75,.3);transition:transform .3s var(--ez),box-shadow .3s var(--ez)}
.v2 .pcard:hover{transform:translateY(-5px);box-shadow:0 30px 64px -26px rgba(12,50,75,.4)}
.v2 .pcard.designer{background:#FFF1F6}
.v2 .pcard .paccent{position:absolute;width:260px;height:260px;border-radius:50%;border:27px solid rgba(6,182,212,.09);inset-inline-end:-100px;top:-100px;pointer-events:none;transition:scale .4s var(--ez)}
.v2 .pcard:hover .paccent{scale:1.08}
.v2 .pcard.designer .paccent{border-color:rgba(255,77,141,.10)}
.v2 .pcard .ptag{font:800 11.5px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--aqua2)}
.v2 .pcard.designer .ptag{color:var(--pink-deep)}
.v2 .pcard h3{font:800 clamp(1.2rem,1.5vw,1.45rem)/1.15 var(--head);margin:11px 0 9px;letter-spacing:-.02em;position:relative}
.v2 .pcard p{color:var(--mut);font-size:.94rem;line-height:1.5;position:relative}
.v2 .pcard ul{list-style:none;margin:16px 0 0;display:grid;gap:9px;position:relative}
.v2 .pcard li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:#2A4459;line-height:1.4}
.v2 .pcard li i{flex:0 0 auto;width:20px;text-align:center;margin-top:3px;color:var(--aqua2);font-weight:300}
.v2 .pcard.designer li i{color:var(--pink-deep)}
.v2 .pcard .plink{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font:700 14px/1 var(--head);color:var(--aqua2)}
.v2 .pcard .plink .a2{transition:translate .2s var(--ez)}
.v2 .pcard .plink:hover .a2{translate:4px 0}
[dir="rtl"] .v2 .pcard .plink .a2{transform:scaleX(-1)}
[dir="rtl"] .v2 .pcard .plink:hover .a2{translate:-4px 0}
.v2 .pcard.designer .plink{color:var(--pink-deep)}

/* ==== 9. PRICING - lean Free, generous Live =============================== */
.v2 .prg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
@media(max-width:700px){.v2 .prg{grid-template-columns:1fr}} /* phone: stacked, Free then Live - never a carousel */
.v2 .prc{position:relative;border-radius:24px;padding:clamp(26px,2.8vw,36px);background:rgba(255,255,255,.03);transition:transform .3s var(--ez)}
.v2 .prc:hover{transform:translateY(-4px)}
.v2 .prc.hot{border:1px solid rgba(34,211,238,.5);background:linear-gradient(180deg,rgba(6,182,212,.13),rgba(255,255,255,.02));box-shadow:0 34px 80px -34px rgba(6,182,212,.65);padding:clamp(32px,3.4vw,46px)}
.v2 .prc .pb{position:absolute;top:-13px;inset-inline-start:32px;background:var(--pink);color:#fff;font:800 11px/1 var(--head);padding:6px 13px;border-radius:99px;letter-spacing:.03em}
.v2 .prc h3{font:800 20px/1 var(--head);color:#fff}
.v2 .prc.hot h3{font-size:24px}
.v2 .prc .amt{font:800 clamp(2.4rem,3.6vw,3rem)/1 var(--head);color:#fff;margin:16px 0 2px}
.v2 .prc.hot .amt{font-size:clamp(3rem,4.6vw,4rem)}
.v2 .prc .amt small{font:600 16px/1 var(--body);color:#8FA9BC}
.v2 .prc .for{color:#8FA9BC;font-size:.9rem;margin-bottom:20px}
.v2 .prc.hot .for{color:#B9D2E0;font-size:.98rem;max-width:44ch}
.v2 .prc ul{list-style:none;margin:0 0 24px;display:grid;gap:11px}
.v2 .prc.hot ul{gap:13px}
.v2 .prc li{display:flex;align-items:flex-start;gap:11px;color:#C8DCE8;font-size:.95rem;line-height:1.45}
.v2 .prc.hot li{font-size:1rem}
.v2 .prc li i{flex:0 0 auto;width:20px;text-align:center;margin-top:3px;color:var(--cyan);font-weight:300}
/* Live card SHORT checklist (Avni 2026-08-17): a tidy 2-col grid of circled
   checks instead of long sentences; the FIRST check wears the gradient ring
   as the single brand accent. Single column on a narrow swipe card. */
.v2 .prfeat{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:4px 0 24px}
.v2 .prf{display:flex;align-items:center;gap:9px;font:600 13.5px/1.25 var(--head);color:#DCEAF3}
.v2 .prf>span{min-width:0}
.v2 .prf .prck{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(34,211,238,.55);display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;color:var(--cyan)}
.v2 .prf.first .prck{border:0;background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%);color:#fff}
.v2 .tone-c .prc.hot .prf{color:#DCEAF3}
@media(max-width:430px){.v2 .prfeat{grid-template-columns:1fr}}
.v2 .prc .btn{width:100%;justify-content:center}
.v2 .prnote{color:#7C99AD;font-size:.88rem;margin-top:22px}

/* ==== 10. FAQ - hairline accordion, no card boxes (RULE A) ================ */
.v2 .faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,72px);max-width:1400px;margin:clamp(34px,4vw,50px) auto 0;align-items:start}
@media(max-width:860px){.v2 .faqgrid{grid-template-columns:1fr}}
.v2 details.q{border-bottom:1px solid var(--line)}
.v2 .tint details.q{border-bottom-color:#D8E5EF} /* hairline holds on the tint plate */
.v2 details.q summary{cursor:pointer;font:700 17px/1.4 var(--head);padding:21px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;transition:color .2s}
.v2 details.q summary:hover{color:var(--aqua2)}
.v2 details.q summary::-webkit-details-marker{display:none}
.v2 details.q summary:after{content:"+";font:700 24px/1 var(--head);color:var(--pink-deep);flex:0 0 auto;transition:rotate .25s var(--ez)}
.v2 details.q[open] summary:after{rotate:45deg}
.v2 details.q p{color:var(--mut);padding:0 0 21px;font-size:.97rem;line-height:1.6;max-width:60ch}

/* ==== 11. CLOSE =========================================================== */
.v2 .close{text-align:center;padding:clamp(90px,11vw,160px) 0}
.v2 .close .glow{position:absolute;left:50%;top:50%;width:min(620px,90vw);aspect-ratio:1/1;transform:translate(-50%,-50%);
 border:64px solid rgba(34,211,238,.10);border-radius:50%;pointer-events:none;
 box-shadow:0 0 140px 24px rgba(6,182,212,.2),inset 0 0 100px rgba(6,182,212,.12)}
.v2 .close .glow.g2{width:min(440px,68vw);border:46px dashed rgba(255,77,141,.09);animation:fspin 80s linear infinite}
.v2 .close h2{font:800 clamp(2.3rem,6vw,4.6rem)/1.02 var(--head);color:#fff;letter-spacing:-.04em;text-wrap:balance;max-width:18ch;margin-inline:auto}
.v2 .close .cs{color:var(--cyan);font:700 16px/1.5 var(--head);margin-top:20px}
.v2 .close .ctarow{justify-content:center;margin-top:34px}
@media(prefers-reduced-motion:reduce){.v2 .close .glow.g2{animation:none}}

/* ==== THE WHOLE IDEA - dead-simple realization (you talk / it builds / it's
   live). Replaces the old file-tree + machine. Three calm beats, one mood ring
   in the section's .rings. Light plate; benefit-first, no mechanism. ========= */
.v2 .eyebrow{font:800 12px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--aqua2);margin-bottom:16px}
.v2 .simple3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);max-width:1060px;margin:clamp(38px,4.6vw,60px) auto 0}
.v2 .beat{position:relative;background:transparent;border:0;border-radius:0;padding:clamp(6px,1vw,12px) clamp(2px,1vw,10px);box-shadow:none}
.v2 .beat .bn{position:absolute;top:18px;inset-inline-end:20px;font:800 13px/1 var(--head);color:var(--soft);opacity:.6}
.v2 .beat>i{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;font-size:22px;font-weight:300;color:var(--aqua2);
 background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(255,77,141,.10));margin-bottom:18px}
.v2 .beat:nth-child(3)>i{color:var(--pink-deep)}
.v2 .beat h3{font:800 clamp(1.15rem,1.7vw,1.4rem)/1.2 var(--head);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;text-wrap:balance}
.v2 .beat p{font-size:.98rem;line-height:1.5;color:var(--mut);text-wrap:pretty}
.v2 .simplefoot{text-align:center;margin:clamp(34px,4vw,50px) auto 0;max-width:32ch;
 font:800 clamp(1.25rem,2.2vw,1.75rem)/1.3 var(--head);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
@media(max-width:820px){
 .v2 .simple3{grid-template-columns:1fr;gap:14px;max-width:520px}
 .v2 .beat{padding:20px 22px}
 .v2 .beat>i{width:46px;height:46px;font-size:19px;margin-bottom:14px}
}

/* (legacy engine before/after composition - file tree + Reads/Understands/
   Builds machine - removed 2026-08-18, replaced by "The whole idea" beats.) */

/* ==== transformation caption (under the hero film) ======================== */
.v2 .readsline{margin:26px auto 0;max-width:56ch;text-align:center;color:#8FA9BC;font-size:.95rem;line-height:1.65}
.v2 .readsline b{font-weight:700}
.v2 .readsline .wh{display:block;color:#fff;font:700 1.05rem/1.4 var(--head);margin-bottom:6px}
.v2 .readsline .aq{color:var(--cyan)}
.v2 .readsline .pk{color:var(--pink2)}

/* ==== fear removal: "no more" grid - second half of the coin band ========= */
.v2 .nomore{margin-top:clamp(56px,7vw,100px)}
.v2 .nmh{text-align:center;font:800 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--head);color:#fff;letter-spacing:-.02em}
.v2 .nmgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px clamp(24px,3vw,52px);max-width:1240px;margin:clamp(28px,3.4vw,42px) auto 0}
@media(max-width:960px){.v2 .nmgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v2 .nmgrid{grid-template-columns:1fr}}
.v2 .nmgrid li{display:flex;gap:14px;align-items:flex-start}
.v2 .nmgrid li>i{flex:0 0 auto;width:24px;text-align:center;margin-top:2px;font-weight:300;font-size:17px;color:#5E8CA3}
.v2 .nmgrid s{display:block;font:700 16px/1.3 var(--head);color:#B9CFDE;text-decoration:line-through;text-decoration-color:rgba(255,77,141,.5);text-decoration-thickness:2.5px}
.v2 .nmgrid li span{display:block;color:#8FA9BC;font-size:.88rem;margin-top:4px;line-height:1.45}
/* the section's payoff line - display treatment */
.v2 .nmout{text-align:center;margin:clamp(34px,4vw,54px) auto 0;max-width:36ch;font:800 clamp(1.6rem,3.1vw,2.6rem)/1.15 var(--head);letter-spacing:-.025em;color:#fff;text-wrap:balance}

/* audience fear-removal accent line */
.v2 .fearline{margin-top:14px;font:700 13.5px/1.45 var(--head);color:var(--aqua2);border-inline-start:2.5px solid var(--aqua);padding-inline-start:12px}
.v2 .pcard.designer .fearline{color:var(--pink-deep);border-color:var(--pink)}

/* pricing reassurance one-liner */
.v2 .prsimple{margin-top:14px;font:700 14.5px/1.5 var(--head);color:var(--cyan)}

/* ==== FOOTER: match the page's fluid width (v2 page only) ================= */
footer .foot-grid,footer .foot-bottom,footer .foot-lang{max-width:var(--maxw)}

/* ==========================================================================
   PAGE RHYTHM (Avni 2026-08-16; reordered 2026-08-17): solid plates, visible
   boundaries, no fades. hero DARK -> engine TINT -> coin+no-more DARK ->
   everything (the ONE capability section) TINT -> compare WHITE -> pricing
   TINT -> MCP terminal DARK -> people WHITE -> faq TINT -> close DARK.
   No two same-tone plates ever touch. Inside sections: ONE calm accent per
   group; pink only as the rare deliberate spark. The light-ground variants of
   the compare table (.cmpsec) and pricing cards (.tone-c) live here.
   ========================================================================== */
/* --- compare section on the white plate --- */
.v2 .cmpsec table.cmp{background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px -30px rgba(12,50,75,.3)}
.v2 .cmpsec table.cmp th,.v2 .cmpsec table.cmp td{border-bottom-color:var(--line)}
.v2 .cmpsec table.cmp thead th{color:var(--mut);background:#F8FBFD}
.v2 .cmpsec table.cmp thead th.yy{color:#fff;background:var(--aqua)}
.v2 .cmpsec table.cmp td:first-child,.v2 .cmpsec table.cmp th:first-child{color:var(--ink)}
.v2 .cmpsec table.cmp tbody tr:hover{background:#F8FBFD}
.v2 .cmpsec .mk.ok{color:#0B815A}.v2 .cmpsec .mk.no{color:#C2CFDA}.v2 .cmpsec .mk.pa{color:#C97B12}
.v2 .cmpsec .cmp .yy .mk.ok{color:var(--aqua2)}
.v2 .cmpsec .dives a{color:var(--aqua2)}
.v2 .cmpsec .dives a i{color:var(--soft)}
.v2 .cmpsec .dives a:hover{color:var(--ink)}
/* --- pricing on the tint plate: Live card is the ONE deliberate dark spark --- */
.v2 .tone-c .prc{background:#fff;box-shadow:0 20px 50px -30px rgba(12,50,75,.3)}
.v2 .tone-c .prc h3,.v2 .tone-c .prc .amt{color:var(--ink)}
.v2 .tone-c .prc .amt small,.v2 .tone-c .prc .for{color:var(--mut)}
.v2 .tone-c .prc li{color:#2A4459}
.v2 .tone-c .prc li i{color:var(--aqua2)}
.v2 .tone-c .prc .btn-g{border-color:var(--line);color:var(--ink);background:#fff}
.v2 .tone-c .prc .btn-g:hover{border-color:var(--aqua);color:var(--aqua2)}
.v2 .tone-c .prc.hot{background:var(--panel);border-color:rgba(34,211,238,.4);box-shadow:0 34px 80px -34px rgba(6,182,212,.55)}
.v2 .tone-c .prc.hot h3,.v2 .tone-c .prc.hot .amt{color:#fff}
.v2 .tone-c .prc.hot .amt small{color:#8FA9BC}
.v2 .tone-c .prc.hot .for{color:#B9D2E0}
.v2 .tone-c .prc.hot li{color:#C8DCE8}
.v2 .tone-c .prc.hot li i{color:var(--cyan)}
.v2 .tone-c .prnote{color:var(--mut)}
.v2 .tone-c .prsimple{color:var(--aqua2)}
.v2 .tone-c .prnote a{color:var(--aqua2)!important}
/* --- calm accents: one per group, no odd/even alternation --- */
.v2 .prow:nth-child(even) .mk{color:var(--aqua2)}
.v2 .pane li:nth-child(even) i{color:var(--aqua2)}
.v2 .stat:nth-child(even) b i{color:var(--cyan)}
.v2 .outs li:nth-child(even) i{color:var(--aqua2)}
.v2 .mstep:nth-child(2) .mn{border-color:var(--cyan)}
.v2mm-a:nth-child(even) i{color:#6FB5CC}
/* the deliberate pink sparks that remain: hero "runs it", the ring gradient,
   the Live badge, the pink cluster caption, owner-card accent, close ring */

/* quiet text link - the "at most one quiet link" beside a single primary CTA */
.v2 .qlink{display:inline-flex;align-items:center;gap:7px;font:700 14.5px/1 var(--head);color:var(--mut);padding:14px 4px;transition:color .2s}
.v2 .qlink i{font-weight:300;font-size:12px;transition:translate .2s var(--ez)}
.v2 .qlink:hover{color:var(--ink)}
.v2 .hero .qlink,.v2 .close .qlink{color:rgba(255,255,255,.72)}
.v2 .hero .qlink:hover,.v2 .close .qlink:hover{color:#fff}
.v2 .tone-c .prc .qlink{color:var(--aqua2);padding-inline:0}

/* ==========================================================================
   ARROW-LINK COMPONENT (unified). Every quiet "deeper link" on the page shares
   ONE behavior: an inline fa-arrow-right beside the label that nudges toward the
   READING direction on hover. Three entry classes - .qlink (hero quick-links),
   .mlink (section "learn more") and .plink (capability + persona "more") - all
   route through the SAME rules below, so they behave identically.

   RTL doctrine (mirrors the .btn-a::after reference above): flex + gap place the
   arrow inline-end automatically, so in RTL it moves to the inline-START side on
   its own. The GLYPH is mirrored with scaleX(-1) and the hover nudge - a PHYSICAL
   `translate` - is negated by an explicit [dir=rtl] rule (7px LTR / -7px RTL).
   Motion is wrapped in prefers-reduced-motion:no-preference. Every variant gets
   a visible :focus-visible ring. No em dashes, no down-arrows.

   BUGFIX 2026-08-18: the hero .qlink arrow used to nudge DOWN (translate:0 2px);
   it now nudges sideways like the rest.
   ========================================================================== */
.v2 .mlink{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--head);color:var(--aqua2);transition:color .2s}
.v2 .mlink i{font-weight:300;font-size:12px}
.v2 .mlink:hover{color:var(--ink)}
.v2 .dark .mlink,.v2 .darkg .mlink,.v2 .coin .mlink,.v2 .mcp .mlink{color:var(--cyan)}
.v2 .dark .mlink:hover,.v2 .darkg .mlink:hover,.v2 .coin .mlink:hover,.v2 .mcp .mlink:hover{color:#fff}
/* the one shared arrow: motion + RTL glyph mirror for all three variants */
.v2 .plink i{font-weight:300;font-size:12px}
.v2 .qlink i,.v2 .mlink i,.v2 .plink i{transition:translate .2s var(--ez)}
[dir="rtl"] .v2 .qlink i,[dir="rtl"] .v2 .mlink i,[dir="rtl"] .v2 .plink i{transform:scaleX(-1)}
@media(prefers-reduced-motion:no-preference){
 .v2 .qlink:hover i,.v2 .mlink:hover i,.v2 .plink:hover i{translate:7px 0}
 [dir="rtl"] .v2 .qlink:hover i,[dir="rtl"] .v2 .mlink:hover i,[dir="rtl"] .v2 .plink:hover i{translate:-7px 0}
}
/* one visible focus ring for every arrow-link variant */
.v2 .qlink:focus-visible,.v2 .mlink:focus-visible,.v2 .plink:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:6px}
/* small breathing room when an arrow-link closes a stacked .beat / .swhead */
.v2 .beat .mlink,.v2 .swhead .mlink{margin-top:13px}
/* film: the dashed orbit circle was removed - the transform ring, its
   ripples and the chip halo are the only circles left in the diagram */

/* ==========================================================================
   HERO MOVIE (OPT-IN preview: gate = html.v2intro, set in <head> ONLY when the
   URL carries ?animv2=1). Phase 1 (.v2intro): NOTHING but the film, fixed dead-
   centre of the viewport on the dark ground; header, copy, caption, stats,
   marquee and rings hidden; scroll locked. Phase 2 (.v2go, added by v2.js at the
   film's bloom beat): the film FLIPs from centre to its slot (inline transform,
   one curve) while everything else enters QUICKLY BUT STEPPED - header drops in,
   then eyebrow -> headline lines -> sub -> prompt -> trust line -> caption ->
   stats -> marquee, ~80ms apart, RULE D in place. .v2skip (any user intent) =
   settled instantly. Normal loads / reduced-motion / no-JS never get .v2intro:
   the server-rendered settled layout paints at once.
   ========================================================================== */
.v2intro{overflow:hidden}
.v2intro .v2hd{opacity:0;transform:translateY(-14px);pointer-events:none}
.v2intro .hero .hcopy>*{opacity:0;transform:translateY(12px)}
.v2intro .v2 .hero .readsline,.v2intro .v2 .hero .stats,.v2intro .v2 .hero .marq,.v2intro .v2 .hero .rings{opacity:0} /* 4 classes: outranks .v2rv .v2 .reveal.in */
.v2intro .film{position:fixed;left:50%;top:50%;width:min(600px,94vw);height:480px;margin:-240px 0 0 calc(min(600px,94vw)/-2);z-index:60;transform:none}
@media(max-width:960px){.v2intro .film{height:430px;margin-top:-215px}}
@media(max-width:700px){.v2intro .film{height:360px;margin-top:-180px;width:100vw;margin-left:-50vw}}
/* the quiet SKIP pill: bottom-centre of the viewport during the intro only,
   safe-area aware, low contrast. First tap SPEEDS the choreography (~3x, no
   jump-cut); a second tap (or Escape) settles instantly. It stays up through
   the sped-up landing (html.v2speed) and fades out with it. */
.v2skip-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;
 display:none;align-items:center;gap:8px;font:600 12.5px/1 var(--head);letter-spacing:.04em;color:#8FA9BC;
 background:rgba(9,26,37,.72);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:12px 20px;min-height:44px;
 cursor:pointer;backdrop-filter:blur(6px);transition:color .2s,border-color .2s,opacity .3s var(--ez)}
.v2skip-btn i{font-size:11px;font-weight:300}
.v2skip-btn:hover,.v2skip-btn:focus-visible{color:#fff;border-color:rgba(34,211,238,.45)}
.v2intro .v2skip-btn,.v2speed .v2skip-btn{display:inline-flex;animation:v2fade .45s var(--rv-ez) .9s both}
html.v2intro body .bbar{opacity:0;pointer-events:none}
html.v2go body .bbar{animation:v2fade .5s var(--rv-ez) 1s both}
html.v2skip body .bbar{animation:none}
@keyframes v2rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes v2drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
.v2go .v2hd{animation:v2drop .5s var(--rv-ez) .1s both}
.v2go .hero .hcopy>*{animation:v2rise .55s var(--rv-ez) both}
.v2go .hero .hcopy>.q{animation-delay:.3s}
.v2go .hero .hcopy>h1{animation-delay:.38s}
.v2go .hero .hcopy>h1 .hl{animation:v2fade .5s var(--rv-ez) both;animation-delay:calc(.4s + var(--i,0)*.09s)}
.v2go .hero .hcopy>.sub{animation-delay:.62s}
.v2go .hero .hcopy>.hvals{animation-delay:.7s}
.v2go .hero .hcopy>.hbrow{animation-delay:.82s}
.v2go .hero .hcopy>.hcta{animation-delay:.9s}
.v2go .hero .hcopy>.hprompt{animation-delay:.7s}
.v2go .hero .hcopy>.hprow{animation-delay:.76s}
.v2go .hero .hcopy>.mic{animation-delay:.82s}
.v2go .v2 .hero .readsline{animation:v2fade .5s var(--rv-ez) .82s both}
.v2go .v2 .hero .stats{animation:v2fade .55s var(--rv-ez) .9s both}
.v2go .v2 .hero .marq,.v2go .v2 .hero .rings{animation:v2fade .6s var(--rv-ez) 1s both}
.v2skip .v2hd,.v2skip .hero .hcopy>*,.v2skip .hero .hcopy>h1 .hl,.v2skip .hero .readsline,.v2skip .hero .stats,.v2skip .hero .marq,.v2skip .hero .rings{animation:none}
@media(prefers-reduced-motion:reduce){
 .v2go .v2hd,.v2go .hero .hcopy>*,.v2go .hero .hcopy>h1 .hl,.v2go .hero .readsline,.v2go .hero .stats,.v2go .hero .marq,.v2go .hero .rings{animation:none}
}

/* ==========================================================================
   NARRATIVE ARC  -  THE SHIFT (bright) -> THE GAP (dark, trapped) -> GOES LIVE
   (bright release). The plates step the LIGHTING on purpose: bright, then the
   night low-point, then the lights come back on as the site goes live, so the
   3->4 seam reads as "it comes alive" and never butts two identical darks.
   Graphics are pure CSS; motion is gated under prefers-reduced-motion; layout
   uses logical properties so it mirrors in RTL. No em dashes.
   ========================================================================== */

/* --- shared: browser chrome + a rendered mini-site (bright / dimmed / live) -- */
.v2 .brow{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -34px rgba(8,24,38,.55);width:100%}
.v2 .bbar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EEF3F8;border-bottom:1px solid #E1EAF2}
.v2 .bbar .bd{width:9px;height:9px;border-radius:50%;background:#CBD8E4;flex:0 0 auto}
.v2 .burl{margin-inline-start:10px;display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);color:#5B7285;background:#fff;border:1px solid #E1EAF2;border-radius:7px;padding:5px 10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext}
.v2 .burl i{font-size:9px;color:#8AA1B4;flex:0 0 auto}
.v2 .burl.warn{color:#B4632A;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.09)}
.v2 .burl.warn i{color:var(--amber)}
.v2 .blive{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font:800 9.5px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:#0B7A52;background:rgba(52,211,153,.16);border-radius:99px;padding:5px 10px;flex:0 0 auto}
.v2 .blive i{font-size:7px;color:var(--mint);animation:glpulse 1.8s ease-in-out infinite}
@keyframes glpulse{0%,100%{opacity:1}50%{opacity:.3}}
.v2 .mren{background:#fff}
.v2 .mr-nav{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid #EEF3F8}
.v2 .mr-logo{width:17px;height:17px;border-radius:50%;flex:0 0 auto;background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%)}
.v2 .mr-nl{width:28px;height:6px;border-radius:3px;background:#DBE7F0}
.v2 .mr-nl:last-child{margin-inline-start:auto}
.v2 .mr-hero{padding:20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:linear-gradient(135deg,#FFF1F6,#E8F8FE)}
.v2 .mr-hero b{font:800 clamp(14px,1.4vw,17px)/1 var(--head);color:#0C2233}
.v2 .mr-btn{width:70px;height:17px;border-radius:99px;background:var(--pink)}
.v2 .mr-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:13px 16px}
.v2 .mr-thumbs span{aspect-ratio:1.5;border-radius:7px;background:linear-gradient(135deg,#DCEFF7,#F6DBE6)}

/* --- THE SHIFT: bright plate, then-vs-now ---------------------------------- */
.v2 .band.shift{background:radial-gradient(120% 90% at 85% 0%,rgba(6,182,212,.10),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(255,77,141,.06),transparent 60%),var(--bg)}
.v2 .shiftgrid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,2.2vw,30px);max-width:1120px;margin:clamp(40px,5vw,64px) auto 0}
@media(max-width:860px){.v2 .shiftgrid{grid-template-columns:1fr;gap:16px}}
.v2 .sh-card{border-radius:22px;padding:clamp(22px,2.4vw,30px);position:relative;display:flex;flex-direction:column}
.v2 .sh-then{background:#EBEFF4;border:1px solid #DFE6EE}
.v2 .sh-now{background:linear-gradient(160deg,#fff,#F1FBFF);border:1px solid rgba(6,182,212,.22);box-shadow:0 34px 70px -36px rgba(6,140,170,.5)}
.v2 .sh-tag{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--head);letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:18px}
.v2 .sh-tag.now{color:var(--aqua2)}
.v2 .sh-plan{display:flex;flex-direction:column;gap:11px}
.v2 .sh-row{display:grid;grid-template-columns:1fr 40% auto;align-items:center;gap:10px}
.v2 .sh-pl{font:600 12.5px/1.25 var(--head);color:#5F7488}
.v2 .sh-bar{height:9px;border-radius:99px;background:#DCE3EB;overflow:hidden}
.v2 .sh-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:repeating-linear-gradient(45deg,#AEBCCA,#AEBCCA 5px,#C2CDD9 5px,#C2CDD9 10px)}
.v2 .sh-wk{font:700 10.5px/1 var(--mono);color:#8496A6;white-space:nowrap}
.v2 .sh-foot{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:18px}
.v2 .sh-then .sh-foot{border-top:1px solid rgba(11,34,51,.09);margin-top:20px}
.v2 .sh-foot b{font:800 clamp(1.4rem,2.4vw,1.9rem)/1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.v2 .sh-then .sh-foot b{color:#5B7285}
.v2 .sh-foot span{font-size:.88rem;color:var(--mut)}
.v2 .sh-leap{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;align-self:center;flex:0 0 auto;color:#fff;font-size:20px;background:linear-gradient(135deg,var(--aqua),var(--pink));box-shadow:0 0 36px -6px rgba(255,77,141,.6),0 0 26px -6px rgba(6,182,212,.6)}
@media(max-width:860px){.v2 .sh-leap{transform:rotate(90deg)}}
[dir="rtl"] .v2 .sh-leap{transform:scaleX(-1)}
@media(max-width:860px){[dir="rtl"] .v2 .sh-leap{transform:rotate(90deg)}}
.v2 .sh-prompt{display:flex;align-items:center;gap:10px;background:var(--ink);border-radius:13px;padding:12px 14px;box-shadow:0 16px 34px -22px rgba(8,24,38,.7)}
.v2 .sh-pi{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--aqua),var(--pink));display:grid;place-items:center;color:#fff;font-size:11px;flex:0 0 auto}
.v2 .sh-pt{font:600 13px/1.3 var(--head);color:#EAF6FF}
.v2 .sh-cur{width:2px;height:15px;background:var(--cyan);margin-inline-start:-4px;animation:shcur 1.05s steps(1) infinite;flex:0 0 auto}
@keyframes shcur{0%,50%{opacity:1}51%,100%{opacity:0}}
.v2 .sh-brow{margin-top:14px}

/* --- THE GAP: dark night, the trapped laptop ------------------------------ */
.v2 .band.gap{background:radial-gradient(90% 72% at 50% 34%,#0C2236,var(--navy2) 70%);color:#DCEAF3;position:relative;overflow:hidden}
.v2 .gap .big{color:#fff}
.v2 .gap .eyebrow{color:var(--cyan)}
.v2 .gap .lead{color:#9FBACD}
.v2 .gapstage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,30px);margin-top:clamp(38px,5vw,58px)}
.v2 .gp-laptop{position:relative;width:min(560px,94%)}
.v2 .gp-screen{position:relative;border:8px solid #0B1E2E;border-bottom:0;border-radius:16px 16px 4px 4px;overflow:hidden;box-shadow:0 44px 96px -34px rgba(0,0,0,.85)}
.v2 .gp-screen .brow{border-radius:0;box-shadow:none}
.v2 .gp-screen .mren{filter:grayscale(.92) brightness(.62) contrast(.96)}
.v2 .gp-screen .mr-hero b{color:#3C4E5C}
.v2 .gp-veil{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(5,15,24,.2),rgba(5,15,24,.62));pointer-events:none}
.v2 .gp-badge{display:inline-flex;align-items:center;gap:9px;font:800 12px/1 var(--head);letter-spacing:.03em;color:#CBD8E4;background:rgba(9,26,37,.88);border:1px solid #2A4155;border-radius:99px;padding:11px 18px;backdrop-filter:blur(3px)}
.v2 .gp-badge i{color:#8AA1B4}
.v2 .gp-screen::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--cyan);opacity:.7;animation:gpload 2.8s ease-in-out infinite}
@keyframes gpload{0%{width:0;opacity:.75}52%{width:66%;opacity:.75}68%{width:66%;opacity:0}69%{width:0;opacity:0}100%{width:0;opacity:.75}}
.v2 .gp-base{position:relative;width:calc(100% + 46px);margin-inline-start:-23px;height:15px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#17293A,#0A1724);box-shadow:0 22px 34px -20px rgba(0,0,0,.75)}
.v2 .gp-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:26%;height:5px;border-radius:0 0 7px 7px;background:#243A4D}
.v2 .gp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.v2 .gp-chip{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--head);color:#829BAF;background:rgba(255,255,255,.03);border:1px solid #213A4E;border-radius:99px;padding:9px 15px}
.v2 .gp-chip i{color:#5E7A90;font-size:13px}

/* --- GOES LIVE: bright release; the seam carries the dark->light lighting --- */
.v2 .band.golive{background:var(--bg);position:relative;overflow:hidden;padding-top:0}
.v2 .golive-seam{position:relative;padding:clamp(58px,7vw,100px) 0 clamp(46px,5vw,76px);background:linear-gradient(180deg,var(--navy2) 0%,#0E2A42 30%,#356781 58%,#A9D2E2 82%,var(--bg) 100%)}
.v2 .golive-seam::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 82% at 50% 16%,rgba(52,211,153,.18),transparent 62%);pointer-events:none}
.v2 .golive-live{position:relative;max-width:560px;margin:0 auto;text-align:center}
.v2 .golive-live .brow{box-shadow:0 44px 96px -38px rgba(8,24,38,.7),0 0 66px -20px rgba(52,211,153,.5)}
.v2 .golive-cap{margin-top:18px;display:inline-flex;align-items:center;gap:9px;font:800 12.5px/1.3 var(--head);color:#0B7A52;background:rgba(255,255,255,.9);border:1px solid rgba(52,211,153,.4);border-radius:99px;padding:10px 18px;box-shadow:0 12px 30px -16px rgba(8,24,38,.4)}
.v2 .golive-cap i{color:var(--mint);font-weight:300}
/* light-plate overrides for the reused coin content (was styled for dark) */
.v2 .golive .big,.v2 .golive .nmh,.v2 .golive .nmout{color:var(--ink)}
.v2 .golive .lead{color:var(--mut)}
.v2 .golive .side h3{color:var(--ink)}
.v2 .golive .side p{color:var(--mut)}
.v2 .golive .side li{color:#2A4459}
.v2 .golive .side .ghost{color:rgba(6,182,212,.10)}
.v2 .golive .side.run .ghost{color:rgba(255,77,141,.11)}
.v2 .golive .nmgrid s{color:#33506A}
.v2 .golive .nmgrid li span{color:var(--mut)}
.v2 .golive .nmgrid li>i{color:#7FA2B6}

/* --- reveal-driven motion (all gated by .v2rv; reduced-motion falls back) --- */
.v2 .sh-bar i{width:var(--w)}
.v2rv .v2 .shiftgrid.reveal .sh-bar i{width:0;transition:width .9s var(--rv-ez) .12s}
.v2rv .v2 .shiftgrid.reveal.in .sh-bar i{width:var(--w)}
.v2rv .v2 .shiftgrid.reveal .sh-brow .brow{opacity:0;transform:translateY(12px) scale(.985);transition:opacity .6s var(--rv-ez) .34s,transform .6s var(--rv-ez) .34s}
.v2rv .v2 .shiftgrid.reveal.in .sh-brow .brow{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .v2 .blive i,.v2 .sh-cur{animation:none}
 .v2 .gp-screen::after{animation:none;display:none}
 .v2rv .v2 .shiftgrid.reveal .sh-bar i,.v2rv .v2 .shiftgrid.reveal .sh-brow .brow{transition:none}
}

/* --- mobile polish for the arc devices ------------------------------------ */
@media(max-width:600px){
 .v2 .sh-row{grid-template-columns:1fr 34% auto;gap:8px}
 .v2 .sh-pl{font-size:11.5px}
 .v2 .gp-meta{gap:8px}
 .v2 .gp-chip{font-size:11.5px;padding:8px 12px}
 .v2 .golive-cap{font-size:11.5px}
}

/* ==========================================================================
   GROK-SYSTEM HOMEPAGE (Avni 2026-08-18). Terse copy, BOLD art-directed
   sections. Reuses the shared .brow/.mren browser render and the existing
   plates; adds the per-section devices below. Logical properties (RTL-safe),
   reduced-motion guards, no horizontal overflow. No em dashes.
   ========================================================================== */

/* ---- HERO: eyebrow row, CTA row, ghost button, proof chips --------------- */
.v2 .hero .hbrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;margin-top:26px;font:700 12.5px/1 var(--head);color:#93B2C6}
.v2 .hero .hbrow span{display:inline-flex;align-items:center;gap:8px}
.v2 .hero .hbrow i{color:var(--cyan);font-size:13px;font-weight:300}
.v2 .hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.v2 .hcta .btn-g i{font-weight:300;font-size:13px}
.v2 .hchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.v2 .hchips span{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--head);color:#B9CEDB;background:rgba(9,26,37,.55);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:8px 13px}
.v2 .hchips i{color:var(--cyan);font-size:11px;font-weight:300}
/* HERO value row: scannable whole-platform pills (Arctic + cyan accent). Wraps
   cleanly, mirrors under [dir=rtl] via flex+logical props. Secondary to the H1 -
   small type, tinted glass chips. Each pill = a real feature (FEATURE-INVENTORY). */
.v2 .hero .hvals{display:flex;flex-wrap:wrap;gap:8px 9px;margin-top:24px;max-width:52ch}
.v2 .hero .hvals span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:700 12.5px/1 var(--head);color:#CFE3EF;background:rgba(9,26,37,.5);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:9px 14px}
.v2 .hero .hvals i{color:var(--cyan);font-size:12px;font-weight:300}

/* ---- 2. FOUR DOORS (file / zip / prompt / AI, EQUAL) --------------------- */
.v2 .doors{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);max-width:1140px;margin:clamp(40px,5vw,60px) auto 0}
@media(max-width:860px){.v2 .doors{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.v2 .doors{grid-template-columns:1fr}}
.v2 .door{position:relative;display:flex;flex-direction:column;gap:13px;border-radius:20px;padding:clamp(20px,2vw,28px);background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px -34px rgba(12,50,75,.35);transition:transform .3s var(--ez),box-shadow .3s var(--ez)}
.v2 .door:hover{transform:translateY(-6px);box-shadow:0 32px 66px -30px rgba(12,50,75,.5)}
.v2 .door:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.v2 .door .dnum{position:absolute;top:16px;inset-inline-end:18px;font:800 12px/1 var(--mono);color:var(--soft);opacity:.5}
.v2 .door .dico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:21px;color:#fff;background:linear-gradient(135deg,var(--aqua) 0%,var(--aqua) 28%,var(--pink) 100%);box-shadow:0 12px 26px -10px rgba(255,77,141,.5)}
.v2 .door .dfile{align-self:flex-start;font:600 11px/1 var(--mono);color:var(--aqua2);background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.18);border-radius:7px;padding:5px 9px;unicode-bidi:plaintext}
.v2 .door h3{font:800 clamp(1.15rem,1.5vw,1.4rem)/1.1 var(--head);color:var(--ink);letter-spacing:-.02em}
.v2 .door p{color:var(--mut);font-size:.95rem;line-height:1.5}
/* per-door action: reads as the card's CTA (the whole card is the link, so this
   is an affordance, not a nested anchor). Arrow nudges toward reading dir. */
.v2 .door .dcta{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:7px;font:800 13px/1 var(--head);color:var(--aqua2);letter-spacing:-.01em}
.v2 .door .dcta i{font-weight:300;font-size:12px;transition:translate .2s var(--ez)}
.v2 .door:hover .dcta{color:var(--pink-deep)}
@media(prefers-reduced-motion:no-preference){.v2 .door:hover .dcta i{translate:5px 0}}
[dir="rtl"] .v2 .door .dcta i{transform:scaleX(-1)}
[dir="rtl"] .v2 .door:hover .dcta i{translate:-5px 0}
.v2 .doors-out{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(30px,4vw,44px) auto 0;max-width:660px;text-align:center}
.v2 .doors-out .do-ring{width:30px;height:30px;border-radius:50%;border:5px solid transparent;flex:0 0 auto;background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude}
.v2 .doors-out .do-tx{font:800 clamp(1.05rem,1.8vw,1.35rem)/1.3 var(--head);color:var(--ink);letter-spacing:-.02em}

/* ---- 3. CMS APPEARS (browser + field-chip overlays) ---------------------- */
.v2 .cmsdev{position:relative;max-width:660px;margin:clamp(44px,5vw,64px) auto 0}
.v2 .cmschip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--head);color:var(--ink);background:#fff;border:1px solid rgba(6,182,212,.4);border-radius:99px;padding:8px 13px;box-shadow:0 14px 30px -14px rgba(12,50,75,.55)}
.v2 .cmschip i{color:var(--aqua2);font-size:11px;font-weight:300}
.v2 .cmschip.c1{top:14%;inset-inline-start:-7%}
.v2 .cmschip.c2{top:38%;inset-inline-end:-9%}
.v2 .cmschip.c3{top:63%;inset-inline-start:-5%}
.v2 .cmschip.c4{bottom:12%;inset-inline-end:-3%}
.v2rv .v2 .cmsdev.reveal .cmschip{opacity:0;transform:scale(.82);transition:opacity .5s var(--rv-ez),transform .5s var(--rv-ez)}
.v2rv .v2 .cmsdev.reveal.in .cmschip{opacity:1;transform:none}
.v2rv .v2 .cmsdev.reveal.in .cmschip.c2{transition-delay:.1s}
.v2rv .v2 .cmsdev.reveal.in .cmschip.c3{transition-delay:.2s}
.v2rv .v2 .cmsdev.reveal.in .cmschip.c4{transition-delay:.3s}
@media(max-width:560px){.v2 .cmschip.c1,.v2 .cmschip.c3{inset-inline-start:3%}.v2 .cmschip.c2,.v2 .cmschip.c4{inset-inline-end:3%}}

/* ---- 5. STAYS UP (dark; browser live + status panel) --------------------- */
.v2 .up-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:center;max-width:980px;margin:clamp(40px,5vw,60px) auto 0}
@media(max-width:800px){.v2 .up-grid{grid-template-columns:1fr;max-width:560px}}
.v2 .up-panel{border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--dline);padding:clamp(14px,2vw,22px);display:flex;flex-direction:column}
.v2 .up-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.v2 .up-row:last-child{border-bottom:0}
.v2 .up-k{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--head);color:#CFE0EC;min-width:112px}
.v2 .up-k i{color:var(--cyan);font-size:13px;font-weight:300}
.v2 .up-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.v2 .up-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--aqua),var(--mint))}
.v2 .up-row>b{font:800 13px/1 var(--head);color:#fff;margin-inline-start:auto}
.v2 .up-ok{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;font:600 12.5px/1.3 var(--head);color:#9FBACD;text-align:end}
.v2 .up-ok i{color:var(--mint);font-size:11px;flex:0 0 auto}

/* ---- 6. CLICK THE PAGE (editor overlay on the browser) ------------------- */
.v2 .editdev{position:relative;max-width:600px;margin:0 auto}
.v2 .ed-field{position:absolute;z-index:3;top:50%;inset-inline-start:11%;display:inline-flex;align-items:center;font:700 12.5px/1 var(--head);color:var(--ink);background:#fff;border:2px solid var(--aqua);border-radius:9px;padding:9px 12px;box-shadow:0 16px 34px -14px rgba(12,50,75,.6);unicode-bidi:plaintext}
.v2 .ed-cur{width:2px;height:15px;background:var(--aqua);margin-inline-start:3px;animation:shcur 1.05s steps(1) infinite}
.v2 .ed-cursor{position:absolute;z-index:4;top:63%;inset-inline-start:42%;color:#0C2233;font-size:20px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));animation:ednudge 2.6s var(--ez) infinite}
@keyframes ednudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-4px)}}
.v2 .ed-draft{position:absolute;z-index:3;top:8%;inset-inline-end:6%;display:inline-flex;align-items:center;gap:7px;font:800 10px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;color:#8A5A00;background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.42);border-radius:99px;padding:6px 11px}
.v2 .ed-draft i{color:var(--amber)}
@media(prefers-reduced-motion:reduce){.v2 .ed-cursor{animation:none}}

/* ---- 7. LEADS FLOW (form -> inbox) --------------------------------------- */
.v2 .leadflow{display:grid;grid-template-columns:1fr auto 1.05fr;gap:clamp(12px,2vw,26px);align-items:center;max-width:940px;margin:clamp(40px,5vw,60px) auto 0}
@media(max-width:760px){.v2 .leadflow{grid-template-columns:1fr;max-width:440px}}
.v2 .lf-form,.v2 .lf-inbox{border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 54px -34px rgba(12,50,75,.4);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:10px}
.v2 .lf-cap{display:flex;align-items:center;gap:9px;font:800 12.5px/1 var(--head);color:var(--ink);margin-bottom:4px}
.v2 .lf-cap i{color:var(--aqua2)}
.v2 .lf-badge{margin-inline-start:auto;font:800 11px/1 var(--head);color:#fff;background:var(--pink);border-radius:99px;padding:3px 8px}
.v2 .lf-in{display:block;height:34px;border-radius:9px;background:#F1F5F9;border:1px solid #E4EAF1;color:var(--soft);font:600 11.5px/32px var(--body);padding:0 12px}
.v2 .lf-in.tall{height:58px;line-height:20px;padding-top:9px}
.v2 .lf-send{align-self:flex-start;font:800 12px/1 var(--head);color:#fff;background:linear-gradient(135deg,var(--aqua),var(--pink));border-radius:9px;padding:12px 22px;margin-top:2px}
.v2 .lf-arrow{justify-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;background:linear-gradient(135deg,var(--aqua),var(--pink));box-shadow:0 0 30px -6px rgba(255,77,141,.6)}
[dir="rtl"] .v2 .lf-arrow i{transform:scaleX(-1)}
@media(max-width:760px){.v2 .lf-arrow{transform:rotate(90deg)}[dir="rtl"] .v2 .lf-arrow{transform:rotate(90deg)}}
.v2 .lf-row{display:flex;align-items:center;gap:11px}
.v2 .lf-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font:800 12px/1 var(--head);color:#fff}
.v2 .lf-av.a{background:#06B6D4}.v2 .lf-av.b{background:#A78BFA}.v2 .lf-av.c{background:#FF4D8D}
.v2 .lf-row b{display:block;font:800 13px/1.2 var(--head);color:var(--ink)}
.v2 .lf-row span{font-size:12px;color:var(--mut)}
.v2 .lf-hooks{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.v2 .lf-hooks span{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--head);color:var(--aqua2);background:rgba(6,182,212,.07);border:1px solid rgba(6,182,212,.16);border-radius:99px;padding:6px 10px}

/* ---- 8. SEO CARDS (search snippet + share card) -------------------------- */
.v2 .seodev{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,2.4vw,30px);align-items:start;max-width:900px;margin:clamp(40px,5vw,60px) auto 0}
@media(max-width:760px){.v2 .seodev{grid-template-columns:1fr;max-width:460px}}
.v2 .g-snip{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 54px -34px rgba(12,50,75,.4);padding:clamp(18px,2vw,24px);text-align:start}
.v2 .g-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.v2 .g-fav{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%)}
.v2 .g-site{display:block;font:600 12.5px/1.2 var(--head);color:var(--ink)}
.v2 .g-url{display:block;font:400 11.5px/1.2 var(--body);color:#5F7488;unicode-bidi:plaintext}
.v2 .g-title{font:400 19px/1.3 var(--body);color:#1a5fd0;margin-bottom:5px;text-wrap:balance}
.v2 .g-desc{font:400 13px/1.5 var(--body);color:#4A5D6E}
.v2 .og-card{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 54px -34px rgba(12,50,75,.4)}
.v2 .og-img{aspect-ratio:1.9;display:grid;place-items:center;background:linear-gradient(135deg,#FFF1F6,#E8F8FE)}
.v2 .og-logo{width:44px;height:44px;border-radius:50%;background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--pink) 80%,var(--pink) 100%);box-shadow:0 0 30px -6px rgba(6,182,212,.6)}
.v2 .og-meta{padding:13px 16px;border-top:1px solid var(--line)}
.v2 .og-meta b{display:block;font:800 14px/1.2 var(--head);color:var(--ink)}
.v2 .og-meta span{font:400 11.5px/1 var(--body);color:#5F7488;text-transform:uppercase;letter-spacing:.04em}

/* ---- 10. HAND IT OVER (browser live + roles) ----------------------------- */
.v2 .handoff{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,2.6vw,36px);align-items:center;max-width:960px;margin:clamp(40px,5vw,60px) auto 0}
@media(max-width:800px){.v2 .handoff{grid-template-columns:1fr;max-width:520px}}
.v2 .ho-team{border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 54px -34px rgba(12,50,75,.4);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:12px}
.v2 .ho-cap{display:flex;align-items:center;gap:9px;font:800 12.5px/1 var(--head);color:var(--ink)}
.v2 .ho-cap i{color:var(--aqua2)}
.v2 .ho-row{display:flex;align-items:center;gap:11px}
.v2 .ho-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font:800 13px/1 var(--head);color:#fff}
.v2 .ho-av.a{background:linear-gradient(135deg,var(--aqua),var(--sky))}
.v2 .ho-av.b{background:linear-gradient(135deg,var(--pink),var(--violet))}
.v2 .ho-av.c{background:#8AA1B4}
.v2 .ho-row b{display:block;font:800 13.5px/1.2 var(--head);color:var(--ink)}
.v2 .ho-row span{font-size:12px;color:var(--mut)}
.v2 .ho-note{display:flex;align-items:center;gap:9px;margin-top:4px;padding-top:13px;border-top:1px solid var(--line);font:600 12px/1.4 var(--head);color:var(--aqua2)}
.v2 .ho-note i{color:var(--aqua2)}

/* ---- 12. SHOWCASE (row of live browser thumbnails) ----------------------- */
.v2 .showrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);max-width:1080px;margin:clamp(40px,5vw,58px) auto 0}
@media(max-width:860px){.v2 .showrow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.v2 .showrow{grid-template-columns:1fr;max-width:400px}}
.v2 .showcard{margin:0}
.v2 .showcard .brow{transition:transform .3s var(--ez),box-shadow .3s var(--ez)}
.v2 .showcard:hover .brow{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(12,50,75,.5)}
.v2 .showcard figcaption{margin-top:13px;text-align:center;font:800 13px/1 var(--head);color:var(--ink);letter-spacing:-.01em}
.v2 .showcard.v-b .mr-hero{background:linear-gradient(135deg,#EAF1FF,#E6FBF4)}
.v2 .showcard.v-c .mr-hero{background:linear-gradient(135deg,#FFF6E8,#FDEAF0)}

/* ==========================================================================
   GROK 50/50 SYSTEM (Avni 2026-08-18). Feature/story sections are two-column
   [content | media] rows that ALTERNATE sides (grid follows dir, so RTL mirrors
   for free). Media halves are clean browser-chrome frames ready for real
   screenshots / <video> (autoplay-on-view in v2.js, reduced-motion respected).
   On-brand door glyphs (hero-film file/zip + prompt-box + terminal, 20/80
   gradient). Two-sentence headings break to exactly 2 lines. No em dashes.
   ========================================================================== */

/* hero H1 second-line break: collapses under 400px so it wraps naturally */
@media(max-width:400px){.v2 .hero h1 .hb2{display:none}}

/* ---- FOUR DOORS: on-brand glyph tiles (replaces the old FA icon tiles) ---- */
.v2 .door .dglyph{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(6,182,212,.10),rgba(255,77,141,.07));border:1px solid rgba(6,182,212,.16)}
.v2 .door .dglyph svg{width:44px;height:44px;display:block}

/* ---- 50/50 alternating rows ---- */
.v2 .f50{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center;max-width:1180px;margin:0 auto}
@media(max-width:900px){.v2 .f50{grid-template-columns:1fr;gap:clamp(26px,5vw,38px);max-width:600px}}
.v2 .f50.rev .f50-copy{order:2}
.v2 .f50.rev .f50-media{order:1}
@media(max-width:900px){.v2 .f50 .f50-copy,.v2 .f50.rev .f50-copy{order:0}.v2 .f50 .f50-media,.v2 .f50.rev .f50-media{order:1}}
.v2 .f50-copy{max-width:560px}
.v2 .f50.rev .f50-copy{margin-inline-start:auto}
.v2 .f50 h2{font:800 clamp(1.65rem,2.6vw,2.2rem)/1.12 var(--head);letter-spacing:-.03em;color:var(--ink);text-wrap:balance;margin:0}
.v2 .band.dark .f50 h2{color:#fff}
.v2 .f50 .h2b{display:inline}
@media(max-width:520px){.v2 .f50 .h2b{display:none}}
.v2 .f50-lead{color:var(--mut);font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.6;margin:16px 0 22px;max-width:42ch}
.v2 .band.dark .f50-lead{color:#9FBACD}
.v2 .f50-list{list-style:none;display:grid;gap:12px;margin:0 0 26px}
.v2 .f50-list li{display:flex;align-items:flex-start;gap:11px;font-size:.99rem;line-height:1.45;color:#294357}
.v2 .band.dark .f50-list li{color:#CFE0EC}
.v2 .f50-list li i{flex:0 0 auto;width:20px;text-align:center;margin-top:3px;color:var(--aqua2);font-weight:300}
.v2 .band.dark .f50-list li i{color:var(--cyan)}

/* ---- clean MEDIA FRAME (browser chrome + screenshot/video placeholder) ---- */
.v2 .mediaframe{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 36px 78px -40px rgba(12,50,75,.5);width:100%}
.v2 .band.dark .mediaframe,.v2 .band.darkg .mediaframe{border-color:var(--dline);box-shadow:0 44px 96px -42px rgba(0,0,0,.7)}
.v2 .mf-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:#EEF3F8;border-bottom:1px solid #E1EAF2}
.v2 .mf-bar .bd{width:9px;height:9px;border-radius:50%;background:#CBD8E4;flex:0 0 auto}
.v2 .mf-url{margin-inline-start:10px;display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);color:#5B7285;background:#fff;border:1px solid #E1EAF2;border-radius:7px;padding:5px 10px;unicode-bidi:plaintext;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2 .mf-url i{font-size:9px;color:#8AA1B4;flex:0 0 auto}
.v2 .mf-stage{aspect-ratio:16/10;position:relative;display:grid;place-items:center;background:linear-gradient(150deg,#F4FAFE,#FDF2F7)}
.v2 .mf-ph{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;padding:22px}
.v2 .mf-ico{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--aqua) 0%,var(--aqua) 28%,var(--pink) 100%);box-shadow:0 16px 34px -12px rgba(255,77,141,.45)}
.v2 .mediaframe.is-video .mf-ico{background:rgba(9,26,37,.92);box-shadow:0 16px 34px -12px rgba(8,24,38,.5)}
.v2 .mf-lb{font:800 clamp(.98rem,1.3vw,1.18rem)/1.28 var(--head);color:var(--ink);letter-spacing:-.01em;max-width:24ch}
.v2 .mf-hint{font:800 9.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.v2 .mf-stage>img,.v2 .mf-stage>video{display:block;width:100%;height:100%;object-fit:cover}
.v2 .mf-video{background:#0B1E2E}

/* ---- spine on DARK: light text for the beat cards ---- */
.v2 .band.dark .simple3 .beat h3{color:#fff}
.v2 .band.dark .simple3 .beat p{color:#9FBACD}
.v2 .band.dark .simple3 .beat .bn{color:#5E7A90}
.v2 .band.dark .simple3 .beat>i{color:var(--cyan);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.v2 .band.dark .simple3 .beat:nth-child(3)>i{color:var(--pink2)}