/* ─── CSS Variables ─────────────────────────── */
:root {
    --tw-sky:        #dff0fb;
    --tw-sky-mid:    #b8dcf5;
    --tw-blue:       #3a9bd5;
    --tw-blue-dark:  #1e6fa0;
    --tw-orange:     #f47b20;
    --tw-orange-lt:  #ffa44a;
    --tw-green:      #5bbf6e;
    --tw-text:       #1a3a52;
    --tw-text-mid:   #4a7a9b;
    --tw-card:       rgba(255,255,255,0.84);
  }

  /* ─── Base ──────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--tw-sky);
    color: var(--tw-text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  h1,h2,h3,.font-display {
    font-family: 'Baloo 2', cursive;
  }

  /* ─── Sky / Background ─────────────────────── */
  .bg-sky-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }


  /* ─── Clouds ────────────────────────────────── */
  .cloud {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    opacity: .6;
    animation: cloudDrift linear infinite;
  }
  .cloud::before,.cloud::after {
    content:'';
    position:absolute;
    background:#fff;
    border-radius:50%;
  }
  .cloud-1{ width:170px;height:50px;top:8%; left:-220px;animation-duration:30s; }
  .cloud-1::before{ width:72px;height:72px;top:-30px;left:22px; }
  .cloud-1::after { width:52px;height:52px;top:-18px;left:78px; }

  .cloud-2{ width:230px;height:64px;top:20%;left:-280px;animation-duration:40s;animation-delay:7s; }
  .cloud-2::before{ width:94px;height:94px;top:-42px;left:32px; }
  .cloud-2::after { width:72px;height:72px;top:-26px;left:105px; }

  .cloud-3{ width:140px;height:42px;top:5%; left:-180px;animation-duration:24s;animation-delay:14s; }
  .cloud-3::before{ width:58px;height:58px;top:-24px;left:16px; }
  .cloud-3::after { width:44px;height:44px;top:-15px;left:56px; }

  .cloud-4{ width:190px;height:54px;top:35%;left:-230px;animation-duration:36s;animation-delay:4s; }
  .cloud-4::before{ width:78px;height:78px;top:-34px;left:26px; }
  .cloud-4::after { width:58px;height:58px;top:-22px;left:84px; }

  @keyframes cloudDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 320px)); }
  }

  /* ─── Wave footer ────────────────────────────── */
  .wave-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 130px;
    pointer-events: none;
    z-index: 0;
  }
  .wave-footer svg { display:block; width:100%; height:100%; }

  /* ─── Page wrapper ───────────────────────────── */
  .page-content {
    position: relative;
    z-index: 1;
    padding-bottom: 160px;
  }

  .badge-launch {
    background: var(--tw-orange) !important;
    color: #fff !important;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    letter-spacing: .08em;
    font-size: .72rem;
    padding: .38rem 1rem;
    border-radius: 50px;
    animation: badgePulse 2.6s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(244,123,32,.4); }
    50%      { transform:scale(1.06); box-shadow:0 0 0 8px rgba(244,123,32,0); }
  }

  /* ─── Hero ───────────────────────────────────── */
  .hero-section { padding: 3rem 0 1.5rem; text-align: center; }

  .hero-title {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: var(--tw-blue-dark);
    line-height: 1.18;
  }
  .hero-title .accent { color: var(--tw-orange); }

  .hero-sub {
    color: var(--tw-text-mid);
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 1.75;
    max-width: 540px;
    margin: 0 auto;
  }

  /* ─── Rocket ─────────────────────────────────── */
  .rocket-wrap {
    animation: rocketFloat 3.2s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes rocketFloat {
    0%,100% { transform: translateY(0) rotate(-7deg); }
    50%      { transform: translateY(-18px) rotate(-7deg); }
  }
  .rocket-wrap svg { width: 90px; filter: drop-shadow(0 8px 20px rgba(58,155,213,.3)); }

  .contact-section {
    background: linear-gradient(135deg, var(--tw-blue-dark) 0%, var(--tw-blue) 100%);
    border-radius: 24px;
    padding: 2.4rem;
    color: #fff;
    box-shadow: 0 14px 48px rgba(30,111,160,.32);
    position: relative;
    overflow: hidden;
  }
  .contact-section::before {
    content:'';
    position:absolute;
    top:-80px;right:-80px;
    width:240px;height:240px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
  }
  .contact-section::after {
    content:'';
    position:absolute;
    bottom:-50px;left:-50px;
    width:180px;height:180px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
  }
  .contact-section h2 {
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
  }
  .contact-section .lead-sub {
    font-size: .88rem;
    opacity: .85;
    line-height: 1.6;
  }

  .ci-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    padding: .75rem 1rem;
    transition: background .2s;
    text-decoration: none;
    color: #fff;
  }
  .ci-item:hover { background: rgba(255,255,255,.2); color: #fff; }

  .ci-icon-box {
    width: 40px; height: 40px;
    background: var(--tw-orange);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .ci-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .2rem;
  }
  .ci-value { font-size: .87rem; font-weight: 600; }

    /* ─── Footer ─────────────────────────────────── */
    .site-footer {
        font-size: .78rem;
        color: var(--tw-text-mid);
        text-align: center;
        padding: 1rem 0 .5rem;
      }
  
      /* ─── Entrance animations ─────────────────────── */
      .fade-up {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s ease, transform .7s ease;
      }
      .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
      }


  @media (max-width: 576px) {
    .contact-section { padding: 1.6rem 1.2rem; }
    .page-content { padding-bottom: 120px; }
    .wave-footer { height: 100px; }
  }