/* ==========================================================================
   Prasat IT & Digital Solutions — design system
   Colours, type and logo follow the Brand Package v1.0 (Claude Design, Oct 2026):
   Deep Navy #102858 · Primary Blue #184878 · Accent Sky #1A89C5 · Secondary Blue #2875AC · White.
   Text accents use tints/shades of Accent Sky so they pass WCAG AA on navy (dark) and on white (light).
   ========================================================================== */

:root {
  --navy: #102858;
  --blue: #184878;
  --sky: #1a89c5;
  --blue-2: #2875ac;

  --bg: #0c1d3f;
  --bg-2: #0e224b;
  --surface: #112d5d;
  --surface-2: #133565;
  --border: rgba(159, 182, 206, 0.16);
  --border-strong: rgba(159, 182, 206, 0.30);
  --text: #f6f9fc;
  --muted: #b4c4d6;
  --dim: #9fb6ce;

  --accent: #53a6d4;          /* Accent Sky lightened: 6.2:1 on the navy background */
  --accent-2: #9fc4de;
  --accent-rgb: 83, 166, 212;
  --accent-2-rgb: 159, 196, 222;
  --brand-rgb: var(--accent-rgb);
  --accent-ink: #9fc4de;      /* accent text on accent-tinted chips (AA on the tint) */

  --ok: #34d399;
  --bad: #f43f5e;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px -20px rgba(4, 12, 30, 0.65);
  --max: 1200px;

  /* Type "Modern Tech" (2026-10-05): Space Grotesk headings, IBM Plex Sans text, Noto Sans Khmer for all Khmer.
     The logo name keeps Montserrat so it matches the logo files. */
  --font: "IBM Plex Sans", "Noto Sans Khmer", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Space Grotesk", "Noto Sans Khmer", "IBM Plex Sans", system-ui, sans-serif;
  --font-km: "Noto Sans Khmer", system-ui, sans-serif;
  --font-logo: "Montserrat", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Channels for translucent layers, so light mode can swap them */
  --bg-rgb: 12, 29, 63;
  --surface-rgb: 17, 45, 93;
  --tint-rgb: 255, 255, 255;
  --on-accent: #0c1d3f;
  color-scheme: dark;
}

/* ---------- Service colours ----------
   The brand (logo, header, footer, header button) stays Accent Sky. Each service keeps its own colour family from
   before the CI, so every page feels different: web violet→pink, networking cyan→blue, virtualization green→cyan,
   security rose→amber, Windows blue→sky, business amber→rose. --svc-* is the main colour (AA on cards and as
   button text in both themes), --svc2-* the second gradient colour (headlines, meters). Home/menu cards get theirs
   by link (so the old --c values in the HTML and scripts don't matter); each service page by its body class
   theme-web|net|virt|sec|win|biz. Demo screens are dark in both themes, so they always get the dark-theme values. */
:root, [data-theme="light"] :is(.panel, .browser, .cam-feed) {
  --svc-web: 167, 139, 250; --svc-net: 34, 211, 238;  --svc-virt: 52, 211, 153;
  --svc-sec: 246, 103, 128; --svc-win: 92, 151, 248;  --svc-biz: 245, 158, 11;
  --svc2-web: 244, 114, 182; --svc2-net: 59, 130, 246; --svc2-virt: 34, 211, 238;
  --svc2-sec: 245, 158, 11;  --svc2-win: 56, 189, 248; --svc2-biz: 251, 113, 133;
}
:root[data-theme="light"] {
  --svc-web: 124, 58, 237;  --svc-net: 14, 116, 144;  --svc-virt: 4, 120, 87;
  --svc-sec: 190, 18, 60;   --svc-win: 37, 99, 235;   --svc-biz: 180, 83, 9;
  --svc2-web: 219, 39, 119; --svc2-net: 37, 99, 235;  --svc2-virt: 14, 116, 144;
  --svc2-sec: 215, 118, 6;  --svc2-win: 2, 132, 199;  --svc2-biz: 225, 29, 72;
}
:is(.svc-card, .live-card, .menu a)[href^="/web"]              { --c: var(--svc-web) !important; }
:is(.svc-card, .live-card, .menu a)[href^="/networking"]       { --c: var(--svc-net) !important; }
:is(.svc-card, .live-card, .menu a)[href^="/virtualization"]   { --c: var(--svc-virt) !important; }
:is(.svc-card, .live-card, .menu a)[href^="/security"]         { --c: var(--svc-sec) !important; }
:is(.svc-card, .live-card, .menu a)[href^="/windows-server"]   { --c: var(--svc-win) !important; }
:is(.svc-card, .live-card, .menu a)[href^="/business-support"] { --c: var(--svc-biz) !important; }
:is(.work-card, .case) { --c: var(--brand-rgb) !important; }
.theme-web  :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-web);  --svc2: var(--svc2-web); }
.theme-net  :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-net);  --svc2: var(--svc2-net); }
.theme-virt :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-virt); --svc2: var(--svc2-virt); }
.theme-sec  :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-sec);  --svc2: var(--svc2-sec); }
.theme-win  :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-win);  --svc2: var(--svc2-win); }
.theme-biz  :is(main, .panel, .browser, .cam-feed) { --svc: var(--svc-biz);  --svc2: var(--svc2-biz); }
body[class*="theme-"] :is(main, main .panel, main .browser, main .cam-feed) {
  --accent: rgb(var(--svc)); --accent-rgb: var(--svc); --accent-2: rgb(var(--svc2)); --accent-2-rgb: var(--svc2);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Language switching ----------
   Every bilingual string is written as <span class="en">…</span><span class="km">…</span>. */
body:not(.lang-km) .km { display: none !important; }
body.lang-km .en { display: none !important; }
body.lang-km { font-family: var(--font-km); line-height: 1.85; }
body.lang-km h1, body.lang-km h2, body.lang-km h3, body.lang-km h4 { font-family: var(--font-km); line-height: 1.5; letter-spacing: 0; }
body.lang-km h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }

/* ---------- Light mode ----------
   <html data-theme="light|dark"> is set before first paint by the inline script in each page's <head>
   (saved choice, otherwise the device setting). Demo screens (.panel, .browser, .cam-feed) stay dark navy. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f9fc;
  --bg-2: #eef2f7;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --border: rgba(16, 40, 88, 0.12);
  --border-strong: rgba(16, 40, 88, 0.22);
  --text: #102858;
  --muted: #5a6b85;
  --dim: #5a6b85;
  --accent: #1674a7;          /* Accent Sky darkened: 5.1:1 on white */
  --accent-2: #184878;
  --accent-rgb: 22, 116, 167;
  --accent-2-rgb: 24, 72, 120;
  --accent-ink: #184878;
  --ok: #047857;
  --bad: #be123c;
  --shadow: 0 20px 50px -24px rgba(16, 40, 88, 0.28);
  --bg-rgb: 246, 249, 252;
  --surface-rgb: 255, 255, 255;
  --tint-rgb: 16, 40, 88;
  --on-accent: #ffffff;
}
[data-theme="light"] :is(.panel, .browser, .cam-feed) {
  color-scheme: dark;
  --bg: #0c1d3f; --bg-2: #0e224b; --surface: #112d5d; --surface-2: #133565;
  --border: rgba(159, 182, 206, 0.16); --border-strong: rgba(159, 182, 206, 0.30);
  --text: #f6f9fc; --muted: #b4c4d6; --dim: #9fb6ce;
  --accent: #53a6d4; --accent-2: #9fc4de; --accent-rgb: 83, 166, 212; --accent-2-rgb: 159, 196, 222; --accent-ink: #9fc4de;
  --ok: #34d399; --bad: #f43f5e;
  --bg-rgb: 12, 29, 63; --surface-rgb: 17, 45, 93; --tint-rgb: 255, 255, 255; --on-accent: #0c1d3f;
  color: var(--text);
}
[data-theme="light"] .card { background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
[data-theme="light"] .hero-photo { opacity: .75; }
/* Extra light band at the top so the menu stays readable over the darker part of the photo */
[data-theme="light"] .hero-photo::after {
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), .92) 0, rgba(var(--bg-rgb), 0) 160px),
    linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), .86) 32%, rgba(var(--bg-rgb), .2) 62%, rgba(var(--bg-rgb), .35) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 35%);
}
[data-theme="light"] .hero-canvas { opacity: .6; }
@media (max-width: 960px) {
  [data-theme="light"] .hero-photo { opacity: .35; }
  [data-theme="light"] .hero-photo::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .7) 0%, rgba(var(--bg-rgb), .88) 55%, var(--bg) 100%); }
}
/* Light mode: heroes that set --photo-light use a bright daylight version of their photo instead of whitening the
   dark one, so it needs only a soft fade behind the headline. Dark mode keeps the original photo. */
[data-theme="light"] .hero-photo[style*="--photo-light"] { background-image: var(--photo-light) !important; opacity: 1; }
[data-theme="light"] .hero-photo[style*="--photo-light"]::after {
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), .85) 0, rgba(var(--bg-rgb), 0) 140px),
    linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .6) 36%, rgba(var(--bg-rgb), 0) 64%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%);
}
@media (max-width: 960px) {
  [data-theme="light"] .hero-photo[style*="--photo-light"] { opacity: .6; }
  [data-theme="light"] .hero-photo[style*="--photo-light"]::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .82) 55%, var(--bg) 100%); }
}

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--border-strong); background: rgba(var(--tint-rgb), .03); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (max-width: 420px) {
  .nav-actions { gap: 6px; }
  .lang-toggle button { min-width: 40px; padding: 6px 8px; }
}
@media (max-width: 520px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand .logo { height: 28px; }
  .site-header .brand-text strong { font-size: .82rem; letter-spacing: .02em; line-height: 1.05; }
  .site-header .brand-text .hl { display: block; }   /* "PRASAT" over "DIGITAL": the one-line name doesn't fit beside the buttons */
}
@media (max-width: 370px) { .site-header .brand-text { display: none; } }   /* very small phones: the mark alone, as the CI allows */

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
body.lang-km .eyebrow { letter-spacing: .02em; font-size: .9rem; }
/* The logo's 4 tiers as a mask, in whatever colour the element has (section labels, process steps) */
:root { --tiers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 7 48 40'%3E%3Crect x='25' y='9' width='14' height='6'/%3E%3Crect x='20' y='18' width='24' height='6'/%3E%3Crect x='15' y='27' width='34' height='6'/%3E%3Crect x='10' y='36' width='44' height='6'/%3E%3C/svg%3E"); }
.eyebrow::before {
  content: ""; width: 19px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--tiers) center / contain no-repeat; mask: var(--tiers) center / contain no-repeat;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 640px; }
.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Background decoration ---------- */
.bg-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
}
.glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 65%);
  filter: blur(20px); pointer-events: none; z-index: 0;
}
.alt-bg { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .98rem; line-height: 1.2;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .7);
}
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(var(--accent-rgb), .9); }
.btn-ghost { border-color: var(--border-strong); background: rgba(var(--tint-rgb), .03); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(var(--bg-rgb), .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
/* The blur makes the header the containing block of the fixed phone menu, which then gets cut to the header's
   height once the page is scrolled. While the menu is open the header is solid instead. */
.nav-open .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--bg-rgb), .98); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; }
/* PRASAT DIGITAL lockup: the 4-tier server prasat (inline SVG from main.js) + the name. Tiers go navy→sky on light
   backgrounds and white→light sky on navy; slots and status lights take the opposite colour. Never per-page colours. */
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-logo); }
.brand .logo { width: auto; height: 34px; flex: none; overflow: visible;
  --t0: #53a6d4; --t1: #7fb8dc; --t2: #b3d3ea; --t3: #ffffff; --led: #102858; --slot-op: .45; }
[data-theme="light"] .brand .logo { --t0: #1a89c5; --t1: #2875ac; --t2: #184878; --t3: #102858; --led: #ffffff; --slot-op: .55; }
.logo .t0 .tb { fill: var(--t0); } .logo .t1 .tb { fill: var(--t1); } .logo .t2 .tb { fill: var(--t2); } .logo .t3 .tb { fill: var(--t3); }
.logo .slot { fill: var(--led); opacity: var(--slot-op); }
.logo .led { fill: var(--led); }
/* Home page, first visit per session: the tiers stack up from the base, then the lights blink once (main.js adds
   .logo-intro). Slow on purpose; decorative, so skipped with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .logo-intro .site-header .logo .tier { animation: tierIn .6s cubic-bezier(.2, .7, .2, 1) both; }
  .logo-intro .site-header .logo .t3 { animation-delay: .25s; }
  .logo-intro .site-header .logo .t2 { animation-delay: .65s; }
  .logo-intro .site-header .logo .t1 { animation-delay: 1.05s; }
  .logo-intro .site-header .logo .t0 { animation-delay: 1.45s; }
  .logo-intro .site-header .logo .led { animation: ledBlink 1.2s ease-in-out 2.3s 1 both; }
}
@keyframes tierIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes ledBlink { 0%, 100% { fill: var(--led); } 35%, 65% { fill: #5eead4; } }
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; text-transform: uppercase; }
.brand-text strong { font-size: 1.14rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.brand-text .hl { color: var(--accent); }
.brand-text small { font: 600 .6rem var(--font); color: var(--muted); letter-spacing: .2em; margin-top: 4px; white-space: nowrap; }
.site-header .brand-text small { display: none; }   /* tagline only in the footer: the header has no room */
@media (min-width: 1101px) and (max-width: 1220px) {   /* full menu just appeared: a smaller logo keeps clear of it */
  .site-header .brand { gap: 9px; }
  .site-header .brand .logo { height: 28px; }
  .site-header .brand-text strong { font-size: .95rem; letter-spacing: .01em; }
}
@media (min-width: 1101px) and (max-width: 1140px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand .logo { height: 26px; }
  .site-header .brand-text strong { font-size: .86rem; letter-spacing: 0; }
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li > a, .nav-links > li > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; background: none; border: 0;
  font-size: .94rem; color: var(--muted); transition: color .2s, background .2s;
}
.nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links a.active { color: var(--text); background: rgba(var(--tint-rgb), .05); }
.has-menu { position: relative; }
.has-menu > button svg { width: 14px; height: 14px; transition: transform .2s; }
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  width: 560px; padding: 12px; border-radius: var(--radius);
  background: rgba(var(--surface-rgb), .97); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.has-menu:hover .menu, .has-menu.open .menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.has-menu:hover > button svg, .has-menu.open > button svg { transform: rotate(180deg); }
.menu a { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-sm); transition: background .2s; }
.menu a:hover { background: rgba(var(--tint-rgb), .05); }
.menu .mi-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--c), .14); color: rgb(var(--c)); }
.menu .mi-icon svg { width: 20px; height: 20px; }
.menu strong { display: block; font-size: .94rem; }
.menu small { color: var(--muted); font-size: .8rem; line-height: 1.4; display: block; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; background: rgba(var(--tint-rgb), .03);
}
.lang-toggle button {
  border: 0; background: none; min-width: 44px; min-height: 40px; padding: 6px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--muted);
}
.lang-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.lang-toggle button.km-btn { font-family: var(--font-km); }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: none; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: transform .25s, background .25s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .burger { display: grid; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed; top: 74px; left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 16px 20px 40px;
    background: rgba(var(--bg-rgb), .98); overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease;
  }
  .nav-open .nav-links { transform: none; }
  .nav-links > li > a, .nav-links > li > button { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; border-radius: 12px; }
  .menu { position: static; transform: none; width: auto; grid-template-columns: 1fr; opacity: 1; visibility: visible; display: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 8px; }
  .has-menu.open .menu { display: grid; transform: none; }
  .has-menu:hover .menu { transform: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 150px 0 90px; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero .container { position: relative; z-index: 2; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .85; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-grid.web-hero { grid-template-columns: .8fr 1.2fr; gap: 40px; }
.hero-grid.web-hero > * { min-width: 0; }
@media (min-width: 1200px) { .hero-grid.web-hero > :last-child { margin-right: -72px; } }   /* preview uses some of the side margin */
@media (max-width: 960px) { .hero-grid, .hero-grid.web-hero { grid-template-columns: 1fr; } .hero { min-height: auto; } }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 32px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; margin-bottom: 22px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(var(--tint-rgb), .03); font-size: .85rem; color: var(--muted);
}
.badge b { background: rgba(var(--accent-rgb), .16); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; font-size: .75rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 36px; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.trust-item svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.page-hero { padding: 150px 0 80px; overflow: hidden; }
.breadcrumb { font-size: .85rem; color: var(--dim); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--text); }

/* ---------- Cards ---------- */
.card {
  position: relative; padding: 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), rgba(var(--surface-rgb), .6));
  border: 1px solid var(--border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 24px 50px -24px rgba(var(--accent-rgb), .45); }
.card p { margin-bottom: 0; }
.card .icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .25);
}
.card .icon svg { width: 26px; height: 26px; }
.card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.card li { position: relative; padding-left: 24px; margin: 7px 0; color: var(--muted); font-size: .95rem; }
.card li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 10px; height: 10px; border-radius: 3px; background: rgba(var(--accent-rgb), .25); border: 1px solid var(--accent); }

/* Service cards on the home page — each carries its own colour */
.svc-card { --accent: rgb(var(--c)); --accent-rgb: var(--c); display: flex; flex-direction: column; }
.svc-card .more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--accent); }
.svc-card .more svg { width: 16px; height: 16px; transition: transform .2s; }
.svc-card:hover .more svg { transform: translateX(4px); }
.svc-card::after {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c), .18), transparent 70%); transition: transform .4s ease;
}
.svc-card:hover::after { transform: scale(1.3); }

/* ---------- Photography ----------
   Decorative photos sit behind the hero and on the home service cards.
   Set as backgrounds so a missing file simply falls back to the dark theme. */
.hero-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: center right / cover no-repeat; opacity: .9; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), .86) 32%, rgba(var(--bg-rgb), .2) 62%, rgba(var(--bg-rgb), .35) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 35%);
}
@media (max-width: 960px) {
  .hero-photo { opacity: .55; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .8) 55%, var(--bg) 100%); }
}
.svc-thumb {
  margin: -28px -28px 0; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--border);
  background: rgba(var(--c), .08) center / cover no-repeat; transition: transform .5s ease;
}
.svc-card:hover .svc-thumb { transform: scale(1.03); }
.svc-thumb + .icon { position: relative; z-index: 1; margin-top: -26px; background: linear-gradient(rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .14)), var(--surface); }

/* ---------- Packages ---------- */
.pkg { display: flex; flex-direction: column; }
.pkg .tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.pkg .for { font-size: .88rem; color: var(--dim); margin-bottom: 8px; }
.pkg .btn { margin-top: 22px; align-self: flex-start; }
.pkg.featured { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .1), var(--surface)); }
.pkg.featured::before {
  content: attr(data-flag); position: absolute; top: 18px; right: 18px; font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 56px; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .7);
}
/* Each step "builds the temple": the logo's tiers light up from the base, one more per step */
.step::after {
  content: ""; position: absolute; top: 2px; left: 0; width: 44px; height: 37px;
  background: linear-gradient(0deg, var(--accent) 0 var(--lit, 30%), rgba(var(--accent-rgb), .2) var(--lit, 30%));
  -webkit-mask: var(--tiers) center / contain no-repeat; mask: var(--tiers) center / contain no-repeat;
}
.step:nth-child(2)::after { --lit: 52%; }
.step:nth-child(3)::after { --lit: 75%; }
.step:nth-child(4)::after { --lit: 100%; }

/* ---------- Compare table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: .95rem; vertical-align: top; }
.compare thead th { background: var(--surface-2); font-family: var(--font-display); font-size: 1rem; }
.compare thead th:last-child { color: var(--accent); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { color: var(--text); font-weight: 600; width: 22%; }
.compare td:nth-child(2) { color: var(--dim); }
.compare td:last-child { background: rgba(var(--accent-rgb), .05); }
.x, .v { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; margin-right: 8px; font-weight: 700; vertical-align: -3px; }
.x { background: rgba(244,63,94,.16); color: var(--bad); }
.v { background: rgba(52,211,153,.16); color: var(--ok); }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
@media (max-width: 720px) {
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100% !important; }
  .compare thead { display: none; }
  .compare tr { border-bottom: 1px solid var(--border); }
  .compare td { border: 0; padding: 8px 16px; }
  .compare td:first-child { padding-top: 16px; }
  .compare td:last-child { padding-bottom: 16px; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 28px 22px; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; margin-bottom: 6px; }
.stat > span { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Visual panel (right side of hero / demos) ---------- */
.panel {
  position: relative; border-radius: 22px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(19,29,51,.92), rgba(10,16,32,.92));
  box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb), .06) inset; overflow: hidden;
}
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.panel-bar i { width: 10px; height: 10px; border-radius: 50%; background: #334155; display: inline-block; }
.panel-bar i:nth-child(1) { background: #f43f5e; } .panel-bar i:nth-child(2) { background: #f59e0b; } .panel-bar i:nth-child(3) { background: #34d399; }
.panel-bar .title { margin-left: 8px; font-family: var(--font-mono); }
.panel-body { padding: 20px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ok); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }

/* Toggle / segmented control used by demos */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(var(--surface-rgb), .92); border: 1px solid var(--border-strong); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-wrap: wrap; }
.seg button { border: 0; background: none; min-height: 44px; padding: 8px 14px; border-radius: 999px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.seg button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .18); color: var(--accent-ink); }
.demo-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.demo-note { font-size: .88rem; color: var(--muted); margin: 14px 0 0; min-height: 1.6em; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: 28px; padding: clamp(36px, 6vw, 64px);
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--accent-rgb), .28), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(245,182,66,.18), transparent 50%),
    var(--surface);
  border: 1px solid rgba(var(--accent-rgb), .35);
  display: grid; grid-template-columns: 1.4fr auto; gap: 30px; align-items: center;
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { margin: 0; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 12px; transition: border-color .2s; }
.faq details[open] { border-color: rgba(var(--accent-rgb), .4); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 18px; margin: 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: rgba(var(--bg-rgb), .6); color: var(--text); font: inherit; font-size: .96rem; transition: border-color .2s, box-shadow .2s;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background: rgba(10,24,53,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2397a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.field select option { background: var(--surface); color: var(--text); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .88rem; color: var(--muted); transition: all .2s; cursor: pointer; }
.chip input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .14); color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.contact-list { display: grid; gap: 14px; }
.contact-item { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); transition: border-color .2s, transform .2s; }
.contact-item:hover { border-color: var(--accent); transform: translateX(4px); }
.contact-item .ci-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); flex: none; }
.contact-item .ci-icon svg { width: 22px; height: 22px; }
.contact-item small { display: block; color: var(--dim); font-size: .8rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 64px 0 30px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .95rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 8px 0; }
.site-footer li a { color: var(--muted); font-size: .92rem; }
.site-footer li a:hover { color: var(--text); }
.socials { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--muted); transition: all .2s; }
.socials a:hover { color: var(--text); border-color: var(--accent); background: rgba(var(--accent-rgb), .1); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; color: var(--dim); }

/* Floating Telegram button */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px; background: #1b7cb3; color: #fff; font-weight: 600; font-size: .92rem;
  box-shadow: 0 12px 30px -8px rgba(27,124,179,.7); transition: transform .2s;
}
.fab:hover { transform: translateY(-3px); }
.fab svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .fab span { display: none; } .fab { padding: 14px; } }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 60;
  padding: 12px 20px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--accent);
  font-size: .92rem; opacity: 0; pointer-events: none; transition: all .3s; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; }

/* ==========================================================================
   Page-specific demos
   ========================================================================== */

/* --- Networking topology --- */

/* --- Virtualization cluster --- */
.cluster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.host { border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px; background: rgba(var(--bg-rgb), .5); transition: border-color .4s, background .4s; min-height: 250px; }
.host header { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; margin-bottom: 10px; }
.host header b { font-family: var(--font-mono); font-size: .8rem; }
.host .state { font-size: .72rem; padding: 3px 8px; border-radius: 999px; background: rgba(52,211,153,.14); color: var(--ok); }
.host.down { border-color: var(--bad); background: rgba(244,63,94,.07); }
.host.down .state { background: rgba(244,63,94,.16); color: var(--bad); }
.meter { height: 6px; border-radius: 6px; background: rgba(var(--tint-rgb), .07); overflow: hidden; margin: 4px 0 10px; }
.meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s ease; }
.meter-label { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
.vms { display: grid; gap: 8px; margin-top: 10px; }
.vm { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .07); font-size: .82rem; animation: vmIn .6s ease both; }
.vm svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.vm small { margin-left: auto; color: var(--ok); font-size: .7rem; }
.vm.moving small { color: var(--accent-2); }
@keyframes vmIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .cluster { grid-template-columns: 1fr; } }

/* --- Security radar + quiz --- */
.radar { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 24%, rgba(var(--accent-rgb), .18) 24.3% 24.7%, transparent 25% 49%, rgba(var(--accent-rgb), .18) 49.3% 49.7%, transparent 50% 74%, rgba(var(--accent-rgb), .18) 74.3% 74.7%, transparent 75%),
    radial-gradient(circle, rgba(var(--accent-rgb), .08), transparent 70%);
  border: 1px solid rgba(var(--accent-rgb), .35); overflow: hidden; }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(var(--accent-rgb), .18); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; } .radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--accent-rgb), .45), transparent 60deg); animation: spin 3.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.radar .blip { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: blip 3.5s ease-out infinite; }
.radar .blip.threat { background: var(--bad); box-shadow: 0 0 14px var(--bad); }
@keyframes blip { 0%, 100% { opacity: .15; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.2); } 40% { opacity: .5; transform: scale(1); } }
.radar .shield { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--bg-rgb), .85); border: 1px solid rgba(var(--accent-rgb), .6); color: var(--accent); }
.radar .shield svg { width: 46%; height: 46%; }
.quiz-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.quiz-q:last-of-type { border-bottom: 0; }
.quiz-q p { margin: 0; color: var(--text); font-size: .95rem; }
.yn { display: inline-flex; gap: 6px; flex: none; }
.yn button { border: 1px solid var(--border-strong); background: none; border-radius: 999px; min-width: 56px; min-height: 44px; padding: 6px 14px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.yn button[aria-pressed="true"][data-v="1"] { border-color: var(--ok); color: var(--ok); background: rgba(52,211,153,.12); }
.yn button[aria-pressed="true"][data-v="0"] { border-color: var(--bad); color: var(--bad); background: rgba(244,63,94,.12); }
.score { margin-top: 20px; padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: rgba(var(--bg-rgb), .5); }
.score-bar { height: 10px; border-radius: 10px; background: rgba(var(--tint-rgb), .07); overflow: hidden; margin: 10px 0; }
.score-bar i { display: block; height: 100%; width: 0; border-radius: 10px; transition: width .6s ease, background .6s; }

/* --- CCTV scanning cam --- */
.cam-feed { position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #0a1835, #0e224b); border: 1px solid var(--border-strong); }
.cam-feed .scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .18), transparent); animation: scan 3s ease-in-out infinite; }
@keyframes scan { 0% { top: -30%; } 100% { top: 100%; } }
.cam-feed .hud { position: absolute; inset: 12px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: #cbd5e1; }
.cam-feed .hud div { display: flex; justify-content: space-between; }
.cam-feed .rec { color: var(--bad); } .cam-feed .rec::before { content: "● "; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cam-feed .box { position: absolute; border: 1.5px solid var(--accent-2); border-radius: 4px; animation: track 6s ease-in-out infinite; }
.cam-feed .box::after { content: "PERSON 97%"; position: absolute; top: -18px; left: -1px; font: 600 9px var(--font-mono); background: var(--accent-2); color: #111; padding: 1px 4px; }
@keyframes track { 0%, 100% { left: 12%; top: 38%; width: 14%; height: 42%; } 50% { left: 62%; top: 34%; width: 15%; height: 46%; } }

/* --- Windows Server rack + AD tree --- */
.rack { display: grid; gap: 8px; }
.ru { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: linear-gradient(180deg, #133565, #0e224b); border: 1px solid var(--border); font-size: .8rem; }
.ru .leds { display: flex; gap: 5px; }
.ru .leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: led 1.4s infinite; }
.ru .leds i:nth-child(2) { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation-delay: .35s; animation-duration: .9s; }
.ru .leds i:nth-child(3) { animation-delay: .7s; animation-duration: 2.1s; }
@keyframes led { 50% { opacity: .25; } }
.ru b { font-family: var(--font-mono); font-weight: 600; }
.ru .role { margin-left: auto; color: var(--muted); font-size: .72rem; }
.ru .vent { flex: 1; height: 10px; background: repeating-linear-gradient(90deg, rgba(var(--tint-rgb), .08) 0 2px, transparent 2px 6px); border-radius: 3px; }
.ad-tree { font-family: var(--font-mono); font-size: .85rem; line-height: 2; }
.ad-tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed rgba(var(--accent-rgb), .4); }
.ad-tree > ul { border: 0; padding-left: 0; }
.ad-tree li { position: relative; }
.ad-tree li::before { content: ""; position: absolute; left: -22px; top: 1em; width: 16px; border-top: 1px dashed rgba(var(--accent-rgb), .4); }
.ad-tree > ul > li::before { display: none; }
.ad-tree span { padding: 2px 8px; border-radius: 6px; background: rgba(var(--accent-rgb), .08); }
.ad-tree .ou { color: var(--accent); }
.ad-tree .gpo { color: var(--accent-2); }

/* --- Website builder mockup --- */
.browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); background: #0b1222; transition: max-width .5s ease; margin: 0 auto; max-width: 100%; }
.browser .url { flex: 1; margin-left: 10px; padding: 5px 12px; border-radius: 8px; background: rgba(var(--tint-rgb), .05); font-size: .75rem; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-mock { padding: 16px; display: grid; gap: 12px; }
.sm-nav { display: flex; justify-content: space-between; align-items: center; }
.sm-logo { width: 70px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.sm-links { display: flex; gap: 8px; } .sm-links i { width: 28px; height: 7px; border-radius: 4px; background: rgba(var(--tint-rgb), .15); }
.sm-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(244,114,182,.1)); }
.sm-hero .l i { display: block; height: 10px; border-radius: 5px; background: rgba(var(--tint-rgb), .35); margin-bottom: 8px; }
.sm-hero .l i:nth-child(1) { width: 90%; height: 14px; background: rgba(var(--tint-rgb), .8); }
.sm-hero .l i:nth-child(2) { width: 70%; } .sm-hero .l i:nth-child(3) { width: 40%; height: 18px; border-radius: 9px; background: var(--accent); margin-top: 12px; }
.sm-hero .r { aspect-ratio: 4/3; border-radius: 10px; background: linear-gradient(160deg, rgba(var(--accent-rgb), .5), rgba(244,114,182,.4)); }
.sm-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sm-product { border-radius: 10px; background: rgba(var(--tint-rgb), .04); border: 1px solid var(--border); padding: 8px; }
.sm-product .img { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .35), rgba(34,211,238,.25)); margin-bottom: 8px; }
.sm-product i { display: block; height: 6px; border-radius: 3px; background: rgba(var(--tint-rgb), .2); margin-bottom: 5px; }
.sm-product .price { display: flex; justify-content: space-between; align-items: center; font-size: .65rem; color: var(--text); font-weight: 700; }
.sm-product .price b { font-size: .6rem; background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 4px; }
.site-mock > * { animation: build .7s cubic-bezier(.2,.7,.2,1) both; }
.site-mock > *:nth-child(2) { animation-delay: .25s; } .site-mock > *:nth-child(3) { animation-delay: .5s; }
@keyframes build { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* Device preview: desktop is a 16:9 screen with 4 products in a row, tablet 3 in a row, phone 2 × 2 */
.site-mock { display: flex; flex-direction: column; gap: 10px; }
.browser:not(.tablet):not(.phone) .site-mock { gap: 8px; padding-bottom: 12px; }
.browser:not(.tablet):not(.phone) .sm-hero { padding: 10px 12px; }
.browser:not(.tablet):not(.phone) .sm-hero .r { aspect-ratio: 3 / 1; }
.browser:not(.tablet):not(.phone) .sm-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.browser:not(.tablet):not(.phone) .sm-product { padding: 6px; }
.browser:not(.tablet):not(.phone) .sm-product .img { aspect-ratio: 1; margin-bottom: 6px; }
/* Device mockups around the preview, drawn to real proportions and scaled down:
   laptop (bezel + keyboard base) · iPad portrait (screen 1640 × 2360) · iPhone 15 Pro (screen 393 × 852) */
.device-stage { display: flex; align-items: center; justify-content: center; }
@media (min-width: 961px) { .device-stage { min-height: 560px; } }   /* same height for every device, so the page doesn't jump */
.device-frame { width: 100%; margin: 0 auto; transition: max-width .45s ease; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.device-screen { position: relative; margin: 0 auto; }
.device-screen .browser { position: relative; max-width: none; }
.dev-btn, .dev-island, .dev-status, .device-base { display: none; }

/* Laptop */
/* On narrow screens the laptop is laid out at PC size and scaled down as a whole (scale set by fitLaptop() in web.html) */
.device-stage.is-scaled { position: relative; display: block; }
.device-frame.is-scaled { position: absolute; top: 0; left: 0; width: 720px; max-width: none; transform-origin: 0 0; }
.device-frame[data-d="desktop"] .device-screen { width: 91%; padding: 18px 14px 14px; border-radius: 18px 18px 4px 4px; background: linear-gradient(180deg, #232b3c, #0d121c); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.device-frame[data-d="desktop"] .device-screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a3346; box-shadow: inset 0 0 0 1.5px #10151f; }
.device-frame[data-d="desktop"] .browser { border-radius: 6px; border-color: rgba(255,255,255,.06); }
.device-frame[data-d="desktop"] .device-base { display: block; position: relative; height: 16px; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, #5b6579 0%, #353d4f 40%, #171c27 100%); border: 1px solid rgba(255,255,255,.18); border-top: 0; }
.device-frame[data-d="desktop"] .device-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #11151e; }

/* iPad and iPhone share: black glass, metal edge, side buttons, status bar */
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .device-screen { background: #050608; }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .browser { display: flex; flex-direction: column; overflow: hidden; border: 0; }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .site-mock { flex: 1; min-height: 0; overflow: hidden; }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .dev-btn { display: block; position: absolute; border-radius: 2px; background: linear-gradient(90deg, #4b5260, #8b93a3, #4b5260); }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .dev-status { display: flex; align-items: center; gap: 6px; color: #f1f5f9; font-size: 9px; font-weight: 600; letter-spacing: .01em; }
.dev-status .dev-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dev-status svg { height: 8px; width: auto; fill: currentColor; }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .panel-bar { justify-content: center; border-bottom: 1px solid rgba(255,255,255,.06); }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .panel-bar i { display: none; }
:is(.device-frame[data-d="tablet"], .device-frame[data-d="phone"]) .url { flex: 0 1 78%; margin: 0; text-align: center; border-radius: 9px; font-family: inherit; font-size: .62rem; }

/* iPad (portrait) */
.device-frame[data-d="tablet"] { max-width: 372px; }
.device-frame[data-d="tablet"] .device-screen { padding: 16px; border-radius: 34px; box-shadow: 0 0 0 2px #9aa3b2, 0 0 0 3.5px #4b5260; }
.device-frame[data-d="tablet"] .device-screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1b2130; }
.device-frame[data-d="tablet"] .browser { aspect-ratio: 1640 / 2360; border-radius: 18px; }
.device-frame[data-d="tablet"] .dev-status { padding: 6px 16px 0; }
.device-frame[data-d="tablet"] .panel-bar { padding: 5px 12px 8px; }
.device-frame[data-d="tablet"] .dev-btn-1 { top: -5px; right: 54px; width: 34px; height: 3px; }               /* top button */
.device-frame[data-d="tablet"] .dev-btn-2 { right: -5px; top: 62px; width: 3px; height: 30px; }              /* volume up */
.device-frame[data-d="tablet"] .dev-btn-3 { right: -5px; top: 98px; width: 3px; height: 30px; }              /* volume down */
.device-frame[data-d="tablet"] .dev-btn-4 { display: none; }
.device-frame[data-d="tablet"] .sm-products { grid-template-columns: 1fr 1fr; }

/* iPhone 15 Pro */
.device-frame[data-d="phone"] { max-width: 262px; }
.device-frame[data-d="phone"] .device-screen { padding: 9px; border-radius: 46px; box-shadow: 0 0 0 2px #7c8494, 0 0 0 3.5px #3a3f4a; }
.device-frame[data-d="phone"] .browser { aspect-ratio: 393 / 852; border-radius: 37px; }
.device-frame[data-d="phone"] .dev-island { display: block; position: absolute; z-index: 3; top: 19px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #000; }
.device-frame[data-d="phone"] .dev-status { min-height: 38px; padding: 12px 22px 0 28px; font-size: 11px; }
.device-frame[data-d="phone"] .dev-date { display: none; }
.device-frame[data-d="phone"] .site-mock { order: 1; }
.device-frame[data-d="phone"] .panel-bar { order: 2; padding: 8px 12px 20px; border-bottom: 0; border-top: 1px solid rgba(255,255,255,.06); background: #0e1527; }
.device-frame[data-d="phone"] .url { flex-basis: 88%; padding: 7px 12px; }
.device-frame[data-d="phone"] .browser::after { content: ""; position: absolute; z-index: 3; bottom: 6px; left: 50%; width: 36%; height: 4px; transform: translateX(-50%); border-radius: 2px; background: rgba(255,255,255,.75); }   /* home indicator */
.device-frame[data-d="phone"] .dev-btn-1 { left: -5px; top: 92px; width: 3px; height: 20px; }               /* action button */
.device-frame[data-d="phone"] .dev-btn-2 { left: -5px; top: 128px; width: 3px; height: 36px; }               /* volume up */
.device-frame[data-d="phone"] .dev-btn-3 { left: -5px; top: 172px; width: 3px; height: 36px; }               /* volume down */
.device-frame[data-d="phone"] .dev-btn-4 { right: -5px; top: 140px; width: 3px; height: 56px; }              /* side button */
.device-frame[data-d="phone"] .sm-hero { grid-template-columns: 1fr; } .device-frame[data-d="phone"] .sm-hero .r { aspect-ratio: 16 / 9; }
.device-frame[data-d="phone"] .sm-products { grid-template-columns: 1fr 1fr; } .device-frame[data-d="phone"] .sm-links { display: none; }
.sm-product .img { background-size: cover; background-position: center; }
.sm-name { display: block; margin-bottom: 4px; font-size: .66rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pay-row > span { display: inline-flex; align-items: center; min-height: 34px; font-size: .78rem; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--muted); }
/* Official payment logos sit on white, as the brands intend (assets/img/pay, from NBC Bakong and ABA PayWay) */
.pay-row .pay-logo { background: #fff; border-color: rgba(15,23,42,.12); }
.pay-row .pay-logo img { display: block; height: auto; }
.pay-row .pay-mark { gap: 8px; }
.pay-row .pay-mark em { font-style: normal; font-size: .8rem; font-weight: 600; color: #1b7cb3; }

/* --- Chatbot demo --- */
.chat { display: flex; flex-direction: column; height: 460px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.chat-head .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-weight: 800; }
.chat-head small { display: block; color: var(--ok); font-size: .75rem; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; animation: vmIn .35s ease both; white-space: pre-line; }
.msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-bottom-right-radius: 4px; font-weight: 500; }
.typing { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.quick button { border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: .82rem; transition: background .2s; }
.quick button:hover { background: rgba(var(--accent-rgb), .2); }
.quick button:disabled { opacity: .45; cursor: default; }

/* Floating keywords / chips strip */
.marquee { overflow: hidden; border-block: 1px solid var(--border); padding: 18px 0; background: var(--bg-2); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { color: var(--dim); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.marquee-track span b { color: var(--accent); margin-right: 8px; }
@keyframes marquee { to { transform: translateX(-50%); } }

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

/* ---------- Portfolio ---------- */
.work-hero { padding-bottom: 40px; }
.work-title { font-size: clamp(3rem, 11vw, 8.5rem); line-height: .95; letter-spacing: -.045em; margin-bottom: 28px; }
body.lang-km .work-title { font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 1.3; }
.work-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 28px; }
.work-intro .lead { margin: 0; }
.work-section { padding-top: 40px; }
.sample-note { margin: 0 0 24px; padding: 12px 16px; border: 1px dashed rgba(var(--accent-rgb), .5); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .06); color: var(--muted); font-size: .92rem; }
.sample-note b { color: var(--text); }
.sample-note code { font-size: .85em; padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint-rgb), .07); color: var(--text); }
.work-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.work-filters button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: rgba(var(--tint-rgb), .03); color: var(--muted); font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s, border-color .2s, background .2s;
}
.work-filters button:hover { color: var(--text); border-color: var(--accent); }
.work-filters button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.work-filters .count { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }
.work-status { margin: 0; font-size: .9rem; color: var(--dim); }

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.work-card {
  --accent: rgb(var(--c)); --accent-rgb: var(--c);
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s;
}
.work-card:hover { transform: translateY(-6px); border-color: rgba(var(--c), .5); box-shadow: 0 30px 60px -30px rgba(var(--c), .55); }
.work-card:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.work-card.featured { grid-column: span 2; grid-row: span 2; }
.work-grid.filtered .work-card.featured { grid-column: auto; grid-row: auto; }
.work-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(var(--c), .1); }
.work-card.featured .work-media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.work-grid.filtered .work-card.featured .work-media { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
.work-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.work-card:hover .work-media img { transform: scale(1.06); }
.work-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,24,53,.75)); opacity: 0; transition: opacity .35s; }
.work-card:hover .work-media::after, .work-card:focus-visible .work-media::after { opacity: 1; }
.work-view {
  position: absolute; left: 18px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: #fff; color: #0b1220; font-weight: 600; font-size: .88rem;
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.work-view svg { width: 16px; height: 16px; }
.work-card:hover .work-view, .work-card:focus-visible .work-view { opacity: 1; transform: none; }
.work-body { padding: 20px 22px 24px; }
.work-body h3 { margin: 10px 0 6px; font-size: 1.2rem; }
.work-card.featured .work-body h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.work-body p { margin: 0; font-size: .92rem; }
.work-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.work-num { font-family: var(--font-mono); color: var(--dim); }
.work-svc { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body.lang-km .work-svc { text-transform: none; letter-spacing: 0; }
.work-svc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sample-tag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--muted); font-size: .72rem; font-weight: 600; }
@media (max-width: 960px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card.featured { grid-row: auto; }
  .work-card.featured .work-media { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: auto; }
  .work-card.featured .work-media { aspect-ratio: 4 / 3; }
  .work-intro .btn { width: 100%; }
}
/* No hover on touch screens: keep the "view" pill visible */
@media (hover: none) { .work-view { opacity: 1; transform: none; } .work-media::after { opacity: .8; } }

/* Case study dialog */
.case {
  --accent: rgb(var(--c, var(--brand-rgb))); --accent-rgb: var(--c, var(--brand-rgb));
  width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border-strong);
  border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); overflow: hidden;
}
.case[open] { animation: caseIn .35s cubic-bezier(.2,.7,.2,1); }
.case::backdrop { background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes caseIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.case-body { display: grid; grid-template-columns: 1fr 1.1fr; max-height: calc(100dvh - 50px); overflow-y: auto; overscroll-behavior: contain; }
.case-media { position: relative; min-height: 420px; }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-content { padding: 44px 44px 40px; }
.case-content h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 12px 0 12px; }
.case-content h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.case-content .lead { font-size: 1.08rem; }
.case-content ul { margin: 0; padding: 0; list-style: none; }
.case-content li { position: relative; padding-left: 24px; margin: 8px 0; color: var(--muted); }
.case-content li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 3px; background: rgba(var(--accent-rgb), .25); border: 1px solid var(--accent); }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; padding: 16px 0; border-block: 1px solid var(--border); }
.case-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
body.lang-km .case-facts dt { text-transform: none; letter-spacing: 0; }
.case-facts dd { margin: 2px 0 0; font-weight: 600; }
.case-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case-results div { padding: 16px 14px; border-radius: 14px; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .25); }
.case-results b { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; color: var(--accent); }
.case-results span { font-size: .82rem; color: var(--muted); }
.case-stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.case-stack span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .82rem; color: var(--muted); }
.case-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(var(--surface-rgb), .9); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.case-close:hover { border-color: var(--accent); }
.case-close svg { width: 20px; height: 20px; }
@media (max-width: 820px) {
  .case { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .case-body { display: block; max-height: 100dvh; } /* a grid row collapses around the aspect-ratio photo */
  .case-media { min-height: 0; aspect-ratio: 16 / 10; }
  .case-content { padding: 28px 20px 40px; }
  .case-facts, .case-results { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 420px) { .case-facts { grid-template-columns: 1fr 1fr; } }

/* Home page "Recent work" teaser reuses the cards */
.recent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.recent-head .section-head { margin-bottom: 0; }
#recent-work { margin-top: 40px; }

/* Light mode: darken per-project colours for text on white */

/* ---------- Network lab (networking.html) ---------- */
.nl { max-width: 1180px; margin: 0 auto; }
.nl .panel-bar .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-pause { min-height: 32px; margin-left: 4px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: none; color: var(--muted); font-size: .78rem; font-weight: 600; }
.nl-pause:hover { color: var(--text); border-color: var(--accent); }
.nl-pause .nl-pause-on, .nl.paused .nl-pause .nl-pause-off { display: none; }
.nl.paused .nl-pause .nl-pause-on { display: inline; }
.nl.paused .live-dot { color: var(--muted); }
.nl.paused .live-dot::before { background: var(--muted); animation: none; }
/* The lab keeps its motion when the device asks for reduced motion (it has its own Pause button) */
@media (prefers-reduced-motion: reduce) {
  .nl .nl-burst { animation-duration: .65s !important; }
  .nl .nl-link, .nl-node rect, .nl-kpi b { transition-duration: .3s !important; }
  .nl-log li { animation-duration: .3s !important; }
}
.nl-tabs { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.nl-tabs::-webkit-scrollbar { display: none; }
.nl-tabs button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid transparent; background: none; color: var(--muted); font-weight: 600; font-size: .9rem; transition: color .2s;   /* selection itself switches instantly */
}
.nl-tabs button svg { width: 18px; height: 18px; }
.nl-tabs button:hover { color: var(--text); background: rgba(var(--tint-rgb), .04); }
.nl-tabs button[aria-selected="true"] { color: var(--text); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .35); }
.nl-tabs button[aria-selected="true"] svg { color: var(--accent); }
.nl-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(290px, 1fr); }
.nl-stage {
  padding: 18px; border-right: 1px solid var(--border); overflow-x: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), .09), transparent 60%), radial-gradient(rgba(148,163,184,.1) 1px, transparent 1px) 0 0 / 22px 22px;
}
.nl-stage svg { display: block; width: 100%; min-width: 620px; height: auto; }
.nl-hint { display: none; position: sticky; left: 0; margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.nl-side { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nl-title { margin: 0; font-size: 1.25rem; }
.nl-desc { margin: 0; font-size: .9rem; }
.nl-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nl-kpi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--tint-rgb), .03); min-width: 0; }
.nl-kpi span { display: block; font-size: .72rem; line-height: 1.35; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
body.lang-km .nl-kpi span { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.nl-kpi b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 1.12rem; font-variant-numeric: tabular-nums; transition: color .3s; }
.nl-kpi.ok b { color: var(--ok); } .nl-kpi.warn b { color: #fbbf24; } .nl-kpi.bad b { color: var(--bad); }
.nl-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--border); background: rgba(var(--tint-rgb), .03); }
.nl-modes[hidden] { display: none; }
.nl-modes button { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: .84rem; font-weight: 600; line-height: 1.25; transition: color .2s, background .2s; }
.nl-modes button:hover:not([disabled]) { color: var(--text); }
.nl-modes button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
.nl-modes button[disabled] { opacity: .55; cursor: progress; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-actions .btn { min-height: 44px; }
.nl-actions .btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.nl-log-head { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
.nl-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 190px; align-content: start; font-family: var(--font-mono); font-size: .76rem; line-height: 1.45; }
.nl-log li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding-left: 9px; border-left: 2px solid var(--border-strong); color: var(--muted); animation: nlLog .3s ease; }
.nl-log li.info { border-color: var(--accent); } .nl-log li.ok { border-color: var(--ok); color: var(--text); }
.nl-log li.warn { border-color: #fbbf24; } .nl-log li.err { border-color: var(--bad); color: var(--text); }
.nl-log time { color: var(--dim); }
@keyframes nlLog { from { opacity: 0; transform: translateY(-4px); } }

/* diagram */
.nl .nl-link { fill: none; stroke: rgba(148,163,184,.28); stroke-width: 2; transition: stroke .3s, opacity .3s; }
.nl .nl-link.on { stroke: rgba(var(--accent-rgb), .75); stroke-width: 2.5; }
.nl .nl-link.standby { stroke: rgba(148,163,184,.45); stroke-dasharray: 5 6; }
.nl .nl-link.down { stroke: var(--bad); stroke-dasharray: 3 7; }
.nl .nl-link.nl-lag { stroke-width: 2.5; }
.nl-lag-ring { fill: none; stroke: rgba(148,163,184,.35); stroke-dasharray: 3 4; transition: stroke .3s; }
.nl-lag-label { fill: var(--muted); font: 600 12px var(--font); }
.nl svg[data-scene="lag"] .nl-lag-ring, .nl svg[data-scene="all"] .nl-lag-ring { stroke: var(--accent); stroke-dasharray: none; }
.nl svg[data-scene="lag"] .nl-lag-label { fill: var(--accent); }
.nl-cloud path { fill: rgba(var(--accent-rgb), .06); stroke: rgba(var(--accent-rgb), .5); stroke-width: 1.5; }
.nl-cloud text { fill: var(--muted); font: 700 11px var(--font); letter-spacing: .16em; text-anchor: middle; }
.nl-node rect { fill: #112d5d; stroke: rgba(148,163,184,.3); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.nl-node use { color: var(--accent); transition: color .3s; }
.nl-node .t { fill: var(--text); font: 600 14px var(--font); }
.nl-node .s { fill: var(--muted); font: 11px var(--font); }
#n-fw rect { stroke: rgba(var(--accent-rgb), .55); }
.nl-node.active rect { stroke: rgba(52,211,153,.65); }
.nl-node.alert rect { stroke: var(--bad); fill: rgba(244,63,94,.12); }
.nl-node.alert use { color: var(--bad); }
.nl-node.hit rect { stroke: var(--bad); fill: rgba(244,63,94,.16); }
.nl-zone[data-vlan="10"] { --z: 96,165,250; } .nl-zone[data-vlan="20"] { --z: 245,158,11; }
.nl-zone[data-vlan="30"] { --z: 167,139,250; } .nl-zone[data-vlan="40"] { --z: 52,211,153; }
.nl-zone > rect { fill: rgba(var(--z), .06); stroke: rgba(var(--z), .45); stroke-dasharray: 4 4; transition: opacity .3s, fill .3s, stroke .3s; }
.nl-zone .zl { fill: rgb(var(--z)); font: 700 11px var(--font); letter-spacing: .06em; }
.nl svg:not([data-scene="vlan"]):not([data-scene="all"]) .nl-zone > rect { opacity: .55; }
.nl svg[data-scene="vlan"] .nl-zone > rect, .nl svg[data-scene="all"] .nl-zone > rect { fill: rgba(var(--z), .1); stroke-dasharray: none; }
.nl svg.flat .nl-zone > rect { fill: rgba(148,163,184,.05); stroke: rgba(148,163,184,.3); stroke-dasharray: 4 4; }
.nl svg.flat .nl-zone .zl { fill: var(--muted); }
.nl-dev use { color: var(--muted); } .nl-dev text { fill: var(--muted); font: 11px var(--font); }
.nl-dev .dbox { fill: transparent; stroke: transparent; transition: fill .3s, stroke .3s; }
.nl-dev.infected .dbox { fill: rgba(244,63,94,.18); stroke: var(--bad); }
.nl-dev.infected use, .nl-dev.infected text { color: var(--bad); fill: var(--bad); }
.nl-dev.infected use { fill: none; }
.nl-dev.safe .dbox { fill: rgba(52,211,153,.08); stroke: rgba(52,211,153,.6); }
.nl [data-f] { transition: opacity .35s; }
.nl svg:not([data-scene="vpn"]):not([data-scene="all"]) [data-f~="vpn"] { opacity: .22; }
.nl-break { opacity: 0; transition: opacity .25s; }
.nl-break.show { opacity: 1; }
.nl-break circle { fill: #1a0b12; stroke: var(--bad); stroke-width: 1.5; }
.nl-break path { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.nl-tube { fill: none; stroke: rgba(52,211,153,.16); stroke-width: 12; stroke-linecap: round; transition: stroke .3s; }
.nl-tube.down { stroke: rgba(244,63,94,.14); }
.nl-pk { fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.nl-pk.c-ok { color: #22d3ee; } .nl-pk.c-bad { color: #f43f5e; } .nl-pk.c-probe { color: #cbd5e1; }
.nl-pk.c-lacp { color: #f5b642; } .nl-pk.c-alt { color: #fbbf24; } .nl-pk.v1 { color: #60a5fa; } .nl-pk.v2 { color: #f59e0b; } .nl-pk.v3 { color: #a78bfa; } .nl-pk.v4 { color: #34d399; }
.nl-pk.c-enc { color: #34d399; fill: rgba(52,211,153,.3); stroke: #34d399; stroke-width: 1.5; }
.nl-burst { fill: none; stroke: #f43f5e; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: nlBurst .65s ease-out forwards; }
@keyframes nlBurst { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }
@media (max-width: 900px) {
  .nl-grid { grid-template-columns: 1fr; }
  .nl-stage { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; }
  .nl-hint { display: block; }
  .nl-side { padding: 18px; }
}

/* ---------- AI Security Pro Max (security.html) ---------- */
.ai-nobuy { display: inline-block; margin: 20px auto 0; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); color: var(--text); font-size: .95rem; }
.ai-nobuy b { color: var(--accent-ink); }
.ai-pillars { margin-bottom: 36px; }
.ai-stage canvas { display: block; width: 100%; min-width: 560px; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--border); background: #0a1835; }
.ai-disclaimer { margin: 8px 0 0; font-size: .75rem; color: var(--dim); }
.ai-snaps { display: flex; gap: 8px; flex-basis: 100%; }
.ai-snaps:empty { display: none; }
.ai-snaps img { width: 96px; height: 72px; border-radius: 8px; animation: nlLog .3s ease; }
.ai-privacy { max-width: 760px; margin: 18px auto 0; text-align: center; font-size: .85rem; color: var(--dim); }

/* ---------- Server consolidation (virtualization.html) ---------- */
.cons-hook { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.15; }
.cons-hook .en > span, .cons-hook .km > span { display: inline-block; opacity: 0; transform: translateY(14px); }
.in .cons-hook .en > span, .in .cons-hook .km > span { animation: consWord .6s cubic-bezier(.2,.7,.2,1) forwards; }
.cons-hook .en > span:nth-child(2), .cons-hook .km > span:nth-child(2) { animation-delay: .25s; }
.cons-hook .en > span:nth-child(3), .cons-hook .km > span:nth-child(3) { animation-delay: .5s; }
.cons-hook .en > span:nth-child(4), .cons-hook .km > span:nth-child(4) { animation-delay: .75s; }
@keyframes consWord { to { opacity: 1; transform: none; } }

.cons-panel { position: relative; max-width: 1180px; margin: 8px auto 0; overflow: visible; }
.cons-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; }
.cons-label { margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.lang-km .cons-label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.cons-servers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cons-srv {
  position: relative; padding: 12px; border-radius: 12px; border: 1px solid rgba(245,158,11,.35);
  background: linear-gradient(180deg, #133565, #0e224b); box-shadow: 0 0 22px -8px rgba(245,158,11,.45);
  transition: opacity .5s, filter .5s, border-color .5s, box-shadow .5s;
}
.cons-srv-head { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.cons-srv-head svg { width: 18px; height: 18px; flex: none; color: #fbbf24; }
.cons-srv-head b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-vm { margin: 10px 0 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cons-srv-stats { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.cons-srv-stats .w { color: #fbbf24; }
.cons-fan { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#64748b 0 25%, transparent 0 50%, #64748b 0 75%, transparent 0); animation: spin .6s linear infinite; }
.cons-srv.moving .cons-vm, .cons-srv.off .cons-vm { visibility: hidden; }
.cons-srv.off { opacity: .38; filter: grayscale(1); border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
.cons-srv.off .cons-fan { animation: none; }
.cons-srv.off::after { content: "OFF"; position: absolute; right: 10px; bottom: 34px; font: 700 .7rem var(--font-mono); color: var(--muted); }
.cons-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .45); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.cons-arrow svg { width: 22px; height: 22px; }
.cons-host { padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), #0e224b); box-shadow: 0 0 40px -12px rgba(var(--accent-rgb), .6); }
.cons-host-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: .82rem; }
.cons-host-head span:last-child { color: var(--muted); font-size: .74rem; }
.cons-led { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.cons-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cons-slot { min-height: 38px; padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .74rem; transition: background .3s, border-color .3s; }
.cons-slot.filled { border-style: solid; border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .14); color: var(--text); animation: nlLog .3s ease; }
.cons-slot span { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-slot em { font-style: normal; font-family: var(--font-mono); color: var(--accent); }
.cons-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .74rem; color: var(--muted); }
.cons-bar i { height: 8px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.cons-bar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.cons-bar em { font-style: normal; font-family: var(--font-mono); color: var(--text); min-width: 42px; text-align: right; }
.cons-fly { position: absolute; z-index: 5; margin: 0; pointer-events: none; box-shadow: 0 10px 30px -6px rgba(var(--accent-rgb), .8); }
.cons-play { margin-left: auto; }
.cons-meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.cons-meter { padding: 16px 20px; border-right: 1px solid var(--border); }
.cons-meter:last-child { border-right: 0; }
.cons-meter > span { display: block; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
body.lang-km .cons-meter > span { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.cons-meter b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-variant-numeric: tabular-nums; color: #fbbf24; transition: color .5s; }
.cons-meter.good b { color: var(--ok); }
.cons-benefits { margin-top: 28px; }
.cons-big { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cons-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; }
.cons-calc h3 { margin-bottom: 16px; }
.cons-calc > div > label { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); }
.cons-calc > div > label b { color: var(--text); font-size: 1.1rem; }
.cons-calc input[type="range"] { width: 100%; margin: 10px 0 18px; accent-color: var(--accent); min-height: 28px; }
.cons-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cons-result { padding: 20px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .07); }
.cons-result-label { font-size: .85rem; color: var(--muted); }
.cons-result > b { display: block; margin: 4px 0 10px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cons-result ul { margin: 0 0 16px; }
.cons-note { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--dim); }
@media (max-width: 900px) {
  .cons-stage { grid-template-columns: 1fr; }
  .cons-arrow { transform: rotate(90deg); margin: 0 auto; }
  .cons-meters { grid-template-columns: 1fr 1fr; }
  .cons-meter:nth-child(2) { border-right: 0; }
  .cons-meter:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .cons-calc { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cons-servers { grid-template-columns: 1fr 1fr; }
  .cons-calc-row { grid-template-columns: 1fr; }
  .cons-stage { padding: 14px; }
}

/* ---------- Separate vs virtualization comparison ---------- */
.cmp-vs { font-size: .6em; color: var(--muted); vertical-align: middle; margin: 0 .2em; }
.cmp { max-width: 1180px; margin: 0 auto; }
.cmp-run { margin-left: auto; }
.cmp-body { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-col { padding: 22px; min-width: 0; }
.cmp-old { border-right: 1px solid var(--border); }
.cmp-col h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 1.05rem; }
.cmp-tag { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(251,191,36,.45); color: #fbbf24; background: rgba(251,191,36,.08); }
.cmp-new .cmp-tag { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.cmp-badge { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .75rem; }
.cmp-sim { min-height: 190px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: #0a1835; margin-bottom: 16px; }
.cmp-clock { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.cmp-clock b { font-family: var(--font-display); font-size: 1.35rem; color: #fbbf24; font-variant-numeric: tabular-nums; }
.cmp-new .cmp-clock b { color: var(--accent); }
.cmp-sim.failed .cmp-clock b { color: var(--bad); }
.cmp-race { display: grid; gap: 10px; }
.cmp-step { font-size: .8rem; color: var(--muted); }
.cmp-step.on { color: var(--text); }
.cmp-step i { display: block; height: 7px; margin-top: 5px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.cmp-step b { display: block; height: 100%; width: 0; background: #fbbf24; border-radius: 6px; }
.cmp-new .cmp-step b { background: var(--accent); }
.cmp-stack { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); }
.cmp-stack i { width: 0; background: var(--c); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.cmp-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cmp-legend li { display: flex; justify-content: space-between; gap: 10px; padding: 0; margin: 0; font-size: .8rem; color: var(--muted); }
.cmp-legend li::before { display: none; }
.cmp-legend li > span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--c); }
.cmp-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cmp-box { display: flex; justify-content: space-between; padding: 10px; border-radius: 8px; border: 1px solid rgba(251,191,36,.35); font-size: .78rem; transition: background .3s, border-color .3s; }
.cmp-box em { font-style: normal; color: var(--muted); font-size: .7rem; }
.cmp-box.done, .cmp-vm.done { border-color: var(--ok); background: rgba(52,211,153,.12); }
.cmp-box.done em::after, .cmp-vm.done::after { content: " ✓"; color: var(--ok); }
.cmp-boxes.one { display: block; }
.cmp-dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .5); }
.cmp-dash b { grid-column: 1 / -1; font-size: .8rem; color: var(--accent); }
.cmp-vm { padding: 8px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: .76rem; transition: background .3s, border-color .3s; }
.cmp-power i { display: block; height: 14px; margin: 12px 0 0; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.cmp-power i b { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #fbbf24, #f43f5e); transition: width 1.2s ease; }
.cmp-new .cmp-power i b { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cmp-fans { display: flex; flex-wrap: wrap; gap: 10px; min-height: 36px; }
.cmp-fan { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: conic-gradient(#64748b 0 25%, transparent 0 50%, #64748b 0 75%, transparent 0); animation: spin .5s linear infinite; }
.cmp-net { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 120px; }
.cmp-switch { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: .78rem; writing-mode: vertical-rl; transform: rotate(180deg); }
.cmp-links { display: grid; gap: 12px; }
.cmp-link { position: relative; height: 3px; border-radius: 3px; background: #fbbf24; overflow: hidden; }
.cmp-net.bond .cmp-link { background: var(--accent); }
.cmp-link::after { content: ""; position: absolute; top: -2px; width: 18px; height: 7px; border-radius: 4px; background: #fff; opacity: .8; animation: cmpFlow 1.1s linear infinite; }
.cmp-link.cut { background: repeating-linear-gradient(90deg, var(--bad) 0 6px, transparent 6px 12px); }
.cmp-link.cut::after { display: none; }
@keyframes cmpFlow { from { left: -18px; } to { left: 100%; } }
.cmp-hosts { display: grid; gap: 6px; }
.cmp-hosts span { padding: 6px 10px; border-radius: 7px; border: 1px solid rgba(251,191,36,.4); font-size: .74rem; }
.cmp-hosts span.down { border-color: var(--bad); color: var(--bad); background: rgba(244,63,94,.12); }
.cmp-hostbox { padding: 12px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .55); font-size: .78rem; display: grid; gap: 4px; }
.cmp-hostbox span { color: var(--ok); }
.cmp-pros, .cmp-cons { list-style: none; margin: 0 0 10px; padding: 0; }
.cmp-pros li, .cmp-cons li { position: relative; padding-left: 26px; margin: 7px 0; font-size: .9rem; color: var(--muted); }
.cmp-pros li::before, .cmp-cons li::before { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.cmp-pros li::before { content: "✓"; background: rgba(52,211,153,.16); color: var(--ok); }
.cmp-cons li::before { content: "✕"; background: rgba(244,63,94,.16); color: var(--bad); }
.cmp-verdict { margin: 0; padding: 16px 22px; border-top: 1px solid var(--border); font-size: .95rem; color: var(--text); }
.cmp-verdict b { color: var(--accent); }
.cmp-verdict small { display: block; margin-top: 6px; font-size: .78rem; color: var(--dim); }
@media (max-width: 820px) {
  .cmp-body { grid-template-columns: 1fr; }
  .cmp-old { border-right: 0; border-bottom: 1px solid var(--border); }
  .cmp-col { padding: 18px; }
}

/* Network lab: Wi-Fi & Guest layer and "all at once" tab */
.nl-tabs button.nl-tab-all { border-color: rgba(var(--accent-rgb), .35); }
.nl-wifi { opacity: 0; pointer-events: none; transition: opacity .35s; }
.nl svg[data-scene="wifi"] .nl-wifi { opacity: 1; }
.nl svg[data-scene="wifi"] .nl-zone, .nl svg[data-scene="wifi"] #L-z1, .nl svg[data-scene="wifi"] #L-z2,
.nl svg[data-scene="wifi"] #L-z3, .nl svg[data-scene="wifi"] #L-z4 { opacity: 0; }
.nl-cov { fill: rgba(var(--accent-rgb), .05); stroke: rgba(var(--accent-rgb), .25); stroke-dasharray: 4 6; }
.nl-wp rect { fill: #112d5d; stroke: rgba(var(--accent-rgb), .6); stroke-width: 1.4; transition: stroke .2s, fill .2s; }
.nl-wp use { color: var(--accent); }
.nl-wp text { fill: var(--text); font: 600 12px var(--font); }
.nl-wp.hit rect { fill: rgba(var(--accent-rgb), .25); stroke: var(--accent); }
.nl-assoc { stroke: #fbbf24; stroke-width: 1.5; stroke-dasharray: 3 4; }
.nl-phone rect { fill: #111827; stroke: #fbbf24; stroke-width: 2; }
.nl-phone text { fill: #fbbf24; font: 600 11px var(--font); }
.nl-speed .panel-bg { fill: rgba(10,24,53,.85); stroke: rgba(148,163,184,.25); }
.nl-speed .h { fill: var(--muted); font: 700 10px var(--font); letter-spacing: .1em; }
.nl-speed .l { fill: var(--text); font: 11px var(--font); }
.nl-speed .v { fill: var(--muted); font: 600 11px var(--font-mono); }
.nl-speed .track { fill: rgba(148,163,184,.15); }
.nl-speed .bar { fill: var(--ok); transition: width .6s ease; }
.nl-speed .cap { stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 2 2; }
.nl-speed .over .bar { fill: var(--bad); }
.nl-speed .capped .bar { fill: #fbbf24; }
.nl-speed .capped .v { fill: #fbbf24; }
.nl-portal { opacity: 0; transform-box: fill-box; transition: opacity .35s; }
.nl-portal.show { opacity: 1; }
.nl-portal .card { fill: #f8fafc; stroke: rgba(148,163,184,.4); }
.nl-portal .brand { fill: var(--accent); }
.nl-portal .t { fill: #0c1d3f; font: 700 13px var(--font); }
.nl-portal .s { fill: #334155; font: 12px var(--font); }
.nl-portal .btn { fill: #0e7490; transition: fill .3s; }
.nl-portal .bt { fill: #fff; font: 700 13px var(--font); text-anchor: middle; }
.nl-portal.done .btn { fill: #047857; }
.nl-blocked { opacity: 0; transition: opacity .3s; }
.nl-blocked.show { opacity: 1; }
.nl-blocked rect { fill: rgba(244,63,94,.18); stroke: var(--bad); }
.nl-blocked text { fill: #fecdd3; font: 700 11px var(--font); text-anchor: middle; }

/* ---------- Network templates (networking.html) ---------- */
.tp { max-width: 1180px; margin: 0 auto; }
.tp-stage svg { display: block; width: 100%; min-width: 600px; height: auto; }
.tp-zone rect { fill: rgba(var(--accent-rgb), .04); stroke: rgba(var(--accent-rgb), .3); stroke-dasharray: 4 5; transition: fill .35s, stroke .35s; }
.tp-zone.zhl rect { fill: rgba(var(--accent-rgb), .12); stroke: var(--accent); stroke-dasharray: none; }
.tp-zl { fill: var(--accent); font: 700 10px var(--font); letter-spacing: .06em; }
.tp-link { fill: none; stroke: rgba(148,163,184,.3); stroke-width: 2; transition: stroke .3s, opacity .3s; }
.tp-link.flow { stroke: rgba(var(--accent-rgb), .6); stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
.tp-link.air { stroke: #fbbf24; stroke-dasharray: 2 5; animation: dash 1s linear infinite; }
.tp-link.tunnel { stroke: rgba(52,211,153,.25); stroke-width: 8; stroke-linecap: round; }
.tp-link.tunnel.tunnel-on { stroke: rgba(52,211,153,.55); }
.tp-link.lag { stroke: rgba(var(--accent-rgb), .75); stroke-width: 7; stroke-dasharray: 2 3; }
.tp-link.standby { stroke-dasharray: 5 6; }
.tp-link.on { stroke: rgba(var(--accent-rgb), .75); stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
.tp-link.cut { stroke: var(--bad); stroke-dasharray: 3 7; animation: none; }
.tp-link.capped { stroke: #fbbf24; stroke-width: 4; stroke-dasharray: none; animation: none; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.tp-node rect { fill: #112d5d; stroke: rgba(148,163,184,.3); stroke-width: 1.2; transition: stroke .3s, fill .3s, opacity .3s; }
.tp-node use { color: var(--accent); }
.tp-t { fill: var(--text); font: 600 12px var(--font); }
.tp-s { fill: var(--muted); font: 10px var(--font); }
.tp-node.cloud path { fill: rgba(var(--accent-rgb), .06); stroke: rgba(var(--accent-rgb), .5); stroke-width: 1.5; }
.tp-cl { fill: var(--muted); font: 700 10px var(--font); letter-spacing: .14em; text-anchor: middle; }
.tp-node.hl rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 18%, #112d5d); }   /* solid, so links never show through */
.tp-node.off rect { fill: #0a101c; stroke-dasharray: 4 4; }
.tp-node.off text, .tp-node.off use { opacity: .4; }
.tp-mover { transition: transform 2.4s cubic-bezier(.4,0,.2,1); }
.tp-mover rect { fill: #111827; stroke: #fbbf24; stroke-width: 2; }
.tp-badge { opacity: 0; transition: opacity .35s; pointer-events: none; }
.tp-badge.show { opacity: 1; }
.tp-badge rect { fill: rgba(10,24,53,.92); stroke-width: 1.5; }
.tp-badge.ok rect { stroke: var(--ok); } .tp-badge.warn rect { stroke: #fbbf24; } .tp-badge.bad rect { stroke: var(--bad); }
.tp-bt { font: 700 11px var(--font); text-anchor: middle; }
.tp-badge.ok .tp-bt { fill: #a7f3d0; } .tp-badge.warn .tp-bt { fill: #fde68a; } .tp-badge.bad .tp-bt { fill: #fecdd3; }
.tp-portal { opacity: 0; transition: opacity .35s; }
.tp-portal.show { opacity: 1; }
.tp-portal .card { fill: #f8fafc; stroke: rgba(148,163,184,.4); }
.tp-portal .brand { fill: var(--accent); }
.tp-portal .pt { fill: #0c1d3f; font: 700 12px var(--font); }
.tp-portal .ps { fill: #334155; font: 11px var(--font); }
.tp-portal .btn { fill: #0e7490; }
.tp-portal .pb { fill: #fff; font: 700 12px var(--font); text-anchor: middle; }
.tp-scale { margin: 0; font-size: .92rem; }
.tp-pkg { align-self: flex-start; display: inline-flex; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .45); color: var(--muted); font-size: .82rem; }
.tp-pkg b { color: var(--accent); }
.tp-pkg:hover { border-color: var(--accent); }
.tp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tp-items button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--muted); font-size: .9rem; text-align: left; transition: color .2s, background .2s, border-color .2s; }
.tp-items button::before { content: "✓"; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(52,211,153,.16); color: var(--ok); font-size: .72rem; font-weight: 700; }
.tp-items button:hover { color: var(--text); }
.tp-items button.on { color: var(--text); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); }
.tp-cta { align-self: flex-start; }

/* ---------- Web app / ordering simulation (web.html) ---------- */
.wa { max-width: 1180px; margin: 0 auto; }
.wa .panel-bar .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-clock { margin-left: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border-strong); font-family: var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.wa-clock.night { color: #a5b4fc; border-color: rgba(165,180,252,.5); }
.wa-clock + .live-dot { margin-left: 8px; }
.wa-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.wa-col { padding: 20px; min-width: 0; border-right: 1px solid var(--border); }
.wa-col:last-child { border-right: 0; }
.wa-label { margin: 0 0 12px; font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
body.lang-km .wa-label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.wa-phone { position: relative; max-width: 270px; margin: 0 auto; padding: 14px 12px; border-radius: 26px; border: 6px solid #1e293b; background: #f8fafc; color: #0f172a; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); overflow: hidden; }
.wa-phone-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .9rem; }
.wa-table { padding: 2px 8px; border-radius: 999px; background: #e2e8f0; font-size: .72rem; }
.wa-table em { font-style: normal; font-weight: 700; }
.wa-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wa-item { position: relative; display: grid; grid-template-columns: 30px 1fr auto 24px; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; font-size: .8rem; transition: transform .35s, border-color .35s, background .35s; }
.wa-item b { font-size: .8rem; }
.wa-dish { width: 30px; height: 30px; border-radius: 9px; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 60%, #b45309); }
.wa-item[data-id="amok"] .wa-dish { background: radial-gradient(circle at 35% 35%, #fef3c7, #eab308 55%, #65a30d); }
.wa-item[data-id="rice"] .wa-dish { background: radial-gradient(circle at 35% 35%, #fff7ed, #fdba74 55%, #c2410c); }
.wa-item[data-id="coffee"] .wa-dish { background: radial-gradient(circle at 35% 35%, #e7e5e4, #a16207 55%, #422006); }
.wa-add { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #7c3aed; color: #fff; font-style: normal; font-weight: 700; }
.wa-item.tap { transform: scale(.96); border-color: var(--accent); background: #faf5ff; }
.wa-item .wa-qty { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #16a34a; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.wa-cart { display: flex; justify-content: space-between; margin: 10px 2px 8px; font-size: .85rem; }
.wa-total { font-variant-numeric: tabular-nums; }
.wa-pay { padding: 10px; border-radius: 12px; background: #0f172a; color: #fff; text-align: center; font-size: .82rem; font-weight: 700; transition: background .3s; }
.wa-pay .wa-pay-done, .wa-pay.paid .wa-pay-idle { display: none; }
.wa-pay.paid { background: #16a34a; }
.wa-pay.paid .wa-pay-done { display: inline; }
.wa-pay.go { animation: waPulse .5s ease 2; }
@keyframes waPulse { 50% { transform: scale(1.04); } }
.wa-chat { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 6px; pointer-events: none; }
.wa-chat:not(:empty) { left: 0; right: 0; bottom: 0; padding: 36px 10px 12px; background: linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,.96) 30%); }
.wa-msg { max-width: 88%; padding: 8px 10px; border-radius: 14px; font-size: .76rem; line-height: 1.4; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); animation: nlLog .3s ease; }
.wa-msg.me { justify-self: end; background: #0f172a; color: #fff; border-bottom-right-radius: 4px; }
.wa-msg.ai { justify-self: start; background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.wa-msg.ai b { color: #7c3aed; }
.wa-msg.typing::after { content: "● ● ●"; letter-spacing: 2px; color: #94a3b8; animation: waBlink 1s infinite; }
@keyframes waBlink { 50% { opacity: .3; } }
.wa-kitchen { min-height: 300px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: #0a1835; }
.wa-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-ticket { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.07); font-size: .8rem; animation: waIn .8s cubic-bezier(.2,.7,.2,1); transition: border-color .6s, background .6s; }
.wa-ticket header { display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: 700; }
.wa-ticket .st { font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: #fbbf24; color: #1f2937; }
.wa-ticket.cooking { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .07); }
.wa-ticket.cooking .st { background: var(--accent); color: #fff; }
.wa-ticket.ready { border-color: rgba(52,211,153,.55); background: rgba(52,211,153,.08); }
.wa-ticket.ready .st { background: var(--ok); color: #0c1d3f; }
.wa-ticket p { margin: 0; color: var(--muted); font-size: .76rem; }
.wa-ticket.night { border-color: rgba(165,180,252,.6); background: rgba(165,180,252,.08); }
@keyframes waIn { from { opacity: 0; transform: translateX(-24px); } }
.wa-notify { margin-top: 10px; min-height: 44px; }
.wa-toast { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #229ed9; color: #fff; font-size: .78rem; animation: waIn .4s ease; }
.wa-toast b { display: block; }
.wa-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wa-kpi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--tint-rgb), .03); }
.wa-kpi > span { display: block; font-size: .72rem; line-height: 1.35; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
body.lang-km .wa-kpi > span { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.wa-kpi b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 1.35rem; color: var(--ok); font-variant-numeric: tabular-nums; }
.wa-kpi b.bump { animation: waBump .4s ease; }
@keyframes waBump { 50% { transform: scale(1.15); } }
.wa-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 14px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: #0a1835; }
.wa-chart i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: rgba(var(--accent-rgb), .35); transition: height .9s ease, background .5s; }
.wa-chart i.now { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.wa-chart-label { margin: 6px 0 0; font-size: .74rem; color: var(--dim); }
.wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.wa-actions .btn { min-height: 44px; }
.wa-actions .btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.wa-note { margin: 0 0 0 auto; font-size: .76rem; color: var(--dim); }
.wa-grow { margin-top: 28px; }
.wa-build { margin-top: 28px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); text-align: center; }
.wa-build ul { list-style: none; margin: 14px 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wa-build li { margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .07); font-size: .88rem; color: var(--text); }
.wa-build li::before { display: none; }
@media (max-width: 1000px) {
  .wa-grid { grid-template-columns: 1fr 1fr; }
  .wa-col:nth-child(2) { border-right: 0; }
  .wa-col:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .wa-grid { grid-template-columns: 1fr; }
  .wa-col { border-right: 0; border-top: 1px solid var(--border); }
  .wa-col:first-child { border-top: 0; }
  .wa-kitchen { min-height: 0; }
  .wa-note { margin-left: 0; }
  .wa .panel-bar .title { display: none; }
}

/* Ordering demo: voice ordering and call waiter */
.wa-phone-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.wa-phone-bar button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; font-size: .74rem; font-weight: 700; }
.wa-phone-bar svg { width: 16px; height: 16px; flex: none; }
.wa-phone-bar .wa-mic { color: #7c3aed; border-color: #ddd6fe; }
.wa-phone-bar .wa-bell { color: #b45309; border-color: #fde68a; }
.wa-phone-bar button:hover:not([disabled]) { background: #f8fafc; }
.wa-phone-bar button[disabled] { opacity: .6; cursor: progress; }
.wa-phone.listening .wa-mic { background: #7c3aed; color: #fff; animation: waPulse .8s ease infinite; }
.wa-actions .btn svg { width: 16px; height: 16px; }
.wa-msg.voice { display: flex; align-items: center; gap: 8px; }
.wa-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; flex: none; }
.wa-wave i { width: 3px; height: 40%; border-radius: 2px; background: #c4b5fd; animation: waWave .9s ease-in-out infinite; }
.wa-wave i:nth-child(2) { animation-delay: .1s; } .wa-wave i:nth-child(3) { animation-delay: .2s; }
.wa-wave i:nth-child(4) { animation-delay: .3s; } .wa-wave i:nth-child(5) { animation-delay: .4s; }
@keyframes waWave { 50% { height: 100%; } }
.wa-msg.ai.speaking { border-color: #c4b5fd; }
.wa-spk { display: inline-block; margin-right: 4px; animation: waBlink 1s infinite; }
.wa-msg.sys { justify-self: center; background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
.wa-ticket .note { margin-top: 4px; color: #c4b5fd; font-weight: 600; }
.wa-toast.bell { background: #d97706; }
.wa-toast.bell.ok { background: #16a34a; }
.wa-sound { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.wa-sound input { width: 18px; height: 18px; accent-color: var(--accent); }

.wa-msg.typed u { text-decoration: underline wavy #f87171; text-underline-offset: 3px; }
.wa-chips { display: flex; gap: 6px; margin-top: 6px; }
.wa-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9; font-size: .72rem; font-weight: 700; transition: background .2s, color .2s; }
.wa-chip.pressed { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.wa-menu .wa-item .wa-dish.photo { background-size: cover; background-position: center; }   /* beats the per-dish colour fallbacks */

/* Ordering demo: animated finger */
.wa-finger { position: absolute; left: 0; top: 0; z-index: 5; width: 34px; height: 34px; margin: -6px 0 0 -12px; opacity: 0; pointer-events: none;
  transform: translate(210px, 420px); transition: transform .45s cubic-bezier(.3,.7,.3,1), opacity .3s; }
.wa-finger.on { opacity: 1; }
.wa-finger svg { position: relative; z-index: 1; width: 100%; height: 100%; fill: #fde68a; stroke: #1f2937; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transform-origin: 40% 20%; }
.wa-finger.tap svg { animation: waPress .45s ease; }
.wa-finger i { position: absolute; left: 8px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #7c3aed; opacity: 0; }
.wa-finger.tap i { animation: waRipple .6s ease-out; }
@keyframes waPress { 40% { transform: scale(.82) translateY(2px); } }
@keyframes waRipple { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.4); } }

/* Skip link: hidden until focused with the keyboard */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Tap-to-call button (phones only) */
.fab-call { display: none; bottom: 84px; background: #16a34a; box-shadow: 0 12px 30px -8px rgba(22,163,74,.7); }
@media (max-width: 640px) { .fab-call { display: flex; padding: 14px; } }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--text); }

/* Home: See it live */
.live-card { --accent: rgb(var(--c)); --accent-rgb: var(--c); display: flex; flex-direction: column; }
.live-card .more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--accent); }
.live-card .more svg { width: 16px; height: 16px; transition: transform .2s; }
.live-card:hover .more svg { transform: translateX(4px); }
.live-tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--ok); }
.live-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: ping 1.8s infinite; }

/* Privacy and 404 pages */
.privacy-list { display: grid; gap: 14px; }
.privacy-h { font-size: 1.15rem; margin-bottom: 8px; }
.nf { min-height: 70vh; display: flex; align-items: center; }
.nf-code { margin: 0; font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Security page: who benefits */
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ind-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.ind-head { display: flex; align-items: center; gap: 12px; }
.ind-head .icon { margin: 0; flex: none; width: 46px; height: 46px; }
.ind-head h3 { margin: 0; font-size: 1.08rem; }
.ind-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-chips li { margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .08); color: var(--text); font-size: .78rem; font-weight: 600; }
.ind-chips li::before { display: none; }
.ind-how, .ind-result { margin: 0; font-size: .9rem; }
.ind-how b, .ind-result b { color: var(--text); }
.ind-result { padding: 10px 12px; border-radius: 10px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); color: var(--text); }
.ind-result b { color: var(--ok); }
.ind-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; padding: 6px; border-radius: 10px; background: #0a1835; border: 1px solid var(--border); }
.ind-bars i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(var(--accent-rgb), .45); transform-origin: bottom; }
.ind-bars i.peak { background: var(--accent); }
.ind-bars i.quiet { background: #34d399; }
.reveal.in .ind-bars i { animation: indGrow .8s cubic-bezier(.2,.7,.2,1) both; }
.reveal.in .ind-bars i:nth-child(odd) { animation-delay: .1s; }
@keyframes indGrow { from { transform: scaleY(0); } }
.ind-bars-label { margin: -6px 0 0; font-size: .72rem; color: var(--dim); }
.ind-demo { margin-top: auto; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .9rem; }
.ind-demo svg { width: 16px; height: 16px; transition: transform .2s; }
.ind-demo:hover svg { transform: translateX(4px); }
.ind-cta { margin-top: 28px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; text-align: center; }
.ind-cta p { margin: 0; }
@media (max-width: 1100px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ind-grid { grid-template-columns: 1fr; } }

/* Business Support: related-service links */
.uc-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0 !important; }
.uc-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: .86rem; font-weight: 600; color: var(--accent); }
.uc-links svg { width: 14px; height: 14px; }
.wa-also, .ind-cta p a { color: var(--muted); }
.wa-also { margin: 0 0 16px; font-size: .9rem; }
.wa-also a, .ind-cta p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }