/* ============== HSBR INTRO ANIMATION — SHARED ============== */
#hsbr-intro{
  position:fixed; inset:0; z-index:9999; background:#0b0a08; color:#f4f3ee;
  font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:13px; line-height:1.55;
  overflow:hidden; isolation:isolate;
  opacity:1; transition:opacity .9s cubic-bezier(.7,0,.3,1);
}
#hsbr-intro.gone{ opacity:0; pointer-events:none; }
html.intro-locked, body.intro-locked{ overflow:hidden; }

/* shared chrome (top bar + bottom progress) */
.intro-top, .intro-bot{
  position:absolute; left:0; right:0; z-index:3; padding:22px clamp(20px,4vw,56px);
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,243,238,0.55);
}
.intro-top{ top:0; }
.intro-bot{ bottom:0; border-top:1px solid rgba(255,255,255,0.06); padding-top:14px; padding-bottom:16px; }
.intro-top .lhs{ display:flex; gap:18px; align-items:center; }
.intro-top .dot{ width:8px; height:8px; border-radius:50%; background:#ff5b1f; box-shadow:0 0 0 4px rgba(255,91,31,0.18); animation:introPulse 1.6s ease-in-out infinite; }
@keyframes introPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.intro-skip{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
  color:rgba(244,243,238,0.7); padding:7px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  transition:.2s; backdrop-filter:blur(6px);
}
.intro-skip:hover{ color:#fff; border-color:rgba(255,91,31,0.6); background:rgba(255,91,31,0.08); }
.intro-bot .phase{ color:#f4f3ee; }
.intro-bot .bar{ flex:1; height:3px; margin:0 18px; background:rgba(255,255,255,0.06); border-radius:2px; position:relative; overflow:hidden; }
.intro-bot .bar i{ position:absolute; inset:0; right:auto; background:linear-gradient(90deg,#ff5b1f,#ffbd2e); width:0; border-radius:2px; transition:width .35s ease; box-shadow:0 0 12px rgba(255,91,31,0.5); }

/* logo reveal — shared */
.intro-logo{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  background:radial-gradient(ellipse at center, rgba(11,10,8,0.92) 30%, rgba(11,10,8,0.6) 70%);
}
.intro-logo.show{ opacity:1; }
.intro-logo .wrap{ text-align:center; position:relative; z-index:1; }
.intro-logo .mark{
  font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:300;
  font-size:clamp(56px,11vw,148px); letter-spacing:-0.04em; line-height:0.9; color:#f4f3ee;
}
.intro-logo .mark .h{ color:#ff5b1f; font-weight:500; }
.intro-logo .mark em{ font-family:'Newsreader',serif; font-style:italic; font-weight:500; }
.intro-logo .sub{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.32em; text-transform:uppercase; color:rgba(244,243,238,0.55); }
.intro-logo .ring{
  width:clamp(220px,32vw,360px); height:clamp(220px,32vw,360px);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px dashed rgba(255,91,31,0.5); border-radius:50%;
  animation:ringSpin 14s linear infinite;
}
.intro-logo .ring::before{ content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:#ff5b1f; border-radius:50%; box-shadow:0 0 14px rgba(255,91,31,0.8); }
@keyframes ringSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* ============== VARIANT A — /boot (terminal + graph) ============== */
#hsbr-intro.va-A::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,91,31,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,91,31,0.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(ellipse 70% 60% at 50% 50%,#000 35%,transparent 80%);
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 50%,#000 35%,transparent 80%);
}
#hsbr-intro.va-A::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 70% 30%, rgba(255,91,31,0.18), transparent 60%),
             radial-gradient(ellipse 40% 50% at 25% 75%, rgba(80,140,255,0.10), transparent 60%);
  filter:blur(40px); animation:introBlobs 6s ease-in-out infinite alternate;
}
@keyframes introBlobs{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-3%,2%) scale(1.08)} }
.va-A .va-stage{ position:absolute; inset:74px 0 64px; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3vw,44px); padding:0 clamp(20px,4vw,56px); align-items:stretch; }
@media (max-width:780px){ .va-A .va-stage{ grid-template-columns:1fr; } }
.va-A .intro-term, .va-A .intro-graph{
  border:1px solid rgba(255,255,255,0.08); border-radius:14px;
  background:linear-gradient(180deg,rgba(20,18,15,0.7),rgba(11,10,8,0.7));
  backdrop-filter:blur(6px); overflow:hidden; display:flex; flex-direction:column;
}
.va-A .term-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:11px; color:rgba(244,243,238,0.5); letter-spacing:0.12em; text-transform:uppercase; }
.va-A .term-head .tdots{ display:flex; gap:6px; margin-right:10px; }
.va-A .term-head .tdots i{ width:10px; height:10px; border-radius:50%; display:block; }
.va-A .term-head .tdots i:nth-child(1){ background:#ff5f57; } .va-A .term-head .tdots i:nth-child(2){ background:#ffbd2e; } .va-A .term-head .tdots i:nth-child(3){ background:#28c941; }
.va-A .term-body{ padding:18px 20px; flex:1; min-height:240px; white-space:pre-wrap; word-break:break-word; overflow:hidden; }
.va-A .term-body .ln{ display:block; opacity:0; transform:translateY(4px); animation:lnIn .35s ease forwards; }
@keyframes lnIn{ to{ opacity:1; transform:none; } }
.va-A .pmt{color:#ff5b1f}.va-A .cm{color:rgba(244,243,238,0.4)}.va-A .kw{color:#7fb6ff}.va-A .fn{color:#a5e3a5}.va-A .ok{color:#74e08c}.va-A .hot{color:#ff5b1f}.va-A .mut{color:rgba(244,243,238,0.55)}
.va-A .term-cur{ display:inline-block; width:8px; height:1em; background:#ff5b1f; vertical-align:-2px; margin-left:2px; animation:cur .9s steps(2) infinite; }
@keyframes cur{50%{opacity:0}}
.va-A .intro-graph{ padding:18px; }
.va-A .graph-head{ display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,243,238,0.5); margin-bottom:12px; }
.va-A .graph-head b{ color:#f4f3ee; font-weight:600; }
.va-A .graph-canvas{ position:relative; width:100%; flex:1; min-height:220px; }
.va-A .graph-canvas svg{ position:absolute; inset:0; width:100%; height:100%; }
.va-A .edge{ fill:none; stroke:rgba(255,255,255,0.22); stroke-width:1.5; stroke-dasharray:1 4; stroke-linecap:round; opacity:0; transition:opacity .4s ease; }
.va-A .edge.on{ opacity:1; animation:edgeDash 1.4s linear infinite; stroke:rgba(255,91,31,0.85); stroke-dasharray:6 6; }
@keyframes edgeDash{ to{ stroke-dashoffset:-24 } }
.va-A .gn{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 12px; min-width:90px; background:rgba(11,10,8,0.92); border:1px solid rgba(255,255,255,0.12); border-radius:10px; font-size:11px; opacity:0; transition:transform .5s cubic-bezier(.5,1.8,.4,1), opacity .3s ease, border-color .3s ease; }
.va-A .gn.in{ opacity:1; animation:gnPop .55s cubic-bezier(.4,1.7,.5,1); }
@keyframes gnPop{ 0%{transform:translate(-50%,-50%) scale(.6)} 60%{transform:translate(-50%,-50%) scale(1.08)} 100%{transform:translate(-50%,-50%) scale(1)} }
.va-A .gn.fire{ border-color:#ff5b1f; box-shadow:0 0 0 4px rgba(255,91,31,0.18), 0 0 24px rgba(255,91,31,0.25); }
.va-A .gn i{ font-size:14px; color:#ff5b1f; }
.va-A .gn b{ color:#f4f3ee; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; }
.va-A .gn em{ font-style:normal; color:rgba(244,243,238,0.45); font-size:10px; }

/* ============== VARIANT B — /chat (AI conversation) ============== */
.va-B .va-stage{ position:absolute; inset:74px 0 64px; z-index:2; display:flex; align-items:center; justify-content:center; padding:0 clamp(20px,4vw,56px); }
.va-B .chat{
  width:min(720px,100%); max-height:78vh; padding:28px; border-radius:18px;
  background:linear-gradient(180deg,rgba(20,18,15,0.7),rgba(11,10,8,0.6));
  border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:18px; overflow:hidden;
}
.va-B .chat-head{ display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,243,238,0.5); padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.va-B .chat-head b{ color:#fff; font-weight:600; }
.va-B .chat-head .live{ display:flex; gap:8px; align-items:center; color:#74e08c; }
.va-B .chat-head .live i{ width:8px; height:8px; background:#74e08c; border-radius:50%; box-shadow:0 0 0 4px rgba(116,224,140,0.2); animation:introPulse 1.4s ease-in-out infinite; }
.va-B .msg{ display:flex; gap:14px; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.va-B .msg.in{ opacity:1; transform:none; }
.va-B .avatar{ flex-shrink:0; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14px; }
.va-B .msg.user .avatar{ background:rgba(255,255,255,0.08); color:#fff; }
.va-B .msg.ai .avatar{ background:linear-gradient(135deg,#ff5b1f,#ffbd2e); color:#0b0a08; }
.va-B .msg .bubble{ flex:1; min-width:0; }
.va-B .msg .role{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,243,238,0.45); margin-bottom:4px; }
.va-B .msg .body{ color:#f4f3ee; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.6; }
.va-B .msg.user .body{ color:rgba(244,243,238,0.88); }
.va-B .think{ display:inline-flex; gap:5px; align-items:center; color:rgba(244,243,238,0.55); }
.va-B .think i{ width:6px; height:6px; background:#ff5b1f; border-radius:50%; animation:thinkBob 1.1s ease-in-out infinite; }
.va-B .think i:nth-child(2){ animation-delay:.15s } .va-B .think i:nth-child(3){ animation-delay:.3s }
@keyframes thinkBob{ 0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(-4px); opacity:1} }
.va-B .code{ margin-top:10px; padding:14px 16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; font-size:12px; }
.va-B .code .ln{ display:block; }
.va-B .pmt{color:#ff5b1f}.va-B .cm{color:rgba(244,243,238,0.4)}.va-B .kw{color:#7fb6ff}.va-B .st{color:#d6c98a}.va-B .fn{color:#a5e3a5}.va-B .ok{color:#74e08c}
.va-B .cur{ display:inline-block; width:7px; height:1em; background:#ff5b1f; vertical-align:-2px; margin-left:1px; animation:cur .9s steps(2) infinite; }
.va-B .stack{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.va-B .stack span{ padding:4px 10px; border-radius:999px; background:rgba(255,91,31,0.12); color:#ff5b1f; font-size:11px; letter-spacing:0.06em; border:1px solid rgba(255,91,31,0.3); }

/* ============== VARIANT C — /synth (neural network) ============== */
.va-C{ background:#070605; }
.va-C .va-stage{ position:absolute; inset:0; z-index:1; }
.va-C canvas.synth{ position:absolute; inset:0; width:100%; height:100%; }
.va-C .rain{ position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none; overflow:hidden; }
.va-C .rain .col{
  position:absolute; top:-30%; width:14px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.05;
  color:rgba(116,224,140,0.55); writing-mode:vertical-rl; letter-spacing:.04em;
  text-shadow:0 0 4px rgba(116,224,140,0.35);
  animation:rainFall linear infinite;
}
.va-C .rain .col span{ display:block; }
.va-C .rain .col span:first-child{ color:#fff; text-shadow:0 0 8px #fff; }
@keyframes rainFall{ 0%{transform:translateY(-30vh)} 100%{transform:translateY(130vh)} }
.va-C .va-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  text-align:center; pointer-events:none;
}
.va-C .va-center .label{ font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:rgba(255,91,31,0.85); margin-bottom:18px; }
.va-C .va-center .prompt{
  font-family:'Newsreader',serif; font-style:italic; font-size:clamp(28px,4.4vw,56px); line-height:1.15;
  color:#f4f3ee; max-width:24ch; margin:0 auto;
}
.va-C .va-center .prompt .cur{ display:inline-block; width:.55ch; height:1em; background:#ff5b1f; vertical-align:-2px; margin-left:4px; animation:cur .9s steps(2) infinite; }
.va-C .telem{
  position:absolute; left:0; right:0; bottom:60px; z-index:2;
  display:flex; gap:36px; padding:0 clamp(20px,4vw,56px); justify-content:space-between;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,243,238,0.55);
  font-family:'JetBrains Mono',monospace;
}
.va-C .telem b{ color:#f4f3ee; font-weight:600; }
.va-C .telem .grp{ display:flex; gap:14px; align-items:center; }
.va-C .telem .grp i{ width:6px; height:6px; background:#ff5b1f; border-radius:50%; box-shadow:0 0 8px #ff5b1f; }

/* ============== VARIANT D — /apps (IDE / code editor) ============== */
.va-D .va-stage{ position:absolute; inset:74px 0 64px; z-index:2; padding:0 clamp(20px,4vw,56px); display:flex; align-items:stretch; }
.va-D .ide{ flex:1; display:grid; grid-template-columns:220px 1fr; border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,rgba(20,18,15,0.7),rgba(11,10,8,0.7)); backdrop-filter:blur(6px); }
@media (max-width:780px){ .va-D .ide{ grid-template-columns:1fr; } .va-D .ide-side{ display:none; } }
.va-D .ide-side{ background:rgba(0,0,0,0.25); border-right:1px solid rgba(255,255,255,0.06); padding:14px 0; }
.va-D .ide-side h6{ padding:0 16px 10px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,243,238,0.45); margin:0; border-bottom:1px solid rgba(255,255,255,0.05); margin-bottom:8px; font-weight:600; }
.va-D .tree{ list-style:none; margin:0; padding:0; font-size:12px; }
.va-D .tree li{ padding:5px 16px; color:rgba(244,243,238,0.7); cursor:default; transition:.2s; display:flex; gap:8px; align-items:center; }
.va-D .tree li.l1{ padding-left:24px; }
.va-D .tree li.l2{ padding-left:36px; }
.va-D .tree li i{ font-size:11px; opacity:.6; width:14px; text-align:center; }
.va-D .tree li.active{ background:rgba(255,91,31,0.10); color:#fff; border-left:2px solid #ff5b1f; padding-left:34px; }
.va-D .tree li.active i{ color:#ff5b1f; opacity:1; }
.va-D .tree li.touch{ animation:treeTouch .6s ease; }
@keyframes treeTouch{ 0%{ background:rgba(255,91,31,0.25);} 100%{ background:transparent;} }
.va-D .ide-main{ display:flex; flex-direction:column; min-width:0; }
.va-D .ide-tabs{ display:flex; gap:2px; padding:0 12px; background:rgba(0,0,0,0.2); border-bottom:1px solid rgba(255,255,255,0.06); }
.va-D .ide-tabs span{ padding:9px 14px; font-size:11px; color:rgba(244,243,238,0.55); border-right:1px solid rgba(255,255,255,0.04); }
.va-D .ide-tabs span.on{ background:rgba(11,10,8,0.9); color:#fff; position:relative; }
.va-D .ide-tabs span.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#ff5b1f; }
.va-D .ide-code{ flex:1; padding:18px 22px; font-size:12.5px; line-height:1.65; white-space:pre-wrap; overflow:hidden; min-height:200px; counter-reset:ln; }
.va-D .ide-code .ln{ display:block; opacity:0; transform:translateX(-4px); animation:lnIn .3s ease forwards; padding-left:34px; position:relative; }
.va-D .ide-code .ln::before{ counter-increment:ln; content:counter(ln); position:absolute; left:0; width:24px; text-align:right; color:rgba(244,243,238,0.25); font-size:11px; }
.va-D .ide-out{ border-top:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.3); padding:12px 18px; max-height:130px; overflow:hidden; font-size:11.5px; }
.va-D .ide-out .ln{ display:block; opacity:0; animation:lnIn .3s ease forwards; }
.va-D .pmt{color:#ff5b1f}.va-D .cm{color:rgba(244,243,238,0.42)}.va-D .kw{color:#7fb6ff}.va-D .st{color:#d6c98a}.va-D .fn{color:#a5e3a5}.va-D .ty{color:#c69bff}.va-D .ok{color:#74e08c}.va-D .hot{color:#ff5b1f}.va-D .mut{color:rgba(244,243,238,0.55)}
.va-D .cur{ display:inline-block; width:7px; height:1em; background:#ff5b1f; vertical-align:-2px; margin-left:1px; animation:cur .9s steps(2) infinite; }

/* ============== VARIANT E — /campaign (marketing dashboard) ============== */
.va-E .va-stage{ position:absolute; inset:74px 0 64px; z-index:2; padding:0 clamp(20px,4vw,56px); display:flex; }
.va-E .dash{ flex:1; display:flex; flex-direction:column; gap:18px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:22px 24px; background:linear-gradient(180deg,rgba(20,18,15,0.7),rgba(11,10,8,0.7)); backdrop-filter:blur(6px); overflow:hidden; }
.va-E .dash-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,243,238,0.55); }
.va-E .dash-head .title{ display:flex; gap:14px; align-items:baseline; }
.va-E .dash-head .title b{ font-family:'Bricolage Grotesque',sans-serif; font-size:16px; letter-spacing:-0.01em; color:#fff; text-transform:none; font-weight:500; }
.va-E .dash-head .live{ color:#74e08c; display:flex; gap:8px; align-items:center; }
.va-E .dash-head .live i{ width:8px; height:8px; background:#74e08c; border-radius:50%; box-shadow:0 0 0 4px rgba(116,224,140,0.18); animation:introPulse 1.4s ease-in-out infinite; }
.va-E .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:780px){ .va-E .kpis{ grid-template-columns:repeat(2,1fr); } }
.va-E .kpi{ padding:14px 16px; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:rgba(255,255,255,0.02); }
.va-E .kpi .lbl{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,243,238,0.5); }
.va-E .kpi .num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:300; font-size:32px; line-height:1.1; color:#fff; margin-top:4px; letter-spacing:-0.02em; }
.va-E .kpi .delta{ font-size:11px; color:#74e08c; margin-top:2px; display:flex; gap:5px; align-items:center; }
.va-E .kpi .delta.down{ color:#ff7a7a; }
.va-E .chart{ flex:1; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:18px; min-height:170px; position:relative; }
.va-E .chart .ch-head{ display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,243,238,0.5); margin-bottom:10px; }
.va-E .chart .ch-head b{ color:#fff; font-weight:600; }
.va-E .chart svg{ width:100%; height:140px; display:block; }
.va-E .chart .line{ fill:none; stroke:#ff5b1f; stroke-width:2; stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.6s cubic-bezier(.6,.1,.3,1); filter:drop-shadow(0 0 8px rgba(255,91,31,0.4)); }
.va-E .chart .line.in{ stroke-dashoffset:0; }
.va-E .chart .area{ fill:url(#vaEGrad); opacity:0; transition:opacity .8s ease .8s; }
.va-E .chart .area.in{ opacity:1; }
.va-E .chart .pt{ fill:#ff5b1f; opacity:0; transition:opacity .3s ease; }
.va-E .chart .pt.in{ opacity:1; }
.va-E .chart .grid line{ stroke:rgba(255,255,255,0.06); stroke-width:1; }
.va-E .reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.va-E .reel{ aspect-ratio:16/9; border-radius:10px; position:relative; overflow:hidden; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.va-E .reel.in{ opacity:1; transform:none; }
.va-E .reel:nth-child(1){ background:linear-gradient(135deg,#ff5b1f,#ffbd2e); }
.va-E .reel:nth-child(2){ background:linear-gradient(135deg,#2a2926,#0b0a08); border:1px solid rgba(255,255,255,0.1); }
.va-E .reel:nth-child(3){ background:linear-gradient(135deg,#7fb6ff,#5466ff); }
.va-E .reel .badge{ position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:999px; background:rgba(11,10,8,0.7); color:#fff; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; backdrop-filter:blur(6px); }
.va-E .reel .meta{ position:absolute; bottom:8px; left:8px; right:8px; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:rgba(255,255,255,0.85); letter-spacing:0.1em; text-transform:uppercase; }

/* ============== VARIANT F — /pipeline (data pipeline) ============== */
.va-F .va-stage{ position:absolute; inset:74px 0 64px; z-index:2; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-rows:auto 1fr; gap:18px; }
.va-F .pipe{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:780px){ .va-F .pipe{ grid-template-columns:repeat(2,1fr); } }
.va-F .lane{ position:relative; padding:18px 18px 22px; border:1px solid rgba(255,255,255,0.1); border-radius:12px; background:rgba(20,18,15,0.6); backdrop-filter:blur(6px); min-height:140px; display:flex; flex-direction:column; gap:6px; opacity:0.4; transition:.4s ease; }
.va-F .lane.on{ opacity:1; border-color:rgba(255,91,31,0.5); box-shadow:0 0 0 4px rgba(255,91,31,0.10), 0 0 28px rgba(255,91,31,0.20); }
.va-F .lane.fire{ animation:laneFire .8s ease; }
@keyframes laneFire{ 0%{ background:rgba(255,91,31,0.18); } 100%{ background:rgba(20,18,15,0.6); } }
.va-F .lane .idx{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#ff5b1f; font-family:'JetBrains Mono',monospace; }
.va-F .lane h6{ font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.01em; color:#fff; margin:2px 0 4px; text-transform:none; }
.va-F .lane ul{ list-style:none; margin:0; padding:0; font-size:11px; color:rgba(244,243,238,0.6); line-height:1.7; }
.va-F .lane ul li::before{ content:"·"; margin-right:6px; color:#ff5b1f; }
.va-F .lane .pkt{ position:absolute; right:-9px; top:50%; width:18px; height:18px; transform:translateY(-50%); border-radius:50%; background:#ff5b1f; box-shadow:0 0 14px #ff5b1f, 0 0 0 4px rgba(255,91,31,0.18); opacity:0; z-index:2; }
.va-F .lane:nth-last-child(1) .pkt{ display:none; }
.va-F .lane .pkt.go{ animation:pktGo 1.2s cubic-bezier(.4,.1,.6,1); }
@keyframes pktGo{ 0%{opacity:0; transform:translate(0,-50%) scale(.6);} 30%{opacity:1; transform:translate(8px,-50%) scale(1);} 70%{opacity:1; transform:translate(calc(100% + 8px),-50%) scale(1);} 100%{opacity:0; transform:translate(calc(100% + 24px),-50%) scale(.6);} }
.va-F .log{ border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(11,10,8,0.6); padding:14px 18px; overflow:hidden; font-size:12px; font-family:'JetBrains Mono',monospace; min-height:140px; }
.va-F .log h6{ font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,243,238,0.5); margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.va-F .log h6 .ct{ color:#ff5b1f; }
.va-F .log .ln{ display:flex; gap:14px; padding:3px 0; opacity:0; transform:translateY(4px); animation:lnIn .3s ease forwards; }
.va-F .log .ln .t{ color:rgba(244,243,238,0.4); font-size:11px; width:60px; flex-shrink:0; }
.va-F .log .ln .tag{ font-size:10px; padding:1px 7px; border-radius:4px; background:rgba(255,255,255,0.05); color:rgba(244,243,238,0.6); letter-spacing:0.1em; text-transform:uppercase; flex-shrink:0; }
.va-F .log .ln .tag.ok{ color:#74e08c; background:rgba(116,224,140,0.10); }
.va-F .log .ln .tag.hot{ color:#ff5b1f; background:rgba(255,91,31,0.12); }
.va-F .log .ln .msg{ color:rgba(244,243,238,0.85); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============== RESPONSIVE — all variants ============== */
@media (max-width: 900px){
  #hsbr-intro{ font-size:12px; }
  .intro-top{ padding:16px clamp(14px,4vw,24px); font-size:10px; letter-spacing:0.12em; }
  .intro-bot{ padding:12px clamp(14px,4vw,24px) 14px; font-size:10px; letter-spacing:0.12em; }
  .intro-skip{ padding:6px 11px; font-size:10px; letter-spacing:0.1em; }
  .intro-logo .mark{ font-size:clamp(46px,12vw,96px); }
  .intro-logo .sub{ font-size:10px; letter-spacing:0.24em; }
  .intro-logo .ring{ width:clamp(190px,52vw,260px); height:clamp(190px,52vw,260px); }
  .va-A .va-stage, .va-B .va-stage, .va-D .va-stage, .va-E .va-stage, .va-F .va-stage{
    inset:60px 0 56px; padding:0 clamp(12px,4vw,24px);
  }
  .va-A .va-stage{ grid-template-columns:1fr; gap:14px; }
  .va-A .term-body{ min-height:160px; padding:12px 14px; font-size:11.5px; }
  .va-A .graph-canvas{ min-height:200px; }
  .va-A .intro-graph{ padding:14px; }
  .va-A .gn{ min-width:78px; padding:7px 9px; font-size:10px; gap:3px; }
  .va-A .gn b{ font-size:10px; }
  .va-A .gn em{ font-size:9px; }
  .va-B .chat{ padding:18px; gap:14px; }
  .va-B .chat-head{ font-size:10px; padding-bottom:10px; }
  .va-B .avatar{ width:30px; height:30px; font-size:12px; border-radius:8px; }
  .va-B .msg .body{ font-size:11.5px; }
  .va-B .code{ padding:10px 12px; font-size:11px; }
  .va-C .va-center .prompt{ font-size:clamp(22px,6vw,38px); padding:0 24px; }
  .va-C .telem{ bottom:54px; font-size:9px; letter-spacing:0.08em; gap:14px; padding:0 14px; flex-direction:column; align-items:flex-start; gap:6px; }
  .va-C .telem .grp{ gap:10px; flex-wrap:wrap; }
  .va-D .ide{ grid-template-columns:1fr; }
  .va-D .ide-side{ display:none; }
  .va-D .ide-code{ padding:12px 14px; font-size:11.5px; line-height:1.55; }
  .va-D .ide-code .ln{ padding-left:28px; }
  .va-D .ide-code .ln::before{ width:20px; font-size:10px; }
  .va-D .ide-out{ max-height:96px; padding:10px 14px; font-size:10.5px; }
  .va-D .ide-tabs span{ padding:7px 10px; font-size:10px; }
  .va-E .dash{ padding:16px; gap:12px; }
  .va-E .dash-head{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:10px; font-size:10px; }
  .va-E .dash-head .title b{ font-size:14px; }
  .va-E .kpis{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .va-E .kpi{ padding:10px 12px; }
  .va-E .kpi .num{ font-size:22px; }
  .va-E .kpi .delta{ font-size:10px; }
  .va-E .chart{ padding:12px; min-height:130px; }
  .va-E .chart svg{ height:100px; }
  .va-E .reels{ gap:8px; }
  .va-F .va-stage{ grid-template-rows:auto auto; gap:12px; overflow-y:auto; }
  .va-F .pipe{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .va-F .lane{ padding:12px 12px 14px; min-height:auto; }
  .va-F .lane .pkt{ display:none; }
  .va-F .lane h6{ font-size:14px; }
  .va-F .lane ul{ font-size:10px; line-height:1.55; }
  .va-F .log{ padding:10px 12px; min-height:auto; font-size:11px; }
  .va-F .log .ln{ gap:8px; }
  .va-F .log .ln .t{ width:48px; font-size:10px; }
  .va-F .log .ln .tag{ font-size:9px; padding:1px 5px; }
}
@media (max-width: 480px){
  .intro-top .lhs{ gap:10px; }
  .intro-top span:not(.dot):not(#introHdr){ display:none; }
  .intro-bot .phase{ max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .intro-bot .bar{ margin:0 10px; }
  .va-A .term-body{ min-height:120px; }
  .va-A .graph-canvas{ min-height:170px; }
  .va-A .gn{ min-width:64px; padding:6px 7px; }
  .va-A .gn em{ display:none; }
  .va-B .msg{ gap:10px; }
  .va-B .avatar{ width:26px; height:26px; font-size:11px; }
  .va-C .va-center .label{ font-size:9px; letter-spacing:0.28em; margin-bottom:10px; }
  .va-C .telem{ font-size:8.5px; bottom:56px; }
  .va-D .ide-out{ max-height:72px; }
  .va-E .reels{ grid-template-columns:repeat(3,1fr); }
  .va-E .reel .meta{ font-size:8.5px; }
  .va-E .reel .badge{ font-size:8px; padding:2px 6px; }
  .va-F .pipe{ grid-template-columns:repeat(2,1fr); }
  .va-F .lane:nth-child(5){ grid-column:span 2; }
}
@media (max-height: 620px) and (orientation: landscape){
  .va-B .chat{ max-height:calc(100vh - 140px); overflow-y:auto; }
  .va-E .reels{ display:none; }
  .va-E .chart svg{ height:80px; }
  .va-F .log{ display:none; }
}