@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --ink: #f4f5f8;
  --muted: #9399a8;
  --line: rgba(255,255,255,.1);
  --soft-line: rgba(255,255,255,.065);
  --bg: #080a0d;
  --panel: #0f1217;
  --panel-light: #151a22;
  --acid: #d9ff4d;
  --acid-ink: #152000;
  --violet: #b8a1ff;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(900px 600px at 87% -8%, rgba(189, 158, 255, .13), transparent 66%),
    radial-gradient(700px 540px at -8% 38%, rgba(217, 255, 77, .06), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: "DM Sans", Inter, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.ambient { position:absolute; border-radius:50%; filter:blur(70px); opacity:.23; pointer-events:none; }
.ambient-one { width:350px;height:350px;background:#b79aff;right:-160px;top:130px; }
.ambient-two { width:260px;height:260px;background:#c9ff3d;left:-160px;top:620px;opacity:.1; }

.site-header {
  width: min(calc(100% - 56px), var(--max));
  height: 88px; margin: 0 auto;
  display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:3;
  border-bottom:1px solid var(--soft-line);
}
.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; }
.brand-mark {
  width:31px; height:31px; display:grid; place-items:center; border-radius:9px;
  color:var(--acid-ink); background:var(--acid);
}
.brand-mark svg { width:20px; height:20px; }
.brand-name { font-weight:700; letter-spacing:-.05em; font-size:1.06rem; }
.brand-name span { color:var(--muted); font-weight:500; }
.navigation { display:flex; align-items:center; gap:25px; color:var(--muted); font-size:.88rem; font-weight:500; }
.navigation > a:not(.nav-chip) { transition:color .2s ease; }
.navigation > a:not(.nav-chip):hover { color:var(--ink); }
.nav-chip {
  color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:9px 13px 9px 15px; transition:background .2s ease,border-color .2s ease;
}
.nav-chip:hover { border-color:rgba(217,255,77,.5); background:rgba(217,255,77,.09); }
.nav-chip span { color:var(--acid); margin-left:4px; font-size:.9rem; }

main, footer { width:min(calc(100% - 56px), var(--max)); margin:0 auto; position:relative; z-index:1; }
.hero {
  min-height: 715px;
  display:grid; grid-template-columns: minmax(0, .95fr) minmax(460px, .98fr);
  align-items:center; gap:45px; padding:90px 0 80px;
}
.eyebrow,.section-label,.micro-label,.release-badge {
  font-family:"DM Mono", ui-monospace, monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
}
.eyebrow { display:flex; align-items:center; gap:9px; color:#bdc3d1; margin-bottom:23px; }
.pulse { height:7px;width:7px;border-radius:99px;background:var(--acid); box-shadow:0 0 0 5px rgba(217,255,77,.1),0 0 20px rgba(217,255,77,.7); }
h1,h2,h3,p { margin-top:0; }
h1 {
  max-width:720px; font-size:clamp(4rem,7.15vw,7rem); line-height:.88; letter-spacing:-.08em; margin-bottom:30px; font-weight:600;
}
h1 em,h2 span {
  font-family:"Fraunces", Georgia, serif; font-weight:500; font-style:italic; letter-spacing:-.07em; color:var(--acid);
}
.hero-lede { max-width:525px; color:var(--muted); font-size:1.16rem; line-height:1.63; letter-spacing:-.02em; }
.hero-actions { margin:34px 0 31px; display:flex; align-items:center; gap:22px; }
.button {
  display:inline-flex; align-items:center; gap:12px; border-radius:10px; font-size:.89rem; font-weight:700; letter-spacing:-.015em; padding:13px 15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform:translateY(-2px); }
.button-primary { color:var(--acid-ink); background:var(--acid); box-shadow:0 10px 30px rgba(176, 220, 40, .15); }
.button-primary:hover { box-shadow:0 13px 38px rgba(176,220,40,.26); }
.button-icon { font-size:1.03rem; }
.text-link { color:#c1c5cf; font-size:.91rem; font-weight:600; }
.text-link span { color:var(--acid); margin-left:4px; }
.hero-proof { display:flex; flex-wrap:wrap; gap:20px; color:#737b8b; font-size:.76rem; }
.hero-proof i { color:var(--acid); font-style:normal; margin-right:5px; }

.hero-product { position:relative; min-height:510px; display:grid; place-items:center; }
.product-orbit { position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; pointer-events:none; }
.orbit-a { width:520px;height:520px; }
.orbit-b { width:370px;height:370px; border-color:rgba(217,255,77,.11); transform:rotate(31deg); }
.app-window {
  width:min(100%, 548px); border:1px solid rgba(255,255,255,.13); border-radius:17px; overflow:hidden; 
  background:rgba(18,22,29,.91); box-shadow:0 32px 90px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25);
  transform:rotate(-2deg); position:relative; z-index:1; backdrop-filter:blur(16px);
}
.window-bar { height:49px; display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 14px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.window-brand { display:flex;align-items:center;gap:8px;font-size:.73rem;font-weight:600;color:#d9dce2; }
.window-logo { background:var(--acid); color:var(--acid-ink); width:18px;height:18px;display:grid;place-items:center;border-radius:5px;font-size:.65rem;font-weight:800; }
.window-controls { display:flex;gap:6px; }
.window-controls span { width:7px;height:7px;background:#3a404a;border-radius:50%; }
.app-body { min-height:363px; display:grid; grid-template-columns:58px 1fr; }
.app-side { padding-top:15px; border-right:1px solid rgba(255,255,255,.07); display:flex;align-items:center;flex-direction:column;gap:10px; }
.side-icon { color:#777f8d; width:31px;height:31px;display:grid;place-items:center;border-radius:8px; }
.side-icon.active { color:var(--acid); background:rgba(217,255,77,.13); }
.side-icon svg { width:16px;height:16px; }
.app-content { padding:25px 25px 18px; }
.app-heading { display:flex; justify-content:space-between; align-items:flex-start; }
.micro-label { color:#7d8592;font-size:.59rem;letter-spacing:.08em; }
.app-heading h2 { margin:3px 0 0;font-size:1.25rem;letter-spacing:-.05em;line-height:1; }
.small-toggle { font-size:.63rem;color:var(--acid);background:rgba(217,255,77,.1);border:0;padding:6px 8px;border-radius:999px;display:flex;gap:5px;align-items:center; }
.small-toggle span { display:block;width:6px;height:6px;background:var(--acid);border-radius:50%; }
.master-panel { margin-top:20px; min-height:84px;border-radius:11px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,rgba(217,255,77,.135),rgba(217,255,77,.04));border:1px solid rgba(217,255,77,.15); }
.master-panel strong { font-size:2.05rem;line-height:1;letter-spacing:-.09em;display:block;margin-top:5px;color:#f7f9eb; }
.master-panel small { font-size:.7rem;margin-left:2px;letter-spacing:0;color:#a9b377; }
.dial {width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--acid);font-size:1.25rem;position:relative;background:conic-gradient(var(--acid) 0 58%,rgba(255,255,255,.12) 58% 100%); }
.dial::before { content:"";width:38px;height:38px;border-radius:50%;background:#17200d;position:absolute; }
.dial span {position:relative;z-index:1;font-size:1rem; }
.display-list { margin-top:18px; display:grid; gap:14px; }
.display-row { display:grid; grid-template-columns:26px 1.2fr minmax(66px,1fr) 30px; gap:10px;align-items:center; }
.display-icon { width:22px;height:16px;border:1px solid #788190;border-radius:3px;position:relative; }
.display-icon::after {content:"";position:absolute;left:7px;bottom:-4px;width:7px;height:2px;background:#788190;border-radius:2px; }
.display-icon.laptop {border-radius:2px 2px 3px 3px;height:14px; }
.display-copy { display:flex;flex-direction:column;line-height:1.05;min-width:0; }
.display-copy strong { font-size:.66rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.display-copy span {font-size:.55rem;color:#7d8592;margin-top:3px; }
.slider {height:3px;background:#303744;border-radius:99px;position:relative; }
.slider > span {position:absolute;left:0;top:0;bottom:0;background:var(--acid);border-radius:99px; }
.slider i {position:absolute;top:50%;width:8px;height:8px;background:#f9fbf1;border:2px solid var(--acid);border-radius:50%;transform:translate(-50%,-50%); }
.display-row b {font-size:.6rem;font-weight:500;color:#b5bbc5;text-align:right; }
.shortcut-strip { margin-top:20px;border-top:1px solid rgba(255,255,255,.07);padding-top:14px;display:flex;align-items:center;gap:4px;color:#6f7785;font-size:.57rem; }
.shortcut-strip kbd {font-family:"DM Mono",monospace;font-size:.5rem;padding:3px 4px;background:#232a34;border:1px solid #343c48;border-bottom-color:#4d5664;border-radius:3px;color:#b9c0ca; }
.shortcut-strip p {margin:0 0 0 auto;font-size:.58rem;color:#89919d; }
.floating-status { position:absolute;right:-2px;bottom:17px;z-index:2;background:#11161d;border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:9px 11px;font-size:.66rem;font-weight:500;color:#cad0d8;box-shadow:0 12px 30px rgba(0,0,0,.3);transform:rotate(-2deg); }
.green-dot {display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px rgba(217,255,77,.8);margin-right:6px;vertical-align:1px; }

.band { margin:0 calc((100vw - min(100vw - 56px, var(--max)))/-2); padding:21px max(28px,calc((100vw - var(--max))/2)); border-top:1px solid var(--soft-line);border-bottom:1px solid var(--soft-line);display:flex;align-items:center;gap:20px;color:#abb2bf;font-size:.76rem;font-family:"DM Mono",monospace;text-transform:uppercase;letter-spacing:.07em; }
.band p {margin:0;white-space:nowrap; }
.band span {height:1px;flex:1;background:var(--soft-line);}

.feature-section { padding:160px 0 150px; display:grid;grid-template-columns:.82fr 1fr; gap:clamp(52px,10vw,150px);align-items:center; }
.section-label { color:var(--acid); margin-bottom:20px; }
.feature-intro h2,.section-header h2,.updates-section h2 {font-size:clamp(2.8rem,4.5vw,4.75rem);line-height:.95;letter-spacing:-.075em;margin-bottom:25px;font-weight:600; }
.feature-intro > p:not(.section-label) { max-width:400px;color:var(--muted);font-size:1.03rem;line-height:1.65; }
.button-secondary { margin-top:16px;color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.025); }
.button-secondary:hover {border-color:rgba(217,255,77,.45);background:rgba(217,255,77,.08); }

.feature-card {border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#151a21 0%,#0d1015 100%);padding:clamp(28px,4vw,46px);min-height:460px;position:relative;overflow:hidden; }
.feature-card::before {content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(217,255,77,.12),transparent 67%);top:-174px;right:-125px;pointer-events:none; }
.feature-card-top {display:flex;justify-content:space-between;align-items:center;position:relative; }
.tool-icon {width:47px;height:47px;display:grid;place-items:center;border-radius:13px;background:var(--acid);color:var(--acid-ink); }
.tool-icon svg {width:25px;height:25px;}
.release-badge {color:#c4cf8a;border:1px solid rgba(217,255,77,.24);background:rgba(217,255,77,.06);padding:7px 9px;border-radius:99px;font-size:.58rem; }
.feature-card h3 {font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;letter-spacing:-.075em;margin:36px 0 11px;position:relative; }
.feature-card h3 span {font-family:"Fraunces",serif;font-weight:500;font-style:italic;color:var(--acid); }
.feature-card > p {color:#a6adbb;max-width:400px;position:relative; }
.feature-divider {height:1px;background:var(--soft-line);margin:35px 0 25px;position:relative; }
.feature-specs {display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;position:relative; }
.feature-specs span {font-size:.76rem;color:#b7bdc7; }
.feature-specs b {font-family:"DM Mono",monospace;font-size:.59rem;color:var(--acid);margin-right:7px;font-weight:500; }
.feature-bottom {position:absolute;left:clamp(28px,4vw,46px);right:clamp(28px,4vw,46px);bottom:27px;border-top:1px solid var(--soft-line);padding-top:16px;display:flex;justify-content:space-between;color:#747c8a;font-family:"DM Mono",monospace;font-size:.61rem;text-transform:uppercase;letter-spacing:.07em; }
.coming {color:var(--acid); }
.coming i {font-style:normal;margin-left:4px; }

.standard-section {border-top:1px solid var(--soft-line);padding:139px 0 140px; }
.section-header {max-width:700px; }
.principles {margin-top:76px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line); }
.principles article {min-height:255px;padding:25px 32px 20px 0;margin-right:31px;border-right:1px solid var(--line); }
.principles article:last-child {border-right:0;margin-right:0;padding-right:0; }
.principle-number {font-family:"DM Mono",monospace;font-size:.7rem;color:var(--acid);}
.principles h3 {font-size:1.42rem;letter-spacing:-.05em;margin:58px 0 11px; }
.principles p {font-size:.91rem;color:var(--muted);line-height:1.6;max-width:280px; }
.updates-section {padding:56px 0 0;border-top:1px solid var(--soft-line); }
.updates-grid {padding:clamp(38px,6vw,75px);border-radius:22px;background:linear-gradient(130deg,#1a2030,#101417 55%,#151b0d);border:1px solid rgba(255,255,255,.11);display:grid;grid-template-columns:1fr .75fr;gap:65px;align-items:end;position:relative;overflow:hidden; }
.updates-grid::after {content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-190px;top:-225px;border:1px solid rgba(217,255,77,.2);box-shadow:0 0 0 55px rgba(217,255,77,.03),0 0 0 110px rgba(217,255,77,.02); }
.updates-grid .section-label {color:#d0e997; }
.updates-section h2 {margin:0; }
.updates-content {position:relative;z-index:1; }
.updates-content p {color:#afb5c0;font-size:1.02rem;line-height:1.65;margin-bottom:25px; }
.status-line {font-family:"DM Mono",monospace;font-size:.67rem;letter-spacing:.02em;color:#cbd1d9; }

footer {border-top:1px solid var(--soft-line);margin-top:80px;padding:33px 0 40px;display:flex;justify-content:space-between;gap:30px;align-items:flex-end; }
.footer-left p {margin:12px 0 0;color:#747c8a;font-size:.8rem; }
.footer-right {display:grid;grid-template-columns:repeat(3,auto);gap:8px 22px;justify-items:end;align-items:center;color:#969daa;font-size:.78rem; }
.footer-right a:hover {color:var(--acid);}
.footer-right span {grid-column:1/-1;color:#5d6470;font-family:"DM Mono",monospace;font-size:.61rem;letter-spacing:.04em; }

@media (max-width: 900px) {
  .hero {grid-template-columns:1fr; padding-top:80px; gap:60px;}
  .hero-product {min-height:420px; justify-content:start;}
  .app-window {margin-left:5%; }
  .feature-section {grid-template-columns:1fr;gap:60px;padding:115px 0;}
}
@media (max-width: 620px) {
  .site-header,main,footer {width:min(calc(100% - 34px),var(--max));}
  .site-header {height:74px;}
  .navigation > a:not(.nav-chip) {display:none;}
  .nav-chip {font-size:.76rem;padding:8px 11px;}
  .hero {min-height:auto;padding:72px 0 53px;gap:50px;}
  h1 {font-size:clamp(3.35rem,16vw,5.1rem);}
  .hero-lede {font-size:1rem;}
  .hero-actions {align-items:flex-start;flex-direction:column;gap:17px;}
  .hero-proof {gap:10px 15px;font-size:.68rem;}
  .hero-product {min-height:330px;}
  .app-window {width:calc(100% - 2px);margin:0;transform:rotate(-1deg);}
  .orbit-a {width:370px;height:370px}.orbit-b {width:270px;height:270px;}
  .app-body {grid-template-columns:43px 1fr;min-height:325px;}.app-side{padding-top:11px}.side-icon{width:27px;height:27px}.app-content{padding:18px 16px 13px;}
  .master-panel{margin-top:16px}.display-row{grid-template-columns:21px 1.12fr minmax(47px, .7fr) 25px;gap:7px;}.display-row b{font-size:.52rem}.display-copy strong{font-size:.58rem}.slider i{width:7px;height:7px}.shortcut-strip p{display:none;}
  .floating-status {right:4px;bottom:-7px;font-size:.58rem;}
  .band {margin:0 -17px;padding:17px;overflow:hidden;gap:12px;font-size:.59rem;}.band p:last-child{display:none;}
  .feature-section {padding:94px 0;gap:45px}.feature-intro h2,.section-header h2,.updates-section h2{font-size:clamp(2.7rem,12vw,3.85rem);}
  .feature-card{min-height:445px;padding:27px}.feature-bottom{left:27px;right:27px}.feature-specs{grid-template-columns:1fr;gap:11px;}
  .standard-section{padding:95px 0}.principles{margin-top:48px;grid-template-columns:1fr;}.principles article,.principles article:last-child{min-height:0;padding:22px 0 25px;margin:0;border-right:0;border-bottom:1px solid var(--line)}.principles article:last-child{border-bottom:0}.principles h3{margin:26px 0 9px;}
  .updates-grid{grid-template-columns:1fr;gap:28px;padding:34px 27px}.updates-grid::after{right:-260px;top:-240px;}
  footer{margin-top:56px;display:block}.footer-right{margin-top:30px;justify-items:start;justify-content:start;grid-template-columns:repeat(3,auto);}
}