/* Minimal modern UI (no external libs) - Light theme */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#55657a;
  --text:#0b1220;
  --accent:#673de6;
  --accent2:#00c2ff;
  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#f59e0b;
  --line:rgba(12,18,32,.10);
  --shadow:0 18px 60px rgba(12,18,32,.10);
}

/* =====================================================
   NEON GLASS THEME (global overrides)
   Purple / Blue / Pink neon + glass cards
   ===================================================== */

/* Base background + typography */
body{
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(123,92,255,.35), rgba(123,92,255,0) 55%),
    radial-gradient(900px 420px at 82% -10%, rgba(58,141,255,.28), rgba(58,141,255,0) 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(255,77,199,.14), rgba(255,77,199,0) 60%),
    linear-gradient(180deg, #060715 0%, #050513 60%, #060715 100%);
  color: rgba(255,255,255,.92);
}

/* Sticky topbar (glass) */
.topbar{
  background: rgba(10,12,28,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Main card style (glass) */
.card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Text helpers */
.p, .muted, .footer-inner, .nav a{ color: rgba(255,255,255,.72) !important; }
.h1, .h2, .section-title, .brand{ color: rgba(255,255,255,.92) !important; }
.badge{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.72); }

/* Inputs */
.input, select, textarea{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }
.input:focus, select:focus, textarea:focus{
  border-color: rgba(123,92,255,.80);
  box-shadow: 0 0 0 4px rgba(123,92,255,.22);
  background: rgba(255,255,255,.14);
}
label{ color: rgba(255,255,255,.70); }

/* Buttons */
.btn{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, #7b5cff, #3a8dff);
  box-shadow: 0 10px 26px rgba(123,92,255,.35);
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn.primary{
  background: linear-gradient(135deg, #7b5cff, #3a8dff);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(58,141,255,.35);
}
.btn.ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* Announcement bar */
.announce{background: linear-gradient(90deg, rgba(123,92,255,.22), rgba(58,141,255,.16)); border-bottom: 1px solid rgba(255,255,255,.10);}
.announce-cta{ background: rgba(255,255,255,.10); border-color: rgba(123,92,255,.35); color: rgba(255,255,255,.90); }
.announce-cta:hover{ background: rgba(255,255,255,.14); }
.announce-text{ color: rgba(255,255,255,.90); }

/* Navigation */
.nav a:hover{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.92) !important; }

/* Checkout stepper */
.stepper-line{ background: rgba(255,255,255,.12); }
.stepper-dot{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.stepper-txt{ color: rgba(255,255,255,.65); }
.stepper-item.is-active .stepper-dot{ background: rgba(123,92,255,.18); border-color: rgba(123,92,255,.45); }
.stepper-item.is-active .stepper-txt{ color: rgba(255,255,255,.92); }

/* Hero sections -> glass */
.hero{
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(123,92,255,.28), rgba(123,92,255,0)),
    radial-gradient(900px 320px at 80% 0%, rgba(58,141,255,.20), rgba(58,141,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-badge{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.hero-sub{ color: rgba(255,255,255,.72); }

/* Trust pills */
.trust{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.78); }

/* Muted section background */
.muted-bg{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }

/* Plans + add-ons cards */
.plan{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.plan.popular{ border-color: rgba(123,92,255,.55); box-shadow: 0 18px 50px rgba(123,92,255,.18); }
.badge-pop{ background: rgba(123,92,255,.18); border-color: rgba(123,92,255,.35); color: rgba(255,255,255,.88); }
.plan-tag, .price-month, .plan-desc{ color: rgba(255,255,255,.70) !important; }
.plan-feat{ color: rgba(255,255,255,.78) !important; }

/* Tables */
.table{ border-color: rgba(255,255,255,.12); }
.table th{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
.table td{ border-bottom-color: rgba(255,255,255,.10); }
.table tr:hover td{ background: rgba(255,255,255,.06); }

/* Mobile CTA bar */
@media (max-width:768px){
  .mobile-cta{ background: rgba(10,12,28,.72); border-top-color: rgba(255,255,255,.12); }
}

/* Home hero visual (right side) */
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px;align-items:stretch}
.hero-visual{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 28% 30%, rgba(123,92,255,.55), transparent 55%),
    radial-gradient(circle at 72% 22%, rgba(58,141,255,.45), transparent 55%),
    radial-gradient(circle at 55% 75%, rgba(255,77,199,.25), transparent 55%);
}
.hero-visual-inner{position:relative;padding:18px}
.hero-visual-title{font-weight:900;font-size:14px;letter-spacing:.2px;color:rgba(255,255,255,.90)}
.palette{display:flex;gap:10px;margin-top:14px;align-items:center}
.dot{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.dot.p1{background:#7b5cff}
.dot.p2{background:#ff4dc7}
.dot.p3{background:#3a8dff}
.dot.p4{background:#1bd6ff}
.dot.p5{background:#0b0f26}
.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hero-metric{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.hero-metric .num{font-size:20px;font-weight:900;color:rgba(255,255,255,.92)}
.hero-metric .lbl{font-size:12px;color:rgba(255,255,255,.70)}

/* Home steps (How it works) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.step-no{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(123,92,255,.18);border:1px solid rgba(123,92,255,.35);color:rgba(255,255,255,.92);flex:0 0 32px}
.step-title{font-weight:900;color:rgba(255,255,255,.92)}
.step-text{margin-top:2px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.45}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#ffffff 0%, var(--bg) 45%, #ffffff 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:18px}
.topbar{position:sticky;top:0;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}

/* Announcement bar */
.announce{background:linear-gradient(90deg, rgba(103,61,230,.22), rgba(18,183,255,.16));border-bottom:1px solid var(--line)}
.announce-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
.announce-inner{padding:8px 0}
.announce-text{color:var(--text);font-weight:800;font-size:15px;opacity:.95;letter-spacing:-.1px}
.announce-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(103,61,230,.34);background:rgba(255,255,255,.85);font-weight:900;font-size:13px}
.announce-cta:hover{background:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:12px}
.nav a{padding:10px 12px;border-radius:12px;color:var(--muted)}
.nav a:hover{background:rgba(12,18,32,.06);color:var(--text)}
.nav a.muted{opacity:.8}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.h1{font-size:34px;line-height:1.15;margin:0 0 8px}
.h2{font-size:22px;margin:0 0 8px}
.p{color:var(--muted);margin:0 0 14px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12px;background:rgba(12,18,32,.03)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(135deg,#5b7cfa,#7c5cff);color:#fff;font-weight:800;cursor:pointer;text-decoration:none;}
.btn:hover{background:rgba(12,18,32,.06)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#ffffff;font-weight:800}
.btn.danger{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.35)}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px}
.input,select,textarea{width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:#ffffff;color:var(--text);outline:none}
.input:focus,select:focus,textarea:focus{border-color:rgba(109,92,255,.65);box-shadow:0 0 0 4px rgba(109,92,255,.14)}
.row{display:flex;gap:12px;align-items:center}
.row > *{flex:1}
label{display:block;color:var(--muted);font-size:13px;margin:10px 0 6px}
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:800;background:rgba(12,18,32,.03)}
.table tr:hover td{background:rgba(12,18,32,.03)}
.alert{margin:14px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(12,18,32,.03)}
.alert.success{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.08)}
.alert.error{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.08)}
.alert.warning{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.08)}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .num{font-size:26px;font-weight:800}
.muted{color:var(--muted)}
.footer{border-top:1px solid var(--line);margin-top:24px}
.footer-inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}

/* --- Pro Landing (Hostinger-like) --- */
.section{padding:18px 0}
.hero2{padding:34px;border-radius:26px;border:1px solid var(--line);background:
  radial-gradient(900px 320px at 20% 0%, rgba(103,61,230,.28), rgba(109,92,255,0)),
  radial-gradient(900px 320px at 80% 0%, rgba(18,183,255,.16), rgba(18,183,255,0)),
  linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  box-shadow:var(--shadow)
}
.hero2-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch}
.hero2 h1{font-size:52px;line-height:1.04;margin:0 0 10px;letter-spacing:-.8px}
.hero2 p{margin:0 0 16px;color:var(--muted);font-size:16px;line-height:1.55}
.hero2 .trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.trust .pill{background:rgba(255,255,255,.70)}
.shot{border-radius:20px;border:1px solid var(--line);background:linear-gradient(135deg, rgba(0,0,0,.72), rgba(0,0,0,.52));position:relative;overflow:hidden;box-shadow:var(--shadow)}
.shot::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%, rgba(109,92,255,.55), transparent 55%), radial-gradient(circle at 70% 20%, rgba(18,183,255,.40), transparent 55%);filter:blur(0px)}
.shot-inner{position:relative;padding:18px;color:rgba(255,255,255,.92)}
.shot-title{font-weight:900;font-size:14px;letter-spacing:.2px;opacity:.9}
.shot-metric{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.metric{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.metric .num{font-size:22px;font-weight:900}
.metric .lbl{font-size:12px;opacity:.75}

.icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.iconcard{border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.86);box-shadow:var(--shadow);padding:16px}
.iconcard .icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg, rgba(109,92,255,.18), rgba(18,183,255,.14));border:1px solid rgba(109,92,255,.20);display:flex;align-items:center;justify-content:center;font-weight:900}
.iconcard h3{margin:10px 0 6px;font-size:16px}
.iconcard p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

@media(max-width:980px){
  .hero2-grid{grid-template-columns:1fr}
  .hero2 h1{font-size:34px}
  .icon-grid{grid-template-columns:1fr}
}


.notice{border:1px solid rgba(109,92,255,.20);background:rgba(109,92,255,.07);padding:14px 14px;border-radius:16px;margin:14px 0}
.demo-card{display:block;text-decoration:none;color:inherit;overflow:hidden}
.demo-thumb{height:140px;background-size:cover;background-position:center;border-bottom:1px solid var(--line);background-color:rgba(12,18,32,.03)}
@media (max-width:920px){.demo-thumb{height:120px}}

/* Purchase hero */
.hero{margin-top:10px}
.hero-card{padding:22px;border-radius:22px;border:1px solid var(--line);
  background:radial-gradient(900px 260px at 20% 0%, rgba(103,61,230,.28), rgba(109,92,255,0)),
             radial-gradient(900px 260px at 80% 0%, rgba(18,183,255,.16), rgba(18,183,255,0)),
             #ffffff;
  box-shadow:var(--shadow);
}
@media(max-width:900px){
  .hero-card{padding:16px}
  .h1{font-size:28px}
}

/* Feature lists (package benefits) */
.features{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.features li{display:flex;gap:10px;align-items:flex-start;color:var(--text)}
.features li .tick{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.25);color:var(--ok);font-weight:900;flex:0 0 22px;margin-top:1px}
.features li .meta{color:var(--muted);font-size:13px;margin-top:2px}

.price-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-line .price{font-size:26px;font-weight:900}
.price-line .sub{color:var(--muted);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(12,18,32,.03);color:var(--muted);font-size:12px}
.tag-pop{background:rgba(109,92,255,.10);border-color:rgba(103,61,230,.28);color:var(--text)}

/* Purchase sticky bar (mobile) */
.stickybar{position:sticky;bottom:0;z-index:9;margin-top:14px}
.stickybar .card{display:flex;gap:12px;align-items:center;justify-content:space-between}
@media(min-width:901px){.stickybar{display:none}}

/* Feature list like hosting cards */
.feature-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.feature{display:flex;align-items:flex-start;gap:10px;color:var(--text)}
.feature .tick{width:18px;height:18px;border-radius:6px;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.25);display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;margin-top:2px}
.feature .tick::before{content:"✓";font-weight:900;color:var(--ok);font-size:12px;line-height:1}
.price-big{font-size:26px;font-weight:900;letter-spacing:-.2px}
.price-sub{color:var(--muted);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(12,18,32,.03);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
.popular{border-color:rgba(109,92,255,.30)}

/* Pricing cards (Hostinger-like light premium) */
.pricing-card{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  background:radial-gradient(900px 260px at 10% 0%, rgba(109,92,255,.12), rgba(109,92,255,0)),
             radial-gradient(900px 260px at 90% 0%, rgba(18,183,255,.10), rgba(18,183,255,0)),
             #ffffff;
}
.pricing-card:hover{transform:translateY(-2px);box-shadow:0 20px 70px rgba(12,18,32,.12)}
.pricing-card.popular{border-color:rgba(109,92,255,.45);box-shadow:0 26px 90px rgba(109,92,255,.12)}



/* Dark glass cards (for pricing section) */
.dark-card{
  background: linear-gradient(135deg, rgba(0,0,0,.72), rgba(0,0,0,.55));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
.dark-card .muted, .dark-card .p, .dark-card .sub{ color: rgba(255,255,255,.72) !important; }
.dark-card .feature-list .feature div{ color: rgba(255,255,255,.86); }
.dark-card input[type="radio"], .dark-card input[type="checkbox"]{ accent-color: var(--accent2); }

/* Mobile: make package cards swipe like a carousel */
@media (max-width: 680px){
  .package-carousel{
    display:flex !important;
    overflow-x:auto;
    gap:12px;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }
  .package-carousel > label{
    min-width: 82%;
    scroll-snap-align:start;
  }
}

/* Admin form helper */
.grid-col-2{ grid-column: span 2; }

/* --- Demo Modal --- */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal-panel{position:relative;max-width:920px;margin:6vh auto;background:rgba(10,10,10,.75);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.5);padding:14px;backdrop-filter:blur(12px)}
@media(max-width:720px){.modal-panel{margin:2vh 10px;max-width:none}}
.demo-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 2px}
.demo-shot{width:860px;max-width:92vw;height:460px;background-size:cover;background-position:center;border-radius:14px;border:1px solid rgba(255,255,255,.10);scroll-snap-align:start}
@media(max-width:720px){.demo-shot{height:360px}}

/* --- Landing page (Hostinger-like) --- */
.landing-hero{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:center}
.landing-title{font-size:44px;line-height:1.08;margin:10px 0 10px;letter-spacing:-.6px}
.landing-sub{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 14px}
.landing-cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 10px}
.landing-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.landing-hero-right{display:flex;justify-content:flex-end}
.mock{width:100%;max-width:420px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(135deg,#ffffff, rgba(109,92,255,.06));box-shadow:var(--shadow);overflow:hidden}
.mock-top{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--line);background:rgba(12,18,32,.03)}
.mock-top .dot{width:10px;height:10px;border-radius:999px;background:rgba(12,18,32,.18)}
.mock-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.mock-kpi{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.mock-kpi .k{color:var(--muted);font-size:12px;font-weight:800}
.mock-kpi .v{font-weight:900}
.mock-line{height:1px;background:var(--line);margin:2px 0}
.mock-card{height:54px;border-radius:14px;border:1px solid var(--line);background:rgba(12,18,32,.03)}
.landing-section{grid-column:1/-1;margin-top:6px}
.section-head{margin:6px 0 10px}

@media(max-width:900px){
  .landing-hero{grid-template-columns:1fr}
  .landing-hero-right{justify-content:flex-start}
  .landing-title{font-size:34px}
}


/* Hostinger-like mobile polish */
.nav-toggle{display:none;background:transparent;border:0;font-size:22px;line-height:1;padding:10px 12px;border-radius:10px}
@media (max-width:768px){
  .nav{display:none;position:absolute;right:16px;top:60px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:10px;min-width:180px}
  .nav.open{display:flex;flex-direction:column;gap:6px}
  .nav a{padding:10px 12px;border-radius:10px}
  .nav-toggle{display:inline-flex}
  .topbar-inner{position:relative}
  main.container{padding-top:14px}
}

/* --- Checkout wizard (3-step) --- */
.checkout{max-width:980px;margin:0 auto}
.stepper{display:flex;align-items:center;gap:12px;margin:10px 0 22px}
.stepper-line{flex:1;height:2px;background:rgba(0,0,0,.08)}
.stepper-item{display:flex;align-items:center;gap:10px;white-space:nowrap}
.stepper-dot{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08)}
.stepper-txt{font-size:13px;color:rgba(0,0,0,.65);font-weight:700}
.stepper-item.is-active .stepper-dot{background:rgba(88,120,255,.14);border-color:rgba(88,120,255,.35)}
.stepper-item.is-active .stepper-txt{color:rgba(0,0,0,.88)}
.checkout-step{display:none}
.checkout-step.is-active{display:block}
.hero-card{background:linear-gradient(135deg, rgba(88,120,255,.12), rgba(160,208,255,.18));border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px;margin-bottom:16px}
.hero-card-title{font-size:16px;font-weight:900}
.hero-card-sub{margin-top:6px;color:rgba(0,0,0,.7);font-size:13px}
.sub-title{margin:18px 0 10px;font-size:16px;font-weight:900}
.summary{margin-top:16px}
.summary-row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.monthly-price{font-size:18px;font-weight:900}
.summary-actions{margin-top:14px;display:flex;justify-content:flex-end}
.summary-actions.two{justify-content:space-between}
.step-card-title{font-weight:900;font-size:16px}

@media (max-width:768px){
  .stepper{gap:10px}
  .stepper-line{display:none}
  .stepper-item{gap:8px}
  .stepper-dot{width:30px;height:30px;border-radius:10px}
  .stepper-txt{font-size:12px}
  .summary-row{flex-direction:column;align-items:flex-start}
}

.hero{margin:18px 0 10px;border-radius:22px;background:linear-gradient(135deg, rgba(120,140,255,.18), rgba(90,200,255,.12));
  border:1px solid rgba(0,0,0,.06);padding:26px}
.hero-small{padding:20px}
.hero-badge{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.06);margin-bottom:12px}
.hero-title{font-size:42px;line-height:1.1;margin:0 0 10px}
.hero-sub{font-size:16px;color:rgba(0,0,0,.72);margin:0 0 14px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Desktop: make top banner/hero feel "big" like Hostinger */
@media (min-width: 901px){
  .hero{padding:44px;border-radius:28px}
  .hero-small{padding:36px}
  .hero-title{font-size:56px;letter-spacing:-.8px}
  .hero-sub{font-size:18px;max-width:72ch}
  .announce-inner{padding:14px 0}
  .announce-text{font-size:16px}
  .announce-cta{padding:12px 16px}
}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,.12)}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.trust{font-size:12px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06)}

.section{margin:20px 0}
.section-title{font-size:22px;margin:0 0 12px}
.muted-bg{background:rgba(0,0,0,.02);border-radius:18px;padding:16px;border:1px solid rgba(0,0,0,.05)}

.pricing-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:32%;gap:12px;overflow-x:auto;padding:6px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pricing-scroll > .card{scroll-snap-align:start}
.pricing-scroll::-webkit-scrollbar{display:none}
.plan{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);padding:16px}
.plan.popular{border-color:rgba(88,120,255,.6);box-shadow:0 10px 24px rgba(88,120,255,.18)}
.badge-pop{position:absolute;top:12px;right:12px;font-size:11px;padding:6px 8px;border-radius:999px;background:rgba(88,120,255,.14);border:1px solid rgba(88,120,255,.28);font-weight:800}
.plan-name{font-size:18px;font-weight:900}
.plan-tag{font-size:12px;color:rgba(0,0,0,.65);margin-top:2px}
.price-once{font-size:22px;font-weight:900}
.price-month{font-size:12px;color:rgba(0,0,0,.65);margin-top:2px}
.plan-desc{font-size:13px;color:rgba(0,0,0,.7);margin:8px 0}
.plan-feat{margin:10px 0 0;padding-left:18px;color:rgba(0,0,0,.75);font-size:13px}
.plan-select{margin-top:14px;display:flex;gap:10px;align-items:center}
.plan-select input{transform:scale(1.2)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.addon-top{display:flex;justify-content:space-between;gap:10px}
.addon-price{font-weight:900}
.addon-check{margin-top:10px;display:flex;gap:10px;align-items:center}

.total-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.total-price{font-size:26px;font-weight:900}
.mobile-cta{display:none}
@media (max-width:768px){
  .hero-title{font-size:28px}
  .cards{grid-template-columns:1fr}
  .pricing-scroll{grid-auto-columns:85%}
  .total-row{flex-direction:column;align-items:stretch}
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;gap:10px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.08);z-index:9999}
  .mobile-cta .txt{flex:1;font-size:13px}
  body{padding-bottom:74px}
}

/* ===============================
   NEON GLASS THEME (final override)
   Keep this at the END so it wins
   =============================== */
body{
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(123,92,255,.35), rgba(123,92,255,0) 55%),
    radial-gradient(900px 420px at 82% -10%, rgba(58,141,255,.28), rgba(58,141,255,0) 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(255,77,199,.14), rgba(255,77,199,0) 60%),
    linear-gradient(180deg, #060715 0%, #050513 60%, #060715 100%);
  color: rgba(255,255,255,.92);
}
.topbar{background: rgba(10,12,28,.55);border-bottom: 1px solid rgba(255,255,255,.10)}
.card{background: rgba(255,255,255,.08);border: 1px solid rgba(255,255,255,.12);box-shadow: 0 18px 60px rgba(0,0,0,.35);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px)}
.p,.muted,.footer-inner,.nav a{color: rgba(255,255,255,.72) !important}
.h1,.h2,.section-title,.brand{color: rgba(255,255,255,.92) !important}
.badge{background: rgba(255,255,255,.07);border-color: rgba(255,255,255,.12);color: rgba(255,255,255,.72)}
.input,select,textarea{background: rgba(255,255,255,.10);border: 1px solid rgba(255,255,255,.16);color: rgba(255,255,255,.92)}
.input::placeholder,textarea::placeholder{color: rgba(255,255,255,.55)}
.input:focus,select:focus,textarea:focus{border-color: rgba(123,92,255,.80);box-shadow: 0 0 0 4px rgba(123,92,255,.22);background: rgba(255,255,255,.14)}
label{color: rgba(255,255,255,.70)}
.btn{border: 1px solid rgba(255,255,255,.10);background: linear-gradient(135deg, #7b5cff, #3a8dff);box-shadow: 0 10px 26px rgba(123,92,255,.35)}
.btn:hover{filter: brightness(1.05);transform: translateY(-1px)}
.btn.primary{background: linear-gradient(135deg, #7b5cff, #3a8dff);border-color: transparent;box-shadow: 0 12px 30px rgba(58,141,255,.35)}
.btn.ghost{background: rgba(255,255,255,.08);border: 1px solid rgba(255,255,255,.14);box-shadow: none}
.announce{background: linear-gradient(90deg, rgba(123,92,255,.22), rgba(58,141,255,.16));border-bottom: 1px solid rgba(255,255,255,.10)}
.announce-cta{background: rgba(255,255,255,.10);border-color: rgba(123,92,255,.35);color: rgba(255,255,255,.90)}
.announce-cta:hover{background: rgba(255,255,255,.14)}
.announce-text{color: rgba(255,255,255,.90)}
.nav a:hover{background: rgba(255,255,255,.08);color: rgba(255,255,255,.92) !important}
.stepper-line{background: rgba(255,255,255,.12)}
.stepper-dot{background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.12)}
.stepper-txt{color: rgba(255,255,255,.65)}
.stepper-item.is-active .stepper-dot{background: rgba(123,92,255,.18);border-color: rgba(123,92,255,.45)}
.stepper-item.is-active .stepper-txt{color: rgba(255,255,255,.92)}
.hero{background: radial-gradient(900px 320px at 20% 0%, rgba(123,92,255,.28), rgba(123,92,255,0)), radial-gradient(900px 320px at 80% 0%, rgba(58,141,255,.20), rgba(58,141,255,0)), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));border: 1px solid rgba(255,255,255,.14);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px)}
.hero-badge{background: rgba(255,255,255,.10);border-color: rgba(255,255,255,.14);color: rgba(255,255,255,.85)}
.hero-sub{color: rgba(255,255,255,.72)}
.trust{background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.12);color: rgba(255,255,255,.78)}
.muted-bg{background: rgba(255,255,255,.05);border-color: rgba(255,255,255,.10)}
.plan{background: rgba(255,255,255,.07);border-color: rgba(255,255,255,.12)}
.plan.popular{border-color: rgba(123,92,255,.55);box-shadow: 0 18px 50px rgba(123,92,255,.18)}
.badge-pop{background: rgba(123,92,255,.18);border-color: rgba(123,92,255,.35);color: rgba(255,255,255,.88)}
.plan-tag,.price-month,.plan-desc{color: rgba(255,255,255,.70) !important}
.plan-feat{color: rgba(255,255,255,.78) !important}
.table{border-color: rgba(255,255,255,.12)}
.table th{background: rgba(255,255,255,.06);color: rgba(255,255,255,.72)}
.table td{border-bottom-color: rgba(255,255,255,.10)}
.table tr:hover td{background: rgba(255,255,255,.06)}
@media (max-width:768px){.mobile-cta{background: rgba(10,12,28,.72);border-top-color: rgba(255,255,255,.12)}}

/* Mobile nav dropdown (dark glass) */
@media (max-width:768px){
  .nav{background: rgba(10,12,28,.82) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; }
  .nav a{color: rgba(255,255,255,.82) !important;}
}

/* =====================================================
   Delivery checklist + progress
   ===================================================== */
.progress{
  height: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar{
  height: 100%;
  background: linear-gradient(90deg, rgba(123,92,255,.95), rgba(0,194,255,.85), rgba(255,77,199,.85));
  box-shadow: 0 0 18px rgba(123,92,255,.35);
}
.delivery-list{display:flex;flex-direction:column;gap:10px}
.delivery-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.delivery-item input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: #7b5cff;
}
.delivery-item span{color: rgba(255,255,255,.86)}
.delivery-item .muted{color: rgba(255,255,255,.60)}