/* ── Variables ─────────────────────────────────────── */
:root {
    --bg:      #0a0a0a;
    --bg-s:    #111111;
    --bg-t:    #161616;
    --bdr:     #1e1e1e;
    --bdr-hi:  #2a2a2a;
    --txt:     #8a8a8a;
    --txt-hi:  #e5e5e5;
    --txt-lo:  #555555;
    --acc:     #0066ff;
    --acc-bg:  rgba(0, 102, 255, 0.06);
    --acc-gl:  rgba(0, 102, 255, 0.10);
    --ok:      #22c55e;
    --warn:    #f59e0b;
    --err:     #ef4444;
    --fnt-d:   'Inter', sans-serif;
    --fnt-s:   'Inter', sans-serif;
    --fnt-m:   'IBM Plex Mono', monospace;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; scroll-behavior:smooth; }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--fnt-s);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ── Navigation ─────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 52px;
    border-bottom: 1px solid var(--bdr);
    background: var(--bg);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nav-icon {
    width: 28px; height: 28px;
    background: var(--acc-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--acc);
    font-size: .8rem;
}

.nav-name {
    font-family: var(--fnt-m);
    font-size: .85rem;
    font-weight: 600;
    color: var(--txt-hi);
    letter-spacing: .04em;
}

.nav-acc { color: var(--acc); }

.nav-badge {
    font-size: .58rem;
    color: var(--txt-lo);
    background: var(--bg-s);
    border: 1px solid var(--bdr);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .08em;
    font-family: var(--fnt-m);
}

.nav-status { display: flex; align-items: center; gap: .45rem; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 52px;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 50% 40% at 20% 50%, rgba(0,102,255,.04) 0%, transparent 70%),
        linear-gradient(var(--bdr) 1px, transparent 1px),
        linear-gradient(90deg, var(--bdr) 1px, transparent 1px);
    background-size: 100% 100%, 64px 64px, 64px 64px;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .6rem;
    letter-spacing: .18em;
    color: var(--txt-lo);
    background: var(--bg-s);
    border: 1px solid var(--bdr);
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-family: var(--fnt-m);
}

.chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--acc);
    flex-shrink: 0;
}

/* Hero title */
.hero-title {
    font-family: var(--fnt-m);
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: .95;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-sub {
    font-size: .82rem;
    color: var(--txt);
    margin-bottom: 2.5rem;
    letter-spacing: .01em;
    max-width: 480px;
    line-height: 1.6;
}

.ht {
    display: block;
    color: var(--txt-hi);
    opacity: 0;
    transform: translateY(18px);
    animation: slide-up .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--i) * 0.08s + 0.05s);
}

.ht--acc { color: var(--acc); }
.ht--dim { color: var(--txt-lo); }

@keyframes slide-up {
    to { opacity:1; transform:translateY(0); }
}
@keyframes fade-in {
    from { opacity:0; }
    to   { opacity:1; }
}

/* Terminal card */
.hero-term {
    background: var(--bg-s);
    border: 1px solid var(--bdr-hi);
    border-radius: 8px;
    max-width: 520px;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.4);
    animation: fade-in .5s .55s ease both;
}

.term-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bdr);
    background: rgba(255,255,255,.02);
}

.td { width:10px; height:10px; border-radius:50%; }
.td-r { background: #ff5f57; }
.td-y { background: #febc2e; }
.td-g { background: #28c840; }

.term-bar-title {
    margin-left: auto;
    font-size: .6rem;
    color: var(--txt-lo);
    letter-spacing: .04em;
    font-family: var(--fnt-m);
}

.term-body { padding: .85rem 1rem; font-size: .76rem; font-family: var(--fnt-m); }

.term-row { display:flex; align-items:center; margin-bottom:.35rem; }

.term-ps { color: var(--acc); font-weight:500; }

#termCmd { color: var(--txt-hi); }

#termCursor {
    color: var(--acc);
    animation: blink-cur 1s step-end infinite;
}

@keyframes blink-cur {
    0%,100% { opacity:1; }
    50%      { opacity:0; }
}

#termOut { font-size:.72rem; line-height:1.9; }
#termOut .to-info { color: var(--txt-lo); }
#termOut .to-ok   { color: var(--ok); }
#termOut .to-url  { color: var(--acc); }

/* Star CTA */
.hero-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    animation: fade-in .5s .75s ease both;
}

.star-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 9px 12px 9px 11px;
    background: var(--bg-s);
    border: 1px solid var(--bdr-hi);
    border-radius: 8px;
    transition: border-color .18s, transform .15s;
    min-width: 240px;
}

.star-cta:hover {
    border-color: var(--acc);
    transform: translateY(-1px);
}

.star-cta-info {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.star-gh-icon {
    font-size: 1.2rem;
    color: var(--txt-hi);
}

.star-cta-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--txt-hi);
    letter-spacing: .01em;
}

.star-cta-hint {
    font-size: .62rem;
    color: var(--txt-lo);
    margin-top: 1px;
}

.star-cta-badge {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 4px 10px;
    background: var(--acc-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--acc);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--fnt-m);
}

/* Hero buttons */
.hero-btns {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    animation: fade-in .5s .75s ease both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--fnt-s);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .01em;
    transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-solid {
    background: var(--txt-hi);
    color: #000;
    border-color: var(--txt-hi);
}

.btn-solid:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--txt);
    border: 1px solid var(--bdr-hi);
}

.btn-ghost:hover {
    background: rgba(255,255,255,.03);
    border-color: var(--txt-hi);
    color: var(--txt-hi);
    transform: translateY(-1px);
}

.btn-blue {
    background: var(--acc-bg);
    color: var(--acc);
    border: 1px solid rgba(0,102,255,.25);
}

.btn-blue:hover {
    background: rgba(0,102,255,.12);
    border-color: var(--acc);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Metrics ────────────────────────────────────────── */
.metrics {
    border-top: 1px solid var(--bdr);
    border-bottom: 1px solid var(--bdr);
    background: var(--bg-s);
}

.metrics-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.metric {
    padding: 2.5rem 1.5rem;
    border-right: 1px solid var(--bdr);
    text-align: center;
}

.metric:last-child { border-right: none; }

.metric-val {
    font-family: var(--fnt-m);
    font-size: 2.8rem;
    color: var(--txt-hi);
    line-height: 1;
    letter-spacing: -.02em;
    margin-bottom: .4rem;
    font-weight: 600;
}

.metric-key {
    font-size: .6rem;
    color: var(--txt-lo);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: var(--fnt-m);
}

/* ── Features ───────────────────────────────────────── */
.feats { max-width: 1200px; margin: 0 auto; padding: 5rem 1.5rem; }

.feats-head { margin-bottom: 2.5rem; }

.eyebrow {
    font-size: .6rem;
    letter-spacing: .2em;
    color: var(--acc);
    margin-bottom: .7rem;
    font-family: var(--fnt-m);
}

.feats-title {
    font-family: var(--fnt-m);
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--txt-hi);
    line-height: 1.1;
    letter-spacing: -.01em;
    font-weight: 700;
}

.feats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1px;
    background: var(--bdr);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    overflow: hidden;
}

.fc {
    background: var(--bg-s);
    padding: 1.8rem;
    transition: background .2s;
    position: relative;
}

.fc:hover { background: var(--bg-t); }

.fc--tall {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.fc--code { grid-column: span 2; }

.fc-icon {
    width: 36px; height: 36px;
    background: var(--acc-bg);
    border: 1px solid rgba(0, 102, 255, 0.18);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--acc);
    font-size: .9rem;
    margin-bottom: 1.2rem;
}

.fc-no {
    font-size: .58rem;
    letter-spacing: .14em;
    color: var(--txt-lo);
    margin-bottom: .4rem;
    font-family: var(--fnt-m);
}

.fc-name {
    font-family: var(--fnt-m);
    font-size: .88rem;
    font-weight: 600;
    color: var(--txt-hi);
    margin-bottom: .5rem;
}

.fc-desc {
    font-size: .74rem;
    line-height: 1.7;
    color: var(--txt);
}

.fc-pkg {
    display: inline-block;
    margin-top: auto;
    padding-top: 1.2rem;
    font-size: .6rem;
    color: var(--acc);
    letter-spacing: .04em;
    font-family: var(--fnt-m);
}

/* Code snippet */
.csnap {
    margin-top: .8rem;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: .8rem 1rem;
    font-size: .72rem;
    font-family: var(--fnt-m);
}

.cs-ln { line-height: 2; color: var(--txt); }
.cs-o  { color: var(--txt-hi); }
.cs-f  { color: var(--acc); }
.cs-s  { color: #ff9966; }

/* ── CTA ────────────────────────────────────────────── */
.cta {
    border-top: 1px solid var(--bdr);
    background: var(--bg-s);
}

.cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}

.cta-title {
    font-family: var(--fnt-m);
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    color: var(--txt-hi);
    letter-spacing: -.01em;
    margin: .4rem 0;
    font-weight: 700;
}

.cta-sub { font-size: .74rem; color: var(--txt-lo); }

.cta-cmd {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bg);
    border: 1px solid var(--bdr-hi);
    border-radius: 6px;
    padding: .8rem 1.2rem;
    font-size: .76rem;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--fnt-m);
}

.cmd-ps { color: var(--acc); font-weight: 600; }
.cmd-tx { color: var(--txt-hi); }

/* ── Footer ─────────────────────────────────────────── */
.footer { border-top: 1px solid var(--bdr); }

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .65rem;
    color: var(--txt-lo);
    font-family: var(--fnt-m);
}

.footer-sep { opacity: .3; }

.footer-lnk {
    color: var(--txt-lo);
    transition: color .15s;
}

.footer-lnk:hover { color: var(--acc); }

/* Feature card link */
.fc-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .8rem;
    font-size: .65rem;
    color: var(--acc);
    opacity: .75;
    transition: opacity .15s;
    letter-spacing: .02em;
    font-family: var(--fnt-m);
}

.fc-link:hover { opacity: 1; }

/* ── Benchmark ──────────────────────────────────────── */
.bench {
    border-top: 1px solid var(--bdr);
    border-bottom: 1px solid var(--bdr);
}

.bench-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.bench-title {
    font-family: var(--fnt-m);
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: var(--txt-hi);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: .5rem 0 .8rem;
    font-weight: 700;
}

.bench-desc {
    font-size: .74rem;
    color: var(--txt);
    line-height: 1.7;
}

.bench-desc code {
    background: var(--bg-t);
    border: 1px solid var(--bdr);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--acc);
    font-size: .7rem;
    font-family: var(--fnt-m);
}

.bench-panel {
    background: var(--bg-s);
    border: 1px solid var(--bdr-hi);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bench-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--bdr);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    overflow: hidden;
}

.bstat {
    background: var(--bg-t);
    padding: .8rem .6rem;
    text-align: center;
}

.bstat-val {
    font-family: var(--fnt-m);
    font-size: 1.4rem;
    color: var(--acc);
    line-height: 1;
    letter-spacing: -.01em;
    margin-bottom: .2rem;
    font-weight: 600;
    transition: color .2s;
}

.bstat-key {
    font-size: .55rem;
    color: var(--txt-lo);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--fnt-m);
}

.bench-track {
    height: 3px;
    background: var(--bdr);
    border-radius: 2px;
    overflow: hidden;
}

.bench-fill {
    height: 100%;
    width: 0%;
    background: var(--acc);
    border-radius: 2px;
    transition: width .1s linear;
}

.bench-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem;
    background: var(--acc-bg);
    border: 1px solid rgba(0,102,255,.2);
    border-radius: 6px;
    color: var(--acc);
    font-family: var(--fnt-m);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}

.bench-btn:hover:not(:disabled) {
    background: rgba(0,102,255,.1);
    border-color: var(--acc);
    transform: translateY(-1px);
}

.bench-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Utility / Dashboard ────────────────────────────── */
.panel {
    background: var(--bg-s);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 1.25rem;
}

.panel-hi {
    background: var(--bg-s);
    border: 1px solid var(--bdr-hi);
    border-radius: 8px;
    padding: 1.5rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--bdr);
    font-family: var(--fnt-m);
}

.tag-blue { color: var(--acc); background: var(--acc-bg); border-color: rgba(0,102,255,.2); }
.tag-ok   { color: var(--ok); background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.tag-warn { color: var(--warn); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.tag-err  { color: var(--err); background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }
.tag-lo   { color: var(--txt-lo); background: transparent; border-color: var(--bdr); }

.input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: .6rem .8rem;
    font-size: .74rem;
    color: var(--txt-hi);
    font-family: var(--fnt-m);
    transition: border-color .15s;
    outline: none;
}

.input::placeholder { color: var(--txt-lo); }

.input:focus {
    border-color: var(--acc);
}

.select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: .6rem .8rem;
    font-size: .74rem;
    color: var(--txt-hi);
    font-family: var(--fnt-m);
    transition: border-color .15s;
    outline: none;
    appearance: none;
}

.select:focus { border-color: var(--acc); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-title { font-size: clamp(2.2rem, 12vw, 3.5rem); }

    .metrics-inner { grid-template-columns: 1fr; }
    .metric { border-right: none; border-bottom: 1px solid var(--bdr); }
    .metric:last-child { border-bottom: none; }

    .bench-inner { grid-template-columns: 1fr; gap: 2rem; }

    .feats-grid { grid-template-columns: 1fr; }
    .fc--tall  { grid-row: span 1; }
    .fc--code  { grid-column: span 1; }

    .cta-inner { flex-direction: column; align-items: flex-start; }
    .cta-cmd   { width: 100%; overflow-x: auto; }

    .hero-term    { max-width: 100%; }
    .star-cta     { min-width: 0; width: 100%; }
    .hero-actions { flex-direction: column; align-items: stretch; }
}