/* ───────────────────────────────────────────────────────────
   Torax home v3 — "studio composer" layout
   Hero with animated generate composer, model marquee,
   filterable node cards with tilt + spotlight, prompt wall.
   ─────────────────────────────────────────────────────────── */
:root{
  /* the announcement bar only exists on pages that render it; --annc-h
     collapses to 0 elsewhere so the nav and hero don't reserve its band */
  --annc-h:0px;
  --s950:#070708; --s900:#000; --s850:#101012; --s800:#151517; --s750:#1B1B1E;
  --s700:#26262A; --s600:#33333A;
  --t100:#FFFFFF; --t200:#E7E7E4; --t300:#9C9C9C; --t400:#7A7A7A; --t500:#5A5A5A;
  --accent:#A1EB1A;
  --gvw:1200px;
  --gvgap:clamp(80px,10vw,150px);
  --ease:cubic-bezier(.22,1,.36,1);
}
@property --hx-a{syntax:'<angle>';initial-value:0deg;inherits:false}

.gv{max-width:var(--gvw);margin:0 auto;display:flex;flex-direction:column;
  gap:var(--gvgap);padding:var(--gvgap) clamp(18px,4vw,24px) 96px}
.gv h1,.gv h2,.gv h3,.gv h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em}
.gv figure{margin:0}
.gv img,.gv video{display:block}
.gv p{color:var(--t300)}

/* announcement bar ------------------------------------------------------ */
.gv-annc{position:fixed;top:0;left:0;right:0;z-index:76;height:40px;
  background:#141416;color:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(16px,2.5vw,40px)}
.gv-annc-l{display:flex;align-items:center;gap:12px;min-width:0}
.gv-annc-badge{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
.gv-annc-l p{color:#c9c9c9;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-annc-r{display:flex;align-items:center;gap:14px}
.gv-annc-cta{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.gv-annc-r button{background:none;border:0;color:var(--t400);font-size:14px;cursor:pointer;padding:4px}
.gv-annc-r button:hover{color:#fff}
body:has(.gv-annc){--annc-h:40px}
body.annc-off{--annc-h:0px}
body.annc-off .gv-annc{display:none}
#nav{top:var(--annc-h)}

/* shared headings -------------------------------------------------------- */
.gv-kick{font-size:13.5px;font-weight:600;color:var(--lime);display:block;text-align:center}
.gv-h2{margin-top:10px;text-align:center;color:var(--t100);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1}
.gv-sub{margin:14px auto 0;max-width:60ch;text-align:center;font-size:15.5px;line-height:1.65}
.gv-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.gv-kick.left,.gv-h2.left,.gv-sub.left{text-align:left;margin-left:0}
.hx-head{display:flex;flex-direction:column;align-items:center}
.hx-head.row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hx-head.row>div{max-width:640px}
.hx-head.row .pill-ghost{margin-bottom:4px}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hx-hero{position:relative;overflow:hidden;background:var(--s900);
  padding:calc(var(--annc-h) + 128px) clamp(18px,4vw,24px) 0}
body.annc-off .hx-hero{padding-top:128px}

.hx-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hx-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.9;will-change:transform;mix-blend-mode:screen}
.hx-orb.o1{width:46vw;height:46vw;max-width:720px;max-height:720px;left:-8%;top:-22%;background:radial-gradient(circle,rgba(161,235,26,.55),transparent 66%);animation:hx-orb-a 18s ease-in-out infinite alternate}
.hx-orb.o2{width:40vw;height:40vw;max-width:640px;max-height:640px;right:-10%;top:-10%;background:radial-gradient(circle,rgba(120,199,239,.5),transparent 66%);animation:hx-orb-b 22s ease-in-out infinite alternate}
.hx-orb.o3{width:30vw;height:30vw;max-width:520px;max-height:520px;left:38%;top:34%;background:radial-gradient(circle,rgba(127,149,248,.45),transparent 66%);animation:hx-orb-c 16s ease-in-out infinite alternate}
@keyframes hx-orb-a{to{transform:translate(14%,22%) scale(1.12)}}
@keyframes hx-orb-b{to{transform:translate(-16%,18%) scale(.92)}}
@keyframes hx-orb-c{to{transform:translate(-22%,-18%) scale(1.18)}}
.hx-mesh{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}
.hx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--s900))}

.hx-hero-inner{position:relative;z-index:1;width:100%;max-width:var(--gvw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}

/* load-in choreography */
.hx-load{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
body.hx-ready .hx-load{opacity:1;transform:none}
.hx-h1 .w{display:inline-block;opacity:0;transform:translateY(110%) rotate(2deg);
  transition:opacity .7s var(--ease) calc(.12s + var(--i) * .06s),transform .7s var(--ease) calc(.12s + var(--i) * .06s)}
.hx-h1{overflow:hidden;padding-bottom:.08em}
body.hx-ready .hx-h1 .w{opacity:1;transform:none}

.hx-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:500;color:var(--t200);transition:border-color .2s,color .2s}
.hx-pill:hover{border-color:rgba(161,235,26,.6);color:#fff}
.hx-pill svg{transition:transform .2s}
.hx-pill:hover svg{transform:translateX(3px)}
.hx-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.hx-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--lime);animation:hx-ping 1.8s ease-out infinite}
@keyframes hx-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}

.hx-h1{margin-top:22px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(2.4rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.hx-sub{margin:18px auto 0;max-width:60ch;color:var(--t200);font-size:clamp(15px,1.4vw,17px);line-height:1.65}

/* composer --------------------------------------------------------------- */
.hx-composer{position:relative;width:100%;max-width:780px;margin:clamp(28px,4vh,40px) auto 0;border-radius:22px;isolation:isolate}
.hx-composer::before,.hx-composer::after{content:"";position:absolute;inset:-1px;border-radius:23px;pointer-events:none;
  background:conic-gradient(from var(--hx-a),transparent 0deg,transparent 200deg,rgba(120,199,239,.85) 250deg,var(--lime) 290deg,rgba(218,204,250,.8) 320deg,transparent 360deg);
  animation:hx-spin 7s linear infinite}
.hx-composer::before{z-index:-1;opacity:.9}
.hx-composer::after{z-index:-2;filter:blur(22px);opacity:.35;transition:opacity .4s}
.hx-composer:focus-within::after,.hx-composer.pulse::after{opacity:.75}
.hx-composer:focus-within::before,.hx-composer:focus-within::after{animation-duration:3.5s}
@keyframes hx-spin{to{--hx-a:360deg}}
.hx-composer.shake{animation:hx-shake .4s var(--ease)}
@keyframes hx-shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.hx-composer.pulse .hx-form{box-shadow:0 0 0 2px rgba(161,235,26,.5),0 30px 80px rgba(0,0,0,.6)}

.hx-form{position:relative;border-radius:22px;background:rgba(10,10,12,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  padding:10px 10px 10px;text-align:left;transition:box-shadow .3s}

.hx-modes{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin:0 0 6px 2px}
.hx-modes-ind{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:8px;background:rgba(255,255,255,.14);
  transition:left .35s var(--ease),width .35s var(--ease);pointer-events:none}
.hx-mode{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--t300);font-size:13px;font-weight:500;cursor:pointer;transition:color .2s;white-space:nowrap}
.hx-mode svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hx-mode:hover{color:var(--t100)}
.hx-mode.on{color:#fff}

.hx-field{position:relative;padding:4px 8px 2px}
.hx-input{display:block;width:100%;min-height:58px;max-height:200px;resize:none;border:0;outline:0;background:none;
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.5;color:#fff;padding:6px 0;overflow-y:auto}
.hx-input::placeholder{color:var(--t400)}
.hx-ghost{position:absolute;left:8px;top:10px;right:8px;pointer-events:none;font-size:16px;line-height:1.5;color:var(--t400);
  white-space:pre-wrap;transition:opacity .2s}
.hx-ghost b{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--lime);animation:hx-caret 1s steps(2) infinite;border-radius:1px}
@keyframes hx-caret{50%{opacity:0}}
.hx-ghost.off{opacity:0}
.hx-attached{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 6px}
.hx-attached span{display:inline-flex;align-items:center;gap:6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;color:var(--t200);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:7px;
  animation:hx-pop .3s var(--ease)}
.hx-attached span i{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:none}
.hx-attached span button{border:0;background:none;color:var(--t400);cursor:pointer;font-size:12px;padding:0 0 0 2px}
.hx-attached span button:hover{color:#fff}
@keyframes hx-pop{from{transform:scale(.85);opacity:0}}

.hx-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 0}
.hx-tools-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.hx-tool{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--t300);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;line-height:1}
.hx-tool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hx-tool:hover{background:rgba(255,255,255,.07);color:#fff}
.hx-tool.hidden-mode{display:none}
.hx-cycle span{display:inline-block;min-width:2.4em}
.hx-cycle.flip span{animation:hx-flip .32s var(--ease)}
@keyframes hx-flip{0%{transform:translateY(-8px);opacity:0}100%{transform:none;opacity:1}}

.hx-select{position:relative}
.hx-select-btn .chev{width:12px;height:12px;transition:transform .25s}
.hx-select.open .hx-select-btn{background:rgba(255,255,255,.08);color:#fff}
.hx-select.open .chev{transform:rotate(180deg)}
.hx-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:20;min-width:230px;list-style:none;padding:5px;margin:0;
  border-radius:12px;background:rgba(16,16,18,.96);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.hx-select.open .hx-menu{opacity:1;transform:none;pointer-events:auto}
.hx-menu li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--t200);transition:background .15s}
.hx-menu li b{font-weight:600;color:#fff}
.hx-menu li span{font-size:11.5px;color:var(--t400);white-space:nowrap}
.hx-menu li:hover,.hx-menu li:focus-visible{background:rgba(255,255,255,.07);outline:0}
.hx-menu li.on{background:rgba(161,235,26,.1)}
.hx-menu li.on b{color:var(--lime)}

.hx-send{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:#000;padding:11px 12px 11px 16px;border-radius:11px;
  background:var(--accent);transition:transform .2s var(--ease),box-shadow .2s,background .2s;
  box-shadow:0 0 0 0 rgba(161,235,26,.0)}
.hx-send svg{width:16px;height:16px;fill:currentColor}
.hx-send kbd{font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.14);color:rgba(0,0,0,.7);line-height:1}
.hx-send::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:hx-sheen 4.5s ease-in-out infinite}
@keyframes hx-sheen{0%,60%{left:-60%}100%{left:140%}}
.hx-send:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(161,235,26,.35)}
.hx-send:active{transform:translateY(0) scale(.98)}
.hx-send.busy{pointer-events:none;background:#c9f56b}
.hx-send.busy svg{animation:hx-rot 1s linear infinite}
@keyframes hx-rot{to{transform:rotate(360deg)}}

.hx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px;max-width:820px;min-height:34px}
.hx-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t300);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 13px;
  transition:color .2s,border-color .2s,background .2s,transform .5s var(--ease),opacity .5s var(--ease);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(8px)}
.hx-chip.in{opacity:1;transform:none}
.hx-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--t500);flex:none;transition:background .2s}
.hx-chip:hover{color:#fff;border-color:rgba(161,235,26,.5);background:rgba(161,235,26,.06)}
.hx-chip:hover::before{background:var(--lime)}

.hx-hero-links{display:flex;align-items:center;gap:14px;margin-top:26px}
.hx-textlink{font-size:13.5px;font-weight:500;color:var(--t300);transition:color .2s}
.hx-textlink:hover{color:#fff}
.hx-sep{width:1px;height:12px;background:rgba(255,255,255,.18)}

/* model marquee ----------------------------------------------------------- */
.hx-marquee{position:relative;z-index:1;display:flex;align-items:center;gap:22px;max-width:var(--gvw);margin:clamp(40px,7vh,72px) auto 0;
  padding:18px 0 34px;border-top:1px solid rgba(255,255,255,.07)}
.hx-marquee-label{flex:none;font-size:12px;font-weight:600;color:var(--t400);letter-spacing:.02em;text-transform:uppercase}
.hx-marquee-track{position:relative;flex:1;min-width:0;display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hx-marquee-row{display:flex;gap:10px;padding-right:10px;flex:none;animation:hx-marq 48s linear infinite}
.hx-marquee-track:hover .hx-marquee-row{animation-play-state:paused}
@keyframes hx-marq{to{transform:translateX(-100%)}}
.hx-model{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:9px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);white-space:nowrap;transition:border-color .2s,background .2s}
.hx-model:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.hx-model b{font-size:13px;font-weight:600;color:var(--t200)}
.hx-model i{font-style:normal;font-size:11.5px;color:var(--t500)}

/* ── NODE CARDS ───────────────────────────────────────────────────────── */
.hx-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:26px}
.hx-filter{font-size:13px;font-weight:500;color:var(--t300);cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;
  padding:8px 14px;border-radius:999px;transition:color .2s,border-color .2s,background .2s}
.hx-filter:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.hx-filter.on{color:#000;background:#fff;border-color:#fff}

.hx-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px;perspective:1200px}
.hx-card{--tint:var(--peri);--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  position:relative;display:block;aspect-ratio:4/3.1;border-radius:18px;overflow:hidden;background:var(--s850);
  border:1px solid rgba(255,255,255,.08);transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease),border-color .3s,box-shadow .4s,opacity .4s var(--ease);will-change:transform;transform-style:preserve-3d}
.hx-card.tilting{transition:border-color .3s,box-shadow .4s}
.hx-card[data-group="story"]{--tint:var(--peri)}
.hx-card[data-group="image"],.hx-card[data-group="board"]{--tint:var(--sky)}
.hx-card[data-group="video"],.hx-card[data-group="output"]{--tint:var(--lime)}
.hx-card[data-group="audio"]{--tint:var(--lilac)}
.hx-card:hover{border-color:color-mix(in srgb,var(--tint) 55%,transparent);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--tint) 20%,transparent)}
.hx-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hx-card.hide{display:none}
.hx-card.swap{animation:hx-swap .5s var(--ease) both}
@keyframes hx-swap{from{opacity:0;transform:translateY(14px) scale(.98)}}

.hx-card-media{position:absolute;inset:0}
.hx-card-media video,.hx-card-media img{width:100%;height:100%;object-fit:cover;opacity:.72;transform:scale(1.03);
  transition:transform 1s var(--ease),opacity .5s,filter .4s}
.hx-card:hover .hx-card-media video,.hx-card:hover .hx-card-media img{opacity:.9;transform:scale(1.09);filter:brightness(.62) saturate(1.05)}
.hx-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 65%)}
.hx-card:hover::before{opacity:1}
.hx-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.06) 78%);transition:background .35s}
.hx-card:hover::after{background:linear-gradient(to top,rgba(0,0,0,.96) 12%,rgba(0,0,0,.78) 55%,rgba(0,0,0,.35) 100%)}

.hx-card-top{position:absolute;z-index:3;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hx-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:7px;background:var(--tint,#fff);color:#000;font-size:12px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.hx-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:7px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}

.hx-card-body{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:18px 18px 18px;transform:translateY(0);transition:transform .45s var(--ease)}
.hx-glyph{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;font-size:14px;margin-bottom:10px}
.hx-card h3{font-size:17px;color:#fff;line-height:1.25;letter-spacing:-.015em;max-width:22ch}
.hx-card-more{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(6px);transition:grid-template-rows .45s var(--ease),opacity .35s,transform .45s var(--ease)}
.hx-card-more>*{min-height:0}
.hx-card:hover .hx-card-more,.hx-card:focus-visible .hx-card-more{grid-template-rows:1fr;opacity:1;transform:none}
.hx-card p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--t200);max-width:44ch}
.hx-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--tint)}
.hx-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hx-card:hover .hx-go svg{transform:translateX(3px)}
.hx-arrow{position:absolute;z-index:4;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:#fff;color:#000;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(6px,6px) scale(.8);transition:opacity .3s,transform .4s var(--ease)}
.hx-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hx-card:hover .hx-arrow{opacity:1;transform:none}

/* ── PROMPT WALL ──────────────────────────────────────────────────────── */
.hx-wall{columns:4 240px;column-gap:14px;margin-top:34px}
.hx-tile{--tint:#fff;position:relative;display:block;border-radius:16px;overflow:hidden;margin-bottom:14px;break-inside:avoid;
  border:1px solid rgba(255,255,255,.08);background:var(--s850);transition:border-color .3s,transform .4s var(--ease)}
.hx-tile:hover{border-color:rgba(255,255,255,.25);transform:translateY(-3px)}
.hx-tile video,.hx-tile img{width:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .4s}
.hx-tile.t-tall video{aspect-ratio:3/4.2}
.hx-tile.t-sq video{aspect-ratio:1/1}
.hx-tile.t-wide video{aspect-ratio:16/9.6}
.hx-tile:hover video{transform:scale(1.06);filter:brightness(.5) saturate(1.1)}
.hx-tile .hx-tag{position:absolute;z-index:3;top:12px;left:12px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);box-shadow:none}
.hx-tile-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:34px 14px 13px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);transition:opacity .3s,transform .4s var(--ease)}
.hx-tile-bar h4{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:#fff;letter-spacing:0}
.hx-tile-bar span{display:block;margin-top:3px;font-size:11.5px;color:var(--t300)}
.hx-tile:hover .hx-tile-bar{opacity:0;transform:translateY(8px)}
.hx-ov{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.35) 100%);
  opacity:0;transition:opacity .3s}
.hx-ov p{font-size:13px;line-height:1.55;color:#fff;transform:translateY(10px);transition:transform .45s var(--ease);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hx-tile:hover .hx-ov,.hx-tile:focus-within .hx-ov{opacity:1}
.hx-tile:hover .hx-ov p{transform:none}
.hx-use{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:#000;background:#fff;padding:9px 13px;border-radius:9px;
  transform:translateY(12px);opacity:0;transition:transform .45s var(--ease) .05s,opacity .3s .05s,background .2s}
.hx-use svg{width:13px;height:13px;fill:currentColor}
.hx-tile:hover .hx-use,.hx-tile:focus-within .hx-use{transform:none;opacity:1}
.hx-use:hover{background:var(--lime)}
.hx-use.done{background:var(--lime)}

/* ── SPLIT SECTIONS (carried over) ───────────────────────────────────── */
.gv-split{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;justify-items:center}
.gv-split-vis{position:relative;width:auto;justify-self:stretch;border-radius:16px;overflow:hidden;aspect-ratio:5/4;background:var(--s950);border:1px solid rgba(255,255,255,.07)}
.gv-split-vis video,.gv-split-vis img{width:100%;height:100%;object-fit:cover;opacity:.8}
.gv-split-vis figcaption{position:absolute;left:12px;bottom:12px;z-index:3;font-size:12px;color:var(--t200);
  background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.12);padding:5px 9px;border-radius:6px}
.gv-split-body{width:100%}
.gv-split-body .gv-kick,.gv-split-body .gv-h2,.gv-split-body .gv-sub{text-align:left;margin-left:0}
.gv-split-body .gv-h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.gv-split-body .gv-sub{max-width:52ch}
.gv-list{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.gv-list li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--t300);line-height:1.55}
.gv-list li::before{content:"";flex:none;margin-top:9px;width:12px;height:1px;background:var(--lime)}
.gv-split-body .gv-actions{justify-content:flex-start;margin-top:26px}
@media(min-width:1000px){
  .gv-split{grid-template-columns:1fr 1.35fr;gap:48px}
  .gv-split.flip .gv-split-vis{order:2}
  .gv-split.flip{grid-template-columns:1.35fr 1fr}
  .gv-split:not(.flip) .gv-split-vis{margin-left:calc(-1 * max(0px, min(120px, (100vw - var(--gvw)) / 2 - 12px)))}
  .gv-split.flip .gv-split-vis{margin-right:calc(-1 * max(0px, min(120px, (100vw - var(--gvw)) / 2 - 12px)))}
}

.gv-splitvis{--p:0;background:#0B0B0C;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:22px 22px}
.gv-sv-src,.gv-sv-ep{position:absolute;border-radius:9px;background:#141416;border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.4);will-change:transform,left,top}
.gv-sv-src{width:44%;padding:0 0 14px;left:calc(50% - var(--p) * 33%);top:50%;
  transform:translate(-50%,-50%) scale(calc(1 - var(--p) * .42))}
.gv-sv-src i,.gv-sv-ep i{font-style:normal;font-size:11.5px;font-weight:600;color:#000;background:var(--peri);padding:6px 10px;border-radius:8px 8px 0 0}
.gv-sv-src b{margin:12px 12px 0;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:#fff;letter-spacing:-.01em}
.gv-sv-src span{margin:4px 12px 0;font-size:11.5px;color:var(--t400)}
.gv-sv-src em{display:block;height:2px;margin:9px 12px 0;border-radius:2px;background:rgba(255,255,255,.14)}
.gv-sv-src em:nth-of-type(1){width:70%}.gv-sv-src em:nth-of-type(2){width:52%}.gv-sv-src em:nth-of-type(3){width:62%}
.gv-sv-ep{width:23%;opacity:var(--p);
  left:calc(50% + var(--p) * (var(--ex) - 50%));top:calc(50% + var(--p) * (var(--ey) - 50%));
  transform:translate(-50%,-50%) scale(calc(.55 + var(--p) * .45))}
.gv-sv-ep i{font-size:10.5px;padding:4px 8px}
.gv-sv-ep span{padding:7px 8px 8px;font-size:11px;color:#e7e7e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-sv-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gv-sv-wires path{fill:none;stroke:var(--peri);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - max(0, (var(--p) - .45) / .55));opacity:calc((var(--p) - .3) * 2)}

/* ── STEPS (light band) ───────────────────────────────────────────────── */
.gv section.light{--white:#000;position:relative;background:var(--cream);color:#000;
  box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);padding:clamp(52px,7vw,92px) 0}
.gv section.light .gv-h2,.gv section.light .gv-step h3{color:#000}
.gv section.light .gv-sub,.gv section.light .gv-step p{color:#4a4a46}
.gv section.light .gv-kick{display:table;margin-inline:auto;color:#000;background:var(--lime);padding:5px 10px;border-radius:7px;font-size:12.5px}
.gv section.light .pill-ghost{color:#000;border-color:rgba(0,0,0,.35)}
.gv section.light .pill-ghost:hover{color:#000;border-color:#000}
.gv section.light .lw{color:#000;background:var(--lime);padding:0 .14em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.gv-steps{--p:0;position:relative;margin:40px auto 0;display:grid;grid-template-columns:1fr;gap:26px;max-width:1120px;padding-left:26px}
.gv-steps::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:rgba(0,0,0,.16)}
.gv-steps::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--lime);
  transform:scaleY(var(--p));transform-origin:center top;transition:transform .15s linear}
.gv-step{--c:var(--lime);position:relative}
.gv-step::before{content:"";position:absolute;left:-26px;top:6px;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(0,0,0,.35);background:#fff;transition:border-color .2s,background .2s}
.gv-step.lit::before{background:var(--lime);border-color:var(--lime)}
.gv-step b{font-size:12px;font-weight:600;color:#000;background:rgba(0,0,0,.08);display:inline-flex;padding:4px 9px;border-radius:6px;transition:background .3s}
.gv-step.lit b{background:var(--lime)}
.gv-step h3{margin-top:10px;font-size:19px}
.gv-step p{margin-top:8px;font-size:13.5px;line-height:1.6}
@media(min-width:760px){
  .gv-steps{grid-template-columns:repeat(4,1fr);gap:0 34px;padding:30px 0 0}
  .gv-steps::before,.gv-steps::after{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .gv-steps::after{transform:scaleX(var(--p));transform-origin:left center}
  .gv-step::before{left:0;top:-30px;margin-top:-6px}
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.gv-faq{margin:32px auto 0;width:100%;max-width:820px;border-top:1px solid var(--s700)}
.gv-faq details{border-bottom:1px solid var(--s700)}
.gv-faq summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-size:16px;font-weight:600;color:var(--t200);transition:.2s}
.gv-faq summary::-webkit-details-marker{display:none}
.gv-faq summary:hover{color:var(--t100)}
.gv-faq summary::after{content:"+";flex:none;font-size:19px;font-weight:400;color:var(--lime);transition:.2s}
.gv-faq details[open] summary{color:#fff}
.gv-faq details[open] summary::after{transform:rotate(45deg)}
.gv-faq p{padding:0 4px 22px;font-size:14px;line-height:1.7;color:var(--t300);max-width:70ch}

/* ── CLOSING ──────────────────────────────────────────────────────────── */
.gv-close{position:relative;overflow:hidden;border-radius:20px;text-align:center;padding:clamp(56px,8vw,104px) clamp(22px,5vw,60px);
  background:linear-gradient(115deg,#fff 0%,#eaf8c6 30%,var(--lime) 68%);background-size:160% 160%;background-position:0% 50%;
  animation:gv-spectrum 9s ease-in-out infinite alternate}
@keyframes gv-spectrum{to{background-position:100% 50%}}
.gv-close::before,.gv-close::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;will-change:transform}
.gv-close::before{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-12%;top:-40%;background:rgba(255,255,255,.55);animation:gv-drift-a 14s ease-in-out infinite alternate}
.gv-close::after{width:34vw;height:34vw;max-width:460px;max-height:460px;right:-8%;bottom:-45%;background:rgba(161,235,26,.75);animation:gv-drift-b 11s ease-in-out infinite alternate}
@keyframes gv-drift-a{to{transform:translate(18%,22%)}}
@keyframes gv-drift-b{to{transform:translate(-22%,-26%)}}
.gv-close>*{position:relative;z-index:1}
.gv-close .gv-kick,.gv-close h2{color:#000}
.gv-close h2{margin-top:12px;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.03em;line-height:1.05;max-width:18ch;margin-inline:auto}
.gv-close .gv-kick{display:inline-flex;color:var(--lime);background:#000;padding:5px 11px;border-radius:7px;font-size:12.5px;text-align:left}
.gv-close .gv-sub{color:rgba(0,0,0,.72);font-size:16.5px}
.gv-close .gv-actions a{transition:transform .2s ease,background .18s,border-color .18s}
.gv-close .gv-actions a:hover{transform:translateY(-2px)}
.gv-close .btn-brand{background:#000;color:#fff}
.gv-close .btn-brand:hover{background:#222}
.gv-close .pill-ghost{color:#000;border-color:rgba(0,0,0,.4)}
.gv-close .pill-ghost:hover{border-color:#000;color:#000}

/* ── SCROLL REVEAL ────────────────────────────────────────────────────── */
.up{opacity:0;transform:translateY(14px)}
.up.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.gv-h2.up{--d:.05s}
.gv-sub.up{--d:.1s}
.gv-faq.up{--d:.1s}
.gv-actions.up{--d:.5s}
.gv-split>.up:nth-child(2){--d:.12s}
.gv-steps>.up:nth-child(1){--d:.1s}
.gv-steps>.up:nth-child(2){--d:.2s}
.gv-steps>.up:nth-child(3){--d:.3s}
.gv-steps>.up:nth-child(4){--d:.4s}
.hx-card.up.in{transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),border-color .3s,box-shadow .4s}
.hx-card.up.in.tilting{transition:border-color .3s,box-shadow .4s}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(min-width:680px){
  .hx-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  .hx-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .gv-annc-l p{display:none}
  .hx-hero{padding-left:14px;padding-right:14px}
  .hx-h1{font-size:clamp(2rem,10vw,2.8rem)}
  .hx-form{padding:8px}
  .hx-modes{width:100%;display:flex}
  .hx-mode{flex:1;justify-content:center;padding:8px 6px;font-size:12.5px}
  .hx-tools{flex-wrap:wrap}
  .hx-tools-l{order:2;width:100%;justify-content:flex-start;gap:2px}
  .hx-send{order:1;width:100%;justify-content:center}
  .hx-tool span{display:none}
  .hx-tool.hx-select-btn span,.hx-cycle span{display:inline}
  .hx-input{font-size:15px;min-height:70px}
  .hx-ghost{font-size:15px}
  .hx-chip{font-size:12px;padding:6px 11px}
  .hx-marquee{gap:12px;flex-direction:column;align-items:flex-start}
  .hx-wall{columns:2 150px;column-gap:10px}
  .hx-tile{margin-bottom:10px;border-radius:12px}
  .hx-ov p{font-size:12px}
  .hx-head.row .pill-ghost{display:none}
}
@media(hover:none){
  .hx-card-more{grid-template-rows:1fr;opacity:1;transform:none}
  .hx-card::after{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.1) 80%)}
  .hx-tile .hx-ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 70%)}
  .hx-tile .hx-ov p,.hx-tile .hx-use{transform:none;opacity:1}
  .hx-tile-bar{display:none}
}
@media(max-height:560px) and (orientation:landscape){
  .hx-hero{padding-top:calc(var(--annc-h) + 88px)}
}
@media(prefers-reduced-motion:reduce){
  .hx-load,.hx-h1 .w,.up,.hx-chip{opacity:1;transform:none;transition:none}
  .hx-composer::before,.hx-composer::after,.hx-orb,.hx-send::after,.hx-marquee-row,.hx-dot::after,.gv-close,.gv-close::before,.gv-close::after{animation:none}
  .hx-card,.hx-tile{transform:none!important}
  .gv-splitvis,.gv-steps{--p:1!important}
  .gv-sv-src,.gv-sv-ep,.gv-steps::after{transition:none}
}