/* =========================================================================
   LockerWise — JS-driven marketing site
   Design system & layout. All content is rendered by app.js; this file owns
   tokens, primitives, and the keyframes the runtime hooks into.
   ========================================================================= */

:root {
  /* brand */
  --navy:        #0B1D3F;
  --navy-900:    #080E1D;
  --navy-800:    #0F1A2E;
  --navy-700:    #12274F;
  --line-navy:   #1A3461;

  --sky:         #0EA5E9;
  --sky-600:     #0284C7;
  --sky-400:     #38BDF8;
  --sky-300:     #7DD3FC;
  --sky-100:     #E0F2FE;
  --sky-50:      #F0F9FF;

  --amber:       #F59E0B;
  --green:       #10B981;
  --red:         #EF4444;

  /* surfaces (light theme) */
  --bg:          #F7F8FC;
  --bg-soft:     #FBFCFE;
  --card:        #FFFFFF;
  --line:        #DDE2EF;
  --line-soft:   #E6EAF3;
  --line-hover:  #C6CEDF;

  /* text */
  --ink:         #0B1D3F;
  --ink-2:       #33405E;
  --muted:       #475171;
  --muted-2:     #7A84A3;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* shape */
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 16px;
  --r-xl: 24px;
  --maxw: 1200px;
  --shadow-card: 0 18px 36px -14px rgba(11,29,63,0.16);
  --shadow-cta:  0 12px 28px -8px rgba(14,165,233,0.6);

  --ease: cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:        #070C18;
  --bg-soft:   #0C1426;
  --card:      #0F1A2E;
  --line:      #1B2942;
  --line-soft: #1B2942;
  --line-hover:#2A3D5E;
  --ink:       #EAF0FB;
  --ink-2:     #C6CEDF;
  --muted:     #9FAAC8;
  --muted-2:   #6E7C9C;
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

/* ---- layout primitives ------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: clamp(72px, 8vw, 112px); }
.section--tight { padding-block: clamp(44px, 5vw, 64px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 500;
  margin: 0 0 14px;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); }
.section-head { max-width: 680px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.section-head .lead { margin: 18px 0 0; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  --shift-x: 0px; --shift-y: 0px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 11px;
  font-weight: 600; font-size: 15.5px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background .2s var(--ease),
              box-shadow .25s var(--ease), border-color .2s var(--ease);
  transform: translate(var(--shift-x), var(--shift-y));
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { color: #fff; background: var(--sky); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--sky-600); }
.btn--ghost {
  color: #E8EBF4; background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--sm { padding: 10px 18px; font-size: 14.5px; border-radius: var(--r-sm); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---- scroll progress + cursor glow ------------------------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--sky-400), var(--sky));
  z-index: 200; box-shadow: 0 0 12px rgba(14,165,233,.6);
  transition: width .08s linear;
}
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.16), transparent 62%);
  pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .4s var(--ease);
  mix-blend-mode: screen;
}

/* ---- top bar ----------------------------------------------------------- */
.topbar { background: var(--navy); color: #9FAAC8; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 8px;
}
.topbar__note {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; color: #6E7C9C;
}
.topbar__links { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.topbar__links a { font-size: 12.5px; font-weight: 600; color: #E8EBF4; transition: color .2s; }
.topbar__links a:hover { color: var(--sky-300); }
.topbar__links .play { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-300); }
.topbar__sep { width: 1px; height: 13px; background: var(--line-navy); }

/* ---- header / nav ------------------------------------------------------ */
/* The whole top region (top bar + nav) sticks together on scroll. */
.site-top { position: sticky; top: 0; z-index: 60; }
.header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand svg { transition: transform .5s var(--ease); }
.brand:hover svg { transform: rotate(90deg); }

.nav__links { display: flex; align-items: center; gap: 22px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.nav__links a { position: relative; padding: 4px 0; transition: color .2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sky); border-radius: 2px; transition: width .25s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after, .nav__links a:hover::after { width: 100%; }

.nav__right { display: flex; align-items: center; gap: 12px; flex: none; }
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s, transform .2s, color .3s;
}
.theme-toggle:hover { border-color: var(--line-hover); transform: rotate(15deg); }

.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer; flex: none;
}

/* mobile menu */
.mobile-menu {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
  border-top: 1px solid transparent; background: var(--bg);
}
.mobile-menu.is-open { grid-template-rows: 1fr; border-top-color: var(--line); }
.mobile-menu__inner { overflow: hidden; }
.mobile-menu__pad { padding: 10px 24px 18px; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu .mlabel {
  margin: 8px 8px 4px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.mobile-menu a { padding: 11px 8px; font-weight: 500; font-size: 15px; color: var(--muted); }
.mobile-menu a.cta { margin-top: 8px; text-align: center; border-radius: var(--r-sm); color: #fff; background: var(--sky); font-weight: 600; }

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #E8EBF4;
  background: var(--navy);
  background-image:
    radial-gradient(900px 480px at 78% -8%, rgba(14,165,233,.30), transparent 60%),
    radial-gradient(700px 420px at 6% 110%, rgba(56,189,248,.12), transparent 60%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__grid-overlay {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
  padding-block: clamp(64px, 8vw, 104px);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border: 1px solid rgba(125,211,252,.28); border-radius: 999px;
  background: rgba(14,165,233,.10); font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-300);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky-400); box-shadow: 0 0 0 4px rgba(56,189,248,.18); animation: pulse 2.4s var(--ease) infinite; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,5.4vw,66px); line-height: 1.02; letter-spacing: -.025em; margin: 22px 0 0; color: #fff; }
.hero h1 .grad { background: linear-gradient(90deg, #fff, var(--sky-300)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__sub { margin: 22px 0 0; font-size: clamp(16px,1.4vw,19px); line-height: 1.6; color: #B8C2DC; max-width: 520px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__trust { margin-top: 38px; }
.hero__trust p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6E7C9C; margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px 10px; }
.chip { font-size: 12.5px; font-weight: 600; color: #9FAAC8; padding: 5px 11px; border: 1px solid rgba(255,255,255,.10); border-radius: 7px; transition: border-color .2s, color .2s, background .2s; }
.chip:hover { color: #fff; border-color: rgba(125,211,252,.5); background: rgba(14,165,233,.08); }

/* hero dashboard card */
.hero__panel { position: relative; }
.panel {
  background: linear-gradient(180deg,#FBFCFE,#F2F5FB);
  border: 1px solid rgba(255,255,255,.5); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); overflow: hidden;
  transform: perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition: transform .25s var(--ease);
}
.panel__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.panel__bar .d { width: 10px; height: 10px; border-radius: 50%; }
.panel__bar .url { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
.panel__body { padding: 18px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel__head h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); margin: 0; }
.panel__head p { margin: 2px 0 0; font-size: 12px; color: var(--muted-2); }
.live-badge { font-family: var(--font-mono); font-size: 11px; color: var(--sky); background: var(--sky-100); padding: 5px 10px; border-radius: 7px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); animation: pulse 1.6s infinite; }

.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 16px; }
.stat-mini { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; }
.stat-mini p:first-child { margin: 0; font-size: 10.5px; color: var(--muted-2); font-weight: 600; }
.stat-mini p:last-child { margin: 3px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); }

.locker-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.locker {
  aspect-ratio: 3/4; border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  border: 1px solid; transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.locker:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px -8px rgba(11,29,63,.4); z-index: 2; }
.locker .led { width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid; }
.locker .id { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; }
.locker[data-state="available"] { background: #ECFDF5; border-color: #A7F3D0; }
.locker[data-state="available"] .led { border-color: var(--green); } .locker[data-state="available"] .id { color: #047857; }
.locker[data-state="occupied"]  { background: var(--sky-100); border-color: var(--sky-300); }
.locker[data-state="occupied"] .led { border-color: var(--sky); } .locker[data-state="occupied"] .id { color: var(--sky-600); }
.locker[data-state="expiring"]  { background: #FEF3C7; border-color: #FCD34D; }
.locker[data-state="expiring"] .led { border-color: var(--amber); } .locker[data-state="expiring"] .id { color: #B45309; }
.locker[data-state="expired"]   { background: #FEE2E2; border-color: #FCA5A5; }
.locker[data-state="expired"] .led { border-color: var(--red); } .locker[data-state="expired"] .id { color: #B91C1C; }
.locker.flash { animation: lockerFlash .6s var(--ease); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.float-card {
  position: absolute; bottom: -22px; right: -12px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 13px 16px;
  box-shadow: 0 18px 40px -12px rgba(11,29,63,.28); display: flex; align-items: center; gap: 11px;
  animation: float 5s ease-in-out infinite;
}
.float-card .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--sky-100); display: flex; align-items: center; justify-content: center; color: var(--sky); }
.float-card p:first-child { margin: 0; font-size: 11px; color: var(--muted-2); font-weight: 600; }
.float-card .combo { margin: 1px 0 0; font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--navy); }

/* ---- stat band --------------------------------------------------------- */
.statband { background: var(--card); border-block: 1px solid var(--line); }
.statband .wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding-block: 38px; }
.statband .stat { text-align: center; }
.statband .stat + .stat { border-left: 1px solid var(--line-soft); }
.statband .num { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3vw,38px); color: var(--ink); }
.statband .num.accent { color: var(--sky); }
.statband .lbl { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---- generic surfaces -------------------------------------------------- */
.surface-light { background: var(--card); border-block: 1px solid var(--line); }
.grid-auto { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); }
.grid-auto--sm { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card.hoverable:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--line-hover); }
.card__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--sky-100); display: flex; align-items: center; justify-content: center; color: var(--sky-600); margin-bottom: 18px; }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* split — holder portal */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.checklist { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sky-100); display: flex; align-items: center; justify-content: center; color: var(--sky); margin-top: 1px; }
.check p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.phone { width: 300px; background: var(--navy); border-radius: 34px; padding: 11px; box-shadow: 0 34px 70px -22px rgba(11,29,63,.5); margin: 0 auto; }
.phone__screen { background: var(--bg); border-radius: 25px; overflow: hidden; }
.phone__top { background: var(--navy); padding: 18px 18px 22px; color: #fff; display: flex; align-items: center; justify-content: space-between; }
.phone__top .t { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.phone__top .lang { font-family: var(--font-mono); font-size: 10px; color: var(--sky-300); border: 1px solid rgba(125,211,252,.3); padding: 3px 7px; border-radius: 6px; }
.phone__body { padding: 16px; margin-top: -12px; }
.phone__card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; box-shadow: 0 10px 24px -12px rgba(11,29,63,.18); }
.combo-box { background: var(--sky-50); border: 1px dashed var(--sky-300); border-radius: 10px; padding: 12px; text-align: center; margin: 12px 0; }
.combo-box .k { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-600); font-family: var(--font-mono); }
.combo-box .v { margin: 5px 0 0; font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: var(--navy); letter-spacing: .12em; }

/* ---- dark sections (security / roles / cta) ---------------------------- */
.section--dark { background: var(--navy-900); color: #E8EBF4; background-image: radial-gradient(800px 400px at 90% 0%, rgba(14,165,233,.16), transparent 60%); }
.section--dark .eyebrow { color: var(--sky-400); }
.section--dark .h-display { color: #fff; }
.section--dark .lead { color: #9FAAC8; }
.card--dark { background: var(--navy-800); border: 1px solid var(--line-navy); border-radius: var(--r-lg); padding: 26px; }
.card--dark h3 { font-family: var(--font-display); font-weight: 600; font-size: 17.5px; margin: 0 0 8px; color: #fff; }
.card--dark p { margin: 0; font-size: 14px; line-height: 1.6; color: #9FAAC8; }
.card--dark .card__ic { background: rgba(14,165,233,.14); color: var(--sky-400); }

/* roles */
.roles { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; align-items: stretch; }
.role { border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--card); }
.role.is-admin { background: var(--navy); border-color: var(--line-navy); }
.role.is-holder { background: var(--sky-50); border-color: var(--sky-300); }
.role .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; padding: 4px 9px; border-radius: 6px; font-weight: 600; background: var(--sky-100); color: var(--sky-600); }
.role.is-admin .tag { background: rgba(14,165,233,.18); color: var(--sky-300); }
.role.is-holder .tag { background: var(--sky); color: #fff; }
.role.is-staff .tag { background: #EEF1F8; color: var(--muted); }
.role h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 14px 0 6px; color: var(--ink); }
.role.is-admin h3 { color: #fff; }
.role > p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.role.is-admin > p { color: #9FAAC8; }
.role__list { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.role__list .li { display: flex; gap: 7px; align-items: flex-start; }
.role__list .li span { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.role.is-admin .li span { color: #C6CEDF; }
.role__list svg { flex: none; margin-top: 2px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.step { position: relative; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.step .no { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--sky); }
.step .dots { margin: 14px 0 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; width: 64px; }
.step .dots i { aspect-ratio: 1; border-radius: 3px; background: var(--line); transition: background .3s; }
.step .dots i.on { background: var(--sky); }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* admin tiles */
.tile { display: flex; gap: 13px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: var(--line-hover); transform: translateY(-2px); }
.tile .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--sky-50); display: flex; align-items: center; justify-content: center; color: var(--sky-600); }
.tile h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0 0 3px; color: var(--ink); }
.tile p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* stack band */
.stackband { background: var(--navy); color: #E8EBF4; }
.stackband .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.stackband .copy { max-width: 380px; }
.stackband .copy .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-300); margin: 0 0 8px; }
.stackband .copy p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #B8C2DC; }
.stackband .tags { display: flex; flex-wrap: wrap; gap: 10px; }
.stackband .tags span { font-size: 13px; font-weight: 600; color: #9FAAC8; padding: 8px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); transition: border-color .2s, color .2s; }
.stackband .tags span:hover { color: #fff; border-color: var(--sky-300); }

/* clients */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; margin-top: 40px; }
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 86px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, transform .2s; }
.logo:hover { border-color: var(--line-hover); transform: translateY(-2px); }
.logo span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted-2); letter-spacing: -.01em; }
.quote { margin-top: 22px; background: var(--navy); border: 1px solid var(--line-navy); border-radius: 18px; padding: clamp(28px,4vw,40px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.quote p { margin: 0; flex: 1 1 360px; min-width: 280px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,2vw,24px); line-height: 1.35; letter-spacing: -.01em; color: #fff; }
.quote .who { display: flex; align-items: center; gap: 13px; }
.quote .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--line-navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--sky-300); }
.quote .who .n { margin: 0; font-size: 14px; font-weight: 600; color: #E8EBF4; }
.quote .who .r { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-2); }
.disclaimer { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: #9AA3BD; }

/* faq */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-soft); overflow: hidden; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; background: none; border: none; cursor: pointer; text-align: left; }
.faq__q span { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.faq__q .chev { flex: none; color: var(--sky); display: flex; transition: transform .25s var(--ease); }
.faq.is-open .faq__q .chev { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 22px 21px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* final cta */
.cta-card {
  max-width: 920px; margin: 0 auto; border-radius: var(--r-xl);
  padding: clamp(40px,6vw,64px); text-align: center;
  background: linear-gradient(135deg,#12274F 0%,#0B1D3F 55%);
  background-image: radial-gradient(600px 300px at 50% -20%, rgba(14,165,233,.32), transparent 65%);
  border: 1px solid var(--line-navy);
}
.cta-card h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.8vw,46px); line-height: 1.08; letter-spacing: -.02em; margin: 0; color: #fff; }
.cta-card p { margin: 18px auto 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: #B8C2DC; }
.cta-card .row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* footer */
.footer { background: var(--navy-900); color: #9FAAC8; padding: clamp(56px,7vw,80px) 24px 36px; }
.footer__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px 24px; }
.footer__brand .brand { color: #fff; }
.footer__brand p { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 260px; color: var(--muted-2); }
.footer__brand .mono { font-family: var(--font-mono); font-size: 11px; color: #5E6B8C; }
.footer__col .ttl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5E6B8C; margin: 0 0 14px; }
.footer__col .links { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13.5px; color: #9FAAC8; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__bottom { max-width: var(--maxw); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid #18233B; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer__bottom p { margin: 0; font-size: 12.5px; color: #5E6B8C; }
.footer__bottom .legal { display: flex; gap: 20px; font-size: 12.5px; }
.footer__bottom .legal a { color: #7A84A3; }
.footer__bottom .legal a:hover { color: #fff; }

/* ---- reveal animation --------------------------------------------------
   Only hide content when JS is available (html.js). No-JS visitors and
   crawlers that do not run JS see everything immediately — good for SEO.

   FAILSAFE: a pure-CSS animation reveals every element ~2.4s after load even
   if app.js never runs (blocked by a cache/CDN/optimizer, a module-MIME quirk,
   or a JS error). This guarantees the UI is never stuck invisible on deploy. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  animation: lw-reveal-failsafe .6s var(--ease) 2.4s forwards;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; animation: none; }
@keyframes lw-reveal-failsafe { to { opacity: 1; transform: none; } }

/* ---- keyframes --------------------------------------------------------- */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lockerFlash { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .roles { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 880px) {
  .nav__links, .nav__cta-desktop, .topbar__note { display: none !important; }
  .burger { display: inline-flex; }
  .hero__inner, .split { grid-template-columns: 1fr; gap: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .roles { grid-template-columns: 1fr; }
  .statband .wrap { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .statband .stat + .stat { border-left: none; }
  .locker-grid { grid-template-columns: repeat(5,1fr); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* noscript */
.noscript { padding: 40px 24px; text-align: center; font-family: var(--font-body); color: var(--ink); }

/* =========================================================================
   WordPress integration: menus, accessibility, blog, comments, breadcrumbs.
   ========================================================================= */

/* ---- accessibility helpers -------------------------------------------- */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; z-index: 300; }
.skip-link:focus {
  left: 12px; top: 12px; width: auto; height: auto; padding: 10px 16px;
  background: var(--sky); color: #fff; border-radius: var(--r-sm); font-weight: 600;
}

/* ---- nav menu (wp_nav_menu outputs <ul><li><a>) ----------------------- */
.nav__links { list-style: none; margin: 0; padding: 0; }
.nav__links li { display: inline-flex; }
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a { color: var(--ink); }
.nav__links .current-menu-item > a::after,
.nav__links .current_page_item > a::after { width: 100%; }
.brand--logo img { max-height: 40px; width: auto; height: auto; }

.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { display: block; }

.footer__col .links { list-style: none; margin: 0; padding: 0; }
.footer__col .links li { display: block; }
.footer__bottom .legal { list-style: none; margin: 0; padding: 0; }
.footer__bottom .legal li { display: inline-flex; }

/* ---- narrow reading column -------------------------------------------- */
.wrap--narrow { max-width: 760px; }

/* ---- page / archive hero ---------------------------------------------- */
.page-hero { padding: clamp(48px,6vw,84px) 0 8px; }
.page-hero .h-display { font-size: clamp(30px,4vw,48px); }
.page-hero .lead { margin: 16px 0 0; max-width: 680px; }

/* ---- breadcrumbs ------------------------------------------------------- */
.breadcrumbs { padding-top: 18px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--muted-2); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--line-hover); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--sky); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- blog grid + cards ------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 26px; }
.post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); }
.post-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--line-hover); }
.card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.card-media__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .card-media__img { transform: scale(1.04); }
.card-media__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--line-hover); background: linear-gradient(135deg, var(--sky-50), var(--bg-soft)); }
.card-media__ph svg { width: 44px; height: 44px; }
.card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.entry-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--sky-600); background: var(--sky-100); padding: 4px 9px; border-radius: 6px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.card-title a { transition: color .2s; }
.card-title a:hover { color: var(--sky); }
.card-excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.card-meta { font-size: 12.5px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; }
.meta-sep { color: var(--line-hover); }

/* ---- pagination -------------------------------------------------------- */
.pagination { padding: 48px 0 0; }
.pagination__inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
  font-weight: 600; font-size: 14px; transition: border-color .2s, background .2s, color .2s;
}
.pagination .page-numbers:hover { border-color: var(--sky); color: var(--sky); }
.pagination .page-numbers.current { background: var(--sky); border-color: var(--sky); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ---- single post ------------------------------------------------------- */
.single-hero { padding: clamp(40px,5vw,72px) 0 0; }
.single-title { font-size: clamp(30px,4.4vw,52px); margin: 14px 0 0; }
.single-meta { margin-top: 18px; font-size: 14px; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.single-meta a { color: var(--muted); } .single-meta a:hover { color: var(--sky); }
.single-featured { margin: 32px auto; }
.single-featured__img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }

/* ---- long-form content typography ------------------------------------- */
.entry-content { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.entry-content > * { margin-top: 0; margin-bottom: 1.25em; }
.entry-content h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.7em; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin-top: 1.6em; }
.entry-content h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35em; color: var(--ink); margin-top: 1.5em; }
.entry-content h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12em; color: var(--ink); margin-top: 1.4em; }
.entry-content a { color: var(--sky-600); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--sky); }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; border-radius: var(--r-md); }
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption { font-size: 13px; color: var(--muted-2); text-align: center; margin-top: 8px; }
.entry-content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sky);
  font-family: var(--font-display); font-size: 1.2em; line-height: 1.45; color: var(--ink);
}
.entry-content blockquote cite { display: block; font-family: var(--font-body); font-size: .7em; font-style: normal; color: var(--muted-2); margin-top: 8px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content code { font-family: var(--font-mono); font-size: .86em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.entry-content pre { background: var(--navy-900); color: #E8EBF4; padding: 18px 20px; border-radius: var(--r-md); overflow: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
.entry-content pre code { background: none; border: 0; padding: 0; color: inherit; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--bg-soft); font-weight: 600; }
.entry-content .alignwide { width: min(1100px, 92vw); margin-left: 50%; transform: translateX(-50%); max-width: none; }
.entry-content .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.entry-content--full { max-width: none; }
.sticky .card-title::before { content: "★ "; color: var(--sky); }

/* ---- tags, author, post nav, related ---------------------------------- */
.entry-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 32px 0; color: var(--muted-2); }
.entry-tags .tag-list a, .entry-tags a { font-size: 13px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; margin: 0 4px 4px 0; display: inline-block; transition: border-color .2s, color .2s; }
.entry-tags a:hover { border-color: var(--sky); color: var(--sky); }
.author-bio { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin: 32px 0; }
.author-bio__avatar { border-radius: 50%; }
.author-bio__name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.author-bio__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; }
.post-nav a { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.post-nav a:hover { color: var(--sky); }
.post-nav__next { margin-left: auto; text-align: right; }
.related { margin-top: 48px; }
.related__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; margin: 0 0 24px; color: var(--ink); }

/* ---- comments ---------------------------------------------------------- */
.comments-area { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.comments-title, .comment-reply-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 24px; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list ol { list-style: none; }
.comment-list .children { list-style: none; margin: 0; padding-left: 24px; }
.comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.comment-author .avatar { border-radius: 50%; }
.comment-metadata { font-size: 12.5px; color: var(--muted-2); margin: 4px 0 8px; }
.comment-metadata a { color: var(--muted-2); }
.comment-content { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.comment-respond { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.comment-form label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea,
.search-field {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.comment-form p { margin: 0 0 16px; }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .form-submit { margin: 0; }

/* ---- search form ------------------------------------------------------- */
.search-form { position: relative; display: flex; gap: 8px; align-items: center; }
.search-form__icon { position: absolute; left: 14px; color: var(--muted-2); display: flex; pointer-events: none; }
.search-form .search-field { padding-left: 42px; flex: 1; }
.search-again { margin-bottom: 32px; max-width: 520px; }

/* ---- empty / 404 ------------------------------------------------------- */
.empty-state { text-align: center; padding: 48px 0; }
.empty-state .lead { margin-bottom: 24px; }
.error-404 { padding: clamp(72px,9vw,128px) 0; }

/* ---- widgets ----------------------------------------------------------- */
.widget { margin-bottom: 32px; }
.widget-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 14px; }

/* ---- responsive add-ons ----------------------------------------------- */
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-nav { flex-direction: column; }
  .post-nav__next { margin-left: 0; text-align: left; }
}

/* keep reveal hidden state from blocking no-JS print/SEO */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Solution / segment pages
   ========================================================================= */
.btn--soft { color: var(--navy); background: #EEF1F8; }
.btn--soft:hover { background: #E2E7F2; }
.card__ic--warn { background: #FEF3C7; color: #B45309; }

.sol-hero { padding: clamp(56px,7vw,92px) 0; }
.sol-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
/* Prevent grid/flex children from forcing the row wider than the viewport
   (min-width:auto is the default and causes horizontal overflow on mobile). */
.sol-hero__grid > *, .hero__inner > *, .split > *, .grid-auto > *, .roles > *, .steps > * { min-width: 0; }
.h-display, .hero h1, .single-title, .card-title, .plan__name { overflow-wrap: break-word; }
.sol-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted-2); margin-bottom: 18px; transition: color .2s; }
.sol-back:hover { color: var(--sky); }
.stat-panel { background: linear-gradient(180deg,#0B1D3F,#12274F); border-radius: 20px; padding: 30px; box-shadow: 0 30px 64px -24px rgba(11,29,63,.5); }
.stat-panel__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-300); margin: 0 0 20px; }
.stat-panel__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-navy); }
.stat-panel__row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.stat-panel__row span { font-size: 14px; color: #9FAAC8; }
.stat-panel__row strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.4vw,30px); color: #fff; letter-spacing: -.01em; white-space: nowrap; }

.pull-quote { max-width: 880px; margin: 0 auto; text-align: center; }
.pull-quote p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2.8vw,32px); line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.pull-quote__who { margin-top: 24px !important; font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 14px !important; color: #9FAAC8 !important; }

/* =========================================================================
   Pricing
   ========================================================================= */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 20px; align-items: stretch; max-width: 1100px; margin: 0 auto; }
.plan { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; box-shadow: 0 12px 24px -14px rgba(11,29,63,.10); }
.plan--featured { background: var(--navy); border-color: var(--sky); box-shadow: 0 28px 56px -20px rgba(11,29,63,.45); }
.plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #fff; background: var(--sky); padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(14,165,233,.6); white-space: nowrap; }
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0; color: var(--ink); }
.plan--featured .plan__name { color: #fff; }
.plan__blurb { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); min-height: 40px; }
.plan--featured .plan__blurb { color: #B8C2DC; }
.plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan__price span { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -.02em; color: var(--ink); }
.plan--featured .plan__price span { color: #fff; }
.plan__price small { font-size: 13px; color: var(--muted-2); }
.plan--featured .plan__price small { color: #9FAAC8; }
.plan__cta { margin: 22px 0 24px; text-align: center; padding: 13px; border-radius: 11px; font-weight: 600; font-size: 14.5px; color: var(--navy); background: #EEF1F8; transition: opacity .2s, transform .18s var(--ease); }
.plan--featured .plan__cta { color: #fff; background: var(--sky); }
.plan__cta:hover { opacity: .92; }
.plan__features { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 11px; }
.plan--featured .plan__features { border-top-color: var(--line-navy); }
.plan__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.plan--featured .plan__features li { color: #C6CEDF; }
.plan__features svg { flex: none; margin-top: 2px; color: var(--sky); }
.plan--featured .plan__features svg { color: var(--sky-400); }

.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 12px 24px -16px rgba(11,29,63,.12); }
.compare__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.compare__table thead th { padding: 18px 12px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); background: var(--bg-soft); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.compare__table thead th:first-child { text-align: left; padding-left: 22px; color: var(--muted-2); font-weight: 600; font-size: 14px; }
.compare__table th.is-pro, .compare__table td.is-pro { background: var(--sky-50); }
.compare__table thead th.is-pro { color: var(--sky-600); }
.compare__group th { padding: 11px 22px !important; text-align: left !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-300) !important; font-weight: 600 !important; background: var(--navy) !important; }
.compare__table tbody th[scope="row"] { padding: 13px 22px; font-weight: 400; font-size: 14px; color: var(--ink-2); text-align: left; }
.compare__table tbody td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.compare__table tbody tr th[scope="row"] { border-bottom: 1px solid var(--line-soft); }
.cmp-yes { color: var(--sky); display: inline-flex; }
.cmp-no { color: var(--line-hover); font-size: 15px; }
.cmp-txt { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }

/* =========================================================================
   Demo page
   ========================================================================= */
.demo-hero { background: var(--navy); background-image: radial-gradient(900px 460px at 80% -10%, rgba(14,165,233,.28), transparent 60%); color: #E8EBF4; padding: clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px); }
.demo-frame { position: relative; margin: 38px auto 0; max-width: 880px; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-navy); box-shadow: 0 40px 90px -30px rgba(0,0,0,.65); cursor: pointer; background: linear-gradient(160deg,#12274F,#080E1D); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.demo-frame::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 40px 40px; opacity: .7; }
.demo-frame__dots { position: absolute; top: 18px; left: 18px; display: flex; gap: 7px; }
.demo-frame__dots span { width: 9px; height: 9px; border-radius: 50%; }
.demo-frame__play { position: relative; width: 78px; height: 78px; border: 0; border-radius: 50%; background: var(--sky); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 16px 40px -8px rgba(14,165,233,.7); transition: transform .2s var(--ease); }
.demo-frame__play svg { margin-left: 4px; }
.demo-frame:hover .demo-frame__play { transform: scale(1.06); }
.demo-frame__label { position: relative; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: #9FAAC8; }
.demo-frame__time { position: absolute; bottom: 16px; right: 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff; background: rgba(8,14,29,.7); padding: 5px 10px; border-radius: 7px; }
.demo-note { margin: 16px 0 0; font-size: 12.5px; color: #5E6B8C; font-family: var(--font-mono); text-align: center; }
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chapter { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; transition: border-color .2s, transform .2s; }
.chapter:hover { border-color: var(--sky-300); transform: translateY(-2px); }
.chapter__time { flex: none; width: 46px; height: 46px; border-radius: 11px; background: var(--sky-100); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--sky-600); }
.chapter h3 { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; margin: 0 0 3px; color: var(--ink); }
.chapter p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 880px) {
  .sol-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .chapters { grid-template-columns: 1fr; }
}

/* =========================================================================
   Contact form + "Talk to sales"
   ========================================================================= */
.contact-points { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.contact-point { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s, transform .2s; color: var(--ink); }
.contact-point:hover { border-color: var(--sky-300); transform: translateY(-2px); }
.contact-point__ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--sky-100); color: var(--sky-600); display: flex; align-items: center; justify-content: center; }
.contact-point span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.contact-point strong { color: var(--ink); font-size: 15px; }

.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-card); }
.lw-form .lw-field { margin: 0 0 16px; }
.lw-form .lw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lw-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.lw-form label span { color: var(--sky); }
.lw-form input, .lw-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-soft); color: var(--ink); font-family: var(--font-body); font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.lw-form input:focus, .lw-form textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14,165,233,.15); background: var(--card); }
.lw-form textarea { resize: vertical; min-height: 120px; }
.lw-form .lw-field--submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.lw-form__hint { font-size: 13px; color: var(--muted-2); }
.lw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { padding: 14px 16px; border-radius: var(--r-sm); font-size: 14.5px; margin-bottom: 20px; }
.form-note--ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; }
.form-note--err { background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; }
@media (max-width: 560px) { .lw-form .lw-field-row { grid-template-columns: 1fr; } }

/* =========================================================================
   AI chatbot
   ========================================================================= */
.lw-chat { position: fixed; right: 22px; bottom: 22px; z-index: 150; }
.lw-chat__fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sky); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(14,165,233,.6); transition: transform .2s var(--ease), background .2s;
}
.lw-chat__fab:hover { transform: scale(1.06); background: var(--sky-600); }
.lw-chat__panel {
  position: absolute; right: 0; bottom: 72px; width: min(340px, calc(100vw - 32px)); height: min(460px, calc(100vh - 150px));
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(11,29,63,.45);
  animation: lw-chat-in .25s var(--ease);
}
/* Make the [hidden] attribute win over display:flex so the panel truly closes. */
.lw-chat__panel[hidden] { display: none !important; }
@keyframes lw-chat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lw-chat__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--navy); color: #fff; }
.lw-chat__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.lw-chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.lw-chat__close { background: none; border: 0; color: #9FAAC8; cursor: pointer; display: flex; padding: 4px; border-radius: 6px; }
.lw-chat__close:hover { color: #fff; }
.lw-chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.lw-msg { display: flex; }
.lw-msg--user { justify-content: flex-end; }
.lw-msg__bubble { max-width: 80%; padding: 10px 13px; border-radius: 13px; font-size: 14px; line-height: 1.5; }
.lw-msg--assistant .lw-msg__bubble { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 4px; }
.lw-msg--user .lw-msg__bubble { background: var(--sky); color: #fff; border-bottom-right-radius: 4px; }
.lw-msg__bubble a { color: var(--sky-600); text-decoration: underline; word-break: break-word; }
.lw-msg__bubble strong { font-weight: 700; }
.lw-msg__bubble ul { margin: 6px 0; padding-left: 18px; }
.lw-msg__bubble li { margin: 3px 0; }
.lw-msg--user .lw-msg__bubble a { color: #fff; }
.lw-typing { display: flex; gap: 4px; align-items: center; }
.lw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: lw-bounce 1.2s infinite; }
.lw-typing span:nth-child(2) { animation-delay: .15s; }
.lw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lw-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.lw-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--card); }
.lw-chat__form input { flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--ink); font-family: var(--font-body); font-size: 14px; }
.lw-chat__form input:focus { outline: none; border-color: var(--sky); }
.lw-chat__form button { flex: none; width: 42px; border: 0; border-radius: 10px; background: var(--sky); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lw-chat__form button:hover { background: var(--sky-600); }
/* human support persona header */
.lw-chat__fab { position: relative; }
.lw-chat__pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(14,165,233,.55); animation: lw-fab-pulse 2.2s var(--ease) infinite; pointer-events: none; }
@keyframes lw-fab-pulse { to { box-shadow: 0 0 0 14px rgba(14,165,233,0); } }
.lw-chat__rep { display: flex; align-items: center; gap: 10px; }
.lw-chat__avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--sky),#2563EB); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.lw-chat__status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #34D399; border: 2px solid var(--navy); }
.lw-chat__who { display: flex; flex-direction: column; line-height: 1.25; }
.lw-chat__who strong { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #fff; }
.lw-chat__who em { font-style: normal; font-size: 11.5px; color: #6EE7B7; }
.lw-chat__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #EF4444; color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lw-chat__badge[hidden] { display: none; }

/* =========================================================================
   Booking modal (Calendly / Cal.com) + Demo-page inline embed
   ========================================================================= */
.lw-book { position: fixed; inset: 0; z-index: 200; display: none; }
.lw-book.is-open { display: block; }
.lw-book__overlay { position: absolute; inset: 0; background: rgba(8,14,29,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: lw-chat-in .2s var(--ease); }
.lw-book__dialog { position: absolute; inset: 0; margin: auto; width: min(460px, calc(100vw - 24px)); height: min(740px, calc(100vh - 48px)); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); animation: lw-chat-in .25s var(--ease); }
.lw-book__bar { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.lw-book__new { font-size: 13px; font-weight: 600; color: var(--sky-600); text-decoration: none; }
.lw-book__new:hover { text-decoration: underline; }
.lw-book__close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(11,29,63,.08); color: #0B1D3F; font-size: 22px; line-height: 1; cursor: pointer; }
.lw-book__close:hover { background: rgba(11,29,63,.16); }
.lw-book__frame { width: 100%; height: 100%; border: 0; padding-top: 44px; box-sizing: border-box; }
@media (max-width: 480px) { .lw-book__dialog { width: 100vw; height: 100vh; border-radius: 0; } }

.demo-embed-wrap { margin: 38px auto 0; max-width: 880px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.demo-embed { width: 100%; height: min(72vh, 760px); min-height: 560px; border: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .lw-chat__panel, .lw-typing span, .lw-chat__pulse { animation: none; } }

/* =========================================================================
   Mobile optimization
   ========================================================================= */
@media (max-width: 600px) {
  .wrap { padding-inline: 18px; }
  .section { padding-block: clamp(48px, 11vw, 76px); }
  .section-head .lead, .lead { font-size: 16px; }

  /* compact, still-sticky top bar */
  .topbar .wrap { padding-block: 7px; gap: 10px; }
  .topbar__links { gap: 10px; }
  .topbar__links a, .topbar__links { font-size: 11.5px; }

  /* nav */
  .nav { padding-block: 11px; }
  .brand__name { font-size: 17px; }

  /* hero */
  .hero__inner { padding-block: clamp(44px, 12vw, 72px); }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* dashboard card */
  .panel__body { padding: 14px; }
  .stat-row { gap: 6px; }
  .stat-mini { padding: 8px 9px; }
  .stat-mini p:last-child { font-size: 17px; }
  .locker-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }

  /* cards & grids */
  .grid-auto, .grid-auto--sm { gap: 14px; }
  .card { padding: 22px; }

  /* CTAs full-width for easy tapping */
  .cta-card .row .btn, .sol-hero .hero__cta .btn { width: 100%; justify-content: center; }
  .cta-card .row { flex-direction: column; }

  /* footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* pricing: stack plans, table scrolls horizontally */
  .price-grid { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }

  /* contact */
  .contact-card { padding: 20px; }

  /* breadcrumbs wrap nicely + sit closer to the hero (one visual unit) */
  .breadcrumbs ol { font-size: 12px; }
  .breadcrumbs { padding-top: 14px; }
  .sol-hero { padding-top: 26px; }
  .page-hero { padding-top: 20px; }
}

@media (max-width: 400px) {
  .locker-grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  /* drop the least-critical top-bar link to prevent overflow */
  .topbar__links a[href*="/pricing"] { display: none; }
}

/* AI chat — phones */
@media (max-width: 480px) {
  .lw-chat { right: 14px; bottom: 14px; }
  .lw-chat__fab { width: 50px; height: 50px; }
  .lw-chat__panel {
    width: min(330px, calc(100vw - 28px));
    height: min(56vh, calc(100vh - 140px));
    right: 0; bottom: 60px;
  }
  .lw-chat__head { padding: 11px 13px; }
  .lw-chat__log { padding: 12px; gap: 8px; }
  .lw-msg__bubble { font-size: 13.5px; }
}