/* ==========================================================
   5 Liftoff — Landing Page
   ========================================================== */

:root {
  --black: #000;
  --white: #fff;
  --mvmnt: #08033c;
  --plutus: #0c163e;
  --sky-top: #0b1a3e;
  --sky-mid: #1e3a6e;
  --sky-low: #5a7faf;
  --sky-horizon: #c4a87c;
  --sky-glow: #e8c87a;
  --font: 'Inter', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 72px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: var(--font);
  color: var(--white);
  background: var(--sky-top);
  overflow-x: hidden;
  line-height: 1.6;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }

/* ── Full-page Grainient background ────────────────── */
.grainient-container {
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; overflow:hidden;
}

/* ── Container ──────────────────────────────────────── */
.container { max-width:1120px; margin:0 auto; padding:120px 40px; }

/* ── Flying Logo (hero → header) ───────────────────── */
.flying-logo {
  position:fixed; z-index:1100;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  will-change:transform;
  color:var(--white);
  filter: drop-shadow(0 4px 30px rgba(0,0,0,.35));
}
.flying-logo svg {
  height:80px; width:auto;
  display:block;
}

/* Spacer inside hero to keep tagline positioned below where the logo sits */
.hero-logo-spacer {
  height:80px;
  margin-bottom:20px;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  background:transparent;
  transition: background .4s, box-shadow .4s;
}
.site-header.is-scrolled {
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  height:100%; display:flex; align-items:center; justify-content:flex-end;
}

.header-nav {
  display:flex; gap:28px;
  opacity:0; transform:translateY(-8px);
  transition: opacity .35s .05s, transform .35s .05s;
  pointer-events:none;
}
.is-scrolled .header-nav { opacity:1; transform:none; pointer-events:all; }
.header-nav a {
  font-size:.82rem; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
  transition: color .25s;
}
.header-nav a:hover { color:var(--white); }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  position:relative; height:100vh; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  z-index:1;
}

/* Hero Content */
.hero-content {
  position:relative; z-index:10;
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:16px;
  will-change: transform, opacity;
}
.hero-tagline {
  font-family:var(--serif); font-size:1.2rem; font-weight:300;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:10; width:24px; height:40px;
  border:2px solid rgba(255,255,255,.35); border-radius:12px;
  display:flex; justify-content:center;
}
.scroll-cue span {
  display:block; width:4px; height:8px; margin-top:6px;
  background:rgba(255,255,255,.65); border-radius:2px;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform:translateY(0); opacity:1; }
  50%     { transform:translateY(14px); opacity:.25; }
}

/* ── Section Common ─────────────────────────────────── */
.section-title {
  font-family:var(--serif);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:600; margin-bottom:14px; letter-spacing:-.01em;
}
.section-sub {
  font-size:1.05rem; font-weight:300;
  color:rgba(255,255,255,.55); margin-bottom:56px;
}

/* ── Company Sections (shared) ─────────────────────── */
.company-section { position:relative; z-index:1; }
.company-title {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600; margin-bottom:12px; letter-spacing:-.01em;
}
.company-tagline {
  font-size:1.1rem; color:rgba(255,255,255,.6);
  margin-bottom:20px; font-style:italic;
}
.company-desc {
  font-size:.95rem; color:rgba(255,255,255,.45); line-height:1.8;
}

/* ── MVMNT Hero (logo + rings) ────────────────────── */
.mvmnt-hero {
  display:flex; align-items:center; justify-content:center;
  gap:40px; padding:60px 0;
}
.rings-container {
  width:200px; height:200px; position:relative;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ring {
  position:absolute; border-radius:50%;
  border:2px solid; opacity:0;
  animation:ringPulse 3.5s ease-out infinite;
}
.ring--1 { width:40px; height:40px; border-color:rgba(120,180,255,.5); animation-delay:0s; }
.ring--2 { width:80px; height:80px; border-color:rgba(255,255,255,.25); animation-delay:.5s; }
.ring--3 { width:120px; height:120px; border-color:rgba(120,180,255,.4); animation-delay:1s; }
.ring--4 { width:160px; height:160px; border-color:rgba(255,255,255,.2); animation-delay:1.5s; }
.ring--5 { width:200px; height:200px; border-color:rgba(120,180,255,.3); animation-delay:2s; }

.rings-right .ring { animation-direction:reverse; }

@keyframes ringPulse {
  0%   { transform:scale(.4); opacity:0; }
  20%  { opacity:.7; }
  100% { transform:scale(1.4); opacity:0; }
}

.mvmnt-logo-center { flex-shrink:0; }
.mvmnt-logo-center svg { height:120px; width:auto; color:var(--white); }

/* ── MVMNT Intro ──────────────────────────────────── */
.mvmnt-intro {
  text-align:center; max-width:700px;
  margin:0 auto; padding:40px 0 60px;
}

/* ── Bento Grid ───────────────────────────────────── */
.bento-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; max-width:1000px; margin:0 auto;
}
.bento-card {
  border-radius:16px; border:1px solid rgba(255,255,255,.07);
  padding:24px; position:relative; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  background:rgba(255,255,255,.03);
  --glow-x:50%; --glow-y:50%; --glow-intensity:0;
}
.bento-card::after {
  content:''; position:absolute; inset:0; padding:6px;
  background:radial-gradient(
    250px circle at var(--glow-x) var(--glow-y),
    rgba(120,180,255,calc(var(--glow-intensity) * .6)) 0%,
    rgba(120,180,255,calc(var(--glow-intensity) * .25)) 30%,
    transparent 60%
  );
  border-radius:inherit; pointer-events:none; z-index:1;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.bento-card:hover {
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 4px 20px rgba(11,26,62,.4), 0 0 30px rgba(120,180,255,.08);
}
.bento-card--large {
  grid-column:span 2; grid-row:span 2;
}
.bento-card__label {
  display:block; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:12px;
}
.bento-card__title {
  font-size:1.1rem; font-weight:500; margin-bottom:6px;
}
.bento-card__desc {
  font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6;
}
.bento-card__watermark {
  position:absolute; bottom:-10px; right:-10px;
  width:60%; opacity:.04; pointer-events:none;
}
.bento-card__watermark svg { width:100%; height:auto; color:var(--white); }

/* ── Plutus Section ───────────────────────────────── */
.plutus-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center; min-height:500px;
}
.plutus-info { }
.plutus-logo-area { margin-bottom:30px; }
.plutus-logo-area .plutus-sym {
  height:80px; width:auto; margin-bottom:16px; color:var(--white);
}
.plutus-logo-area .plutus-txt {
  height:28px; width:auto; color:var(--white);
}

/* ── Card Swap ────────────────────────────────────── */
.card-swap-container {
  position:relative; width:100%; height:500px;
  perspective:900px; overflow:hidden;
}
.swap-card {
  position:absolute; top:50%; left:50%;
  width:380px; height:280px; border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(12,22,62,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:32px; transform-style:preserve-3d;
  will-change:transform;
  display:flex; flex-direction:column; justify-content:center;
}
.swap-card__number {
  font-size:3rem; font-weight:700;
  color:rgba(255,255,255,.08);
  position:absolute; top:20px; right:24px;
  line-height:1;
}
.swap-card__title {
  font-size:1.25rem; font-weight:600;
  margin-bottom:10px; font-family:var(--serif);
}
.swap-card__desc {
  font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.7;
}

/* ── Founder ────────────────────────────────────────── */
.founder {
  position:relative; z-index:1;
}
.founder::before {
  content:''; position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:40px; height:1px;
  background:rgba(255,255,255,.1);
}

.founder-header {
  text-align:center; max-width:700px; margin:0 auto 56px;
}
.founder-avatar {
  width:88px; height:88px; border-radius:50%; margin:0 auto 20px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.2);
}
.founder-identity { margin-bottom:20px; }
.founder-role {
  font-size:.85rem; text-transform:uppercase; letter-spacing:.14em;
  color:rgba(255,255,255,.35); margin-top:6px;
}
.founder-intro {
  font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.55);
  line-height:1.8;
}

.founder-timeline {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-bottom:40px;
}
.timeline-card {
  border-radius:16px; border:1px solid rgba(255,255,255,.07);
  padding:28px 24px; background:rgba(255,255,255,.03);
  transition:transform .3s ease, border-color .3s ease;
}
.timeline-card:hover {
  transform:translateY(-3px); border-color:rgba(255,255,255,.12);
}
.timeline-card--highlight {
  border-color:rgba(120,180,255,.15);
  background:rgba(120,180,255,.04);
}
.timeline-card--highlight:hover {
  border-color:rgba(120,180,255,.3);
}
.timeline-card__label {
  display:inline-block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.1em; color:rgba(120,180,255,.6);
  margin-bottom:12px; padding:3px 10px;
  border:1px solid rgba(120,180,255,.15); border-radius:20px;
}
.timeline-card__company {
  font-family:Arial, Helvetica, sans-serif; font-size:1.3rem; font-weight:600;
  margin-bottom:4px;
}
.timeline-card__role {
  font-size:.8rem; color:rgba(255,255,255,.4); margin-bottom:14px;
  font-style:italic;
}
.timeline-card__desc {
  font-size:.85rem; color:rgba(255,255,255,.45); line-height:1.7;
}

.founder-details {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.detail-card {
  display:flex; gap:16px; align-items:flex-start;
  border-radius:12px; border:1px solid rgba(255,255,255,.06);
  padding:22px 24px; background:rgba(255,255,255,.02);
}
.detail-card svg {
  flex-shrink:0; color:rgba(120,180,255,.5); margin-top:2px;
}
.detail-card__title {
  font-size:.9rem; font-weight:500; margin-bottom:6px;
}
.detail-card__text {
  font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.6;
  margin-bottom:4px;
}
.detail-card__text:last-child { margin-bottom:0; }

/* ── Contact ────────────────────────────────────────── */
.contact {
  position:relative; z-index:1;
  text-align:center;
}
.contact .section-sub { margin-bottom:36px; }
.btn {
  display:inline-block; padding:15px 44px;
  border:1px solid rgba(255,255,255,.22); border-radius:60px;
  font-size:.88rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--white);
  transition: background .35s, border-color .35s, transform .3s var(--ease);
}
.btn:hover {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.05);
  padding:36px 0;
}
.footer-inner {
  max-width:1120px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo svg { height:22px; width:auto; color:rgba(255,255,255,.25); }
.footer-copy { font-size:.78rem; color:rgba(255,255,255,.2); }

/* ── Reveal Animations (CSS only, toggled by JS class) ── */
.reveal {
  opacity:0; transform:translateY(36px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
  opacity:1; transform:none;
}
.reveal:nth-child(2) { transition-delay:.12s; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:900px) {
  .bento-grid { grid-template-columns:1fr 1fr; }
  .bento-card--large { grid-column:span 2; grid-row:span 1; }
  .plutus-layout { grid-template-columns:1fr; text-align:center; }
  .plutus-info { order:1; }
  .plutus-cards { order:2; }
  .plutus-logo-area { display:flex; flex-direction:column; align-items:center; }
  .founder-timeline { grid-template-columns:1fr; }
  .founder-details { grid-template-columns:1fr; }
  .container { padding:80px 24px; }
  .mvmnt-hero { gap:20px; }
  .rings-container { width:140px; height:140px; }
  .mvmnt-logo-center svg { height:80px; }
  .swap-card { width:320px; height:250px; }
}
@media (max-width:600px) {
  .flying-logo svg { height:48px; }
  .hero-logo-spacer { height:48px; }
  .hero-tagline { font-size:.95rem; }
  .header-inner { padding:0 20px; }
  .header-nav { gap:18px; }
  .header-nav a { font-size:.72rem; }
  .founder-timeline { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; gap:14px; text-align:center; }
  .container { padding:56px 18px; }
  .mvmnt-hero { flex-direction:column; gap:24px; padding:40px 0; }
  .rings-container { width:120px; height:120px; }
  .mvmnt-logo-center svg { height:60px; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-card--large { grid-column:span 1; }
  .swap-card { width:280px; height:220px; padding:24px; }
  .swap-card__title { font-size:1.1rem; }
  .swap-card__desc { font-size:.82rem; }
  .card-swap-container { height:400px; }
}

/* ── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal { opacity:1; transform:none; }
  .scroll-cue { display:none; }
}