*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafafa;
  --ink:#0a0a0a;
  --muted:#6b6b6b;
  --line:#e5e5e5;
  --accent:#ff4d2e;
}
html,body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}

header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
header .left{display:flex;align-items:center;gap:18px}
header img{height:42px;width:auto}
header .right{display:flex;gap:8px;align-items:center}
.header-login{color:var(--muted);margin-right:8px;font-size:13px}
.header-login:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:500;border:0;background:transparent;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ink);transition:opacity .15s}
.btn:hover{opacity:.85}
.btn.solid{background:var(--ink);color:var(--bg);box-shadow:none}
.btn.accent{background:var(--accent);color:#fff;box-shadow:none}
.login-mobile{display:none}

/* Hero — 12 col grid */
.hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:64px 0 96px;border-bottom:1px solid var(--line);align-items:center}
.hero .title{grid-column:1/9}
.hero .title h1{font-size:clamp(40px,6vw,92px);line-height:.95;letter-spacing:-.04em;font-weight:500}
.hero .title h1 .hl{color:var(--accent)}
.hero .title p{margin-top:32px;max-width:48ch;font-size:18px;line-height:1.55;color:#1a1a1a}
.hero .title .ctas{margin-top:32px;display:flex;gap:10px}
.hero .img{grid-column:9/13}
.hero .img img{width:100%;height:auto;display:block;border-radius:12px}

/* features */
.features{padding:96px 0;border-bottom:1px solid var(--line)}
.features .head{margin-bottom:64px}
.features .head .h{font-size:48px;line-height:1;letter-spacing:-.03em;font-weight:500}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feat{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:14px}
.feat h3{font-size:24px;letter-spacing:-.01em;font-weight:500;line-height:1.2;display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--accent)}
.feat p{color:#3a3a3a;line-height:1.55;font-size:15px;margin-top:14px}

/* faq */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:96px 0;border-bottom:1px solid var(--line)}
.faq h2{grid-column:1/4;font-size:36px;letter-spacing:-.02em;font-weight:500}
.faq .list{grid-column:5/13}
.qa{border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h4{font-size:20px;font-weight:500;letter-spacing:-.01em}
.qa p{color:#3a3a3a;line-height:1.55}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:96px 0;border-bottom:1px solid var(--line);align-items:center}
.pricing h2{grid-column:1/5;font-size:36px;letter-spacing:-.02em;font-weight:500}
.plan{grid-column:6/13;padding:48px;border:1px solid var(--ink);border-radius:14px;display:flex;flex-direction:column;gap:14px}
.plan .nm{font-size:13px;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.plan .am{font-size:96px;line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--accent)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.plan li::before{content:"→ ";color:var(--accent)}

/* end cta */
.endcta{padding:120px 0 140px;text-align:center}
.endcta h2{font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.04em;font-weight:500}
.endcta p{margin:24px auto 32px;color:var(--muted);max-width:42ch}

footer{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}

@media (max-width:900px){
  .wrap{padding:0 20px}
  header .right{display:none}
  .login-mobile{display:inline-flex}
  .hero{grid-template-columns:1fr;padding:48px 0 64px}
  .hero .title,.hero .img{grid-column:1/-1}
  .features,.faq,.pricing{padding:64px 0}
  .grid3{grid-template-columns:1fr}
  .faq,.pricing{grid-template-columns:1fr}
  .faq .list,.plan,.pricing h2{grid-column:1/-1}
  .qa{grid-template-columns:1fr}
  .endcta{padding:80px 0 96px}
}