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

:root {

  --ink:#0b1318;

  --ink-2:#132128;

  --sand:#f5f2ea;

  --paper:#fbfaf6;

  --muted:#68747a;

  --line:#d9ddd9;

  --teal:#0e6b63;

  --mint:#92e2d3;

  --coral:#df775f;

  --blue:#6ea9ff;

  --shadow:0 24px 70px rgba(11,19,24,.10);

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  min-width:320px;

  color:var(--ink);

  background:var(--paper);

  font-family:'DM Sans',sans-serif;

  -webkit-font-smoothing:antialiased;

}

a{color:inherit}

img{max-width:100%}

.site-header{

  position:sticky;

  top:0;

  z-index:30;

  display:grid;

  grid-template-columns:auto 1fr auto;

  align-items:center;

  gap:40px;

  height:82px;

  padding:0 clamp(22px,4vw,64px);

  border-bottom:1px solid rgba(11,19,24,.07);

  background:rgba(251,250,246,.87);

  backdrop-filter:blur(18px);

}

.brand img{display:block;width:148px}

.site-header nav{display:flex;justify-content:center;gap:28px}

.site-header nav a,.nav-cta{

  text-decoration:none;

  font-size:13px;

  font-weight:600;

}

.site-header nav a{color:#58656b}

.site-header nav a:hover{color:var(--ink)}

.nav-cta{

  padding:11px 16px;

  border:1px solid var(--ink);

  border-radius:999px;

}

main{overflow:hidden}

.hero{

  max-width:1440px;

  min-height:760px;

  margin:0 auto;

  padding:90px clamp(24px,5vw,72px) 120px;

  display:grid;

  grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr);

  align-items:center;

  gap:72px;

}

.kicker{

  margin:0 0 20px;

  color:var(--teal);

  font:500 11px/1 'DM Mono',monospace;

  letter-spacing:.15em;

  text-transform:uppercase;

}

.hero h1{

  max-width:780px;

  margin:0 0 28px;

  font-size:clamp(64px,7.3vw,116px);

  line-height:.9;

  letter-spacing:-.072em;

  font-weight:500;

}

.hero-lede{

  max-width:680px;

  margin:0;

  color:#536168;

  font-size:20px;

  line-height:1.55;

}

.hero-actions{display:flex;gap:12px;margin:36px 0 28px;flex-wrap:wrap}

.button{

  display:inline-flex;

  min-height:52px;

  align-items:center;

  justify-content:center;

  padding:0 22px;

  border-radius:13px;

  text-decoration:none;

  font-weight:700;

  font-size:14px;

}

.button.primary{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(11,19,24,.14)}

.button.ghost{border:1px solid #ccd2d0;background:rgba(255,255,255,.45)}

.button.light{background:#fff;color:var(--ink)}

.status-note{

  max-width:680px;

  margin:0;

  color:#718086;

  font-size:12px;

  line-height:1.65;

}

.status-note strong{color:#425057}

.hero-stage{

  position:relative;

  min-height:560px;

  border-radius:34px;

  background:

    radial-gradient(circle at 15% 10%,rgba(146,226,211,.55),transparent 31%),

    radial-gradient(circle at 85% 76%,rgba(110,169,255,.34),transparent 33%),

    #e8efec;

  box-shadow:var(--shadow);

  overflow:hidden;

}

.hero-stage:after{

  content:'';

  position:absolute;inset:0;

  background-image:radial-gradient(rgba(11,19,24,.13) 1px,transparent 1px);

  background-size:18px 18px;

  mask-image:linear-gradient(to bottom right,rgba(0,0,0,.62),transparent 75%);

}

.glass{

  position:absolute;

  z-index:2;

  border:1px solid rgba(255,255,255,.78);

  background:rgba(255,255,255,.76);

  backdrop-filter:blur(20px);

  box-shadow:0 22px 45px rgba(23,54,54,.12);

}

.meeting-window{left:34px;right:34px;top:36px;padding:18px;border-radius:22px}

.window-bar{display:flex;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid #dde3e1}

.window-bar span{width:8px;height:8px;border-radius:50%;background:#bfc9c6}

.window-bar b{margin-left:8px;font:500 10px 'DM Mono',monospace;color:#75827f}

.people{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:18px}

.person{min-height:125px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:15px;background:#f0f3f2;color:#596466;font-size:11px}

.person i,.person img{width:46px;height:46px;border-radius:13px}

.person i{display:grid;place-items:center;background:#dde5e3;font-style:normal;font-weight:700;color:#3f4e50}

.person.operator{background:#e1f2ee;color:var(--teal);font-weight:700}

.person.operator img{padding:5px}

.speech{margin-top:14px;padding:14px 16px;border-radius:13px;background:var(--ink);color:#fff;font-size:13px;line-height:1.45}

.action-card{left:86px;right:22px;bottom:28px;padding:19px 20px 20px;border-radius:20px}

.action-card>p{margin:0;color:var(--teal);font:500 9px 'DM Mono',monospace;letter-spacing:.14em}

.action-card h3{margin:7px 0 13px;font-size:18px}

.step{display:flex;align-items:center;gap:9px;padding:8px 0;color:#7d888b;font-size:12px}

.step span{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#edf0ef;font:500 9px 'DM Mono',monospace}

.step.done{color:#52615e}

.step.done span{background:#daf0ea;color:var(--teal)}

.step.active{color:var(--ink);font-weight:700}

.step.active span{background:var(--ink);color:#fff}

.statement{

  padding:86px 24px 96px;

  text-align:center;

  background:var(--sand);

  border-top:1px solid #e4e2da;

  border-bottom:1px solid #e4e2da;

}

.statement p{margin:0 0 10px;color:#86908f;font-size:17px}

.statement h2{max-width:900px;margin:0 auto;font-size:clamp(42px,6vw,82px);line-height:1;letter-spacing:-.055em;font-weight:500}

.section{

  max-width:1320px;

  margin:0 auto;

  padding:118px clamp(24px,5vw,72px);

}

.section-head{max-width:810px;margin-bottom:48px}

.section-head h2,.split h2,.cta h2{

  margin:0 0 20px;

  font-size:clamp(42px,5vw,72px);

  line-height:.98;

  letter-spacing:-.055em;

  font-weight:500;

}

.section-head>p:last-child,.split>div>p,.pricing-note{

  color:#66747a;

  font-size:17px;

  line-height:1.6;

}

.flow-grid,.computer-grid,.safety-grid,.use-grid,.price-grid{

  display:grid;

  gap:14px;

}

.flow-grid{grid-template-columns:repeat(4,1fr)}

.flow-grid article,.computer-grid article,.safety-grid article,.use-grid article{

  padding:28px;

  border:1px solid #e0e3df;

  border-radius:20px;

  background:#fff;

}

.flow-grid article>span{

  display:inline-block;margin-bottom:58px;color:var(--teal);font:500 10px 'DM Mono',monospace

}

.flow-grid h3,.computer-grid h3,.safety-grid h3,.use-grid h3{margin:0 0 10px;font-size:21px}

.flow-grid p,.computer-grid p,.safety-grid p,.use-grid p{margin:0;color:#6e7a7f;font-size:14px;line-height:1.55}

.split{

  max-width:1360px;

  margin:18px auto;

  padding:clamp(56px,7vw,98px);

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:80px;

  border-radius:34px;

}

.dark{

  color:#fff;

  background:

    radial-gradient(circle at 84% 18%,rgba(14,107,99,.5),transparent 31%),

    var(--ink);

}

.dark>div>p{color:#aebbbb}

.mint{color:var(--mint)}

.checks{margin:30px 0 0;padding:0;list-style:none}

.checks li{position:relative;padding:11px 0 11px 29px;border-bottom:1px solid rgba(255,255,255,.08);color:#d5dddc;font-size:14px}

.checks li:before{content:'✓';position:absolute;left:0;color:var(--mint)}

.conference-visual{position:relative;min-height:420px}

.orb{

  position:absolute;top:0;left:50%;width:156px;height:156px;transform:translateX(-50%);

  border-radius:50%;

  background:radial-gradient(circle at 35% 28%,#dbfff7,#4ed2b6 35%,#0e6b63 72%,#063832);

  box-shadow:0 0 70px rgba(78,210,182,.25);

}

.transcript{position:absolute;left:0;right:32px;top:188px;padding:15px 18px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.06)}

.transcript small{color:#718a85;font:9px 'DM Mono',monospace}

.transcript p{margin:6px 0 0!important;color:#d5dddc!important;font-size:13px!important}

.operator-line{top:270px;left:52px;right:0;background:rgba(146,226,211,.1);border-color:rgba(146,226,211,.24)}

.operator-line p b{color:var(--mint)}

.live-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:10px 15px;border-radius:999px;background:#fff;color:var(--ink);font:500 10px 'DM Mono',monospace;white-space:nowrap}

.computer-grid{grid-template-columns:repeat(3,1fr)}

.computer-grid article{min-height:310px;display:flex;flex-direction:column}

.label{align-self:flex-start;padding:6px 8px;border-radius:7px;background:#dff3ed;color:var(--teal);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}

.label.future{background:#e8effb;color:#4d6d9a}

.label.vision{background:#f6e8e4;color:#9a594a}

.computer-grid h3{margin-top:auto;padding-top:64px;font-size:25px}

.safety{background:#f1f0ea;border-radius:34px}

.safety-grid{grid-template-columns:repeat(3,1fr)}

.safety-grid article{background:rgba(255,255,255,.62)}

.use-grid{grid-template-columns:repeat(4,1fr)}

.use-grid article p{font-size:15px;color:#46545a}

.pricing{padding-top:132px;padding-bottom:132px}

.price-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}

.price-grid article{

  position:relative;

  padding:30px;

  border:1px solid #dfe3df;

  border-radius:22px;

  background:#fff;

}

.price-grid article.featured{border-color:var(--ink);box-shadow:0 24px 50px rgba(11,19,24,.09);transform:translateY(-10px)}

.popular{position:absolute;top:0;right:22px;transform:translateY(-50%);padding:7px 9px;border-radius:7px;background:var(--ink);color:#fff;font:500 8px 'DM Mono',monospace;letter-spacing:.12em}

.tier{margin:0;color:var(--teal);font:500 10px 'DM Mono',monospace;letter-spacing:.12em}

.price-grid h3{margin:17px 0 10px;font-size:42px;letter-spacing:-.04em}

.price-grid h3 span{font-size:13px;color:#768287;font-weight:500;letter-spacing:0}

.price-grid article>p:not(.tier){min-height:54px;color:#68757b;font-size:14px;line-height:1.5}

.price-grid ul{min-height:170px;margin:23px 0;padding:0;list-style:none}

.price-grid li{padding:8px 0;border-bottom:1px solid #edf0ee;font-size:13px}

.price-grid li:before{content:'✓';margin-right:9px;color:var(--teal)}

.price-grid article>a{display:flex;justify-content:center;padding:13px;border-radius:11px;background:#edf2f0;text-decoration:none;font-weight:700;font-size:13px}

.featured>a{background:var(--ink)!important;color:#fff}

.pricing-note{max-width:850px;margin:30px auto 0;text-align:center;font-size:12px}

.hardware{background:#eae8df}

.hardware-device{

  position:relative;

  width:min(100%,430px);

  aspect-ratio:1.25/1;

  margin:auto;

  display:grid;

  place-items:center;

  border-radius:42px;

  background:linear-gradient(145deg,#171e21,#080c0e);

  box-shadow:0 40px 70px rgba(11,19,24,.24),inset 0 1px rgba(255,255,255,.12);

}

.hardware-device img{width:110px;opacity:.9}

.device-light{position:absolute;top:22px;right:24px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint)}

.muted{font-size:12px!important;color:#858d8e!important}

.faq{max-width:1000px}

.faq details{border-top:1px solid #dfe3df;padding:22px 0}

.faq details:last-child{border-bottom:1px solid #dfe3df}

.faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:700}

.faq summary::-webkit-details-marker{display:none}

.faq summary:after{content:'+';float:right;font-weight:400;color:#899493}

.faq details[open] summary:after{content:'–'}

.faq details p{max-width:800px;margin:14px 0 0;color:#68767a;font-size:14px;line-height:1.6}

.cta{

  margin:20px 18px 0;

  padding:110px 24px;

  text-align:center;

  border-radius:34px 34px 0 0;

  color:#fff;

  background:var(--ink);

}

.cta h2{max-width:820px;margin:0 auto 20px}

.cta>p:not(.kicker){max-width:670px;margin:0 auto 32px;color:#aebbbb;font-size:16px;line-height:1.6}

.cta small{display:block;margin-top:18px;color:#7f9290;font-size:10px}

footer{

  padding:34px clamp(22px,5vw,70px);

  display:grid;

  grid-template-columns:auto 1fr auto;

  gap:30px;

  align-items:center;

  color:#a6b2b0;

  background:var(--ink);

  border-top:1px solid rgba(255,255,255,.08);

  font-size:11px;

}

footer>div{display:flex;align-items:center;gap:8px;color:#fff}

footer>div img{width:26px}

footer>div span{color:#70817f}

footer nav{display:flex;justify-content:center;gap:20px}

footer nav a{text-decoration:none}

footer p{margin:0}

.not-found{min-height:100vh;display:grid;place-items:center}

.not-found main{text-align:center;padding:30px}

.not-found img{width:180px}

.not-found h1{font-size:60px;margin:40px 0 10px}

@media(max-width:1050px){

  .site-header nav{display:none}

  .hero{grid-template-columns:1fr;padding-top:68px}

  .hero-stage{min-height:520px}

  .flow-grid,.use-grid{grid-template-columns:repeat(2,1fr)}

  .split{grid-template-columns:1fr;gap:50px;margin-left:18px;margin-right:18px}

  .safety-grid{grid-template-columns:repeat(2,1fr)}

  .price-grid{grid-template-columns:1fr}

  .price-grid article.featured{transform:none}

  .price-grid ul{min-height:0}

}

@media(max-width:720px){

  .site-header{grid-template-columns:1fr auto;height:72px;padding:0 18px}

  .brand img{width:130px}

  .nav-cta{font-size:11px;padding:9px 12px}

  .hero{padding:58px 20px 80px;gap:46px}

  .hero h1{font-size:58px}

  .hero-lede{font-size:17px}

  .hero-stage{min-height:460px;border-radius:24px}

  .meeting-window{left:16px;right:16px;top:18px}

  .people{gap:6px}

  .person{min-height:108px}

  .action-card{left:38px;right:12px;bottom:16px}

  .statement{padding:70px 20px}

  .section{padding:86px 20px}

  .section-head h2,.split h2,.cta h2{font-size:45px}

  .flow-grid,.computer-grid,.safety-grid,.use-grid{grid-template-columns:1fr}

  .flow-grid article>span{margin-bottom:34px}

  .computer-grid h3{padding-top:42px}

  .split{padding:54px 24px;border-radius:24px}

  .conference-visual{min-height:390px}

  .hardware-device{width:100%}

  .cta{margin:10px 8px 0;padding:82px 20px;border-radius:24px 24px 0 0}

  footer{grid-template-columns:1fr;text-align:center}

  footer>div,footer nav{justify-content:center}

}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}