/* CBRMaster — Design System & Styles */

:root {
  /* Accent — Blue (default) */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-subtle: #DBEAFE;
  --accent-text: #1E40AF;

  /* Neutrals — warm stone */
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-raised: #F5F5F4;
  --border: #E7E5E4;
  --border-subtle: #F0EEEC;
  --text: #1C1917;
  --text-secondary: #57534E;
  --text-tertiary: #A8A29E;

  /* Semantic */
  --success: #16A34A;
  --success-light: #F0FDF4;
  --success-border: #BBF7D0;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-display: var(--font-sans);

  /* Layout */
  --container-max: 1100px;
  --container-wide: 1240px;
  --section-py: 140px;
  --nav-h: 64px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 200ms;
  --dur-slow: 400ms;
}

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 32px);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--text);background:var(--bg)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* ---- Layout ---- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
.container--wide{max-width:var(--container-wide)}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}

.section-label{
  display:inline-block;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.section-heading{font-size:44px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}
.section-desc{font-size:18px;color:var(--text-secondary);max-width:540px;line-height:1.55}
.section-header{margin-bottom:64px}
.section-header--center{text-align:center}
.section-header--center .section-desc{margin:0 auto}

/* ---- Sections ---- */
.section{padding:var(--section-py) 0}
.section--alt{background:var(--surface-raised)}
.section--dark{background:var(--text);color:#F5F5F4}
.section--dark .section-label{color:var(--accent-subtle)}
.section--dark .section-desc{color:var(--text-tertiary)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:10px;font-family:var(--font-sans);
  font-size:15px;font-weight:600;text-decoration:none;border:none;
  cursor:pointer;transition:background var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn--ghost:hover{background:var(--surface-raised);border-color:var(--text-tertiary)}
.btn--dark{background:#fff;color:var(--text)}
.btn--dark:hover{background:#F5F5F4}
.btn--sm{padding:8px 18px;font-size:14px;border-radius:8px}
.btn--lg{padding:16px 32px;font-size:17px;border-radius:12px}

/* ---- Nav ---- */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(250,250,249,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--dur-slow) var(--ease);
}
.nav--scrolled{border-bottom-color:var(--border)}
.nav__inner{
  display:flex;align-items:center;width:100%;
  max-width:var(--container-wide);margin:0 auto;padding:0 24px;
}
.nav__logo{display:flex;align-items:baseline;gap:0;font-size:18px;font-weight:700;letter-spacing:-.02em}
.logo-cbr{color:var(--accent)}
.logo-master{color:var(--text)}
.nav__links{display:flex;gap:32px;margin-left:48px}
.nav__links a{font-size:14px;font-weight:500;color:var(--text-secondary);transition:color var(--dur) var(--ease)}
.nav__links a:hover{color:var(--text)}
/* moved to modal section */

/* ---- Hero ---- */
.hero{padding:80px 0 100px;overflow:hidden}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__title{
  font-size:68px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:24px;
}
.hero__title-accent{color:var(--accent)}
.hero__subtitle{font-size:19px;color:var(--text-secondary);max-width:520px;margin:0 auto 40px;line-height:1.55}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:80px}
.hero__demo{width:100%;max-width:780px;margin:0 auto}

/* ---- Browser Frame ---- */
.browser-frame{
  border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  box-shadow:0 0 0 1px rgba(0,0,0,.02),0 4px 8px rgba(0,0,0,.03),
    0 16px 32px rgba(0,0,0,.05),0 48px 80px rgba(0,0,0,.04);
}
.browser-frame__bar{
  display:flex;align-items:center;gap:7px;
  padding:14px 18px;background:var(--surface-raised);border-bottom:1px solid var(--border);
}
.browser-frame__dot{width:10px;height:10px;border-radius:50%;background:var(--border)}
.browser-frame__url{
  flex:1;margin-left:12px;height:28px;border-radius:6px;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;padding:0 12px;
  font-size:12px;color:var(--text-tertiary);
}
.browser-frame__body{padding:0}

/* ---- Exam Demo (Hero) ---- */
.exam-demo{padding:28px 32px 32px;min-height:380px;position:relative}
.exam-demo__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:var(--text-secondary);font-weight:500}
.exam-demo__progress{height:4px;background:var(--surface-raised);border-radius:2px;margin-bottom:28px;overflow:hidden}
.exam-demo__progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .6s var(--ease)}
.exam-demo__image-placeholder{
  width:100%;height:160px;border-radius:10px;background:var(--surface-raised);
  border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;color:var(--text-tertiary);font-size:13px;font-family:monospace;
}
.exam-demo__question{font-size:17px;font-weight:600;margin-bottom:20px;line-height:1.4;transition:opacity .3s var(--ease)}
.exam-demo__options{display:flex;flex-direction:column;gap:10px}
.exam-demo__option{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  font-size:15px;transition:all .3s var(--ease);cursor:default;
}
.exam-demo__option-dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);font-size:10px;color:#fff;
}
.exam-demo__option--correct{
  border-color:var(--success);background:var(--success-light);
}
.exam-demo__option--correct .exam-demo__option-dot{
  border-color:var(--success);background:var(--success);
}
.exam-demo__explanation{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:var(--success-light);border:1px solid var(--success-border);
  font-size:14px;color:#15803D;line-height:1.5;
  animation:slideUp .3s var(--ease);
}
.exam-demo--fading{opacity:.4;transition:opacity .25s var(--ease)}

/* ---- Value Bar (replaces Social Proof) ---- */
.value-bar{padding:40px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.value-bar__inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--text-secondary)}
.value-bar__sep{color:var(--text-tertiary);font-size:18px}

/* ---- Features ---- */
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feature-card{
  padding:32px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}
.feature-card:hover{border-color:var(--text-tertiary)}
.feature-card__num{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:16px;font-variant-numeric:tabular-nums}
.feature-card__title{font-size:19px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.feature-card__desc{font-size:15px;color:var(--text-secondary);line-height:1.55}

/* ---- Exam Experience ---- */
.exam-exp{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.exam-exp__content{max-width:440px}
.exam-exp__stats{display:flex;gap:32px;margin-top:32px}
.exam-exp__stat{text-align:center}
.exam-exp__stat-val{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.exam-exp__stat-label{font-size:13px;color:var(--text-secondary);margin-top:2px}
.exam-exp__mockup{position:relative}

/* ---- Exam Mockup ---- */
.exam-mock{padding:24px 28px 28px;font-size:14px}
.exam-mock__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;color:var(--text-tertiary);font-weight:500}
.exam-mock__progress{height:3px;background:var(--surface-raised);border-radius:2px;margin-bottom:24px}
.exam-mock__progress-fill{height:100%;background:var(--accent);border-radius:2px}
.exam-mock__q{font-size:15px;font-weight:600;margin-bottom:16px}
.exam-mock__opts{display:flex;flex-direction:column;gap:8px}
.exam-mock__opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:8px;border:1px solid var(--border);font-size:13px;
}
.exam-mock__opt-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.exam-mock__opt--selected{border-color:var(--accent);background:var(--accent-light)}
.exam-mock__opt--selected .exam-mock__opt-dot{border-color:var(--accent);background:var(--accent)}
.exam-mock__nav{display:flex;justify-content:space-between;margin-top:20px}
.exam-mock__nav-btn{
  padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;
  border:1px solid var(--border);color:var(--text-secondary);
}
.exam-mock__nav-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- Question Types ---- */
.qtypes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.qtype-card{
  padding:28px 24px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}
.qtype-card:hover{border-color:var(--text-tertiary)}
.qtype-card__icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:16px;font-weight:700;
}
.qtype-card__title{font-size:16px;font-weight:600;margin-bottom:6px}
.qtype-card__desc{font-size:13px;color:var(--text-secondary);line-height:1.5}
.qtype-card__count{font-size:12px;color:var(--text-tertiary);margin-top:12px;font-weight:500}

/* ---- Progress Section ---- */
.progress-sec{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.progress-sec__content{max-width:440px}
.progress-mock{padding:28px}
.progress-mock__top{display:flex;gap:24px;margin-bottom:28px;align-items:flex-start}
.progress-mock__score{text-align:center;flex-shrink:0}
.progress-mock__score-num{font-size:28px;font-weight:700;letter-spacing:-.02em}
.progress-mock__score-label{font-size:11px;color:var(--text-tertiary);font-weight:500;margin-top:2px}
.progress-mock__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.progress-mock__stat-card{
  padding:12px 14px;border-radius:8px;background:var(--surface-raised);
}
.progress-mock__stat-card span:first-child{font-size:11px;color:var(--text-tertiary);display:block;margin-bottom:2px}
.progress-mock__stat-card span:last-child{font-size:16px;font-weight:700;letter-spacing:-.01em}
.progress-mock__cats-title{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:14px}
.progress-mock__cat{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.progress-mock__cat-name{font-size:12px;width:120px;flex-shrink:0;color:var(--text-secondary)}
.progress-mock__cat-bar{flex:1;height:6px;background:var(--surface-raised);border-radius:3px;overflow:hidden}
.progress-mock__cat-fill{height:100%;border-radius:3px;background:var(--accent)}
.progress-mock__cat-pct{font-size:12px;font-weight:600;width:36px;text-align:right}

/* ---- Mobile Section ---- */
.mobile-sec{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.mobile-sec__content{max-width:440px}
.mobile-sec__features{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.mobile-sec__feat{display:flex;align-items:flex-start;gap:12px}
.mobile-sec__feat-icon{
  width:28px;height:28px;border-radius:8px;background:var(--accent-light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--accent);font-size:14px;font-weight:700;
}
.mobile-sec__feat-text span{display:block}
.mobile-sec__feat-text span:first-child{font-size:15px;font-weight:600;margin-bottom:2px}
.mobile-sec__feat-text span:last-child{font-size:13px;color:var(--text-secondary);line-height:1.45}

/* Phone frame */
.phone-frame{
  width:280px;margin:0 auto;
  border-radius:40px;padding:10px;background:#1C1917;
  box-shadow:0 25px 60px -12px rgba(0,0,0,.18),inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.phone-frame__screen{
  border-radius:32px;overflow:hidden;background:var(--surface);
  aspect-ratio:9/19.5;position:relative;
}
.phone-frame__notch{
  width:90px;height:28px;border-radius:20px;
  background:#1C1917;margin:0 auto;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
}

/* Phone exam mockup — safe-area insets for notch / Dynamic Island */
/* Top spacer: in the simulated frame, clears the CSS notch (28px);
   on real devices with env() support, uses the larger of 28px or the device inset */
.phone-exam-mock__safe-top{
  height: 28px;                                          /* fallback for simulated frame */
  height: max(28px, env(safe-area-inset-top, 28px));     /* dynamic: notch / Dynamic Island */
}
/* Bottom spacer: in the simulated frame, a small home-indicator buffer;
   on real devices, uses env(safe-area-inset-bottom) */
.phone-exam-mock__safe-bottom{
  height: 4px;                                           /* fallback for simulated frame */
  height: max(4px, env(safe-area-inset-bottom, 4px));    /* dynamic: home indicator bar */
}
/* Header and footer inherit horizontal safe-area padding on real devices */
.phone-exam-mock__header,
.phone-exam-mock__footer{
  padding-left:  max(10px, env(safe-area-inset-left, 10px));
  padding-right: max(10px, env(safe-area-inset-right, 10px));
}
.phone-frame__content{
  padding:48px 16px 16px;height:100%;overflow:hidden;
}
.phone-frame__carousel{
  position:absolute;inset:0;overflow:hidden;border-radius:32px;
}
.phone-frame__carousel-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.phone-frame__dots{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:3;
}
.phone-frame__dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background .3s ease, transform .3s ease;
}
.phone-frame__dot--active{
  background:#fff;transform:scale(1.25);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* ---- Pricing ---- */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:780px;margin:0 auto}
.pricing-card{
  padding:36px 32px;border-radius:16px;
  border:1px solid var(--border);background:var(--surface);
}
.pricing-card--featured{border-color:var(--accent);position:relative}
.pricing-card__badge{
  position:absolute;top:-12px;left:32px;
  padding:4px 14px;border-radius:20px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;
}
.pricing-card__name{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.pricing-card__price{font-size:40px;font-weight:700;letter-spacing:-.03em;margin-bottom:4px}
.pricing-card__price span{font-size:16px;font-weight:500;color:var(--text-secondary)}
.pricing-card__desc{font-size:14px;color:var(--text-secondary);margin-bottom:28px;line-height:1.5}
.pricing-card__features{list-style:none;margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
.pricing-card__features li{font-size:14px;display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.pricing-card__features li::before{
  content:'✓';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px;
}
.pricing-card .btn{width:100%;justify-content:center}

/* ---- FAQ ---- */
.faq-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-item__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;cursor:pointer;width:100%;text-align:left;
  font-size:16px;font-weight:600;color:var(--text);
  background:none;border:none;font-family:var(--font-sans);
}
.faq-item__icon{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;color:var(--text-tertiary);transition:transform var(--dur) var(--ease);
  font-weight:300;
}
.faq-item--open .faq-item__icon{transform:rotate(45deg)}
.faq-item__a{
  overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease);opacity:0;
}
.faq-item--open .faq-item__a{max-height:300px;opacity:1}
.faq-item__a-inner{padding:0 0 20px;font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:600px}

/* ---- Final CTA ---- */
.final-cta{text-align:center;padding:120px 24px}
.final-cta h2{font-size:44px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px;color:#F5F5F4}
.final-cta p{font-size:18px;color:var(--text-tertiary);margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.55}

/* ---- Footer ---- */
.footer{padding:48px 0;border-top:1px solid rgba(255,255,255,.08)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.footer__left{display:flex;align-items:baseline;gap:24px}
.footer__logo{font-size:16px;font-weight:700;letter-spacing:-.01em}
.footer__logo .logo-cbr{color:var(--accent-subtle)}
.footer__copy{font-size:13px;color:var(--text-tertiary)}
.footer__links{display:flex;gap:24px}
.footer__links a{font-size:13px;color:var(--text-tertiary);transition:color var(--dur) var(--ease)}
.footer__links a:hover{color:#F5F5F4}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(28,25,23,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .2s var(--ease);
}
.modal-overlay--closing{animation:fadeOut .2s var(--ease) forwards}
.modal{
  position:relative;width:100%;max-width:440px;
  background:var(--surface);border-radius:18px;
  box-shadow:0 25px 60px -12px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.04);
  animation:modalIn .25s var(--ease);overflow:hidden;
}
.modal--closing{animation:modalOut .2s var(--ease) forwards}
.modal__close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.modal__close:hover{background:var(--surface-raised);color:var(--text)}
.modal__progress{height:3px;background:var(--surface-raised)}
.modal__progress-fill{height:100%;background:var(--accent);border-radius:0 2px 2px 0;transition:width .4s var(--ease)}
.modal__body{padding:40px 36px 24px}
.modal__step{animation:slideUp .25s var(--ease)}
.modal__step-label{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase}
.modal__title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.modal__desc{font-size:15px;color:var(--text-secondary);line-height:1.5;margin-bottom:28px}
.modal__desc strong{color:var(--text);font-weight:600}
.modal__input{
  display:block;width:100%;padding:14px 16px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--surface);
  font-family:var(--font-sans);font-size:16px;color:var(--text);
  outline:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  margin-bottom:20px;
}
.modal__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.modal__input::placeholder{color:var(--text-tertiary)}
.modal__btn{width:100%;justify-content:center;padding:14px 24px;font-size:16px}
.modal__btn--disabled{opacity:.45;pointer-events:none}
.modal__nav-row{display:flex;align-items:center;gap:12px}
.modal__nav-row .modal__btn{flex:1}
.modal__back{
  font-size:14px;font-weight:500;color:var(--text-secondary);
  padding:8px 4px;white-space:nowrap;transition:color var(--dur) var(--ease);
}
.modal__back:hover{color:var(--text)}
.modal__field{margin-bottom:20px}
.modal__field-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.modal__option-group{display:flex;gap:10px}
.modal__option{
  flex:1;padding:12px 16px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--surface);
  font-size:14px;font-weight:500;color:var(--text);text-align:center;
  transition:all var(--dur) var(--ease);
}
.modal__option:hover{border-color:var(--text-tertiary)}
.modal__option--active{border-color:var(--accent);background:var(--accent-light);color:var(--accent-text)}
.modal__option--wide{display:flex;align-items:center;justify-content:center;gap:8px}
.modal__option-icon{font-size:18px}
.modal__success-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--success-light);border:2px solid var(--success-border);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--success);font-weight:700;margin-bottom:20px;
}
.modal__footer{
  padding:0 36px 24px;font-size:12px;color:var(--text-tertiary);text-align:center;line-height:1.5;
}
.modal__footer a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}
.modal__footer a:hover{color:var(--text)}

/* Nav right section */
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn--login{
  padding:8px 16px;font-size:14px;font-weight:500;
  color:var(--text-secondary);border-radius:8px;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  text-decoration:none;
}
.btn--login:hover{color:var(--text);background:var(--surface-raised)}

/* Language toggle */
.lang-toggle{display:flex;align-items:center;gap:2px;background:var(--surface-raised);border-radius:8px;padding:2px}
.lang-toggle__btn{
  display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;
  font-size:12px;font-weight:600;color:var(--text-tertiary);letter-spacing:.02em;
  transition:all var(--dur) var(--ease);cursor:pointer;background:none;border:none;
}
.lang-toggle__btn:hover{color:var(--text-secondary)}
.lang-toggle__btn--active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Pricing toggle */
.pricing-toggle{display:flex;justify-content:center;margin-bottom:40px}
.pricing-toggle__btn{
  padding:10px 28px;font-size:14px;font-weight:600;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-secondary);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.pricing-toggle__btn:first-child{border-radius:10px 0 0 10px;border-right:none}
.pricing-toggle__btn:last-child{border-radius:0 10px 10px 0}
.pricing-toggle__btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pricing-toggle__btn:hover:not(.pricing-toggle__btn--active){background:var(--surface-raised)}

/* 3-column pricing grid */
.pricing-grid--3{grid-template-columns:repeat(3,1fr);max-width:920px}
.pricing-card__duration{font-size:13px;color:var(--text-tertiary);margin-top:-2px;margin-bottom:8px;font-weight:500}

/* Pricing notes */
.pricing-notes{text-align:center;margin-top:32px}
.pricing-note{font-size:14px;color:var(--text-secondary);margin-bottom:8px;line-height:1.5}
.pricing-note__link{
  font-weight:700;color:var(--accent);cursor:pointer;background:none;border:none;
  font-size:14px;font-family:var(--font-sans);text-decoration:underline;text-underline-offset:2px;
}
.pricing-note__link:hover{color:var(--accent-hover)}

/* Exam pass thresholds */
.exam-exp__pass{margin-top:28px;padding:16px 20px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}
.exam-exp__pass-title{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;letter-spacing:.02em}
.exam-exp__pass-row{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.exam-exp__pass-val{font-size:15px;font-weight:600}
.exam-exp__pass-sub{font-size:13px;color:var(--text-tertiary)}

/* Modal error */
.modal__error{
  padding:10px 14px;border-radius:8px;margin-bottom:16px;
  background:#FEF2F2;border:1px solid #FECACA;color:#DC2626;font-size:14px;
}

/* ---- Animations ---- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modalOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ---- Responsive ---- */
@media(max-width:1024px){
  :root{--section-py:100px}
  .hero__title{font-size:52px}
  .section-heading{font-size:36px}
  .exam-exp,.progress-sec,.mobile-sec{gap:48px}
  .qtypes-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--section-py:80px;--nav-h:56px}
  .lang-toggle{display:none}
  .nav__links{display:none}
  .hero{padding:48px 0 64px}
  .hero__title{font-size:40px}
  .hero__subtitle{font-size:17px}
  .hero__actions{flex-direction:column;align-items:center}
  .hero__actions .btn{width:100%;max-width:320px}
  .hero__demo{margin-top:-16px}
  .section-heading{font-size:32px}
  .section-desc{font-size:16px}
  .features-grid{grid-template-columns:1fr}
  .exam-exp{grid-template-columns:1fr}
  .exam-exp__mockup{order:-1}
  .qtypes-grid{grid-template-columns:1fr 1fr}
  .progress-sec{grid-template-columns:1fr}
  .mobile-sec{grid-template-columns:1fr}
  .mobile-sec .phone-frame{width:240px}
  .pricing-grid{grid-template-columns:1fr;max-width:400px}
  .pricing-grid--3{grid-template-columns:1fr;max-width:400px}
  .social-proof__inner,.value-bar__inner{gap:12px}
  .value-bar__sep{display:none}
  .value-bar__inner{flex-direction:column;text-align:center;gap:6px}
  .final-cta h2{font-size:32px}
  .final-cta{padding:80px 24px}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .footer__left{flex-direction:column;gap:8px}
  .exam-demo{padding:20px;min-height:auto}
  .exam-demo__image-placeholder{height:100px}
  .exam-demo__question{font-size:15px}
  .exam-demo__option{padding:10px 12px;font-size:13px}
  .exam-demo__option-dot{width:16px;height:16px}
  .progress-mock__top{flex-direction:column;align-items:center}
  .progress-mock__cat-name{width:90px;font-size:11px}
}
@media(max-width:480px){
  .hero__title{font-size:32px}
  .section-heading{font-size:28px}
  .qtypes-grid{grid-template-columns:1fr}
  .exam-exp__stats{flex-direction:column;gap:16px}
  .browser-frame__url{display:none}
}