/* ═══════════════════════════════════════════════════════════
   PAIRMO — pairmo.app landing
   Palette lifted from the app: deep forest ground, gold as the
   only accent, ink whites. Gold is used for one thing only —
   the moment two searches meet.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ground:#06140E;      /* deepest — page ground */
  --panel:#0C231B;       /* raised surfaces */
  --panel-2:#16362A;     /* cards */
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.06);

  --gold:#F4C430;
  --gold-soft:#E8C36B;
  --on-gold:#12210C;

  --ink:#F2F6F3;
  --ink-2:rgba(242,246,243,.72);
  --ink-3:rgba(242,246,243,.46);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --pad:clamp(18px,5vw,80px);
  --bar-h:60px;         /* compact full-width header height */
  --bar-top:0px;        /* header sits flush with the viewport top */
  --maxw:1280px;        /* content stops widening on large screens */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + var(--bar-top) + 14px)}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:italic;color:var(--gold)}

/* ── shared atoms ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-soft);
}

.btn{
  white-space:nowrap;
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  background:none;
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.btn--gold{background:var(--gold);color:var(--on-gold);box-shadow:0 6px 22px rgba(244,196,48,.22)}
.btn--gold:hover{background:#FFD34A}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink)}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn--lg{font-size:15px;padding:15px 28px}

.brand-mark{width:34px;height:22px;overflow:visible}
.brand-mark circle{fill:none;stroke:var(--gold);stroke-width:2.4}
.brand-mark__dot{fill:var(--gold);stroke:none}

/* ── sticky bar ───────────────────────────────────────────── */
.bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  height:var(--bar-h);
  background:rgba(8,22,15,.92);   /* telefon: fără blur (scump la scroll) */
  border-bottom:1px solid var(--line-soft);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.bar.is-stuck{
  background:rgba(8,22,15,.92);
  border-bottom-color:var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.bar__inner{
  max-width:var(--maxw);
  height:100%;
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:flex-end;
  padding-bottom:9px;
  gap:clamp(8px,1.6vw,16px);
}

.bar__brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex-shrink:0}
.bar__brandtext{display:flex;flex-direction:column;line-height:1.05}
.bar__word{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.035em}
.bar__motto{
  font-family:var(--display);
  font-style:italic;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--gold-soft);
  white-space:nowrap;
}
.bar__login{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 11px;font-size:12px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(232,195,107,.55);
}
.bar__login:hover{border-color:var(--gold)}
.bar__login .brand-mark{width:17px;height:11px;flex-shrink:0}

/* ── language selector (visual/accessible shell) ── */
.lang{position:relative;flex-shrink:0;margin-left:auto}
.lang__short{display:none}   /* flag-only trigger; names live in the dropdown */
.lang__btn{
  display:flex;align-items:center;gap:5px;
  height:30px;padding:0 8px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(232,195,107,.55);
  color:var(--ink-2);
  font-family:var(--body);font-size:12px;font-weight:600;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.lang__btn:hover{color:var(--ink);border-color:var(--gold)}
.lang__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang__btn[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}
.lang__flag{width:18px;height:13px;flex-shrink:0;display:block}
.lang__flag--ro{display:none}
html[lang="ro"] .lang__flag--ro{display:block}
html[lang="ro"] .lang__flag--en{display:none}
.lang__chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.lang__short{display:none}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:150px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  z-index:70;
  max-height:min(60vh,420px);
  overflow-y:auto;
}
.lang__menu[hidden]{display:none}
.lang__opt{
  display:flex;width:100%;align-items:center;
  white-space:nowrap;text-align:left;
  padding:9px 11px;border-radius:9px;
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.lang__opt:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.lang__opt:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.lang__opt.is-current{color:var(--gold)}

/* ── burger (44×44 target, animates to a close state) ── */
.burger{
  width:32px;height:32px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(232,195,107,.55);
  cursor:pointer;
  transition:border-color .18s ease;
}
.burger:hover{border-color:var(--gold)}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.burger__line{
  width:13px;height:1.7px;border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease,opacity .2s ease;
}
.burger[aria-expanded="true"] .burger__line:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__line:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__line:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ── nav drawer ── */
.drawer{position:fixed;inset:0;z-index:80}
.drawer[hidden]{display:none}
.drawer__veil{position:absolute;inset:0;background:rgba(3,10,7,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.drawer__panel{
  position:absolute;
  top:calc(var(--bar-h) + 10px);
  right:14px;
  width:min(calc(100% - 28px),400px);
  max-height:calc(100dvh - var(--bar-h) - 26px);
  overflow-y:auto;
  background:linear-gradient(180deg,var(--panel) 0%,#081911 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 18px 20px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  animation:drawerIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes drawerSlide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.drawer__title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.drawer__x{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.04);
  color:var(--ink-3);cursor:pointer;font-size:13px;
}
.drawer__x:hover{color:var(--ink)}
.drawer__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.drawer__auth{display:flex;gap:10px;margin:2px 0 20px}
.drawer__auth .btn{flex:1}
.drawer__group{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);
  margin:16px 0 4px;padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.drawer__group:first-of-type{border-top:none;padding-top:4px}
.drawer__link{
  display:block;
  padding:10px 8px;border-radius:10px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);text-decoration:none;
  transition:color .15s ease,background-color .15s ease;
}
.drawer__link:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.drawer__link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.drawer__link[data-pending]{color:var(--ink-3)}
.drawer__cta{width:100%;margin-top:18px}
.drawer__legal{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.drawer__legal a{font-size:12.5px;color:var(--ink-3);text-decoration:none}
.drawer__legal a:hover{color:var(--ink-2)}
.drawer__legal a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:calc(var(--bar-h) + var(--bar-top) + clamp(40px,6vw,72px)) var(--pad) clamp(64px,8vw,110px);
  max-width:calc(var(--maxw) + var(--pad) * 2);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(244,196,48,.09) 0%,transparent 55%),
    linear-gradient(180deg,#0A1E15 0%,var(--ground) 100%);
}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px;
  mask-image:linear-gradient(180deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.hero__copy{position:relative;z-index:1;max-width:620px}
.hero h1 em{font-family:var(--body);font-style:italic}  /* Inter Tight italic real — referința Aug 6 */
.hero h1 em:first-of-type{margin-right:.09em}  /* mic extra-spațiu după "transform" */

.hero h1{
  font-size:clamp(40px,6.4vw,80px);
  margin:12px 0 22px;
}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:50ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:72px 0 0}
.hero__join{
  padding-top:12px;padding-bottom:12px;
  background:#F7F3E9;
  color:#0B1F16;
  border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(244,196,48,.45),0 8px 28px rgba(0,0,0,.35);
}
.hero__join:hover{
  background:#FFFDF6;
  box-shadow:0 0 30px rgba(244,196,48,.6),0 8px 28px rgba(0,0,0,.35);
}

/* ── SIGNATURE: the pairing ───────────────────────────────── */
.pairing{position:relative;z-index:1}
.explore .pairing{max-width:560px;margin:6px 0 34px}
.pairing__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(26px,4.5vw,44px);
  align-items:stretch;
  padding:16px 0 30px;
}

.pcard{
  flex:1 1 0;
  max-width:210px;
  background:linear-gradient(180deg,var(--panel-2) 0%,#0E251C 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.pcard--a{transform:translateX(12px) rotate(-4deg)}
.pcard--b{transform:translateX(-12px) rotate(4deg)}
.is-paired .pcard--a{transform:translateX(3px) rotate(-2deg)}
.is-paired .pcard--b{transform:translateX(-3px) rotate(2deg)}

.pcard__photo{
  height:118px;border-radius:13px;margin-bottom:13px;
  background:linear-gradient(150deg,#1F4A38 0%,#123326 100%);
  border:1px solid var(--line-soft);
  transition:background .45s ease;
}
.pcard__role{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:5px;
}
.pcard__line{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.pcard__meta{font-size:11.5px;color:var(--ink-3);margin-top:7px}

.seal{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.6);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;
  transition:opacity .5s ease .15s,transform .6s cubic-bezier(.2,1.5,.4,1) .15s;
  pointer-events:none;
}
.is-paired .seal{opacity:1;transform:translate(-50%,-50%) scale(1)}
.seal svg{width:74px;height:52px;overflow:visible;filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))}
.seal__ring{fill:none;stroke:var(--gold);stroke-width:2.6}
.seal__dot{fill:var(--gold)}
.seal__label{
  white-space:nowrap;
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  background:rgba(6,20,14,.82);padding:3px 8px;border-radius:999px;
}

.switcher{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.switcher__btn{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-soft);
  color:var(--ink-3);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.switcher__btn:hover{color:var(--ink-2)}
.switcher__btn.is-on{color:var(--gold);border-color:rgba(244,196,48,.42);background:rgba(244,196,48,.1)}
.switcher__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── sections ─────────────────────────────────────────────── */
.section{
  padding:clamp(64px,9vw,132px) var(--pad);
  max-width:calc(var(--maxw) + var(--pad) * 2);
  margin-inline:auto;
}
.section--rule{border-top:1px solid var(--line-soft)}
.section__head{max-width:760px;margin-bottom:clamp(40px,5vw,64px);margin-inline:auto;text-align:center}
.section__head .section__lede{margin-inline:auto}
.section__head h2{font-size:clamp(30px,4.4vw,54px);margin:14px 0 18px}
#how{padding-top:clamp(44px,6vw,96px)}
#how .section__head h2{margin-top:26px}
.section__lede{color:var(--ink-2);font-size:clamp(15px,1.3vw,18px);max-width:58ch}

/* domains — carousel-ready stage (structure only, no carousel yet) */
.explore{position:relative}
/* deck changer — the second idea of Explore: quiet gold callout */
.deckchanger{
  max-width:560px;
  margin:0 0 clamp(28px,4vw,40px);
  padding:14px 18px;
  border-left:2px solid var(--gold-soft);
  background:rgba(244,196,48,.04);
  border-radius:0 14px 14px 0;
}
.deckchanger__label{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:6px;
}
.deckchanger__line{font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em}

/* explore — intent comparison: search vs pairing (moved from the removed
   "What is Pairmo" section; cards unchanged) */
.thesis__compare{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:clamp(14px,2.4vw,26px);
  max-width:940px;
}
.thesis-card{
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:26px 26px 28px;
  background:rgba(255,255,255,.02);
}
.thesis-card__label{
  font-family:var(--mono);
  font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:18px;
}
.thesis-card__list{display:flex;flex-direction:column}
.thesis-card__list li{
  font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink-2);
  padding:11px 0;
  border-top:1px solid var(--line-soft);
}
.thesis-card__list li:first-child{border-top:none;padding-top:2px}
.thesis-card--pairmo{
  border-color:rgba(244,196,48,.32);
  background:linear-gradient(180deg,rgba(244,196,48,.05) 0%,rgba(255,255,255,.02) 60%);
}
.thesis-card--pairmo .thesis-card__label{color:var(--gold)}
.thesis-card--pairmo .thesis-card__list li{color:var(--ink)}
.thesis__arrow{
  align-self:center;
  color:var(--gold-soft);
  opacity:.75;
}
.thesis__arrow svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* product walkthrough — shared block system (01: UserHub) */
.walk__grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:clamp(32px,6vw,84px);
  max-width:1060px;
}
.walk__copy{max-width:480px}
.walk__copy h2{font-size:clamp(30px,4.4vw,54px);margin:14px 0 18px}
.walk__lede{
  font-size:clamp(15.5px,1.4vw,18.5px);
  line-height:1.65;
  color:var(--ink-2);
  margin-bottom:12px;
}
/* UserHub: alternating shine lines */
#userhub .walk__copy{display:grid;grid-template-columns:1fr}
#userhub .walk__copy .eyebrow{grid-row:1}
#userhub .walk__copy h2{grid-row:2}
#userhub .walk__lede{
  grid-row:3;grid-column:1;align-self:start;
  font-size:clamp(19px,2.2vw,26px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.015em;
  background:linear-gradient(105deg,rgba(255,255,255,.78) 40%,#FFFFFF 50%,rgba(255,255,255,.78) 60%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.husync{position:relative;display:flex;flex-direction:column;align-items:center}
.husync .phone{position:relative;z-index:1}
.husync video{display:block;width:100%;height:auto}
/* Coordonate = spațiul video-ului (720×1300) + 390 unități sub telefon.
   Sudat matematic de video prin viewBox — imun la layout/animații. */
.husync__line{
  position:absolute;top:10px;left:10px;right:10px;height:calc(130% - 13px);
  z-index:2;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .25s ease;
}
.husync__line.is-on{opacity:1}
.husync__line path{stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.husync__play{
  position:absolute;inset:10px;
  z-index:3;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
  transition:opacity .2s ease;
}
.husync__disc{
  position:relative;
  width:62px;height:62px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,14,.38);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:huPlayBounce 2.2s ease-in-out infinite;
}
/* inel rotativ cu glow pulsant pe conturul discului */
.husync__disc::before{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(244,196,48,.9) 82%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  animation:huSpin 2.6s linear infinite,huGlowO 2.6s linear infinite;
}
.husync__disc::after{
  content:"";position:absolute;inset:-11px;border-radius:999px;z-index:-1;
  background:radial-gradient(closest-side,rgba(244,196,48,.4),transparent 72%);
  animation:huGlowO 2.6s linear infinite;
}
@keyframes huSpin{to{transform:rotate(360deg)}}
@keyframes huGlowO{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes huPlayBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.04)}}
.husync__play svg{width:24px;height:24px;fill:#F2F6F3}
/* liniuța de indicare + eticheta, la dreapta discului, în afara telefonului;
   stau cât timp butonul e vizibil (dispar doar la play/replay) */
.husync__cue{
  position:absolute;top:50%;left:calc(50% + 37px);right:-54px;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;
  pointer-events:none;
}
.husync__cue-line{flex:1;height:1px;background:rgba(232,195,107,.65)}
.husync__lbl{
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.05em;color:var(--gold-soft);white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.husync__play.is-hidden{opacity:0;pointer-events:none}
.husync__play .husync__ic-replay{display:none}
.husync__play.is-replay .husync__ic-play{display:none}
.husync__play.is-replay .husync__ic-replay{display:block}
.husync__text{
  position:relative;z-index:1;
  min-height:120px;width:100%;max-width:440px;
  margin-top:26px;text-align:center;
}
.husync__more{margin-top:10px;font-size:13px;color:var(--ink-3);line-height:1.5}
#userhub.hu-live .walk__lede{animation:huShine 11s ease-in-out infinite}
#userhub.hu-live .walk__lede + .walk__lede{animation-delay:5.5s}
@keyframes huShine{
  0%{background-position:200% 0}
  45%{background-position:-200% 0}
  100%{background-position:-200% 0}
}

/* upright phone frame — the screenshot is the hero, the frame is quiet */
.phone{
  width:min(300px,78vw);
  border-radius:38px;
  padding:10px;
  background:#0A1B13;
  border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(0,0,0,.4);
}
.phone__screen{
  border-radius:29px;
  overflow:hidden;
  background:var(--ground);
  aspect-ratio:1012 / 1828;  /* exact ratio of the official screenshot — no cropping */
}
.phone__screen video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;   /* never crop the recording */
}
/* Chat phone only: slightly smaller, frame shaped to the new recording
   (708×1280) so the video fills it edge to edge. */
#userhub .phone{width:min(210px,54vw)}   /* compact upright: phone + shine text share the screen */
#chat .phone{width:min(268px,70vw)}
#chat .phone__screen{aspect-ratio:708 / 1280}
.phone__screen img{
  display:block;
  width:100%;
  height:100%;
  /* contain, never cover: the official screenshot must always be fully
     visible — any ratio mismatch letterboxes on the ground color instead
     of cropping the UI. */
  object-fit:contain;
}

/* domains — presentation phone (video slot), centered */
.domains__demo{
  display:flex;justify-content:center;
  margin:0 0 clamp(40px,5vw,60px);
}

/* steps */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,38px);
}
.step{border-top:1px solid var(--line);padding-top:22px}
.step__n{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--gold);
}
.step h3{font-size:19px;font-weight:600;margin:12px 0 9px;letter-spacing:-.02em}
.step p{color:var(--ink-3);font-size:14.5px}
/* walkthrough hand-off line + pending-screenshot placeholder */
.walk__next{
  margin-top:18px;
  font-size:15px;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);
}
.shot__pending{
  height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
  line-height:2;
}


/* groups */
.section--panel{background:linear-gradient(180deg,#0A1E15 0%,var(--ground) 100%);border-top:1px solid var(--line-soft)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split__copy h2{font-size:clamp(28px,3.8vw,46px);margin:14px 0 20px}
.split__copy p{color:var(--ink-2);margin-bottom:16px;max-width:48ch}

.crew{
  background:linear-gradient(180deg,var(--panel-2) 0%,#0E251C 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:8px 22px;
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.crew__row{
  display:flex;justify-content:space-between;gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
}
.crew__row:last-child{border-bottom:none}
.crew__k{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
  padding-top:2px;flex-shrink:0;
}
.crew__v{font-size:14.5px;font-weight:600;text-align:right;letter-spacing:-.01em}

/* closing */
.close__inner{max-width:720px;margin:0 auto}
.close{
  padding:clamp(84px,11vw,150px) var(--pad);
  text-align:center;
  border-top:1px solid var(--line-soft);
  background:radial-gradient(80% 120% at 50% 100%,rgba(244,196,48,.09) 0%,transparent 60%);
}
.close h2{font-size:clamp(32px,5vw,64px)}
.close p{color:var(--ink-2);font-size:clamp(16px,1.6vw,20px);margin:16px 0 32px}

/* footer */
.foot{
  padding:38px var(--pad) 46px;
  max-width:calc(var(--maxw) + var(--pad) * 2);
  margin-inline:auto;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;
}
.foot__brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;letter-spacing:-.03em}
.foot__links{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.foot__links a{font-size:13.5px;color:var(--ink-3);text-decoration:none;transition:color .18s ease}
.foot__links a:hover{color:var(--ink)}
.foot__note{width:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}

/* ── auth modal ───────────────────────────────────────────── */
.auth{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.auth[hidden]{display:none}
.auth [hidden]{display:none !important}
.auth__veil{position:absolute;inset:0;background:rgba(3,10,7,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.auth__card{
  position:relative;width:100%;max-width:400px;
  max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  background:linear-gradient(180deg,var(--panel) 0%,#081911 100%);
  border:1px solid var(--line);border-radius:24px;
  padding:34px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:authIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes authIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.auth__x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:999px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--ink-3);cursor:pointer;font-size:13px}
.auth__x:hover{color:var(--ink)}
.auth__mark{width:44px;height:28px;display:block;margin:0 auto 10px}
.auth__title{font-size:24px;text-align:center;margin-bottom:22px}
.auth__form{display:flex;flex-direction:column;gap:14px}
.auth__field{display:flex;flex-direction:column;gap:6px}
.auth__field span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.auth__field input{
  font-family:var(--body);font-size:16px;color:var(--ink);   /* ≥16px = no mobile focus zoom */
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);border-radius:12px;
  padding:12px 14px;outline:none;
  transition:border-color .18s ease;
}
.auth__field input:focus{border-color:rgba(244,196,48,.5)}
.auth__submit{width:100%;margin-top:6px}
.auth__note{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5}
.auth__swap{margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-3)}
.auth__swap button{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--gold-soft);cursor:pointer}
.auth__swap button:hover{color:var(--gold)}
.auth__or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.auth__oauth{display:flex;align-items:center;justify-content:center;gap:9px;width:100%}
.auth__oauth svg{width:17px;height:17px;flex-shrink:0}
.auth__consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.5;text-align:left;cursor:pointer}
.auth__consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}
.auth__consent a{color:var(--ink-2)}
.auth__consent a:hover{color:var(--gold-soft)}
.auth__hint{display:block;margin-top:6px;font-size:12px;color:var(--ink-3);line-height:1.4}
.auth__forgot{
  display:block;margin-top:8px;padding:0;
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:12.5px;font-weight:500;
  color:var(--ink-3);text-align:left;
}
.auth__forgot:hover{color:var(--gold-soft)}
.auth__field .auth__hint{font-family:var(--body);font-weight:500;letter-spacing:0;text-transform:none}
.auth__msg{margin:0;font-size:13.5px;font-weight:600;color:#E5533D;line-height:1.45}
.auth__msg.is-ok{color:#7FBF9E;animation:authMsgGlow 1.4s ease-out 3}
@keyframes authMsgGlow{
  0%{text-shadow:none}
  35%{text-shadow:0 0 14px rgba(127,191,158,.85),0 0 30px rgba(127,191,158,.35)}
  100%{text-shadow:none}
}
.auth__captcha{display:flex;justify-content:center}
.auth__signedin{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.auth__legal{margin-top:14px;text-align:center;font-size:11px;color:var(--ink-3);line-height:1.5}
.auth__legal a{color:var(--ink-2)}

/* ── cookie banner ────────────────────────────────────────── */
.cookiebar[hidden]{display:none}
.cookiebar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  max-width:560px;margin-inline:auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(10,26,18,.96);
  border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.cookiebar p{font-size:13px;color:var(--ink-2);line-height:1.5;flex:1 1 260px}
.cookiebar a{color:var(--gold-soft)}
.cookiebar__actions{display:flex;gap:8px;margin-left:auto}
.cookiebar .btn{padding:9px 16px;font-size:13px}

/* ── legal pages ──────────────────────────────────────────── */
.legal{
  max-width:760px;margin-inline:auto;
  padding:calc(var(--bar-h) + var(--bar-top) + 44px) var(--pad) clamp(64px,8vw,110px);
}
.legal h1{font-size:clamp(32px,5vw,52px);margin:14px 0 10px}
.legal__updated{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);margin-bottom:38px}
.legal h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:34px 0 10px}
.legal p{color:var(--ink-2);font-size:15px;line-height:1.7;margin-bottom:10px}
.legal a{color:var(--gold-soft)}
.legal strong{color:var(--ink)}

/* ════ PAIRMO HERO — OPTION D: PEOPLE + CARDS ════
   Second visual test (Option B fully removed). Same reusable container
   and dimensions as before; one abstract illustration — two geometric
   figures, three minimal cards, links meeting in one glowing point.
   Motion: cards float 4px, links breathe, the core gently pulses.
   One 7s loop. Static base styles = the complete composition, so
   reduced-motion simply freezes it meaningfully. */
.pairmo-hero-visual{
  width:100%;
  max-width:560px;
  margin:clamp(12px,2vw,16px) 0 clamp(8px,1.5vw,10px);
}
.pairmo-hero-visual--illustration{position:relative}
.pairmo-hero-visual svg{
  display:block;
  width:100%;
  height:clamp(170px,46vw,245px);
}

.pairmo-hero-visual--domainflow{position:relative}
.phd-figure circle,
.phd-figure path{
  fill:rgba(242,246,243,.10);
  stroke:rgba(242,246,243,.26);
  stroke-width:1.2;
}
.phd-figure--l,.phd-figure--r,.phd-figure--ne{transform-box:fill-box}
.phd-figure circle,
.phd-figure path{animation:phdFigureSense 9s ease-in-out infinite}
.phd-figure--crew{transform-box:fill-box}
.phd-figure__mate circle,
.phd-figure__mate path{
  fill:rgba(242,246,243,.07);
  stroke:rgba(242,246,243,.18);
}

.phd-glow{animation:phdBreathe 9s ease-in-out infinite}

.phd-link--l{animation-delay:0s}
.phd-link--r{animation-delay:0s}
.phd-link--ne{animation-delay:0s}   /* all three send in the same beat */
.phd-link{
  fill:none;
  stroke:var(--gold-soft);
  stroke-width:1.1;
  stroke-linecap:round;
  opacity:.34;
  stroke-dasharray:1 9;
  animation:phdLine 9s ease-in-out infinite, phdFlow 9s linear infinite;
}

/* domain circle: glass + gold ring; the pulse fires when both cards land */
.phd-domain__ring{
  fill:rgba(20,48,34,.85);
  stroke:rgba(244,196,48,.55);
  stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;
  animation:phdRing 9s ease-in-out infinite;
}
.phd-domain__pulse{
  fill:none;
  stroke:var(--gold);
  stroke-width:1;
  opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:phdConnect 9s ease-out infinite;
}
.phd-domain__pulse--2{animation-delay:.35s}
.phd-domain__halo{
  fill:none;
  stroke:rgba(232,195,107,.22);
  stroke-width:1;
  stroke-dasharray:2 6;
}
.phd-domain__name{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-anchor:middle;
  fill:var(--gold);
  opacity:0;
  animation:phdName 54s linear infinite;   /* 6 domains × one 9s round-trip each */
}
.phd-domain__name--1{animation-delay:0s}
.phd-domain__name--2{animation-delay:9s}
.phd-domain__name--3{animation-delay:18s}
.phd-domain__name--4{animation-delay:27s}
.phd-domain__name--5{animation-delay:36s}
.phd-domain__name--6{animation-delay:45s}

/* the personal cards: each person sends theirs along the line */
.phd-travelcard{
  animation:phdSend 9s cubic-bezier(.45,.05,.25,1) infinite;
  offset-rotate:0deg;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.phd-travelcard--l .phd-card__body{transform:rotate(-4deg);transform-box:fill-box;transform-origin:center}
.phd-travelcard--r{animation-delay:.2s}
.phd-travelcard--ne{animation-delay:.4s}
.phd-travelcard--ne .phd-card__body{transform:rotate(3deg);transform-box:fill-box;transform-origin:center}
.phd-travelcard--ne{offset-path:path('M452 56 Q 392 68 322 98')}
.phd-travelcard--r .phd-card__body{transform:rotate(4deg);transform-box:fill-box;transform-origin:center}
.phd-travelcard--l{offset-path:path('M100 168 Q 178 152 230 124')}
.phd-travelcard--r{offset-path:path('M460 168 Q 382 152 330 124')}
.phd-card__body{
  fill:rgba(20,48,34,.9);
  stroke:rgba(232,195,107,.5);
  stroke-width:1;
}
/* card skins — who sent what: the returns come back shuffled */
.phd-cardskin--gold  .phd-card__body{stroke:rgba(244,196,48,.75)}
.phd-cardskin--gold  .phd-card__title{fill:rgba(244,196,48,.85)}
.phd-cardskin--red .phd-card__body{stroke:rgba(229,83,61,.8)}
.phd-cardskin--red .phd-card__title{fill:rgba(229,83,61,.9)}
.phd-cardskin--jade  .phd-card__body{stroke:rgba(127,191,158,.75)}
.phd-cardskin--jade  .phd-card__title{fill:rgba(127,191,158,.85)}
.phd-card__title{fill:rgba(244,196,48,.65)}

/* returning candidates: same paths, reversed */
.phd-returncard{
  animation:phdReturn 9s cubic-bezier(.45,.05,.25,1) infinite;
  offset-rotate:0deg;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.phd-returncard--l{offset-path:path('M100 168 Q 178 152 230 124')}
.phd-returncard--r{offset-path:path('M460 168 Q 382 152 330 124');animation-delay:.22s}
.phd-returncard--ne{offset-path:path('M452 56 Q 392 68 322 98');animation-delay:.44s}
.phd-card__photo{fill:rgba(242,246,243,.09)}
.phd-card__line{fill:rgba(242,246,243,.16)}

/* ── one 6s match cycle ──
   0–8%   cards rise at the people
   8–52%  cards travel the lines
   52–58% the domain absorbs them
   58–74% CONNECTION: ring brightens + pulse expands
   74–100% calm, then the next domain takes the circle */
/* ── one 9s round-trip ──
   0–33%  people send their cards to the domain
   33–37% the domain absorbs them
   37–48% CONNECTION pulse
   50–80% the domain RETURNS shuffled candidate cards to the people
   80–88% the people receive (figures warm up), then calm ── */
@keyframes phdSend{
  0%{offset-distance:0%;opacity:0;transform:scale(.9)}
  5%{opacity:1;transform:scale(1)}
  33%{offset-distance:100%;opacity:1;transform:scale(.92)}
  37%,100%{offset-distance:100%;opacity:0;transform:scale(.7)}
}
@keyframes phdReturn{
  0%,50%{offset-distance:100%;opacity:0;transform:scale(.8)}
  55%{opacity:1;transform:scale(1)}
  79%{offset-distance:0%;opacity:1;transform:scale(.95)}
  84%,100%{offset-distance:0%;opacity:0;transform:scale(.75)}
}
@keyframes phdLine{
  0%,3%{opacity:.2}
  18%{opacity:.5}
  40%{opacity:.25}
  60%{opacity:.5}
  80%{opacity:.45}
  90%,100%{opacity:.2}
}
@keyframes phdRing{
  0%,35%{stroke:rgba(244,196,48,.5);transform:scale(1)}
  41%{stroke:rgba(244,196,48,1);transform:scale(1.05)}
  48%{stroke:rgba(244,196,48,.6);transform:scale(1)}
  52%{stroke:rgba(244,196,48,.85);transform:scale(1.02)}   /* dispatch beat */
  58%,100%{stroke:rgba(244,196,48,.5);transform:scale(1)}
}
@keyframes phdConnect{
  0%,36%{opacity:0;transform:scale(1)}
  40%{opacity:.5}
  50%{opacity:0;transform:scale(1.55)}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes phdBreathe{
  0%,34%{opacity:.5}
  42%{opacity:1}
  56%{opacity:.6}
  100%{opacity:.5}
}
/* each name owns one 6s window of the 36s cycle (6s = 16.66%) */
@keyframes phdName{
  0%{opacity:0;letter-spacing:.3em}
  2%{opacity:1;letter-spacing:.18em}
  14.5%{opacity:1;letter-spacing:.18em}
  16.66%,100%{opacity:0;letter-spacing:.18em}
}
@keyframes phdFlow{
  from{stroke-dashoffset:60}
  to{stroke-dashoffset:0}
}
@keyframes phdFigureSense{
  0%,78%{stroke-opacity:1}
  85%{stroke-opacity:1;stroke:rgba(232,195,107,.55)}   /* receiving */
  96%,100%{stroke-opacity:1}
}

@media (max-width:560px){
  .pairmo-hero-visual{margin:30px 0 10px}
}

/* Reduced motion: freeze the finished composition (base styles are the
   complete scene — nothing animated-in, so none = clean static). */
@media (prefers-reduced-motion:reduce){
  .phd-travelcard,.phd-link,.phd-glow,.phd-domain__ring,.phd-domain__pulse,.phd-domain__name{animation:none !important}
  .phd-domain__name--1{opacity:1}
  .phd-travelcard{offset-distance:55%;opacity:1}
  .phd-returncard{animation:none !important;opacity:0}
  #userhub .walk__lede{animation:none !important;opacity:1;background:none;color:#FFFFFF}
  .acc__item.is-open .phone,.acc__item.is-open .phone::after{animation:none !important}
  .acc__item.is-open::before,.acc__item.is-open::after{animation:none !important;opacity:0}
  .acc__item.is-open .acc__inner{animation:none !important;opacity:1;transform:none}
  .acc__item.is-open .acc__inner :is(.eyebrow, h2, .section__lede, .walk__next, .walk__shot, .domains__demo, .step, .pairing, .deckchanger, .thesis-card, .thesis__arrow){animation:none !important;opacity:1;transform:none}
  .acc__ch{transition:none !important}
}

/* panel mechanics: closed = collapsed row, open = instant space; the
   box then POPS into it (no height animation at all) */
.acc__panel{
  display:grid;
  grid-template-rows:0fr;
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__item:not(.is-open) .acc__inner{content-visibility:hidden}
.acc__inner{
  overflow:hidden;
  min-height:0;
  opacity:0;
}
.acc__item.is-open .acc__inner{
  transform-origin:50% 0;
  animation:accBoxPop .55s cubic-bezier(.2,.9,.25,1.12) .32s forwards;
}
@keyframes accBoxPop{
  0%{opacity:0;transform:scale(.9) translateY(12px)}
  70%{opacity:1;transform:scale(1.015) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* the box arrives EMPTY, then its contents fly in from far away —
   tiny → approaching → slight push past the glass → STUCK. Cheap 2D
   scale only (no 3D contexts over video/SVG). Staggered via --ei. */
.acc__item.is-open .acc__inner :is(.eyebrow, h2, .section__lede, .walk__next, .walk__shot, .domains__demo, .step, .pairing, .deckchanger, .thesis-card, .thesis__arrow){
  animation:accEmerge .55s cubic-bezier(.2,.8,.25,1.08) both;
  animation-delay:calc(1.05s + var(--ei, 0) * .16s);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
@keyframes accEmerge{
  0%{opacity:0;transform:scale(.06)}
  60%{opacity:1}
  85%{transform:scale(1.035)}
  100%{opacity:1;transform:scale(1)}
}

/* NUCLEAR OPEN — one-shot detonation when a panel opens:
   ::after = white-gold flash + expanding shockwave ring
   ::before = big radial debris burst of gold motes
   Big, loud, then gone — the box remains. */
.acc{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.acc__item{
  position:relative;
  scroll-margin-top:calc(var(--bar-h) - 118px);
  border:1px solid transparent;
  border-top:1px solid var(--line-soft);
  border-radius:22px;
  transition:border-color .28s ease,box-shadow .28s ease,background-color .28s ease;
}
.acc__item.is-open{
  border-color:rgba(232,195,107,.32);
  background:rgba(14,34,24,.35);
  box-shadow:0 0 0 1px rgba(20,48,34,.5), 0 12px 40px rgba(0,0,0,.3), 0 0 26px rgba(244,196,48,.08);
  margin-block:10px;
  overflow-x:clip;   /* the particle-blast layers scale up to 2.5× and must
                         not push the page into horizontal scroll */
}
.acc__item.is-open + .acc__item{border-top-color:transparent}
.is-offscreen,.is-offscreen *{animation-play-state:paused !important}
.acc-hint{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:0 auto 26px;text-align:center;
}
.acc-hint__text{
  margin:0;
  font-family:var(--body);font-size:13.5px;font-weight:500;
  color:var(--ink-2);
}
.acc-hint__arrow{
  width:18px;height:18px;color:var(--gold-soft);
  animation:accHintBounce 1.8s ease-in-out infinite;
}
@keyframes accHintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.acc__head{
  position:relative;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;
  padding:22px 8px;
  background:none;border:none;cursor:pointer;
  /* mirrors the .eyebrow treatment used by the titles inside sections */
  font-family:var(--mono);
  font-size:clamp(11px,1.3vw,13px);
  font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-soft);
  text-align:left;
  transition:color .2s ease;
}
.acc__head span{flex:1 1 auto}
/* the title's letters tumble away one by one before the blast */
.acc__ch{
  display:inline-block;
  white-space:pre;
  transition:transform .45s cubic-bezier(.4,.1,.7,1), opacity .42s ease;
  transition-delay:calc(var(--ci, 0) * .055s);
}
.acc__head.is-falling .acc__ch{
  transform:translateY(30px) rotate(14deg);
  opacity:0;
}
/* while the box is open the title row is gone entirely */
.acc__item.is-open .acc__head{display:none}
/* the box's close control */
.acc__x{
  position:absolute;top:15px;right:16px;z-index:3;
  padding:4px;
  background:none;border:none;
  color:var(--gold-soft);
  font-size:16px;line-height:1;
  cursor:pointer;
  transition:color .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.acc__x:hover{color:var(--gold);transform:rotate(90deg)}
.acc__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.acc__head:hover{color:var(--ink)}
.acc__head:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
.acc__item.is-open .acc__head{color:var(--gold)}
.acc__chev{
  width:14px;height:14px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s ease;
}
/* zonă de atingere generoasă în jurul săgeții, extinsă și peste marginea dreaptă */
.acc__head::after{
  content:"";position:absolute;top:0;bottom:0;right:-16px;width:72px;
}
.acc__item.is-open .acc__chev{transform:rotate(180deg)}
.acc__item.is-open::before{
  content:'';
  position:absolute;left:0;right:0;top:-56px;height:260px;
  z-index:2;
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
  background:
    radial-gradient(7.2px 7.2px at 45.5% 55.0%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.9px 3.9px at 45.5% 79.8%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.4px 3.4px at 62.2% 74.6%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(7.0px 7.0px at 16.3% 53.3%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(5.0px 5.0px at 59.0% 41.3%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(3.3px 3.3px at 61.6% 77.9%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.1px 3.1px at 20.9% 28.3%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.9px 3.9px at 33.7% 57.6%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(6.0px 6.0px at 63.2% 50.0%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(5.5px 5.5px at 64.6% 42.2%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(4.0px 4.0px at 69.5% 34.5%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(3.5px 3.5px at 5.8% 55.3%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(7.3px 7.3px at 82.6% 40.5%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.2px 3.2px at 23.1% 85.9%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.3px 3.3px at 95.2% 41.4%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(3.4px 3.4px at 76.2% 30.7%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(7.2px 7.2px at 4.4% 42.4%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(3.3px 3.3px at 26.2% 16.5%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(5.0px 5.0px at 19.7% 55.0%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(4.9px 4.9px at 95.6% 72.6%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(4.0px 4.0px at 14.0% 43.3%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(5.7px 5.7px at 84.2% 89.9%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(6.8px 6.8px at 22.8% 41.1%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(5.0px 5.0px at 7.0% 20.3%, rgba(244,196,48,.95), transparent 60%);
  animation:accDebris .8s cubic-bezier(.16,.7,.2,1) forwards;
}
.acc__item.is-open::after{
  content:'';
  position:absolute;left:0;right:0;top:-24px;height:240px;
  z-index:2;
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
  background:
    radial-gradient(3.2px 3.2px at 75.6% 35.6%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(4.3px 4.3px at 10.0% 25.5%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.7px 3.7px at 59.5% 39.2%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.5px 3.5px at 81.2% 19.4%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(4.2px 4.2px at 32.2% 27.2%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(4.0px 4.0px at 17.9% 60.8%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(3.6px 3.6px at 85.9% 58.7%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.0px 3.0px at 13.3% 51.0%, rgba(255,244,205,.95), transparent 60%),
    radial-gradient(4.2px 4.2px at 27.2% 77.2%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(5.4px 5.4px at 51.9% 86.1%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(5.0px 5.0px at 24.5% 55.0%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 29.3% 85.1%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.0px 3.0px at 9.5% 42.6%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(4.1px 4.1px at 19.6% 39.0%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(3.7px 3.7px at 11.7% 19.6%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(4.1px 4.1px at 64.8% 66.1%, rgba(232,195,107,.9), transparent 60%),
    radial-gradient(3.8px 3.8px at 58.4% 85.6%, rgba(255,235,180,.92), transparent 60%),
    radial-gradient(2.3px 2.3px at 68.9% 88.9%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(3.3px 3.3px at 48.3% 69.4%, rgba(244,196,48,.95), transparent 60%),
    radial-gradient(4.6px 4.6px at 10.1% 53.9%, rgba(232,195,107,.9), transparent 60%);
  animation:accDebrisDown .78s cubic-bezier(.18,.65,.22,1) forwards;
}
@keyframes accDebris{
  0%{opacity:0;transform:scale(.3) translateY(24px)}
  10%{opacity:1}
  58%{opacity:.85}
  100%{opacity:0;transform:scale(2.5) translateY(-70px)}
}
@keyframes accDebrisDown{
  0%{opacity:0;transform:scale(.35) translate(6px,-16px)}
  12%{opacity:1}
  56%{opacity:.8}
  100%{opacity:0;transform:scale(1.9) translate(-16px,44px)}
}
/* ── THE BOX — the opened panel is a futuristic display case: a lit
   interior with a receding holo-floor, gold edge light, and the phone
   levitating inside with a breathing ground shadow. Pure chrome around
   the sections; nothing inside them is modified. ── */
.acc__item.is-open .acc__inner{
  position:relative;
  isolation:isolate;
  border-radius:20px;
  background:
    /* HUD corner brackets */
    linear-gradient(rgba(244,196,48,.5) 0 0) top 12px left 12px / 24px 2px no-repeat,
    linear-gradient(rgba(244,196,48,.5) 0 0) top 12px left 12px / 2px 24px no-repeat,
    linear-gradient(rgba(244,196,48,.5) 0 0) top 12px right 12px / 24px 2px no-repeat,
    linear-gradient(rgba(244,196,48,.5) 0 0) top 12px right 12px / 2px 24px no-repeat,
    linear-gradient(rgba(244,196,48,.4) 0 0) bottom 12px left 12px / 24px 2px no-repeat,
    linear-gradient(rgba(244,196,48,.4) 0 0) bottom 12px left 12px / 2px 24px no-repeat,
    linear-gradient(rgba(244,196,48,.4) 0 0) bottom 12px right 12px / 24px 2px no-repeat,
    linear-gradient(rgba(244,196,48,.4) 0 0) bottom 12px right 12px / 2px 24px no-repeat,
    /* back-wall horizon seams (where ceiling and floor meet the wall) */
    linear-gradient(rgba(232,195,107,.16) 0 0) left 0 top 40% / 100% 1px no-repeat,
    linear-gradient(rgba(232,195,107,.14) 0 0) left 0 bottom 46% / 100% 1px no-repeat,
    /* glass sheen across the case */
    linear-gradient(118deg, transparent 30%, rgba(255,255,255,.035) 45%, transparent 60%),
    /* corner edge lines — the box's receding edges */
    linear-gradient(135deg, transparent calc(50% - .6px), rgba(232,195,107,.28) 50%, transparent calc(50% + .6px)) top left / 130px 96px no-repeat,
    linear-gradient(225deg, transparent calc(50% - .6px), rgba(232,195,107,.28) 50%, transparent calc(50% + .6px)) top right / 130px 96px no-repeat,
    linear-gradient(45deg,  transparent calc(50% - .6px), rgba(232,195,107,.20) 50%, transparent calc(50% + .6px)) bottom left / 130px 96px no-repeat,
    linear-gradient(315deg, transparent calc(50% - .6px), rgba(232,195,107,.20) 50%, transparent calc(50% + .6px)) bottom right / 130px 96px no-repeat,
    /* inner wall seams */
    linear-gradient(90deg, transparent calc(13% - .5px), rgba(232,195,107,.13) 13%, transparent calc(13% + .5px)),
    linear-gradient(90deg, transparent calc(87% - .5px), rgba(232,195,107,.13) 87%, transparent calc(87% + .5px)),
    /* left / right walls closing in */
    linear-gradient(90deg,  rgba(16,40,28,.85), rgba(16,40,28,.28) 13%, transparent 26%),
    linear-gradient(270deg, rgba(16,40,28,.85), rgba(16,40,28,.28) 13%, transparent 26%),
    /* lit depth */
    radial-gradient(130% 90% at 50% 0%, rgba(24,56,40,.65) 0%, rgba(5,14,10,.97) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(232,195,107,.22),
    inset 0 30px 64px rgba(0,0,0,.6),
    inset 0 -46px 90px rgba(0,0,0,.5),
    inset 26px 0 60px rgba(0,0,0,.35),
    inset -26px 0 60px rgba(0,0,0,.35);
}
/* ceiling: light beam + receding grid (mirror of the floor) */
.acc__item.is-open .acc__inner::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:40%;
  z-index:-1;
  background:
    radial-gradient(58% 90% at 50% 0%, rgba(244,196,48,.13), transparent 72%),
    repeating-linear-gradient(90deg, rgba(232,195,107,.09) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, rgba(232,195,107,.07) 0 1px, transparent 1px 46px);
  transform:perspective(720px) rotateX(-56deg);
  transform-origin:top center;
  -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 42%);
  mask-image:linear-gradient(0deg, transparent 0%, #000 42%);
  opacity:.6;
  pointer-events:none;
}
/* receding holo-floor */
.acc__item.is-open .acc__inner::after{
  content:'';
  position:absolute;inset:auto 0 0 0;height:46%;
  z-index:-1;
  background:
    repeating-linear-gradient(90deg, rgba(232,195,107,.14) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(232,195,107,.11) 0 1px, transparent 1px 44px);
  transform:perspective(720px) rotateX(58deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 38%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 38%);
  opacity:.65;
  pointer-events:none;
}
/* the phone levitates inside the case */
.acc__item.is-open .phone{
  position:relative;
  animation:accFloat 6s ease-in-out infinite;
  box-shadow:0 22px 40px rgba(0,0,0,.45);   /* static — no per-frame filter */
  will-change:transform;
}
.acc__item.is-open .phone::after{
  content:'';
  position:absolute;left:14%;right:14%;top:calc(100% + 20px);height:16px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter:blur(6px);
  animation:accHover 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes accFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes accHover{
  0%,100%{transform:scaleX(1);opacity:.6}
  50%{transform:scaleX(.86);opacity:.35}
}

/* ── DESKTOP refinements (≥980px — includes Android "Desktop site",
   whose viewport is exactly 980px) ─────────────────────────── */
@media (min-width:980px){
  /* 1. larger sticky-bar furniture */
  :root{--bar-h:66px}
  .brand-mark{width:42px;height:27px}
  .bar{background:rgba(8,22,15,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .bar__word{font-size:25px}
  .bar__motto{font-size:12px}
  .bar__login{font-size:13px;height:35px;padding:0 14px;gap:7px}
  .bar__login .brand-mark{width:20px;height:13px}
  .lang__btn{height:35px;padding:0 11px;font-size:12.5px}
  .lang__flag{width:21px;height:15px}
  .burger{width:37px;height:37px;border-radius:999px;gap:4px}
  .burger__line{width:20px;height:2px}
  .burger[aria-expanded="true"] .burger__line:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger[aria-expanded="true"] .burger__line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}


  /* 4. animation + CTA centered on the page axis */
  .hero__copy{margin-inline:auto}
  .pairmo-hero-visual{margin-inline:auto}
  .hero__cta{justify-content:center}

  /* 5. air between the hero CTA and the How-it-works section */
  .hero{padding-bottom:clamp(110px,12vw,170px)}
}

/* ── reveal on scroll ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* ── responsive — four stops, each fixing a real break point ── */

/* Steps lose their fourth column before the text gets cramped. */
@media (max-width:1180px){
  .steps{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.2vw,40px)}
}

/* Tablet: single column hero, nav folds away, sections tighten. */
@media (max-width:980px){
  .walk__grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .walk__copy{display:contents}
  .walk__copy .eyebrow{order:1}
  .walk__copy h2{order:2;margin-bottom:6px}
  .walk__shot{order:3;margin:10px 0 6px}
  .walk__copy .walk__lede{order:4;max-width:520px}
  #userhub .walk__copy{display:contents}
  #userhub .walk__copy .walk__lede{grid-row:4;grid-column:1}
  /* ── 3: Domains & Card Configuration heading centered like UserHub ── */
  /* (Domains heading centering now handled globally by .section__head) */
  .hero{
    grid-template-columns:1fr;
    padding-top:calc(var(--bar-h) + var(--bar-top) + 58px);
    gap:clamp(30px,6vw,48px);
  }
  .hero__copy{max-width:640px}
  .split{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .thesis__compare{grid-template-columns:1fr;gap:12px}
  .thesis__arrow{justify-self:center;transform:rotate(90deg)}
  .section__head{margin-bottom:clamp(30px,5vw,44px)}

}

/* Small tablets / large phones: two step columns still read fine,
   domain tiles go single file with a calmer inner padding. */
@media (max-width:720px){
  .drawer__panel{
    top:0;right:0;bottom:0;
    width:min(88vw,400px);
    max-height:100dvh;
    border-radius:0;
    border-top:none;border-right:none;border-bottom:none;
    padding-top:22px;
    animation:drawerSlide .3s cubic-bezier(.22,1,.36,1);
  }

  .crew{padding:6px 18px}
}

/* Phones: everything stacks, nothing wraps awkwardly. */
@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:26px}
  .pairing__stage{gap:18px;padding:12px 0 24px}
  .pcard{padding:12px;border-radius:17px}
  .pcard__photo{height:96px}
  .pcard__line{font-size:13.5px}
  .seal svg{width:62px}
  .btn--lg{width:100%}
  /* Phone rhythm: one spacing system, one source of space below the CTA.
     The hero is content-driven — the bottom padding alone sets the gap to
     the next section's separator (no stacked CTA margin-bottom). */
  .hero{
    padding-top:calc(var(--bar-h) + var(--bar-top) + 54px);   /* breathing room under the bar */
    padding-bottom:clamp(34px,9vw,46px);
  }
  .hero h1{margin:0 0 18px}                                    /* motto moved to the bar */
  .hero__cta{flex-direction:column;align-items:stretch;margin:60px 0 0}
  .foot{gap:18px}
  .foot__links{margin-left:0;gap:16px}
  .crew__row{padding:14px 0;gap:12px}
  .switcher{gap:6px}
}

/* Narrow phones: shorten the visible language label to EN (accessible
   name stays "Language: English" via aria-label). All controls remain. */
@media (max-width:400px){
  .bar__inner{gap:7px}
  .bar__login{padding:0 10px;font-size:13.5px}
  .lang__full{display:none}
  .lang__short{display:inline}
  .lang__btn{padding:0 9px}
}

/* Only below a very narrow width does the wordmark yield — the mark,
   language, login and burger all stay usable. */
@media (max-width:640px){
  .bar__login{font-size:11.5px;height:27px;padding:0 9px;gap:4px}
  .bar__login .brand-mark{width:15px;height:9px}
  .lang__btn{height:27px;padding:0 6px;gap:4px}
  .lang__flag{width:17px;height:12px}
  .burger{width:29px;height:29px;border-radius:999px;gap:3px}
  .burger__line{width:16px}
  .burger[aria-expanded="true"] .burger__line:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] .burger__line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}