:root{
      --bg:#ffffff;
      --surface:#ffffff;
      --text:#0b1220;
      --muted:#46556b;
      --faint:#6b7280;
      --border:#e6e9ef;
      --accent:#1d4ed8;
      --accent2:#06b6d4;

      --max:1120px;
      --content:72ch;
      --radius: 10px;
      --radius-sm: 8px;
      --pad: clamp(18px, 3.6vw, 36px);

      --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", Times, serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      --shadow: 0 12px 30px rgba(2,6,23,.08);
      --shadow-sm: 0 8px 18px rgba(2,6,23,.06);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#070b14;
        --surface:#0b1220;
        --text:#e6edf7;
        --muted:#c7d2e5;
        --faint:#9aa6be;
        --border: rgba(148,163,184,.18);
        --shadow: 0 18px 46px rgba(0,0,0,.46);
        --shadow-sm: 0 10px 22px rgba(0,0,0,.34);
      }
    }
    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    a{ color: inherit; text-decoration: none; }
    a:hover{ color: var(--accent); }
    .wrap{ max-width: var(--max); margin:0 auto; padding: 0 var(--pad); }

    /* Topbar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 40;
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      gap: 16px;
      padding: 14px 0;
    }
    .brand{
      display:flex;
      gap: 10px;
      align-items:baseline;
      min-width: 240px;
    }
    .brand b{
      font-weight: 900;
      letter-spacing:-0.02em;
    }
    .brand small{
      color: var(--faint);
      font-weight: 800;
      letter-spacing: .02em;
    }
    nav{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items:center;
    }
    nav a{
      padding: 9px 10px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-weight: 750;
      font-size: 14px;
    }
    nav a:hover{
      border-color: var(--border);
      background: color-mix(in srgb, var(--border) 14%, transparent);
      color: var(--text);
    }
    .cta{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      font-weight: 850;
      font-size: 14px;
      box-shadow: var(--shadow-sm);
      cursor:pointer;
    }
    .btn:hover{ border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
    .btn.primary{
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #ffffff) 0%, color-mix(in srgb, var(--accent2) 74%, #ffffff) 100%);
      border-color: transparent;
      color:#fff;
      box-shadow: 0 14px 30px rgba(29,78,216,.22);
    }
    .btn.primary:hover{ filter: brightness(1.02); }

    /* Hero */
    .hero{
      padding: clamp(34px, 6vw, 74px) 0 22px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(16px, 4vw, 40px);
      align-items:start;
    }
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .brand{ min-width:auto; }
      .cta{ margin-left:0; }
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--border) 12%, transparent);
      color: var(--muted);
      font-weight: 850;
      font-size: 13px;
      width: fit-content;
    }
    .hero h1{
      font-family: var(--serif);
      margin: 14px 0 10px;
      font-size: clamp(36px, 4.6vw, 56px);
      line-height: 1.06;
      letter-spacing:-0.035em;
    }
    .hero p{
      margin: 12px 0 0;
      max-width: var(--content);
      color: var(--muted);
      font-size: 16px;
    }
    .hero-actions{
      margin-top: 18px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
    }
    .trust{
      margin-top: 14px;
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      color: var(--faint);
      font-weight: 750;
      font-size: 13px;
    }
    .trust span{
      padding: 6px 10px;
      border: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
      border-radius: 999px;
    }

    /* Right hero card */
    .hero-card{
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-card .img{
      height: 210px;
      background:
        radial-gradient(900px 220px at 18% 10%, rgba(29,78,216,.20), transparent 56%),
        radial-gradient(900px 220px at 70% 30%, rgba(6,182,212,.18), transparent 56%),
        linear-gradient(120deg, rgba(2,6,23,.07), rgba(2,6,23,.02));
      border-bottom: 1px solid var(--border);
    }
    .hero-card .in{ padding: 16px; }
    .hero-card h3{ margin:0; font-size: 16px; letter-spacing:-0.02em; }
    .hero-card p{ margin: 8px 0 0; color: var(--muted); font-size: 14px; }
    .mini{
      margin-top: 12px;
      display:grid;
      gap: 10px;
    }
    .mini a{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--border) 10%, transparent);
      font-weight: 850;
      font-size: 13px;
    }
    .mini a:hover{
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      background: color-mix(in srgb, var(--border) 16%, transparent);
    }
    .mini small{ color: var(--faint); font-weight: 850; }

    /* Sections */
    section{ padding: 26px 0; }
    .section-title{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap: 14px;
      margin-bottom: 14px;
    }
    .section-title h2{
      margin:0;
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      font-weight: 650;
      font-size: 14px;
    }

    /* Grid cards */
    .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 980px){ .grid3{ grid-template-columns:1fr; } }

    .card{
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }
    .card .head{
      padding: 16px 16px 0;
      display:flex;
      justify-content:space-between;
      gap: 12px;
      align-items:flex-start;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--border) 12%, transparent);
      border-radius: 999px;
      color: var(--muted);
      font-weight: 850;
      font-size: 12px;
    }
    .card h3{
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .card .body{
      padding: 10px 16px 16px;
      color: var(--muted);
      font-size: 14px;
    }
    .card .foot{
      padding: 0 16px 16px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
    }
    .pill{
      padding: 8px 10px;
      border: 1px solid var(--border);
      font-weight: 850;
      font-size: 13px;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--surface) 90%, transparent);
    }
    .pill:hover{ border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }

    /* Coaching pricing */
    .pricing{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 980px){ .pricing{ grid-template-columns:1fr; } }
    .price{
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 16px;
      position: relative;
    }
    .price.featured{
      border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
      box-shadow: 0 18px 46px rgba(29,78,216,.18);
    }
    .price h3{ margin:0; font-size: 18px; letter-spacing:-0.02em; }
    .amount{
      margin-top: 10px;
      font-size: 34px;
      font-weight: 900;
      letter-spacing:-0.03em;
    }
    .amount small{ font-size: 14px; color: var(--faint); font-weight: 800; }
    .price p{ margin: 10px 0 0; color: var(--muted); font-size: 14px; }
    .price ul{
      margin: 12px 0 0 18px;
      color: var(--muted);
      font-size: 14px;
    }
    .price li{ margin: 6px 0; }
    .badge{
      position:absolute;
      top: 12px;
      right: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
      color: var(--text);
      font-weight: 900;
      font-size: 12px;
    }

    /* Blog */
    .blog-layout{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap: 18px;
      align-items:start;
    }
    @media (max-width: 980px){ .blog-layout{ grid-template-columns: 1fr; } }

    .post-grid{ display:grid; gap: 14px; }
    .post{
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      overflow:hidden;
    }
    .post .img{
      height: 190px;
      background:
        radial-gradient(900px 220px at 20% 10%, rgba(29,78,216,.16), transparent 55%),
        radial-gradient(900px 220px at 70% 30%, rgba(6,182,212,.12), transparent 55%),
        linear-gradient(120deg, rgba(2,6,23,.07), rgba(2,6,23,.02));
      border-bottom: 1px solid var(--border);
    }
    .post .in{ padding: 16px; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--faint);
      font-weight: 800;
      font-size: 12px;
    }
    .post h3{
      margin: 10px 0 8px;
      font-size: 20px;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
    .post p{
      margin:0;
      color: var(--muted);
      max-width: var(--content);
      font-size: 14px;
    }
    .post .actions{
      margin-top: 12px;
      display:flex;
      justify-content:space-between;
      gap: 10px;
      align-items:center;
    }

    .aside-box{
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      padding: 16px;
    }
    .aside-box h3{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .search{
      display:flex;
      gap: 10px;
      align-items:center;
      margin-bottom: 12px;
    }
    .search input{
      width:100%;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      color: var(--text);
      outline:none;
      font-size: 14px;
    }
    .search input:focus{
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
      box-shadow: 0 0 0 6px rgba(29,78,216,.16);
    }
    .filters{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }
    .chip{
      border: 1px solid var(--border);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
      color: var(--muted);
      background: color-mix(in srgb, var(--border) 12%, transparent);
      cursor:pointer;
      user-select:none;
    }
    .chip.active{
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    /* Newsletter */
    .newsletter{
      border: 1px solid var(--border);
      background: linear-gradient(120deg,
        color-mix(in srgb, var(--border) 14%, transparent),
        transparent 40%),
        var(--surface);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .newsletter h3{
      margin:0;
      font-size: 18px;
      letter-spacing:-0.02em;
    }
    .newsletter p{
      margin: 8px 0 0;
      color: var(--muted);
      max-width: var(--content);
      font-size: 14px;
    }
    .form{
      margin-top: 12px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
    }
    .form input{
      flex: 1 1 280px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      font-size: 14px;
      outline: none;
      border-radius: var(--radius-sm);
      color: var(--text);
    }
    .form input:focus{
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
      box-shadow: 0 0 0 6px rgba(29,78,216,.16);
    }
    .note{
      margin-top: 10px;
      color: var(--faint);
      font-weight: 650;
      font-size: 12px;
    }

    /* Modal */
    .modal{
      position: fixed;
      inset: 0;
      background: rgba(2,6,23,.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 22px;
      z-index: 100;
    }
    .modal.open{ display:flex; }
    .modal-card{
      width: min(980px, 100%);
      max-height: min(84vh, 860px);
      overflow:auto;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      padding: clamp(16px, 2.6vw, 26px);
      position: relative;
    }
    .close{
      position: sticky;
      top: 0;
      margin-left:auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      padding: 8px 10px;
      font-weight: 900;
      cursor:pointer;
      float:right;
    }
    .close:hover{ border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

    .article h1{
      font-family: var(--serif);
      margin: 8px 0 10px;
      font-size: clamp(30px, 3.8vw, 46px);
      line-height: 1.12;
      letter-spacing: -0.03em;
    }
    .prose{
      max-width: var(--content);
      font-size: 18px;
    }
    .prose p{ margin: 0 0 1em; color: var(--text); }
    .prose h2{
      font-family: var(--serif);
      margin: 1.6em 0 .6em;
      letter-spacing:-0.02em;
      font-size: 26px;
      line-height: 1.2;
    }
    .prose ul{ margin: .2em 0 1em 1.2em; }
    .prose li{ margin: .35em 0; }
    .prose blockquote{
      margin: 1.2em 0;
      padding: 4px 0 4px 16px;
      border-left: 3px solid color-mix(in srgb, var(--accent) 35%, var(--border));
      color: var(--muted);
    }
    .prose code{
      font-family: var(--mono);
      font-size: .92em;
      padding: .15em .35em;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--border) 10%, transparent);
    }

    footer{
      border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
      padding: 28px 0 48px;
      color: var(--faint);
      font-weight: 650;
      font-size: 14px;
    }
    .foot{
      display:flex;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
      align-items:center;
    }
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
    }