/* ============================================================
   گزارش عملکرد IT — شرکت نیروتوان
   Design system: deep-space glass / neon data
   ============================================================ */

:root{
  --bg:#04060c;
  --bg-2:#070b16;
  --ink:#eaf0ff;
  --ink-2:#9fb0cc;
  --ink-3:#63748f;

  --teal:#00e6c3;
  --blue:#4d8dff;
  --violet:#8b6bff;
  --amber:#ffb020;
  --red:#ff4d6d;
  --brand:#ed1c24;      /* nirutavan mark red */
  --green:#3ddc84;

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.26);

  /* liquid glass */
  --lg-blur:blur(2.5px) saturate(200%) brightness(1.06);
  --lg-spec:
    inset 0 1px 0 0 rgba(255,255,255,.48),
    inset 0 -1px 0 0 rgba(255,255,255,.16),
    inset 1px 0 0 0 rgba(255,255,255,.24),
    inset -1px 0 0 0 rgba(255,255,255,.14),
    inset 0 16px 38px -24px rgba(255,255,255,.7),
    inset 0 -22px 48px -32px rgba(0,230,195,.45);

  --r-lg:22px;
  --r-md:14px;
  --r-sm:9px;

  --shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 2px 0 0 rgba(255,255,255,.04) inset;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(0,230,195,.14), transparent 62%),
    radial-gradient(900px 640px at 10% 8%, rgba(77,141,255,.13), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(139,107,255,.13), transparent 62%),
    linear-gradient(180deg,#04060c,#070b16 45%,#04060c);
}
::selection{background:rgba(0,230,195,.28);color:#fff}
[hidden]{display:none !important}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#05080f}
::-webkit-scrollbar-thumb{background:linear-gradient(#12324a,#0d2233);border-radius:20px;border:2px solid #05080f}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#17485f,#123044)}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;
  background:radial-gradient(900px 600px at 50% 45%, #0a1120, #04060c 70%);
  transition:opacity .85s var(--ease), visibility .85s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-grid{
  position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:linear-gradient(rgba(0,230,195,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,230,195,.09) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  animation:gridFloat 9s linear infinite;
}
@keyframes gridFloat{to{background-position:46px 46px,46px 46px}}
.loader-inner{position:relative;text-align:center;z-index:2}
.loader-mark{display:flex;align-items:center;justify-content:center;gap:16px}
.loader-mark .bolt{
  width:44px;height:58px;fill:none;stroke:var(--teal);stroke-width:2.5;
  stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(0,230,195,.7));
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:boltDraw 1.1s var(--ease) .15s forwards, boltPulse 2s ease-in-out 1.2s infinite;
}
@keyframes boltDraw{to{stroke-dashoffset:0;fill:rgba(0,230,195,.16)}}
@keyframes boltPulse{50%{filter:drop-shadow(0 0 26px rgba(0,230,195,.95))}}
.wordmark{display:flex;gap:.02em;font-weight:900;font-size:clamp(38px,7vw,74px);letter-spacing:-.01em}
.wordmark span{
  display:inline-block;opacity:0;transform:translateY(22px) rotateX(60deg);
  background:linear-gradient(180deg,#ffffff,#8fe9dc 60%,#3fb9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:letterIn .7s var(--ease) forwards;
}
@keyframes letterIn{to{opacity:1;transform:none}}
.loader-sub{
  margin-top:14px;color:var(--ink-2);font-weight:300;letter-spacing:.28em;
  font-size:clamp(11px,1.5vw,14px);opacity:0;animation:fadeUp .8s var(--ease) .85s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loader-bar{
  margin:30px auto 0;width:min(300px,54vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,.09);overflow:hidden;
}
.loader-bar span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  box-shadow:0 0 16px rgba(0,230,195,.8);
  animation:barFill 1.9s var(--ease) .1s forwards;
}
@keyframes barFill{to{width:100%}}

/* ============================================================
   BRAND LOCKUP
   The mark is black-on-transparent, so it cannot sit directly on a near
   black page, and a filter would swing the brand red to cyan. It rides a
   light plaque instead, which keeps both brand colours exact.
   Everything degrades to the typographic wordmark when assets/logo.png
   is absent, so the report never renders half-branded.
   ============================================================ */

/* hold the lockup back until we know whether the file exists */
body:not(.has-logo):not(.no-logo) .loader-mark{opacity:0}
.loader-mark{transition:opacity .35s var(--ease)}

.logo-plaque{
  display:none;place-items:center;
  padding:clamp(16px,2.4vw,26px) clamp(22px,3.4vw,38px);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#eef2f7);
  box-shadow:
    0 26px 70px -24px rgba(0,0,0,.9),
    0 0 54px -10px rgba(237,28,36,.38),
    inset 0 1px 0 0 rgba(255,255,255,.9);
}
.logo-plaque img{display:block;width:clamp(190px,28vw,320px);height:auto}
body.has-logo .logo-plaque{display:grid}
body.has-logo .loader-mark .bolt,
body.has-logo .wordmark{display:none}
body.no-logo .logo-plaque{display:none}

.brand-logo{
  display:none;align-items:center;
  padding:5px 9px;border-radius:9px;
  background:linear-gradient(180deg,#fff,#eef2f7);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9),0 0 18px -6px rgba(237,28,36,.35);
}
.brand-logo img{display:block;height:21px;width:auto}
body.has-logo .brand-logo{display:flex}
body.has-logo .bolt-sm{display:none}

/* a thread of brand red under the loader, so the palette acknowledges it */
body.has-logo .loader-bar span{
  background:linear-gradient(90deg,var(--brand),#ff6a5e 40%,var(--teal));
  box-shadow:0 0 16px rgba(237,28,36,.7);
}

#print-head{display:none}

/* ============================================================
   3D STAGE
   ============================================================ */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(2,4,9,.72) 100%);
}
#scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
#glfail[hidden]{display:none !important}
#glfail{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:rgba(4,6,12,.9);text-align:center;padding:24px}
#glfail h3{font-size:20px;margin-bottom:8px}
#glfail p{color:var(--ink-2)}

/* ============================================================
   TOP BAR
   ============================================================ */
#topbar{
  position:fixed;top:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(14px,3vw,30px);
  background:linear-gradient(180deg,rgba(4,6,12,.86),rgba(4,6,12,0));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.brand{display:flex;align-items:center;gap:11px}
.bolt-sm{width:19px;height:26px;fill:rgba(0,230,195,.18);stroke:var(--teal);stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 9px rgba(0,230,195,.6))}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand-txt span{font-size:10.5px;color:var(--ink-3);font-weight:300;letter-spacing:.12em}
.tools{display:flex;gap:8px}
.tool{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 13px;border-radius:100px;font-family:var(--font);font-size:12px;font-weight:500;
  color:var(--ink-2);background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:.28s var(--ease);
}
.tool:hover{color:#fff;border-color:var(--line-2);background:var(--glass-2);transform:translateY(-1px)}
.tool .ico{font-size:12px;color:var(--teal)}
.tool.on{color:#04120f;background:linear-gradient(90deg,var(--teal),#5ce0ff);border-color:transparent;font-weight:700}
.tool.on .ico{color:#04120f}

/* ============================================================
   RAIL + HUD
   ============================================================ */
#rail{
  position:fixed;inset-inline-start:clamp(10px,2.2vw,26px);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;align-items:center;gap:12px;
  transition:opacity .4s var(--ease);
}
.rail-line{position:absolute;inset-inline-start:5px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.11)}
.rail-line i{position:absolute;top:0;inset-inline-start:0;width:1px;height:0;background:linear-gradient(180deg,var(--teal),var(--blue));box-shadow:0 0 10px var(--teal);transition:height .35s var(--ease)}
#rail-dots{list-style:none;display:flex;flex-direction:column;gap:14px;position:relative}
#rail-dots li{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer}
#rail-dots b{
  width:11px;height:11px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.28);background:rgba(6,10,18,.8);
  transition:.3s var(--ease);
}
#rail-dots em{
  font-style:normal;font-size:11.5px;color:var(--ink-3);white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:.3s var(--ease);pointer-events:none;
}
#rail-dots li:hover em{opacity:1;transform:none;color:var(--ink-2)}
#rail-dots li.active b{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,230,195,.16),0 0 16px var(--teal);transform:scale(1.15)}
#rail-dots li.active em{opacity:1;transform:none;color:#fff;font-weight:600}

#hud{
  position:fixed;inset-inline-end:clamp(12px,2.6vw,30px);bottom:clamp(14px,3vw,28px);z-index:55;
  text-align:end;transition:opacity .4s var(--ease);
}
.hud-idx{display:flex;align-items:baseline;gap:4px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.hud-idx b{font-size:30px;font-weight:800;background:linear-gradient(180deg,#fff,#69d9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-idx i{color:var(--ink-3);font-style:normal}
.hud-idx span{color:var(--ink-3);font-size:14px}
.hud-name{font-size:11px;color:var(--ink-3);letter-spacing:.16em;margin-top:2px}

/* ============================================================
   SECTIONS
   ============================================================ */
#report{position:relative;z-index:10}
.sec{
  min-height:100svh;display:flex;align-items:center;
  padding:110px clamp(20px,7vw,110px) 90px;
  position:relative;
}
.sec[data-align="start"]{justify-content:flex-start}
.sec[data-align="end"]{justify-content:flex-end}
.sec[data-align="center"]{justify-content:center}

.panel{
  width:min(560px,100%);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  padding:clamp(22px,3.4vw,38px);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(38px) scale(.985);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.panel.wide{width:min(1080px,100%)}
.panel::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,230,195,.75),transparent);
}
.panel::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent,var(--teal)),transparent);
  opacity:.7;
}
.sec.in .panel{opacity:1;transform:none}

.kicker{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:11px;letter-spacing:.2em;color:var(--accent,var(--teal));font-weight:600;
}
.kicker .num{
  font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:100px;
  background:color-mix(in srgb, var(--accent,#00e6c3) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent,#00e6c3) 34%, transparent);
}
.kicker .tag{color:var(--ink-3);letter-spacing:.16em}

h1.title{font-size:clamp(30px,5.4vw,58px);font-weight:900;line-height:1.12;letter-spacing:-.02em;margin-bottom:16px}
h2.title{font-size:clamp(24px,3.6vw,40px);font-weight:800;line-height:1.24;letter-spacing:-.015em;margin-bottom:14px}
.title .hl{background:linear-gradient(100deg,var(--accent,var(--teal)),#7fd3ff 60%,#b39bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--ink-2);font-size:clamp(14px,1.5vw,16.5px);line-height:2.05;font-weight:300}
.lead strong{color:#fff;font-weight:600}
.lead + .lead{margin-top:12px}

.bullets{list-style:none;margin-top:18px;display:grid;gap:10px}
.bullets li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;color:var(--ink-2);line-height:1.9;font-weight:300;
}
.bullets li::before{
  content:"";flex:none;margin-top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--accent,var(--teal));box-shadow:0 0 10px var(--accent,var(--teal));
}

/* metric chips */
.metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.metric{
  flex:1 1 140px;min-width:130px;
  padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.032);border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.metric .v{font-size:22px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:4px}
.metric .v small{font-size:11px;font-weight:400;color:var(--ink-3)}
.metric .k{font-size:11px;color:var(--ink-3);margin-top:3px}
.metric.good .v{color:var(--green)}
.metric.warn .v{color:var(--amber)}
.metric.bad  .v{color:var(--red)}
.metric.info .v{color:var(--blue)}

/* before / after strip */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:22px}
.ba-card{padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.028)}
.ba-card h4{font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.14em;margin-bottom:7px}
.ba-card p{font-size:13px;line-height:1.8;color:var(--ink-2);font-weight:300}
.ba-card.old{border-color:rgba(255,77,109,.26);background:rgba(255,77,109,.05)}
.ba-card.new{border-color:rgba(0,230,195,.26);background:rgba(0,230,195,.05)}
.ba-arrow{font-size:19px;color:var(--ink-3);transform:scaleX(-1)}

/* hero */
.hero-meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta span{font-size:10.5px;color:var(--ink-3);letter-spacing:.16em}
.hero-meta b{font-size:15px;font-weight:600}
.scroll-cue{
  position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink-3);font-size:10.5px;letter-spacing:.2em;
  animation:cue 2.4s ease-in-out infinite;z-index:20;
}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(180deg,var(--teal),transparent)}
@keyframes cue{50%{transform:translateX(50%) translateY(9px);opacity:.55}}

/* ============================================================
   DASHBOARD (power savings)
   ============================================================ */
.dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px;margin-top:22px}
@media(max-width:900px){.dash{grid-template-columns:1fr}}
.ctrl{display:grid;gap:16px}
.ctrl .row{display:grid;gap:7px}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-2)}
.ctrl label b{font-size:13.5px;color:#fff;font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,#fff,var(--teal));box-shadow:0 0 12px rgba(0,230,195,.75);cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--teal);box-shadow:0 0 12px rgba(0,230,195,.75);cursor:pointer}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kpi{
  padding:16px;border-radius:var(--r-md);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  position:relative;overflow:hidden;
}
.kpi::after{content:"";position:absolute;inset-inline-end:-24px;top:-24px;width:80px;height:80px;border-radius:50%;background:var(--c,var(--teal));filter:blur(38px);opacity:.28}
.kpi .n{font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--c,var(--teal))}
.kpi .u{font-size:11px;font-weight:400;color:var(--ink-2);margin-inline-start:4px}
.kpi .l{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.note{
  margin-top:16px;padding:12px 14px;border-radius:var(--r-md);
  border:1px dashed rgba(255,176,32,.32);background:rgba(255,176,32,.06);
  font-size:11.5px;line-height:1.9;color:#e2c893;font-weight:300;
}
.note b{color:var(--amber);font-weight:600}

/* ============================================================
   TIMELINE
   ============================================================ */
.tl{position:relative;margin-top:26px;padding-inline-start:26px}
.tl::before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--teal),var(--blue),var(--violet))}
.tl-item{position:relative;padding-bottom:20px}
.tl-item::before{
  content:"";position:absolute;inset-inline-start:-25px;top:5px;width:11px;height:11px;border-radius:50%;
  background:#060a12;border:1.5px solid var(--accent,var(--teal));box-shadow:0 0 12px var(--accent,var(--teal));
}
.tl-item h5{font-size:14px;font-weight:700;margin-bottom:4px}
.tl-item p{font-size:12.5px;color:var(--ink-3);line-height:1.85;font-weight:300}
.tl-item .when{font-size:10.5px;color:var(--accent,var(--teal));letter-spacing:.12em;margin-bottom:3px}

/* ============================================================
   PHONE / TELEGRAM MOCK
   ============================================================ */
.phone{
  width:290px;flex:none;border-radius:34px;padding:11px;
  background:linear-gradient(160deg,#1b2333,#0a0f1a);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 90px -30px #000, 0 0 0 1px rgba(0,0,0,.6) inset;
  position:relative;
}
.phone::before{content:"";position:absolute;top:19px;inset-inline-start:50%;transform:translateX(50%);width:74px;height:5px;border-radius:9px;background:#000;opacity:.75}
.phone-screen{
  border-radius:25px;background:linear-gradient(180deg,#0f1621,#0a111b);
  height:430px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.06);
}
.tg-head{display:flex;align-items:center;gap:9px;padding:15px 13px 11px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.tg-av{width:31px;height:31px;border-radius:50%;background:linear-gradient(150deg,#3ba9ff,#1c7fd6);display:grid;place-items:center;font-size:14px}
.tg-head b{font-size:12.5px;display:block}
.tg-head span{font-size:10px;color:var(--green)}
.tg-body{flex:1;overflow:hidden;padding:12px 11px;display:flex;flex-direction:column;gap:8px}
.bub{
  max-width:82%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.8;
  opacity:0;transform:translateY(10px);animation:bubIn .45s var(--ease) forwards;white-space:pre-line;
}
.bub.me{align-self:flex-start;background:linear-gradient(150deg,#2b6fd6,#1f57ad);border-end-start-radius:5px}
.bub.bot{align-self:flex-end;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.06);border-end-end-radius:5px;color:var(--ink)}
.bub.bot.alert{background:rgba(255,77,109,.14);border-color:rgba(255,77,109,.3)}
.bub.bot.ok{background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.28)}
.bub code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--teal);direction:ltr;display:inline-block}
@keyframes bubIn{to{opacity:1;transform:none}}
.tg-foot{padding:9px 11px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:8px;align-items:center}
.tg-foot .fake-input{flex:1;height:27px;border-radius:100px;background:rgba(255,255,255,.055);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;padding:0 11px}
.tg-foot .send{width:27px;height:27px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:11px}
.phone-wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center}
.phone-side{flex:1 1 260px;min-width:250px}

.cmds{display:grid;gap:8px;margin-top:18px}
.cmd{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12px;
}
.cmd code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--teal);direction:ltr;font-size:11.5px}
.cmd span{color:var(--ink-3);font-size:11.5px;font-weight:300}

/* ============================================================
   TOPOLOGY CONTROLS
   ============================================================ */
.seg{
  display:inline-flex;padding:4px;border-radius:100px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);gap:4px;margin-top:6px;
}
.seg button{
  cursor:pointer;border:0;background:transparent;color:var(--ink-2);
  font-family:var(--font);font-size:12px;font-weight:500;padding:7px 17px;border-radius:100px;transition:.28s var(--ease);
}
.seg button.on{background:linear-gradient(90deg,var(--teal),#57d8ff);color:#04120f;font-weight:700}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.legend div{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 9px currentColor;background:currentColor}

/* summary grid */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:24px}
.sum-card{
  padding:15px;border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;gap:11px;align-items:flex-start;
}
.sum-card i{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:14px;
  background:color-mix(in srgb,var(--c,#00e6c3) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#00e6c3) 32%,transparent);color:var(--c,#00e6c3);
}
.sum-card b{font-size:12.5px;display:block;margin-bottom:3px}
.sum-card p{font-size:11.5px;color:var(--ink-3);line-height:1.75;font-weight:300}

.sign{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;
}
.sign .who span{font-size:10.5px;color:var(--ink-3);letter-spacing:.18em;display:block;margin-bottom:5px}
.sign .who b{font-size:19px;font-weight:800}
.sign .who em{font-style:normal;font-size:12px;color:var(--ink-3);display:block;margin-top:3px}

/* present-mode hint */
#present-hint{
  position:fixed;bottom:20px;inset-inline-start:50%;transform:translateX(50%);
  z-index:70;padding:9px 18px;border-radius:100px;font-size:11.5px;color:var(--ink-2);
  background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(14px);
}

/* present mode */
body.present #topbar,body.present #rail{opacity:0;pointer-events:none}
body.present{overflow:hidden}
body.is-loading{overflow:hidden}

@media(max-width:760px){
  .sec{padding:96px 18px 80px;justify-content:center !important}
  .panel{width:100%}
  #rail{display:none}
  .brand-txt span{display:none}
  .tool em{display:none}
  .tool{padding:9px 11px}
  .ba{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg) scaleX(-1);justify-self:center}
  .kpis{grid-template-columns:1fr 1fr}
}

/* ============================================================
   LIQUID GLASS
   Clear glass, not tinted glass. Nothing darkens the backdrop —
   the pane is legible because light bends and pools at its edges,
   the way a real slab of glass reads against what's behind it.
   ============================================================ */

.panel{
  /* the only fill is a specular sheet: white, and almost entirely absent */
  background:linear-gradient(140deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.022) 26%,
    rgba(255,255,255,.004) 52%,
    rgba(255,255,255,.030) 78%,
    rgba(255,255,255,.085) 100%);
  /* The frame is an inset ring, not a border. A 1px border on a rounded box
     snaps between whole device pixels as the pane travels through the pixel
     grid while scrolling — at 125%/150% display scaling that reads as the
     edge thickening and thinning. An inset shadow antialiases instead. */
  border:0;
  backdrop-filter:var(--lg-blur);
  -webkit-backdrop-filter:var(--lg-blur);
  box-shadow:
    0 40px 100px -40px rgba(0,0,0,.92),
    0 0 44px -18px rgba(0,230,195,.20),
    inset 0 0 0 1px rgba(255,255,255,.17),
    var(--lg-spec);
  isolation:isolate;
}
.panel::before{
  z-index:3;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  opacity:.7;
}
.panel::after{z-index:3}

/* ---------- rim : where the glass actually behaves like a lens ---------- */
.g-dim,.g-rim,.g-rim2,.g-sheen,.g-spec{
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
}

/* Adaptive dimming. Clear glass needs a dimming layer to stay legible, but a
   permanent veil kills the point of clear glass. --lg-dim is driven from the
   luminance actually sampled behind this pane, so it stays at zero over the
   dark scene and only rises where a bright element passes underneath. */
.g-dim{
  background:rgba(3,7,14,var(--lg-dim,0));
  box-shadow:inset 0 0 70px -18px rgba(0,0,0,calc(var(--lg-dim,0) * 1.7));
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
}

/* outer band — wide, soft gathering of light */
.g-rim{
  padding:26px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
/* inner band — the crisp bright edge of the slab */
.g-rim2{
  padding:9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 0 16px -3px rgba(255,255,255,.5);
}
/* dispersion: opposite edges throw different wavelengths */
.g-rim2::before,.g-rim2::after{content:"";position:absolute;inset:0;border-radius:inherit}
.g-rim2::before{box-shadow:inset 2px 2px 0 -1px rgba(0,230,195,.55)}
.g-rim2::after{box-shadow:inset -2px -2px 0 -1px rgba(139,107,255,.5)}

/* the lensing itself runs only on the pane you are reading */
.sec.active .g-rim{
  backdrop-filter:blur(2px) brightness(1.28) saturate(1.7);
  -webkit-backdrop-filter:blur(2px) brightness(1.28) saturate(1.7);
}
.sec.active .g-rim2{
  backdrop-filter:brightness(1.7) saturate(2.1) contrast(1.12);
  -webkit-backdrop-filter:brightness(1.7) saturate(2.1) contrast(1.12);
}
/* real refraction where the browser can do it: the rim samples the backdrop
   from outside the pane, so shapes bend and compress into the edge */
@supports (backdrop-filter:url(#lg-refract)){
  .sec.active .g-rim{
    backdrop-filter:url(#lg-refract) blur(1px) brightness(1.22) saturate(1.7);
    -webkit-backdrop-filter:url(#lg-refract) blur(1px) brightness(1.22) saturate(1.7);
  }
  /* the fringe is now produced by the filter, so the painted one steps aside */
  .sec.active .g-rim2::before{box-shadow:inset 2px 2px 0 -1px rgba(0,230,195,.22)}
  .sec.active .g-rim2::after{box-shadow:inset -2px -2px 0 -1px rgba(139,107,255,.2)}
}

/* ---------- travelling specular ---------- */
.g-sheen{overflow:hidden}
.g-sheen::before{
  content:"";position:absolute;inset:-55%;
  background:conic-gradient(from 200deg at 50% 50%,
    transparent 0deg,
    rgba(255,255,255,.16) 30deg,
    transparent 78deg,
    transparent 206deg,
    rgba(0,230,195,.12) 252deg,
    transparent 300deg);
  animation:lgSheen 22s linear infinite;
  opacity:.72;
}
@keyframes lgSheen{to{transform:rotate(1turn)}}

/* specular hotspot — follows the pointer across the slab, and swells while
   the page is moving. Static highlights read as printed-on; this reads as
   light actually sitting on a surface. */
.g-spec{
  background:radial-gradient(closest-side at var(--hx,26%) var(--hy,10%),
    rgba(255,255,255,.24),
    rgba(255,255,255,.07) 40%,
    transparent 70%);
  opacity:.62;
  transition:opacity .3s var(--ease);
}
/* No scroll-driven transform here. Scaling the slab moved its 1px frame onto
   fractional pixels every frame, which is what made the edge flicker. The
   material still reads as alive through the rim lensing, the rotating sheen
   and the pointer-tracked highlight — none of which touch geometry. */

/* ---------- content above clear glass must be bold and bright ----------
   Thin muted type over a Clear material is the documented failure mode;
   the pane stays transparent and the copy carries the contrast instead. */
.panel .lead{color:#ccdaf0;font-weight:400}
.panel .bullets li{color:#c5d4ec;font-weight:400}
.panel .ba-card p,.panel .sum-card p,.panel .tl-item p{color:#bdcdea;font-weight:400}
.panel .metric .k,.panel .kpi .l,.panel .cmd span{color:#aabdd8}
.panel .hero-meta span,.panel .ba-card h4{color:#93a6c4}

/* ---------- legibility comes from the type, not from a veil ---------- */
.panel .lead,.panel .bullets li,.panel .ba-card p,.panel .sum-card p,
.panel .tl-item p,.panel .metric .k,.panel .kpi .l,.panel .cmd span{
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 16px rgba(0,0,0,.85);
}
.panel .title,.panel .metric .v,.panel .kpi .n,.panel .sign .who b,
.panel .kicker,.panel h4,.panel h5,.panel .hero-meta b{
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 4px 22px rgba(0,0,0,.8);
}

/* ---------- inner cards: thinner panes of the same clear glass ---------- */
.metric,.ba-card,.cmd,.sum-card,.kpi{
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 60%,rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.32),
    inset 0 -1px 0 0 rgba(255,255,255,.08),
    inset 1px 0 0 0 rgba(255,255,255,.12),
    0 14px 30px -22px rgba(0,0,0,.95);
}
.ba-card.old{
  background:linear-gradient(150deg,rgba(255,77,109,.17),rgba(255,77,109,.03));
  border-color:rgba(255,77,109,.4);
}
.ba-card.new{
  background:linear-gradient(150deg,rgba(0,230,195,.16),rgba(0,230,195,.03));
  border-color:rgba(0,230,195,.4);
}

/* ---------- chrome shares the material ---------- */
/* .tool lives in the navigation layer, so it earns a real backdrop */
.tool{
  background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 55%,rgba(255,255,255,.075));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(2px) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.34),
    inset 0 -1px 0 0 rgba(255,255,255,.1),
    0 12px 32px -20px rgba(0,0,0,.95);
}
/* these sit inside a pane — glass on glass muddies the hierarchy and doubles
   the backdrop cost, so they read as thin vibrancy fills instead */
.seg,.phone,.note{
  background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.028) 55%,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.28),
    inset 0 -1px 0 0 rgba(255,255,255,.08),
    0 12px 32px -22px rgba(0,0,0,.95);
}
.tool:hover{
  background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 55%,rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.34);
}
.note{border-color:rgba(255,176,32,.4)}
.note b{text-shadow:none}
.phone{border-radius:34px}
.phone-screen{background:linear-gradient(180deg,rgba(13,20,31,.62),rgba(9,15,25,.55))}
.bub.bot{background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.tl-item{background:transparent}
#topbar{background:linear-gradient(180deg,rgba(4,6,12,.5),rgba(4,6,12,0))}

/* ---------- accessibility: the material adapts, it does not vanish ---------- */

/* Reduced transparency — the glass goes frosty and hides more of the scene */
@media (prefers-reduced-transparency:reduce){
  .panel{
    background:linear-gradient(175deg,rgba(8,13,24,.94),rgba(8,13,24,.9));
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    box-shadow:0 34px 90px -34px rgba(0,0,0,.9),inset 0 1px 0 0 rgba(255,255,255,.2);
  }
  .g-dim,.g-rim,.g-rim2,.g-sheen,.g-spec{display:none}
  .tool{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,16,28,.95)}
  .panel *{text-shadow:none !important}
}

/* Increased contrast — predominantly opaque with a contrasting border */
@media (prefers-contrast:more){
  .panel{
    background:rgba(3,6,12,.97);
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 0 0 1px rgba(0,0,0,.8),0 30px 70px -30px #000;
  }
  .g-dim,.g-rim,.g-rim2,.g-sheen,.g-spec{display:none}
  .lead,.bullets li,.ba-card p,.sum-card p,.tl-item p{color:#dde7f8}
  .metric .k,.kpi .l,.cmd span{color:#c2cfe4}
  .panel *{text-shadow:none !important}
  .metric,.kpi,.ba-card,.sum-card,.cmd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
}

/* Reduced motion — elastic behaviour off, material intact */
@media (prefers-reduced-motion:reduce){
  .g-sheen::before{animation:none}
  .g-spec,.g-dim{transition:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff !important;color:#111 !important;overflow:visible !important}
  body::before,#stage,#vignette,#scanlines,#topbar,#rail,#hud,#loader,#present-hint,.scroll-cue,.phone,.g-dim,.g-rim,.g-rim2,.g-sheen,.g-spec{display:none !important}
  body.has-logo #print-head{
    display:flex !important;align-items:center;gap:10mm;
    padding-bottom:4mm;margin-bottom:6mm;border-bottom:1.5px solid #d8dee8;
  }
  #print-head img{height:16mm;width:auto}
  #print-head b{display:block;font-size:13pt;color:#0d1b2a}
  #print-head span{font-size:9pt;color:#54637a}
  #report{display:block}
  .sec{min-height:0 !important;display:block !important;padding:0 0 14mm !important;break-inside:avoid}
  .sec:not(:first-child){break-before:page}
  .panel{
    width:100% !important;opacity:1 !important;transform:none !important;
    background:#fff !important;border:1px solid #d8dee8 !important;box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    padding:8mm !important;border-radius:6px !important;
  }
  .panel *{text-shadow:none !important}
  .metric,.kpi,.ba-card,.sum-card,.cmd,.tl-item,.note{
    background:#f6f8fb !important;border-color:#dbe2ec !important;box-shadow:none !important;
  }
  .panel::after{background:#0a7f6c !important}
  .title,.metric .v,.kpi .n,.sum-card b,.tl-item h5,.sign .who b{color:#0d1b2a !important;-webkit-text-fill-color:#0d1b2a !important}
  .title .hl{-webkit-text-fill-color:#0a7f6c !important;color:#0a7f6c !important}
  .lead,.bullets li,.ba-card p,.sum-card p,.tl-item p,.metric .k,.kpi .l{color:#3b4759 !important}
  .kicker{color:#0a7f6c !important}
  .metric,.kpi,.ba-card,.sum-card,.cmd,.tl-item{background:#f6f8fb !important;border-color:#dbe2ec !important}
  .note{background:#fff8e8 !important;color:#7a5b12 !important;border-color:#e8cf95 !important}
  .kpi::after{display:none}
  .seg,.ctrl,.legend{display:none !important}
  .phone-wrap{display:block}
}