/* ==========================================================================
   SHARP PLANET — STYLESHEET
   Design tokens -> Base -> Layout -> Components -> Sections -> Utilities
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand colors */
  --navy:#071B3A;
  --royal:#2563EB;
  --cyan:#38BDF8;
  --emerald:#10B981;
  --bg:#F8FAFC;
  --slate:#1E293B;
  --slate-soft:#475569;
  --white:#ffffff;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--royal), var(--cyan));
  --grad-dark: linear-gradient(180deg, #071B3A 0%, #0A2550 100%);
  --grad-text: linear-gradient(90deg, #2563EB, #38BDF8);

  /* Typography */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-accent: "Fraunces", serif;

  /* Spacing / layout */
  --container: 1240px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card: 0 20px 60px -20px rgba(7,27,58,0.18);
  --shadow-glow: 0 0 80px rgba(56,189,248,0.35);

  /* Motion */
  --ease: cubic-bezier(.16,.84,.44,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: auto; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--slate);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
em{ font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.grain-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 9999;
  opacity: 0.025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. TYPE HELPERS ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--royal); margin-bottom:18px;
}
.eyebrow--dark{ color: var(--royal); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow:0 0 12px var(--cyan); }

.section-title{
  font-size: clamp(30px, 4.2vw, 52px);
  margin-bottom:20px;
}
.section-title--light{ color:#fff; }
.section-lead{
  font-size: clamp(16px,1.6vw,19px);
  color: var(--slate-soft);
  max-width: 560px;
  margin-bottom: 36px;
}
.section-lead--light{ color: rgba(255,255,255,0.72); }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 28px; border-radius: var(--radius-full);
  font-weight:700; font-size:15px; white-space:nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  position:relative;
}
.btn i{ width:18px; height:18px; }
.btn--primary{
  background: var(--grad-primary); color:#fff;
  box-shadow: 0 12px 30px -8px rgba(37,99,235,0.55);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(56,189,248,0.6); }
.btn--ghost{
  background: rgba(255,255,255,0.6); color: var(--navy);
  border:1.5px solid rgba(7,27,58,0.12);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ background:#fff; transform: translateY(-3px); }
.btn--large{ padding:19px 34px; font-size:16px; }
.btn--small{ padding:11px 20px; font-size:13.5px; }

/* ---------- 5. GLASS CARD ---------- */
.glass-card{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ---------- 6. NAVBAR ---------- */
.navbar{
  position: fixed; top:18px; left:0; right:0; z-index: 1000;
  display:flex; justify-content:center;
}
.navbar__inner{
  width: min(1180px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px 12px 22px;
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 40px -14px rgba(7,27,58,0.2);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.navbar.is-scrolled .navbar__inner{
  background: rgba(7,27,58,0.72);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 14px 44px -14px rgba(7,27,58,0.5);
}
.navbar.is-scrolled .navbar__link,
.navbar.is-scrolled .navbar__logo-text{ color:#fff; }

.navbar__logo{ display:flex; align-items:center; gap:9px; }
.navbar__logo-mark{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.navbar__logo-mark img{ width:34px; height:34px; object-fit:contain; display:block; }
.navbar__logo-text{ font-weight:800; font-size:17px; color: var(--navy); transition: color .3s; }
.navbar__links{ display:flex; gap:34px; }
.navbar__link{ font-weight:600; font-size:14.5px; color: var(--navy); position:relative; transition: color .3s; }
.navbar__link::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: var(--grad-primary); transition: width .3s var(--ease);
}
.navbar__link:hover::after{ width:100%; }
.navbar__burger{ display:none; flex-direction:column; gap:5px; width:22px; }
.navbar__burger span{ height:2px; background: var(--navy); border-radius:2px; transition: transform .3s, opacity .3s; }
.navbar__mobile{
  display:none; flex-direction:column; gap:4px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px);
  margin-top:10px; border-radius:24px; padding:16px; box-shadow: var(--shadow-card);
}
.navbar__mobile-link{ padding:12px 10px; font-weight:600; border-radius:12px; }
.navbar__mobile-link:hover{ background: rgba(37,99,235,0.06); }
.navbar__mobile .btn{ margin-top:8px; justify-content:center; }

@media (max-width: 860px){
  .navbar__links, .navbar__cta{ display:none; }
  .navbar__burger{ display:flex; }
  .navbar__mobile.is-open{ display:flex; }
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #E9F2FF 0%, var(--bg) 55%);
  padding: 140px 24px 60px;
}
.hero__constellation{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.9; }
.hero__glow{ position:absolute; border-radius:50%; filter: blur(90px); z-index:0; pointer-events:none; }
.hero__glow--1{ width:520px; height:520px; background: rgba(37,99,235,0.18); top:-120px; left:-140px; }
.hero__glow--2{ width:420px; height:420px; background: rgba(56,189,248,0.22); bottom:-100px; right:-100px; }

.hero__inner{ position:relative; z-index:2; max-width:920px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero__headline{ font-size: clamp(42px, 7.4vw, 92px); overflow:hidden; }
.reveal-line{ display:block; overflow:hidden; }
.reveal-line__inner{ display:block; transform: translateY(115%); }

.hero__sub{
  margin-top:26px; font-size: clamp(17px,1.8vw,21px); color: var(--slate-soft);
  max-width: 560px;
}
.hero__actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; justify-content:center; }

.hero__stats{
  margin-top:76px; display:flex; gap:clamp(20px,5vw,64px); flex-wrap:wrap; justify-content:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; min-width:110px; }
.stat__num{ font-family: var(--font-display); font-weight:800; font-size: clamp(26px,3vw,38px); color: var(--navy); }
.stat__label{ font-size:13px; color: var(--slate-soft); font-weight:600; margin-top:4px; }

.hero__scroll{
  position:absolute; bottom:28px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:0.08em; color: var(--slate-soft);
  z-index:2;
}
.hero__scroll i{ width:16px; height:16px; animation: bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* ---------- 8. EVERY PARENT'S STORY ---------- */
.parent-story{ padding: 140px 0; background: var(--bg); }
.parent-story__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:70px; align-items:center; }

.story-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin: 20px 0 32px; }
.story-card{
  background:#fff; border-radius: var(--radius-md); padding:22px;
  box-shadow: var(--shadow-card); border:1px solid rgba(7,27,58,0.04);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.story-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 50px -18px rgba(37,99,235,0.28); }
.story-card i{ width:26px; height:26px; color: var(--royal); margin-bottom:12px; }
.story-card h3{ font-size:16px; margin-bottom:4px; }
.story-card p{ font-size:13.5px; color: var(--slate-soft); }

.parent-story__hope{
  display:flex; align-items:flex-start; gap:10px;
  font-weight:600; color: var(--navy); font-size:16px;
  background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(56,189,248,0.06));
  padding:16px 18px; border-radius: var(--radius-sm);
}
.parent-story__hope i{ width:20px; height:20px; color: var(--emerald); flex-shrink:0; margin-top:2px; }

.parent-story__art{ position:relative; display:flex; justify-content:center; }
.story-illustration{ width:100%; max-width:400px; }
.pulse-node{ animation: pulseNode 2.4s ease-in-out infinite; }
.pulse-node:nth-child(3){ animation-delay:.3s; }
.pulse-node:nth-child(4){ animation-delay:.6s; }
.pulse-node:nth-child(5){ animation-delay:.9s; }
@keyframes pulseNode{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.story-art-badge{
  position:absolute; bottom:8%; left:-6%; display:flex; align-items:center; gap:10px;
  padding:14px 18px;
}
.story-art-badge i{ width:22px; height:22px; color: var(--emerald); }
.story-art-badge strong{ display:block; font-size:16px; color:var(--navy); }
.story-art-badge span{ font-size:12px; color: var(--slate-soft); }

/* ---------- 9. THE PROBLEM ---------- */
.problem{ padding:140px 0; background: linear-gradient(180deg, #EEF4FF 0%, var(--bg) 100%); }
.compare{ display:grid; grid-template-columns: 1fr auto 1fr; gap:26px; align-items:stretch; margin-top:50px; }
.compare__col{
  background:#fff; border-radius: var(--radius-lg); padding:38px 34px;
  box-shadow: var(--shadow-card);
}
.compare__col--traditional{ border: 1.5px solid rgba(7,27,58,0.08); }
.compare__col--future{ border: 1.5px solid rgba(56,189,248,0.4); background: linear-gradient(160deg, #fff, #F0F8FF); }
.compare__tag{ display:inline-block; font-weight:700; font-size:13px; color: var(--slate-soft); margin-bottom:22px; text-transform:uppercase; letter-spacing:0.05em; }
.compare__tag--accent{ color: var(--royal); }
.compare__list li{ display:flex; align-items:center; gap:12px; padding:12px 0; font-weight:600; font-size:15px; border-top:1px solid rgba(7,27,58,0.06); }
.compare__list li:first-child{ border-top:none; }
.compare__col--traditional li i{ width:18px; height:18px; color:#CBD5E1; flex-shrink:0; }
.compare__col--future li i{ width:18px; height:18px; color: var(--emerald); flex-shrink:0; }
.compare__vs{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
  width:56px; height:56px; border-radius:50%; background: var(--grad-primary);
  align-self:center; box-shadow: 0 12px 30px -8px rgba(37,99,235,0.5);
}

.timeline{ position:relative; margin-top:100px; display:flex; justify-content:space-between; gap:12px; }
.timeline__track{ position:absolute; top:6px; left:0; right:0; height:2px; background: rgba(7,27,58,0.1); }
.timeline__point{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.timeline__dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--royal); margin-bottom:16px; z-index:1; }
.timeline__point--final .timeline__dot{ background: var(--grad-primary); border-color: transparent; box-shadow:0 0 0 6px rgba(56,189,248,0.18); }
.timeline__label{ font-size:13.5px; font-weight:700; color: var(--navy); }
.timeline__label small{ font-weight:500; color: var(--slate-soft); }

/* ---------- 10. PHILOSOPHY (dark) ---------- */
.philosophy{ background: var(--grad-dark); padding:140px 0; position:relative; overflow:hidden; }
.philosophy::before{
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(56,189,248,0.14), transparent 70%);
  top:-200px; right:-160px;
}
.belief-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; margin-top:56px; position:relative; z-index:1; }
.belief-card{
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md); padding:30px; backdrop-filter: blur(10px);
  transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s;
}
.belief-card:hover{ transform: translateY(-8px); background: rgba(255,255,255,0.07); border-color: rgba(56,189,248,0.4); }
.belief-card i{ width:26px; height:26px; color: var(--cyan); margin-bottom:16px; }
.belief-card h3{ color:#fff; font-size:17px; margin-bottom:8px; }
.belief-card p{ color: rgba(255,255,255,0.6); font-size:14px; }

/* ---------- 11. ECOSYSTEM ---------- */
.ecosystem{ padding:140px 0; background: var(--bg); }
.ecosystem-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-top:50px; }
.ecosystem-card{
  text-align:left; background:#fff; border-radius: var(--radius-lg); padding:32px 26px;
  box-shadow: var(--shadow-card); border:1px solid rgba(7,27,58,0.05);
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ecosystem-card:hover{ transform: translateY(-10px); box-shadow: 0 30px 60px -20px rgba(37,99,235,0.3); }
.ecosystem-card__icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: var(--grad-primary); margin-bottom:16px;
}
.ecosystem-card__icon i{ width:24px; height:24px; color:#fff; }
.ecosystem-card h3{ font-size:19px; }
.ecosystem-card p{ font-size:14px; color: var(--slate-soft); margin-bottom:8px; }
.ecosystem-card__more{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color: var(--royal); margin-top:auto; }
.ecosystem-card__more i{ width:14px; height:14px; transition: transform .3s; }
.ecosystem-card:hover .ecosystem-card__more i{ transform: translate(3px,-3px); }

/* Modals */
.modal-overlay{
  position: fixed; inset:0; z-index: 2000; display:flex; align-items:center; justify-content:center;
  background: rgba(7,27,58,0.55); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
  padding: 24px;
}
.modal-overlay.is-open{ opacity:1; pointer-events:all; }
.modal{
  display:none; background:#fff; border-radius: var(--radius-lg); padding:44px;
  max-width:480px; width:100%; position:relative; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.4);
  transform: translateY(24px) scale(0.97); opacity:0; transition: all .4s var(--ease);
}
.modal.is-active{ display:block; transform:none; opacity:1; }
.modal__close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background: var(--bg); display:flex; align-items:center; justify-content:center; }
.modal__close i{ width:18px; height:18px; }
.modal__icon{ width:56px; height:56px; border-radius:16px; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.modal__icon i{ width:26px; height:26px; color:#fff; }
.modal h3{ font-size:24px; margin-bottom:12px; }
.modal p{ color: var(--slate-soft); margin-bottom:26px; font-size:15px; }

/* ---------- 12. PILLARS / HEXAGON ---------- */
.pillars{ padding:140px 0; background: linear-gradient(180deg, var(--bg), #EEF4FF); }
.hex-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px 24px; margin-top:56px; }
.hex-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hex{
  width:96px; height:110px; position:relative; display:flex; align-items:center; justify-content:center;
  background: var(--grad-primary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-bottom:20px; box-shadow: 0 20px 40px -14px rgba(37,99,235,0.45);
  transition: transform .5s var(--ease);
}
.hex-item:hover .hex{ transform: rotate(8deg) scale(1.06); }
.hex i{ width:32px; height:32px; color:#fff; }
.hex-item h3{ font-size:18px; margin-bottom:6px; }
.hex-item p{ font-size:14px; color: var(--slate-soft); max-width:220px; }

/* ---------- 13. STORIES / TESTIMONIAL CAROUSEL ---------- */
.stories{ padding:140px 0 100px; background: var(--bg); overflow:hidden; }
.stories-track-wrap{ margin-top:20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.stories-track{ display:flex; gap:24px; width:max-content; padding: 10px 32px; animation: scrollTrack 34s linear infinite; }
.stories-track:hover{ animation-play-state: paused; }
@keyframes scrollTrack{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.story-testimonial{ width:320px; padding:28px; flex-shrink:0; }
.story-testimonial__media{ position:relative; border-radius:16px; overflow:hidden; margin-bottom:18px; background:#EEF4FF; }
.story-testimonial__media svg{ width:100%; height:150px; }
.play-btn{
  position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  background: rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.play-btn i{ width:18px; height:18px; color: var(--royal); margin-left:2px; }
.story-testimonial p{ font-size:14.5px; color: var(--navy); margin-bottom:16px; min-height:80px; }
.story-testimonial strong{ display:block; font-size:14px; color: var(--navy); }
.story-testimonial span{ font-size:12.5px; color: var(--slate-soft); }

/* ---------- 14. FOUNDER ---------- */
.founder{ background: var(--grad-dark); padding:140px 0; position:relative; overflow:hidden; }
.founder__grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:70px; align-items:center; }
.founder__portrait{ position:relative; }
.founder-illustration{
  width:100%; max-width:340px; margin:0 auto;
  aspect-ratio: 5/6;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.founder-badge{
  position:absolute; bottom:6%; right:0; display:flex; align-items:center; gap:10px; padding:14px 18px;
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15);
}
.founder-badge i{ width:20px; height:20px; color: var(--cyan); }
.founder-badge strong{ color:#fff; display:block; font-size:15px; }
.founder-badge span{ color: rgba(255,255,255,0.6); font-size:11.5px; }

.founder-timeline{ display:flex; flex-direction:column; gap:0; margin: 30px 0 34px; border-left: 2px solid rgba(255,255,255,0.14); padding-left:24px; }
.founder-timeline__item{ position:relative; padding-bottom:22px; }
.founder-timeline__item::before{ content:""; position:absolute; left:-30px; top:4px; width:10px; height:10px; border-radius:50%; background: var(--cyan); box-shadow:0 0 10px var(--cyan); }
.founder-timeline__year{ font-weight:800; color:#fff; font-size:14px; display:block; margin-bottom:3px; }
.founder-timeline__item p{ color: rgba(255,255,255,0.65); font-size:14.5px; }
.founder-signature{ font-family: var(--font-accent); font-style:italic; font-size:22px; color: var(--cyan); }

/* ---------- 15. FUTURE VISION ---------- */
.vision{
  position:relative; min-height:100svh; background: var(--navy);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding: 100px 24px;
}
.vision__stars{ position:absolute; inset:0; }
.vision__glow{
  position:absolute; width:70%; height:60%; left:15%; top:20%;
  background: radial-gradient(circle, rgba(37,99,235,0.28), transparent 65%);
  filter: blur(40px);
}
.vision__inner{ position:relative; z-index:2; text-align:center; max-width:860px; }
.vision__headline{ font-size: clamp(28px, 4.4vw, 48px); color:#fff; font-weight:700; line-height:1.35; }
.vision__headline em{ background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; font-family: var(--font-accent); }
.vision__sub{ margin-top:26px; color: rgba(255,255,255,0.6); font-size:17px; }
.vision .eyebrow{ color: var(--cyan); justify-content:center; }

/* ---------- 16. FINAL CTA ---------- */
.final-cta{ padding:140px 24px; background: var(--bg); display:flex; justify-content:center; }
.final-cta__card{
  position:relative; overflow:hidden; text-align:center; max-width:760px; width:100%;
  padding: 70px 48px; background: rgba(255,255,255,0.7);
}
.final-cta__glow{
  position:absolute; width:400px; height:400px; border-radius:50%; top:-160px; left:50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(56,189,248,0.28), transparent 70%); filter: blur(20px);
}
.final-cta__card h2{ position:relative; font-size: clamp(28px,3.6vw,40px); margin: 14px 0 16px; }
.final-cta__card p{ position:relative; color: var(--slate-soft); max-width:460px; margin: 0 auto 32px; }
.final-cta__card .btn{ position:relative; }

/* ---------- 17. FOOTER ---------- */
.footer{ background: var(--navy); color: rgba(255,255,255,0.7); padding: 80px 0 0; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer__brand p{ margin: 14px 0 20px; font-size:14px; }
.footer__brand .navbar__logo-text{ color:#fff; }
.footer__socials{ display:flex; gap:12px; }
.footer__socials a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition: background .3s, transform .3s; }
.footer__socials a:hover{ background: var(--grad-primary); transform: translateY(-3px); }
.footer__socials i{ width:16px; height:16px; }
.footer__col h4{ color:#fff; font-size:14px; margin-bottom:18px; }
.footer__col{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer__col a{ display:flex; align-items:center; gap:8px; transition: color .3s; }
.footer__col a:hover{ color: var(--cyan); }
.footer__col i{ width:14px; height:14px; }
.footer__bottom{ display:flex; justify-content:space-between; padding:26px 32px; font-size:13px; max-width: var(--container); margin:0 auto; }

/* ---------- 18. SCROLL REVEAL BASE STATE (JS toggles .is-visible) ---------- */
.reveal-up{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 1080px){
  .ecosystem-grid{ grid-template-columns: repeat(2,1fr); }
  .belief-grid{ grid-template-columns: repeat(2,1fr); }
  .hex-grid{ grid-template-columns: repeat(2,1fr); }
  .founder__grid, .parent-story__grid{ grid-template-columns: 1fr; }
  .founder__portrait{ order:-1; max-width:320px; margin: 0 auto 20px; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .container{ padding:0 20px; }
  .story-cards{ grid-template-columns: 1fr; }
  .compare{ grid-template-columns: 1fr; }
  .compare__vs{ margin:0 auto; }
  .timeline{ flex-direction:column; align-items:flex-start; gap:26px; }
  .timeline__track{ display:none; }
  .timeline__point{ flex-direction:row; text-align:left; align-items:center; gap:14px; }
  .belief-grid, .hex-grid, .ecosystem-grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction:column; gap:8px; text-align:center; }
  .hero__stats{ gap: 28px 40px; }
  .final-cta__card{ padding:48px 26px; }
}

/* ==========================================================================
   NEW AUTHORITY / TRUST SECTIONS
   Featured In · Recognition & Awards · On The Stage · Trusted By ·
   Moments of Impact · Meet The Mentor · Our Impact · Our Journey ·
   Media Gallery · Final Trust · Shared Lightbox
   Built with the existing tokens (colors, radii, shadows, easing) so they
   blend with the rest of the site. Original sections above are untouched.
   ========================================================================== */

/* ---------- NEW 1: FEATURED IN ---------- */
.press{ padding:140px 0; background: var(--bg); }
.press__logos{
  display:flex; align-items:center; gap:44px; flex-wrap:wrap;
  margin: 8px 0 56px; padding-bottom:40px; border-bottom:1px solid rgba(7,27,58,0.08);
}
.press__logos img{
  height:34px; width:auto; filter: grayscale(1); opacity:0.55;
  transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.press__logos img:hover{ filter:none; opacity:1; transform: translateY(-2px); }

.press__grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:22px; }
.press-card{
  position:relative; text-align:left; border-radius: var(--radius-lg); overflow:hidden;
  min-height: 360px; box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.press-card--large{ grid-row: span 1; min-height: 460px; }
.press-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 70px -22px rgba(7,27,58,0.35); }
.press-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.press-card:hover img{ transform: scale(1.06); }
.press-card__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; text-align:left;
  background: linear-gradient(180deg, transparent 40%, rgba(7,27,58,0.92) 100%);
  backdrop-filter: blur(0px);
}
.press-card__pub{ color: var(--cyan); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.press-card__overlay h3{ color:#fff; font-size:18px; margin-bottom:10px; line-height:1.35; }
.press-card__date{ color: rgba(255,255,255,0.6); font-size:12.5px; font-weight:600; }
.press-card__arrow{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translate(-6px,6px); transition: all .4s var(--ease);
}
.press-card:hover .press-card__arrow{ opacity:1; transform:translate(0,0); }
.press-card__arrow i{ width:16px; height:16px; color:#fff; }

/* ---------- NEW 2: RECOGNITION & AWARDS ---------- */
.awards{ background: var(--grad-dark); padding:140px 0; position:relative; overflow:hidden; }
.awards::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%);
  bottom:-220px; left:-140px;
}
.awards-list{ position:relative; z-index:1; margin-top:56px; display:flex; flex-direction:column; gap:2px; }
.awards-item{
  display:grid; grid-template-columns: 260px 1fr; gap:36px; align-items:center;
  padding:32px 0; border-top:1px solid rgba(255,255,255,0.09);
}
.awards-item:last-child{ border-bottom:1px solid rgba(255,255,255,0.09); }
.awards-item__media{ border-radius: var(--radius-md); overflow:hidden; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.5); }
.awards-item__media img{ width:100%; height:170px; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.awards-item:hover .awards-item__media img{ transform: scale(1.06); }
.awards-item__year{
  display:inline-block; font-weight:800; font-size:13px; color: var(--cyan);
  letter-spacing:0.06em; margin-bottom:8px;
}
.awards-item__body h3{ color:#fff; font-size:21px; margin-bottom:8px; }
.awards-item__body p{ color: rgba(255,255,255,0.6); font-size:14.5px; max-width:560px; }

/* ---------- NEW 3: ON THE STAGE ---------- */
.stage{ padding:140px 0 100px; background: var(--bg); overflow:hidden; }
.stage-track-wrap{ margin-top:20px; }
.stage-track{
  display:flex; gap:26px; overflow-x:auto; padding: 10px 32px 30px;
  scroll-snap-type: x proximity;
}
.stage-track::-webkit-scrollbar{ height:6px; }
.stage-track::-webkit-scrollbar-thumb{ background: rgba(37,99,235,0.25); border-radius:10px; }
.stage-card{
  flex:0 0 360px; scroll-snap-align:start; background:#fff; border-radius: var(--radius-lg);
  padding:20px; box-shadow: var(--shadow-card); border:1px solid rgba(7,27,58,0.05);
}
.stage-card__media{ border-radius: var(--radius-md); overflow:hidden; margin-bottom:18px; }
.stage-card__media img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.stage-card:hover .stage-card__media img{ transform: scale(1.05); }
.stage-card__loc{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color: var(--royal); margin-bottom:10px; }
.stage-card__loc i{ width:14px; height:14px; }
.stage-card h3{ font-size:18px; margin-bottom:8px; }
.stage-card p{ font-size:14px; color: var(--slate-soft); }

/* ---------- NEW 4: TRUSTED BY SCHOOLS & INSTITUTIONS ---------- */
.trustedby{ padding:120px 0; background: linear-gradient(180deg, var(--bg), #EEF4FF); }
.trustedby-logos{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:18px; margin: 50px 0 56px;
}
.trustedby-logo{
  background:#fff; border-radius: var(--radius-sm); padding:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card); border:1px solid rgba(7,27,58,0.05);
}
.trustedby-logo img{ max-height:44px; width:auto; filter: grayscale(1); opacity:0.6; transition: filter .4s, opacity .4s, transform .4s var(--ease); }
.trustedby-logo:hover img{ filter:none; opacity:1; transform: scale(1.05); }
.trustedby-photos{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.trustedby-photo{ border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); }
.trustedby-photo img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.trustedby-photo:hover img{ transform: scale(1.06); }

/* ---------- NEW 5: MOMENTS OF IMPACT ---------- */
.impact-gallery{ background: var(--bg); padding-bottom:120px; }
.impact-hero{
  position:relative; display:block; width:100%; height: 62vh; min-height:420px;
  overflow:hidden; margin-bottom:70px; text-align:left;
}
.impact-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.impact-hero:hover img{ transform: scale(1.04); }
.impact-hero__overlay{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 60px clamp(24px,6vw,80px);
  background: linear-gradient(180deg, rgba(7,27,58,0.1) 30%, rgba(7,27,58,0.85) 100%);
}
.impact-hero__overlay .eyebrow{ color: var(--cyan); }
.impact-hero__overlay h2{ color:#fff; font-size: clamp(26px,3.4vw,42px); max-width:640px; }

.impact-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap:18px;
}
.impact-card{ position:relative; border-radius: var(--radius-md); overflow:hidden; text-align:left; grid-row: span 2; }
.impact-card--tall{ grid-row: span 3; }
.impact-card--wide{ grid-column: span 2; grid-row: span 2; }
.impact-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.impact-card:hover img{ transform: scale(1.08); }
.impact-card::after{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(7,27,58,0.75) 100%);
  opacity:0; transition: opacity .4s var(--ease);
}
.impact-card:hover::after{ opacity:1; }
.impact-card__tag{
  position:absolute; left:16px; bottom:14px; color:#fff; font-size:12.5px; font-weight:700;
  opacity:0; transform: translateY(8px); transition: all .4s var(--ease); z-index:1;
}
.impact-card:hover .impact-card__tag{ opacity:1; transform:translateY(0); }

/* ---------- NEW 6: MEET THE MENTOR ---------- */
.mentor-full{ padding:140px 0; background: var(--bg); }
.mentor-full__grid{ display:grid; grid-template-columns: 0.75fr 1.25fr; gap:70px; align-items:center; }
.mentor-full__portrait img{
  width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  aspect-ratio: 4/5; object-fit:cover;
}
.mentor-full__points{ display:flex; flex-direction:column; gap:20px; margin-top:8px; }
.mentor-full__point{ display:flex; gap:16px; align-items:flex-start; }
.mentor-full__point i{ width:22px; height:22px; color: var(--royal); flex-shrink:0; margin-top:3px; }
.mentor-full__point strong{ display:block; color: var(--navy); font-size:15.5px; margin-bottom:3px; }
.mentor-full__point span{ color: var(--slate-soft); font-size:14.5px; }

/* ---------- NEW 7: OUR IMPACT (stats) ---------- */
.impact-stats{ background: var(--grad-dark); padding:120px 0; position:relative; overflow:hidden; }
.impact-stats::before{
  content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  background: radial-gradient(circle, rgba(37,99,235,0.16), transparent 70%);
  top:-220px; right:-160px;
}
.impact-stats__grid{
  position:relative; z-index:1; display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; margin-top:50px;
}
.impact-stats__item{
  text-align:center; padding:34px 14px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
}
.impact-stats__item .stat__num{ color:#fff; font-size: clamp(28px,3vw,38px); }
.impact-stats__label{ display:block; margin-top:8px; color: rgba(255,255,255,0.6); font-size:13px; font-weight:600; }

/* ---------- NEW 8: OUR JOURNEY ---------- */
.journey{ padding:140px 0 100px; background: linear-gradient(180deg, #EEF4FF, var(--bg)); overflow:hidden; }
.journey-track-wrap{ margin-top:20px; }
.journey-track{ display:flex; gap:24px; overflow-x:auto; padding:10px 32px 30px; scroll-snap-type: x proximity; }
.journey-track::-webkit-scrollbar{ height:6px; }
.journey-track::-webkit-scrollbar-thumb{ background: rgba(37,99,235,0.25); border-radius:10px; }
.journey-item{
  flex:0 0 240px; scroll-snap-align:start; background:#fff; border-radius: var(--radius-md);
  padding:16px; box-shadow: var(--shadow-card); border:1px solid rgba(7,27,58,0.05);
}
.journey-item img{ width:100%; height:150px; object-fit:cover; border-radius:12px; margin-bottom:14px; }
.journey-item__year{ display:block; font-weight:800; color: var(--royal); font-size:14px; margin-bottom:6px; }
.journey-item p{ font-size:13.5px; color: var(--slate-soft); }

/* ---------- NEW 9: MEDIA GALLERY ---------- */
.media-wall{ padding:140px 0; background: var(--bg); }
.media-wall__feature{
  display:block; width:100%; border-radius: var(--radius-lg); overflow:hidden;
  margin: 50px 0 22px; box-shadow: var(--shadow-card);
}
.media-wall__feature img{ width:100%; height: 56vh; min-height:360px; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.media-wall__feature:hover img{ transform: scale(1.03); }
.media-wall__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.media-wall__item{ border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); }
.media-wall__item img{ width:100%; height:200px; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.media-wall__item:hover img{ transform: scale(1.08); }

/* ---------- NEW 10: FINAL TRUST SECTION ---------- */
.final-trust{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.final-trust__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.final-trust__scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,27,58,0.55), rgba(7,27,58,0.82)); }
.final-trust__inner{ position:relative; z-index:1; text-align:center; padding: 0 24px; max-width:760px; }
.final-trust__quote{
  font-family: var(--font-accent); font-style:italic; color:#fff;
  font-size: clamp(26px,4vw,44px); line-height:1.35; margin-bottom:38px;
}
.final-trust__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.final-trust .btn--ghost{ background: rgba(255,255,255,0.12); color:#fff; border-color: rgba(255,255,255,0.3); }
.final-trust .btn--ghost:hover{ background: rgba(255,255,255,0.2); }

/* ---------- SHARED LIGHTBOX ---------- */
.lightbox{
  position: fixed; inset:0; z-index: 3000; display:flex; align-items:center; justify-content:center;
  background: rgba(4,12,28,0.92); backdrop-filter: blur(10px);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
  flex-direction:column; gap:18px; padding:40px;
}
.lightbox.is-open{ opacity:1; pointer-events:all; }
.lightbox__img{
  max-width: min(900px, 92vw); max-height:72vh; border-radius: var(--radius-md);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
  transform: scale(0.96); transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__img{ transform: scale(1); }
.lightbox__caption{ color: rgba(255,255,255,0.75); font-size:14px; text-align:center; }
.lightbox__close{
  position:absolute; top:26px; right:26px; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;
  transition: background .3s;
}
.lightbox__close:hover{ background: rgba(255,255,255,0.2); }
.lightbox__close i{ width:20px; height:20px; color:#fff; }
.lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%); width:52px; height:52px; border-radius:50%;
  background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;
  transition: background .3s;
}
.lightbox__nav:hover{ background: rgba(255,255,255,0.2); }
.lightbox__nav i{ width:22px; height:22px; color:#fff; }
.lightbox__nav--prev{ left:26px; }
.lightbox__nav--next{ right:26px; }

/* ---------- NEW SECTIONS — RESPONSIVE ---------- */
@media (max-width: 1080px){
  .press__grid{ grid-template-columns: 1fr 1fr; }
  .press-card--large{ grid-column: span 2; }
  .awards-item{ grid-template-columns: 200px 1fr; }
  .trustedby-logos{ grid-template-columns: repeat(3,1fr); }
  .trustedby-photos{ grid-template-columns: 1fr 1fr; }
  .impact-grid{ grid-template-columns: repeat(2, 1fr); }
  .impact-card--wide{ grid-column: span 2; }
  .mentor-full__grid{ grid-template-columns: 1fr; }
  .mentor-full__portrait{ max-width:320px; margin:0 auto; }
  .impact-stats__grid{ grid-template-columns: repeat(3, 1fr); }
  .media-wall__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .press__grid{ grid-template-columns: 1fr; }
  .press-card--large{ grid-column: span 1; }
  .awards-item{ grid-template-columns: 1fr; }
  .awards-item__media img{ height:200px; }
  .trustedby-logos{ grid-template-columns: repeat(2,1fr); }
  .trustedby-photos{ grid-template-columns: 1fr; }
  .impact-grid{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .impact-card--tall, .impact-card--wide{ grid-column: span 1; grid-row: span 1; }
  .impact-stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .media-wall__grid{ grid-template-columns: 1fr 1fr; }
  .lightbox__nav{ width:42px; height:42px; }
  .lightbox__nav--prev{ left:10px; }
  .lightbox__nav--next{ right:10px; }
}
/* ==========================================================================
   BOOK FREE ASSESSMENT MODAL
   Namespaced with "am-" (assessment modal) to avoid collisions with the
   existing .modal (ecosystem) component.
   ========================================================================== */

.am-overlay{
  position: fixed; inset:0; z-index: 4000;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  background: rgba(4,10,24,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity:0; pointer-events:none;
  transition: opacity .4s var(--ease);
}
.am-overlay.is-open{ opacity:1; pointer-events:all; }

.am-modal{
  position:relative; width:100%; max-width: 640px; max-height: min(88vh, 860px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background: linear-gradient(180deg, rgba(15,32,64,0.92), rgba(7,17,38,0.96));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.65), 0 0 80px -20px rgba(56,189,248,0.25);
  padding: clamp(28px, 4vw, 48px);
  transform: translateY(28px) scale(0.97);
  opacity:0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.am-overlay.is-open .am-modal{ transform: translateY(0) scale(1); opacity:1; }

.am-modal::-webkit-scrollbar{ width:8px; }
.am-modal::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius:10px; }

.am-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: background .3s, transform .3s;
}
.am-close:hover{ background: rgba(255,255,255,0.16); transform: rotate(90deg); }
.am-close i{ width:18px; height:18px; }

/* ---------- form head ---------- */
.am-head{ margin-bottom:28px; padding-right:40px; }
.am-head .eyebrow{ color: var(--cyan); }
.am-head h2{ color:#fff; font-size: clamp(24px, 3vw, 30px); margin: 10px 0 8px; }
.am-head p{ color: rgba(255,255,255,0.6); font-size:14.5px; }

/* ---------- form fields ---------- */
.am-form{ display:flex; flex-direction:column; gap:20px; }
.am-field{ display:flex; flex-direction:column; gap:8px; }
.am-field label{ font-size:13px; font-weight:700; color: rgba(255,255,255,0.85); letter-spacing:0.01em; }
.am-field label em{ font-style:normal; font-weight:500; color: rgba(255,255,255,0.4); }

.am-field input[type="text"],
.am-field input[type="email"],
.am-field input[type="tel"],
.am-field select,
.am-field textarea{
  width:100%; font-family: var(--font-body); font-size:14.5px; color:#fff;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.am-field textarea{ resize: vertical; min-height:90px; font-family: var(--font-body); }
.am-field input::placeholder, .am-field textarea::placeholder{ color: rgba(255,255,255,0.35); }
.am-field input:focus, .am-field select:focus, .am-field textarea:focus{
  outline:none; border-color: var(--cyan); background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.14);
}
.am-field select{ appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:40px;
}
.am-field select option{ background: #0A2550; color:#fff; }

.am-phone-row{ display:flex; gap:10px; }
.am-phone-row select{ flex: 0 0 108px; padding-left:12px; padding-right:32px; }
.am-phone-row input{ flex:1; }

.am-error{
  font-size:12px; font-weight:600; color:#FCA5A5; min-height:0;
  display:none;
}
.am-field.is-invalid input,
.am-field.is-invalid select,
.am-field.is-invalid textarea{ border-color:#F87171; box-shadow: 0 0 0 4px rgba(248,113,113,0.12); }
.am-field.is-invalid .am-error{ display:block; }

/* ---------- chips (services + contact method) ---------- */
.am-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.am-chip{ position:relative; cursor:pointer; }
.am-chip input{ position:absolute; opacity:0; width:0; height:0; }
.am-chip span{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75); font-size:13.5px; font-weight:600;
  transition: all .3s var(--ease);
}
.am-chip span i{ width:14px; height:14px; }
.am-chip input:checked + span{
  background: var(--grad-primary); border-color: transparent; color:#fff;
  box-shadow: 0 8px 20px -6px rgba(37,99,235,0.55);
}
.am-chip input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }
.am-chip:hover span{ border-color: rgba(56,189,248,0.5); }

/* ---------- consent ---------- */
.am-consent{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.am-consent input{ position:absolute; opacity:0; width:0; height:0; }
.am-consent__box{
  flex-shrink:0; width:22px; height:22px; border-radius:7px; margin-top:1px;
  border:1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  transition: all .25s var(--ease);
}
.am-consent__box i{ width:14px; height:14px; color:#fff; opacity:0; transform: scale(0.5); transition: all .2s var(--ease); }
.am-consent input:checked + .am-consent__box{ background: var(--grad-primary); border-color: transparent; }
.am-consent input:checked + .am-consent__box i{ opacity:1; transform: scale(1); }
.am-consent input:focus-visible + .am-consent__box{ outline:2px solid var(--cyan); outline-offset:2px; }
.am-consent__text{ font-size:13.5px; color: rgba(255,255,255,0.75); line-height:1.5; }
.am-field--consent .am-error{ margin-left:34px; }

/* ---------- submit button ---------- */
.am-submit{
  width:100%; justify-content:center; margin-top:6px; position:relative;
}
.am-submit__spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation: amSpin .7s linear infinite;
}
.am-submit.is-loading .am-submit__label{ opacity:0.6; }
.am-submit.is-loading .am-submit__spinner{ display:inline-block; }
@keyframes amSpin{ to{ transform: rotate(360deg); } }

/* ---------- success view ---------- */
.am-view--success{ display:flex; align-items:center; justify-content:center; min-height:380px; }
.am-success{ text-align:center; padding: 20px 10px; }
.am-success__icon{ display:inline-flex; margin-bottom:22px; }
.am-success__ring{ stroke: rgba(16,185,129,0.25); }
.am-success__check{
  stroke: var(--emerald);
  stroke-dasharray: 48; stroke-dashoffset:48;
  animation: amCheckDraw .5s .35s var(--ease) forwards;
}
.am-success__ring{
  stroke-dasharray: 226; stroke-dashoffset:226;
  animation: amRingDraw .6s var(--ease) forwards;
}
@keyframes amRingDraw{ to{ stroke-dashoffset:0; } }
@keyframes amCheckDraw{ to{ stroke-dashoffset:0; } }
.am-success h2{ color:#fff; font-size:26px; margin-bottom:10px; }
.am-success p{ color: rgba(255,255,255,0.65); font-size:15px; margin-bottom:28px; }
.am-success__close{ background: rgba(255,255,255,0.08); color:#fff; border-color: rgba(255,255,255,0.2); }
.am-success__close:hover{ background: rgba(255,255,255,0.16); }

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .am-overlay{ padding:0; }
  .am-modal{ max-width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
  .am-phone-row{ flex-direction:column; }
  .am-phone-row select{ flex: 0 0 auto; width:100%; }
}