/* === FuntikCloud PRO GLOW (Full Rewrite) === */
:root{
  --bg:#0b0e13; --bg-2:#0d1016; --surface:#121622;
  --border:rgba(255,255,255,.07); --text:#ecf1ff; --muted:#a9b3c6;
  --violet:#7c3aed; --violet-2:#9f67ff; --neon:#38bdf8;
  --orange:#f97316;
  --glow:0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:
  radial-gradient(900px 600px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
  radial-gradient(1000px 700px at 90% 0%, rgba(56,189,248,.10), transparent 60%),
  linear-gradient(#0b0e13, #0a0c11); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a{color:var(--text); text-decoration:none}
.container{width:100%; max-width:1200px; margin-inline:auto; padding-inline:16px}
.grid{display:grid; gap:16px}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.1rem; border-radius:12px; border:1px solid var(--border); background:#1c2331; color:var(--text); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.35)}
.btn-primary{background:var(--violet); color:#0f1218; border:none}
.btn-secondary{background:#1e2533}
.btn-ghost{background:transparent; border-color:var(--border)}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); font-size:.78rem}
h1,h2,h3{margin:0 0 .4em}
.text-muted{color:var(--muted)}
.rounded-xl{border-radius:var(--radius)}
.card{background:linear-gradient(180deg,#151a25,#0f1320); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--glow); padding:18px}
.section{padding-block:56px}
header.sticky{position:sticky; top:0; z-index:50; background:rgba(12,14,20,.58); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav .menu{display:flex; align-items:center; gap:18px}
.hero{display:flex; align-items:center; gap:24px; min-height:420px; padding:clamp(20px,4vw,44px); border:1px solid var(--border); border-radius:var(--radius);
  background:radial-gradient(1200px 700px at 10% 0, rgba(124,58,237,.18), transparent 60%), radial-gradient(1200px 700px at 100% 0, rgba(56,189,248,.15), transparent 60%), linear-gradient(180deg, var(--surface), #0d111a); box-shadow:var(--glow)}
.hero h1{font-size:clamp(32px,4.2vw,48px); font-weight:900; line-height:1.08; letter-spacing:.2px}
.hero p{opacity:.85}
.hero-cta{display:flex; align-items:center; gap:12px; margin-top:18px}
/* Why */
.why{grid-template-columns:repeat(auto-fill, minmax(260px,1fr))}
.why .card{min-height:140px; background-image:linear-gradient(180deg,#151a25ee,#0f1320ee), var(--bg-img, none); background-size:cover; background-position:center}
/* Plans */
.plan-grid{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
.plan{position:relative; overflow:hidden; padding:20px}
.plan .head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.plan .title{font-weight:800}
.plan .price{font-size:1.9rem; font-weight:900}
.plan .features{margin:12px 0 14px}
.plan .features li{display:flex; gap:.5rem; align-items:flex-start; margin:.42rem 0; color:var(--muted)}
.plan .cta{margin-top:14px}
.plan--accent{background:linear-gradient(160deg, rgba(124,58,237,.13), #141a2a 60%); border:1px solid rgba(124,58,237,.35)}
.plan .ribbon{position:absolute; top:14px; right:-42px; transform: rotate(35deg); background:linear-gradient(90deg,var(--violet),var(--violet-2)); color:white; padding:.35rem 2.2rem; font-weight:800; font-size:.72rem; letter-spacing:.6px}
/* KB */
.kb-search{position:relative; margin:16px 0 24px}
.kb-search input{width:100%; padding:12px 14px 12px 44px; border-radius:12px; background:#141827; border:1px solid var(--border); color:var(--text)}
.kb-search::before{content:'🔎'; position:absolute; left:14px; top:10px; opacity:.8}
.kb-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.kb-card h3{margin:.2em 0 .4em}
.kb-article{line-height:1.75}
footer{border-top:1px solid var(--border); padding-block:40px; background:#0a0d12}
/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(12px); transition: transform .6s ease, opacity .6s ease}
.reveal.show{opacity:1; transform:none}

/* Category tabs */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px}
.tab{padding:.5rem .8rem; border:1px solid var(--border); border-radius:999px; background:#151a25; color:var(--text); cursor:pointer; font-size:.92rem}
.tab.active{background:linear-gradient(90deg, var(--violet), var(--violet-2)); color:#0f1218; border:none}
.plan .features .row{display:flex; gap:10px; align-items:center}
.plan .features .row img{width:18px; height:18px; opacity:.9}
.footer{border-top:1px solid var(--border); padding-block:30px; background:#0a0d12}
.footer .cols{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.footer ul{list-style:none; padding:0; margin:0}
.footer a{color:var(--muted)}

/* ===== Engagement Additions ===== */
.estimator{margin-top:10px; border:1px solid var(--border); background:linear-gradient(180deg,#151a25,#0f1320); border-radius:var(--radius); box-shadow:var(--glow); padding:16px}
.estimator .controls{display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); align-items:center}
.estimator label{font-size:.9rem; color:var(--muted)}
.estimator input[type="range"]{width:100%}
.estimator .result{display:flex; align-items:center; gap:10px; margin-top:8px}

.compare-toggle{display:inline-flex; gap:8px; margin-top:8px}
.compare-toggle .cmp{font-size:.82rem; padding:.45rem .7rem}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:1000}
.modal.open{display:flex}
.modal .dialog{width:min(980px, 96vw); background:#0f1320; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--glow)}
.modal .grid{grid-template-columns:1fr 1fr}
.modal h3{margin-bottom:10px}

.accordion .item{border:1px solid var(--border); border-radius:12px; margin:8px 0; overflow:hidden; background:#121624}
.accordion .item h4{margin:0; padding:12px 14px; cursor:pointer}
.accordion .item .body{display:none; padding:12px 14px; color:var(--muted)}
.accordion .item.open .body{display:block}

.testimonials{display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));}
.testimonials .tcard{padding:14px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,#151a25,#0f1320)}

.theme-switch{display:inline-flex; gap:8px; align-items:center}
.theme-switch input{transform: translateY(1px)}

.hero-particles{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hero-particles span{position:absolute; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle, rgba(124,58,237,.9), transparent 60%); filter:blur(1px); animation: floaty 12s linear infinite}
@keyframes floaty { from{ transform: translateY(100vh) } to{ transform: translateY(-10vh) } }


/* ===== Estimator 2.0 (styled like the screenshot CTA aesthetics) ===== */
.estimator{margin-top:16px; border:1px solid var(--border); 
  background: linear-gradient(90deg, rgba(124,58,237,.14), rgba(56,189,248,.08) 60%, rgba(124,58,237,.10));
  border-radius: 18px; box-shadow: var(--glow); padding:18px 18px 12px;}
.estimator .titlebar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.estimator .titlebar h3{margin:0}
.estimator .controls{display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); align-items:center}
.estimator label{font-size:.9rem; color:var(--muted); display:block}
.estimator .ctrl{background:linear-gradient(180deg,#151a25,#0f1320); border:1px solid var(--border); padding:12px; border-radius:12px}
.estimator .val{display:inline-block; min-width:48px; text-align:center; font-weight:700; background:#1b2231; border:1px solid var(--border); padding:.2rem .5rem; border-radius:999px; margin-left:8px}
.estimator .result{display:flex; align-items:center; gap:10px; margin-top:10px}
.estimator .go{display:flex; gap:8px; align-items:center}

/* Custom range */
.estimator input[type="range"]{-webkit-appearance:none; height:6px; border-radius:6px; background:#1b2231; outline:none}
.estimator input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background: linear-gradient(90deg,var(--violet),var(--violet-2)); border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ===== CTA block at the very end ===== */
.cta-final{margin-top:26px; border:1px solid var(--border); border-radius:16px;
  background: linear-gradient(90deg, rgba(124,58,237,.16), rgba(56,189,248,.10) 60%, rgba(124,58,237,.12));
  padding:24px; box-shadow: var(--glow); display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta-final h2{margin:0 0 6px}
.cta-final p{margin:0; color:var(--muted)}
.cta-final .cta-btn{background: linear-gradient(90deg,#f97316,#7c3aed); color:white; border:none}
/* Compare helper hint */
.compare-hint{margin-top:8px; font-size:.88rem; color:var(--muted)}


/* ===== HERO v2 (screenshot-inspired) ===== */
.hero.v2{position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden}
.hero.v2 .bg{position:absolute; inset:0; background-size:cover; background-position:center; filter: brightness(.75);}
.hero.v2 .overlay{position:absolute; inset:0; background: radial-gradient(1000px 500px at 50% 0%, rgba(16,24,40,.45), transparent 70%), linear-gradient(180deg, rgba(12,16,26,.55), rgba(12,16,26,.75));}
.hero.v2 .content{position:relative; z-index:1; padding:28px; max-width:960px}
.hero.v2 h1{font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin-bottom:14px}
.hero.v2 .cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:16px 0 14px}
.hero.v2 .btn-red{background: linear-gradient(90deg, #ef4444, #ef4444 40%, #f97316); color:#fff; border:none}
.hero.v2 .btn-yellow{background: linear-gradient(90deg, #f59e0b, #f59e0b 40%, #eab308); color:#111; border:none}
.hero.v2 .feature-cards{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.hero.v2 .fcard{display:flex; align-items:center; gap:10px; background: rgba(22,26,40,.72); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px 14px; backdrop-filter: blur(6px)}
.hero.v2 .fcard img{width:20px; height:20px}
.hero.v2 .tech{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.hero.v2 .tech .pill{padding:.4rem .75rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:.9rem}

/* ===== Sticky compare bar + table modal ===== */
.compare-bar{position:sticky; bottom:12px; z-index:100; display:flex; justify-content:center}
.compare-bar .inner{display:flex; gap:10px; align-items:center; background:#0f1320; border:1px solid var(--border); border-radius:999px; padding:8px 12px; box-shadow:var(--glow)}
.compare-bar .inner .count{background:linear-gradient(90deg,var(--violet),var(--violet-2)); color:#0f1218; border:none; padding:.3rem .6rem; border-radius:999px; font-weight:700}

.modal .table{width:100%; overflow:auto}
.cmp-table{width:100%; border-collapse:collapse}
.cmp-table th,.cmp-table td{border:1px solid var(--border); padding:10px; text-align:left}
.cmp-table th{background:#151a25}
.cmp-remove{font-size:.8rem; opacity:.8}


/* Why v2 cards */
.whyv2{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-top:14px}
.whyv2 .wcard{background:linear-gradient(180deg,#151a25,#0f1320); border:1px solid var(--border); border-radius:18px; padding:18px; text-align:center; box-shadow:var(--glow)}
.whyv2 .ico{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px;
  background: radial-gradient(120% 120% at 30% 10%, rgba(124,58,237,.35), rgba(56,189,248,.2)); margin-bottom:10px}
.whyv2 .ico svg{width:28px; height:28px}
.whyv2 h3{margin:.3rem 0 .4rem}
.whyv2 p{color:var(--muted); margin:0}

/* Hide old compare toggle near tabs (we now use sticky bar) */
.compare-toggle{display:none!important}


/* ===== Support + CTA sections ===== */
.support-panel{border:1px solid var(--border); border-radius:18px;
  background: linear-gradient(180deg, rgba(124,58,237,.18), rgba(16,24,40,.55));
  padding:28px; text-align:center; position:relative; box-shadow:var(--glow)}
.support-panel h2{margin:0 0 10px}
.support-panel p{margin:0 0 16px; color:var(--muted)}
.support-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn-vk{background:#2787F5; color:#fff; border:none}
.btn-discord{background:#5865F2; color:#fff; border:none}
.btn-vk,.btn-discord{padding:.6rem 1rem; border-radius:10px}

.cta-bar{margin-top:22px; border:1px solid var(--border); border-radius:16px;
  background: linear-gradient(90deg, rgba(2,6,23,.6), rgba(2,6,23,.35) 60%, rgba(2,6,23,.6));
  padding:18px 22px; box-shadow: var(--glow); display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta-bar h3{margin:0 0 4px}
.cta-bar p{margin:0; color:var(--muted)}
.cta-gradient{background: linear-gradient(90deg, #f97316, #7c3aed); border:none; color:#fff}

.compare-bar{display:none!important}


/* ===== Features v2 (6-cards) ===== */
.features-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin-top:14px}
.f2{position:relative; background:linear-gradient(180deg,#151a25,#0f1320); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--glow)}
.f2 .num{position:absolute; right:14px; top:12px; font-weight:800; opacity:.25}
.f2 .ico{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background:#1b2231; margin-bottom:10px}
.f2 .ico img{width:28px; height:28px}
.f2 h3{margin:.2rem 0 .45rem}
.f2 p{color:var(--muted); margin:0}


/* Custom tariff wide card */
.plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width: 980px){ .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 640px){ .plan-grid{grid-template-columns:1fr;} }
.plan--custom{grid-column: span 2; display:flex; align-items:center; justify-content:space-between; min-height:120px}
@media (max-width:980px){ .plan--custom{grid-column: span 2;} }
@media (max-width:640px){ .plan--custom{grid-column: span 1;} }


/* ===== Custom Tariff Modal ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal.show{display:flex}
.modal .dialog{background:var(--panel,#121820);border:1px solid var(--border,#2a3342);border-radius:16px;padding:16px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal .titlebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .ctrl{display:flex;flex-direction:column}
.modal .result{margin-top:8px;margin-bottom:12px}
.modal .calc-line{margin:4px 0}
.modal .actions{display:flex;gap:10px;justify-content:flex-end}


/* ===== Coupon UI ===== */
.coupon-box{margin:10px 0 6px; border:1px dashed var(--border,#2a3342); padding:10px; border-radius:12px}
.coupon-row{display:flex; gap:8px; align-items:center}
.coupon-row input{flex:1; padding:.55rem .7rem; border-radius:10px; border:1px solid var(--border,#2a3342); background:#0b1118; color:var(--text,#e7eef7)}
.coupon-status{margin-top:6px; min-height:18px}


/* ===== Promo Link UI ===== */
.promo-link{margin:10px 0 6px}
.promo-row{display:flex;gap:8px;align-items:center}
.promo-row input{flex:1;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border,#2a3342);background:#0b1118;color:var(--text,#e7eef7)}