
:root {
  --ink: #0b0b0d;
  --muted: #666a73;
  --line: #e5e7eb;
  --paper: #ffffff;
  --soft: #f7f7f8;
  --soft2: #efeff2;
  --accent: #111216;
  --max: 1180px;
  --radius: 22px;
  --shadow: 0 20px 55px rgba(16, 18, 24, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
button, input, textarea, select { font: inherit; }
.container { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }

.skip-link {
  position:absolute; left:-999px; top:8px; background:#fff; padding:10px 14px; z-index:999;
}
.skip-link:focus { left:8px; }

.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(229,231,235,.75);
}
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand img { width:245px; height:auto; }
.nav-links { display:flex; align-items:center; gap:27px; font-size:.95rem; font-weight:650; }
.nav-links a { color:#31343a; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:#000; }
.nav-cta { border:1px solid #111; border-radius:999px; padding:10px 17px; }
.menu-toggle { display:none; background:none; border:0; font-size:1.5rem; cursor:pointer; }

.hero {
  padding:92px 0 72px;
  overflow:hidden;
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:70px; align-items:center;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font-size:.78rem; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; color:#4b4e55; background:#fff;
}
.dot { width:7px; height:7px; border-radius:50%; background:#0b0b0d; }
h1,h2,h3 { margin:0; line-height:1.04; letter-spacing:-.04em; }
h1 { font-size:clamp(3.3rem,7vw,6.7rem); font-weight:780; max-width:920px; }
h2 { font-size:clamp(2.3rem,4.5vw,4.4rem); font-weight:760; }
h3 { font-size:1.35rem; font-weight:720; letter-spacing:-.025em; }
.lede { font-size:clamp(1.08rem,1.5vw,1.3rem); color:#555963; max-width:720px; margin:27px 0 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; border-radius:999px; padding:0 22px;
  font-weight:720; border:1px solid #111; transition:.2s ease;
}
.btn-dark { background:#0d0e11; color:#fff; }
.btn-dark:hover { transform:translateY(-1px); background:#22242a; }
.btn-light {
  background: #fff;
  color: #0b0b0d;
}

.btn-light:hover {
  background: #f3f3f4;
  color: #0b0b0d;
}
.hero-panel {
  min-height:520px; border-radius:36px; background:linear-gradient(145deg,#101115,#262830);
  box-shadow:var(--shadow); padding:38px; color:#fff; position:relative; overflow:hidden;
}
.hero-panel:before {
  content:""; position:absolute; width:390px; height:390px; border-radius:50%;
  right:-170px; top:-150px; background:rgba(255,255,255,.08); filter:blur(1px);
}
.hero-panel .mark { width:170px; filter:invert(1); opacity:.98; position:relative; z-index:1; }
.hero-panel h3 { margin-top:118px; font-size:2.3rem; max-width:390px; }
.hero-panel p { color:#c9cad0; max-width:380px; font-size:1rem; }
.hero-panel .mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; }
.hero-panel .mini {
  border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.055);
  border-radius:16px; padding:16px; font-size:.88rem; color:#e1e2e6;
}
.section { padding:90px 0; }
.section.soft { background:var(--soft); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:42px; }
.section-head p { max-width:560px; color:var(--muted); margin:0; font-size:1.05rem; }
.kicker { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:#72757d; margin-bottom:14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; min-height:285px; box-shadow:0 8px 30px rgba(16,18,24,.03);
}
.card .num { font-size:.78rem; color:#858891; font-weight:800; margin-bottom:55px; }
.card p { color:var(--muted); margin-bottom:0; }
.card .arrow { display:inline-flex; margin-top:18px; font-weight:750; }
.product-feature {
  border-radius:34px; background:#0e0f12; color:#fff; padding:52px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  overflow:hidden; position:relative;
}
.product-feature:after {
  content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(255,255,255,.08);
  border-radius:50%; right:-180px; bottom:-230px;
}
.product-feature .tag { color:#a7abb4; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.product-feature h2 { font-size:clamp(2.5rem,5vw,5rem); margin-top:11px; }
.product-feature p { color:#c8cad0; max-width:620px; font-size:1.08rem; }
.product-feature .product-visual {
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(150deg,#171920,#292c35);
  border-radius:28px; min-height:330px; padding:30px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.route-line { height:4px; background:linear-gradient(90deg,#fff 0 29%,#7b7e87 29% 34%,#fff 34% 65%,#7b7e87 65% 69%,#fff 69%); border-radius:5px; margin:35px 5px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric { border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px; }
.metric strong { display:block; font-size:1.35rem; }
.metric span { font-size:.72rem; color:#969aa4; text-transform:uppercase; letter-spacing:.08em; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.split p { color:var(--muted); }
.checks { display:grid; gap:13px; margin-top:28px; }
.check { display:flex; gap:12px; align-items:flex-start; }
.check-icon { width:25px; height:25px; border-radius:50%; background:#111; color:#fff; display:grid; place-items:center; font-size:.75rem; flex:0 0 auto; }

.page-hero { padding:82px 0 55px; border-bottom:1px solid var(--line); }
.page-hero h1 { font-size:clamp(3rem,6vw,5.6rem); }
.page-hero .lede { max-width:780px; }
.content-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }
.content-grid aside { color:#73767e; font-weight:700; }
.prose { max-width:820px; }
.prose h2 { font-size:2rem; margin:46px 0 14px; }
.prose h2:first-child { margin-top:0; }
.prose p, .prose li { color:#565a63; font-size:1.04rem; }
.prose ul { padding-left:22px; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }
.contact-card { background:#101115; color:#fff; border-radius:28px; padding:38px; }
.contact-card p { color:#c7c9d0; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:8px; }
.field.full { grid-column:1/-1; }
label { font-size:.86rem; font-weight:750; }
input, select, textarea {
  width:100%; border:1px solid #d8dae0; border-radius:13px; padding:13px 14px; background:#fff; color:#111;
}
textarea { min-height:170px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid #111; outline-offset:1px; }
.form-note { font-size:.82rem; color:#777b84; grid-column:1/-1; }
.hp { position:absolute !important; left:-9999px !important; height:1px; width:1px; overflow:hidden; }
.alert { border-radius:14px; padding:13px 16px; margin-bottom:20px; }
.alert.success { background:#eaf7ef; color:#14532d; }
.alert.error { background:#fff0f0; color:#8a1c1c; }

.cta-band { padding:70px 0; background:#111216; color:#fff; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta-inner h2 { font-size:clamp(2rem,4vw,3.8rem); max-width:720px; }
.cta-inner p { color:#b8bac2; }

.site-footer { border-top:1px solid var(--line); padding:46px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:45px; }
.footer-brand img { width:205px; }
.footer-brand p { color:#787b83; max-width:380px; }
.footer-col strong { display:block; margin-bottom:14px; font-size:.85rem; text-transform:uppercase; letter-spacing:.09em; }
.footer-col a { display:block; color:#6e7179; margin:7px 0; }
.footer-bottom { border-top:1px solid var(--line); margin-top:38px; padding-top:24px; color:#777a82; font-size:.84rem; display:flex; justify-content:space-between; gap:20px; }

@media(max-width:900px) {
  .menu-toggle { display:block; }
  .nav-links {
    display:none; position:absolute; top:76px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    padding:22px 20px 28px; flex-direction:column; align-items:flex-start;
  }
  .nav-links.open { display:flex; }
  .hero-grid,.product-feature,.split,.content-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-panel { min-height:430px; }
  .cards { grid-template-columns:1fr; }
  .section-head,.cta-inner { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .brand img { width:205px; }
  .hero { padding-top:62px; }
  .hero-grid { gap:38px; }
  .hero-panel { min-height:390px; padding:26px; }
  .hero-panel h3 { margin-top:80px; font-size:1.85rem; }
  .section { padding:68px 0; }
  .product-feature { padding:30px 24px; }
  .metric-row { grid-template-columns:1fr; }
  .contact-form { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}
