/* ── HERO ── */
.hero-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;background:var(--bg);
}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.55;
}
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:4rem;
  max-width:1180px;width:100%;
  padding:110px clamp(1.5rem,5vw,5rem) 70px;
  position:relative;z-index:1;
}
.hero-left{display:flex;flex-direction:column;align-items:flex-start}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.05);border:1px solid var(--line);
  color:var(--ink2);font-size:.73rem;font-weight:600;
  padding:5px 14px;border-radius:100px;margin-bottom:1.75rem;
  letter-spacing:.04em;text-transform:uppercase;
  animation:fadeUp .5s ease both;
}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--o);animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{
  font-size:clamp(2.2rem,4.2vw,5rem);font-weight:900;
  line-height:1.0;letter-spacing:-0.055em;
  animation:fadeUp .5s .08s ease both;perspective:600px;
}
.word-wrap{display:block;overflow:visible}
.hero-word{
  display:inline-block;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),color .3s;
  cursor:default;transform-style:preserve-3d;
}
.hero-word:hover{color:var(--o);transform:translateZ(30px) rotateX(-8deg) scale(1.06)}
.hero-word.orange{color:var(--o)}
.hero-word.orange:hover{color:#fff;transform:translateZ(40px) rotateX(-10deg) scale(1.08);text-shadow:0 0 40px rgba(255,90,31,0.7)}
.hero-sub{
  color:var(--ink2);font-size:.975rem;max-width:400px;
  margin:1.4rem 0 2rem;font-weight:400;line-height:1.75;
  animation:fadeUp .5s .16s ease both;
}
.hero-btns{display:flex;gap:.9rem;flex-wrap:wrap;animation:fadeUp .5s .24s ease both}
.hero-proof{
  display:flex;align-items:center;gap:1.5rem;margin-top:2.5rem;
  animation:fadeUp .5s .32s ease both;
}
.proof-stat{text-align:left}
.proof-num{font-size:1.4rem;font-weight:900;letter-spacing:-0.04em;color:var(--o)}
.proof-label{font-size:.68rem;color:var(--ink3);margin-top:1px;font-weight:500}
.proof-div{width:1px;height:32px;background:var(--line)}

/* Mockup */
.hero-right{position:relative;z-index:1;animation:fadeUp .5s .2s ease both;perspective:1000px}
.hero-mock{
  background:#1A1A1A;border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
  transform-style:preserve-3d;
  transition:transform .12s ease,box-shadow .12s ease;will-change:transform;
}
.mock-topbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#222;border-bottom:1px solid rgba(255,255,255,0.07)}
.mock-dot{width:9px;height:9px;border-radius:50%}
.mock-urlbar{flex:1;background:#111;border-radius:5px;height:20px;margin:0 8px;display:flex;align-items:center;padding:0 9px;font-size:.6rem;color:var(--ink3);font-family:monospace}
.mock-body{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.mock-headline{font-size:.95rem;font-weight:800;letter-spacing:-0.03em;color:var(--ink);line-height:1.3;min-height:2.6em}
.mock-headline .cursor{display:inline-block;width:2px;height:.9em;background:var(--o);margin-left:2px;vertical-align:middle;animation:cur .7s step-end infinite}
@keyframes cur{0%,100%{opacity:1}50%{opacity:0}}
.mock-sub{height:7px;border-radius:4px;background:rgba(255,255,255,0.06);width:85%}
.mock-sub2{height:7px;border-radius:4px;background:rgba(255,255,255,0.04);width:60%}
.mock-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.1rem}
.mock-metric{background:#222;border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:.6rem .75rem}
.mock-metric-val{font-size:1.1rem;font-weight:900;letter-spacing:-0.04em;color:var(--o)}
.mock-metric-lbl{font-size:.6rem;color:var(--ink3);margin-top:1px}
.mock-bar-row{display:flex;flex-direction:column;gap:.35rem}
.mock-bar{height:5px;border-radius:3px;background:rgba(255,255,255,0.06);overflow:hidden}
.mock-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--o),#FF8A50);width:0%;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.mock-cta-row{display:flex;gap:.5rem}
.mock-cta-btn{background:var(--o);color:#fff;border-radius:8px;padding:.5rem .9rem;font-size:.7rem;font-weight:700;flex:1;text-align:center;cursor:default;box-shadow:0 4px 16px rgba(255,90,31,0.35)}
.mock-cta-ghost{background:transparent;border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:.5rem .9rem;font-size:.7rem;font-weight:600;color:var(--ink3);text-align:center;cursor:default}
.mock-badge{position:absolute;background:#1E1E1E;border:1px solid rgba(255,255,255,0.1);border-radius:100px;padding:7px 13px;font-size:.68rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;box-shadow:0 6px 24px rgba(0,0,0,0.5);white-space:nowrap;pointer-events:none}
.mock-badge.b1{top:-16px;right:-10px;animation:float1 3s ease-in-out infinite}
.mock-badge.b2{bottom:60px;left:-24px;animation:float2 3.4s ease-in-out infinite}
.mock-badge.b3{bottom:-16px;right:20px;animation:float3 2.8s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-9px) rotate(-1deg)}}
@keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.badge-dot.orange{background:var(--o)}
.badge-dot.green{background:#27C93F}
.badge-dot.blue{background:#3B9EFF}
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--ink3);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  animation:bouncehint 2s ease infinite;cursor:pointer;text-decoration:none;z-index:2;
}
.scroll-hint svg{opacity:.4}
@keyframes bouncehint{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(6px);opacity:1}}

/* ── HERO RESPONSIVE ── */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:2.5rem;text-align:center;padding-top:100px;padding-bottom:60px}
  .hero-left{align-items:center}
  .hero-right{display:none}
  .hero-proof{justify-content:center}
  .hero-btns{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
}
@media(max-width:480px){
  .hero-title{font-size:2.2rem}
  .hero-proof{gap:1rem}
  .proof-div{display:none}
}

/* ── 3D ORB SCENE ── */
.orb-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 480px;
  margin: 0 auto;
  animation: fadeUp .5s .2s ease both;
}
#orbCanvas {
  width: 100%;
  height: 100%;
  display: block;
}
.orb-badge {
  position: absolute;
  background: rgba(10,10,10,0.82);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 7px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
  pointer-events: none;
}
.ob1 { top: 8%;  right: -8%; animation: float1 3.2s ease-in-out infinite; }
.ob2 { top: 35%; left: -12%; animation: float2 3.8s ease-in-out infinite; }
.ob3 { bottom: 28%; right: -10%; animation: float3 3.5s ease-in-out infinite; }
.ob4 { bottom: 8%;  left: -4%;  animation: float1 4s   ease-in-out infinite .8s; }
.orb-bd {
  width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}
.orb-green  { background: #27C93F; box-shadow: 0 0 6px rgba(39,201,63,.7); }
.orb-blue   { background: #3B9EFF; box-shadow: 0 0 6px rgba(59,158,255,.7); }
.orb-orange { background: #FF5A1F; box-shadow: 0 0 6px rgba(255,90,31,.7); }

@media (max-width: 480px) {
  .orb-scene { max-width: 300px; }
  .orb-badge { font-size: .62rem; padding: 5px 10px; }
  .ob2 { left: -4%; }
  .ob3 { right: -4%; }
}