:root{
  --bg:#f6f9f3; --panel:#ffffff; --panel-2:#eef4ea; --line:#e0e8db; --line-bright:#c7d6bf;
  --ink:#152318; --muted:#516557; --faint:#81928a;
  --signal:#c8f250; --signal-ink:#0e1606; --sig-text:#3a7614; --signal-dim:rgba(158,219,31,.16); --signal-glow:rgba(130,190,45,.35);
  --amber:#93700f; --red:#c9403d;
  --fd:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --fb:'Public Sans','Segoe UI',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  --radius:10px; --radius-lg:16px; --shell:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--fb);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 520px at 78% -8%, rgba(130,190,45,.10), transparent 60%);
}
a{color:inherit; text-decoration:none}
.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
.mono{font-family:var(--fm); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}

/* nav */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(246,249,243,.82); border-bottom:1px solid var(--line)}
.nav .row{display:flex; align-items:center; gap:28px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:700; font-size:1.15rem; letter-spacing:-.01em}
.brand .dot{width:11px; height:11px; border-radius:3px; background:var(--signal); box-shadow:0 0 14px var(--signal-glow); transform:rotate(45deg)}
.nav .links{display:flex; gap:26px; margin-left:8px}
.nav .links a{color:var(--muted); font-size:.92rem; font-weight:500; white-space:nowrap}
.nav .links a:hover{color:var(--ink)}
.nav .links a.here{color:var(--ink); font-weight:600}
.nav .spacer{flex:1}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--fd); font-weight:600;
  font-size:.92rem; padding:10px 18px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:.16s; white-space:nowrap}
.btn-ghost{color:var(--ink); border-color:var(--line-bright); background:transparent}
.btn-ghost:hover{border-color:var(--muted); background:var(--panel)}
.btn-signal{background:var(--signal); color:var(--signal-ink); box-shadow:0 0 0 1px rgba(90,140,30,.45), 0 2px 8px -2px rgba(60,110,25,.35)}
.btn-signal:hover{box-shadow:0 0 0 1px rgba(90,140,30,.55), 0 6px 20px -6px var(--signal-glow)}
.btn-lg{padding:13px 24px; font-size:1rem}

/* hero */
.hero{padding:74px 0 34px}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{color:var(--sig-text); display:inline-flex; align-items:center; gap:9px; margin-bottom:22px}
.eyebrow .pulse{width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 10px var(--signal-glow); animation:pulse 2.4s ease-in-out infinite}
h1{font-family:var(--fd); font-weight:700; font-size:clamp(2.5rem,5.4vw,4rem); line-height:1.02;
  letter-spacing:-.025em; margin:0 0 22px}
h1 .em{color:var(--sig-text)}
.lede{font-size:1.16rem; color:var(--muted); max-width:33ch; margin:0 0 30px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.cta-note{color:var(--faint); font-size:.86rem; margin-top:18px}
.cta-note b{color:var(--muted); font-weight:600}

/* signature: live-call card */
.call{background:var(--panel); border:1px solid var(--line-bright);
  border-radius:var(--radius-lg); padding:20px; box-shadow:0 30px 70px -35px rgba(30,60,35,.35), 0 4px 16px -8px rgba(30,60,35,.15)}
.call .head{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px}
.live{display:inline-flex; align-items:center; gap:7px; color:var(--sig-text); font-family:var(--fm); font-size:.7rem; letter-spacing:.12em}
.live .d{width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 10px var(--signal-glow); animation:pulse 1.6s ease-in-out infinite}
.call .who{color:var(--faint); font-family:var(--fm); font-size:.7rem; letter-spacing:.08em; margin-left:auto}
.wave{display:flex; align-items:center; gap:3px; height:26px; margin:2px 0 16px}
.wave span{width:3px; height:22px; border-radius:2px; background:#8ecb2b; opacity:.9;
  transform:scaleY(.28); transform-origin:center; animation:wave 1.1s ease-in-out infinite}
.turn{margin:0 0 12px; display:flex; gap:10px}
.turn .tag{font-family:var(--fm); font-size:.64rem; letter-spacing:.1em; color:var(--faint); padding-top:3px; min-width:52px; text-align:right}
.turn .bubble{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 13px; font-size:.92rem; color:var(--ink)}
.turn.ai .bubble{background:#fff; border-color:var(--line-bright)}
.turn.ai .tag{color:var(--sig-text)}
.call .foot{display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem}
.tick{color:var(--sig-text)}

/* sections */
section{padding:64px 0}
.sec-head{max-width:60ch; margin-bottom:40px}
.sec-head .mono{color:var(--faint); display:block; margin-bottom:12px}
h2{font-family:var(--fd); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.5rem); letter-spacing:-.02em; margin:0 0 14px; line-height:1.08}
.sec-head p{color:var(--muted); font-size:1.06rem; margin:0}
.divider{border:0; border-top:1px solid var(--line); margin:0}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; transition:.16s}
.card:hover{border-color:var(--line-bright); box-shadow:0 10px 30px -18px rgba(30,60,35,.25)}
.card .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.card h3{font-family:var(--fd); font-weight:600; font-size:1.2rem; margin:0; letter-spacing:-.01em}
.card p{color:var(--muted); margin:0; font-size:.96rem}
.badge{font-family:var(--fm); font-size:.64rem; letter-spacing:.1em; padding:4px 9px; border-radius:100px; border:1px solid}
.badge.live{color:var(--sig-text); border-color:rgba(90,150,35,.35); background:var(--signal-dim)}
.badge.soon{color:var(--amber); border-color:rgba(147,112,15,.3); background:rgba(226,183,64,.14)}

/* flow diagram */
.flow-wrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; overflow-x:auto}
.flow{display:grid; grid-template-columns:1fr 44px 1.15fr 44px 1fr; gap:10px; align-items:stretch; min-width:640px}
.node{border:1px solid var(--line-bright); border-radius:12px; padding:16px; background:#fff; text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:4px}
.node.hot{border-color:rgba(90,150,35,.5); box-shadow:0 0 0 3px var(--signal-dim)}
.node .ic{color:var(--sig-text); margin:0 auto 6px; display:block}
.node .t{font-family:var(--fd); font-weight:600; letter-spacing:-.01em}
.node .s{color:var(--faint); font-family:var(--fm); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase}
.joint{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--sig-text)}
.joint .lbl{font-family:var(--fm); font-size:.6rem; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; white-space:nowrap}
.flow-down{display:grid; grid-template-columns:1fr 44px 1.15fr 44px 1fr; gap:10px; min-width:640px; margin-top:10px}
.flow-down .drop{grid-column:3; text-align:center}
.flow-down .drop .stem{color:var(--sig-text); line-height:1; margin:2px 0 8px}
.flow-note{color:var(--muted); font-size:.9rem; margin:18px 0 0; text-align:center}

/* integrations */
.pms{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pms .item{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px}
.pms .name{font-family:var(--fd); font-weight:600; font-size:1.15rem}
.pms .sub{color:var(--faint); font-size:.82rem; margin-top:2px}

/* security */
.sec-sec{background:linear-gradient(180deg,transparent, rgba(222,236,214,.55))}
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.trust .t{border-left:1px solid var(--line-bright); padding:2px 0 2px 16px}
.trust .t .mono{color:var(--sig-text); display:block; margin-bottom:8px}
.trust .t p{margin:0; color:var(--muted); font-size:.92rem}

/* cta band */
.band{border:1px solid var(--line-bright); border-radius:var(--radius-lg); padding:48px;
  background:radial-gradient(700px 300px at 100% 0%, var(--signal-dim), transparent 60%), var(--panel);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.band h2{margin:0 0 6px}
.band p{color:var(--muted); margin:0}

/* subpage hero */
.page-hero{padding:72px 0 10px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.3rem); max-width:22ch}
.page-hero .lede{max-width:56ch}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px}
.stat .n{font-family:var(--fd); font-weight:700; font-size:2.1rem; letter-spacing:-.02em; line-height:1.1}
.stat .n .u{color:var(--sig-text)}
.stat .l{color:var(--muted); font-size:.9rem; margin-top:4px}

/* story timeline */
.story{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.story .step{position:relative; padding:26px 22px 4px; border-top:2px solid var(--line-bright)}
.story .step::before{content:''; position:absolute; top:-7px; left:22px; width:12px; height:12px;
  border-radius:3px; background:var(--signal); transform:rotate(45deg); box-shadow:0 0 0 4px var(--bg)}
.story .step.now{border-top-color:var(--sig-text)}
.story .k{font-family:var(--fm); font-size:.66rem; letter-spacing:.12em; color:var(--sig-text); text-transform:uppercase}
.story h3{font-family:var(--fd); font-weight:600; font-size:1.1rem; margin:8px 0 8px; letter-spacing:-.01em}
.story p{color:var(--muted); font-size:.92rem; margin:0}

/* quotes */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.quote{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px}
.quote .stars{color:var(--sig-text); letter-spacing:2px; margin-bottom:12px}
.quote p{margin:0 0 16px; color:var(--ink); font-size:.98rem}
.quote .by{color:var(--faint); font-family:var(--fm); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase}

/* contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.c-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; gap:8px}
.c-card .ic{color:var(--sig-text)}
.c-card h3{font-family:var(--fd); font-weight:600; font-size:1.05rem; margin:2px 0 0}
.c-card .big{font-family:var(--fd); font-weight:600; font-size:1.3rem; letter-spacing:-.01em}
.c-card .big a:hover{color:var(--sig-text)}
.c-card p{margin:0; color:var(--muted); font-size:.92rem}
.c-card .sub{color:var(--faint); font-size:.85rem}

footer{border-top:1px solid var(--line); padding:34px 0; color:var(--faint); font-size:.86rem}
footer .row{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer a{color:var(--muted)} footer a:hover{color:var(--ink)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@media (max-width:900px){
  .hero .grid,.cards,.pms,.trust,.stats,.story,.quotes,.contact-grid{grid-template-columns:1fr}
  .nav .links{display:none}
  .hero{padding:48px 0 20px}
  .story .step{border-top:0; border-left:2px solid var(--line-bright); padding:4px 0 26px 22px}
  .story .step::before{top:2px; left:-7px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}
:focus-visible{outline:2px solid var(--sig-text); outline-offset:2px; border-radius:6px}