/* QFISH theme — clean, professional, conversion‑focused */
:root{
  --bg: #0b0f1a;
  --bg-alt:#0f1424;
  --panel:#10162a;
  --text: #e7ecf4;
  --muted:#9aa7bd;
  --primary: #5cc8ff;
  --primary-ink:#061018;
  --ring:#9fe3ff;
  --ok:#5bd68a;
  --warn:#ffd166;
  --danger:#ff6b6b;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
 *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 800px at 80% -10%, rgba(92,200,255,.15), transparent 50%) ,linear-gradient(180deg, var(--bg), var(--bg-alt));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img{max-width:100%; display:block}
  a{color:var(--primary); text-decoration:none}
  a:hover{ text-decoration:underline}
  .container{max-width:1120px; padding:0 20px; margin:0 auto}

  /* Header */
  .site-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(11,15,26,0.7);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .site-header.small{position:relative}
  .nav-wrap{display:flex; align-items:center; gap:16px; height:68px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:0.6px}
  .brandmark{width:28px; height:28px}
  .wordmark{color:#fff; font-weight:800; font-size:1.05rem}
  .nav{margin-left:auto}
  .nav-toggle{display:none; background:transparent; border:0; padding:6px}
  .nav-toggle .bar{display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:2px}
  .nav-list{display:flex; gap:18px; list-style:none; padding:0; margin:0}
  .nav-list a{color:#d8e6f9; font-weight:500}
  .nav-cta{margin-left:8px}

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
    font-weight:600; letter-spacing:.2px; text-decoration:none; transition:transform .06s ease, background .2s;
    box-shadow: none;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn:focus{outline:2px solid var(--ring); outline-offset:2px}
  .btn-primary{background:linear-gradient(180deg, #8fe2ff, #5cc8ff); color:#021018; border:0}
  .btn-ghost{background:transparent; color:#e7ecf4}
  .btn-lg{height:52px; padding:0 22px}
  .btn.sm{height:38px; padding:0 14px}

  /* Hero */
  .hero{padding:72px 0 32px; position:relative}
  .hero:before{
    content:""; position:absolute; inset:0; background:
    radial-gradient(800px 400px at 0% -10%, rgba(142,240,198,.12), transparent 60%);
    pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:center}
  .hero h1{font-size: clamp(32px, 5vw, 56px); line-height:1.04; margin:0 0 16px; letter-spacing:-.5px}
  .hero .lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin:0 0 18px}
  .cta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .bullets{margin:14px 0 0; padding:0; list-style:none; color:#c5d3ea}
  .bullets li{padding-left:20px; position:relative; margin:6px 0}
  .bullets li:before{content:"•"; position:absolute; left:0; color:var(--ok)}

  /* Hero art */
  .hero-art {
    display: grid;
    place-items: center;
  }

  /* Style for the image inside the hero area */
  .hero-image {
    width: clamp(260px, 40vw, 360px);
    border-radius: 36px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.08);
    object-fit: cover;
  }


  /* Sections */
  .section{padding:64px 0}
  .section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
  .section h2{font-size: clamp(24px, 4vw, 36px); margin:0 0 12px}
  .section-lead{color:var(--muted); margin:0 0 18px}

  /* Cards */
  .grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
  .cards .card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); padding:20px; box-shadow: var(--shadow);
  }
  .card .icon{font-size:24px}
  .checklist{list-style:none; padding:0; margin:12px 0 0; color:#c6d4eb}
  .checklist li{padding-left:20px; position:relative; margin:6px 0}
  .checklist li:before{content:"✓"; position:absolute; left:0; color:#5bd68a}

  /* Steps */
  .steps{display:grid; grid-template-columns: repeat(4,1fr); gap:16px; list-style:none; padding:0; margin:0}
  .steps li{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px}
  .steps .num{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:linear-gradient(180deg, #8fe2ff, #5cc8ff); color:#021018; font-weight:800; margin-bottom:8px}

  /* Tiles */
  .grid-4{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
  .tile{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:20px; min-height:120px}

  /* Trust logos */
  .trust{padding:18px 0 8px}
  .eyebrow{text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:#a9bad6; text-align:center; margin:0 0 8px}
  .logo-row{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; align-items:center}
  .logo-pill{height:36px; border-radius:999px; border:1px dashed rgba(255,255,255,.1); display:grid; place-items:center; color:#a9bad6}

  /* About */
  .stats-row{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:10px}
  .stats-row > div{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:14px}
  .stats-row span{display:block; color:#a9bad6}

  /* CTA banner */
  .cta-banner{padding:48px 0; background:linear-gradient(180deg, rgba(143,226,255,.15), rgba(143,226,255,0)); border-block:1px solid rgba(255,255,255,.06)}
  .cta-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .cta-inner h2{margin:0}

  /* Contact */
  .contact-form{margin-top:8px}
  .form-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
  .form-grid label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:#cfe3ff}
  .form-grid .full{grid-column: 1/-1}
  input, textarea{
    background:#0b1426; border:1px solid rgba(255,255,255,.08); border-radius:12px;
    color:#e7ecf4; padding:12px 14px; font: inherit;
  }
  input:focus, textarea:focus{outline:2px solid var(--ring); outline-offset:2px; border-color:transparent}
  .helper{color:#9bb0cd; margin:6px 0 0}
  .consent{margin-top:8px}
  .checkbox{display:flex; align-items:center; gap:10px; font-weight:500; color:#c9dcf6}
  .checkbox input{width:18px; height:18px}
  .actions{display:flex; align-items:center; gap:12px; margin-top:12px}

  /* Footer */
  .site-footer{padding:28px 0; border-top:1px solid rgba(255,255,255,.06)}
  .footer-grid{display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:16px; align-items:center}
  .footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
  .muted{color:#93a7c5}

  /* Cookie banner */
  .cookie{
    position: fixed; inset: auto 16px 16px 16px; background: linear-gradient(180deg, #0f1630, #0c1426);
    border:1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: var(--shadow);
    display:none;
  }
  .cookie-inner{display:flex; align-items:center; gap:12px; padding:12px}
  .cookie .spacer{flex:1 1 auto}

  /* Prose */
  .prose{max-width:720px}
  .prose h1, .prose h2{letter-spacing:-.2px}

  /* Utilities */
  .sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
  .break{display:block}

  /* Responsive */
  @media (max-width: 960px){
    .nav-toggle{display:block}
    .nav-list{display:none; position:absolute; right:16px; top:68px; background:#0b1426; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px; width: 240px; box-shadow: var(--shadow)}
    .nav-list.open{display:grid}
    .nav-list li{padding:8px 4px}
    .hero-grid{grid-template-columns: 1fr}
    .grid-3{grid-template-columns:1fr}
    .grid-4{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .stats-row{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr; gap:6px}
    .cta-inner{flex-direction:column; align-items:flex-start}
    .form-grid{grid-template-columns: 1fr}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important}
  }