:root{
      --color-bg: #f6faff;
      --color-surface: #ffffff;
      --color-surface-alt: #eef5ff;
      --color-primary: #0a63d8;
      --color-primary-dark: #084aa2;
      --color-accent: #27a2ff;
      --color-text: #0f1e33;
      --color-text-muted: #4f627d;
      --color-border: #cfe0f7;
      --color-success: #0f8a5f;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --shadow-sm: 0 6px 18px rgba(8,74,162,0.08);
      --shadow-md: 0 14px 34px rgba(8,74,162,0.14);
      --space-1: .5rem;
      --space-2: .75rem;
      --space-3: 1rem;
      --space-4: 1.5rem;
      --space-5: 2rem;
      --space-6: 3rem;
      --space-7: 4rem;
      --max-width: 1120px;
      --font-ui: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body{
      font-family: var(--font-ui);
      color: var(--color-text);
      background:
        radial-gradient(circle at 10% 5%, rgba(39,162,255,.12) 0, transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(10,99,216,.10) 0, transparent 30%),
        linear-gradient(180deg, #f9fcff 0%, #f4f9ff 100%);
      line-height: 1.6;
    }

    .container{
      width: min(100% - 2rem, var(--max-width));
      margin-inline: auto;
    }

    .skip-link{
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--color-primary);
      color: #fff;
      padding: .6rem 1rem;
      z-index: 1000;
    }
    .skip-link:focus{ left: 1rem; top: 1rem; }

    header{
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(8px);
      background: rgba(246,250,255,.86);
      border-bottom: 1px solid var(--color-border);
    }
    .nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      gap: 1rem;
    }
    .brand{
      font-weight: 800;
      color: var(--color-primary-dark);
      letter-spacing: .2px;
      text-decoration: none;
      font-size: 1.1rem;
    }
    .nav-links{
      display: flex;
      flex-wrap: wrap;
      gap: .9rem;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links a{
      text-decoration: none;
      color: var(--color-text);
      font-weight: 600;
      font-size: .95rem;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border: 0;
      border-radius: 999px;
      padding: .82rem 1.25rem;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      transition: .2s ease;
    }
    .btn-primary{
      color: #fff;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
      box-shadow: var(--shadow-sm);
    }
    .btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-outline{
      color: var(--color-primary-dark);
      background: #fff;
      border: 1px solid var(--color-border);
    }

    .hero{
      position: relative;
      overflow: hidden;
      padding: var(--space-7) 0 var(--space-6);
    }
    .hero::before{
      content:"";
      position: absolute;
      inset: -20% -10% auto auto;
      width: 440px;
      height: 440px;
      background: radial-gradient(circle, rgba(39,162,255,.18), transparent 65%);
      pointer-events: none;
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: var(--space-6);
      align-items: center;
    }
    .eyebrow{
      display: inline-block;
      font-weight: 700;
      color: var(--color-primary-dark);
      background: #e8f2ff;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      padding: .3rem .7rem;
      margin-bottom: var(--space-3);
      font-size: .86rem;
    }
    h1,h2,h3{
      line-height: 1.2;
      margin: 0 0 .7rem;
      color: var(--color-primary-dark);
    }
    h1{ font-size: clamp(2rem, 5vw, 3rem); }
    h2{ font-size: clamp(1.45rem, 3vw, 2rem); }
    p{ margin: 0 0 1rem; color: var(--color-text-muted); }

    .hero-card{
      background: rgba(255,255,255,.88);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      box-shadow: var(--shadow-md);
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-top: var(--space-3);
    }
    .hero-list{
      display: grid;
      gap: .45rem;
      margin-top: 1rem;
      padding: 0;
      list-style: none;
      color: var(--color-text);
      font-weight: 600;
    }

    section{
      padding: var(--space-6) 0;
    }
    .section-alt{
      background:
        linear-gradient(180deg, rgba(10,99,216,.04), rgba(10,99,216,0)),
        var(--color-surface-alt);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .grid-3{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: var(--space-4);
    }
    .card{
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      box-shadow: var(--shadow-sm);
    }
    .card h3{ margin-bottom: .5rem; font-size: 1.1rem; }
    .tag{
      display: inline-block;
      font-size: .78rem;
      font-weight: 700;
      color: var(--color-success);
      background: #eaf8f2;
      border-radius: 999px;
      padding: .2rem .5rem;
      margin-bottom: .7rem;
    }

    .split{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
      align-items: start;
    }

    .media{
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      background: #dfeeff;
    }
    .media img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      aspect-ratio: 16 / 10;
    }

    details{
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: .85rem 1rem;
    }
    details + details{ margin-top: .8rem; }
    summary{
      font-weight: 700;
      color: var(--color-primary-dark);
      cursor: pointer;
    }

    .cta-band{
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
      color: #fff;
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      display: grid;
      gap: .8rem;
      box-shadow: var(--shadow-md);
    }
    .cta-band p{ color: rgba(255,255,255,.92); margin: 0; }

    form{
      display: grid;
      gap: .75rem;
    }
    label{
      font-weight: 600;
      color: var(--color-primary-dark);
      font-size: .94rem;
    }
    input, textarea, select{
      width: 100%;
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: .72rem .8rem;
      font: inherit;
      color: var(--color-text);
      background: #fff;
    }
    textarea{ min-height: 110px; resize: vertical; }

    footer{
      padding: var(--space-5) 0;
      border-top: 1px solid var(--color-border);
      background: #f3f8ff;
    }
    .small{ font-size: .92rem; color: var(--color-text-muted); }

    @media (max-width: 920px){
      .hero-grid, .split, .grid-3{ grid-template-columns: 1fr; }
      .nav-links{ display: none; }
      .hero{ padding-top: var(--space-6); }
    }