/* ================================================================
   BlueWave IT — pricing.css
   Page-specific styles for pricing.html
   ================================================================ */

    /* ── TOKENS ── */
    :root {
      --bg:        #060e1a;
      --bg-alt:    #0a1523;
      --bg-card:   rgba(255,255,255,0.038);
      --bg-card-h: rgba(255,255,255,0.065);
      --text:      #eef4fc;
      --muted:     #7d9ab8;
      --muted-2:   #a4bdd4;
      --line:      rgba(255,255,255,0.09);
      --line-s:    rgba(255,255,255,0.14);
      --cyan:      #00c2cb;
      --cyan-2:    #38d9e8;
      --cyan-3:    #b2f5ff;
      --blue:      #0f4c81;
      --blue-m:    #1565a8;
      --green:     #3ee89a;
      --amber:     #ffcf4e;
      --danger:    #ff5f5f;
      --shadow:    0 20px 64px rgba(0,0,0,0.50);
      --shadow-sm: 0 8px 28px rgba(0,0,0,0.30);
      --shadow-c:  0 4px 24px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
      --r:         20px;
      --r-sm:      13px;
      --max:       1240px;
      --hh:        72px;
      --fd: 'Questrialf', sans-serif;
      --fd-head: 'Questrial', sans-serif;
      --fb: 'DM Sans', sans-serif;
      --fm: 'DM Mono', monospace;
    }
    body.theme-light {
      --bg:        #f3f8fd;
      --bg-alt:    #e8f1fa;
      --bg-card:   rgba(255,255,255,0.85);
      --bg-card-h: rgba(255,255,255,0.98);
      --text:      #0a1628;
      --muted:     #4d6b88;
      --muted-2:   #3d5a74;
      --line:      rgba(10,22,40,0.09);
      --line-s:    rgba(10,22,40,0.15);
      --shadow:    0 20px 64px rgba(10,22,40,0.14);
      --shadow-sm: 0 8px 28px rgba(10,22,40,0.10);
      --shadow-c:  0 4px 24px rgba(10,22,40,0.10);
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; font-family: var(--fb); font-size: 1rem;
      line-height: 1.7; color: var(--text);
      background:
        radial-gradient(ellipse 80% 55% at 0% 0%,   rgba(0,194,203,0.12), transparent 50%),
        radial-gradient(ellipse 60% 45% at 100% 5%,  rgba(15,76,129,0.11), transparent 50%),
        linear-gradient(180deg, #060e1a 0%, #07101e 100%);
      overflow-x: hidden; transition: background 250ms ease, color 250ms ease;
    }
    body.theme-light {
      background:
        radial-gradient(ellipse 80% 55% at 0% 0%,   rgba(0,194,203,0.07), transparent 50%),
        radial-gradient(ellipse 60% 45% at 100% 5%,  rgba(15,76,129,0.06), transparent 50%),
        linear-gradient(180deg, #f3f8fd 0%, #edf4fb 100%);
    }
    h1,h2,h3,h4 { font-family: var(--fd); margin: 0; }
    h1 { font-family: var(--fd); font-weight: 400; letter-spacing: 0.01em; }
    h2 { font-family: var(--fd); font-weight: 400; letter-spacing: 0.01em; }
    h3 { font-family: var(--fd); font-weight: 600; letter-spacing: -0.01em; }
    h3 { font-family: var(--fd); font-weight: 600; letter-spacing: -0.01em; }
    h4 { font-weight: 600; letter-spacing: -0.01em; }
    p  { margin: 0; }
    a  { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    .container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

    /* ── REVEAL ── */
    .reveal { opacity:0; transform:translateY(26px); transition:opacity 650ms cubic-bezier(0.16,1,0.3,1), transform 650ms cubic-bezier(0.16,1,0.3,1); }
    .reveal.is-visible { opacity:1; transform:none; }
    .d1{transition-delay:80ms} .d2{transition-delay:160ms} .d3{transition-delay:240ms}

    /* ── HEADER ── */
    .site-header { position:sticky; top:0; z-index:60; backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); background:rgba(6,14,26,0.72); border-bottom:1px solid var(--line); transition:background 200ms, box-shadow 200ms; }
    body.theme-light .site-header { background:rgba(243,248,253,0.82); }
    .site-header.scrolled { background:rgba(6,14,26,0.95); box-shadow:0 8px 32px rgba(0,0,0,0.30); border-bottom-color:var(--line-s); }
    body.theme-light .site-header.scrolled { background:rgba(243,248,253,0.97); box-shadow:0 8px 32px rgba(10,22,40,0.10); }
    .nav { min-height:var(--hh); display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .logo { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
    .logo-mark { width:42px; height:42px; border-radius:12px; flex:0 0 auto; background: linear-gradient(135deg, rgba(0,194,203,0.25), rgba(15,76,129,0.30)); border: 1px solid rgba(56,217,232,0.24); box-shadow: 0 0 28px rgba(0,194,203,0.16); display:grid; place-items:center; overflow:hidden; }
    .logo-wordmark { display:flex; flex-direction:column; line-height:1.1; }
    .logo-wordmark strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
    .logo-wordmark span { color:var(--muted); font-size:0.73rem; letter-spacing:0.09em; text-transform:uppercase; }
    .nav-links { display:flex; gap:4px; align-items:center; }
    .nav-links a { color:var(--muted-2); font-size:0.94rem; font-weight:500; padding:6px 12px; border-radius:8px; transition:color 160ms, background 160ms; }
    .nav-links a:hover { color:var(--text); background:rgba(255,255,255,0.05); }
    .nav-links a.active { color:var(--cyan-2); }
    body.theme-light .nav-links a:hover { background:rgba(10,22,40,0.05); }
    .nav-right { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
    .tog { display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--line); }
    body.theme-light .tog { background:rgba(10,22,40,0.04); }
    .tog-btn { border:0; background:transparent; color:var(--muted); padding:6px 11px; border-radius:999px; font-size:0.83rem; font-weight:500; transition:all 180ms; }
    .tog-btn.active { background:rgba(56,217,232,0.15); color:var(--text); }
    .nav-toggle { display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line-s); background:rgba(255,255,255,0.04); color:var(--text); font-size:1.2rem; align-items:center; justify-content:center; }
    .mobile-menu { display:none; padding:0 0 14px; }
    .mobile-menu.open { display:grid; gap:8px; }
    .mobile-menu a, .mobile-menu .m-row, .mobile-menu .mobile-menu-theme { padding:11px 14px; border-radius:13px; background:var(--bg-card); border:1px solid var(--line); color:var(--text); font-size:0.95rem; font-weight:500; display:flex; align-items:center; gap:10px; }
    .mobile-menu .m-row { flex-wrap:wrap; gap:8px; }

    /* ── BUTTONS ── */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:999px; border:1px solid transparent; font-family:var(--fd); font-size:0.93rem; font-weight:600; letter-spacing:0.01em; transition:transform 200ms, box-shadow 200ms, background 200ms, border-color 200ms; white-space:nowrap; }
    .btn-primary { background:linear-gradient(130deg, #00c2cb, #38d9e8); color:#031922; box-shadow:0 6px 22px rgba(0,194,203,0.32), inset 0 1px 0 rgba(255,255,255,0.20); }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,194,203,0.42), inset 0 1px 0 rgba(255,255,255,0.20); }
    .btn-secondary { background:rgba(255,255,255,0.04); border-color:var(--line-s); color:var(--text); }
    .btn-secondary:hover { background:rgba(255,255,255,0.08); border-color:rgba(56,217,232,0.30); transform:translateY(-2px); }
    body.theme-light .btn-secondary { background:rgba(10,22,40,0.04); }
    body.theme-light .btn-secondary:hover { background:rgba(10,22,40,0.08); }

    /* ── SHARED ── */
    .section-label { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(56,217,232,0.18); background:rgba(255,255,255,0.03); color:var(--cyan-3); font-size:0.79rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; }
    .section-label::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan-2); box-shadow:0 0 0 5px rgba(56,217,232,0.10); flex:0 0 auto; }
    body.theme-light .section-label { background:rgba(10,22,40,0.04); color:var(--blue-m); }
    .gradient-text { background:linear-gradient(105deg, #4beaf4 0%, #00c2cb 45%, #6af0fc 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
    body.theme-light .gradient-text { background:linear-gradient(105deg, #006f80, #009ab0); -webkit-background-clip:text; background-clip:text; }
    .icon-svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    section { padding:68px 0; }
    .band { background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .feature-list { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
    .feature-list li { display:flex; gap:10px; align-items:flex-start; color:var(--muted-2); font-size:0.95rem; }
    .feature-list li::before { content:""; width:18px; height:18px; margin-top:2px; flex:0 0 auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }

    /* ── PAGE HERO ── */
    .page-hero { position:relative; overflow:hidden; padding:88px 0 72px; isolation:isolate; }
    .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0,0,0,0.6), transparent 70%); }
    body.theme-light .page-hero::before { background-image:linear-gradient(rgba(10,22,40,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10,22,40,0.03) 1px, transparent 1px); }
    .page-hero::after { content:""; position:absolute; z-index:-1; width:600px; height:600px; border-radius:50%; right:-200px; top:-200px; background:radial-gradient(circle, rgba(0,194,203,0.13), transparent 65%); filter:blur(40px); animation:floatGlow 12s ease-in-out infinite; }
    @keyframes floatGlow { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(0,-20px) scale(1.04)} }
    .hero-breadcrumb { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:0.85rem; margin-bottom:24px; }
    .hero-breadcrumb a { transition:color 160ms; }
    .hero-breadcrumb a:hover { color:var(--text); }
    .hero-breadcrumb .sep { opacity:0.4; }
    .hero-breadcrumb .current { color:var(--cyan-2); }
    .hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
    .page-hero h1 { font-size:clamp(3rem, 6vw, 5.2rem); line-height:0.92; margin-bottom:24px; }
    .page-hero p  { color:var(--muted-2); max-width:58ch; font-size:1.08rem; margin:0 0 32px; }

    /* Hero price display */
    .hero-price-display {
      background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
      border:1px solid var(--line-s); border-radius:26px;
      padding:32px; box-shadow:var(--shadow); position:relative; overflow:hidden;
    }
    .hero-price-display::before { content:""; position:absolute; inset:auto -20% -20% auto; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(0,194,203,0.16), transparent 65%); pointer-events:none; }
    .hpd-label { font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
    .hpd-price { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
    .hpd-price strong { font-family:var(--fm); font-size:4.5rem; font-weight:500; line-height:1; background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .hpd-price span { color:var(--muted-2); font-size:1rem; }
    .hpd-note { color:var(--muted); font-size:0.84rem; margin-bottom:24px; }
    .hpd-includes { display:grid; gap:8px; margin-bottom:24px; }
    .hpd-item { display:flex; align-items:center; gap:10px; font-size:0.90rem; color:var(--muted-2); }
    .hpd-item::before { content:""; width:16px; height:16px; margin-right:2px; flex:0 0 auto; display:inline-block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee89a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; vertical-align:middle; }
    .hpd-divider { height:1px; background:var(--line); margin:16px 0; }
    .hpd-total-row { display:flex; justify-content:space-between; align-items:center; }
    .hpd-total-label { color:var(--muted); font-size:0.84rem; }
    .hpd-total-val { font-family:var(--fd); font-size:1.4rem; font-weight:700; color:var(--text); }

    /* ── INTERACTIVE CALCULATOR ── */
    .calc-section { padding:0 0 72px; }
    .calc-wrap {
      background:var(--bg-card); border:1px solid var(--line); border-radius:28px;
      overflow:hidden; box-shadow:var(--shadow);
    }
    .calc-header { padding:28px 32px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .calc-header h2 { font-size:clamp(1.6rem, 2.5vw, 2.2rem); }
    .calc-header p  { color:var(--muted-2); font-size:0.94rem; margin-top:6px; max-width:50ch; }
    .calc-live-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background:rgba(56,217,232,0.08); border:1px solid rgba(56,217,232,0.20); color:var(--cyan-3); font-size:0.78rem; font-weight:600; white-space:nowrap; }
    .calc-live-dot { width:7px; height:7px; border-radius:50%; background:var(--cyan-2); animation:cldot 2s infinite; }
    @keyframes cldot { 0%,100%{opacity:1} 50%{opacity:0.3} }

    .calc-body { display:grid; grid-template-columns:1fr 1fr; }
    .calc-inputs { padding:32px; border-right:1px solid var(--line); }
    .calc-output { padding:32px; }

    /* Slider groups */
    .slider-group { margin-bottom:28px; }
    .slider-group:last-child { margin-bottom:0; }
    .slider-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .slider-label { font-weight:600; font-size:0.97rem; }
    .slider-val { font-family:var(--fm); font-size:1rem; color:var(--cyan-2); padding:5px 12px; border-radius:8px; background:rgba(56,217,232,0.08); border:1px solid rgba(56,217,232,0.16); }
    .slider-desc { color:var(--muted); font-size:0.82rem; margin-bottom:12px; }
    input[type=range] { width:100%; -webkit-appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,0.10); outline:none; }
    body.theme-light input[type=range] { background:rgba(10,22,40,0.12); }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); cursor:pointer; box-shadow:0 2px 10px rgba(0,194,203,0.40); border:2px solid rgba(255,255,255,0.15); }
    input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); cursor:pointer; border:2px solid rgba(255,255,255,0.15); }

    /* Output side */
    .calc-out-total { text-align:center; padding:24px; background:linear-gradient(135deg, rgba(0,194,203,0.09), rgba(15,76,129,0.12)); border:1px solid rgba(56,217,232,0.18); border-radius:18px; margin-bottom:20px; }
    .calc-out-label { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:8px; }
    .calc-out-num { font-family:var(--fm); font-size:3.2rem; font-weight:500; line-height:1; background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .calc-out-period { color:var(--muted-2); font-size:0.88rem; margin-top:4px; }

    .calc-breakdown { display:grid; gap:10px; margin-bottom:20px; }
    .calc-row { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:rgba(255,255,255,0.025); border:1px solid var(--line); border-radius:12px; }
    body.theme-light .calc-row { background:rgba(10,22,40,0.03); }
    .calc-row-label { font-size:0.88rem; color:var(--muted-2); }
    .calc-row-val { font-family:var(--fm); font-size:0.92rem; color:var(--text); font-weight:500; }
    .calc-row-val.highlight { color:var(--cyan-2); }

    .calc-savings { padding:16px; background:rgba(62,232,154,0.06); border:1px solid rgba(62,232,154,0.18); border-radius:14px; }
    .calc-savings-head { display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:600; color:#a8ffd6; margin-bottom:6px; }
    .calc-savings-head::before { content:""; width:16px; height:16px; flex:0 0 auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee89a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 2.5-1 4.5-3 6l-1 1H9l-1-1C6 13.5 5 11.5 5 9a7 7 0 0 1 7-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
    .calc-savings-body { font-size:0.82rem; color:var(--muted-2); line-height:1.5; }

    /* ── PLAN CARD ── */
    .plan-section { padding:72px 0; }
    .plan-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; }
    .plan-card {
      background:linear-gradient(160deg, rgba(0,194,203,0.07), rgba(15,76,129,0.05), rgba(255,255,255,0.025));
      border:1px solid rgba(56,217,232,0.22); border-radius:28px;
      padding:36px; position:relative; overflow:hidden;
      box-shadow:var(--shadow);
    }
    .plan-card::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,194,203,0.10), transparent 60%); pointer-events:none; }
    .plan-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px; background:linear-gradient(130deg, var(--cyan), var(--cyan-2)); color:#031922; font-size:0.80rem; font-weight:700; font-family:var(--fd); letter-spacing:0.04em; margin-bottom:20px; }
    .plan-name { font-size:1.3rem; font-weight:700; margin-bottom:8px; }
    .plan-desc { color:var(--muted-2); font-size:0.96rem; margin-bottom:24px; max-width:48ch; line-height:1.65; }
    .plan-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
    .plan-price-row strong { font-family:var(--fm); font-size:4rem; font-weight:500; line-height:1; background:linear-gradient(135deg, var(--cyan), var(--cyan-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .plan-price-row span { color:var(--muted-2); font-size:0.97rem; }
    .plan-sub { color:var(--muted); font-size:0.84rem; margin-bottom:28px; }
    .plan-divider { height:1px; background:var(--line); margin:24px 0; }

    .includes-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:28px; }
    .inc-item { display:flex; align-items:flex-start; gap:9px; padding:12px; background:rgba(255,255,255,0.025); border:1px solid var(--line); border-radius:12px; transition:border-color 200ms, background 200ms; }
    .inc-item:hover { border-color:rgba(56,217,232,0.22); background:rgba(255,255,255,0.045); }
    .inc-icon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(0,194,203,0.15), rgba(15,76,129,0.20)); border:1px solid rgba(56,217,232,0.16); color:var(--cyan-3); flex:0 0 auto; }
    .inc-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .inc-name { font-size:0.86rem; font-weight:600; color:var(--text); line-height:1.3; }
    .inc-sub  { font-size:0.76rem; color:var(--muted); line-height:1.3; }

    /* Side card */
    .side-cards { display:grid; gap:18px; }
    .side-card { background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:24px; }
    .side-card h3 { font-size:1.05rem; margin-bottom:10px; }
    .side-card p  { color:var(--muted-2); font-size:0.92rem; line-height:1.6; margin-bottom:14px; }
    .free-badge { display:inline-flex; align-items:baseline; gap:8px; margin-bottom:10px; }
    .free-badge strong { font-family:var(--fm); font-size:2.2rem; font-weight:500; background:linear-gradient(135deg, var(--green), #5af0b2); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .free-badge span { color:var(--muted-2); font-size:0.88rem; }

    /* ── SERVICE MATRIX ── */
    .matrix-section { padding:72px 0; }
    .matrix-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); }
    .matrix-table { width:100%; border-collapse:collapse; min-width:640px; }
    .matrix-table thead th { padding:18px 20px; text-align:left; font-family:var(--fd); font-size:0.80rem; font-weight:700; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; background:var(--bg-alt); border-bottom:1px solid var(--line-s); }
    .matrix-table thead th:first-child { width:40%; }
    .matrix-table thead th.col-managed { color:var(--cyan-2); }
    .matrix-table tbody tr { border-bottom:1px solid var(--line); transition:background 150ms; }
    .matrix-table tbody tr:last-child { border-bottom:0; }
    .matrix-table tbody tr:hover { background:rgba(255,255,255,0.02); }
    body.theme-light .matrix-table tbody tr:hover { background:rgba(10,22,40,0.02); }
    .matrix-table td { padding:14px 20px; font-size:0.92rem; vertical-align:middle; }
    .matrix-table td:first-child { color:var(--text); font-weight:500; }
    .matrix-table td:not(:first-child) { text-align:center; }
    .col-managed { background:rgba(0,194,203,0.03); }
    .m-check { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:rgba(62,232,154,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee89a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat; border:1px solid rgba(62,232,154,0.22); font-size:0; color:transparent; }
    .m-dash  { color:var(--muted); opacity:0.35; font-size:1.2rem; }
    .m-part  { font-size:0.78rem; color:var(--amber); font-style:italic; }
    .matrix-cat { background:var(--bg-alt) !important; }
    .matrix-cat td { padding:10px 20px; color:var(--muted); font-size:0.76rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; border-bottom:1px solid var(--line) !important; }

    /* ── ROI ESTIMATOR (simplified) ── */
    .roi-section { padding:72px 0; }
    .roi-wrap { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }

    /* ── Inputs card ── */
    .roi-inputs {
      background:linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
      border:1px solid var(--line-s); border-radius:24px; overflow:hidden;
      box-shadow:var(--shadow-sm);
    }
    body.theme-light .roi-inputs { background:rgba(255,255,255,0.80); }
    .roi-inputs-head { padding:22px 26px 18px; border-bottom:1px solid var(--line-s); }
    .roi-inputs-head h3 { font-size:1.1rem; margin:0; }
    .roi-inputs-body { padding:20px 26px 26px; display:flex; flex-direction:column; gap:22px; }

    /* Individual input groups */
    .roi-input-group { display:flex; flex-direction:column; gap:8px; margin:0; }
    .roi-input-label { font-size:0.85rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:8px; cursor:default; }
    .roi-input-hint { font-size:0.73rem; font-weight:400; color:var(--muted); font-style:italic; }
    .roi-slider-row { display:flex; align-items:center; gap:12px; }
    .roi-slider-val { font-family:var(--fm); font-size:0.88rem; color:var(--cyan-2); padding:4px 12px; border-radius:8px; background:rgba(56,217,232,0.10); border:1px solid rgba(56,217,232,0.22); min-width:52px; text-align:center; white-space:nowrap; flex-shrink:0; }
    .roi-input-row { display:flex; align-items:stretch; }
    .roi-prefix { font-family:var(--fm); font-size:0.82rem; color:var(--muted); padding:9px 11px; background:rgba(255,255,255,0.03); border:1px solid var(--line-s); border-radius:var(--r-sm) 0 0 var(--r-sm); border-right:0; white-space:nowrap; display:flex; align-items:center; }
    body.theme-light .roi-prefix { background:rgba(10,22,40,0.04); }
    .roi-input-row input[type=number] { flex:1; padding:9px 12px; border-radius:0 var(--r-sm) var(--r-sm) 0; border:1px solid var(--line-s); background:rgba(255,255,255,0.04); color:var(--text); font:inherit; font-family:var(--fm); font-size:0.92rem; outline:none; transition:border-color 180ms, box-shadow 180ms; min-width:0; }
    .roi-input-row input[type=number]:focus { border-color:rgba(56,217,232,0.45); box-shadow:0 0 0 3px rgba(56,217,232,0.10); }
    body.theme-light .roi-input-row input[type=number] { background:rgba(255,255,255,0.80); }

    /* Advanced toggle */
    .roi-advanced-section { border-top:1px solid var(--line-s); padding-top:18px; margin-top:4px; display:flex; flex-direction:column; gap:6px; }
    .roi-advanced-toggle { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.03); border:1px solid var(--line-s); border-radius:10px; padding:8px 14px; color:var(--muted-2); font-size:0.83rem; font-weight:600; cursor:pointer; transition:border-color 160ms, color 160ms, background 160ms; width:fit-content; }
    .roi-advanced-toggle:hover { border-color:rgba(56,217,232,0.35); color:var(--cyan-2); background:rgba(56,217,232,0.05); }
    .roi-advanced-hint { font-size:0.74rem; color:var(--muted); line-height:1.4; }
    .roi-advanced-body { margin-top:6px; }

    /* ── Results card — matches .calc-wrap / .hero-price-display pattern ── */
    .roi-results {
      background:var(--bg-card); border:1px solid var(--line-s); border-radius:24px;
      overflow:hidden; box-shadow:var(--shadow); padding:28px;
      display:flex; flex-direction:column; gap:20px; position:relative;
    }
    .roi-results::before { content:""; position:absolute; inset:auto -15% -15% auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(0,194,203,0.12), transparent 65%); pointer-events:none; z-index:0; }
    body.theme-light .roi-results { background:rgba(255,255,255,0.85); }

    /* 1. Headline — styled like .calc-out-total */
    .roi-result-headline {
      text-align:center; padding:24px 20px;
      background:linear-gradient(135deg, rgba(0,194,203,0.10), rgba(15,76,129,0.13));
      border:1px solid rgba(56,217,232,0.20); border-radius:18px; position:relative; z-index:1;
    }
    .roi-result-hl-label { font-size:0.76rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .roi-result-hl-amount { font-family:var(--fm); font-size:3.2rem; font-weight:500; line-height:1; background:linear-gradient(135deg,var(--cyan),var(--cyan-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

    /* 2. Breakdown rows — styled like .calc-row */
    .roi-result-breakdown { display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
    .roi-result-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; }
    body.theme-light .roi-result-row { background:rgba(10,22,40,0.04); }
    .roi-result-row-lbl { font-size:0.88rem; color:var(--muted-2); }
    .roi-result-row-val { font-family:var(--fm); font-size:0.92rem; font-weight:500; color:var(--text); white-space:nowrap; }
    .roi-result-row-val--accent { color:var(--cyan-2); }

    /* 3. BlueWave IT comparison — section label + rows */
    .roi-result-compare { display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
    .roi-result-compare-head { font-size:0.76rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
    .roi-result-compare .roi-result-row { border-color:rgba(56,217,232,0.14); background:rgba(56,217,232,0.04); }

    /* 4. Net result — prominent card */
    .roi-net { padding:20px; border-radius:16px; border:1px solid var(--line-s); display:flex; flex-direction:column; gap:7px; position:relative; z-index:1; }
    .roi-net--savings { background:linear-gradient(135deg,rgba(62,232,154,0.10),rgba(0,194,203,0.07)); border-color:rgba(62,232,154,0.26); }
    .roi-net--investment { background:rgba(255,255,255,0.03); border-color:rgba(255,207,78,0.18); }
    .roi-net-label { font-size:0.76rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
    .roi-net--savings .roi-net-label { color:var(--green); }
    .roi-net--investment .roi-net-label { color:var(--amber); opacity:0.85; }
    .roi-net-amount { font-family:var(--fm); font-size:2.6rem; font-weight:500; line-height:1; }
    .roi-net--savings .roi-net-amount { background:linear-gradient(135deg,var(--green),#5af0b2); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .roi-net--investment .roi-net-amount { color:var(--text); }

    /* 5. Disclaimer */
    .roi-result-disclaimer { font-size:0.73rem; color:var(--muted); opacity:0.60; line-height:1.5; margin:0; position:relative; z-index:1; }

    /* CTAs */
    .roi-result-ctas { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
    .roi-cta-primary { text-align:center; justify-content:center; width:100%; }
    .roi-cta-secondary { text-align:center; font-size:0.86rem; color:var(--muted-2); text-decoration:none; transition:color 160ms; padding:4px 0; }
    .roi-cta-secondary:hover { color:var(--cyan-2); }

    /* ── COMPARISON TABLE ── */
    .compare-section { padding:72px 0; }
    .compare-wrap { overflow-x:auto; margin-top:36px; }
    .compare-table { width:100%; border-collapse:collapse; min-width:580px; }
    .compare-table thead th { padding:18px 20px; text-align:left; font-family:var(--fd); font-size:0.82rem; font-weight:700; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; border-bottom:1px solid var(--line-s); }
    .compare-table thead th.col-bw { color:var(--cyan-2); background:rgba(0,194,203,0.04); border-radius:var(--r-sm) var(--r-sm) 0 0; }
    .compare-table tbody tr { border-bottom:1px solid var(--line); transition:background 150ms; }
    .compare-table tbody tr:hover { background:rgba(255,255,255,0.02); }
    .compare-table tbody tr:last-child { border-bottom:0; }
    .compare-table td { padding:14px 20px; font-size:0.92rem; color:var(--muted-2); vertical-align:middle; }
    .compare-table td:first-child { color:var(--text); font-weight:500; }
    .compare-table td.col-bw { background:rgba(0,194,203,0.03); }
    .chk { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(62,232,154,0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee89a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; border:1px solid rgba(62,232,154,0.20); font-size:0; color:transparent; vertical-align:middle; }
    .dsh { color:var(--muted); opacity:0.35; }
    .prt { font-size:0.80rem; color:var(--amber); font-style:italic; }

    /* ── FAQ ── */
    .faq-section { padding:72px 0; }
    .faq-list { display:grid; gap:10px; max-width:800px; margin:36px auto 0; }
    .faq-item { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color 200ms; }
    .faq-item.open { border-color:rgba(56,217,232,0.22); }
    .faq-q { width:100%; text-align:left; background:transparent; border:0; padding:20px 22px; font-family:var(--fd); font-size:1rem; font-weight:600; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:14px; }
    .faq-chevron { width:24px; height:24px; border-radius:50%; border:1px solid rgba(56,217,232,0.20); background:rgba(56,217,232,0.06); display:grid; place-items:center; color:var(--cyan-2); font-size:0.92rem; transition:transform 260ms, background 200ms; flex:0 0 auto; }
    .faq-item.open .faq-chevron { transform:rotate(45deg); background:rgba(56,217,232,0.14); }
    .faq-a { max-height:0; overflow:hidden; transition:max-height 280ms ease, padding 280ms ease; color:var(--muted-2); font-size:0.97rem; line-height:1.65; padding:0 22px; }
    .faq-item.open .faq-a { max-height:600px; padding:0 22px 22px; }

    /* ── CTA ── */
    .cta-section { padding:0 0 80px; }
    .cta-box { padding:64px 52px; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,194,203,0.14), transparent 60%), linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border:1px solid rgba(56,217,232,0.18); border-radius:28px; text-align:center; position:relative; overflow:hidden; }
    .cta-box::before { content:""; position:absolute; width:400px; height:400px; left:-150px; top:-150px; border-radius:50%; background:radial-gradient(circle, rgba(0,194,203,0.10), transparent 60%); pointer-events:none; }
    .cta-box::after  { content:""; position:absolute; width:300px; height:300px; right:-100px; bottom:-100px; border-radius:50%; background:radial-gradient(circle, rgba(15,76,129,0.12), transparent 60%); pointer-events:none; }
    .cta-box h2 { font-size:clamp(2rem,3.5vw,3rem); margin-bottom:16px; position:relative; z-index:1; }
    .cta-box p  { max-width:56ch; margin:0 auto 32px; color:var(--muted-2); font-size:1.05rem; position:relative; z-index:1; }
    .cta-btns   { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }

    /* ── FOOTER ── */
    .site-footer { border-top:1px solid var(--line); background:var(--bg-alt); padding:44px 0 32px; }
    .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; }
    .footer-brand p { color:var(--muted); font-size:0.90rem; margin-top:12px; max-width:34ch; line-height:1.6; }
    .footer-col h4 { font-size:0.80rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
    .footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
    .footer-col ul a { color:var(--muted-2); font-size:0.91rem; transition:color 160ms; }
    .footer-col ul a:hover { color:var(--text); }
    .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:0.87rem; }
    .footer-legal { display:flex; gap:18px; }
    .footer-legal a { color:var(--muted); transition:color 160ms; }
    .footer-legal a:hover { color:var(--text); }
    .footer-logo-row { display:flex; align-items:center; gap:10px; }
    .footer-logo-row strong { font-family:var(--fd); font-size:1rem; font-weight:700; }
    .back-to-top { position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:13px; border:1px solid var(--line-s); background:rgba(6,14,26,0.88); backdrop-filter:blur(10px); color:var(--text); display:grid; place-items:center; font-size:1rem; opacity:0; transform:translateY(12px); pointer-events:none; transition:all 200ms; box-shadow:var(--shadow-sm); z-index:70; }
    .back-to-top.show { opacity:1; transform:none; pointer-events:auto; }
    body.theme-light .back-to-top { background:rgba(255,255,255,0.92); }

    /* ── BACKUP PRICING ── */
    .backup-section { padding:72px 0; }

    /* Storage selector toggle */
    .storage-toggle {
      display:inline-flex; gap:2px; padding:4px;
      border-radius:999px; background:rgba(255,255,255,0.04);
      border:1px solid var(--line); margin-bottom:36px;
    }
    body.theme-light .storage-toggle { background:rgba(10,22,40,0.04); }
    .storage-toggle-btn {
      border:0; background:transparent; color:var(--muted-2);
      padding:8px 18px; border-radius:999px; font-size:0.88rem;
      font-weight:600; font-family:var(--fd); cursor:pointer;
      transition:all 200ms;
    }
    .storage-toggle-btn.active {
      background:linear-gradient(130deg, var(--cyan), var(--cyan-2));
      color:#031922; box-shadow:0 4px 14px rgba(0,194,203,0.28);
    }

    /* Plan cards grid */
    .backup-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
      margin-bottom:28px;
    }
    .bk-card {
      background:var(--bg-card); border:1px solid var(--line);
      border-radius:var(--r); padding:26px 22px;
      display:flex; flex-direction:column;
      transition:transform 220ms cubic-bezier(0.16,1,0.3,1),
                 border-color 220ms, background 220ms, box-shadow 220ms;
      position:relative; overflow:hidden; cursor:default;
    }
    .bk-card::before {
      content:""; position:absolute; inset:0;
      background:radial-gradient(circle at top right, rgba(0,194,203,0.07), transparent 55%);
      opacity:0; transition:opacity 300ms;
    }
    .bk-card:hover { transform:translateY(-5px); border-color:rgba(56,217,232,0.26); background:var(--bg-card-h); box-shadow:0 16px 48px rgba(0,0,0,0.28); }
    .bk-card:hover::before { opacity:1; }
    .bk-card.featured {
      border-color:rgba(56,217,232,0.28);
      background:linear-gradient(160deg, rgba(0,194,203,0.08), rgba(15,76,129,0.06), rgba(255,255,255,0.03));
    }
    .bk-card.archive {
      border-color:rgba(255,207,78,0.20);
      background:linear-gradient(160deg, rgba(255,207,78,0.05), rgba(255,255,255,0.025));
    }
    .bk-card.archive:hover { border-color:rgba(255,207,78,0.38); }

    /* Badge */
    .bk-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 12px; border-radius:999px; font-size:0.74rem;
      font-weight:700; font-family:var(--fd); letter-spacing:0.04em;
      margin-bottom:16px; align-self:flex-start;
    }
    .bk-badge.popular {
      background:linear-gradient(130deg, var(--cyan), var(--cyan-2));
      color:#031922;
    }
    .bk-badge.archive-badge {
      background:rgba(255,207,78,0.15);
      border:1px solid rgba(255,207,78,0.28);
      color:var(--amber);
    }
    .bk-badge.new-badge {
      background:rgba(62,232,154,0.12);
      border:1px solid rgba(62,232,154,0.24);
      color:var(--green);
    }

    .bk-icon {
      width:48px; height:48px; border-radius:14px;
      display:grid; place-items:center; margin-bottom:16px;
      background:linear-gradient(135deg, rgba(0,194,203,0.15), rgba(15,76,129,0.22));
      border:1px solid rgba(56,217,232,0.20); color:var(--cyan-3);
    }
    .bk-card.archive .bk-icon {
      background:linear-gradient(135deg, rgba(255,207,78,0.12), rgba(255,150,30,0.10));
      border-color:rgba(255,207,78,0.22); color:var(--amber);
    }
    .bk-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

    .bk-name { font-size:1.05rem; font-weight:700; margin-bottom:4px; }
    .bk-storage { font-family:var(--fm); font-size:0.84rem; color:var(--muted); margin-bottom:16px; }

    .bk-price-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
    .bk-price-row strong {
      font-family:var(--fm); font-size:2.6rem; font-weight:500; line-height:1;
      background:linear-gradient(135deg, var(--cyan), var(--cyan-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .bk-card.archive .bk-price-row strong {
      background:linear-gradient(135deg, var(--amber), #ffdf80);
      -webkit-background-clip:text; background-clip:text;
    }
    .bk-price-row span { color:var(--muted-2); font-size:0.84rem; }
    .bk-price-note { color:var(--muted); font-size:0.78rem; margin-bottom:20px; }

    .bk-divider { height:1px; background:var(--line); margin:16px 0; }

    .bk-features { list-style:none; margin:0; padding:0; display:grid; gap:8px; flex:1; align-content:start; }
    .bk-features li {
      display:flex; align-items:flex-start; gap:9px;
      font-size:0.87rem; color:var(--muted-2); line-height:1.4;
    }
    .bk-features li::before {
      content:""; width:16px; height:16px; margin-top:1px; flex:0 0 auto;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .bk-card.archive .bk-features li::before {
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf4e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* Spacer pushes CTA to bottom regardless of feature count */
    .bk-spacer { flex: 1; }

    .bk-cta {
      display:block; width:100%; margin-top:20px; padding:11px;
      border-radius:12px; text-align:center; font-size:0.88rem;
      font-weight:600; font-family:var(--fd); border:1px solid var(--line-s);
      background:rgba(255,255,255,0.04); color:var(--muted-2);
      transition:all 200ms; cursor:pointer;
    }
    .bk-cta:hover { background:rgba(56,217,232,0.10); border-color:rgba(56,217,232,0.28); color:var(--text); }
    .bk-card.featured .bk-cta {
      background:linear-gradient(130deg, #00c2cb, #38d9e8); color:#031922;
      border-color:transparent; box-shadow:0 4px 18px rgba(0,194,203,0.28);
    }
    .bk-card.featured .bk-cta:hover { box-shadow:0 8px 24px rgba(0,194,203,0.40); transform:translateY(-1px); }
    body.theme-light .bk-cta { background:rgba(10,22,40,0.04); }

    /* Overage table */
    .overage-wrap {
      background:var(--bg-card); border:1px solid var(--line);
      border-radius:var(--r); padding:28px 32px;
    }
    .overage-head {
      display:flex; align-items:center; gap:14px; margin-bottom:20px;
      flex-wrap:wrap;
    }
    .overage-head h3 { font-size:1.1rem; margin:0; }
    .overage-head p  { color:var(--muted-2); font-size:0.90rem; margin:0; }
    .overage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
    .overage-item {
      padding:16px; background:rgba(255,255,255,0.025);
      border:1px solid var(--line); border-radius:14px;
    }
    body.theme-light .overage-item { background:rgba(10,22,40,0.03); }
    .overage-type { font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:6px; }
    .overage-price { font-family:var(--fm); font-size:1.3rem; font-weight:500; color:var(--text); margin-bottom:3px; }
    .overage-unit  { font-size:0.78rem; color:var(--muted); }

    .restore-row {
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:12px; padding:14px 16px;
      background:rgba(62,232,154,0.05); border:1px solid rgba(62,232,154,0.16);
      border-radius:12px;
    }
    .restore-row-left { font-size:0.88rem; color:var(--muted-2); }
    .restore-row-right { font-size:0.84rem; font-weight:600; color:var(--green); }

    /* Interactive storage usage bar */
    .storage-vis {
      background:var(--bg-card); border:1px solid var(--line);
      border-radius:var(--r); padding:24px 28px; margin-top:20px;
    }
    .storage-vis h4 { font-size:0.92rem; margin-bottom:18px; }
    .sv-row { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
    .sv-label { width:120px; font-size:0.82rem; color:var(--muted-2); flex:0 0 auto; }
    .sv-bar-wrap { flex:1; height:10px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; position:relative; }
    body.theme-light .sv-bar-wrap { background:rgba(10,22,40,0.10); }
    .sv-fill { height:100%; border-radius:999px; transition:width 600ms cubic-bezier(0.16,1,0.3,1); }
    .sv-fill.hot     { background:linear-gradient(90deg, var(--cyan), var(--cyan-2)); }
    .sv-fill.cool    { background:linear-gradient(90deg, #1565a8, var(--blue-m)); }
    .sv-fill.archive { background:linear-gradient(90deg, #ffcf4e, #ffdf80); }
    .sv-price { width:80px; text-align:right; font-family:var(--fm); font-size:0.84rem; color:var(--text); flex:0 0 auto; }
    .sv-note  { width:120px; font-size:0.74rem; color:var(--muted); text-align:right; flex:0 0 auto; }

    /* ── ON-SITE BACKUP ── */
    .onsite-section {
      margin-top: 56px;
      padding-top: 52px;
      border-top: 1px solid var(--line);
    }

    .onsite-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: start;
      margin-bottom: 32px;
    }
    .onsite-header h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: 10px; }
    .onsite-header p  { color: var(--muted-2); font-size: 0.97rem; line-height: 1.65; max-width: 58ch; }

    /* On-site cards grid — 3 cols */
    .onsite-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 18px;
    }

    /* Shared onsite card */
    .os-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
                  border-color 220ms, background 220ms, box-shadow 220ms;
    }
    .os-card::before {
      content: ""; position: absolute; inset: 0;
      opacity: 0; transition: opacity 300ms;
    }
    .os-card:hover {
      transform: translateY(-5px);
      border-color: rgba(56,217,232,0.26);
      background: var(--bg-card-h);
      box-shadow: 0 16px 48px rgba(0,0,0,0.28);
    }
    .os-card:hover::before { opacity: 1; }

    /* Entry card */
    .os-card.os-entry::before {
      background: radial-gradient(circle at top right, rgba(0,194,203,0.07), transparent 55%);
    }

    /* Business card */
    .os-card.os-business::before {
      background: radial-gradient(circle at top right, rgba(21,101,168,0.10), transparent 55%);
    }

    /* Hybrid — recommended accent */
    .os-card.os-hybrid {
      border-color: rgba(62,232,154,0.24);
      background: linear-gradient(160deg, rgba(62,232,154,0.06), rgba(0,194,203,0.04), rgba(255,255,255,0.025));
    }
    .os-card.os-hybrid:hover { border-color: rgba(62,232,154,0.40); }
    .os-card.os-hybrid::before {
      background: radial-gradient(circle at top right, rgba(62,232,154,0.08), transparent 55%);
    }

    /* Card icon */
    .os-icon {
      width: 48px; height: 48px; border-radius: 14px;
      display: grid; place-items: center; margin-bottom: 16px;
      border: 1px solid rgba(56,217,232,0.20);
      background: linear-gradient(135deg, rgba(0,194,203,0.15), rgba(15,76,129,0.22));
      color: var(--cyan-3);
    }
    .os-card.os-hybrid .os-icon {
      background: linear-gradient(135deg, rgba(62,232,154,0.15), rgba(0,194,203,0.15));
      border-color: rgba(62,232,154,0.24);
      color: var(--green);
    }
    .os-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* Badge */
    .os-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 999px;
      font-size: 0.73rem; font-weight: 700; font-family: var(--fd);
      letter-spacing: 0.04em; margin-bottom: 14px; align-self: flex-start;
    }
    .os-badge.recommended {
      background: rgba(62,232,154,0.14);
      border: 1px solid rgba(62,232,154,0.28);
      color: var(--green);
    }

    .os-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }

    /* Price block — hardware + monthly */
    .os-price-block { margin-bottom: 18px; }
    .os-price-hw {
      display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px;
    }
    .os-price-hw strong {
      font-family: var(--fm); font-size: 1.9rem; font-weight: 500; line-height: 1;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .os-card.os-hybrid .os-price-hw strong {
      background: linear-gradient(135deg, var(--green), #5af0b2);
      -webkit-background-clip: text; background-clip: text;
    }
    .os-price-hw span { color: var(--muted-2); font-size: 0.84rem; }
    .os-price-mgmt {
      font-size: 0.84rem; color: var(--muted); padding-left: 2px;
    }
    .os-price-mgmt strong { color: var(--muted-2); font-family: var(--fm); }

    /* Divider */
    .os-divider { height: 1px; background: var(--line); margin: 16px 0; }

    /* Includes + suitable columns */
    .os-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
    .os-col-head {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
    }
    .os-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .os-list li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 0.84rem; color: var(--muted-2); line-height: 1.35;
    }
    .os-list li.include::before {
      content: ""; width: 15px; height: 15px; margin-top: 1px; flex: 0 0 auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .os-card.os-hybrid .os-list li.include::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee89a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .os-list li.suitable::before {
      content: ""; width: 7px; height: 7px; margin-top: 5px; flex: 0 0 auto;
      border-radius: 50%; background: var(--muted);
    }

    /* Hybrid benefits — single wider col */
    .os-card.os-hybrid .os-cols { grid-template-columns: 1fr; }

    /* CTA */
    .os-cta {
      display: block; width: 100%; margin-top: 20px; padding: 11px;
      border-radius: 12px; text-align: center; font-size: 0.88rem;
      font-weight: 600; font-family: var(--fd); border: 1px solid var(--line-s);
      background: rgba(255,255,255,0.04); color: var(--muted-2);
      transition: all 200ms; cursor: pointer; text-decoration: none;
    }
    .os-cta:hover { background: rgba(56,217,232,0.10); border-color: rgba(56,217,232,0.28); color: var(--text); }
    .os-card.os-hybrid .os-cta {
      background: rgba(62,232,154,0.10); border-color: rgba(62,232,154,0.28);
      color: var(--green);
    }
    .os-card.os-hybrid .os-cta:hover {
      background: rgba(62,232,154,0.18); border-color: rgba(62,232,154,0.44); color: #c8fff0;
    }
    body.theme-light .os-cta { background: rgba(10,22,40,0.04); }

    /* ── RESPONSIVE ── */
    @media (max-width:1080px) { .nav-links{display:none;} .nav-toggle{display:inline-flex;} .nav-cta{display:none;} }
    @media (max-width: 600px) {
      /* Hide theme toggle from nav bar at mobile */
      .nav-theme-tog { display: none; }

      .tog .tog-btn, .toggle-group .toggle-btn {
        padding: 5px 8px;
        font-size: 0.76rem;
      }
      .tog, .toggle-group {
        padding: 3px;
      }
      .nav-right { gap: 5px; }
      /* Hide logo subtitle on mobile */
      .logo-wordmark span { display: none; }
      /* Shrink nav toggles */
      .tog .tog-btn { padding: 5px 8px; font-size: 0.76rem; }
      .tog { padding: 3px; }
      .nav-right { gap: 6px; }
    }
    @media (max-width:980px) {
      section { padding:52px 0; }
      .hero-layout, .plan-grid, .roi-wrap { grid-template-columns:1fr; gap:28px; }
      .calc-body { grid-template-columns:1fr; }
      .calc-inputs { border-right:0; border-bottom:1px solid var(--line); }
      .footer-grid { grid-template-columns:1fr 1fr; }
      .cta-box { padding:44px 30px; }
      .includes-grid { grid-template-columns:1fr; }
      .backup-grid { grid-template-columns:repeat(2,1fr); }
      .overage-grid { grid-template-columns:repeat(2,1fr); }
      .onsite-grid { grid-template-columns:1fr 1fr; }
      .onsite-header { grid-template-columns:1fr; }
    }
    @media (max-width:640px) {
      .footer-grid { grid-template-columns:1fr; }
      .includes-grid { grid-template-columns:1fr; }
      .cta-box { padding:36px 22px; }
      .backup-grid { grid-template-columns:1fr; }
      .overage-grid { grid-template-columns:1fr; }
      .overage-wrap { padding:20px; }
      .sv-note { display:none; }
      .onsite-grid { grid-template-columns:1fr; }
      .os-cols { grid-template-columns:1fr; }
    }

    /* -- HERO BACKGROUND IMAGE -- */
    .hero-bg-img {
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url('../../images/hero_dark_bg.jpg');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      opacity: 0.18;
      mix-blend-mode: luminosity;
      pointer-events: none;
      transition: opacity 300ms ease;
    }
    .hero-bg-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--bg) 100%);
      pointer-events: none;
    }
    body.theme-light .hero-bg-img {
      background-image: url('../../images/hero_light_bg.jpg');
      opacity: 0.22;
      mix-blend-mode: multiply;
    }

    /* ── CONTACT MODAL ── */
    .cmodal-overlay {
      position:fixed; inset:0; z-index:200;
      background:rgba(4,9,18,0.78); backdrop-filter:blur(8px) saturate(140%);
      display:flex; align-items:center; justify-content:center; padding:20px;
      opacity:0; pointer-events:none;
      transition:opacity 280ms cubic-bezier(0.16,1,0.3,1);
    }
    .cmodal-overlay.open { opacity:1; pointer-events:all; }
    body.theme-light .cmodal-overlay { background:rgba(10,22,40,0.55); }
    .cmodal {
      background:var(--bg-alt); border:1px solid var(--line-s);
      border-radius:28px; padding:36px; width:100%; max-width:500px;
      box-shadow:0 32px 80px rgba(0,0,0,0.55);
      transform:translateY(20px) scale(0.97);
      transition:transform 320ms cubic-bezier(0.16,1,0.3,1);
      position:relative; overflow:hidden;
    }
    .cmodal-overlay.open .cmodal { transform:none; }
    .cmodal::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,194,203,0.09), transparent 60%); pointer-events:none; }
    .cmodal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-s); background:rgba(255,255,255,0.04); color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:background 180ms, color 180ms; font-size:0.9rem; line-height:1; }
    .cmodal-close:hover { background:rgba(255,255,255,0.10); color:var(--text); }
    body.theme-light .cmodal-close { background:rgba(10,22,40,0.04); }
    .cmodal-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; background:linear-gradient(135deg,rgba(0,194,203,0.15),rgba(15,76,129,0.22)); border:1px solid rgba(56,217,232,0.22); color:var(--cyan-3); }
    .cmodal h3  { font-size:1.35rem; margin-bottom:6px; }
    .cmodal-sub { color:var(--muted-2); font-size:0.93rem; margin-bottom:8px; line-height:1.55; }
    .cmodal-plan-tag { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; background:rgba(56,217,232,0.09); border:1px solid rgba(56,217,232,0.20); color:var(--cyan-3); font-size:0.80rem; font-weight:600; margin-bottom:22px; }
    .cmodal-fields { display:grid; gap:12px; margin-bottom:18px; }
    .cmodal-field { display:flex; flex-direction:column; gap:5px; }
    .cmodal-label { font-size:0.82rem; font-weight:600; color:var(--muted-2); }
    .cmodal-input { padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--text); font:inherit; font-size:0.94rem; outline:none; transition:border-color 180ms, box-shadow 180ms; }
    .cmodal-input:focus { border-color:rgba(56,217,232,0.38); box-shadow:0 0 0 3px rgba(56,217,232,0.09); }
    body.theme-light .cmodal-input { background:rgba(255,255,255,0.80); }
    .cmodal-input::placeholder { color:var(--muted); }
    textarea.cmodal-input { resize:vertical; min-height:80px; line-height:1.55; }
    .cmodal-submit { width:100%; padding:13px; border-radius:999px; border:0; cursor:pointer; background:linear-gradient(130deg,#00c2cb,#38d9e8); color:#031922; font-family:var(--fd); font-size:0.95rem; font-weight:700; box-shadow:0 6px 22px rgba(0,194,203,0.32); transition:transform 200ms, box-shadow 200ms; }
    .cmodal-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,194,203,0.42); }
    .cmodal-success { text-align:center; padding:24px 0 8px; display:none; }
    .cmodal-success-icon { width:56px; height:56px; border-radius:50%; background:rgba(62,232,154,0.12); border:1px solid rgba(62,232,154,0.28); display:grid; place-items:center; margin:0 auto 16px; color:var(--green); }
    .cmodal-success h4 { font-size:1.2rem; margin-bottom:8px; }
    .cmodal-success p  { color:var(--muted-2); font-size:0.92rem; line-height:1.6; }
    .cmodal-note { font-size:0.76rem; color:var(--muted); text-align:center; margin-top:12px; line-height:1.5; }
  
    /* ── WEB PRESENCE PRICING SECTION ── */
    .wp-section { padding: 80px 0; position: relative; }
    .wp-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,194,203,0.07), transparent 60%);
      pointer-events: none;
    }
    .wp-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      margin-bottom: 52px;
    }
    .wp-intro-text h2 {
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      line-height: 1.06;
      margin-bottom: 0;
      font-family: var(--fd);
      font-weight: 400;
    }
    .wp-intro-text h2 em {
      font-style: normal;
      background: linear-gradient(105deg, #4beaf4 0%, #00c2cb 45%, #6af0fc 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    body.theme-light .wp-intro-text h2 em {
      background: linear-gradient(105deg, #006f80 0%, #007f8f 50%, #009ab0 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .wp-intro-text p {
      color: var(--muted-2);
      font-size: 1.0rem;
      line-height: 1.7;
      margin-top: 20px;
    }
    .wp-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .wp-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
      position: relative;
      overflow: hidden;
    }
    .wp-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(56,217,232,0.18), transparent);
    }
    .wp-card.featured {
      border-color: rgba(56,217,232,0.28);
      box-shadow: 0 0 0 1px rgba(56,217,232,0.10), var(--shadow-c);
    }
    .wp-card.featured::before {
      background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
    }
    .wp-card:hover {
      border-color: rgba(56,217,232,0.24);
      background: var(--bg-card-h);
      transform: translateY(-4px);
    }
    .wp-card-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      background: linear-gradient(135deg, rgba(0,194,203,0.14), rgba(15,76,129,0.20));
      border: 1px solid rgba(56,217,232,0.20);
      color: var(--cyan-3);
      flex: 0 0 auto;
    }
    .wp-card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .wp-card h3 { font-size: 1.1rem; font-family: var(--fd); font-weight: 600; margin-bottom: 10px; color: var(--text); }
    .wp-card > .wp-desc { color: var(--muted-2); font-size: 0.90rem; line-height: 1.65; margin-bottom: 20px; }
    .wp-feat-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; flex: 1; }
    .wp-feat-list li {
      display: flex; gap: 9px; align-items: flex-start;
      font-size: 0.875rem; color: var(--muted-2); line-height: 1.5;
    }
    .wp-feat-list li::before {
      content: "";
      width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .wp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
    .wp-tag {
      padding: 4px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 0.77rem;
      font-weight: 500;
    }
    body.theme-light .wp-tag { background: rgba(10,22,40,0.04); }
    .wp-tag.highlight { background: rgba(56,217,232,0.09); border-color: rgba(56,217,232,0.22); color: var(--cyan-2); }
    .wp-cta-btn {
      display: flex; align-items: center; justify-content: center;
      gap: 7px;
      width: 100%;
      padding: 13px 16px;
      border-radius: var(--r-sm);
      border: 1px solid rgba(56,217,232,0.24);
      background: rgba(56,217,232,0.06);
      color: var(--text);
      font-family: var(--fd);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
      margin-top: auto;
      text-decoration: none;
    }
    .wp-cta-btn:hover { background: rgba(56,217,232,0.13); border-color: rgba(56,217,232,0.40); transform: translateY(-2px); }
    .wp-cta-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .wp-note {
      margin-top: 32px;
      padding: 16px 22px;
      border-radius: var(--r-sm);
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 0.86rem;
      line-height: 1.65;
      text-align: center;
    }
    .wp-note strong { color: var(--text); }

    @media (max-width: 980px) {
      .wp-intro-grid { grid-template-columns: 1fr; gap: 28px; }
      .wp-cards-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) { .wp-section { padding: 52px 0; } }

    /* ── ROI responsive ── */