/* BraVTiGa customer and affiliate landing pages – premium, welcoming and responsive. */
:root {
  --landing-ink: #102033;
  --landing-muted: #586b7e;
  --landing-cyan: #00c8ee;
  --landing-cyan-deep: #008db9;
  --landing-blue: #2367dd;
  --landing-red: #ec336f;
  --landing-magenta: #bd2fb6;
  --landing-violet: #7354dc;
  --landing-gold: #e6a43a;
  --landing-mint: #27c6a2;
  --landing-navy: #071827;
  --landing-navy-soft: #0c2437;
  --landing-paper: #f8fbfd;
  --landing-ice: #edf7fa;
  --landing-white: #ffffff;
  --landing-line: rgba(15, 74, 108, .14);
  --landing-shadow: 0 28px 80px rgba(17, 52, 79, .14);
  --landing-radius: 28px;
}
html { scroll-behavior: smooth; }
body[data-portal="customer"], body[data-portal="affiliate"] { background: var(--landing-paper); }
.public-site {
  min-height: 100vh;
  overflow: clip;
  color: var(--landing-ink);
  background: var(--landing-paper);
  font-family: "Segoe UI", Aptos, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.public-site * { box-sizing: border-box; }
.public-site a { text-underline-offset: 3px; }

/* Header */
.public-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(15, 71, 102, .1);
  background: rgba(250, 253, 255, .9);
  backdrop-filter: blur(20px) saturate(130%);
}
.public-nav {
  width: min(1240px, calc(100% - 40px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.public-brand { display: flex; align-items: center; gap: 12px; color: var(--landing-ink); text-decoration: none; }
.public-brand-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 173, 222, .2)); }
.public-brand strong { display: block; font-size: 17px; letter-spacing: .045em; }
.public-brand small { display: block; margin-top: 2px; color: #526778; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.public-links { display: flex; align-items: center; gap: 3px; }
.public-links a { padding: 11px 12px; border-radius: 12px; color: #4f6375; text-decoration: none; font-size: 14px; font-weight: 750; }
.public-links a:hover, .public-links a:focus-visible { color: #0a6f91; background: #e9f7fb; outline: none; }
.public-nav-actions { display: flex; align-items: center; gap: 10px; }
.language-pill { display: flex; overflow: hidden; border: 1px solid #cfe4ec; border-radius: 999px; background: #fff; }
.language-pill a { min-width: 38px; padding: 8px 10px; color: #506579; text-align: center; text-decoration: none; font-size: 12px; font-weight: 850; }
.language-pill a.active { color: #fff; background: linear-gradient(135deg, #087b9b, #2456b3); }
body[data-portal="affiliate"] .language-pill a.active { background: linear-gradient(135deg, #ec3b79, #8d4cd9); }
.public-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0abfe3, #256cde);
  box-shadow: 0 12px 28px rgba(24, 131, 201, .22);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}
body[data-portal="affiliate"] .public-cta { background: linear-gradient(135deg, #ef3b78, #9348d3); box-shadow: 0 12px 28px rgba(196, 49, 120, .22); }
.mobile-nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid #cfe3eb; border-radius: 13px; color: var(--landing-ink); background: #fff; font-size: 20px; cursor: pointer; }

/* Hero */
.landing-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 8% 15%, rgba(44, 211, 246, .23), transparent 30rem),
    radial-gradient(circle at 88% 24%, rgba(235, 52, 112, .22), transparent 34rem),
    linear-gradient(135deg, #061522 0%, #0a2438 45%, #171a35 100%);
}
body[data-portal="affiliate"] .landing-hero {
  background:
    radial-gradient(circle at 10% 16%, rgba(56, 204, 242, .18), transparent 29rem),
    radial-gradient(circle at 85% 24%, rgba(241, 54, 118, .3), transparent 35rem),
    linear-gradient(135deg, #0b1524 0%, #17152d 48%, #2b1029 100%);
}
.landing-hero::after {
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: -1px;
  height: 84px;
  background: var(--landing-paper);
  clip-path: ellipse(57% 58% at 50% 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 40px));
  min-height: 720px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 118px) 0 118px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(510px, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 4; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #d9f8ff;
  background: rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #37dcfa; box-shadow: 0 0 18px #37dcfa; }
body[data-portal="affiliate"] .eyebrow::before { background: #ff5b92; box-shadow: 0 0 18px #ff5b92; }
.hero-copy h1 { max-width: 760px; margin: 24px 0 22px; font-size: clamp(50px, 6.3vw, 86px); line-height: .98; letter-spacing: -.055em; }
.hero-copy h1 .accent { color: #74e9ff; }
body[data-portal="affiliate"] .hero-copy h1 .accent { color: #ff7aa6; }
.hero-lead { max-width: 670px; margin: 0; color: #d2e3eb; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.62; }
.hero-highlight { display: inline; color: #fff; font-weight: 850; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.hero-secondary {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}
.hero-secondary:hover { background: rgba(255,255,255,.14); }
.store-link { position: relative; display: inline-flex; min-height: 62px; align-items: center; border-radius: 13px; text-decoration: none; }
.store-link img { display: block; width: 190px; height: auto; }
.store-coming {
  min-width: 190px;
  min-height: 62px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 13px;
  color: #fff;
  background: #060a0d;
  box-shadow: 0 12px 28px rgba(0,0,0,.23);
}
.store-coming small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.store-coming strong { font-size: 21px; line-height: 1.1; }
.store-link.is-pending .store-badge { display: none; }
.store-link.is-pending .store-coming { display: flex; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; }
.proof-item { display: flex; align-items: center; gap: 8px; color: #c5d9e3; font-size: 13px; font-weight: 750; }
.proof-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #052131; background: #74e9ff; font-size: 13px; font-weight: 950; }
body[data-portal="affiliate"] .proof-icon { color: #35111e; background: #ff86ad; }

.hero-stage { position: relative; min-height: 620px; isolation: isolate; }
.hero-glow { position: absolute; inset: 8% 1% 5%; border-radius: 50%; background: radial-gradient(circle, rgba(48,208,244,.22), rgba(38,82,134,.08) 45%, transparent 72%); filter: blur(2px); }
body[data-portal="affiliate"] .hero-glow { background: radial-gradient(circle, rgba(244,57,122,.24), rgba(89,63,150,.09) 48%, transparent 74%); }
.character-frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  background: rgba(9,22,35,.42);
  box-shadow: 0 30px 65px rgba(0,0,0,.36);
}
.character-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.character-frame.lyra img { object-position: 50% 16%; }
.character-frame.raven { left: 2%; top: 3%; width: 49%; height: 91%; transform: rotate(-2deg); }
.character-frame.lyra { right: 1%; top: 5%; width: 48%; height: 88%; transform: rotate(2.5deg); }
.character-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,13,23,.78), transparent 34%); pointer-events: none; }
.hero-phone {
  position: absolute;
  left: 36%;
  bottom: -2%;
  z-index: 4;
  width: 28%;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 26px;
  background: #06111c;
  box-shadow: 0 24px 55px rgba(0,0,0,.45);
  transform: rotate(-1deg);
}
.hero-phone img { width: 100%; height: auto; display: block; border-radius: 20px; }
.nox-orb {
  position: absolute;
  z-index: 5;
  right: -3%;
  bottom: 3%;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid rgba(116,233,255,.6);
  border-radius: 50%;
  background: #071828;
  box-shadow: 0 0 0 10px rgba(83,219,255,.08), 0 18px 40px rgba(0,0,0,.35);
}
.nox-orb img { width: 100%; height: 100%; object-fit: cover; }
.hero-mini-card {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  color: #fff;
  background: rgba(7,24,38,.84);
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 42px rgba(0,0,0,.3);
}
.hero-mini-card strong { display: block; font-size: 14px; }
.hero-mini-card small { display: block; margin-top: 2px; color: #b9ced9; font-size: 11px; }
.hero-mini-card.one { left: -2%; bottom: 10%; }
.hero-mini-card.two { right: -5%; top: 46%; }
.hero-mini-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #05202f; background: #71e9ff; font-weight: 950; }
body[data-portal="affiliate"] .hero-mini-icon { color: #39101f; background: #ff84ad; }
.affiliate-hero-image { position: absolute; inset: 2% 0 0; width: 100%; height: 96%; object-fit: cover; border-radius: 34px; box-shadow: 0 30px 70px rgba(0,0,0,.36); }
.affiliate-hero-stat { position: absolute; z-index: 5; padding: 15px 18px; border-radius: 18px; color: #fff; background: rgba(15,25,43,.86); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 18px 40px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.affiliate-hero-stat strong { display:block; font-size: 28px; color: #ff82aa; }
.affiliate-hero-stat small { color:#d8c7d2; font-size: 12px; }
.affiliate-hero-stat.one { left: -3%; top: 11%; }
.affiliate-hero-stat.two { left: 2%; bottom: 8%; }

/* Quick facts */
.trust-ribbon { position: relative; z-index: 5; width: min(1120px, calc(100% - 40px)); margin: -48px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d9e8ee; border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--landing-shadow); }
.trust-fact { min-height: 116px; display: flex; align-items: center; gap: 13px; padding: 22px; border-right: 1px solid #e3edf1; }
.trust-fact:last-child { border-right: 0; }
.trust-fact-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px; color: #075f7b; background: #e8f8fb; font-size: 22px; }
body[data-portal="affiliate"] .trust-fact-icon { color: #b42665; background: #fff0f5; }
.trust-fact strong { display: block; font-size: 17px; }
.trust-fact small { display: block; margin-top: 4px; color: #526778; font-size: 13px; line-height: 1.4; }

/* Shared sections */
.landing-section { position: relative; padding: clamp(72px, 9vw, 124px) 0; }
.landing-section.light { background: var(--landing-paper); }
.landing-section.ice { background: linear-gradient(180deg, #edf7fa, #f7fbfd); }
.landing-section.warm { background: linear-gradient(180deg, #fff9f3, #fff); }
.landing-section.dark { color: #fff; background: linear-gradient(135deg, #071827, #0c2b40 56%, #151b37); }
body[data-portal="affiliate"] .landing-section.dark { background: linear-gradient(135deg, #101323, #281328 58%, #24142d); }
.section-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-heading { max-width: 780px; margin-bottom: 44px; }
.section-heading.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { color: #0987ad; font-size: 13px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
body[data-portal="affiliate"] .kicker { color: #d43172; }
.landing-section.dark .kicker { color: #70e8ff; }
body[data-portal="affiliate"] .landing-section.dark .kicker { color: #ff83aa; }
.section-heading h2 { margin: 12px 0 16px; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.03; letter-spacing: -.045em; }
.section-heading p { margin: 0; color: var(--landing-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.66; }
.landing-section.dark .section-heading p { color: #c8d9e2; }
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.card-soft { border: 1px solid #dce9ee; border-radius: 25px; background: #fff; box-shadow: 0 18px 52px rgba(22, 66, 91, .08); }
.feature-card { min-height: 250px; padding: 27px; }
.feature-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: #087da0; background: linear-gradient(145deg, #e9faff, #dceeff); font-size: 25px; }
body[data-portal="affiliate"] .feature-icon { color: #b62664; background: linear-gradient(145deg, #fff0f5, #f5e9ff); }
.feature-card h3 { margin: 25px 0 10px; font-size: 23px; }
.feature-card p { margin: 0; color: #627486; font-size: 16px; line-height: 1.62; }

.showcase-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); gap: clamp(36px, 6vw, 86px); align-items: center; }
.showcase-split.reverse { grid-template-columns: minmax(520px,1.1fr) minmax(0,.9fr); }
.showcase-split.reverse .showcase-copy { order: 2; }
.showcase-split.reverse .showcase-media { order: 1; }
.showcase-copy h2 { margin: 10px 0 18px; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.045em; }
.showcase-copy > p { margin: 0; color: var(--landing-muted); font-size: 18px; line-height: 1.68; }
.landing-section.dark .showcase-copy > p { color: #c8d9e2; }
.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 12px; color: #3d5365; font-size: 16px; line-height: 1.5; }
.landing-section.dark .check-list li { color: #d7e5eb; }
.check-list li::before { content: "✓"; width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #08bddd, #236bdb); font-size: 13px; font-weight: 950; }
body[data-portal="affiliate"] .check-list li::before { background: linear-gradient(135deg, #ed3d77, #8f4ad4); }
.showcase-media { position: relative; }
.showcase-media > img { width: 100%; height: auto; display: block; border-radius: 30px; box-shadow: var(--landing-shadow); }
.landing-section.dark .showcase-media > img { box-shadow: 0 32px 80px rgba(0,0,0,.35); }
.media-caption { margin-top: 13px; color: #718493; font-size: 13px; text-align: center; }
.landing-section.dark .media-caption { color: #9fb3bf; }

.game-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.game-pill { padding: 10px 14px; border: 1px solid #cfe4eb; border-radius: 999px; color: #17445b; background: #fff; font-size: 14px; font-weight: 850; }
.landing-section.dark .game-pill { color: #dff9ff; border-color: rgba(131,230,255,.23); background: rgba(255,255,255,.07); }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.audience-card { min-height: 225px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #dce9ee; }
.audience-card .audience-icon { font-size: 30px; }
.audience-card h3 { margin: 20px 0 9px; font-size: 21px; }
.audience-card p { margin: 0; color: #627486; font-size: 15px; line-height: 1.58; }

.highlight-panel { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border-radius: 34px; color: #fff; background: linear-gradient(135deg, #092438, #0d3e57 60%, #17254a); box-shadow: 0 30px 85px rgba(12,54,79,.25); }
.highlight-panel::before { content: ""; position: absolute; width: 440px; height: 440px; right: -170px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(72,221,250,.4), transparent 65%); }
body[data-portal="affiliate"] .highlight-panel { background: linear-gradient(135deg, #251329, #51203e 60%, #281d4e); }
body[data-portal="affiliate"] .highlight-panel::before { background: radial-gradient(circle, rgba(255,91,147,.43), transparent 65%); }
.highlight-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; }
.highlight-copy h2 { margin: 0 0 15px; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -.045em; }
.highlight-copy p { margin: 0; color: #d4e4eb; font-size: 18px; line-height: 1.64; }
.highlight-numbers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.highlight-number { padding: 20px; border: 1px solid rgba(255,255,255,.17); border-radius: 20px; background: rgba(255,255,255,.08); }
.highlight-number strong { display: block; color: #75e9ff; font-size: 34px; }
body[data-portal="affiliate"] .highlight-number strong { color: #ff88ad; }
.highlight-number small { color: #c6d6de; font-size: 13px; }

/* Screens and video */
.screen-gallery { display: grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 18px; overflow-x: auto; padding: 8px 2px 24px; scroll-snap-type: x mandatory; }
.screen-card { min-width: 230px; scroll-snap-align: start; }
.screen-phone { padding: 8px; border-radius: 29px; background: #071727; box-shadow: 0 20px 50px rgba(13,50,75,.18); }
.screen-phone img { width: 100%; height: auto; aspect-ratio: 9/20; display: block; object-fit: contain; object-position: top center; border-radius: 22px; }
.screen-card h3 { margin: 17px 4px 5px; font-size: 18px; }
.screen-card p { margin: 0 4px; color: #687b8c; font-size: 14px; line-height: 1.5; }

/* Event / character teaser */
.event-teaser { display: grid; grid-template-columns: .82fr 1.18fr; align-items: stretch; overflow: hidden; border-radius: 34px; background: linear-gradient(135deg, #21143d, #482465 58%, #113b5c); box-shadow: 0 28px 75px rgba(43,28,77,.22); }
.event-character { position: relative; min-height: 520px; overflow: hidden; }
.event-character img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; opacity: .88; }
.event-character::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #321b53 100%), linear-gradient(to top, rgba(22,12,40,.7), transparent 48%); }
.event-copy { padding: clamp(35px, 6vw, 76px); color: #fff; align-self: center; }
.event-copy h2 { margin: 10px 0 17px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.045em; }
.event-copy p { color: #e4dced; font-size: 18px; line-height: 1.65; }

/* Affiliate specific */
.partner-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.partner-fact { padding: 28px 22px; border: 1px solid #eadce5; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 18px 46px rgba(88,31,61,.07); }
.partner-fact strong { display: block; color: #c52e6c; font-size: clamp(36px, 4vw, 50px); }
.partner-fact span { display: block; margin-top: 7px; color: #657485; font-size: 14px; line-height: 1.4; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.step-card { position: relative; padding: 30px; border-radius: 25px; background: #fff; border: 1px solid #e6dce4; }
.step-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ee3f78, #8f4ad4); font-size: 19px; font-weight: 950; }
.step-card h3 { margin: 24px 0 10px; font-size: 23px; }
.step-card p { margin: 0; color: #687787; font-size: 16px; line-height: 1.62; }
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.channel-card { padding: 24px; border-radius: 22px; border: 1px solid #e5dce4; background: #fff; }
.channel-card.allowed { border-left: 5px solid #2bbf9e; }
.channel-card.forbidden { border-left: 5px solid #ef4c6d; }
.channel-card h3 { margin: 0 0 12px; font-size: 21px; }
.channel-card ul { margin: 0; padding-left: 20px; color: #657586; line-height: 1.7; }

/* Login and application dock */
.login-dock { position: relative; background: linear-gradient(180deg, #eaf6f9, #f8fbfd); }
.login-dock-inner { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: clamp(70px, 8vw, 110px) 0; display: grid; grid-template-columns: minmax(0,.86fr) minmax(420px,1.14fr); gap: clamp(30px, 5vw, 66px); align-items: center; }
.login-intro h2 { margin: 12px 0 16px; font-size: clamp(38px, 4vw, 56px); line-height: 1.06; letter-spacing: -.045em; }
.login-intro > p { margin: 0; color: #607385; font-size: 18px; line-height: 1.65; }
.login-trust { display: grid; gap: 12px; margin-top: 24px; }
.login-trust div { display: flex; align-items: center; gap: 10px; color: #445c6e; font-size: 15px; }
.login-trust span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0bb7da; font-size: 12px; font-weight: 950; }
body[data-portal="affiliate"] .login-trust span { background: #d83a74; }
.login-card { padding: clamp(24px, 4vw, 36px); border: 1px solid rgba(126,214,237,.18); border-radius: 26px; color: #eef8fc; background: linear-gradient(145deg, #0b2235, #071725); box-shadow: 0 28px 70px rgba(12,53,78,.25); }
body[data-portal="affiliate"] .login-card { background: linear-gradient(145deg, #2b142c, #141526); box-shadow: 0 28px 70px rgba(78,27,60,.23); }
.login-card .form-row label { color: #d5e7ee; font-size: 14px; }
.login-card .form-row input { min-height: 52px; font-size: 17px; }
.login-card .btn { min-height: 50px; font-size: 15px; }
.google-login-wrap { display: grid; gap: 13px; margin-top: 20px; }
.google-button-host { min-height: 44px; display: flex; justify-content: center; overflow: hidden; border-radius: 999px; }
.divider-label { display: flex; align-items: center; gap: 12px; color: #8fa5b4; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.divider-label::before, .divider-label::after { content: ""; height: 1px; flex: 1; background: rgba(153,218,237,.2); }

/* FAQ and footer */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.faq-item { border: 1px solid #dce8ed; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(18,61,86,.05); }
.faq-item summary { padding: 21px 22px; cursor: pointer; color: #173145; font-size: 17px; font-weight: 850; }
.faq-item p { margin: 0; padding: 0 22px 22px; color: #617486; font-size: 15px; line-height: 1.65; }
.final-cta { padding: 0 0 100px; background: var(--landing-paper); }
.final-cta-card { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(38px, 6vw, 72px); border-radius: 34px; color: #fff; background: linear-gradient(135deg, #09263a, #0d536e 50%, #263c7b); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; box-shadow: 0 28px 80px rgba(19,73,104,.24); }
body[data-portal="affiliate"] .final-cta-card { background: linear-gradient(135deg, #29142c, #77304f 52%, #4b367c); }
.final-cta-card h2 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -.04em; }
.final-cta-card p { margin: 0; color: #d6e5eb; font-size: 17px; line-height: 1.55; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.public-footer { color: #c5d5dc; background: #06131f; }
.footer-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 70px; height: 70px; object-fit: contain; }
.footer-brand strong { display: block; font-size: 19px; color: #fff; }
.footer-brand small { display: block; margin-top: 5px; color: #91a7b5; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px; }
.footer-links a { color: #c4d5dd; text-decoration: none; font-size: 14px; }
.footer-note { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #7891a0; font-size: 12px; }
.seo-copy { max-width: 850px; color: #708392; font-size: 14px; line-height: 1.7; }

/* Logged-in portal additions */
.google-account-card { grid-column: 1 / -1; }
.google-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#google-account-status { color: var(--muted); line-height: 1.55; }
.creator-code-card { margin-top: 18px; }
.creator-code-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.creator-code-form input { min-height: 44px; text-transform: uppercase; letter-spacing: .08em; }
.creator-code-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }

/* Motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-phone { animation: hero-phone-float 6.5s ease-in-out infinite; }
  .nox-orb { animation: nox-float 5.5s ease-in-out infinite; }
  @keyframes hero-phone-float { 50% { transform: translateY(-10px) rotate(1deg); } }
  @keyframes nox-float { 50% { transform: translateY(-12px) rotate(2deg); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 1120px) {
  .public-links { display: none; }
  .mobile-nav-toggle { display: inline-grid; place-items: center; }
  .public-nav.menu-open .public-links { position: absolute; left: 20px; right: 20px; top: 70px; display: grid; padding: 12px; border: 1px solid #d7e7ed; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: var(--landing-shadow); }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .hero-stage { width: min(780px, 100%); margin: 0 auto; }
  .showcase-split, .showcase-split.reverse { grid-template-columns: 1fr; }
  .showcase-split.reverse .showcase-copy, .showcase-split.reverse .showcase-media { order: initial; }
  .showcase-copy { text-align: center; }
  .check-list { max-width: 720px; margin-inline: auto; text-align: left; }
  .game-pill-row { justify-content: center; }
  .section-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .audience-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .public-nav { min-height: 70px; }
  .public-nav-actions .public-cta { display: none; }
  .hero-inner { min-height: auto; padding-top: 70px; }
  .hero-stage { min-height: 570px; }
  .trust-ribbon { grid-template-columns: repeat(2,1fr); }
  .trust-fact:nth-child(2) { border-right: 0; }
  .trust-fact:nth-child(-n+2) { border-bottom: 1px solid #e3edf1; }
  .highlight-grid { grid-template-columns: 1fr; }
  .event-teaser { grid-template-columns: 1fr; }
  .event-character { min-height: 410px; }
  .event-character::after { background: linear-gradient(to top, #321b53 2%, transparent 52%); }
  .partner-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps-grid { grid-template-columns: 1fr; }
  .login-dock-inner { grid-template-columns: 1fr; }
  .login-intro { text-align: center; }
  .login-trust { width: fit-content; margin-inline: auto; text-align: left; }
  .final-cta-card { grid-template-columns: 1fr; text-align: center; }
  .final-cta-actions { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .public-nav, .hero-inner, .section-inner, .trust-ribbon, .login-dock-inner, .final-cta-card, .footer-inner { width: min(100% - 28px, 1240px); }
  .public-brand small { display: none; }
  .public-brand-logo { width: 43px; height: 43px; }
  .language-pill a { min-width: 34px; padding-inline: 8px; }
  .hero-copy h1 { font-size: clamp(44px, 13vw, 66px); }
  .hero-lead { font-size: 18px; }
  .hero-actions > * { width: 100%; }
  .store-link { justify-content: center; }
  .hero-proof { display: grid; justify-content: stretch; text-align: left; }
  .hero-stage { min-height: 500px; }
  .character-frame.raven { left: -2%; width: 55%; height: 82%; }
  .character-frame.lyra { right: -2%; width: 55%; height: 80%; }
  .hero-phone { left: 34%; width: 34%; bottom: 1%; }
  .nox-orb { width: 105px; height: 105px; right: 0; bottom: 0; }
  .hero-mini-card { display: none; }
  .affiliate-hero-image { object-position: 64% center; }
  .affiliate-hero-stat { transform: scale(.86); transform-origin: left center; }
  .trust-ribbon { margin-top: -28px; }
  .trust-fact { min-height: 105px; padding: 17px; }
  .trust-fact-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .section-grid, .audience-grid, .faq-grid, .channel-grid { grid-template-columns: 1fr; }
  .partner-facts { grid-template-columns: 1fr 1fr; }
  .highlight-numbers { grid-template-columns: 1fr 1fr; }
  .screen-gallery { grid-template-columns: repeat(4, 75vw); }
  .event-character { min-height: 360px; }
  .creator-code-form { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .public-nav-actions { gap: 6px; }
  .mobile-nav-toggle { width: 40px; height: 40px; }
  .hero-stage { min-height: 440px; }
  .character-frame.raven, .character-frame.lyra { border-radius: 22px; }
  .hero-phone { width: 38%; left: 31%; }
  .trust-ribbon { grid-template-columns: 1fr; }
  .trust-fact { border-right: 0; border-bottom: 1px solid #e3edf1; }
  .trust-fact:last-child { border-bottom: 0; }
  .partner-facts, .highlight-numbers { grid-template-columns: 1fr; }
  .screen-gallery { grid-template-columns: repeat(4, 82vw); }
}
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 1000; padding: 12px 17px; border-radius: 12px; color: #fff; background: #087ea2; font-weight: 900; text-decoration: none; transition: top .18s ease; }
.skip-link:focus { top: 14px; }

/* Lifestyle release: functional portal additions */
.showcase-phone-image{max-width:430px;margin-inline:auto}
.creator-code-card{margin-block:1.25rem;color:#102338;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,250,255,.96));border-color:rgba(0,170,210,.2)}
.creator-code-form{display:grid;gap:.65rem;max-width:760px}
.creator-code-form label{font-weight:800;color:var(--ink)}
.creator-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center}
.creator-code-row input{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.media-kit-card{margin-bottom:1.2rem;color:#102338;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(245,236,255,.96));border-color:rgba(112,60,220,.18)}
@media(max-width:640px){.creator-code-row{grid-template-columns:1fr}.creator-code-row .btn{width:100%}.showcase-phone-image{max-width:360px}}

.creator-code-card h3,.media-kit-card h3{color:#102338}.creator-code-card .card-subtitle,.creator-code-card .form-hint,.media-kit-card p{color:#52697b}


/* V10: distortion-free app previews + manga integration */
.app-showcase-split { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(34px,5vw,72px); }
.app-preview-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.5vw,18px); align-items:start; min-width:0; }
.app-preview-card { min-width:0; text-align:center; }
.app-preview-card:nth-child(2) { transform:translateY(-18px); }
.app-preview-card .screen-phone { padding:6px; border-radius:25px; background:linear-gradient(145deg,#071522,#0b2b3d); box-shadow:0 24px 54px rgba(11,52,74,.19); }
.app-preview-card .screen-phone img { width:100%; height:auto; aspect-ratio:9/20; object-fit:contain; object-position:top center; border-radius:19px; }
.app-preview-card h3 { margin:14px 0 5px; color:#173145; font-size:17px; }
.app-preview-card p { margin:0 auto; max-width:190px; color:#6a7d8c; font-size:13px; line-height:1.45; }

.manga-teaser { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); min-height:560px; overflow:hidden; border-radius:36px; color:#fff; background:radial-gradient(circle at 22% 26%,rgba(62,217,246,.19),transparent 34%),linear-gradient(135deg,#071726,#102d45 48%,#26193f); box-shadow:0 30px 82px rgba(11,47,73,.25); }
.manga-character-stage { position:relative; min-height:560px; overflow:hidden; isolation:isolate; }
.manga-character-stage::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:linear-gradient(90deg,transparent 61%,rgba(15,35,55,.95) 100%),linear-gradient(to top,rgba(4,14,25,.75),transparent 38%); }
.manga-character-stage img { position:absolute; display:block; height:auto; filter:drop-shadow(0 22px 28px rgba(0,0,0,.28)); }
.manga-raven { z-index:3; width:48%; left:-2%; bottom:-5%; }
.manga-lyra { z-index:3; width:47%; right:4%; bottom:-5%; }
.manga-nox { z-index:4; width:25%; left:38%; top:13%; }
.manga-null { z-index:1; width:47%; right:-13%; top:-2%; opacity:.48; filter:drop-shadow(0 16px 24px rgba(0,0,0,.18)) saturate(.8); }
.manga-copy { position:relative; z-index:7; align-self:center; padding:clamp(38px,5.5vw,74px) clamp(34px,5vw,66px) clamp(38px,5.5vw,74px) 12px; }
.manga-copy h2 { margin:12px 0 18px; font-size:clamp(38px,4.4vw,62px); line-height:1.03; letter-spacing:-.045em; }
.manga-copy p { margin:0; color:#d8e6ed; font-size:18px; line-height:1.65; }
.manga-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px; }
.manga-primary { border-color:rgba(123,232,255,.42); background:rgba(58,202,234,.15); }
.manga-text-link { color:#aeefff; font-weight:850; text-decoration:none; }
.manga-text-link:hover { text-decoration:underline; }
.manga-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.manga-chips span { padding:7px 10px; border:1px solid rgba(177,233,245,.2); border-radius:999px; color:#c9e8f1; background:rgba(255,255,255,.06); font-size:12px; font-weight:800; }

.manga-page { min-height:100vh; color:#eaf6fb; background:#06131f; }
.manga-page .public-header { background:rgba(6,19,31,.92); }
.manga-landing { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:120px 0 90px; }
.manga-landing-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; }
.manga-landing-copy h1 { margin:14px 0 18px; font-size:clamp(48px,6vw,82px); line-height:.98; letter-spacing:-.055em; }
.manga-landing-copy h2 { margin:0 0 14px; font-size:clamp(24px,2.8vw,36px); color:#8ceaff; }
.manga-landing-copy p { color:#c9dae3; font-size:18px; line-height:1.65; }
.manga-landing-stage { position:relative; min-height:590px; border-radius:34px; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(61,215,246,.2),transparent 38%),linear-gradient(145deg,#0b2437,#151b39 58%,#351845); }
.manga-landing-stage img { position:absolute; height:auto; filter:drop-shadow(0 22px 28px rgba(0,0,0,.32)); }
.manga-landing-stage .manga-raven { width:48%; left:1%; bottom:-4%; }
.manga-landing-stage .manga-lyra { width:47%; right:2%; bottom:-4%; }
.manga-landing-stage .manga-nox { width:25%; left:38%; top:10%; }
.manga-landing-stage .manga-null { width:48%; right:-10%; top:0; opacity:.42; }
.manga-release { margin-top:58px; padding:30px; border:1px solid rgba(126,214,237,.15); border-radius:26px; background:rgba(255,255,255,.055); }
.manga-release h2 { margin:0 0 10px; font-size:30px; }
.manga-release p { margin:0; color:#bdd0da; line-height:1.6; }

@media (max-width: 980px) {
  .app-showcase-split { grid-template-columns:1fr; }
  .app-preview-deck { width:min(760px,100%); margin:8px auto 0; }
  .manga-teaser { grid-template-columns:1fr; }
  .manga-character-stage { min-height:500px; }
  .manga-character-stage::after { background:linear-gradient(to bottom,transparent 62%,rgba(13,33,51,.96) 100%); }
  .manga-copy { padding:0 clamp(28px,6vw,54px) clamp(40px,7vw,64px); text-align:center; }
  .manga-actions,.manga-chips { justify-content:center; }
  .manga-landing-hero { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .app-preview-deck { display:flex; gap:14px; overflow-x:auto; margin-inline:-14px; padding:12px 14px 24px; scroll-snap-type:x mandatory; }
  .app-preview-card { flex:0 0 min(72vw,245px); scroll-snap-align:center; }
  .app-preview-card:nth-child(2) { transform:none; }
  .app-preview-card h3 { font-size:16px; }
  .manga-teaser { border-radius:28px; }
  .manga-character-stage { min-height:420px; }
  .manga-raven { width:55%; left:-8%; }
  .manga-lyra { width:54%; right:-5%; }
  .manga-nox { width:28%; left:36%; top:12%; }
  .manga-null { width:55%; right:-20%; opacity:.36; }
  .manga-copy h2 { font-size:clamp(34px,11vw,48px); }
  .manga-copy p { font-size:16px; }
  .manga-actions > * { width:100%; text-align:center; justify-content:center; }
  .manga-landing { width:min(100% - 28px,1180px); padding-top:92px; }
  .manga-landing-stage { min-height:430px; }
}

/* V10_25: PageSpeed contrast fixes + independent manga compositions. */
.public-brand small { color:#526778; }
.language-pill a { color:#506579; }
.language-pill a.active { color:#fff; background:linear-gradient(135deg,#087b9b,#2456b3); }
.trust-fact-icon { color:#075f7b; }
.trust-fact small { color:#526778; }

/* Customer-page manga teaser: one blended scene instead of four visible image cards. */
.manga-character-stage {
  background:
    radial-gradient(circle at 18% 62%,rgba(28,198,239,.26),transparent 36%),
    radial-gradient(circle at 82% 64%,rgba(236,48,104,.24),transparent 38%),
    radial-gradient(circle at 52% 18%,rgba(128,67,225,.25),transparent 38%),
    linear-gradient(150deg,#071827 0%,#0b283d 44%,#221737 100%);
}
.manga-character-stage::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(116,232,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,232,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 82%,transparent);
}
.manga-character-stage img {
  border-radius:28px;
  -webkit-mask-image:radial-gradient(ellipse 76% 92% at 50% 52%,#000 50%,rgba(0,0,0,.94) 65%,rgba(0,0,0,.45) 79%,transparent 97%);
  mask-image:radial-gradient(ellipse 76% 92% at 50% 52%,#000 50%,rgba(0,0,0,.94) 65%,rgba(0,0,0,.45) 79%,transparent 97%);
}
.manga-character-stage .manga-null { z-index:1; width:70%; left:16%; right:auto; top:-17%; opacity:.48; mix-blend-mode:screen; transform:rotate(-2deg); }
.manga-character-stage .manga-raven { z-index:3; width:57%; left:-9%; bottom:-8%; transform:rotate(-2.5deg); }
.manga-character-stage .manga-lyra { z-index:3; width:56%; right:-8%; bottom:-9%; transform:rotate(2deg); }
.manga-character-stage .manga-nox { z-index:5; width:21%; left:40%; top:40%; mix-blend-mode:screen; filter:drop-shadow(0 0 28px rgba(69,221,255,.42)); }
.manga-character-stage::after { background:linear-gradient(90deg,transparent 64%,rgba(15,35,55,.94) 100%),linear-gradient(to top,rgba(4,14,25,.78),transparent 40%); }

/* Manga landing: deliberately asymmetric diagonal composition so it does not repeat the teaser or cover. */
.manga-landing-stage {
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 70%,rgba(31,203,241,.31),transparent 34%),
    radial-gradient(circle at 78% 63%,rgba(235,48,104,.30),transparent 35%),
    radial-gradient(circle at 78% 16%,rgba(125,65,223,.26),transparent 36%),
    linear-gradient(145deg,#071827 0%,#0b2a40 43%,#201635 100%);
  box-shadow:inset 0 0 0 1px rgba(126,214,237,.12),0 28px 70px rgba(0,0,0,.25);
}
.manga-landing-stage::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg,rgba(77,222,250,.09),transparent 30%,transparent 66%,rgba(238,59,111,.10));
}
.manga-landing-stage::after {
  content:""; position:absolute; left:12%; right:8%; bottom:7%; height:24%; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(120,76,225,.30),transparent 66%); filter:blur(14px);
}
.manga-landing-stage img {
  border-radius:30px;
  -webkit-mask-image:radial-gradient(ellipse 78% 94% at 50% 52%,#000 48%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.42) 80%,transparent 97%);
  mask-image:radial-gradient(ellipse 78% 94% at 50% 52%,#000 48%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.42) 80%,transparent 97%);
}
.manga-landing-stage .manga-raven { z-index:4; width:60%; left:-10%; bottom:-10%; transform:rotate(-2.5deg); }
.manga-landing-stage .manga-lyra { z-index:5; width:55%; right:-4%; bottom:-4%; transform:rotate(1.5deg); }
.manga-landing-stage .manga-nox { z-index:6; width:18%; left:44%; top:34%; mix-blend-mode:screen; filter:drop-shadow(0 0 26px rgba(73,225,255,.46)); }
.manga-landing-stage .manga-null { z-index:1; width:69%; right:-21%; left:auto; top:-14%; opacity:.50; mix-blend-mode:screen; transform:rotate(2deg); }

@media (max-width:620px) {
  .manga-character-stage .manga-raven { width:64%; left:-15%; }
  .manga-character-stage .manga-lyra { width:62%; right:-14%; }
  .manga-character-stage .manga-nox { width:23%; left:39%; top:41%; }
  .manga-character-stage .manga-null { width:78%; left:12%; top:-13%; }
  .manga-landing-stage .manga-raven { width:64%; left:-14%; }
  .manga-landing-stage .manga-lyra { width:60%; right:-10%; }
  .manga-landing-stage .manga-nox { width:21%; left:42%; top:37%; }
  .manga-landing-stage .manga-null { width:76%; right:-25%; top:-9%; }
}