:root{
  --ink:#111318;
  --muted:#626873;
  --line:#e8e9eb;
  --paper:#fbfbfa;
  --white:#fff;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(251,251,250,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,233,235,.86)}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:18px;font-weight:760;letter-spacing:-.025em;text-decoration:none}
.navlinks{display:flex;gap:24px;font-size:14px;color:#4d535c}
.navlinks a{text-decoration:none}.navlinks a:hover{color:#111318}
.hero{padding:118px 0 100px;text-align:center}
.hero-inner{max-width:930px}
.eyebrow{margin:0 0 18px;font-size:12px;font-weight:760;letter-spacing:.12em;text-transform:uppercase;color:#757c85}
.hero h1{margin:0 auto 24px;font-size:clamp(52px,8vw,92px);line-height:.96;letter-spacing:-.062em;max-width:950px}
.hero-copy{margin:0 auto 34px;max-width:760px;font-size:clamp(19px,2.3vw,24px);line-height:1.45;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:999px;padding:12px 18px;font-weight:680;transition:transform .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-1px)}
.button.primary{background:#171a1f;color:white;padding:13px 20px}
.apps{border-top:1px solid var(--line)}
.app-section{padding:92px 0;border-bottom:1px solid var(--line)}
.app-section:nth-child(odd){background:#fff}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);gap:76px;align-items:center}
.app-grid.reverse{grid-template-columns:minmax(420px,.92fr) minmax(0,1fr)}
.app-copy{max-width:535px}
.category{margin:0 0 10px;font-size:12px;font-weight:760;text-transform:uppercase;letter-spacing:.11em;color:#7a8088}
.app-copy h2{font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-.05em;margin:0 0 12px}
.tagline{font-size:clamp(23px,2.7vw,31px);line-height:1.2;letter-spacing:-.025em;font-weight:650;margin:0 0 19px}
.description{font-size:18px;color:var(--muted);margin:0 0 26px}
.benefits{list-style:none;padding:0;margin:0 0 31px;display:grid;gap:11px;color:#363b43}
.benefits li{position:relative;padding-left:27px}
.benefits li:before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:#eef1f3;color:#252a30}
.button.product{color:white;border:0}.button.green{background:#168154}.button.blue{background:#087dcc}.button.teal{background:#087f86}
.app-visual{min-height:610px;border-radius:40px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;padding:50px 54px 0}
.light-green{background:radial-gradient(circle at 75% 16%,rgba(255,255,255,.9),transparent 31%),linear-gradient(145deg,#edf6ef,#d7eadc)}
.dark-panel{background:radial-gradient(circle at 25% 18%,rgba(11,143,244,.24),transparent 36%),linear-gradient(145deg,#15171b,#25282e)}
.dark-teal{background:radial-gradient(circle at 74% 15%,rgba(38,190,193,.19),transparent 34%),linear-gradient(145deg,#111b21,#17272d)}
.phone-frame{overflow:hidden;background:#000;border:7px solid #15171a;border-radius:46px;box-shadow:0 26px 58px rgba(20,26,32,.22);line-height:0}
.phone-frame img{width:100%;height:100%;object-fit:cover;display:block}
.ready-phone{width:310px;max-height:565px}.ready-phone img{object-position:top}
.pack-phone{width:312px;max-height:565px;border-color:#090a0c}.pack-phone img{object-position:top}
.flow-phone{width:295px;max-height:565px;border-color:#080b0d}.flow-phone img{object-position:top}
.principles{padding:92px 0 104px;background:#f3f4f3}
.principles-inner{display:grid;grid-template-columns:.85fr 1.55fr;gap:70px;align-items:start}
.principles h2{font-size:clamp(36px,4.2vw,56px);letter-spacing:-.045em;line-height:1.04;margin:0;max-width:420px}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.principle-grid div{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px}
.principle-grid h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px}
.principle-grid p{margin:0;color:var(--muted);font-size:15px}
.footer{background:#fff;border-top:1px solid var(--line);padding:42px 0 28px;color:#666d76}
.footer-main{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:34px}
.footer-main strong{font-size:19px;color:#17191d;letter-spacing:-.02em}
.footer-main p{margin:5px 0 0}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.footer-links a{text-decoration:none}.footer-links a:hover{color:#111318}
.footer-bottom{padding-top:24px;border-top:1px solid var(--line);font-size:13px}
@media(max-width:900px){
  .hero{padding:92px 0 74px}
  .app-section{padding:68px 0}
  .app-grid,.app-grid.reverse{grid-template-columns:1fr;gap:38px}
  .app-grid.reverse .app-visual{order:2}.app-grid.reverse .app-copy{order:1}
  .app-copy{max-width:690px}
  .app-visual{min-height:570px}
  .principles-inner{grid-template-columns:1fr;gap:34px}.principle-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:660px){
  .wrap{width:min(var(--max),calc(100% - 30px))}
  .nav{height:62px}.navlinks{gap:16px}
  .hero{padding:74px 0 62px}.hero h1{font-size:52px}.hero-copy{font-size:19px}
  .app-section{padding:58px 0}.app-copy h2{font-size:48px}.tagline{font-size:25px}.description{font-size:17px}
  .app-visual{min-height:505px;border-radius:30px;padding:38px 28px 0}
  .ready-phone,.pack-phone,.flow-phone{width:270px;max-height:470px;border-width:6px;border-radius:39px}
  .principles{padding:66px 0}.principle-grid{grid-template-columns:1fr}
  .footer-main{display:block}.footer-links{margin-top:25px;gap:16px 20px}
}
@media(max-width:390px){.hero h1{font-size:45px}.app-copy h2{font-size:43px}.app-visual{min-height:460px}.ready-phone,.pack-phone,.flow-phone{width:245px;max-height:425px}}