/* ============================================================
   APEX BOOKING — premium dark cockpit concept
   cyan #2FD8FE = action / confirm / live
   purple #7C5CFF (from Evervault #6633EE) = system / ambience
   ============================================================ */

:root{
  --bg-0:#04060B;
  --bg-1:#070B14;
  --bg-2:#0B1120;
  --glass:rgba(13,19,32,.55);
  --glass-strong:rgba(15,22,38,.78);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --text:#E9EEF7;
  --text-dim:#9AA5B8;
  --text-faint:#5E6A80;
  --cyan:#2FD8FE;
  --cyan-soft:#9FECFF;
  --cyan-dim:rgba(47,216,254,.12);
  --cyan-line:rgba(47,216,254,.3);
  --purple:#7C5CFF;
  --purple-deep:#6633EE;
  --purple-soft:#C9B8FF;
  --purple-dim:rgba(124,92,255,.14);
  --purple-line:rgba(124,92,255,.34);
  --amber:#FFC56B;
  --amber-soft:#FFD9A0;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:rgba(47,216,254,.28);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.mono{font-family:var(--font-mono)}

/* ============ LIVE BACKGROUND ============ */
#bg{position:fixed;inset:0;z-index:-2;width:100%;height:100%}
.bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90rem 50rem at 15% -12%,rgba(47,216,254,.06),transparent 60%),
    radial-gradient(85rem 55rem at 88% -6%,rgba(102,51,238,.13),transparent 62%),
    radial-gradient(80rem 60rem at 50% 118%,rgba(102,51,238,.10),transparent 65%),
    radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(2,3,6,.55) 100%);
}

/* ============ BOOT SEQUENCE ============ */
.boot{position:fixed;inset:0;z-index:100;display:none}
.js .boot{display:block;animation:bootFailsafe .6s ease 4.8s forwards}
.boot-pane{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:linear-gradient(115deg,#05070E 60%,#0A0F1E 100%);
  transition:transform .65s var(--ease-out) .18s;
}
.boot-pane--l{left:0;border-right:1px solid rgba(255,255,255,.04)}
.boot-pane--r{right:0;background:linear-gradient(245deg,#05070E 60%,#0B0A1E 100%)}
.boot-core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  transition:opacity .25s ease,transform .25s ease;
}
.boot-mark{filter:drop-shadow(0 0 18px rgba(47,216,254,.35));animation:bootMark 1.6s ease-in-out infinite}
.boot-line{width:218px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  box-shadow:0 0 14px rgba(47,216,254,.7);
}
.boot-status{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.boot.boot--done .boot-pane--l{transform:translateX(-102%)}
.boot.boot--done .boot-pane--r{transform:translateX(102%)}
.boot.boot--done .boot-core{opacity:0;transform:scale(.96)}
.boot.boot--done{pointer-events:none}
@keyframes bootMark{50%{filter:drop-shadow(0 0 30px rgba(124,92,255,.5))}}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden}}

/* boot-staged elements: hidden until html.is-live */
.js .boots{opacity:0;transform:translateY(18px)}
.js .boots{animation:bootsFailsafe .6s ease 4.8s forwards}
html.is-live .boots{
  opacity:1;transform:none;
  transition:opacity .7s ease var(--bd,0s),transform .9s var(--ease-out) var(--bd,0s);
}
@keyframes bootsFailsafe{to{opacity:1;transform:none}}

/* ============ SHARED ATOMS ============ */
.pulse-dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 0 rgba(47,216,254,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(47,216,254,0)}100%{box-shadow:0 0 0 0 rgba(47,216,254,0)}}

.tag{
  font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  color:#B9C3D6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
}
.tag--cyan{color:var(--cyan-soft);background:var(--cyan-dim);border-color:var(--cyan-line)}
.tag--purple{color:var(--purple-soft);background:var(--purple-dim);border-color:var(--purple-line)}
.tag--amber{color:var(--amber-soft);background:rgba(255,197,107,.09);border-color:rgba(255,197,107,.32)}
.tag--dim{color:var(--text-faint)}

.chip-mini{
  font-family:var(--font-mono);font-size:.66rem;white-space:nowrap;
  padding:2px 8px;border-radius:999px;color:#C7D0E0;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);
}

.avatar{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  font-size:.62rem;font-weight:700;color:#04232D;
  background:linear-gradient(135deg,#6BE5FF,#1FB0DE);
}
.avatar--p{background:linear-gradient(135deg,#A78BFA,#6633EE);color:#15082E}
.avatar--sm{width:18px;height:18px;font-size:.56rem;margin-right:7px}

.switch{
  width:38px;height:22px;border-radius:999px;position:relative;flex:none;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.06);
  transition:background .25s,border-color .25s;display:inline-block;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#8694AC;transition:left .25s var(--ease-out),background .25s;
}
/* reminders are a system moment — switches read purple */
.switch.is-on{background:rgba(124,92,255,.24);border-color:rgba(124,92,255,.5)}
.switch.is-on::after{left:18px;background:#A78BFA;box-shadow:0 0 10px rgba(124,92,255,.65)}
.switch:hover{border-color:rgba(124,92,255,.65)}
.switch--sm{width:30px;height:18px}
.switch--sm::after{width:12px;height:12px}
.switch--sm.is-on::after{left:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:12px;
  font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s,background .25s;
}
.btn--primary{
  color:#03212B;
  background:linear-gradient(180deg,#46DFFF,#1CB4E4);
  box-shadow:0 8px 28px rgba(47,216,254,.26),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(47,216,254,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--ghost{
  color:var(--text);border:1px solid var(--line-strong);background:rgba(255,255,255,.03);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--sm{padding:9px 18px;border-radius:10px;font-size:.86rem}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s,backdrop-filter .35s}
.nav.is-scrolled{
  background:rgba(5,8,14,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;gap:34px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-word{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.brand-word em{font-style:normal;font-weight:400;color:var(--text-dim);margin-left:5px}
.nav-links{display:flex;gap:30px;margin-left:auto}
.nav-links a{
  text-decoration:none;color:var(--text-dim);font-size:.92rem;font-weight:500;
  position:relative;padding:4px 0;transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:14px}
/* EN / BG language switch — glass segmented control adapted from the Apex Booking
   site reference (.language-switcher): static indicator, equal segments, slide by
   translateX driven by .is-en/.is-bg on the container */
.lang-switch{
  --seg:38px;
  position:relative;display:inline-flex;align-items:center;padding:3px;
  border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 42%),rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.12);
}
@supports (backdrop-filter:blur(10px)){.lang-switch{backdrop-filter:blur(12px)}}
.lang-switch:hover{border-color:var(--line-strong)}
.lang-switch-pill{
  position:absolute;top:3px;left:3px;width:var(--seg);height:calc(100% - 6px);
  border-radius:999px;border:1px solid var(--cyan-line);
  background:
    linear-gradient(180deg,rgba(216,243,255,.12),transparent 48%),
    linear-gradient(125deg,rgba(47,216,254,.14),rgba(124,92,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 16px rgba(47,216,254,.14);
  pointer-events:none;
  transition:transform .35s var(--ease-out),box-shadow .18s ease;
}
.lang-switch.is-bg .lang-switch-pill{transform:translateX(var(--seg))}
/* glow boost while the pill is travelling (380ms before navigation) */
.lang-switch.is-switching .lang-switch-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 20px rgba(47,216,254,.22),0 0 14px rgba(124,92,255,.18);
}
.lang-switch a{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--seg);min-height:26px;padding:4px 0;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;line-height:1;
  color:var(--text-dim);text-decoration:none;
  transition:color .16s ease,transform .16s ease,text-shadow .16s ease;
}
.lang-switch a:hover{color:#D8F3FF;transform:translateY(-1px);text-shadow:0 0 12px rgba(47,216,254,.18)}
.lang-switch a:active{transform:translateY(0) scale(.97)}
.lang-switch a.is-on{color:#F3F8FF;text-shadow:0 0 12px rgba(47,216,254,.22)}
@media (prefers-reduced-motion:reduce){
  .lang-switch-pill{transition:none}
  .lang-switch a{transition:color .16s ease}
  .lang-switch a:hover,.lang-switch a:active{transform:none}
}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:10px;position:relative}
.burger span{
  position:absolute;left:11px;right:11px;height:1.8px;border-radius:2px;background:var(--text);
  transition:transform .3s var(--ease-out),top .3s;
}
.burger span:first-child{top:15px}
.burger span:last-child{top:23px}
.nav-open .burger span:first-child{top:19px;transform:rotate(45deg)}
.nav-open .burger span:last-child{top:19px;transform:rotate(-45deg)}

/* ============ HERO ============ */
.hero{padding:clamp(104px,14vh,152px) 24px 0;text-align:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(13,19,32,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hero-eyebrow .mono{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.hero-h1{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.7rem,6.6vw,4.9rem);
  margin:22px 0 18px;
}
.hero-line{display:block}
.hero-line--accent{
  background:linear-gradient(92deg,#6BE5FF 5%,var(--cyan) 38%,var(--purple) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(47,216,254,.18));
}
.hero-sub{max-width:620px;margin:0 auto;color:var(--text-dim);font-size:1.06rem;line-height:1.65}
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ============ COCKPIT STAGE ============ */
.stage{position:relative;max-width:1340px;margin:clamp(40px,6vh,66px) auto 0;padding:0 24px}
.nav:not(.is-scrolled) .nav-end .btn--primary{
  background:rgba(255,255,255,.03);color:var(--text);
  border:1px solid var(--line-strong);box-shadow:none;
}
.cockpit{
  position:relative;max-width:1040px;margin:0 auto;text-align:left;
  border-radius:20px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(17,24,42,.74),rgba(9,13,24,.8));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 130px rgba(102,51,238,.09);
  overflow:hidden;
}
.cockpit::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,216,254,.55),rgba(124,92,255,.55),transparent);
}
.js .cockpit.boots{transform:translateY(30px) scale(.985)}

.ck-top{
  display:flex;align-items:center;gap:18px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
}
.ck-dots{display:flex;gap:6px}
.ck-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.ck-dots i:nth-child(2){background:rgba(47,216,254,.45)}
.ck-dots i:nth-child(3){background:rgba(124,92,255,.45)}
.ck-title{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.ck-toggle{
  margin-left:auto;display:flex;padding:3px;border-radius:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.25);
}
.ck-toggle button{
  padding:5px 14px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--text-dim);
  transition:background .25s,color .25s;
}
.ck-toggle button:not(.is-on):hover{color:var(--text)}
.ck-toggle button.is-on{background:var(--cyan-dim);color:var(--cyan-soft);box-shadow:inset 0 0 0 1px var(--cyan-line)}
.ck-range{font-size:.7rem;color:var(--text-faint)}

.ck-body{
  display:grid;grid-template-columns:254px 1fr 250px;
  grid-template-areas:"req cal dt";
}
.ck-requests{grid-area:req;padding:14px;border-right:1px solid var(--line)}
.ck-cal{grid-area:cal;padding:14px;min-width:0}
.ck-detail{grid-area:dt;padding:14px;border-left:1px solid var(--line)}

.pane-head{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:.88rem;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.pane-count{
  font-size:.7rem;font-weight:600;color:var(--cyan-soft);
  padding:1px 9px;border-radius:999px;background:var(--cyan-dim);border:1px solid var(--cyan-line);
}

/* requests */
.rq{
  position:relative;
  padding:11px 12px;border-radius:12px;margin-bottom:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .3s,background .3s,transform .3s var(--ease-out),opacity .3s;
}
.rq:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045);transform:translateX(3px)}
.rq:has(.tag--purple):hover{border-color:var(--purple-line);background:rgba(124,92,255,.06)}
.rq:has(.tag--amber):hover{border-color:rgba(255,197,107,.38)}
.rq.is-accepted:hover{transform:none}
.rq.is-picking,.rq.is-picking:hover{transform:none}
.rq-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rq-name{font-weight:600;font-size:.86rem}
.rq-meta{font-size:.76rem;color:var(--text-dim);margin:5px 0 9px}
.rq-actions{display:flex;gap:8px}
.rq-btn{
  padding:5.5px 11px;border-radius:8px;font-size:.74rem;font-weight:600;
  border:1px solid var(--line-strong);color:var(--text-dim);
  transition:background .25s,color .25s,border-color .25s;
}
.rq-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.rq-btn--ok{background:var(--cyan-dim);color:var(--cyan-soft);border-color:var(--cyan-line)}
.rq-btn--ok:hover{background:rgba(47,216,254,.22);color:#CFF6FF}
/* confirmed check state — the approve button becomes the status */
.rq-btn.is-confirmed{
  background:var(--cyan);color:#03212B;border-color:var(--cyan);cursor:default;
  box-shadow:0 0 16px rgba(47,216,254,.4);
}
.rq-btn.is-reset{
  background:var(--purple-dim);color:var(--purple-soft);border-color:var(--purple-line);cursor:default;
}
.rq.is-accepted{border-color:var(--cyan-line)}
.rq.is-accepted .rq-meta{opacity:.65}
/* premium one-shot confirm / reschedule glows */
.rq.flash-confirm{animation:flashConfirm .7s var(--ease-out)}
.rq.flash-resched{animation:flashResched .75s var(--ease-out)}
@keyframes flashConfirm{
  0%{box-shadow:0 0 0 0 rgba(47,216,254,.5),inset 0 0 0 0 rgba(47,216,254,.3)}
  35%{box-shadow:0 0 0 4px rgba(47,216,254,.18),inset 0 0 24px 0 rgba(47,216,254,.22)}
  100%{box-shadow:0 0 0 0 rgba(47,216,254,0),inset 0 0 0 0 rgba(47,216,254,0)}
}
@keyframes flashResched{
  0%{box-shadow:0 0 0 0 rgba(124,92,255,.5),inset 0 0 0 0 rgba(124,92,255,.3)}
  35%{box-shadow:0 0 0 4px rgba(124,92,255,.2),inset 0 0 24px 0 rgba(124,92,255,.26)}
  100%{box-shadow:0 0 0 0 rgba(124,92,255,0),inset 0 0 0 0 rgba(124,92,255,0)}
}

/* declined / cancelled state — muted, not aggressive red */
.tag--declined{color:#D7A1A1;background:rgba(214,130,130,.1);border-color:rgba(214,130,130,.32)}
.rq.is-declined{border-color:rgba(214,130,130,.22);background:rgba(255,255,255,.012)}
.rq.is-declined .rq-name,
.rq.is-declined .rq-meta{opacity:.5;text-decoration:line-through;text-decoration-color:rgba(214,130,130,.5)}
.rq.is-declined:hover{transform:none}
.rq-btn.is-declined-btn{
  background:rgba(214,130,130,.12);color:#D7A1A1;border-color:rgba(214,130,130,.3);
  cursor:default;text-decoration:none;
}
.rq.flash-decline{animation:flashDecline .7s var(--ease-out)}
@keyframes flashDecline{
  0%{box-shadow:0 0 0 0 rgba(214,130,130,.45),inset 0 0 0 0 rgba(214,130,130,.25)}
  35%{box-shadow:0 0 0 4px rgba(214,130,130,.16),inset 0 0 22px 0 rgba(214,130,130,.18)}
  100%{box-shadow:0 0 0 0 rgba(214,130,130,0),inset 0 0 0 0 rgba(214,130,130,0)}
}
/* muted calendar item when its request is declined */
.ev.ev--declined{
  opacity:.3;filter:grayscale(.5);border-style:dashed;box-shadow:none;
  transition:opacity .4s ease,filter .4s ease;
}
.ev.ev--declined b{text-decoration:line-through}
.ev.ev--declined .ev-bell{display:none}

/* small "Time updated" confirmation that fades after a reschedule */
.rq-toast{
  display:block;margin-top:8px;
  font-size:.62rem;letter-spacing:.08em;color:var(--purple-soft);
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s var(--ease-out);
}
.rq-toast.show{opacity:1;transform:none}

/* inline reschedule mini time-picker */
.timepick{
  position:absolute;right:12px;left:12px;top:calc(100% - 4px);z-index:20;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:11px;border-radius:12px;
  border:1px solid var(--purple-line);
  background:rgba(18,16,34,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 30px rgba(124,92,255,.18);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top center;
  transition:opacity .2s ease,transform .22s var(--ease-out);
}
.timepick.open{opacity:1;transform:translateY(0) scale(1)}
.timepick-label{
  flex:1 0 100%;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-soft);margin-bottom:2px;
}
.timepick-slot{
  padding:5px 10px;border-radius:8px;font-size:.74rem;font-weight:600;
  color:#D7CEF6;border:1px solid var(--purple-line);background:rgba(124,92,255,.1);
  transition:background .2s,transform .2s var(--ease-out);
}
.timepick-slot:hover{background:rgba(124,92,255,.26);transform:translateY(-1px)}

/* calendar */
.cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal-head{
  display:grid;grid-template-columns:38px repeat(6,minmax(70px,1fr));
  min-width:470px;padding-bottom:8px;
  font-size:.72rem;font-weight:600;color:var(--text-dim);
}
.cal-head .is-today{color:var(--cyan-soft)}
.cal-grid{
  position:relative;
  display:grid;grid-template-columns:38px repeat(6,minmax(70px,1fr));
  grid-template-rows:repeat(6,36px);
  min-width:470px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:100% 36px;
}
.cal-time{grid-column:1;font-size:.62rem;color:var(--text-faint);padding-top:3px}
.cal-col{grid-row:1/-1;border-left:1px solid rgba(255,255,255,.045);transition:background .35s}
.cal-col:hover{background:rgba(255,255,255,.025)}
.cal-col--today{
  border-left-color:rgba(47,216,254,.2);
  background:linear-gradient(180deg,rgba(47,216,254,.055),rgba(47,216,254,.012));
}
.cal-col--today:hover{background:linear-gradient(180deg,rgba(47,216,254,.09),rgba(47,216,254,.03))}
.ev{
  position:relative;z-index:1;margin:2px 3px;padding:4px 7px;border-radius:8px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  font-size:.66rem;line-height:1.3;border:1px solid;
}
.ev b{font-size:.68rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev span{opacity:.72;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev--cyan{
  color:#D9F7FF;background:rgba(47,216,254,.1);border-color:var(--cyan-line);
}
.ev--dim{color:#C2CADA;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.ev--pending{color:var(--amber-soft);background:rgba(255,197,107,.05);border:1px dashed rgba(255,197,107,.45)}
.ev--purple{
  color:#DED4FF;background:var(--purple-dim);border:1px dashed rgba(124,92,255,.6);
  box-shadow:0 0 16px rgba(124,92,255,.12);
}
.ev-bell{position:absolute;top:4px;right:5px;color:var(--purple-soft)}
.cal-now{
  grid-column:4;grid-row:3;align-self:end;z-index:2;position:relative;
  height:0;border-top:1.5px solid var(--cyan);
  box-shadow:0 0 9px rgba(47,216,254,.8);
}
.cal-now::before{
  content:"";position:absolute;left:-2px;top:-3.5px;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(47,216,254,.9);
}
/* events pop in after the cockpit lands */
.js .cal-grid div.ev{opacity:0;transform:scale(.9)}
html.is-live .cal-grid div.ev{
  opacity:1;transform:none;
  transition:opacity .45s ease var(--ed,1.1s),transform .45s var(--ease-out) var(--ed,1.1s);
}
.cal-grid div.ev:nth-of-type(1){--ed:1.05s}
.cal-grid div.ev:nth-of-type(2){--ed:1.13s}
.cal-grid div.ev:nth-of-type(3){--ed:1.21s}
.cal-grid div.ev:nth-of-type(4){--ed:1.29s}
.cal-grid div.ev:nth-of-type(5){--ed:1.37s}
.cal-grid div.ev:nth-of-type(6){--ed:1.45s}
.cal-grid div.ev:nth-of-type(7){--ed:1.53s}
.js .cal-grid div.ev{animation:bootsFailsafe .6s ease 4.8s forwards}

/* after the entrance settles, hovers take over the transitions */
html.boot-settled .boots{transition-duration:.3s;transition-delay:0s}
html.boot-settled .cal-grid div.ev{
  opacity:1;
  transition:transform .25s var(--ease-out),border-color .25s,background .25s,box-shadow .25s;
}
html.boot-settled .ev:hover{transform:translateY(-1px) scale(1.04);z-index:3}
.ev--cyan:hover{
  background:rgba(47,216,254,.18);border-color:rgba(47,216,254,.55);
  box-shadow:0 6px 18px rgba(47,216,254,.16);
}
.ev--dim:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.ev--pending:hover{background:rgba(255,197,107,.1);border-color:rgba(255,197,107,.6)}
.ev--purple:hover{
  background:rgba(124,92,255,.2);border-color:rgba(124,92,255,.85);
  box-shadow:0 6px 20px rgba(124,92,255,.22);
}

/* day view */
.cockpit.is-day .cal-head span:not(.cal-gutter):not(.is-today){display:none}
.cockpit.is-day .cal-col:not(.cal-col--today){display:none}
.cockpit.is-day .cal-head,
.cockpit.is-day .cal-grid{grid-template-columns:38px 1fr;min-width:0}
.cockpit.is-day .ev:not(.ev--today){display:none}
.cockpit.is-day .ev--today,
.cockpit.is-day .cal-now,
.cockpit.is-day .cal-col--today{grid-column:2}

/* booking detail */
.dt-label{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}
.dt-block{padding:11px 0;border-bottom:1px solid var(--line)}
.dt-block:last-child{border-bottom:none}
.dt-line{display:flex;align-items:center;gap:8px;font-size:.85rem;flex-wrap:wrap}
.dt-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.82rem;font-weight:500}
.dt-switch-row small{color:var(--text-faint);font-size:.7rem;font-weight:400}

.tl{list-style:none}
.tl li{
  position:relative;padding:7px 0 7px 24px;
  font-size:.82rem;color:var(--text-faint);
  transition:color .25s;
}
.tl li:hover{color:var(--text)}
.tl li.is-active:hover{color:#E4DBFF}
.tl li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);background:transparent;
}
.tl li:not(:last-child)::after{
  content:"";position:absolute;left:4px;top:calc(50% + 7px);height:calc(100% - 13px);width:2px;
  background:rgba(255,255,255,.08);
}
.tl li.is-done{color:var(--text)}
.tl li.is-done::before{border-color:var(--cyan);background:rgba(47,216,254,.25)}
.tl li.is-done::after{background:rgba(47,216,254,.3)}
.tl li.is-active{color:var(--purple-soft)}
.tl li.is-active::before{
  border-color:var(--purple);background:rgba(124,92,255,.3);
  animation:tlPulse 2.2s ease-out infinite;
}
@keyframes tlPulse{
  0%{box-shadow:0 0 0 0 rgba(124,92,255,.5)}
  70%{box-shadow:0 0 0 7px rgba(124,92,255,0)}
  100%{box-shadow:0 0 0 0 rgba(124,92,255,0)}
}

/* ============ CHIP RAILS ============ */
.rail{display:none}
.rail-chip{
  --c:#9AA5B8;
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  font-size:.8rem;font-weight:500;color:#C7D0E0;
  border:1px solid var(--line);background:rgba(10,15,26,.66);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.rail-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);flex:none}
.rail-chip--cyan{--c:var(--cyan)}
.rail-chip--purple{--c:var(--purple)}
.rail-chip--amber{--c:var(--amber)}
.rail-chip:hover{border-color:var(--line-strong);transform:scale(1.05);color:var(--text)}
.rail-chip--cyan:hover{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(47,216,254,.22)}
.rail-chip--purple:hover{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(124,92,255,.28)}
.rail-chip--amber:hover{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(255,197,107,.2)}
.rail-chip.chip-lit{border-color:var(--line-strong);color:var(--text)}
.rail-chip--cyan.chip-lit{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(47,216,254,.22)}
.rail-chip--purple.chip-lit{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(124,92,255,.28)}
.rail-chip--amber.chip-lit{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 20px rgba(255,197,107,.2)}
.rail-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.rail-chip:hover::after{opacity:.85}

.chip-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* anchored notification rails — only where there's real room beside
   the 1040px cockpit; below that the clean chip-strip takes over */
@media (min-width:1400px){
  .chip-strip{display:none}
  .rail{
    display:flex;flex-direction:column;gap:30px;
    position:absolute;top:calc(50% + 18px);transform:translateY(-50%);z-index:2;
  }
  /* cockpit half-width is 520px; dock the rails just outside its edges */
  .rail--l{right:calc(50% + 518px);align-items:flex-end}
  .rail--r{left:calc(50% + 518px);align-items:flex-start}
  /* connector lines bridging chip → dashboard edge (≈20px gap) */
  .rail-chip::after{
    content:"";position:absolute;top:50%;width:32px;height:1px;
    background:linear-gradient(90deg,var(--c),transparent);opacity:.5;
    transition:opacity .3s,width .3s var(--ease-out);
  }
  .rail--l .rail-chip::after{left:100%}
  .rail--r .rail-chip::after{right:100%;background:linear-gradient(270deg,var(--c),transparent)}
  .rail-chip:hover::after{opacity:.75;width:16px}
  /* rail chips boot in sideways, then rest anchored (no random drift) */
  .js .rail--l .boots{transform:translateX(-22px)}
  .js .rail--r .boots{transform:translateX(22px)}
}

/* ============ SECTIONS ============ */
main{position:relative}
.sec{max-width:1180px;margin:0 auto;padding:clamp(92px,12vh,150px) 24px 0}
/* module headers: left-aligned, docked to the system spine */
.sec-head{position:relative;max-width:none;margin:0 0 52px;text-align:left}
.sec-head .sec-sub{max-width:600px}
/* vertical timeline node — same filled style as the horizontal
   customer-progress dots, centered exactly on the spine */
.sec-node{
  display:none;position:absolute;left:-32px;top:0;
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);background:var(--bg-1);
  transition:border-color .45s,background .45s,box-shadow .45s,transform .35s var(--ease-out);
}
.sec-node::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:transparent;transition:background .45s;
}
/* scroll-driven lighting: the dot ignites when the spine fill-head
   reaches it — the same fill-then-light language as the horizontal
   customer-progress timeline */
.sec-node.lit{
  border-color:var(--cyan);background:rgba(47,216,254,.12);
  box-shadow:0 0 18px rgba(47,216,254,.55);
  animation:nodePop .55s var(--ease-out);
}
.sec-node.lit::after{background:var(--cyan)}
#customers .sec-node.lit,
#trust .sec-node.lit{
  border-color:var(--purple);background:rgba(124,92,255,.14);
  box-shadow:0 0 18px rgba(124,92,255,.6);
}
#customers .sec-node.lit::after,
#trust .sec-node.lit::after{background:#A78BFA}
/* hover the module to brighten its marker, like the horizontal dots */
.sec-head:hover .sec-node{transform:scale(1.16);box-shadow:0 0 22px rgba(47,216,254,.5)}
#customers .sec-head:hover .sec-node,
#trust .sec-head:hover .sec-node{box-shadow:0 0 22px rgba(124,92,255,.55)}
.eyebrow{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(47,216,254,.78);margin-bottom:16px;
}
#customers .eyebrow,#trust .eyebrow{color:rgba(169,139,250,.85)}
.sec-head h2,.cta-panel h2{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.9rem,4vw,2.7rem);
}
.sec-sub{color:var(--text-dim);font-size:1.02rem;line-height:1.65;margin-top:15px}

/* ============ 01 PROBLEM — two glass panes in space ============ */
.duel{display:grid;grid-template-columns:1fr 56px 1fr;gap:16px;align-items:stretch;perspective:1400px}
.duel-card{
  border-radius:18px;padding:24px;
  border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  /* snappy transform so cursor-follow + hover feel immediate */
  transition:transform .25s var(--ease-out),filter .3s ease,border-color .3s,box-shadow .3s;
}
.duel-card--before{
  --rest:rotateY(9deg) scale(.975);
  transform:var(--rest);
  background:linear-gradient(180deg,rgba(22,16,22,.5),rgba(12,10,16,.5));
  filter:saturate(.65) brightness(.82);
}
.duel-card--after{
  --rest:rotateY(-8deg);
  transform:var(--rest);
  border-color:rgba(47,216,254,.25);
  background:linear-gradient(180deg,rgba(13,24,36,.6),rgba(9,14,26,.6));
  box-shadow:0 0 70px rgba(47,216,254,.07),0 24px 60px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: no-preference){
  .duel-card--after{animation:duelBreath 6s ease-in-out infinite}
}
@keyframes duelBreath{
  0%,100%{box-shadow:0 0 70px rgba(47,216,254,.07),0 24px 60px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 90px rgba(47,216,254,.12),0 24px 60px rgba(0,0,0,.4)}
}
/* both panes come alive on hover: straighten, lift, grow, follow cursor */
@media (hover:hover){
  .duel .duel-card:hover{
    transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(-6px) scale(1.035);
    z-index:2;
  }
  .duel .duel-card--before:hover{
    filter:none;border-color:var(--line-strong);
    box-shadow:0 26px 64px rgba(0,0,0,.5),0 0 42px rgba(255,255,255,.05);
  }
  .duel .duel-card--after:hover{
    border-color:rgba(47,216,254,.5);
    box-shadow:0 0 100px rgba(47,216,254,.13),0 30px 72px rgba(0,0,0,.45);
  }
}
.duel-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.96rem;margin-bottom:18px}
.duel-vs{
  align-self:center;justify-self:center;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(13,19,32,.7);color:var(--text-dim);
}
.msg-pile{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.msg{
  align-self:flex-start;max-width:88%;
  padding:8px 13px;border-radius:14px 14px 14px 4px;
  font-size:.84rem;color:#C2CADA;
  border:1px solid var(--line);background:rgba(255,255,255,.055);
  transform:rotate(var(--r,0deg));
}
.msg:nth-child(even){align-self:flex-end;border-radius:14px 14px 4px 14px}
/* explicit side modifiers — win over :nth-child (equal specificity, later in source) */
.msg.msg--right{align-self:flex-end;border-radius:14px 14px 4px 14px}
.msg.msg--left{align-self:flex-start;border-radius:14px 14px 14px 4px}
.msg--missed{
  font-weight:600;font-size:.76rem;color:#FF9D9D;
  border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.07);
}
.msg--note{
  font-family:var(--font-mono);font-size:.76rem;border-radius:4px;
  color:var(--amber-soft);border-color:rgba(255,197,107,.32);background:rgba(255,197,107,.08);
}
.queue{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.q-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-radius:11px;font-size:.85rem;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .25s,background .25s,transform .25s var(--ease-out);
}
.q-row:hover{background:rgba(255,255,255,.06);border-color:var(--line-strong);transform:translateX(3px)}
.q-row:has(.tag--purple):hover{border-color:var(--purple-line);background:rgba(124,92,255,.06)}
.q-row:has(.tag--cyan):hover{border-color:var(--cyan-line)}
.duel-list{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.88rem;color:var(--text-dim)}
.duel-list li{position:relative;padding-left:24px}
.duel-list li::before{content:"✕";position:absolute;left:0;color:rgba(255,130,130,.7);font-size:.8rem}
.duel-list--good li::before{content:"✓";color:var(--cyan)}

/* ============ 02 PLATFORM BENTO ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  position:relative;border-radius:18px;padding:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(15,21,36,.6),rgba(10,14,25,.55));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s;
}
.card:hover{
  --lift:-4px;border-color:var(--line-strong);
  box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 44px rgba(47,216,254,.05);
}
/* pointer glow — cyan by default, purple on system-depth cards */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),rgba(47,216,254,.07),transparent 70%);
  opacity:0;transition:opacity .35s;
}
.card:has(.card-icon--purple)::after{
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),rgba(124,92,255,.1),transparent 70%);
}
.card:has(.card-icon--purple):hover{box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 44px rgba(124,92,255,.07)}
.card:hover::after{opacity:1}
.card--wide{grid-column:span 2}
.card-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:15px;
}
.card-icon--cyan{color:var(--cyan);background:var(--cyan-dim);border:1px solid var(--cyan-line)}
.card-icon--purple{color:#A78BFA;background:var(--purple-dim);border:1px solid var(--purple-line)}
.card h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--text-dim);font-size:.9rem;line-height:1.6}
.mini{margin-top:17px;display:flex;flex-direction:column;gap:8px}
.mini-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:10px;font-size:.79rem;color:#C2CADA;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .25s,background .25s;
}
.mini-row:hover{border-color:var(--line-strong);background:rgba(255,255,255,.05)}
.mini-row>span:first-child{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-btn{
  padding:4px 10px;border-radius:7px;font-weight:600;font-size:.7rem;flex:none;
  color:var(--cyan-soft);background:var(--cyan-dim);border:1px solid var(--cyan-line);
}
.mini-btn.is-done{background:var(--cyan);color:#03212B;border-color:var(--cyan);cursor:default}
.mini-row.is-confirmed{border-color:var(--cyan-line);background:rgba(47,216,254,.05)}
.mini-week{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.mw-label{font-size:.55rem;letter-spacing:.1em;color:var(--text-faint);text-align:center;padding-bottom:2px}
.mini-week i{height:32px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.mini-week .f1{background:var(--cyan-dim);border-color:var(--cyan-line)}
.mini-week .f2{background:rgba(124,92,255,.16);border-color:var(--purple-line)}
.mini-week .f3{background:rgba(255,197,107,.07);border:1px dashed rgba(255,197,107,.4)}

/* ============ 03 JOURNEY ============ */
.journey{position:relative;--p:0}
.j-track{position:absolute;left:9px;right:calc(25% - 25px);top:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.07)}
.j-fill{
  display:block;height:100%;border-radius:3px;width:calc(var(--p)*100%);
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  box-shadow:0 0 16px rgba(124,92,255,.55);
  transition:width .2s var(--ease-out);
}
.j-fill::after{
  content:"";position:absolute;top:50%;right:-4px;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:#E4DBFF;
  box-shadow:0 0 14px rgba(124,92,255,.95),0 0 30px rgba(124,92,255,.5);
}
.j-fill::after,.spine-fill::after{opacity:0;transition:opacity .4s ease}
.journey.is-scrolling .j-fill::after,.spine.is-scrolling .spine-fill::after{opacity:1;transition:opacity .15s ease}
.j-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.j-step{position:relative;padding-top:42px;cursor:pointer}
.j-node{
  position:absolute;top:0;left:0;width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);background:var(--bg-1);
  transition:border-color .35s,background .35s,box-shadow .35s;
}
.j-node::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:transparent;transition:background .35s;
}
.j-step.is-lit .j-node{
  border-color:var(--cyan);background:rgba(47,216,254,.12);
  box-shadow:0 0 18px rgba(47,216,254,.55);
  animation:nodePop .55s var(--ease-out);
}
.j-step.is-lit .j-node::after{background:var(--cyan)}
.j-step:nth-child(n+3).is-lit .j-node{
  border-color:var(--purple);background:rgba(124,92,255,.14);
  box-shadow:0 0 18px rgba(124,92,255,.6);
}
.j-step:nth-child(n+3).is-lit .j-node::after{background:#A78BFA}
@keyframes nodePop{45%{transform:scale(1.45)}}
.j-step.is-lit .notif{border-color:rgba(47,216,254,.26);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 26px rgba(47,216,254,.07)}
.j-step:nth-child(n+3).is-lit .notif{border-color:rgba(124,92,255,.32);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 26px rgba(124,92,255,.1)}
.notif.flash{animation:notifFlash .8s ease-out}
@keyframes notifFlash{0%{box-shadow:0 0 0 0 rgba(124,92,255,.45)}100%{box-shadow:0 0 0 18px rgba(124,92,255,0)}}
.j-step h3{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:12px}
/* timeline step hover — node wakes, notification lifts */
.j-step:hover .j-node{border-color:var(--cyan-line);box-shadow:0 0 12px rgba(47,216,254,.3)}
.j-step:nth-child(n+3):hover .j-node{border-color:var(--purple-line);box-shadow:0 0 12px rgba(124,92,255,.38)}
.j-step:hover .notif{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 34px rgba(0,0,0,.42)}
.j-step:nth-child(n+3):hover .notif{border-color:rgba(124,92,255,.3)}
.notif{
  min-height:46px;
  border-radius:12px;padding:11px 13px;font-size:.82rem;line-height:1.45;color:#C2CADA;
  border:1px solid var(--line);background:rgba(15,21,36,.65);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s;
}
.notif-app{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:5px}
.j-copy{margin-top:11px;font-size:.84rem;color:var(--text-dim);line-height:1.55}

/* ============ 04 TRUST ============ */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.t-card{
  position:relative;display:block;border-radius:16px;padding:22px;text-decoration:none;
  border:1px solid rgba(124,92,255,.16);
  background:linear-gradient(180deg,rgba(19,16,36,.55),rgba(10,12,24,.5));
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s;
}
.t-card:hover{
  --lift:-3px;border-color:rgba(124,92,255,.45);
  box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 56px rgba(102,51,238,.1);
}
.t-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(124,92,255,.1),transparent 70%);
  opacity:0;transition:opacity .35s;
}
.t-card:hover::after{opacity:1}
.t-card:hover .t-link{color:#E4DBFF}
.t-card h3{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:7px}
.t-card p{color:var(--text-dim);font-size:.85rem;line-height:1.55;margin-bottom:16px}
.t-link{font-size:.7rem;letter-spacing:.08em;color:var(--purple-soft);transition:color .25s}

/* ============ CTA ============ */
.sec--cta{padding-bottom:0}
.cta-panel{
  position:relative;overflow:hidden;text-align:center;
  border-radius:24px;border:1px solid var(--line);
  padding:clamp(48px,7vw,84px) 28px;
  background:
    radial-gradient(110% 130% at 50% 0%,rgba(102,51,238,.17),transparent 55%),
    radial-gradient(70% 110% at 15% 100%,rgba(47,216,254,.08),transparent 60%),
    linear-gradient(180deg,rgba(15,21,36,.7),rgba(8,11,20,.72));
}
.cta-panel::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.6),rgba(47,216,254,.6),transparent);
}
.cta-panel .eyebrow{color:var(--purple-soft)}
.cta-panel .sec-sub{max-width:520px;margin-inline:auto}
.cta-panel .hero-cta{margin-top:30px}

/* ============ FOOTER ============ */
.footer{
  margin-top:clamp(92px,12vh,150px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(4,6,11,.7));
  padding:56px 24px 28px;
}
.footer-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;
}
.footer-brand p{color:var(--text-dim);font-size:.88rem;margin-top:14px;max-width:300px;line-height:1.6}
.footer-col h4{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:14px;font-weight:500;
}
.footer-col a{
  display:block;text-decoration:none;color:var(--text-dim);
  font-size:.9rem;padding:5px 0;transition:color .25s;
}
.footer-col a:hover{color:var(--text)}
.footer-fine{
  text-align:center;font-size:.64rem;letter-spacing:.08em;
  color:var(--text-faint);margin-top:46px;
}

/* ============ SCROLL REVEAL — panels rise out of the floor ============ */
.js [data-reveal]{
  opacity:0;filter:blur(4px);
  transform:translateY(28px);
}
.js [data-reveal].in{
  opacity:1;transform:var(--rest,none);filter:blur(0);
  transition:opacity .5s ease var(--rd,0s),
             transform .55s var(--ease-out) var(--rd,0s),
             filter .45s ease var(--rd,0s);
}
@media (max-width:767px){
  .js [data-reveal]{filter:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  .ck-body{grid-template-columns:1fr 1fr;grid-template-areas:"cal cal" "req dt"}
  .ck-requests{border-right:none;border-top:1px solid var(--line)}
  .ck-detail{border-left:none;border-top:1px solid var(--line)}
  .ck-range{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .card--wide{grid-column:span 2}
  .trust-grid{grid-template-columns:1fr 1fr}
  .j-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .j-track{display:none}
}
@media (max-width:859px){
  .nav-links{
    position:fixed;top:70px;left:16px;right:16px;z-index:49;
    flex-direction:column;gap:4px;padding:12px;margin-left:0;
    border-radius:16px;border:1px solid var(--line);
    background:rgba(7,11,20,.92);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .3s,transform .3s var(--ease-out);
  }
  .nav-links a{padding:11px 14px;border-radius:10px}
  .nav-links a:hover{background:rgba(255,255,255,.05)}
  .nav-links a::after{display:none}
  .nav-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .burger{display:block}
  /* nav-links is fixed here, so dock the controls to the right edge */
  .nav-end{margin-left:auto}
}
@media (max-width:699px){
  .ck-cal{position:relative}
  .ck-cal::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
    background:linear-gradient(270deg,rgba(9,13,24,.85),transparent);
    border-radius:0 12px 12px 0;
  }
  .ck-body{grid-template-columns:1fr;grid-template-areas:"cal" "req" "dt"}
  .ck-top{flex-wrap:wrap;gap:10px 14px}
  .ck-title{display:none}
  .duel{grid-template-columns:1fr}
  .duel-vs{transform:rotate(90deg);margin:-4px 0}
  .bento{grid-template-columns:1fr}
  .card--wide{grid-column:auto}
  .j-steps{grid-template-columns:1fr;row-gap:30px}
  .j-step{padding-top:0;padding-left:34px}
  .j-node{top:4px}
  .hero-cta .btn{width:100%;max-width:340px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
}
@media (max-width:559px){
  .trust-grid{grid-template-columns:1fr}
  .hero{padding-top:108px}
  .stage{padding:0 14px}
  .ck-requests,.ck-cal,.ck-detail{padding:12px}
  /* room for the EN/BG switch + burger: the hero CTA already leads here */
  .nav-end .btn--primary{display:none}
}
@media (max-width:479px){
  .chip-strip .rail-chip:nth-child(n+5){display:none}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .boot{display:none!important}
  #bg{display:none}
  .js .boots,
  .js [data-reveal],
  .js .cal-grid div.ev{opacity:1!important;transform:none!important;filter:none!important}
  .card,.t-card{transform:none!important}
}

/* ============================================================
   ALIVE LAYER — the page behaves like one connected system
   ============================================================ */

/* ---- system spine: light travels down the story ---- */
.spine{display:none;position:absolute;left:calc(50% - 590.5px);width:3px;border-radius:3px;background:rgba(255,255,255,.09);pointer-events:none}
.spine-fill{
  position:absolute;top:0;left:0;width:100%;height:calc(var(--sp,0)*100%);
  border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--purple) 85%);
  box-shadow:0 0 16px rgba(124,92,255,.55),0 0 4px rgba(47,216,254,.5);
  transition:height .25s ease-out;
}
.spine-fill::after{
  content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#D9CDFF;
  box-shadow:0 0 16px rgba(124,92,255,.95),0 0 36px rgba(124,92,255,.5);
}
@media (min-width:1240px){
  .spine{display:block}
  .sec-node{display:block}
}

/* ---- cockpit: sits on a lit floor, leans toward the cursor ---- */
.stage::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-70px;height:170px;
  pointer-events:none;z-index:-1;filter:blur(14px);
  background:
    radial-gradient(46% 90% at 42% 8%,rgba(47,216,254,.12),transparent 70%),
    radial-gradient(60% 110% at 62% 16%,rgba(102,51,238,.13),transparent 75%);
}
/* once settled, JS is alive — drop the boot failsafe animation fills
   so interactive transforms (tilt, hover) regain control */
html.boot-settled .boots,
html.boot-settled .cal-grid div.ev{animation:none}
html.is-live .cockpit.boots{transform:none}
html.boot-settled .cockpit.boots{
  transform:perspective(1600px) rotateX(var(--ckrx,0deg)) rotateY(var(--ckry,0deg));
}
html.is-live .rail-chip:hover{transform:scale(1.05)}
/* tilt chain feeds the reveal rest-state so revealed cards keep tilting */
.card,.t-card{
  --rest:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
}
.ck-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  opacity:0;transition:opacity .45s;
  background:radial-gradient(520px 280px at var(--gx,50%) var(--gy,-20%),rgba(255,255,255,.055),transparent 65%);
}
.stage:hover .ck-glare{opacity:1}

/* ---- chips fire light into the cockpit ---- */
@media (min-width:1400px){
  .rail-chip[data-link]{cursor:pointer}
  .rail-chip::before{
    content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;
    border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);
    opacity:0;pointer-events:none;
  }
  .rail--l .rail-chip::before{left:100%}
  .rail--r .rail-chip::before{right:100%}
  .rail--l .rail-chip:hover::before{animation:dotTravelR .8s ease-in infinite}
  .rail--r .rail-chip:hover::before{animation:dotTravelL .8s ease-in infinite}
}
@keyframes dotTravelR{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(46px);opacity:0}}
@keyframes dotTravelL{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(-46px);opacity:0}}

/* ---- the cockpit answers: matching modules light up ---- */
.cockpit [data-sys]{transition:border-color .3s,box-shadow .3s,background .3s,transform .3s,opacity .3s}
.cockpit[data-focus] .ev,
.cockpit[data-focus] .rq{opacity:.55}
.cockpit[data-focus="pending"] [data-sys~="pending"],
.cockpit[data-focus="resched"] [data-sys~="resched"],
.cockpit[data-focus="update"] [data-sys~="update"],
.cockpit[data-focus="confirmed"] [data-sys~="confirmed"],
.cockpit[data-focus="reminder"] [data-sys~="reminder"],
.cockpit[data-focus="staff"] [data-sys~="staff"]{opacity:1;transform:scale(1.03)}
.cockpit[data-focus="pending"] [data-sys~="pending"]{
  border-color:rgba(255,197,107,.7);background:rgba(255,197,107,.1);
  box-shadow:0 0 0 1px rgba(255,197,107,.3),0 0 26px rgba(255,197,107,.2);
}
.cockpit[data-focus="resched"] [data-sys~="resched"]{
  border-color:rgba(124,92,255,.85);background:rgba(124,92,255,.16);
  box-shadow:0 0 0 1px rgba(124,92,255,.4),0 0 28px rgba(124,92,255,.3);
}
.cockpit[data-focus="update"] [data-sys~="update"]{
  border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07);
  box-shadow:0 0 24px rgba(255,255,255,.08);
}
.cockpit[data-focus="confirmed"] [data-sys~="confirmed"]{
  border-color:rgba(47,216,254,.75);background:rgba(47,216,254,.16);
  box-shadow:0 0 0 1px rgba(47,216,254,.35),0 0 26px rgba(47,216,254,.25);
}
.cockpit[data-focus="reminder"] [data-sys~="reminder"]{
  background:rgba(124,92,255,.1);border-radius:10px;
  box-shadow:0 0 0 1px rgba(124,92,255,.45),0 0 24px rgba(124,92,255,.25);
}
.cockpit[data-focus="staff"] [data-sys~="staff"]{
  background:rgba(47,216,254,.08);border-radius:10px;
  box-shadow:0 0 0 1px rgba(47,216,254,.4),0 0 22px rgba(47,216,254,.2);
}

/* ---- live heartbeat: a request pings like it just arrived ---- */
.rq.ping{animation:sysPing 1.5s ease-out}
.pane-count.ping{animation:sysPing 1.5s ease-out}
@keyframes sysPing{
  0%{box-shadow:0 0 0 0 rgba(47,216,254,.4)}
  100%{box-shadow:0 0 0 16px rgba(47,216,254,0)}
}

/* ---- linked reactions when a booking is approved / rescheduled ---- */
.ev.ev--confirmed-now{animation:evPop .55s var(--ease-out)}
.ev.ev--reschedule-set{
  border-style:solid;
  box-shadow:0 0 0 1px rgba(124,92,255,.5),0 0 22px rgba(124,92,255,.3);
  animation:evPop .55s var(--ease-out);
}
@keyframes evPop{40%{transform:scale(1.12)}}
.rail-chip.chip-fire{animation:chipFire .7s ease-out}
@keyframes chipFire{
  0%{box-shadow:0 0 0 0 rgba(47,216,254,.65)}
  60%{box-shadow:0 0 0 22px rgba(47,216,254,.12)}
  100%{box-shadow:0 0 0 30px rgba(47,216,254,0)}
}

/* ---- primary buttons carry a light sweep ---- */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::before{
  content:"";position:absolute;top:-2px;bottom:-2px;left:-45%;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn--primary:hover::before{animation:sheen .85s ease}
@keyframes sheen{0%{left:-45%;opacity:1}100%{left:118%;opacity:1}}

/* ---- trust modules: purple system edge ---- */
.t-card::before{
  content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.6),transparent);
  opacity:.55;transition:opacity .35s,left .35s,right .35s;
}
.t-card:hover::before{opacity:1;left:5%;right:5%}

/* ---- alive-layer responsive & motion fallbacks ---- */
@media (max-width:699px){
  .duel-card--before,.duel-card--after{--rest:none;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){
  .duel-card--before{filter:none}
  .spine-fill{transition:none}
  .ck-glare{display:none}
  .cockpit{transform:none!important}
}