:root{
  --bg:#06080a; --bg-soft:#0a0d10; --surface:#0e1216; --surface-2:#11161c;
  --border:#1b232b; --border-soft:#141a21;
  --text:#e9eef2; --muted:#8b97a2; --dim:#5b656e;
  --mint:#5ff2c2; --mint-dim:#34d3a6; --mint-ink:#04130d;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'Spline Sans Mono',monospace;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 80%)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}
a{color:inherit; text-decoration:none}

header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(6,8,10,.72); border-bottom:1px solid var(--border-soft)}
nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em}
.glyph{width:26px; height:26px; flex:none}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{font-size:14px; color:var(--muted); transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--text)}
.btn{font-family:var(--body); font-weight:500; font-size:14px; cursor:pointer; border:none; transition:transform .15s ease, background .2s, border-color .2s}
.btn:active{transform:scale(.97)}
.btn-mint{background:var(--mint); color:var(--mint-ink); padding:9px 18px; border-radius:9px}
.btn-mint:hover{background:#7ff7d1}
.btn-ghost{background:transparent; color:var(--text); padding:12px 22px; border-radius:10px; border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--mint-dim); color:#fff}
@media(max-width:820px){.navlinks a:not(.nav-cta){display:none}}

.hero{position:relative; padding:116px 0 92px; text-align:center}
.hero::before{content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:920px; height:560px; pointer-events:none;
  background:radial-gradient(circle at 50% 35%, rgba(95,242,194,.16), rgba(95,242,194,.04) 40%, transparent 66%); filter:blur(8px)}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--mint); border:1px solid var(--border); background:var(--bg-soft); padding:7px 14px; border-radius:100px; margin-bottom:30px}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px 1px var(--mint)}
h1{font-family:var(--display); font-weight:600; font-size:clamp(38px,6.2vw,76px); line-height:1.03; letter-spacing:-.025em; max-width:17ch; margin:0 auto}
h1 .accent{color:var(--mint); font-style:italic; font-weight:500}
.lede{color:var(--muted); font-size:clamp(16px,2vw,19px); line-height:1.62; max-width:62ch; margin:28px auto 0}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap}

.meta{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; margin-top:80px}
.meta div{background:var(--bg); padding:22px 22px}
.meta .k{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em}
.meta .v{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:6px; letter-spacing:.03em}
@media(max-width:760px){.meta{grid-template-columns:repeat(2,1fr)}}

section{padding:92px 0; position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:46px}
.sec-head .label{font-family:var(--mono); font-size:12px; color:var(--mint-dim); letter-spacing:.08em; margin-bottom:16px}
.sec-head h2{font-family:var(--display); font-weight:600; font-size:clamp(27px,3.5vw,42px); letter-spacing:-.02em; line-height:1.07; max-width:20ch}
.sec-head p{color:var(--muted); max-width:36ch; font-size:15px}

.lifecycle{display:grid; grid-template-columns:repeat(6,1fr); background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden}
.lc{padding:26px 18px 28px; border-left:1px solid var(--border-soft)}
.lc:first-child{border-left:none}
.lc .step{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.05em}
.lc .ico{margin:18px 0 14px; color:var(--mint)}
.lc .prod{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em}
.lc .stage{font-size:12.5px; color:var(--muted); margin-top:5px}
@media(max-width:980px){.lifecycle{grid-template-columns:repeat(3,1fr)} .lc:nth-child(4){border-left:none}}
@media(max-width:620px){.lifecycle{grid-template-columns:repeat(2,1fr)} .lc{border-left:none} .lc:nth-child(odd){border-right:1px solid var(--border-soft)}}

.products{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{position:relative; background:linear-gradient(180deg,var(--surface),#0b0f13); border:1px solid var(--border); border-radius:16px; padding:26px 26px 24px; overflow:hidden; transition:transform .25s ease, border-color .25s ease}
.card::after{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; background:radial-gradient(420px 160px at 100% 0%, rgba(95,242,194,.08), transparent 70%); opacity:0; transition:opacity .3s}
.card:hover{transform:translateY(-5px); border-color:#2a3b3a}
.card:hover::after{opacity:1}
.card .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px}
.card .idx{font-family:var(--mono); font-size:12px; color:var(--dim)}
.card .pico{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(95,242,194,.09); color:var(--mint); border:1px solid rgba(95,242,194,.18)}
.card h3{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.015em; margin-bottom:9px}
.card p{color:var(--muted); font-size:14px; line-height:1.55}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:16px; border-top:1px solid var(--border-soft)}
.card .cat{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mint-dim)}
.card .arrow{color:var(--dim); transition:color .2s, transform .2s}
.card:hover .arrow{color:var(--mint); transform:translateX(3px)}
@media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.products{grid-template-columns:1fr}}

.aifirst{display:grid; grid-template-columns:1.1fr 1fr; gap:46px; align-items:center; background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:20px; padding:56px; position:relative; overflow:hidden}
.aifirst::before{content:""; position:absolute; left:-60px; bottom:-90px; width:320px; height:320px; background:radial-gradient(circle,rgba(95,242,194,.10),transparent 65%)}
.aifirst .label{font-family:var(--mono); font-size:12px; color:var(--mint-dim); letter-spacing:.08em}
.aifirst h2{font-family:var(--display); font-weight:600; font-size:clamp(26px,3.2vw,38px); letter-spacing:-.02em; line-height:1.12; margin:16px 0 0; max-width:18ch}
.aifirst p{color:var(--muted); font-size:16px; margin-top:18px; line-height:1.62}
.aifirst ul{list-style:none; display:grid; gap:14px}
.aifirst li{display:flex; gap:13px; align-items:flex-start; font-size:14.5px}
.aifirst li .tick{flex:none; width:22px; height:22px; border-radius:7px; background:rgba(95,242,194,.1); border:1px solid rgba(95,242,194,.2); color:var(--mint); display:flex; align-items:center; justify-content:center; margin-top:1px}
.aifirst li b{font-weight:500; color:var(--text)}
.aifirst li span{color:var(--muted)}
@media(max-width:820px){.aifirst{grid-template-columns:1fr; gap:32px; padding:40px 30px}}

.approach{background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:20px; padding:60px 54px; position:relative; overflow:hidden}
.approach::before{content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; background:radial-gradient(circle,rgba(95,242,194,.10),transparent 65%)}
.approach .label{font-family:var(--mono); font-size:12px; color:var(--mint-dim); letter-spacing:.08em}
.approach h2{font-family:var(--display); font-weight:600; font-size:clamp(25px,3.2vw,36px); letter-spacing:-.02em; line-height:1.12; margin:16px 0 0; max-width:22ch}
.approach p{color:var(--muted); font-size:16px; max-width:62ch; margin-top:18px}
.approach .signals{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap}
.approach .signals span{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--text)}
.approach .signals i{color:var(--mint); font-style:normal}

.cta{text-align:center; padding:104px 0 88px}
.cta h2{font-family:var(--display); font-weight:600; font-size:clamp(32px,5vw,56px); letter-spacing:-.025em; line-height:1.05}
.cta p{color:var(--muted); margin:18px auto 0; max-width:48ch}
.cta .row{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

footer{border-top:1px solid var(--border-soft); padding:62px 0 40px}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.fgrid h4{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); margin-bottom:18px; font-weight:400}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:11px}
.fgrid li a{font-size:14px; color:var(--muted); transition:color .2s}
.fgrid li a:hover{color:var(--text)}
.fbrand p{color:var(--muted); font-size:14px; margin-top:16px; max-width:32ch; line-height:1.55}
.fbot{display:flex; align-items:center; justify-content:space-between; margin-top:52px; padding-top:26px; border-top:1px solid var(--border-soft); flex-wrap:wrap; gap:12px}
.fbot span{font-family:var(--mono); font-size:11.5px; color:var(--dim)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr; gap:32px}}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.hero .eyebrow{animation:rise .7s both .05s}
.hero h1{animation:rise .8s both .15s}
.hero .lede{animation:rise .8s both .3s}
.hero .hero-cta{animation:rise .8s both .45s}
.hero .meta{animation:rise .9s both .6s}
@media(prefers-reduced-motion:reduce){.reveal,.hero *{animation:none!important; opacity:1!important; transform:none!important}}

/* ---- internal pages ---- */
.page-hero{position:relative; padding:96px 0 10px; text-align:center}
.page-hero .eyebrow{margin-bottom:24px}
.page-hero h1{font-size:clamp(34px,5vw,58px); max-width:20ch}
.page-hero .lede{margin-top:22px}
.page-hero::before{content:""; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:820px; height:420px; pointer-events:none; background:radial-gradient(circle at 50% 35%, rgba(95,242,194,.13), transparent 64%); filter:blur(8px)}

.prose{max-width:760px; margin:0 auto}
.prose .upd{font-family:var(--mono); font-size:12px; color:var(--dim); margin-bottom:30px}
.prose h2{font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.01em; margin:36px 0 12px}
.prose h2:first-of-type{margin-top:0}
.prose p{color:var(--muted); font-size:15px; line-height:1.72; margin-bottom:14px}
.prose ul{color:var(--muted); font-size:15px; line-height:1.72; margin:0 0 14px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--mint-dim)}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:920px; margin:0 auto}
.info-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 28px}
.info-card .k{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mint-dim); margin-bottom:10px}
.info-card .v{font-size:15px; line-height:1.65; color:var(--text)}
.info-card .v a:hover{color:var(--mint)}
@media(max-width:700px){.contact-grid{grid-template-columns:1fr}}

.pdetail{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; padding:40px 0; border-top:1px solid var(--border-soft)}
.pdetail:first-of-type{border-top:none}
.pdetail .px .cat{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mint-dim)}
.pdetail .px h3{font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:-.015em; margin:12px 0 10px}
.pdetail .px p{color:var(--muted); font-size:15px; line-height:1.62}
.pdetail .pv{background:linear-gradient(180deg,var(--surface),#0b0f13); border:1px solid var(--border); border-radius:16px; min-height:180px; display:flex; align-items:center; justify-content:center; color:var(--mint)}
.pdetail:nth-child(even) .px{order:2}
@media(max-width:760px){.pdetail{grid-template-columns:1fr; gap:18px} .pdetail:nth-child(even) .px{order:0}}