:root{
      --navy:#0e2a3b;
      --navy-2:#0b2230;
      --ink:#0b1320;
      --text:#0f172a;
      --muted:#6b7b8c;
      --light:#f5f7fa;
      --card:#ffffff;
      --accent:#e4572e;
      --accent-2:#ff744d;
      --ring: rgba(228,87,46,.4);
      --radius:14px;
      --shadow: 0 10px 30px rgba(14,42,59,.18);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:#ffffff;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    /* Header */
    .site-header{
      position:sticky; top:0; z-index:40;
      background:rgba(255,255,255,.9);
      backdrop-filter: saturate(180%) blur(10px);
      border-bottom:1px solid #e6e9ee;
    }
    .wrap{max-width:1200px; margin:0 auto; padding:0 20px}
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      height:64px;
    }
    .brand{
      display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
      font-weight:800; letter-spacing:.2px; font-size:1.1rem;
    }
    .brand__logo{
      inline-size:40px; block-size:40px; border-radius:8px; background:var(--navy);
      display:grid; place-items:center; color:#fff; font-weight:800;
    }
    .nav__links{
      display:flex; align-items:center; gap:22px; margin-left: auto; padding-right: 20px;
    }
    .nav__links a{
      text-decoration:none; color:var(--ink); font-weight:600; font-size:.95rem;
    }
    .nav__cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      appearance:none; border:0; cursor:pointer; font-weight:700;
      padding:12px 16px; border-radius:10px; text-decoration:none;
      display:inline-flex; align-items:center; gap:8px;
      transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
      white-space:nowrap;
    }
    .btn:active{ transform:translateY(1px) }
    .btn--ghost{ background:transparent; color:var(--card); }
    .btn--primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px var(--ring); }
    .btn--primary:hover{ background:var(--accent-2) }

    /* Mobile nav */
    .menu-btn{ display:none; background:transparent; border:0; font-size:1.4rem; }
    @media (max-width: 880px){
      .nav__links{ display:none }
      .menu-btn{ display:inline-flex }
    }

    /* Hero */
    .hero{
      position:relative;
      background:
        radial-gradient(1200px 400px at 80% -50%, rgba(228,87,46,.15), transparent 60%),
        radial-gradient(900px 300px at -10% 20%, rgba(14,42,59,.25), transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
      color:#fff;
      overflow:hidden;
    }
    .hero__grid{
      display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
      padding:72px 20px;
    }
    .eyebrow{ color:#ffb6a2; text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; font-weight:800 }
    .hero h1{ font-size: clamp(2.1rem, 3.5vw + .8rem, 3.6rem); line-height:1.1; margin:10px 0 14px }
    .hero p{ color:#d7e0e8; font-size:1.1rem; max-width:58ch }
    .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
    .hero__device{
      min-height:320px;
      background:#0b2230;
      border-radius:24px;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      display:grid; place-items:center;
    }
    .hero__device img{ width:100%; height:100%; object-fit:cover; opacity:.9 }

    /* Features */
    section{ padding:72px 0 }
    .section-title{ font-size:2rem; margin:0 0 16px }
    .muted{ color:var(--muted) }
    .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
    @media (max-width: 960px){ .hero__grid{ grid-template-columns:1fr } .grid-3{ grid-template-columns: 1fr } }

    .card{
      background:var(--card); border:1px solid #e9edf2; border-radius:var(--radius); padding:22px;
      box-shadow: 0 2px 8px rgba(16,24,40,.04);
    }
    .icon{
      width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
      background:#f1f5f9; color:var(--navy); font-weight:800; margin-bottom:12px;
    }

    /* Steps */
    .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
    .step{ background:#ffffff; border:1px dashed #e4e8ee; border-radius:12px; padding:18px }
    .step h4{ margin:.2rem 0 }
    .step .num{ width:28px; height:28px; border-radius:7px; background:var(--navy); color:#fff; display:inline-grid; place-items:center; font-weight:800; font-size:.9rem; }

    /* About block */
    .about{
      background:linear-gradient(180deg,#fafcff 0%, #f5f7fb 100%);
      border-top:1px solid #eef1f6; border-bottom:1px solid #eef1f6;
    }

    /* Footer */
    footer{
      padding:36px 0; color:#5b6775; font-size:.95rem; background:#0b2230; color:#cfe0ee;
      border-top:1px solid rgba(255,255,255,.08);
    }
    footer a{ color:#fff; text-decoration:none }
    .foot-grid{ display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center }
    @media (max-width: 720px){ .foot-grid{ grid-template-columns:1fr } }

    /* Links row */
    .links-row{ display:flex; gap:10px; flex-wrap:wrap }

    /* Focus visibility */
    :focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:8px }