:root{
    --bg: #ffffff;
    --fg: #0b1220;
    --muted: #5b6475;
    --primary: #003d3b; /* updated */
    --primary-600: color-mix(in oklab, var(--primary) 85%, black);
    --ring: rgba(14,165,233,.35);
    --card: #f8fafc;
    --border: #e5e7eb;
    --shadow: 0 10px 30px rgba(2,132,199,.18);
    --radius: 18px;
    --container: 1200px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth;}
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg); }
  a { color: inherit; text-decoration: none; }
  .container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }
  .btn{ display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; padding:.85rem 1.15rem; font-weight:600; border:1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; box-shadow: 0 2px 0 rgba(0,0,0,.03); }
  .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
  .btn-primary{ background: var(--primary); color:#fff; border-color:transparent; }
  .btn-primary:hover{ background: var(--primary-600); }
  .btn-ghost{ background: #fff; }
  
  /* Visually hidden but focusable skip link */
  .skip{ position: absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .skip:focus{ position: static; width:auto; height:auto; padding:.5rem 1rem; background:#111; color:#fff; border-radius:8px; margin:.5rem; display:inline-block; }
  
  /* Header */
  header{ position:sticky; top:0; z-index:40; backdrop-filter: saturate(140%) blur(6px); background: color-mix(in oklab, white 65%, transparent); border-bottom:1px solid var(--border); }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; }
  .brand{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px; }
  .brand svg{ width:30px; height:30px; }
  
  /* Menu */
  #menu-toggle{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:#fff; }
  nav ul{ list-style:none; display:flex; gap:1rem; padding:0; margin:0; }
  nav a{ display:inline-block; padding:.55rem .85rem; border-radius:10px; color:#374151; font-weight:600; }
  nav a:hover{ background: var(--card); }
  
  /* Mobile menu (checkbox hack) */
  .nav-right{ display:flex; align-items:center; gap:.75rem; }
  @media (max-width: 900px){
    nav{ position: fixed; inset: 60px 1rem auto 1rem; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding: .5rem; display:none; }
    #menu-toggle:checked ~ nav{ display:block; }
    nav ul{ flex-direction:column; }
    .nav-right{ gap:.5rem; }
  }
  
  /* Hero */
  .hero{ position:relative; overflow:hidden; min-height: 100svh; display:grid; align-items:center; }
  .hero .container{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:2rem; align-items:center; padding: clamp(2rem, 6vw, 5rem) 0; }
  @media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } }
  .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color: var(--primary-600); background: color-mix(in oklab, var(--primary) 12%, white); border-radius:999px; padding:.35rem .7rem; }
  .title{ font-size:clamp(2rem, 4vw + .5rem, 3.1rem); line-height:1.1; letter-spacing:-.02em; margin:.8rem 0; }
  .lead{ color:var(--muted); font-size: clamp(1rem, 1.1vw + .5rem, 1.125rem); max-width: 52ch; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
  
  /* Animated blobs in the background */
  .blobs{ position:absolute; inset: -10% -10% auto -10%; z-index:-1; pointer-events:none; height: 120%; }
  .blob{ position:absolute; width: clamp(260px, 36vw, 520px); aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity:.45; animation: float 18s ease-in-out infinite; }
  .blob.one{ background: color-mix(in oklab, var(--primary) 35%, white); top:-10%; left:-10%; animation-delay:-2s; }
  .blob.two{ background: color-mix(in oklab, var(--primary) 22%, white); top: 10%; right:-5%; animation-delay:-6s; }
  .blob.three{ background: color-mix(in oklab, var(--primary) 12%, white); bottom:-20%; left:40%; animation-delay:-10s; }
  
  @keyframes float{ 0%,100%{ transform: translateY(0) translateX(0) scale(1);} 50%{ transform: translateY(-12px) translateX(6px) scale(1.03);} }
  
  /* Phone mock */
  .phone-wrap{ display:grid; place-items:center; animation: bob 2s ease-in-out infinite; }

  @keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
  @keyframes fadeInUp{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform: translateY(0);} }
  
  /* Features */
  .section{ padding: clamp(2.5rem, 6vw, 5rem) 0; }
  .section h2{ font-size: clamp(1.6rem, 2.2vw + .5rem, 2.2rem); margin:0 0 1.2rem; letter-spacing:-.02em; }
  .muted{ color: var(--muted); }
  .grid{ display:grid; gap:1rem; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .card h3{ margin:.2rem 0 .35rem; font-size:1.05rem; }
  .ico{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background: #e0f2fe; }
  .ico svg{ width:18px; height:18px; }
  @media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr; } }

  /* Pricing CTA */
  .pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
  @media (max-width: 1200px){ .pricing{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 900px){ .pricing{ grid-template-columns:1fr; } }
  .plan{ background: #fff; border:1px solid var(--border); border-radius: var(--radius); padding:1.25rem; box-shadow: 0 8px 28px rgba(2,6,23,.06); position:relative; }
  .plan.featured{ border-color: color-mix(in oklab, var(--primary) 42%, var(--border)); box-shadow: 0 16px 40px rgba(14,165,233,.15); }
  .price{ font-size: 2rem; font-weight:800; letter-spacing:-.02em; }
  .plan ul{ margin:.5rem 0 1rem; padding-left:1.1rem; }
  
  /* FAQ (native details) */
  details{ border:1px solid var(--border); background:#fff; border-radius: 14px; padding:.85rem 1rem; }
  details + details{ margin-top:.7rem; }
  summary{ cursor:pointer; font-weight:700; }
  details[open]{ box-shadow: var(--shadow); }
  
  /* Footer */
  footer{ border-top:1px solid var(--border); padding:1.4rem 0 2.2rem; }
  .foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
  .social{ display:flex; gap:.6rem; }
  .social a{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:#fff; transition: transform .2s ease, box-shadow .2s ease; }
  .social a:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
  
  /* Section headers aligned center for a clean LP feel */
  .center{ text-align:center; }
  .center .muted{ margin-inline:auto; max-width: 64ch; }