/* Teori — landing page: hero with the roadside scene, licences, try-a-question, feature bento, the scroll road,
   pricing, driving schools, FAQ and the final call. All illustrations are inline SVG/CSS in the app's colours. */

.home .top { position: fixed; inset: 0 0 auto; }
section { padding: 92px 0; }
main > section { overflow-x: clip; } /* stamps and scaled art may overflow a card, never the page */
.head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.head h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 880; letter-spacing: -.04em; margin: 14px 0; }
.head p { color: var(--muted); font-size: 18px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.ticks li::before, .trust li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 15%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks.big li { font-size: 17px; }

/* Pause animations of sections that are off screen (site.js adds .paused) */
[data-play].paused, [data-play].paused * { animation-play-state: paused !important; }

/* ══════════ Hero ══════════ */
.hero { position: relative; padding: 112px 0 0; isolation: isolate; overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #f4f6ff 0%, #eef1ff 58%, #e7ecff 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; will-change: transform; }
.b1 { width: 540px; height: 540px; background: #93c5fd; top: -200px; left: -140px; animation: drift1 24s ease-in-out infinite alternate; }
.b2 { width: 580px; height: 580px; background: #c4b5fd; top: -160px; right: -180px; animation: drift2 28s ease-in-out infinite alternate; }
.b3 { width: 440px; height: 440px; background: #a5b4fc; top: 260px; left: 38%; opacity: .32; animation: drift3 32s ease-in-out infinite alternate; }
.dots {
  position: absolute; inset: 0; opacity: .6;
  background-image: radial-gradient(color-mix(in srgb, var(--indigo) 24%, transparent) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, #000 15%, transparent 72%);
}
.stars { display: none; position: absolute; inset: 0 0 30%; }
.cloud { position: absolute; width: 130px; height: 38px; border-radius: 40px; background: #fff; opacity: .85; box-shadow: 0 10px 30px -10px rgba(79, 70, 229, .25); animation: cloud 110s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.cloud::after { width: 70px; height: 70px; left: 50px; top: -38px; }
.k1 { top: 9%; transform: scale(.8); animation-delay: -30s; }
.k2 { top: 4%; transform: scale(.6); animation-duration: 140s; animation-delay: -90s; }
.k3 { top: 15%; transform: scale(.5); animation-duration: 170s; animation-delay: -70s; opacity: .7; }
@media (prefers-color-scheme: dark) {
  .hero-bg { background: linear-gradient(180deg, #060918 0%, #0a0f2a 60%, #0e1438 100%); }
  .blob { opacity: .26; }
  .b1 { background: #1d4ed8; } .b2 { background: #6d28d9; } .b3 { background: #4338ca; opacity: .18; }
  .dots { opacity: .3; }
  .stars {
    display: block;
    background-image:
      radial-gradient(1.4px 1.4px at 8% 14%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 19% 32%, #fff 50%, transparent 52%),
      radial-gradient(1.6px 1.6px at 28% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 41% 24%, #fff 50%, transparent 52%),
      radial-gradient(1.3px 1.3px at 55% 11%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 63% 36%, #fff 50%, transparent 52%),
      radial-gradient(1.5px 1.5px at 74% 18%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 86% 7%, #fff 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 93% 29%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 35% 44%, #fff 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 5% 48%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 69% 52%, #fff 50%, transparent 52%);
    animation: twinkle 5s ease-in-out infinite alternate;
  }
  .cloud { background: #1b2350; opacity: .55; box-shadow: none; }
}

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; align-items: center; position: relative; z-index: 2; }
.hero-copy { padding-bottom: 70px; }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.pill-new {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 7px; border-radius: 999px; color: var(--text);
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--indigo) 20%, var(--line)); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; font-weight: 700;
}
.pill-new:hover { text-decoration: none; border-color: color-mix(in srgb, var(--indigo) 45%, var(--line)); }
.pill-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .25s; }
.pill-new:hover svg { transform: translateX(3px); }
.pill-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--hero); }
.pill-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #6366f1; animation: ping 2.2s ease-out infinite; }
.hero h1 { font-size: clamp(42px, 6.3vw, 78px); font-weight: 880; letter-spacing: -.045em; line-height: 1.02; margin: 22px 0 20px; }
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: 1%; right: 3%; bottom: .02em; height: .16em; border-radius: 99px; z-index: -1;
  background: var(--hero); opacity: .22; transform: scaleX(0) rotate(-1.2deg); transform-origin: left; animation: underline 1.1s .7s var(--ease) forwards;
}
.lead { font-size: clamp(17px, 1.55vw, 20px); color: var(--muted); max-width: 545px; }
.hero .stores { margin: 30px 0 24px; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 14.5px; font-weight: 650; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }

/* Phone */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 600px; margin-bottom: -104px; z-index: 3; animation: rise 1s .15s var(--ease) both; }
.phone {
  width: 288px; height: 588px; border-radius: 50px; padding: 11px; position: relative; translate: var(--px, 0) var(--py, 0);
  background: linear-gradient(150deg, #39426b, #0b1020 38%, #0b1020 70%, #262d52);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 23, 42, .5), inset 0 0 0 1.6px rgba(255, 255, 255, .14);
  animation: float 7s ease-in-out infinite; transition: translate .25s linear;
}
.phone::before { content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #222a4a; }
.phone-screen {
  --s-bg: #f4f6fb; --s-card: #fff; --s-text: #0f172a; --s-muted: #64748b; --s-line: #e2e8f0;
  height: 100%; border-radius: 40px; overflow: hidden; position: relative; background: var(--s-bg); color: var(--s-text); font-size: 12.5px; line-height: 1.35;
}
@media (prefers-color-scheme: dark) { .phone-screen { --s-bg: #0a0f1e; --s-card: #131a2e; --s-text: #e8edf7; --s-muted: #94a3b8; --s-line: #243052; } }
.p-status { position: relative; z-index: 3; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 28px; font-size: 12.5px; }
.p-island { position: absolute; left: 50%; top: 10px; width: 92px; height: 27px; border-radius: 20px; background: #04060e; transform: translateX(-50%); }
.p-icons { display: flex; gap: 4px; align-items: center; }
.p-icons i { display: block; width: 15px; height: 9px; border-radius: 3px; background: var(--s-text); opacity: .85; }
.p-icons i:first-child { width: 12px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.p-icons i:nth-child(2) { width: 11px; height: 9px; border-radius: 10px 10px 2px 2px; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.p-icons i:last-child { width: 20px; border: 1.5px solid var(--s-text); background: linear-gradient(90deg, var(--s-text) 70%, transparent 70%); background-clip: content-box; padding: 1px; opacity: .8; }
.scr { position: absolute; inset: 44px 0 0; padding: 6px 14px 14px; opacity: 0; transform: translateX(28px); transition: opacity .55s var(--ease), transform .7s var(--ease); pointer-events: none; }
.scr.is-on { opacity: 1; transform: none; }
.scr.is-off { transform: translateX(-28px); }

/* Home screen */
.h-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 2px 2px 12px; }
.h-hello { font-size: 21px; font-weight: 850; letter-spacing: -.03em; }
.h-lic { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; background: color-mix(in srgb, #4f46e5 12%, var(--s-card)); font-weight: 750; font-size: 11.5px; color: #4f46e5; }
.h-lic svg { width: 26px; height: 15px; }
.h-lic b { background: #4f46e5; color: #fff; border-radius: 5px; padding: 0 5px; font-size: 10px; }
.h-streak { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px 6px 7px; border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; font-weight: 850; }
.h-streak svg { width: 15px; height: 15px; }
.h-card { position: relative; overflow: hidden; background: var(--hero); color: #fff; border-radius: 22px; padding: 14px; display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; box-shadow: 0 14px 26px -12px rgba(79, 70, 229, .6); }
.h-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -50px; top: -60px; background: rgba(255, 255, 255, .1); }
.ring { position: relative; width: 84px; height: 84px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: rgba(255, 255, 255, .22); }
.ring .fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 239; stroke-dashoffset: 239; }
.scr-home.is-on .ring .fg { animation: ring87 1.8s .25s var(--ease) forwards; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.h-txt small { display: block; font-size: 8.5px; letter-spacing: .12em; font-weight: 850; opacity: .8; text-transform: uppercase; }
.h-txt strong { display: block; font-size: 15px; margin: 2px 0 3px; }
.h-sub { display: block; font-size: 10.5px; opacity: .85; }
.h-btn { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: #4f46e5; border-radius: 14px; font-weight: 850; padding: 9px; font-size: 13px; }
.h-btn svg { width: 14px; height: 14px; fill: #4f46e5; }
.h-goal { margin-top: 10px; background: var(--s-card); border-radius: 18px; padding: 11px 13px; box-shadow: 0 6px 16px rgba(15, 23, 42, .05); }
.h-goal-top { display: flex; align-items: center; gap: 7px; }
.h-goal-top svg { width: 16px; height: 16px; fill: none; stroke: #f59e0b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h-goal .bar { height: 7px; border-radius: 99px; background: var(--s-line); margin-top: 8px; overflow: hidden; }
.h-goal .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.scr-home.is-on .bar i { animation: grow80 1.6s .6s var(--ease) forwards; }
.h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.h-mini { background: var(--s-card); border-radius: 18px; padding: 11px 12px; box-shadow: 0 6px 16px rgba(15, 23, 42, .05); }
.h-mini .n { font-size: 23px; font-weight: 900; letter-spacing: -.03em; }
.h-mini .t { font-weight: 750; font-size: 11px; }
.h-tabs { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 50px; border-radius: 22px; background: var(--s-card); box-shadow: 0 8px 22px rgba(15, 23, 42, .1); display: flex; align-items: center; justify-content: space-around; padding: 0 10px; }
.h-tabs i { width: 18px; height: 18px; border-radius: 6px; background: var(--s-line); }
.h-tabs i.on { width: 62px; height: 32px; border-radius: 14px; background: var(--hero); }

/* Quiz screen */
.q-top { display: flex; align-items: center; gap: 8px; }
.q-x { font-size: 22px; line-height: 1; width: 22px; color: var(--s-muted); }
.q-title { flex: 1; }
.q-title small { display: block; color: var(--s-muted); font-size: 10px; font-weight: 650; }
.q-title b { font-size: 14.5px; font-weight: 850; }
.q-timer { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-card); font-weight: 850; font-variant-numeric: tabular-nums; font-size: 12px; }
.q-timer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.q-road { position: relative; height: 26px; margin: 4px 0 6px; }
.q-car { position: absolute; left: 41%; bottom: 4px; width: 34px; height: 19px; animation: bobble .35s ease-in-out infinite alternate; }
.q-dashes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; }
.q-dashes i { flex: 1; height: 4px; border-radius: 3px; background: #22c55e; }
.q-dashes i.cur { background: #2563eb; }
.q-dashes i.cur ~ i { background: var(--s-line); }
.q-pic svg { width: 100%; border-radius: 16px; display: block; }
.q-prompt { font-weight: 850; font-size: 14px; margin: 10px 2px 8px; }
.q-opt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 13px; background: var(--s-card); border: 1.5px solid var(--s-line); font-size: 11.5px; font-weight: 650; margin-top: 7px; transition: border-color .3s, background .3s; }
.q-opt i { width: 17px; height: 17px; border-radius: 6px; border: 2px solid #cbd5e1; flex: none; transition: background .25s, border-color .25s; }
.scr-quiz.is-on .o1 { animation: pick 4.6s .9s both; }
.scr-quiz.is-on .o3 { animation: pick 4.6s 1.7s both; }
.scr-quiz.is-on .o1 i, .scr-quiz.is-on .o3 i { animation: tick 4.6s both; }
.scr-quiz.is-on .o1 i { animation-delay: .9s; }
.scr-quiz.is-on .o3 i { animation-delay: 1.7s; }

/* Result screen */
.scr-result { text-align: center; padding-top: 34px; }
.r-badge { position: relative; z-index: 1; width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; background: var(--pass); display: grid; place-items: center; box-shadow: 0 16px 30px -10px rgba(22, 163, 74, .6); transform: scale(0); }
.r-badge svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
.scr-result.is-on .r-badge { animation: pop .7s .15s var(--spring) forwards; }
.scr-result.is-on .r-badge svg { animation: draw .5s .6s ease-out forwards; }
.r-title { font-size: 26px; font-weight: 900; letter-spacing: -.03em; margin-top: 14px; }
.r-sub { color: var(--s-muted); font-weight: 650; margin-top: 2px; }
.r-bars { text-align: left; margin: 18px 4px 0; display: grid; gap: 10px; }
.r-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 750; }
.r-bar { height: 8px; border-radius: 99px; background: var(--s-line); overflow: hidden; }
.r-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--hero); }
.scr-result.is-on .r-bar i { animation: growTo 1.2s .7s var(--ease) forwards; }
.r-btn { margin: 22px 4px 0; padding: 11px; border-radius: 14px; background: var(--hero); color: #fff; font-weight: 850; font-size: 13px; }
.r-confetti { position: absolute; left: 50%; top: 70px; width: 0; height: 0; }
.r-confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; opacity: 0; }
.r-confetti i:nth-child(4n+1) { background: #22c55e; } .r-confetti i:nth-child(4n+2) { background: #f59e0b; }
.r-confetti i:nth-child(4n+3) { background: #6366f1; } .r-confetti i:nth-child(4n+4) { background: #fb7185; }
.scr-result.is-on .r-confetti i { animation: burst 1.5s .25s cubic-bezier(.15, .7, .3, 1) forwards; }
.r-confetti i:nth-child(1) { --x: -96px; --y: -40px; --r: 200deg; } .r-confetti i:nth-child(2) { --x: 90px; --y: -52px; --r: -160deg; }
.r-confetti i:nth-child(3) { --x: -70px; --y: -86px; --r: 120deg; } .r-confetti i:nth-child(4) { --x: 66px; --y: -92px; --r: -240deg; }
.r-confetti i:nth-child(5) { --x: -116px; --y: 18px; --r: 300deg; } .r-confetti i:nth-child(6) { --x: 112px; --y: 10px; --r: -90deg; }
.r-confetti i:nth-child(7) { --x: -30px; --y: -110px; --r: 60deg; } .r-confetti i:nth-child(8) { --x: 34px; --y: -116px; --r: -60deg; }
.r-confetti i:nth-child(9) { --x: -128px; --y: -70px; --r: 180deg; } .r-confetti i:nth-child(10) { --x: 126px; --y: -76px; --r: -200deg; }
.r-confetti i:nth-child(11) { --x: -54px; --y: 40px; --r: 140deg; } .r-confetti i:nth-child(12) { --x: 58px; --y: 46px; --r: -120deg; }

/* Floating chips around the phone */
.chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; border-radius: 20px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow); font-size: 14px; line-height: 1.25;
  translate: var(--px, 0) var(--py, 0); animation: float 6s ease-in-out infinite; transition: translate .25s linear;
}
.chip b { display: block; font-weight: 850; }
.chip small { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.chip-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.chip-ic svg { width: 21px; height: 21px; }
.chip-ic.gold { background: var(--gold); box-shadow: 0 8px 18px -6px rgba(245, 158, 11, .65); }
.chip-ic.green { background: var(--pass); box-shadow: 0 8px 18px -6px rgba(22, 163, 74, .6); }
.chip-streak { top: -2px; left: -44px; }
.chip-pass { bottom: 74px; right: -40px; animation-delay: -2.2s; }
.sign-card {
  position: absolute; z-index: 2; left: -40px; bottom: 210px; width: 128px; padding: 7px 7px 10px; border-radius: 22px; text-align: center;
  background: var(--card); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  translate: var(--px, 0) var(--py, 0); animation: float 7.5s -1.2s ease-in-out infinite; transition: translate .25s linear;
}
.sign-card svg { width: 100%; border-radius: 15px; }
.sign-card b { display: inline-block; margin: 7px 0 2px; padding: 1px 8px; border-radius: 7px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 850; }
.sign-card span { display: block; font-size: 12px; font-weight: 750; }

/* The roadside band */
.land-wrap { position: relative; z-index: 1; height: max(196px, 16.667vw); margin-top: -12px; }
.land { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.land {
  --b-far: #dfe5ff; --b-mid: #ccd5fe; --b-turbine: #c3cdfd; --b-hub: #a5b4fc; --b-tree1: #a5b4fc; --b-tree2: #8f9bfa; --b-trunk: #7c83e8;
  --b-house: #fff; --b-roof: #818cf8; --b-roof2: #a5b4fc; --b-win: #c7d2fe; --b-door: #6366f1; --b-verge: #edf0ff; --b-road: #46498a;
  --b-kerb: #c7d2fe; --b-bike: #a5b4fc; --b-walk: #e3e8ff; --b-pole: #94a3b8; --b-lamp: #312e81; --b-tyre: #1e1b4b; --b-suit: #312e81;
  --b-arm: #4338ca; --b-puff: #cbd5e1; --b-frame: #4f46e5; --b-jeans: #334155; --b-tlbox: #1e1b4b; --b-tloff: #3b3f6b;
}
@media (prefers-color-scheme: dark) {
  .land {
    --b-far: #141a42; --b-mid: #1b2252; --b-turbine: #2b3470; --b-hub: #3b4590; --b-tree1: #262f69; --b-tree2: #303b7e; --b-trunk: #222a5c;
    --b-house: #252d61; --b-roof: #39438d; --b-roof2: #303a7a; --b-win: #fde68a; --b-door: #141a42; --b-verge: #11163a; --b-road: #0d1130;
    --b-kerb: #252d61; --b-bike: #232c72; --b-walk: #141a42; --b-pole: #4b5578; --b-lamp: #fde68a; --b-tyre: #04060e; --b-suit: #4f46e5;
    --b-arm: #6366f1; --b-puff: #4b5578; --b-frame: #818cf8; --b-jeans: #64748b; --b-tlbox: #04060e; --b-tloff: #20244a;
  }
  .land .win { filter: url(#f-glow); }
}
.land .tw { fill: var(--b-turbine); }
.land .tw2 { fill: var(--b-hub); }
.land .rotor { transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; }
.land .beacon { fill: #ef4444; opacity: 0; }
.land .h-far { fill: var(--b-far); }
.land .h-mid { fill: var(--b-mid); }
.land .tree { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5.5s ease-in-out infinite alternate; }
.land .trunk { fill: var(--b-trunk); }
.land .c1 { fill: var(--b-tree1); }
.land .c2 { fill: var(--b-tree2); }
.land .house { fill: var(--b-house); }
.land .roof { fill: var(--b-roof); }
.land .r2 { fill: var(--b-roof2); }
.land .win { fill: var(--b-win); }
.land .door { fill: var(--b-door); }
.land .verge { fill: var(--b-verge); }
.land .road { fill: var(--b-road); }
.land .kerb { fill: var(--b-kerb); }
.land .bike { fill: var(--b-bike); }
.land .walk { fill: var(--b-walk); }
.land .pole { fill: var(--b-pole); }
.land .pole-s { fill: none; stroke: var(--b-pole); stroke-width: 3.2; stroke-linecap: round; }
.land .lamp { fill: var(--b-lamp); }
.land .lamp-glow, .land .beam, .land .moon { opacity: 0; }
.land .tyre { fill: var(--b-tyre); }
.land .suit, .land .arm, .land .frame, .land .jeans, .land .jacket, .land .ring, .land .leg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.land .suit { stroke: var(--b-suit); }
.land .arm { stroke: var(--b-arm); }
.land .ring { stroke: var(--b-tyre); stroke-width: 2.6; }
.land .frame { stroke: var(--b-frame); stroke-width: 2.4; }
.land .seat { fill: var(--b-tyre); }
.land .basket { fill: none; stroke: #f59e0b; stroke-width: 2; }
.land .jeans { stroke: var(--b-jeans); stroke-width: 3.6; }
.land .jacket { stroke: #f59e0b; }
.land .leg { stroke: var(--b-jeans); stroke-width: 3; transform-box: fill-box; transform-origin: 50% 0; animation: step .45s ease-in-out infinite alternate; }
.land .l2 { animation-delay: -.45s; }
.land .tl-pole { fill: var(--b-pole); }
.land .tl-box { fill: var(--b-tlbox); }
.land .tl-off { fill: var(--b-tloff); }
.land .bob { animation: bob .42s ease-in-out infinite alternate; }
.land .b2 { animation-duration: .36s; }
.land .b3 { animation-duration: .5s; }
.land .puffs circle { fill: var(--b-puff); opacity: 0; transform-box: fill-box; transform-origin: center; }
.land .lane-car { animation: convoy 18s infinite; }
.land .lane-bike { animation: bikes 18s infinite; }
.land .lane-car .puffs circle { animation: puffA 18s linear infinite; }
.land .lane-bike .puffs circle { animation: puffB 18s linear infinite; }
.land .ped { opacity: 0; animation: ped 18s linear infinite; }
.land .tl-r { animation: tlr 18s step-end infinite; }
.land .tl-y { animation: tly 18s step-end infinite; }
.land .tl-g { animation: tlg 18s step-end infinite; }
@media (prefers-color-scheme: dark) {
  .land .sun { opacity: 0; }
  .land .moon, .land .lamp-glow, .land .beam { opacity: 1; }
  .land .beacon { animation: blink 2.4s steps(1) infinite; }
}

/* ══════════ Facts ══════════ */
.facts { position: relative; z-index: 2; padding: 26px 0 10px; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fact { background: var(--card); border-radius: 22px; padding: 20px 22px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.fact b { display: block; font-size: 38px; font-weight: 900; letter-spacing: -.045em; line-height: 1.1; background: var(--hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fact > span { color: var(--muted); font-size: 14.5px; font-weight: 600; }

/* ══════════ Licences ══════════ */
.lics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lic { background: var(--card); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: transform .45s var(--ease), box-shadow .45s; }
.lic:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.lic-art { padding: 24px 26px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--l1) 75%, var(--card)), var(--card)); }
.lic-art svg { width: 100%; max-width: 270px; margin: 0 auto; overflow: visible; }
.lic-art .blob { fill: var(--l1); }
.lic-art .road { fill: var(--l3); }
.lic-art .dash { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 9; animation: roadmove .55s linear infinite; }
.lic-art .speed path { fill: none; stroke: var(--l4); stroke-width: 4; stroke-linecap: round; animation: speedline 1.1s ease-in-out infinite; }
.lic-art .speed path:nth-child(2) { animation-delay: -.35s; }
.lic-art .speed path:nth-child(3) { animation-delay: -.7s; }
.lic-art .veh { animation: bob .45s ease-in-out infinite alternate; transition: translate .5s var(--ease); }
.lic-art .wheel { transform-box: fill-box; transform-origin: center; animation: spin .8s linear infinite; }
.lic-art .tyre { fill: var(--n1); }
.lic-art .vd { fill: var(--veh-dark); } .lic-art .vds { stroke: var(--veh-dark); }
.lic-art .vf { fill: var(--veh-frame); } .lic-art .vfs { stroke: var(--veh-frame); }
.lic-art { --veh-dark: #1e1b4b; --veh-frame: #312e81; }
@media (prefers-color-scheme: dark) { .lic-art { --veh-dark: #4a54a6; --veh-frame: #5b64c0; } .lic-art .tyre { fill: #04060e; } }
.lic-art .spoke { fill: none; stroke: var(--n1); stroke-width: 1.8; stroke-linecap: round; }
.lic-art .spark { fill: var(--l5); transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.lic-art .s2 { fill: var(--l4); animation-delay: -1.3s; }
.lic:hover .veh, .lic:hover .wheel { translate: 5px 0; }
.lic-body { padding: 10px 26px 28px; }
.lic-head { display: flex; align-items: center; gap: 12px; }
.code { min-width: 42px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--hero); color: #fff; font-weight: 850; font-size: 15px; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .65); }
.lic h3 { font-size: 24px; font-weight: 850; }
.lic-body > p { color: var(--muted); margin: 10px 0 16px; }

/* ══════════ Try a question ══════════ */
.demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.demo-copy h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 880; letter-spacing: -.04em; margin: 14px 0 14px; }
.demo-copy .sub { color: var(--muted); font-size: 18px; margin-bottom: 24px; }
.demo { background: var(--card); border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.demo-pic { position: relative; }
.demo-pic svg { width: 100%; display: block; aspect-ratio: 400 / 230; }
.demo-tag { position: absolute; left: 14px; top: 14px; background: #059669; color: #fff; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(5, 150, 105, .7); }
.demo-body { padding: 22px 24px 26px; }
.demo-hint { color: var(--muted); font-size: 14px; font-weight: 650; }
.demo-q { font-size: 21px; font-weight: 820; margin: 6px 0 8px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; margin-top: 10px; border-radius: 16px;
  border: 2px solid var(--line); background: var(--card); color: var(--text); font-size: 16px; font-weight: 620; cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.opt:hover { border-color: color-mix(in srgb, var(--indigo) 40%, var(--line)); }
.opt:active { transform: scale(.99); }
.opt i { width: 24px; height: 24px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--muted) 45%, transparent); flex: none; transition: background .2s, border-color .2s; }
.opt[aria-pressed="true"] { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 7%, var(--card)); }
.opt[aria-pressed="true"] i, .demo.checked .opt.right i {
  border-color: transparent; background: var(--hero) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.demo.checked .opt { cursor: default; }
.demo.checked .opt.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--card)); }
.demo.checked .opt.right i { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.demo.checked .opt.missed { border-style: dashed; }
.demo.checked .opt.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--card)); animation: shake .4s; }
.demo.checked .opt.wrong i { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: transparent; }
.demo-actions { display: flex; gap: 10px; margin-top: 18px; }
.demo-result { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--alt); animation: rise .5s var(--ease); }
.verdict { display: none; font-weight: 850; font-size: 17px; }
.demo.ok .verdict.ok { display: block; color: var(--green); }
.demo.bad .verdict.bad { display: block; color: var(--red); }
.expl { color: var(--muted); margin-top: 6px; font-size: 15.5px; }
.jx-car { animation: jx 7s linear infinite; }

/* ══════════ Features (bento) ══════════ */
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); gap: 18px;
  grid-template-areas: "exam exam fore fore" "exam exam mist sign" "lang lang listen off" "rep rep streak book";
}
.t-exam { grid-area: exam; } .t-fore { grid-area: fore; } .t-mist { grid-area: mist; } .t-signs { grid-area: sign; }
.t-lang { grid-area: lang; } .t-listen { grid-area: listen; } .t-off { grid-area: off; } .t-rep { grid-area: rep; }
.t-streak { grid-area: streak; } .t-book { grid-area: book; }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 22px; border-radius: 28px;
  background: var(--card); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile-art { flex: 1; display: grid; place-items: center; min-height: 130px; margin-bottom: 16px; }
.tile h3 { font-size: 19px; font-weight: 820; }
.tile p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.t-fore, .t-lang, .t-rep { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: center; }
.t-fore .tile-art, .t-lang .tile-art, .t-rep .tile-art { margin: 0; order: 2; }

/* Exam mock */
.ex { width: 100%; max-width: 520px; background: var(--bg); border-radius: 24px; padding: 16px; border: 1px solid var(--line); }
.ex-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.ex-timer { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 850; font-variant-numeric: tabular-nums; }
.ex-timer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ex-road { position: relative; height: 38px; margin: 10px 0 10px; }
.ex-car { position: absolute; bottom: 6px; left: 0; width: 44px; height: 25px; animation: excar 14s linear infinite; }
.ex-dashes {
  position: absolute; left: 0; right: 22px; bottom: 0; height: 6px; animation: exfill 14s linear infinite;
  background: linear-gradient(90deg, #22c55e, #16a34a) 0 0 / 0% 100% no-repeat, var(--line);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 2.5px), transparent calc(4% - 2.5px) 4%); mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 2.5px), transparent calc(4% - 2.5px) 4%);
}
.ex-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
.ex-next { padding: 8px 16px; border-radius: 12px; background: var(--hero); color: #fff; font-size: 13.5px; box-shadow: var(--glow); }
.ex-flag { position: absolute; right: 0; bottom: 0; width: 16px; height: 26px; }
.ex-flag::before { content: ""; position: absolute; left: 2px; bottom: 0; width: 2px; height: 26px; border-radius: 2px; background: var(--muted); }
.ex-flag::after { content: ""; position: absolute; left: 4px; top: 0; width: 12px; height: 9px; background: conic-gradient(var(--text) 25%, var(--card) 0 50%, var(--text) 0 75%, var(--card) 0) 0 0 / 6px 4.5px; animation: wave 1.2s ease-in-out infinite alternate; transform-origin: left; }
.ex-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; align-items: center; }
.ex-pic svg { width: 100%; border-radius: 14px; }
.ex-opts span { position: relative; display: block; height: 30px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line); margin-bottom: 8px; }
.ex-opts span:last-child { margin: 0; }
.ex-opts span::before { content: ""; position: absolute; left: 8px; top: 7px; width: 13px; height: 13px; border-radius: 5px; border: 2px solid var(--line); }
.ex-opts span::after { content: ""; position: absolute; left: 30px; right: 12px; top: 12px; height: 5px; border-radius: 3px; background: var(--line); }
.ex-opts .on { animation: exopt 4s ease infinite; }
.ex-opts .on::before { animation: exbox 4s ease infinite; }
.ex-opts .on:last-child, .ex-opts .on:last-child::before { animation-delay: .6s; }

/* Forecast */
.fo-ring { position: relative; width: 140px; height: 140px; justify-self: center; }
.fo-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fo-ring circle { fill: none; stroke-width: 10; }
.fo-ring .bg { stroke: var(--alt); }
.fo-ring .fg { stroke: url(#g-hero); stroke: #4f46e5; stroke-linecap: round; stroke-dasharray: 239; stroke-dashoffset: 239; }
.reveal.in .fo-ring .fg { animation: ring87 2s .3s var(--ease) forwards; }
.fo-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; letter-spacing: -.04em; }
.fo-bars { width: 100%; display: grid; gap: 12px; margin-top: 18px; }
.fo-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.fo-row div { height: 9px; border-radius: 99px; background: var(--alt); overflow: hidden; }
.fo-row i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--pass); transition: width 1.4s var(--ease); }
.fo-row i.warn { background: var(--gold); }
.reveal.in .fo-row i { width: var(--w); }
.reveal.in .fo-row:nth-child(2) i { transition-delay: .15s; }
.reveal.in .fo-row:nth-child(3) i { transition-delay: .3s; }
.t-fore .tile-art { display: block; }

/* Mistakes */
.mi { position: relative; width: 150px; height: 118px; perspective: 700px; }
.mi-card { position: absolute; inset: 0; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mi-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: 16px; height: 34px; border-radius: 10px; background: var(--alt); }
.mi-card.c3 { transform: translate(20px, -16px) rotate(9deg); opacity: .55; }
.mi-card.c2 { transform: translate(10px, -8px) rotate(4.5deg); opacity: .8; }
.mi-card.c1 { transform-style: preserve-3d; animation: miflip 4.4s var(--ease) infinite; }
.mi-card.c1::before { display: none; }
.mi i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 27px; font-weight: 900; color: #fff; backface-visibility: hidden; }
.mi .no { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 20px -8px rgba(225, 29, 72, .6); }
.mi .yes { background: var(--pass); transform: rotateY(180deg); box-shadow: 0 10px 20px -8px rgba(22, 163, 74, .6); }

/* Signs: a flashcard on a post */
.sg { position: relative; width: 130px; height: 150px; perspective: 700px; }
.sg-post { position: absolute; left: 50%; bottom: 4px; width: 7px; height: 84px; margin-left: -3.5px; border-radius: 3px; background: linear-gradient(90deg, #6b7587, #eef2f8 38%, #b9c2d0 62%, #5e6879); }
.sg-post::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 40px; height: 8px; margin-left: -20px; border-radius: 50%; background: rgba(15, 23, 42, .14); }
.sg-c { position: absolute; z-index: 1; left: 15px; top: 0; width: 100px; height: 92px; opacity: 0; filter: drop-shadow(4px 7px 6px rgba(15, 23, 42, .22)); animation: sgflip 12s var(--ease) infinite; }
.sg-c:nth-child(2) { animation-delay: -9s; }
.sg-c:nth-child(3) { animation-delay: -6s; }
.sg-c:nth-child(4) { animation-delay: -3s; }

/* Two languages */
.lg { width: 100%; max-width: 360px; display: grid; gap: 14px; justify-items: center; }
.lg-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 124px; padding: 4px; border-radius: 999px; background: var(--alt); border: 1px solid var(--line); font-weight: 850; font-size: 13px; }
.lg-toggle span { position: relative; z-index: 1; text-align: center; padding: 6px 0; }
.lg-toggle i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); animation: knob 6s var(--ease) infinite; }
.lg-card { position: relative; width: 100%; height: 84px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.lg-card p { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 18px; text-align: center; font-weight: 780; font-size: 16.5px; animation: swap 6s var(--ease) infinite; }
.lg-card .lg-en { animation-delay: -3s; }

/* Listen */
.li { display: flex; align-items: center; gap: 16px; }
.li-ic { width: 60px; height: 60px; border-radius: 19px; background: var(--hero); display: grid; place-items: center; box-shadow: var(--glow); }
.li-ic svg { width: 28px; height: 28px; fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.li-eq { display: flex; align-items: center; gap: 5px; height: 64px; }
.li-eq i { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #818cf8, #4f46e5); transform: scaleY(.2); animation: eq 1.05s ease-in-out infinite alternate; }
.li-eq i:nth-child(2) { animation-delay: -.3s; } .li-eq i:nth-child(3) { animation-delay: -.7s; } .li-eq i:nth-child(4) { animation-delay: -.15s; }
.li-eq i:nth-child(5) { animation-delay: -.55s; } .li-eq i:nth-child(6) { animation-delay: -.9s; } .li-eq i:nth-child(7) { animation-delay: -.4s; }
.li-eq i:nth-child(8) { animation-delay: -.8s; } .li-eq i:nth-child(9) { animation-delay: -.2s; }

/* Offline */
.of { position: relative; width: 210px; height: 112px; }
.of-path { position: absolute; left: 5px; top: 10px; width: 200px; height: 80px; overflow: visible; }
.of-path path { fill: none; stroke: var(--l4); stroke-width: 2.5; stroke-dasharray: 6 8; stroke-linecap: round; animation: dashmove 1.2s linear infinite; }
.of-plane { position: absolute; left: 0; top: 0; width: 30px; height: 30px; offset-path: path("M15 80C65 80 75 24 125 24S185 50 201 40"); offset-rotate: auto; animation: fly 5s ease-in-out infinite; }
.of-plane svg { width: 30px; height: 30px; fill: var(--indigo); transform: rotate(45deg); }
@media (prefers-color-scheme: dark) { .of-plane svg { fill: #a5b4fc; } }
.of-switch { position: absolute; right: 2px; bottom: 0; width: 50px; height: 30px; border-radius: 999px; background: var(--gold); box-shadow: 0 6px 14px -6px rgba(245, 158, 11, .7); }
.of-switch i { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .25); }

/* Spaced repetition */
.rp { width: 100%; max-width: 440px; }
.rp-curve { width: 100%; height: 92px; overflow: visible; }
.rp-line { fill: none; stroke: #6366f1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.reveal.in .rp-line { animation: drawLong 2.6s .3s var(--ease) forwards; }
.rp-curve circle { fill: #22c55e; stroke: var(--card); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.reveal.in .rp-curve circle { animation: pop .5s var(--spring) forwards; }
.reveal.in .rp-curve circle:nth-of-type(1) { animation-delay: .9s; }
.reveal.in .rp-curve circle:nth-of-type(2) { animation-delay: 1.6s; }
.reveal.in .rp-curve circle:nth-of-type(3) { animation-delay: 2.3s; }
.rp-days { display: flex; justify-content: space-between; margin-top: 12px; }
.rp-days i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 850; font-size: 12.5px; background: var(--alt); color: var(--muted); }
.reveal.in .rp-days i { animation: daypop .5s var(--spring) forwards; }
.reveal.in .rp-days i:nth-child(2) { animation-delay: .15s; } .reveal.in .rp-days i:nth-child(3) { animation-delay: .3s; }
.reveal.in .rp-days i:nth-child(4) { animation-delay: .45s; } .reveal.in .rp-days i:nth-child(5) { animation-delay: .6s; }
.reveal.in .rp-days i:nth-child(6) { animation-delay: .75s; } .reveal.in .rp-days i:nth-child(7) { animation-delay: .9s; }

/* Streak */
.st { display: grid; justify-items: center; gap: 4px; }
.st-flame { width: 66px; height: 66px; transform-origin: 50% 90%; animation: flick .8s ease-in-out infinite alternate; filter: drop-shadow(0 10px 16px rgba(245, 158, 11, .45)); }
.st b { font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.st-dots { display: flex; gap: 6px; margin-top: 6px; }
.st-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--alt); }
.reveal.in .st-dots i { animation: dotfill .4s var(--spring) forwards; }
.reveal.in .st-dots i:nth-child(2) { animation-delay: .12s; } .reveal.in .st-dots i:nth-child(3) { animation-delay: .24s; }
.reveal.in .st-dots i:nth-child(4) { animation-delay: .36s; } .reveal.in .st-dots i:nth-child(5) { animation-delay: .48s; }
.reveal.in .st-dots i:nth-child(6) { animation-delay: .6s; } .reveal.in .st-dots i:nth-child(7) { animation-delay: .72s; }

/* Book */
.bk { position: relative; width: 156px; height: 104px; perspective: 600px; }
.bk::before { content: ""; position: absolute; inset: 6px -8px -8px; border-radius: 16px; background: var(--hero); }
.bk-l, .bk-r, .bk-page { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--card) repeating-linear-gradient(180deg, transparent 0 14px, var(--line) 14px 16px) 12px 22px / calc(100% - 24px) 66px no-repeat; border: 1px solid var(--line); }
.bk-l { left: 0; border-radius: 12px 3px 3px 12px; }
.bk-r { right: 0; border-radius: 3px 12px 12px 3px; }
.bk-page { right: 0; border-radius: 3px 12px 12px 3px; transform-origin: left center; animation: page 3.4s var(--ease) infinite; backface-visibility: visible; }

/* ══════════ The road you drive by scrolling ══════════ */
.journey { position: relative; padding-top: 86px; --p: 0; }
.j-road { position: absolute; left: 0; right: 0; top: 26px; height: 32px; border-radius: 16px; background: #3d3a86; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.j-road::before { content: ""; position: absolute; left: 14px; right: 14px; top: 15px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 18px, transparent 18px 34px); }
.j-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, transparent, rgba(129, 140, 248, .55)); }
@media (prefers-color-scheme: dark) { .j-road { background: #161c45; } }
.j-car { position: absolute; z-index: 2; top: 4px; left: calc(var(--p) * (100% - 70px)); width: 70px; height: 44px; filter: drop-shadow(0 8px 10px rgba(15, 23, 42, .3)); }
.j-body { animation: bob .4s ease-in-out infinite alternate; }
.j-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.j-step { position: relative; text-align: center; }
.j-sign {
  position: absolute; z-index: 1; top: -78px; left: 50%; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%;
  display: grid; place-items: center; background: #0b5cad; border: 3px solid #fff; color: #fff; font-weight: 900; font-size: 19px;
  box-shadow: 0 8px 18px -6px rgba(11, 92, 173, .6); transform: scale(.82); transition: transform .5s var(--spring), background .3s;
}
.j-sign svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.j-sign::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #0b5cad; opacity: 0; }
.j-step.reached .j-sign { transform: scale(1.06); }
.j-step.reached .j-sign::after { animation: ping 1.2s ease-out 1; }
.j-last.reached .j-sign { background: #16a34a; }
.j-last .j-sign::after { border-color: #16a34a; }
.j-card { position: relative; height: 100%; padding: 28px 24px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); opacity: .5; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s, border-color .6s; }
.j-step.reached .j-card { opacity: 1; transform: none; box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--indigo) 35%, transparent); }
.j-card h3 { font-size: 20px; font-weight: 850; margin-bottom: 8px; }
.j-card p { color: var(--muted); font-size: 15.5px; }
.j-stamp { position: absolute; right: 14px; top: -16px; padding: 5px 13px; border: 3px solid var(--green); border-radius: 10px; color: var(--green); background: var(--card); font-weight: 900; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; opacity: 0; transform: rotate(-9deg) scale(2.2); transition: opacity .3s, transform .55s var(--spring); }
.j-last.reached .j-stamp { opacity: 1; transform: rotate(-9deg) scale(1); transition-delay: .25s; }

/* ══════════ Pricing ══════════ */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 372px; padding: 32px 28px 28px; border-radius: 30px; background: var(--card); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: transform .45s var(--ease), box-shadow .45s; }
.price:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price.hl { border-color: transparent; box-shadow: var(--shadow-lg); }
.price.hl::before {
  content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ang), #2563eb, #7c3aed, #ec4899, #f59e0b, #22c55e, #2563eb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spinang 6s linear infinite;
}
.price .badge { position: absolute; top: -14px; left: 26px; background: var(--hero); color: #fff; font-size: 12px; font-weight: 850; padding: 5px 13px; border-radius: 999px; box-shadow: var(--glow); }
.price h3 { font-size: 22px; font-weight: 850; }
.price .desc { color: var(--muted); font-size: 15px; margin-top: 4px; min-height: 46px; }
.price .amount { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px; }
.price .amount b { font-size: 50px; font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.price .amount s { color: var(--muted); font-size: 18px; }
.price .per { color: var(--muted); font-size: 14px; font-weight: 650; }
.price .perday { display: inline-flex; align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); font-size: 13px; font-weight: 800; }
.price .cats { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.price .cats span { padding: 3px 9px; border-radius: 8px; background: var(--alt); font-size: 12.5px; font-weight: 750; color: var(--muted); }
.price ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; }
.price li { display: flex; gap: 10px; font-size: 15px; }
.price li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--green) 15%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.price .btn { margin-top: auto; width: 100%; }
.price:not(.hl) .btn { background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: none; }
.price-note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 26px; }
.skeleton { height: 440px; background: linear-gradient(90deg, var(--card), var(--alt), var(--card)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ══════════ Driving schools ══════════ */
.school {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center;
  padding: 56px; border-radius: 36px; background: var(--hero); color: #fff; box-shadow: 0 34px 70px -24px rgba(79, 70, 229, .6);
}
.school::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -180px; background: rgba(255, 255, 255, .09); }
.school::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 26px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 26px, transparent 26px 48px); }
.eyebrow.light { background: rgba(255, 255, 255, .16); color: #fff; }
.school h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 880; letter-spacing: -.035em; margin: 14px 0 12px; }
.school p { opacity: .9; margin-bottom: 26px; max-width: 520px; }
.school .btn svg { width: 18px; height: 18px; }
.tickets { position: relative; height: 240px; }
.ticket {
  --r: 0deg; --x: 0px; --y: 0px; position: absolute; left: 50%; top: 50%; width: 270px; padding: 16px 20px; border-radius: 18px;
  background: #fff; color: #0f172a; box-shadow: 0 22px 40px -14px rgba(15, 23, 42, .5);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 1s var(--spring);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.ticket small { display: block; color: #64748b; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.ticket b { display: block; margin-top: 4px; font: 800 20px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; }
.ticket .ok { position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--pass); color: #fff; display: grid; place-items: center; font-weight: 900; }
.school.in .k1 { --r: 5deg; --x: 18px; --y: -40px; transition-delay: .3s; }
.school.in .k2 { --r: -4deg; --x: -8px; --y: 6px; transition-delay: .15s; }
.school.in .k3 { --r: -12deg; --x: -34px; --y: 52px; }
.k1 { z-index: 3; } .k2 { z-index: 2; } .k3 { z-index: 1; }

/* ══════════ FAQ ══════════ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq-side { position: sticky; top: 104px; }
.faq-side h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 880; letter-spacing: -.04em; margin: 14px 0 12px; }
.faq-side p { color: var(--muted); font-size: 17px; margin-bottom: 24px; }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--indigo) 25%, var(--line)); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 60px 20px 22px; font-weight: 760; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; transition: transform .4s var(--ease), background-color .3s;
  background: var(--alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: color-mix(in srgb, var(--indigo) 15%, var(--alt)); }
.faq .ans { padding: 0 22px 20px; color: var(--muted); }

/* ══════════ Get the app ══════════ */
.final {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; padding: 60px; border-radius: 38px; color: #fff;
  background: radial-gradient(600px 300px at 85% 10%, rgba(124, 58, 237, .55), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(37, 99, 235, .5), transparent 70%), #0f1235;
  box-shadow: 0 34px 70px -24px rgba(15, 18, 53, .7);
}
.final::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.final h2 { font-size: clamp(34px, 4.8vw, 58px); font-weight: 900; letter-spacing: -.045em; }
.final p { color: rgba(255, 255, 255, .78); font-size: 18px; margin: 12px 0 30px; max-width: 460px; }
.store.light { background: #fff; color: #0f172a; }
.licence-card {
  position: relative; z-index: 1; width: min(320px, 100%); aspect-ratio: 1.586; margin: 0 auto; padding: 18px; border-radius: 22px; color: #0f172a;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3 38%, #e0e7ff); box-shadow: 0 34px 60px -20px rgba(0, 0, 0, .65); transform: rotate(-6deg);
  animation: float 8s ease-in-out infinite;
}
.lc-top { display: flex; justify-content: space-between; align-items: center; }
.lc-top b { font-size: 17px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #4f46e5; }
.lc-chip { width: 36px; height: 27px; border-radius: 6px; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.lc-body { display: flex; gap: 14px; margin-top: 14px; }
.lc-photo { width: 72px; height: 88px; border-radius: 10px; background: #eef2ff; overflow: hidden; flex: none; }
.lc-photo svg { width: 100%; height: 100%; }
.lc-lines { flex: 1; }
.lc-lines i { display: block; height: 8px; border-radius: 4px; background: rgba(15, 23, 42, .13); margin-bottom: 9px; }
.lc-lines i.s { width: 60%; }
.lc-cats { display: flex; gap: 5px; margin-top: 12px; }
.lc-cats span { min-width: 30px; padding: 3px 7px; border-radius: 7px; background: var(--hero); color: #fff; font-weight: 850; font-size: 11.5px; text-align: center; }
.lc-stamp { position: absolute; right: -14px; bottom: 20px; padding: 7px 16px; border: 4px solid #16a34a; border-radius: 12px; color: #16a34a; background: rgba(255, 255, 255, .88); font-weight: 900; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: rotate(-14deg) scale(2.4); }
.final.in .lc-stamp { animation: stamp .6s .6s var(--spring) forwards; }

/* ══════════ Responsive ══════════ */
@media (max-width: 1200px) {
  .chip-pass { right: -6px; }
  .chip-streak { left: -12px; }
  .sign-card { left: -18px; }
}
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "exam exam" "fore fore" "mist sign" "lang lang" "listen off" "rep rep" "streak book"; }
  .lics { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .demo-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-side { position: static; text-align: center; }
  .school, .final { grid-template-columns: 1fr; padding: 40px 28px; }
  .tickets { height: 220px; }
}
@media (max-width: 900px) {
  .hero { padding-top: 96px; }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-copy { text-align: center; padding-bottom: 20px; }
  .hero-copy .lead { margin: 0 auto; }
  .hero .stores, .trust { justify-content: center; }
  .hero-visual { min-height: 560px; margin-bottom: -60px; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .k1, .k3 { display: none; }
  .k2 { top: 64px; }
}
@media (max-width: 760px) {
  section { padding: 70px 0; }
  .journey { padding: 0 0 0 66px; }
  .j-road { left: 8px; right: auto; top: 0; bottom: 0; width: 32px; height: auto; }
  .j-road::before { left: 15px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .8) 0 18px, transparent 18px 34px); }
  .j-fill { inset: 0 0 auto; width: auto; height: calc(var(--p) * 100%); background: linear-gradient(180deg, transparent, rgba(129, 140, 248, .55)); }
  .j-car { left: -11px; top: calc(var(--p) * (100% - 70px)); transform: rotate(90deg); }
  .j-steps { grid-template-columns: 1fr; gap: 26px; }
  .j-step { text-align: left; }
  .j-sign { top: 22px; left: -58px; margin-left: 0; }
  .t-fore, .t-lang, .t-rep { grid-template-columns: 1fr; }
  .t-fore .tile-art, .t-lang .tile-art, .t-rep .tile-art { order: 0; margin-bottom: 16px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "exam" "fore" "mist" "sign" "lang" "listen" "off" "rep" "streak" "book"; }
  .ex-body { grid-template-columns: 1fr; }
  .ex-opts { display: none; }
  .chip-streak { left: -6px; top: -14px; }
  .chip-pass { right: -6px; bottom: 34px; }
  .hero-visual { min-height: 540px; }
  .sign-card { display: none; }
  .phone { width: 270px; height: 552px; }
  .demo-body { padding: 18px 18px 22px; }
  .store { min-width: 0; flex: 1 1 160px; }
  .final .stores .store { flex: 1 1 100%; }
}
@media (max-width: 440px) {
  .store { gap: 9px; padding: 10px 12px 10px 11px; }
  .store b { font-size: 15.5px; white-space: nowrap; }
  .store svg { width: 22px; height: 22px; }
}
@media (max-width: 400px) {
  .facts-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fact { padding: 16px; }
  .fact b { font-size: 30px; }
  .chip { padding: 8px 12px 8px 8px; font-size: 13px; }
}

/* ══════════ Keyframes ══════════ */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes underline { to { transform: scaleX(1) rotate(-1.2deg); } }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-100px, 120px) scale(.92); } }
@keyframes drift3 { to { transform: translate(-160px, -60px) scale(1.15); } }
@keyframes cloud { from { left: -220px; } to { left: 110%; } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes ring87 { to { stroke-dashoffset: 31; } }
@keyframes grow80 { to { width: 80%; } }
@keyframes growTo { to { width: var(--w); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drawLong { to { stroke-dashoffset: 0; } }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)); } }
@keyframes pick { 0%, 4% { border-color: var(--s-line); } 10%, 100% { border-color: #6366f1; background: color-mix(in srgb, #6366f1 9%, var(--s-card)); } }
@keyframes tick { 0%, 4% { background: transparent; border-color: #cbd5e1; } 10%, 100% { background: #6366f1; border-color: #6366f1; box-shadow: inset 0 0 0 3px var(--s-card); } }
@keyframes bobble { to { transform: translateY(-1px); } }
@keyframes bob { to { transform: translateY(-1.2px); } }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
@keyframes roadmove { to { stroke-dashoffset: 17; } }
@keyframes dashmove { to { stroke-dashoffset: -14; } }
@keyframes speedline { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-6px); opacity: .35; } }
@keyframes jx { 0% { transform: translateX(-70px); } 100% { transform: translateX(470px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes excar { from { left: 0; } to { left: calc(100% - 66px); } }
@keyframes exfill { to { background-size: 100% 100%, auto; } }
@keyframes exopt { 0%, 30% { border-color: var(--line); } 40%, 100% { border-color: #6366f1; } }
@keyframes exbox { 0%, 30% { background: transparent; border-color: var(--line); } 40%, 100% { background: #6366f1; border-color: #6366f1; } }
@keyframes wave { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(6deg) scaleX(1); } }
@keyframes miflip { 0%, 30% { transform: rotateY(0); } 45%, 80% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(360deg); } }
@keyframes sgflip { 0% { opacity: 0; transform: rotateY(-90deg); } 4% { opacity: 1; transform: rotateY(0); } 21% { opacity: 1; transform: rotateY(0); } 25% { opacity: 0; transform: rotateY(90deg); } 100% { opacity: 0; transform: rotateY(90deg); } }
@keyframes knob { 0%, 42% { transform: translateX(0); } 50%, 92% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes swap { 0%, 40% { opacity: 1; transform: none; } 48%, 92% { opacity: 0; transform: translateY(-16px); } 100% { opacity: 1; transform: none; } }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes daypop { 0% { transform: scale(.6); } 100% { transform: scale(1); background: var(--hero); background: #6366f1; color: #fff; } }
@keyframes flick { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.06, .95) rotate(3deg); } }
@keyframes dotfill { from { transform: scale(.4); } to { transform: scale(1); background: #f59e0b; } }
@keyframes page { 0%, 18% { transform: rotateY(0); } 62%, 100% { transform: rotateY(-180deg); } }
@keyframes spinang { to { --ang: 360deg; } }
@keyframes stamp { to { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* The roadside choreography: one 18 s cycle shared by the lights, the traffic and the pedestrian.
   Lights: green → yellow (18 %) → red (22 %) → red + yellow (46 %) → green (52 %). */
@keyframes tlg { 0% { opacity: 1; } 18% { opacity: 0; } 52% { opacity: 1; } 100% { opacity: 1; } }
@keyframes tly { 0% { opacity: 0; } 18% { opacity: 1; } 22% { opacity: 0; } 46% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
@keyframes tlr { 0% { opacity: 0; } 22% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
@keyframes convoy {
  0% { transform: translateX(-40px); animation-timing-function: cubic-bezier(.2, .55, .3, 1); }
  30% { transform: translateX(990px); }
  52% { transform: translateX(990px); animation-timing-function: cubic-bezier(.5, 0, .85, .55); }
  80%, 100% { transform: translateX(2380px); }
}
@keyframes bikes {
  0% { transform: translateX(-30px); animation-timing-function: cubic-bezier(.25, .55, .35, 1); }
  33% { transform: translateX(990px); }
  54% { transform: translateX(990px); animation-timing-function: cubic-bezier(.5, 0, .85, .6); }
  92%, 100% { transform: translateX(2300px); }
}
@keyframes puffA { 0%, 51% { opacity: 0; transform: scale(.4); } 53% { opacity: .75; transform: scale(1); } 58%, 100% { opacity: 0; transform: translate(-16px, -8px) scale(1.7); } }
@keyframes puffB { 0%, 53% { opacity: 0; transform: scale(.4); } 55% { opacity: .75; transform: scale(1); } 60%, 100% { opacity: 0; transform: translate(-14px, -7px) scale(1.6); } }
@keyframes ped {
  0%, 23% { opacity: 0; transform: translate(1046px, 242px) scale(.8); }
  25% { opacity: 1; transform: translate(1046px, 243px) scale(.82); }
  45% { opacity: 1; transform: translate(1040px, 299px) scale(1); }
  47%, 100% { opacity: 0; transform: translate(1040px, 306px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .land .lane-car { animation: none !important; transform: translateX(990px); }
  .land .lane-bike { animation: none !important; transform: translateX(990px); }
  .land .tl-r { animation: none !important; opacity: 1; }
  .land .tl-y, .land .tl-g { animation: none !important; opacity: 0; }
  .land .ped { animation: none !important; opacity: 1; transform: translate(1043px, 272px) scale(.92); }
  .scr-home .ring .fg { stroke-dashoffset: 31; }
  .scr-home .bar i { width: 80%; }
  .fo-ring .fg { stroke-dashoffset: 31; }
  .rp-line { stroke-dashoffset: 0; }
  .rp-curve circle { transform: none; }
  .sg-c:first-of-type { opacity: 1; transform: none; }
  .lc-stamp { opacity: 1; transform: rotate(-14deg); }
  .hl::after { transform: rotate(-1.2deg); }
}