/* ─── RESET & VARIABLES ─────────────────────────────────── */
:root {
  --brand: #48c756;
  --brand-dark: #2ea83d;
  --brand-light: #6fd67b;
  --brand-glow: rgba(72,199,86,0.3);
  --dark:  #07090c;
  --dark2: #0b0e13;
  --dark3: #111620;
  --dark4: #171e2b;
  --glass: rgba(255,255,255,0.03);
  --glass2: rgba(255,255,255,0.06);
  --gb: rgba(255,255,255,0.07);
  --text: #e4eaf2;
  --muted: #6b7a8d;
  --dim: #3a4455;
  --r: 14px;
  --rl: 22px;
  --rs: 9px;
  --shadow: 0 24px 64px rgba(0,0,0,0.5);
  --t: 0.28s cubic-bezier(.4,0,.2,1);
  --nav-scrolled-bg: rgba(7,9,12,0.88);
  --card-shadow: none;
  --surface-subtle: rgba(255,255,255,0.02);
  --surface-dark: rgba(0,0,0,0.2);
}
html.light {
  --dark: #f0f4f8;
  --dark2: #e8edf2;
  --dark3: #ffffff;
  --dark4: #f8fafc;
  --glass: rgba(0,0,0,0.02);
  --glass2: rgba(0,0,0,0.04);
  --gb: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --dim: #94a3b8;
  --shadow: 0 24px 64px rgba(0,0,0,0.12);
  --nav-scrolled-bg: rgba(255,255,255,0.92);
  --brand-glow: rgba(72,199,86,0.2);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --surface-subtle: rgba(0,0,0,0.02);
  --surface-dark: rgba(0,0,0,0.04);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Inter',sans-serif; background:var(--dark); color:var(--text); overflow-x:hidden; line-height:1.6; transition:background .25s,color .25s }
::selection { background:var(--brand); color:#000 }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--dark2) }
::-webkit-scrollbar-thumb { background:var(--brand); border-radius:3px }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
button { cursor:pointer; font-family:inherit; border:none; outline:none }
input,textarea,select { font-family:inherit; outline:none }

/* ─── UTILITIES ─────────────────────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 24px }
.gradient-text { background:linear-gradient(130deg,var(--brand) 0%,#a0f0a8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.badge { display:inline-flex; align-items:center; gap:7px; padding:6px 15px; border-radius:50px; font-size:12px; font-weight:700; background:rgba(72,199,86,0.1); color:var(--brand); border:1px solid rgba(72,199,86,0.2); letter-spacing:.03em; text-transform:uppercase }
.section-label { display:flex; justify-content:center; margin-bottom:18px }
.section-title { font-size:clamp(2rem,3.8vw,3rem); font-weight:900; line-height:1.13; text-align:center; letter-spacing:-.03em }
.section-sub { text-align:center; color:var(--muted); font-size:16px; margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7 }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .55s ease, transform .55s ease }
.reveal.in { opacity:1; transform:none }
.d1 { transition-delay:.1s } .d2 { transition-delay:.18s } .d3 { transition-delay:.26s } .d4 { transition-delay:.34s }

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:50px; font-weight:700; font-size:14px; transition:var(--t); white-space:nowrap; letter-spacing:.01em }
.btn-primary { background:var(--brand); color:#000 }
.btn-primary:hover { background:var(--brand-light); transform:translateY(-2px); box-shadow:0 10px 32px var(--brand-glow) }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--gb) }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px) }
.btn-ghost { background:var(--glass2); color:var(--text); border:1px solid var(--gb); backdrop-filter:blur(10px) }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand) }

/* ─── NAV ───────────────────────────────────────────────── */
#nav { position:fixed; top:0; left:0; right:0; z-index:800; padding:18px 0; transition:var(--t) }
#nav.scrolled { background:var(--nav-scrolled-bg); backdrop-filter:blur(22px); border-bottom:1px solid var(--gb); padding:12px 0 }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px }
.nav-logo { flex-shrink:0 }
.nav-logo img { height:36px; width:auto; flex-shrink:0 }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none }
.nav-links a { font-size:13.5px; font-weight:500; color:var(--muted); transition:color .2s }
.nav-links a:hover { color:var(--text) }
.nav-actions { display:flex; align-items:center; gap:10px }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:none }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:var(--t) }
.mobile-menu { display:none; position:fixed; inset:0; background:var(--dark2); z-index:790; padding:96px 24px 40px; flex-direction:column }
.mobile-menu.open { display:flex }
.mobile-menu a { display:block; padding:16px 0; font-size:19px; font-weight:600; border-bottom:1px solid var(--gb) }
.mob-actions { margin-top:28px; display:flex; flex-direction:column; gap:12px }

/* ─── HERO ──────────────────────────────────────────────── */
#hero { min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; position:relative; overflow:hidden }
.hero-bg { position:absolute; inset:0; z-index:0 }

/* Visible grid */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(72,199,86,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,199,86,.12) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, transparent 100%);
}
/* Glowing orbs */
.orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none }
.orb-1 { width:700px; height:700px; background:radial-gradient(circle,rgba(72,199,86,.18) 0%,transparent 65%); top:-160px; left:-200px; animation:drift 10s ease-in-out infinite }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(72,199,86,.1) 0%,transparent 65%); bottom:-100px; right:-150px; animation:drift 14s ease-in-out infinite reverse }
.orb-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(72,199,86,.08) 0%,transparent 65%); top:40%; left:55%; animation:drift 8s ease-in-out infinite 2s }
@keyframes drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }

/* Particles canvas */
#particles { position:absolute; inset:0; z-index:0 }

.hero-content { position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center }
.hero-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px; background:rgba(72,199,86,.1); border:1px solid rgba(72,199,86,.25); font-size:12px; font-weight:700; color:var(--brand); margin-bottom:28px; text-transform:uppercase; letter-spacing:.05em }
.hero-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); animation:blink 2s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-h1 { font-size:clamp(3rem,6.5vw,5.2rem); font-weight:900; line-height:1.08; letter-spacing:-.035em; margin-bottom:22px }
.hero-sub { font-size:clamp(1rem,1.8vw,1.15rem); color:var(--muted); max-width:520px; margin:0 auto 38px; line-height:1.75 }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:64px }
.hero-stats { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap }
.hero-stat-num { font-size:2rem; font-weight:900; color:var(--brand) }
.hero-stat-label { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:2px }
.hero-vdiv { width:1px; height:44px; background:var(--gb) }
/* Logos strip */
.logos-strip { padding:40px 0; border-top:1px solid var(--gb); border-bottom:1px solid var(--gb); background:var(--dark2) }
.logos-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:40px }
.logos-inner span { font-size:13px; font-weight:700; color:var(--dim); letter-spacing:.08em; text-transform:uppercase }
.logos-label { font-size:12px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.08em; text-align:center; margin-bottom:20px }

/* ─── FREE PROMISE ──────────────────────────────────────── */
#promise { padding:110px 0 }
.promise-wrap { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.promise-text .badge { margin-bottom:22px }
.promise-text h2 { font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:900; line-height:1.18; letter-spacing:-.03em; margin-bottom:20px }
.promise-text p { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:32px }
.checklist { list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:36px }
.checklist li { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500 }
.check { width:22px; height:22px; border-radius:50%; background:rgba(72,199,86,.12); border:1px solid rgba(72,199,86,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
/* Visual side */
.promise-visual { position:relative }
.mock-browser { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--rl); overflow:hidden; box-shadow:var(--shadow) }
.mock-bar { background:var(--dark4); padding:12px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--gb) }
.mock-dots { display:flex; gap:6px }
.mock-dots span { width:10px; height:10px; border-radius:50% }
.mock-dots span:nth-child(1) { background:#ff5f56 }
.mock-dots span:nth-child(2) { background:#ffbd2e }
.mock-dots span:nth-child(3) { background:#27c93f }
.mock-url { flex:1; background:var(--dark); border-radius:6px; padding:5px 12px; font-size:12px; color:var(--muted); margin-left:8px }
.mock-body { padding:28px; display:grid; gap:12px }
.mock-header { height:48px; background:linear-gradient(90deg,var(--dark4),var(--dark2)); border-radius:8px }
.mock-hero { height:100px; background:linear-gradient(135deg,rgba(72,199,86,.12),rgba(72,199,86,.04)); border-radius:8px; display:flex; align-items:center; justify-content:center }
.mock-hero span { font-size:11px; color:var(--brand); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.mock-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.mock-card { height:50px; background:var(--dark4); border-radius:6px }
.mock-badge { position:absolute; top:-14px; right:24px; background:var(--brand); color:#000; font-weight:800; font-size:13px; padding:8px 18px; border-radius:50px; box-shadow:0 6px 20px var(--brand-glow) }

/* ─── HOW IT WORKS ──────────────────────────────────────── */
#how { padding:110px 0; background:var(--dark2) }
.steps-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:60px }
.step { background:var(--dark3); padding:40px 30px; position:relative; overflow:hidden; transition:var(--t) }
.step:first-child { border-radius:var(--r) 0 0 var(--r) }
.step:last-child  { border-radius:0 var(--r) var(--r) 0 }
.step::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gb) }
.step.lit::after { background:linear-gradient(90deg,var(--brand),var(--brand-light)) }
.step:hover { background:var(--dark4) }
.step-num { font-size:3.5rem; font-weight:900; color:rgba(255,255,255,.04); line-height:1; margin-bottom:16px }
.step-icon { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:rgba(72,199,86,.1); border:1px solid rgba(72,199,86,.2); color:var(--brand) }
.step h3 { font-size:17px; font-weight:700; margin-bottom:9px }
.step p  { font-size:13.5px; color:var(--muted); line-height:1.65 }

/* ─── FREE GET STARTED ──────────────────────────────────── */
#get-started { padding:110px 0 }
.gs-wrap { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.gs-left h2 { font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:900; line-height:1.18; letter-spacing:-.03em; margin-bottom:16px }
.gs-left p  { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:32px }
.gs-price-hero { display:flex; align-items:center; gap:18px; margin-bottom:32px }
.gs-free { font-size:4rem; font-weight:900; color:var(--brand); line-height:1 }
.gs-was { display:flex; flex-direction:column; gap:2px }
.gs-was .crossed { font-size:1.3rem; font-weight:700; color:var(--muted); text-decoration:line-through }
.gs-was .note { font-size:12px; color:var(--dim) }
.gs-features { list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:36px }
.gs-features li { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500 }
.gs-card { background:linear-gradient(135deg,rgba(72,199,86,.1),rgba(72,199,86,.03)); border:1px solid rgba(72,199,86,.25); border-radius:var(--rl); padding:40px; position:relative; overflow:hidden }
.gs-card::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; background:radial-gradient(circle,rgba(72,199,86,.15) 0%,transparent 70%); pointer-events:none }
.gs-card-title { font-size:22px; font-weight:800; margin-bottom:6px }
.gs-card-sub { font-size:13px; color:var(--muted); margin-bottom:28px }
.gs-addons { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px }
.gs-addon { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(0,0,0,.2); border-radius:var(--rs); border:1px solid var(--gb); font-size:13px }
.gs-addon-name { font-weight:500; color:var(--text) }
.gs-addon-price { font-weight:700; color:var(--brand) }
.gs-addon-note { font-size:11px; color:var(--dim) }

/* ─── SERVICES ──────────────────────────────────────────── */
#services { padding:110px 0; background:var(--dark2) }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px }
.svc { padding:38px; border-radius:var(--rl); background:var(--dark3); border:1px solid var(--gb); position:relative; overflow:hidden; transition:var(--t) }
.svc::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(72,199,86,.05),transparent); opacity:0; transition:var(--t) }
.svc:hover { border-color:rgba(72,199,86,.3); transform:translateY(-5px); box-shadow:0 24px 60px rgba(0,0,0,.3) }
.svc:hover::before { opacity:1 }
.svc-icon { width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:22px }
.svc-tag { display:inline-flex; gap:5px; padding:4px 11px; border-radius:50px; font-size:11px; font-weight:700; margin-bottom:14px; letter-spacing:.04em }
.tag-free { background:rgba(72,199,86,.12); color:var(--brand); border:1px solid rgba(72,199,86,.2) }
.tag-paid { background:rgba(255,180,0,.1); color:#ffb400; border:1px solid rgba(255,180,0,.2) }
.svc h3 { font-size:21px; font-weight:800; margin-bottom:10px }
.svc p  { font-size:13.5px; color:var(--muted); line-height:1.7; margin-bottom:18px }
.svc-price { font-size:18px; font-weight:800; color:var(--brand) }
.svc-price span { font-size:12px; font-weight:500; color:var(--muted) }
.svc-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:14px }
.svc-list li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted) }

/* ─── PORTFOLIO ─────────────────────────────────────────── */
#portfolio { padding:110px 0 }
.port-filter { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:36px 0 48px }
.flt { padding:8px 20px; border-radius:50px; font-size:13px; font-weight:600; border:1.5px solid var(--gb); background:transparent; color:var(--muted); transition:var(--t) }
.flt.on,.flt:hover { background:var(--brand); color:#000; border-color:var(--brand) }
.port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px }
.port-item { border-radius:var(--rl); overflow:hidden; background:var(--dark3); border:1px solid var(--gb); transition:var(--t); cursor:pointer }
.port-item:hover { transform:translateY(-5px); box-shadow:0 24px 60px rgba(0,0,0,.4); border-color:rgba(72,199,86,.3) }
.port-thumb { aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--dark4) }
.port-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.port-item:hover .port-thumb img { transform:scale(1.05) }
.port-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px }
.port-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent); opacity:0; transition:var(--t); display:flex; align-items:flex-end; padding:18px }
.port-item:hover .port-overlay { opacity:1 }
.port-body { padding:20px }
.port-cat  { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:7px }
.port-title { font-size:16px; font-weight:700; margin-bottom:5px }
.port-desc  { font-size:13px; color:var(--muted); line-height:1.5 }
.port-empty { grid-column:1/-1; text-align:center; padding:60px; color:var(--muted) }

/* ─── PROJECT MODAL ─────────────────────────────────────── */
#proj-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); z-index:1200; align-items:center; justify-content:center; padding:24px }
#proj-modal.open { display:flex }
.pm-inner { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--rl); width:100%; max-width:820px; max-height:90vh; overflow-y:auto; position:relative }
.pm-close { position:sticky; top:16px; float:right; margin:16px 16px 0 0; width:36px; height:36px; border-radius:50%; background:var(--dark4); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:var(--t); z-index:10; flex-shrink:0 }
.pm-close:hover { background:rgba(255,80,80,.15); color:#ff6666 }
.pm-hero { aspect-ratio:16/8; background:var(--dark4); overflow:hidden; position:relative; border-radius:var(--rl) var(--rl) 0 0 }
.pm-hero img { width:100%; height:100%; object-fit:cover }
.pm-hero-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.pm-body { padding:36px }
.pm-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px }
.pm-tag { padding:4px 12px; border-radius:50px; font-size:11px; font-weight:700; background:rgba(72,199,86,.12); color:var(--brand); border:1px solid rgba(72,199,86,.2) }
.pm-title { font-size:2rem; font-weight:900; letter-spacing:-.03em; margin-bottom:8px }
.pm-sub   { font-size:14px; color:var(--muted); margin-bottom:28px; line-height:1.7 }
.pm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px }
.pm-stat  { background:var(--dark4); border-radius:var(--r); padding:18px; text-align:center; border:1px solid var(--gb) }
.pm-stat-val { font-size:1.5rem; font-weight:900; color:var(--brand) }
.pm-stat-label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:3px }
.pm-section-title { font-size:15px; font-weight:700; margin-bottom:14px; color:var(--text) }
.pm-deliverables { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px }
.pm-deliverables li { display:flex; align-items:center; gap:10px; font-size:14px }
.pm-tech { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px }
.pm-tech span { padding:5px 13px; border-radius:50px; font-size:12px; font-weight:600; background:var(--dark4); border:1px solid var(--gb); color:var(--muted) }
.pm-footer { display:flex; gap:12px; padding-top:24px; border-top:1px solid var(--gb) }

/* ─── WHY US ────────────────────────────────────────────── */
#why { padding:110px 0; background:var(--dark2) }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px }
.why-card { padding:32px; border-radius:var(--r); background:var(--dark3); border:1px solid var(--gb); transition:var(--t) }
.why-card:hover { border-color:rgba(72,199,86,.25); box-shadow:0 16px 48px rgba(0,0,0,.2) }
.why-icon { width:50px; height:50px; border-radius:13px; background:rgba(72,199,86,.1); border:1px solid rgba(72,199,86,.15); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--brand) }
.why-card h3 { font-size:16px; font-weight:700; margin-bottom:8px }
.why-card p  { font-size:13.5px; color:var(--muted); line-height:1.65 }

/* ─── TESTIMONIALS ──────────────────────────────────────── */
#testimonials { padding:110px 0 }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px; margin-top:56px }
.tcard { padding:30px; border-radius:var(--rl); background:var(--dark3); border:1px solid var(--gb) }
.tcard-stars { display:flex; gap:3px; margin-bottom:14px; color:#ffb400; font-size:15px }
.tcard-body  { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:22px; font-style:italic }
.tcard-author { display:flex; align-items:center; gap:12px }
.tcard-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#000; flex-shrink:0 }
.tcard-name { font-weight:700; font-size:14px }
.tcard-role { font-size:12px; color:var(--muted) }

/* ─── WIZARD ────────────────────────────────────────────── */
#wizard-trigger { padding:110px 0; background:var(--dark2) }
.wt-inner { max-width:760px; margin:0 auto; text-align:center }
.wt-inner h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; letter-spacing:-.03em; margin-bottom:16px }
.wt-inner p { color:var(--muted); font-size:16px; line-height:1.75; margin-bottom:36px }

/* Wizard overlay */
#wizard { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(10px); z-index:1500; align-items:center; justify-content:center; padding:20px; overflow-y:auto }
#wizard.open { display:flex }
.wz-wrap { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--rl); width:100%; max-width:680px; overflow:hidden; position:relative; margin:auto }
.wz-head { background:var(--dark4); padding:24px 28px; border-bottom:1px solid var(--gb); display:flex; align-items:center; justify-content:space-between }
.wz-head-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px }
.wz-head-logo img { height:28px }
.wz-close { width:34px; height:34px; border-radius:50%; background:var(--glass2); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:var(--t) }
.wz-close:hover { background:rgba(255,80,80,.15); color:#ff6666 }
/* Progress */
.wz-progress { padding:20px 28px 0; background:var(--dark4); border-bottom:1px solid var(--gb) }
.wz-steps { display:flex; align-items:center; gap:0; margin-bottom:14px }
.wz-step-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:2px solid var(--dim); color:var(--dim); transition:var(--t); flex-shrink:0 }
.wz-step-dot.done  { background:var(--brand); border-color:var(--brand); color:#000 }
.wz-step-dot.active{ border-color:var(--brand); color:var(--brand) }
.wz-step-line { flex:1; height:2px; background:var(--dim); transition:var(--t) }
.wz-step-line.done { background:var(--brand) }
.wz-prog-bar { height:3px; background:var(--dim); border-radius:2px; margin-bottom:0; overflow:hidden }
.wz-prog-fill { height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-light)); border-radius:2px; transition:width .4s ease }
/* Body */
.wz-body { padding:36px 28px; min-height:340px }
.wz-panel { display:none; animation:fadeUp .3s ease }
.wz-panel.active { display:block }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.wz-panel-title { font-size:1.4rem; font-weight:800; margin-bottom:6px; letter-spacing:-.02em }
.wz-panel-sub   { font-size:13px; color:var(--muted); margin-bottom:28px; line-height:1.6 }
/* Form elements */
.wz-group { margin-bottom:18px }
.wz-label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.05em }
.wz-input,.wz-textarea,.wz-select { width:100%; padding:13px 16px; background:var(--dark); border:1.5px solid var(--gb); border-radius:var(--rs); color:var(--text); font-size:14px; transition:var(--t) }
.wz-input::placeholder,.wz-textarea::placeholder { color:var(--dim) }
.wz-input:focus,.wz-textarea:focus,.wz-select:focus { border-color:var(--brand) }
.wz-textarea { resize:vertical; min-height:90px }
.wz-select option { background:var(--dark3) }
.wz-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
/* Option cards */
.wz-options { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.wz-opt { padding:16px; border-radius:var(--r); border:2px solid var(--gb); background:var(--dark4); cursor:pointer; transition:var(--t); text-align:left }
.wz-opt:hover { border-color:var(--brand) }
.wz-opt.picked { border-color:var(--brand); background:rgba(72,199,86,.08) }
.wz-opt-icon { font-size:22px; margin-bottom:8px }
.wz-opt-title { font-size:13px; font-weight:700; margin-bottom:3px }
.wz-opt-sub   { font-size:12px; color:var(--muted) }
/* Colour picker row */
.wz-colour-row { display:flex; align-items:center; gap:12px }
.wz-colour-row input[type=color] { width:48px; height:42px; border-radius:var(--rs); border:1.5px solid var(--gb); background:none; cursor:pointer; padding:2px }
/* Breakdown step */
.wz-breakdown { background:var(--dark4); border-radius:var(--r); border:1px solid var(--gb); padding:22px; margin-bottom:20px }
.wz-breakdown-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px }
.wz-breakdown-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gb); font-size:14px }
.wz-breakdown-row:last-child { border-bottom:none }
.wz-breakdown-row .label { color:var(--text); font-weight:500 }
.wz-breakdown-row .val   { color:var(--brand); font-weight:700 }
/* Price reveal */
.wz-price-reveal { text-align:center; padding:28px; background:linear-gradient(135deg,rgba(72,199,86,.12),rgba(72,199,86,.03)); border-radius:var(--r); border:1px solid rgba(72,199,86,.25); margin-bottom:22px }
.wz-price-main { font-size:3.2rem; font-weight:900; color:var(--brand); letter-spacing:-.04em; line-height:1 }
.wz-price-note { font-size:13px; color:var(--muted); margin-top:6px }
.wz-price-sub  { font-size:12px; color:var(--dim); margin-top:4px }
/* Addon checkboxes */
.wz-addon-list { display:flex; flex-direction:column; gap:10px; margin-bottom:22px }
.wz-addon-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--rs); border:1.5px solid var(--gb); background:var(--dark4); cursor:pointer; transition:var(--t) }
.wz-addon-item.checked { border-color:var(--brand); background:rgba(72,199,86,.06) }
.wz-addon-check { width:20px; height:20px; border-radius:5px; border:2px solid var(--dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--t) }
.wz-addon-item.checked .wz-addon-check { background:var(--brand); border-color:var(--brand) }
.wz-addon-info { flex:1 }
.wz-addon-name { font-size:13px; font-weight:600 }
.wz-addon-desc { font-size:11px; color:var(--muted) }
.wz-addon-cost { font-size:13px; font-weight:700; color:var(--brand) }
/* Total */
.wz-total { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--dark); border-radius:var(--rs); border:1px solid var(--gb); margin-bottom:22px }
.wz-total-label { font-size:14px; font-weight:600 }
.wz-total-val   { font-size:1.4rem; font-weight:900; color:var(--brand) }
/* Footer */
.wz-footer { padding:20px 28px; border-top:1px solid var(--gb); background:var(--dark4); display:flex; align-items:center; justify-content:space-between; gap:12px }
.wz-back { background:none; color:var(--muted); font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; transition:var(--t) }
.wz-back:hover { color:var(--text) }
.wz-next { padding:12px 28px; border-radius:50px; background:var(--brand); color:#000; font-weight:700; font-size:14px; transition:var(--t) }
.wz-next:hover { background:var(--brand-light); transform:translateY(-1px) }
.wz-step-label { font-size:12px; color:var(--dim) }
/* Success */
.wz-success { text-align:center; padding:40px 20px }
.wz-success-icon { width:72px; height:72px; border-radius:50%; background:rgba(72,199,86,.15); border:2px solid var(--brand); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--brand) }
.wz-success h3 { font-size:1.6rem; font-weight:900; margin-bottom:10px }
.wz-success p  { font-size:14px; color:var(--muted); line-height:1.7 }

.wz-choice-card { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r); border:2px solid var(--gb); background:var(--dark4); cursor:pointer; transition:var(--t) }
.wz-choice-card:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.03); transform:translateY(-1px) }
.wz-choice-card.picked.business { border-color:var(--brand); background:rgba(72,199,86,.07) }
.wz-choice-card.picked.store    { border-color:#f59e0b; background:rgba(245,158,11,.07) }
.wz-choice-card.picked.software { border-color:#8b5cf6; background:rgba(139,92,246,.07) }
.wz-choice-icon-box { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.wz-icon-green  { background:rgba(72,199,86,.15); color:var(--brand) }
.wz-icon-gold   { background:rgba(245,158,11,.15); color:#f59e0b }
.wz-icon-purple { background:rgba(139,92,246,.15); color:#8b5cf6 }
.wz-choice-title { font-size:14px; font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.wz-choice-sub   { font-size:12px; color:var(--muted); line-height:1.55 }
.wz-choice-badge { display:inline-flex; padding:3px 9px; border-radius:50px; font-size:10px; font-weight:800; background:rgba(72,199,86,.12); color:var(--brand); border:1px solid rgba(72,199,86,.25); white-space:nowrap; letter-spacing:.03em; vertical-align:middle }
.wz-choice-badge-gold { background:rgba(245,158,11,.12); color:#f59e0b; border-color:rgba(245,158,11,.3) }

.wz-val-row { display:flex; align-items:center; gap:12px; padding:11px 14px; background:rgba(72,199,86,.06); border:1px solid rgba(72,199,86,.14); border-radius:10px; font-size:13px; font-weight:600 }
.wz-val-row-purple { background:rgba(139,92,246,.06); border-color:rgba(139,92,246,.14) }
.wz-val-check { width:22px; height:22px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; color:#000; font-weight:900; line-height:1 }
.wz-val-check-purple { background:#8b5cf6; color:#fff }

/* ─── HOSTING PLANS ─────────────────────────────────────── */
/* ─── COMPARE ────────────────────────────────────────────── */
#compare { padding:110px 0; background:var(--dark2) }
.cmp-wrap { margin-top:52px; overflow-x:auto; -webkit-overflow-scrolling:touch }
.cmp-table { min-width:600px; display:flex; flex-direction:column; border-radius:var(--r); border:1px solid var(--gb); overflow:hidden }
/* header */
.cmp-head { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; background:var(--dark3); border-bottom:1px solid var(--gb) }
.cmp-label-col { padding:20px 22px; display:flex; align-items:center }
.cmp-col { padding:18px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; position:relative }
.cmp-col-du { background:rgba(72,199,86,.06); border-left:1px solid rgba(72,199,86,.2); border-right:1px solid rgba(72,199,86,.2) }
.cmp-col-du-glow { position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand); border-radius:2px 2px 0 0 }
.cmp-col-icon { width:36px; height:36px; border-radius:10px; background:var(--dark4); border:1px solid var(--gb); display:flex; align-items:center; justify-content:center; color:var(--muted); margin-bottom:2px }
/* rows */
.cmp-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border-top:1px solid var(--gb) }
.cmp-row:nth-child(even) { background:rgba(255,255,255,.015) }
.cmp-row-last { }
.cmp-feature { padding:16px 22px; font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center }
.cmp-row .cmp-col { padding:14px 12px }
.cmp-row .cmp-col-du { background:rgba(72,199,86,.04) }
/* value chips */
.cmp-yes { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#48c756; background:rgba(72,199,86,.1); border:1px solid rgba(72,199,86,.2); padding:5px 11px; border-radius:50px; white-space:nowrap }
.cmp-yes::before { content:''; width:7px; height:7px; border-radius:50%; background:#48c756; flex-shrink:0 }
.cmp-highlight { font-size:13px; padding:6px 14px }
.cmp-no { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#f87171; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.18); padding:5px 11px; border-radius:50px; white-space:nowrap }
.cmp-no::before { content:''; width:7px; height:7px; border-radius:50%; background:#f87171; flex-shrink:0 }
.cmp-meh { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#f59e0b; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.18); padding:5px 11px; border-radius:50px; white-space:nowrap }
.cmp-meh::before { content:''; width:7px; height:7px; border-radius:50%; background:#f59e0b; flex-shrink:0 }
.cmp-bad { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#f87171; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.18); padding:5px 11px; border-radius:50px }
.cmp-bad::before { content:''; width:7px; height:7px; border-radius:50%; background:#f87171; flex-shrink:0 }
/* footer */
.cmp-foot { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border-top:1px solid rgba(72,199,86,.25); background:var(--dark3); padding:4px 0 }
.cmp-foot .cmp-label-col { padding:16px 22px }
.cmp-foot .cmp-col { padding:16px 12px }
.cmp-foot .cmp-col-du { background:rgba(72,199,86,.06) }

/* ─── WHAT'S INCLUDED ───────────────────────────────────── */
#included { padding:110px 0; background:var(--dark2) }
.inc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
.inc-card { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--r); padding:28px 24px; transition:var(--t) }
.inc-card:hover { border-color:rgba(72,199,86,.3); transform:translateY(-3px) }
.inc-icon { width:48px; height:48px; border-radius:12px; background:rgba(72,199,86,.1); display:flex; align-items:center; justify-content:center; color:var(--brand); margin-bottom:18px; flex-shrink:0 }
.inc-card h3 { font-size:15px; font-weight:700; margin-bottom:8px }
.inc-card p  { font-size:13px; color:var(--muted); line-height:1.65 }

/* ─── FAQ ────────────────────────────────────────────────── */
#faq { padding:110px 0 }
.faq-wrap { max-width:780px; margin:52px auto 0; display:flex; flex-direction:column; gap:12px }
.faq-item { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--r); overflow:hidden; transition:border-color .2s }
.faq-item[open] { border-color:rgba(72,199,86,.35) }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-size:15px; font-weight:600; list-style:none; user-select:none }
.faq-q::-webkit-details-marker { display:none }
.faq-q:hover { color:var(--brand) }
.faq-chevron { flex-shrink:0; color:var(--muted); transition:transform .25s }
.faq-item[open] .faq-chevron { transform:rotate(180deg); color:var(--brand) }
.faq-a { padding:0 24px 20px; font-size:14px; color:var(--muted); line-height:1.75; border-top:1px solid var(--gb); padding-top:16px }

/* ─── CONTACT ───────────────────────────────────────────── */
#contact { padding:110px 0; background:var(--dark2) }
.contact-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start }
.contact-info .badge { margin-bottom:18px }
.contact-info h2 { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:900; letter-spacing:-.03em; margin-bottom:16px }
.contact-info p  { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:36px }
.cinfo-items { display:flex; flex-direction:column; gap:18px }
.cinfo-item  { display:flex; align-items:center; gap:14px }
.cinfo-icon  { width:42px; height:42px; border-radius:11px; background:rgba(72,199,86,.1); border:1px solid rgba(72,199,86,.2); display:flex; align-items:center; justify-content:center; color:var(--brand); flex-shrink:0 }
.cinfo-item strong { display:block; font-size:13px; font-weight:700; margin-bottom:2px }
.cinfo-item span   { font-size:13px; color:var(--muted) }
.form-card { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--rl); padding:36px }
.fg { margin-bottom:18px }
.fg label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.05em }
.fc { width:100%; padding:13px 16px; background:var(--dark4); border:1.5px solid var(--gb); border-radius:var(--rs); color:var(--text); font-size:14px; transition:var(--t) }
.fc::placeholder { color:var(--dim) }
.fc:focus { border-color:var(--brand) }
textarea.fc { resize:vertical; min-height:110px }
select.fc option { background:var(--dark3) }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-success { display:none; text-align:center; padding:48px 20px }
.form-success svg { margin:0 auto 18px; color:var(--brand) }
.form-success h3 { font-size:1.3rem; font-weight:800; margin-bottom:8px }
.form-success p  { font-size:14px; color:var(--muted) }

/* ─── FOOTER ────────────────────────────────────────────── */
#footer { padding:64px 0 28px; border-top:1px solid var(--gb) }
.footer-top { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:48px; margin-bottom:48px }
.footer-brand img { height:32px; margin-bottom:14px }
.footer-brand p   { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:18px }
.footer-social { display:flex; gap:9px }
.social-btn { width:36px; height:36px; border-radius:9px; background:var(--glass); border:1px solid var(--gb); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:var(--t) }
.social-btn:hover { background:rgba(72,199,86,.1); border-color:var(--brand); color:var(--brand) }
.footer-col h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:18px }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:11px }
.footer-links a { font-size:13px; color:var(--muted); transition:color .2s }
.footer-links a:hover { color:var(--brand) }
.footer-bottom { padding-top:28px; border-top:1px solid var(--gb); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px }
.footer-bottom p { font-size:12px; color:var(--dim) }

/* ─── ADMIN BAR ─────────────────────────────────────────── */
#admin-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:700; background:var(--dark); border-top:2px solid var(--brand); padding:10px 20px; gap:12px; align-items:center }
#admin-bar.on { display:flex }
.ab-btn { padding:7px 16px; border-radius:8px; font-size:12px; font-weight:700; background:rgba(72,199,86,.12); color:var(--brand); border:1px solid rgba(72,199,86,.25); transition:var(--t) }
.ab-btn:hover { background:var(--brand); color:#000 }
.ab-btn.danger { background:rgba(255,60,60,.1); color:#ff5555; border-color:rgba(255,60,60,.2) }
.ab-btn.danger:hover { background:#ff4444; color:#fff }
#ab-label { font-size:11px; font-weight:800; color:var(--brand); text-transform:uppercase; letter-spacing:.1em; margin-right:auto }

/* ─── MODALS ────────────────────────────────────────────── */
.modal-bd { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); z-index:1000; align-items:center; justify-content:center; padding:20px }
.modal-bd.open { display:flex }
.modal { background:var(--dark3); border:1px solid var(--gb); border-radius:var(--rl); width:100%; max-width:560px; max-height:90vh; overflow-y:auto }
.modal-head { padding:24px 24px 18px; border-bottom:1px solid var(--gb); display:flex; align-items:center; justify-content:space-between }
.modal-head h3 { font-size:18px; font-weight:800 }
.modal-x { width:34px; height:34px; border-radius:50%; background:var(--glass2); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:var(--t) }
.modal-x:hover { background:rgba(255,80,80,.15); color:#ff6666 }
.modal-body { padding:24px }

/* ─── TOAST ─────────────────────────────────────────────── */
#toast { position:fixed; bottom:72px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px; pointer-events:none }
.toast { padding:13px 18px; border-radius:var(--rs); font-size:13px; font-weight:600; backdrop-filter:blur(12px); transform:translateX(130%); transition:transform .3s ease; pointer-events:auto; display:flex; align-items:center; gap:9px; min-width:240px; border:1px solid }
.toast.show { transform:none }
.toast-ok  { background:rgba(72,199,86,.12); border-color:rgba(72,199,86,.25); color:var(--brand) }
.toast-err { background:rgba(255,80,80,.12); border-color:rgba(255,80,80,.25); color:#ff6666 }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1024px){
  .promise-wrap,.gs-wrap,.contact-wrap { grid-template-columns:1fr }
  .promise-visual { display:none }
  .footer-top { grid-template-columns:1fr 1fr }
  .services-grid,.why-grid,.inc-grid,.plans-grid { grid-template-columns:1fr 1fr }
  .cmp-head,.cmp-row,.cmp-foot { grid-template-columns:1.4fr 1fr 1fr 1fr }
}
@media(max-width:768px){
  .nav-links,.nav-actions .btn-outline { display:none }
  .nav-toggle { display:flex }
  .steps-wrap { grid-template-columns:1fr 1fr }
  .step:first-child { border-radius:var(--r) var(--r) 0 0 }
  .step:last-child  { border-radius:0 0 var(--r) var(--r) }
  .form-row,.wz-grid2 { grid-template-columns:1fr }
  .pm-stats { grid-template-columns:1fr 1fr }
  .footer-top { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
  .hero-vdiv { display:none }
  .wz-options { grid-template-columns:1fr }
}
@media(max-width:560px){
  .steps-wrap,.services-grid,.why-grid,.inc-grid,.plans-grid,.port-grid { grid-template-columns:1fr }
  .plan-popular { transform:none }
  .wz-wrap { max-width:100% }
}