:root{
    --graphite:#0A0C0E;
    --panel:#14171B;
    --panel-2:#1B1F24;
    --paper:#F5F4F0;
    --paper-2:#EBE9E3;
    --steel:#8B94A0;
    --steel-dim:#565D66;
    --line-dark:#262B31;
    --line-light:#DDDAD2;
    --signal:#FF7A29;
    --signal-dim:#C75E1D;
    --ink:#0A0C0E;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono:'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    background:var(--graphite);
    color:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

.mono-tag{
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--signal);
    display:flex;
    align-items:center;
    gap:0.55rem;
}
.mono-tag::before{content:"//";color:var(--signal-dim);}

h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.06;
}

.container{max-width:1240px; margin:0 auto; padding:0 6vw;}

/* corner-bracket technical frame */
.bracket{position:relative;}
.bracket::before,.bracket::after{
    content:"";
    position:absolute;
    width:14px;height:14px;
    border:1.5px solid var(--signal);
    opacity:0.7;
}
.bracket::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.bracket::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* ---------- NAV ---------- */
header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:0 6vw;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid transparent;
    transition:background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
header.scrolled{
    background:rgba(10,12,14,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-dark);
    padding:0 6vw;
}
.brand{
    font-family:var(--font-mono);
    font-size:0.95rem;
    letter-spacing:0.02em;
    color:var(--paper);
    display:flex;align-items:center;gap:0.6rem;
}
.brand b{font-weight:500;}
.brand span{color:var(--steel);}

nav ul{list-style:none; display:flex; gap:2.2rem;}
nav a{font-size:0.82rem; color:var(--steel); transition:color 0.3s ease; font-family:var(--font-mono);}
nav a:hover{color:var(--paper);}
.nav-cta{
    font-family:var(--font-mono);
    font-size:0.78rem;
    padding:0.6rem 1.2rem;
    border:1px solid var(--signal);
    color:var(--signal) !important;
    transition:all 0.3s ease;
}
.nav-cta:hover{background:var(--signal); color:var(--graphite) !important;}
.menu-toggle{display:none;background:none;border:none;color:var(--paper);cursor:pointer;}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    overflow:hidden;
    background:
        linear-gradient(var(--graphite), var(--graphite)),
        repeating-linear-gradient(90deg, var(--line-dark) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(0deg, var(--line-dark) 0 1px, transparent 1px 80px);
    background-blend-mode:normal;
}
.hero-inner{position:relative; z-index:2; width:100%; padding:1rem 6vw 1rem; align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem); color:var(--paper);}
.hero h1 .accent{color:var(--signal);}
.hero-sub{margin-top:1.8rem; font-size:1rem; color:var(--steel); font-weight:300;}
.hero-sub p + p{margin-top:1rem;}
.hero-actions{margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap;}

.btn{
    font-family:var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.03em;
    padding:0.9rem 1.7rem;
    display:inline-flex; align-items:center; gap:0.6rem;
    transition:all 0.3s ease;
    cursor:pointer;
    border:1px solid transparent;
}
.btn-solid{background:var(--signal); color:var(--graphite);}
.btn-solid:hover{background:#ff9354; transform:translateY(-1px);}
.btn-outline{border-color:var(--steel-dim); color:var(--paper);}
.btn-outline:hover{border-color:var(--paper);}
.btn-outline.light{border-color:rgba(10,12,14,0.3); color:var(--ink);}
.btn-outline.light:hover{border-color:var(--ink);}

/* hero diagram: rack / node schematic */
.hero-diagram{position:relative;}
.hero-diagram svg{width:100%; height:auto;}

/* ---------- SECTIONS ---------- */
section{padding:3rem 0; position:relative;}
.section-light{background:var(--paper); color:var(--ink);}
.section-panel{background:var(--panel);}

.section-head{max-width:760px; margin-bottom:3.6rem;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.5rem); margin-top:1rem;}
.section-light .section-head h2{color:var(--ink);}
.section-lede{margin-top:1.3rem; font-size:1rem; color:var(--steel); font-weight:300;}
.section-light .section-lede{color:#5A5F66;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- SECTION 2: capability cards ---------- */
.capability-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.cap-card{background:var(--panel); padding:2.2rem; border:1px solid var(--line-dark);}
.cap-card .idx{font-family:var(--font-mono); font-size:0.72rem; color:var(--signal);}
.cap-card h3{font-size:1.15rem; margin-top:1rem; font-weight:500;}
.cap-card p{margin-top:0.8rem; color:var(--steel); font-size:0.92rem;}

.lifecycle-strip{
    margin-top:1.4rem;
    background:var(--panel);
    border:1px solid var(--line-dark);
    padding:2.2rem 2.2rem 1.6rem;
}
.lifecycle-strip .idx{font-family:var(--font-mono); font-size:0.72rem; color:var(--signal);}
.lifecycle-strip h3{font-size:1.15rem; margin-top:1rem; font-weight:500;}
.lifecycle-chain{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:1.8rem;
}
.lifecycle-node{
    display:flex; align-items:center; gap:0.6rem;
    font-family:var(--font-mono);
    font-size:0.8rem;
    color:var(--paper);
    padding:0.7rem 1rem 0.7rem 0;
}
.lifecycle-node .dot{width:7px;height:7px;background:var(--signal); flex:none;}
.lifecycle-node .num{color:var(--steel-dim); font-size:0.7rem;}
.lifecycle-arrow{color:var(--steel-dim); padding:0.7rem 0.4rem; align-self:center;}

/* ---------- SECTION 3: spec grid ---------- */
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
.spec-card{background:var(--paper); padding:2.2rem;}
.spec-card .mono-tag{color:var(--signal-dim);}
.spec-card .mono-tag::before{color:var(--signal-dim);}
.spec-card ul{list-style:none; margin-top:1.3rem;}
.spec-card li{
    padding:0.55rem 0;
    border-bottom:1px solid var(--line-light);
    font-size:0.92rem;
    color:#33383E;
}
.spec-card li:first-child{padding-top:0;}
.spec-card li:last-child{border-bottom:none;}

/* ---------- SECTION 4: feature list ---------- */
.built-for-grid{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;}
.built-for-copy p{margin-top:1.2rem; color:var(--steel); font-weight:300; font-size:0.98rem;}
.built-for-copy .stack-line{
    font-family:var(--font-mono);
    font-size:0.92rem;
    color:var(--paper);
    padding:0.5rem 0;
    border-bottom:1px solid var(--line-dark);
}
.built-for-copy .stack-line:first-of-type{border-top:1px solid var(--line-dark);}
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.check-item{
    display:flex; align-items:center; gap:0.8rem;
    padding:1rem 0.5rem;
    border-bottom:1px solid var(--line-dark);
    font-size:0.9rem;
}
.check-item svg{flex:none; width:16px; height:16px;}

/* ---------- SECTION 5: partnership network ---------- */
.network-wrap{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;}
.industry-tags{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:2rem;}
.industry-tags span{
    font-family:var(--font-mono);
    font-size:0.76rem;
    color:var(--ink);
    background:var(--paper-2);
    border:1px solid var(--line-light);
    padding:0.5rem 0.9rem;
}

/* ---------- SECTION 6: node diagram ---------- */
.node-diagram{background:var(--panel); border:1px solid var(--line-dark); padding:3rem 2.4rem;}
.partner-logos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
    margin-top:3rem;
}
.partner-logo{
    background:var(--panel-2);
    padding:2rem 1.4rem;
    text-align:center;
    font-family:var(--font-mono);
    font-size:0.85rem;
    color:var(--paper);
}
.partner-logo small{display:block; margin-top:0.4rem; font-size:0.68rem; color:var(--steel-dim); letter-spacing:0.06em; text-transform:uppercase;}

/* ---------- SECTION 7: why / services list ---------- */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line-light); margin-top:2.5rem;}
.service-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 0.4rem;
    border-bottom:1px solid var(--line-light);
    font-size:0.96rem;
}
.service-row .n{font-family:var(--font-mono); font-size:0.72rem; color:var(--signal-dim);}

/* ---------- CTA ---------- */
.cta-section{background:var(--signal); color:var(--graphite); text-align:center; padding:6.5rem 0;}
.cta-section h2{color:var(--graphite); font-size:clamp(2rem,4vw,2.9rem); margin:1rem auto 0;}
.cta-section p{margin:1.4rem auto 0; color:rgba(10,12,14,0.75); font-weight:400;}
.cta-section .btn-solid{background:var(--graphite); color:var(--paper);}
.cta-section .btn-solid:hover{background:#000;}
.cta-section .btn-outline{border-color:rgba(10,12,14,0.4); color:var(--graphite);}
.cta-actions{margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{background:var(--graphite); padding:4rem 0 2.2rem; border-top:1px solid var(--line-dark);}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:3rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dark);}
.footer-brand p{margin-top:1rem; font-size:0.85rem; color:var(--steel-dim); max-width:34ch;}
.footer-cols{display:flex; gap:3.5rem; flex-wrap:wrap;}
.footer-col .mono-tag{color:var(--steel-dim);}
.footer-col .mono-tag::before{color:var(--steel-dim);}
.footer-col ul{list-style:none; margin-top:1rem;}
.footer-col li{padding:0.35rem 0; font-size:0.86rem; color:var(--steel);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:1.8rem; font-size:0.76rem; color:var(--steel-dim); flex-wrap:wrap; gap:1rem;}

@media (max-width:980px){
    .hero-inner{grid-template-columns:1fr;}
    .capability-grid{grid-template-columns:1fr;}
    .spec-grid{grid-template-columns:1fr 1fr;}
    .built-for-grid{grid-template-columns:1fr; gap:2.5rem;}
    .network-wrap{grid-template-columns:1fr; gap:2.5rem;}
    .partner-logos{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
    nav, .nav-cta{display:none;}
    .menu-toggle{display:block;}
    section{padding:5rem 0;}
    .spec-grid{grid-template-columns:1fr;}
    .check-grid{grid-template-columns:1fr;}
    .lifecycle-node{width:100%;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }