/* Self-hosted fonts (Oxanium, JetBrains Mono, DM Sans) — latin + latin-ext */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/dm-sans-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/dm-sans-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/oxanium-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/oxanium-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oxanium-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oxanium-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/oxanium-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/oxanium-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/oxanium-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/oxanium-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== Styles (extracted from index.html) ===== */
/* ── VARIABLES ── */
:root{
  --bg:#0d0d14;--bg2:#111118;--bg3:#18181f;
  --green:#7c3aed;--cyan:#10b981;--red:#f43f5e;--amber:#f59e0b;
  --navy:#4c1d95;--navy2:#7c3aed;
  --white:#ededff;--muted:#a3a3b8;
  --border:rgba(124,58,237,.18);--card:rgba(255,255,255,0.03);
  --glow-g:0 0 40px rgba(124,58,237,.3);
  --glow-c:0 0 40px rgba(16,185,129,.3);
  --fd:'Oxanium',sans-serif;--fm:'JetBrains Mono',monospace;--fb:'DM Sans',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--white);font-family:var(--fb);line-height:1.65;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;
  background-image:radial-gradient(circle,rgba(124,58,237,.08) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;z-index:0}

/* Offset anchored scrolls (e.g. /#contact, /#process) so the target clears the
   70px fixed nav instead of hiding underneath it. */
section[id],#cost-calc,#phys-calc{scroll-margin-top:84px}

/* ── PAGE VIEWS ── */
.page{display:none}
.page.active{display:block;width:100%;max-width:100vw;overflow-x:hidden}

/* ── NAV ── */
nav{position:fixed;inset:0 0 auto;z-index:9999;display:flex;align-items:center;
  justify-content:space-between;min-height:70px;padding:.6rem 6%;
  background:rgba(5,8,16,.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);transition:box-shadow .3s}
nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.35)}
.logo{font-family:var(--fd);font-size:1.45rem;font-weight:800;color:var(--white);
  text-decoration:none;display:flex;align-items:center;gap:.5rem;cursor:pointer}
.logo-mark{width:30px;height:30px;border-radius:7px;
  display:grid;place-items:center;font-size:.85rem;flex-shrink:0;object-fit:contain}
.logo em{color:var(--navy2);font-style:normal}
.logo:hover{color:var(--navy2)}
nav ul{list-style:none;display:flex;gap:1.5rem;align-items:center}
nav a{font-family:var(--fm);font-size:.75rem;color:var(--muted);text-decoration:none;
  letter-spacing:.04em;transition:color .2s;white-space:nowrap}
nav a:hover{color:var(--green)}
.nav-dropdown{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
.nav-caret{font-size:.6rem;transition:transform .25s}
.nav-dropdown:hover .nav-caret{transform:rotate(180deg);color:var(--green)}
.nav-drop-menu{position:absolute;top:calc(100% + .9rem);left:50%;
  transform:translateX(-50%) translateY(-8px);min-width:260px;
  background:rgba(5,8,16,.97);backdrop-filter:blur(18px);
  border:1px solid var(--border);border-radius:11px;padding:.5rem;
  list-style:none;display:flex;flex-direction:column;gap:.15rem;
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
  box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:9999}
.nav-drop-menu::before{content:"";position:absolute;top:-.9rem;left:0;right:0;height:.9rem}
.nav-dropdown:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu li a{display:block;padding:.6rem .85rem;border-radius:7px;
  font-size:.78rem;color:var(--muted);white-space:nowrap;transition:.15s}
.nav-drop-menu li a:hover{background:rgba(16,185,129,.1);color:var(--cyan)}
.nav-btn{background:var(--green)!important;color:#000!important;
  padding:.55rem 1.3rem;border-radius:6px;font-weight:700!important;transition:all .2s!important}
.nav-btn:hover{box-shadow:var(--glow-g);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--white);border-radius:2px;transition:.3s}
.lang-switcher{display:flex;gap:.4rem;align-items:center;font-family:var(--fm);font-size:.75rem}
.lang-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:all .2s}
.lang-btn:hover,.lang-btn.active{color:var(--white);border-color:var(--cyan)}

/* ── HERO ── */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;
  padding:130px 6% 90px;overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 55% at 65% 50%,rgba(16,185,129,.09),transparent 65%),
    radial-gradient(ellipse 45% 40% at 15% 65%,rgba(124,58,237,.07),transparent 55%)}
.hero-content{position:relative;z-index:2;max-width:660px}
.badge{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);border:1px solid rgba(124,58,237,.28);
  background:rgba(124,58,237,.05);padding:.4rem 1rem;border-radius:100px;margin-bottom:2rem}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.5)}50%{box-shadow:0 0 0 7px rgba(124,58,237,0)}}
h1{font-family:var(--fd);font-size:clamp(2.6rem,5.5vw,4.6rem);font-weight:800;
  line-height:1.04;letter-spacing:-.025em;margin-bottom:1.5rem}
h1 .strike{position:relative;color:var(--muted)}
h1 .strike::after{content:'';position:absolute;top:52%;left:-2%;right:-2%;height:3px;
  background:var(--red);transform:rotate(-2deg)}
h1 .acc{color:var(--green);text-shadow:var(--glow-g)}
.hero-backup{font-size:.88rem;color:var(--cyan);max-width:540px;margin-bottom:.9rem;line-height:1.6;
  background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);border-radius:8px;padding:.6rem 1rem}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:540px;margin-bottom:2.5rem;line-height:1.75}
.hero-mission{font-size:1.02rem;color:var(--white);max-width:560px;margin:0 0 1.6rem;line-height:1.7;
  padding-left:1rem;border-left:3px solid var(--green)}
.hero-mission strong{color:var(--green)}
.hero-sub strong{color:var(--white);font-weight:500}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3.5rem}
.btn-p{display:inline-flex;align-items:center;gap:.45rem;background:var(--green);color:#000;
  font-family:var(--fd);font-weight:700;font-size:.95rem;
  padding:.85rem 1.9rem;border-radius:8px;text-decoration:none;transition:all .2s;cursor:pointer;border:none}
.btn-p:hover{box-shadow:var(--glow-g);transform:translateY(-2px)}
.btn-s{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);
  color:var(--white);font-family:var(--fd);font-weight:600;font-size:.95rem;
  padding:.85rem 1.9rem;border-radius:8px;text-decoration:none;transition:all .2s;cursor:pointer;background:none}
.btn-s:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c)}
.hero-kpis{display:flex;gap:3rem;flex-wrap:wrap}
.kpi-num{font-family:var(--fd);font-size:2.4rem;font-weight:800;line-height:1}
.kpi-num .u{color:var(--green)}
.kpi-label{font-family:var(--fm);font-size:.65rem;color:var(--muted);letter-spacing:.09em;
  text-transform:uppercase;margin-top:.2rem}
.terminal{position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:470px;background:rgba(10,14,26,.95);
  border:1px solid rgba(124,58,237,.22);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.65),var(--glow-g);
  animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-50%) translateY(0)}50%{transform:translateY(-50%) translateY(-12px)}}
.term-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--border)}
.dots{display:flex;gap:.38rem}
.dots span{width:12px;height:12px;border-radius:50%}
.dots .r{background:#ff5f57}.dots .y{background:#febc2e}.dots .g{background:#28c840}
.term-title{flex:1;text-align:center;font-family:var(--fm);font-size:.68rem;color:var(--muted)}
.term-body{padding:1.4rem 1.5rem;font-family:var(--fm);font-size:.78rem;line-height:1.9}
.tc{color:#3d4d66}.tg{color:var(--green)}.tq{color:var(--cyan)}
.tr{color:var(--red)}.ts{color:#48bb78}.td{color:#4a5568}
.cursor{display:inline-block;width:8px;height:14px;background:var(--green);
  animation:blink 1.1s step-end infinite;vertical-align:middle}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── SHARED ── */
section{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:100px 6%}
.s-label{font-family:var(--fm);font-size:.68rem;color:var(--green);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.s-title{font-family:var(--fd);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;
  line-height:1.05;letter-spacing:-.02em;margin-bottom:1.1rem}
.s-sub{font-size:1rem;color:var(--muted);max-width:540px;line-height:1.75}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--border) 30%,var(--border) 70%,transparent);margin:0 6%}

/* ── PROBLEM ── */
#problem{background:var(--bg2)}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:3.5rem}
.prob-cards{display:flex;flex-direction:column;gap:.9rem}
.prob-card{display:flex;gap:1.1rem;align-items:flex-start;padding:1.15rem;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  opacity:0;transform:translateX(-24px);transition:all .55s cubic-bezier(.16,1,.3,1)}
.prob-card.vis{opacity:1;transform:translateX(0)}
.prob-card:hover{border-color:rgba(255,71,87,.3);background:rgba(255,71,87,.04)}
.prob-card .icon{font-size:1.7rem;flex-shrink:0;padding-top:.1rem}
.prob-card h3{font-family:var(--fd);font-size:.98rem;font-weight:700;margin-bottom:.3rem}
.prob-card p{font-size:.83rem;color:var(--muted);line-height:1.65}
.cost-box{background:rgba(255,71,87,.06);border:1px solid rgba(255,71,87,.18);
  border-radius:14px;padding:2.2rem}
.cost-box h3{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.5rem;line-height:1.5}
.cost-rows{display:flex;flex-direction:column;gap:1.1rem}
.cost-row{display:flex;align-items:center;gap:1rem}
.cost-lbl{font-family:var(--fm);font-size:.72rem;color:var(--muted);min-width:70px}
.cost-val{font-family:var(--fm);font-size:.72rem;font-weight:700;min-width:96px;text-align:right;white-space:nowrap}
.cost-val.vmw{color:#ff6b6b}
.cost-val.prx{color:var(--green)}
.bar-wrap{flex:1;height:28px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.bar{height:100%;border-radius:4px;width:0;transition:width 1.6s cubic-bezier(.16,1,.3,1)}
.bar.vmw{background:linear-gradient(90deg,var(--red),#ff6b6b)}
.bar.prx{background:linear-gradient(90deg,var(--green),var(--cyan))}
.saving{margin-top:1.4rem;padding:.95rem 1.3rem;background:rgba(124,58,237,.07);
  border:1px solid rgba(124,58,237,.2);border-radius:8px;
  display:flex;align-items:center;justify-content:space-between}
.saving-lbl{font-family:var(--fm);font-size:.72rem;color:var(--muted)}
.saving-val{font-family:var(--fd);font-size:1.7rem;font-weight:800;color:var(--green);text-shadow:var(--glow-g)}
.cost-note{font-family:var(--fm);font-size:.65rem;color:var(--muted);margin-top:1rem;line-height:1.6}

/* ── BENEFITS ── */
#benefits{background:var(--bg)}
.ben-head{text-align:center;margin-bottom:3.5rem}
.ben-head .s-sub{margin:0 auto}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ben-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:1.9rem;position:relative;overflow:hidden;transition:all .35s;
  opacity:0;transform:translateY(28px)}
.ben-card.vis{opacity:1;transform:translateY(0)}
.ben-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));opacity:0;transition:.3s}
.ben-card:hover{border-color:rgba(124,58,237,.3);transform:translateY(-5px)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.45),var(--glow-g)}
.ben-card:hover::before{opacity:1}
.ben-icon{font-size:2.4rem;margin-bottom:1rem}
.ben-card h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
.ben-card p{font-size:.87rem;color:var(--muted);line-height:1.7}

/* ── SERVICES ── */
#services{background:var(--bg2)}
.svc-layout{display:grid;grid-template-columns:350px 1fr;gap:4rem;align-items:start;margin-top:3.5rem}
.svc-tabs{display:flex;flex-direction:column;gap:.5rem}
.svc-tab{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border-radius:10px;
  cursor:pointer;border:1px solid transparent;transition:.25s;background:none}
.svc-tab:hover,.svc-tab.active{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.22)}
.svc-tab-ico{font-size:1.4rem;width:36px;flex-shrink:0}
.svc-tab-txt h3{font-family:var(--fd);font-size:.95rem;font-weight:700;color:var(--white)}
.svc-tab-txt p{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.svc-tab.active .svc-tab-txt h3{color:var(--green)}
.svc-panel-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:2.4rem}
.svc-panel{display:none}
.svc-panel.active{display:block}
.svc-panel h3{font-family:var(--fd);font-size:1.5rem;font-weight:700;margin-bottom:.9rem}
.svc-panel p{color:var(--muted);line-height:1.8;margin-bottom:1.4rem;font-size:.9rem}
.feat{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.feat li{display:flex;align-items:center;gap:.7rem;font-size:.88rem}
.feat li::before{content:'';color:var(--green);font-family:var(--fm)}

/* ── PROCESS ── */
#process{background:var(--bg)}
.proc-head{text-align:center;margin-bottom:4.5rem}
.proc-head .s-sub{margin:0 auto}
.timeline{position:relative;display:flex;flex-direction:column;max-width:780px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:27px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--green),var(--cyan),transparent 95%)}
.t-step{display:flex;gap:2rem;align-items:flex-start;padding-bottom:3rem;
  opacity:0;transform:translateX(-20px);transition:all .55s cubic-bezier(.16,1,.3,1)}
.t-step.vis{opacity:1;transform:translateX(0)}
.t-num{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--bg2);border:2px solid var(--green);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:1rem;
  color:var(--green);box-shadow:var(--glow-g);position:relative;z-index:2}
.t-body{padding-top:.7rem}
.t-body h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:.45rem}
.t-body p{font-size:.88rem;color:var(--muted);line-height:1.7}
.t-tag{display:inline-block;font-family:var(--fm);font-size:.62rem;color:var(--cyan);
  border:1px solid rgba(16,185,129,.28);background:rgba(16,185,129,.05);
  padding:.2rem .65rem;border-radius:4px;margin-top:.7rem;letter-spacing:.04em}

/* ── STATS ── */
#stats{background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(16,185,129,.07));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-row{max-width:1180px;margin:0 auto;padding:80px 6%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.st-item{opacity:0;transform:translateY(20px);transition:all .55s cubic-bezier(.16,1,.3,1)}
.st-item.vis{opacity:1;transform:translateY(0)}
.st-num{font-family:var(--fd);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:800;line-height:1}
.col-g{color:var(--green)}.col-c{color:var(--cyan)}
.st-desc{font-size:.82rem;color:var(--muted);margin-top:.45rem}

/* ── PRICING ── */
#pricing{background:var(--bg2)}
.price-head{text-align:center;margin-bottom:3.5rem}
.price-head .s-sub{margin:0 auto}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
.p-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:2.3rem 2rem;position:relative;
  opacity:0;transform:translateY(28px);transition:all .55s cubic-bezier(.16,1,.3,1)}
.p-card.vis{opacity:1;transform:translateY(0)}
.p-card.hot{background:linear-gradient(145deg,rgba(124,58,237,.07),rgba(16,185,129,.07));
  border-color:rgba(124,58,237,.42);box-shadow:var(--glow-g);
  transform:scale(1.03) translateY(0)!important}
.p-card.hot.vis{transform:scale(1.03) translateY(0)}
.p-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--green),var(--cyan));color:#000;
  font-family:var(--fm);font-size:.62rem;font-weight:700;
  padding:.3rem 1.1rem;border-radius:100px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap}
.p-name{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.3rem}
.p-price{font-family:var(--fd);font-size:2.4rem;font-weight:800;line-height:1.1;margin-bottom:.5rem;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:4px;}
.p-price span{font-size:1rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.p-desc{font-size:.83rem;color:var(--muted);margin-bottom:1.8rem;
  padding-bottom:1.8rem;border-bottom:1px solid var(--border)}
.p-feats{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.2rem}
.p-feats li{display:flex;align-items:flex-start;gap:.7rem;font-size:.87rem}
.ch{color:var(--green);font-weight:700;flex-shrink:0}
.cx{color:var(--muted);opacity:.35;flex-shrink:0}
.p-feats li.off{color:var(--muted);opacity:.35}
.btn-out{display:block;text-align:center;border:1px solid var(--green);color:var(--green);
  font-family:var(--fd);font-weight:700;padding:.85rem;border-radius:8px;
  text-decoration:none;transition:all .2s;cursor:pointer;background:none}
.p-card.hot .btn-out,.btn-out:hover{background:var(--green);color:#000;box-shadow:var(--glow-g)}

/* ── FAQ ── */
#faq{background:var(--bg)}
.faq-head{text-align:center;margin-bottom:3.5rem}
.faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--card);transition:border-color .2s}
.faq-item:hover{border-color:rgba(124,58,237,.28)}
.faq-q{width:100%;text-align:left;padding:1.35rem 1.5rem;background:none;border:none;
  color:var(--white);font-family:var(--fd);font-size:.97rem;font-weight:600;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-arr{color:var(--green);font-size:1.3rem;flex-shrink:0;transition:transform .3s;font-family:var(--fm)}
.faq-item.open .faq-arr{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-ai{padding:0 1.5rem 1.35rem;font-size:.88rem;color:var(--muted);line-height:1.8}

/* ── CONTACT ── */
#contact{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.c-left h2{font-family:var(--fd);font-size:clamp(2rem,4vw,3rem);font-weight:800;
  line-height:1.1;margin-bottom:1.3rem}
.c-left h2 em{color:var(--green);font-style:normal}
.c-left p{color:var(--muted);line-height:1.8;margin-bottom:2rem;font-size:.9rem}
.c-info{display:flex;flex-direction:column;gap:.7rem}
.c-info-row{display:flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.82rem}
.c-info-row .ico{color:var(--green)}
.c-form{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:2.3rem}
.fg{margin-bottom:1.1rem}
.fg label{display:block;font-family:var(--fm);font-size:.68rem;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem}
.fg input,.fg textarea,.fg select{width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:7px;padding:.8rem 1rem;
  color:var(--white);font-family:var(--fb);font-size:.93rem;outline:none;transition:border-color .2s,box-shadow .2s}
.fg select option{background:var(--bg2)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.fg textarea{resize:vertical;min-height:95px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-submit{width:100%;background:var(--green);color:#000;border:none;border-radius:8px;
  padding:1rem;font-family:var(--fd);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}
.f-submit:hover{box-shadow:var(--glow-g);transform:translateY(-2px)}

/* ── FOOTER ── */
footer{background:var(--bg);border-top:1px solid var(--border);padding:4.5rem 6% 2.5rem}
.ft{max-width:1180px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.ft-brand p{font-size:.82rem;color:var(--muted);line-height:1.8;margin-top:.9rem;max-width:270px}
.ft-col h4{font-family:var(--fd);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.ft-col a{font-size:.82rem;color:var(--muted);text-decoration:none;transition:color .2s;cursor:pointer}
.ft-col a:hover{color:var(--green)}
.ft-bottom{padding-top:2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ft-bottom p{font-size:.75rem;color:var(--muted)}
.ft-bottom p.mono{font-family:var(--fm);font-size:.65rem}

/* ── ANIMATION HELPERS ── */
.fade-up{opacity:0;transform:translateY(28px);transition:all .6s cubic-bezier(.16,1,.3,1)}
.fade-up.vis{opacity:1;transform:translateY(0)}

/* ── COST CALCULATOR ── */
#cost-calc{background:var(--bg2)}
.calc-wrap{max-width:900px;margin:0 auto;padding:100px 6%}
.calc-header{text-align:center;margin-bottom:3rem}
.slider-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.8rem;margin-bottom:2rem}
.slider-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.slider-label{font-family:var(--fm);font-size:.75rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.slider-value{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--white)}
.range-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cyan) var(--fill,50%),rgba(255,255,255,.1) var(--fill,50%));outline:none;margin:0 0 2rem 0;cursor:pointer}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cyan);border:2px solid var(--bg);box-shadow:0 0 12px rgba(16,185,129,.6);cursor:pointer;transition:.15s}
.range-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cyan);border:2px solid var(--bg);box-shadow:0 0 12px rgba(16,185,129,.6);cursor:pointer}
.calc-results{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.calc-card{border-radius:12px;padding:1.8rem;text-align:center}
.calc-card.vmware{background:rgba(255,71,87,.06);border:1px solid rgba(255,71,87,.25)}
.calc-card.proxmox{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.25)}
.calc-card-title{font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.calc-card-price{font-family:var(--fd);font-size:2rem;font-weight:800;line-height:1.1}
.calc-card.vmware .calc-card-price{color:#ff6b6b}
.calc-card.proxmox .calc-card-price{color:var(--green);text-shadow:var(--glow-g)}
.calc-card-sub{font-family:var(--fm);font-size:.68rem;color:var(--muted);margin-top:.4rem}
.calc-saving-banner{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(16,185,129,.1));border:1px solid rgba(124,58,237,.3);border-radius:12px;padding:1.8rem;text-align:center;margin-top:1.5rem}
.calc-saving-label{font-family:var(--fm);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.calc-saving-amount{font-family:var(--fd);font-size:2.8rem;font-weight:800;color:var(--green);text-shadow:var(--glow-g);line-height:1}
.calc-saving-pct{font-family:var(--fm);font-size:.9rem;color:var(--cyan);margin-top:.3rem}
.vmware-breakdown{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.vmw-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:.72rem}
.vmw-row-label{color:var(--muted)}
.vmw-row-val{color:#ff8a80;font-weight:700}
.vmw-row.total .vmw-row-label{color:var(--white);font-weight:700}
.vmw-row.total .vmw-row-val{color:#ff4757;font-size:.85rem}
.prx-breakdown{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.prx-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:.72rem}
.prx-row-label{color:var(--muted)}
.prx-row-val{color:#69ff47;font-weight:700}
.prx-row.total .prx-row-label{color:var(--white);font-weight:700}
.prx-row.total .prx-row-val{color:var(--green);font-size:.85rem}
.calc-note{font-family:var(--fm);font-size:.65rem;color:var(--muted);text-align:center;margin-top:1rem;line-height:1.7}
.core-preset-btn{background:none;border:1px solid var(--border);color:var(--muted);font-family:var(--fm);font-size:.68rem;padding:.3rem .65rem;border-radius:5px;cursor:pointer;transition:all .15s;white-space:nowrap}
.core-preset-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.core-preset-btn.active-preset{background:rgba(16,185,129,.12);border-color:var(--cyan);color:var(--cyan);font-weight:700}

/* ── PRICING TOGGLE ── */
.pricing-toggle-wrap{display:inline-flex;background:var(--bg3);padding:6px;border-radius:12px;border:1px solid var(--border);margin:2.5rem auto 1rem auto;gap:4px}
.pricing-toggle-btn{background:none;border:none;color:var(--muted);font-family:var(--fd);font-size:.9rem;font-weight:600;padding:.75rem 1.6rem;border-radius:9px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:8px}
.pricing-toggle-btn:hover{color:var(--white)}
.pricing-toggle-btn.active{background:linear-gradient(135deg,var(--green),var(--cyan));color:#000;box-shadow:var(--glow-g)}
.toggle-icon{font-size:1.05rem}
.pricing-group{display:none}
.pricing-group.active{display:block}

/* ── ARTICLE PAGES ── */
.art-page{padding-top:68px;width:100%;overflow-x:hidden;position:relative;left:0}
/* Article pages are now standalone files (no .art-page wrapper), so the hero
   must clear the fixed 70px nav itself — was hidden underneath it on entry. */
.art-hero-section{position:relative;padding:128px 6% 80px;overflow:hidden;width:100%}
.art-hero-section.cyan-hero{background:linear-gradient(180deg,rgba(16,185,129,.04) 0%,transparent 60%)}
.art-hero-section.red-hero{background:linear-gradient(180deg,rgba(255,71,87,.04) 0%,transparent 60%)}
.art-hero-section::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 30%,var(--border) 70%,transparent)}
.art-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.art-tag{font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(16,185,129,.28);background:rgba(16,185,129,.05);padding:.3rem .85rem;border-radius:100px}
.art-tag.red{color:var(--red);border-color:rgba(255,71,87,.28);background:rgba(255,71,87,.05)}
.art-tag.green{color:var(--green);border-color:rgba(124,58,237,.28);background:rgba(124,58,237,.05)}
.art-date{font-family:var(--fm);font-size:.68rem;color:var(--muted)}
.art-hero-section h1{font-family:var(--fd);font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800;
  line-height:1.05;letter-spacing:-.025em;margin-bottom:1.3rem;max-width:820px}
.art-hero-section h1 em{color:var(--green);font-style:normal}
.art-hero-section h1 .r{color:var(--red)}
.art-hero-section h1 .g{color:var(--green)}
.art-hero-section .lead{font-size:1.08rem;color:var(--muted);max-width:680px;line-height:1.8;margin-bottom:2rem}
.art-stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.a-stat .a-stat-num{font-family:var(--fd);font-size:1.8rem;font-weight:800;color:var(--green)}
.a-stat .a-stat-lbl{font-family:var(--fm);font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.hero-kpis-art{display:flex;gap:2.5rem;flex-wrap:wrap}
.h-kpi .h-kpi-num{font-family:var(--fd);font-size:2rem;font-weight:800;line-height:1}
.h-kpi .h-kpi-num.red{color:var(--red)}
.h-kpi .h-kpi-num.green{color:var(--green)}
.h-kpi .h-kpi-num.amber{color:var(--amber)}
.h-kpi .h-kpi-lbl{font-family:var(--fm);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}

/* Article body */
.art-body{max-width:860px;margin:0 auto;padding:80px 6% 100px}
.toc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.8rem;margin-bottom:3.5rem}
.toc-title{font-family:var(--fm);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.45rem}
.toc ol li{counter-increment:toc;display:flex;align-items:baseline;gap:.6rem;font-size:.88rem}
.toc ol li::before{content:counter(toc,decimal-leading-zero);font-family:var(--fm);font-size:.62rem;color:var(--green);flex-shrink:0}
.toc-red ol li::before{color:var(--red)}
.toc ol li a{color:var(--muted);text-decoration:none;transition:color .2s}
.toc ol li a:hover{color:var(--white)}
.art-section{margin-bottom:4rem;scroll-margin-top:80px}
.step-label{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.7rem}
.step-num{width:22px;height:22px;border-radius:50%;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);display:grid;place-items:center;font-size:.6rem;font-weight:700;flex-shrink:0}
.s-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.art-body h2{font-family:var(--fd);font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.9rem;line-height:1.15}
.art-body h2 .acc{color:var(--cyan)}
.art-body h2 .acc-r{color:var(--red)}
.art-body h2 .acc-g{color:var(--green)}
.art-body h2 .acc-c{color:var(--cyan)}
.art-body h3{font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--white);margin:1.8rem 0 .6rem}
.art-body p{color:var(--muted);line-height:1.85;margin-bottom:1rem;font-size:.93rem}
.art-body p strong{color:var(--white);font-weight:500}

/* Code blocks */
.code-block{background:rgba(10,14,26,.95);border:1px solid rgba(124,58,237,.18);border-radius:10px;overflow:hidden;margin:1.5rem 0}
.code-bar{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
.code-dots{display:flex;gap:.35rem}
.code-dots span{width:10px;height:10px;border-radius:50%}
.code-dots .r{background:#ff5f57}.code-dots .y{background:#febc2e}.code-dots .g{background:#28c840}
.code-title{flex:1;text-align:center;font-family:var(--fm);font-size:.65rem;color:var(--muted)}
.code-body{padding:1.3rem 1.5rem;font-family:var(--fm);font-size:.8rem;line-height:1.9;overflow-x:auto}
.c-c{color:#3d4d66}.c-g{color:var(--green)}.c-q{color:var(--cyan)}
.c-r{color:var(--red)}.c-s{color:#48bb78}.c-w{color:var(--white)}.c-m{color:#f6c90e}

/* Info boxes */
.info-box{border-radius:10px;padding:1.3rem 1.5rem;margin:1.5rem 0;display:flex;gap:1rem;align-items:flex-start}
.info-box.tip{background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.2)}
.info-box.warn{background:rgba(255,71,87,.05);border:1px solid rgba(255,71,87,.2)}
.info-box.info{background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2)}
.info-box.amber{background:rgba(246,201,14,.05);border:1px solid rgba(246,201,14,.2)}
.info-ico{font-size:1.2rem;flex-shrink:0;margin-top:.1rem}
.info-box p{margin:0;font-size:.86rem}
.info-box.tip p{color:rgba(124,58,237,.8)}
.info-box.warn p{color:rgba(255,100,120,.85)}
.info-box.info p{color:rgba(16,185,129,.8)}
.info-box.amber p{color:rgba(246,201,14,.85)}

/* Checklist */
.checklist{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:1rem 0 1.5rem}
.checklist li{display:flex;align-items:flex-start;gap:.75rem;font-size:.88rem;color:var(--muted)}
.checklist li::before{content:'✓';color:var(--green);font-family:var(--fm);font-weight:700;flex-shrink:0;margin-top:.1rem}
.checklist li.ok::before{content:'✓';color:var(--green)}
.checklist li.no::before{content:'✗';color:var(--red)}

/* Phases */
.phases{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.phase{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.3rem 1.5rem;display:flex;gap:1.2rem;align-items:flex-start;transition:border-color .2s}
.phase:hover{border-color:rgba(124,58,237,.25)}
.phase-num{font-family:var(--fd);font-size:1.6rem;font-weight:800;color:rgba(124,58,237,.2);line-height:1;flex-shrink:0;min-width:36px}
.phase h3{font-family:var(--fd);font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.phase p{margin:0;font-size:.83rem}

/* Article tables */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border-radius:10px;border:1px solid var(--border)}
.art-body table{width:100%;border-collapse:collapse;font-size:.85rem}
.art-body thead tr{background:rgba(255,255,255,.04)}
.art-body th{font-family:var(--fm);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--border)}
.art-body td{padding:.8rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted)}
.art-body tr:last-child td{border-bottom:none}
.art-body tr:hover td{background:rgba(255,255,255,.015)}
.td-tool{color:var(--white);font-weight:500;font-family:var(--fm);font-size:.78rem}
.td-ok{color:var(--green);font-family:var(--fm);font-size:.75rem}
.td-warn{color:#f6c90e;font-family:var(--fm);font-size:.75rem}
.td-cat{color:var(--white);font-weight:500;font-size:.83rem}
.td-bad{color:#ff6b6b;font-family:var(--fm);font-size:.76rem}
.td-good{color:var(--green);font-family:var(--fm);font-size:.76rem}
.td-mid{color:var(--amber);font-family:var(--fm);font-size:.76rem}

/* Article callouts */
.callout-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.8rem 0}
.callout{border-radius:12px;padding:1.5rem;text-align:center}
.callout.red{background:rgba(255,71,87,.06);border:1px solid rgba(255,71,87,.22)}
.callout.green{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.22)}
.callout.amber{background:rgba(246,201,14,.06);border:1px solid rgba(246,201,14,.22)}
.callout-num{font-family:var(--fd);font-size:2.2rem;font-weight:800;line-height:1}
.callout.red .callout-num{color:var(--red)}
.callout.green .callout-num{color:var(--green);text-shadow:var(--glow-g)}
.callout.amber .callout-num{color:var(--amber)}
.callout-lbl{font-family:var(--fm);font-size:.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.45rem;line-height:1.5}

/* TCO bars */
.tco-bars{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.tco-row{display:flex;flex-direction:column;gap:.4rem}
.tco-label-row{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.72rem}
.tco-label{color:var(--white)}
.tco-value{font-weight:700}
.tco-value.red{color:var(--red)}.tco-value.green{color:var(--green)}
.tco-track{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.tco-fill{height:100%;border-radius:5px;transition:width 1.4s cubic-bezier(.16,1,.3,1)}
.tco-fill.red{background:linear-gradient(90deg,#ff4757,#ff6b6b)}
.tco-fill.green{background:linear-gradient(90deg,#7c3aed,#10b981)}

/* Risk grid */
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.risk-card{background:rgba(255,71,87,.04);border:1px solid rgba(255,71,87,.18);border-radius:10px;padding:1.3rem}
.risk-card h3{font-family:var(--fd);font-size:.9rem;font-weight:700;color:#ff8a80;margin-bottom:.45rem;display:flex;align-items:center;gap:.5rem}
.risk-card p{margin:0;font-size:.82rem;color:var(--muted)}

/* ROI table */
.roi-table{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:1.5rem 0}
.roi-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:rgba(255,255,255,.04);padding:.7rem 1.2rem;border-bottom:1px solid var(--border)}
.roi-header span{font-family:var(--fm);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:right}
.roi-header span:first-child{text-align:left}
.roi-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:.75rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.04);align-items:center}
.roi-row:last-child{border-bottom:none;background:rgba(124,58,237,.04)}
.roi-row span{font-family:var(--fm);font-size:.78rem;text-align:right;color:var(--muted)}
.roi-row span:first-child{text-align:left;color:var(--white);font-size:.84rem}
.roi-row.total span{color:var(--green);font-weight:700}
.roi-row.total span:first-child{color:var(--white)}

/* Article divider & CTA */
.art-hr{height:1px;background:linear-gradient(90deg,transparent,var(--border) 30%,var(--border) 70%,transparent);margin:3rem 0}
.art-cta{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(16,185,129,.08));border:1px solid rgba(124,58,237,.25);border-radius:14px;padding:2.5rem;text-align:center;margin-top:4rem}
.art-cta h3{font-family:var(--fd);font-size:1.5rem;font-weight:800;margin-bottom:.7rem}
.art-cta p{font-size:.9rem;color:var(--muted);margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}

/* Article nav back button */
.art-back{font-family:var(--fm);font-size:.72rem;color:var(--muted);text-decoration:none;cursor:pointer;transition:color .2s}
.art-back:hover{color:var(--green)}

/* Blog links on homepage */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:3rem}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:2rem;cursor:pointer;transition:all .35s;text-decoration:none;display:block}
.blog-card:hover{border-color:rgba(124,58,237,.3);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.blog-card .bc-tag{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:.8rem}
.blog-card h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.6rem;line-height:1.25}
.blog-card p{font-size:.85rem;color:var(--muted);line-height:1.65;margin-bottom:1.2rem}
.blog-card .bc-arrow{font-family:var(--fm);font-size:.75rem;color:var(--green)}

/* Article scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:all .6s cubic-bezier(.16,1,.3,1)}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .terminal{display:none}
  .prob-grid,.svc-layout,.price-grid,.contact-grid{grid-template-columns:1fr}
  .ben-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .risk-grid{grid-template-columns:1fr}
  .callout-row{grid-template-columns:1fr 1fr}
  nav ul{display:none}
  nav ul.open{display:flex;flex-direction:column;position:fixed;top:70px;left:0;right:0;
    background:var(--bg2);border-bottom:1px solid var(--border);padding:1.5rem 6%;gap:1.2rem;z-index:998;
    max-height:calc(100vh - 70px);overflow-y:auto}
  nav ul.open li{width:100%;text-align:center}
  .hamburger{display:flex}
  /* Articles dropdown → tap-to-expand accordion on mobile */
  .nav-dropdown{width:100%}
  .nav-drop-toggle{justify-content:space-between;width:100%}
  .nav-drop-menu{position:static;transform:none!important;opacity:1;visibility:visible;min-width:0;width:100%;
    box-shadow:none;border:none;background:none;backdrop-filter:none;
    padding:0;margin:0;overflow:hidden;max-height:0;text-align:left;
    transition:max-height .3s ease}
  .nav-drop-menu li{width:100%;text-align:left}
  /* Article titles can be long — allow them to wrap instead of overflowing left */
  .nav-drop-menu li a{white-space:normal!important;overflow-wrap:break-word;display:block;width:100%;text-align:left;padding-left:.5rem}
  .nav-drop-menu::before{display:none}
  .nav-dropdown.expanded .nav-drop-menu{max-height:760px;padding:.25rem 0}
  .nav-dropdown.expanded .nav-caret{transform:rotate(180deg);color:var(--green)}
}
@media(max-width:640px){
  .ben-grid{grid-template-columns:1fr}
  .hero-kpis{gap:2rem}
  .f-row{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;text-align:center}
  .calc-results{grid-template-columns:1fr}
  .art-stats{gap:1.5rem}
  .roi-header,.roi-row{grid-template-columns:2fr 1fr 1fr}
  .roi-header span:nth-child(4),.roi-row span:nth-child(4){display:none}
  /* Fix: articles overflowing / shifting left on mobile — keep titles readable */
  .callout-row{grid-template-columns:1fr}
  .blog-grid{margin-top:2rem}
  .blog-card{padding:1.5rem}
  .blog-card h3,.art-hero-section h1,.art-body h2,.art-body h3,.phase h3,.toc ol li a{
    overflow-wrap:break-word;word-break:break-word;hyphens:auto}
  .art-hero-section{padding:104px 5% 60px}
  .art-body{padding:56px 5% 80px}
  .hero-kpis-art{gap:1.4rem}
  /* Prevent article pages from shifting left on mobile */
  .art-page,.art-hero-section,.art-body,.art-section{
    overflow-x:hidden;max-width:100%;box-sizing:border-box}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tco-bars,.roi-table,.risk-grid,.phases{max-width:100%;overflow-x:hidden}
  .art-meta{flex-wrap:wrap;gap:.4rem}
  #nav-menu{max-width:100vw}
}
/* Global safeguard against horizontal overflow on small screens */
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
/* Accessibility: visually hidden but available to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ═══════════════════════════════════════════════════
   THEME: MODERN SAAS (Notion / Linear / Vercel style)
   Violet + emerald accents, soft shadows, large rounded
   corners. Palette is defined once in :root at the top of
   this file; the rules below add the structural/shape and
   light-violet (#a78bfa) accents that differ from the base.
   ═══════════════════════════════════════════════════ */

/* ── NAV ── */
nav {
  background: rgba(13,13,20,.8);
  border-bottom: 1px solid rgba(124,58,237,.12);
  backdrop-filter: blur(24px);
  border-radius: 0;
  min-height: 70px;
  padding: .6rem 5%;
}

.logo em { color: #7c3aed; }
nav a:hover { color: #7c3aed; }
.nav-btn { background: #7c3aed !important; color: #fff !important; border-radius: 8px !important; }
.nav-btn:hover { box-shadow: 0 4px 20px rgba(124,58,237,.5) !important; }
.lang-btn { border-radius: 6px; border-color: rgba(124,58,237,.25); }
.lang-btn.active { background: rgba(124,58,237,.15); border-color: #7c3aed; color: #a78bfa; }

/* ── HERO ── */
#hero {
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(124,58,237,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(16,185,129,.1) 0%, transparent 60%),
    #0d0d14;
}

h1 .acc {
  color: #a78bfa;
  text-shadow: 0 0 30px rgba(124,58,237,.5);
  background: linear-gradient(135deg, #7c3aed, #a78bfa, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-mission { border-left-color: #7c3aed !important; }
.hero-mission strong { color: #a78bfa !important; }

.hero-backup {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.2);
  color: #6ee7b7;
}

.badge {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.3);
  color: #a78bfa;
  border-radius: 100px;
}

.badge-dot { background: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,.6); }

.kpi-num .u { color: #7c3aed; }

/* ── BUTTONS ── */
.btn-p {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(124,58,237,.35);
  font-weight: 600;
}

.btn-p:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,.5);
  transform: translateY(-2px);
}

.btn-s {
  border-color: rgba(124,58,237,.35);
  border-radius: 10px;
  color: #a78bfa;
}

.btn-s:hover {
  border-color: #7c3aed;
  color: #a78bfa;
  background: rgba(124,58,237,.06);
  box-shadow: 0 4px 16px rgba(124,58,237,.15);
}

/* ── SECTIONS ── */
.s-label { color: #a78bfa; letter-spacing: .14em; }
.s-title span { color: #a78bfa !important; }

section { border-bottom: 1px solid rgba(124,58,237,.06); }
#problem { background: #111118; }
#benefits { background: #0d0d14; }
#articles { background: #111118 !important; }
#pricing { background: #0d0d14; }
#faq { background: #111118; }
#contact { background: #0d0d14; }

.hr { background: linear-gradient(90deg, transparent, rgba(124,58,237,.2) 30%, rgba(124,58,237,.2) 70%, transparent); }

/* ── CARDS ── */
.prob-card, .ben-card, .p-card, .f-card, .blog-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(124,58,237,.12);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.ben-card:hover {
  background: rgba(124,58,237,.06);
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 8px 40px rgba(124,58,237,.15);
  transform: translateY(-5px) !important;
}

.ben-card::before { background: linear-gradient(90deg, #7c3aed, #10b981); }

.prob-card:hover { border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.04); }

/* ── PROCESS ── */
.t-step {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 16px;
}

.step-num {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
}

/* ── STATS ── */
#stats {
  background: linear-gradient(135deg, #0d0d14 0%, #111118 100%);
  border-top: 1px solid rgba(124,58,237,.12);
  border-bottom: 1px solid rgba(124,58,237,.12);
}

.stat-num { color: #a78bfa; }
.stat-num .u { color: #10b981; }
.st-item { border-color: rgba(124,58,237,.15); }

/* ── PRICING ── */
.p-badge {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
}

.p-card { border-radius: 20px; }

.p-card.hot {
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(16,185,129,.06));
  border-color: rgba(124,58,237,.4);
  border-width: 2px;
  box-shadow: 0 20px 60px rgba(124,58,237,.2);
}

.p-price { color: #a78bfa; }
.p-card.hot .p-price { color: #a78bfa; }
.p-feats .ch { color: #10b981; }
.p-card.hot .p-feats .ch { color: #10b981; }

.btn-out {
  border-color: rgba(124,58,237,.3);
  color: #a78bfa;
  border-radius: 8px;
}

.btn-out:hover { background: rgba(124,58,237,.08); border-color: #7c3aed; }

.p-card.hot .btn-out {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
}

/* ── FAQ ── */
.f-card { border-radius: 12px; }
.f-card[open] {
  background: rgba(124,58,237,.05);
  border-color: rgba(124,58,237,.25);
}

/* ── CONTACT ── */
.f-input, .f-select, .f-textarea {
  background: rgba(255,255,255,.04);
  border-color: rgba(124,58,237,.2);
  border-radius: 10px;
  color: #ededff;
}

.f-input:focus, .f-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.f-submit {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(124,58,237,.35);
}

.f-submit:hover { box-shadow: 0 8px 32px rgba(124,58,237,.5); }

/* ── FOOTER ── */
footer { background: #111118; border-top: 1px solid rgba(124,58,237,.1); }
.ft-heading { color: #a78bfa; }

/* ── TERMINAL ── */
.terminal {
  border-color: rgba(124,58,237,.3);
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(124,58,237,.15);
}

.tg { color: #a78bfa; }
.tq { color: #10b981; }
.ts { color: #6ee7b7; }

/* ── NAV DROP ── */
.nav-drop-menu {
  background: rgba(17,17,24,.96);
  border-color: rgba(124,58,237,.2);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 20px rgba(124,58,237,.1);
}

.nav-drop-menu li a:hover { background: rgba(124,58,237,.08); color: #a78bfa; }

/* ── CALC ── */
.calc-card { background: rgba(255,255,255,.03); border-radius: 14px; border-color: rgba(124,58,237,.12); }
.calc-card.vmware .calc-card-price { color: #f43f5e; }
.calc-card.proxmox .calc-card-price { color: #10b981; }

.calc-saving-banner {
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(16,185,129,.06));
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 14px;
}

.calc-saving-amount { color: #a78bfa; }
.calc-saving-label { color: #888899; }

/* ── INFO BOXES ── */
.info-box { background: rgba(255,255,255,.025); border-radius: 12px; }
.info-box.tip { border-left-color: #7c3aed; }
.info-box.warn { border-left-color: #f59e0b; }
.info-box.info { border-left-color: #10b981; }

/* ── ARTICLE ── */
.art-hero-section {
  background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(124,58,237,.15) 0%, transparent 70%), #0d0d14;
}

.toc { background: rgba(255,255,255,.03); border-color: rgba(124,58,237,.15); border-radius: 12px; }
.art-body code { background: rgba(124,58,237,.1); color: #a78bfa; border: 1px solid rgba(124,58,237,.2); border-radius: 4px; }
.art-body h2 .acc { color: #10b981; }
.art-body h2 .acc-r { color: #f43f5e; }
.art-body h2 .acc-g { color: #10b981; }

/* ── PRICING TOGGLE ── */
.pricing-toggle-btn.active {
  background: linear-gradient(135deg, #7c3aed, #10b981);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
}

/* ── PHASE / STEP NUMS ── */
.phase-num {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(124,58,237,.35);
}

/* ── BLOG CARD ── */
.blog-card { border-radius: 16px; }
.blog-card:hover {
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 8px 30px rgba(124,58,237,.12);
}

/* ── SAVING VALS ── */
.saving-val { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,.3); }

/* ═══════════════════════════════════════════════════
   WCAG AA CONTRAST FIX
   The violet accent (#7c3aed) used as TEXT only reaches ~2.7:1 on the dark
   background. Use a lighter violet (#b39dff ≈ 8:1) for every text usage of
   the accent, while keeping #7c3aed for backgrounds/borders/glows.
   ═══════════════════════════════════════════════════ */

/* Accent used as TEXT → lighter violet that passes AA */
.s-label,
.hero-mission strong,
.kpi-num .u,
.cost-val.prx,
.svc-tab.active .svc-tab-txt h3,
.ch,
.feat li::before,
.faq-arr,
.c-left h2 em,
.c-info-row .ico,
.prx-row.total .prx-row-val,
.prx-row-val,
.bc-arrow,
.col-g, .c-g, .tg,
.art-hero-section h1 em,
.art-hero-section h1 .g,
.a-stat .a-stat-num,
.h-kpi .h-kpi-num.green,
.step-label,
.art-body h2 .acc-g,
.td-ok, .td-good,
.toc ol li::before,
.checklist li::before,
.checklist li.ok::before,
.c-info-row a,
nav a:hover,
.ft-col a:hover,
[style*="color:var(--green)"],
[style*="color: var(--green)"] {
  color: #b39dff !important;
}

/* Positive financial values → readable emerald (passes AA) */
.saving-val,
.calc-saving-amount,
.callout.green .callout-num {
  color: #34d399 !important;
}

/* Pricing-card "from" amount and section accents stay light violet */
.p-price { color: #b39dff; }

/* TOC links: ensure default state has enough contrast too */
.toc ol li a { color: #b6b6c8; }
.toc ol li a:hover { color: #ffffff; }

/* ── MOBILE PAINT BUDGET ──
   Mirror the inline critical-CSS mobile overrides so the heavy composited
   layers stay off once this async stylesheet loads. backdrop-filter (blur) and
   large layered radial-gradients are some of the most expensive things to paint
   on a throttled mobile GPU; flat backgrounds and near-opaque bars look the
   same at mobile scale but cut paint time and improve FCP/INP. */
@media (max-width: 1100px) {
  body::before { display: none; }
  #hero { background: #0d0d14; }
  nav { background: rgba(5,8,16,.95); }
  /* Drop every frosted-glass blur on mobile in one rule — nav, mobile drawer,
     article hero/header, cards. The near-opaque backgrounds above keep these
     surfaces readable without the per-frame blur compositing cost. */
  *, *::before, *::after { backdrop-filter: none !important; }
}

/* Article-listing category headings */
.art-cat{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--white);letter-spacing:-.01em;margin:2.6rem 0 1.1rem;display:flex;align-items:center;gap:.6rem}
.art-cat::before{content:"";width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,#7c3aed,#10b981)}
.art-cat:first-of-type{margin-top:.4rem}

/* Articles dropdown grouped by audience */
.nav-drop-head{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8aa0;padding:.55rem .85rem .25rem;pointer-events:none;cursor:default}
.nav-drop-menu li.nav-drop-head + li a{margin-top:0}
.nav-drop-menu li.nav-drop-head:not(:first-child){border-top:1px solid var(--border);margin-top:.35rem;padding-top:.6rem}