/* ─── global colour tokens (copied from therapistss.css) ─── */
:root{
  --blue:#1e40ff;
  --purple:#7c3aed;
  --black:#0f172a;
  --white:#f8fafc;
  --bubble-radius:18px;   /* still handy for rounded cards */
  --nav-h: 56px;
  --hero-x-desktop: 42%;  /* move subject LEFT by using a value < 50%  */
  --hero-x-mobile: 58%;   /* keep centered on phones */
  color-scheme: dark;  /* hint to the browser to render UI dark */
}

/* ─── base page colours & typography ─── */
html,body{
  margin:0;
  color:var(--white);
  font:16px/1.45 "Inter",system-ui,sans-serif;

    /* Midnight + teal aurora (cooler, deeper base) */
  background:
    radial-gradient(1400px 800px at 10% -10%, rgba(20,184,166,.22), transparent 60%), /* teal glow */
    radial-gradient(1200px 700px at 95%   0%, rgba(124,58,237,.22), transparent 60%), /* purple glow */
    conic-gradient(from 200deg at 22% 24%, rgba(59,130,246,.16),   transparent 32% 82%, rgba(59,130,246,.08) 0), /* blue swirl */
    conic-gradient(from -60deg at 78% 18%, rgba(20,184,166,.14),   transparent 28% 78%, rgba(20,184,166,.06) 0), /* teal swirl */
    linear-gradient(180deg, #0b1226 0%, #0a1020 100%); /* deep base */

  /* keep layers anchored for subtle motion */
  background-attachment: fixed, fixed, fixed, fixed, scroll;
  background-position:
    0% 0%, 100% 0%, 22% 24%, 78% 18%, 0 0;
  background-size:
    auto, auto, 220% 220%, 220% 220%, auto;

  animation: bgFloat 28s ease-in-out infinite alternate;
}

/* subtle drift of the swirls + glows */
@keyframes bgFloat{
  0%{
    background-position:
      0%   0%,
      100% 0%,
      18%  22%,
      82%  18%,
      0    0;
  }
  50%{
    background-position:
      -6%   3%,
      106% -2%,
      22%  18%,
      78%  22%,
      0    0;
  }
  100%{
    background-position:
      0%   2%,
      100% 4%,
      16%  26%,
      84%  14%,
      0    0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html,body{ animation:none; }
}

/* Brand hero (dark, full-screen, matches site gradient) */
#hero.hero-dark{
  position: relative;
  min-height: calc(100svh - var(--nav-h,56px));  /* full screen minus fixed nav */
  padding-top: var(--nav-h,56px);                /* keep content clear of nav */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background: transparent;                       /* use the global living bg */
  color: var(--white);
}


/* Auth pages: force white checkboxes (Login + Subscribe) */
.login-page input[type="checkbox"]{
  accent-color: #fff;   /* white box, system tick */
}


/* subtle extra glow so the hero feels intentional */
#hero.hero-dark::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1100px 650px at 88% 20%, rgba(30,64,255,.16), transparent 60%);
  pointer-events:none;
}

/* badge tuned for dark surface */
#hero.hero-dark .hero-badge{
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.hero-inner{
  position: relative;
  z-index: 1;
  width: min(100%, 720px);   /* hard cap */
  margin: 0 auto;            /* center the gate */
  padding: 0 1.5rem;         /* default side padding */
  animation: none;
}
#hero .hero-cta{
  width: 100%;
  max-width: 100%;          /* never wider than .hero-inner */
  margin-inline: auto;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;   /* include any padding in the width */
}
#hero h1{
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.15; margin: .1rem 0 .6rem;
}
#hero p{
  color:#cbd5e1; margin:0 0 1.1rem;
}
.hero-cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin: .4rem 0 1rem; }
.hero-badges{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
  list-style:none; margin:0; padding:0; opacity:.9;
}
.hero-badges li{
  padding:.4rem .7rem; border-radius:9999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  font-size:.9rem;
}




#hero h1{
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1.15;
  margin:.1rem 0 .6rem;
}

/* — page-specific hero for auth pages — */
#hero.compact{
  min-height:30vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:3rem;
}

.hero-inner{
  position:relative;
  z-index:1;
  padding:0 1.5rem;
}

.btn-primary{
  display:inline-block;padding:1rem 2.2rem;font-weight:600;border-radius:9999px;
  background:var(--white);color:var(--black);text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.35);}
.btn-primary:active{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.4);}


#hero .hero-ctaWrap{
  width: 100%;
  box-sizing: border-box;
  display: grid;
  justify-items: center;     /* center the row inside the wrapper */
}

/* Phones + narrow screens: stack CTA and add real side padding */
@media (max-width: 540px){

  /* row padding is symmetric and safe-area aware */
  #hero .hero-cta{
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
    box-sizing: border-box;
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* stronger selector so overrides always win */
  #hero .hero-cta .btn-primary,
  #hero .hero-cta .btn-secondary{
    display: block;
    width: 100%;
    max-width: 260px;      /* fits comfortably with the new padding */
    margin: 0 auto;
    padding: .6rem .1rem;
    
    font-size: .9rem;
  }

  /* keep the heading comfortable on very small widths */
  #hero h1{
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
}

/* brief glow when a fresh recap is added */
#notesList li.flash{
  background:linear-gradient(90deg,#fde047,#facc15);   /* soft yellow */
  color:#000;
  transition:background .6s ease;
}



/* ── SITE HEADER ───────────────────────────────── */
:root { --nav-h: 72px; } /* taller bar */

.site-nav{
  position: absolute; top:0; left:0; right:0;   /* moves with the hero */
  z-index: 10005;
  background: transparent;
  backdrop-filter: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: .85rem 1.5rem;
}
/* becomes fixed AFTER the hero */
.site-nav.is-sticky{
  position: fixed; top:0; left:0; right:0;
  background: rgba(9,12,26,.55);
  backdrop-filter: blur(8px);
}

/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 1rem;

  /* make z-index actually apply, then put it above the overlay */
  position: relative;
  z-index: 10002;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 26px;
  background: var(--white);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s 
}

/* Hamburger open state (optional animation) */
.hamburger.active span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.site-nav a.logo{
  grid-column: 1;
  justify-self: start;
  color: var(--white);
  text-decoration: none;
  font-family: "Nunito","Quicksand","Segoe UI Rounded",ui-rounded,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight: 900;                         /* thicker */
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);  /* smaller than before */
  letter-spacing: .002em;
  text-rendering: optimizeLegibility;
}

.nav-menu{
  grid-column: 2;
  justify-self: center;
  list-style: none;
  display: flex; align-items: center;
  gap: 3rem;
  margin: 0; padding: 0;
}
.site-nav a.nav-link{
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .25rem 0;                 /* no pill; just text */
  transition: opacity .15s ease;
}
.site-nav a.nav-link:hover{ opacity: .85; }

/* CTA lives inside the centered .nav-menu now */
.nav-cta{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius:10px;                     /* a bit squarer */
  background:#fff;
  color:#000;
  text-decoration:none;
  font-weight:700;                        /* less “bubbly” */
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .15s, box-shadow .15s;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.3); }
/* Desktop: hide Subscribe link in the header row */
.nav-menu .subscribe-link{ display:none; }
/* Mobile styles */
@media (max-width: 1150px) {
  /* Show hamburger on mobile */
  .hamburger{
    display: flex;
    grid-column: 3;            /* rightmost header column */
    justify-self: end;
    margin: 0 max(8px, env(safe-area-inset-right)) 0 0;
    padding: 0;

    /* ensure it sits above the portalized .nav-menu (z=10000) */
    position: relative;
    z-index: 10002;
    pointer-events: auto;
  }

  /* when menu is open, pin the X to the viewport top-right */
  .hamburger.active{
    position: fixed;
    top: 12px;
    right: max(12px, env(safe-area-inset-right));
  }
  /* Make CTA look good in the mobile overlay */
  .nav-menu .nav-cta{
    display:block;
    width:100%;
    margin-top:.75rem;
    padding:.9rem 1rem;
    border-radius:14px;
    background:#fff;
    color:#000 !important;
    text-align:center;
    box-shadow:0 6px 14px rgba(0,0,0,.3);
  }
  
  /* Full-screen overlay menu on mobile — span entire grid + viewport */
  .nav-menu{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; /* beat any grid constraints */
    height: 100svh;
    width: 100dvw;              /* dynamic viewport, avoids iOS gaps */
    max-width: 100dvw;
    box-sizing: border-box;

    /* escape the center column of the header grid */
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;

    background: rgba(15,23,42,.96);
    backdrop-filter: blur(8px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: calc(var(--nav-h,72px) + 1rem)
            clamp(1rem, 4vw, 1.5rem)
            2rem;
    z-index: 998;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  

  .nav-menu li {
    width: 100%;
    margin: 0.5rem 0;
  }

  /* make dropdown trigger look identical to other items in the mobile panel */
  .nav-menu .nav-link,
  .nav-menu .nav-btn,
  .nav-menu .nav-drop{
    background: none !important;
    border: none !important;
    padding: 1rem 0 !important;
    width: 100%;
    text-align: left;
    font-size: 1.3rem !important;
    color: #fff !important;
    opacity: 1;
    box-shadow: none;
  }
  .nav-menu .nav-link:hover,
  .nav-menu .nav-btn:hover,
  .nav-menu .nav-drop:hover{
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }
  /* Mobile overlay: show Subscribe, hide Free-trial CTA */
  .nav-menu .subscribe-link{ display:block; }
  .nav-cta{ display:none !important; }
}

body { scroll-padding-top: var(--nav-h); }


/* ── TOS checkbox layout ───────────────────── */
.tos-group{
  margin: 0.9rem 0 1.2rem;
}
.tos-label{
  font-size: 1rem;                 /* darker, larger text */
  color: #111;                     /* solid black */
  user-select: none;
}
.tos-group input[type=checkbox]{
  transform: scale(1.25);
  accent-color:#fff;          /* white so it isn’t mistaken for “off” on dark UI */
  margin-right: 0.5rem;
}

.login-page main > div{
  color-scheme: light;          /* fixes black-looking unchecked boxes */
}

/* Keep our desired white accent when they ARE checked */
.login-page main > div input[type="checkbox"],
.login-page .tos-group input[type="checkbox"]{
  accent-color: #fff;
}

.tos-link{
  color:#2563eb;                   /* bright link blue */
  text-decoration:underline;
}
/* force dark text for the TOS sentence */
.tos-group label{
  color:#111 !important;      /* solid near‑black overrides form default */
}

/* (optional) keep link blue but darker for contrast */
.tos-group .tos-link{
  color:#2563eb;
}

#subscription-form input[type="email"],
#subscription-form input[type="text"],
#subscription-form input[type="password"]{
  width: 100%;          /* stretch to the cell */
  box-sizing: border-box;/* include padding + border in that width */
}

/* baseline style for nav buttons used on auth pages */
.site-nav a.nav-btn{
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .25rem 0;
  transition: opacity .15s ease;
}
.site-nav a.nav-btn:hover{ opacity: .85; }

/* ── Auth / non-home pages header skin ───────────────── */
.login-page .site-nav{
  position: fixed; top:0; left:0; right:0;
  background: rgba(15,23,42,.80);         /* translucent black */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* white text for links on those pages */
.login-page .site-nav a.logo,
.login-page .site-nav a.nav-link,
.login-page .site-nav a.nav-btn{
  color: #fff;
}

/* Allow vertical scroll on auth pages; prevent sideways/off-screen */
.login-page, .login-page body{ overflow-x: hidden; }

@media (max-width: 600px){
  /* keep content clear of the fixed translucent header */
  .login-page main{
    min-height: calc(100vh - var(--nav-h,72px));
    overflow: visible !important;   /* page scrolls, not the inner panel */
  }
}
/* demo strip */
#demoPanel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
  padding:4rem 1.7rem;
  background:#131b2b;              /* matches the card strip */
}

#demoPanel img{flex:1 1 320px;border-radius:22px;max-width:480px;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.5);}
#demoPanel div{flex:1 1 260px;min-width:260px;}
#demoPanel h2{margin:.2rem 0 .6rem;font-size:1.6rem;}

/* FAQ accordion */
#faq{padding:3.5rem 1.7rem;}
#faq h2{text-align:center;margin-bottom:1.3rem;font-size:1.7rem;}
#faq details{background:rgba(255,255,255,.05);border-radius:14px;margin:.6rem 0;padding:1rem 1.4rem;}
#faq summary{cursor:pointer;font-weight:600;list-style:none;position:relative;padding-right:1.5rem;}
#faq summary::after{content:'+';position:absolute;right:0;transition:transform .2s;}
#faq details[open] summary::after{content:'–';transform:rotate(90deg);}
#faq p{margin:.8rem 0 0;font-size:.95rem;line-height:1.55;opacity:.9;}

#faq {
  max-width: 900px;
  margin: 6rem auto;
  padding: 2rem;
  background: transparent;  /* unify with page background */
  border-radius: 0;
}

#faq h2 {
  font-size: 2.5rem;
  color: var(--white);
  margin-bottom: 2rem;
  text-align: center;
}

.faq-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
}

.faq-question svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  padding: 0 1.5rem;
  overflow: hidden;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  max-height: 500px;
  opacity: 1;
  padding: 0 1.5rem 1.5rem;
}
/* ─── Auth page info block ───────────────────────────── */
.plan-details{
  width:clamp(240px, 95%, 480px);       /* fluid 240-480 px */
  margin:.4rem auto -1rem;
  padding:.65rem 1.25rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  color:var(--white);
  font-size:clamp(.8rem, 2.5vw, .95rem);
}
.plan-details h3{margin:.1rem 0 .6rem;font-size:1.1rem;}
.plan-details ul{margin:0 0 .8rem 1.1rem;padding:0;line-height:1.45;}
.plan-details li{margin-bottom:.35rem;}
.plan-details .trust-copy{opacity:.85;line-height:1.4;}



/* footer */
#siteFooter {
  background: transparent;
  padding: 2rem;
  text-align: center;
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,.08); /* optional subtle divider */
}

#siteFooter small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}


/* ── New homepage body ─────────────────────────────────── */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }




/* STEPS */
#steps{ padding: clamp(2.4rem, 5vw, 4rem) 0; }
#steps h2{ text-align:center; margin:0 0 1.2rem; font-size: clamp(1.6rem, 3.5vw, 2rem); }
#steps .steps{ list-style:none; padding:0; margin:0 auto; max-width: 820px; }
#steps .steps li{
  display:grid; grid-template-columns: 44px 1fr; gap: 1rem;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: .9rem 1rem; margin:.6rem 0;
}
#steps .num{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background: rgba(124,58,237,.15);
  border:1px solid rgba(124,58,237,.5); font-weight:700;
}
#steps h4{ margin:.1rem 0 .25rem; font-size:1.05rem; }
#steps p{ margin:0; color:#b7c3d6; }

/* ── New image-driven sections ───────────────────────── */

/* generic secondary button (outside old hero) */
.btn-secondary{
  display:inline-block;
  padding:1rem 2rem;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.28);
  color:var(--white);
  text-decoration:none;
  transition: border-color .15s, background .15s, transform .15s;
}
.btn-secondary:hover{
  border-color: var(--purple);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}



/* ── Global languages showcase ───────────────────────── */
#globalLanguages{
  padding: clamp(2.4rem, 6vw, 4.8rem) 0;
  background: transparent;   /* use the page gradient */
  border-top: 0;
  border-bottom: 0;
}
#globalLanguages .langGrid{
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* copy | image */
  gap: 1.2rem;
  align-items: center;
}
#globalLanguages .langCopy h2{
  margin:.2rem 0 .5rem;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.1;
}
#globalLanguages .langCopy p{
  margin:0 0 1rem;
  color:#cbd5e1;
  max-width: 60ch;
}
.langChips{
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
  padding: 0; margin: .4rem 0 1.1rem; list-style: none;
}
.langChips li{
  padding: .45rem .7rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .92rem;
  white-space: nowrap;
  color: #e5e7eb;
}
.langWorld{
  margin:0; border-radius: 22px; overflow: hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  background: rgba(255,255,255,.03);
}
.langWorld img{
  display:block; width:100%; height:100%;
  aspect-ratio: 4/3;           /* keeps height consistent */
  object-fit: cover;           /* ✅ fills the frame at any zoom */
}

/* stack on phones */
@media (max-width: 1150px){
  #globalLanguages .langGrid{ grid-template-columns: 1fr; }
  .langWorld img{ aspect-ratio: 16/10; } /* wider crop on mobile */
}

/* ── Privacy band (slim, non-promo) ─────────────────── */
#privacyBand{
  padding: 1.2rem 0;
  background: transparent;   /* let the global gradient flow */
  border-top: 0;
  border-bottom: 0;
}
#privacyBand .privRow{
  display:flex; align-items:baseline; justify-content:center; gap:.8rem;
  text-align:center; flex-wrap:wrap;
}
#privacyBand h3{ margin:0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); }
#privacyBand p{ margin:0; color:#dbe3f3; opacity:.9; }


/* clickable chips */
.langChips li{
  cursor: pointer;
  user-select: none;
  transition: transform .12s, background .15s, border-color .15s;
}
.langChips li:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.langChips li.active{
  background: rgba(124,58,237,.22);
  border-color: rgba(124,58,237,.65);
}

/* simulated dashboard card */
.langSim{
  margin:0;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.langSim .simHeader{
  display:flex; align-items:center; gap:.4rem;
  height: 42px; padding: 0 .75rem;
  background: rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.langSim .simHeader .dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.35);
}
.langSim .simHeader .simTitle{
  margin-left:.4rem; font-size:.9rem; opacity:.9;
}
.langSim .simBody{
  padding: 1rem;
  background: radial-gradient(800px 400px at 100% 0%, rgba(124,58,237,.08), transparent 60%),
              radial-gradient(800px 400px at 0% 100%, rgba(30,64,255,.08), transparent 60%);
}
.langSim .bubble{
  max-width: 85%;
  padding: .7rem .85rem;
  border-radius: var(--bubble-radius);
  margin: .35rem 0;
  line-height: 1.45;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.langSim .bubble.emma{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.langSim .bubble.you{
  background: rgba(124,58,237,.22);
  border:1px solid rgba(124,58,237,.55);
  margin-left: auto;
}
@media (max-width: 900px){
  .langSim .bubble{ max-width: 100%; }
}

/* ── Reveal-on-scroll baseline ───────────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Stagger for "How it works" items */
#steps .steps li{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
#steps.is-visible .steps li{ opacity: 1; transform: none; }
#steps.is-visible .steps li:nth-child(1){ transition-delay: .06s; }
#steps.is-visible .steps li:nth-child(2){ transition-delay: .12s; }
#steps.is-visible .steps li:nth-child(3){ transition-delay: .18s; }

/* Dual fade for Global Languages: copy slightly before the sim */
#globalLanguages .langCopy,
#globalLanguages .langSim{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
#globalLanguages.is-visible .langCopy{ opacity:1; transform:none; transition-delay:.05s; }
#globalLanguages.is-visible .langSim { opacity:1; transform:none; transition-delay:.16s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,
  #steps .steps li,
  #globalLanguages .langCopy,
  #globalLanguages .langSim{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ── Intro panel (between hero and steps) ───────────────── */
#introPanel{
  padding: clamp(2.4rem, 6vw, 5rem) 0;
  text-align:center;
  background: transparent; /* we keep the global living gradient */
}
.introWrap{ max-width: 980px; margin: 0 auto; padding: 0 1rem; }
#introPanel h2{
  margin:.2rem 0 .6rem;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.15;
}
#introPanel .introLead{
  margin: 0 auto 1.2rem;
  color:#cbd5e1;
  max-width: 70ch;
  line-height: 1.6;
}
.tickRow{
  display:flex; flex-wrap:wrap; gap: 1.1rem 1.4rem;
  justify-content:center; padding:0; margin: .4rem 0 1.2rem; list-style:none;
}
.tickRow li{
  position:relative; padding-left: 1.6rem; color:#e5e7eb; font-weight:600;
}
.tickRow li::before{
  content:"✓";
  position:absolute; left:0; top:0; line-height:1;
  width:1rem; height:1rem; display:inline-grid; place-items:center;
  border-radius:50%;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  font-size:.8rem;
}
.introCta{ margin-top: .2rem; }


/* Background video for hero */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: var(--hero-x-desktop, 50%) 50%;  /* bias left on desktop */
  opacity:.92;
  pointer-events:none;
}

/* Keep centered on smaller screens to avoid awkward crops */
@media (max-width: 900px){
  .hero-bg{ object-position: var(--hero-x-mobile, 50%) 50%; }
}

/* Optional: slight bottom fade for readability */
#hero.hero-dark::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
}

/* Make the Languages CTA smaller on phones (no layout changes) */
@media (max-width: 900px){
  #globalLanguages .btn-primary{
    padding: .55rem 1.2rem; /* was 1rem 2.2rem */
    font-size: .85rem;      /* slightly smaller type */
    line-height: 1.1;
  }
}


/* ── Nav dropdowns (desktop + mobile) ─────────────────────────── */
.nav-menu li.has-submenu{ position: relative; }
.nav-menu .nav-drop{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; color:#fff; cursor:pointer;
  font: inherit; padding:.25rem 0;
}
.nav-menu .nav-drop .chev{ display:inline-block; transition:transform .18s; }
.nav-menu li.has-submenu.open .nav-drop .chev{ transform:rotate(90deg); }

.nav-menu .submenu{
  display:none; position:absolute; top: calc(100% + .5rem); left:0;
  min-width: 240px; list-style:none; margin:0; padding:.5rem;
  background: rgba(15,23,42,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.nav-menu li.has-submenu.open > .submenu{ display:block; }
.nav-menu .submenu li a{
  display:block; padding:.55rem .75rem; color:#fff; text-decoration:none;
  border-radius:8px; transition: background .15s;
}
.nav-menu .submenu li a:hover{ background:rgba(255,255,255,.08); }

/* mobile overlay: make submenu inline/indented */
@media (max-width:1150px){
  .nav-menu li.has-submenu{ width:100%; }
  .nav-menu .submenu{
    position: static; display:none; width:100%;
    background: transparent; border:0; box-shadow:none; padding:.25rem 0 .25rem 1rem;
  }
  .nav-menu li.has-submenu.open > .submenu{ display:block; }
}

/* baseline style for dropdown trigger to match nav links */
.site-nav a.nav-btn,
.nav-menu .nav-drop{
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .25rem 0;
  transition: opacity .15s ease;
  background: none; border: 0;    /* keep <button> looking like a link */
  display: inline-flex; align-items: center; gap: .35rem;
}
.site-nav a.nav-btn:hover,
.nav-menu .nav-drop:hover{ opacity: .85; }


/* Remove link underlines inside the mobile overlay */
.nav-menu a,
.nav-menu .nav-btn,
.nav-menu .nav-link {
  text-decoration: none !important;
}

/* Guard against UA states adding it back */
.nav-menu a:link,
.nav-menu a:visited,
.nav-menu a:hover,
.nav-menu a:active,
.nav-menu a:focus {
  text-decoration: none !important;
}