:root{
  --bg:#f4f6f3;
  --surface:#ffffff;
  --ink:#10161b;
  --muted:#6d7770;
  --line:#daddd8;
  --accent:#c8ff3d;
  --dark:#0b1116;
  --dark-soft:#141c22;
  --radius:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

.site-header{
  position:fixed;
  z-index:50;
  top:0; left:0; right:0;
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 34px;
  background:rgba(244,246,243,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,22,27,.08);
}
.brand,.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.04em;
}
.brand-mark{width:28px;height:28px;object-fit:contain}
.desktop-nav{display:flex;gap:34px}
.desktop-nav a{
  text-decoration:none;
  font-size:14px;
  color:#39413c;
  transition:.2s;
}
.desktop-nav a:hover{color:#000}
.nav-cta{
  justify-self:end;
  text-decoration:none;
  background:var(--ink);
  color:#fff;
  padding:11px 17px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
.menu-btn,.mobile-menu{display:none}

.hero{
  min-height:100vh;
  padding:140px 6vw 60px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:5vw;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero-copy{max-width:650px}
.eyebrow{
  margin:0 0 28px;
  font-size:11px;
  letter-spacing:.19em;
  font-weight:700;
  color:#657068;
}
.eyebrow.light{color:#9aa6ae}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(58px,7vw,112px);
  line-height:.87;
  letter-spacing:-.075em;
  font-weight:620;
  margin-bottom:34px;
}
.hero-text{
  max-width:570px;
  font-size:20px;
  line-height:1.55;
  color:#59625c;
}
.hero-actions{
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:28px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:650;
}
.button-dark{background:var(--ink);color:#fff}
.button-light{background:#fff;color:#0b1116}
.text-link{text-decoration:none;font-size:14px;font-weight:600}
.text-link span{margin-left:8px}
.scroll-hint{
  position:absolute;
  bottom:28px;
  left:6vw;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#818a83;
}

.hero-visual{
  min-height:610px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.orb{
  position:absolute;border-radius:50%;filter:blur(1px)
}
.orb-one{
  width:430px;height:430px;
  background:radial-gradient(circle at 35% 30%,#d9ff74,#c8ff3d 50%,#98df21);
  top:30px;right:30px;
}
.orb-two{
  width:250px;height:250px;
  background:radial-gradient(circle at 40% 35%,#f8f9f5,#dfe4df);
  bottom:25px;left:50px;
}
.app-window{
  position:relative;
  width:min(780px,95%);
  background:#fbfcfa;
  border:1px solid rgba(10,20,20,.12);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(20,30,25,.18);
  overflow:hidden;
  transform:rotate(-2deg);
}
.app-topbar{
  height:58px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid #e1e5e0;
}
.app-brand{display:flex;gap:9px;align-items:center;font-weight:700;font-size:13px}
.app-brand img{width:19px;height:19px}
.window-dots{display:flex;gap:6px}
.window-dots i{width:7px;height:7px;border-radius:50%;background:#c9ceca}
.app-layout{display:grid;grid-template-columns:150px 1fr;min-height:410px}
.app-sidebar{border-right:1px solid #e3e6e2;padding:18px 12px}
.side-pill{
  padding:11px 8px;border-radius:9px;
  color:#7c857e;font-size:11px;margin-bottom:5px
}
.side-pill span{display:inline-block;width:25px;color:#a5aca7}
.side-pill.active{background:#edf0ec;color:#111;font-weight:600}
.app-content{padding:25px}
.mock-heading-row{display:flex;align-items:flex-start;justify-content:space-between}
.mock-heading-row p{font-size:10px;color:#8b938d;margin-bottom:5px}
.mock-heading-row h3{font-size:25px;letter-spacing:-.04em}
.mock-status{
  background:#e6ffc1;padding:7px 10px;border-radius:999px;
  font-size:10px;font-weight:700
}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.metric-card{
  border:1px solid #e0e3df;border-radius:13px;padding:14px;
  background:#fff
}
.metric-card.accent{background:#eaffb8;border-color:#d6f990}
.metric-card span,.metric-card small{display:block;color:#89918b;font-size:9px}
.metric-card strong{display:block;margin:9px 0 3px;font-size:21px;letter-spacing:-.04em}
.table-card{border:1px solid #e0e3df;border-radius:13px;overflow:hidden;background:#fff}
.table-head,.table-row{
  display:grid;grid-template-columns:1.1fr 1fr .8fr .9fr;
  padding:11px 13px;gap:10px;font-size:9px
}
.table-head{background:#f1f3f0;color:#8d948f;text-transform:uppercase;letter-spacing:.07em}
.table-row{border-top:1px solid #eef0ed}
.muted-row{color:#9aa19c}
.tag{display:inline-block;width:max-content;background:#eaffb8;padding:3px 6px;border-radius:999px}
.mock-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:#8c948e;font-size:9px}
.mock-footer button{
  border:0;background:#10161b;color:#fff;padding:9px 12px;border-radius:8px;font-size:9px
}

.section-pad{padding:120px 7vw}
.statement{
  display:grid;
  grid-template-columns:.35fr 1.65fr;
  min-height:620px;
  align-items:start;
  border-top:1px solid var(--line)
}
.statement-number{font-size:12px;color:#7f8981;padding-top:5px}
.statement-copy{max-width:980px}
.statement-copy h2,.workflows-head h2,.about-copy h2,.principle h2,.dark-intro h2{
  font-size:clamp(44px,6vw,86px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:580;
}
.statement-copy p:last-child{
  max-width:660px;margin-left:auto;margin-top:48px;
  font-size:21px;line-height:1.55;color:#68716b
}

.product-dark{background:var(--dark);color:#f5f7f6;padding-bottom:110px}
.dark-intro{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:8vw;
  align-items:end
}
.dark-intro h2{margin:0}
.dark-copy{
  max-width:520px;
  color:#aeb7bc;
  font-size:18px;
  line-height:1.6;
  padding-bottom:10px
}
.feature-stage{
  margin:0 4vw;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px
}
.feature-card{
  min-height:470px;
  background:var(--dark-soft);
  border:1px solid #273139;
  border-radius:24px;
  padding:24px;
  display:flex;
  flex-direction:column
}
.feature-card.big{background:#f0f2ed;color:#10161b}
.feature-index{font-size:10px;color:#8f9ca5}
.feature-art{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:250px
}
.feature-card h3{font-size:24px;letter-spacing:-.04em;margin-bottom:10px}
.feature-card p{font-size:14px;line-height:1.5;color:#89959c;max-width:350px}
.feature-card.big p{color:#657068}
.sample-ring{
  width:180px;height:180px;border-radius:50%;
  border:1px solid #aeb8af;position:relative
}
.sample-ring:after{
  content:"64";
  position:absolute;inset:35px;
  border-radius:50%;background:#10161b;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;letter-spacing:-.06em
}
.sample-dot{width:14px;height:14px;border-radius:50%;background:#c8ff3d;position:absolute}
.d1{left:8px;top:45px}.d2{right:10px;top:38px}.d3{left:20px;bottom:30px}
.d4{right:28px;bottom:16px}.d5{left:76px;top:-7px}.d6{right:-5px;top:92px}
.bars-art{gap:8px;align-items:flex-end;padding:40px}
.bars-art i{display:block;width:24px;border-radius:8px 8px 2px 2px;background:#c8ff3d}
.flow-art{gap:10px;flex-wrap:wrap}
.flow-art div{border:1px solid #43505a;padding:14px 18px;border-radius:12px;font-size:11px}
.flow-art span{color:#c8ff3d}

.workflows{background:#f8f9f6}
.workflows-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:70px}
.workflows-head .eyebrow{width:30%}
.workflows-head h2{width:68%;margin:0}
.workflow-list{border-top:1px solid var(--line)}
.workflow-item{
  min-height:180px;
  display:grid;
  grid-template-columns:.35fr 1.4fr .25fr;
  gap:30px;
  align-items:center;
  border-bottom:1px solid var(--line);
  text-decoration:none
}
.workflow-no{font-size:11px;color:#8a938d}
.workflow-item h3{font-size:30px;letter-spacing:-.045em;margin-bottom:9px}
.workflow-item p{margin:0;max-width:610px;color:#707a73;line-height:1.55}
.workflow-arrow{justify-self:end;font-size:26px}

.principle{background:#d7ff68}
.principle-inner h2{max-width:980px}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:80px}
.principle-card{
  min-height:280px;
  padding:24px;
  border-top:1px solid rgba(16,22,27,.35)
}
.principle-card span{font-size:10px}
.principle-card h3{font-size:30px;margin-top:80px;letter-spacing:-.04em}
.principle-card p{max-width:320px;line-height:1.5;color:#4d554e}

.about{
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:8vw;
  background:#f4f6f3
}
.about-side{display:flex;flex-direction:column;justify-content:space-between}
.monogram{width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.monogram img{width:130px}
.about-copy{max-width:900px}
.about-copy h2{margin-bottom:55px}
.about-copy p{
  font-size:19px;line-height:1.65;color:#68716b;
  max-width:730px;margin-left:auto
}

.cta-section{background:#0b1116;color:#fff;padding:120px 7vw}
.cta-inner{max-width:1100px}
.cta-inner .eyebrow{color:#8e9ba4}
.cta-inner h2{
  font-size:clamp(54px,7vw,100px);
  line-height:.94;letter-spacing:-.065em;font-weight:580;margin-bottom:45px
}
.footer{
  padding:32px 4vw;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  border-top:1px solid var(--line);
  background:#f4f6f3;
  font-size:12px;color:#737c75
}
.footer-brand{font-size:18px;color:#10161b}
.footer-brand img{width:24px}
.footer p{text-align:center;margin:0}
.footer-links{justify-self:end;display:flex;gap:18px}
.footer-links a{text-decoration:none}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)
}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}

@media (max-width:1050px){
  .hero{grid-template-columns:1fr;padding-top:130px}
  .hero-visual{min-height:520px}
  .app-window{transform:none}
  .dark-intro{grid-template-columns:1fr}
  .feature-stage{grid-template-columns:1fr 1fr}
  .feature-card.big{grid-column:1/-1}
}
@media (max-width:760px){
  .site-header{height:66px;padding:0 18px;grid-template-columns:1fr auto}
  .desktop-nav,.nav-cta{display:none}
  .menu-btn{
    display:flex;flex-direction:column;gap:5px;
    width:38px;height:38px;align-items:center;justify-content:center;
    border:0;background:transparent
  }
  .menu-btn span{width:19px;height:1px;background:#111;display:block;transition:.25s}
  .menu-btn.open span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-btn.open span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .mobile-menu{
    display:flex;
    position:fixed;z-index:45;top:66px;left:0;right:0;
    background:#f4f6f3;padding:24px 18px 30px;
    flex-direction:column;gap:18px;
    border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:.3s ease
  }
  .mobile-menu.open{transform:none}
  .mobile-menu a{text-decoration:none;font-size:22px;letter-spacing:-.03em}
  .hero{padding:120px 20px 50px;min-height:auto}
  h1{font-size:59px}
  .hero-text{font-size:17px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .hero-visual{min-height:430px;margin-top:20px}
  .orb-one{width:300px;height:300px}
  .orb-two{width:170px;height:170px}
  .app-window{width:100%}
  .app-layout{grid-template-columns:1fr}
  .app-sidebar{display:none}
  .app-content{padding:16px}
  .metric-grid{gap:5px}
  .metric-card{padding:10px}
  .metric-card strong{font-size:16px}
  .table-head,.table-row{font-size:8px}
  .scroll-hint{display:none}
  .section-pad{padding:82px 20px}
  .statement{grid-template-columns:1fr;gap:40px;min-height:auto}
  .statement-copy p:last-child{margin-left:0;font-size:17px}
  .statement-copy h2,.workflows-head h2,.about-copy h2,.principle h2,.dark-intro h2{font-size:47px}
  .dark-intro{padding-bottom:60px}
  .feature-stage{grid-template-columns:1fr;margin:0 14px}
  .feature-card.big{grid-column:auto}
  .workflows-head{display:block}
  .workflows-head .eyebrow,.workflows-head h2{width:100%}
  .workflow-item{grid-template-columns:40px 1fr 25px;min-height:160px;gap:10px}
  .workflow-item h3{font-size:24px}
  .workflow-item p{font-size:14px}
  .principle-grid{grid-template-columns:1fr;margin-top:50px}
  .principle-card{min-height:210px}
  .principle-card h3{margin-top:45px}
  .about{grid-template-columns:1fr}
  .monogram{display:none}
  .about-copy p{margin-left:0;font-size:17px}
  .cta-inner h2{font-size:52px}
  .footer{grid-template-columns:1fr;gap:18px}
  .footer p{text-align:left}
  .footer-links{justify-self:start;flex-wrap:wrap}
}