:root {
      --shell: #0069b3;
      --shell-mid: #0069b3;
      --shell-glow: rgba(65, 160, 255, 0.14);
      --island: #ffffff;
      --island-soft: #f4f7fb;
      --ink: #0f172a;
      --ink-soft: #334155;
      --muted: #64748b;
      --line: rgba(11, 31, 51, 0.08);
      --brand: #0069b3;
      --brand-bright: #41a0ff;
      --brand-deep: #0057ad;
      --gpr: #c32a0a;
      --radius-nav: 999px;
      --radius-island: 2.75rem;
      --radius-lg: 1.75rem;
      --frame-pad: clamp(0.75rem, 2vw, 1.25rem);
      --content-max: 1180px;
      --font-display: 'Sora', sans-serif;
      --font-body: 'Sora', sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background: var(--shell);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 80% 50% at 10% -10%, var(--shell-glow), transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 20%, rgba(0, 105, 179, 0.18), transparent 50%),
        radial-gradient(ellipse 50% 35% at 50% 100%, rgba(65, 160, 255, 0.08), transparent 55%),
        linear-gradient(165deg, var(--shell) 0%, var(--shell-mid) 45%, #081525 100%);
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.35;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent);
    }

    a {
      color: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .page-frame {
      position: relative;
      z-index: 1;
      width: min(100%, 1440px);
      margin: 0 auto;
      padding: var(--frame-pad);
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      min-height: 100vh;
    }

    /* Floating pill nav — team.blue inspired */
    .nav-pill {
      position: sticky;
      top: var(--frame-pad);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 0.85rem 1.1rem 0.85rem 1.5rem;
      background: var(--island);
      border-radius: var(--radius-nav);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
      animation: navIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .logo {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 800;
      text-decoration: none;
      letter-spacing: -0.03em;
      color: var(--brand);
      white-space: nowrap;
      transition: color 0.2s ease, transform 0.25s ease;
    }

    .logo span {
      color: var(--ink);
    }

    .logo:hover {
      transform: scale(1.02);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .nav-link {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      padding: 0.55rem 0.95rem;
      border-radius: 999px;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .nav-link:hover,
    .nav-link.is-active {
      color: var(--ink);
      background: var(--island-soft);
    }

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: var(--island-soft);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }

    .nav-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .nav-pill.is-open .nav-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nav-pill.is-open .nav-toggle span:nth-child(2) {
      opacity: 0;
    }

    .nav-pill.is-open .nav-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Seamless white main island */
    .main-island {
      flex: 1;
      display: flex;
      flex-direction: column;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)),
        repeating-linear-gradient(
          -28deg,
          transparent,
          transparent 18px,
          rgba(11, 31, 51, 0.025) 18px,
          rgba(11, 31, 51, 0.025) 19px
        ),
        var(--island);
      border-radius: var(--radius-island) var(--radius-island) calc(var(--radius-island) - 0.35rem) calc(var(--radius-island) - 0.35rem);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
      overflow: clip;
      animation: islandIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
      min-height: calc(100vh - 7rem);
    }

    .main-island > main {
      flex: 1;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: clamp(2rem, 5vw, 3.5rem) clamp(1.35rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    }

    .site-footer {
      margin-top: auto;
      padding: 2rem clamp(1.35rem, 4vw, 3rem) 2.25rem;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
      align-items: center;
      color: var(--muted);
      font-size: 0.88rem;
      background: rgba(244, 247, 251, 0.55);
    }

    .site-footer .footer-brand {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.02em;
    }

    .site-footer a {
      color: var(--muted);
      text-decoration: none;
      font-weight: 600;
    }

    .site-footer a:hover {
      color: var(--brand);
    }

    .typed-cursor {
      font-size: 7.5rem;
      margin-left: 2px;
      font-weight: 300;
      color: var(--brand-bright);
      opacity: 0.7;
    }

    @keyframes navIn {
      from { opacity: 0; transform: translateY(-12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes islandIn {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 820px) {
      .nav-toggle {
        display: inline-flex;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.55rem);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.85rem;
        background: var(--island);
        border-radius: 1.5rem;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
      }

      .nav-pill.is-open .nav-links {
        display: flex;
      }

      .main-island {
        border-radius: 1.75rem;
      }
    }