:root{ --cyan:#14D9FF; --ocean:#1F7BFF; }
html,body{ background:#050B14; overflow-x:hidden; width:100%; }
body{ font-family:'Inter',sans-serif; color:#E7EEF8; -webkit-font-smoothing:antialiased; }
::selection{ background:rgba(20,217,255,.28); }

/* Tailwind Preflight defaults every border to light gray. Force dark. */
*, ::before, ::after{ border-color:rgba(20,60,110,.22); }
.divider-y{ border-top:1px solid #060D18; border-bottom:1px solid #060D18; }
.divider-t{ border-top:1px solid #060D18; }

/* ---------- logo ---------- */
.logo-mark{
  mix-blend-mode:screen;              /* knocks the black plate out over dark surfaces */
  filter:drop-shadow(0 0 16px rgba(20,217,255,.35));
}
.logo-full{                           /* already has a real alpha channel - no blend needed */
  filter:drop-shadow(0 0 16px rgba(20,217,255,.35));
}

/* ---------- surfaces ---------- */
.glass{
  background:linear-gradient(160deg, rgba(16,27,45,.92) 0%, rgba(8,20,35,.82) 100%);
  border:1px solid rgba(31,123,255,.18);
  backdrop-filter:blur(14px);
}
.glass:hover{ border-color:rgba(20,217,255,.42); }
.lift{ transition:transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s; }
.lift:hover{ transform:translateY(-8px); box-shadow:0 24px 60px -22px rgba(20,217,255,.35); }

.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(31,123,255,.22),transparent); }

/* ---------- hero background blend ---------- */
.hero-bg-blend{
  background-color:#050B14;
  background-image:
    /* 1. vertical fade - melts the photo into the page top and bottom */
    linear-gradient(180deg, rgba(5,11,20,.62) 0%, rgba(5,11,20,.12) 30%, rgba(5,11,20,.88) 86%, #050B14 100%),
    /* 2. left scrim - keeps the headline readable over the busy side of the shot */
    linear-gradient(100deg, rgba(5,11,20,.93) 0%, rgba(5,11,20,.72) 36%, rgba(5,11,20,.28) 68%, rgba(5,11,20,.12) 100%),
    /* 3. brand tint - multiplied into the photo so it reads ocean-blue, not grey */
    linear-gradient(150deg, rgba(31,123,255,.55) 0%, rgba(20,217,255,.28) 52%, rgba(8,20,35,.7) 100%),
    /* 4. the photo */
    url('../images/hero_bg.webp');
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  background-blend-mode:normal, normal, multiply, normal;
}
@media (max-width:768px){
  /* tighter crop + a heavier scrim so the stacked mobile text stays legible */
  .hero-bg-blend{
    background-position:62% 16%;
    background-image:
      linear-gradient(180deg, rgba(5,11,20,.7) 0%, rgba(5,11,20,.3) 26%, rgba(5,11,20,.92) 84%, #050B14 100%),
      linear-gradient(100deg, rgba(5,11,20,.9) 0%, rgba(5,11,20,.78) 55%, rgba(5,11,20,.6) 100%),
      linear-gradient(150deg, rgba(31,123,255,.55) 0%, rgba(20,217,255,.28) 52%, rgba(8,20,35,.7) 100%),
      url('../images/hero_bg.webp');
  }
}
.hero-bg-fade{
  background:radial-gradient(90% 70% at 50% 16%, rgba(20,217,255,.14) 0%, rgba(5,11,20,0) 45%, rgba(5,11,20,.6) 100%);
}

/* ---------- section gradient ---------- */
.section-grad{
  background:
    /* ocean glow bleeding down from the section start */
    radial-gradient(115% 75% at 50% 0%, rgba(31,123,255,.16) 0%, rgba(31,123,255,0) 58%),
    /* cyan lift in the lower right so the block is not flat */
    radial-gradient(75% 65% at 88% 100%, rgba(20,217,255,.12) 0%, rgba(20,217,255,0) 62%),
    /* base ramp - lighter through the middle, back to page ink at both edges */
    linear-gradient(180deg, #050B14 0%, #091A2E 46%, #061020 78%, #050B14 100%);
}
.section-grad::before,
.section-grad::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(31,123,255,.28),transparent);
}
.section-grad::before{ top:0; }
.section-grad::after{ bottom:0; }

/* ---------- text ---------- */
.grad-text{
  background:linear-gradient(100deg,#14D9FF 0%, #6FE9FF 40%, #1F7BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{ letter-spacing:.24em; text-transform:uppercase; font-size:11px; font-weight:600; color:#14D9FF; }
.eyebrow::before{ content:""; display:inline-block; width:26px; height:1px; background:#14D9FF; vertical-align:middle; margin-right:12px; opacity:.8; }

/* ---------- buttons ---------- */
.btn{ border-radius:14px; font-weight:600; transition:transform .3s ease, box-shadow .3s ease, background .3s ease; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary{
  background:linear-gradient(120deg,#14D9FF,#1F7BFF);
  color:#03121D;
  box-shadow:0 10px 30px -10px rgba(20,217,255,.65);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(20,217,255,.8); }
.btn-ghost{ border:1px solid rgba(31,123,255,.35); color:#E7EEF8; background:rgba(16,27,45,.5); }
.btn-ghost:hover{ border-color:#14D9FF; transform:translateY(-2px); box-shadow:0 12px 34px -16px rgba(20,217,255,.6); }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid #14D9FF; outline-offset:3px; border-radius:10px; }

/* ---------- app store buttons ---------- */
.store-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:14px;
  background:linear-gradient(160deg, rgba(16,27,45,.95), rgba(8,20,35,.9));
  border:1px solid rgba(31,123,255,.28);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.store-btn:hover{ transform:translateY(-2px); border-color:#14D9FF; box-shadow:0 16px 40px -18px rgba(20,217,255,.7); }
.store-btn svg{ width:20px; height:20px; color:#14D9FF; flex:none; }
.store-btn .top{ display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#8FA3BF; line-height:1.2; }
.store-btn .name{ display:block; font-family:'Sora',sans-serif; font-weight:700; font-size:14px; line-height:1.25; }

/* ---------- footer ---------- */
.footer-top{ position:relative; }
.footer-top::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(31,123,255,.35) 18%,
    rgba(20,217,255,.85) 50%,
    rgba(31,123,255,.35) 82%,
    transparent 100%);
}
/* soft cyan bloom sitting on the seam */
.footer-top::after{
  content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:min(760px,80%); height:120px; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(20,217,255,.16) 0%, rgba(20,217,255,0) 70%);
}
.f-link{
  position:relative; display:inline-block; color:#8FA3BF; font-size:14px; line-height:1.4;
  transition:color .25s ease;
}
.f-link::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:1px;
  background:#14D9FF; transform:translateX(-50%); transition:width .3s ease;
}
.f-link:hover{ color:#14D9FF; }
.f-link:hover::after{ width:100%; }
.f-social{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none;
  color:#C7D6E8;
  background:rgba(16,27,45,.6); border:1px solid rgba(31,123,255,.22);
  transition:color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.f-social svg{ width:20px; height:20px; display:block; }
.f-social:hover{
  color:#14D9FF; border-color:#14D9FF; transform:translateY(-3px);
  background:rgba(20,217,255,.08); box-shadow:0 14px 32px -16px rgba(20,217,255,.85);
}
.f-social:focus-visible{
  outline:none; color:#14D9FF; border-color:#14D9FF;
  box-shadow:0 0 0 3px rgba(20,217,255,.28);
}

/* ---------- glows ---------- */
.glow-orb{ position:absolute; border-radius:9999px; filter:blur(90px); pointer-events:none; }
.pulse-glow{ animation:pulseGlow 5s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.85; transform:scale(1.06);} }

.float{ animation:float 7s ease-in-out infinite; }
.float-slow{ animation:float 9s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

.live-dot{ animation:blink 1.6s steps(1,end) infinite; }
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- hero device ---------- */
.hero-device{
  position:relative;
  border-radius:38px;
  background:linear-gradient(165deg,#0E1B2C,#060E19);
  border:1px solid rgba(31,123,255,.34);
  box-shadow:0 40px 120px -40px rgba(20,217,255,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-notch{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:14px;
  width:98px;
  height:18px;
  border-radius:9999px;
  background:rgba(5,11,20,.88);
  z-index:10;
}
.hero-screen{
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(20,217,255,.2);
}
.logo-plate{
  width:132px;
  height:132px;
  border-radius:9999px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 54px -26px rgba(0,0,0,.95);
}
.rail{ background:linear-gradient(90deg,#14D9FF,#1F7BFF); }

/* ---------- destination art (no external images) ---------- */
.dest{ position:relative; overflow:hidden; border-radius:20px; }
.dest .art{ position:absolute; inset:0; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.dest:hover .art{ transform:scale(1.08); }
.dest .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,11,20,.05) 30%, rgba(5,11,20,.92) 100%); }

/* ---------- faq ---------- */
.faq-body{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.7,.3,1), opacity .35s ease; opacity:0; }
.faq.open .faq-body{ max-height:260px; opacity:1; }
.faq.open{ border-color:rgba(20,217,255,.45); box-shadow:0 0 0 1px rgba(20,217,255,.12), 0 22px 50px -30px rgba(20,217,255,.55); }
.faq.open .chev{ transform:rotate(45deg); }
.chev{ transition:transform .35s ease; }

/* ---------- carousel ---------- */
.track{ display:flex; transition:transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}