:root { --ink:#eff7ff; --accent:#ff4b4b; --dark:#07111c; --line:rgba(255,142,142,.34); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--dark); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
.hero { isolation:isolate; min-height:100svh; overflow:hidden; position:relative; display:flex; flex-direction:column; background-color:#05070a; background-image:linear-gradient(rgba(1,4,8,.45),rgba(1,4,8,.45)),url("assets/Desktop.png"); background-size:100% 100%,88% auto; background-position:center,right center; background-repeat:no-repeat; }
.hero-video,.scrim { position:absolute; inset:0; width:100%; height:100%; }
.hero-video { z-index:-3; object-fit:cover; object-position:center; }
.hero-video--mobile { display:none; }
.scrim { z-index:-2; background:radial-gradient(ellipse at center,rgba(5,18,33,.04) 0%,rgba(2,9,18,.3) 80%),linear-gradient(0deg,rgba(3,10,17,.42),transparent 58%); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:28px clamp(24px,5vw,80px); position:relative; }
.brand-mini { color:white; text-decoration:none; font:700 16px "Space Grotesk",sans-serif; letter-spacing:.1em; display:flex; align-items:center; gap:9px; }
.brand-mini img { width:31px; height:31px; display:block; }
.hero-logo { width:100px; height:100px; margin:0 0 15px; opacity:0; animation:title-letter-in .7s cubic-bezier(.2,.8,.2,1) .14s forwards; filter:drop-shadow(0 12px 20px rgba(213,19,39,.28)); }
.brand-kicker { margin:0 0 8px; color:#ffd56a; font:700 clamp(18px,2.2vw,30px)/1 "Space Grotesk",sans-serif; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 24px rgba(255,194,53,.32); }
nav { display:flex; align-items:center; gap:28px; } nav a { color:rgba(255,255,255,.78); text-decoration:none; font-size:14px; transition:color .2s ease; } nav a:hover { color:var(--accent); } .sound-toggle { border:1px solid rgba(255,255,255,.38); padding:7px 11px; border-radius:999px; color:white; background:rgba(5,17,27,.45); font:600 11px "DM Sans",sans-serif; cursor:pointer; } .sound-toggle span { color:#ffc56b; margin-left:3px; }
.hero-content { width:min(1240px,100%); margin:auto; padding:50px 24px 88px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow { align-items:center; display:flex; gap:10px; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.eyebrow span { width:28px; height:1px; background:var(--accent); }
h1 { margin:18px 0 24px; white-space:nowrap; font:700 clamp(50px,8.15vw,128px)/.92 "Space Grotesk",sans-serif; letter-spacing:-.082em; text-shadow:0 0 35px rgba(255,169,60,.16); } h1 em { font-style:normal; color:transparent; background:linear-gradient(105deg,#fff9e7 0%,#ffd166 42%,#ff9f43 100%); background-clip:text; -webkit-background-clip:text; text-shadow:0 0 28px rgba(255,170,54,.48); }
.intro { max-width:560px; font-size:clamp(16px,1.45vw,20px); line-height:1.55; color:rgba(239,247,255,.9); }
.course-tags { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; color:rgba(255,255,255,.84); font-size:14px; } .course-tags i { width:4px; height:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); }
.start-button { margin-top:42px; width:max-content; min-width:286px; padding:17px 34px; border:1px solid rgba(255,184,184,.9); background:linear-gradient(105deg,#bc1628,#ef2635 58%,#ff5965); color:white; display:flex; align-items:center; justify-content:center; text-decoration:none; border-radius:999px; font:700 19px "Space Grotesk",sans-serif; letter-spacing:.015em; box-shadow:0 0 42px rgba(237,38,57,.4),inset 0 1px rgba(255,255,255,.28); backdrop-filter:blur(8px); transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.hero-footer { position:relative; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:0 clamp(24px,5vw,80px) 28px; color:rgba(255,255,255,.56); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .scroll-line { width:55px; height:1px; background:var(--line); margin-right:auto; }
.reveal { opacity:0; } .hero.sequence-ready .reveal { animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards; } .hero.sequence-ready h1.reveal { animation-name:impact; } .hero.sequence-ready .reveal--one { animation-delay:.12s; } .hero.sequence-ready .reveal--two { animation-delay:1.02s; } .hero.sequence-ready .reveal--three { animation-delay:1.26s; } .hero.sequence-ready .reveal--four { animation-delay:1.5s; }
@keyframes rise { from { opacity:0; transform:translateY(22px); filter:blur(6px); } to { opacity:1; transform:translateY(0); filter:blur(0); } } @keyframes impact { 0% { opacity:0; transform:translateY(34px); filter:blur(13px); } 45% { opacity:.4; } 100% { opacity:1; transform:translateY(0); filter:blur(0); } }
@media (max-width:680px) { .hero-video--desktop { display:none; } .hero-video--mobile { display:block; object-position:center; } .scrim { background:linear-gradient(0deg,rgba(3,10,17,.68) 0%,rgba(3,10,17,.12) 70%,rgba(3,10,17,.16)); } .topbar { padding:22px 20px; } nav { gap:10px; } nav a { display:none; } .sound-toggle { font-size:10px; } .hero-content { margin:auto; padding:54px 20px 82px; } h1 { white-space:normal; font-size:clamp(48px,14.5vw,76px); } .intro { font-size:16px; max-width:330px; } .course-tags { font-size:12px; gap:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
.path-page { min-height:100svh; padding:28px clamp(24px,8vw,130px) 64px; background:radial-gradient(circle at 84% 12%,rgba(28,134,162,.32),transparent 30%),#07111c; }
.path-content { width:min(980px,100%); margin:90px auto 0; } .path-content h1 { font-size:clamp(50px,7vw,94px); }
.path-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:42px; }
.path-card { min-height:255px; padding:28px; border:1px solid rgba(160,226,246,.25); border-radius:18px; background:linear-gradient(145deg,rgba(24,70,86,.54),rgba(8,23,34,.72)); color:var(--ink); text-decoration:none; transition:transform .25s ease,border-color .25s ease,background .25s ease; } .path-card:hover { transform:translateY(-6px); border-color:var(--accent); background:linear-gradient(145deg,rgba(31,101,122,.66),rgba(8,31,43,.85)); } .card-number { color:var(--accent); font-size:13px; letter-spacing:.15em; } .path-card h2 { margin:46px 0 8px; font:600 34px "Space Grotesk",sans-serif; } .path-card p { color:rgba(239,247,255,.72); max-width:300px; line-height:1.5; } .path-card b { display:block; margin-top:24px; color:var(--accent); font-size:14px; } .back-link { display:inline-block; margin-top:35px; color:rgba(239,247,255,.78); text-decoration:none; font-size:14px; }
@media (max-width:680px) { .path-page { padding:22px 20px 48px; } .path-content { margin-top:64px; } .path-grid { grid-template-columns:1fr; margin-top:28px; } .path-card { min-height:210px; } .path-card h2 { margin-top:28px; } }
.hero-video { opacity:0; transition:opacity .8s ease; } .scrim { opacity:0; transition:opacity .8s ease; } .hero.is-playing .hero-video,.hero.is-playing .scrim { opacity:1; } .topbar { z-index:2; } .landing-content { transition:opacity .45s ease,transform .45s ease; } .hero.is-playing .landing-content { opacity:0; transform:translateY(-22px); pointer-events:none; }
.landing-content h1,.landing-content .intro,.landing-content .course-tags,.landing-content .start-button { opacity:0; animation:wave-rise .82s cubic-bezier(.2,.8,.2,1) forwards; } .landing-content h1 { animation-delay:.16s; } .landing-content .intro { animation-delay:.78s; } .landing-content .course-tags { animation-delay:1.03s; } .landing-content .start-button { animation-delay:1.3s; } @keyframes wave-rise { 0% { opacity:0; transform:translateY(36px) skewX(-7deg) scaleY(.76); filter:blur(9px); } 36% { opacity:.72; transform:translateY(-7px) skewX(5deg) scaleY(1.1); } 63% { opacity:1; transform:translateY(5px) skewX(-3deg) scaleY(.95); filter:blur(1px); } 100% { opacity:1; transform:translateY(0) skewX(0) scaleY(1); filter:blur(0); } }
.choice-panel { position:absolute; inset:0; z-index:1; width:min(1050px,calc(100% - 48px)); height:max-content; margin:auto; text-align:center; opacity:0; pointer-events:none; transform:scale(.82) translateY(5px); transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1); } .hero.show-choices .choice-panel { opacity:1; transform:scale(1) translateY(-8vh); pointer-events:auto; } .choice-panel h2 { margin:12px 0 28px; font:600 clamp(30px,4vw,53px)/1 "Space Grotesk",sans-serif; letter-spacing:-.06em; } .choice-panel h2 em { color:#ffd166; font-style:normal; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .glass-card { position:relative; overflow:hidden; min-height:258px; padding:30px; text-align:left; border:1px solid rgba(255,255,255,.38); border-radius:34px; color:#fff; font-family:"DM Sans",Arial,sans-serif; cursor:pointer; background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.055) 54%,rgba(255,255,255,.12)); box-shadow:inset 0 1px rgba(255,255,255,.52),inset 0 -1px rgba(255,255,255,.08),0 22px 55px rgba(0,0,0,.25); backdrop-filter:blur(24px) saturate(155%); opacity:0; transform:scale(.72); transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,background .35s ease; } .hero.show-choices .glass-card { animation:card-arrive .85s cubic-bezier(.2,.8,.2,1) forwards; } .hero.show-choices .glass-card--exam { animation-delay:.24s; } @keyframes card-arrive { to { opacity:1; transform:scale(1); } } .glass-card::before { content:""; position:absolute; inset:1px 18px auto; height:34%; border-radius:30px 30px 50% 50%; background:linear-gradient(180deg,rgba(255,255,255,.18),transparent); pointer-events:none; } .glass-card::after { content:""; position:absolute; width:190px; height:190px; top:-90px; right:-45px; border-radius:50%; background:radial-gradient(circle,rgba(255,211,108,.52),transparent 67%); opacity:.55; transition:transform .45s ease; } .glass-card--exam::after { background:radial-gradient(circle,rgba(110,214,255,.55),transparent 67%); } .glass-card:hover { transform:translateY(-10px) scale(1.018); border-color:rgba(255,228,154,.84); background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.1)); } .glass-card:hover::after { transform:scale(1.45); } .card-icon { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.5); border-radius:15px; font-size:20px; background:rgba(255,255,255,.14); } .choice-panel .card-number { float:right; color:rgba(255,255,255,.65); font:600 12px "Space Grotesk",sans-serif; letter-spacing:.12em; } .glass-card h3 { margin:40px 0 8px; font:600 38px "Space Grotesk",sans-serif; letter-spacing:-.06em; } .glass-card p { max-width:340px; color:rgba(255,255,255,.78); line-height:1.45; } .glass-card strong { display:block; margin-top:25px; color:#ffe197; font-size:14px; }
@media (max-width:680px) { .choice-panel { width:calc(100% - 32px); } .choice-panel h2 { font-size:31px; } .choice-grid { gap:12px; } .glass-card { min-height:205px; padding:20px; border-radius:17px; } .glass-card h3 { margin:23px 0 5px; font-size:28px; } .glass-card p { font-size:13px; } .glass-card strong { margin-top:14px; font-size:12px; } }
.landing-content h1 { opacity:1 !important; animation:none !important; display:flex; flex-wrap:nowrap; justify-content:center; white-space:nowrap; font-size:clamp(44px,5.8vw,92px); } .title-letter { display:inline-block; opacity:0; transform:translateY(14px); animation:title-letter-in .7s cubic-bezier(.2,.8,.2,1) forwards; } .title-letter--accent { color:#ff535d; text-shadow:0 0 24px rgba(255,50,68,.52); } .title-gap { display:inline-block; width:.28em; } @keyframes title-letter-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } .landing-content .intro { animation-name:welcome-slide; animation-delay:2.1s; } .landing-content .course-tags { animation-name:welcome-slide; animation-delay:2.38s; } .landing-content .start-button { animation-name:welcome-slide; animation-delay:2.65s; } @keyframes welcome-slide { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.title-letter--gold { color:#ffd56a; text-shadow:0 0 22px rgba(255,194,53,.46); }
.start-button:hover { transform:translateY(-6px) scale(1.025); background:linear-gradient(105deg,#a90e1f,#e71f31 58%,#ff5965); box-shadow:0 17px 44px rgba(237,38,57,.52); }
@media (hover:hover) { .start-button:hover { animation:start-hover .72s ease-in-out infinite alternate !important; } } @keyframes start-hover { from { transform:translateY(-5px) scale(1.02); } to { transform:translateY(4px) scale(1.07); } }
.start-button { position:relative; overflow:hidden; background-size:220% 100%; } .start-button span { position:relative; z-index:1; } @media (hover:hover) { .start-button:hover { transform:none !important; animation:start-learning-hover 1.05s ease-in-out infinite alternate !important; background-position:100% 50%; } } @keyframes start-learning-hover { from { box-shadow:0 0 20px rgba(237,38,57,.35),inset 0 1px rgba(255,255,255,.28); background-position:0% 50%; } to { box-shadow:0 0 48px rgba(255,55,72,.78),inset 0 1px rgba(255,255,255,.42); background-position:100% 50%; } }
.start-button { justify-content:flex-start; gap:16px; background-size:100% 100%; transition:background .22s ease,box-shadow .22s ease,border-color .22s ease; } .start-button .button-arrow { display:inline; font-size:26px; line-height:1; font-family:Arial,sans-serif; } @media (hover:hover) { .start-button:hover { animation:none !important; transform:none !important; opacity:1 !important; background:#d91c2e; border-color:#ffd1d5; box-shadow:0 0 38px rgba(241,37,57,.62),inset 0 1px rgba(255,255,255,.3); } }
.landing-content .start-button { display:flex !important; justify-content:center; min-width:286px; opacity:1 !important; visibility:visible !important; transform:none !important; animation:none !important; transition:none !important; background:linear-gradient(105deg,#bc1628,#ef2635 58%,#ff5965) !important; box-shadow:0 0 42px rgba(237,38,57,.4),inset 0 1px rgba(255,255,255,.28) !important; } .start-button .button-arrow { display:none !important; } @media (hover:hover) { .landing-content .start-button:hover { opacity:1 !important; visibility:visible !important; transform:none !important; animation:none !important; background:linear-gradient(105deg,#bc1628,#ef2635 58%,#ff5965) !important; box-shadow:0 0 42px rgba(237,38,57,.4),inset 0 1px rgba(255,255,255,.28) !important; } }
.landing-content .start-button { margin-top:36px; min-width:0; padding:15px 34px; border:none; border-radius:999px; cursor:pointer; opacity:0 !important; transform:translateY(20px) !important; animation:quiz-button-in .6s ease 2.65s forwards !important; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease !important; background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 6px 20px rgba(220,38,38,.3) !important; } @keyframes quiz-button-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @media (hover:hover) { .landing-content .start-button:hover { opacity:1 !important; transform:translateY(-4px) scale(1.02) !important; animation:none !important; background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 12px 34px rgba(220,38,38,.45) !important; } } .landing-content .start-button:active { transform:scale(.95) !important; box-shadow:0 3px 10px rgba(220,38,38,.2) !important; }
.landing-content .start-button { opacity:1 !important; visibility:visible !important; transform:none !important; animation:none !important; padding:15px 34px !important; background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 6px 20px rgba(220,38,38,.3) !important; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease !important; } @media (hover:hover) { .landing-content .start-button:hover { opacity:1 !important; visibility:visible !important; transform:translateY(-4px) scale(1.02) !important; animation:none !important; box-shadow:0 12px 34px rgba(220,38,38,.45) !important; } }
.landing-content .start-button { opacity:0 !important; visibility:hidden !important; pointer-events:none; transform:translateY(20px) !important; transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease !important; } .landing-content .start-button.is-ready { opacity:1 !important; visibility:visible !important; pointer-events:auto; transform:translateY(0) !important; } @media (hover:hover) { .landing-content .start-button.is-ready:hover { transform:translateY(-4px) scale(1.02) !important; } }
@media (max-width:680px) { .hero { background-image:linear-gradient(rgba(1,4,8,.45),rgba(1,4,8,.45)),url("assets/Mobile.png"); background-size:100% 100%,cover; background-position:center,center; } .landing-content h1 { white-space:normal; font-size:clamp(44px,13vw,70px); } }
.developer-credit { position:absolute; left:50%; bottom:20px; z-index:10; margin:0; transform:translateX(-50%); color:#fff; font-size:12px; letter-spacing:.04em; white-space:nowrap; opacity:1; text-shadow:0 2px 10px #000; } @media (max-width:680px) { .developer-credit { bottom:14px; font-size:10px; } }
.developer-credit { color:#ffd56a !important; font-family:"Space Grotesk",sans-serif !important; font-size:14px !important; font-weight:600 !important; letter-spacing:.08em !important; } .hero.is-playing .developer-credit { display:none !important; }
.glass-card { opacity:1; transform:scale(1); } .hero.show-choices .glass-card { animation:card-arrive .85s cubic-bezier(.2,.8,.2,1) backwards; } .hero.show-choices .glass-card--exam { animation-delay:.24s; } @media (hover:hover) { .hero.show-choices .glass-card:hover { transform:translateY(-10px) scale(1.025); box-shadow:inset 0 1px rgba(255,255,255,.58),0 30px 62px rgba(0,0,0,.38),0 0 28px rgba(255,211,108,.16); } }
.landing-content .start-button { margin-top:46px; gap:0; }
.landing-content { transform:translateY(-11vh); } .hero.is-playing .landing-content { transform:translateY(-22px); } @media (max-width:680px) { .landing-content { transform:translateY(-6vh); } }
.initial-path-panel{opacity:1;pointer-events:auto;transform:scale(1) translateY(-8vh)}.initial-path-panel .glass-card{animation:card-arrive .85s cubic-bezier(.2,.8,.2,1) backwards}.initial-path-panel .glass-card--exam{animation-delay:.24s}.hero.is-playing .initial-path-panel{opacity:0;pointer-events:none;transform:scale(.82) translateY(5px)}.study-video-menu .level-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.study-video-menu .glass-card--level{min-height:230px;text-align:left}.study-video-menu .glass-card--level h3{font-size:30px;margin-top:28px}@media(max-width:800px){.study-video-menu .level-choice-grid{grid-template-columns:1fr}.study-video-menu .glass-card--level{min-height:190px}}
.landing-content{transform:translateY(calc(-11vh - 57px))}.initial-path-panel{inset:auto 24px auto;top:calc(64% - 57px);left:50%;width:min(920px,calc(100% - 48px));height:auto;margin:0;transform:translateX(-50%)!important}.initial-path-panel .choice-grid{gap:22px}.initial-path-panel .glass-card{opacity:0;transform:translateY(24px) scale(.92);animation:initial-card-arrive .72s cubic-bezier(.2,.8,.2,1) 1.75s forwards}.initial-path-panel .glass-card--exam{animation-delay:1.98s}@keyframes initial-card-arrive{to{opacity:1;transform:translateY(0) scale(1)}}.hero.is-playing .initial-path-panel{transform:translateX(-50%) scale(.82) translateY(5px)!important}@media(max-width:680px){.landing-content{transform:translateY(calc(-6vh - 40px))}.initial-path-panel{top:calc(61% - 40px);width:calc(100% - 32px)}}
.initial-choice-grid{display:flex;gap:14px;justify-content:center;margin-top:18px}.initial-choice{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:11px 19px;background:rgba(7,17,28,.42);color:#fff;font:700 15px "DM Sans",Arial,sans-serif;cursor:pointer;backdrop-filter:blur(14px);transition:transform .25s ease,background .25s ease,border-color .25s ease}.initial-choice:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);border-color:rgba(255,220,154,.8)}.study-video-menu .choice-grid{grid-template-columns:minmax(280px,430px);justify-content:center}.study-video-menu .glass-card{text-align:center;min-height:240px}.study-video-menu .glass-card p{margin-left:auto;margin-right:auto}.study-video-menu .glass-card--exam{display:none}@media(max-width:680px){.initial-choice-grid{gap:10px}.initial-choice{padding:10px 14px;font-size:13px}.study-video-menu .choice-grid{grid-template-columns:minmax(0,1fr)}}

/* Home entrance: quicker reveal with more legible course information. */
.hero-logo { animation-duration:.42s !important; animation-delay:.05s !important; }
.title-letter { animation-duration:.4s !important; }
.landing-content .intro { animation-delay:.82s !important; font-size:clamp(19px,1.7vw,24px) !important; max-width:680px; }
.landing-content .course-tags { animation-delay:1.02s !important; font-size:17px !important; margin-top:24px; }
.initial-path-panel .glass-card { animation-duration:.5s !important; animation-delay:1.08s !important; }
.initial-path-panel .glass-card--exam { animation-delay:1.22s !important; }
@media (max-width:680px) { .landing-content .intro { font-size:17px !important; } .landing-content .course-tags { font-size:14px !important; } }

/* The home screen opens immediately: no staggered or moving entrance effects. */
.hero-logo,
.landing-content h1,
.landing-content .intro,
.landing-content .course-tags,
.landing-content .start-button,
.title-letter,
.initial-path-panel .glass-card {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 700px) {
  body { overflow-x:hidden; }
  .hero { min-height:100svh; height:auto; overflow-y:auto; background-image:linear-gradient(rgba(1,4,8,.45),rgba(1,4,8,.45)),url("assets/Mobile.png"); background-size:100% 100%,cover; background-position:center,center; }
  .landing-content { transform:none!important; width:100%; margin:0; padding:34px 18px 18px; }
  .hero-logo { width:74px; height:74px; margin-bottom:10px; }
  .brand-kicker { font-size:16px; letter-spacing:.06em; }
  .landing-content h1 { display:block; max-width:100%; white-space:normal!important; overflow-wrap:anywhere; font-size:clamp(38px,12vw,58px)!important; line-height:.98; }
  .landing-content .intro { max-width:330px; font-size:15px!important; line-height:1.45; }
  .landing-content .course-tags { justify-content:center; max-width:330px; gap:8px; font-size:11px!important; }
  .initial-path-panel { position:static!important; inset:auto!important; width:100%!important; margin:0 auto; padding:0 16px 54px; transform:none!important; }
  .initial-path-panel .choice-grid, .choice-grid { grid-template-columns:1fr!important; gap:12px; }
  .initial-path-panel .glass-card, .glass-card { min-height:156px; padding:18px; border-radius:18px; }
  .glass-card h3 { margin:18px 0 5px; font-size:26px; }
  .glass-card p { font-size:13px; line-height:1.4; }
  .developer-credit { position:static!important; transform:none!important; padding:0 0 16px; text-align:center; }
}
.initial-path-panel { opacity:1 !important; pointer-events:auto !important; }

/* Only the two home choices gently float while hovered. */
@keyframes home-choice-float {
  from { transform:translateY(-7px) scale(1.01); }
  to { transform:translateY(3px) scale(1.025); }
}
@media (hover:hover) {
  .initial-path-panel .glass-card:hover {
    animation:home-choice-float .78s ease-in-out infinite alternate !important;
    border-color:rgba(255,228,154,.86);
    box-shadow:inset 0 1px rgba(255,255,255,.58),0 28px 58px rgba(0,0,0,.38),0 0 28px rgba(255,211,108,.18);
  }
}

/* Mobile home background video. Desktop keeps the static Desktop.png background. */
.hero-video--mobile { display:none; }
@media (max-width:680px) {
  .hero {
    background-image:linear-gradient(rgba(1,4,8,.45),rgba(1,4,8,.45)),url("assets/Mobile.png");
    background-size:100% 100%,cover;
    background-position:center,center;
  }
  .hero-video--mobile {
    display:block !important;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:1 !important;
    z-index:0;
    pointer-events:none;
  }
  .scrim { z-index:1; opacity:1; }
  .landing-content { position:relative; z-index:2; }
  .choice-panel { z-index:3; }
  .developer-credit { z-index:4 !important; }
}
/* Mobile only: make the Study and Mock Exam cards glassy so the video arc remains visible. */
@media (max-width:680px) {
  .initial-path-panel .glass-card {
    background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 58%,rgba(255,255,255,.09)) !important;
    border-color:rgba(255,255,255,.32) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.42),0 18px 44px rgba(0,0,0,.2) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
  }

  .initial-path-panel .glass-card::before {
    background:linear-gradient(180deg,rgba(255,255,255,.14),transparent) !important;
  }

  .initial-path-panel .glass-card::after {
    opacity:.28 !important;
  }

  .initial-path-panel .glass-card h3,
  .initial-path-panel .glass-card p,
  .initial-path-panel .glass-card strong,
  .initial-path-panel .card-icon {
    text-shadow:0 2px 12px rgba(0,0,0,.58);
  }
}
/* Mobile only: do not show a still image before the background video starts. */
@media (max-width:680px) {
  .hero {
    background-image:none !important;
    background-color:#05070a !important;
  }
}