/* ===== Wizz Air — WOW Demo ===== */
:root{
  --navy:#1a1440;
  --navy-deep:#0d0a26;
  --magenta:#D20E8C;
  --indigo:#2E3192;
  --sunset:#ff6ea8;
  --paper:#f4f1fb;
  --ink:#12102a;
  --header-bg: rgba(13,10,38,0);
  --header-shadow: none;
  --section-bg: var(--navy-deep);
  --section-fg: #ffffff;
  transition: none;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--navy-deep);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:'Unbounded', sans-serif; font-weight:800; line-height:1.05;}
em{font-style:normal; color:var(--magenta);}

::selection{background:var(--magenta); color:#fff;}

/* ===== Scroll progress ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--magenta),var(--sunset));
  z-index:9999; will-change:width;
}

/* ===== Custom cursor (desktop only) ===== */
.cursor{
  position:fixed; top:0; left:0; width:22px; height:22px;
  border:2px solid var(--magenta); border-radius:50%;
  pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
  transition:width .2s,height .2s,border-color .2s,background .2s,opacity .3s;
  display:none; mix-blend-mode:difference; opacity:0;
}
@media (pointer:fine){
  .cursor{ display:block; }
}
.cursor.is-hover{ width:44px; height:44px; background:var(--magenta); border-color:transparent; }

/* ===== Header ===== */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:var(--header-bg);
  box-shadow:var(--header-shadow);
  backdrop-filter:blur(0px);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.header.is-scrolled{
  --header-bg: rgba(13,10,38,0.85);
  --header-shadow: 0 8px 30px rgba(0,0,0,.35);
  padding:14px 5vw;
  backdrop-filter:blur(10px);
}
.header__logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.02em;
}
.header__logo img{ width:32px; height:32px; border-radius:8px; }
.header__logo em{ color:var(--magenta); }
.header__nav{ display:flex; gap:32px; }
.header__nav a{ font-size:.9rem; font-weight:600; opacity:.85; transition:opacity .2s; }
.header__nav a:hover{ opacity:1; }
@media (max-width:760px){ .header__nav{ display:none; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:100px; font-weight:700; font-size:.92rem;
  cursor:pointer; border:none; white-space:nowrap;
}
.btn--header{ background:var(--magenta); color:#fff; padding:11px 22px; font-size:.85rem; }
.btn--primary{ background:var(--magenta); color:#fff; box-shadow:0 10px 40px rgba(210,14,140,.45); }
.btn--finale{ background:linear-gradient(135deg,var(--magenta),var(--sunset)); color:#fff; font-size:1.1rem; padding:22px 48px; box-shadow:0 20px 60px rgba(210,14,140,.5); }
.magnetic{ transition:transform .15s ease-out; }

/* ===== Hero ===== */
.hero-wrap{ height:320vh; position:relative; }
.hero-stage{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep);
}
.hero-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0d0a26 0%, #1a1440 40%, #2E3192 75%, #D20E8C 130%);
  z-index:0;
}
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:.15;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 40%, black, transparent 70%);
}
.hero-content{
  position:relative; z-index:3; text-align:center; padding:0 5vw; max-width:900px;
}
.hero-eyebrow{
  text-transform:uppercase; letter-spacing:.25em; font-size:.75rem; font-weight:700;
  color:var(--sunset); margin-bottom:18px;
}
.hero-title{
  font-size:clamp(2.6rem, 8vw, 6.5rem); color:#fff; margin-bottom:22px;
}
.hero-title .split-line{ display:block; }
.hero-sub{
  font-size:clamp(1rem,2vw,1.25rem); color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 34px;
  font-weight:500;
}
.hero-plane{
  position:absolute; z-index:2; width:min(52vw, 640px);
  top:72%; left:50%;
  will-change:transform, opacity;
}
.hero-plane img{ width:100%; border-radius:16px; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.hero-plane.img-fallback{
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--indigo),var(--magenta)); border-radius:16px;
}
.scroll-hint{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.7;
}
.scroll-hint span{
  width:2px; height:36px; background:linear-gradient(180deg,#fff,transparent);
  animation:scrollhint 1.6s infinite ease-in-out;
}
.scroll-hint p{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; }
@keyframes scrollhint{ 0%{transform:translateY(0);opacity:1;} 100%{transform:translateY(20px);opacity:0;} }

/* ===== Marquee ===== */
.marquee{
  background:var(--magenta); overflow:hidden; padding:16px 0;
  border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15);
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 22s linear infinite;
}
.marquee__track span{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.4rem; white-space:nowrap; padding-right:8px;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== Story / benefits ===== */
.story{
  position:relative; padding:14vh 6vw 18vh; overflow:hidden;
  background:var(--navy-deep);
}
.story__parallax-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform;
}
.blob--1{ width:420px; height:420px; background:var(--magenta); top:-100px; right:-100px; }
.blob--2{ width:320px; height:320px; background:var(--indigo); bottom:-60px; left:-60px; }
.story__head{ position:relative; z-index:1; text-align:center; max-width:700px; margin:0 auto 8vh; }
.story__head h2{ font-size:clamp(2rem,5vw,3.4rem); margin-bottom:16px; }
.story__head p{ color:rgba(255,255,255,.7); font-size:1.1rem; }
.story__cards{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto;
}
.story-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:36px 28px; backdrop-filter:blur(6px);
  will-change:transform;
}
.story-card__num{ font-family:'Unbounded',sans-serif; font-size:.85rem; color:var(--sunset); font-weight:700; }
.story-card h3{ font-size:1.3rem; margin:14px 0 10px; }
.story-card p{ color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.5; }
@media (max-width:860px){ .story__cards{ grid-template-columns:1fr; } }

/* ===== Showcase (pinned scrub) ===== */
.showcase-wrap{ height:320vh; position:relative; background:var(--navy-deep); }
.showcase-stage{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; text-align:center; padding:0 5vw;
}
.showcase-label{
  text-transform:uppercase; letter-spacing:.25em; font-size:.75rem; font-weight:700; color:var(--sunset); margin-bottom:18px;
}
.showcase-title{ font-size:clamp(2.2rem,6vw,4.5rem); position:relative; z-index:2; }
.showcase-title__line{ display:block; will-change:transform,opacity; }
.showcase-visual{
  position:absolute; z-index:1; width:min(80vw,760px); border-radius:24px; overflow:hidden;
  will-change:transform,opacity,clip-path;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
.showcase-visual img{ width:100%; }
.showcase-visual.img-fallback{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--indigo),var(--magenta)); }

/* ===== Horizontal gallery ===== */
.gallery-wrap{ padding-top:14vh; background:var(--navy-deep); overflow:hidden; }
.gallery-head{ text-align:center; margin-bottom:6vh; padding:0 5vw; }
.gallery-head h2{ font-size:clamp(2rem,5vw,3.2rem); }
.gallery-track{
  display:flex; gap:24px; width:max-content; padding:0 6vw 14vh; will-change:transform;
}
.gallery-card{
  width:min(78vw,360px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:22px; padding:38px 30px; flex-shrink:0;
  border-top:4px solid var(--gc,var(--magenta));
}
.gallery-card__tag{
  display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; font-weight:700;
  color:var(--gc,var(--magenta)); margin-bottom:16px;
}
.gallery-card h3{ font-size:1.6rem; margin-bottom:12px; }
.gallery-card p{ color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.5; }

/* ===== Proof / count up ===== */
.proof{ padding:16vh 6vw; text-align:center; background:var(--navy-deep); }
.proof h2{ font-size:clamp(2rem,5vw,3.2rem); margin-bottom:8vh; }
.proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.proof-stat__num{
  display:block; font-family:'Unbounded',sans-serif; font-weight:900; font-size:clamp(2.2rem,6vw,3.6rem);
  background:linear-gradient(135deg,#fff,var(--sunset)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proof-stat p{ color:rgba(255,255,255,.6); font-size:.9rem; margin-top:8px; }
@media (max-width:760px){ .proof__grid{ grid-template-columns:repeat(2,1fr); gap:40px 20px; } }

/* ===== Finale ===== */
.finale{
  position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:10vh 5vw;
  background:radial-gradient(ellipse at 50% 30%, var(--indigo) 0%, var(--navy-deep) 70%);
}
.finale__glow{
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:var(--magenta); filter:blur(120px); opacity:.4; z-index:0; will-change:transform;
}
.finale__eyebrow{ position:relative; z-index:1; text-transform:uppercase; letter-spacing:.25em; font-size:.8rem; font-weight:700; color:var(--sunset); margin-bottom:20px; }
.finale__title{ position:relative; z-index:1; font-size:clamp(2.4rem,7vw,5rem); margin-bottom:40px; }
.finale .btn--finale{ position:relative; z-index:1; }

/* ===== Footer ===== */
.footer{
  padding:6vh 6vw 4vh; text-align:center; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.08);
}
.footer__brand{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.2rem; margin-bottom:18px; }
.footer__brand em{ color:var(--magenta); }
.footer__links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.footer__links a{ font-size:.85rem; opacity:.7; }
.footer__copy{ font-size:.75rem; opacity:.4; }

/* ===== Split text reveal ===== */
.split-text .word, .split-line .char{ display:inline-block; opacity:0; transform:translateY(24px); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.split-text.in-view .word{ opacity:1; transform:translateY(0); }
.hero-title.in-view .char, .showcase-title.in-view .char{ opacity:1; transform:translateY(0); }
.split-line{ overflow:hidden; }
.split-line .word-inner{ display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:top; }
.split-line .char{ display:inline-block; opacity:0; transform:translateY(100%); transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.hero-title.in-view .split-line .char{ opacity:1; transform:translateY(0); }

/* fade-in generic for elements using .reveal */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .hero-wrap, .showcase-wrap{ height:auto; }
  .hero-stage, .showcase-stage{ position:relative; height:auto; padding:14vh 5vw; }
  .hero-plane, .showcase-visual{ position:relative; top:auto; left:auto; transform:none !important; margin:40px auto 0; }
  .split-text .word, .split-line .char, .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .blob{ display:none; }
  * { scroll-behavior:auto !important; }
}

@media (max-width:760px){
  .hero-wrap{ height:260vh; }
  .showcase-wrap{ height:260vh; }
  .proof__grid{ gap:30px 16px; }
}