:root{--navy:#0c1631;--blue:#4264ff;--gold:#f2c94c;--muted:#65718d}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--navy);background:#fff}.landing-nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.landing-brand{font:800 1.35rem Poppins,sans-serif;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:8px}.landing-brand i{color:var(--gold)}.landing-brand small{font:600 .68rem Inter;color:#69748d;border-left:1px solid #d7ddeb;padding-left:8px}.landing-nav nav{display:flex;align-items:center;gap:17px}.landing-nav nav>a:not(.btn){color:#4c5872;text-decoration:none;font-weight:600;font-size:.9rem}.landing-hero{background:radial-gradient(circle at 78% 18%,#2d54d1 0,#111d42 39%,#0b1430 80%);color:#fff;padding:92px 0}.landing-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:60px}.landing-kicker,.section-eyebrow{color:#ffd96f;text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;font-weight:800}.landing-hero h1{font:800 clamp(2.5rem,5vw,4.7rem)/1.06 Poppins,sans-serif;margin:16px 0 20px;max-width:800px}.landing-hero p{font-size:1.13rem;line-height:1.7;color:#dbe3ff;max-width:670px}.landing-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.landing-actions .btn{font-weight:800}.landing-disclaimer{font-size:.78rem!important;color:#aebcdf!important}.landing-preview{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:25px;padding:28px;box-shadow:0 26px 70px #02061966;backdrop-filter:blur(10px)}.preview-top{display:flex;justify-content:space-between;color:#d9e3ff;font-weight:700}.landing-preview strong{display:block;font:700 1.75rem/1.25 Poppins,sans-serif;margin:45px 0 22px}.preview-track{height:12px;background:#4d5a82;border-radius:99px}.preview-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#83d13a,#f4ca4c)}.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:30px}.preview-stats div{border-top:1px solid #69759c;padding-top:12px}.preview-stats b,.preview-stats span{display:block}.preview-stats span{font-size:.78rem;color:#c2cdeb;margin-top:4px}.landing-section{padding:90px 12px}.landing-section .section-eyebrow,.landing-feature-band .section-eyebrow{color:#5264bb}.landing-section h2,.landing-feature-band h2,.landing-cta h2{font:800 2.25rem Poppins,sans-serif;margin:12px 0 35px}.landing-steps,.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.landing-steps article,.landing-features article{border:1px solid #e2e7f3;border-radius:18px;padding:25px;background:#fff}.landing-steps span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf0ff;color:#3e57eb;font-weight:800}.landing-steps h3,.landing-features h3{font:700 1.15rem Poppins,sans-serif;margin:18px 0 8px}.landing-steps p,.landing-features p{margin:0;color:var(--muted);line-height:1.55}.landing-feature-band{background:#f5f7fd;padding:85px 0}.landing-features{grid-template-columns:repeat(4,1fr)}.landing-features i{font-size:1.6rem;color:#5067ed}.landing-cta{margin:80px auto;max-width:1120px;border-radius:22px;background:linear-gradient(115deg,#edf2ff,#fbf8ea);padding:34px 42px;display:flex;justify-content:space-between;align-items:center;gap:22px}.landing-cta h2{font-size:1.7rem;margin:0 0 8px}.landing-cta p{margin:0;color:var(--muted)}.landing-footer{background:#0b1430;color:#cbd5f4;padding:24px 0;font-size:.86rem}@media(max-width:900px){.landing-hero-grid{grid-template-columns:1fr}.landing-features{grid-template-columns:repeat(2,1fr)}.landing-nav nav>a:not(.btn){display:none}}@media(max-width:576px){.landing-nav{padding:0 14px}.landing-hero{padding:60px 0}.landing-hero-grid{padding:0 24px}.landing-steps,.landing-features{grid-template-columns:1fr}.landing-cta{margin:45px 16px;padding:28px;display:block}.landing-cta .btn{margin-top:20px}}
:root{--capability-border:#e0e6f3}.landing-section-copy{max-width:760px;color:var(--muted);line-height:1.65;margin:-20px 0 30px}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.capability-grid article{border:1px solid var(--capability-border);border-radius:16px;padding:20px;background:linear-gradient(145deg,#fff,#f8faff);min-height:222px;display:flex;flex-direction:column}.capability-grid i{font-size:1.3rem;color:#4d67eb}.capability-grid h3{font:700 1.02rem Poppins,sans-serif;margin:16px 0 7px}.capability-grid p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}.capability-status{margin-top:auto;padding-top:15px;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.capability-status.live{color:#287d4c}.capability-status.planned{color:#956d0a}@media(max-width:980px){.capability-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.capability-grid{grid-template-columns:1fr}}
:root{--ai-point-bg:rgba(255,255,255,.11)}.landing-ai-points{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.landing-ai-points span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.2);background:var(--ai-point-bg);border-radius:999px;padding:8px 11px;color:#edf2ff;font-size:.82rem;font-weight:700}.landing-ai-points i{color:#f2cf4a}
:root{--hero-heading-size:clamp(2.2rem,3.7vw,3.75rem)}body .landing-hero h1{font-size:var(--hero-heading-size)}.ai-agent-check{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:20px 0 4px}.ai-agent-check-title{color:#cdd8fa;font-size:.87rem;font-weight:700}.ai-agent-check-title i{color:#f2cf4a;margin-right:6px}.ai-agent-metric{position:relative;min-width:150px;height:28px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.18)}.ai-agent-metric::after{content:"";position:absolute;bottom:-2px;left:0;width:38%;height:2px;background:linear-gradient(90deg,#8bd238,#f2cf4a);animation:aiMetricUnderline 8s ease-in-out infinite}.ai-agent-word{position:absolute;inset:0;display:flex;align-items:center;color:#fff;font-size:1.02rem;font-weight:800;opacity:0;transform:translateY(10px);animation:aiMetricWord 8s ease-in-out infinite}.word-accuracy{animation-delay:0s}.word-accent{animation-delay:2s}.word-speed{animation-delay:4s}.word-correctness{animation-delay:6s}@keyframes aiMetricWord{0%,22%{opacity:1;transform:translateY(0)}25%,100%{opacity:0;transform:translateY(-10px)}}@keyframes aiMetricUnderline{0%,25%{left:0;width:42%}30%,50%{left:52%;width:32%}55%,75%{left:15%;width:54%}80%,100%{left:61%;width:37%}}@media(max-width:576px){body .landing-hero h1{font-size:2.15rem}.ai-agent-check{align-items:flex-start;flex-direction:column;gap:4px}}
:root{--ai-rotation:10s}.ai-agent-metric::before{content:"Fluency";position:absolute;inset:0;display:flex;align-items:center;color:#fff;font-size:1.02rem;font-weight:800;opacity:0;transform:translateY(10px);animation:aiMetricWord var(--ai-rotation) ease-in-out infinite;animation-delay:8s}.ai-agent-metric .ai-agent-word{animation-duration:var(--ai-rotation)}.ai-agent-metric::after{animation-duration:var(--ai-rotation)}
:root{--hero-heading-size:clamp(2rem,3vw,3.1rem)}body .landing-hero h1{font-family:Poppins,Inter,sans-serif;font-weight:700;line-height:1.16;letter-spacing:-.035em;max-width:760px}
:root{--ai-type-duration:10s}.landing-hero .ai-agent-check{gap:22px;margin:28px 0 10px}.landing-hero .ai-agent-check-title{font:800 clamp(1.2rem,2vw,1.85rem)/1.2 Poppins,Inter,sans-serif;color:#dbe4ff;white-space:nowrap}.landing-hero .ai-agent-check-title i{font-size:1.35em}.landing-hero .ai-agent-metric{min-width:360px;height:54px;border-bottom:4px solid rgba(255,255,255,.22)}.landing-hero .ai-agent-metric::after{height:4px;bottom:-4px}.landing-hero .ai-agent-metric .ai-agent-word,.landing-hero .ai-agent-metric::before{font:800 clamp(1.8rem,3vw,2.75rem)/1 Poppins,Inter,sans-serif;white-space:nowrap;overflow:hidden;width:0;transform:none;animation-name:aiTypeWord;animation-duration:var(--ai-type-duration);animation-timing-function:steps(24,end);animation-iteration-count:infinite}.landing-hero .ai-agent-metric::before{animation-delay:8s}@keyframes aiTypeWord{0%{opacity:1;width:0}17%{opacity:1;width:32ch}21%{opacity:1;width:32ch}24%,100%{opacity:0;width:0}}@media(max-width:760px){.landing-hero .ai-agent-check{align-items:flex-start;flex-direction:column;gap:8px}.landing-hero .ai-agent-metric{min-width:min(100%,320px);width:100%}}
:root{--ai-gold:#f2cf4a}.landing-hero .ai-agent-check{flex-wrap:nowrap;gap:16px}.landing-hero .ai-agent-check-title{font-size:clamp(1.08rem,1.65vw,1.5rem)}.landing-hero .ai-agent-metric{min-width:290px;flex:0 1 330px}.landing-hero .ai-agent-metric .ai-agent-word,.landing-hero .ai-agent-metric::before{color:var(--ai-gold);font-size:clamp(1.65rem,2.45vw,2.3rem)}.landing-hero .ai-agent-metric::after{background:linear-gradient(90deg,#f2cf4a,#fff0a4,#d99d16)}
.landing-testimonials{padding-top:20px}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.testimonial-card{border:1px solid #e0e7f5;border-radius:18px;padding:22px;background:linear-gradient(145deg,#fff,#f6f8ff);box-shadow:0 12px 30px rgba(36,54,110,.06)}.testimonial-stars{color:#e8af15;font-size:.88rem;letter-spacing:2px}.testimonial-card p{margin:13px 0 16px;color:#4f5f80;line-height:1.6}.testimonial-card strong{font-size:.9rem;color:#172544}@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr}}@media(max-width:576px){.testimonial-grid{grid-template-columns:1fr}}

/* Shared public theme: matches the Signup page's dark navy, gold, and warm accent system. */
:root{--navy:#07111f;--blue:#f2c14e;--gold:#f2c14e;--muted:#b9c4d5;--public-panel:#101c33;--public-border:rgba(242,193,78,.18);--public-text:#edf4ff}
body{color:var(--public-text);background:#07111f}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at top left,rgba(242,193,78,.16),transparent 28%),radial-gradient(circle at top right,rgba(255,122,24,.12),transparent 26%),radial-gradient(circle at bottom right,rgba(20,93,255,.12),transparent 28%),#07111f}
body::after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle at 14% 20%,#f2c14e 0 1px,transparent 1.5px),radial-gradient(circle at 54% 34%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 39%,#f2c14e 0 1px,transparent 1.5px);background-size:280px 260px,340px 290px,310px 280px}
.landing-nav{color:var(--public-text)}.landing-brand{color:var(--public-text)}.landing-brand i{color:#f2c14e}.landing-brand small{color:rgba(255,248,230,.7);border-color:rgba(242,193,78,.28)}.landing-nav nav>a:not(.btn){color:#c8d2e3}.landing-nav .btn-outline-light{border-color:rgba(242,193,78,.48);color:#fff}.landing-nav .btn-outline-light:hover{background:rgba(242,193,78,.14);border-color:#f2c14e}.landing-nav .btn-warning,.landing-actions .btn-warning{border:0;background:linear-gradient(135deg,#b8860b,#f2c14e 45%,#ffbe45 75%,#ff7a18);color:#101b2f;box-shadow:0 10px 28px rgba(184,134,11,.3)}
.landing-brand-logo{width:170px;height:58px;object-fit:contain;object-position:center;border:2px solid rgba(242,193,78,.5);border-radius:999px;background:#fff;padding:6px 14px;box-shadow:0 5px 18px rgba(0,0,0,.28)}@media(max-width:900px){.landing-brand-logo{width:140px;height:50px;padding:5px 12px}.landing-brand span{display:none}}@media(max-width:576px){.landing-brand-logo{width:118px;height:44px;padding:4px 10px}.landing-brand small{display:none}}
.landing-hero{background:radial-gradient(circle at 82% 25%,rgba(242,193,78,.16),transparent 34%),radial-gradient(circle at 50% 94%,rgba(20,93,255,.16),transparent 48%),linear-gradient(180deg,#091224 0%,#101c33 100%);padding:104px 0 96px;border-top:1px solid rgba(242,193,78,.09);border-bottom:1px solid rgba(242,193,78,.14)}.landing-kicker{color:#f2c14e}.landing-hero h1{color:#edf4ff;text-shadow:0 4px 35px rgba(0,0,0,.22)}.landing-hero p{color:#c7d2e4}.landing-ai-points span{border-color:rgba(242,193,78,.22);background:rgba(255,255,255,.06);color:#edf4ff}.landing-ai-points i{color:#f2c14e}.landing-disclaimer{color:#9dacbf!important}.landing-preview{border-color:rgba(242,193,78,.24);background:linear-gradient(145deg,rgba(17,28,51,.92),rgba(7,17,31,.92));box-shadow:0 25px 75px rgba(0,0,0,.48)}.preview-top,.preview-stats span{color:#d5dfef}.preview-track{background:#34425f}.preview-track span{background:linear-gradient(90deg,#b8860b,#f2c14e,#ff7a18)}
.landing-section,.landing-feature-band{background:transparent;color:var(--public-text)}.landing-section .section-eyebrow,.landing-feature-band .section-eyebrow{color:#f2c14e}.landing-section h2,.landing-feature-band h2,.landing-cta h2{color:#edf4ff}.landing-steps article,.landing-features article,.capability-grid article,.testimonial-card{border-color:var(--public-border);background:linear-gradient(145deg,rgba(17,28,51,.94),rgba(7,17,31,.94));box-shadow:0 18px 42px rgba(0,0,0,.22)}.landing-steps p,.landing-features p,.capability-grid p,.landing-section-copy,.testimonial-card p{color:#b9c4d5}.landing-steps span{background:rgba(242,193,78,.15);color:#f2c14e}.landing-features i,.capability-grid i{color:#f2c14e}.capability-status.live{color:#92d69d}.capability-status.planned{color:#f2c14e}.landing-feature-band{background:linear-gradient(180deg,rgba(16,28,51,.58),rgba(7,17,31,.28));border-block:1px solid rgba(242,193,78,.1)}.landing-cta{border:1px solid var(--public-border);background:linear-gradient(115deg,rgba(17,28,51,.94),rgba(7,17,31,.96));box-shadow:0 20px 55px rgba(0,0,0,.28)}.landing-cta p{color:#b9c4d5}.landing-cta .btn-primary{border:0;background:linear-gradient(135deg,#b8860b,#f2c14e 45%,#ffbe45 75%,#ff7a18);color:#101b2f}.testimonial-stars{color:#f2c14e}.testimonial-card strong{color:#edf4ff}.landing-footer{background:#050c18;color:#aab8ca;border-top:1px solid rgba(242,193,78,.15)}

/* Gold frame and diagonal light sweep for interactive landing cards. */
.landing-steps article,.landing-features article,.capability-grid article,.testimonial-card{position:relative;overflow:hidden;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease}.landing-steps article::after,.landing-features article::after,.capability-grid article::after,.testimonial-card::after{content:"";position:absolute;inset:-45% auto -45% -62%;width:34%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,246,192,.04) 25%,rgba(242,193,78,.43) 50%,rgba(255,122,24,.08) 72%,transparent 100%);transform:skewX(-20deg);transition:left .55s ease}.landing-steps article:hover,.landing-features article:hover,.capability-grid article:hover,.testimonial-card:hover{transform:translateY(-5px);border-color:rgba(242,193,78,.82);background:linear-gradient(145deg,rgba(31,42,67,.98),rgba(9,18,34,.98));box-shadow:0 0 0 1px rgba(242,193,78,.18),0 18px 46px rgba(0,0,0,.34),0 0 28px rgba(242,193,78,.14)}.landing-steps article:hover::after,.landing-features article:hover::after,.capability-grid article:hover::after,.testimonial-card:hover::after{left:132%}.landing-steps article:hover h3,.landing-features article:hover h3,.capability-grid article:hover h3,.testimonial-card:hover strong{color:#fff7d6}.landing-features article:hover i,.capability-grid article:hover i{filter:drop-shadow(0 0 8px rgba(242,193,78,.58))}

.landing-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.landing-footer-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.landing-footer-links a{color:#dce8ff;text-decoration:none;font-weight:700}.landing-footer-links a:hover,.landing-footer-links a:focus-visible{color:#f2c14e;text-decoration:underline;text-underline-offset:4px}@media(max-width:576px){.landing-footer-inner{align-items:flex-start;flex-direction:column;gap:12px}.landing-footer-links{gap:12px}}

@media (prefers-reduced-motion: reduce){.landing-steps article,.landing-features article,.capability-grid article,.testimonial-card,.landing-steps article::after,.landing-features article::after,.capability-grid article::after,.testimonial-card::after{transition:none}.landing-steps article:hover,.landing-features article:hover,.capability-grid article:hover,.testimonial-card:hover{transform:none}}

/* Match the refined sign-in and OTP screens: Inter throughout, firm but not
   oversized headings, and clearer line-height for learners on all devices. */
.landing-brand,
.landing-hero h1,
.landing-preview strong,
.landing-section h2,
.landing-feature-band h2,
.landing-cta h2,
.landing-steps h3,
.landing-features h3,
.capability-grid h3,
.landing-hero .ai-agent-check-title,
.landing-hero .ai-agent-metric .ai-agent-word,
.landing-hero .ai-agent-metric::before {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing-brand { font-weight: 800; letter-spacing: -0.025em; }
.landing-hero h1 {
  font-size: clamp(1.62rem, 2vw, 2.15rem);
  font-style: italic;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.hero-us-flag {
  display: inline-block;
  position: relative;
  width: 1.8rem;
  height: 1.15rem;
  margin-left: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.12rem;
  vertical-align: -0.15rem;
  background: repeating-linear-gradient(to bottom, #b22234 0 8%, #fff 8% 16%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
  animation: heroFlagWave 2.8s ease-in-out infinite;
  transform-origin: left center;
}

.hero-us-flag span {
  position: absolute;
  inset: 0 auto auto 0;
  width: 43%;
  height: 54%;
  background: #3c3b6e;
}

@keyframes heroFlagWave {
  0%, 100% { transform: rotate(0deg) skewY(0deg); }
  35% { transform: rotate(-5deg) skewY(-3deg); }
  70% { transform: rotate(4deg) skewY(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-us-flag { animation: none; }
}

/* Professional home-page composition: a quiet, premium interface that keeps
   the learner's next action clear without adding visual noise. */
body {
  background: #07111f;
}

.landing-nav {
  position: sticky;
  top: 0.65rem;
  z-index: 30;
  width: calc(100% - 2rem);
  max-width: 1600px;
  min-height: 72px;
  margin: 0.65rem auto 0;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(242, 193, 78, 0.18);
  border-radius: 1.1rem;
  background: rgba(9, 18, 36, 0.78);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.landing-nav nav { gap: 0.55rem; }

.landing-nav nav > a:not(.btn) {
  padding: 0.45rem 0.56rem;
  border-radius: 0.55rem;
  color: #ccd7e8;
  font-size: 0.82rem;
  font-weight: 700;
}

.landing-nav nav > a:not(.btn):hover,
.landing-nav nav > a:not(.btn):focus-visible {
  color: #fff4c9;
  background: rgba(242, 193, 78, 0.1);
  text-decoration: none;
}

.landing-nav .btn {
  padding: 0.45rem 0.78rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  font-weight: 750;
}

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 5.25rem 0 4.9rem;
  border-top: 0;
  background:
    radial-gradient(circle at 83% 25%, rgba(242, 193, 78, 0.18), transparent 22%),
    radial-gradient(circle at 70% 84%, rgba(41, 91, 226, 0.18), transparent 34%),
    linear-gradient(135deg, #07111f 0%, #101d38 52%, #0b1530 100%);
}

.landing-kicker { text-transform: none; }

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, #000 0%, transparent 78%);
}

.landing-hero-grid { position: relative; gap: clamp(2.5rem, 5vw, 5.75rem); }

.landing-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(242, 193, 78, 0.28);
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.08);
  color: #f8d96e;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.landing-hero h1 {
  max-width: 25ch;
  margin: 1rem 0 1.1rem;
  color: #f4f7ff;
  text-wrap: balance;
  text-shadow: none;
}

/* Override the earlier responsive heading token with the compact two-line
   treatment used by the final home-page hero. */
body .landing-hero h1 {
  max-width: 48ch;
  font-size: clamp(1.45rem, 1.65vw, 1.85rem);
}

.landing-hero p {
  max-width: 59ch;
  color: #c5d0e2;
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  line-height: 1.7;
}

.landing-ai-points { gap: 0.55rem; margin: 1.45rem 0; }
.landing-ai-points span { padding: 0.52rem 0.72rem; font-size: 0.76rem; }

.landing-actions { margin: 1.85rem 0 1.1rem; }
.landing-actions .btn {
  min-height: 2.85rem;
  padding: 0.66rem 1rem;
  border-radius: 0.72rem;
  font-size: 0.92rem;
}

.landing-actions .btn-warning {
  box-shadow: 0 12px 28px rgba(229, 167, 35, 0.24);
}

.landing-preview {
  position: relative;
  min-height: 385px;
  padding: clamp(1.45rem, 2.3vw, 2rem);
  border-color: rgba(242, 193, 78, 0.32);
  border-radius: 1.5rem;
  background: linear-gradient(155deg, rgba(24, 38, 70, 0.94), rgba(8, 17, 34, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.landing-preview::before {
  content: "Practice dashboard";
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid rgba(242, 193, 78, 0.25);
  border-radius: 999px;
  color: #f6d976;
  background: rgba(242, 193, 78, 0.08);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-top { padding-right: 7rem; font-size: 0.82rem; }
.landing-preview strong { margin: 3.5rem 0 1.6rem; font-size: clamp(1.45rem, 1.75vw, 1.9rem); line-height: 1.18; }
.preview-stats div { padding: 0.85rem 0 0; }
.preview-stats b { font-size: 0.9rem; }

.landing-section { padding: 5rem 1rem; }
.landing-section h2, .landing-feature-band h2 { margin-bottom: 1.6rem; }
.landing-steps, .landing-features { gap: 1rem; }
.landing-steps article, .landing-features article, .capability-grid article, .testimonial-card {
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.landing-steps article, .landing-features article { padding: 1.35rem; }
.landing-feature-band { padding: 4.8rem 0; }
.capability-grid { gap: 1rem; }
.capability-grid article { min-height: 205px; padding: 1.2rem; }

.landing-cta {
  margin: 3.75rem auto;
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
}

@media (max-width: 900px) {
  .landing-nav { top: 0; width: 100%; margin: 0; border-inline: 0; border-radius: 0; }
  .landing-hero { padding: 4.25rem 0; }
  .landing-preview { min-height: auto; }
}

@media (max-width: 576px) {
  .landing-hero { padding: 3.35rem 0; }
  .landing-hero h1 { font-size: 1.7rem; line-height: 1.22; }
  .landing-kicker { font-size: 0.62rem; }
  .landing-preview::before { display: none; }
  .preview-top { padding-right: 0; }
  .landing-section { padding: 3.5rem 1rem; }
  .landing-cta { margin: 2.5rem 1rem; padding: 1.5rem; }
}

/* Animated checklist replaces the decorative readiness metrics with a clear
   summary of the tools learners receive. */
.landing-feature-checklist { min-height: 430px; user-select: none; }
.landing-feature-checklist::before { content: "Included"; }
.feature-checklist-title {
  max-width: 19ch;
  margin: 2.35rem 0 1rem;
  color: #f5f8ff;
  font-size: clamp(1.2rem, 1.35vw, 1.55rem) !important;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.feature-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.78rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-height: 3.1rem;
  padding: 0.66rem 0.72rem;
  border: 1px solid rgba(141, 216, 157, 0.2);
  border-radius: 0.72rem;
  color: #e9f2ff;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(8px);
  animation-name: checklistEnter, checklistPulse;
  animation-duration: 0.5s, 4.2s;
  animation-timing-function: ease-out, ease-in-out;
  animation-delay: var(--check-delay), calc(4.2s + var(--check-delay));
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, both;
}

.feature-checklist li::before {
  content: "✓";
  display: grid;
  width: 1.28rem;
  height: 1.28rem;
  flex: 0 0 1.28rem;
  place-items: center;
  border-radius: 50%;
  color: #062916;
  background: linear-gradient(135deg, #a7ec96, #42be70);
  box-shadow: 0 0 0 4px rgba(84, 204, 112, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
}

.feature-checklist li > i {
  width: 1rem;
  flex: 0 0 1rem;
  color: #f4ce50;
  font-size: 0.9rem;
  text-align: center;
}

.feature-checklist li > span { min-width: 0; }

.landing-feature-checklist .preview-top { font-size: 0.75rem; }

.landing-feature-checklist .toolkit-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.48rem 0.58rem 0.48rem 0.7rem;
  border: 1px solid rgba(242, 193, 78, 0.22);
  border-radius: 0.7rem;
  color: #f7e5a0;
  background: linear-gradient(90deg, rgba(242, 193, 78, 0.13), rgba(255, 255, 255, 0.025));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.toolkit-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
}

.toolkit-heading > span > i { color: #f4ce50; }
.toolkit-heading > i { color: #83d891; font-size: 1rem; }

/* Shared home-page heading system, based on the compact hero treatment. */
.landing-section h2,
.landing-feature-band h2,
.landing-cta h2,
.feature-checklist-title {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.2rem, 1.35vw, 1.55rem) !important;
  font-style: italic;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.landing-steps h3,
.landing-features h3,
.capability-grid h3,
.testimonial-card strong {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: italic;
  font-weight: 750;
  letter-spacing: -0.015em;
}

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

@keyframes checklistPulse {
  0%, 14%, 100% {
    border-color: rgba(141, 216, 157, 0.2);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
  }
  5%, 10% {
    border-color: rgba(137, 225, 134, 0.8);
    background: rgba(92, 201, 103, 0.13);
    box-shadow: 0 0 0 3px rgba(92, 201, 103, 0.08), 0 8px 20px rgba(38, 168, 82, 0.16);
  }
}

@media (max-width: 576px) {
  .landing-feature-checklist { min-height: auto; }
  .feature-checklist { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-checklist li { opacity: 1; transform: none; animation: none; }
}
.landing-preview strong { font-weight: 800; letter-spacing: -0.025em; }
.landing-section h2,.landing-feature-band h2,.landing-cta h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.landing-steps h3,.landing-features h3,.capability-grid h3 { font-weight: 750; letter-spacing: -0.015em; }
.landing-hero .ai-agent-check-title { font-weight: 750; letter-spacing: -0.025em; }
.landing-hero .ai-agent-metric .ai-agent-word,.landing-hero .ai-agent-metric::before { font-weight: 800; letter-spacing: -0.025em; }

/* Compact paired AI4OPS and CitizenshipAI identity for the public home page. */
.landing-nav {
  min-height: 86px;
  height: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.landing-brand {
  gap: 0.72rem;
  min-width: 0;
}

.landing-brand-logo {
  width: 142px;
  height: 50px;
  padding: 5px 12px;
}

.landing-brand-divider {
  width: 1px;
  height: 2rem;
  flex: 0 0 auto;
  background: rgba(242, 193, 78, 0.34);
}

.landing-citizenship-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 2px solid rgba(242, 193, 78, 0.7);
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.landing-brand-copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.landing-brand-copy strong {
  color: #edf4ff;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.landing-brand-copy small {
  margin-top: 0.3rem;
  padding: 0;
  border: 0;
  color: rgba(237, 244, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.landing-ai4ops-logo {
  width: 76px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid rgba(242, 193, 78, 0.38);
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.18rem 0.32rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.landing-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.18rem;
  padding: 0.3rem 0.48rem;
  border: 1px solid rgba(242, 193, 78, 0.32);
  border-radius: 999px;
  color: #f8dd86;
  background: rgba(242, 193, 78, 0.08);
  font-size: 0.93rem;
  line-height: 1;
  white-space: nowrap;
}

.landing-flag-badge small {
  padding: 0;
  border: 0;
  color: inherit;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

/* Render the flag consistently even when an older browser cached the original markup. */
.landing-flag-badge > span { font-size: 0; }
.landing-flag-badge > span::after { content: "\1F1FA \1F1F8 "; font-size: 0.93rem; }

/* Reveal each part of the learning journey as it enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 560ms ease var(--reveal-delay, 0ms), transform 560ms cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
  }
  .scroll-reveal.is-revealed { opacity: 1; transform: translateY(0); }
}

/* Deeper, calmer public-site canvas. */
body {
  background: #030817;
}

body::before {
  background:
    radial-gradient(circle at 8% 5%, rgba(29, 62, 125, 0.26), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(151, 111, 18, 0.13), transparent 22%),
    radial-gradient(circle at 52% 100%, rgba(14, 43, 92, 0.18), transparent 34%),
    #030817;
}

.landing-hero {
  background:
    radial-gradient(circle at 82% 25%, rgba(210, 162, 34, 0.13), transparent 34%),
    radial-gradient(circle at 50% 94%, rgba(18, 73, 161, 0.16), transparent 48%),
    linear-gradient(180deg, #060d20 0%, #030817 100%);
}

.landing-feature-band {
  background: linear-gradient(180deg, rgba(9, 20, 43, 0.72), rgba(3, 8, 23, 0.52));
}

@media (max-width: 1200px) {
  .landing-flag-badge small { display: none; }
}

@media (max-width: 900px) {
  .landing-ai4ops-logo,
  .landing-flag-badge { display: none; }
  .landing-brand-copy small { display: none; }
}

@media (max-width: 576px) {
  .landing-nav { min-height: 68px; padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .landing-citizenship-logo { width: 42px; height: 42px; }
  .landing-brand-copy strong { font-size: 1rem; }
}