/* ============================================================
   Q-Learn — bold, product-led redesign
   White base, big brand-color blocks, Plus Jakarta Sans,
   line icons, oversized CTAs, broken grid. No emoji, no serif.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-soft: #F6F5FA;
  --ink: #120C1F;
  --ink-2: #4C4658;
  --ink-3: #837C90;
  --line: #E9E7EF;
  --line-2: #D9D5E4;
  --brand: #7C3AED;
  --brand-strong: #6D28D9;
  --brand-deep: #5B21B6;
  --brand-ink: #2E1065;
  --brand-soft: #EDE7FB;
  --brand-soft-2: #E0D6F7;
  --on-brand: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(18,12,31,.05), 0 2px 6px rgba(18,12,31,.04);
  --shadow-md: 0 10px 30px -12px rgba(18,12,31,.16);
  --shadow-lg: 0 30px 60px -24px rgba(18,12,31,.24);
  --shadow-phone: 0 40px 80px -32px rgba(46,16,101,.42);
  --r-btn: 14px;
  --r-card: 22px;
  --r-block: 32px;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

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

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Type ---- */
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.05; font-weight: 800; }
.label { font-size: .82rem; font-weight: 700; color: var(--brand-strong); letter-spacing: 0; margin-bottom: 16px; }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
h2.title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; color: var(--ink); }
.section-head p.sub { margin-top: 16px; font-size: 1.12rem; color: var(--ink-2); font-weight: 500; }

section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }

/* ---- Buttons (oversized, rounded rect) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 1.02rem;
  padding: 17px 30px; border-radius: var(--r-btn); cursor: pointer;
  border: 2px solid transparent; transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(124,58,237,.7); }
.btn-primary:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(124,58,237,.7); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-onbrand { background: #fff; color: var(--brand-deep); }
.btn-onbrand:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.25); }
.btn-ghost-onbrand { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-onbrand:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .95rem; border-radius: 11px; }

/* ---- Icon chip (line icons in a soft square) ---- */
.ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); flex: none; }
.ico svg { width: 26px; height: 26px; stroke-width: 1.9; }
.ico-sm { width: 44px; height: 44px; border-radius: 13px; }
.ico-sm svg { width: 22px; height: 22px; }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 900; padding: 16px 0; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.brand-name { font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; }
/* margin-left:auto rather than relying on space-between: the burger used to be
   the only other child and was hidden on desktop, so the menu sat on the right.
   .nav-actions is visible at every width, which would otherwise leave the menu
   stranded in the middle. */
.nav-menu { display: flex; align-items: center; gap: 30px; list-style: none; margin-left: auto; }
.nav-menu a { font-size: .96rem; font-weight: 600; color: var(--ink-2); transition: color .2s; }
.nav-menu a:hover { color: var(--ink); }
.nav-menu .btn-primary { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; background: none; border: 0; width: 42px; height: 42px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; cursor: pointer; }
.nav-burger span { width: 23px; height: 2.5px; background: var(--ink); border-radius: 3px; transition: .3s; }
.nav-burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO — split, phone on a bold violet block that breaks the grid
   ============================================================ */
.hero { padding-top: clamp(122px, 15vw, 170px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 48px; align-items: center; }
.hero-h1 { font-size: clamp(2.7rem, 6.4vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.hero-h1 .accent { color: var(--brand); }
.hero p.lead { margin-top: 22px; font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-2); max-width: 31em; font-weight: 500; line-height: 1.6; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust .t { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .92rem; font-weight: 600; }
.hero-trust .t svg { width: 18px; height: 18px; color: var(--brand); stroke-width: 2.2; }

.hero-stage { position: relative; }
.hero-block { background: var(--brand); border-radius: var(--r-block); aspect-ratio: 5 / 5.4; position: relative; overflow: hidden; }
.hero-block::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.14), transparent 60%); }
.hero-block .grid-dots { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); background-size: 22px 22px; }
.hero-phone { position: absolute; width: 62%; left: 50%; top: 52%; transform: translate(-50%,-50%); z-index: 2; filter: drop-shadow(var(--shadow-phone)); border-radius: 30px; }
.hero-phone-2 { position: absolute; width: 40%; right: -6%; bottom: 6%; z-index: 3; filter: drop-shadow(var(--shadow-phone)); border-radius: 22px; }

/* ============================================================
   TOPICS chips
   ============================================================ */
.topics { padding: 40px 0 8px; }
.topics-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip { border: 1.5px solid var(--line-2); border-radius: 999px; padding: 9px 18px; font-size: .92rem; font-weight: 600; color: var(--ink-2); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.about-lead p { margin-top: 20px; font-size: 1.1rem; color: var(--ink-2); font-weight: 500; line-height: 1.62; }
.vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vcard { background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.vcard h3 { margin: 18px 0 8px; font-size: 1.14rem; font-weight: 700; }
.vcard p { font-size: .96rem; color: var(--ink-3); font-weight: 500; line-height: 1.5; }

/* ============================================================
   EXPERIENCES
   ============================================================ */
.exp { background: var(--bg-soft); }
.exp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.exp-row + .exp-row { margin-top: clamp(60px, 8vw, 104px); }
.exp-row--rev .exp-text { order: 2; }
.exp-text h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin-top: 22px; letter-spacing: -.03em; }
.exp-text p { margin-top: 15px; font-size: 1.05rem; color: var(--ink-2); font-weight: 500; line-height: 1.6; max-width: 34em; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tag { font-size: .86rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 8px 15px; border-radius: 10px; }
.exp-media { display: flex; justify-content: center; }
.exp-frame {
  position: relative;
  background: linear-gradient(160deg, var(--brand-soft), var(--bg-soft));
  border: 1.5px solid var(--line); border-radius: var(--r-block);
  padding: clamp(16px, 2.4vw, 28px); width: 100%;
  display: grid; place-items: center; cursor: zoom-in;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.exp-frame:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.exp-row--rev .exp-frame { background: linear-gradient(160deg, var(--brand-soft-2), var(--bg-soft)); }
/* Diagonal renders sit in a near-square canvas — they need roughly twice the
   display width of a portrait render to show the phone at the same size. */
.exp-phone { width: 100%; max-width: 520px; filter: drop-shadow(var(--shadow-phone)); border-radius: 26px; }

/* ============================================================
   BRAND BAND (stats — big violet block)
   ============================================================ */
.band { background: var(--brand); color: #fff; }
.band .label { color: rgba(255,255,255,.85); }
.band h2.title { color: #fff; }
.band .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-bottom: 52px; }
.metric-n { font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }
.metric-label { margin-top: 10px; font-size: .98rem; font-weight: 600; color: rgba(255,255,255,.9); }
.metric-src { margin-top: 5px; font-size: .8rem; color: rgba(255,255,255,.62); font-weight: 500; }
.opps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.opp { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.16); border-radius: var(--r-card); padding: 28px 26px; transition: transform .2s, background .2s; }
.opp:hover { transform: translateY(-4px); background: rgba(255,255,255,.15); }
.opp .ico { background: rgba(255,255,255,.16); color: #fff; margin-bottom: 16px; }
.opp h3 { font-size: 1.28rem; font-weight: 700; margin-bottom: 8px; }
.opp p { font-size: .96rem; color: rgba(255,255,255,.82); font-weight: 500; line-height: 1.55; }

/* ============================================================
   GALLERY
   ============================================================ */
/* Flex rather than grid so a partly-filled last row stays centred */
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.shot { flex: 0 1 calc((100% - 5 * 16px) / 6); min-width: 0; position: relative; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 12px 42px; cursor: zoom-in; transition: transform .2s, box-shadow .2s, border-color .2s; }
.shot:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.shot-img { width: 100%; border-radius: 10px; }
.shot-cap { position: absolute; bottom: 13px; left: 0; right: 0; text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-3); }

/* ============================================================
   STEPS
   ============================================================ */
.steps { background: var(--bg-soft); }
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-block); padding: 34px 30px; text-align: center; transition: transform .2s, box-shadow .2s; }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-n { font-weight: 800; font-size: 1.05rem; color: #fff; background: var(--brand); width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto 22px; }
.step-img { width: min(280px, 100%); margin: 0 auto 22px; filter: drop-shadow(0 22px 40px rgba(46,16,101,.24)); border-radius: 20px; }
.step h3 { font-size: 1.34rem; font-weight: 800; margin-bottom: 11px; letter-spacing: -.02em; }
.step p { font-size: .98rem; color: var(--ink-2); font-weight: 500; line-height: 1.55; }

/* ============================================================
   FEATURES (bento with line icons)
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile { background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 30px 28px; transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.tile h3 { font-size: 1.16rem; font-weight: 700; margin: 16px 0 8px; }
.tile p { font-size: .96rem; color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.tile--feature { grid-column: span 2; grid-row: span 2; background: var(--brand); color: #fff; border-color: transparent; justify-content: space-between; }
.tile--feature h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 800; }
.tile--feature p { color: rgba(255,255,255,.86); font-size: 1.02rem; }
.tile--feature .ico { background: rgba(255,255,255,.16); color: #fff; }
.tile--feature .tile-media { margin-top: 24px; align-self: center; }
.tile--feature .tile-media img { width: 172px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); border-radius: 20px; }
.tile--wide { grid-column: span 2; }

/* ============================================================
   CTA (violet block)
   ============================================================ */
.cta { padding-bottom: clamp(80px, 10vw, 140px); }
.cta-block { background: var(--brand); color: #fff; border-radius: var(--r-block); padding: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.cta-block::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 90% 0%, rgba(255,255,255,.12), transparent 55%); pointer-events: none; }
.cta-text { position: relative; z-index: 1; }
.cta-text .label { color: rgba(255,255,255,.85); }
.cta-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.cta-text p { margin-top: 16px; color: rgba(255,255,255,.85); font-size: 1.05rem; font-weight: 500; line-height: 1.55; }
.cta-text .platform-note { margin-top: 14px; color: #fff; font-weight: 600; font-size: .98rem; }
/* ============================================================
   SIGNUP MODAL + ATTENTION CUES
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(18,12,31,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
/* Animation rather than transition, to match the React implementation on
   QF-Learn, which mounts the modal already-open. */
.modal-overlay.open { animation: modal-fade .22s ease both; }
@keyframes modal-fade { from { opacity: 0; } }
.modal-card {
  position: relative; width: 100%; max-width: 520px;
  background: var(--brand); color: #fff;
  border-radius: var(--r-block); padding: clamp(28px, 4vw, 40px);
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal-card { animation: modal-rise .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes modal-rise { from { transform: translateY(14px) scale(.97); } }
.modal-card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-block);
  background: radial-gradient(90% 120% at 90% 0%, rgba(255,255,255,.14), transparent 55%);
  pointer-events: none;
}
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.24);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background .2s;
}
.modal-close:hover { background: rgba(255,255,255,.26); }
.modal-close svg { width: 19px; height: 19px; }
/* Inside the modal the form is the whole card, so drop the divider */
.modal-card .signup { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.modal-card .signup h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); padding-right: 44px; }

/* Floating shortcut — appears once the hero is out of view */
.signup-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  display: none; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  padding: 14px 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--brand); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(124,58,237,.75);
  transition: transform .18s ease, background .18s ease;
}
.signup-fab svg { width: 18px; height: 18px; }
.signup-fab:hover { background: var(--brand-strong); transform: translateY(-2px); }
.signup-fab.show { display: inline-flex; animation: fab-in .45s cubic-bezier(.22,1,.36,1), fab-nudge 1.9s ease-in-out .6s 3; }
@keyframes fab-in { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes fab-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-7px); } 90% { transform: translateY(-3px); } }

/* One-off pulse on the primary CTAs so the entry point is obvious on arrival */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.btn.attn { animation: cta-pulse 1.6s ease-out 3; }

@media (max-width: 560px) {
  .signup-fab { right: 14px; bottom: 14px; padding: 13px 18px; font-size: .9rem; }
  .modal-overlay { padding: 14px; align-items: flex-end; }
  .modal-card { max-height: 88vh; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-fab.show { animation: none; }
  .btn.attn { animation: none; }
  .modal-card, .modal-overlay { transition: none; }
}

/* CTA-section shortcut into the modal */
.cta-join { position: relative; z-index: 1; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1.5px solid rgba(255,255,255,.18); }
.cta-join-note { display: block; margin-top: 12px; font-size: .88rem; color: rgba(255,255,255,.75); font-weight: 500; }

/* ---- Beta signup form (sits on the brand-coloured CTA block) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.signup { position: relative; z-index: 1; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1.5px solid rgba(255,255,255,.18); }
.signup h3 { font-size: 1.2rem; font-weight: 800; }
.signup-lead { margin-top: 6px; margin-bottom: 16px; font-size: .96rem; font-weight: 500; color: rgba(255,255,255,.85); }
.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-input {
  flex: 1 1 210px; min-width: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  padding: 15px 18px; border-radius: var(--r-btn);
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12); color: #fff;
  transition: border-color .16s ease, background .16s ease;
}
.signup-input::placeholder { color: rgba(255,255,255,.6); }
.signup-input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.2); }
.signup-submit { flex: 0 0 auto; }
.signup-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; font-size: .93rem; font-weight: 600; color: rgba(255,255,255,.92); cursor: pointer; }
.signup-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #fff; cursor: pointer; }
.signup-hint { margin-top: 9px; margin-left: 28px; font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.8); }
.signup-consent { margin-top: 13px; font-size: .8rem; color: rgba(255,255,255,.65); }
.signup-status { margin-top: 12px; font-size: .93rem; font-weight: 600; }
.signup-status.is-error { color: #FFDCDC; }
.signup-status.is-success { color: #fff; }
/* Honeypot: off-screen rather than display:none, which some bots skip */
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup[data-state="done"] .signup-row,
.signup[data-state="done"] .signup-check,
.signup[data-state="done"] .signup-hint,
.signup[data-state="done"] .signup-consent { display: none; }
.signup button[disabled] { opacity: .65; cursor: progress; }

.contact-methods { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.contact-card { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.18); border-radius: 15px; padding: 16px 20px; transition: transform .2s, background .2s; }
.contact-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); }
.contact-card .ico-sm { background: rgba(255,255,255,.18); color: #fff; }
.contact-lines { display: flex; flex-direction: column; }
.contact-label { font-size: .8rem; color: rgba(255,255,255,.75); font-weight: 600; }
.contact-value { font-size: 1.02rem; color: #fff; font-weight: 700; }
.contact-note { position: relative; z-index: 1; margin-top: 14px; font-size: .9rem; color: rgba(255,255,255,.8); }

/* ============================================================
   CLICK-TO-ENLARGE AFFORDANCE
   ============================================================ */
.zoomable { cursor: zoom-in; }
.zoom-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: 1.5px solid var(--line-2);
  color: var(--brand-strong); box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.zoom-badge svg { width: 15px; height: 15px; stroke-width: 2.1; }
.shot .zoom-badge { top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 8px; }
.shot .zoom-badge svg { width: 13px; height: 13px; }
.shot:hover .zoom-badge, .exp-frame:hover .zoom-badge { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.08); }
.zoom-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 15px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: .88rem; font-weight: 700; }
.zoom-note svg { width: 15px; height: 15px; stroke-width: 2.1; }
.shot:focus-visible, .exp-frame:focus-visible, .zoomable:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 52px 0 40px; border-top: 1px solid var(--line); }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 11px; }
.foot-brand img { width: 34px; height: 34px; border-radius: 9px; }
.foot-brand span { font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { font-size: .94rem; color: var(--ink-2); font-weight: 600; transition: color .2s; }
.foot-links a:hover { color: var(--brand-strong); }
.foot-base { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-3); font-weight: 500; text-align: center; }

/* ============================================================
   LIGHTBOX (persistent DOM node — display-gated)
   ============================================================ */
.lightbox-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(14,8,24,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox-overlay.active { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 84vh; }
.lightbox-image { max-width: 100%; max-height: 84vh; border-radius: 20px; filter: drop-shadow(0 40px 70px rgba(0,0,0,.5)); }
.lightbox-close, .lightbox-nav { position: absolute; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.24); color: #fff; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.lightbox-close svg, .lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 26px; right: 26px; }
.lightbox-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-hint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .85rem; }
.mobile-hint { display: none; }
/* Single-image groups (e.g. the bento tile) have nothing to page through */
.lightbox-overlay.single .lightbox-nav, .lightbox-overlay.single .lightbox-hint { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .nav-menu {
    position: fixed; top: 0; left: 0; right: 0;
    height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: #fff;
    padding: 88px 28px 30px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform .34s ease, visibility 0s .34s;
    box-shadow: var(--shadow-lg);
  }
  .nav-menu.active { transform: none; visibility: visible; transition: transform .34s ease, visibility 0s; }
  .nav.menu-open { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); }
  .brand, .nav-actions { position: relative; z-index: 2; }
  .nav-menu a { padding: 13px 4px; font-size: 1.06rem; border-bottom: 1px solid var(--line); }
  .nav-menu li:last-child a { border-bottom: 0; }
  .nav-menu .btn { justify-content: center; margin-top: 8px; }
  .nav-burger { display: flex; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .exp-row, .exp-row--rev { grid-template-columns: 1fr; gap: 30px; }
  .exp-row--rev .exp-text { order: 0; }
  .exp-media { order: -1; }
  .exp-text p { max-width: none; }
  .band .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .opps { grid-template-columns: 1fr; }
  .shot { flex-basis: calc((100% - 2 * 16px) / 3); }
  .steps-row { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--feature { grid-column: span 2; grid-row: auto; }
  .tile--wide { grid-column: span 2; }
  .cta-block { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .gallery-grid { gap: 12px; }
  .shot { flex-basis: calc((100% - 12px) / 2); }
  .vcards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile--feature, .tile--wide { grid-column: auto; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; }
  .hero-phone-2 { right: 0; bottom: 4%; width: 38%; }
  .cta-block { padding: 32px 24px; }
  .contact-card { padding: 14px 16px; }
  .contact-value { font-size: .95rem; word-break: break-word; }
  .band .metrics { gap: 24px 18px; }
  .step { padding: 28px 22px; }
  .lightbox-overlay { padding: 16px; }
  .lightbox-content { max-width: 100%; }
  .lightbox-nav { display: none; }
  .lightbox-close { top: 14px; right: 14px; }
  .desktop-hint { display: none; }
  .mobile-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }

/* ============================================================
   LANGUAGE SWITCHER + SCRIPT SUPPORT
   ============================================================ */

/* Plus Jakarta Sans carries no Devanagari, so Hindi needs its own face in
   front of it (loaded only on /hi/ by scripts/build-i18n.mjs). Devanagari has
   taller ascenders and below-baseline matras than Latin at the same size, so
   it also needs more leading or the marks collide with the line above — most
   visibly in the hero headline. */
html[lang="hi"] { --sans: 'Noto Sans Devanagari', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
html[lang="ja"] { --sans: 'Noto Sans JP', 'Plus Jakarta Sans', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; }
html[lang="ko"] { --sans: 'Noto Sans KR', 'Plus Jakarta Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
html[lang="zh-Hans"] { --sans: 'Noto Sans SC', 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

html[lang="hi"] body { line-height: 1.7; }
html[lang="hi"] .hero-h1 { line-height: 1.28; letter-spacing: -0.01em; }
html[lang="hi"] .title, html[lang="hi"] .cta-text h2 { line-height: 1.35; }
html[lang="hi"] .metric-n { line-height: 1.2; }
/* Devanagari has no capital forms — uppercasing does nothing but it does break
   the tracking, so the small-caps labels revert to normal case. */
html[lang="hi"] .label { text-transform: none; letter-spacing: 0; }

/* CJK. The Latin headings use -.02em tracking and a 1.05 line-height, both of
   which are wrong here: CJK glyphs are full-width squares, so negative tracking
   makes them touch, and 1.05 leaves no room between lines of ideographs.
   `line-break: strict` keeps closing brackets and small kana off the start of a
   line, which is what Japanese typesetting expects. */
html[lang="ja"], html[lang="ko"], html[lang="zh-Hans"] { line-break: strict; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 {
  letter-spacing: 0;
  line-height: 1.32;
}
html[lang="ja"] .hero-h1, html[lang="ko"] .hero-h1, html[lang="zh-Hans"] .hero-h1 {
  /* CJK sets far denser than English, so the hero stays large without the
     two-line headline overflowing its block. */
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  letter-spacing: 0;
}
html[lang="ja"] body, html[lang="ko"] body, html[lang="zh-Hans"] body { line-height: 1.75; }
html[lang="ja"] .metric-n, html[lang="ko"] .metric-n, html[lang="zh-Hans"] .metric-n {
  letter-spacing: 0;
  line-height: 1.25;
}
/* Korean does put spaces between words, so it needs the Latin wrapping rule
   that CJK does not. */
html[lang="ko"] .hero-h1, html[lang="ko"] .title { word-break: keep-all; }

/* German compounds (Quantencomputing, Fehlerkorrektur) are long enough to push
   the hero headline past its column on narrow screens. Let the browser
   hyphenate rather than letting one word overflow. */
/* Long words must never widen the page. German compounds are the worst case
   but Portuguese and Turkish hit it too, so this is applied to every locale
   rather than patched language by language. `break-word` only acts on words
   that would otherwise overflow, so normal text is untouched. */
h1, h2, h3, p, .lead, .metric-label, .chip, .tag, .shot-cap { overflow-wrap: break-word; }

html[lang="de"] .hero-h1, html[lang="de"] .title, html[lang="de"] h3,
html[lang="de"] .metric-label, html[lang="de"] .lead, html[lang="de"] p {
  /* `hyphens` is the nice outcome and real browsers ship German patterns, but
     it is not guaranteed, so `overflow-wrap: anywhere` is the backstop —
     unlike `break-word` it also feeds min-content sizing, which is what
     actually stops the compound from pushing the page wider than the
     viewport. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

.lang { position: relative; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px 9px;
  background: none; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--sans); font-size: .86rem; font-weight: 700;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.lang-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-caret { width: 13px; height: 13px; opacity: .7; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-current { letter-spacing: .02em; }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }

/* Search field */
.lang-search { position: relative; display: flex; align-items: center; padding: 2px 2px 6px; }
.lang-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.lang-search-input {
  width: 100%; padding: 9px 10px 9px 33px;
  font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--ink);
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 9px;
  outline: none; transition: border-color .16s, background .16s;
}
.lang-search-input::placeholder { color: var(--ink-3); font-weight: 500; }
.lang-search-input:focus { background: #fff; border-color: var(--brand); }

.lang-empty { padding: 12px; text-align: center; font-size: .9rem; color: var(--ink-3); font-weight: 500; }

/* The scrolling list. Two affordances make it obvious there is more below:
   a scrollbar that is always drawn (macOS and iOS hide overlay scrollbars
   until you already scroll, which is exactly too late), and a fade over the
   bottom edge that clears once the end is reached. */
.lang-list {
  list-style: none; margin: 0; padding: 0;
  max-height: min(46vh, 310px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.lang-list::-webkit-scrollbar { width: 10px; }
.lang-list::-webkit-scrollbar-track { background: transparent; }
.lang-list::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 3px solid #fff; background-clip: padding-box;
}
.lang-list::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }

.lang-menu::after {
  content: ''; position: absolute; left: 6px; right: 16px; bottom: 6px; height: 42px;
  border-radius: 0 0 10px 10px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
  opacity: 1; transition: opacity .18s ease;
}
.lang-menu.at-end::after { opacity: 0; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 12px; border-radius: 9px;
  font-size: .95rem; font-weight: 600; color: var(--ink-2);
  transition: background .16s, color .16s;
}
.lang-menu a:hover { background: var(--bg-soft); color: var(--ink); }
.lang-menu a.is-active { color: var(--brand-strong); background: var(--brand-soft); }
.lang-menu a.is-active::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--brand);
}

.lang--footer .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.foot-lang { display: flex; justify-content: center; padding: 24px 0 0; }

@media (max-width: 960px) {
  /* In the bar now, so it stays a compact pill rather than the full-width row
     it was when it lived inside the panel. The globe alone carries the meaning
     at this size; the code beside it is what tells you which language you are
     currently on, which is the whole reason someone reaches for this. */
  .lang--nav .lang-btn { padding: 6px 8px 6px 7px; font-size: .82rem; }
  .lang--nav .lang-btn svg { width: 15px; height: 15px; }

  /* Anchored to the right edge and never wider than the viewport, so it opens
     inward on a narrow screen instead of off the side of it. */
  .lang--nav .lang-menu {
    right: 0;
    min-width: 216px;
    max-width: calc(100vw - 32px);
  }
}

/* The switcher lists every language in its own script, but Noto Sans
   Devanagari is only downloaded on /hi/. Name the common system Devanagari
   faces so the Hindi option looks deliberate on the other three pages rather
   than dropping to a mismatched default at a visibly smaller optical size. */
.lang-menu a[lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Noto Sans', var(--sans);
  font-size: 1.02rem;
}

/* Below ~380px the translated CTA labels ("Ver como funciona", "So
   funktioniert es") are wider than the viewport once the button's 30px side
   padding and nowrap are applied, which widens the whole hero column. Relax
   both only at that size — the design is unchanged on every normal phone. */
@media (max-width: 380px) {
  .btn { padding-left: 18px; padding-right: 18px; white-space: normal; }
}

/* Flags in the language menu. Named emoji faces first so the glyph renders
   even where the UI font has no flag coverage; `width` is fixed so the
   language names stay in a straight column regardless of glyph width. */
.lang-flag {
  flex: none;
  width: 1.5em;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  /* Windows renders the regional-indicator pair as two letters. Tighten them
     so "ES" reads as a compact chip rather than sprawling past the column. */
  letter-spacing: -0.04em;
}
/* On the button the flag stands in for the globe that used to be there: it is
   the fastest read of which language you are currently on. No fixed width —
   that exists to align the dropdown into a column and inside a pill it only
   adds slack. The code beside it still carries the meaning on Windows, where
   the pair degrades to two letters. */
.lang-btn .lang-flag { width: auto; font-size: 1rem; }

/* Pushes the active dot to the right edge now that the row has three children. */
.lang-name { margin-right: auto; }

/* Single-line rows only where the panel floats and can size to its content.
   Inside the mobile nav the list is in normal flow, so nowrap there forces the
   page wider than the viewport — that is what pushed Indonesian 24px over at
   320px. Mobile rows are full-width and fit on one line anyway. */
@media (min-width: 961px) {
  .lang-name { white-space: nowrap; }
}
.lang--footer .lang-name { white-space: nowrap; }

/* The footer switcher floats at every width, and its 232px min-width sits
   inside a centred container — at 320px that pushed ~30px past the viewport.
   Centre it on its own trigger and cap it to the screen instead. `margin-left`
   rather than `translateX` because the open/close animation already owns
   `transform`. */
@media (max-width: 560px) {
  .lang--footer .lang-menu {
    min-width: 0;
    width: min(260px, calc(100vw - 40px));
    left: 50%; right: auto;
    margin-left: min(-130px, calc(-50vw + 20px));
  }
}