:root {
      --navy: #123b4a;
      --teal: #1f8a82;
      --light-teal: #e7f5f2;
      --gold: #d6a84f;
      --cream: #fbfaf6;
      --text: #243238;
      --muted: #617178;
      --white: #ffffff;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: var(--cream);
      color: var(--text);
      line-height: 1.6;
    }

    .container {
      width: min(1120px, 92%);
      margin: 0 auto;
    }

    header {
      padding: 24px 0;
      background: var(--white);
      border-bottom: 1px solid #e8ece9;
    }

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .logo {
      color: var(--navy);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .nav-link {
      color: var(--teal);
      text-decoration: none;
      font-weight: 700;
    }

    .brand {
      padding: 56px 0 12px;
      background: var(--white);
      text-align: center;
    }

    .brand-logo {
      display: block;
      width: clamp(300px, 32vw, 420px);
      max-width: 92%;
      height: auto;
      margin: 0 auto;
    }

    .hero {
      padding: 90px 0 75px;
      background:
        linear-gradient(135deg, rgba(231, 245, 242, 0.96), rgba(251, 250, 246, 0.96)),
        radial-gradient(circle at top right, #b8e2d8, transparent 40%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: 65px;
    }

    .eyebrow {
      color: var(--teal);
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    h1 {
      color: var(--navy);
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: 1.05;
      margin-bottom: 24px;
    }

    .hero-copy {
      max-width: 650px;
      color: var(--muted);
      font-size: 1.18rem;
      margin-bottom: 30px;
    }

    .button {
      display: inline-block;
      padding: 15px 27px;
      border: 0;
      border-radius: 7px;
      background: var(--teal);
      color: var(--white);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 800;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .button:hover {
      background: var(--navy);
      transform: translateY(-2px);
    }

    .hero-card {
      padding: 34px;
      border-radius: 16px;
      background: var(--white);
      box-shadow: 0 16px 45px rgba(18, 59, 74, 0.12);
      border-top: 5px solid var(--gold);
    }

    .hero-card h2 {
      color: var(--navy);
      margin-bottom: 14px;
      font-size: 1.7rem;
    }

    .hero-card p {
      color: var(--muted);
    }

    .section {
      padding: 80px 0;
    }

    .section-heading {
      max-width: 700px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .section-heading h2 {
      color: var(--navy);
      font-size: 2.3rem;
      margin-bottom: 12px;
    }

    .section-heading p {
      color: var(--muted);
    }

    .audience-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .audience-card {
      padding: 28px;
      border: 1px solid #e2ebe8;
      border-radius: 12px;
      background: var(--white);
    }

    .audience-card .number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin-bottom: 20px;
      border-radius: 50%;
      background: var(--light-teal);
      color: var(--teal);
      font-weight: 800;
    }

    .audience-card h3 {
      color: var(--navy);
      margin-bottom: 10px;
    }

    .audience-card p {
      color: var(--muted);
    }

    .join-section {
      background: var(--navy);
      color: var(--white);
    }

    .join-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 60px;
      align-items: start;
    }

    .join-section h2 {
      font-size: 2.5rem;
      line-height: 1.15;
      margin-bottom: 18px;
    }

    .join-section .intro {
      color: #d7e8e6;
      font-size: 1.1rem;
    }

    form {
      padding: 32px;
      border-radius: 14px;
      background: var(--white);
      color: var(--text);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      color: var(--navy);
      font-size: 0.92rem;
      font-weight: 700;
    }

    input,
    select,
    textarea {
      width: 100%;
      margin-bottom: 18px;
      padding: 13px 14px;
      border: 1px solid #ccd9d7;
      border-radius: 6px;
      background: #fff;
      color: var(--text);
      font: inherit;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid var(--teal);
      border-color: var(--teal);
    }

    textarea {
      min-height: 100px;
      resize: vertical;
    }

    .form-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    footer {
      padding: 28px 0;
      background: #0d2d38;
      color: #c8dcda;
      text-align: center;
      font-size: 0.9rem;
    }

    @media (max-width: 800px) {
      .hero-grid,
      .join-grid {
        grid-template-columns: 1fr;
      }

      .audience-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 65px 0;
      }
    }

    @media (max-width: 520px) {
      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      form {
        padding: 23px;
      }

      .nav-link {
        display: none;
      }
    }
  
/* ---- platform additions ---- */
.nav{flex-wrap:wrap;gap:12px}
.nav-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.nav-links a{color:inherit;text-decoration:none;font-weight:600;font-size:.95rem}
.nav-links a:hover{text-decoration:underline}
.page{padding:48px 0 72px}
.page h1{color:var(--navy);margin-bottom:12px;font-size:clamp(1.8rem,4vw,2.6rem)}
.page .lead{color:var(--muted);margin-bottom:28px;max-width:760px;line-height:1.6}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px;align-items:end}
.filters label{display:block;font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.filters select,.filters input{padding:9px 10px;border:1px solid #cfd8db;border-radius:6px;font:inherit;min-width:150px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 8px 26px rgba(18,59,74,.08);border-top:4px solid var(--teal)}
.card h3{color:var(--navy);margin-bottom:6px}
.card .meta{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.card p{line-height:1.5;margin-bottom:8px}
.tag{display:inline-block;background:var(--light-teal);color:var(--navy);border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:700;margin:0 6px 6px 0}
.tag.sample{background:#fdf0d5;color:#7a5410}
.empty{color:var(--muted);padding:24px 0}
.pform{background:#fff;border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(18,59,74,.08);max-width:820px}
.pform label{display:block;font-weight:700;color:var(--navy);margin:14px 0 6px}
.pform input,.pform select,.pform textarea{width:100%;padding:11px;border:1px solid #cfd8db;border-radius:6px;font:inherit}
.pform textarea{min-height:110px}
.pform .checks label{display:inline-flex;gap:6px;font-weight:400;margin-right:16px;color:var(--text)}
.pform .checks input{width:auto}
.notice{margin-top:16px;padding:14px;border-radius:8px;background:var(--light-teal);color:var(--navy)}
.notice.err{background:#fde2e2;color:#7a1d1d}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.offer{background:#fff;border-radius:12px;padding:24px;box-shadow:0 8px 26px rgba(18,59,74,.08)}
.offer h3{color:var(--navy);margin-bottom:10px}
.offer ul{margin:0 0 14px 18px;line-height:1.7;color:var(--text)}
.offer a{color:var(--teal);font-weight:700}
.admin-item{background:#fff;border-radius:10px;padding:16px;margin-bottom:12px;box-shadow:0 4px 14px rgba(18,59,74,.08)}
.admin-item pre{white-space:pre-wrap;font-size:.85rem;background:#f5f7f8;padding:10px;border-radius:6px;margin:8px 0}
.admin-item button{margin-right:8px}
.btn-sm{padding:8px 14px;border:0;border-radius:6px;font-weight:700;cursor:pointer;background:var(--teal);color:#fff}
.btn-sm.red{background:#a33}

.ptable{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
.ptable th{background:var(--navy);color:#fff;text-align:left;padding:10px}
.ptable td{border-bottom:1px solid #e3e9eb;padding:10px;vertical-align:top}