:root{
  --ink:#0D0D0D; --ink-2:#161616; --paper:#F7F5F0; --paper-2:#EEEBE2;
  --violet:#6D4AFF; --violet-lift:#7C63FF; --graphite:#2C2C2C;
  --line:#dcdad1; --line-dk:#2a2a2a;
  --t1:#0D0D0D; --t2:#57554e; --t1d:#F7F5F0; --t2d:#a7a59e;
  --fd:'Space Grotesk',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif; --fm:'Space Mono',ui-monospace,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--t1);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--fm);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--violet)}
h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
p{color:var(--t2)}
section{padding:clamp(64px,9vw,120px) 0}
.dark{background:var(--ink);color:var(--t1d)}
.dark p{color:var(--t2d)}
.dark .eyebrow{color:var(--violet-lift)}.dark .eyebrow::before{background:var(--violet-lift)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:30px;height:30px;display:block}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:.01em}
.logo .wm i{font-family:var(--fd);font-weight:500;font-size:8px;letter-spacing:.4em;font-style:normal;margin-top:2px}
.nav-cta{font-family:var(--fm);font-size:12.5px;letter-spacing:.06em;padding:9px 16px;border:1px solid var(--ink);border-radius:2px;transition:.18s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{font-family:var(--fd);font-weight:600;font-size:15px;padding:14px 24px;border-radius:3px;transition:.18s;border:1px solid transparent;cursor:pointer;display:inline-block}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--violet-lift);transform:translateY(-1px)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn-ghost{border-color:var(--paper);color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden;padding-top:clamp(70px,10vw,110px);padding-bottom:clamp(64px,9vw,110px)}
.hero-mark{position:absolute;right:-60px;top:40px;width:min(46vw,520px);opacity:.05;pointer-events:none}
.hero h1{font-size:clamp(38px,6.4vw,76px);max-width:15ch;margin:22px 0 0}
.hero p{font-size:clamp(17px,2vw,20px);max-width:46ch;margin-top:22px}
.hero .kicker{font-family:var(--fm);font-size:13px;letter-spacing:.1em;color:var(--t2);margin-bottom:26px}

/* generic section head */
.shead{max-width:60ch}
.shead h2{margin-top:18px}
.shead p{margin-top:18px;font-size:18px}

/* bottleneck (dark) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:14px}
.split .big{font-family:var(--fd);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;line-height:1.12;color:var(--t1d)}
.split .big em{font-style:normal;color:var(--violet-lift)}
.split p{font-size:18px}

/* cards: what I do */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:34px 32px;transition:.2s}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card .tag{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.card h3{margin:14px 0 16px}
.card ul{list-style:none;margin-top:6px}
.card li{position:relative;padding-left:22px;margin:10px 0;color:var(--t2);font-size:15.5px}
.card li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--violet);border-radius:1px}
.note{margin-top:44px;font-family:var(--fd);font-weight:500;font-size:clamp(18px,2.3vw,24px);letter-spacing:-.01em;color:var(--t1);max-width:34ch}
.note b{color:var(--violet)}

/* steps */
.steps{margin-top:52px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:78px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.step .n{font-family:var(--fm);font-weight:700;font-size:15px;color:var(--violet);padding-top:5px}
.step h3{margin-bottom:8px}
.step p{font-size:16px;max-width:60ch}

/* pricing */
.price-group{margin-top:48px}
.price-label{font-family:var(--fm);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--t2);margin-bottom:20px}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prices.two{grid-template-columns:repeat(2,1fr);max-width:760px}
.price{border:1px solid var(--line);border-radius:8px;padding:30px 28px;display:flex;flex-direction:column;transition:.2s}
.price:hover{border-color:var(--ink)}
.price h3{font-size:19px;margin-bottom:12px}
.price p{font-size:15px;flex:1}
.price .amt{font-family:var(--fd);font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--ink);margin-top:22px}
.price .amt span{font-family:var(--fm);font-weight:400;font-size:13px;letter-spacing:.04em;color:var(--t2)}
.single{margin-top:24px}
.single .prices{grid-template-columns:1fr}
.single .price{max-width:420px}
.foot-note{margin-top:26px;font-family:var(--fm);font-size:13px;letter-spacing:.03em;color:var(--t2)}

/* why me (dark) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.stat{border-top:1px solid var(--line-dk);padding-top:18px}
.stat .v{font-family:var(--fd);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--t1d)}
.stat .l{font-size:14px;color:var(--t2d);margin-top:4px}

/* final cta */
.final{text-align:left}
.final h2{max-width:20ch}
.final p{font-size:18px;margin-top:18px;max-width:52ch}
.final .altline{margin-top:26px;font-size:15px}
.final a.link{color:var(--violet);border-bottom:1px solid var(--violet)}

/* footer */
footer{background:var(--ink);color:var(--t1d);padding:56px 0 46px;border-top:1px solid var(--line-dk)}
.frow{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.footlogo{display:flex;align-items:center;gap:11px}
.footlogo svg{width:30px;height:30px}
.footlogo .wm b{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--paper)}
.footlogo .wm i{font-family:var(--fd);font-weight:500;font-size:8px;letter-spacing:.4em;font-style:normal;color:var(--paper);display:block;margin-top:2px}
.fmeta{font-size:14px;color:var(--t2d);text-align:right;line-height:1.9}
.fmeta a{color:var(--violet-lift)}
.fabn{margin-top:40px;font-family:var(--fm);font-size:12px;letter-spacing:.03em;color:#6d6b64}
.fgroup{border-bottom:1px solid var(--line-dk);padding-bottom:32px;margin-bottom:34px}
.fgroup .lbl{font-family:var(--fm);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6d6b64;margin-bottom:18px}
.fgroup .items{display:flex;gap:44px;flex-wrap:wrap}
.fgroup .items>a,.fgroup .items>.here{display:flex;flex-direction:column}
.fgroup .nm{font-family:var(--fd);font-weight:600;font-size:16px;color:var(--paper);transition:.16s}
.fgroup a:hover .nm{color:var(--violet-lift)}
.fgroup .ds{font-size:13px;color:var(--t2d);margin-top:3px}
.fgroup .here .nm{color:var(--t2d)}
.fgroup .here .ds{color:#6d6b64}
.fgroup .here .ds b{color:var(--violet-lift);font-weight:400}

/* why-me proof line */
.proof{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dk);max-width:60ch}
.proof .plbl{font-family:var(--fm);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--t2d);margin-right:6px}
.proof a{color:var(--violet-lift);border-bottom:1px solid var(--violet-lift)}
.proof span.body{color:var(--t2d)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media(max-width:820px){
  .split,.grid2,.prices,.prices.two,.stats{grid-template-columns:1fr}
  .stats{gap:0}.stat{padding:16px 0}
  .step{grid-template-columns:52px 1fr;gap:18px}
  .hero-mark{opacity:.04}
  .logo .wm i{display:none}
}

/* nav */
.nav{display:flex;align-items:center;gap:22px}
.nav-link{font-family:var(--fm);font-size:12.5px;letter-spacing:.06em;color:var(--t2);transition:.16s}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink)}

/* software cards (homepage) */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.app{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:30px 28px;display:flex;flex-direction:column;transition:.2s}
a.app:hover{border-color:var(--ink);transform:translateY(-3px)}
.app h3{margin:14px 0 10px}
.app p{font-size:15.5px;flex:1}
.app .more{margin-top:22px;font-family:var(--fd);font-weight:600;font-size:15px;color:var(--violet)}
.app.soon{background:transparent;border-style:dashed}
.app.soon h3{color:var(--t2)}
.pill{align-self:flex-start;font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:2px;border:1px solid currentColor}
.pill.live{color:#0a7a3a}.pill.new{color:var(--violet)}.pill.soon{color:var(--t2)}

/* product pages */
.crumbs{font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--t2);margin-bottom:22px}
.crumbs a{border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.p-hero{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,88px)}
.p-hero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.p-hero h1{font-size:clamp(36px,5.4vw,64px);margin:20px 0 0;max-width:16ch}
.p-hero p.lead{font-size:clamp(17px,2vw,20px);max-width:46ch;margin-top:22px}
.p-hero .scope{margin-top:18px;font-family:var(--fm);font-size:13px;letter-spacing:.03em;color:var(--t2)}
.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(13,13,13,.35)}
.shot img{display:block;width:100%;height:auto}
.dark .shot{border-color:var(--line-dk)}
.phone{max-width:340px;margin-left:auto;border-radius:26px;border:8px solid var(--ink)}
figure{margin:0}
figcaption{font-family:var(--fm);font-size:12.5px;letter-spacing:.03em;color:var(--t2);margin-top:12px}
.dark figcaption{color:var(--t2d)}
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:64px}
.feature.flip{grid-template-columns:1.15fr 1fr}
.feature.flip .ftext{order:2}
.feature h3{font-size:clamp(22px,2.6vw,28px);margin:14px 0 14px}
.feature ul{list-style:none;margin-top:8px}
.feature li{position:relative;padding-left:22px;margin:10px 0;color:var(--t2);font-size:16px}
.feature li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--violet);border-radius:1px}
.dark .feature li{color:var(--t2d)}
.ticks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tick{border-top:1px solid var(--line);padding-top:18px}
.dark .tick{border-color:var(--line-dk)}
.tick h3{font-size:18px;margin-bottom:8px}
.tick p{font-size:15px}
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-family:var(--fd);font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fm);color:var(--violet)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:12px;font-size:16px;max-width:66ch}
.price-big{font-family:var(--fd);font-weight:700;font-size:clamp(34px,4vw,46px);letter-spacing:-.02em;color:var(--ink)}
.price-big span{font-family:var(--fm);font-weight:400;font-size:14px;letter-spacing:.04em;color:var(--t2)}

/* interest form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;max-width:720px}
.form label{display:flex;flex-direction:column;gap:7px;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2d)}
.form .wide{grid-column:1/-1}
.form input,.form textarea{font:inherit;font-family:var(--fb);font-size:16px;letter-spacing:0;text-transform:none;color:var(--t1d);background:var(--ink-2);border:1px solid var(--line-dk);border-radius:4px;padding:13px 14px}
.form input:focus,.form textarea:focus{outline:2px solid var(--violet-lift);outline-offset:1px;border-color:transparent}
.form textarea{min-height:96px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{grid-column:1/-1;font-size:15px;min-height:1.4em}
.form-status.ok{color:#7be0a5}.form-status.err{color:#ff9b8a}
.form button[disabled]{opacity:.6;cursor:default;transform:none}

@media(max-width:980px){.apps{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .apps,.ticks,.form,.p-hero .cols,.feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip .ftext{order:0}
  .phone{margin:0 auto}
  .nav-link{display:none}
}
.dark .app.soon{border-color:#3a3a3a}
.dark .app.soon h3{color:var(--t1d)}
.dark .pill.soon{color:var(--t2d)}
.dark .app:not(.soon) p{color:var(--t2)}
.dark .shead p{color:var(--t2d)}
.dark .app:not(.soon){color:var(--t1)}
.eye-shots{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:720px;margin:56px auto 0}
.eye-shots .phone{max-width:280px}
.eye-shots figcaption{text-align:center}
@media(max-width:820px){.eye-shots{grid-template-columns:1fr}}