*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:   #05040F;
  --navy:    #0A0820;
  --navy-mid:#0E0C2A;
  --navy-light:#14123A;
  --magenta: #E8185A;
  --mag-dark:#B01050;
  --cyan:    #00B4D8;
  --cyan-dim:rgba(0,180,216,0.12);
  --gold:    #FFB800;
  --white:   #ffffff;
  --muted:   rgba(255,255,255,0.45);
  --muted2:  rgba(255,255,255,0.28);
}

html { scroll-behavior: smooth; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--black); color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* All display headlines use Helvetica Bold/Black for proper brand voice. */
.hero-title, .idea-title, .dragons-title, .out-title, .tiers-title, .platform-title, .cta-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(5,4,15,0.94);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 34px; width: auto; display: block; transition: filter 0.3s ease, transform 0.3s ease; filter: drop-shadow(0 0 8px rgba(232,24,90,0.25)); }
.nav-logo:hover img { filter: drop-shadow(0 0 14px rgba(232,24,90,0.55)); transform: translateY(-1px); }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--cyan); }
.nav-cta { background: var(--magenta); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 4px; text-decoration: none; transition: background 0.2s; }
.nav-cta:hover { background: var(--mag-dark); }

/* ── HERO ── */
#hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding: 130px 48px 90px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 75% 45%, rgba(232,24,90,0.18) 0%, transparent 55%), radial-gradient(ellipse 60% 60% at 10% 75%, rgba(0,180,216,0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 65% 90%, rgba(200,0,255,0.10) 0%, transparent 60%), var(--black); }
@keyframes hero-aura-pulse { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.08); } }
.hero-aura { position: absolute; right: 0%; top: 50%; transform: translateY(-50%); width: 70%; max-width: 900px; aspect-ratio: 1; background: radial-gradient(circle, rgba(232,24,90,0.35) 0%, rgba(200,0,255,0.20) 30%, rgba(0,180,216,0.12) 55%, transparent 75%); pointer-events: none; animation: hero-aura-pulse 7s ease-in-out infinite; filter: blur(20px); }
.hero-dragon { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 62%; max-width: 1050px; pointer-events: none; opacity: 1; filter: drop-shadow(0 0 60px rgba(232,24,90,0.45)) drop-shadow(0 0 120px rgba(0,180,216,0.28)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%); }
.hero-content { max-width: 760px; position: relative; z-index: 3; }

.hero-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(232,24,90,0.10); border: 1px solid rgba(232,24,90,0.35); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--magenta); margin-bottom: 32px; backdrop-filter: blur(8px); }
.hero-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); animation: pulse-soft 1.6s ease-in-out infinite; }

.hero-title { font-size: clamp(56px, 9.5vw, 132px); font-weight: 800; line-height: 0.92; letter-spacing: -3px; margin-bottom: 32px; color: var(--white); }
.hero-title em { font-style: normal; background: linear-gradient(120deg, var(--magenta), #C800FF 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 60px rgba(232,24,90,0.5); }
.hero-sub { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.7); font-weight: 300; max-width: 560px; margin-bottom: 44px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.btn-primary { background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 18px 28px; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 12px 30px -12px rgba(232,24,90,0.55); }
.btn-primary:hover { background: #FF2D6F; transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(232,24,90,0.75); }
.btn-primary .arrow { display: inline-block; transition: transform 0.25s ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-ghost { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s ease; }
.btn-ghost:hover { color: var(--white); }


/* ── SHARED ── */
.section-label { font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; }

/* ── TIERS / JOURNEY ── */
#tiers { position: relative; overflow: hidden; }
.tiers-inner { position: relative; z-index: 2; }
@keyframes tiers-aura-pulse { 0%,100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); } }
.tiers-aura { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); width: 80%; max-width: 1000px; aspect-ratio: 1; background: radial-gradient(circle, rgba(200,0,255,0.22) 0%, rgba(232,24,90,0.16) 30%, rgba(0,180,216,0.10) 55%, transparent 75%); pointer-events: none; animation: tiers-aura-pulse 9s ease-in-out infinite; filter: blur(28px); z-index: 1; }
.tiers-header { text-align: center; }
.tiers-header .section-label { display: inline-block; }
.tiers-title { text-align: center; }
.tiers-grid { margin-top: 64px; }

/* What is a Dragon — intro block */
.dragon-intro { position: relative; max-width: 1180px; margin: 0 auto 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 480px; padding-top: 40px; }
.dragon-intro .di-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; order: 2; }
.dragon-intro .di-dragon { position: relative; z-index: 2; width: 100%; max-width: 460px; filter: drop-shadow(0 30px 60px rgba(232,24,90,0.45)) drop-shadow(0 0 90px rgba(0,180,216,0.30)); animation: float-y 9s ease-in-out infinite; }
.dragon-intro .di-copy { order: 1; }
.dragon-intro .di-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--magenta); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.dragon-intro .di-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.dragon-intro h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; font-size: clamp(36px, 4.5vw, 60px); line-height: 0.98; letter-spacing: -1.5px; margin-bottom: 22px; }
.dragon-intro h3 em { font-style: normal; background: linear-gradient(120deg, var(--magenta), #C800FF 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dragon-intro p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.7); font-weight: 300; margin-bottom: 14px; max-width: 520px; }
.dragon-intro p b { color: var(--white); font-weight: 500; }
.dragon-intro .di-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.dragon-intro .di-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.dragon-intro .di-tag.magenta { color: var(--magenta); border-color: rgba(232,24,90,0.4); background: rgba(232,24,90,0.08); }
.dragon-intro .di-tag.cyan { color: var(--cyan); border-color: rgba(0,180,216,0.4); background: rgba(0,180,216,0.08); }

#tiers { background: var(--navy-mid); padding: 100px 48px; }
.tiers-header { max-width: 640px; margin-bottom: 52px; }
.tiers-title { font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.08; margin-bottom: 14px; }
.tiers-title span { color: var(--magenta); }
.tiers-sub { font-size: 14px; color: var(--muted); line-height: 1.7; font-weight: 300; }
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier-card { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 36px 32px; position: relative; overflow: hidden; transition: border-color 0.2s; display: flex; flex-direction: column; }
.tier-card:hover { border-color: rgba(255,255,255,0.15); }
.tier-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.t1::before { background: var(--cyan); }
.t2::before { background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.t3::before { background: var(--magenta); }
.tier-num { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.t1 .tier-num { color: var(--cyan); }
.t2 .tier-num { color: #C24DFF; }
.t3 .tier-num { color: var(--magenta); }
.tier-name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: 30px; margin-bottom: 14px; line-height: 1.05; letter-spacing: -0.8px; }
.tier-lede { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.55; margin-bottom: 18px; font-weight: 400; }
.tier-lede b { color: var(--white); font-weight: 600; }
.tier-points { display: grid; gap: 10px; margin-bottom: 24px; }
.tier-point { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.62); font-weight: 300; display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.tier-point::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; margin-top: 8px; }
.t1 .tier-point::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.t2 .tier-point::before { background: #C24DFF; box-shadow: 0 0 6px #C24DFF; }
.t3 .tier-point::before { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
.tier-point b { color: var(--white); font-weight: 500; }
.tier-cred { font-size: 12px; font-weight: 600; padding: 9px 14px; border-radius: 6px; display: inline-block; white-space: nowrap; margin-top: auto; align-self: flex-start; letter-spacing: 0.2px; }
.t1 .tier-cred { color: var(--cyan); background: rgba(0,180,216,0.1); border: 0.5px solid rgba(0,180,216,0.2); }
.t2 .tier-cred { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); }
.t3 .tier-cred { color: var(--magenta); background: rgba(232,24,90,0.1); border: 0.5px solid rgba(232,24,90,0.25); }

/* ── PLATFORM ── */
#platform { background: var(--navy); padding: 100px 48px; }
.platform-header { max-width: 680px; margin-bottom: 52px; }
.platform-title { font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.08; margin-bottom: 14px; }
.platform-title span { color: var(--cyan); }
.platform-sub { font-size: 14px; color: var(--muted); line-height: 1.7; font-weight: 300; }

/* ── DRAGONS ── */
#dragons { background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(232,24,90,0.10) 0%, transparent 60%), var(--black); padding: 160px 48px; position: relative; overflow: hidden; }
.dragons-bg { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: 46%; max-width: 560px; opacity: 0.5; pointer-events: none; filter: drop-shadow(0 0 70px rgba(232,24,90,0.45)) drop-shadow(0 0 140px rgba(200,0,255,0.3)); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 35%, transparent 78%); }
.dragons-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; text-align: center; }
.dragons-eyebrow { color: var(--magenta); display: inline-block; }
.dragons-title { margin-bottom: 26px; color: var(--white); }
.dragons-title em { font-style: normal; background: linear-gradient(120deg, var(--magenta), #C800FF 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dragons-body { color: rgba(255,255,255,0.7); font-weight: 300; margin: 0 auto 60px; max-width: 600px; text-align: center; }

/* Credential ladder */
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.rung { --tone: #fff; background: rgba(255,255,255,0.025); border: 0.5px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 26px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.rung::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tone); }
.rung:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: 0 22px 44px -24px var(--tone); }
.rung-n { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.4); }
.rung-swatch { width: 46px; height: 46px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 26px -2px var(--tone), inset 0 0 0 4px rgba(255,255,255,0.12); margin: 2px 0 4px; }
.rung b { font-size: 19px; font-weight: 800; color: #fff; font-style: normal; letter-spacing: -0.3px; }
.rung i { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,0.55); line-height: 1.35; }
.rung[data-tone="red"]    { --tone: #FF4D4D; }
.rung[data-tone="amber"]  { --tone: #FF9933; }
.rung[data-tone="green"]  { --tone: #4FD1A0; }
.rung[data-tone="blue"]   { --tone: #2BB8FF; }
.rung[data-tone="purple"] { --tone: #C24DFF; }
.rung[data-tone="gold"]   { --tone: #FFC53D; background: rgba(255,197,61,0.07); border-color: rgba(255,197,61,0.32); }
.rung[data-tone="gold"] b { color: #FFD873; }


/* ── OUTCOMES (enterprise messaging from one-pager) ── */
#outcomes { background: #0A081E; padding: 140px 48px; position: relative; overflow: hidden; border-top: 0.5px solid rgba(255,255,255,0.04); }
#outcomes::before { content: ''; position: absolute; top: -150px; right: -150px; width: 600px; height: 500px; background: radial-gradient(ellipse, rgba(0,180,216,0.08) 0%, transparent 65%); pointer-events: none; }
.out-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.out-header { max-width: 720px; margin-bottom: 56px; }
.out-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); margin-bottom: 24px; }
.out-title { font-size: clamp(40px, 6vw, 80px); font-weight: 800; line-height: 0.95; letter-spacing: -2px; margin-bottom: 22px; color: var(--white); }
.out-title em { font-style: normal; background: linear-gradient(120deg, var(--cyan), #C800FF 60%, var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.out-sub { font-size: 17px; color: rgba(255,255,255,0.65); line-height: 1.6; font-weight: 300; max-width: 600px; }
.out-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 56px; }
.out-stat { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 36px 30px; position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; }
.out-stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }
.out-stat-num { font-size: clamp(48px, 6vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -2px; margin-bottom: 14px; background: linear-gradient(120deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Stat hierarchy — hero (red→magenta) → supporting (magenta→cyan) → tertiary (cyan) */
.out-stat:nth-child(1) .out-stat-num { background: linear-gradient(120deg, #FF3D7F, var(--magenta) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.out-stat:nth-child(1) .out-stat-label { color: var(--magenta); }
.out-stat:nth-child(2) .out-stat-num { background: linear-gradient(120deg, var(--magenta), #C800FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.out-stat:nth-child(2) .out-stat-label { color: #D85AFF; }
.out-stat:nth-child(3) .out-stat-num { background: linear-gradient(120deg, #C800FF, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.out-stat:nth-child(3) .out-stat-label { color: var(--cyan); }
.out-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.out-stat-desc { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.55; font-weight: 300; }
.out-stat-desc strong { color: var(--white); font-weight: 500; }
.out-stays { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 44px 0 0; border-top: 0.5px solid rgba(255,255,255,0.08); }
.out-stays-head { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--magenta); margin-bottom: 16px; }
.out-stays-h { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 12px; color: var(--white); }
.out-stays-body { font-size: 14.5px; color: rgba(255,255,255,0.65); line-height: 1.65; font-weight: 300; }
.out-stays-body strong { color: var(--white); font-weight: 500; }

/* ── SCREENS GRID + LAPTOP CHROME ── */
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; max-width: 1180px; margin: 0 auto; }
.screen { position: relative; display: flex; flex-direction: column; gap: 22px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.screen:hover { transform: translateY(-4px); }
.screen figcaption { padding: 0 6px; }
.screen-tag { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 8px; }
.screen-name { font-size: 22px; font-weight: 800; color: var(--white); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 6px; }
.screen-desc { font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.55; font-weight: 300; }

/* MacBook-style laptop frame, pure CSS */
.laptop { position: relative; padding: 14px 10px 0; background: linear-gradient(180deg, #1a1a26 0%, #0c0c16 100%); border-radius: 16px 16px 4px 4px; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.75), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08); transition: box-shadow 0.4s ease; }
.laptop::before { /* camera dot in top bezel */ content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2a2a36; box-shadow: inset 0 0 1px rgba(255,255,255,0.5), 0 0 4px rgba(0,0,0,0.6); }
.laptop-screen { position: relative; border-radius: 3px; overflow: hidden; background: #05040F; aspect-ratio: 14 / 10; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
.laptop-screen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.screen:hover .laptop-screen img { transform: scale(1.03); }
.laptop-base { position: relative; margin: 8px -22px 0; height: 16px; background: linear-gradient(180deg, #1a1a26 0%, #06060c 100%); border-radius: 0 0 18px 18px; box-shadow: 0 14px 32px -10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); }
.laptop-base::before { /* center notch indent */ content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26%; max-width: 140px; height: 5px; background: #05040F; border-radius: 0 0 8px 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }
.screen:hover .laptop { box-shadow: 0 36px 72px -24px rgba(232,24,90,0.35), 0 0 0 0.5px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.10); }

/* ── HACKATHON CROSSLINK ── */
#hackathon-link { background: linear-gradient(180deg, var(--navy) 0%, #0E0930 100%); padding: 130px 48px; border-top: 0.5px solid rgba(255,255,255,0.04); border-bottom: 0.5px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; }
#hackathon-link::before { content: ''; position: absolute; top: -100px; right: -100px; width: 600px; height: 500px; background: radial-gradient(ellipse, rgba(255,184,0,0.10) 0%, transparent 65%); pointer-events: none; }
.hk-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.hk-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #FFC53D; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 10px; }
.hk-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FFC53D; box-shadow: 0 0 8px #FFC53D; }
.hk-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: clamp(40px, 5.5vw, 80px); line-height: 0.98; letter-spacing: -2px; margin-bottom: 22px; }
.hk-title span { background: linear-gradient(120deg, #FFC53D 10%, #FF8A00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hk-sub { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.65); font-weight: 300; margin-bottom: 30px; max-width: 520px; }
.hk-sub b { color: var(--white); font-weight: 500; }
.hk-meta { display: flex; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
.hk-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hk-meta-num { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: 28px; color: #FFC53D; line-height: 1; }
.hk-meta-lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 600; }
.hk-link { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: rgba(255,184,0,0.10); border: 1px solid rgba(255,184,0,0.50); border-radius: 6px; color: #FFC53D; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.hk-link:hover { background: rgba(255,184,0,0.20); border-color: #FFC53D; transform: translateY(-1px); }
.hk-link svg { transition: transform 0.25s; }
.hk-link:hover svg { transform: translateX(4px); }
.hk-art { position: relative; display: flex; justify-content: center; align-items: center; }
.hk-dragon { width: 100%; max-width: 460px; filter: drop-shadow(0 0 60px rgba(232,24,90,0.40)) drop-shadow(0 0 120px rgba(0,180,216,0.25)); animation: float-y 9s ease-in-out infinite; }
@media (max-width: 960px) {
  #hackathon-link { padding: 80px 24px; }
  .hk-inner { grid-template-columns: 1fr; gap: 32px; }
  .hk-dragon { max-width: 280px; }
  .hk-meta { gap: 20px; }
}

/* ── CTA ── */
#cta { background: var(--black); padding: 120px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(232,24,90,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,216,0.025) 1px, transparent 1px); background-size: 48px 48px; }
.cta-glow { position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 450px; background: radial-gradient(ellipse, rgba(232,24,90,0.14) 0%, rgba(0,180,216,0.07) 50%, transparent 70%); pointer-events: none; }
.cta-content { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.cta-title { font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 0.95; letter-spacing: -1.5px; margin-bottom: 18px; }
.cta-title span { color: var(--magenta); }
.cta-sub { font-size: 16px; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 52px; }
.cta-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto; }
.cta-path { border-radius: 10px; padding: 28px; text-align: left; }
.cta-path-a { background: var(--magenta); }
.cta-path-b { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.12); }
.cta-path-label { font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; opacity: 0.7; }
.cta-path-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.cta-path-desc { font-size: 12px; line-height: 1.55; opacity: 0.75; margin-bottom: 20px; }
.cta-path-link { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
.cta-path-a .cta-path-link { border-color: rgba(255,255,255,0.5); }

footer { background: rgba(0,0,0,0.4); padding: 26px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 0.5px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.footer-meta { display: flex; flex-direction: column; gap: 2px; }
.footer-logo { display: inline-flex; align-items: center; text-decoration: none; opacity: 0.85; transition: opacity 0.2s ease; }
.footer-logo:hover { opacity: 1; }
.footer-logo img { height: 28px; width: auto; display: block; }
.footer-text { font-size: 11px; color: rgba(255,255,255,0.22); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 11px; color: rgba(255,255,255,0.22); text-decoration: none; }
.footer-links a:hover { color: var(--cyan); }
.footer-powered { display: inline-flex; align-items: center; gap: 18px; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.footer-powered .label { display: inline-block; }
.footer-brands { display: inline-flex; align-items: center; gap: 20px; }
.footer-brands img { width: auto; opacity: 0.85; transition: opacity 0.2s ease; display: block; }
.footer-brands img:hover { opacity: 1; }
.footer-brands .brand-fw  { height: 18px; }
.footer-brands .brand-aws { height: 22px; opacity: 0.95; }
.footer-brands .divider { width: 1px; height: 22px; background: rgba(255,255,255,0.18); }

/* ── BOLD STATEMENT (#idea) ── */
#idea { background: var(--black); padding: 180px 48px; position: relative; overflow: hidden; border-top: 0.5px solid rgba(255,255,255,0.04); border-bottom: 0.5px solid rgba(255,255,255,0.04); }
#idea::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 70%; height: 70%; background: radial-gradient(ellipse, rgba(232,24,90,0.08) 0%, rgba(0,180,216,0.05) 45%, transparent 75%); pointer-events: none; }
.idea-dragon { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: 48%; max-width: 720px; pointer-events: none; opacity: 0.55; filter: drop-shadow(0 0 60px rgba(232,24,90,0.4)) drop-shadow(0 0 120px rgba(200,0,255,0.25)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); z-index: 1; animation: float-y 12s ease-in-out infinite; }
.idea-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.idea-title { font-size: clamp(44px, 8vw, 120px); font-weight: 800; line-height: 0.95; letter-spacing: -2.5px; margin-bottom: 32px; color: var(--white); }
.idea-title em { font-style: normal; background: linear-gradient(120deg, var(--magenta), #C800FF 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.idea-sub { font-size: clamp(17px, 2vw, 22px); line-height: 1.6; color: rgba(255,255,255,0.65); font-weight: 300; max-width: 720px; }
.idea-em { color: var(--magenta); font-weight: 600; }

/* ── SECTION RHYTHM (unified vertical padding) ── */
#idea, #tiers, #platform, #outcomes, #dragons, #cta, #hackathon-link { padding: 120px 48px; }
#tiers { padding-top: 92px; }
.tiers-header, .platform-header, .out-header { margin-bottom: 56px; }
.section-label, .out-eyebrow, .dragons-eyebrow, .hk-eyebrow, .di-eyebrow { margin-bottom: 20px; }
.tiers-title, .platform-title, .cta-title { font-size: clamp(40px, 6vw, 80px); font-weight: 800; line-height: 0.95; letter-spacing: -2px; }
.cta-title { font-size: clamp(48px, 8vw, 110px); }

/* ── MOTION (tasteful) ── */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift-y { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 12px)); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulse-soft { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }

/* Ambient sparkle drift (site-wide) */
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 110vh, 0) rotate(0deg); }
  100% { transform: translate3d(-40px, -10vh, 0) rotate(120deg); }
}
@keyframes ambient-twinkle {
  0%, 100% { opacity: 0;  filter: brightness(1); }
  6%, 94%  { opacity: var(--p-opacity, 0.85); }
  15%      { opacity: calc(var(--p-opacity, 0.85) * 0.5); }
  30%      { opacity: var(--p-opacity, 0.85); filter: brightness(1.4); }
  45%      { opacity: calc(var(--p-opacity, 0.85) * 0.6); }
  60%      { opacity: var(--p-opacity, 0.85); filter: brightness(1.5); }
  75%      { opacity: calc(var(--p-opacity, 0.85) * 0.7); }
}
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; mix-blend-mode: screen; }
.ambient i {
  position: absolute;
  display: block;
  width: var(--p-size, 4px); height: var(--p-size, 4px);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor, 0 0 32px currentColor;
  animation: ambient-drift var(--p-dur, 32s) linear infinite, ambient-twinkle calc(var(--p-dur, 32s) * 0.5) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s), var(--p-delay, 0s);
  will-change: transform, opacity;
}
/* Sparkle 4-point star variant */
.ambient i.spark {
  border-radius: 0;
  background: currentColor;
  width: var(--p-size, 8px); height: var(--p-size, 8px);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  box-shadow: 0 0 12px currentColor, 0 0 28px currentColor;
}
.ambient i.pink   { color: #FF3D7F; --p-opacity: 0.90; }
.ambient i.blue   { color: #00B4FF; --p-opacity: 0.85; }
.ambient i.purple { color: #C24DFF; --p-opacity: 0.85; }
.ambient i.violet { color: #9B6CFF; --p-opacity: 0.80; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* If JS is disabled, never hide content. */
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* Hero dragon drifts gently */
.hero-dragon { animation: float-y 9s ease-in-out infinite; }
.dragons-bg { animation: drift-y 12s ease-in-out infinite; }

/* Gradient em words shimmer */
.hero-title em, .idea-title em, .dragons-title em, .out-title em {
  background-size: 220% auto !important;
  animation: shimmer 12s linear infinite;
}

/* Tier cards lift */
.tier-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.tier-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); box-shadow: 0 20px 40px -22px rgba(232,24,90,0.4); }

/* Screen card hover is handled via .laptop above */

/* CTA path cards */
.cta-path { transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }
.cta-path:hover { transform: translateY(-4px); }
.cta-path-a:hover { box-shadow: 0 28px 60px -30px rgba(232,24,90,0.7); }
.cta-path-b:hover { box-shadow: 0 28px 60px -30px rgba(0,180,216,0.5); }
.cta-path-link { display: inline-flex; align-items: center; gap: 8px; }
.cta-path-link::after { content: '→'; transition: transform 0.3s ease; }
.cta-path:hover .cta-path-link::after { transform: translateX(5px); }

/* Primary button shine sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transition: left 0.55s ease; }
.btn-primary:hover::after { left: 100%; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--magenta), #C800FF 50%, var(--cyan)); transform-origin: left center; transform: scaleX(0); z-index: 200; pointer-events: none; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1s !important; scroll-behavior: auto !important; }
}

@media (max-width: 960px) {
  nav { padding: 16px 24px; }
  .nav-links { display: none; }
  #hero, #idea, #tiers, #platform, #outcomes, #dragons, #cta { padding: 80px 24px; }
  .out-stats { grid-template-columns: 1fr; }
  .out-stays { grid-template-columns: 1fr; gap: 32px; }
  .hero-title, .idea-title, .dragons-title { letter-spacing: -1.5px; }
  .hero-dragon { width: 115%; right: -25%; top: auto; bottom: -8%; transform: none; opacity: 0.45; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, #000 35%, transparent 85%); }
  .hero-aura { width: 130%; right: -25%; opacity: 0.5; }
  .tiers-dragon { width: 70%; max-width: 380px; top: 6%; opacity: 0.85; }
  .tiers-aura { width: 130%; top: 22%; }
  .tiers-header { padding-top: 0; }
  .dragon-intro { grid-template-columns: 1fr; gap: 24px; min-height: 0; margin-bottom: 56px; padding-top: 24px; }
  .dragon-intro .di-art { order: 1; min-height: 320px; }
  .dragon-intro .di-copy { order: 2; }
  .dragon-intro .di-dragon { max-width: 280px; }
  .dragons-bg { width: 130%; right: -30%; top: auto; bottom: 0; transform: none; opacity: 0.55; }
  .idea-dragon { width: 130%; right: -30%; opacity: 0.35; }
  .tiers-grid { grid-template-columns: 1fr; }
  .cta-paths { grid-template-columns: 1fr; }
  .screens { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: repeat(3, 1fr); }
  footer { flex-direction: column; gap: 16px; text-align: center; }
  .footer-links { justify-content: center; }
}
/* ════════════ CONSISTENT TYPE SCALE ════════════ */
:root{
  --fs-display-xl: clamp(56px, 8.4vw, 122px);  /* hero only */
  --fs-display-l:  clamp(42px, 6.4vw, 90px);    /* every section headline */
  --fs-display-m:  clamp(26px, 2.4vw, 36px);    /* card / slide names */
  --fs-eyebrow:    12px;
  --ls-eyebrow:    2.5px;
  --fs-lede:       clamp(18px, 1.5vw, 21px);    /* section sub-copy */
  --fs-body:       16px;
}
.hero-title{ font-size:var(--fs-display-xl)!important; line-height:0.9!important; letter-spacing:-3px!important; font-weight:900!important; }
.tiers-title,.platform-title,.out-title,.dragons-title,.cta-title,.hk-title,.idea-title,.dragon-intro h3{
  font-size:var(--fs-display-l)!important; line-height:0.95!important; letter-spacing:-2.2px!important; font-weight:900!important;
}
.section-label,.out-eyebrow,.dragons-eyebrow,.hk-eyebrow,.di-eyebrow,.out-stays-head,.screen-tag,.tier-num,.hero-eyebrow{
  font-size:var(--fs-eyebrow)!important; letter-spacing:var(--ls-eyebrow)!important; font-weight:700!important;
}
.hero-sub,.out-sub,.dragons-body,.idea-sub,.cta-sub,.hk-sub,.tiers-sub,.platform-sub{
  font-size:var(--fs-lede)!important; line-height:1.6!important;
}
.tier-name,.screen-name{ font-size:var(--fs-display-m)!important; line-height:1.05!important; letter-spacing:-0.6px!important; }

/* ════════════ HERO LAYOUT (stacked + slider) ════════════ */
#hero{ flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:150px; }
#hero .hero-dragon{ top:24%; width:50%; max-width:820px; opacity:0.7; }
.hero-content{ width:100%; max-width:760px; margin-bottom:8px; }
.hero-title{ margin-bottom:40px; }
.hero-lead{ font-size:clamp(20px,2.1vw,27px); line-height:1.42; color:#fff; font-weight:500; max-width:660px; margin-bottom:20px; }
.hero-sub{ max-width:620px; color:rgba(255,255,255,0.62); margin-bottom:40px; }
.hero-sub b{ color:#fff; font-weight:600; }

/* ════════════ REUSABLE SLIDER ════════════ */
.slider{ position:relative; width:100%; }
.slider-viewport{ overflow:hidden; }
.slider-track{ display:flex; transition:transform .55s cubic-bezier(0.22,1,0.36,1); }
.slide{ flex:0 0 100%; min-width:100%; }
.slider-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; }
.slider-dots{ display:flex; gap:10px; align-items:center; }
.slider-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,0.22); border:none; cursor:pointer; padding:0; transition:width .3s ease, background .3s ease; }
.slider-dot.active{ width:28px; background:var(--magenta); }
.slider-arrows{ display:flex; gap:8px; }
.slider-arrow{ width:46px; height:46px; border-radius:50%; border:0.5px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s, transform .2s; }
.slider-arrow:hover{ border-color:var(--magenta); background:rgba(232,24,90,0.12); transform:translateY(-1px); }
.slider-arrow svg{ width:15px; height:15px; }

/* Hero journey slider */
.hero-slider-wrap{ width:100%; max-width:1180px; margin:48px auto 0; position:relative; z-index:3; }
.hero-slider-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.hero-slider-head .hero-eyebrow{ color:var(--magenta); white-space:nowrap; }
.hero-slider-head .sep{ flex:1; height:1px; background:linear-gradient(90deg, rgba(232,24,90,0.45), transparent); }
.hslide{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:40px; align-items:center; background:rgba(10,8,32,0.72); backdrop-filter:blur(8px); border:0.5px solid rgba(255,255,255,0.10); border-radius:18px; padding:40px 44px; position:relative; overflow:hidden; }
.hslide::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.hslide.t1::before{ background:var(--cyan); }
.hslide.t2::before{ background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
.hslide.t3::before{ background:var(--magenta); }
.hslide-l{ display:flex; flex-direction:column; align-items:flex-start; }
.hslide-num{ font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; font-weight:700; margin-bottom:14px; }
.hslide.t1 .hslide-num{ color:var(--cyan); }
.hslide.t2 .hslide-num{ color:#C24DFF; }
.hslide.t3 .hslide-num{ color:var(--magenta); }
.hslide-name{ font-weight:900; font-size:clamp(38px,4.2vw,60px); line-height:0.96; letter-spacing:-1.4px; margin-bottom:18px; }
.hslide-cred{ font-size:12px; font-weight:600; padding:9px 14px; border-radius:6px; display:inline-block; }
.hslide.t1 .hslide-cred{ color:var(--cyan); background:rgba(0,180,216,0.1); border:0.5px solid rgba(0,180,216,0.2); }
.hslide.t2 .hslide-cred{ color:#fff; background:rgba(255,255,255,0.06); border:0.5px solid rgba(255,255,255,0.12); }
.hslide.t3 .hslide-cred{ color:var(--magenta); background:rgba(232,24,90,0.1); border:0.5px solid rgba(232,24,90,0.25); }
.hslide-lede{ font-size:17px; line-height:1.5; color:rgba(255,255,255,0.82); margin-bottom:20px; font-weight:400; }
.hslide-lede b{ color:#fff; font-weight:600; }
.hslide-points{ display:grid; gap:11px; }
.hslide-point{ font-size:14px; line-height:1.45; display:grid; grid-template-columns:16px 1fr; gap:10px; font-weight:300; }
.hslide-point::before{ content:''; width:5px; height:5px; border-radius:50%; margin-top:7px; }
.hslide.t1 .hslide-point::before{ background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.hslide.t2 .hslide-point::before{ background:#C24DFF; box-shadow:0 0 6px #C24DFF; }
.hslide.t3 .hslide-point::before{ background:var(--magenta); box-shadow:0 0 6px var(--magenta); }
.hslide-point span{ color:rgba(255,255,255,0.66); }
.hslide-point b{ color:#fff; font-weight:500; }

/* Platform slider */
.platform-slider-wrap{ width:100%; max-width:1180px; margin:0 auto; }
.platform-slide{ display:grid; grid-template-columns:1.4fr 1fr; gap:52px; align-items:center; }
.platform-slide .ps-copy .screen-tag{ color:var(--cyan); }
.platform-slide .ps-name{ font-weight:900; font-size:clamp(30px,3.2vw,46px); line-height:1; letter-spacing:-0.9px; margin:10px 0 16px; }
.platform-slide .ps-desc{ font-size:17px; line-height:1.6; color:rgba(255,255,255,0.7); font-weight:300; max-width:420px; }

@media (max-width:960px){
  #hero{ padding-top:120px; }
  #hero .hero-dragon{ width:120%; right:-30%; top:auto; bottom:-6%; opacity:0.4; }
  .hslide{ grid-template-columns:1fr; gap:22px; padding:30px 26px; }
  .platform-slide{ grid-template-columns:1fr; gap:26px; }
  .platform-slide .ps-copy{ order:2; }
  .hero-slider-head .hero-eyebrow{ white-space:normal; }
}
/* ── READABILITY: lift small text to a sensible floor ── */
:root{ --fs-lede:19px; --fs-body:16px; --fs-eyebrow:12px; }
.out-stat-desc{ font-size:15.5px; line-height:1.6; }
.out-stays-body{ font-size:16.5px; line-height:1.65; }
.out-stat-label{ font-size:12.5px; }
.hslide-lede{ font-size:18.5px; }
.hslide-point{ font-size:15.5px; }
.hslide-num{ font-size:12px !important; }
.platform-slide .ps-desc{ font-size:18.5px; }
.db b{ font-size:17px; }
.db i{ font-size:13px; }
.cta-path-title{ font-size:19px; }
.cta-path-desc{ font-size:14px; line-height:1.6; }
.cta-path-label{ font-size:11px; letter-spacing:2.5px; }
.hk-meta-lbl{ font-size:11.5px; }
.hk-sub{ font-size:18px; }
.screen-tag{ font-size:12px !important; }
.nav-links a{ font-size:12px; }
.footer-text, .footer-links a{ font-size:12px; }
.tiers-sub, .platform-sub{ font-size:16px !important; }
.dragons-bar .db{ padding:18px 16px; }

/* ════════════ MOBILE / PHONE ( ≤600px ) ════════════ */
@media (max-width:600px){
  nav{ padding:14px 18px; }
  .nav-cta{ white-space:nowrap; padding:9px 16px; font-size:11px; }
  .nav-logo img{ height:30px; }

  #hero,#idea,#tiers,#platform,#outcomes,#dragons,#cta,#hackathon-link{ padding-left:20px !important; padding-right:20px !important; }
  #idea,#platform,#outcomes,#dragons,#cta,#hackathon-link{ padding-top:64px !important; padding-bottom:64px !important; }
  #hero{ padding-top:100px !important; min-height:auto !important; }
  #tiers{ padding-top:52px !important; padding-bottom:64px !important; }

  .hero-title{ font-size:clamp(38px,11.5vw,56px) !important; letter-spacing:-1.2px !important; line-height:0.96 !important; }
  .tiers-title,.platform-title,.out-title,.dragons-title,.cta-title,.hk-title,.idea-title,.dragon-intro h3{
    font-size:clamp(29px,8vw,42px) !important; letter-spacing:-0.8px !important; line-height:1.0 !important;
  }
  .hslide-name{ font-size:clamp(32px,9vw,42px) !important; }
  .platform-slide .ps-name{ font-size:clamp(26px,7.5vw,34px) !important; }

  .hero-lead{ font-size:18px !important; max-width:100%; }
  .hero-sub{ font-size:16px !important; }
  .hero-actions{ gap:18px; flex-wrap:wrap; }

  .hero-slider-wrap{ margin-top:34px; }
  .hslide{ padding:24px 20px; gap:18px; }
  .hslide-lede{ font-size:17px !important; }
  .hslide-point{ font-size:14.5px !important; }
  .slider-arrow{ width:42px; height:42px; }
  .slider-nav{ margin-top:22px; }

  .dragon-intro{ gap:10px !important; margin-bottom:36px !important; padding-top:8px !important; }
  .dragon-intro .di-copy{ order:1 !important; }
  .dragon-intro .di-art{ order:2 !important; min-height:0 !important; }
  .dragon-intro .di-dragon{ max-width:190px !important; }
  .dragon-intro p{ font-size:16px; }

  .out-stat{ padding:26px 22px; }
  .out-stays{ gap:26px; }
  .out-stays-h{ font-size:21px !important; }

  .cta-paths{ gap:14px; }
  .cta-path{ padding:24px 22px; }

  .hk-meta{ gap:16px 24px; }
  .hk-meta-num{ font-size:24px; }

  .dragons-bg{ width:74%; max-width:340px; top:2%; opacity:0.4; }
  .ladder{ grid-template-columns:repeat(2,1fr); }
  .btn-primary{ padding:16px 24px; }
}

/* ===AIF-SNAP-START=== */
/* Full-screen section flow: each section fills the viewport and snaps one at a time.
   Desktop only (>=768px wide & >=560px tall); mobile keeps natural scrolling.
   To soften snapping, change 'mandatory' to 'proximity'. To revert, delete this block. */
@media (min-width: 768px) and (min-height: 560px) {
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  #hero, #idea, #tiers, #platform, #outcomes, #dragons, #hackathon-link, #cta {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  #idea, #tiers, #platform, #outcomes, #dragons, #hackathon-link, #cta {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* ===AIF-SNAP-END=== */


/* ==HERO-V2-START== */
/* ===================================================================
   HERO V2 — full-screen 3-page slider (Message / Missing majority / Missions)
   Auto-advancing horizontal slider; reuses the [data-slider] engine.
=================================================================== */
#hero.hero-v2.hero-slides{ padding:0 !important; min-height:100vh; height:100vh; overflow:hidden; position:relative; }

/* co-branding in nav */
.nav-cobrand{ display:inline-flex; align-items:center; gap:14px; margin-left:auto; margin-right:26px; }
.nav-cobrand img{ height:22px; width:auto; display:block; opacity:.92; }
.nav-cobrand .nx{ color:rgba(255,255,255,.4); font-size:13px; }
@media (max-width:760px){ .nav-cobrand{ display:none; } }

/* full-screen slider frame */
.hero-v2 .hslides, .hero-v2 .hslides .slider, .hero-v2 .hslides .slider-viewport{ height:100vh; }
.hero-v2 .hslides .slider-track{ height:100vh; }
.hero-v2 .hslides .slide{ flex:0 0 100%; min-width:100%; height:100vh; }
.hero-v2 .hpage{ height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-v2 .hpage-inner{ position:relative; z-index:3; width:100%; max-width:1340px; margin:0 auto; padding:110px 56px 90px; }
.hero-v2 .hpage-inner.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* per-page ambient backgrounds */
.hero-v2 .hpage.p1{ background:transparent; }
.hero-v2 .hpage.p2{ background:transparent; }
.hero-v2 .hpage.p3{ background:radial-gradient(ellipse 70% 60% at 50% 38%, rgba(200,0,255,.14) 0%, transparent 62%), var(--navy); }

/* page actions */
.hero-v2 .hpage-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:38px; }
.hero-v2 .btn-watch{ display:inline-flex; align-items:center; gap:11px; background:#0c0a1c; border:1px solid rgba(255,255,255,.12); color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:17px 24px; border-radius:6px; text-decoration:none; transition:border-color .2s ease, background .2s ease; }
.hero-v2 .btn-watch:hover{ border-color:rgba(255,255,255,.3); background:#141127; }
.hero-v2 .btn-watch .bw-play{ font-size:9px; }

/* PAGE 0 — dragon + climb (combined) */
.hero-v2 .hpage.pC{ background:transparent; }
/* persistent background video behind ALL slides */
.hero-v2 .hero-bgvideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-v2 .hero-bgoverlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,4,15,.9) 0%, rgba(5,4,15,.74) 42%, rgba(5,4,15,.6) 78%, rgba(5,4,15,.55) 100%),
    linear-gradient(0deg, rgba(5,4,15,.82) 0%, transparent 48%),
    radial-gradient(ellipse 80% 70% at 80% 24%, rgba(232,24,90,.14) 0%, transparent 62%);
}
.hero-v2 .hslides{ position:relative; z-index:2; }
.hero-v2 .pC .hpage-inner{ position:relative; z-index:3; padding-top:96px; padding-bottom:60px; }
.hero-v2 .pc-portal{ position:absolute; right:2%; top:16%; width:min(40vw,520px); aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:1; background:radial-gradient(circle, transparent 32%, rgba(232,24,90,.42) 44%, rgba(200,0,255,.26) 54%, rgba(0,180,216,.14) 64%, transparent 74%); filter:blur(10px); animation:hero-aura-pulse 7s ease-in-out infinite; }
.hero-v2 .pc-portal::after{ content:''; position:absolute; inset:13%; border-radius:50%; background:radial-gradient(circle, rgba(5,4,15,.92) 55%, transparent 72%); }
.hero-v2 .pc-dragon{ position:absolute; right:-2%; top:6%; width:min(42%,540px); height:auto; z-index:1; opacity:.6; mix-blend-mode:screen; filter:drop-shadow(0 0 45px rgba(232,24,90,.35)) drop-shadow(0 0 85px rgba(0,180,216,.2)); animation:float-y 9s ease-in-out infinite; pointer-events:none; }
.hero-v2 .pC-title{ font-size:clamp(40px,5vw,76px); font-weight:900; line-height:.96; letter-spacing:-2px; color:#fff; margin-bottom:14px; max-width:760px; }
.hero-v2 .pC-title em{ font-style:normal; background:linear-gradient(120deg,var(--magenta),#C800FF 55%,var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-v2 .pC-sub{ font-size:clamp(15px,1.5vw,20px); line-height:1.5; color:rgba(255,255,255,.7); font-weight:300; max-width:640px; margin-bottom:26px; }
.hero-v2 .pC-sub b{ color:#fff; font-weight:600; }
.hero-v2 .pC .hpage-actions{ margin-top:30px; }

/* combined slide: text left (large) + tiers right */
.hero-v2 .pc-grid{ display:grid; grid-template-columns:1fr 0.84fr; gap:52px; align-items:center; }
.hero-v2 .pc-left .pC-title{ font-size:clamp(48px,5.8vw,94px); line-height:.94; margin-bottom:18px; max-width:none; }
.hero-v2 .pc-left .pC-sub{ max-width:520px; }
.hero-v2 .climb.vert{ display:flex; flex-direction:column; gap:8px; max-width:none; margin:0; }
.hero-v2 .climb.vert .tcard{ margin-top:0 !important; min-height:0; padding:16px 20px 14px 26px; }
.hero-v2 .climb.vert .tcard{ min-height:178px; }
.hero-v2 .climb.vert .tcard .tc-name{ font-size:26px; margin-bottom:6px; }
.hero-v2 .climb.vert .tcard .tc-desc{ margin-bottom:10px; min-height:42px; }
.hero-v2 .climb.vert .climb-link{ transform:rotate(90deg); margin:0; align-self:center; padding:2px 0; }
@media (max-width:980px){
  .hero-v2 .pc-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:820px){
  .hero-v2 .pc-dragon, .hero-v2 .pc-portal{ opacity:.35; }
}

/* PAGE 1 — message */
.hero-v2 .hero-eyebrow-row{ display:flex; align-items:center; gap:18px; margin-bottom:30px; }
.hero-v2 .he-line{ width:46px; height:2px; background:var(--magenta); flex:0 0 auto; }
.hero-v2 .he-text{ font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.9); }
.hero-v2 .he-text i{ color:var(--magenta); font-style:normal; margin:0 4px; }
.hero-v2 .p1 .hero-title{ font-size:clamp(32px,3.9vw,60px) !important; line-height:1.08 !important; letter-spacing:-1px !important; font-weight:900 !important; color:#fff !important; max-width:1060px; margin:0 !important; }
.hero-v2 .hero-title em{ font-style:normal; background:linear-gradient(100deg,#2E8BFF 0%, #C800FF 55%, var(--magenta) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-v2 .hero-title .ul-wave, .hero-v2 .hero-title .ul-dot{ text-decoration:none; }

/* PAGE 2 — missing majority */
.hero-v2 .p2-label{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#fff; margin-bottom:8px; }
.hero-v2 .p2-big{ font-size:clamp(120px,22vw,300px); font-weight:900; line-height:.86; letter-spacing:-8px; margin-bottom:18px; background:linear-gradient(120deg,#FF2D2D,#E8185A 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-v2 .p2-desc{ font-size:clamp(18px,1.8vw,24px); line-height:1.6; color:rgba(255,255,255,.74); font-weight:300; max-width:700px; margin-bottom:34px; }
.hero-v2 .p2-desc b{ color:#fff; font-weight:600; }
.hero-v2 .hpage-inner.center .btn-primary{ align-self:center; }

/* PAGE 3 — missions */
.hero-v2 .hj-eyebrow{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; }
.hero-v2 .hj-eyebrow span{ color:rgba(255,255,255,.5); }
.hero-v2 .p3-title{ font-size:clamp(34px,4vw,60px); font-weight:900; line-height:1.0; letter-spacing:-1.5px; color:#fff; margin-bottom:16px; }
.hero-v2 .p3-title em{ font-style:normal; background:linear-gradient(120deg,var(--magenta),#C800FF 60%,var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-v2 .p3-sub{ font-size:clamp(15px,1.5vw,19px); line-height:1.55; color:rgba(255,255,255,.65); font-weight:300; max-width:720px; margin-bottom:36px; }
.hero-v2 .p3-sub b{ color:#fff; font-weight:600; }
/* THE CLIMB — three tiers */
.hero-v2 .climb{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:0; max-width:1180px; margin:6px 0 0; }
.hero-v2 .tcard{ position:relative; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px 20px 16px 28px; display:flex; flex-direction:column; min-height:200px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hero-v2 .tcard.t1{ margin-top:30px; }
.hero-v2 .tcard.t2{ margin-top:15px; }
.hero-v2 .tcard.t3{ margin-top:0; }
.hero-v2 .tcard:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.2); box-shadow:0 24px 50px -28px rgba(0,0,0,.8); }
.hero-v2 .tc-rail{ position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:3px; }
.hero-v2 .t1 .tc-rail{ background:linear-gradient(180deg,#00B4D8,#2E8BFF); }
.hero-v2 .t2 .tc-rail{ background:linear-gradient(180deg,#FF2D2D,#E8185A); }
.hero-v2 .t3 .tc-rail{ background:linear-gradient(180deg,#C800FF,#7A3CFF); }
.hero-v2 .tc-tier{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.hero-v2 .t1 .tc-tier{ color:#2EC5FF; }
.hero-v2 .t2 .tc-tier{ color:#FF4D6F; }
.hero-v2 .t3 .tc-tier{ color:#C77BFF; }
.hero-v2 .tc-name{ font-size:30px; font-weight:900; letter-spacing:-1px; color:#fff; line-height:1; margin-bottom:8px; }
.hero-v2 .tc-tag{ font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:14px; }
.hero-v2 .tc-desc{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.62); font-weight:300; margin-bottom:14px; }
.hero-v2 .tc-earn{ font-size:12.5px; color:rgba(255,255,255,.6); margin-bottom:14px; }
.hero-v2 .tc-earn b{ font-weight:800; }
.hero-v2 .t1 .tc-earn b{ color:#2EC5FF; }
.hero-v2 .t2 .tc-earn b{ color:#FF4D6F; }
.hero-v2 .t3 .tc-earn b{ color:#C77BFF; }
.hero-v2 .tc-foot{ margin-top:auto; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.35); padding-top:13px; border-top:1px solid rgba(255,255,255,.07); }
.hero-v2 .climb-link{ align-self:center; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.22); padding:0 6px; margin-top:24px; }
.hero-v2 .climb-link svg{ width:26px; height:26px; }

/* slider nav — centered at bottom */
.hero-v2 .hslides .slider-nav{ position:absolute; bottom:30px; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:center; gap:22px; margin:0; }
.hero-v2 .hslides .slider-arrows{ display:flex; gap:10px; }

/* responsive */
@media (max-width:980px){
  .hero-v2 .climb{ grid-template-columns:1fr; gap:12px; }
  .hero-v2 .tcard{ margin-top:0 !important; min-height:0; }
  .hero-v2 .climb-link{ transform:rotate(90deg); margin:0; }
}
@media (max-width:820px){
  .hero-v2 .hpage-inner{ padding:104px 22px 96px; }
  .hero-v2 .he-text{ font-size:10px; letter-spacing:2px; }
}
/* ==HERO-V2-END== */

/* ===== top bar + bottom tab bar (added) ===== */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:150; display:flex; align-items:center; justify-content:space-between; padding:18px 48px; background:rgba(5,4,15,.9); backdrop-filter:blur(16px); border-bottom:.5px solid rgba(255,255,255,.06); }
.topbar .nav-logo img{ height:32px; width:auto; display:block; }
.topbar .nav-cobrand{ display:inline-flex; align-items:center; gap:14px; }
.topbar .nav-cobrand img{ height:22px; width:auto; display:block; opacity:.92; }
.topbar .nav-cobrand .nx{ color:rgba(255,255,255,.4); font-size:13px; }
.tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:200; display:flex; justify-content:center; gap:6px; padding:9px 16px; background:rgba(7,6,20,.85); backdrop-filter:blur(18px); border-top:.5px solid rgba(255,255,255,.09); }
.tabbar .tab{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:92px; padding:8px 14px; border-radius:12px; text-decoration:none; color:rgba(255,255,255,.55); font-size:11px; font-weight:600; letter-spacing:.5px; transition:color .2s, background .2s; }
.tabbar .tab:hover{ color:#fff; background:rgba(255,255,255,.05); }
.tabbar .tab .tab-ic{ width:24px; height:24px; display:flex; }
.tabbar .tab .tab-ic svg{ width:24px; height:24px; }
.tabbar .tab.is-active{ color:var(--magenta); }
@media (max-width:560px){ .tabbar .tab{ min-width:0; flex:1; padding:8px 4px; } .tabbar .tab span:last-child{ font-size:10px; } .topbar{ padding:14px 18px; } }
.subpage{ padding-top:64px; }

/* fix: prevent global nav{top:0} from stretching the fixed bars full-height */
.tabbar{ top:auto !important; bottom:0 !important; height:auto !important; }
.topbar{ bottom:auto !important; top:0 !important; height:auto !important; }

/* text tabs (no icons) — overrides earlier column tab styling */
.tabbar{ gap:2px !important; padding:0 16px !important; background:rgba(7,6,20,.92) !important; }
.tabbar .tab{ flex-direction:row !important; gap:0 !important; min-width:0 !important; padding:17px 30px !important; border-radius:0 !important; border-top:2px solid transparent !important; font-size:12.5px !important; font-weight:600 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; color:rgba(255,255,255,.5) !important; }
.tabbar .tab:hover{ color:#fff !important; background:rgba(255,255,255,.04) !important; }
.tabbar .tab.is-active{ color:#fff !important; border-top-color:var(--magenta) !important; background:rgba(232,24,90,.07) !important; }
.tabbar .tab .tab-ic{ display:none !important; }
@media (max-width:560px){ .tabbar{ gap:0 !important; } .tabbar .tab{ flex:1 !important; padding:14px 6px !important; font-size:11px !important; letter-spacing:.4px !important; } }

/* combined bottom bar: logo + tabs + co-brand */
.tabbar{ justify-content:space-between !important; align-items:center !important; gap:16px !important; padding:0 24px !important; }
.tabbar .tb-logo{ flex:0 0 auto; display:flex; align-items:center; }
.tabbar .tb-logo img{ height:26px; width:auto; display:block; }
.tabbar .tb-tabs{ display:flex; align-items:stretch; gap:2px; }
.tabbar .tb-brand{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.tabbar .tb-brand img{ height:18px; width:auto; opacity:.9; display:block; }
.tabbar .tb-brand .nx{ color:rgba(255,255,255,.4); font-size:12px; }
@media (max-width:820px){ .tabbar .tb-brand{ display:none; } }
@media (max-width:560px){ .tabbar{ padding:0 10px !important; gap:8px; } .tabbar .tb-logo{ display:none; } .tabbar .tb-tabs{ flex:1; } .tabbar .tab{ flex:1 !important; padding:14px 4px !important; } }

/* ===== FINAL: logos on top bar, tabs-only bottom bar ===== */
.topbar{ position:fixed!important; top:0!important; bottom:auto!important; left:0; right:0; height:auto!important; z-index:150; display:flex!important; align-items:center; justify-content:space-between; padding:16px 36px!important; background:rgba(5,4,15,.92); backdrop-filter:blur(16px); border-top:none!important; border-bottom:.5px solid rgba(255,255,255,.08)!important; }
.topbar .nav-logo img{ height:30px!important; width:auto; display:block; }
.topbar .nav-cobrand{ display:flex!important; align-items:center; gap:14px; margin:0!important; }
.topbar .nav-cobrand img{ height:22px!important; width:auto; opacity:.92; display:block; }
.topbar .nav-cobrand .nx{ color:rgba(255,255,255,.4); font-size:13px; }
.tabbar{ justify-content:center!important; gap:2px!important; padding:0 16px!important; }
.tabbar .tb-logo, .tabbar .tb-brand{ display:none!important; }
.tabbar .tb-tabs{ display:flex!important; align-items:stretch; gap:2px; }
@media (max-width:560px){ .tabbar .tb-tabs{ flex:1; width:100%; } }

/* ===== FINAL v2: nav lives in the bottom bar with the tabs ===== */
.topbar{ display:none !important; }
.tabbar{ justify-content:space-between !important; align-items:center !important; gap:16px !important; padding:0 22px !important; }
.tabbar .tb-logo{ display:flex !important; flex:0 0 auto; align-items:center; }
.tabbar .tb-logo img{ height:26px !important; width:auto; display:block; }
.tabbar .tb-brand{ display:flex !important; flex:0 0 auto; align-items:center; gap:12px; }
.tabbar .tb-brand img{ height:18px !important; width:auto; opacity:.9; display:block; }
.tabbar .tb-brand .nx{ color:rgba(255,255,255,.4); font-size:12px; }
.tabbar .tb-tabs{ display:flex !important; align-items:stretch; gap:2px; }
@media (max-width:860px){ .tabbar .tb-brand{ display:none !important; } }
@media (max-width:560px){ .tabbar .tb-logo{ display:none !important; } .tabbar .tb-tabs{ flex:1; } }
.subpage{ padding-top:0 !important; }

/* ===== FINAL v3: top branding bar + bold bottom tab buttons ===== */
.topbar, .tabbar .tb-logo, .tabbar .tb-brand{ display:none !important; }
.hbrand{ position:fixed; top:0; left:0; right:0; z-index:160; display:flex; align-items:center; justify-content:space-between; padding:20px 36px; pointer-events:none; }
.hbrand .hb-logo{ pointer-events:auto; display:flex; align-items:center; }
.hbrand .hb-logo img{ height:44px; width:auto; display:block; }
.hbrand .hb-cobrand{ pointer-events:auto; display:flex; align-items:center; gap:14px; }
.hbrand .hb-cobrand img{ height:24px; width:auto; opacity:.95; display:block; }
.hbrand .hb-cobrand .x{ color:rgba(255,255,255,.45); font-size:14px; }
.hbottom{ position:fixed; bottom:0; left:0; right:0; z-index:200; display:flex; justify-content:center; padding:12px 16px 14px; background:linear-gradient(0deg, rgba(7,6,20,.97) 60%, rgba(7,6,20,0)); }
.hbottom .tabbar{ position:static !important; top:auto !important; display:flex !important; justify-content:center !important; gap:10px !important; width:100% !important; max-width:980px; padding:0 !important; background:none !important; border-top:none !important; }
.hbottom .tab{ flex:1; display:flex; align-items:center; justify-content:center; padding:15px 16px !important; border-radius:12px !important; border:1px solid rgba(255,255,255,.15) !important; background:rgba(255,255,255,.04) !important; color:rgba(255,255,255,.82) !important; font-size:13px !important; font-weight:800 !important; letter-spacing:1px !important; text-transform:uppercase; text-decoration:none; }
.hbottom .tab:hover{ border-color:#E8185A !important; color:#fff !important; background:rgba(232,24,90,.14) !important; }
.hbottom .tab.is-active{ border-color:#E8185A !important; color:#fff !important; background:rgba(232,24,90,.2) !important; }
@media (max-width:560px){ .hbrand{ padding:14px 16px; } .hbrand .hb-logo img{ height:32px; } .hbrand .hb-cobrand img{ height:18px; } .hbottom .tabbar{ gap:6px !important; } .hbottom .tab{ padding:12px 6px !important; font-size:11px !important; letter-spacing:.4px !important; } }

/* mobile: fit 5 bold tabs */
@media (max-width:560px){ .hbottom .tabbar{ gap:4px !important; } .hbottom .tab{ padding:11px 2px !important; font-size:10px !important; letter-spacing:0 !important; } .hbrand .hb-logo img{ height:30px !important; } }

/* wider bold tabs (sub-pages) */
.hbottom .tab{ min-width:128px !important; padding:14px 30px !important; }
@media (max-width:560px){ .hbottom .tab{ min-width:0 !important; padding:11px 10px !important; } }

/* mobile: 5 tabs fit one row on sub-pages */
@media (max-width:680px){
  .hbottom{ padding:10px 10px 12px !important; }
  .hbottom .tabbar{ flex-wrap:nowrap !important; gap:5px !important; width:100%; }
  .hbottom .tab{ flex:1 1 0 !important; min-width:0 !important; padding:10px 3px !important; font-size:9.5px !important; letter-spacing:0 !important; border-radius:9px !important; }
}
@media (max-width:430px){ .hbrand .hb-cobrand{ display:flex !important; } .hbrand .hb-logo img{ height:28px !important; } }

/* persistent nav doubles as footer */
.hbottom{ flex-wrap:wrap !important; }
.hb-legal{ flex-basis:100%; width:100%; text-align:center; font-size:10px; letter-spacing:.5px; color:rgba(255,255,255,.42); padding-top:8px; }

/* ===== glass control-panel menu bar ===== */
.hbottom{ position:fixed !important; bottom:16px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:auto !important; max-width:calc(100vw - 28px) !important; border-radius:24px !important; padding:10px 12px !important; gap:8px !important; background:rgba(18,16,38,.5) !important; -webkit-backdrop-filter:blur(34px) saturate(1.7) !important; backdrop-filter:blur(34px) saturate(1.7) !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:0 24px 70px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.hbottom .tabbar{ gap:8px !important; }
.hbottom .tab{ min-width:112px !important; padding:13px 24px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.1) !important; background:rgba(255,255,255,.07) !important; color:rgba(255,255,255,.85) !important; }
.hbottom .tab:hover{ background:rgba(255,255,255,.15) !important; color:#fff !important; }
.hbottom .tab.is-active{ background:rgba(232,24,90,.3) !important; border-color:rgba(232,24,90,.55) !important; color:#fff !important; }
.hb-legal{ flex-basis:100%; padding-top:6px !important; }
body{ padding-bottom:120px !important; }
@media (max-width:560px){ .hbottom{ left:14px !important; right:14px !important; transform:none !important; max-width:none !important; } }

/* one-line glass bar on sub-pages + legal above the panel */
.hbottom{ flex-wrap:nowrap !important; }
.hbottom .tab{ min-width:0 !important; padding:13px 20px !important; }
.hb-legal{ position:absolute !important; left:0; right:0; top:-24px !important; bottom:auto !important; flex-basis:auto !important; width:auto !important; padding:0 !important; font-size:10.5px !important; }
@media (max-width:560px){ .hbottom{ flex-wrap:wrap !important; } .hb-legal{ position:static !important; top:auto !important; flex-basis:100% !important; padding-top:6px !important; } }

/* control-panel v3: flush bottom edge + light pill buttons (sub-pages) */
.hbottom{ bottom:0 !important; border-radius:26px 26px 0 0 !important; border-bottom:none !important; padding:20px 26px 26px !important; background:rgba(30,22,60,.4) !important; box-shadow:0 -14px 54px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.hbottom .tab{ border-radius:999px !important; border:none !important; background:rgba(255,255,255,.94) !important; color:#241a3f !important; padding:15px 26px !important; font-weight:800 !important; }
.hbottom .tab:hover{ background:#fff !important; color:#241a3f !important; }
.hbottom .tab.is-active{ background:#E8185A !important; color:#fff !important; }
.hb-legal{ top:-22px !important; }

/* keep tabs on one line (sub-pages) */
.hbottom{ flex-wrap:nowrap !important; }
.hbottom .tabbar{ display:flex !important; flex-wrap:nowrap !important; max-width:none !important; width:auto !important; gap:8px !important; }
.hbottom .tab{ white-space:nowrap !important; padding:13px 20px !important; font-size:12px !important; letter-spacing:.6px !important; }
@media (max-width:620px){ .hbottom, .hbottom .tabbar{ flex-wrap:wrap !important; } }

/* iOS-style frosted-glass buttons (sub-pages) */
.hbottom .tab{ background:rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(10px) saturate(1.4) !important; backdrop-filter:blur(10px) saturate(1.4) !important; border:1px solid rgba(255,255,255,.22) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25) !important; }
.hbottom .tab:hover{ background:rgba(255,255,255,.26) !important; color:#fff !important; }
.hbottom .tab.is-active{ background:rgba(232,24,90,.8) !important; border-color:rgba(255,255,255,.32) !important; color:#fff !important; }

/* MORE glass (sub-pages) */
.hbottom{ background:rgba(255,255,255,.06) !important; -webkit-backdrop-filter:blur(48px) saturate(1.9) !important; backdrop-filter:blur(48px) saturate(1.9) !important; border:1px solid rgba(255,255,255,.22) !important; border-bottom:none !important; box-shadow:0 -18px 60px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.hbottom .tab{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important; -webkit-backdrop-filter:blur(18px) saturate(1.6) !important; backdrop-filter:blur(18px) saturate(1.6) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important; color:#fff !important; }
.hbottom .tab:hover{ background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14)) !important; }
.hbottom .tab.is-active{ background:linear-gradient(180deg, rgba(232,24,90,.72), rgba(232,24,90,.5)) !important; border-color:rgba(255,255,255,.4) !important; }

/* dark grey/black smoked-glass panel (sub-pages) */
.hbottom{ background:rgba(12,12,16,.55) !important; -webkit-backdrop-filter:blur(48px) saturate(1.4) !important; backdrop-filter:blur(48px) saturate(1.4) !important; border:1px solid rgba(255,255,255,.14) !important; border-bottom:none !important; box-shadow:0 -18px 60px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18) !important; }

/* ============================================================
   CANONICAL MENU BAR — identical on every page (homepage = source of truth)
   ============================================================ */
.hbottom{ position:fixed !important; bottom:0 !important; top:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; z-index:99999 !important; display:inline-flex !important; flex-flow:row nowrap !important; align-items:center !important; justify-content:center !important; width:max-content !important; max-width:97vw !important; gap:10px !important; padding:18px 24px 22px !important; border-radius:26px 26px 0 0 !important; border:1px solid rgba(255,255,255,.14) !important; border-bottom:none !important; background:rgba(12,12,16,.55) !important; -webkit-backdrop-filter:blur(48px) saturate(1.4) !important; backdrop-filter:blur(48px) saturate(1.4) !important; box-shadow:0 -18px 60px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.hbottom > *{ flex:0 0 auto !important; width:auto !important; order:0 !important; }
.hbottom .tabbar{ display:flex !important; flex-flow:row nowrap !important; align-items:center !important; width:auto !important; max-width:none !important; gap:8px !important; padding:0 !important; position:static !important; background:none !important; border:none !important; }
.hbottom .tab{ flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; padding:14px 22px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.28) !important; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important; -webkit-backdrop-filter:blur(18px) saturate(1.6) !important; backdrop-filter:blur(18px) saturate(1.6) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 10px -4px rgba(0,0,0,.3) !important; color:#fff !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:.6px !important; text-transform:uppercase !important; text-decoration:none !important; white-space:nowrap !important; }
.hbottom .tab:hover{ background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14)) !important; color:#fff !important; }
.hbottom .tab.is-active{ background:linear-gradient(180deg, rgba(232,24,90,.72), rgba(232,24,90,.5)) !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.hbottom .hb-arrow{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; border:1px solid rgba(255,255,255,.28) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important; }
.hbottom .hb-arrow:hover{ background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14)) !important; }
.hbottom .aegis-launch{ border-radius:999px !important; background:linear-gradient(180deg, rgba(232,24,90,.72), rgba(232,24,90,.5)) !important; border:1px solid rgba(255,255,255,.4) !important; color:#fff !important; }
.hbottom #aegis{ margin-left:0 !important; }
.hb-legal{ position:absolute !important; left:0 !important; right:0 !important; top:-22px !important; bottom:auto !important; flex-basis:auto !important; width:auto !important; text-align:center !important; padding:0 !important; font-size:10.5px !important; letter-spacing:.4px !important; color:rgba(255,255,255,.5) !important; }
@media (max-width:720px){ .hbottom{ flex-wrap:wrap !important; max-width:calc(100vw - 16px) !important; } .hbottom .tabbar{ flex-wrap:wrap !important; } .hb-legal{ position:static !important; top:auto !important; padding-top:6px !important; } }

/* AWS logo slightly larger than the Futureworld mark */
.hb-cobrand img[alt="AWS"]{ height:32px !important; }
@media (max-width:560px){ .hb-cobrand img[alt="AWS"]{ height:22px !important; } }

/* ============================================================
   MOBILE LAYER — everything below is inside media queries only,
   so desktop rendering is completely untouched.
   ============================================================ */
@media (max-width:768px){
  /* ---------- top brand bar ---------- */
  .hbrand{ padding:11px 14px !important; }
  .hbrand .hb-logo img{ height:26px !important; }
  .hb-cobrand{ gap:9px !important; }
  .hb-cobrand img{ height:15px !important; }
  .hb-cobrand img[alt="AWS"]{ height:19px !important; }
  .hb-cobrand .x{ font-size:10px !important; }

  /* ---------- bottom menu: full-width wrapping glass bar ---------- */
  .hbottom{ left:8px !important; right:8px !important; transform:none !important; width:auto !important; max-width:none !important; display:flex !important; flex-flow:row wrap !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:12px 10px 14px !important; border-radius:20px 20px 0 0 !important; }
  .hbottom .tabbar{ display:flex !important; flex-flow:row wrap !important; justify-content:center !important; gap:6px !important; width:100% !important; order:1 !important; }
  .hbottom .tab{ flex:0 0 auto !important; padding:9px 13px !important; font-size:10.5px !important; letter-spacing:.2px !important; border-radius:999px !important; }
  .hbottom .hbottom-nav{ order:2 !important; gap:16px !important; margin-top:2px !important; }
  .hbottom #aegis, .hbottom .aegis-wrap{ order:3 !important; margin:2px 0 0 !important; }
  .hb-legal{ position:static !important; top:auto !important; bottom:auto !important; order:4 !important; flex-basis:100% !important; width:100% !important; text-align:center !important; padding-top:8px !important; font-size:9px !important; }

  /* ---------- HOMEPAGE slider: let tall slides scroll, shrink type ---------- */
  #hero.hero-v2, #hero.hero-v2.hero-slides{ padding:0 !important; }
  .hero-v2 .hpage{ align-items:flex-start !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
  .hero-v2 .hpage-inner{ padding:84px 18px 210px !important; }
  .hero-v2 .pc-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .hero-v2 .pc-left .pC-title{ font-size:31px !important; letter-spacing:-1px !important; margin-bottom:12px !important; }
  .hero-v2 .pC-sub, .hero-v2 .pc-left .pC-sub{ font-size:14px !important; max-width:none !important; }
  .hero-v2 .climb.vert{ gap:8px !important; }
  .hero-v2 .climb.vert .tcard{ padding:13px 15px !important; }
  .hero-v2 .climb.vert .tcard .tc-name{ font-size:18px !important; }
  .hero-v2 .climb.vert .tcard .tc-desc{ -webkit-line-clamp:3 !important; }
  .hero-v2 .climb.vert .climb-link{ display:none !important; }
  .hero-v2 .hero-eyebrow-row{ margin-bottom:18px !important; }
  .hero-v2 .he-line{ width:28px !important; }
  .hero-v2 .he-text{ font-size:9.5px !important; letter-spacing:1.4px !important; }
  .hero-v2 .p1 .hero-title{ font-size:27px !important; line-height:1.14 !important; }
  .hero-v2 .p2-label{ font-size:17px !important; letter-spacing:.5px !important; }
  .hero-v2 .p2-big{ font-size:40vw !important; letter-spacing:-4px !important; margin-bottom:10px !important; }
  .hero-v2 .p2-desc{ font-size:14.5px !important; }
  .hero-v2 .pc-dragon, .hero-v2 .pc-portal{ display:none !important; }
  /* keep the dragon video readable behind text on small screens */
  .hero-v2 .hero-bgoverlay{ background:linear-gradient(0deg, rgba(5,4,15,.96) 0%, rgba(5,4,15,.82) 45%, rgba(5,4,15,.86) 100%) !important; }

  /* ---------- PLATFORM ---------- */
  .plat{ grid-template-columns:1fr !important; gap:22px !important; padding:74px 16px 190px !important; min-height:0 !important; }
  .plat-right{ order:-1 !important; }
  .plat-right::before{ display:none !important; }
  .plat-h1{ font-size:31px !important; }
  .plat-lead{ font-size:14.5px !important; }
  .plat-slider .plat-cap strong{ font-size:18px !important; }
  .pcat b{ font-size:15px !important; }
  .pcat p{ font-size:12.5px !important; }

  /* ---------- JOURNEY (allow scroll on mobile) ---------- */
  body{ }
  .jrn-grid2{ grid-template-columns:1fr !important; gap:22px !important; }
  .jrn-h1{ font-size:31px !important; }
  .jrn-lead{ font-size:14.5px !important; }
  .jrn-cred-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .jcred{ padding:13px !important; }

  /* ---------- PRICING / HACKATHON bundles ---------- */
  .aif-mini-footer{ padding-bottom:180px !important; }
}

@media (max-width:480px){
  .hbottom .tab{ padding:8px 11px !important; font-size:10px !important; }
  .hero-v2 .pc-left .pC-title{ font-size:27px !important; }
  .hero-v2 .p2-big{ font-size:44vw !important; }
  .jrn-cred-grid{ grid-template-columns:1fr !important; }
  .plat-h1, .jrn-h1{ font-size:27px !important; }
}

/* "Futuremakers" wordmark next to the AI logo */
.hbrand .hb-logo{ gap:11px !important; }
.hb-word{ font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif; font-size:18px; font-weight:700; letter-spacing:.3px; color:#fff; text-transform:uppercase; line-height:1; white-space:nowrap; }
@media (max-width:560px){ .hb-word{ font-size:14px; } }

/* ============================================================
   MOBILE v2 — best-in-class phone experience (desktop untouched;
   everything here is inside media queries). Supersedes earlier
   mobile rules via cascade order + !important.
   ============================================================ */
@media (max-width:768px){
  /* ---------- TOP BRAND BAR ---------- */
  .hbrand{ padding:11px 14px !important; }
  .hbrand .hb-logo{ gap:9px !important; }
  .hbrand .hb-logo img{ height:24px !important; }
  .hb-word{ font-size:13px !important; letter-spacing:.2px !important; }
  .hb-cobrand{ gap:7px !important; }
  .hb-cobrand img{ height:13px !important; }
  .hb-cobrand img[alt="AWS"]{ height:17px !important; }
  .hb-cobrand .x{ font-size:9px !important; }

  /* ---------- BOTTOM GLASS MENU ---------- */
  .hbottom{ left:7px !important; right:7px !important; bottom:0 !important; top:auto !important; transform:none !important; width:auto !important; max-width:none !important; display:flex !important; flex-flow:row wrap !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:9px 9px 11px !important; border-radius:18px 18px 0 0 !important; }
  .hbottom .tabbar{ display:flex !important; flex-flow:row wrap !important; justify-content:center !important; gap:6px !important; width:100% !important; order:1 !important; }
  .hbottom .tab{ flex:0 0 auto !important; padding:8px 13px !important; font-size:10.5px !important; letter-spacing:.2px !important; border-radius:999px !important; white-space:nowrap !important; }
  .hbottom .hbottom-nav{ order:2 !important; gap:16px !important; margin-top:3px !important; }
  .hbottom #aegis, .hbottom .aegis-wrap{ order:3 !important; margin:3px 0 0 !important; }
  .hb-legal{ position:static !important; top:auto !important; bottom:auto !important; order:4 !important; flex-basis:100% !important; width:100% !important; text-align:center !important; padding-top:7px !important; font-size:8.5px !important; }

  /* ---------- HOMEPAGE SLIDER ---------- */
  #hero.hero-v2.hero-slides{ padding:0 !important; height:100dvh !important; min-height:100dvh !important; }
  .hero-v2 .hslides, .hero-v2 .hslides .slider, .hero-v2 .hslides .slider-viewport, .hero-v2 .hslides .slider-track, .hero-v2 .hslides .slide{ height:100dvh !important; }
  .hero-v2 .hpage{ height:100dvh !important; align-items:flex-start !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
  .hero-v2 .hpage-inner{ padding:80px 20px 195px !important; }
  /* video readable: darker top+bottom, gentle middle */
  .hero-v2 .hero-bgoverlay{ background:linear-gradient(0deg, rgba(5,4,15,.95) 0%, rgba(5,4,15,.74) 42%, rgba(5,4,15,.86) 100%) !important; }
  .hero-v2 .pc-dragon, .hero-v2 .pc-portal{ display:none !important; }
  /* slide 1 — Slay + tiers */
  .hero-v2 .pc-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .hero-v2 .hj-eyebrow{ font-size:10px !important; margin-bottom:12px !important; }
  .hero-v2 .pc-left .pC-title{ font-size:31px !important; line-height:1.03 !important; letter-spacing:-1px !important; margin-bottom:12px !important; }
  .hero-v2 .pC-sub, .hero-v2 .pc-left .pC-sub{ font-size:15px !important; max-width:none !important; margin-bottom:14px !important; }
  .hero-v2 .pc-left .pC-define{ font-size:14px !important; padding-left:12px !important; }
  .hero-v2 .climb.vert{ gap:10px !important; }
  .hero-v2 .climb.vert .tcard{ padding:15px 16px !important; }
  .hero-v2 .climb.vert .tcard .tc-name{ font-size:19px !important; }
  .hero-v2 .climb.vert .tcard .tc-desc{ font-size:14px !important; line-height:1.45 !important; }
  .hero-v2 .climb.vert .climb-link{ display:none !important; }
  /* slide 2 — AI adoption */
  .hero-v2 .hero-eyebrow-row{ margin-bottom:18px !important; }
  .hero-v2 .he-line{ width:26px !important; }
  .hero-v2 .he-text{ font-size:9.5px !important; letter-spacing:1.3px !important; }
  .hero-v2 .p1 .hero-title{ font-size:27px !important; line-height:1.16 !important; }
  /* slide 3 — 90% */
  .hero-v2 .p2-label{ font-size:16px !important; letter-spacing:.4px !important; }
  .hero-v2 .p2-big{ font-size:44vw !important; letter-spacing:-3px !important; margin-bottom:6px !important; }
  .hero-v2 .p2-desc{ font-size:15px !important; line-height:1.55 !important; }

  /* ---------- JOURNEY (stack: story + highlighted stat, then the trail) ---------- */
  .jrn-hero{ height:auto !important; min-height:100dvh !important; padding:74px 18px 150px !important; align-items:flex-start !important; }
  .jrn-grid2{ grid-template-columns:1fr !important; gap:22px !important; }
  .jrn-left .jrn-h1{ font-size:30px !important; line-height:1.02 !important; margin:8px 0 12px !important; }
  .jrn-lead{ font-size:16px !important; max-width:none !important; margin-bottom:14px !important; }
  .jrn-flow{ font-size:14.5px !important; line-height:1.6 !important; max-width:none !important; margin-bottom:18px !important; }
  /* 7–9% becomes a real highlight on mobile */
  .jrn-stat{ display:block !important; text-align:center !important; padding:20px 18px !important; border-width:2px !important; border-color:rgba(232,24,90,.7) !important; box-shadow:0 0 46px -10px rgba(232,24,90,.6) !important; background:radial-gradient(ellipse 130% 130% at 50% 0%, rgba(232,24,90,.18), transparent 70%) !important; }
  .jrn-stat .n{ font-size:58px !important; letter-spacing:-2px !important; }
  .jrn-stat .l{ font-size:11.5px !important; }
  .jrn-th-sub{ font-size:12px !important; max-width:none !important; }
  .jrn-trailhead{ margin:2px 0 12px 2px !important; }
  .jrn-trail::before{ left:21px !important; top:34px !important; bottom:36px !important; }
  .jstep{ gap:14px !important; padding:9px 8px 9px 0 !important; }
  .jdot{ width:44px !important; height:44px !important; }
  .jdot svg{ width:21px !important; height:21px !important; }
  .jstep-meta{ font-size:9.5px !important; }
  .jstep h3{ font-size:18px !important; }
  .jstep p{ font-size:13.5px !important; max-width:none !important; }

  /* ---------- PLATFORM (laptop on top, then categories) ---------- */
  .plat{ grid-template-columns:1fr !important; gap:22px !important; padding:72px 16px 158px !important; min-height:0 !important; }
  .plat-right{ order:-1 !important; }
  .plat-right::before{ display:none !important; }
  .plat-h1{ font-size:30px !important; }
  .plat-lead{ font-size:15px !important; max-width:none !important; }
  .plat-slider .plat-cap strong{ font-size:18px !important; }
  .plat-slider .plat-cap span{ font-size:11px !important; }
  .pcat b{ font-size:16px !important; }
  .pcat p{ font-size:14px !important; }
  .pcat.is-active{ transform:translateX(3px) !important; }

  /* ---------- PRICING / HACKATHON (flat bundles) ---------- */
  #hero .hero-inner{ max-width:none !important; }
  #hero .hero-title{ font-size:30px !important; line-height:1.08 !important; }
  #hero .hero-sub{ font-size:14.5px !important; max-width:none !important; }
  .aif-mini-footer{ padding-bottom:165px !important; font-size:11px !important; }
  .hk-bgveil{ background:linear-gradient(0deg, rgba(5,4,15,.94) 0%, rgba(5,4,15,.9) 100%) !important; }
}

@media (max-width:430px){
  .hbottom .tab{ padding:8px 11px !important; font-size:10px !important; }
  .hero-v2 .pc-left .pC-title{ font-size:27px !important; }
  .hero-v2 .p1 .hero-title{ font-size:24px !important; }
  .hero-v2 .p2-big{ font-size:48vw !important; }
  .jrn-left .jrn-h1{ font-size:26px !important; }
  .jrn-stat .n{ font-size:52px !important; }
  .plat-h1{ font-size:26px !important; }
  .hb-cobrand img{ height:12px !important; } .hb-cobrand img[alt="AWS"]{ height:15px !important; }
}

/* ===== IGMENU v3b — Instagram-style fixed tab bar (icons+labels) ===== */
.tab-ic{ display:none; }
@media (max-width:768px){
  .hbottom{ left:10px !important; right:10px !important; bottom:10px !important; top:auto !important; transform:none !important; width:auto !important; max-width:none !important; display:flex !important; flex-flow:row nowrap !important; align-items:stretch !important; justify-content:center !important; gap:0 !important; padding:5px 6px !important; border-radius:30px !important; background:rgba(15,14,21,.84) !important; -webkit-backdrop-filter:blur(30px) saturate(1.5) !important; backdrop-filter:blur(30px) saturate(1.5) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 16px 44px -12px rgba(0,0,0,.75) !important; }
  .hbottom .tabbar{ display:flex !important; flex-flow:row nowrap !important; align-items:stretch !important; justify-content:space-around !important; gap:0 !important; width:100% !important; max-width:none !important; padding:0 !important; background:none !important; border:none !important; }
  .hbottom .tab{ flex:1 1 0 !important; min-width:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; background:none !important; border:none !important; box-shadow:none !important; padding:7px 2px !important; border-radius:16px !important; color:rgba(255,255,255,.62) !important; font-weight:600 !important; font-size:8px !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap !important; }
  .hbottom .tab span{ font-size:8px !important; line-height:1 !important; color:inherit !important; }
  .hbottom .tab .tab-ic{ display:block !important; width:24px !important; height:24px !important; background-color:currentColor !important; -webkit-mask:center/23px 23px no-repeat !important; mask:center/23px 23px no-repeat !important; }
  .hbottom .tab.is-active{ color:#fff !important; }
  .hbottom .tab.is-active .tab-ic{ background-color:#FF2D6F !important; }
  .hbottom .tab.is-active span{ color:#FF2D6F !important; }
  .hbottom .tab[data-nav="Home"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010.7%2012%203l9%207.7%27%2F%3E%3Cpath%20d%3D%27M5%209.6V21h14V9.6%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010.7%2012%203l9%207.7%27%2F%3E%3Cpath%20d%3D%27M5%209.6V21h14V9.6%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="The journey"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2021V4%27%2F%3E%3Cpath%20d%3D%27M5%204h12l-2.5%204L17%2012H5%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2021V4%27%2F%3E%3Cpath%20d%3D%27M5%204h12l-2.5%204L17%2012H5%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Platform"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%204h18v12H3z%27%2F%3E%3Cpath%20d%3D%27M8%2020h8%27%2F%3E%3Cpath%20d%3D%27M12%2016v4%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%204h18v12H3z%27%2F%3E%3Cpath%20d%3D%27M8%2020h8%27%2F%3E%3Cpath%20d%3D%27M12%2016v4%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Hackathon"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202%205%2013h6l-1%209%209-12h-7z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202%205%2013h6l-1%209%209-12h-7z%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Pricing"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200l-7-7A2%202%200%200%201%203%2012V5a2%202%200%200%201%202-2h7a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Cpath%20d%3D%27M7.6%207.6h.01%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200l-7-7A2%202%200%200%201%203%2012V5a2%202%200%200%201%202-2h7a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Cpath%20d%3D%27M7.6%207.6h.01%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .hbottom-nav{ position:absolute !important; left:0 !important; right:0 !important; bottom:calc(100% + 14px) !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:16px !important; margin:0 !important; padding:0 !important; }
  .hbottom #aegis, .hbottom .aegis-wrap{ position:absolute !important; right:4px !important; bottom:calc(100% + 10px) !important; margin:0 !important; }
  .hb-legal{ display:none !important; }
  .hero-v2 .hpage-inner{ padding-bottom:140px !important; }
  .jrn-hero{ padding-bottom:118px !important; }
  .plat{ padding-bottom:124px !important; }
  .aif-mini-footer{ padding-bottom:120px !important; }
}

/* ============================================================
   MOBILE v4 — centered app-style hero screens, consistent type,
   refined on-brand tab bar. Desktop untouched (media-query only).
   ============================================================ */
@media (max-width:768px){
  /* ---------- TOP LOGO BAR (balanced, app-like) ---------- */
  .hbrand{ padding:14px 18px !important; }
  .hbrand .hb-logo{ gap:9px !important; }
  .hbrand .hb-logo img{ height:26px !important; }
  .hb-word{ font-size:14px !important; letter-spacing:.3px !important; }
  .hb-cobrand{ gap:8px !important; }
  .hb-cobrand img{ height:16px !important; }
  .hb-cobrand img[alt="AWS"]{ height:20px !important; }
  .hb-cobrand .x{ font-size:10px !important; }

  /* ---------- HOMEPAGE: each slide = centered hero screen ---------- */
  .hero-v2 .hpage{ align-items:stretch !important; justify-content:flex-start !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; text-align:center !important; }
  .hero-v2 .hpage-inner{ margin:auto !important; padding:90px 26px 132px !important; width:100% !important; max-width:540px !important; text-align:center !important; }
  .hero-v2 .pc-grid{ display:block !important; }
  .hero-v2 .pc-left{ display:flex !important; flex-direction:column !important; align-items:center !important; }
  .hero-v2 .hero-bgoverlay{ background:linear-gradient(180deg, rgba(5,4,15,.9) 0%, rgba(5,4,15,.68) 46%, rgba(5,4,15,.9) 100%) !important; }
  .hero-v2 .pc-dragon, .hero-v2 .pc-portal{ display:none !important; }

  /* eyebrows / labels — one consistent style */
  .hero-v2 .hj-eyebrow, .hero-v2 .tiers-m-eyebrow{ font-size:11px !important; font-weight:700 !important; letter-spacing:2.2px !important; text-transform:uppercase !important; color:var(--cyan) !important; text-align:center !important; margin-bottom:20px !important; }
  .hero-v2 .hero-eyebrow-row{ justify-content:center !important; margin-bottom:22px !important; }
  .hero-v2 .he-line{ display:none !important; }
  .hero-v2 .he-text{ font-size:11px !important; font-weight:700 !important; letter-spacing:2px !important; text-align:center !important; }

  /* hero titles — consistent scale */
  .hero-v2 .pc-left .pC-title{ font-size:34px !important; line-height:1.06 !important; letter-spacing:-1px !important; margin:0 0 16px !important; max-width:none !important; }
  .hero-v2 .p1 .hero-title{ font-size:31px !important; line-height:1.1 !important; letter-spacing:-1px !important; margin:0 auto !important; max-width:none !important; }

  /* body copy — consistent scale + breathing room */
  .hero-v2 .pC-sub, .hero-v2 .pc-left .pC-sub{ font-size:16px !important; line-height:1.55 !important; color:rgba(255,255,255,.75) !important; font-weight:300 !important; max-width:420px !important; margin:0 auto 18px !important; }
  .hero-v2 .pc-left .pC-define{ font-size:14.5px !important; line-height:1.55 !important; color:rgba(255,255,255,.8) !important; border-left:none !important; border:1px solid rgba(232,24,90,.28) !important; background:rgba(232,24,90,.08) !important; border-radius:14px !important; padding:15px 18px !important; margin:4px auto 0 !important; max-width:420px !important; text-align:center !important; }
  .hero-v2 .p1-sub{ font-size:16.5px !important; line-height:1.5 !important; color:rgba(255,255,255,.74) !important; max-width:440px !important; margin:20px auto 0 !important; }

  /* 90% slide */
  .hero-v2 .p2-label{ font-size:16px !important; letter-spacing:1px !important; }
  .hero-v2 .p2-big{ font-size:42vw !important; letter-spacing:-3px !important; margin:2px 0 10px !important; }
  .hero-v2 .p2-desc{ font-size:16px !important; line-height:1.55 !important; color:rgba(255,255,255,.78) !important; max-width:440px !important; margin:0 auto !important; }

  /* tiers slide (section B) — centered stack, compact */
  .hero-v2 .pBm .climb.vert{ align-items:stretch !important; gap:12px !important; max-width:360px !important; margin:0 auto !important; }
  .hero-v2 .pBm .tcard{ text-align:left !important; padding:16px 18px !important; }
  .hero-v2 .pBm .tc-name{ font-size:20px !important; }
  .hero-v2 .pBm .tc-desc{ font-size:14px !important; }
  .hero-v2 .climb.vert .climb-link{ display:none !important; }

  /* ---------- JOURNEY — centered, cleaner ---------- */
  .jrn-hero{ text-align:center !important; padding:86px 24px 130px !important; }
  .jrn-grid2{ text-align:center !important; gap:26px !important; }
  .jrn-left{ display:flex !important; flex-direction:column !important; align-items:center !important; }
  .jrn-left .section-label, .jrn-trailhead{ width:100% !important; text-align:center !important; }
  .jrn-left .jrn-h1{ font-size:33px !important; line-height:1.04 !important; }
  .jrn-lead{ font-size:16.5px !important; max-width:420px !important; margin:0 auto 14px !important; }
  .jrn-flow{ font-size:14.5px !important; max-width:420px !important; margin:0 auto 20px !important; }
  .jrn-stat{ margin:0 auto !important; }
  .jrn-th-sub{ text-align:center !important; max-width:420px !important; margin:16px auto 0 !important; }
  .jrn-trail{ max-width:400px !important; margin:6px auto 0 !important; text-align:left !important; }
  .jstep h3{ font-size:19px !important; } .jstep p{ font-size:14px !important; }

  /* ---------- TAB BAR — darker smoked glass, refined active state ---------- */
  .hbottom{ background:rgba(12,11,18,.72) !important; -webkit-backdrop-filter:blur(36px) saturate(1.6) !important; backdrop-filter:blur(36px) saturate(1.6) !important; border:1px solid rgba(255,255,255,.1) !important; box-shadow:0 18px 50px -14px rgba(0,0,0,.85) !important; padding:6px 7px !important; }
  .hbottom .tab{ gap:5px !important; padding:8px 3px !important; font-size:8.5px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; border-radius:15px !important; transition:color .2s, background .2s !important; }
  .hbottom .tab .tab-ic{ width:23px !important; height:23px !important; -webkit-mask:center/22px 22px no-repeat !important; mask:center/22px 22px no-repeat !important; }
  .hbottom .tab.is-active{ color:#fff !important; background:linear-gradient(180deg, rgba(232,24,90,.26), rgba(232,24,90,.1)) !important; }
  .hbottom .tab.is-active .tab-ic{ background-color:#FF3D74 !important; }
  .hbottom .tab.is-active span{ color:#fff !important; }
  .hbottom .tab[data-nav="Home"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M11.3%203.3%203.6%2010a1.3%201.3%200%200%200-.45%201V20a1%201%200%200%200%201%201h4.4v-5.5a1%201%200%200%201%201-1h3a1%201%200%200%201%201%201V21h4.4a1%201%200%200%200%201-1v-9a1.3%201.3%200%200%200-.45-1L12.7%203.3a1%201%200%200%200-1.4%200Z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M11.3%203.3%203.6%2010a1.3%201.3%200%200%200-.45%201V20a1%201%200%200%200%201%201h4.4v-5.5a1%201%200%200%201%201-1h3a1%201%200%200%201%201%201V21h4.4a1%201%200%200%200%201-1v-9a1.3%201.3%200%200%200-.45-1L12.7%203.3a1%201%200%200%200-1.4%200Z%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="The journey"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M6%203a1%201%200%200%200-1%201v17a1%201%200%201%200%202%200v-6h9.2a1%201%200%200%200%20.84-1.55L15.2%209.5l1.84-2.95A1%201%200%200%200%2016.2%205H7V4a1%201%200%200%200-1-1Z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M6%203a1%201%200%200%200-1%201v17a1%201%200%201%200%202%200v-6h9.2a1%201%200%200%200%20.84-1.55L15.2%209.5l1.84-2.95A1%201%200%200%200%2016.2%205H7V4a1%201%200%200%200-1-1Z%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Platform"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M4%204.5h6.4v6.4H4zM13.6%204.5H20v6.4h-6.4zM4%2013.1h6.4v6.4H4zM13.6%2013.1H20v6.4h-6.4z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M4%204.5h6.4v6.4H4zM13.6%204.5H20v6.4h-6.4zM4%2013.1h6.4v6.4H4zM13.6%2013.1H20v6.4h-6.4z%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Hackathon"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M13.6%202.2%204.8%2013.6a.6.6%200%200%200%20.48.97h4.6l-1%206.9a.5.5%200%200%200%20.9.37l8.5-11.4a.6.6%200%200%200-.48-.96h-4.2l1.42-6.2a.5.5%200%200%200-.9-.67Z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M13.6%202.2%204.8%2013.6a.6.6%200%200%200%20.48.97h4.6l-1%206.9a.5.5%200%200%200%20.9.37l8.5-11.4a.6.6%200%200%200-.48-.96h-4.2l1.42-6.2a.5.5%200%200%200-.9-.67Z%27%2F%3E%3C%2Fsvg%3E") !important; }
  .hbottom .tab[data-nav="Pricing"] .tab-ic{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M20.7%2011%2013%2018.7a2.1%202.1%200%200%201-3%200l-5-5A2.1%202.1%200%200%201%204.3%2012V5.4A2.1%202.1%200%200%201%206.4%203.3H13a2.1%202.1%200%200%201%201.5.6l6.2%206.2a2.1%202.1%200%200%201%200%20.9ZM7.7%206.2a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Z%27%2F%3E%3C%2Fsvg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M20.7%2011%2013%2018.7a2.1%202.1%200%200%201-3%200l-5-5A2.1%202.1%200%200%201%204.3%2012V5.4A2.1%202.1%200%200%201%206.4%203.3H13a2.1%202.1%200%200%201%201.5.6l6.2%206.2a2.1%202.1%200%200%201%200%20.9ZM7.7%206.2a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Z%27%2F%3E%3C%2Fsvg%3E") !important; }
}
@media (max-width:380px){
  .hero-v2 .pc-left .pC-title{ font-size:30px !important; }
  .hero-v2 .p1 .hero-title{ font-size:27px !important; }
  .jrn-left .jrn-h1{ font-size:29px !important; }
  .hbottom .tab{ font-size:8px !important; }
}

/* ===== v5 fixes ===== */
@media (min-width:769px){
  .hbrand .hb-cobrand img{ height:46px !important; }
  .hbrand .hb-cobrand img[alt="AWS"]{ height:54px !important; }
}
@media (max-width:768px){
  .plat{ padding-left:24px !important; padding-right:24px !important; }
}

/* ===== mobile auto-collapsing menu ("Menu" pill) ===== */
.hbottom .hb-menu-toggle{ display:none; }
@media (max-width:768px){
  .hbottom{ transition:max-width .32s ease, width .32s ease, padding .32s ease, left .32s ease, right .32s ease !important; }
  .hbottom .hb-menu-toggle{ align-items:center; gap:9px; background:linear-gradient(180deg, rgba(232,24,90,.92), rgba(232,24,90,.68)); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:13px 22px; font-size:12.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; line-height:1; white-space:nowrap; }
  .hbottom.is-collapsed{ left:12px !important; right:auto !important; transform:none !important; width:max-content !important; max-width:max-content !important; padding:6px !important; }
  .hbottom.is-collapsed .tabbar{ display:none !important; }
  .hbottom.is-collapsed .hbottom-nav{ display:none !important; }
  .hbottom.is-collapsed #aegis, .hbottom.is-collapsed .aegis-wrap{ display:none !important; }
  .hbottom.is-collapsed .hb-menu-toggle{ display:inline-flex !important; }
}

/* ===== mobile v10: unified top bar (stacked logo + clearly visible FW/AWS) ===== */
@media (max-width:768px){
  .hbrand{ align-items:flex-start !important; padding:12px 16px !important; }
  .hbrand .hb-logo{ flex-direction:column !important; align-items:center !important; gap:3px !important; }
  .hbrand .hb-logo img{ height:38px !important; }
  .hb-word{ font-size:7.5px !important; letter-spacing:.4px !important; line-height:1 !important; white-space:nowrap !important; }
  .hb-cobrand{ display:flex !important; gap:12px !important; align-items:center !important; }
  .hb-cobrand img{ height:28px !important; }
  .hb-cobrand img[alt="AWS"]{ height:38px !important; }
  .hb-cobrand .x{ font-size:13px !important; }
}

/* ===== mobile v11: unify tab look on ALL pages (transparent inactive, magenta active) ===== */
@media (max-width:768px){
  .hbottom .tab{ background:transparent !important; border:none !important; box-shadow:none !important; }
  .hbottom .tab.is-active{ background:linear-gradient(180deg, rgba(232,24,90,.30), rgba(232,24,90,.12)) !important; box-shadow:inset 0 0 0 1px rgba(232,24,90,.35) !important; }
  .hbottom .tab.is-active .tab-ic{ background-color:#FF3D74 !important; }
  .hbottom .tab.is-active span{ color:#fff !important; }
}

/* ===== mobile v12: FW/AWS noticeably larger ===== */
@media (max-width:768px){
  .hbrand .hb-cobrand img{ height:42px !important; }
  .hbrand .hb-cobrand img[alt="AWS"]{ height:54px !important; }
  .hbrand .hb-cobrand .x{ font-size:15px !important; }
}

/* ===== v13: balanced FW/AWS sizes (FW was too large) ===== */
@media (min-width:769px){ .hbrand .hb-cobrand img{ height:30px !important; } .hbrand .hb-cobrand img[alt="AWS"]{ height:50px !important; } }
@media (max-width:768px){ .hbrand .hb-cobrand img{ height:24px !important; } .hbrand .hb-cobrand img[alt="AWS"]{ height:42px !important; } }

/* ===== v15: flat menu at .tabbar .tab specificity (beats the pill rules) ===== */
@media (max-width:768px){
  .hbottom .tabbar .tab{ background:transparent !important; border:none !important; box-shadow:none !important; flex:1 1 0 !important; min-width:0 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; padding:8px 3px !important; border-radius:14px !important; font-size:8.5px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.55) !important; }
  .hbottom .tabbar .tab span{ font-size:8.5px !important; color:inherit !important; }
  .hbottom .tabbar .tab.is-active{ background:linear-gradient(180deg, rgba(232,24,90,.30), rgba(232,24,90,.12)) !important; border:none !important; box-shadow:inset 0 0 0 1px rgba(232,24,90,.35) !important; color:#fff !important; }
  .hbottom .tabbar .tab.is-active .tab-ic{ background-color:#FF3D74 !important; }
  .hbottom .tabbar .tab.is-active span{ color:#fff !important; }
}

/* ===== v16: solid menu bar on mobile (text was showing through) ===== */
@media (max-width:768px){ .hbottom{ background:rgba(9,8,13,.97) !important; } .hbrand{ background:linear-gradient(180deg, rgba(7,6,14,.92) 0%, rgba(7,6,14,.55) 70%, transparent 100%) !important; } }

/* ===== v16: platform category boxes off the edges ===== */
@media (max-width:768px){
  .plat{ padding-left:18px !important; padding-right:18px !important; }
  .plat-left, .plat-right{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  .plat-cats{ width:100% !important; }
  .pcat{ box-sizing:border-box !important; max-width:100% !important; }
}