:root{
  --accent: #0AA6BD;
  --ink: #0A0B0D;
  --ink-2: #1a1c20;
  --muted: #6c6f76;
  --line: rgba(10,11,13,0.10);
  --line-2: rgba(10,11,13,0.06);
  --paper: #ECEBE7;
  --paper-2: #f4f3ef;
  --paper-3: #e3e2dd;
  --pop: #E63946;
  --pill-bg: #0A0B0D;
  --pill-glow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px -8px rgba(10,166,189,0.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Sora', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.mono{ font-family: 'JetBrains Mono', monospace; }
::selection{ background: var(--accent); color: #fff; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }
button{ font-family: inherit; cursor: pointer; }

.bg-dots{
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(10,11,13,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--pill-bg);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all .25s ease;
  box-shadow: var(--pill-glow);
}
.pill:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(10,166,189,0.4), 0 12px 28px -8px rgba(10,166,189,0.6); color:#fff; }
.pill.ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.pill.ghost:hover{ color: var(--ink); border-color: var(--accent); }

.pill.pill-nav{ padding: 10px 12px 10px 20px; gap: 12px; }
.pill.pill-nav::before{ display: none; }
.nav-cta-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display:inline-block; }
.nav-cta-arrow{
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .25s ease;
}
.pill.pill-nav:hover .nav-cta-arrow{ transform: translateX(3px); }

.hero-cta-arrow{
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .25s ease;
}
.hero-cta-primary:hover .hero-cta-arrow{ transform: translateX(3px); }
.hero-cta-arrow-ghost{
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .25s ease, border-color .25s ease;
}
.hero-cta-secondary:hover .hero-cta-arrow-ghost{ transform: translateX(3px); border-color: var(--accent); }

/* Standard CTA button pair (dot + primary / circle-arrow + secondary) */
.hero-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cta-button{
  height:52px; padding:0 22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: Inter, Arial, sans-serif; font-size:15px; font-weight:650; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.cta-primary{
  min-width:0; gap:14px; color:#fff;
  background: linear-gradient(180deg, #252b2e 0%, #15191b 60%, #101315 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 20px rgba(0,0,0,0.22), 0 16px 24px rgba(20,193,211,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cta-primary .cta-text{ flex:1; }
.cta-dot{
  width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#4ed5df;
  box-shadow: 0 0 0 3px rgba(78,213,223,0.08), 0 0 10px rgba(78,213,223,0.75);
}
.cta-secondary{
  min-width:0; gap:14px; color:#202426; background: rgba(255,255,255,0.72);
  border:1px solid #d2d3d1;
  box-shadow: 0 8px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cta-icon-circle{
  width:28px; height:28px; flex:0 0 28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid #25292b;
}
.cta-arrow{
  width:16px; height:16px; flex:0 0 16px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .25s ease;
}
.secondary-arrow{ width:13px; height:13px; }
.cta-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,0.27), 0 20px 30px rgba(20,193,211,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
}
.cta-secondary:hover{
  transform: translateY(-2px); background:#fff; border-color:#aeb2b1;
  box-shadow: 0 14px 22px rgba(0,0,0,0.14);
}
.cta-button:hover .cta-arrow{ transform: translateX(3px); }
.cta-button:active{ transform: translateY(-1px) scale(0.985); }
.cta-button:focus-visible{ outline: 3px solid rgba(51,199,215,0.45); outline-offset: 5px; }
@media (max-width: 900px){
  .hero-actions{ gap:14px; }
  .cta-button{ height:48px; padding:0 18px; font-size:14px; }
  .cta-primary, .cta-secondary{ min-width:0; }
  .cta-primary{ width:100%; }
  .cta-secondary{ width:100%; }
  .cta-icon-circle{ width:24px; height:24px; flex-basis:24px; }
  .cta-arrow{ width:14px; height:14px; }
}

.nav{
  position: sticky; top: 0; z-index: 50;
  padding: 20px 56px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  background: rgba(236,235,231,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo-text{ font-weight:800; font-size:22px; letter-spacing:-0.04em; }
.logo-sub{ font-size:10px; letter-spacing:0.18em; font-weight:500; color:var(--muted); margin-top:4px; text-transform:uppercase; }

.section{ position: relative; z-index: 1; padding: 90px 56px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 900px){ .section{ padding: 60px 28px; } .nav{ padding:16px 20px; } }
@media (max-width: 560px){ .section{ padding: 48px 20px; } }

.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{ content:""; display:inline-block; width:28px; height:1px; background: var(--accent); }

h1,h2,h3,h4{ font-family: 'Sora', sans-serif; margin: 0; letter-spacing: -0.025em; }
.h-display{ font-weight: 800; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.0; letter-spacing: -0.03em; }
.h-section{ font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.025em; }
.h-card{ font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; }
p{ margin: 0; line-height: 1.6; color: var(--ink-2); }

.card{
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.card:hover{ background: #fff; border-color: rgba(10,11,13,0.18); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.4);
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}

.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  color: var(--muted); margin-bottom: 28px;
}
.breadcrumb a:hover{ color: var(--accent); }

.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.check-list li svg{ flex-shrink:0; margin-top:2px; }

footer{
  position: relative; z-index:1;
  border-top: 1px solid var(--line);
  padding: 40px 56px;
  max-width: 1200px; margin: 0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer .mono{ font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr !important; gap: 32px !important; min-width: 0; }
  .hero-grid > div:last-child{ width: 100%; }
  .hero-grid > div{ min-width: 0; }
  .hero-grid svg, .hero-grid img{ max-width: 100% !important; height: auto !important; }
  footer{ padding: 32px 20px; text-align: center; justify-content: center; }
}
@media (max-width: 640px){
  .nav .logo img{ height: 26px !important; }
  .nav .pill{ padding: 8px 14px; font-size: 13px; }
  .breadcrumb{ font-size: 10px; flex-wrap: wrap; }
  .h-display{ font-size: clamp(30px, 9vw, 44px) !important; }
  .h-section{ font-size: clamp(24px, 7vw, 32px) !important; }
  .eyebrow{ font-size: 10.5px; }
  .card[style*="padding:48px"]{ padding: 28px 20px !important; }
}