/* ============================================================
   HELIXO AI — minimal premium agent OS
   ============================================================ */
:root{
  --bg:#04060a; --bg-2:#070a10;
  --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06);
  --line:rgba(140,170,210,.14); --line-soft:rgba(140,170,210,.08);
  --silver:#c4d0dc; --silver-hi:#eef4fb; --silver-2:#8fa0b2;
  --cyan:#2ee6ff; --blue:#2b6cff; --violet:#7b6bff;
  --text:#e8eef6; --muted:#8da0b3; --muted-2:#5d6f83;
  --up:#39e08a; --down:#ff6b6b;
  --glow:0 0 40px rgba(43,108,255,.32);
  --radius:18px; --radius-sm:12px; --maxw:1160px;
  --fh:'Space Grotesk',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--fb); background:var(--bg); color:var(--text);
  line-height:1.6; overflow-x:hidden; cursor:none; padding-bottom:34px;
}
@media (hover:none){ body{ cursor:auto; } }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; }
::selection{ background:rgba(46,230,255,.28); color:#fff; }

/* ---------- ambient ---------- */
#particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.grid-bg{
  position:fixed; inset:-2px; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(80,140,220,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(80,140,220,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 26%,#000 0%,rgba(0,0,0,.3) 58%,transparent 82%);
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{ to{ background-position:0 560px,560px 0; } }
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.cursor-glow{
  position:fixed; top:0; left:0; z-index:2; width:480px; height:480px;
  margin:-240px 0 0 -240px; border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle,rgba(43,108,255,.14) 0%,rgba(46,230,255,.06) 38%,transparent 68%);
}
.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px; border-radius:50%; pointer-events:none; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan),0 0 24px rgba(46,230,255,.6); transition:transform .08s ease-out;
}
@media (hover:none){ .cursor-glow,.cursor-dot{ display:none; } }
.nav,.hero,.section,.footer{ position:relative; z-index:3; }

/* ---------- buttons / pills ---------- */
.btn{
  --c:#dfe8f2; display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1px solid var(--line); color:var(--c); white-space:nowrap;
  transition:transform .25s,box-shadow .35s,border-color .3s,color .3s;
}
.btn--sm{ padding:.5rem .95rem; font-size:.84rem; }
.btn--lg{ padding:1rem 1.9rem; font-size:1rem; }
.btn:hover{ transform:translateY(-2px); }
.btn--primary{
  color:#02101f; border:none;
  background:linear-gradient(120deg,var(--cyan),var(--blue) 62%,var(--violet));
  box-shadow:0 6px 24px rgba(43,108,255,.42),inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn--primary:hover{ box-shadow:0 10px 38px rgba(46,230,255,.55); }
.btn--silver{
  background:linear-gradient(180deg,rgba(232,240,250,.1),rgba(150,170,195,.04));
  border-color:rgba(196,208,220,.32); color:var(--silver-hi);
}
.btn--silver:hover{ border-color:var(--silver); }
.grad{
  background:linear-gradient(110deg,var(--cyan),var(--silver-hi) 42%,var(--blue) 78%,var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(46,230,255,.6); animation:livePulse 1.8s infinite; }
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(46,230,255,.6);} 70%{box-shadow:0 0 0 7px rgba(46,230,255,0);} 100%{box-shadow:0 0 0 0 rgba(46,230,255,0);} }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.4rem;
  padding:.7rem clamp(1rem,4vw,2.2rem); transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(6,9,14,.72); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line-soft); }
.nav__brand{ display:flex; align-items:center; gap:.55rem; }
.nav__logo{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(43,108,255,.55)); }
.nav__name{ font-family:var(--fh); font-weight:700; letter-spacing:.13em; font-size:1rem; }
.nav__ai{ margin-left:.16em; padding:.05em .32em; border-radius:5px; font-size:.7em;
  background:linear-gradient(120deg,var(--cyan),var(--blue)); color:#02101f; }
.nav__links{ display:flex; gap:1.5rem; margin-left:auto; }
.nav__links a{ font-size:.9rem; color:var(--muted); font-weight:500; position:relative; transition:color .25s; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); transition:width .3s; }
.nav__links a:hover{ color:var(--text); } .nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:.7rem; }
.nav__x,.nav__cfg{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted); transition:.25s; font-size:.95rem;
}
.nav__x:hover,.nav__cfg:hover{ color:var(--cyan); border-color:rgba(46,230,255,.4); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav__burger span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:7rem 1.2rem 3rem; position:relative;
}
.hero__wire{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1; pointer-events:none; }
.hero__inner{ max-width:760px; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }

.hero__pills{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.hpill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:999px;
  font-family:var(--fm); font-size:.74rem; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); background:rgba(8,12,18,.55); backdrop-filter:blur(8px); transition:.25s;
}
.hpill:hover{ color:var(--cyan); border-color:rgba(46,230,255,.4); }
.hpill--live{ color:var(--cyan); border-color:rgba(46,230,255,.32); }

.hero__title{ font-family:var(--fh); font-weight:700; line-height:1.02; letter-spacing:-.025em;
  font-size:clamp(2.6rem,7vw,5rem); }
.hero__title .line{ display:block; }
.hero__sub{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.15rem); max-width:34rem; }
.hero__sub strong{ color:var(--text); font-weight:600; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem;
  padding:1.1rem 1.4rem; border-radius:var(--radius); width:100%; max-width:600px;
  border:1px solid var(--line); background:rgba(8,12,18,.5); backdrop-filter:blur(10px);
}
.stat{ position:relative; }
.stat::after{ content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:var(--line-soft); }
.stat:last-child::after{ display:none; }
.stat__num{ font-family:var(--fh); font-weight:700; font-size:clamp(1.4rem,3vw,1.95rem); white-space:nowrap;
  background:linear-gradient(120deg,var(--silver-hi),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__num--t{ font-size:clamp(1.05rem,2.3vw,1.5rem); background:linear-gradient(120deg,var(--silver-hi),var(--blue)); -webkit-background-clip:text; color:transparent; }
.stat__label{ font-size:.7rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }

.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }

.hero__scroll{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--fm); font-size:.62rem; letter-spacing:.3em; color:var(--muted-2); }
.hero__scroll span{ width:1px; height:26px; background:linear-gradient(var(--cyan),transparent); position:relative; }
.hero__scroll span::after{ content:''; position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:scrollDot 1.8s infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1; } 80%{ transform:translateY(22px); opacity:0; } 100%{ opacity:0; } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,8vw,6rem) clamp(1rem,4vw,2.2rem); }
.section__head{ text-align:center; max-width:42rem; margin:0 auto clamp(2rem,5vw,3rem); }
.eyebrow{ font-family:var(--fm); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); display:inline-block; margin-bottom:.7rem; }
.section__title{ font-family:var(--fh); font-weight:700; letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.8rem,4.4vw,2.9rem); }
.section__lead{ color:var(--muted); margin-top:.6rem; font-size:1rem; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.card{
  position:relative; padding:1.6rem 1.5rem; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(10px);
  overflow:hidden; transition:transform .4s,border-color .4s,box-shadow .4s;
}
.card::before{ content:attr(data-i); position:absolute; top:1rem; right:1.2rem; font-family:var(--fm); font-size:.74rem; color:var(--muted-2); opacity:.7; }
.card::after{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(46,230,255,.1),transparent 60%); }
.card:hover{ transform:translateY(-5px); border-color:rgba(46,230,255,.4); box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 26px rgba(43,108,255,.16); }
.card:hover::after{ opacity:1; }
.card__icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:.9rem;
  background:linear-gradient(150deg,rgba(46,230,255,.16),rgba(43,108,255,.07)); border:1px solid rgba(46,230,255,.22);
  color:var(--cyan); box-shadow:inset 0 0 14px rgba(46,230,255,.12); }
.card__icon svg{ width:24px; height:24px; }
.card h3{ font-family:var(--fh); font-size:1.1rem; font-weight:600; margin-bottom:.35rem; }
.card p{ color:var(--muted); font-size:.9rem; }
.card__tag{ display:inline-block; margin-top:.9rem; padding:.24rem .65rem; border-radius:999px; font-family:var(--fm); font-size:.68rem;
  color:var(--silver); border:1px solid var(--line); background:rgba(255,255,255,.03); }

/* ============================================================
   AGENT
   ============================================================ */
.section--agent .agent{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4rem); align-items:start; }
.agent__left,.agent__right{ display:flex; flex-direction:column; }
.agent__lead{ color:var(--muted); font-size:.95rem; margin:.5rem 0 1.5rem; max-width:24rem; }

/* device */
.device{
  border-radius:24px; border:1px solid var(--line); padding:1.1rem;
  background:radial-gradient(120% 70% at 50% 0%,rgba(43,108,255,.1),var(--panel)); backdrop-filter:blur(10px);
  max-width:380px; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.device__top{ display:flex; justify-content:space-between; font-family:var(--fm); font-size:.66rem; letter-spacing:.1em; color:var(--muted-2); margin-bottom:.7rem; padding:0 .2rem; }
.device__state{ color:var(--up); }
.device__screen{
  position:relative; border-radius:16px; padding:1.4rem 1rem 1.6rem; min-height:240px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1rem;
  border:1px solid var(--line-soft); background:radial-gradient(80% 80% at 50% 90%,rgba(46,230,255,.08),rgba(0,0,0,.35));
  overflow:hidden;
}
.speech{
  position:relative; max-width:90%; text-align:center; font-family:var(--fm); font-size:.78rem; font-weight:500;
  color:#02101f; background:var(--silver-hi); padding:.6rem .9rem; border-radius:12px; line-height:1.4;
  box-shadow:0 6px 18px rgba(0,0,0,.4); animation:bubbleIn .4s both;
}
.speech::after{ content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--silver-hi); border-bottom:0; }

/* orb */
.orb{ position:relative; width:140px; height:140px; display:grid; place-items:center; margin-top:.3rem; }
.orb__mark{ width:62%; position:relative; z-index:3; filter:drop-shadow(0 0 16px rgba(43,108,255,.7)); animation:floatY 5s ease-in-out infinite; }
@keyframes floatY{ 50%{ transform:translateY(-8px); } }
.orb__ring{ position:absolute; border-radius:50%; }
.orb__ring--1{ inset:0; border:1px solid rgba(46,230,255,.35); border-top-color:transparent; border-bottom-color:transparent; animation:spin 7s linear infinite; }
.orb__ring--2{ inset:12%; border:1px solid rgba(43,108,255,.4); border-left-color:transparent; animation:spin 5s linear infinite reverse; }
.orb__ring--3{ inset:-10%; border:1px dashed rgba(123,107,255,.28); animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orb__pulse{ position:absolute; inset:22%; border-radius:50%; z-index:1;
  background:radial-gradient(circle,rgba(46,230,255,.5),transparent 70%); filter:blur(12px); animation:breathe 3.5s ease-in-out infinite; }
@keyframes breathe{ 50%{ opacity:.55; transform:scale(1.12); } }

/* vitals */
.vitals{ display:flex; flex-direction:column; gap:.55rem; margin:1.1rem .2rem .4rem; }
.vital{ display:grid; grid-template-columns:74px 1fr; align-items:center; gap:.7rem; }
.vital span{ font-family:var(--fm); font-size:.7rem; color:var(--muted); }
.bar{ height:7px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; border:1px solid var(--line-soft); }
.bar i{ display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--up),var(--cyan)); box-shadow:0 0 10px rgba(57,224,138,.55);
  transition:width 1.4s cubic-bezier(.16,1,.3,1); }
.bar--cyan i{ background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 10px rgba(46,230,255,.55); }
.bar--violet i{ background:linear-gradient(90deg,var(--blue),var(--violet)); box-shadow:0 0 10px rgba(123,107,255,.55); }

.device__btns{ display:flex; justify-content:center; gap:.7rem; margin-top:.9rem; }
.device__btns button{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1rem;
  border:1px solid var(--line); background:var(--panel); color:var(--cyan); transition:.25s; }
.device__btns button:hover{ transform:translateY(-3px); border-color:rgba(46,230,255,.5); box-shadow:0 0 18px rgba(46,230,255,.35); }

/* chat */
.chat{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; margin-top:.2rem;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(10,14,22,.85),rgba(6,9,14,.9)); backdrop-filter:blur(10px); }
.chat__head{ display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.02); }
.chat__id{ display:flex; align-items:center; gap:.6rem; }
.chat__avatar{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:rgba(0,0,0,.3); }
.chat__avatar img{ width:74%; filter:drop-shadow(0 0 8px rgba(43,108,255,.6)); }
.chat__id strong{ font-family:var(--fh); letter-spacing:.05em; font-size:.95rem; }
.chat__id small{ display:block; color:var(--muted-2); font-size:.72rem; }
.agent__status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 8px var(--up); margin-right:.25rem; }
.chat__live{ font-family:var(--fm); font-size:.62rem; letter-spacing:.1em; color:var(--up); border:1px solid rgba(57,224,138,.35); border-radius:6px; padding:.25rem .5rem; }

.chat__log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem; min-height:170px; max-height:260px;
  scrollbar-width:thin; scrollbar-color:rgba(46,230,255,.3) transparent; }
.chat__log::-webkit-scrollbar{ width:6px; } .chat__log::-webkit-scrollbar-thumb{ background:rgba(46,230,255,.3); border-radius:6px; }
.bubble{ max-width:86%; padding:.65rem .9rem; border-radius:14px; font-size:.9rem; animation:bubbleIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.bubble__who{ display:block; font-family:var(--fm); font-size:.64rem; letter-spacing:.1em; color:var(--cyan); margin-bottom:.2rem; }
.bubble--bot{ align-self:flex-start; background:linear-gradient(150deg,rgba(43,108,255,.16),rgba(46,230,255,.06)); border:1px solid rgba(46,230,255,.25); border-bottom-left-radius:4px; color:#eaf3fb; }
.bubble--user{ align-self:flex-end; background:linear-gradient(150deg,rgba(232,240,250,.12),rgba(150,170,195,.05)); border:1px solid rgba(196,208,220,.22); border-bottom-right-radius:4px; }
.bubble--user .bubble__who{ color:var(--silver); text-align:right; }
.bubble strong{ color:#fff; }
.bubble code{ font-family:var(--fm); background:rgba(0,0,0,.35); padding:.05em .4em; border-radius:5px; font-size:.85em; }
.bubble.is-typing .typing{ display:inline-flex; gap:4px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:typing 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-4px); } }

.chat__hint{ display:flex; gap:.45rem; flex-wrap:wrap; padding:.6rem .8rem 0; }
.chat__quick{ font-size:.74rem; padding:.32rem .65rem; border-radius:999px; color:var(--muted);
  border:1px solid var(--line); transition:.25s; }
.chat__quick:hover{ color:var(--cyan); border-color:rgba(46,230,255,.45); background:rgba(46,230,255,.05); }
.chat__input{ display:flex; gap:.5rem; padding:.7rem .8rem .8rem; }
.chat__input input{ flex:1; padding:.7rem .9rem; border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.3);
  color:var(--text); font-family:var(--fb); font-size:.9rem; outline:none; cursor:auto; transition:border-color .25s,box-shadow .25s; }
.chat__input input:focus{ border-color:rgba(46,230,255,.5); box-shadow:0 0 0 3px rgba(46,230,255,.12); }
.chat__send{ display:grid; place-items:center; width:44px; border-radius:11px; border:none; color:#02101f;
  background:linear-gradient(120deg,var(--cyan),var(--blue)); box-shadow:0 0 16px rgba(46,230,255,.4); transition:transform .2s,box-shadow .3s; }
.chat__send:hover{ transform:scale(1.06); box-shadow:0 0 24px rgba(46,230,255,.65); }

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:1rem; }
.metric{ padding:.7rem .5rem; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel); text-align:center; transition:.3s; }
.metric:hover{ border-color:rgba(46,230,255,.35); transform:translateY(-3px); }
.metric__val{ display:block; font-family:var(--fh); font-weight:700; font-size:1.1rem; }
.metric__label{ font-size:.66rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.skills__filters{ display:flex; gap:.45rem; flex-wrap:wrap; }
.chip-filter{ padding:.42rem .9rem; border-radius:999px; font-size:.82rem; color:var(--muted); border:1px solid var(--line); background:var(--panel); transition:.25s; }
.chip-filter:hover{ color:var(--text); border-color:rgba(46,230,255,.4); }
.chip-filter.is-active{ color:#02101f; background:linear-gradient(120deg,var(--cyan),var(--blue)); border-color:transparent; font-weight:600; }
.skills__loadout{ font-size:.82rem; color:var(--muted); font-family:var(--fm); }
.skills__loadout-count{ color:var(--cyan); font-weight:700; font-size:1rem; }
.skills__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.7rem; }
.skill{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border-radius:13px;
  border:1px solid var(--line); background:var(--panel); cursor:none; transition:transform .3s,border-color .3s,box-shadow .3s,background .3s;
  animation:skillIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes skillIn{ from{ opacity:0; transform:translateY(12px) scale(.96); } }
.skill:hover{ transform:translateY(-4px); border-color:rgba(46,230,255,.45); box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 16px rgba(43,108,255,.2); }
.skill__dot{ width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 8px currentColor; }
.skill[data-cat=market] .skill__dot{ color:var(--cyan); background:var(--cyan); }
.skill[data-cat=onchain] .skill__dot{ color:var(--blue); background:var(--blue); }
.skill[data-cat=content] .skill__dot{ color:var(--violet); background:var(--violet); }
.skill[data-cat=ops] .skill__dot{ color:var(--up); background:var(--up); }
.skill__name{ font-size:.85rem; font-weight:500; flex:1; }
.skill__add{ font-family:var(--fm); color:var(--muted-2); transition:.25s; }
.skill:hover .skill__add{ color:var(--cyan); }
.skill.is-on{ border-color:rgba(46,230,255,.6); background:linear-gradient(150deg,rgba(46,230,255,.12),rgba(43,108,255,.05)); box-shadow:0 0 18px rgba(46,230,255,.22); }
.skill.is-on .skill__add{ color:var(--up); }
.skill.is-hidden{ display:none; }

/* ============================================================
   FLOW
   ============================================================ */
.flow{ position:relative; }
.flow__line{ position:absolute; left:0; right:0; top:27px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.flow__line i{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet)); box-shadow:0 0 12px rgba(46,230,255,.6); transition:width 1.6s cubic-bezier(.16,1,.3,1); }
.flow__steps{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; position:relative; }
.flow-step{ text-align:center; }
.flow-step__node{ width:46px; height:46px; margin:5px auto .7rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--fm); font-size:.78rem; color:var(--muted); border:1px solid var(--line); background:var(--bg-2); position:relative; z-index:2;
  transition:transform .4s,border-color .4s,color .4s,box-shadow .4s; }
.flow-step h4{ font-family:var(--fh); font-size:.9rem; font-weight:600; }
.flow-step.is-active .flow-step__node{ color:#02101f; border-color:transparent; transform:scale(1.12);
  background:linear-gradient(120deg,var(--cyan),var(--blue)); box-shadow:0 0 22px rgba(46,230,255,.6); }
.flow-step.is-active h4{ color:var(--cyan); }

/* ============================================================
   CTA
   ============================================================ */
.section--cta{ padding-bottom:4rem; }
.cta{ position:relative; text-align:center; border-radius:24px; overflow:hidden;
  padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,4vw,3rem); border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%,rgba(43,108,255,.15),rgba(7,10,16,.8)); backdrop-filter:blur(12px); }
.cta__halo{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(50% 60% at 50% 0%,rgba(46,230,255,.18),transparent 60%); }
.cta>*{ position:relative; z-index:1; }
.cta__title{ font-family:var(--fh); font-weight:700; font-size:clamp(1.9rem,4.6vw,3rem); letter-spacing:-.02em; }
.cta__sub{ color:var(--muted); max-width:34rem; margin:.9rem auto 1.6rem; }
.cta__btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* terminal */
.terminal{ width:min(560px,100%); margin:2rem auto 0; border-radius:var(--radius); overflow:hidden; text-align:left;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(10,14,22,.92),rgba(6,9,14,.92)); box-shadow:0 24px 60px rgba(0,0,0,.5),var(--glow); }
.terminal__bar{ display:flex; align-items:center; gap:.4rem; padding:.55rem .85rem; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line-soft); }
.terminal__bar .dot{ width:10px; height:10px; border-radius:50%; }
.dot.red{ background:#ff5f57; } .dot.amber{ background:#febc2e; } .dot.green{ background:#28c840; }
.terminal__title{ margin-left:.6rem; font-family:var(--fm); font-size:.72rem; color:var(--muted-2); }
.terminal__body{ padding:1rem 1.1rem; font-family:var(--fm); font-size:.82rem; line-height:1.85; min-height:130px; }
.term-line{ display:block; white-space:pre-wrap; }
.term-line .prompt{ color:var(--cyan); } .term-line .ok{ color:var(--up); } .term-line.dim{ color:var(--muted-2); }
.term-cursor{ display:inline-block; width:8px; height:1em; background:var(--cyan); vertical-align:-2px; margin-left:2px; animation:blink 1s steps(1) infinite; box-shadow:0 0 8px var(--cyan); }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line-soft); background:rgba(5,7,11,.7); backdrop-filter:blur(10px); }
.footer__inner{ max-width:var(--maxw); margin:0 auto; padding:2rem clamp(1rem,4vw,2.2rem) 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--fh); font-weight:700; letter-spacing:.12em; }
.footer__brand .nav__logo{ width:26px; height:26px; }
.footer__links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer__links a{ color:var(--muted); font-size:.88rem; transition:color .25s; }
.footer__links a:hover{ color:var(--cyan); }
.footer__x{ color:var(--silver)!important; }
.footer__copy{ max-width:var(--maxw); margin:0 auto; padding:1rem clamp(1rem,4vw,2.2rem); border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--muted-2); text-align:center; }

/* ============================================================
   TICKER (fixed bottom)
   ============================================================ */
.ticker{ position:fixed; left:0; right:0; bottom:0; z-index:60; height:34px; display:flex; align-items:center; gap:.8rem;
  padding:0 .9rem; background:rgba(4,6,10,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line-soft); overflow:hidden; }
.ticker__brand{ display:inline-flex; align-items:center; gap:.35rem; flex:none; font-family:var(--fm); font-size:.72rem; color:var(--silver); z-index:2; }
.ticker__brand:hover{ color:var(--cyan); }
.ticker__tag{ flex:none; font-family:var(--fm); font-size:.68rem; color:var(--muted-2); z-index:2; display:none; }
.ticker__track{ flex:1; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ticker__row{ display:inline-flex; gap:1.8rem; white-space:nowrap; animation:tickerMove 40s linear infinite; padding-left:1.8rem; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
@keyframes tickerMove{ to{ transform:translateX(-50%); } }
.tk{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--fm); font-size:.72rem; color:var(--muted); }
.tk b{ color:var(--silver-hi); font-weight:600; }
.tk .up{ color:var(--up); } .tk .down{ color:var(--down); }
@media (min-width:760px){ .ticker__tag{ display:inline; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:1.2rem; }
.modal.is-open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(2,4,8,.7); backdrop-filter:blur(6px); }
.modal__panel{ position:relative; width:min(440px,100%); border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,16,24,.98),rgba(7,10,16,.98)); padding:1.8rem 1.6rem; box-shadow:0 30px 80px rgba(0,0,0,.7),var(--glow);
  animation:bubbleIn .35s cubic-bezier(.16,1,.3,1) both; }
.modal__x{ position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--muted); font-size:1.05rem; }
.modal__x:hover{ color:var(--cyan); }
.modal__panel h3{ font-family:var(--fh); font-size:1.25rem; margin-bottom:.4rem; }
.modal__lead{ color:var(--muted); font-size:.86rem; margin-bottom:1.2rem; }
.field{ display:block; margin-bottom:.9rem; }
.field span{ display:block; font-size:.74rem; letter-spacing:.04em; color:var(--silver-2); margin-bottom:.35rem; font-family:var(--fm); }
.field input{ width:100%; padding:.7rem .85rem; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--text); font-family:var(--fm); font-size:.86rem; outline:none; cursor:auto; transition:border-color .25s,box-shadow .25s; }
.field input:focus{ border-color:rgba(46,230,255,.5); box-shadow:0 0 0 3px rgba(46,230,255,.12); }
.modal__actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.3rem; }

/* ============================================================
   REVEAL + GLITCH
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.glitch{ position:relative; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.7; }
.glitch::before{ color:var(--cyan); animation:glitchA 5s steps(2) infinite; mix-blend-mode:screen; }
.glitch::after{ color:var(--violet); animation:glitchB 6s steps(2) infinite; mix-blend-mode:screen; }
@keyframes glitchA{ 0%,92%,100%{ clip-path:inset(0 0 100% 0); opacity:0; } 93%{ clip-path:inset(12% 0 58% 0); opacity:.6; transform:translate(-3px,-1px); } 96%{ clip-path:inset(54% 0 22% 0); opacity:.6; transform:translate(2px,1px); } }
@keyframes glitchB{ 0%,90%,100%{ clip-path:inset(0 0 100% 0); opacity:0; } 91%{ clip-path:inset(34% 0 42% 0); opacity:.55; transform:translate(3px,1px); } 95%{ clip-path:inset(72% 0 8% 0); opacity:.55; transform:translate(-2px,-1px); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .section--agent .agent{ grid-template-columns:1fr; }
  .agent__left{ align-items:center; text-align:center; }
  .agent__left .device{ margin:0 auto; }
  .agent__lead{ margin-left:auto; margin-right:auto; }
  .flow__steps{ grid-template-columns:repeat(4,1fr); gap:1.4rem .6rem; }
  .flow__line{ display:none; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__links.open{ display:flex; flex-direction:column; position:absolute; top:100%; right:1rem; left:1rem;
    padding:1rem; border-radius:14px; gap:1rem; margin:0; background:rgba(8,11,17,.96); border:1px solid var(--line); backdrop-filter:blur(16px); }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .flow__steps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1rem .4rem; }
  .stat:nth-child(2)::after{ display:none; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.2s!important; }
  .reveal{ opacity:1; transform:none; }
  .ticker__row{ animation:none; }
}