/* ==========================================================================
   ESCAPE! — AI Travel Agent
   Design system
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Brand */
  --navy-900:#070E24;
  --navy-800:#0C1733;
  --navy-700:#132148;
  --navy-600:#1D2F63;
  --ink:#0B1533;
  --ink-2:#4A567F;
  --ink-3:#555D7B;

  --white:#FFFDFA;
  --white-warm:#FBFAF7;
  --surface:#F7F3ED;
  --surface-2:#F0EAE0;
  --line:#E9E2D7;
  --line-strong:#D9CEBE;

  --sky:#EAF2FD;
  --sky-2:#D3E4FB;
  --blue:#1F5AE0;
  --blue-deep:#123CA8;

  --sand:#F5EDE2;
  --champagne:#EFE3D2;

  --red:#E5231D;
  --red-soft:#FDF2F1;
  /* the brand red drops below 4.5:1 at text sizes — this is the same hue, passing */
  --red-ink:#C81C17;

  --ok:#12A150;

  /* Typography */
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Onest","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-script:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Type scale */
  --t-display:clamp(2.5rem,1.1rem + 4.2vw,4.9rem);
  --t-h2:clamp(1.95rem,1.02rem + 2.7vw,3.4rem);
  --t-h3:clamp(1.34rem,1.02rem + .95vw,1.95rem);
  --t-h4:clamp(1.06rem,.96rem + .34vw,1.26rem);
  --t-lead:clamp(1.04rem,.96rem + .38vw,1.26rem);
  --t-body:clamp(.95rem,.92rem + .14vw,1.03rem);
  --t-small:.875rem;
  --t-micro:.75rem;

  /* Spacing */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --sp-section:clamp(66px,7.6vw,148px);
  --gutter:clamp(20px,4.2vw,52px);
  --maxw:1272px;
  --maxw-narrow:880px;

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;

  /* Shadow */
  --sh-1:0 1px 2px rgba(11,21,51,.05),0 2px 8px rgba(11,21,51,.05);
  --sh-2:0 2px 6px rgba(11,21,51,.06),0 12px 30px rgba(11,21,51,.08);
  --sh-3:0 4px 12px rgba(11,21,51,.07),0 26px 60px rgba(11,21,51,.13);
  --sh-phone:0 30px 70px rgba(7,14,36,.30),0 8px 20px rgba(7,14,36,.16);

  /* Motion */
  --ease:cubic-bezier(.22,.72,.26,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.34,.9,.28,1);
  --dur:.5s;

  --header-h:70px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;background:var(--white-warm);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--t-body);line-height:1.62;
  font-weight:450;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--red);color:#fff}
[hidden]{display:none!important}

h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.032em;line-height:1.06}
h3,h4{letter-spacing:-.024em;line-height:1.16}
p{text-wrap:pretty}
h3,h4{letter-spacing:-.02em;line-height:1.22}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section);position:relative}
.section--tight{padding-block:calc(var(--sp-section) * .72)}
.section--dark{background:var(--navy-900);color:#EDF1FA}
/* Alternating cream and beige drew a hard line at every join. The light
   sections share one ground; the photographs and the dark sections are what
   separate them. --surface stays what it always was for cards and chips. */
.section--surface{background:var(--white-warm)}
.section--sky{background:var(--white-warm)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,var(--red),rgba(229,35,29,0));
}
.section--dark .eyebrow::before{background:linear-gradient(90deg,#FF6A63,rgba(255,106,99,0))}
.section--dark .eyebrow{color:#8E9CC4}

.lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.62;max-width:58ch;letter-spacing:-.006em}
.section--dark .lead{color:#A9B5D4}
.muted{color:var(--ink-3)}
.src{font-size:var(--t-micro);color:var(--ink-3);letter-spacing:.01em}
.section--dark .src{color:#7682A7}
/* the same grey over a photograph falls to 3.5:1 — it gets its own value there */
.section--dark.section--photo .src{color:#98A5C8}
/* the veil now opens a little sooner at the top edge, so the eyebrow that sits
   in that band needs the same treatment the small print already had */
.section--dark.section--photo .eyebrow{color:#A9B5D6}

.head{max-width:var(--maxw-narrow)}
/* the globe sits on an axis; its heading belongs on the same one */
.head--mid{margin-inline:auto;text-align:center}
.head--mid .lead{margin-inline:auto}
.head h2{font-size:var(--t-h2);margin-block:14px 16px;text-wrap:balance}

.grid{display:grid;gap:clamp(16px,2vw,26px)}

/* --- 4. Brand ------------------------------------------------------------ */
.brandmark{display:inline-flex;align-items:baseline;gap:.19em;white-space:nowrap;line-height:1}
.brandmark .word{
  font-family:var(--font-script);color:var(--red);
  font-size:1.46em;line-height:1;font-weight:400;
  /* Great Vibes ships in a single weight — a hairline stroke gives it body */
  -webkit-text-stroke:.013em currentColor;
  paint-order:stroke fill;
}
.brandmark .pin{
  width:.5em;height:1.04em;flex:none;color:var(--red);
  transform:translateY(.02em);
}
.brandmark--light .word,.brandmark--light .pin{color:#FF4A44}
.brandmark--inline{vertical-align:baseline}
.section--dark .brandmark--inline .word,.section--dark .brandmark--inline .pin{color:#FF5A54}
.brandmark--inline .word{font-size:1.2em}
.brandmark--inline .pin{width:.4em;height:.84em;transform:translateY(.01em)}

.pin-svg{width:100%;height:100%;display:block;overflow:visible}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:var(--t-small);letter-spacing:.005em;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .2s;
  box-shadow:var(--sh-2);will-change:transform;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--red{--btn-bg:var(--red)}
.btn--blue{--btn-bg:var(--blue)}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--ink);
  border:1.5px solid var(--line-strong);box-shadow:none;
}
.btn--ghost:hover{border-color:var(--ink);box-shadow:var(--sh-1)}
.section--dark .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.28)}
.section--dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--sm{padding:11px 20px;font-size:var(--t-micro)}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:var(--t-micro);font-weight:700;color:var(--ink-2);
  box-shadow:var(--sh-1);
}
.chip svg{width:15px;height:15px;flex:none}
.chip .soon{
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#5F677F;padding:2px 7px;border-radius:var(--r-pill);background:var(--surface-2);
}

/* --- 6. Header ----------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s;
}
.header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,250,247,.72);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  opacity:0;transition:opacity .35s var(--ease),border-color .35s;
}
.header.is-stuck::after{opacity:1;border-bottom-color:var(--line)}
.header .wrap{display:flex;align-items:center;gap:var(--sp-5);width:100%}

.header-brand{display:flex;flex-direction:column;gap:1px;flex:none;font-size:19px}
.header-brand small{
  font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  padding-left:2px;
}
.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);margin-left:auto}
.nav a{
  font-size:var(--t-small);font-weight:600;color:var(--ink-2);
  padding:8px 2px;position:relative;transition:color .2s;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink)}

/* It sat in a solid beige pill and pulled the eye before the navigation did.
   It is glass now: barely there until you look for it. */
.langs{
  display:flex;align-items:center;gap:1px;flex:none;padding:3px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.3);border:1px solid rgba(20,26,44,.06);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.langs button{
  padding:6px 11px;border-radius:var(--r-pill);min-width:50px;min-height:36px;
  font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{background:rgba(255,255,255,.9);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.07)}

.burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:19px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--ink);border-radius:2px;transition:.3s var(--ease);
}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* --- 7. Mobile drawer ---------------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:115;
  background:var(--white-warm);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{opacity:1;transform:none;pointer-events:auto}
.drawer a{
  font-family:var(--font-display);font-size:clamp(1.4rem,6vw,2rem);font-weight:600;
  letter-spacing:-.03em;padding:11px 0;min-height:44px;display:flex;align-items:center;
  border-bottom:1px solid var(--line);
}
.drawer .btn{margin-top:26px;align-self:flex-start}

/* --- 8. Phone device ----------------------------------------------------- */
.device{
  --w:312px;
  width:var(--w);flex:none;position:relative;
  aspect-ratio:312/638;
  border-radius:calc(var(--w) * .143);
  padding:calc(var(--w) * .0345);
  background:linear-gradient(150deg,#F0F1F5 0%,#B9BEC9 14%,#6D7484 34%,#3A404E 52%,#8A909D 74%,#D9DCE3 90%,#8E94A1 100%);
  box-shadow:var(--sh-phone);
  transform:translateZ(0);
}
.device::after{
  content:"";position:absolute;inset:calc(var(--w) * .012);
  border-radius:calc(var(--w) * .133);
  border:1px solid rgba(255,255,255,.34);pointer-events:none;
}
.device__screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--w) * .112);
  background:#F6F8FB;color:var(--ink);
  display:flex;flex-direction:column;
  font-size:calc(var(--w) / 25.5);
}
.device__notch{
  position:absolute;top:calc(var(--w) * .026);left:50%;transform:translateX(-50%);
  width:31%;height:calc(var(--w) * .075);border-radius:var(--r-pill);background:#0A0D14;z-index:6;
}
/* A real screen of the app instead of a painted one: the store screenshot,
   cut out of its frame, under a strip of the app's own ground where the
   status bar would be. Its height follows the picture, not a fixed ratio. */
.device--shot{aspect-ratio:auto;height:auto}
.device--shot .device__screen{display:block;height:auto;background:#FAF8F5;padding-top:calc(var(--w) * .085)}
.device__img{display:block;width:100%;height:auto}
.device__img[hidden]{display:none}
.device--sm{--w:238px}
.device--md{--w:274px}
.device--lg{--w:312px}

/* ---- app chrome ---- */
.ui{display:flex;flex-direction:column;overflow:hidden}
.device .ui{height:100%}
/* Used standalone — outside a phone frame — .ui had no card of its own: on a
   white section that was invisible, on a photograph it looked unfinished. */
.ui{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.device .ui{background:none;border:0;border-radius:0;box-shadow:none}
/* white on a pale photograph needs more than a hairline to sit on */
.section--photo:not(.section--dark) .ui,
.section--photo:not(.section--dark) .card,
.section--photo:not(.section--dark) .day,
.section--photo:not(.section--dark) .chain li{box-shadow:var(--sh-2);border-color:#DCE3EF}

.ui__bar{
  display:flex;align-items:center;gap:.6em;
  padding:calc(var(--w) * .088) 1.05em .55em;background:#fff;flex:none;
}
.ui__burger{width:1.1em;height:.72em;flex:none;position:relative}
.ui__burger::before,.ui__burger::after,.ui__burger i{
  content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:var(--ink);
}
.ui__burger::before{top:0}.ui__burger i{top:50%;margin-top:-.75px;display:block}.ui__burger::after{bottom:0}
.ui__brand{flex:1;text-align:center;font-weight:700;font-size:.95em;letter-spacing:-.01em}
.ui__avatar{
  width:1.75em;height:1.75em;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#F3C7A8,#C98C63);border:1.5px solid #fff;box-shadow:var(--sh-1);
}

.ui__body{flex:1;overflow:hidden;padding:.9em 1.05em .85em;display:flex;flex-direction:column;gap:.72em;background:#fff}
.ui__title{font-family:var(--font-display);font-weight:700;font-size:1.42em;letter-spacing:-.03em;line-height:1.14}
.ui__title .ac{color:var(--blue)}
.ui__sub{font-size:.82em;color:var(--ink-3);line-height:1.35;font-weight:500}
.ui__route{display:flex;align-items:center;gap:.4em;font-size:.88em;font-weight:700;color:var(--ink-2);flex-wrap:wrap}
.ui__route i{font-style:normal;color:var(--ink-3);font-weight:600}

/* ---- timeline ---- */
.ui__steps{display:flex;flex-direction:column;position:relative}
.ui__steps li{display:flex;gap:.7em;padding:.42em 0;position:relative}
.ui__steps li::before{
  content:"";position:absolute;left:1.06em;top:2.4em;bottom:-.3em;width:0;
  border-left:1.5px dashed var(--line-strong);
}
.ui__steps li:last-child::before{display:none}
.ui__ic{
  width:2.12em;height:2.12em;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sky);color:var(--blue);position:relative;z-index:1;
}
.ui__ic svg{width:1.1em;height:1.1em;flex:none}
.ui__ic--blue{background:#E7F0FF;color:#1F5AE0}
.ui__ic--green{background:#E3F6EA;color:#12A150}
.ui__ic--orange{background:#FFF0DC;color:#DB8412}
.ui__ic--purple{background:#F0E9FC;color:#7A3FD0}
.ui__ic--red{background:#FDE9E8;color:#E5231D}
.ui__ic--teal{background:#DFF4F4;color:#0E8C8C}
.ui__steps .t{flex:1;min-width:0;padding-top:.1em}
.ui__steps .t > b{display:block;font-size:.9em;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.ui__steps .t > span{display:block;font-size:.78em;color:var(--ink-3);line-height:1.35;margin-top:.12em}
.ui__steps .m{flex:none;text-align:right;padding-top:.14em;display:flex;flex-direction:column;align-items:flex-end;gap:.3em}
.ui__steps .m em{font-style:normal;font-size:.78em;font-weight:600;color:var(--ink-3);white-space:nowrap}
.pill{
  display:inline-flex;align-items:center;gap:.35em;vertical-align:middle;
  font-size:.72em;font-weight:800;letter-spacing:.01em;
  padding:.25em .6em;border-radius:var(--r-pill);background:#E7F0FF;color:#1F5AE0;white-space:nowrap;
}
.pill svg{width:1em;height:1em;flex:none}
.pill--green{background:#E3F6EA;color:#0D7F3F}
.pill--red{background:#FDE9E8;color:var(--red-ink)}
.pill--gray{background:var(--surface-2);color:var(--ink-2)}

/* ---- cards inside the app ---- */
.ui__card{
  border:1px solid var(--line);border-radius:.85em;padding:.65em .75em;background:#fff;
  display:flex;flex-direction:column;gap:.25em;
}
.ui__row{display:flex;align-items:center;gap:.6em}
.ui__row .t{flex:1;min-width:0}
.ui__row .t b{display:block;font-size:.88em;font-weight:700;letter-spacing:-.012em;line-height:1.25}
.ui__row .t span{display:block;font-size:.76em;color:var(--ink-3);line-height:1.3;margin-top:.1em}
.ui__thumb{width:2.6em;height:2.6em;border-radius:.55em;object-fit:cover;flex:none;background:var(--surface-2)}

/* photo card with caption over it */
.ui__shot{position:relative;border-radius:.8em;overflow:hidden;aspect-ratio:16/9;flex:none}
.ui__shot img{width:100%;height:100%;object-fit:cover}
.ui__shot figcaption{
  position:absolute;left:.65em;right:.65em;bottom:.55em;color:#fff;z-index:2;
  text-shadow:0 1px 6px rgba(7,14,36,.6);
}
.ui__shot figcaption b{display:block;font-size:.9em;font-weight:700;letter-spacing:-.015em}
.ui__shot figcaption span{display:block;font-size:.74em;opacity:.9}
.ui__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,36,0) 34%,rgba(7,14,36,.55) 62%,rgba(7,14,36,.88) 100%)}
.ui__shot .fav{
  position:absolute;top:.5em;right:.5em;width:1.5em;height:1.5em;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:2;color:var(--ink-2);
}
.ui__shot .fav svg{width:.8em;height:.8em}

/* weather strip */
.ui__weather{display:flex;gap:.34em}
.ui__weather div{
  flex:1;text-align:center;padding:.45em .2em;border-radius:.6em;background:var(--surface);
  font-size:.74em;line-height:1.3;
}
.ui__weather div b{display:block;font-size:1.2em;font-weight:800}
.ui__weather div span{color:var(--ink-3)}
.ui__weather div.on{background:#E7F0FF;color:var(--blue-deep)}
.ui__weather div.on span{color:var(--blue)}

/* highlight banner */
.ui__banner{
  display:flex;align-items:center;gap:.6em;padding:.62em .7em;border-radius:.8em;
  background:linear-gradient(100deg,#EAF2FD,#F4EEFD);border:1px solid #DCE7F8;
}
.ui__banner .t b{display:block;font-size:.85em;font-weight:700;letter-spacing:-.012em}
.ui__banner .t span{display:block;font-size:.74em;color:var(--ink-2);margin-top:.08em}

.ui__cta{
  margin-top:auto;text-align:center;font-size:.86em;font-weight:800;letter-spacing:-.01em;
  padding:.7em .8em;border-radius:.8em;background:var(--red);color:#fff;flex:none;
}
.device .ui__cta{cursor:default}
/* the same bar standing on the page is a real button and behaves like one */
button.ui__cta{width:100%;display:block;border:0;cursor:pointer;font-family:inherit;
  transition:background .22s var(--ease),transform .22s var(--ease)}
button.ui__cta:hover{background:#C21B16}
button.ui__cta:active{transform:translateY(1px)}
button.ui__cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- tab bar ---- */
.ui__tabs{
  margin-top:auto;display:flex;justify-content:space-between;gap:.2em;flex:none;
  padding:.5em .7em calc(var(--w) * .028);border-top:1px solid var(--line);background:#fff;
}
.ui__tabs span{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.18em;
  font-size:.62em;font-weight:700;color:var(--ink-3);letter-spacing:-.01em;
}
.ui__tabs svg{width:1.55em;height:1.55em}
.ui__tabs span.on{color:var(--blue)}

/* --- 9. Floating product cards ------------------------------------------- */
.float{
  position:absolute;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--sh-2);
  font-size:var(--t-micro);line-height:1.34;
  max-width:min(84vw,300px);
}
.float b{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.float small{display:block;color:var(--ink-2);font-size:12px;font-weight:600}
.float__dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;position:relative}
.float__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ok);
  opacity:0;animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}

/* rich card: icon + title + copy + optional photo */
.pcard{
  position:absolute;z-index:6;width:min(78vw,232px);
  background:#fff;border-radius:18px;padding:13px 14px;
  border:1px solid rgba(226,231,240,.9);
  box-shadow:0 4px 12px rgba(11,21,51,.07),0 22px 46px rgba(11,21,51,.14);
  display:flex;flex-direction:column;gap:7px;
  transition:transform .6s var(--ease);
}
.pcard__top{display:flex;align-items:center;gap:9px}
.pcard__ic{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#E7F0FF;color:#1F5AE0;
}
.pcard__ic svg{width:14px;height:14px}
.pcard__ic--green{background:#E3F6EA;color:#12A150}
.pcard__ic--orange{background:#FFF0DC;color:#DB8412}
.pcard__ic--purple{background:#F0E9FC;color:#7A3FD0}
.pcard__ic--red{background:#FDE9E8;color:#E5231D}
.pcard__top b{font-size:13px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.pcard__t{font-size:13.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.pcard p{font-size:11.5px;color:var(--ink-3);line-height:1.42;font-weight:500}
.pcard img{width:100%;height:74px;object-fit:cover;border-radius:11px;margin-top:2px}
.pcard .pill{align-self:flex-start}

/* dashed route line linking the scene */
.trace{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.trace path{
  fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:9 11;
  opacity:.85;
}
.trace .anim{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.2s var(--ease);
}
.is-in .trace .anim,.rv.is-in .trace .anim{stroke-dashoffset:0}
.trace circle.node{fill:#fff;stroke:rgba(11,21,51,.1);stroke-width:1}
.trace .pinA,.trace .pinB{fill:var(--red)}

/* --- 10. Hero ------------------------------------------------------------ */
.hero{position:relative;isolation:isolate;padding-top:calc(var(--header-h) + clamp(28px,5vw,56px));padding-bottom:clamp(56px,7vw,110px);overflow:clip}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform:scale(1.06);will-change:transform}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,#FBFAF7 0%,#FBFAF7 26%,rgba(251,250,247,.94) 38%,rgba(251,250,247,.55) 50%,rgba(251,250,247,.06) 66%,rgba(251,250,247,0) 78%),
    linear-gradient(180deg,rgba(251,250,247,.9) 0%,rgba(251,250,247,0) 22%),
    linear-gradient(0deg,rgba(251,250,247,1) 0%,rgba(251,250,247,.97) 4%,rgba(251,250,247,0) 28%);
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(20px,3vw,48px);align-items:center;min-height:min(78vh,700px)}
.hero__copy{position:relative;z-index:2;max-width:640px}
.hero h1{font-size:var(--t-display);line-height:1.02;text-wrap:balance}
.hero h1 .l2{display:block;font-weight:600;color:var(--ink-2);font-size:.86em;letter-spacing:-.03em}
.hero__brandline{display:flex;align-items:baseline;font-size:clamp(2.6rem,1.1rem + 4.4vw,5.1rem);margin-block:.2em .02em}
.hero__sub{font-size:var(--t-lead);font-weight:600;color:var(--ink);margin-top:18px;max-width:34ch;line-height:1.42}
.hero__sub em{font-style:normal;color:var(--ink-2);font-weight:500;display:block}
.hero__text{margin-top:16px;max-width:44ch;color:var(--ink-2);font-size:var(--t-body)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;max-width:420px}
.hero__stores .chip{justify-content:flex-start}
.hero__stores .chip .soon{margin-left:auto}

.hero__stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.hero__stage .device{--w:clamp(232px,25vw,326px)}
.hero .float--live{left:-13%;bottom:1%}
.hero .float--upd{left:-4%;top:-6%}

/* --- 11. Fragmentation (problem) ----------------------------------------- */
.frag{position:relative;margin-top:clamp(34px,5vw,64px)}
.frag__cloud{
  display:flex;flex-wrap:wrap;justify-content:center;gap:30px 24px;
  max-width:880px;margin-inline:auto;
}
.frag__cloud span{
  padding:10px 16px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  font-size:var(--t-small);font-weight:600;box-shadow:var(--sh-1);
  transition:transform .62s var(--ease-soft),opacity .5s var(--ease-soft);
  transition-delay:calc(var(--i,0) * 34ms);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));
}
.frag.is-armed .frag__cloud span{will-change:transform,opacity}
.frag.is-collapsed .frag__cloud span{transform:none;opacity:.5}
.frag__result{
  margin-top:clamp(28px,4vw,52px);display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;transform:translateY(14px);transition:opacity .5s .62s var(--ease-soft),transform .5s .62s var(--ease-soft);
}
.frag.is-collapsed .frag__result{opacity:1;transform:none}
.frag__arrow{width:2px;height:52px;border-radius:2px;background:linear-gradient(180deg,rgba(11,21,51,.12),var(--red));transform-origin:top center;transform:scaleY(0);transition:transform .45s .74s var(--ease-soft)}
.frag.is-collapsed .frag__arrow{transform:scaleY(1)}
.frag__node{
  display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border-radius:var(--r-pill);
  background:var(--navy-900);color:#fff;box-shadow:var(--sh-3);font-size:19px;
}
.frag__node small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93A0C4}

/* --- 13. Feature cards (one request) ------------------------------------- */
.features{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(30px,4vw,54px)}
.fcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-800);
  aspect-ratio:4/5.6;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(14px,1.3vw,20px);color:#fff;isolation:isolate;
  box-shadow:var(--sh-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.fcard img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.fcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,14,36,.05) 0%,rgba(7,14,36,.24) 44%,rgba(7,14,36,.9) 100%);
}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.fcard:hover img{transform:scale(1.07)}
.fcard b{display:block;font-family:var(--font-display);font-size:clamp(.98rem,.92rem + .26vw,1.14rem);font-weight:700;letter-spacing:-.022em;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.fcard p{font-size:var(--t-micro);color:rgba(255,255,255,.82);margin-top:5px;line-height:1.42}
.fcard i{
  position:absolute;top:clamp(12px,1.2vw,18px);left:clamp(14px,1.3vw,20px);
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
}
.fcard i svg{width:15px;height:15px;stroke:#fff}

/* --- 14. AI thinking ----------------------------------------------------- */
.think{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(26px,4vw,68px);align-items:center;margin-top:clamp(30px,4vw,52px)}
.prompt{
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);
}
.prompt .label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prompt__q{font-family:var(--font-display);font-size:clamp(1.06rem,.98rem + .5vw,1.42rem);font-weight:600;letter-spacing:-.02em;line-height:1.4;margin-top:12px}
.prompt__q span{display:block}
.prompt__caret{display:inline-block;width:2px;height:1em;background:var(--red);vertical-align:-2px;animation:blink 1.05s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.pipe{display:flex;flex-direction:column;gap:2px;counter-reset:s}
.pipe li{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-md);
  border:1px solid transparent;
  opacity:.34;filter:saturate(.2);
  transition:opacity .5s var(--ease),background .5s var(--ease),filter .5s,border-color .5s,transform .5s var(--ease);
}
.pipe li .ic{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3);
  transition:background .4s,color .4s;
}
.pipe li .ic svg{width:16px;height:16px}
.pipe li b{font-size:var(--t-small);font-weight:700;letter-spacing:-.01em}
.pipe li small{display:block;color:var(--ink-3);font-size:var(--t-micro);font-weight:500}
.pipe li .tick{margin-left:auto;color:var(--ok);opacity:0;transform:scale(.6);transition:.4s var(--ease)}
.pipe li.is-on{opacity:1;filter:none;background:#fff;border-color:var(--line);box-shadow:var(--sh-1)}
.pipe li.is-on .ic{background:var(--sky-2);color:var(--blue-deep)}
.pipe li.is-done .ic{background:#E4F6EC;color:var(--ok)}
.pipe li.is-done .tick{opacity:1;transform:none}

.think__out{
  margin-top:clamp(26px,3.4vw,44px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-2);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.think__out.is-on{opacity:1;transform:none}
.think__outhead{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:16px clamp(18px,2vw,26px);border-bottom:1px solid var(--line);background:var(--surface);
}
.think__outhead b{font-family:var(--font-display);font-size:var(--t-h4);letter-spacing:-.02em}
.think__outhead .k{margin-left:auto;font-size:var(--t-small);font-weight:700;color:var(--ink-2)}
.trip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.trip > div{background:#fff;padding:clamp(16px,1.9vw,22px);display:flex;flex-direction:column;gap:6px}
.trip .d{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red-ink)}
.trip b{font-size:var(--t-small);font-weight:700;letter-spacing:-.01em}
.trip p{font-size:var(--t-micro);color:var(--ink-2);line-height:1.5}

/* --- 15. Split section (image + phone + copy) ---------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,76px);align-items:stretch}
/* the picture fills the row instead of floating in it: the two columns start
   and end together, which is what "съехало" kept meaning */
.split__media{display:flex;flex-direction:column}
.split__media > .scene{flex:1;height:auto}
.split__media > .scene--wide{flex:0 0 auto;align-self:center;width:100%}

.split--rev .split__media{order:2}
.split__copy h2{font-size:var(--t-h2);margin-block:14px 18px;text-wrap:balance}
.split__media{position:relative}

.scene{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/3.4;box-shadow:var(--sh-3);background:var(--navy-800);isolation:isolate;
}
.scene > img{width:100%;height:100%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,36,.28) 0%,rgba(7,14,36,.02) 45%,rgba(7,14,36,.42) 100%)}
.scene__device{position:absolute;z-index:4;right:-2%;bottom:-9%}
/* a wide frame keeps a panorama whole instead of cropping it to a portrait */
.scene--wide{aspect-ratio:950/436}
.scene--wide::after{background:linear-gradient(180deg,rgba(7,14,36,.14) 0%,rgba(7,14,36,0) 42%,rgba(7,14,36,.2) 100%)}

/* rain overlay — Amsterdam weather swap */
.scene > img{transition:filter 1s var(--ease-soft),transform 1s var(--ease-soft)}
.scene.is-rain > img{filter:saturate(.66) brightness(.78) contrast(1.06)}
.rainfx{
  position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease-soft);
}
.scene.is-rain .rainfx{opacity:1}
.rainfx::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,44,88,.42),rgba(24,44,88,.10) 55%,rgba(24,44,88,.34));
}
.rainfx i{
  position:absolute;inset:-70% -45%;display:block;
  animation:rainfall 1.6s linear infinite;will-change:transform;
}
.rainfx i:nth-child(1){background-image:radial-gradient(1px 11px at 50% 50%,rgba(255,255,255,.58),rgba(255,255,255,0));background-size:13px 96px;animation-duration:1.35s}
.rainfx i:nth-child(2){background-image:radial-gradient(1px 8px at 50% 50%,rgba(255,255,255,.38),rgba(255,255,255,0));background-size:18px 74px;animation-duration:1.75s;animation-delay:-.6s}
.rainfx i:nth-child(3){background-image:radial-gradient(2px 15px at 50% 50%,rgba(255,255,255,.20),rgba(255,255,255,0));background-size:33px 132px;animation-duration:2.3s;animation-delay:-1.2s}
@keyframes rainfall{
  from{transform:rotate(4deg) translate3d(0,calc(var(--fall,96px) * -1),0)}
  to{transform:rotate(4deg) translate3d(0,0,0)}
}
.scene--tall{aspect-ratio:4/4.2}
.scene--stack{aspect-ratio:4/3.9}

.benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:26px}
.benefits li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-small);font-weight:600;color:var(--ink-2);line-height:1.44}
.benefits svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--ok)}
.section--dark .benefits li{color:#B7C2DE}

/* --- 16. Timeline (live agent) ------------------------------------------- */
.tl{position:relative;margin-top:26px;padding-left:30px}
.tl::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.13);
}
.tl__prog{
  position:absolute;left:7px;top:8px;width:2px;border-radius:2px;background:var(--red);
  height:var(--p,0%);transition:height .18s linear;
}
.tl li{position:relative;padding:11px 0;display:flex;gap:16px;align-items:baseline;opacity:.36;transition:opacity .28s var(--ease)}
.tl li::before{
  content:"";position:absolute;left:-30px;top:19px;width:16px;height:16px;border-radius:50%;
  background:var(--navy-900);border:2px solid rgba(255,255,255,.2);
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.tl li.is-on{opacity:1}
.tl li.is-on::before{border-color:var(--red);background:var(--red);transform:scale(1.1)}
.tl__t{font-family:var(--font-mono);font-size:var(--t-small);font-weight:600;color:#8E9CC4;flex:none;width:52px}
.tl li.is-on .tl__t{color:#fff}
.tl__e{font-size:var(--t-body);font-weight:600;color:#D6DEF2}

.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(30px,3.6vw,52px)}
.note{
  display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateX(16px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.note.is-on{opacity:1;transform:none}
.note i{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(229,35,29,.18);color:#FF8E88}
.note i svg{width:17px;height:17px}
.note b{display:block;font-size:var(--t-small);font-weight:700;color:#fff;letter-spacing:-.015em}
.note small{color:#A9B5D4;font-size:var(--t-micro);line-height:1.45;display:block;margin-top:3px}
.notes .note:nth-child(2) i{background:rgba(31,90,224,.22);color:#93B7F7}
.notes .note:nth-child(3) i{background:rgba(18,161,80,.2);color:#8FE3C2}
.notes .note:nth-child(4) i{background:rgba(219,132,18,.22);color:#F5C77E}

/* --- 17. Replan demo ----------------------------------------------------- */
.replan{
  margin-top:clamp(28px,4vw,50px);border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-2);
}
.replan__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:16px clamp(18px,2vw,26px);border-bottom:1px solid var(--line);background:var(--surface);
}
.replan__alert{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--red-soft);color:var(--red-ink);font-size:var(--t-micro);font-weight:800;letter-spacing:.02em;
  opacity:0;transform:scale(.94);transition:.45s var(--ease);
}
.replan.is-on .replan__alert{opacity:1;transform:none}
.replan__bar .btn{margin-left:auto}
.legs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.leg{background:#fff;padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:8px;position:relative;transition:background .5s var(--ease)}
.leg__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--sky);color:var(--blue-deep)}
.leg:nth-child(2) .leg__ic{background:#E3F6EA;color:#0D7F3F}
.leg:nth-child(3) .leg__ic{background:#FFF0DC;color:#B0741E}
.leg:nth-child(4) .leg__ic{background:#F0E9FC;color:#6A34BC}
.leg__ic svg{width:19px;height:19px}
.leg b{font-size:var(--t-small);font-weight:700;letter-spacing:-.015em}
.leg .time{font-family:var(--font-mono);font-size:var(--t-body);font-weight:700;letter-spacing:-.02em}
.leg .old{text-decoration:line-through;color:var(--ink-3);font-size:var(--t-small);margin-right:7px;font-weight:500}
.leg .new{color:var(--blue);opacity:0;transition:opacity .5s .2s var(--ease)}
.leg .note2{font-size:var(--t-micro);color:var(--ink-3);line-height:1.4;min-height:2.6em}
.replan.is-on .leg--changed{background:#F5F9FF}
.replan.is-on .leg .new{opacity:1}
.replan.is-on .leg--changed .old{display:inline}
.replan:not(.is-on) .leg .old{color:var(--ink);text-decoration:none;font-size:var(--t-body);font-weight:700;font-family:var(--font-mono)}
.replan__foot{
  padding:clamp(18px,2.2vw,26px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;background:var(--surface);
}
.replan__foot b{font-family:var(--font-display);font-size:var(--t-h4);letter-spacing:-.02em}
.replan__foot p{font-size:var(--t-small);color:var(--ink-2);max-width:52ch}

/* --- 18. Layover --------------------------------------------------------- */
.layover{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(26px,4vw,64px);align-items:center}
.budget{margin-top:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:clamp(18px,2.2vw,26px);box-shadow:var(--sh-1)}
.budget__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.budget__top b{font-family:var(--font-display);font-size:var(--t-h3);letter-spacing:-.03em}
.budget__track{height:12px;border-radius:var(--r-pill);background:var(--surface-2);display:flex;overflow:hidden}
.budget__track span{height:100%;transition:width 1s var(--ease)}
.budget__key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.budget__key i{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-micro);font-weight:700;color:var(--ink-2);font-style:normal}
.budget__key i::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c)}

.steps{display:flex;flex-direction:column;gap:0;margin-top:8px}
.steps li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .t{font-family:var(--font-mono);font-size:var(--t-small);font-weight:700;color:var(--red-ink);width:52px;flex:none}
.steps .b{font-size:var(--t-small);font-weight:700}
.steps .s{font-size:var(--t-micro);color:var(--ink-3);display:block;font-weight:500}

/* --- 19. EV route -------------------------------------------------------- */
.route{margin-top:clamp(28px,4vw,52px);border-radius:var(--r-xl);overflow:hidden;position:relative;box-shadow:var(--sh-3);background:var(--navy-900)}
.route__img{position:absolute;inset:0}
.route__img img{width:100%;height:100%;object-fit:cover;opacity:.6;filter:saturate(1.15)}
.route__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,36,.52),rgba(7,14,36,.86))}
.route__in{position:relative;padding:clamp(24px,3.4vw,52px);color:#fff}
.route__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 34px}
.route__km{font-family:var(--font-display);font-size:clamp(2.2rem,1.2rem + 3.2vw,4rem);font-weight:700;letter-spacing:-.045em;line-height:.95}
.route__km small{font-size:.3em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93A0C4;display:block;margin-top:10px}
.route__line{position:relative;margin-top:clamp(28px,3.4vw,48px);padding-top:34px}
.route__track{position:absolute;top:16px;left:0;right:0;height:2px;background:rgba(255,255,255,.14);border-radius:2px}
.route__fill{position:absolute;top:16px;left:0;height:2px;background:linear-gradient(90deg,var(--red),#FF8E62);border-radius:2px;width:var(--p,0%);transition:width .18s linear}
.route__nodes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.route__node{position:relative;text-align:left;padding-right:8px}
.route__node::before{
  content:"";position:absolute;top:-26px;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--navy-900);border:2px solid rgba(255,255,255,.24);transition:.28s var(--ease);
}
.route__node.is-on::before{border-color:var(--red);background:var(--red);box-shadow:0 0 0 5px rgba(229,35,29,.22)}
.route__node b{display:block;font-size:var(--t-small);font-weight:700;letter-spacing:-.01em}
.route__node span{display:block;font-size:11px;color:#93A0C4;font-weight:600;line-height:1.4;margin-top:3px}
.route__node.is-on span{color:#B7C2DE}
.route__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:clamp(26px,3vw,44px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.12)}
.route__stats div b{display:block;font-family:var(--font-display);font-size:clamp(1.15rem,1rem + .7vw,1.62rem);font-weight:700;letter-spacing:-.03em}
.route__stats div span{font-size:var(--t-micro);color:#93A0C4;font-weight:600}

/* --- 20. Paris / itinerary cards ----------------------------------------- */
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);margin-top:26px}
.day{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:clamp(18px,2.1vw,26px);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:9px}
.day__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:3px}
.day__ic svg{width:18px;height:18px}
.day:nth-child(1) .day__ic{background:#FFF0DC;color:#B0741E}
.day:nth-child(2) .day__ic{background:#F0E9FC;color:#6A34BC}
.day:nth-child(3) .day__ic{background:#E7F0FF;color:#1F5AE0}
.day .d{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red-ink)}
.day b{font-size:var(--t-h4);font-weight:700;letter-spacing:-.022em;line-height:1.2}
.day p{font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
@media (max-width:560px){
  .tags{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tags > span{justify-content:flex-start}
}
.tags > span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:var(--t-micro);font-weight:700;color:var(--ink-2);
  box-shadow:var(--sh-1);
}
.tags > span svg{width:13px;height:13px;color:var(--red);flex:none}
.tags > span:nth-child(6n+2) svg{color:#B0741E}
.tags > span:nth-child(6n+3) svg{color:#6A34BC}
.tags > span:nth-child(6n+4) svg{color:#0D7F3F}
.tags > span:nth-child(6n+5) svg{color:#1F5AE0}
.tags > span:nth-child(6n+0) svg{color:#0B7B7B}
.section--dark .tags > span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#C5CFE6}

/* --- 21. Amsterdam chain ------------------------------------------------- */
.chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
.chain li{
  border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),border-color .4s;
}
.chain li .ic{width:36px;height:36px;border-radius:11px;background:var(--sky);color:var(--blue-deep);display:grid;place-items:center}
.chain li .ic svg{width:18px;height:18px}
.chain li b{font-size:var(--t-small);font-weight:700;letter-spacing:-.018em;line-height:1.25}
.chain li span{font-size:var(--t-micro);color:var(--ink-2);font-weight:500;line-height:1.45}
.chain li:nth-child(2) .ic{background:#E3F6EA;color:#0D7F3F}
.chain li:nth-child(3) .ic{background:#F0E9FC;color:#6A34BC}
.chain li:nth-child(4) .ic{background:#FFF0DC;color:#B0741E}
.chain li:nth-child(5) .ic{background:#DFF4F4;color:#0B7B7B}
@media (max-width:900px){ .chain{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .chain{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chain li.is-alt{border-color:var(--blue);background:#F5F9FF}
.chain li{transition:border-color .55s var(--ease-soft),background-color .55s var(--ease-soft),opacity .26s var(--ease-soft),transform .26s var(--ease-soft)}
.chain li.is-swap{opacity:0;transform:translateY(-7px) scale(.96)}
.weatherswap{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.weatherswap .btn{flex:none}

/* --- 22. World ----------------------------------------------------------- */
.world{
  position:relative;overflow:hidden;margin-top:clamp(26px,3.4vw,44px);
  margin-inline:calc(50% - 50vw);width:100vw;
}
.world__bg{position:absolute;inset:0}
.world__bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.world__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 42%,rgba(7,14,36,.2),rgba(7,14,36,.88) 74%),linear-gradient(180deg,var(--navy-900),rgba(7,14,36,0) 16%,rgba(7,14,36,0) 84%,var(--navy-900))}
.world__in{position:relative;padding:clamp(26px,3.4vw,54px) var(--gutter);max-width:var(--maxw);margin-inline:auto}
.map{position:relative;width:100%;max-width:940px;margin-inline:auto}
.map svg{width:100%;height:auto;display:block}
.map .dots circle{fill:rgba(255,255,255,.16)}
.pinpt{cursor:pointer}
.pinpt circle.hit{fill:transparent}
.pinpt circle.core{fill:var(--red);transition:r .35s var(--ease)}
.pinpt circle.halo{fill:none;stroke:var(--red);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.pinpt.is-on circle.halo{animation:halo 2.6s var(--ease) infinite}
.pinpt.is-on circle.core{r:4.6}
.pinpt text{fill:#fff;font:600 9px var(--font-ui);opacity:0;transition:opacity .3s}
.pinpt.is-on text,.pinpt:hover text{opacity:1}

/* capital-city garland — lights come on and fade out around the globe */
.spark g{opacity:0;animation:sparkle 8.4s linear infinite;animation-delay:var(--d,0s)}
.spark .s-core{fill:var(--c,#fff)}
.spark .s-halo{
  fill:none;stroke:var(--c,#fff);stroke-width:1.1;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:sparkHalo 8.4s linear infinite;animation-delay:var(--d,0s);
}
.spark text{fill:rgba(255,255,255,.86);font:600 8.5px var(--font-ui);letter-spacing:.02em}
@keyframes sparkle{0%{opacity:0}4%{opacity:1}20%{opacity:1}30%{opacity:0}100%{opacity:0}}
@keyframes sparkHalo{
  0%{transform:scale(.5);opacity:.75}
  22%{transform:scale(3);opacity:0}
  100%{transform:scale(3);opacity:0}
}
@keyframes halo{0%{transform:scale(.5);opacity:.85}70%,100%{transform:scale(3.4);opacity:0}}
.intents{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:clamp(24px,3vw,40px)}
.intents button{
  padding:10px 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#C5CFE6;
  font-size:var(--t-micro);font-weight:700;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.intents button:focus-visible{outline:2px solid #FF6A63;outline-offset:3px}
.intents button:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateY(-2px)}
.intents button.is-on{background:var(--red);border-color:var(--red);color:#fff}
.world__answer{
  margin-top:clamp(22px,2.6vw,34px);max-width:720px;margin-inline:auto;text-align:center;
  min-height:3.4em;color:#B7C2DE;font-size:var(--t-lead);line-height:1.5;
}
.world__answer b{color:#fff;font-weight:700}

/* --- 23. Proactive ------------------------------------------------------- */
.suggest{
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);
  padding:clamp(18px,2.2vw,26px);max-width:520px;
}
.suggest__head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.suggest__av{width:34px;height:34px;border-radius:11px;background:var(--navy-900);display:grid;place-items:center;flex:none}
.suggest__av .brandmark{font-size:11px}
.suggest__head b{font-size:var(--t-small);font-weight:800}
.suggest__head small{display:block;font-size:11px;color:var(--ink-3);font-weight:600}
.suggest p{font-size:var(--t-body);line-height:1.55;color:var(--ink)}
.suggest p + p{margin-top:9px;color:var(--ink-2)}
.suggest__places{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.suggest__places span{padding:7px 13px;border-radius:var(--r-pill);background:var(--surface);font-size:var(--t-micro);font-weight:700;color:var(--ink-2)}
.suggest__act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.consent{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.consent span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:var(--t-micro);font-weight:700;color:#C5CFE6;
}
.consent svg{width:14px;height:14px;color:var(--ok)}

/* --- 24. Community ------------------------------------------------------- */
.feed{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.5vw,18px);margin-top:26px}
.post{
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);padding:clamp(16px,1.8vw,22px);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:10px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.post__top{display:flex;align-items:center;gap:11px}
.av{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(140deg,var(--a1),var(--a2));
}
.post__top b{display:block;font-size:var(--t-small);font-weight:700}
.post__top small{display:block;font-size:11px;color:var(--ink-3);font-weight:600}
.post q{font-size:var(--t-body);line-height:1.5;quotes:"«" "»";display:block}
.post__meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px}
.post__meta span{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--surface);padding:6px 11px;border-radius:var(--r-pill)}

/* --- 26. Why grid -------------------------------------------------------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,4vw,52px)}
.why article{
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.why article:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.why .ic{width:44px;height:44px;border-radius:14px;background:var(--sky);color:var(--blue-deep);display:grid;place-items:center}
/* six reasons, six colours — one tint for all six read as a single grey idea */
.why article:nth-child(1) .ic{background:#E7F0FF;color:#1F5AE0}
.why article:nth-child(2) .ic{background:#FDE9E8;color:#C21B16}
.why article:nth-child(3) .ic{background:#FFF0DC;color:#B0741E}
.why article:nth-child(4) .ic{background:#F0E9FC;color:#6A34BC}
.why article:nth-child(5) .ic{background:#E3F6EA;color:#0D7F3F}
.why article:nth-child(6) .ic{background:#DFF4F4;color:#0B7B7B}
.why .ic svg{width:21px;height:21px}
.why h3{font-size:var(--t-h4);letter-spacing:-.025em}
.why p{font-size:var(--t-small);color:var(--ink-2);line-height:1.55}

/* --- 28. Final CTA ------------------------------------------------------- */
.cta{position:relative;isolation:isolate;overflow:clip;color:#fff;text-align:center}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,36,1) 0,rgba(7,14,36,.88) 150px,rgba(7,14,36,.82) 45%,rgba(7,14,36,.93))}
.cta .wrap{padding-block:clamp(80px,10vw,168px)}
.cta h2{font-size:var(--t-h2);text-wrap:balance;max-width:22ch;margin-inline:auto}
.cta__brand{display:flex;justify-content:center;align-items:baseline;font-size:clamp(2.1rem,1.1rem + 3.2vw,3.9rem);margin-block:.22em .04em}
.cta p{margin-top:16px;color:#D9E1F1;font-size:var(--t-lead);max-width:52ch;margin-inline:auto}
.cta__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}

/* the contact card, on the closing screen rather than in a section of its own */
.cta__card{
  margin:clamp(34px,4vw,56px) auto 0;max-width:640px;text-align:left;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.cta__row{display:flex;gap:15px;align-items:center;padding:15px clamp(16px,2vw,24px);
  border-bottom:1px solid rgba(255,255,255,.12)}
.cta__row:last-child{border-bottom:0}
.cta__ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff}
.cta__ic svg{width:17px;height:17px}
.cta__app{width:36px;height:36px;border-radius:10px;flex:none;object-fit:cover}
.cta__row small{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#A9B5D4;margin-bottom:3px}
.cta__row b,.cta__row a{font-size:var(--t-small);font-weight:700;letter-spacing:-.012em;color:#fff;word-break:break-word}
.cta__row a{display:inline-block;padding-block:9px;margin-block:-7px}
.cta__row a:hover{color:#FF8E88}
@media (max-width:560px){ .cta__card{margin-inline:0} }

/* --- 29. Contact + footer ------------------------------------------------ */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,64px);align-items:start}
/* Three blocks were marked .card and the class had never been written, so
   they rendered as loose text with nothing holding them. */
.card{
  border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  padding:clamp(16px,1.9vw,22px);box-shadow:var(--sh-1);
}
.card > b{letter-spacing:-.015em}
.section--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}

.card-info{border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.card-info__row{display:flex;gap:16px;padding:18px clamp(18px,2vw,26px);border-bottom:1px solid var(--line);align-items:flex-start}
.card-info__row:last-child{border-bottom:0}
.card-info__row .ic{width:34px;height:34px;border-radius:11px;background:var(--surface);color:var(--ink-2);display:grid;place-items:center;flex:none}
.card-info__row .ic svg{width:16px;height:16px}
.card-info__row .ic--app{border-radius:10px;padding:0;background:none;object-fit:cover}
.card-info__row small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.card-info__row b,.card-info__row a{font-size:var(--t-body);font-weight:700;letter-spacing:-.01em;word-break:break-word}
.card-info__row a:hover{color:var(--red)}
.card-info__row a{display:inline-block;padding-block:11px;margin-block:-8px}

.footer{background:var(--navy-900);color:#93A0C4;padding-block:clamp(48px,6vw,84px) 32px}
.footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(28px,4vw,64px)}
.footer__brand{font-size:24px;display:flex;flex-direction:column;gap:4px}
.footer__brand small{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7682A7}
.footer__brand p{font-size:var(--t-small);margin-top:14px;max-width:34ch;line-height:1.55}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer__cols b{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer__cols a{display:block;font-size:var(--t-small);padding:5px 0;transition:color .2s}
.footer__cols a:hover{color:#fff}
@media (hover:none),(max-width:760px){
  .footer__cols a{display:flex;align-items:center;min-height:44px;padding:6px 0}
}
.footer__bot{
  margin-top:clamp(34px,4vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:var(--t-micro);
}
.footer__bot button:hover{color:#fff}
.footer__bot button{min-height:44px;display:inline-flex;align-items:center}

/* --- 30. Modal ----------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(7,14,36,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__box{
  width:min(520px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  background:var(--white-warm);border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);
  box-shadow:var(--sh-3);transform:translateY(14px) scale(.98);transition:transform .35s var(--ease);
}
.modal.is-open .modal__box{transform:none}
.modal__box h3{font-size:var(--t-h3);margin-bottom:8px}
.modal__box > p{font-size:var(--t-small);color:var(--ink-2)}
.modal__close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);transition:background .25s,color .25s}
.modal__close:hover{background:var(--ink);color:#fff}
.modal__box{position:relative}

.field{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.field label{font-size:var(--t-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{
  padding:13px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);background:#fff;
  font-size:var(--t-body);transition:border-color .2s,box-shadow .2s;width:100%;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,90,224,.13)}
.field textarea{resize:vertical;min-height:84px}
.field .err{font-size:var(--t-micro);color:var(--red-ink);font-weight:700;display:none}
.field.is-err input,.field.is-err textarea{border-color:var(--red)}
.field.is-err .err{display:block}
.segs{display:flex;gap:8px;flex-wrap:wrap}
.segs button{
  padding:11px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:#fff;
  font-size:var(--t-small);font-weight:700;color:var(--ink-2);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.segs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.modal .btn{width:100%;margin-top:22px}
.modal__note{font-size:11px;color:var(--ink-3);margin-top:14px;line-height:1.5}
.modal__note a{text-decoration:underline}
.modal__ok{text-align:center;padding:14px 0}
.modal__ok .tickbig{width:56px;height:56px;border-radius:50%;background:#E4F6EC;color:var(--ok);display:grid;place-items:center;margin:0 auto 16px}

/* --- 31. Cookie banner --------------------------------------------------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:190;padding:0 var(--gutter) max(16px,env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .5s var(--ease);
}
.cookie.is-open{transform:none}
.cookie__box{
  max-width:var(--maxw);margin-inline:auto;
  background:rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:clamp(18px,2.2vw,26px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 26px;align-items:center;
}
.cookie__box p{font-size:var(--t-small);color:var(--ink-2);max-width:66ch}
.cookie__box b{display:block;font-family:var(--font-display);font-size:var(--t-h4);color:var(--ink);margin-bottom:5px;letter-spacing:-.02em}
.cookie__act{display:flex;flex-wrap:wrap;gap:9px}
.cookie__act .btn{white-space:nowrap}
.prefs{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.pref{
  display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;
}
.pref b{display:block;font-size:var(--t-small);font-weight:700}
.pref span{display:block;font-size:var(--t-micro);color:var(--ink-3);line-height:1.45;margin-top:2px}
.pref .t{flex:1}
.switch{
  --on:var(--ok);
  width:44px;height:26px;border-radius:var(--r-pill);background:var(--line-strong);flex:none;
  position:relative;transition:background .3s var(--ease);margin-top:2px;
}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .3s var(--ease)}
.switch[aria-checked="true"]{background:var(--on)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.switch[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* --- 32. Toast ----------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:210;
  padding:13px 22px;border-radius:var(--r-pill);background:var(--navy-900);color:#fff;
  font-size:var(--t-small);font-weight:700;box-shadow:var(--sh-3);
  transition:transform .45s var(--ease),opacity .3s var(--ease),visibility .45s;
  max-width:calc(100vw - 40px);text-align:center;opacity:0;visibility:hidden;
}
.toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible}

/* --- 33. Reveal ---------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}
/* The feature cards live in a horizontal carousel on a phone; sliding them
   vertically on the way in fights the direction the reader is already moving
   them. They fade, and the only movement left is the one the thumb makes. */
.fcard.rv{transform:none}

.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}
.skip{
  position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:var(--r-sm);font-size:var(--t-small);font-weight:700;transition:top .25s;
}
.skip:focus{top:12px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .features{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  /* eight links no longer fit beside the wordmark — hand over to the drawer */
  .nav{display:none}
  .burger{display:flex}
  .langs{margin-left:auto}
}

@media (max-width:1024px){
  :root{--header-h:64px}
  /* thumbs, not cursors: the chips become a real target below the desktop nav */
  .langs{padding:2px}
  .langs button{min-height:44px;min-width:52px}
  .hero .wrap{grid-template-columns:1fr;min-height:0;gap:clamp(26px,5vw,44px)}
  .hero__media img{object-position:60% 46%}
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(251,250,247,.97) 0%,rgba(251,250,247,.92) 42%,rgba(251,250,247,.34) 62%,rgba(251,250,247,.02) 80%),
      linear-gradient(0deg,rgba(251,250,247,.98) 0%,rgba(251,250,247,0) 22%);
  }
  .hero__copy{max-width:none}
  .hero__stage{min-height:0}
  .hero .float--live{left:0;bottom:2%}
  .hero .float--upd{display:none}
  .split,.think,.layover,.contact{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .scene__device{right:5%;bottom:-4%}
  .legs{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
  .days{grid-template-columns:1fr}
}

@media (max-width:760px){
  .features{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(214px,72vw);
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;
    scrollbar-width:none;
  }
  .features::-webkit-scrollbar{display:none}
  .fcard{scroll-snap-align:center;aspect-ratio:4/5.1}
  .map{overflow:hidden}
  .map svg{width:190%;max-width:none;margin-left:-45%}
  .intents button{flex:1 1 44%}
  .feed{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .trip{grid-template-columns:1fr}
  .cookie__box{grid-template-columns:1fr}
  .cookie__act .btn{flex:1 1 auto}
  .layover .steps{margin-top:22px}
  .scene{aspect-ratio:4/3.4}
  .scene--stack{aspect-ratio:16/10;margin-bottom:0}
  .scene--tall{aspect-ratio:4/3.4}
  /* the panorama stays a panorama at every width */
  .scene--wide{aspect-ratio:950/436}
  .scene__device{position:relative;right:auto;bottom:auto;margin:-9% auto 0;display:block;--w:min(226px,58vw)}
  .split__media{display:flex;flex-direction:column}
  .hero__stage .device{--w:min(272px,68vw)}
}

@media (max-width:560px){
  :root{--sp-section:clamp(58px,13vw,80px)}
  .legs{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
  .cta__act .btn{width:100%}
  .frag__cloud span b{font-size:var(--t-micro)}
  .frag__cloud span{padding:7px 13px 7px 7px;gap:7px}
  .frag__ic{width:22px;height:22px}
  .frag__ic svg{width:12px;height:12px}
  .float{max-width:min(88vw,268px);padding:11px 14px}
  .modal__box{padding:22px 18px}
}

@media (max-width:380px){
  .hero__brandline{font-size:clamp(2.1rem,14vw,2.9rem)}
  .device--lg,.hero__stage .device{--w:min(248px,74vw)}
}

@media (hover:none){
  .btn:hover,.fcard:hover,.post:hover,.why article:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
  .hero__media img{transform:none}
  .rainfx i{display:none}
  .spark g{opacity:.82;animation:none}
  .spark .s-halo{animation:none;opacity:.4}
}

@media print{
  .header,.cookie,.modal,.toast,.drawer{display:none!important}
  body{background:#fff}
}

/* phone primary action row */
.ui__cta{
  margin-top:auto;text-align:center;font-size:.86em;font-weight:800;letter-spacing:-.01em;
  padding:.72em .8em;border-radius:.85em;background:var(--red);color:#fff;
}

/* full-width notification row (Live agent) */
@media (max-width:1024px){ .notes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .notes{grid-template-columns:1fr} }
.notes .note{align-items:flex-start}

/* CTA over photography — force light button treatment */
.cta .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.07)}
.cta .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.cta__media::after{background:linear-gradient(180deg,rgba(7,14,36,1) 0,rgba(7,14,36,.88) 150px,rgba(7,14,36,.82) 45%,rgba(7,14,36,.93))}

/* ---- request bubble + ready row inside the hero phone ---- */
.ui__ask{
  background:var(--surface);border-radius:.85em;padding:.62em .75em;
  border:1px solid var(--line);
}
.ui__asklab{
  display:block;font-size:.68em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.24em;
}
.ui__ask p{font-size:.9em;font-weight:600;line-height:1.35;letter-spacing:-.012em}
.ui__done{display:flex;align-items:center;gap:.5em}
.ui__done em{font-style:normal;font-size:.76em;color:var(--ink-3);font-weight:600}
.ui__tabs span i{font-style:normal}

/* globe motion */
.map .flyer{filter:drop-shadow(0 0 5px rgba(229,35,29,.55))}
.map .meridians ellipse{will-change:auto}
@media (prefers-reduced-motion:reduce){ .map .flyer{display:none} }

/* --- photographic section backdrop (used to break up the white) ---------- */
.section--photo{position:relative;isolation:isolate;overflow:clip}
/* Every seam on this page is a ramp rather than a line, and the ramp is
   exactly as tall as the section's own padding — so it has faded to nothing
   before the first word of copy sits on it. A light section keeps the cream
   ground it already has; one that meets a dark screen starts (or ends) in
   navy instead and lifts out of it. */
.section{
  --edge:var(--sp-section);
  --fade-top:linear-gradient(180deg,rgba(251,250,247,1) 0%,rgba(251,250,247,.55) 38%,rgba(251,250,247,0) 100%);
  --fade-bot:linear-gradient(0deg, rgba(251,250,247,1) 0%,rgba(251,250,247,.55) 38%,rgba(251,250,247,0) 100%);
}
/* Navy fading straight to cream passes through grey and looks like smoke.
   It goes out through dusk blue instead, and the section it lands in opens
   its padding to give the ramp somewhere to happen. */
.section--dark + .section:not(.section--dark){
  --edge:calc(var(--sp-section) * 1.6);
  padding-top:calc(var(--sp-section) * 1.6);
  --fade-top:linear-gradient(180deg,
    rgba(7,14,36,1) 0%,rgba(10,21,54,.9) 13%,rgba(19,38,88,.6) 33%,
    rgba(33,60,124,.28) 55%,rgba(52,86,158,.09) 76%,rgba(70,108,180,0) 100%);
}
.section:not(.section--dark):has(+ .section--dark),
.section:not(.section--dark):has(+ .cta){
  --edge:calc(var(--sp-section) * 1.6);
  padding-bottom:calc(var(--sp-section) * 1.6);
  --fade-bot:linear-gradient(0deg,
    rgba(7,14,36,1) 0%,rgba(10,21,54,.9) 13%,rgba(19,38,88,.6) 33%,
    rgba(33,60,124,.28) 55%,rgba(52,86,158,.09) 76%,rgba(70,108,180,0) 100%);
}
.section--photo:not(.section--dark)::before,
.section--photo:not(.section--dark)::after{
  content:"";position:absolute;left:0;right:0;height:var(--edge);z-index:-1;pointer-events:none;
}
.section--photo:not(.section--dark)::before{top:0;background:var(--fade-top)}
.section--photo:not(.section--dark)::after{bottom:0;background:var(--fade-bot)}
.section__bg{position:absolute;inset:0;z-index:-2}
/* The photography is the point. It was washed to 93% white and might as well
   not have been there; it now carries colour, and the veil only opens where
   no copy sits — the first and last 8% of a section, which is padding. */
.section__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.18) contrast(1.04)}
.section__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(251,250,247,.66) 0,
    rgba(251,250,247,.91) 54px,
    rgba(251,250,247,.91) calc(100% - 110px),
    rgba(251,250,247,.68) 100%);
}
.section--photo.section--surface .section__bg::after{
  background:linear-gradient(180deg,
    rgba(244,246,250,.66) 0,
    rgba(244,246,250,.91) 54px,
    rgba(244,246,250,.91) calc(100% - 110px),
    rgba(244,246,250,.68) 100%);
}
.section--photo.section--dark .section__bg img{opacity:.66}
.section--photo.section--dark .section__bg::after{
  background:linear-gradient(180deg,
    rgba(7,14,36,1) 0,
    rgba(7,14,36,.62) 84px,
    rgba(7,14,36,.83) 176px,
    rgba(7,14,36,.84) calc(100% - 190px),
    rgba(7,14,36,.63) calc(100% - 84px),
    rgba(7,14,36,1) 100%);
}

/* --- fragmented services: readable chips, not grey on white -------------- */
/* the one line that closes the block sits on the same axis as the node above it */
.frag__note{max-width:52ch;margin-inline:auto;text-align:center}
.frag__cloud span{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 9px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,21,51,.05),0 6px 16px rgba(11,21,51,.07);
  transition:transform .62s var(--ease-soft),opacity .5s var(--ease-soft);
  transition-delay:calc(var(--i,0) * 34ms);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));
}
.frag__cloud span b{font-size:var(--t-small);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.frag__ic{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#E7F0FF;color:#1F5AE0;
}
.frag__ic svg{width:14px;height:14px}
.frag__ic--blue{background:#E7F0FF;color:#1F5AE0}
.frag__ic--green{background:#E3F6EA;color:#12A150}
.frag__ic--orange{background:#FFF0DC;color:#DB8412}
.frag__ic--purple{background:#F0E9FC;color:#7A3FD0}
.frag__ic--red{background:#FDE9E8;color:#E5231D}
.frag__ic--teal{background:#DFF4F4;color:#0E8C8C}
.frag.is-collapsed .frag__cloud span{transform:none;opacity:.5}

/* --- 15b. Community, amplified ------------------------------------------- */
.ambition{
  display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  margin-top:clamp(28px,3.6vw,46px);padding:clamp(20px,2.6vw,32px);
  border-radius:var(--r-xl);
  background:linear-gradient(104deg,rgba(229,35,29,.16),rgba(31,90,224,.16));
  border:1px solid rgba(255,255,255,.16);
}
.ambition__ic{
  width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(229,35,29,.35);
}
.ambition__ic svg{width:26px;height:26px}
.ambition__t b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,.98rem + .9vw,1.72rem);letter-spacing:-.03em;line-height:1.16;color:#fff;
  text-wrap:balance;
}
.ambition__t p{margin-top:10px;font-size:var(--t-body);color:#B7C2DE;line-height:1.6;max-width:74ch}

.commgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(22px,3vw,48px);margin-top:clamp(28px,3.6vw,48px);align-items:start}
.commfeat{display:flex;flex-direction:column;gap:10px;margin:0}
.commfeat li{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:var(--t-small);font-weight:700;color:#E4EAF7;letter-spacing:-.012em;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.commfeat li:hover{background:rgba(255,255,255,.11);transform:translateX(4px)}
.commfeat .frag__ic{width:30px;height:30px}
.commfeat .frag__ic svg{width:15px;height:15px}

.section--dark .post{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:none}
.section--dark .post:hover{background:rgba(255,255,255,.11);box-shadow:none}
.section--dark .post q{color:#EDF1FA}
.section--dark .post__top b{color:#fff}
.section--dark .post__top small{color:#93A0C4}
.section--dark .post__meta span{background:rgba(255,255,255,.09);color:#C5CFE6}

.commcta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:clamp(26px,3vw,40px)}
.commcta .src{max-width:56ch}

@media (max-width:1024px){
  .commgrid{grid-template-columns:1fr}
  .commfeat{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .ambition{flex-direction:column;gap:14px}
  .commfeat{grid-template-columns:1fr}
  .commcta .btn{width:100%}
}

/* layover: the six steps read better as a full-width row under the split */
.steps--grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,44px);
  margin-top:clamp(28px,3.4vw,46px);
}
.steps--grid li{border-bottom:1px solid var(--line)}
.steps--grid li:nth-last-child(-n+3){border-bottom:0}
@media (max-width:1024px){
  .steps--grid{grid-template-columns:repeat(2,1fr)}
  .steps--grid li:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .steps--grid li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:640px){
  .steps--grid{grid-template-columns:1fr}
  .steps--grid li{border-bottom:1px solid var(--line)}
  .steps--grid li:last-child{border-bottom:0}
}

/* what the agent understood from one sentence */
.tokens{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tokens span{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 7px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--t-micro);font-weight:700;color:var(--ink);letter-spacing:-.012em;
}
.tokens .frag__ic{width:22px;height:22px}
.tokens .frag__ic svg{width:12px;height:12px}

/* --- brand + autonomy emphasis in body copy ------------------------------ */
.hl{color:var(--red-ink);font-weight:800;letter-spacing:-.004em;white-space:nowrap}
.hl-self{
  font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,transparent 58%,rgba(229,35,29,.20) 58%);
  padding:0 .08em;border-radius:2px;
}
.section--dark .hl,.cta .hl{color:#FF6A63}
.section--dark .hl-self,.cta .hl-self{
  color:#fff;background:linear-gradient(180deg,transparent 58%,rgba(255,106,99,.38) 58%);
}

/* --- touch devices: trade glass for smooth scrolling --------------------- */
/* Stacked backdrop-filter layers are the main source of stutter on phones,
   so on touch hardware they become plain opaque surfaces instead. */
@media (hover:none),(max-width:760px){
  .header::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,250,247,.97)}
  .header{transition:background .35s var(--ease),box-shadow .35s var(--ease)}
  .chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.95)}
  .float{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  .fcard i{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.22)}
  .cookie__box{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,14,36,.72)}
  .hero__media img{will-change:auto}
  /* no scatter offsets on narrow screens, so the cloud packs tightly again */
  .frag__cloud{gap:16px 12px}
  .frag__cloud span{
    transform:rotate(var(--rot,0deg));
    filter:none!important;
    transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
  }
  .frag.is-collapsed .frag__cloud span{transform:none}
  .rainfx i:nth-child(3){display:none}
  .map .meridians ellipse{stroke-width:.8}
}

/* --- waitlist hand-off (no intake of our own yet) ------------------------ */
.wl__stale{
  margin-top:12px;padding:11px 14px;border-radius:var(--r-md);
  background:#FFF6E8;border:1px solid #F2D9AE;color:#7A4E08;
  font-size:var(--t-micro);line-height:1.45;
}
.wl__t{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;margin-top:8px}
.wl__warn{
  margin-top:12px;padding:10px 13px;border-radius:var(--r-md);
  background:#FDE9E8;border:1px solid #F6C9C6;color:#A81A15;
  font-size:var(--t-micro);font-weight:700;line-height:1.4;
}
.wl__pre{
  margin-top:14px;padding:13px 15px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);
  font:600 var(--t-micro)/1.6 var(--font-ui);color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;max-height:190px;overflow-y:auto;
}
.wl__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.wl__act .btn{flex:1 1 auto;justify-content:center}
/* a field only a bot will fill in */
.wl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   NEW PRODUCT DIRECTION — dual scenario, identity, social
   Built on the existing tokens and components; nothing here restyles the old.
   ========================================================================== */


/* --- hero: the two scenarios as a real toggle, not two promises ---------- */
.modes{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.modes__lab{font-size:var(--t-micro);color:var(--ink-3);font-weight:600;margin-right:2px}
.modes button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;min-height:42px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:rgba(255,255,255,.72);
  font-size:var(--t-micro);font-weight:800;color:var(--ink-2);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.modes button:hover{border-color:var(--ink-3);color:var(--ink)}
.modes button[aria-pressed="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.modes button[aria-pressed="true"] svg{color:#FF8E88}
.modes button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* --- a spoken request, shown as speech rather than a form ---------------- */
.voice{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--sh-2);
}
.voice__hd{display:flex;align-items:center;gap:11px}
.voice__mic{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--red);color:#fff;box-shadow:0 4px 12px rgba(229,35,29,.3);
}
.voice__mic svg{width:16px;height:16px}
.voice__lab{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.voice__len{margin-left:auto;font-size:var(--t-micro);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.voice p{
  margin:14px 0 0;font-family:var(--font-display);font-size:clamp(1.05rem,.9rem + .8vw,1.6rem);
  line-height:1.35;letter-spacing:-.022em;font-weight:600;color:var(--ink);
}
.voice__hint{display:block;margin-top:12px;font-size:var(--t-micro);color:var(--ink-3)}
.voice__wave{display:flex;align-items:center;gap:4px;height:26px;margin-top:14px}
.voice__wave i{flex:1 1 0;max-width:5px;border-radius:2px;background:var(--red);opacity:.7;display:block;min-height:3px}
/* the first third is "played": the rest waits, the way a voice note looks */
.voice__wave i:nth-child(-n+13){opacity:1}
.voice__wave i:nth-child(n+14){background:var(--line-strong);opacity:1}

/* --- travel match ------------------------------------------------------- */
.match{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.match__av{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sky-2)}
.match__b{flex:1;min-width:0}
.match__n{font-family:var(--font-display);font-size:var(--t-h4);font-weight:700;letter-spacing:-.02em}
.match__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.match__tags .is-key{color:var(--blue-deep);background:var(--sky);border:1px solid var(--sky-2);font-weight:700}
.match__tags span{font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface-2);
  border-radius:var(--r-pill);padding:3px 9px}
.match__pct{flex:none;text-align:center;align-self:center;margin-left:8px;
  padding:10px 16px;border-radius:var(--r-md);background:#E9F8F0;border:1px solid #9FDCBB}
.match__pct b{display:block;font-family:var(--font-display);font-size:28px;font-weight:800;
  letter-spacing:-.04em;color:#0D7F3F;line-height:1}
.match__pct span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* --- trip room ---------------------------------------------------------- */
.room__feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:18px}
.room__feats > span{display:flex;align-items:center;gap:11px;font-size:var(--t-small);font-weight:600;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);padding:14px 16px;transition:background .4s var(--ease),border-color .4s var(--ease)}
.room__feats > span:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.room__feats > span > span{background:none;border:0;padding:0;border-radius:0}
.room__feats svg{width:17px;height:17px;color:#93B7F7;flex:none}
.room__feats > span:nth-child(2) svg{color:#8FE3C2}
.room__feats > span:nth-child(3) svg{color:#FF8E88}
.room__feats > span:nth-child(4) svg{color:#8FE3C2}
.room__feats > span:nth-child(5) svg{color:#F5C77E}
.room__feats > span:nth-child(6) svg{color:#C4A9F5}
.room__feats > span:nth-child(7) svg{color:#93B7F7}

/* --- trending escapes --------------------------------------------------- */
.trend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,38px)}
.trend__c{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);display:flex;flex-direction:column}
.trend__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.trend__img img{width:100%;height:100%;object-fit:cover}
.trend__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,14,36,.72))}
.trend__cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff}
.trend__cap b{display:block;font-family:var(--font-display);font-size:var(--t-h4);font-weight:800;letter-spacing:-.025em}
.trend__cap span{display:block;font-size:var(--t-micro);opacity:.9;margin-top:2px}
.trend__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.trend__stats{display:flex;gap:14px;font-size:var(--t-micro);color:var(--ink-2);font-weight:600}
.trend__stats b{color:var(--ink);font-weight:800}
.trend__price{font-family:var(--font-display);font-size:var(--t-h4);font-weight:800;letter-spacing:-.03em}

/* --- Escape Passport ---------------------------------------------------- */
.pass{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900) 62%);
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-3);
  padding:clamp(22px,2.6vw,34px);color:#fff;
}
.pass::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,35,29,.22),transparent 68%);pointer-events:none}
.pass__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;position:relative;z-index:1}
.pass__name{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);font-weight:800;letter-spacing:-.035em;line-height:1}
.pass__lvl{font-size:var(--t-micro);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF6A63;margin-top:8px}
.pass__av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.16),0 0 0 4px rgba(255,106,99,.5)}
.pass__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(18px,2vw,26px);position:relative;z-index:1}
.pass__k{font-family:var(--font-display);font-size:clamp(1.3rem,1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pass__c{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#93A0C4;margin-top:6px}

/* --- world progress ----------------------------------------------------- */
.wprog{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.wprog__ring{position:relative;width:clamp(150px,17vw,210px);height:clamp(150px,17vw,210px);flex:none}
.wprog__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wprog__ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.wprog__track{stroke:rgba(255,255,255,.12)}
.wprog__fill{stroke:var(--red)}
.wprog__mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.wprog__pct{font-family:var(--font-display);font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.wprog__cap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#93A0C4;margin-top:5px}
.wprog__rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:center}
/* the rows dissolve into the parent grid so every figure lands on one column */
.wprog__row{display:contents}
.wprog__n{grid-column:1}
.wprog__bar{grid-column:2}
.wprog__lab{grid-column:3}
.wprog__n{font-family:var(--font-display);font-size:var(--t-h4);font-weight:800;letter-spacing:-.03em;
  text-align:right;
  min-width:3.4ch;font-variant-numeric:tabular-nums}
.wprog__bar{height:8px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
.wprog__bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--red),#FF6A63)}
.wprog__lab{font-size:var(--t-micro);color:#A9B5D4;white-space:nowrap}

/* --- explorer ranking --------------------------------------------------- */
.rank{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.rank__c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  padding:16px 18px;text-align:center}
.rank__v{font-family:var(--font-display);font-size:var(--t-h3);font-weight:800;letter-spacing:-.035em;line-height:1}
.rank__l{font-size:var(--t-micro);color:#A9B5D4;margin-top:7px}

/* --- challenges --------------------------------------------------------- */
.chal{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;
  margin-top:clamp(22px,2.6vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;scrollbar-width:none;
}
.chal::-webkit-scrollbar{display:none}
.chal__c{
  scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;
  padding:18px 18px 16px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.chal__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.chal__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--red);flex:none}
.chal__ic svg{width:18px;height:18px}
.chal__c b{font-size:var(--t-h4);font-weight:700;letter-spacing:-.022em;line-height:1.2}
.chal__c p{font-size:var(--t-micro);color:var(--ink-2);line-height:1.5;flex:1}
.chal__meta{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
/* the first card is the one worth arriving on */
.chal__c:first-child{border-color:rgba(229,35,29,.35);box-shadow:0 2px 6px rgba(229,35,29,.08),0 14px 34px rgba(11,21,51,.1)}
.chal__c:first-child .chal__ic{background:var(--red);color:#fff}
.chal__c:nth-child(2) .chal__ic{color:#1F5AE0}
.chal__c:nth-child(3) .chal__ic{color:#0D7F3F}
.chal__c:nth-child(4) .chal__ic{color:#B0741E}
.chal__c:nth-child(5) .chal__ic{color:#0B7B7B}
.chal__c:nth-child(6) .chal__ic{color:#6A34BC}
.chal__c:nth-child(7) .chal__ic{color:#1F5AE0}
.chal__c:nth-child(8) .chal__ic{color:#B0741E}
.chal__live{margin-top:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-2);overflow:hidden}
.chal__hd{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
.chal__ttl{font-family:var(--font-display);font-size:var(--t-h4);font-weight:800;letter-spacing:-.025em}
.chal__pr{margin-left:auto;display:flex;align-items:center;gap:10px}
.chal__dots{display:flex;gap:5px}
.chal__dots i{width:12px;height:12px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line-strong);display:block}
.chal__dots i.on{background:var(--red);border-color:var(--red)}
.chal__bd{padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* --- around the world --------------------------------------------------- */
.around{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:22px}
.around__r{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  font-size:var(--t-micro);font-weight:700;color:#A9B5D4}
.around__r.on{background:rgba(229,35,29,.14);border-color:rgba(255,106,99,.45);color:#fff}
.around__m{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.28);font-size:10px}
.around__r.on .around__m{background:var(--red);border-color:var(--red);color:#fff}
.around__r.on .around__m svg{width:10px;height:10px}

/* --- the year, told quietly ---------------------------------------------- */
/* This was a full section with a headline and a four-up grid, which made a
   year-in-review the loudest thing on the page. It is one card now. */
.yr{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(22px,3vw,46px);align-items:center;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.05);padding:clamp(20px,2.6vw,34px);
}
.yr__hd h3{font-size:var(--t-h3);margin-top:12px}
.yr__hd p{font-size:var(--t-small);color:#A9B5D4;line-height:1.55;margin-top:10px;max-width:44ch}
.yr__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.yr__nums b{display:block;font-family:var(--font-display);font-size:var(--t-h4);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.yr__nums span{display:block;font-size:11px;color:#93A0C4;margin-top:6px}
.yr__meta{display:grid;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.yr__meta div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.yr__meta small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#93A0C4;min-width:13ch}
.yr__meta b{font-family:var(--font-display);font-size:var(--t-small);font-weight:700;letter-spacing:-.015em;color:#fff}
@media (max-width:900px){
  .yr{grid-template-columns:1fr}
}
@media (max-width:520px){
  .yr__nums{grid-template-columns:repeat(2,1fr)}
  .yr__meta small{min-width:0}
}

@media (max-width:900px){
  .wprog{grid-template-columns:1fr;justify-items:center;text-align:center}
  .wprog__rows{width:100%;min-width:0}
  .pass__grid{grid-template-columns:repeat(2,1fr)}
  .match{flex-wrap:wrap}
}
@media (max-width:560px){
  /* the labels must be allowed to wrap or they widen the whole document */
  .wprog__lab{white-space:normal;text-align:left}
  .wprog__rows{gap:11px 10px}
  .wprog__bar{min-width:36px}
  .trend{grid-template-columns:1fr}

  /* two scenarios, two equal buttons — never one stranded on its own line */
  .modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .modes__lab{grid-column:1/-1;margin:0}
  .modes button{justify-content:center;min-height:44px;padding:10px 12px;text-align:center}

  /* three ranks read as rows here; two-plus-orphan does not */
  .rank{grid-template-columns:1fr;gap:8px}
  .rank__c{display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:left;padding:13px 18px}
  .rank__v{white-space:nowrap}
  .rank__l{margin-top:0}

  /* avatar and score on one line, the traits with the whole width beneath */
  .match{flex-wrap:wrap;align-items:center;row-gap:12px}
  .match__av{order:-2}
  .match__pct{order:-1;margin-left:auto;padding:8px 14px}
  .match__pct b{font-size:22px}
  .match__b{flex:1 1 100%;order:1}
}
/* a bar promises a scale; figures without a denominator get none */
.wprog__row--plain .wprog__lab{grid-column:2/-1}

/* --- the route below the desktop width ----------------------------------- */
/* Six stops cannot sit side by side, and the old fallback dropped the line
   entirely: a grid of disconnected dots claiming to be a route. It becomes
   what it actually is on a narrow screen — a vertical timeline that fills. */
@media (max-width:1024px){
  .route__head{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
  .route__km{font-size:clamp(1.5rem,1rem + 2.6vw,2.4rem);line-height:1}
  .route__km small{font-size:9px;letter-spacing:.1em;margin-top:7px;line-height:1.3}
  .route__line{padding-top:0;padding-left:32px}
  .route__track{top:7px;bottom:7px;left:5px;right:auto;width:2px;height:auto}
  .route__fill{
    top:7px;left:5px;width:2px;height:var(--p,0%);
    background:linear-gradient(180deg,var(--red),#FF8E62);transition:height .18s linear;
  }
  .route__nodes{grid-template-columns:1fr;gap:20px}
  .route__node{padding-right:0}
  .route__node::before{top:1px;left:-32px}
  .route__stats{grid-template-columns:repeat(2,1fr)}
}

/* --- the moments it writes on --------------------------------------------- */
.beats{list-style:none;margin:0;padding:0;display:grid;gap:clamp(13px,1.6vw,19px)}
.beats li{position:relative;padding-left:24px}
.beats li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 4px rgba(216,42,36,.13);
}
.beats b{display:block;font-size:var(--t-small);font-weight:800;letter-spacing:-.012em;color:var(--ink)}
.beats span{display:block;margin-top:3px;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}

/* --- a band: the picture carrying its own heading ------------------------ */
.band{
  position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  aspect-ratio:950/436;box-shadow:var(--sh-3);background:var(--navy-800);
}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(6,16,38,.86) 0%,rgba(6,16,38,.7) 34%,rgba(6,16,38,.16) 62%,rgba(6,16,38,0) 82%);
}
.band__copy{
  position:relative;z-index:2;max-width:min(52%,560px);color:#fff;
  padding:clamp(26px,4vw,64px);display:flex;flex-direction:column;justify-content:center;height:100%;
}
.band__copy .eyebrow{color:#D9E1F1}
.band__copy .eyebrow::before{background:linear-gradient(90deg,#FF6A63,rgba(255,106,99,0))}
.band__copy h2{font-size:var(--t-h2);margin-block:14px 14px;color:#fff}
.band__copy p{font-size:var(--t-lead);line-height:1.5;color:#DCE4F4;max-width:34ch}
@media (max-width:900px){
  .band{aspect-ratio:auto}
  .band > img{position:relative;height:auto;aspect-ratio:950/436}
  .band::after{background:linear-gradient(180deg,rgba(6,16,38,.1) 0%,rgba(6,16,38,.5) 44%,rgba(6,16,38,.92) 76%)}
  .band__copy{max-width:none;height:auto;position:absolute;inset:auto 0 0 0}
}
@media (max-width:560px){
  .band > img{aspect-ratio:4/3.6}
  .band__copy{padding:20px}
  .band__copy p{font-size:var(--t-small)}
}

/* --- the trail ----------------------------------------------------------- */
/* The dashed line from point A to point B, with a stop on it, is the one
   drawing the brand repeats everywhere. It belongs on the page too — as the
   join between sections, so the story reads as one route rather than a list. */
.trail{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(30px,9vw,110px);height:74px;
  margin-block:clamp(18px,2.4vw,30px) clamp(2px,.6vw,8px);
  z-index:1;pointer-events:none;
}
.trail::before{
  content:"";position:absolute;left:6%;right:6%;top:50%;
  border-top:2px dashed rgba(229,35,29,.42);
}
.trail span{
  position:relative;width:40px;height:40px;border-radius:50%;flex:none;
  background:#fff;display:grid;place-items:center;color:var(--blue);
  box-shadow:0 2px 4px rgba(11,21,51,.06),0 10px 24px rgba(11,21,51,.14);
}
.trail span svg{width:18px;height:18px}
.trail span:nth-child(2){color:var(--red)}
.trail span:nth-child(4){color:#B0741E}
.section--dark + .trail,.trail.trail--dark{--trail-dot:#0E1830}
.trail.trail--dark::before{border-top-color:rgba(255,106,99,.45)}
.trail.trail--dark span{background:#101B39;color:#9FB4EA;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.trail.trail--dark span:nth-child(2){color:#FF6A63}
@media (max-width:560px){
  .trail{height:60px;gap:22px}
  .trail span{width:34px;height:34px}
  .trail span svg{width:15px;height:15px}
}
@media (prefers-reduced-motion:no-preference){
  .trail span{transition:transform .6s var(--ease-soft),opacity .6s var(--ease-soft)}
}

/* --- grounds -------------------------------------------------------------- */
/* Not every section wants a photograph — a page of them is noise, and stock
   imagery used as filler is the first thing that reads as cheap. The sections
   without one get a ground of their own instead: two very low light sources in
   the brand's own blue and red, well under the threshold where they'd compete
   with the type. */
.section--dark:not(.section--photo){position:relative;isolation:isolate;overflow:clip}
.section--dark:not(.section--photo)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(56% 44% at 6% -8%, rgba(31,90,224,.22), transparent 66%),
    radial-gradient(46% 38% at 98% 106%, rgba(229,35,29,.16), transparent 68%);
}
.section:not(.section--dark):not(.section--photo){
  position:relative;isolation:isolate;overflow:clip;
}
.section:not(.section--dark):not(.section--photo)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44% 34% at 100% 0%, rgba(31,90,224,.055), transparent 68%),
    radial-gradient(38% 30% at 0% 100%, rgba(229,35,29,.045), transparent 70%);
}
.section:not(.section--dark):not(.section--photo)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--fade-top),var(--fade-bot);
  background-repeat:no-repeat;
  background-position:top,bottom;
  background-size:100% var(--edge),100% var(--edge);
}

/* --- The app's own screens, in a row to swipe (5 October: the site showed
   painted phones; these are the store screenshots, cut out of their frames). */
.shots{
  display:flex;gap:clamp(22px,3vw,40px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:18px max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter))) 34px;
  margin-top:clamp(18px,3vw,36px);
}
.shots::-webkit-scrollbar{display:none}
.shots:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.shot{flex:none;margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;scroll-snap-align:center}
.shot .device{--w:clamp(214px,19vw,252px)}
.shot figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--w,250px);font-family:var(--font-display);line-height:1.2}
.shot figcaption b{font-size:1.05rem;font-weight:700;color:var(--ink)}
.shot figcaption span{font-size:1.05rem;font-weight:700;color:var(--red)}

/* --- Living screens (5 October: "добавь динамику, как у нас в приложении").
   Each screen's own photograph is laid over itself and pushes in slowly, the
   way the app's headers move; the assistant's orb breathes and rings out like
   the microphone it is. The screen clips with clip-path as well as overflow:
   Safari lets a transformed child slip past a rounded overflow box, and the
   phone's metal showed in its corners. */
.device--shot .device__screen{position:relative;clip-path:inset(0 round calc(var(--w) * .112));-webkit-mask-image:-webkit-radial-gradient(white,black)}
.device__view{display:block;position:relative}
.device__view[hidden]{display:none}
.live{position:absolute;display:block;overflow:hidden;pointer-events:none}
.live__img{position:absolute;max-width:none;height:auto;will-change:transform;animation:shotPush 16s ease-in-out infinite alternate}
.shot:nth-child(even) .live:not(.live--orb) .live__img{animation-name:shotPushLeft}
/* Anchored near the title at the foot of each photograph, so the words stay
   put while the picture behind them pushes in, as in the app. */
@keyframes shotPush{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes shotPushLeft{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.2%,0)}}
@keyframes orbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.mic-pulse{position:absolute;display:block;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
/* Soft light leaving the orb, never a drawn ring: the screen already has its
   own halo, and a second outline over it read as a doubled edge
   (5 October: "неровность, она дважды там повторяется"). */
.mic-pulse i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,138,76,0) 48%,rgba(255,138,76,.32) 62%,rgba(255,138,76,0) 72%);opacity:0;animation:micRing 3s cubic-bezier(.2,.6,.3,1) infinite}
.mic-pulse i+i{animation-delay:1.5s}
@keyframes micRing{0%{transform:scale(1.05);opacity:0}15%{opacity:1}100%{transform:scale(2.2);opacity:0}}
.hero__stage .device--shot{animation:phoneFloat 7s ease-in-out infinite}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.shot .device{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot.is-current .device{transform:translateY(-8px) scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .live__img,.mic-pulse i,.hero__stage .device--shot{animation:none}
  .shot.is-current .device{transform:none}
}

/* --- The language switch: one glass pill, six languages under it. */
.langs{position:relative}
.langs .langs__toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 11px;min-height:36px;border-radius:var(--r-pill);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.75)}
.langs .langs__toggle:hover{background:#fff}
.langs__chev{transition:transform .25s var(--ease)}
.langs__toggle[aria-expanded="true"] .langs__chev{transform:rotate(180deg)}
.langs__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:220;min-width:196px;padding:6px;border-radius:18px;background:rgba(255,255,255,.97);border:1px solid rgba(20,26,44,.08);box-shadow:0 18px 48px rgba(16,24,40,.16);display:grid;gap:2px;transform-origin:top right;animation:langsIn .18s var(--ease)}
.langs__menu[hidden]{display:none}
.langs .langs__menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:8px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);text-align:left;letter-spacing:0}
.langs .langs__menu button b{width:26px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-3)}
.langs .langs__menu button:hover{background:rgba(31,90,224,.07)}
.langs .langs__menu button[aria-pressed="true"]{background:rgba(31,90,224,.1);color:var(--blue)}
.langs .langs__menu button[aria-pressed="true"] b{color:var(--blue)}
@keyframes langsIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.langs__menu{animation:none}}