:root{--bg:#0f0f14;--card:#17171f;--card2:#1e1e28;--text:#f2f2f5;--muted:#a8a8b3;--accent:#8b5cf6;--accent2:#7c3aed;--border:#26262f;--radius:16px;--shadow:0 8px 24px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f8f7fc;--card:#ffffff;--card2:#f1eff8;--text:#17171f;--muted:#5b5b66;--accent:#7c3aed;--accent2:#8b5cf6;--border:#e5e5ea;--shadow:0 8px 24px rgba(0,0,0,.08)}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Plus Jakarta Sans",Segoe UI,Roboto,sans-serif;line-height:1.55}
a{color:var(--accent)}
button,.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;border-radius:12px;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;min-height:44px;box-shadow:var(--shadow)}
button.secondary,.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.card{border-radius:var(--radius);box-shadow:var(--shadow)}
input,select,textarea{border-radius:12px;padding:12px;min-height:44px}
.hero{padding:32px 0 8px}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:8px 0}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.badge{display:inline-block;background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Attractive layer — gradients, glass, hover lift, no external images needed */
body{background:radial-gradient(600px 300px at 20% 0%, rgba(139,92,246,.25), transparent 60%),radial-gradient(600px 300px at 90% 20%, rgba(236,72,153,.18), transparent 60%),var(--bg)}
.hero{background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.12));border:1px solid var(--border);border-radius:24px;padding:28px}
.hero h1{background:linear-gradient(90deg,#a78bfa,#ec4899,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(139,92,246,.22)}
button,.btn{transition:transform .15s ease, filter .15s ease}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sample-before{background:linear-gradient(135deg,#312e81,#7c3aed);color:#fff;border-radius:16px;padding:20px;min-height:120px}
.sample-after{background:linear-gradient(135deg,#831843,#ec4899);color:#fff;border-radius:16px;padding:20px;min-height:120px}
.price-best{border:2px solid var(--accent)!important;position:relative}
.price-best::after{content:"★ Best value";position:absolute;top:-12px;right:12px;background:var(--accent);color:#fff;font-size:12px;padding:2px 10px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.card:hover,button:hover{transform:none}}