:root {
      --navy: #06263a;
      --navy-2: #0a3f56;
      --aqua: #38d7d0;
      --sand: #fff4d9;
      --white: #ffffff;
      --text: #102b36;
      --muted: #5e7580;
      --shadow: 0 18px 50px rgba(3, 40, 57, 0.16);
      --radius: 26px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: #f6fbfc;
      line-height: 1.55;
    }

    a { color: inherit; text-decoration: none; }

    .container {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }

    .hero {
      min-height: 100vh;
      color: var(--white);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 75% 20%, rgba(56, 215, 208, .38), transparent 30%),
        linear-gradient(135deg, rgba(6, 38, 58, .98), rgba(10, 63, 86, .92));
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      border: 80px solid rgba(255,255,255,.06);
    }

    .hero::before { right: -180px; top: -170px; }
    .hero::after { left: -250px; bottom: -360px; }

    nav {
      position: relative;
      z-index: 2;
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: .4px;
      font-size: 20px;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--navy);
      font-size: 24px;
    }

    .logo-mark img {
        border-radius: 14px;
        width: 100px;
    }

    .nav-link {
      border: 1px solid rgba(255,255,255,.25);
      padding: 10px 16px;
      border-radius: 999px;
      font-weight: 700;
      transition: .2s ease;
    }

    .nav-link:hover {
      background: rgba(255,255,255,.1);
      transform: translateY(-2px);
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 54px;
      align-items: center;
      padding: 72px 0 110px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.16);
      color: #dffefd;
      font-weight: 800;
      font-size: 14px;
      margin-bottom: 20px;
    }

    h1 {
      font-size: clamp(44px, 7vw, 82px);
      line-height: .98;
      margin: 0 0 24px;
      letter-spacing: -3px;
      max-width: 760px;
    }

    .hero p {
      font-size: 20px;
      color: rgba(255,255,255,.82);
      max-width: 650px;
      margin: 0 0 32px;
    }

    .price-row {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .price {
      font-size: 42px;
      font-weight: 950;
      color: var(--sand);
      letter-spacing: -1.5px;
    }

    .price span {
      font-size: 16px;
      font-weight: 700;
      color: rgba(255,255,255,.72);
      letter-spacing: 0;
    }

    .cta-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 22px;
      border-radius: 16px;
      font-weight: 900;
      transition: .2s ease;
      border: 0;
      cursor: pointer;
    }

    .btn:hover { transform: translateY(-3px); }

    .btn-primary {
      background: var(--aqua);
      color: var(--navy);
      box-shadow: 0 14px 35px rgba(56, 215, 208, .26);
    }

    .btn-ghost {
      color: var(--white);
      border: 1px solid rgba(255,255,255,.26);
      background: rgba(255,255,255,.08);
    }

    .board-card {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(12px);
      border-radius: 34px;
      padding: 28px;
      box-shadow: 0 30px 80px rgba(0,0,0,.22);
      transform: rotate(2deg);
    }

    .board-visual {
      min-height: 440px;
      border-radius: 26px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(to bottom, #81f2eb 0 45%, #19a9c1 45% 67%, #f7dca7 67% 100%);
    }

    .sun {
      position: absolute;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: #fff1a8;
      top: 42px;
      right: 48px;
      box-shadow: 0 0 50px rgba(255, 241, 168, .75);
    }

    .board {
      width: 115px;
      height: 310px;
      border-radius: 60% 60% 48% 48%;
      background:
        linear-gradient(90deg, transparent 46%, rgba(6,38,58,.9) 46% 54%, transparent 54%),
        linear-gradient(160deg, #fff 0 12%, var(--aqua) 12% 70%, #ffc95c 70% 100%);
      border: 7px solid rgba(255,255,255,.85);
      box-shadow: 0 22px 35px rgba(0,0,0,.24);
      transform: rotate(-14deg);
      position: relative;
      z-index: 1;
    }

    .paddle {
      position: absolute;
      width: 14px;
      height: 330px;
      border-radius: 10px;
      background: var(--navy);
      transform: rotate(15deg) translateX(100px);
      box-shadow: 0 15px 25px rgba(0,0,0,.22);
    }

    .paddle::after {
      content: "";
      position: absolute;
      bottom: -30px;
      left: -13px;
      width: 40px;
      height: 68px;
      border-radius: 50% 50% 60% 60%;
      background: var(--navy);
    }

    section { padding: 50px 0; }

    .section-head {
      max-width: 720px;
      margin-bottom: 42px;
    }

    .section-head h2 {
      font-size: clamp(34px, 5vw, 54px);
      line-height: 1.05;
      letter-spacing: -2px;
      margin: 0 0 14px;
    }

    .section-head p {
      color: var(--muted);
      font-size: 18px;
      margin: 0;
    }

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

    .feature {
      background: var(--white);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .feature-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: #e8fbfa;
      font-size: 26px;
      margin-bottom: 20px;
    }

    .feature h3 { margin: 0 0 10px; font-size: 22px; }
    .feature p { margin: 0; color: var(--muted); }

    .contact-wrap {
      border-radius: 34px;
      padding: 52px;
      color: var(--white);
      background:
        radial-gradient(circle at 85% 15%, rgba(56,215,208,.35), transparent 25%),
        linear-gradient(135deg, var(--navy), var(--navy-2));
      box-shadow: 0 30px 80px rgba(3, 40, 57, .22);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
    }

    .contact-wrap h2 {
      margin: 0 0 14px;
      font-size: clamp(34px, 5vw, 52px);
      line-height: 1.05;
      letter-spacing: -2px;
    }

    .contact-wrap p {
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: 18px;
    }

    .contact-list {
      display: grid;
      gap: 12px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.14);
      padding: 15px 18px;
      border-radius: 18px;
      transition: .2s ease;
    }

    .contact-item:hover {
      transform: translateX(4px);
      background: rgba(255,255,255,.15);
    }

    .contact-item strong { display: block; }
    .contact-item small { color: rgba(255,255,255,.68); }

    footer {
      padding: 28px 0 38px;
      color: var(--muted);
      text-align: center;
      font-size: 14px;
    }

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

      .hero-grid {
        padding-top: 40px;
      }
      header.hero {
        min-height: 0;
      }

      .board-card {
        display: none;
      }

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

    @media (max-width: 560px) {
      .container { width: min(100% - 24px, 1120px); }
      nav { padding: 18px 0; }
      .nav-link { display: none; }
      .hero-grid { padding-bottom: 72px; }
      h1 { letter-spacing: -2px; }
      .hero p { font-size: 17px; }
      .price { font-size: 34px; }
      .btn { width: 100%; }
      .board-visual { min-height: 360px; }
      section { padding: 30px 0; }
      .contact-wrap { padding: 30px 22px; }
    }




.board-card {
    animation: float 5s ease-in-out infinite;
    transform-origin: center bottom;
}

.board {
    animation: boardFloat 5s ease-in-out infinite;
}

.sun {
    animation: sunPulse 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(2deg);
    }
    25% {
        transform: translateY(-8px) rotate(1deg);
    }
    50% {
        transform: translateY(4px) rotate(3deg);
    }
    75% {
        transform: translateY(-5px) rotate(2deg);
    }
}

@keyframes boardFloat {
    0%, 100% {
        transform: rotate(-14deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}

@keyframes sunPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: .85;
    }
}

.board-visual::after {
    content: "";
    position: absolute;
    left: -20%;
    bottom: 25%;
    width: 140%;
    height: 12px;
    background: rgba(255,255,255,.18);
    border-radius: 100%;
    filter: blur(4px);
    animation: wave 4s ease-in-out infinite;
}

@keyframes wave {
    0%,100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-30px);
    }
}