:root { --green: #429f3c; --red: #f13229; --ink: #252525; --muted: #666; --motion-ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: var(--ink); font-family: Roboto, Inter, Arial, Helvetica, sans-serif; background: linear-gradient(#fff 0 60%, #f8fafc); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header { width: min(720px, 100%); height: 68px; margin: 0 auto; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; background: #fff; position: relative; z-index: 20; }
.site-header.compact { border-bottom: 1px solid #eee; }
.brand-logo img { width: 180px; height: auto; display: block; }
.wallet { border: 2px dashed rgba(65, 151, 62, .55); color: #4b9c48; border-radius: 8px; padding: 10px 14px; font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; background: #fbfffb; }
.wallet span { font-size: 17px; transform: rotate(90deg); }
.wallet b { min-width: 74px; font-variant-numeric: tabular-nums; }
footer { color: #aaa; text-align: center; padding: 18px 16px 12px; font-size: 12px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; color: #fff; font-weight: 800; background: linear-gradient(180deg, #54b54d, #31942c); border: 0; border-radius: 8px; box-shadow: 0 8px 20px rgba(48, 143, 42, .22); cursor: pointer; transition: transform .28s var(--motion-ease), filter .28s ease, box-shadow .28s ease; position: relative; overflow: hidden; }
.primary-button::after { content: ""; position: absolute; inset: -40% auto -40% -70%; width: 42%; transform: skew(-18deg); background: rgba(255,255,255,.35); animation: shine 2.6s infinite; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.04); }

/* Course access loader */
.access-loader-page { min-height: 100vh; display: grid; place-items: center; padding: 42px 18px; background: radial-gradient(circle at 50% 25%, #fff 0, #f8fafc 52%, #f1f5f9 100%); }
.access-loader-card { width: min(560px, 100%); padding: 60px 42px 36px; border-radius: 28px; background: rgba(255,255,255,.97); box-shadow: 0 28px 80px rgba(15,23,42,.13); text-align: center; position: relative; animation: floatIn .7s var(--motion-ease) both; }
.access-loader-badge { position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 2px solid #86efac; border-radius: 999px; color: #15803d; background: #f0fdf4; font-weight: 800; box-shadow: 0 12px 30px rgba(22,163,74,.10); }
.access-loader-badge i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg,#fcd34d,#f59e0b); box-shadow: inset 0 0 0 2px rgba(255,255,255,.65), 0 3px 8px rgba(245,158,11,.3); }
.access-loader-kicker { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 30px; color: #334155; font-size: 14px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.access-loader-kicker i { width: 22px; height: 22px; border-radius: 7px; background: #16a34a; box-shadow: 0 0 0 7px #dcfce7; }
.access-progress { --value: 0deg; width: 178px; height: 178px; margin: 0 auto 28px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#16a34a var(--value), #e5e7eb 0); box-shadow: 0 12px 34px rgba(22,163,74,.12); position: relative; will-change: background; }
.access-progress::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.access-progress strong { position: relative; color: #0f172a; font-size: 43px; letter-spacing: -.04em; }
.access-loader-card h1 { margin: 0 0 8px; color: #0f172a; font-size: clamp(28px,5vw,38px); }
.access-loader-copy { min-height: 28px; margin: 0 0 26px; color: #64748b; font-size: 17px; }
.access-steps { display: grid; gap: 10px; text-align: left; }
.access-step { min-height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 14px; color: #64748b; background: #f1f5f9; font-weight: 700; transition: color .35s ease, background .35s ease, transform .35s var(--motion-ease); }
.access-step::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 0 7px rgba(203,213,225,.28); }
.access-step span { margin-left: auto; color: #94a3b8; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.access-step.active { color: #166534; background: #ecfdf5; transform: translateX(3px); }
.access-step.active::before { background: #22c55e; box-shadow: 0 0 0 7px #dcfce7; animation: softPulse 1s infinite; }
.access-step.done { color: #166534; background: #f0fdf4; }
.access-step.done::before { content: "✓"; display: grid; place-items: center; color: #fff; background: #16a34a; font-size: 10px; box-shadow: 0 0 0 7px #dcfce7; }
.access-step.done span { color: #15803d; }
.access-loader-foot { margin: 26px 0 0; color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* Intro */
.landing-page { min-height: 100vh; overflow: hidden; }
.landing-card { width: min(620px, calc(100% - 30px)); margin: 62px auto 36px; padding: 58px 62px 44px; border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 20px 60px rgba(15,23,42,.10); text-align: center; position: relative; animation: floatIn .75s var(--motion-ease) both; }
.landing-card h1 { margin: 0 0 22px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.045em; }
.landing-lead { color: #5f6368; font-size: 20px; margin: 0 0 26px; }
.partner { font-size: 24px; margin: 0 0 30px; font-weight: 700; }
.partner strong { color: #ee2f28; font-size: 29px; }
.landing-button { width: 100%; height: 58px; font-size: 19px; }
.trust-row { display: flex; justify-content: center; gap: 22px; margin: 22px 0 32px; font-size: 13px; color: #6b7280; }
.bonus-card { display: flex; gap: 18px; align-items: center; text-align: left; border: 1px solid #e7efe6; background: #f7fcf6; border-radius: 14px; padding: 16px 20px; }
.bonus-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 900; font-size: 24px; background: linear-gradient(135deg, #62c353, #2f8f2b); animation: softPulse 2s infinite; }
.bonus-card strong { font-size: 18px; }
.bonus-card p { margin: 3px 0 0; color: #687169; }
.rate-copy { margin: 22px 0 0; color: #6b7280; font-weight: 600; }
.earning-toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.18); border-radius: 12px; padding: 12px 18px 12px 12px; font-size: 13px; display: flex; align-items: center; gap: 10px; animation: toastIn .45s both; }
.earning-toast span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 800; }
.party-dot { position: absolute; border-radius: 50%; filter: blur(.2px); animation: softPulse 2.4s infinite; }
.dot-one { width: 15px; height: 15px; background: #facc15; top: 28px; right: 52px; }
.dot-two { width: 11px; height: 11px; background: #3b82f6; bottom: 54px; left: 38px; animation-delay: -1s; }

/* Evaluation screens */
.video-page { min-height: 100vh; transition: opacity .42s ease, transform .42s var(--motion-ease); }
.page-leaving { opacity: 0; transform: scale(.985); }
.video-board { width: min(720px, 100%); margin: 0 auto; }
.video-stage { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #111; }
.video-stage iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.video-stage::before, .video-stage::after { content: ""; position: absolute; border-radius: 999px; filter: blur(22px); opacity: .9; animation: drift 10s ease-in-out infinite alternate; will-change: transform; }
.video-stage::before { width: 58%; height: 70%; top: 10%; left: -5%; }
.video-stage::after { width: 55%; height: 60%; right: -8%; bottom: -12%; animation-delay: -2s; }
.video-stage.burger { background: linear-gradient(130deg, #20110d, #7b2e1d 45%, #191717); }
.video-stage.burger::before { background: #e4a154; }.video-stage.burger::after { background: #3e761b; }
.video-stage.popeyes { background: linear-gradient(135deg, #111, #6a3124 50%, #101214); }
.video-stage.popeyes::before { background: #ca5e33; }.video-stage.popeyes::after { background: #b5a790; }
.video-stage.mcdonalds { background: linear-gradient(140deg, #b57422, #d9b267 46%, #6d3418); }
.video-stage.mcdonalds::before { background: #f4c96e; }.video-stage.mcdonalds::after { background: #a8692b; }
.video-light { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.16) 48%, transparent 73%); animation: lightSweep 5.5s ease-in-out infinite; will-change: transform; }
.play-button { width: 108px; height: 76px; border: 0; border-radius: 20px; background: linear-gradient(#ea3a31, #bf211c); position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); box-shadow: 0 18px 35px rgba(0,0,0,.28); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; animation: playPulse 2.4s ease-in-out infinite; will-change: transform; }
.video-stage .play-button { z-index: 4; }
.play-button[hidden] { display: none; }
.play-button span { display: block; margin: auto; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 27px solid white; transform: translateX(4px); }
.video-meta { background: #fff; padding: 15px 16px 12px; box-shadow: 0 9px 20px rgba(15,23,42,.04); }
.video-meta h1 { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.video-meta > p { margin: 0; color: #50555b; font-size: 13px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.brand-name { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.brand-name img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.verified { color: #fff; background: #182033; border-radius: 999px; padding: 8px 10px; font-size: 12px; }
.verified b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; background: #3478f6; }
.reply-card { margin: 12px 0 38px; padding: 25px; border-radius: 18px; background: #fff; box-shadow: 0 18px 35px rgba(15,23,42,.10); text-align: center; }.reply-card.reveal { animation: floatIn .6s var(--motion-ease) both; }
.reply-card p { margin: 0 0 20px; color: #9b9b9b; font-size: 18px; }.reply-card > strong { display: block; font-size: 16px; font-weight: 500; }
.answer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.answer { height: 50px; border: 0; border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; transition: transform .25s var(--motion-ease), filter .25s ease; }.answer:hover { transform: translateY(-2px); filter: brightness(1.05); }
.answer span { font-size: 23px; margin-right: 7px; }.answer.no { background: linear-gradient(#fa443b,#e92e25); }.answer.yes { background: linear-gradient(#57b84e,#338e2d); }
.locked-list { width: 90%; margin: 0 auto; display: grid; gap: 16px; }
.locked-card { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 6px 18px rgba(59,130,246,.08); background: #eef2f7; }
.locked-card img { width: 100%; display: block; filter: blur(7px); transform: scale(1.03); opacity: .9; }
.lock-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(70%, 450px); padding: 30px 18px; border-radius: 22px; background: rgba(10,12,11,.78); backdrop-filter: blur(4px); color: #fff; text-align: center; display: grid; gap: 9px; }
.lock-panel strong { font-size: clamp(23px,4vw,38px); font-weight: 400; }.lock-panel small { color: #c5c5c5; font-size: clamp(15px,2.5vw,20px); }.lock-icon { font-size: 34px; transform: rotate(180deg); }
.reward-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(9,14,20,.58); backdrop-filter: blur(4px); animation: fadeIn .3s ease both; }
.reward-modal { position: relative; width: min(430px, 100%); padding: 32px 28px 28px; border-radius: 22px; text-align: center; color: #1f2937; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.28); animation: modalPop .55s var(--motion-ease) both; }
.modal-close { position: absolute; right: 14px; top: 8px; border: 0; background: transparent; font-size: 27px; color: #999; cursor: pointer; }
.reward-check { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; color: white; background: #45a83d; font-size: 36px; box-shadow: 0 0 0 9px #e8f7e7; }
.reward-modal > strong { color: #3f9d38; font-size: 32px; }.reward-modal h2 { font-size: 21px; margin: 12px 0 8px; }.reward-modal p { color: #6b7280; }.rocket { display: inline-block; font-size: 38px; animation: rocket 1.1s infinite alternate; }

/* Withdraw */
.withdraw-page { min-height: 100vh; overflow: hidden; position: relative; transition: opacity .42s ease, transform .42s var(--motion-ease); }
.withdraw-card { width: min(720px, calc(100% - 30px)); margin: 58px auto; padding: 50px 55px; text-align: center; background: rgba(255,255,255,.93); border: 1px solid #e5e7eb; border-radius: 28px; box-shadow: 0 18px 50px rgba(15,23,42,.09); position: relative; z-index: 3; animation: floatIn .75s var(--motion-ease) both; }
.success-orb { width: 74px; height: 74px; margin: -5px auto 20px; display: grid; place-items: center; color: white; border-radius: 50%; background: linear-gradient(145deg,#67c95f,#2d8b2a); font-size: 40px; box-shadow: 0 0 0 12px #edf9ec; animation: softPulse 2s infinite; }
.withdraw-card h1 { font-size: 38px; margin: 0 0 22px; }.withdraw-lead { font-size: 21px; margin-bottom: 34px; }
.earnings-box { border: 3px dashed #479c43; background: #f7fcf7; border-radius: 18px; padding: 24px; margin: 25px 0 32px; display: grid; gap: 13px; }.earnings-box strong { font-size: 22px; text-transform: uppercase; }.earnings-box span { font-size: 18px; }
.withdraw-button { width: 100%; height: 58px; margin-top: 18px; font-size: 18px; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }.confetti i { position: absolute; top: -30px; width: 10px; height: 18px; border-radius: 2px; animation: confettiFall 4s linear infinite; }

/* Final */
.final-page { min-height: 100vh; background: #fff; }
.final-main { width: min(1280px, 100%); margin: 0 auto; }
.final-main > h1 { margin: 0; padding: 24px 18px 18px; text-align: center; font-size: clamp(20px,3vw,27px); background: #f4f5f6; border: 1px solid #ddd; border-radius: 24px 24px 0 0; }
.final-player { height: min(56vw, 720px); min-height: 360px; display: grid; place-items: center; position: relative; overflow: hidden; background: #000; }
.final-player.is-playing .play-button { display: none; }
.progress-ring { --progress: 288deg; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#d32f2f var(--progress), #2b0505 0); position: relative; animation: ringPulse 1s infinite; }.progress-ring::before { content: ""; position: absolute; inset: 8px; background: #000; border-radius: 50%; }.progress-ring span { color: white; position: relative; font-weight: 800; }
.video-ready { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #171717, #000 58%); animation: fadeIn .4s both; }.final-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; background: #000; }.play-button.large { z-index: 3; width: 118px; height: 82px; }.final-access-row { display: flex; justify-content: center; padding: 20px 16px 4px; background: #fff; }.final-cta { display: inline-flex; justify-content: center; align-items: center; background: linear-gradient(#57b84e,#318f2d); color: white; font-weight: 800; padding: 16px 28px; border-radius: 8px; box-shadow: 0 12px 30px rgba(60,170,53,.28); animation: floatIn .65s var(--motion-ease) both, softPulse 1.8s .65s ease-in-out infinite; }.final-cta[hidden] { display: none; }
.sound-check { text-align: center; font-weight: 700; color: #30343a; margin: 0; padding: 18px; }
.comments-card { margin: 0 0 24px; border: 1px solid #ddd; border-radius: 14px; box-shadow: 0 8px 25px rgba(15,23,42,.10); padding: 12px 16px 20px; min-height: 170px; }
.comments-head { display: flex; justify-content: space-between; align-items: center; color: #60656d; }.comments-head b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; color: white; background: #4267b2; font-family: Arial; }.comments-head small { font-size: 12px; }
.comments-progress { height: 5px; margin: 13px 0 18px; background: #e9ecef; border-radius: 99px; overflow: hidden; }.comments-progress i { display: block; height: 100%; background: #cdd2d7; transition: width .5s; }
.comment { display: flex; gap: 14px; animation: commentIn .45s both; }.comment img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }.comment strong, .comment small { display: block; }.comment small { color: #999; margin-top: 4px; font-size: 12px; }.comment p { margin: 8px 0 0; font-size: 14px; }

@keyframes shine { 0%,42% { transform:translate3d(-220%,0,0) skew(-18deg); } 72%,100% { transform:translate3d(520%,0,0) skew(-18deg); } }
@keyframes floatIn { from { opacity:0; transform:translate3d(0,24px,0) scale(.985); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes toastIn { from { opacity:0; transform:translate3d(28px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes softPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }
@keyframes playPulse { 0%,100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 18px 35px rgba(0,0,0,.28); } 50% { transform:translate(-50%,-50%) scale(1.045); box-shadow:0 21px 44px rgba(0,0,0,.38); } }
@keyframes drift { to { transform:translate3d(12%,7%,0) scale(1.1); } }
@keyframes lightSweep { from { transform:translate3d(-105%,0,0); } to { transform:translate3d(105%,0,0); } }
@keyframes modalPop { from { opacity:0; transform:translate3d(0,22px,0) scale(.94); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes rocket { to { transform:translateY(-7px) rotate(5deg); } }
@keyframes confettiFall { to { transform:translate3d(80px,110vh,0) rotate(680deg); } }
@keyframes ringPulse { 50% { filter:brightness(1.25); } }
@keyframes commentIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

@media (max-width: 760px) {
  .access-loader-card { padding: 54px 20px 28px; }.access-loader-badge { padding: 10px 16px; font-size: 14px; }.access-progress { width: 154px; height: 154px; }.access-progress strong { font-size: 37px; }
  .site-header { padding: 8px 14px; height: 62px; }.brand-logo img { width: 145px; }.wallet { padding: 8px 10px; font-size: 13px; }
  .landing-card { margin-top: 22px; padding: 42px 24px 34px; }.trust-row { gap: 10px; flex-wrap: wrap; }.earning-toast { left: 15px; right: 15px; bottom: 15px; }
  .video-meta { padding-left: 15px; padding-right: 15px; }.reply-card { margin: 10px 12px 28px; padding: 22px 14px; }.locked-list { width: calc(100% - 24px); }.lock-panel { padding: 20px 10px; }
  .withdraw-card { margin: 28px auto; padding: 38px 20px; }.withdraw-card h1 { font-size: 32px; }.withdraw-lead { font-size: 18px; }.earnings-box strong { font-size: 18px; }.earnings-box span { font-size: 16px; }
  .video-stage, .final-player { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; }.final-access-row { padding: 16px 14px 2px; }.final-cta { width: 100%; }.comments-card { border-radius: 0; }.final-main > h1 { border-radius: 16px 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }