:root{
--accent:#0F71F2;
}

html {
scroll-behavior: smooth;
overflow-x: clip;
}

* {
min-width: 0;
box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: clip;
  background: #FFFDF8;
  color: #111111;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overscroll-behavior: none;
}

img,
svg {
max-width: 100%;
height: auto;
}

.poster-tight {
line-height: .96;
letter-spacing: -0.065em;
}

@media (min-width: 768px) {
.poster-tight {
line-height: .88;
}
}

.site-accent{
color:var(--accent);
}

.bg-accent{
background:var(--accent);
}

.border-accent{
border-color:var(--accent);
}

.reveal {
opacity: 0;
transform: translateY(38px);
transition:
opacity .9s cubic-bezier(.2,.7,.2,1),
transform .9s cubic-bezier(.2,.7,.2,1);
will-change: transform, opacity;
}

.reveal.show {
opacity: 1;
transform: translateY(0);
}

.reveal-left {
opacity: 0;
transform: translateX(-42px);
transition:
opacity .9s cubic-bezier(.2,.7,.2,1),
transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal-left.show {
opacity: 1;
transform: translateX(0);
}

.reveal-right {
opacity: 0;
transform: translateX(42px);
transition:
opacity .9s cubic-bezier(.2,.7,.2,1),
transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal-right.show {
opacity: 1;
transform: translateX(0);
}

.hero-line,
.hero-copy,
.hero-actions,
.hero-akka {
opacity: 0;
transform: translateY(34px);
}

.hero-ready .hero-line {
animation: heroRise .9s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-ready .hero-copy {
animation: heroRise .9s cubic-bezier(.2,.8,.2,1) .24s forwards;
}

.hero-ready .hero-actions {
animation: heroRise .9s cubic-bezier(.2,.8,.2,1) .40s forwards;
}

.hero-ready .hero-akka {
animation: heroArt 1s cubic-bezier(.2,.8,.2,1) .18s forwards;
}

.hero-ready .hero-line-2 { animation-delay: .08s; }
.hero-ready .hero-line-3 { animation-delay: .16s; }

@keyframes heroRise {
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes heroArt {
from {
opacity: 0;
transform: translateY(24px) scale(.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.line-mask {
display: block;
overflow: hidden;
}

.line-mask > span {
display: block;
transform: translateY(115%);
transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.line-mask.show > span {
transform: translateY(0);
}

.story-beat {
display: block;
overflow: hidden;
}

.story-beat > span {
display: block;
transform: translateY(120%);
transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.story-beat.show > span {
transform: translateY(0);
}

.story-beat.second > span {
transition-delay: .14s;
}

.step {
opacity: 0;
transform: translateY(26px);
transition:
opacity .75s cubic-bezier(.2,.7,.2,1),
transform .75s cubic-bezier(.2,.7,.2,1);
}

.step.show {
opacity: 1;
transform: translateY(0);
}

.step-1.show { transition-delay: .04s; }
.step-2.show { transition-delay: .16s; }
.step-3.show { transition-delay: .28s; }

.panel-slide {
opacity: 0;
transform: translateX(48px);
transition:
opacity 1s cubic-bezier(.2,.8,.2,1),
transform 1s cubic-bezier(.2,.8,.2,1);
}

.panel-slide.show {
opacity: 1;
transform: translateX(0);
}

.char-float-1 { animation: charFloat 5.8s ease-in-out infinite; }
.char-float-2 { animation: charFloat 6.6s ease-in-out infinite; }
.char-float-3 { animation: charFloat 6.1s ease-in-out infinite; }
.char-float-4 { animation: charFloat 7.1s ease-in-out infinite; }

@keyframes charFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}

.doodle {
position: absolute;
opacity: .08;
pointer-events: none;
width: 86px;
}

.floaty {
animation: floaty 10s ease-in-out infinite;
}

.floaty-slow {
animation: floaty 14s ease-in-out infinite;
}

@keyframes floaty {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}

.lift {
transition: transform .22s ease;
}

.lift:hover {
transform: translateY(-4px);
}

.audio-ring {
position: relative;
}

.audio-ring::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
animation: ringPulse 2.4s ease-out infinite;
}

@keyframes ringPulse {
0% {
transform: scale(.94);
opacity: .8;
}
70% {
transform: scale(1.16);
opacity: 0;
}
100% {
opacity: 0;
}
}

.soft-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(0,0,0,.08) 20%,
rgba(0,0,0,.08) 80%,
transparent 100%
);
}

.char-img {
width: 100%;
display: block;
pointer-events: none;
user-select: none;
}

.feature-card {
background: white;
border-radius: 2rem;
padding: 2rem;
box-shadow: 0 20px 60px rgba(0,0,0,.08);
height: 100%;
}

.vaanga-logo {
font-weight: 900;
letter-spacing: -0.05em;
color: #111111;
transition: color .25s ease, transform .2s ease;
}

.vaanga-logo:hover {
color: var(--accent);
transform: translateY(-1px);
}

@media (max-width: 767px) {
.doodle {
width: 56px;
opacity: .08;
}

.doodle-left {
left: -10px !important;
}

.doodle-right {
right: -10px !important;
}

.feature-card {
padding: 1.5rem;
}
}


/* =========================================================
   Vaanga shared app theme bridge
   Phase 1: unify app with landing page
   ========================================================= */

/* Base */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

html {
  height: -webkit-fill-available;
}

/* Safe area */
.hdr {
  padding-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: 36px;
}

.bnav {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.hdr.va-app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Shared app shell */
.va-page {
  background: #FFFDF8;
  color: #111111;
}

.va-app-header {
  position: relative;
  overflow: hidden;

  /* horizontal padding */
  padding-left: 1.25rem;
  padding-right: 1.25rem;

  /* vertical breathing room */
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-bottom: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Text bridge classes */
.va-text {
  color: #111111;
}

.va-text-muted {
  color: #5F5A54;
}

.va-text-soft {
  color: #8B847C;
}

.va-text-faint {
  color: #B5ADA3;
}

/* Surfaces */
.va-surface-card {
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
}

.va-surface-soft {
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.05);
}

.va-surface-raised {
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
}

.va-surface-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -10px 28px rgba(17, 17, 17, 0.06);
}

/* Tabs bridge */
.va-tab {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Optional utility classes for app controls */
.va-pill {
  border-radius: 999px;
}

.va-round-lg {
  border-radius: 18px;
}

.va-round-xl {
  border-radius: 20px;
}

.va-logo {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 5vw, 34px);
}

html,
body {
  font-family: 'Nunito', sans-serif !important;
}

.vaanga-logo {
  font-family: 'Nunito', sans-serif !important;
  line-height: 1;
}

/* Bottom Navigation */

.bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: 82px;

  background: #ffffff;

  border-top-left-radius: 28px;
  border-top-right-radius: 28px;

  display: flex;
  align-items: center;
  justify-content: space-around;

  padding-bottom: env(safe-area-inset-bottom);

  box-shadow: 0 -10px 28px rgba(0,0,0,.08);

  z-index: 50;
}

/* Nav item */

.nav-item {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  font-size: 11px;
  font-weight: 600;

  color: #9CA3AF;

  text-decoration: none;

  transition: color .2s ease;
}

/* icon */

.nav-icon{
  width:22px;
  height:22px;
}

/* active */

.nav-item {
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  font-size:12px;
  font-weight:700;

  color:#9CA3AF;

  transition:color .35s ease-in-out;
}

.nav-item.active{
  color:var(--accent);
}

.app-content {
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
.nav-icon{
  width:22px;
  height:22px;
  transition: transform .35s ease, color .35s ease;
}

.nav-item span{
  transition: color .35s ease;
}

/* active icon grows slightly */
.nav-item.active .nav-icon{
  transform: scale(1.12);
}

/* Learn module cards */
.learn-packs-wrap {
  grid-template-columns: 1fr;
}

.module-card {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform .22s ease;
}

.module-card:active {
  transform: scale(.985);
}

.module-card-shell {
  border-radius: 28px;
  padding: 16px;
  padding-bottom: 12px;
  overflow: hidden;
}

.module-card-art {
  min-height: 156px;
  border-radius: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.module-placeholder {
  width: 100%;
  min-height: 156px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(17,17,17,.48);
  font-weight: 800;
  background: rgba(255,255,255,.38);
}

.module-card-panel {
  position: relative;
  z-index: 2;
  margin-top: -10px;
  background: #fff;
  border-radius: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 14px 34px rgba(17,17,17,.08);
}

.module-card-copy {
  flex: 1;
}

.module-card-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: #111111;
}

.module-card-desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: #5F5A54;
}

.module-card-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.module-card:hover .module-card-arrow,
.module-card:active .module-card-arrow {
  transform: translateX(2px);
}

.module-card-art img {
  height: 200px;
}

.learn-detail-head {
  padding-top: 2px;
}

@media (min-width: 768px) {
  .learn-packs-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Practice action buttons — premium native feel */
.quiz-action{
  appearance:none;
  -webkit-appearance:none;
  min-height:56px;
  padding:16px 14px;
  border-radius:18px;
  border:1.5px solid transparent;
  font-family:'Nunito',sans-serif;
  font-size:15px;
  font-weight:900;
  letter-spacing:-0.01em;
  text-align:center;
  line-height:1;
  cursor:pointer;
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
  box-shadow:0 8px 22px rgba(17,17,17,.06);
}

.quiz-action:active{
  transform:scale(.97);
}

.quiz-action-missed{
  background:#FFFFFF;
  border-color:rgba(15,113,242,.16);
  color:#111111;
}

.quiz-action-missed:hover{
  border-color:rgba(15,113,242,.28);
  box-shadow:0 10px 24px rgba(17,17,17,.08);
}

.quiz-action-correct{
  background:var(--accent, #0F71F2);
  border-color:var(--accent, #0F71F2);
  color:#FFFFFF;
  box-shadow:0 12px 28px rgba(15,113,242,.28);
}

.quiz-action-correct:hover{
  box-shadow:0 14px 32px rgba(15,113,242,.32);
}

.rtgs{
  gap:12px !important;
  grid-template-columns:1fr 1fr !important;
}

@media (max-width: 480px){
  .quiz-action{
    min-height:54px;
    padding:15px 12px;
    font-size:14px;
  }
}

.prac-reveal {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
margin-top: 0;
transition:
    grid-template-rows 700ms cubic-bezier(.22,1,.36,1),
    opacity 420ms ease,
    margin-top 700ms cubic-bezier(.22,1,.36,1);
}

.prac-reveal-inner {
overflow: hidden;
transform: translateY(-20px) scale(.96);
transition:
    transform 700ms cubic-bezier(.22,1,.36,1),
    opacity 420ms ease;
opacity: 0;
}

.prac-reveal.is-open {
grid-template-rows: 1fr;
opacity: 1;
margin-top: 14px;
}

.prac-reveal.is-open .prac-reveal-inner {
transform: translateY(0) scale(1);
opacity: 1;
}

.prac-reveal-inner button {
opacity: 0;
transform: translateY(8px);
transition: all 400ms ease;
transition-delay: 200ms;
}

.prac-reveal.is-open button {
opacity: 1;
transform: translateY(0);
}

.prac-reveal-inner .border-t {
  opacity: 0;
  transition: opacity 400ms ease;
}

.prac-reveal.is-open .border-t {
  opacity: 1;
}

.va-header-actions{
  display:flex;
  align-items:center;
  gap:1px;
  backdrop-filter:blur(10px);
}

.va-header-action{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  letter-spacing:-0.02em;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.va-header-action:hover{
  border-color:rgba(0,0,0,.12);
  color:var(--accent);
  transform: translateY(-0.8px);
}

.va-header-action:active{
  transform: translateY(0) scale(.94);
}

.va-header-action.rate-toggle{
  width: auto;
  min-width: 68px;
  height: 40px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

}

.rate-toggle-label{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.va-header-icon{
  width:20px;
  height:20px;
  display: block;
  flex-shrink: 0;
}

.icon-audio{
width:44px;
height:44px;
display:block;
}

.spkbtn{
position: relative;
overflow: visible;
}

.spkbtn.spk{
color: var(--accent) !important;
}

.spkbtn.spk::after{
content:"";
position:absolute;
inset:-6px;
border-radius:999px;
border:2px solid currentColor;
opacity:.55;
animation:sonarPulse 1.4s ease-out infinite;
pointer-events:none;
}

@keyframes sonarPulse{
0%{
transform:scale(.92);
opacity:.35;
}
70%{
transform:scale(1);
opacity:0;
}
100%{
transform:scale(1.25);
opacity:0;
}
}