:root{
  --orange:#FFA500;
  --brand: var(--orange);
  --turquoise:#35F8F0;
  --bg-dark:#0b0f13;
  --text:#e8f1f2;
  --muted:#9db0b3;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:#000;
  overflow-y: auto;
  scroll-behavior:smooth;
}

.snap-container{
  height:100%;
  scroll-snap-type:y mandatory;
  overflow-y:auto;
}

.panel{
  position:relative;
  height:100vh;
  width:100%;
  scroll-snap-align:start;
  display:grid;
  place-items:center;
  background: #000 center/cover no-repeat;
  background-image: var(--bg);
  isolation:isolate;
}

.panel::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));
  z-index:0;
}

/* Global flying layer */
.fly-layer-global{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events:none;
  overflow:hidden;
}

/* Hero */
.hero-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transform: translateY(-6vh);
  text-align:center;
  animation: fadeInUp 900ms ease both;
  width:100%;
}

@keyframes fadeInUp{
  from{opacity:0; transform: translateY(10vh);}
  to{opacity:1; transform: translateY(-6vh);}
}

@keyframes glowPulse{
  0% { text-shadow:
    0 0 16px rgba(53,248,240,0.95),
    0 0 48px rgba(53,248,240,0.70),
    0 0 120px rgba(53,248,240,0.45); }
  50% { text-shadow:
    0 0 24px rgba(53,248,240,1),
    0 0 64px rgba(53,248,240,0.85),
    0 0 160px rgba(53,248,240,0.55); }
  100% { text-shadow:
    0 0 16px rgba(53,248,240,0.95),
    0 0 48px rgba(53,248,240,0.70),
    0 0 120px rgba(53,248,240,0.45); }
}
.title-glow{
  font-weight:800;
  font-size: clamp(40px, 8vw, 120px);
  letter-spacing:0.02em;
  margin:0;
  color: var(--turquoise);
  animation: glowPulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(53,248,240,0.35));
}

.subtitle{
  margin:0;
  font-weight:400;
  font-size: clamp(14px, 2.2vw, 24px);
  color: var(--text);
  opacity:0.95;
  max-width: min(90vw, 1000px);
}

.more{ margin-left:auto; margin-right:auto;
  margin-top: 18vh;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  font-size: clamp(14px, 2.1vw, 20px);
  color:#041c1b;
  background: linear-gradient(180deg, rgba(53,248,240,1), rgba(29,170,164,1));
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 0 22px rgba(53,248,240,0.55);
  position: relative;
  margin-left:auto; margin-right:auto;
}
.more:hover{ box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 28px rgba(53,248,240,0.7); filter: brightness(1.03); }
.arrow{width:28px; height:auto; opacity:0.9; color:#041c1b;}

/* Section 2 */
.about-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:clamp(12px, 2vw, 24px);
  width:min(1200px, 92vw);
  align-items:center;
  padding: min(5vh, 40px);
}

.cell{display:flex; align-items:center; justify-content:center}

.rounded-img{
  width: clamp(220px, 28vw, 420px);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.text-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  padding: clamp(14px, 3vw, 28px);
  border-radius:18px;
  line-height:1.6;
  font-size: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.swing-img{
  width: clamp(220px, 28vw, 420px);
  border-radius:16px;
  animation: swing 4s ease-in-out infinite;
  transform-origin: 50% 48%;
  cursor: pointer;
  transition: filter .2s ease;
}
.swing-img:hover{ filter:brightness(1.05) }

@keyframes swing{
  0%{ transform: translateX(-8px) rotate(-1.5deg) }
  50%{ transform: translateX(8px) rotate(1.5deg) }
  100%{ transform: translateX(-8px) rotate(-1.5deg) }
}

.click-anim{ animation: clickPop .45s ease both; }
@keyframes clickPop{
  0%{ transform: scale(1) }
  40%{ transform: scale(0.85) }
  100%{ transform: scale(1) }
}

/* Section 3 */
.final-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  width:min(1200px, 92vw);
  align-items:center;
}

.btn{
  display:inline-block;
  padding:14px 22px;
  border-radius:9999px;
  border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  margin:6px 0;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.btn:hover{ transform:none } /* no move */

.tall-img{
  height: min(70vh, 900px);
  width:auto;
  border-radius:20px;
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.ca-card{ font-size: clamp(16px, 2vw, 22px); }

/* Flies */
.fly{
  position:absolute;
  top:0; left:0;
  width: var(--sz);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3));
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
}

/* Responsive */
@media (max-width: 950px){
  .about-grid, .final-grid{ grid-template-columns: 1fr; gap:18px; }
  .hero-inner{ transform:none }
  .more{ margin-left:auto; margin-right:auto; margin-top: 8vh }
}

/* Scrollbar */
.snap-container::-webkit-scrollbar{ width:10px }
.snap-container::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--turquoise), #156a65);
  border-radius:10px;
}

.tall-video{
  height: min(70vh, 900px);
  width:auto;
  max-width: 92vw;
  display:block;
  border-radius:20px;
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  object-fit: cover;
}


/* glow turquoise */
.glow-tq{
  background: var(--turquoise) !important;
  color: #000 !important;
  border: 0 !important;
  text-shadow: none !important;
  box-shadow:
    0 0 18px rgba(53,248,240,0.85),
    0 0 44px rgba(53,248,240,0.55),
    0 0 90px rgba(53,248,240,0.35),
    0 12px 28px rgba(0,0,0,0.45) !important;
}
.glow-tq:hover{ transform:none; filter:brightness(1.02); }

/* CA card variant */
.ca-card.glow-tq{
  display:inline-block;
  padding:14px 20px;
  border-radius: 14px;
}
.ca-card.glow-tq strong, .ca-card.glow-tq span{ color:#000 !important; }


/* === Orange theme overrides === */
.btn, .more, .glow-tq {
  background: linear-gradient(180deg, rgba(255,165,0,1), rgba(178,95,0,1)) !important;
  color:#0b0b0b !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 22px rgba(255,165,0,0.55) !important;
  border: none !important;
}
.btn:hover, .more:hover, .glow-tq:hover { filter: brightness(1.02); transform: none; }

.title-glow{
  color: var(--brand) !important;
  animation: glowPulseOrange 2.4s ease-in-out infinite !important;
}
@keyframes glowPulseOrange{
  0% { text-shadow: 0 0 16px rgba(255,165,0,0.95), 0 0 48px rgba(255,165,0,0.70), 0 0 120px rgba(255,165,0,0.45); }
  50% { text-shadow: 0 0 24px rgba(255,165,0,1), 0 0 64px rgba(255,165,0,0.85), 0 0 160px rgba(255,165,0,0.55); }
  100% { text-shadow: 0 0 16px rgba(255,165,0,0.95), 0 0 48px rgba(255,165,0,0.70), 0 0 120px rgba(255,165,0,0.45); }
}

/* Scrollbar orange */
.snap-container::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--orange), #b25f00);
  border-radius: 10px;
}
.snap-container{ scrollbar-color: var(--orange) #111; scrollbar-width: thin; }

/* Robust Ticker (spawn off-screen, no overlap on ultra-wide) */
:root{ --ticker-speed: 18s; }
.ticker-wrap{ position:absolute; left:0; right:0; bottom:0; height:48px; overflow:hidden; z-index:3;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.ticker{ position:relative; width:100%; height:100%; opacity:0; }
.ticker.play{ opacity:1; }

.ticker__lane{
  position:absolute; top:0; white-space:nowrap; display:inline-block; line-height:48px;
  will-change: transform;
  transform: translateX(0);
}
.ticker__lane--b{ transform: translateX(100%); }

.ticker.play .ticker__lane{ animation: ticker-move2 var(--ticker-speed) linear infinite; }

@keyframes ticker-move2{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* === Continuous Ticker (dup-content, seamless, responsive) === */
:root{ --ticker-speed: 18s; }

.ticker-wrap{
  position:absolute; left:0; right:0; bottom:0; height:48px; overflow:hidden; z-index:3;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
}

.ticker{ position:relative; width:100%; height:100%; }

.ticker__track{
  position:absolute; top:0; left:0; height:48px;
  display:flex; align-items:center; gap:2rem;
  width:max-content;
  will-change: transform;
  animation: ticker-loop var(--ticker-speed) linear infinite;
}

.ticker__content{ display:inline-flex; align-items:center; gap:2rem; white-space:nowrap; }
.ticker__item{ display:inline-block; line-height:48px; font-weight:800; letter-spacing:1px;
  color:#FFA500; text-shadow:0 0 8px rgba(255,165,0,0.7);
}

@keyframes ticker-loop{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* move by half of the doubled track = one full content width */
}


/* === Seamless Measured Ticker === */
.ticker__track{
  --segment: 1000px; /* fallback */
  --dur: 18s;        /* fallback */
  animation: ticker-measured var(--dur) linear infinite;
}
@keyframes ticker-measured{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--segment))); }
}

/* TAP note (same color & glow as orange text) */
.right-clickable{ position: relative; } /* to anchor the note inside the card */
.panel-final .final-right{ position: relative; } /* to anchor the note in right panel of section 3 */

.tap-note{
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--orange);
  text-shadow:
    0 0 6px rgba(255,140,0,.65),
    0 0 18px rgba(255,140,0,.35),
    0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}
.panel-final .final-right .tap-note{ bottom: -6px; }