*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: #f0f2f8; }

    .hero {
      position: relative;
      width: 100%;
      min-height: clamp(680px, 58vw, 960px);
      background-image: url("/static/images/landing-hero.jpg");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      overflow: visible;
      padding-bottom: 40px;
    }

    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        108deg,
        rgba(240,244,252,0.70) 0%,
        rgba(240,244,252,0.52) 30%,
        rgba(240,244,252,0.15) 52%,
        transparent 64%
      );
      pointer-events: none;
    }

    .hero-text {
      position: absolute;
      top: 4%;
      left: 3.5%;
      width: 47%;
      z-index: 2;
      display: flex;
      flex-direction: column;
    }

    .hero-headline-1 {
      font-size: clamp(18px, 2.5vw, 34px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      color: #002855;
      letter-spacing: -0.5px;
      margin-bottom: 0;
    }

    .hero-headline-2 {
      font-size: clamp(18px, 2.5vw, 34px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      color: #FF8200;
      letter-spacing: -0.5px;
      margin-bottom: clamp(16px, 2vw, 28px);
    }

    .wordmark {
      font-size: 36px;
      font-weight: 900;
      color: #002855;
      letter-spacing: -1px;
      line-height: 1;
      font-family: Georgia, "Times New Roman", serif;
      margin-bottom: 2px;
    }

    .wordmark-sub {
      font-size: clamp(13px, 1.5vw, 20px);
      font-weight: 700;
      color: #002855;
      line-height: 1.1;
      margin-bottom: clamp(16px, 2vw, 28px);
    }

    .hero-copy {
      font-size: clamp(13px, 1.15vw, 16px);
      font-weight: 700;
      color: #001833;
      line-height: 1.7;
      max-width: 97%;
      text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.8);
      margin-bottom: clamp(8px, 1vw, 14px);
    }

    .cta-row { display: flex; gap: clamp(8px,1vw,14px); align-items: center; flex-wrap: wrap; margin-bottom: clamp(10px, 1.2vw, 16px); }
    .btn-primary {
      background: #FF8200; color: #fff;
      font-size: clamp(12px, 1vw, 15px); font-weight: 700;
      padding: clamp(10px,1vw,13px) clamp(18px,1.8vw,28px);
      border-radius: 8px; border: none; cursor: pointer;
      text-decoration: none; display: inline-block;
      box-shadow: 0 4px 18px rgba(255,130,0,0.42);
      transition: all 0.18s; white-space: nowrap;
    }
    .btn-primary:hover { background: #e57200; transform: translateY(-2px); }
    .btn-secondary {
      background: rgba(255,255,255,0.80); color: #002855;
      font-size: clamp(12px, 1vw, 15px); font-weight: 700;
      padding: clamp(9px,0.95vw,12px) clamp(16px,1.6vw,26px);
      border-radius: 8px; border: 2px solid #002855;
      cursor: pointer; text-decoration: none; display: inline-block;
      transition: all 0.18s; white-space: nowrap;
    }
    .btn-secondary:hover { background: #002855; color: #fff; }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(6px, 0.7vw, 10px);
      width: 100%;
    }
    .feature-card {
      background: rgba(255,255,255,0.88);
      border-radius: 10px;
      padding: clamp(10px,0.9vw,13px);
      border: 1px solid rgba(200,210,230,0.80);
      box-shadow: 0 3px 14px rgba(0,40,85,0.09);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.18s;
      display: flex;
      gap: 9px;
      align-items: flex-start;
    }
    .feature-card:hover { transform: translateY(-2px); }
    .feature-card-icon { font-size: clamp(17px,1.5vw,21px); flex-shrink: 0; margin-top: 1px; }
    .feature-card-text { flex: 1; }
    .feature-card-title { font-size: clamp(10px, 0.82vw, 12px); font-weight: 800; color: #002855; line-height: 1.2; margin-bottom: 3px; }
    .feature-card-body  { font-size: clamp(9px, 0.70vw, 10.5px); color: #445566; line-height: 1.45; }

    .landing-footer {
      max-width: 900px;
      margin: 0 auto;
      padding: 13px 0 15px;
      display: flex; align-items: center; justify-content: space-between;
      background: #f0f2f8;
    }
    .footer-links { display: flex; gap: 22px; }
    .footer-links a { font-size: 13px; color: #667799; text-decoration: none; transition: color 0.15s; }
    .footer-links a:hover { color: #002855; }
    .footer-brand-badge {
      display: flex; align-items: center; gap: 7px;
      background: rgba(0,40,85,0.07); border: 1px solid rgba(0,40,85,0.16);
      border-radius: 8px; padding: 5px 12px;
      font-size: 11px; font-weight: 700; color: #667799; letter-spacing: .05em;
    }