
:root{
  --bg:#08090a;
  --bg-soft:#0c0d0f;
  --panel:#101114;
  --panel-2:#141519;
  --panel-3:#18191e;
  --text:#f6f7f8;
  --muted:#a0a4ab;
  --muted-2:#747982;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --green:#79e3ad;
  --green-soft:rgba(121,227,173,.10);
  --blue:#8bb7ff;
  --warm:#e7d9bd;
  --max:1180px;
  --radius:24px;
  --shadow:0 34px 110px rgba(0,0,0,.44);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1000px 620px at 50% -200px,rgba(255,255,255,.09),transparent 66%),
    linear-gradient(180deg,#090a0b 0%,#08090a 45%,#090a0b 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.52;
  letter-spacing:-.018em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
.wrap{width:min(calc(100% - 40px),var(--max));margin:0 auto}
.nav-shell{
  position:sticky;top:0;z-index:100;
  background:rgba(8,9,10,.75);backdrop-filter:blur(22px) saturate(145%);
  border-bottom:1px solid rgba(255,255,255,.065)
}
nav{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:760;letter-spacing:-.035em}
.logo{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13)
}
.logo svg{width:20px;height:20px}
.nav-links{display:flex;align-items:center;gap:24px;color:#b7bbc1;font-size:14px}
.nav-links a:hover{color:#fff}
.nav-cta{padding:9px 13px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(255,255,255,.04);color:#fff!important}
.mobile-menu{display:none}

.hero{padding:112px 0 54px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.033);color:#c7cad0;font-size:13px;margin-bottom:28px
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(121,227,173,.65)}
h1{
  max-width:1030px;margin:0 auto;font-size:clamp(54px,8.1vw,102px);line-height:.96;
  letter-spacing:-.071em;font-weight:790
}
.hero p.lead{max-width:790px;margin:28px auto 0;color:#a7abb3;font-size:clamp(18px,2.1vw,22px);line-height:1.56}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;
  border-radius:13px;border:1px solid var(--line-strong);font-size:14px;font-weight:680;
  transition:transform .18s ease,background .18s ease,border-color .18s ease
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
.btn.primary{background:#f3f4f5;color:#111216;border-color:#f3f4f5}
.btn.secondary{background:rgba(255,255,255,.035)}
.micro{font-size:12px;color:#6f747c;margin-top:17px}

section{padding:94px 0}
.kicker{font-size:12px;color:#777c84;text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px}
.section-title{max-width:880px;margin:0;font-size:clamp(38px,5.3vw,64px);line-height:1.03;letter-spacing:-.055em}
.section-copy{max-width:760px;margin:20px 0 0;color:#a0a4ab;font-size:18px}
.split-head{display:grid;grid-template-columns:1.25fr .75fr;gap:76px;align-items:end}
.aside-copy{color:#858a93;font-size:14px;line-height:1.68;margin:0}

.rule{border-top:1px solid var(--line)}
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(255,255,255,.047),rgba(255,255,255,.017));
}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px}
.feature{min-height:275px;padding:28px;position:relative;overflow:hidden}
.feature:after{
  content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-105px;top:-110px;
  background:rgba(255,255,255,.022)
}
.iconbox{
  width:41px;height:41px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);
  background:rgba(255,255,255,.043);margin-bottom:45px
}
.iconbox svg{width:19px;height:19px;stroke:#d8dbe0}
.feature h3{font-size:22px;margin:0 0 10px;letter-spacing:-.036em}
.feature p{margin:0;color:#90959e;max-width:500px}

.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tag{font-size:11px;color:#a8adb5;border:1px solid var(--line);border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.025)}

.product-shell{padding:42px 0 96px}
.app-frame{
  padding:13px;border:1px solid var(--line);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.015));box-shadow:var(--shadow)
}
.app{overflow:hidden;min-height:650px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#0d0e10}
.titlebar{
  height:54px;display:flex;align-items:center;padding:0 17px;border-bottom:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,#121317,#0f1013)
}
.traffic{display:flex;gap:7px}.traffic i{width:9px;height:9px;border-radius:50%;background:#3c3f46}
.titlebar span{margin:0 auto;padding-right:48px;color:#777c84;font-size:12px}
.workspace{display:grid;grid-template-columns:205px 1fr}
.sidebar{padding:18px 12px;border-right:1px solid rgba(255,255,255,.07);background:#0b0c0e;min-height:596px}
.side-head{padding:7px 10px 12px;color:#5f646c;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.side-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:#858a92;font-size:12px;margin-bottom:4px}
.side-item.active{background:rgba(255,255,255,.065);color:#f0f1f2}
.side-dot{width:7px;height:7px;border-radius:2px;background:#444850}.active .side-dot{background:#d9dce1}
.mainpane{padding:22px;background:radial-gradient(600px 280px at 78% 0%,rgba(255,255,255,.03),transparent 72%),#0f1013}
.pane-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}
.pane-title h3{margin:0 0 4px;font-size:16px}.pane-title p{margin:0;color:#737881;font-size:11px}
.status-chip{padding:7px 10px;border-radius:999px;border:1px solid rgba(121,227,173,.18);background:var(--green-soft);color:#9fe9c0;font-size:10px}
.beat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:13px}
.beat{
  min-height:133px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)
}
.beat-meta{display:flex;justify-content:space-between;color:#666b74;font-size:9px}.beat h4{font-size:12px;margin:12px 0 8px}.beat p{margin:0;color:#777c85;font-size:10px}
.meter{height:4px;margin-top:15px;background:#25272d;border-radius:99px;overflow:hidden}.meter span{display:block;height:100%;background:#737883}
.lower-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}
.panel{border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#111216;padding:15px}
.panel-title{font-size:11px;color:#c2c5ca;margin-bottom:12px}
.wave{height:92px;display:flex;align-items:center;gap:3px;overflow:hidden}.wave i{display:block;width:3px;background:#555a63;border-radius:99px}
.assets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.asset{height:76px;border-radius:9px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(145deg,#22242a,#15161a)}
.tiny{font-size:9px;color:#646972;margin-top:10px}

.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.big-statement{max-width:980px;margin:0;font-size:clamp(34px,5vw,59px);line-height:1.11;letter-spacing:-.052em}
.big-statement strong{color:#fff}.big-statement span{color:#737882}

.pipeline{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:44px}
.pipe{
  min-height:178px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#0e0f11
}
.pipe-num{font-size:10px;color:#5f646c;margin-bottom:38px}.pipe b{display:block;font-size:14px;margin-bottom:8px}.pipe p{margin:0;color:#777c84;font-size:12px;line-height:1.55}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}
.deep-card{padding:28px}
.deep-card h3{font-size:24px;margin:0 0 12px;letter-spacing:-.04em}
.deep-card p{color:#9398a1;margin:0 0 18px}
.deep-list{display:grid;gap:11px;margin-top:20px}
.deep-row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.deep-row b{color:#d4d7dc}.deep-row span{color:#7f848d}

.callout{
  margin-top:42px;padding:30px;border:1px solid rgba(139,183,255,.18);border-radius:24px;
  background:linear-gradient(145deg,rgba(139,183,255,.07),rgba(255,255,255,.015))
}
.callout-label{font-size:11px;color:#a9c8fa;text-transform:uppercase;letter-spacing:.16em;margin-bottom:13px}
.callout h3{font-size:30px;letter-spacing:-.045em;margin:0 0 12px}
.callout p{max-width:820px;color:#9ba0a8;margin:0}

.status-card{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:36px;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))
}
.status-card h2{font-size:clamp(32px,4.3vw,50px);line-height:1.06;letter-spacing:-.048em;margin:0 0 13px}
.status-card p{margin:0;color:#969ba3;max-width:760px}.badge{white-space:nowrap;padding:12px 15px;border:1px solid rgba(121,227,173,.2);border-radius:999px;color:#a4ebc4;background:var(--green-soft);font-size:12px}

.contact{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-top:1px solid var(--line);padding-top:60px}
.contact h2{max-width:800px;font-size:clamp(42px,6vw,74px);line-height:.99;letter-spacing:-.061em;margin:0}
.email{font-size:16px;color:#d1d4d9;border-bottom:1px solid #4d5158;padding-bottom:4px}

.page-hero{padding:100px 0 58px}
.page-hero h1{text-align:left;margin:0;max-width:900px;font-size:clamp(50px,7vw,88px)}
.page-hero .lead{text-align:left;margin:24px 0 0;max-width:770px}
.breadcrumb{font-size:12px;color:#767b84;margin-bottom:22px}.breadcrumb a:hover{color:#fff}

.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.arch{padding:24px;min-height:210px}.arch .num{font-size:10px;color:#666b74;margin-bottom:36px}.arch h3{font-size:19px;margin:0 0 10px}.arch p{margin:0;color:#8a8f97;font-size:13px}
.flow-arrow{text-align:center;color:#4f545c;font-size:12px;padding:9px 0}

.table{width:100%;border-collapse:collapse;margin-top:32px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0e0f11}
.table th,.table td{text-align:left;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;vertical-align:top}
.table th{color:#bfc3c9;background:#111216;font-weight:650}.table td{color:#8d929a}.table tr:last-child td{border-bottom:none}

.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.road{padding:26px}.road-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:26px}
.road-head h3{margin:0;font-size:20px}.road-head span{font-size:10px;color:#777c84;border:1px solid var(--line);border-radius:999px;padding:6px 8px}
.road ul{margin:0;padding-left:18px;color:#8b9098}.road li{margin:10px 0}

.prose{max-width:800px;color:#a1a6ae;font-size:16px}.prose h2{color:#f2f3f4;font-size:30px;letter-spacing:-.04em;margin:44px 0 14px}.prose h3{color:#e6e8eb;font-size:20px;margin:30px 0 10px}.prose p{margin:0 0 16px}.prose ul{padding-left:20px}.prose li{margin:8px 0}
.prose strong{color:#d8dbe0}

footer{padding:32px 0 48px;color:#5f646d;font-size:12px}
.foot{display:flex;justify-content:space-between;gap:20px;align-items:center}
.foot-links{display:flex;gap:18px}.foot-links a:hover{color:#b9bdc4}

.demo-shell{display:grid;grid-template-columns:290px 1fr;gap:14px;margin-top:38px}
.demo-list,.demo-inspector{padding:18px}
.demo-beat{
  width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:12px;
  padding:13px;margin-bottom:7px;cursor:pointer
}
.demo-beat:hover{background:rgba(255,255,255,.025)}
.demo-beat.active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.demo-beat .top{display:flex;justify-content:space-between;font-size:10px;color:#737882}
.demo-beat strong{display:block;font-size:13px;margin-top:6px}
.state{font-size:10px;padding:4px 6px;border-radius:999px;border:1px solid var(--line)}
.state.locked{color:#a5eac4;border-color:rgba(121,227,173,.18);background:rgba(121,227,173,.06)}
.state.stale{color:#f0cf9c;border-color:rgba(231,217,189,.18);background:rgba(231,217,189,.06)}
.inspector-head{display:flex;justify-content:space-between;gap:20px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}
.inspector-head h2{margin:0;font-size:27px;letter-spacing:-.04em}.inspector-head p{margin:6px 0 0;color:#858a93;font-size:13px}
.inspector-section{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}.inspector-section:last-child{border-bottom:none}
.inspector-section label{display:block;font-size:10px;color:#70757d;text-transform:uppercase;letter-spacing:.13em;margin-bottom:8px}
.inspector-section p{margin:0;color:#b0b4bb;font-size:14px}
.demo-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.smallbtn{cursor:pointer;padding:9px 11px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(255,255,255,.035);font-size:12px}
.smallbtn:hover{background:rgba(255,255,255,.065)}
.demo-note{font-size:12px;color:#70757e;margin-top:14px}

@media(max-width:950px){
  .nav-links a:not(.nav-cta){display:none}
  .split-head{grid-template-columns:1fr;gap:20px}
  .workspace{grid-template-columns:1fr}.sidebar{display:none}
  .beat-grid{grid-template-columns:repeat(2,1fr)}
  .pipeline{grid-template-columns:repeat(3,1fr)}
  .arch-grid,.roadmap{grid-template-columns:1fr 1fr}
  .status-card{grid-template-columns:1fr}
  .demo-shell{grid-template-columns:1fr}
}
@media(max-width:650px){
  .wrap{width:min(calc(100% - 24px),var(--max))}
  .hero{padding-top:82px}
  .card-grid,.two-col{grid-template-columns:1fr}
  .pipeline,.arch-grid,.roadmap{grid-template-columns:1fr}
  .beat-grid,.lower-grid{grid-template-columns:1fr}
  .app-frame{padding:8px;border-radius:22px}.app{border-radius:15px;min-height:unset}.mainpane{padding:14px}
  .contact{flex-direction:column;align-items:flex-start}
  .foot{flex-direction:column;align-items:flex-start}
  section{padding:72px 0}
  .page-hero{padding-top:78px}
}
