:root {
  --blue: #00a8e8;
  --blue-deep: #008bc4;
  --shadow: #2d2a32;
  --muted: #74727a;
  --white: #ffffff;
  --paper: #f7fbff;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.86);
  --soft-line: rgba(45, 42, 50, 0.09);
  --shadow-lg: 0 34px 90px rgba(45, 42, 50, 0.12), 0 8px 24px rgba(0, 168, 232, 0.07);
  --radius: 42px;
  --radius-sm: 24px;
  --shell: min(1240px, calc(100vw - 48px));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Arial, sans-serif;
  color: var(--shadow);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { position:relative; margin: 0; min-width: 320px; overflow-x: clip; background: transparent; color: var(--shadow); }
body, button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { color: var(--white); background: var(--blue); }

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #fff; pointer-events: none; }
.page-home main,.page-home .footer { position:relative; z-index:1; }
.page-auth .auth-header,
.page-auth .auth-layout,
.page-dashboard .dashboard-shell { position:relative; z-index:1; }
.ambient__wash { position: absolute; inset: -25%; background: radial-gradient(ellipse 48% 44% at 12% 14%, rgba(0,168,232,.22), transparent 72%), radial-gradient(ellipse 42% 50% at 82% 68%, rgba(0,168,232,.15), transparent 74%), radial-gradient(ellipse 34% 38% at 52% 45%, rgba(45,42,50,.065), transparent 76%), radial-gradient(circle at 88% 8%, rgba(255,255,255,.98), transparent 27%), linear-gradient(135deg, #fff 8%, #effaff 49%, #fff 92%); filter: blur(24px) saturate(118%); animation: ambientFlow 22s ease-in-out infinite alternate; }
.ambient__mesh { position: absolute; inset: -8%; opacity: .23; background-image: radial-gradient(circle, rgba(45,42,50,.34) 1px, transparent 1.45px); background-size: 14px 14px; mask-image: radial-gradient(ellipse 48% 46% at 84% 14%, #000, transparent 80%), radial-gradient(ellipse 43% 46% at 11% 79%, #000, transparent 83%), linear-gradient(124deg, transparent 34%, #000 50%, transparent 69%); -webkit-mask-image: radial-gradient(ellipse 48% 46% at 84% 14%, #000, transparent 80%), radial-gradient(ellipse 43% 46% at 11% 79%, #000, transparent 83%), linear-gradient(124deg, transparent 34%, #000 50%, transparent 69%); animation: ambientDots 26s ease-in-out infinite alternate; }
.ambient__pixels { position: absolute; inset: 0; }
.ambient__pixels span { position: absolute; width: var(--s); height: var(--s); left: var(--x); top: var(--y); border-radius: 32%; background: color-mix(in srgb, var(--blue) var(--tone), var(--shadow)); opacity: var(--o); box-shadow: 0 0 18px rgba(0,168,232,.12); animation: pixelDrift var(--d) ease-in-out var(--delay) infinite alternate; transform: rotate(var(--r)); }
.site-grid-canvas { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; opacity:.72; }
.ambient__wash { z-index:0; }.ambient__mesh { z-index:2; }.ambient__pixels { z-index:3; }
@keyframes ambientFlow { to { transform: translate3d(3%, -2%, 0) scale(1.04) rotate(1deg); } }
@keyframes ambientDots { to { transform: translate3d(-2.5%, 2%, 0) rotate(-1deg) scale(1.035); } }
@keyframes pixelDrift { to { translate: var(--dx) var(--dy); rotate: 22deg; scale: .75; } }

.pixel-intro { position: relative; isolation: isolate; display: grid; width: 100%; min-height: 100dvh; place-items: center; overflow: hidden; background: white; }
.pixel-intro::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse 58% 56% at 50% 53%, rgba(255,255,255,.91), rgba(255,255,255,.68) 42%, transparent 76%); pointer-events: none; }
.intro-shader { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: white; pointer-events: none; }.intro-shader__wash,.intro-shader__wave,.intro-shader__halftone { position: absolute; inset: -22%; will-change: transform; }.intro-shader__wash { background: radial-gradient(ellipse 56% 48% at 23% 18%, rgba(0,168,232,.22), transparent 70%), radial-gradient(ellipse 48% 56% at 78% 70%, rgba(0,168,232,.16), transparent 72%), radial-gradient(ellipse 38% 34% at 54% 46%, rgba(45,42,50,.08), transparent 74%); filter: blur(24px); animation: introWash 18s ease-in-out infinite alternate; }.intro-shader__wave { opacity: .62; filter: blur(34px); mix-blend-mode: multiply; }.intro-shader__wave--blue { background: radial-gradient(ellipse 30% 54% at 28% 50%, rgba(0,168,232,.25), transparent 74%), radial-gradient(ellipse 23% 42% at 69% 30%, rgba(0,168,232,.18), transparent 76%); animation: introBlue 15s ease-in-out infinite alternate; }.intro-shader__wave--grey { background: radial-gradient(ellipse 24% 48% at 54% 74%, rgba(45,42,50,.1), transparent 76%), radial-gradient(ellipse 18% 38% at 84% 45%, rgba(45,42,50,.07), transparent 78%); animation: introGrey 21s ease-in-out infinite alternate-reverse; }.intro-shader__halftone { inset: -12%; opacity: .28; background-image: radial-gradient(circle, rgba(45,42,50,.42) 0 1px, transparent 1.4px); background-size: 9px 9px; mask-image: radial-gradient(ellipse 48% 42% at 18% 28%, #000, transparent 72%), radial-gradient(ellipse 40% 52% at 78% 66%, #000, transparent 76%), linear-gradient(122deg, transparent 28%, #000 48%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 48% 42% at 18% 28%, #000, transparent 72%), radial-gradient(ellipse 40% 52% at 78% 66%, #000, transparent 76%), linear-gradient(122deg, transparent 28%, #000 48%, transparent 70%); animation: introDots 17s ease-in-out infinite alternate; }
#pixel-display { position: relative; z-index: 1; display: block; width: 100%; height: 100dvh; filter: drop-shadow(0 0 4px rgba(0,168,232,.2)); transform: translateZ(0); will-change: transform; }.replay { position: absolute; z-index: 3; right: 25px; bottom: 22px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; color: var(--shadow); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .35s ease,border-color .2s ease; }.replay.is-visible { opacity: .45; }.replay:hover { opacity: 1; border-color: var(--blue); }.intro-scroll { position: absolute; z-index: 3; left: 25px; bottom: 19px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }.intro-scroll i { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(45,42,50,.1); border-radius: 10px; background: rgba(255,255,255,.52); font-style: normal; animation: introNudge 2s ease-in-out infinite; }.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes introWash { from { transform: translate3d(-2%,-1%,0) scale(1.02) rotate(-1deg); } to { transform: translate3d(3%,2%,0) scale(1.08) rotate(2deg); } }@keyframes introBlue { from { transform: translate3d(-5%,2%,0) scaleX(.95) rotate(-5deg); } to { transform: translate3d(7%,-4%,0) scaleX(1.1) rotate(7deg); } }@keyframes introGrey { from { transform: translate3d(3%,-4%,0) rotate(4deg); } to { transform: translate3d(-6%,5%,0) rotate(-6deg); } }@keyframes introDots { from { transform: translate3d(-3%,-2%,0) rotate(-4deg) scale(1.02); } to { transform: translate3d(4%,3%,0) rotate(5deg) scale(1.08); } }@keyframes introNudge { 50% { translate: 0 4px; } }

.section-shell { width: var(--shell); margin-inline: auto; }
.glass-panel, .glass-nav, .dashboard-sidebar {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.38));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.28), var(--shadow-lg);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}
.interactive-glow { isolation: isolate; overflow: hidden; }
.interactive-glow::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.9), transparent 42%), radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(0,168,232,.12), transparent 64%); opacity: .72; transition: opacity .3s ease; pointer-events: none; }
.interactive-glow:hover::before { opacity: 1; }

.glass-nav { position: fixed; z-index: 50; top: 18px; left: 50%; width: min(1180px, calc(100vw - 36px)); min-height: 66px; transform: translateX(-50%); padding: 9px 9px 9px 18px; border-color: rgba(255,255,255,.96); border-radius: 22px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(118deg, rgba(255,255,255,.78), rgba(255,255,255,.42) 48%, rgba(218,246,255,.52)); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,168,232,.08), inset 18px 0 38px rgba(255,255,255,.3), 0 16px 48px rgba(45,42,50,.1), 0 2px 8px rgba(0,168,232,.08); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); overflow: visible; }
.glass-nav::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 20px; background: radial-gradient(180px 42px at 9% 0%, rgba(255,255,255,.94), transparent 68%), radial-gradient(250px 70px at 79% 112%, rgba(0,168,232,.12), transparent 70%); pointer-events: none; }
.glass-nav::after { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: 23px; background: linear-gradient(110deg, rgba(255,255,255,.95), rgba(0,168,232,.23), rgba(255,255,255,.98), rgba(45,42,50,.1)); opacity: .62; filter: blur(.35px); pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 780; letter-spacing: -.06em; }
.brand img { width: 27px; height: 27px; object-fit: contain; }
.wordmark { font-size: 25px; line-height: 1; }
.wordmark-o { position: relative; display: inline-block; letter-spacing: 0; }
.wordmark-o i { position: absolute; inset: 51% auto auto 49%; translate: -50% -50%; color: var(--blue); font-size: .33em; font-style: normal; text-shadow: 0 0 6px rgba(0,168,232,.6); }
.brand small { margin-left: 2px; color: var(--blue); font-size: 9px; letter-spacing: .12em; }
.glass-nav nav { position:relative; display: flex; align-items: center; gap: 9px; padding:5px; border:1px solid rgba(255,255,255,.54); border-radius:15px; background:rgba(255,255,255,.12); font-size: 13px; font-weight: 620; }
.glass-nav nav a { position: relative; z-index:2; min-height:36px; display:flex; align-items:center; padding:0 14px; color: rgba(45,42,50,.67); transition: color .25s ease; }
.glass-nav nav a::after { display:none; }
/* Travels on both axes: the bar is one row, but the dropdown is a 2x2 grid.
   The --nav-y fallback of 5px is the bar's own padding, so the pill still
   lands correctly if the script never runs. */
.nav-liquid-indicator { position:absolute; z-index:1; left:0; top:0; width:var(--nav-w,90px); height:var(--nav-h,36px); border:1px solid rgba(255,255,255,.82); border-radius:11px; background:linear-gradient(140deg,rgba(255,255,255,.52),rgba(163,229,251,.24)); box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.13),0 8px 20px rgba(45,42,50,.08); backdrop-filter:blur(20px) saturate(210%); transform:translate3d(var(--nav-x,0),var(--nav-y,5px),0); transition:transform .45s cubic-bezier(.2,.82,.2,1),width .45s cubic-bezier(.2,.82,.2,1),height .45s cubic-bezier(.2,.82,.2,1); }
.glass-nav nav a.active { color:var(--shadow); }
.glass-nav nav a:hover { color: var(--shadow); }
.glass-nav nav a:hover::after { right: 0; }
.nav-account { display: inline-flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 14px; color: var(--white); background: var(--shadow); font-size: 13px; font-weight: 680; box-shadow: 0 8px 22px rgba(45,42,50,.18); transition: transform .2s, background .2s; }
.nav-account:hover { transform: translateY(-2px); background: var(--blue); }
.nav-hub { display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 5px 7px 5px 9px; border: 1px solid rgba(255,255,255,.85); border-radius: 15px; color: white; background: linear-gradient(135deg, rgba(45,42,50,.96), rgba(45,42,50,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 9px 24px rgba(45,42,50,.18); cursor: pointer; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }.nav-hub:hover { transform: translateY(-2px); background: var(--blue); box-shadow: 0 12px 28px rgba(0,168,232,.26); }.nav-hub b { font-size: 11px; font-weight: 710; }.nav-hub em { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.13); font-style: normal; font-size: 15px; transition: rotate .3s ease; }.nav-hub[aria-expanded="true"] em { rotate: 45deg; }.nav-hub-face { position: relative; display: block; width: 30px; height: 30px; border-radius: 10px; background: #16151a; box-shadow: inset 0 0 9px rgba(0,168,232,.2); }.nav-hub-face i { position: absolute; top: 10px; width: 6px; height: 5px; border: 2px solid var(--blue); border-bottom: 0; border-radius: 6px 6px 0 0; filter: drop-shadow(0 0 4px rgba(0,168,232,.75)); }.nav-hub-face i:first-child { left: 6px; }.nav-hub-face i:last-child { right: 6px; }
.nav-toggle { display: none; border: 0; background: transparent; font-weight: 700; }

.hub-backdrop { position: fixed; z-index: 69; inset: 0; background: rgba(45,42,50,.12); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: opacity .35s ease, backdrop-filter .35s ease; }.hub-backdrop.open { opacity: 1; pointer-events: auto; backdrop-filter: blur(7px); }
.lumo-hub { position: fixed; z-index: 70; top: 12px; right: 12px; bottom: 12px; width: min(480px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; padding: 23px; border: 1px solid rgba(255,255,255,.94); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(240,250,255,.65)); box-shadow: inset 0 1px 0 white, inset 0 -1px 0 rgba(0,168,232,.1), -28px 0 90px rgba(45,42,50,.16); backdrop-filter: blur(42px) saturate(180%); -webkit-backdrop-filter: blur(42px) saturate(180%); transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; transition: transform .52s cubic-bezier(.2,.82,.2,1), opacity .3s ease; }.lumo-hub.open { transform: none; opacity: 1; pointer-events: auto; }.hub-liquid-layer { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle at 80% 3%, rgba(0,168,232,.23), transparent 24%), radial-gradient(circle at 10% 68%, rgba(255,255,255,.9), transparent 27%), radial-gradient(circle at 100% 84%, rgba(45,42,50,.07), transparent 30%); animation: ambientFlow 13s ease-in-out infinite alternate; }
.hub-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 7px 4px 20px; }.hub-header .eyebrow { margin-bottom: 8px; }.hub-header h2 { font-size: 43px; }.hub-close { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.85); border-radius: 14px; color: var(--shadow); background: rgba(255,255,255,.55); box-shadow: inset 0 1px white, 0 8px 19px rgba(45,42,50,.07); cursor: pointer; font-size: 24px; font-weight: 300; }
.hub-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border-radius: 16px; background: rgba(45,42,50,.045); }.hub-tabs button { min-height: 42px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; transition: .2s ease; }.hub-tabs button.active { color: var(--shadow); background: rgba(255,255,255,.84); box-shadow: 0 7px 20px rgba(45,42,50,.07), inset 0 1px white; }
.hub-content { position: relative; flex: 1; min-height: 0; margin-top: 12px; }.hub-pane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 29px 7px 12px; opacity: 0; visibility: hidden; transform: translateX(15px); transition: opacity .26s ease, transform .26s ease, visibility .26s; }.hub-pane.active { opacity: 1; visibility: visible; transform: none; }.hub-number { position: absolute; right: 3px; top: 22px; color: rgba(45,42,50,.16); font-size: 11px; font-weight: 780; letter-spacing: .12em; }.hub-pane h3 { max-width: 390px; font-size: 43px; }.hub-pane > p { max-width: 380px; margin: 18px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.6; }.hub-auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }.hub-auth-actions .button { min-height: 49px; padding-inline: 12px; gap: 7px; font-size: 10px; }.hub-session { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: auto; padding: 15px; border: 1px solid white; border-radius: 16px; background: rgba(255,255,255,.55); }.hub-session strong,.hub-session small { display: block; }.hub-session strong { font-size: 11px; }.hub-session small { margin-top: 4px; color: var(--muted); font-size: 8px; }.hub-session a { color: var(--blue-deep); font-size: 9px; font-weight: 750; }
.hub-steps { display: grid; gap: 8px; margin: 25px 0 20px; padding: 0; list-style: none; }.hub-steps li { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 61px; padding: 8px; border: 1px solid rgba(255,255,255,.78); border-radius: 15px; background: rgba(255,255,255,.44); }.hub-steps b { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--blue-deep); background: rgba(0,168,232,.1); font-size: 9px; }.hub-steps span { font-size: 11px; font-weight: 650; }.hub-faq { margin: 22px 0; border-top: 1px solid rgba(45,42,50,.09); }.hub-faq details { border-bottom: 1px solid rgba(45,42,50,.09); }.hub-faq summary { display: flex; min-height: 56px; align-items: center; cursor: pointer; font-size: 11px; font-weight: 700; }.hub-faq p { margin: -5px 0 14px; color: var(--muted); font-size: 10px; }.hub-bot-face { position: relative; width: 100%; height: 142px; margin-bottom: 23px; border-radius: 32px; background: var(--shadow); box-shadow: inset 0 0 35px rgba(0,168,232,.16), 0 19px 40px rgba(45,42,50,.14); }.hub-bot-face i { position: absolute; top: 43px; width: 48px; height: 36px; border: 7px solid var(--blue); border-bottom: 0; border-radius: 30px 30px 0 0; filter: drop-shadow(0 0 7px rgba(0,168,232,.75)); }.hub-bot-face i:first-child { left: 29%; }.hub-bot-face i:nth-child(2) { right: 29%; }.hub-bot-face b { position: absolute; left: 50%; bottom: 26px; width: 44px; height: 22px; translate: -50%; border: 6px solid var(--blue); border-top: 0; border-radius: 0 0 28px 28px; filter: drop-shadow(0 0 7px rgba(0,168,232,.75)); }.hub-pane[data-hub-pane="bot"] .button { margin-top: auto; }.hub-pane[data-hub-pane="bot"] > small { margin-top: 10px; color: var(--muted); font-size: 8px; text-align: center; }
.hub-footer { display: flex; align-items: center; min-height: 47px; padding: 0 9px; border-top: 1px solid rgba(45,42,50,.08); color: var(--muted); font-size: 9px; }.hub-footer b { margin-left: auto; color: var(--shadow); }.hub-footer .status-dot { margin-left: 5px; }

/* Sits above the toast at 80, the highest layer on the site; never interactive. */
.confetti-layer { position: fixed; z-index: 90; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.eyebrow { margin: 0 0 18px; color: var(--blue-deep); font-size: 11px; font-weight: 790; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(0,168,232,.11); }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; letter-spacing: -.055em; line-height: .98; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
h2 { font-size: clamp(42px, 5.3vw, 72px); }

.hero { min-height: 100svh; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(48px, 7vw, 100px); align-items: center; padding-top: 116px; padding-bottom: 48px; }
.hero-copy h1 { max-width: 760px; font-size: clamp(60px, 7.15vw, 99px); }
.hero-lead { max-width: 610px; margin: 29px 0 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { position: relative; display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 34px; padding: 0 23px; border: 1px solid transparent; border-radius: 17px; cursor: pointer; font-size: 14px; font-weight: 720; transition: translate .2s ease, transform .2s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { translate: 0 -2px; }
.button--primary { color: var(--white); background: var(--shadow); box-shadow: 0 14px 35px rgba(45,42,50,.18); }
.button--primary:hover { background: var(--blue); box-shadow: 0 16px 36px rgba(0,168,232,.24); }
.button--glass { border-color: rgba(45,42,50,.09); background: rgba(255,255,255,.56); box-shadow: inset 0 1px 0 white, 0 8px 28px rgba(45,42,50,.06); backdrop-filter: blur(18px); }
.hero-proof { display: flex; gap: 20px; margin-top: 31px; color: var(--muted); font-size: 11px; font-weight: 650; }
.hero-proof span:not(:first-child)::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 18px 3px 0; border-radius: 50%; background: rgba(45,42,50,.35); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #37c785; box-shadow: 0 0 0 5px rgba(55,199,133,.12); }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 580px; perspective: 1000px; }
.hero-orbit { position: absolute; border: 1px solid rgba(45,42,50,.09); border-radius: 50%; }
.hero-orbit--one { width: 520px; height: 520px; }
.hero-orbit--two { width: 390px; height: 390px; border-style: dashed; animation: spin 24s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.connection-card { z-index: 2; width: min(420px, 90vw); min-height: 456px; padding: 27px; border-radius: 38px; transform: rotateY(-4deg) rotateX(2deg); }
.card-topline { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 780; letter-spacing: .14em; }
.live-pill { padding: 7px 8px; border-radius: 9px; color: var(--blue-deep); background: rgba(0,168,232,.1); font-size: 8px; font-style: normal; letter-spacing: .1em; }
.connection-core, .dash-connection { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 290px; text-align: center; }
.power-button { position: relative; display: grid; width: 120px; height: 120px; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: radial-gradient(circle at 38% 31%, #39c7f8, var(--blue) 46%, #0086bd); box-shadow: inset 0 2px 8px rgba(255,255,255,.45), 0 20px 48px rgba(0,168,232,.3), 0 0 0 14px rgba(0,168,232,.08); cursor: pointer; transition: transform .3s ease, filter .3s ease, box-shadow .3s ease; }
.power-button::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.power-button span { position: relative; width: 27px; height: 34px; border: 4px solid white; border-top-color: transparent; border-radius: 0 0 50% 50%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.power-button span::before { content: ""; position: absolute; left: 50%; top: -12px; width: 4px; height: 21px; translate: -50%; border-radius: 4px; background: white; }
.power-button:hover { transform: scale(1.035); }
.power-button:not(.connected).off { filter: grayscale(.9); box-shadow: 0 16px 38px rgba(45,42,50,.16), 0 0 0 14px rgba(45,42,50,.05); }
.connection-core strong, .dash-connection strong { display: block; font-size: 24px; letter-spacing: -.04em; }
.connection-core small, .dash-connection small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.connection-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--soft-line); }
.connection-stats div { padding: 22px 10px 0; }
.connection-stats div + div { border-left: 1px solid var(--soft-line); padding-left: 24px; }
.connection-stats small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 720; letter-spacing: .12em; }
.connection-stats strong { font-size: 20px; }
.connection-stats strong span { color: var(--muted); font-size: 10px; font-weight: 570; }
.floating-chip { position: absolute; z-index: 3; padding: 14px 17px; border: 1px solid white; border-radius: 15px; color: var(--shadow); background: rgba(255,255,255,.78); box-shadow: 0 13px 34px rgba(45,42,50,.12); backdrop-filter: blur(18px); font-size: 11px; font-weight: 760; animation: float 4s ease-in-out infinite; }
.floating-chip span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 550; }
.chip--top { top: 100px; right: -10px; }
.chip--bottom { left: -10px; bottom: 92px; animation-delay: -1.6s; }
@keyframes float { 50% { translate: 0 -9px; } }

.trust-strip { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 0; align-items: center; min-height: 120px; padding: 24px 0; border-top: 1px solid rgba(45,42,50,.1); border-bottom: 1px solid rgba(45,42,50,.1); }
.trust-strip > p { color: var(--muted); font-size: 13px; }
.trust-strip > div { padding-left: 30px; border-left: 1px solid rgba(45,42,50,.1); }
.trust-strip strong { display: block; font-size: 27px; letter-spacing: -.05em; }
.trust-strip span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }

.section-heading { padding-top: 150px; padding-bottom: 62px; }
.section-heading h2 { max-width: 900px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento-card { min-height: 460px; padding: 31px; border-radius: var(--radius); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.bento-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px white, 0 40px 100px rgba(45,42,50,.14); }
.bento-card--privacy { grid-column: span 7; grid-row: span 2; min-height: 720px; }
.bento-card--speed { grid-column: span 5; }
.bento-card--devices, .bento-card--support { grid-column: span 6; }
.card-index { position: absolute; top: 27px; right: 28px; color: rgba(45,42,50,.26); font-size: 10px; font-weight: 760; letter-spacing: .12em; }
.card-copy { position: absolute; z-index: 2; left: 31px; right: 31px; bottom: 31px; }
.card-copy h3 { max-width: 560px; font-size: clamp(29px, 3vw, 44px); }
.card-copy > p:last-of-type { max-width: 500px; margin: 17px 0 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.text-action { display: inline-flex; min-height:48px; align-items:center; justify-content:center; gap:18px; padding: 0 18px; border: 1px solid rgba(255,255,255,.74); border-radius:15px; color: var(--blue-deep); background: linear-gradient(135deg,rgba(255,255,255,.42),rgba(166,231,252,.18)); cursor: pointer; font-size: 12px; font-weight: 750; }
.privacy-trigger { margin-top: 20px; }
/* Глобус с локациями вместо радара. Позиционирование переиспользует
   селекторы радара — они уже расписаны под все брейкпоинты. */
.server-globe { position:absolute; left:50%; top:41%; width:310px; height:310px; translate:-50% -50%; }
.server-globe-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; contain:layout paint; }
.server-globe-canvas:active { cursor:grabbing; }
/* Подписи летают вместе с точками: положение считает тот же поворот, что
   и внутри cobe, поэтому имя всегда рядом со своей точкой. */
.globe-labels { position:absolute; inset:0; pointer-events:none; }
.globe-label { position:absolute; left:0; top:0; color:var(--shadow); font-size:9px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; text-shadow:0 1px 3px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.75); will-change:transform,opacity; }

.privacy-radar { position: absolute; left: 50%; top: 41%; width: 310px; height: 310px; translate: -50% -50%; border: 1px solid rgba(0,168,232,.18); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 43px, rgba(0,168,232,.08) 44px 45px); }
.privacy-radar::before, .privacy-radar::after { content: ""; position: absolute; background: rgba(0,168,232,.11); }
.privacy-radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.privacy-radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.privacy-radar span { position: absolute; inset: 21%; border-radius: 50%; background: conic-gradient(from 45deg, rgba(0,168,232,.02), rgba(0,168,232,.23), rgba(0,168,232,.01) 32%); animation: spin 4s linear infinite; }
.privacy-radar i, .privacy-radar b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px rgba(0,168,232,.1), 0 0 20px rgba(0,168,232,.45); }
.privacy-radar i { left: 29%; top: 33%; }.privacy-radar b { right: 26%; bottom: 27%; }
.scan-result { position: absolute; z-index: 3; top: 67px; right: 25px; width: 180px; padding: 14px; border: 1px solid rgba(255,255,255,.9); border-radius: 15px; background: rgba(255,255,255,.78); box-shadow: 0 16px 32px rgba(45,42,50,.08); opacity: 0; transform: translateY(-8px); transition: .3s ease; }
.scan-result.visible { opacity: 1; transform: none; }
.scan-result div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 10px; }
.scan-result b { color: var(--muted); font-weight: 650; }.scan-result .secure { color: #229b64; }
.speed-number { position: absolute; left: 31px; top: 93px; display:flex; align-items:flex-end; gap:13px; padding:12px 16px 14px; border:1px solid transparent; border-radius:20px; transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s ease,border-color .35s ease,box-shadow .35s ease; }
.speed-number strong { display: block; color:var(--shadow); font-size: clamp(72px, 8vw, 112px); letter-spacing: -.08em; line-height: .8; }
.speed-number span { margin-bottom:4px; color: var(--shadow); font-size: clamp(19px,2vw,28px); font-weight:760; letter-spacing:-.04em; }
.bento-card--speed:hover .speed-number { transform:translateY(-6px) scale(1.03); border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.18); box-shadow:inset 0 1px white,0 16px 35px rgba(0,168,232,.13); }
.speed-graph { position: absolute; display: flex; align-items: flex-end; gap: 9px; right: 27px; top: 79px; height: 105px; }
.speed-graph i { width: 8px; height: calc(18px + var(--bar, 20px)); border-radius: 8px; background: linear-gradient(var(--blue), rgba(0,168,232,.12)); animation: barPulse 2.4s ease-in-out infinite alternate; }
.speed-graph i:nth-child(1){--bar:22px}.speed-graph i:nth-child(2){--bar:55px;animation-delay:-.4s}.speed-graph i:nth-child(3){--bar:34px;animation-delay:-.8s}.speed-graph i:nth-child(4){--bar:76px;animation-delay:-1.1s}.speed-graph i:nth-child(5){--bar:64px;animation-delay:-.2s}.speed-graph i:nth-child(6){--bar:85px;animation-delay:-1.4s}.speed-graph i:nth-child(7){--bar:59px;animation-delay:-.6s}.speed-graph i:nth-child(8){--bar:88px;animation-delay:-1s}
@keyframes barPulse { to { transform: scaleY(.78); opacity: .65; } }
.device-stack { position: absolute; inset: 55px 30px auto; height: 230px; }
.device { position: absolute; display: block; border: 5px solid rgba(45,42,50,.78); background: linear-gradient(145deg, #fff, #e4f8ff); box-shadow: 0 19px 45px rgba(45,42,50,.14); }
.device--laptop { left: 23%; bottom: 14px; width: 280px; height: 170px; border-radius: 15px; transform: rotate(-4deg); }
.device--laptop::after { content: ""; position: absolute; left: -25px; right: -25px; bottom: -15px; height: 10px; border-radius: 0 0 14px 14px; background: var(--shadow); }
.device--phone { z-index: 2; right: 13%; bottom: 0; width: 80px; height: 155px; border-radius: 20px; transform: rotate(7deg); }
.support-face { position: absolute; inset: 60px 40px auto; height: 210px; border-radius: 42% 42% 47% 47%; background: var(--shadow); box-shadow: inset 0 0 45px rgba(0,168,232,.14), 0 25px 50px rgba(45,42,50,.18); }
.support-face .eye, .support-face .smile { position: absolute; filter: drop-shadow(0 0 8px rgba(0,168,232,.8)); }
.support-face .eye { top: 61px; width: 63px; height: 49px; border: 9px solid var(--blue); border-bottom: 0; border-radius: 40px 40px 0 0; }
.support-face .eye--left { left: 27%; }.support-face .eye--right { right: 27%; }
.support-face .smile { left: 50%; bottom: 38px; width: 61px; height: 30px; translate: -50%; border: 8px solid var(--blue); border-top: 0; border-radius: 0 0 42px 42px; }

.servers { display: grid; grid-template-columns: .72fr 1.28fr; gap: 78px; align-items: center; padding-top: 170px; }
.servers-copy h2 { margin-bottom: 23px; }.servers-copy > p:not(.eyebrow) { max-width: 430px; color: var(--muted); line-height: 1.65; }
.best-server { margin-top: 28px; }.server-result { margin: 20px 0 0 8px; color: var(--muted); font-size: 11px; }
.server-map { min-height: 620px; border-radius: 40px; }
.map-globe { position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; translate: -50% -50%; border: 1px solid rgba(0,168,232,.23); border-radius: 50%; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.9), rgba(0,168,232,.08) 48%, rgba(45,42,50,.04)), repeating-radial-gradient(circle, transparent 0 49px, rgba(0,168,232,.09) 50px 51px); box-shadow: inset -26px -24px 70px rgba(0,168,232,.08), 0 35px 80px rgba(0,168,232,.12); }
.map-globe::before, .map-globe::after { content: ""; position: absolute; inset: 8% 25%; border: 1px solid rgba(0,168,232,.12); border-radius: 50%; }.map-globe::after { inset: 25% 8%; }
.server-point { position: absolute; z-index: 3; border: 0; background: transparent; cursor: pointer; }
.server-point i { display: block; width: 13px; height: 13px; margin: auto; border: 3px solid white; border-radius: 50%; background: var(--shadow); box-shadow: 0 0 0 8px rgba(45,42,50,.08); transition: .2s ease; }
.server-point span { display: block; margin-top: 13px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.9); border-radius: 11px; background: rgba(255,255,255,.8); box-shadow: 0 10px 26px rgba(45,42,50,.1); font-size: 10px; font-weight: 720; white-space: nowrap; }
.server-point b { margin-left: 8px; color: var(--muted); font-weight: 550; }.server-point.active i, .server-point:hover i { background: var(--blue); box-shadow: 0 0 0 9px rgba(0,168,232,.12), 0 0 23px rgba(0,168,232,.5); }
.point--nl { top: 24%; left: 48%; }.point--de { top: 47%; right: 18%; }.point--us { left: 17%; bottom: 21%; }
.map-route { position: absolute; width: 38%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,168,232,.3), transparent); transform-origin: left; }.route--one { left: 28%; top: 55%; rotate: -28deg; }.route--two { left: 51%; top: 37%; rotate: 19deg; }
.map-caption { position: absolute; left: 30px; right: 30px; bottom: 27px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .13em; }.map-caption strong { color: var(--shadow); font-size: 12px; letter-spacing: 0; }

.plans { padding-top: 160px; }.plans .section-heading { padding-top: 0; }.plan-configurator { padding: 17px; border-radius: 37px; }
.plan-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 6px; border-radius: 20px; background: rgba(45,42,50,.045); }
.plan-options button { min-height: 72px; padding: 10px; border: 0; border-radius: 15px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 680; transition: .25s ease; }
.plan-options button span { display: block; margin-top: 5px; color: var(--blue-deep); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.plan-options button.active { color: var(--shadow); background: rgba(255,255,255,.88); box-shadow: 0 8px 25px rgba(45,42,50,.09), inset 0 1px 0 white; }
.plan-summary { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; min-height: 370px; align-items: end; padding: 48px 50px; }
.plan-summary p { color: var(--muted); font-size: 11px; }.plan-summary h3 { margin: 7px 0 27px; font-size: clamp(36px, 4vw, 57px); }
.plan-summary h3 small { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 620; letter-spacing: 0; }
.plan-summary ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 26px; max-width: 510px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.plan-summary li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.45; hyphens: none; }
.plan-summary li::before { content: "✓"; color: var(--blue); font-weight: 800; line-height: inherit; }
.plan-price { padding: 29px; border: 1px solid rgba(255,255,255,.9); border-radius: 23px; background: rgba(255,255,255,.59); box-shadow: 0 18px 38px rgba(45,42,50,.08); }
.plan-price p { color: var(--shadow); }.plan-price strong { font-size: 31px; }.plan-price > span { display: block; margin: 8px 0 21px; color: var(--muted); font-size: 11px; }.plan-price .button { width: 100%; }.plan-price small { display: block; margin-top: 13px; color: var(--muted); text-align: center; font-size: 9px; }

.apps { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; padding-top: 170px; }
.big-wordmark { margin-bottom: 25px; font-size: clamp(65px, 8vw, 110px); font-weight: 800; letter-spacing: -.08em; line-height: .75; }
.apps-brand h2 { font-size: clamp(43px, 5vw, 66px); }.apps-brand > p:last-child { max-width: 430px; color: var(--muted); line-height: 1.6; }
.download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.download-card { display: flex; min-height: 215px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 25px; border-radius: 25px; transition: transform .3s ease; }.download-card:hover { transform: translateY(-5px); }
.download-card .platform { position: absolute; left: 25px; top: 22px; color: var(--blue-deep); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .13em; }
.download-card strong { margin-bottom: 18px; font-size: 20px; letter-spacing: -.04em; }.download-card button { padding: 8px 12px; border: 1px solid rgba(45,42,50,.08); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.65); font-size: 9px; font-weight: 700; }

.lumi-section { display: grid; grid-template-columns: 1.06fr .94fr; gap: 80px; align-items: center; padding-top: 180px; }
.lumi-visual { height: 610px; overflow: hidden; border-radius: 42px; background: white; }
.brandbook-crop { position: absolute; inset: 0; background: url("assets/lumi-brandbook.png") left top / 1900px auto no-repeat; }
.brandbook-crop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, rgba(255,255,255,.95)), linear-gradient(0deg, rgba(255,255,255,.88), transparent 28%); pointer-events: none; }
.lumi-copy h2 { font-size: clamp(48px, 5vw, 69px); }.lumi-copy > p:not(.eyebrow) { margin: 25px 0 30px; color: var(--muted); line-height: 1.7; }

.reviews { padding-top: 175px; }.reviews-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 58px; }.reviews-heading h2 { font-size: clamp(48px, 5.3vw, 72px); }.reviews-note { max-width: 300px; margin: 0 0 5px; color: var(--muted); font-size: 9px; line-height: 1.55; }.testimonial-stage { min-height: 610px; padding: 40px; border-radius: 40px; }.testimonial-stage::after { content: ""; position: absolute; inset: auto 10% -30% 10%; height: 58%; border-radius: 50%; background: rgba(0,168,232,.14); filter: blur(70px); pointer-events: none; }.testimonial-stack { position: relative; z-index: 2; width: min(720px, 78%); height: 470px; margin: auto; perspective: 1100px; }.testimonial-card { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; gap: 0 15px; padding: 42px; border: 1px solid rgba(255,255,255,.94); border-radius: 31px; background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(242,251,255,.65)); box-shadow: inset 0 1px white, 0 25px 70px rgba(45,42,50,.13); opacity: 0; transform: translateX(26%) scale(.85) rotateY(-9deg); transition: opacity .48s ease, transform .58s cubic-bezier(.2,.82,.2,1); pointer-events: none; }.testimonial-card.active { z-index: 4; opacity: 1; transform: none; pointer-events: auto; }.testimonial-card.before { z-index: 2; opacity: .34; transform: translateX(-23%) scale(.82) rotateY(9deg); }.testimonial-card.after { z-index: 2; opacity: .34; transform: translateX(23%) scale(.82) rotateY(-9deg); }.testimonial-avatar { display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid rgba(255,255,255,.84); border-radius: 17px; color: white; box-shadow: 0 12px 25px rgba(45,42,50,.14); font-size: 12px; font-weight: 800; }.avatar--anna { background: linear-gradient(145deg, var(--blue), #167bba); }.avatar--mikhail { background: linear-gradient(145deg, #64616b, var(--shadow)); }.avatar--daria { background: linear-gradient(145deg, #48c8e8, #7586d4); }.avatar--ilya { background: linear-gradient(145deg, #8d8b94, #4c4852); }.testimonial-person { align-self: center; }.testimonial-person strong,.testimonial-person span { display: block; }.testimonial-person strong { font-size: 14px; }.testimonial-person span { margin-top: 5px; color: var(--muted); font-size: 9px; }.testimonial-card blockquote { grid-column: span 3; align-self: center; margin: 28px 0; font-size: clamp(25px, 3.2vw, 42px); font-weight: 670; letter-spacing: -.045em; line-height: 1.12; }.testimonial-meta { grid-column: span 3; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(45,42,50,.08); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.testimonial-meta b { color: var(--shadow); font-size: 12px; }.testimonial-meta b::before { content: "✦"; margin-right: 7px; color: var(--blue); }.testimonial-controls { position: absolute; z-index: 5; left: 40px; right: 40px; bottom: 31px; display: flex; align-items: center; justify-content: space-between; }.testimonial-count strong { font-size: 17px; }.testimonial-count span { color: var(--muted); font-size: 9px; }.testimonial-controls > div:last-child { display: flex; gap: 7px; }.testimonial-controls button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: rgba(255,255,255,.64); box-shadow: inset 0 1px white, 0 9px 22px rgba(45,42,50,.08); cursor: pointer; transition: .2s ease; }.testimonial-controls button:hover { color: white; background: var(--blue); transform: translateY(-2px); }

.faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; padding-top: 175px; }.faq .section-heading { padding: 0; }.faq .section-heading h2 { font-size: clamp(43px, 5vw, 63px); }
.faq-list { border-top: 1px solid rgba(45,42,50,.11); }.faq details { border-bottom: 1px solid rgba(45,42,50,.11); }.faq summary { display: flex; min-height: 88px; align-items: center; justify-content: space-between; cursor: pointer; font-size: 17px; font-weight: 690; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary span { color: var(--blue); font-size: 22px; transition: rotate .25s; }.faq details[open] summary span { rotate: 45deg; }.faq details p { max-width: 680px; margin: -7px 40px 25px 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.final-cta { display: flex; min-height: 360px; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 155px; padding: 55px; border-radius: 40px; }.final-cta h2 { font-size: clamp(47px, 6vw, 74px); }.final-cta .button { margin-bottom: 5px; }
.footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 150px; color: var(--muted); font-size: 10px; }.footer-brand { color: var(--shadow); }.footer > p { text-align: center; }.footer > div:last-child { display: flex; justify-content: flex-end; gap: 20px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: var(--delay, 0ms); }.reveal.is-visible { opacity: 1; transform: none; }

/* Authentication */
.page-auth { min-height: 100svh; }.auth-header { display: flex; height: 100px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }.auth-header .brand { color: var(--shadow); }
.auth-layout { min-height: calc(100svh - 100px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; padding-bottom: 70px; }
.auth-copy h1 { font-size: clamp(65px, 7vw, 96px); }.auth-copy > p:not(.eyebrow) { max-width: 470px; margin-top: 25px; color: var(--muted); line-height: 1.6; }.auth-promise { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }.auth-promise span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 10px; background: rgba(255,255,255,.52); color: var(--muted); font-size: 9px; font-weight: 680; }
.auth-enter { opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference) {
  .auth-enter { animation:authEnter .72s cubic-bezier(.2,.8,.2,1) both; }
  .auth-enter--card { animation-delay:.12s; }
}
@keyframes authEnter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.auth-card { width: min(550px, 100%); min-height: 565px; justify-self: end; padding: 18px; border-radius: 35px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 17px; background: rgba(45,42,50,.045); }.auth-tabs button { min-height: 48px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }.auth-tabs button.active { color: var(--shadow); background: white; box-shadow: 0 7px 19px rgba(45,42,50,.08); }
.auth-pane { display: none; padding: 45px 33px 20px; }.auth-pane.active { display: block; }.auth-stage { display: none; }.auth-stage.active { display: flex; flex-direction: column; }.auth-stage label { margin-bottom: 10px; font-size: 12px; font-weight: 720; }.auth-stage input { width: 100%; height: 61px; padding: 0 17px; border: 1px solid rgba(45,42,50,.11); outline: none; border-radius: 15px; color: var(--shadow); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(45,42,50,.03); transition: border .2s, box-shadow .2s; }.auth-stage input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,168,232,.1); }.field-help { margin: 10px 0 25px; color: var(--muted); font-size: 10px; }.auth-stage .button { width: 100%; }.back-to-email { align-self: flex-start; margin: -17px 0 28px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }.code-input { letter-spacing: .35em; text-align: center; font-size: 26px !important; font-weight: 760; }.demo-code { margin: 12px 0 22px; padding: 11px; border-radius: 11px; color: var(--muted); background: rgba(0,168,232,.08); text-align: center; font-size: 10px; }.demo-code strong { color: var(--blue-deep); letter-spacing: .1em; }.form-error { min-height: 16px; margin: 12px 0 0; color: #c84e59; font-size: 10px; text-align: center; }
.telegram-mark { position: relative; width: 84px; height: 84px; margin: 8px auto 30px; border-radius: 50%; background: var(--blue); box-shadow: 0 14px 35px rgba(0,168,232,.26); }.telegram-mark span { position: absolute; left: 25px; top: 27px; width: 38px; height: 30px; clip-path: polygon(0 40%,100% 0,73% 100%,46% 67%,27% 84%,27% 61%); background: white; }.auth-pane[data-auth-pane="telegram"] { text-align: center; }.auth-pane h2 { font-size: 34px; }.auth-pane > p { margin: 18px auto 24px; max-width: 380px; color: var(--muted); line-height: 1.55; font-size: 13px; }.telegram-demo { width: 100%; }.auth-pane > small { display: block; margin-top: 13px; color: var(--muted); font-size: 9px; }.auth-switch { position: absolute; left: 30px; right: 30px; bottom: 47px; margin: 0; color: var(--muted); text-align: center; font-size: 10px; }.auth-switch a { color: var(--blue-deep); font-weight: 750; }.auth-legal { position: absolute; left: 44px; right: 44px; bottom: 20px; margin: 0; color: var(--muted); text-align: center; font-size: 8px; line-height: 1.5; }

.register-card { min-height: 650px; }.register-progress { display: flex; align-items: center; gap: 7px; margin: 8px 12px 0; }.register-progress i { width: 34px; height: 4px; border-radius: 5px; background: rgba(45,42,50,.09); }.register-progress i.active { background: var(--blue); box-shadow: 0 0 11px rgba(0,168,232,.25); }.register-progress span { margin-left: auto; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.register-progress b { color: var(--shadow); }
.register-form { padding: 31px 22px 55px; }.register-stage { display: none; }.register-stage.active { display: flex; flex-direction: column; }.field-row { display: flex; flex-direction: column; margin-bottom: 17px; }.field-row label,.register-stage--confirm > label { margin-bottom: 8px; font-size: 11px; font-weight: 720; }.field-row label small { color: var(--muted); font-weight: 540; }.field-row input,.register-stage--confirm > input { width: 100%; height: 57px; padding: 0 16px; border: 1px solid rgba(45,42,50,.11); outline: none; border-radius: 14px; background: rgba(255,255,255,.72); transition: border .2s,box-shadow .2s; }.field-row input:focus,.register-stage--confirm > input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,168,232,.1); }.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 1px 0 20px; color: var(--muted); font-size: 9px; line-height: 1.45; }.consent-row input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--blue); }.register-stage .button { width: 100%; }.back-to-profile { align-self: flex-start; margin: -4px 0 34px; padding: 0; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 10px; }.confirm-kicker { margin: 0 0 7px; color: var(--blue-deep); font-size: 9px; font-weight: 760; text-transform: uppercase; letter-spacing: .12em; }.register-stage--confirm h2 { font-size: 40px; }.confirm-address { margin: 10px 0 35px; color: var(--muted); font-size: 11px; }

/* Dashboard */
.page-dashboard { background: transparent; }.dashboard-shell { display: grid; grid-template-columns: 240px 1fr; gap: 20px; width: min(1480px, calc(100vw - 32px)); min-height: calc(100svh - 32px); margin: 16px auto; }
.dashboard-sidebar { position: sticky; top: 16px; display: flex; height: calc(100svh - 32px); flex-direction: column; padding: 24px 18px; border-radius: 28px; }.dashboard-sidebar .brand { margin: 5px 7px 45px; }.dashboard-sidebar nav { display: grid; gap: 5px; }.dashboard-sidebar nav a { padding: 14px; border-radius: 13px; color: var(--muted); font-size: 12px; font-weight: 650; }.dashboard-sidebar nav a:hover, .dashboard-sidebar nav a.active { color: var(--shadow); background: rgba(255,255,255,.7); box-shadow: 0 8px 25px rgba(45,42,50,.06); }.profile-mini { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 14px 8px; border-top: 1px solid rgba(45,42,50,.08); }.profile-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: white; background: var(--blue); font-size: 12px; font-weight: 800; }.profile-mini strong,.profile-mini small { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-mini strong { font-size: 10px; }.profile-mini small { margin-top: 4px; color: var(--muted); font-size: 8px; }.logout { padding: 10px; border: 0; color: var(--muted); background: transparent; cursor: pointer; text-align: left; font-size: 10px; }
.dashboard-main { min-width: 0; padding: 26px 25px 70px; }.dashboard-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 0 32px; }.dashboard-top h1 { font-size: clamp(42px, 5vw, 63px); }.dashboard-top .eyebrow { margin-bottom: 8px; }.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.dashboard-grid > article { border-radius: 25px; }.dashboard-status { grid-column: span 2; grid-row: span 2; min-height: 430px; padding: 27px; }.dash-connection { min-height: 275px; }.dash-connection .power-button { width: 105px; height: 105px; }.data-line { display: flex; justify-content: space-between; padding-top: 19px; border-top: 1px solid rgba(45,42,50,.09); color: var(--muted); font-size: 10px; }.data-line b { color: var(--shadow); }
.metric-glass { display: flex; min-height: 207px; flex-direction: column; align-items: flex-start; padding: 25px; }.metric-glass > span { color: var(--muted); font-size: 9px; font-weight: 740; text-transform: uppercase; letter-spacing: .1em; }.metric-glass > strong { margin-top: auto; font-size: 35px; letter-spacing: -.06em; }.metric-glass small { margin: 7px 0 17px; color: var(--muted); font-size: 9px; }.dashboard-section { padding-top: 70px; }.dashboard-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }.dashboard-section-head .eyebrow { margin-bottom: 7px; }.dashboard-section-head h2 { font-size: 39px; }
.device-list, .payment-list { padding: 9px 23px; border-radius: 25px; }.device-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; min-height: 90px; align-items: center; border-bottom: 1px solid rgba(45,42,50,.08); }.device-list > div:last-child { border: 0; }.device-badge { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: var(--blue-deep); background: rgba(0,168,232,.1); font-size: 9px; font-weight: 800; }.device-list p { margin: 0; }.device-list strong,.device-list small { display: block; }.device-list strong { font-size: 12px; }.device-list small { margin-top: 5px; color: var(--muted); font-size: 9px; }.device-list button { padding: 8px 11px; border: 1px solid rgba(45,42,50,.08); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.54); cursor: pointer; font-size: 9px; }.online-state { color: #229b64; font-size: 9px; }
.payment-list > div { display: grid; grid-template-columns: 110px 1fr 90px 80px; gap: 15px; min-height: 75px; align-items: center; border-bottom: 1px solid rgba(45,42,50,.08); font-size: 10px; }.payment-list > div:last-child { border: 0; }.payment-list span { color: var(--muted); }.payment-list i { color: #229b64; font-style: normal; }.account-apps { display: flex; min-height: 250px; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 70px; padding: 33px; border-radius: 28px; }.account-apps h2 { max-width: 630px; font-size: 40px; }.account-apps p:not(.eyebrow) { color: var(--muted); font-size: 11px; }.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; max-width: 350px; padding: 15px 18px; border: 1px solid white; border-radius: 14px; color: white; background: rgba(45,42,50,.9); box-shadow: 0 18px 45px rgba(45,42,50,.2); backdrop-filter: blur(16px); font-size: 11px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: none; }
.link-generator { display: grid; grid-template-columns: .85fr 1.15fr; gap: 45px; align-items: center; min-height: 350px; padding: 34px; border-radius: 28px; }.link-state { display: inline-flex; align-items: center; margin-bottom: 25px; color: var(--muted); font-size: 9px; font-weight: 650; }.link-generator-copy h3 { max-width: 460px; font-size: 38px; }.link-generator-copy p { max-width: 470px; margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.link-output { padding: 23px; border: 1px solid white; border-radius: 20px; background: rgba(255,255,255,.54); }.link-output > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }.link-output > div:first-of-type { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.link-output input { min-width: 0; height: 51px; padding: 0 13px; border: 1px solid rgba(45,42,50,.09); border-radius: 12px; outline: none; color: var(--shadow); background: rgba(255,255,255,.8); font-size: 10px; }.copy-link { border: 0; border-radius: 12px; color: white; background: var(--shadow); cursor: pointer; font-size: 9px; font-weight: 700; }.client-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }.client-actions .generate-link { grid-column: span 2; }.client-actions .button { min-height: 45px; padding-inline: 14px; gap: 7px; font-size: 10px; }.client-actions button:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .45; }.link-output > small { display: block; margin-top: 12px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.danger-zone { display: flex; min-height: 245px; align-items: flex-end; justify-content: space-between; gap: 35px; margin-top: 70px; padding: 33px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,248,249,.48)); }.danger-zone h2 { font-size: 38px; }.danger-zone p:not(.eyebrow) { max-width: 670px; margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }.destructive-button { position: relative; min-width: 190px; min-height: 48px; padding: 0 15px; border: 0; color: #a73b47; background: transparent; cursor: pointer; font: 650 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .02em; }.destructive-button span::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 8px; height: 1px; background: #c6535f; transition: left .25s ease,right .25s ease; }.destructive-button:hover span::after,.destructive-button.is-confirming span::after { left: 15px; right: 15px; }.destructive-button:hover { animation: dangerShake .28s linear 1; }.destructive-button.is-confirming { color: white; border-radius: 13px; background: #b34450; box-shadow: 0 10px 25px rgba(179,68,80,.2); }.destructive-button.is-confirming span::after { background: rgba(255,255,255,.55); }.destructive-button.is-confirming:hover { background: #982f3b; }@keyframes dangerShake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-.4deg)}50%{transform:translateX(2px) rotate(.4deg)}75%{transform:translateX(-1px)} }

.pixel-action { position: relative; min-height: 96px; overflow: hidden; border: 1px solid rgba(45,42,50,.1); border-radius: 22px; color: var(--shadow); background: rgba(255,255,255,.52); cursor: pointer; transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease; }.pixel-action:hover { border-color: var(--blue); box-shadow: inset 0 1px white, 0 15px 30px rgba(0,168,232,.12); transform: translateY(-2px); }.pixel-action-field { position: absolute; inset: 0; }.pixel-action-field i { position: absolute; left: var(--px); top: var(--py); width: var(--ps); height: var(--ps); border-radius: 2px; background: var(--pc); opacity: 0; transform: scale(.15) rotate(24deg); transition: opacity .25s ease var(--pd),transform .34s cubic-bezier(.2,.8,.2,1) var(--pd); }.pixel-action:hover .pixel-action-field i,.pixel-action:focus-visible .pixel-action-field i { opacity: var(--po); transform: scale(1) rotate(0); }.pixel-action-label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11px; }.pixel-action-label i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: var(--blue-deep); background: rgba(255,255,255,.82); box-shadow: 0 7px 18px rgba(45,42,50,.08); font-style: normal; font-size: 17px; transition: transform .28s ease,color .28s ease,background .28s ease; }.pixel-action:hover .pixel-action-label i { color: white; background: var(--blue); transform: scale(1.1) rotate(8deg); }

.dashboard-sidebar nav { scrollbar-width: none; }.dashboard-sidebar nav::-webkit-scrollbar { display: none; }.form-error.success { color: #22845b; }

@media (max-width: 1040px) {
  :root { --shell: min(100% - 36px, 920px); }
  .glass-nav nav { display: none; position: absolute; left: 0; right: 0; top: 76px; padding: 20px; border: 1px solid white; border-radius: 18px; background: rgba(255,255,255,.91); box-shadow: var(--shadow-lg); backdrop-filter: blur(24px); }
  .glass-nav.menu-open nav { display: grid; }.nav-account,.nav-hub { margin-left: auto; margin-right: 8px; }.nav-toggle { display: block; }
  .hero { grid-template-columns: 1fr; padding-top: 155px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-visual { min-height: 530px; }.hero-proof { justify-content: center; }
  .bento-card--privacy { grid-column: span 12; min-height: 650px; }.bento-card--speed { grid-column: span 12; }.bento-card--devices,.bento-card--support { grid-column: span 6; }
  .servers,.apps,.lumi-section,.faq { grid-template-columns: 1fr; gap: 55px; }.servers-copy,.apps-brand,.lumi-copy { max-width: 700px; }.download-grid { max-width: 760px; }.lumi-visual { order: 2; }.reviews-heading { align-items: flex-start; flex-direction: column; }.faq .section-heading { padding-bottom: 20px; }
  .dashboard-shell { grid-template-columns: 1fr; }.dashboard-sidebar { position: relative; top: 0; height: auto; flex-direction: row; align-items: center; }.dashboard-sidebar .brand { margin: 0 24px 0 0; }.dashboard-sidebar nav { display: flex; flex: 1; }.profile-mini { margin: 0; border: 0; }.logout { text-align: center; }.dashboard-main { padding-inline: 5px; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100vw - 28px); --radius: 24px; }
  .glass-nav { top: 9px; width: calc(100vw - 18px); min-height: 61px; padding-left: 14px; }.glass-nav .nav-account { display: none; }.glass-nav .wordmark { font-size: 22px; }.nav-hub b { display: none; }.nav-hub { margin-left: auto !important; }.nav-toggle { padding-inline: 5px; font-size: 10px; }.lumo-hub { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); padding: 18px; border-radius: 27px; }.hub-header h2 { font-size: 37px; }.hub-pane h3 { font-size: 37px; }.hub-auth-actions { grid-template-columns: 1fr; }.hub-content { overflow-y: auto; }.hub-pane { overflow-y: auto; padding-bottom: 20px; }.hub-pane[data-hub-pane="bot"] .button { margin-top: 12px; }
  .hero { min-height: auto; padding-top: 125px; }.hero-copy h1 { font-size: clamp(51px, 15vw, 72px); }.hero-lead { font-size: 16px; }.hero-proof { display: grid; gap: 9px; }.hero-proof span::before { display: none !important; }.hero-visual { min-height: 470px; }.connection-card { min-height: 410px; padding: 22px; transform: none; }.connection-core { min-height: 250px; }.power-button { width: 104px; height: 104px; }.hero-orbit--one { width: 410px; height: 410px; }.hero-orbit--two { width: 320px; height: 320px; }.chip--top { right: 0; top: 45px; }.chip--bottom { left: 0; bottom: 25px; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; }.trust-strip > p { grid-column: span 2; }.trust-strip > div { padding-left: 15px; }.trust-strip > div:last-child { grid-column: span 2; }
  .section-heading { padding-top: 110px; }.section-heading h2,h2 { font-size: 43px; }.bento { display: grid; }.bento-card,.bento-card--privacy,.bento-card--speed,.bento-card--devices,.bento-card--support { grid-column: span 12; min-height: 480px; }.bento-card--privacy { min-height: 630px; }.privacy-radar { width: 255px; height: 255px; }.device--laptop { left: 3%; width: 230px; }.support-face { inset-inline: 25px; }.support-face .eye--left { left: 21%; }.support-face .eye--right { right: 21%; }
  .servers,.plans,.apps,.lumi-section,.reviews,.faq { padding-top: 115px; }.server-map { min-height: 520px; }.map-globe { width: 350px; height: 350px; }.plan-options { grid-template-columns: repeat(2, 1fr); }.plan-summary { grid-template-columns: 1fr; padding: 35px 15px 15px; }.plan-summary ul { grid-template-columns: 1fr; }.download-grid { grid-template-columns: 1fr; }.download-card { min-height: 170px; }.lumi-visual { height: 510px; }.brandbook-crop { background-size: 1550px auto; }.reviews-heading { margin-bottom: 35px; }.testimonial-stage { min-height: 555px; padding: 18px; }.testimonial-stack { width: 100%; height: 455px; }.testimonial-card { padding: 27px 23px; }.testimonial-card.before,.testimonial-card.after { opacity: 0; }.testimonial-card blockquote { font-size: 27px; }.testimonial-controls { left: 24px; right: 24px; bottom: 24px; }.final-cta { min-height: 430px; flex-direction: column; align-items: flex-start; padding: 33px; }.footer { grid-template-columns: 1fr; gap: 25px; padding: 45px 0; text-align: center; }.footer > p { text-align: left; }.footer > div:last-child { justify-content: flex-start; }
  .auth-layout { grid-template-columns: 1fr; gap: 45px; padding-top: 50px; }.auth-copy h1 { font-size: 61px; }.auth-card { min-height: 540px; }.register-card { min-height: 650px; }.auth-pane { padding-inline: 10px; }.auth-header { height: 78px; }.auth-header > a:last-child { font-size: 10px; }.register-form { padding-inline: 5px; }
  .dashboard-shell { width: calc(100vw - 18px); margin: 9px auto; }.dashboard-sidebar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px; }.dashboard-sidebar .brand { margin: 0; }.dashboard-sidebar nav { grid-column: span 2; display: flex; overflow-x: auto; order: 3; }.dashboard-sidebar nav a { white-space: nowrap; }.profile-mini { display: none; }.dashboard-main { padding-top: 12px; }.dashboard-top { align-items: flex-end; }.dashboard-top .button { min-height: 44px; padding-inline: 14px; }.dashboard-grid { grid-template-columns: 1fr 1fr; }.dashboard-status { grid-column: span 2; min-height: 400px; }.metric-glass { min-height: 190px; }.metric-glass:nth-of-type(4) { grid-column: span 2; }.dashboard-section-head { align-items: flex-start; gap: 18px; }.dashboard-section-head .button { min-height: 45px; padding-inline: 13px; }.link-generator { grid-template-columns: 1fr; gap: 28px; padding: 22px; }.link-output { padding: 14px; }.client-actions { grid-template-columns: 1fr; }.client-actions .generate-link { grid-column: auto; }.payment-list > div { grid-template-columns: 1fr auto; padding: 15px 0; }.payment-list span,.payment-list i { grid-column: auto; }.danger-zone { align-items: flex-start; flex-direction: column; }.destructive-button { width: 100%; }.account-apps { align-items: flex-start; flex-direction: column; }.account-apps h2 { font-size: 34px; }
}

@media (max-width: 430px) {
  .hero-orbit--one { width: calc(100vw - 10px); height: calc(100vw - 10px); }
  .hero-orbit--two { width: calc(100vw - 68px); height: calc(100vw - 68px); }
  .hero-visual,.connection-card { width: 100%; }
  .auth-card { padding-inline: 14px; }
  .link-output > div:first-of-type { grid-template-columns: 1fr; }
  .copy-link { min-height: 42px; }
  .hub-tabs button { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Premium liquid-glass refinement */
.pixel-intro { min-height: 108dvh; background: #f8fcff; }
.pixel-intro::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: min(34vh, 360px); background: linear-gradient(180deg, transparent, rgba(247,251,255,.52) 38%, var(--paper) 100%); pointer-events: none; }
.pixel-intro::after { background: radial-gradient(ellipse 58% 56% at 50% 53%, rgba(255,255,255,.87), rgba(255,255,255,.58) 43%, transparent 75%), linear-gradient(180deg, transparent 68%, rgba(247,251,255,.72)); }
.replay,.intro-scroll { display: none !important; }
.intro-scroll-liquid { position:absolute; z-index:5; left:50%; bottom:calc(8dvh + 36px); display:flex; min-height:50px; align-items:center; gap:14px; padding:7px 8px 7px 18px; translate:-50% 0; border:1px solid rgba(255,255,255,.76); border-radius:18px; color:rgba(45,42,50,.7); background:linear-gradient(135deg,rgba(255,255,255,.43),rgba(212,244,255,.14)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(0,168,232,.13),0 14px 38px rgba(45,42,50,.11); backdrop-filter:blur(28px) saturate(210%); -webkit-backdrop-filter:blur(28px) saturate(210%); font-size:9px; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }
.intro-scroll-liquid::before { content:""; position:absolute; inset:1px; border-radius:16px; background:radial-gradient(100px 26px at 20% 0%,rgba(255,255,255,.94),transparent 75%),radial-gradient(90px 42px at 100% 110%,rgba(0,168,232,.23),transparent 75%); pointer-events:none; }
.intro-scroll-liquid span,.intro-scroll-liquid i { position:relative; z-index:1; }
.intro-scroll-liquid i { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.86); border-radius:12px; color:#056f99; background:linear-gradient(145deg,rgba(255,255,255,.63),rgba(107,216,251,.29)); box-shadow:inset 0 1px white,0 7px 18px rgba(0,168,232,.12); font-size:16px; font-style:normal; animation:liquidArrow 1.9s ease-in-out infinite; }
.intro-scroll-liquid:hover { color:var(--shadow); box-shadow:inset 0 1.5px white,0 17px 42px rgba(0,168,232,.16); }
@keyframes liquidArrow { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} }
.hero { position: relative; margin-top: -12dvh; padding-top: calc(12dvh + 105px); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -180px -18vw auto; height: 560px; background: radial-gradient(ellipse 46% 50% at 22% 28%, rgba(0,168,232,.13), transparent 72%), radial-gradient(ellipse 35% 45% at 78% 18%, rgba(45,42,50,.06), transparent 75%); filter: blur(30px); pointer-events: none; }

.glass-panel,.glass-nav,.dashboard-sidebar,.button,.nav-hub,.hub-close,.hub-tabs,.plan-options,.text-action,.download-card button,.testimonial-stage,.faq-list,.final-cta {
  --glass-edge: rgba(255,255,255,.72);
  border-color: var(--glass-edge);
  background: linear-gradient(138deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.055) 46%, rgba(191,237,252,.14) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.96), inset 1px 0 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,168,232,.15), inset -1px 0 0 rgba(45,42,50,.05), 0 27px 70px rgba(45,42,50,.12), 0 7px 18px rgba(0,168,232,.08);
  backdrop-filter: blur(38px) saturate(210%) contrast(1.04) brightness(1.07);
  -webkit-backdrop-filter: blur(38px) saturate(210%) contrast(1.04) brightness(1.07);
}
.glass-panel::after,.button::before,.nav-hub::before,.text-action::before,.download-card button::before,.final-cta::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(210px 54px at 13% -3%, rgba(255,255,255,.98), transparent 70%), radial-gradient(230px 105px at 92% 110%, rgba(0,168,232,.28), transparent 72%), linear-gradient(112deg, rgba(255,255,255,.25), transparent 32%, rgba(255,255,255,.18) 58%, transparent 72%); background-size:140% 140%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); opacity: 1; pointer-events: none; animation:liquidRefraction 10s ease-in-out infinite alternate; }
@keyframes liquidRefraction { to { background-position:18% 8%; } }
.button,.nav-hub,.text-action,.download-card button { overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.76); color: var(--shadow); background: linear-gradient(132deg, rgba(255,255,255,.48), rgba(228,248,255,.16)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px rgba(0,168,232,.13), 0 15px 36px rgba(45,42,50,.1); backdrop-filter: blur(28px) saturate(215%); -webkit-backdrop-filter: blur(28px) saturate(215%); }
.button > *,.button { z-index: 1; }
.button--primary { color: #07344a; background: linear-gradient(115deg, rgba(255,255,255,.60), rgba(90,210,250,.50) 42%, rgba(0,168,232,.38) 73%, rgba(255,255,255,.48)); background-size: 180% 180%; animation: liquidButton 7s ease-in-out infinite; }
.button--primary:hover { color: #062e42; background: linear-gradient(115deg, rgba(255,255,255,.95), rgba(0,168,232,.62), rgba(255,255,255,.86)); box-shadow: inset 0 1px white, 0 18px 42px rgba(0,168,232,.22); }
.nav-hub { color: #07344a; background: linear-gradient(130deg, rgba(255,255,255,.48), rgba(167,229,251,.35), rgba(255,255,255,.24)); }
.nav-hub:hover { color: #07344a; background: linear-gradient(130deg, white, rgba(0,168,232,.48), white); }
.nav-hub em { color: #075370; background: rgba(255,255,255,.54); box-shadow: inset 0 1px white; }
.nav-hub-face { background: #0b1219; }
@keyframes liquidButton { 50% { background-position: 100% 50%; } }

.brand-wordmark { position: relative; display: block; width: 92px; height: 28px; flex: none; }
.brand-wordmark > img { display:block; width:100%; height:100%; object-fit:contain; }
.brand small { margin-left: 0; }
.brand-wordmark--large { width: min(420px,58vw); height: clamp(72px,10vw,112px); }
.brand-wordmark--large > img { width:100%; height:100%; }
.app-lockup { display: flex; align-items: center; gap: clamp(13px,2vw,26px); margin-bottom: 26px; }
.app-lockup__mark { width: clamp(68px,8vw,108px); height: clamp(68px,8vw,108px); }

.connection-card { min-height: 446px; }
.connection-core { min-height: 276px; }
.power-button { width: 116px; height: auto; aspect-ratio: 1 / 1; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.94); background: radial-gradient(circle at 31% 24%, rgba(255,255,255,.88), rgba(126,222,252,.52) 24%, rgba(0,168,232,.42) 64%, rgba(0,113,159,.48)); box-shadow: inset 0 2px 9px rgba(255,255,255,.78), inset 0 -8px 18px rgba(0,94,133,.14), 0 22px 50px rgba(0,168,232,.22), 0 0 0 12px rgba(255,255,255,.28), 0 0 0 13px rgba(0,168,232,.13); backdrop-filter: blur(30px) saturate(210%); -webkit-backdrop-filter:blur(30px) saturate(210%); }
.power-button::after { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: conic-gradient(from 210deg, transparent, rgba(255,255,255,.75), transparent 32%); animation: spin 8s linear infinite; }
.power-button span { position:relative; width:38px; height:38px; border:0; border-radius:0; filter:drop-shadow(0 3px 6px rgba(0,70,99,.17)); }
.power-button span::before { content:""; position:absolute; z-index:2; left:50%; top:0; width:5px; height:20px; translate:-50% 0; border-radius:5px; background:white; }
.power-button span::after { content:""; position:absolute; left:3px; right:3px; bottom:1px; height:29px; border:5px solid white; border-top-color:transparent; border-radius:50%; transform:rotate(-1deg); }
.hub-bot-face { overflow:hidden; }
.hub-bot-face .mini-lumi-display { display:block; width:100%; height:100%; }
.plan-price,.plan-options,.hub-tabs,.faq-list,.lumo-hub { background:linear-gradient(140deg,rgba(255,255,255,.38),rgba(255,255,255,.09),rgba(196,239,253,.18)); border-color:rgba(255,255,255,.72); backdrop-filter:blur(38px) saturate(210%); -webkit-backdrop-filter:blur(38px) saturate(210%); }
.plan-options button.active,.hub-tabs button.active { background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(205,243,255,.23)); }

.privacy-radar { width: 330px; height: 330px; border: 1px solid rgba(0,168,232,.22); background: repeating-radial-gradient(circle, transparent 0 39px, rgba(0,168,232,.09) 40px 41px), linear-gradient(rgba(0,168,232,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(0,168,232,.045) 1px,transparent 1px); background-size: auto,20px 20px,20px 20px; box-shadow: inset 0 0 48px rgba(0,168,232,.07), 0 20px 55px rgba(0,168,232,.08); }
.privacy-radar .radar-sweep { inset: 4%; background: conic-gradient(from 20deg, transparent 0 74%, rgba(0,168,232,.04) 78%, rgba(0,168,232,.34) 99%, transparent); filter: blur(.2px); animation: spin 3.6s linear infinite; }
.privacy-radar em,.privacy-radar u { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(0,168,232,.1),0 0 18px rgba(0,168,232,.45); text-decoration:none; }
.privacy-radar em { right: 35%; top: 20%; }.privacy-radar u { left: 18%; bottom: 28%; }
.privacy-radar strong { position: absolute; left: 50%; top: 50%; display: grid; width: 48px; height: 48px; place-items: center; translate: -50% -50%; border: 1px solid rgba(255,255,255,.92); border-radius: 17px; color: white; background: linear-gradient(145deg,rgba(0,168,232,.9),rgba(0,119,167,.88)); box-shadow: inset 0 1px white,0 10px 28px rgba(0,168,232,.26); font-size: 20px; }

.device-stack { inset: 40px 20px auto; height: 250px; perspective: 1100px; }
.device-showcase-image { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(45,42,50,.16)); transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s ease; }
.bento-card--devices:hover .device-showcase-image { transform:translateY(-5px) scale(1.025); filter:drop-shadow(0 30px 35px rgba(45,42,50,.2)); }
.device-render { position: absolute; }
.device-render .device-screen { position: absolute; overflow: hidden; background: #edfaff; }
.device-render img { width: 100%; height: 100%; object-fit: cover; }
.device-render--laptop { left: 1%; top: 8px; width: 87%; height: 188px; border: 4px solid #dfe6eb; border-bottom-width: 9px; border-radius: 14px 14px 8px 8px; background: linear-gradient(145deg,#fefefe,#bfc9d1 54%,#f8fafb); box-shadow: inset 0 0 0 2px #3b4148,0 25px 45px rgba(45,42,50,.22); transform: rotateY(8deg) rotateX(2deg); }
.device-render--laptop .device-screen { inset: 7px 8px 10px; border-radius: 6px; }
.device-render--laptop > i { position: absolute; left: -8%; right: -8%; bottom: -22px; height: 19px; border-radius: 3px 3px 14px 14px; background: linear-gradient(180deg,#f8fafc,#b8c2ca 65%,#eef3f6); box-shadow: 0 12px 17px rgba(45,42,50,.2); }
.device-render--phone { right: 0; bottom: 0; width: 88px; height: 174px; z-index: 2; border: 4px solid #181a1d; border-radius: 25px; background: linear-gradient(135deg,#20242a,#060708); box-shadow: inset 0 0 0 2px #838b92,0 23px 40px rgba(45,42,50,.28); transform: rotate(5deg); }
.device-render--phone::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 6px; width: 31px; height: 7px; translate: -50%; border-radius: 8px; background: #050607; }
.device-render--phone .device-screen { inset: 5px; border-radius: 18px; }
.device-render--phone img { object-position: 50% 50%; }
.support-face { display: grid; place-items: center; inset: 48px 30px auto; height: 225px; border-radius: 52px; overflow: hidden; }
.mini-lumi-display { width: 100%; height: 100%; }

.why-us { padding-top: 165px; }
.why-heading { text-align: center; margin-bottom: 70px; }
.why-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.why-card { position: relative; min-height: 230px; padding: 38px; border-radius: 31px; overflow: hidden; }
.why-card h3 { font-size: clamp(25px,2.3vw,34px); }
.why-card p { max-width: 550px; margin: 14px 0 0; color: var(--muted); line-height: 1.55; }
.why-number { position: absolute; right: 27px; top: 24px; color: rgba(45,42,50,.22); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.why-card--wide { grid-column: span 6; display:flex; flex-direction:column; justify-content:flex-end; }
.why-card--accent { grid-column: span 4; min-height: 430px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; background: linear-gradient(150deg,rgba(165,232,253,.78),rgba(255,255,255,.42) 58%,rgba(0,168,232,.16)); }
.why-card--accent::before { content:""; position:absolute; width:240px; height:240px; left:-30px; top:-45px; border-radius:50%; background:radial-gradient(circle at 35% 30%,white,rgba(0,168,232,.26),transparent 70%); filter:blur(2px); }
.why-card--privacy { grid-column: span 4; min-height:430px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(150deg,rgba(16,21,29,.97),rgba(36,44,55,.92)); color:white; }
.why-card--privacy p { color:rgba(255,255,255,.65); }.why-card--privacy .why-number { color:rgba(255,255,255,.26); }
.privacy-code { overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:21px; background:rgba(2,7,12,.6); box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.18); color:#dce9ef; font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-toolbar { display:flex; min-height:42px; align-items:center; gap:11px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); }
.code-toolbar > span { display:flex; gap:5px; }.code-toolbar i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); }.code-toolbar i:first-child { background:#ff6b72; }.code-toolbar i:nth-child(2) { background:#ffd166; }.code-toolbar i:nth-child(3) { background:#37d99a; }
.code-toolbar b { color:rgba(255,255,255,.66); font-size:9px; font-weight:600; }.code-toolbar em { margin-left:auto; padding:4px 7px; border:1px solid rgba(55,217,154,.28); border-radius:999px; color:#68e5b2; background:rgba(55,217,154,.08); font-size:8px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.code-lines { margin:0; padding:13px 13px 14px 42px; counter-reset:code-line; list-style:none; }.code-lines li { position:relative; min-height:17px; white-space:nowrap; }.code-lines li::before { position:absolute; right:calc(100% + 13px); width:18px; color:rgba(255,255,255,.21); text-align:right; content:counter(code-line); counter-increment:code-line; }.code-lines code { font:inherit; }.code-keyword { color:#67d4ff; }.code-value { color:#ff8da1; }.code-number { color:#ffd166; }.code-string { color:#8ee3bc; }
.why-card--platforms { grid-column:span 4; min-height:430px; display:flex; flex-direction:column; justify-content:space-between; }
.platform-cloud { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.platform-cloud span { display:grid; min-height:54px; place-items:center; padding:7px; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.56); box-shadow:inset 0 1px white,0 8px 19px rgba(45,42,50,.07); color:var(--muted); font-size:9px; font-weight:720; text-align:center; }
.platform-cloud .platform-brand { grid-row:span 2; min-height:117px; background:linear-gradient(145deg,white,rgba(148,226,252,.58)); }
.platform-brand img { width:72px; height:72px; object-fit:contain; }

.plan-options,.hub-tabs { background:rgba(255,255,255,.33); border:1px solid rgba(255,255,255,.85); }
.plan-options button { border:1px solid transparent; }
.plan-options button.active { border-color:rgba(255,255,255,.96); background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(205,243,255,.62)); box-shadow:inset 0 1px white,0 10px 26px rgba(0,168,232,.1); }
.plan-copy,.plan-price { transition: opacity .22s ease,transform .35s cubic-bezier(.2,.8,.2,1),filter .28s ease; }
.plan-configurator.is-switching .plan-copy { opacity:0; transform:translateY(18px); filter:blur(7px); }
.plan-configurator.is-switching .plan-price { transform:translateY(-8px); }
.monthly-price { display:inline-grid; align-items:start; overflow:hidden; height:1.18em; min-width:4.2em; vertical-align:bottom; white-space:nowrap; }
.price-wheel { display:grid; grid-template-rows:1.18em 1.18em; transform:translateY(0); transition:transform .56s cubic-bezier(.18,.75,.22,1),filter .25s ease; }
.price-wheel i { display:flex; height:1.18em; align-items:center; font-style:normal; }
.price-wheel.roll { transform:translateY(-1.18em); }

.lumi-visual { height:auto; aspect-ratio:16/10; border-radius:42px; }
.lumi-guide-image { width:100%; height:100%; object-fit:cover; display:block; }
.lumi-question-display { --rx:0deg; --ry:0deg; --tx:0px; --ty:0px; --qx:50%; --qy:30%; position:absolute; z-index:4; left:5.4%; top:30%; width:43%; aspect-ratio:3.26/1; overflow:hidden; border:3px solid rgba(221,238,247,.88); border-radius:clamp(17px,2vw,29px); background:#04090e; box-shadow:inset 0 0 0 2px rgba(0,168,232,.32),inset 0 0 42px rgba(0,168,232,.17),inset 0 2px 0 rgba(255,255,255,.17),0 5px 0 #0a6f97,0 9px 0 rgba(45,42,50,.22),0 24px 48px rgba(45,42,50,.25),0 0 0 7px rgba(255,255,255,.38); transform:perspective(760px) translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease; will-change:transform; }
.lumi-question-display::before { content:""; position:absolute; z-index:3; inset:0; border-radius:inherit; background:radial-gradient(150px 70px at var(--qx) var(--qy),rgba(255,255,255,.18),transparent 72%),linear-gradient(125deg,rgba(255,255,255,.08),transparent 34%,rgba(0,168,232,.06)); pointer-events:none; }
.lumi-question-display::after { content:""; position:absolute; z-index:4; inset:5px; border:1px solid rgba(0,168,232,.22); border-radius:calc(clamp(17px,2vw,29px) - 6px); box-shadow:inset 0 1px rgba(255,255,255,.09); pointer-events:none; }
.lumi-question-display:hover { box-shadow:inset 0 0 0 2px rgba(0,168,232,.42),inset 0 0 52px rgba(0,168,232,.22),inset 0 2px 0 rgba(255,255,255,.2),0 5px 0 #0781ae,0 10px 0 rgba(45,42,50,.2),0 28px 58px rgba(45,42,50,.28),0 0 0 8px rgba(255,255,255,.46); }
.lumi-question-canvas { display:block; width:100%; height:100%; }

.download-card { overflow:hidden; }
.platform-symbol { position:absolute; right:20px; top:18px; display:grid; width:56px; height:56px; place-items:center; border:1px solid rgba(255,255,255,.96); border-radius:18px; color:var(--blue-deep); background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(177,233,252,.6)); box-shadow:inset 0 1px white,0 13px 26px rgba(0,168,232,.12); font-size:12px; font-weight:800; font-style:normal; letter-spacing:.03em; }
.platform-symbol--windows { grid-template-columns:repeat(2,9px); grid-template-rows:repeat(2,9px); gap:3px; }
.platform-symbol--windows b { width:9px; height:9px; border-radius:2px; background:linear-gradient(145deg,#00a8e8,#1765f5); }

.testimonial-stage { touch-action:pan-y; cursor:grab; user-select:none; }
.testimonial-stage.is-dragging { cursor:grabbing; }
.testimonial-card.active { transform:translate3d(var(--drag-x,0),0,0) rotate(var(--drag-r,0deg)); transition:transform .22s ease,opacity .35s ease,filter .35s ease; }
.testimonial-controls { align-items:center; }
.testimonial-controls > small { color:var(--muted); font-size:9px; }
.testimonial-dots { display:flex; gap:6px; margin-left:auto; margin-right:18px; }
.testimonial-dots i { width:6px; height:6px; border-radius:50%; background:rgba(45,42,50,.18); transition:width .25s ease,background .25s ease; }
.testimonial-dots i.active { width:22px; border-radius:5px; background:var(--blue); }
.reviews-demo-label { display:inline-flex; align-items:center; min-height:30px; margin:0 0 6px; padding:0 11px; border:1px solid rgba(255,255,255,.74); border-radius:11px; color:var(--muted); background:rgba(255,255,255,.22); box-shadow:inset 0 1px white; backdrop-filter:blur(18px); font-size:8px; font-weight:720; letter-spacing:.08em; text-transform:uppercase; }
.testimonial-stage.is-visible .testimonial-card[data-testimonial="0"].active { animation:testimonialHint .72s cubic-bezier(.2,.8,.2,1) .75s 1; }
@keyframes testimonialHint { 0%,100%{transform:translateX(0) rotate(0)}28%{transform:translateX(-12px) rotate(-.45deg)}58%{transform:translateX(10px) rotate(.35deg)}80%{transform:translateX(-4px) rotate(-.15deg)} }
.bento-card,.why-card,.download-card { transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }
.bento-card:hover,.why-card:hover { transform:translateY(-6px); box-shadow:inset 0 1.5px white,inset 0 -1px rgba(0,168,232,.16),0 32px 76px rgba(45,42,50,.14),0 9px 25px rgba(0,168,232,.11); }
.platform-symbol { animation:platformFloat 5s ease-in-out infinite; }
.download-card:nth-child(2n) .platform-symbol { animation-delay:-1.7s; }.download-card:nth-child(3n) .platform-symbol { animation-delay:-3.2s; }
@keyframes platformFloat { 50%{transform:translateY(-5px) rotate(2deg)} }

.faq { align-items:start; }
.faq .section-heading h2 span { color:var(--shadow); }
.faq .section-heading h2 em { color:var(--blue); font-style:normal; }
.faq-list { padding:0 28px; border:1px solid rgba(255,255,255,.88); border-radius:31px; overflow:hidden; }
.faq details p { opacity:0; transform:translateY(-10px); filter:blur(4px); transition:opacity .35s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .35s ease; }
.faq details[open] p { opacity:1; transform:none; filter:none; }
.faq summary { min-height:78px; }
.faq summary span { display:grid; width:35px; height:35px; place-items:center; border:1px solid rgba(255,255,255,.88); border-radius:12px; background:rgba(255,255,255,.48); box-shadow:inset 0 1px white; }

.final-cta { position:relative; min-height:430px; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:linear-gradient(125deg,rgba(255,255,255,.78),rgba(129,222,252,.45),rgba(255,255,255,.48),rgba(0,168,232,.17)); background-size:200% 200%; animation:finalGlass 11s ease-in-out infinite; }
.final-cta::after { content:""; position:absolute; inset:-45%; background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.78),transparent 25%,rgba(0,168,232,.14),transparent 55%); animation:spin 15s linear infinite; pointer-events:none; }
.final-cta > * { position:relative; z-index:2; }
.final-cta .button { margin:28px 0 0; min-width:230px; background:linear-gradient(112deg,rgba(255,255,255,.94),rgba(94,215,252,.78),rgba(255,255,255,.9),rgba(0,168,232,.62)); background-size:250% 100%; animation:ctaShimmer 5s ease-in-out infinite; }
@keyframes finalGlass { 50% { background-position:100% 70%; } }
@keyframes ctaShimmer { 50% { background-position:100% 0; } }

@media (max-width:1040px) {
  .why-card--accent,.why-card--privacy { grid-column:span 6; }.why-card--platforms { grid-column:span 12; min-height:350px; }.platform-cloud { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:720px) {
  .pixel-intro { min-height:104dvh; }.hero { margin-top:-8dvh; padding-top:calc(8dvh + 100px); }
  .brand-wordmark { width:74px; height:25px; }.brand-wordmark > img { height:28px; }
  .why-us { padding-top:115px; }.why-heading { margin-bottom:38px; }.why-card--wide,.why-card--accent,.why-card--privacy,.why-card--platforms { grid-column:span 12; }.why-card { min-height:290px; padding:28px; }.why-card--accent,.why-card--privacy,.why-card--platforms { min-height:390px; }
  .platform-cloud { grid-template-columns:repeat(3,1fr); }.platform-cloud .platform-brand { grid-row:span 1; min-height:70px; }.platform-brand img { width:52px; height:52px; }
  .device-stack { inset-inline:14px; }.device-render--laptop { width:86%; }.device-render--phone { width:80px; height:160px; }
  .privacy-radar { width:270px; height:270px; }.support-face { inset-inline:19px; }
  .app-lockup { justify-content:center; }.apps-brand { text-align:center; }.apps-brand > p:last-child { margin-inline:auto; }
  .testimonial-controls > small { display:none; }.testimonial-dots { margin-right:0; }
  .faq-list { padding:0 18px; }.faq summary { min-height:74px; gap:18px; font-size:15px; }.faq details p { margin-right:0; }
  .final-cta { align-items:center; justify-content:center; text-align:center; padding:30px 23px; }.final-cta h2 { font-size:43px; }
  .intro-scroll-liquid { bottom:calc(env(safe-area-inset-bottom, 0px) + 104px); min-height:46px; padding:6px 7px 6px 16px; gap:11px; border-radius:999px; font-size:12px; }.intro-scroll-liquid i { width:34px; height:34px; }
  .lumi-question-display { left:5%; top:36%; width:53%; }
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .glass-panel,.glass-nav,.dashboard-sidebar,.button,.nav-hub,.lumo-hub,.faq-list { background:rgba(247,251,255,.96); }
}

/* Lumo Experience: an asymmetric collage inside one precise square. */
@media (min-width: 961px) {
  .bento {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    aspect-ratio: 1 / 1;
  }

  .bento-card {
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .bento-card--privacy { grid-column: 1; grid-row: 1; }
  .bento-card--speed { grid-column: 2; grid-row: 1; }
  .bento-card--devices { grid-column: 1; grid-row: 2; }
  .bento-card--support { grid-column: 2; grid-row: 2; }
  .bento .card-copy h3 { font-size: clamp(27px, 2.8vw, 41px); }
  .bento-card--privacy .card-copy { right:auto; width:55%; }
  .bento-card--privacy .card-copy h3 { font-size:clamp(26px,2.65vw,38px); }
  .bento-card--privacy .card-copy > p:last-of-type { margin-top:11px; font-size:12px; }
  .bento-card--privacy .privacy-trigger { min-height:43px; margin-top:13px; }
  .bento .privacy-radar,
  .bento .server-globe {
    left:auto;
    right:28px;
    top:47%;
    width:clamp(190px,20vw,260px);
    height: auto;
    translate:0 -50%;
    aspect-ratio: 1 / 1;
  }
  .bento-card--devices .device-stack { inset:42px 24px auto; height:55%; }
  .bento-card--support .support-face { inset:48px 28px auto; height:39%; }
}

@media (min-width: 721px) and (max-width: 960px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card,
  .bento-card--privacy,
  .bento-card--speed,
  .bento-card--devices,
  .bento-card--support { grid-column: 1; grid-row: auto; min-height: 560px; }
}

.glass-glint { position:absolute; z-index:1; top:-45%; bottom:-45%; left:-30%; width:24%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),rgba(176,234,253,.34),transparent); filter:blur(3px); transform:translateX(-220%) rotate(18deg); pointer-events:none; animation:glassGlint 8.5s cubic-bezier(.25,.1,.25,1) 1.4s infinite; }
.glass-glint--slow { animation-duration:11s; animation-delay:-3.2s; }
@keyframes glassGlint { 0%,62% { transform:translateX(-220%) rotate(18deg); opacity:0; } 69% { opacity:.82; } 86%,100% { transform:translateX(650%) rotate(18deg); opacity:0; } }

.plan-price p { display:flex; align-items:baseline; gap:5px; margin:0; }
/* Width follows the number. The old fixed 88px box clipped the leading digit of
   four-figure prices, because overflow:hidden clips horizontally too. */
.monthly-price { width:auto; min-width:0; justify-items:start; font-variant-numeric:tabular-nums; mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); }
.monthly-price:not(:has(.price-wheel)) { display:inline-flex; align-items:baseline; justify-content:flex-start; }

.billing-options {
  display:grid;
  gap:7px;
  margin:12px 0 22px;
}
.billing-choice { width:100%; padding:12px; border:1px solid transparent; border-radius:14px; color:inherit; background:transparent; text-align:left; cursor:pointer; transition:border-color .25s,background .25s,transform .25s; }
.billing-choice:hover { transform:translateY(-1px); background:rgba(255,255,255,.42); }
.billing-choice.active { border-color:rgba(0,168,232,.38); background:rgba(0,168,232,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.auth-stage label + input + label { margin-top:18px; }

/* Final FAQ control: a stable circular plus that turns into a clean close icon. */
.faq summary,
.hub-faq summary {
  position:relative;
  outline:none;
  border-radius:18px;
  transition:color .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.faq summary:focus-visible,
.hub-faq summary:focus-visible {
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 2px rgba(0,168,232,.38);
}
.faq summary > span,
.hub-faq summary > span {
  width:40px;
  height:40px;
  overflow:hidden;
  border-radius:50%;
  rotate:none !important;
  transform:none;
  transform-origin:center;
  transition:transform .42s cubic-bezier(.2,.82,.2,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.faq summary > span::before,
.faq summary > span::after,
.hub-faq summary > span::before,
.hub-faq summary > span::after {
  left:50%;
  top:50%;
  width:15px;
  height:2px;
  translate:none;
  rotate:none;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.faq summary > span::after,
.hub-faq summary > span::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] summary > span,
.hub-faq details[open] summary > span {
  rotate:none !important;
  transform:rotate(45deg);
  border-color:rgba(0,168,232,.7);
  border-radius:50%;
}
.hub-faq summary > span { width:32px; height:32px; }
.hub-faq summary > span::before,
.hub-faq summary > span::after { width:12px; }

/* The Hub entry always names its destination, including for guests and phones. */
.nav-hub:not(.is-authenticated) {
  width:auto;
  min-width:0;
  padding:5px 7px 5px 13px;
  gap:9px;
}
.nav-hub:not(.is-authenticated) b {
  display:block !important;
  white-space:nowrap;
}
.nav-hub:not(.is-authenticated) .nav-hub-face { display:none; }
.nav-hub:not(.is-authenticated) em { width:34px; height:34px; }
@media (max-width:420px) {
  .nav-hub:not(.is-authenticated) { padding-left:10px; gap:5px; }
  .nav-hub:not(.is-authenticated) b { font-size:9px; }
  .nav-hub:not(.is-authenticated) em { width:30px; height:30px; }
}
.billing-options > span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:14px;
  background:rgba(255,255,255,.43);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(32,73,91,.05);
}
.billing-options .billing-value {
  color:var(--shadow);
  font-size:10px;
  font-style:normal;
  font-weight:750;
  letter-spacing:.01em;
}
.billing-options .billing-discount {
  flex:none;
  padding:5px 8px;
  border:1px solid rgba(0,168,232,.16);
  border-radius:999px;
  color:var(--blue-deep);
  background:rgba(0,168,232,.1);
  font-size:8px;
  font-weight:850;
  letter-spacing:.05em;
  line-height:1;
  text-transform:uppercase;
}
.price-period { flex:none; margin-left:0; color:var(--shadow); font-size:12px; font-weight:650; white-space:nowrap; }
.plan-options button { color:var(--shadow); font-size:clamp(15px,1.35vw,18px); font-weight:780; opacity:1; }
.plan-options button span { color:var(--blue-deep); font-size:9px; font-weight:760; }
.price-wheel { width:max-content; grid-template-rows:repeat(var(--price-steps,2),1.18em); justify-items:start; transform:translateY(0); transition:transform 1.35s cubic-bezier(.16,.8,.18,1),filter .32s ease; will-change:transform; }
.price-wheel i { width:100%; justify-content:flex-start; font-variant-numeric:tabular-nums; }
.price-wheel.roll { transform:translateY(calc(-1.18em * var(--price-last,1))); }

/* Softer Apple-like Liquid Glass geometry. */
.glass-panel,
.testimonial-stage,
.faq-list,
.final-cta { border-radius: var(--radius); }

.button,
.text-action,
.download-card button,
.nav-account,
.nav-hub,
.intro-scroll-liquid,
.billing-choice,
.device-list button,
.copy-link { border-radius: 999px; }

.glass-nav { border-radius: 34px; }
.glass-nav::before { border-radius: 32px; }
.glass-nav::after { border-radius: 35px; }
.glass-nav nav,
.plan-options,
.hub-tabs { border-radius: 999px; }
.glass-nav nav a,
.nav-liquid-indicator,
.plan-options button,
.auth-tabs,
.auth-tabs button,
.auth-liquid-indicator,
.hub-tabs button { border-radius: 999px; }
.intro-scroll-liquid::before { border-radius: inherit; }
.intro-scroll-liquid i { border-radius: 50%; }

@media (max-width: 720px) {
  .glass-panel,
  .testimonial-stage,
  .faq-list,
  .final-cta { border-radius: 32px; }
  .glass-nav { border-radius: 28px; }
  .glass-nav::before { border-radius: 26px; }
  .glass-nav::after { border-radius: 29px; }
}

/* Clearer, less blurred Liquid Glass with continuous refraction. */
.glass-panel,
.glass-nav,
.dashboard-sidebar,
.testimonial-stage,
.faq-list,
.final-cta,
.plan-options,
.hub-tabs {
  background:linear-gradient(138deg,rgba(255,255,255,.22),rgba(255,255,255,.025) 48%,rgba(170,232,252,.10));
  backdrop-filter:blur(14px) saturate(155%) brightness(1.035);
  -webkit-backdrop-filter:blur(14px) saturate(155%) brightness(1.035);
}

.button,
.nav-hub,
.text-action,
.download-card button {
  background:linear-gradient(118deg,rgba(255,255,255,.38),rgba(121,219,251,.22),rgba(255,255,255,.3));
  background-size:220% 220%;
  backdrop-filter:blur(10px) saturate(165%);
  -webkit-backdrop-filter:blur(10px) saturate(165%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),translate .25s ease,box-shadow .42s ease,border-color .32s ease,background-position .9s cubic-bezier(.2,.8,.2,1),color .3s ease;
}
.button::before,.nav-hub::before,.text-action::before,.download-card button::before { animation-duration:16s; animation-timing-function:ease-in-out; }
.button:hover,.nav-hub:hover,.text-action:hover,.download-card button:hover { background-position:100% 50%; }
.button--primary,.button--primary:hover { color:#07344a; background:linear-gradient(118deg,rgba(255,255,255,.48),rgba(62,201,247,.34),rgba(255,255,255,.42)); background-size:220% 220%; }

.lumo-hub {
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(226,247,255,.24));
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
}
.hub-auth-actions .button,
.hub-auth-actions .button--primary,
.hub-auth-actions .button--glass {
  min-height:54px;
  border-color:rgba(255,255,255,.82);
  color:#07344a;
  background:linear-gradient(112deg,rgba(255,255,255,.58),rgba(70,205,248,.31),rgba(255,255,255,.46),rgba(0,168,232,.22));
  background-size:260% 160%;
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.12),0 13px 30px rgba(0,168,232,.11);
  animation:hubButtonFlow 10s ease-in-out infinite;
}
.hub-auth-actions .button:hover { color:#07344a; background:linear-gradient(112deg,rgba(255,255,255,.58),rgba(70,205,248,.31),rgba(255,255,255,.46),rgba(0,168,232,.22)); background-size:260% 160%; box-shadow:inset 0 1px white,0 17px 36px rgba(0,168,232,.17); }
@keyframes hubButtonFlow { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }

.nav-hub-face { width:39px; height:27px; overflow:hidden; border-radius:11px; }
.nav-hub-face .mini-lumi-display { position:absolute; left:0; top:50%; display:block; width:100%; height:auto; translate:0 -50%; }
.nav-hub-face::before { content:""; position:absolute; z-index:0; left:8px; top:7px; width:5px; height:4px; border:2px solid var(--blue); border-bottom:0; border-radius:6px 6px 0 0; box-shadow:16px 0 0 -2px #0b1219,16px 0 0 0 var(--blue); filter:drop-shadow(0 0 3px rgba(0,168,232,.65)); }
.nav-hub-face::after { content:""; position:absolute; z-index:0; left:50%; bottom:5px; width:9px; height:4px; translate:-50%; border:2px solid var(--blue); border-top:0; border-radius:0 0 8px 8px; filter:drop-shadow(0 0 3px rgba(0,168,232,.65)); }
.nav-hub-face .mini-lumi-display { z-index:1; }
.why-card--privacy { background:linear-gradient(150deg,rgba(16,21,29,.97),rgba(36,44,55,.92)); }
.why-card--accent { background:linear-gradient(150deg,rgba(165,232,253,.70),rgba(255,255,255,.24) 58%,rgba(0,168,232,.14)); }
.final-cta { background:linear-gradient(125deg,rgba(255,255,255,.48),rgba(129,222,252,.30),rgba(255,255,255,.28),rgba(0,168,232,.12)); background-size:200% 200%; }

.download-card { min-height:238px; padding:29px; }
.download-card .platform { top:25px; left:29px; font-size:12px; font-weight:800; }
.download-card strong { max-width:75%; margin-bottom:21px; font-size:clamp(23px,2vw,29px); line-height:1; }
.download-card button { min-height:34px; padding-inline:15px; font-size:10px; }
.platform-symbol { top:21px; right:21px; width:70px; height:70px; border-radius:23px; }
.platform-symbol img { display:block; width:38px; height:38px; object-fit:contain; }
.platform-symbol--windows { grid-template-columns:repeat(2,14px); grid-template-rows:repeat(2,14px); gap:4px; }
.platform-symbol--windows b { width:14px; height:14px; border-radius:2px; background:var(--blue); }

.faq details { will-change:height; }
.faq summary { transition:color .28s ease; }
.faq summary span { transition:rotate .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),color .3s ease,background .3s ease,box-shadow .3s ease; }
.faq details[open] summary { color:var(--shadow); }
.faq details[open] summary span { color:white; background:var(--blue); box-shadow:inset 0 1px rgba(255,255,255,.72),0 9px 22px rgba(0,168,232,.2); transform:scale(1.04); }
.faq details[open]:not(.is-closing) p { animation:faqAnswerIn .52s cubic-bezier(.2,.8,.2,1) both; }
.faq details.is-closing p { animation:faqAnswerOut .15s ease both; }
@keyframes faqAnswerIn { from { opacity:0; transform:translateY(-13px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes faqAnswerOut { from { opacity:1; transform:none; filter:none; } to { opacity:0; transform:translateY(-8px); filter:blur(4px); } }

.service-marquee-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,36vw,520px)); align-items:center; gap:clamp(40px,5vw,66px); padding-top:180px; }
.service-marquee-copy h2 { font-size:clamp(48px,5.2vw,70px); }.service-marquee-copy h2 em { color:var(--blue); font-style:normal; }
.service-marquee-copy > p { max-width:560px; margin:27px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.orbit-legend { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:31px; color:var(--shadow); font-size:11px; font-weight:700; }.orbit-legend span { display:flex; align-items:center; gap:9px; }.orbit-legend i { width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 6px rgba(0,168,232,.1); }

/* A single drifting row of services. The mask lives on the frame, never on the
   moving track, so the soft edges stay put while the logos slide past them. */
/* Интерактивное облако иконок вместо прежней бегущей строки: сфера
   вращается сама и крутится перетаскиванием. Раскладка точек и проекция
   считаются в app.js, здесь только внешний вид. */
.icon-cloud { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1/1; max-width:min(560px,100%); margin-inline:auto; touch-action:pan-y; }
.icon-cloud-stage { position:relative; width:100%; height:100%; cursor:grab; }
.icon-cloud-stage:active { cursor:grabbing; }
.icon-cloud-item { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:52px; height:52px; margin:-26px 0 0 -26px; border:1px solid rgba(255,255,255,.92); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(224,247,255,.62)); box-shadow:0 10px 26px rgba(16,52,84,.14),inset 0 1px white; will-change:transform,opacity; }
.icon-cloud-item svg { width:26px; height:26px; }
.icon-cloud-hint { position:absolute; bottom:2px; margin:0; color:var(--muted); font-size:13px; letter-spacing:-.01em; opacity:.75; }
@media (prefers-reduced-motion:reduce) { .icon-cloud-hint { display:none; } }

@media (max-width:1040px) { .service-marquee-copy { max-width:720px; }.service-marquee-section { grid-template-columns:minmax(0,1fr); } }
@media (max-width:720px) { .service-marquee-section { padding-top:115px; gap:36px; }.icon-cloud { max-width:min(380px,100%); }.icon-cloud-item { width:44px; height:44px; margin:-22px 0 0 -22px; }.icon-cloud-item svg { width:22px; height:22px; } }

.power-button,
.power-button.connected {
  border-color:rgba(255,255,255,.96);
  background:radial-gradient(circle at 32% 24%,#7de0ff 0 8%,#22bdf1 25%,#00a8e8 58%,#007cae 100%);
  box-shadow:inset 0 2px 9px rgba(255,255,255,.68),inset 0 -12px 25px rgba(0,79,111,.26),0 24px 56px rgba(0,168,232,.38),0 0 0 12px rgba(255,255,255,.32),0 0 0 13px rgba(0,168,232,.22),0 0 42px rgba(0,168,232,.26);
  filter:none;
}
.power-button:hover { transform:translateY(-3px) scale(1.045); box-shadow:inset 0 2px 9px rgba(255,255,255,.72),inset 0 -12px 25px rgba(0,79,111,.24),0 29px 68px rgba(0,168,232,.48),0 0 0 12px rgba(255,255,255,.36),0 0 0 14px rgba(0,168,232,.25),0 0 52px rgba(0,168,232,.34); }

.kinetic-grid-canvas { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; background:#fff; }
.kinetic-home .pixel-intro { background:#fff; }
.kinetic-home .pixel-intro .intro-shader { opacity:0; visibility:hidden; }
.kinetic-home .pixel-intro::after { z-index:1; background:radial-gradient(ellipse 55% 48% at 50% 52%,rgba(255,255,255,.88),rgba(255,255,255,.67) 43%,rgba(255,255,255,.08) 77%,transparent 100%); }
.kinetic-home .pixel-intro::before { z-index:2; background:linear-gradient(180deg,transparent,rgba(255,255,255,.48) 45%,var(--paper) 100%); }
.kinetic-home #pixel-display { z-index:3; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .kinetic-grid-canvas { opacity:.72; } }

/* Continuous transition from the kinetic intro into the site canvas. */
.kinetic-home .pixel-intro { z-index:2; overflow:visible; }
.kinetic-home .pixel-intro::before {
  bottom:-260px;
  height:440px;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 24%,rgba(255,255,255,.72) 61%,rgba(255,255,255,0) 100%);
}
.kinetic-home .hero { position:relative; z-index:1; }

/* Stable, visibly moving ambient pixels below the intro. */
.ambient__pixels span {
  will-change:translate,rotate,scale;
  animation-timing-function:cubic-bezier(.45,.05,.55,.95);
}
@keyframes pixelDrift {
  0% { translate:0 0; rotate:var(--r); scale:.92; }
  48% { translate:calc(var(--dx) * -.32) calc(var(--dy) * .35); rotate:calc(var(--r) - 9deg); scale:1.08; }
  100% { translate:var(--dx) var(--dy); rotate:calc(var(--r) + 24deg); scale:.76; }
}

/* Sliding Liquid Glass selectors for auth and plan variants. */
.auth-card {
  border-color:rgba(255,255,255,.88);
  background:linear-gradient(138deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 48%,rgba(123,222,254,.18));
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.13),0 28px 72px rgba(45,42,50,.12);
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
}
.auth-tabs,.plan-options { position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(255,255,255,.82); background:rgba(255,255,255,.16); box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.09); backdrop-filter:blur(12px) saturate(175%); -webkit-backdrop-filter:blur(12px) saturate(175%); }
.auth-tabs button,.plan-options button { position:relative; z-index:2; background:transparent; box-shadow:none; transition:color .36s ease,opacity .3s ease; }
.auth-tabs.is-ready button.active,.plan-options.is-ready button.active { background:transparent; border-color:transparent; box-shadow:none; }
.auth-liquid-indicator,.plan-liquid-indicator { position:absolute; z-index:1; left:0; top:0; display:block; width:var(--auth-w,var(--plan-w,100px)); height:var(--auth-h,var(--plan-h,48px)); border:1px solid rgba(255,255,255,.96); border-radius:999px; background:linear-gradient(138deg,rgba(255,255,255,.80),rgba(190,238,253,.45),rgba(255,255,255,.54)); box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.13),0 10px 25px rgba(0,168,232,.11); backdrop-filter:blur(9px) saturate(190%); -webkit-backdrop-filter:blur(9px) saturate(190%); pointer-events:none; transition:transform .56s cubic-bezier(.18,.82,.2,1),width .56s cubic-bezier(.18,.82,.2,1),height .56s cubic-bezier(.18,.82,.2,1); }
.auth-liquid-indicator { transform:translate3d(var(--auth-x,6px),var(--auth-y,6px),0); }
.plan-liquid-indicator { transform:translate3d(var(--plan-x,6px),var(--plan-y,6px),0); }
.auth-pane.active { animation:authPaneIn .38s cubic-bezier(.2,.8,.2,1) both; }
.auth-pane.is-leaving { display:block; animation:authPaneOut .18s ease both; pointer-events:none; }
@keyframes authPaneIn { from { opacity:0; transform:translateY(10px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes authPaneOut { to { opacity:0; transform:translateY(-7px); filter:blur(4px); } }

/* The price card stays fixed while only its digits roll. */
.plan-configurator.is-switching .plan-price { transform:none; }
.plan-name b { color:var(--shadow); font:inherit; }
.plan-name em { color:var(--blue); font:inherit; font-style:normal; }

/* Supporting card next to the service marquee. */
.orbit-connection { display:grid; width:min(420px,100%); gap:5px; margin-top:31px; padding:18px 21px; border-radius:24px; }
.orbit-connection strong { color:var(--shadow); font-size:17px; letter-spacing:-.025em; }
.orbit-connection span { color:var(--muted); font-size:12px; }

@media (max-width:720px) {
  .kinetic-home .pixel-intro::before { bottom:-190px; height:330px; }
  .orbit-connection { padding:16px 18px; }
}

@media (prefers-reduced-motion:reduce) {
  .auth-liquid-indicator,.plan-liquid-indicator,.account-liquid-indicator,.auth-pane.active,.auth-pane.is-leaving { transition:none; animation:none; }
  .ambient__pixels span { animation:none; }
}

/* Lumi-style connection control. */
.connection-display { position:relative; width:min(272px,76vw); aspect-ratio:2/1; overflow:hidden; padding:0; border:3px solid rgba(223,241,249,.92); border-radius:36px; background:#04090e; box-shadow:inset 0 0 0 2px rgba(0,168,232,.3),inset 0 0 38px rgba(0,168,232,.15),inset 0 2px rgba(255,255,255,.16),0 5px 0 #087fae,0 10px 0 rgba(45,42,50,.18),0 25px 48px rgba(45,42,50,.22),0 0 0 8px rgba(255,255,255,.32); cursor:pointer; transform:perspective(700px) rotateX(2deg); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }
.connection-display::after { content:""; position:absolute; inset:5px; border:1px solid rgba(0,168,232,.22); border-radius:29px; box-shadow:inset 0 1px rgba(255,255,255,.1); pointer-events:none; }
.connection-display:hover { transform:perspective(700px) translateY(-5px) rotateX(0); box-shadow:inset 0 0 0 2px rgba(0,168,232,.4),inset 0 0 48px rgba(0,168,232,.2),0 6px 0 #0781ae,0 12px 0 rgba(45,42,50,.16),0 31px 60px rgba(45,42,50,.26),0 0 0 9px rgba(255,255,255,.4); }
.connection-display.off { filter:saturate(.45); box-shadow:inset 0 0 0 2px rgba(116,114,122,.24),inset 0 0 30px rgba(116,114,122,.1),0 5px 0 #4d5055,0 22px 44px rgba(45,42,50,.18),0 0 0 8px rgba(255,255,255,.28); }
.connection-display-canvas { display:block; width:100%; height:100%; }
.support-face { cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }
.support-face:hover { transform:translateY(-5px) scale(1.015); box-shadow:inset 0 0 58px rgba(0,168,232,.2),0 30px 60px rgba(45,42,50,.22),0 0 30px rgba(0,168,232,.11); }

@media (max-width:960px) { .trust-strip { grid-template-columns:1.25fr repeat(2,1fr); } }
@media (max-width:720px) { .trust-strip { grid-template-columns:1fr 1fr; }.trust-strip > p { grid-column:span 2; }.connection-display { width:min(250px,76vw); border-radius:32px; } }

/* Horizontal Lumo apps dock. */
.apps { display:block; padding-top:170px; }
.apps-brand { display:grid; grid-template-columns:minmax(350px,.9fr) minmax(330px,1fr) minmax(280px,.75fr); gap:clamp(24px,3vw,42px); align-items:center; margin-bottom:54px; text-align:left; }
.apps-brand > .eyebrow { grid-column:1 / -1; margin-bottom:-18px; }
.apps-brand .app-lockup { margin:0; }
.apps-brand .app-lockup__mark { width:74px; height:74px; }
.apps-brand .brand-wordmark--large { width:min(260px,28vw); height:74px; }
.apps-brand h2 { font-size:clamp(38px,4.3vw,60px); }
.apps-brand > p:last-child { margin:0; font-size:15px; }
.download-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(205px,1fr); grid-template-columns:none; gap:14px; overflow-x:auto; overflow-y:visible; padding:18px 11px 36px; margin-inline:-11px; scroll-snap-type:x proximity; scrollbar-width:none; perspective:1000px; }
.download-grid::-webkit-scrollbar { display:none; }
.download-card { min-height:250px; scroll-snap-align:center; transform-origin:50% 100%; transition:transform .48s cubic-bezier(.18,.82,.2,1),opacity .38s ease,box-shadow .42s ease; }
.download-grid:has(.download-card:hover) .download-card:not(:hover) { transform:translateY(5px) scale(.94); opacity:.74; }
.download-grid .download-card:hover { z-index:4; transform:translateY(-13px) scale(1.1); opacity:1; box-shadow:inset 0 1.5px white,inset 0 -1px rgba(0,168,232,.16),0 38px 82px rgba(45,42,50,.16),0 12px 30px rgba(0,168,232,.13); }
.download-grid .download-card:has(+ .download-card:hover),.download-grid .download-card:hover + .download-card { transform:translateY(-4px) scale(1.02); opacity:.92; }

/* Cleaner text rhythm across large headings and cards. */
h1,h2,h3 { text-wrap:balance; }
.card-copy h3,.why-card h3,.apps-brand h2,.service-marquee-copy h2,.lumi-copy h2 { line-height:1.02; }
.card-copy > p:last-of-type,.why-card p,.lumi-copy p { line-height:1.62; }

@media (max-width:960px) {
  .apps-brand { grid-template-columns:1fr 1fr; }
  .apps-brand .app-lockup { grid-column:1 / -1; }
  .apps-brand .brand-wordmark--large { width:min(300px,48vw); }
}
@media (max-width:720px) {
  .site-grid-canvas { opacity:.58; }
  .apps-brand { grid-template-columns:1fr; gap:24px; margin-bottom:38px; text-align:center; }
  .apps-brand > .eyebrow,.apps-brand .app-lockup { grid-column:auto; }
  .apps-brand > .eyebrow { margin-bottom:0; }
  .apps-brand > p:last-child { margin-inline:auto; }
  .apps-brand .brand-wordmark--large { width:min(250px,62vw); }
  .download-grid { grid-auto-columns:230px; padding-block:16px 28px; }
  .download-grid:has(.download-card:hover) .download-card:not(:hover),.download-grid .download-card:hover,.download-grid .download-card:has(+ .download-card:hover),.download-grid .download-card:hover + .download-card { transform:none; opacity:1; }
}

/* One continuous interactive grid from the intro to the footer. */
.kinetic-grid-canvas { display:none !important; }
.kinetic-home .pixel-intro { overflow:hidden; background:transparent; }
.kinetic-home .pixel-intro::before { display:none; }
.kinetic-home .pixel-intro::after {
  z-index:1;
  background:radial-gradient(ellipse 54% 48% at 50% 51%,rgba(255,255,255,.91),rgba(255,255,255,.64) 45%,rgba(255,255,255,.12) 76%,transparent 100%);
}
.site-grid-canvas { opacity:.76; }

/* A conventional pixel power mark inside Lumi's display. */
.connection-display { width:min(258px,74vw); }
.connection-display-canvas { image-rendering:pixelated; }

/* Light feature tile with a dark code editor inset. */
.why-card--privacy {
  color:var(--shadow);
  background:linear-gradient(145deg,rgba(255,255,255,.54),rgba(230,248,255,.28));
}
/* Лесенка тарифов в плитке 03: точки показывают, за что платишь, без цен —
   иначе появилось бы третье место, где их надо синхронно править. */
.plan-ladder { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.plan-ladder li { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 14px; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(224,247,255,.32)); }
.plan-ladder b { color:var(--shadow); font-size:12px; font-weight:750; letter-spacing:-.01em; }
/* Второе слово названия — голубое, как в конфигураторе на главной. */
.plan-ladder b span { color:var(--blue); }
.plan-ladder em { color:var(--muted); font-size:10px; font-style:normal; white-space:nowrap; }
.plan-dots { display:flex; gap:4px; }
.plan-dots i { width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.85; }
.plan-dots--many i:last-child { width:14px; border-radius:999px; background:linear-gradient(90deg,var(--blue),rgba(0,168,232,.25)); }

.why-card--privacy p { color:var(--muted); }
.why-card--privacy .why-number { color:rgba(45,42,50,.22); }
.why-card--privacy .privacy-code {
  background:#070b10;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 38px rgba(45,42,50,.16);
}

/* «Фонарик»: код читается только под курсором. Маска — круг в точке
   указателя, координаты приходят из app.js. Прячем сам текст, а не панель
   окна: пустая рамка выглядела бы поломкой, а не задумкой. */
.privacy-code { position:relative; }
@media (hover:hover) and (pointer:fine) {
  .code-lines {
    -webkit-mask-image:radial-gradient(circle 104px at var(--code-x,50%) var(--code-y,50%),#000 0%,#000 40%,rgba(0,0,0,.35) 72%,transparent 100%);
    mask-image:radial-gradient(circle 104px at var(--code-x,50%) var(--code-y,50%),#000 0%,#000 40%,rgba(0,0,0,.35) 72%,transparent 100%);
    opacity:0;
    transition:opacity .3s ease;
  }
  .privacy-code.is-lit .code-lines,
  .privacy-code:focus-within .code-lines { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .code-lines { transition:none; }
}

/* The privacy card is informational, not a browser diagnostic tool. */
.bento-card--privacy .card-copy { max-width:540px; }


/* Apps use a stable two-row grid instead of a clipped horizontal dock. */
.download-grid {
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:row;
  grid-auto-columns:unset;
  gap:16px;
  overflow:visible;
  margin:0 -10px;
  padding:36px 10px 42px;
  perspective:none;
  scroll-snap-type:none;
}
.download-grid::-webkit-scrollbar { display:none; }
.download-card {
  grid-column:span 3;
  min-width:0;
  min-height:238px;
  scroll-snap-align:none;
  transform-origin:50% 50%;
  transition:transform .4s cubic-bezier(.18,.82,.2,1),opacity .34s ease,box-shadow .4s ease;
}
.download-card:nth-child(n + 5) { grid-column:span 4; }
.download-card.interactive-glow::before { display:none; }
.download-card.glass-panel::after {
  animation:none;
  opacity:.52;
  background:radial-gradient(210px 54px at 13% -3%,rgba(255,255,255,.96),transparent 72%),linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
}
.download-card .platform-symbol { animation:none; transition:transform .4s cubic-bezier(.18,.82,.2,1); }
.download-grid:has(.download-card:hover) .download-card:not(:hover) { transform:scale(.975); opacity:.86; }
.download-grid .download-card:hover {
  z-index:4;
  transform:translateY(-8px) scale(1.055);
  opacity:1;
  box-shadow:inset 0 1.5px white,inset 0 -1px rgba(0,168,232,.14),0 26px 56px rgba(45,42,50,.13),0 9px 24px rgba(0,168,232,.1);
}
.download-grid .download-card:hover .platform-symbol { transform:scale(1.06); }
.download-grid .download-card:has(+ .download-card:hover),.download-grid .download-card:hover + .download-card { transform:scale(.99); opacity:.92; }

/* Dashboard Liquid Glass navigation and simplified overview. */
.dashboard-sidebar nav {
  --dash-nav-x:5px;
  --dash-nav-y:5px;
  --dash-nav-w:calc(100% - 10px);
  --dash-nav-h:44px;
  position:relative;
  isolation:isolate;
  padding:5px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:21px;
  background:linear-gradient(140deg,rgba(255,255,255,.28),rgba(194,239,253,.12));
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.1);
  backdrop-filter:blur(15px) saturate(180%);
  -webkit-backdrop-filter:blur(15px) saturate(180%);
}
.dashboard-nav-indicator {
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  display:block;
  width:var(--dash-nav-w);
  height:var(--dash-nav-h);
  border:1px solid rgba(255,255,255,.96);
  border-radius:16px;
  background:linear-gradient(138deg,rgba(255,255,255,.78),rgba(191,239,254,.4),rgba(255,255,255,.5));
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.13),0 9px 22px rgba(45,42,50,.08);
  transform:translate3d(var(--dash-nav-x),var(--dash-nav-y),0);
  pointer-events:none;
  transition:transform .5s cubic-bezier(.18,.82,.2,1),width .5s cubic-bezier(.18,.82,.2,1),height .5s cubic-bezier(.18,.82,.2,1);
}
.dashboard-sidebar nav a { position:relative; z-index:2; background:transparent; box-shadow:none; transition:color .28s ease; }
.dashboard-sidebar nav a:hover,.dashboard-sidebar nav a.active { background:transparent; box-shadow:none; }
.dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dashboard-grid .metric-glass { min-height:235px; }
.account-apps {
  display:flex;
  min-height:290px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-align:center;
}
.account-apps > div { display:flex; flex-direction:column; align-items:center; }
.account-apps h2 { max-width:780px; margin:0; text-align:center; }
.account-apps p:not(.eyebrow) { max-width:680px; margin:14px auto 0; text-align:center; line-height:1.6; }
.account-apps .button { margin-top:27px; }
.account-delete-footer { display:flex; justify-content:center; padding:48px 0 12px; }
.account-delete-footer .destructive-button { min-width:220px; background:transparent; box-shadow:none; }
.account-delete-footer .destructive-button:hover { animation:deleteSway .52s ease-in-out 1; }
.account-delete-footer .destructive-button.is-confirming { color:#a73b47; border-radius:0; background:transparent; box-shadow:none; }
@keyframes deleteSway { 0%,100%{transform:translateX(0)}28%{transform:translateX(-4px)}62%{transform:translateX(3px)}82%{transform:translateX(-1px)} }

/* «Выйти» в сайдбаре — то же оформление, что у «Удалить аккаунт»: это тоже
   выход из аккаунта, и выглядеть он должен так же. Правило идёт после
   базового `.logout`, иначе серый цвет и выравнивание влево перебивают его. */
.dashboard-sidebar .logout {
  width:100%;
  min-width:0;
  margin-top:12px;
  padding:0 15px;
  color:#a73b47;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
.dashboard-sidebar .logout:hover { animation:deleteSway .52s ease-in-out 1; }

@media (max-width:960px) {
  .download-card,.download-card:nth-child(n + 5) { grid-column:span 6; }
  .dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .site-grid-canvas { opacity:.66; }
  .download-grid { grid-template-columns:1fr; gap:12px; margin:0; padding:20px 0 28px; }
  .download-card,.download-card:nth-child(n + 5) { grid-column:1; min-height:188px; }
  .download-grid:has(.download-card:hover) .download-card:not(:hover),.download-grid .download-card:hover,.download-grid .download-card:has(+ .download-card:hover),.download-grid .download-card:hover + .download-card { transform:none; opacity:1; }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid .metric-glass:nth-child(3) { grid-column:span 2; }
  .account-apps { align-items:center; padding:30px 22px; text-align:center; }
  .account-apps h2 { font-size:34px; text-align:center; }
  .dashboard-sidebar nav {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    overflow:visible;
  }
  .dashboard-sidebar nav a {
    min-width:0;
    padding:12px 4px;
    text-align:center;
    font-size:10.5px;
  }
  /* Сайдбар здесь — сетка 1fr/auto. Порядок задаём явно, иначе плашка
     админки встаёт в свободную ячейку рядом с логотипом. */
  .dashboard-sidebar .brand { order:1; }
  .dashboard-sidebar .logout { order:2; width:auto; margin-top:0; text-align:center; }
  .dashboard-sidebar nav { order:3; }
  .dashboard-sidebar .dashboard-admin-plate { order:4; grid-column:span 2; margin-top:0; }
  .dashboard-sidebar .dashboard-admin-link { padding:12px; text-align:center; font-size:10.5px; }
  /* Подписи кнопок не должны ломаться на две строки. */
  .dashboard-top .button,
  .text-action { white-space:nowrap; }
  .text-action { gap:10px; padding-inline:14px; }
  .dashboard-top { flex-wrap:wrap; gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .download-card,.download-card .platform-symbol,.dashboard-nav-indicator,.account-delete-footer .destructive-button,.dashboard-sidebar .logout { transition:none; animation:none; }
}

/* Account-aware Hub trigger: guests see one clear action, members see Lumi or their photo. */
.nav-hub:not(.is-authenticated) {
  width:48px;
  min-width:48px;
  padding:5px;
  justify-content:center;
}
.nav-hub:not(.is-authenticated) .nav-hub-face,
.nav-hub:not(.is-authenticated) b { display:none; }
.nav-hub:not(.is-authenticated) em { width:36px; height:36px; }
.nav-hub.is-authenticated .nav-hub-face { display:block; }
.nav-hub-face.has-user-avatar::before,
.nav-hub-face.has-user-avatar::after,
.nav-hub-face.has-user-avatar .mini-lumi-display { display:none; }
.nav-user-avatar,
.profile-avatar > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Informational network state. It is intentionally not an interactive VPN control. */
.network-status-visual {
  position:relative;
  width:150px;
  height:150px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(0,168,232,.17),rgba(255,255,255,.3) 48%,rgba(0,168,232,.04) 68%,transparent 69%);
  box-shadow:inset 0 1px white,inset 0 0 36px rgba(0,168,232,.1),0 22px 45px rgba(0,168,232,.13);
}
.network-ring { position:absolute; border:1px solid rgba(0,168,232,.22); border-radius:50%; }
.network-ring--outer { inset:14px; animation:networkOrbit 12s linear infinite; }
.network-ring--inner { inset:36px; border-style:dashed; animation:networkOrbit 8s linear infinite reverse; }
.network-core-mark {
  position:absolute;
  left:50%;
  top:50%;
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  translate:-50% -50%;
  border:1px solid rgba(255,255,255,.96);
  border-radius:17px;
  background:linear-gradient(145deg,#31c0f3,#008bc4);
  box-shadow:inset 0 1px white,0 12px 28px rgba(0,168,232,.27);
}
.network-core-mark::before,
.network-core-mark::after,
.network-core-mark i { content:""; display:block; width:6px; height:6px; border-radius:2px; background:white; box-shadow:0 0 8px rgba(255,255,255,.72); }
.network-core-mark::before { position:absolute; left:11px; top:21px; }
.network-core-mark::after { position:absolute; right:11px; top:21px; }
.network-core-mark i { position:relative; }
.network-node { position:absolute; width:7px; height:7px; border-radius:2px; background:var(--blue); box-shadow:0 0 0 6px rgba(0,168,232,.09),0 0 14px rgba(0,168,232,.34); }
.network-node--one { left:22px; top:47px; }
.network-node--two { right:27px; top:31px; }
.network-node--three { right:22px; bottom:34px; }
@keyframes networkOrbit { to { rotate:360deg; } }

/* The original left-hand copy stays intact and steps toward a larger radar on the right. */
.bento-card--privacy .privacy-copy {
  left:34px;
  right:auto;
  top:50%;
  bottom:auto;
  width:46%;
  translate:0 -50%;
}
.bento-card--privacy .privacy-copy .eyebrow { margin-bottom:14px; }
.bento-card--privacy .privacy-copy h3 { font-size:clamp(26px,2.55vw,38px); line-height:1.02; }
.bento-card--privacy .privacy-copy h3 span { display:block; white-space:nowrap; }
.bento-card--privacy .privacy-copy h3 span:nth-child(2) { margin-left:20px; }
.bento-card--privacy .privacy-copy h3 span:nth-child(3) { margin-left:42px; color:var(--blue-deep); }
.bento .bento-card--privacy .privacy-radar,
.bento .bento-card--privacy .server-globe {
  left:auto;
  right:20px;
  top:50%;
  width:min(48%,360px);
  height:auto;
  aspect-ratio:1;
  translate:0 -50%;
}

/* Profile avatar can use Lumi, a Telegram photo, or a locally uploaded image. */
.profile-avatar {
  position:relative;
  overflow:hidden;
  color:white;
  background:#071019;
  box-shadow:inset 0 0 0 1px rgba(0,168,232,.28),0 8px 20px rgba(45,42,50,.12);
}
.profile-avatar--lumi .mini-lumi-display {
  position:absolute;
  left:0;
  top:50%;
  display:block;
  width:100%;
  height:auto;
  translate:0 -50%;
}
.dashboard-identity { display:flex; align-items:center; gap:20px; }
.profile-avatar-picker {
  display:grid;
  flex:none;
  gap:7px;
  justify-items:center;
  padding:0;
  border:0;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
}
.profile-avatar--large {
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(0,168,232,.28),0 15px 34px rgba(45,42,50,.14);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease;
}
.profile-avatar-picker small { font-size:8px; font-weight:720; }
.profile-avatar-picker:hover .profile-avatar--large { transform:translateY(-3px) scale(1.025); box-shadow:inset 0 0 0 1px rgba(0,168,232,.38),0 20px 42px rgba(0,168,232,.16); }
.profile-avatar-picker:active .profile-avatar--large { transform:scale(.98); }

@media (max-width:720px) {
  .network-status-visual { width:128px; height:128px; }
  .bento .bento-card--privacy .privacy-radar,.bento .bento-card--privacy .server-globe { left:50%; right:auto; top:37%; width:min(74vw,280px); translate:-50% -50%; }
  .bento-card--privacy .privacy-copy { left:28px; right:28px; top:auto; bottom:30px; width:auto; translate:0; }
  .bento-card--privacy .privacy-copy h3 { font-size:31px; }
  .bento-card--privacy .privacy-copy h3 span:nth-child(2) { margin-left:16px; }
  .bento-card--privacy .privacy-copy h3 span:nth-child(3) { margin-left:34px; }
  .dashboard-top { align-items:center; }
  .dashboard-identity { gap:12px; }
  .profile-avatar--large { width:58px; height:58px; border-radius:19px; }
  .profile-avatar-picker small { display:none; }
  .dashboard-top h1 { font-size:clamp(34px,10vw,46px); }
}

@media (prefers-reduced-motion:reduce) {
  .network-ring--outer,.network-ring--inner { animation:none; }
  .profile-avatar--large { transition:none; }
}

/* Lumi replaces the browser-network mockup. The illustration remains the hero's main visual. */
.hero-lumi-visual { display:grid; place-items:end center; isolation:isolate; }
.hero-lumi-aura {
  position:absolute;
  z-index:1;
  left:50%;
  bottom:7%;
  width:76%;
  height:76%;
  translate:-50% 0;
  border-radius:44% 56% 46% 54% / 55% 47% 53% 45%;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(133,222,252,.2),rgba(255,255,255,.16));
  box-shadow:inset 0 1px white,0 40px 90px rgba(0,168,232,.13);
  animation:lumiAuraDrift 8s ease-in-out infinite alternate;
}
.hero-lumi-aura::before {
  content:"";
  position:absolute;
  inset:10%;
  border:1px solid rgba(0,168,232,.12);
  border-radius:50%;
  background:radial-gradient(circle at 50% 60%,rgba(0,168,232,.14),transparent 62%);
}
.hero-lumi-image {
  position:relative;
  z-index:3;
  display:block;
  width:min(96%,610px);
  max-height:650px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 30px 34px rgba(34,80,105,.18));
  transform-origin:50% 100%;
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;
}
.hero-lumi-image--laptop {
  width:min(91%,570px);
  max-height:620px;
}
.hero-lumi-visual:hover .hero-lumi-image { transform:translateY(-7px) rotate(.5deg); filter:drop-shadow(0 38px 42px rgba(0,168,232,.22)); }
@keyframes lumiAuraDrift { to { transform:translate3d(0,-8px,0) scale(1.025) rotate(2deg); } }

/* Privacy card follows the same visual hierarchy as the other Experience tiles. */
.bento-card--privacy .privacy-copy {
  left:31px;
  right:31px;
  top:auto;
  bottom:31px;
  width:auto;
  translate:0;
}
.bento-card--privacy .privacy-copy .eyebrow { margin-bottom:12px; color:var(--blue-deep); }
.bento-card--privacy .privacy-copy h3 { max-width:560px; color:var(--shadow); font-size:clamp(29px,3vw,44px); line-height:1; }
.bento-card--privacy .privacy-copy > p:last-child { max-width:480px; margin:17px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.bento .bento-card--privacy .privacy-radar {
  overflow:hidden;
}

/* Keep the radar geometrically centred and separated from the copy. */
@media (min-width:961px) {
  .bento-card--privacy .privacy-copy {
    left:34px;
    right:auto;
    top:50%;
    bottom:auto;
    width:45%;
    translate:0 -50%;
  }
  .bento-card--privacy .privacy-copy h3 { font-size:clamp(25px,2.45vw,37px); }
  .bento .bento-card--privacy .privacy-radar,
  .bento .bento-card--privacy .server-globe {
    left:auto;
    right:28px;
    top:50%;
    width:clamp(210px,19vw,290px);
    height:auto;
    aspect-ratio:1;
    translate:0 -50%;
  }
}

@media (min-width:721px) and (max-width:960px) {
  .bento-card--privacy { min-height:650px; }
  .bento .bento-card--privacy .privacy-radar,
  .bento .bento-card--privacy .server-globe {
    left:50%;
    right:auto;
    top:31%;
    width:280px;
    height:280px;
    translate:-50% -50%;
  }
  .bento-card--privacy .privacy-copy {
    left:34px;
    right:34px;
    top:auto;
    bottom:34px;
    width:auto;
    translate:0;
  }
}

/* Download placeholders are ready for future application links. */
.download-card button:disabled { cursor:default; opacity:1; filter:none; }
.download-card button span { display:inline-grid; width:21px; height:21px; margin-left:8px; place-items:center; border-radius:50%; color:white; background:var(--blue); font-size:13px; line-height:1; }

/* FAQ marker: a bare plus that rotates into a close icon. No frame around it. */
.faq summary > span,
.hub-faq summary > span {
  position:relative;
  display:grid;
  flex:0 0 auto;
  width:26px;
  height:26px;
  place-items:center;
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
.faq summary > span::before,.faq summary > span::after,
.hub-faq summary > span::before,.hub-faq summary > span::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:2px;
  border-radius:2px;
  background:var(--blue);
  translate:-50% -50%;
  transition:background .24s ease;
}
.faq summary > span::after,.hub-faq summary > span::after { rotate:90deg; }
.faq summary:hover > span,.hub-faq summary:hover > span { transform:scale(1.12); }
.faq details[open] summary > span,.hub-faq details[open] summary > span {
  rotate:0deg;
  transform:rotate(45deg);
  border:0;
  background:none;
  box-shadow:none;
}
.faq details[open] summary:hover > span,
.hub-faq details[open] summary:hover > span { transform:rotate(45deg) scale(1.12); }
.faq details[open] summary > span::before,.faq details[open] summary > span::after,
.hub-faq details[open] summary > span::before,.hub-faq details[open] summary > span::after { background:var(--blue-deep); }

.hub-pane[data-hub-pane="faq"] { overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:rgba(0,168,232,.34) transparent; }
.hub-faq { margin-top:18px; }
.hub-faq summary { justify-content:space-between; gap:14px; min-height:64px; list-style:none; }
.hub-faq summary::-webkit-details-marker { display:none; }
.hub-faq summary > span { width:22px; height:22px; border-radius:0; }
.hub-faq summary > span::before,.hub-faq summary > span::after { width:12px; }
.hub-faq p { opacity:0; transform:translateY(-8px); filter:blur(3px); }
.hub-faq details[open]:not(.is-closing) p { opacity:1; transform:none; filter:none; animation:faqAnswerIn .48s cubic-bezier(.2,.8,.2,1) both; }
.hub-faq details.is-closing p { animation:faqAnswerOut .15s ease both; }

.hub-session { grid-template-columns:auto 1fr; }
.hub-open-account {
  grid-column:1 / -1;
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:4px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:14px;
  color:#07344a;
  background:linear-gradient(120deg,rgba(255,255,255,.7),rgba(101,215,250,.35),rgba(255,255,255,.58));
  background-size:220% 100%;
  box-shadow:inset 0 1px white,0 11px 25px rgba(0,168,232,.12);
  font-size:13px;
  font-weight:800;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background-position 1.2s ease;
}
.hub-open-account:hover { transform:translateY(-2px); background-position:100% 50%; box-shadow:inset 0 1px white,0 16px 31px rgba(0,168,232,.2); }
.nav-hub.is-authenticated em { display:none; }
.nav-hub.is-authenticated { padding-right:11px; }

/* Personal-link action: scattered pixels drift on their own, no ruled background. */
.pixel-action {
  border-color:rgba(0,168,232,.42);
  background-color:rgba(255,255,255,.76);
  background-image:none;
  box-shadow:inset 0 1px white,0 12px 28px rgba(0,168,232,.08);
  transition:border-color .5s ease,box-shadow .6s ease,transform .5s cubic-bezier(.2,.8,.2,1),background-color .6s ease;
}
.pixel-action-field i {
  opacity:calc(var(--po) * .42);
  transform:none;
  animation:pixelActionDrift var(--pdur,9s) ease-in-out var(--pdelay,0s) infinite alternate;
  transition:opacity .45s ease var(--pd);
}
.pixel-action:hover .pixel-action-field i,
.pixel-action:focus-visible .pixel-action-field i {
  opacity:var(--po);
  transform:none;
  animation-duration:calc(var(--pdur,9s) * .6);
}
@keyframes pixelActionDrift {
  from { translate:0 0; }
  to { translate:var(--fx,6px) var(--fy,-8px); }
}
.pixel-action:hover { border-color:var(--blue); background-color:rgba(242,251,255,.9); box-shadow:inset 0 1px white,0 18px 36px rgba(0,168,232,.15); transform:translateY(-2px); }
.pixel-action-label i { color:white; background:var(--blue); box-shadow:inset 0 1px rgba(255,255,255,.55),0 8px 20px rgba(0,168,232,.25); transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease; }
.pixel-action:hover .pixel-action-label i { color:white; background:var(--blue); transform:translateY(-2px) scale(1.045); box-shadow:inset 0 1px rgba(255,255,255,.7),0 13px 28px rgba(0,168,232,.31); }
.account-delete-footer .destructive-button { font-size:14px; font-weight:760; }
.consent-row { align-items:center; }
.consent-row input { align-self:center; margin:0; }

/* Final CTA keeps its liquid motion continuous instead of flashing on hover. */
.final-cta .button,
.final-cta .button:hover {
  color:#06364a;
  background:linear-gradient(112deg,rgba(255,255,255,.94),rgba(78,208,248,.82),rgba(255,255,255,.9),rgba(0,168,232,.68));
  background-size:280% 100%;
  animation:ctaShimmer 8s ease-in-out infinite;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease;
}
.final-cta .button:hover { transform:translateY(-3px); box-shadow:inset 0 1px white,0 18px 40px rgba(0,168,232,.22); }

@media (max-width:720px) {
  .hero-lumi-visual { min-height:500px; }
  .hero-lumi-aura { width:92%; height:72%; bottom:4%; }
  .hero-lumi-image { width:min(100%,520px); max-height:520px; }
  .hero-lumi-image--laptop { width:min(96%,470px); max-height:500px; }
  .bento .bento-card--privacy .privacy-radar,.bento .bento-card--privacy .server-globe { top:29%; width:min(66vw,245px); height:auto; aspect-ratio:1; }
  .bento-card--privacy .privacy-copy { left:28px; right:28px; bottom:30px; }
  .bento-card--privacy .privacy-copy h3 { font-size:31px; }
  .plan-options { grid-template-columns:1fr; gap:6px; padding:7px; overflow:hidden; border-radius:30px; }
  .plan-options button { width:100%; min-height:76px; border-radius:999px; }
  .plan-liquid-indicator { max-width:calc(100% - 14px); border-radius:999px; }
}

/* Compact mobile navigation: the menu is a stack of glass controls, not one
   oversized white surface. */
@media (max-width:1040px) {
  /* The panel stays laid out and hides behind opacity/visibility instead of
     display:none, which cannot be transitioned — the menu used to appear and
     vanish in a single frame. Geometry lives here rather than on .menu-open
     so closing fades out instead of snapping to a different shape first. */
  .glass-nav nav {
    left:8px;
    right:8px;
    top:calc(100% + 8px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto;
    min-height:0;
    max-height:none;
    gap:4px;
    padding:7px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.88);
    border-radius:26px;
    background:linear-gradient(138deg,rgba(255,255,255,.76),rgba(239,250,255,.58));
    box-shadow:inset 0 1px white,0 18px 48px rgba(45,42,50,.13);
    backdrop-filter:blur(18px) saturate(170%);
    -webkit-backdrop-filter:blur(18px) saturate(170%);
    visibility:hidden;
    opacity:0;
    translate:0 -10px;
    scale:.96;
    transform-origin:100% 0;
    pointer-events:none;
    transition:opacity .24s ease,
      translate .34s cubic-bezier(.2,.82,.2,1),
      scale .34s cubic-bezier(.2,.82,.2,1),
      visibility .34s;
  }
  .glass-nav.menu-open nav {
    visibility:visible;
    opacity:1;
    translate:0 0;
    scale:1;
    pointer-events:auto;
  }
  .glass-nav nav a {
    position:relative;
    z-index:2;
    width:100%;
    min-height:50px;
    align-items:center;
    padding:0 17px;
    border-radius:999px;
    color:rgba(45,42,50,.72);
    font-size:14px;
  }
  /* The travelling pill marks the active item here exactly as it does on the
     bar; a per-item background would sit on top of it and kill the movement. */
  .glass-nav nav a.active { color:var(--shadow); }
  .glass-nav nav a:active { background:rgba(255,255,255,.5); }
  .glass-nav .nav-liquid-indicator { border-radius:999px; }
  .nav-toggle {
    min-width:68px;
    min-height:42px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.86);
    border-radius:999px;
    color:var(--shadow);
    background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(180,234,251,.23));
    box-shadow:inset 0 1px white,0 8px 20px rgba(45,42,50,.08);
    font-size:12px;
    cursor:pointer;
  }
}

@media (max-width:720px) {
  .glass-nav nav { left:4px; right:4px; border-radius:23px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-lumi-aura,.final-cta .button { animation:none; }
  .hero-lumi-image,.pixel-action,.pixel-action-field i,.pixel-action-label i,.hub-open-account { transition:none; }
  .glass-nav nav,.nav-liquid-indicator { transition:none; }
}

/* Responsive 404 page based on the approved Lumi error composition. */
.page-error { min-height:100dvh; overflow-x:hidden; }
.error-brand {
  position:fixed;
  z-index:20;
  left:24px;
  top:20px;
  display:flex;
  min-height:58px;
  align-items:center;
  gap:9px;
  padding:8px 15px 8px 10px;
  border-radius:20px;
}
.error-brand > img { width:38px; height:38px; }
.error-brand .brand-wordmark { width:96px; }
.error-brand small { color:var(--blue-deep); font-size:8px; font-weight:800; letter-spacing:.12em; }
.error-page { position:relative; z-index:2; display:grid; min-height:100dvh; place-items:center; padding:96px 4vw 48px; }
.error-hero { display:grid; width:min(1220px,100%); grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); gap:clamp(38px,6vw,88px); align-items:center; }
.error-art { position:relative; display:grid; min-height:660px; place-items:end center; }
.error-art::before { content:""; position:absolute; inset:15% 3% 4%; border:1px solid rgba(255,255,255,.86); border-radius:48% 52% 44% 56% / 56% 46% 54% 44%; background:linear-gradient(145deg,rgba(255,255,255,.44),rgba(150,228,253,.18)); box-shadow:inset 0 1px white,0 40px 90px rgba(0,168,232,.1); backdrop-filter:blur(16px); }
.error-art img { position:relative; z-index:3; display:block; width:min(100%,690px); max-height:630px; object-fit:contain; filter:drop-shadow(0 28px 32px rgba(34,80,105,.16)); }
.error-code-backdrop { position:absolute; z-index:1; right:-3%; top:7%; color:rgba(0,168,232,.08); font-size:clamp(170px,20vw,310px); font-weight:850; letter-spacing:-.12em; line-height:1; }
.error-heart { position:absolute; z-index:4; right:8%; top:12%; width:108px; height:92px; border:1px solid rgba(255,255,255,.9); border-radius:31px; background:rgba(255,255,255,.48); box-shadow:inset 0 1px white,0 16px 38px rgba(0,168,232,.12); backdrop-filter:blur(18px); }
.error-heart::after { content:""; position:absolute; left:22px; bottom:-15px; width:24px; height:24px; border-left:1px solid white; border-bottom:1px solid white; background:rgba(255,255,255,.45); transform:skewY(-38deg) rotate(-18deg); }
.error-heart i { position:absolute; top:29px; width:26px; height:38px; background:var(--blue); }
.error-heart i:first-child { left:29px; border-radius:15px 15px 3px 15px; transform:rotate(-45deg); transform-origin:0 100%; }
.error-heart i:last-child { right:29px; border-radius:15px 15px 15px 3px; transform:rotate(45deg); transform-origin:100% 100%; }
.error-copy { position:relative; max-width:540px; }
.error-code { margin:0 0 17px; color:var(--blue-deep); font-size:11px; font-weight:820; letter-spacing:.16em; text-transform:uppercase; }
.error-copy h1 { font-size:clamp(58px,7vw,96px); line-height:.88; letter-spacing:-.075em; }
.error-copy h1 em { color:var(--blue); font-style:normal; }
.error-copy > p:not(.error-code) { max-width:510px; margin:27px 0 0; color:var(--muted); font-size:16px; line-height:1.62; }
.error-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.error-actions .button { min-width:190px; }
.error-help { margin-top:28px; padding:25px 28px; border-radius:26px; }
.error-help strong { display:block; margin-bottom:13px; font-size:14px; }
.error-help ol { display:grid; gap:9px; margin:0; padding-left:21px; color:var(--muted); font-size:12px; line-height:1.45; }

@media (max-width:900px) {
  .error-page { padding-top:100px; }
  .error-hero { grid-template-columns:1fr; gap:20px; }
  .error-art { min-height:470px; }
  .error-art img { max-height:470px; }
  .error-code-backdrop { right:3%; top:4%; font-size:min(43vw,250px); }
  .error-copy { max-width:680px; margin-inline:auto; text-align:center; }
  .error-copy > p:not(.error-code) { margin-inline:auto; }
  .error-actions { justify-content:center; }
  .error-help { text-align:left; }
}
@media (max-width:560px) {
  .error-brand { left:10px; top:9px; min-height:54px; }
  .error-page { padding:78px 14px 28px; }
  .error-art { min-height:360px; }
  .error-art::before { inset:13% 0 3%; }
  .error-art img { width:100%; max-height:365px; }
  .error-heart { right:3%; top:7%; scale:.72; transform-origin:100% 0; }
  .error-copy h1 { font-size:clamp(49px,15vw,70px); }
  .error-copy > p:not(.error-code) { font-size:14px; }
  .error-actions { display:grid; grid-template-columns:1fr; }
  .error-actions .button { width:100%; }
  .error-help { padding:22px; border-radius:24px; }
}

/* FAQ and Hub overrides intentionally live last to avoid legacy style collisions. */
.faq-list details summary,
.hub-faq details summary { outline:none !important; }
.faq-list details summary:focus-visible,
.hub-faq details summary:focus-visible {
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 2px rgba(0,168,232,.34);
}
.faq-list details summary > span,
.hub-faq details summary > span {
  overflow:visible !important;
  border-radius:0 !important;
  rotate:0deg !important;
  transform:none !important;
}
.faq-list details summary > span::before,
.hub-faq details summary > span::before {
  left:50% !important;
  top:50% !important;
  translate:-50% -50% !important;
  rotate:0deg !important;
  transform:none !important;
}
.faq-list details summary > span::after,
.hub-faq details summary > span::after {
  left:50% !important;
  top:50% !important;
  translate:-50% -50% !important;
  rotate:90deg !important;
  transform:none !important;
}
.faq-list details[open] summary > span,
.hub-faq details[open] summary > span {
  rotate:45deg !important;
  transform:none !important;
}
.nav-hub:not(.is-authenticated) b {
  position:relative;
  z-index:2;
  display:block !important;
  color:#07344a;
  opacity:1;
}
.nav-hub > em { position:relative; z-index:2; }

/* Final FAQ geometry and motion: one implementation for the page and Lumo Hub. */
.faq-list details,
.hub-faq details {
  contain:layout paint;
}
.faq-list details summary,
.hub-faq details summary {
  position:relative;
  outline:0 !important;
  border:0 !important;
  border-radius:18px;
  transition:background .28s ease,box-shadow .28s ease;
}
.faq-list details summary:focus,
.hub-faq details summary:focus { outline:0 !important; background:none; box-shadow:none; }
.faq-list details summary:focus-visible,
.hub-faq details summary:focus-visible {
  outline:0 !important;
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(0,168,232,.2);
}
.faq-list details > p,
.hub-faq details > p {
  box-sizing:border-box;
  margin:0 !important;
  padding:0 52px 24px 0;
  opacity:0;
  transform:translateY(-8px);
  filter:blur(3px);
  transition:opacity .34s ease,transform .44s cubic-bezier(.2,.8,.2,1),filter .34s ease;
}
.faq-list details[open]:not(.is-closing) > p,
.hub-faq details[open]:not(.is-closing) > p {
  opacity:1;
  transform:none;
  filter:none;
}
/* No frame around the marker — the plus itself is the whole control. */
.faq-list details summary > span,
.hub-faq details summary > span {
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  rotate:0deg !important;
  transform:none !important;
  scale:1;
  transition:rotate .34s cubic-bezier(.2,.8,.2,1),scale .24s ease !important;
}
.faq-list details summary:hover > span,
.hub-faq details summary:hover > span { scale:1.14; }
.faq-list details summary > span::before,
.hub-faq details summary > span::before,
.faq-list details summary > span::after,
.hub-faq details summary > span::after {
  left:50% !important;
  top:50% !important;
  translate:-50% -50% !important;
  transform:none !important;
}
.faq-list details summary > span::before,
.hub-faq details summary > span::before { rotate:0deg !important; }
.faq-list details summary > span::after,
.hub-faq details summary > span::after { rotate:90deg !important; }
.faq-list details[open] summary > span,
.hub-faq details[open] summary > span {
  rotate:45deg !important;
  transform:none !important;
}

/* The guest Hub control keeps its name at every supported width. */
.nav-hub:not(.is-authenticated) {
  width:auto !important;
  min-width:0 !important;
  padding:5px 7px 5px 12px !important;
  gap:8px;
}
.nav-hub:not(.is-authenticated) b { display:block !important; white-space:nowrap; }
.nav-hub:not(.is-authenticated) .nav-hub-face { display:none !important; }
.nav-hub:not(.is-authenticated) em { width:34px; height:34px; }

/* Billing choices select a period; the only price is the large figure above. */
.billing-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.billing-choice i { font-style:normal; font-weight:760; }
.billing-choice b { white-space:nowrap; }
@media (max-width:420px) {
  .nav-hub:not(.is-authenticated) { gap:5px; padding-left:9px !important; }
  .nav-hub:not(.is-authenticated) b { font-size:9px; }
  .nav-hub:not(.is-authenticated) em { width:29px; height:29px; }
  .faq-list details > p,.hub-faq details > p { padding-right:10px; }
}
@media (max-width:350px) {
  .glass-nav .brand > small { display:none; }
}

/* Current app delivery: Incy + Happ. The previous native-platform grid is archived. */
.client-download-heading {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);
  gap:clamp(34px,7vw,100px);
  align-items:end;
  margin-bottom:48px;
}
.client-download-heading h2 { font-size:clamp(46px,5.6vw,78px); line-height:.94; letter-spacing:-.065em; }
.client-download-heading h2 em { color:var(--blue); font-style:normal; }
.client-download-heading > p { max-width:520px; margin:0 0 4px; color:var(--muted); font-size:15px; line-height:1.65; }
.client-download-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:18px; }
.client-download-card { position:relative; min-height:470px; overflow:hidden; padding:38px; border-radius:36px; }
.client-download-card::before { content:""; position:absolute; inset:auto -12% -45% 28%; height:78%; border-radius:50%; background:rgba(0,168,232,.16); filter:blur(55px); pointer-events:none; }
.client-download-card--incy { background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(159,228,251,.34)); }
.client-download-card--happ { background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(223,240,247,.46)); }
.client-app-top { position:relative; z-index:2; display:flex; align-items:center; gap:18px; }
.client-app-icon { display:grid; width:76px; height:76px; flex:0 0 auto; place-items:center; border:1px solid rgba(255,255,255,.92); border-radius:25px; color:white; background:linear-gradient(145deg,#12bceb,#0878e8); box-shadow:inset 0 1px white,0 17px 34px rgba(0,168,232,.2); font-size:34px; font-weight:820; }
.client-download-card--happ .client-app-icon { color:#dff7ff; background:linear-gradient(145deg,#27343d,#071019); }
.client-app-top small { color:var(--blue-deep); font-size:9px; font-weight:820; letter-spacing:.14em; }
.client-app-top h3 { margin-top:4px; font-size:44px; letter-spacing:-.055em; }
.client-download-card > p { position:relative; z-index:2; max-width:540px; margin:28px 0 25px; color:var(--muted); font-size:15px; line-height:1.6; }
.client-download-card ul { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.client-download-card li { padding:9px 13px; border:1px solid rgba(255,255,255,.9); border-radius:999px; color:#315267; background:rgba(255,255,255,.45); box-shadow:inset 0 1px white; font-size:10px; font-weight:720; }
.client-download-actions { position:absolute; z-index:3; right:38px; bottom:36px; left:38px; display:grid; grid-template-columns:1fr 1fr; gap:9px; align-items:center; }
.client-download-actions .button { min-width:0; padding-inline:16px; }
.client-more { grid-column:1 / -1; justify-self:start; margin-top:7px; color:var(--blue-deep); font-size:11px; font-weight:760; }
.client-download-foot { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:21px; color:var(--muted); font-size:12px; }
.client-download-foot a { color:var(--blue-deep); font-weight:760; }

/* The Hub close control follows the same circular geometry as its plus trigger. */
.hub-close { position:relative; flex:0 0 auto; border-radius:50% !important; font-size:0 !important; }
.hub-close::before,.hub-close::after { content:""; position:absolute; left:50%; top:50%; width:15px; height:2px; border-radius:2px; background:var(--blue-deep); translate:-50% -50%; }
.hub-close::before { rotate:45deg; }
.hub-close::after { rotate:-45deg; }

@media (max-width:760px) {
  .client-download-heading { grid-template-columns:1fr; gap:20px; margin-bottom:31px; text-align:left; }
  .client-download-heading h2 { font-size:clamp(43px,13vw,61px); }
  .client-download-heading > p { font-size:14px; }
  .client-download-grid { grid-template-columns:1fr; gap:13px; }
  .client-download-card { min-height:500px; padding:27px 24px; border-radius:29px; }
  .client-app-icon { width:66px; height:66px; border-radius:22px; }
  .client-app-top h3 { font-size:38px; }
  .client-download-actions { right:24px; bottom:25px; left:24px; grid-template-columns:1fr; }
  .client-download-actions .button { width:100%; min-height:48px; }
  .client-more { justify-self:center; margin-top:3px; }
  .client-download-foot { align-items:flex-start; flex-direction:column; padding-inline:4px; }
}

/* Mobile performance profile: stable viewport, static touch grid, cheaper glass. */
@media (max-width:720px), (hover:none) and (pointer:coarse) {
  .pixel-intro { height:100svh !important; min-height:100svh !important; }
  #pixel-display { height:100svh !important; pointer-events:none; touch-action:pan-y; will-change:auto; }
  .kinetic-grid-canvas,.site-grid-canvas { pointer-events:none; touch-action:pan-y; }
  .hero { margin-top:0 !important; padding-top:105px !important; }
  .ambient__wash { animation:none !important; filter:none; }
  .ambient__mesh { animation:none !important; }
  .ambient__pixels span { animation-duration:18s !important; box-shadow:none; }
  .glass-panel,.glass-nav,.button,.nav-hub,.text-action,.lumo-hub,.faq-list,.plan-price,.plan-options,.hub-tabs,.download-card {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .glass-panel::after,.button::before,.nav-hub::before,.text-action::before,.download-card button::before,.final-cta::before {
    animation:none !important;
  }
  .hero-orbit--two,.speed-graph i,.final-cta,.final-cta::after,.final-cta .button,.hero-lumi-aura,.platform-symbol,.glass-glint {
    animation:none !important;
  }
  .faq details { will-change:auto; }
  .lumi-question-display { will-change:auto; }
  .hub-content { overflow:hidden !important; }
  .hub-pane { overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .hub-pane[data-hub-pane="faq"] { overflow-y:auto !important; }
  .trust-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px 0; }
  .trust-strip > p { grid-column:1 / -1 !important; }
  .trust-strip > div,.trust-strip > div:last-child { grid-column:auto !important; min-width:0; padding-left:14px; }
  .why-us,.plans,.apps,.service-marquee-section,.lumi-section,.reviews,.faq,.final-cta {
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

/* Thermal profile for phones. Every rule here removes a permanently running
   compositor job: looping gradient animations, live backdrop blur and the
   promoted layers they drag along. Layout and colour stay identical. */
@media (max-width:720px), (hover:none) and (pointer:coarse) {
  .button--primary,
  .final-cta .button,
  .ambient__pixels span,
  .pixel-action-field i,
  .intro-shader__wash,
  .intro-shader__wave,
  .intro-shader__wave--blue,
  .intro-shader__wave--grey,
  .intro-shader__halftone,
  .platform-symbol,
  .hero-orbit,
  .hero-orbit--one,
  .hero-lumi-aura,
  .nav-liquid-indicator,
  .plan-liquid-indicator,
  .auth-liquid-indicator,
  .hub-liquid-layer,
  .lumi-question-display {
    animation:none !important;
  }
  .metric-glass,
  .device-list,
  .payment-list,
  .link-output,
  .link-generator,
  .account-apps,
  .testimonial-stage,
  .client-download-card,
  .hub-session,
  .hub-tabs,
  .toast,
  .profile-avatar {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .intro-shader__wash,
  .intro-shader__wave { filter:none !important; }
  .pixel-action-field i { opacity:calc(var(--po) * .5) !important; }
  .ambient__pixels span,
  .intro-shader__halftone,
  .hero-lumi-aura,
  .lumi-question-display { will-change:auto !important; }
}

/* Temporary Telegram key: a self-serve, no-account escape hatch. */
.temp-key { display:grid; grid-template-columns:1fr .85fr; gap:clamp(38px,5vw,72px); align-items:center; padding-top:150px; }
.temp-key-copy h2 { font-size:clamp(42px,4.6vw,62px); }
.temp-key-copy h2 em { color:var(--blue); font-style:normal; }
.temp-key-copy > p { max-width:520px; margin:24px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.temp-key-notes { display:grid; gap:10px; margin:26px 0 0; padding:0; list-style:none; color:var(--muted); font-size:13px; }
.temp-key-notes li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:start; line-height:1.5; }
.temp-key-notes li::before { content:"→"; color:var(--blue); font-weight:800; }
.temp-key-panel { display:grid; gap:16px; padding:clamp(24px,3vw,34px); border-radius:var(--radius-sm); }
.temp-key-idle { display:grid; gap:12px; justify-items:center; }
.temp-key-idle .button { width:100%; }
.temp-key-idle small { color:var(--muted); font-size:11px; }
.temp-key-result { display:grid; gap:12px; }
.temp-key-timer { display:flex; align-items:center; gap:9px; margin:0; color:var(--shadow); font-size:12px; font-weight:700; }
.temp-key-timer b { margin-left:auto; color:var(--blue-deep); font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.temp-key-result > label { color:var(--muted); font-size:10px; font-weight:700; }
.temp-key-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.temp-key-field input { min-width:0; height:48px; padding:0 13px; border:1px solid rgba(45,42,50,.09); border-radius:14px; outline:none; color:var(--shadow); background:rgba(255,255,255,.8); font-size:11px; }
.temp-key-field .temp-key-copy-button { padding:0 17px; border:0; color:white; background:var(--shadow); cursor:pointer; font-size:10px; font-weight:700; }
.temp-key-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.temp-key-actions .button { min-height:46px; padding-inline:14px; gap:7px; font-size:11px; }
.temp-key-hint { color:var(--muted); font-size:10px; line-height:1.5; }
.temp-key-error { margin:0; color:#a73b47; font-size:11px; line-height:1.5; }
.temp-key-panel.is-expired .temp-key-timer { color:var(--muted); }
.temp-key-panel.is-expired .temp-key-timer b { color:var(--muted); }
.temp-key-panel.is-expired .status-dot { background:#c6535f; box-shadow:0 0 0 5px rgba(198,83,95,.12); }
.temp-key-panel.is-expired .temp-key-field input,
.temp-key-panel.is-expired .temp-key-actions { opacity:.5; }

@media (max-width:960px) {
  .temp-key { grid-template-columns:1fr; padding-top:115px; }
}
@media (max-width:520px) {
  .temp-key-actions { grid-template-columns:1fr; }
  .temp-key-field { grid-template-columns:1fr; }
  .temp-key-field .temp-key-copy-button { min-height:42px; border-radius:999px; }
}

/* Real app icons replace the placeholder letters, so the tile is the artwork. */
.client-app-icon { overflow:hidden; padding:0; background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 17px 34px rgba(45,42,50,.16); }
.client-download-card--happ .client-app-icon { background:none; }
.client-app-icon img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* The caption under the avatar must not drag the heading off the avatar's
   centre line, so it hangs below instead of adding height. */
.profile-avatar-picker { position:relative; gap:0; }
.profile-avatar-picker small { position:absolute; left:50%; top:100%; margin-top:6px; translate:-50% 0; white-space:nowrap; }

/* The bullets now sit under the button that produces the key. */
.temp-key-idle .temp-key-notes { justify-self:stretch; margin:6px 0 0; font-size:12px; }
.temp-key-idle .temp-key-notes li { gap:10px; }

/* Nav buttons: one size and one arrangement everywhere Menu is visible.
   Menu used to drop a step at 720px (68x42 -> 61x40, 12px -> 11px) while the
   Hub stayed 48 tall, and the order only flipped below 900px, so the header
   looked different on a phone, a tablet and a small laptop. */
@media (max-width:1040px) {
  .glass-nav .nav-toggle {
    order:2;
    /* The auto margin used to sit on the Hub, so all the free space opened up
       after Menu and left it crowding the wordmark. */
    margin-left:auto;
    min-width:68px;
    min-height:48px;
    padding:0 15px;
    font-size:12px;
  }
  /* The 8px reserved on the right of the Hub was the last of the slack on a
     320px screen; the bar's own padding already keeps it off the edge. */
  .glass-nav .nav-hub {
    order:3;
    margin-left:10px !important;
    margin-right:0;
    min-height:48px;
  }
}

@media (max-width:420px) {
  /* The buttons keep their full size on phones, so the width has to come from
     somewhere else: at 360px the bar held 140 + 68 + 98 in 319, which left
     Menu touching the wordmark. The VPN tag yields — the wordmark alone
     already reads as the brand. */
  .glass-nav .brand > small { display:none; }
}

@media (max-width:350px) {
  /* 320px is the one width where the bar has no slack left at all, so the
     wordmark scales down a step rather than the buttons. */
  .glass-nav { padding-left:10px; }
  .glass-nav .brand-wordmark { width:52px; }
  .glass-nav .brand-wordmark > img { height:100%; }
}

/* The scroll hint nudges the arrow only; the whole pill used to shift, which
   read as a glitch on phones where the pill is the only thing on screen. */
.intro-scroll-liquid i { animation:liquidArrow 2.4s ease-in-out infinite; }
@media (max-width:720px), (hover:none) and (pointer:coarse) {
  .intro-scroll-liquid { animation:none !important; }
  .intro-scroll-liquid::before { animation:none !important; }
}

/* Plans inside the profile, so renewing never leaves the account page. */
.account-billing { display:flex; flex-wrap:wrap; gap:6px; }
/* Переключатель периода в кабинете работает как конфигуратор на главной:
   под кнопками ездит стеклянная пилюля, а не перекрашивается фон. */
.account-billing { position:relative; isolation:isolate; }
.account-liquid-indicator {
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  display:block;
  width:var(--account-w,100px);
  height:var(--account-h,38px);
  border:1px solid rgba(255,255,255,.96);
  border-radius:999px;
  background:linear-gradient(138deg,rgba(255,255,255,.80),rgba(190,238,253,.45),rgba(255,255,255,.54));
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.13),0 10px 25px rgba(0,168,232,.11);
  backdrop-filter:blur(9px) saturate(190%);
  -webkit-backdrop-filter:blur(9px) saturate(190%);
  transform:translate3d(var(--account-x,0),var(--account-y,0),0);
  opacity:0;
  pointer-events:none;
  transition:transform .56s cubic-bezier(.18,.82,.2,1),width .56s cubic-bezier(.18,.82,.2,1),height .56s cubic-bezier(.18,.82,.2,1);
}
.account-billing.is-ready .account-liquid-indicator { opacity:1; }
.account-period { position:relative; z-index:2; min-height:38px; padding:0 15px; border:1px solid transparent; border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; font-weight:700; transition:color .28s ease; }
.account-period:hover { color:var(--shadow); }
.account-period.active { color:var(--blue-deep); }
.account-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.account-plan { display:grid; align-content:start; gap:9px; padding:24px 22px; border-radius:25px; }
.account-plan h3 { margin:0; font-size:22px; letter-spacing:-.02em; }
.account-plan-devices { margin:0; color:var(--blue-deep); font-size:11px; font-weight:750; }
/* Отвязка одного устройства: красным — как и всё разрушающее в интерфейсе. */
.device-list .device-forget { min-height:38px; padding:0 16px; border-color:rgba(167,68,60,.2); border-radius:999px; color:#a7443c; background:rgba(167,68,60,.06); font-size:12px; font-weight:700; }
.device-list .device-forget:hover { color:white; background:#a7443c; border-color:#a7443c; }
.device-list .device-forget[disabled] { opacity:.5; cursor:default; }

/* Селектор тарифа в админке стоит рядом с полем «Продлить на». */
.admin-actions select { min-height:34px; margin-left:6px; padding:0 8px; border:1px solid rgba(45,42,50,.12); border-radius:9px; background:rgba(255,255,255,.7); font-size:11px; }

/* Привязка Telegram: карточка того же вида, что и панель временного ключа. */
.tg-sync { display:grid; gap:18px; padding:26px; border-radius:25px; }
.tg-sync-state { display:flex; align-items:center; gap:4px; margin:0; font-size:12px; font-weight:700; }
.tg-sync-state .status-dot { background:#c0c0c6; box-shadow:0 0 0 5px rgba(45,42,50,.06); }
.tg-sync.is-linked .status-dot { background:#37c785; box-shadow:0 0 0 5px rgba(55,199,133,.12); }
.tg-sync.is-waiting .status-dot { background:var(--blue); box-shadow:0 0 0 5px rgba(0,168,232,.14); }
.tg-sync-text { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.tg-sync-actions { display:flex; flex-wrap:wrap; gap:10px; }
.tg-sync-error { margin:0; color:#c0453c; font-size:11px; }
@media (max-width:720px) { .tg-sync-actions .button { width:100%; } }

.account-plan-price { display:flex; align-items:baseline; gap:4px; margin:6px 0 2px; }
.account-plan-price strong { font-size:31px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
/* Window for the rolling price, matching .monthly-price on the home page: one
   row tall, clipped, with the edges faded so digits arrive and leave softly.
   Without a wheel inside it falls back to a plain baseline-aligned number. */
/* Выравнивание по нижней грани, а не по базовой линии: у грид-контейнера
   базовая линия берётся из содержимого, поэтому с барабаном внутри она
   уезжала и знак рубля прыгал на 18px вверх на всё время прокрутки. */
.account-plan-price { align-items:flex-end; }
.account-plan-price:has(.price-wheel) > span { display:none; }

/* Бокс одинаковый и с барабаном, и без него. Раньше он переключался между
   inline-flex и inline-grid, а при overflow:hidden это меняет базовую линию —
   знак рубля прыгал на 18px вверх на время прокрутки и уезжал вбок.
   min-width держит ширину при переходе с двузначной цены на четырёхзначную. */
.account-plan-price strong { display:inline-grid; align-items:start; justify-items:start; overflow:hidden; height:1.18em; min-width:4ch; vertical-align:bottom; white-space:nowrap; mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); }
.account-plan-price span { color:var(--muted); font-size:13px; font-weight:650; }
.account-plan ul { display:grid; gap:7px; margin:0 0 6px; padding:0; list-style:none; color:var(--muted); font-size:11px; }
.account-plan li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:start; line-height:1.45; }
.account-plan li::before { content:"✓"; color:var(--blue); font-weight:800; }
.account-plan .button { width:100%; min-height:46px; font-size:12px; }
.account-plan-note { display:block; margin-top:12px; color:var(--muted); font-size:10px; }

@media (max-width:1080px) { .account-plan-grid { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .dashboard-section-head { flex-wrap:wrap; gap:14px; }
  .account-plan { padding:21px 19px; }
}

/* Profile entry: a pill like every other button, and a label that is actually
   readable — `.hub-session a` was overriding the size down to 9px. */
.hub-session .hub-open-account,
.hub-open-account {
  border-radius:999px;
  min-height:52px;
  font-size:14px;
  font-weight:780;
  letter-spacing:-.01em;
}
.hub-session .hub-open-account span { font-size:15px; }
.text-action { border-radius:999px; }

/* Step state in the Hub guide: done, current, still ahead. */
.hub-steps li { transition:border-color .25s ease,background .25s ease,opacity .25s ease; }
.hub-steps li:not(.is-current):not(.is-done) { opacity:.55; }
.hub-steps li.is-done b { color:white; background:var(--blue); }
.hub-steps li.is-done span { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(45,42,50,.3); }
.hub-steps li.is-current { border-color:rgba(0,168,232,.45); background:rgba(0,168,232,.09); }
.hub-steps li.is-current b { color:white; background:var(--blue-deep); box-shadow:0 6px 16px rgba(0,168,232,.28); }
.hub-steps li.is-current span { color:var(--shadow); font-weight:750; }

/* A pending order is visibly unfinished until the payment settles. */
.payment-list > div.is-pending i { color:#b8860b; }
.payment-list > div.is-pending::after { content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#e0a92a; box-shadow:0 0 0 4px rgba(224,169,42,.14); }
.payment-list > div.is-pending { position:relative; padding-left:16px; }

/* Admin panel. Deliberately plain: it is an operational tool, so density and
   scanability matter more than atmosphere. */
.page-admin .admin-gate { display:grid; min-height:100dvh; place-items:center; padding:24px; }
.admin-gate-card { max-width:460px; padding:36px 34px; border-radius:var(--radius-sm); text-align:left; }
.admin-gate-card h1 { margin:8px 0 12px; font-size:34px; }
.admin-gate-text { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.6; }
.admin-gate-actions { display:flex; flex-wrap:wrap; gap:8px; }

.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:34px; }
.admin-search { display:flex; gap:7px; }
.admin-search input { min-width:min(340px,60vw); height:46px; padding:0 15px; border:1px solid rgba(45,42,50,.1); border-radius:999px; outline:none; color:var(--shadow); background:rgba(255,255,255,.8); font-size:12px; }
.admin-search .button { min-height:46px; padding-inline:20px; font-size:12px; }
.admin-empty { margin:0; padding:26px; color:var(--muted); font-size:12px; }

.admin-users, .admin-payments { padding:8px 22px; border-radius:25px; }
.admin-row { display:grid; grid-template-columns:96px minmax(0,1.4fr) minmax(0,1fr) 96px 108px; gap:14px; min-height:58px; align-items:center; border-bottom:1px solid rgba(45,42,50,.07); font-size:11px; }
.admin-row:last-child { border-bottom:0; }
.admin-row i { font-style:normal; font-weight:700; }
.admin-row i.status-paid { color:#229b64; }
.admin-row i.status-pending { color:#b8860b; }

.admin-user { border-bottom:1px solid rgba(45,42,50,.07); }
.admin-user:last-child { border-bottom:0; }
.admin-user summary { display:grid; grid-template-columns:minmax(0,1.4fr) 140px 130px 92px; gap:14px; min-height:62px; align-items:center; cursor:pointer; font-size:11px; list-style:none; }
.admin-user summary::-webkit-details-marker { display:none; }
.admin-user summary span, .admin-user summary em { color:var(--muted); font-style:normal; }
.admin-user[open] summary { color:var(--blue-deep); }
.admin-user-body { padding:6px 0 22px; }
.admin-user-body dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0 0 16px; font-size:11px; }
.admin-user-body dt { color:var(--muted); }
.admin-user-body dd { margin:0; }
.admin-subs { display:grid; gap:7px; margin:0 0 16px; padding:0; list-style:none; }
.admin-subs li { display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center; padding:11px 14px; border:1px solid rgba(255,255,255,.8); border-radius:15px; background:rgba(255,255,255,.5); font-size:11px; }
.admin-subs li span { color:var(--muted); }
.admin-subs li.admin-none { color:var(--muted); }
.admin-mini { margin-left:auto; padding:6px 12px; border:1px solid rgba(0,168,232,.3); border-radius:999px; color:var(--blue-deep); background:rgba(0,168,232,.07); cursor:pointer; font-size:10px; font-weight:700; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.admin-actions label { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:11px; }
.admin-days { width:78px; height:42px; padding:0 11px; border:1px solid rgba(45,42,50,.1); border-radius:999px; outline:none; color:var(--shadow); background:rgba(255,255,255,.85); font-size:12px; text-align:center; }
.admin-actions .button { min-height:42px; padding-inline:17px; font-size:11px; }
.admin-disable { color:#a73b47 !important; }

@media (max-width:900px) {
  .admin-row, .admin-user summary { grid-template-columns:1fr 1fr; gap:6px 12px; }
  .admin-search { flex-direction:column; }
  .admin-search input { min-width:0; width:100%; }
}

/* Admin entry sits apart from the ordinary sections it is not part of. */
/* Админка вынесена из навигации в свою плашку: пилюля-индикатор ездит
   только по разделам страницы, а это ссылка на другую страницу. Стекло и
   размер текста повторяют панель навигации выше. */
.dashboard-admin-plate {
  margin-top:10px;
  padding:5px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:21px;
  background:linear-gradient(140deg,rgba(255,255,255,.28),rgba(194,239,253,.12));
  box-shadow:inset 0 1px white,inset 0 -1px rgba(0,168,232,.1);
  backdrop-filter:blur(15px) saturate(180%);
  -webkit-backdrop-filter:blur(15px) saturate(180%);
}
.dashboard-admin-plate[hidden] { display:none; }
.dashboard-admin-link {
  display:block;
  padding:14px;
  border-radius:13px;
  color:var(--blue-deep);
  font-size:12px;
  font-weight:650;
  transition:color .28s ease,background .28s ease;
}
.dashboard-admin-link:hover { color:var(--shadow); background:rgba(255,255,255,.55); }


/* Admin: support queue, one-off actions and broadcast. */
.admin-subhead { margin:16px 0 4px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.admin-row--support { grid-template-columns:64px minmax(0,1.4fr) minmax(0,1fr) auto; }
.admin-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.admin-tool { display:grid; gap:11px; align-content:start; padding:24px 22px; border-radius:25px; }
.admin-tool h3 { margin:0; font-size:19px; }
.admin-tool > p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.admin-tool code { padding:2px 6px; border-radius:6px; background:rgba(0,168,232,.1); color:var(--blue-deep); font-size:10px; }
.admin-tool label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.admin-tool input { height:44px; padding:0 15px; border:1px solid rgba(45,42,50,.1); border-radius:999px; outline:none; color:var(--shadow); background:rgba(255,255,255,.85); font-size:12px; }
.admin-tool .button { min-height:44px; margin-top:3px; font-size:12px; }
.admin-broadcast { display:grid; gap:12px; padding:24px 22px; border-radius:25px; }
.admin-audience { display:flex; flex-wrap:wrap; gap:6px; }
.admin-broadcast textarea { padding:14px 16px; border:1px solid rgba(45,42,50,.1); border-radius:20px; outline:none; color:var(--shadow); background:rgba(255,255,255,.85); font:inherit; font-size:12px; line-height:1.55; resize:vertical; }
.admin-broadcast-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-broadcast-actions .button { min-height:44px; font-size:12px; }
.admin-broadcast-confirm { display:grid; gap:10px; padding:16px 18px; border:1px solid rgba(0,168,232,.3); border-radius:20px; background:rgba(0,168,232,.07); }
.admin-broadcast-preview { margin:0; color:var(--shadow); font-size:12px; font-weight:700; }
.admin-broadcast-confirm .button { min-height:44px; font-size:12px; }

/* The user list is long, so it stays collapsed until asked for. */
/* Оба сворачиваемых списка админки — пользователи и платежи — должны
   выглядеть одинаково, поэтому правило общее. */
.admin-users-panel,.admin-payments-panel { display:grid; gap:12px; }
.admin-users-toggle,.admin-payments-toggle { min-height:44px; padding-inline:20px; font-size:12px; }