@charset "UTF-8";

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

    :root{
      /* Clean + professional, aligned to black/gray logo */
      --bg: #ffffff;
      --surface: #ffffff;
      --text: #0f1115;
      --muted: #5b616a;
      --border: #e6e8ec;

      --brand: #111111;
      --brand-2: #2a2f36;
      --soft: rgba(15,17,21,.06);
      --focus: rgba(17,17,17,.18);

      --shadow: 0 18px 40px rgba(15,17,21,.08);
      --shadow-soft: 0 14px 28px rgba(15,17,21,.07);

      --radius: 18px;
      --radius-sm: 14px;
      --max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 50% -200px, rgba(15,17,21,.06), rgba(15,17,21,0) 70%),
        radial-gradient(900px 450px at 20% 0px, rgba(15,17,21,.04), rgba(15,17,21,0) 65%),
        var(--bg);
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:28px 20px;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.82);
      border-bottom:1px solid rgba(230,232,236,.75);
    }
    .nav{
      max-width:var(--max);
      margin:0 auto;
      padding:14px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:240px;
    }
    .brand img{
      height:70px;
      width:auto;
      display:block;
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:14px;
      font-size:14px;
      font-weight:600;
      color:var(--muted);
      white-space:nowrap;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.92);
      padding:8px 12px;
      border-radius:999px;
      box-shadow: 0 8px 22px rgba(15,17,21,.06);
    }
    .dot{
      width:8px; height:8px;
      border-radius:50%;
      background:var(--brand);
      opacity:.75;
    }

    /* Hero */
    .hero{
      padding:52px 0 18px;
      text-align:center;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.88);
      padding:8px 12px;
      border-radius:999px;
      color:var(--muted);
      font-weight:700;
      font-size:13px;
      margin-bottom:18px;
    }

    h1{
      font-family:"Libre Baskerville", Georgia, serif;
      font-weight:700;
      letter-spacing:-0.02em;
      line-height:1.12;
      margin:14px auto 12px;
      font-size: clamp(28px, 4.2vw, 46px);
      max-width: 26ch;
    }

    .sub{
      margin:0 auto;
      max-width: 80ch;
      color:var(--muted);
      font-size: clamp(15px, 1.7vw, 18px);
      line-height:1.65;
    }

    /* Lead capture card */
    .card{
      margin:26px auto 0;
      max-width: 920px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      text-align:left;
    }
    .card-inner{
      padding:18px;
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .cta-left{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width: 240px;
      flex: 1;
    }
    .cta-left .title{
      font-weight:800;
      letter-spacing:-0.01em;
      font-size:16px;
    }
    .cta-left .desc{
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
    }

    form{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      flex: 1;
      min-width: 280px;
      flex-wrap:wrap;
    }
    .input{
      flex:1;
      min-width:230px;
    }
    input[type="email"]{
      width:100%;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:999px;
      font-size:14px;
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease;
      background:#fff;
    }
    input[type="email"]:focus{
      border-color: rgba(17,17,17,.35);
      box-shadow: 0 0 0 6px var(--focus);
    }

    .btn{
      border:1px solid rgba(17,17,17,.20);
      background: linear-gradient(180deg, #1a1a1a, #0f0f10);
      color:#fff;
      padding:12px 16px;
      border-radius:999px;
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      box-shadow: 0 14px 30px rgba(15,17,21,.18);
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:active{ transform: translateY(0px); opacity:.92; }

    .btn-secondary{
      border:1px solid var(--border);
      background:#fff;
      color:var(--brand);
      box-shadow:none;
      font-weight:700;
    }

    .card-footer{
      border-top:1px solid var(--border);
      background: rgba(245,246,248,.65);
      padding:12px 18px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:space-between;
      align-items:center;
      color:var(--muted);
      font-size:12.5px;
      line-height:1.5;
    }
    .small-links{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    /* Sections */
    .section{ margin-top:34px; }
    .grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:start;
    }
    .panel{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow-soft);
      padding:18px;
    }
    .panel h2{
      margin:0 0 10px;
      font-size:16px;
      letter-spacing:-0.01em;
    }
    .panel p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:14px;
    }
    .list{
      margin:12px 0 0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:var(--text);
      font-size:14px;
      line-height:1.5;
    }
    .check{
      width:18px; height:18px;
      border-radius:6px;
      border:1px solid rgba(17,17,17,.18);
      background: rgba(17,17,17,.06);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 18px;
      margin-top:2px;
      font-weight:900;
      font-size:12px;
    }

    /* Quick guides / future pages (still one landing) */
    .guide-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:12px;
    }
    .guide{
      border:1px solid var(--border);
      background:#fff;
      border-radius:var(--radius-sm);
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:6px;
      min-height:112px;
    }
    .guide strong{
      font-size:14px;
      letter-spacing:-0.01em;
    }
    .guide span{
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    /* FAQ */
    .faq{ margin-top:18px; }
    details{
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:12px 14px;
      background:#fff;
    }
    details + details{ margin-top:10px; }
    summary{
      cursor:pointer;
      font-weight:800;
      letter-spacing:-0.01em;
    }
    details p{
      margin:10px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }

    /* Footer */
    footer{
      margin-top:40px;
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size:12.5px;
      line-height:1.65;
      padding:22px 0 36px;
    }
    .footer-row{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .footer-links{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      white-space:nowrap;
    }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .guide-grid{ grid-template-columns: 1fr; }
      .nav{ padding:12px 16px; }
      .navlinks{ gap:12px; }
    }