/* avs-theme-v1.css: light and dark for every page of www.avs-voip.com (13 Oct 2026).
   Dark is the default and is the palette already written into each page.
   Light is switched on with <html data-theme="light"> (set by the toggle in /assets/avs-theme-v1.js, saved in localStorage "avs-theme").
   Also holds the sun and moon toggle and the welcome screen (splash) on the home page.
   Files under /assets/ are cached for 30 days: change this file under a new name (v2) and update every page. */

:root{
  color-scheme:dark;
  --readout:#e6d6ff;        /* glowing number text */
  --hot:#ff8197;            /* rival prices, "down" */
  --glow-soft:rgba(139,44,245,.35);
  --top-bg:rgba(7,11,24,.72);
  --top-bg-solid:rgba(7,11,24,.92);
  --band-alt-top:#0a1022;
  --panel-hot:linear-gradient(180deg,#121a36,#0c1326);
  --shadow-menu:0 24px 48px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  color-scheme:light;
  --night:#f4f5fb;
  --deck:#ffffff;
  --deck-2:#eef0f7;
  --wire:#dde1ee;
  --wire-hi:#c3cadf;
  --ink:#0e1430;
  --ink-2:#3e4866;
  --ink-3:#59637f;
  --violet:#8b2cf5;
  --violet-hi:#6b1fd1;
  --violet-glow:rgba(139,44,245,.28);
  --signal:#0a7a50;
  --fault:#a85a00;
  --readout:#5a17c4;
  --hot:#c0263f;
  --glow-soft:rgba(139,44,245,.12);
  --top-bg:rgba(244,245,251,.8);
  --top-bg-solid:rgba(244,245,251,.95);
  --band-alt-top:#e9ebf6;
  --panel-hot:linear-gradient(180deg,#fbf8ff,#ffffff);
  --shadow-menu:0 24px 48px rgba(14,20,48,.14);
}

/* ---------- Light: fixes for colours the home page writes directly ---------- */
:root[data-theme="light"] body{background:var(--night);color:var(--ink)}
:root[data-theme="light"] a:hover{color:var(--ink)}
:root[data-theme="light"] .top{background:var(--top-bg)}
:root[data-theme="light"] .top.scrolled{background:var(--top-bg-solid)}
:root[data-theme="light"] .top.open{background:var(--night)}
:root[data-theme="light"] .top.open .nav{box-shadow:var(--shadow-menu)}
:root[data-theme="light"] .brand-word{background:linear-gradient(100deg,#9a4dff 0%,#7a24e8 45%,#5a17c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .btn-ghost:hover,:root[data-theme="light"] .avs-btn-ghost:hover{color:var(--ink)}
:root[data-theme="light"] .grid-bg{background-image:linear-gradient(to right,rgba(60,72,120,.10) 1px,transparent 1px),linear-gradient(to bottom,rgba(60,72,120,.10) 1px,transparent 1px)}
:root[data-theme="light"] .board{background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(139,44,245,.08),transparent 60%),linear-gradient(180deg,#ffffff,#f8f8fd)}
:root[data-theme="light"] .avs-counter-num{color:var(--readout);text-shadow:0 0 18px rgba(139,44,245,.18)}
:root[data-theme="light"] .avs-counter.tick .avs-counter-num{color:#3a0a8a;text-shadow:0 0 22px rgba(139,44,245,.35)}
:root[data-theme="light"] .band-alt{background:linear-gradient(180deg,var(--band-alt-top),var(--night))}
:root[data-theme="light"] .avs-calc-result{background:var(--panel-hot);box-shadow:0 0 0 1px rgba(139,44,245,.12),0 30px 80px -50px var(--violet-glow)}
:root[data-theme="light"] .avs-input-num,:root[data-theme="light"] .avs-out,:root[data-theme="light"] .avs-big-num,
:root[data-theme="light"] .reach .big,:root[data-theme="light"] .uptime b{color:var(--readout);text-shadow:none}
:root[data-theme="light"] .avs-save-num,:root[data-theme="light"] .saved b,:root[data-theme="light"] .avs-rival-save{text-shadow:none}
:root[data-theme="light"] .avs-save-total{text-shadow:none;animation:none}
:root[data-theme="light"] .avs-err{color:#b3261e}
:root[data-theme="light"] .avs-seg button:hover{background:rgba(14,20,48,.05)}
:root[data-theme="light"] .partner{color:#4b0fb0;background:rgba(139,44,245,.08)}
:root[data-theme="light"] .diagram .box-hot{fill:#f3ebff}
:root[data-theme="light"] .diagram .path-live{filter:none}
:root[data-theme="light"] .cmp-them .cmp-total b,:root[data-theme="light"] .avs-rival-num,
:root[data-theme="light"] .cmp-them li::before{color:var(--hot)}
:root[data-theme="light"] .avs-rival-total{color:#a3213a}
:root[data-theme="light"] .avs-rival{background:linear-gradient(180deg,rgba(217,70,95,.10),rgba(217,70,95,.03))}
:root[data-theme="light"] .cmp-them{background:linear-gradient(180deg,rgba(217,70,95,.10),rgba(217,70,95,.02))}
:root[data-theme="light"] .cmp-us{background:linear-gradient(180deg,rgba(10,122,80,.08),rgba(10,122,80,.02))}
:root[data-theme="light"] .avs-save-yes{background:rgba(10,122,80,.07);border-color:rgba(10,122,80,.35)}
:root[data-theme="light"] .proof,:root[data-theme="light"] .saved{background:rgba(10,122,80,.06)}
:root[data-theme="light"] .who li svg{filter:none}
:root[data-theme="light"] .avs-range::-webkit-slider-runnable-track{box-shadow:none}
:root[data-theme="light"] .sig-mark{box-shadow:none}

/* ---------- Sun and moon toggle (in the header of every page) ---------- */
.theme-btn{
  flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r-sm,6px);
  background:var(--deck);border:1px solid var(--wire-hi);color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.theme-btn:hover{border-color:var(--violet-hi);color:var(--violet-hi)}
.theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}

/* ---------- Welcome screen on the home page: "What type of customer are you?" ---------- */
.splash:focus{outline:none}
.splash{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:var(--night);color:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.avs-splash .splash{display:flex}
html.avs-splash body{overflow:hidden}
.splash .grid-bg{position:fixed}
.splash-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter,16px)}
.splash-top .brand{margin-right:auto}
.splash-q{position:relative;z-index:1;text-align:center;padding:clamp(8px,2vw,20px) var(--gutter,16px) 0}
.splash-q h1{font-size:clamp(30px,3.8vw,56px);font-variation-settings:"wdth" 120;font-weight:780;letter-spacing:-.025em;line-height:1.02}
.splash-q p{color:var(--ink-2);margin-top:12px;font-size:clamp(17px,1.5vw,20px)}
.splash-split{position:relative;z-index:1;flex:1 0 auto;display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(16px,2.2vw,30px);border-top:1px solid var(--wire)}
.splash-split::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--violet-hi),var(--wire) 30%,var(--wire) 70%,transparent);box-shadow:0 0 14px var(--violet-glow)}
.splash-split::after{content:"or";position:absolute;left:50%;top:clamp(120px,22vh,220px);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--night);border:1px solid var(--violet);color:var(--violet-hi);font:600 15px var(--mono,monospace);box-shadow:0 0 18px -4px var(--violet-glow)}
.splash-choice{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:clamp(20px,2.4vw,36px) clamp(18px,3vw,48px) clamp(24px,2.6vw,36px);
  color:var(--ink);text-decoration:none;transition:background .2s;
}
.splash-choice:hover,.splash-choice:focus-visible{background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--glow-soft),transparent 75%);color:var(--ink)}
.splash-choice:focus-visible{outline-offset:-6px}
.splash-tag{font-family:var(--mono,monospace);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-hi)}
.splash-choice h2{font-size:clamp(30px,3.4vw,46px)}
.splash-choice p{color:var(--ink-2);max-width:44ch;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;min-height:4.5em}
.splash-art{width:100%;max-width:min(520px,54vh);aspect-ratio:720/440;margin:0}
.splash-art img{width:100%;height:100%;object-fit:contain}
.splash-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.splash-list li{font-size:14.5px;color:var(--ink-2);border:1px solid var(--wire-hi);border-radius:999px;padding:5px 12px;background:var(--deck)}
.splash-go{margin-top:auto}
.splash-go .btn{pointer-events:none}
.splash-foot{position:relative;z-index:1;text-align:center;color:var(--ink-2);font-size:15px;padding:14px var(--gutter,16px) 22px;border-top:1px solid var(--wire)}
.splash-foot a{white-space:nowrap}
.splash-foot button{background:none;border:0;padding:4px;color:var(--violet-hi);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:760px){
  .splash-split{grid-template-columns:1fr;flex:0 0 auto}
  .splash-go{margin-top:6px}
  .splash-split::before,.splash-split::after{display:none}
  .splash-choice + .splash-choice{border-top:1px solid var(--wire)}
  .splash-choice{gap:10px}
  .splash-art{max-width:420px}
  .splash-choice p{min-height:0}
  .splash-list li{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.splash-choice{transition:none}}

/* Home page header: the Partners link and the toggle need a little room between 1081 and 1320 px wide. */
@media (min-width:1081px) and (max-width:1320px){
  .top-in:has(.btn-call){gap:14px}
  .top-in:has(.btn-call) .nav a{padding:8px 8px;font-size:15.5px}
  .top-in:has(.btn-call) .nav a.on::after{left:8px;right:8px}
  .top-in:has(.btn-call) .btn-call{padding:0 14px}
}
.top-in:has(.btn-call) .nav a{white-space:nowrap}
@media (min-width:1081px) and (max-width:1200px){
  .top-in:has(.btn-call) .btn-call{font-size:0;gap:0;width:48px;padding:0}
  .top-in:has(.btn-call) .btn-call svg{width:20px;height:20px}
}
.top-in:has(.btn-call) .btn-call svg{flex:none}