/* ======= Dark Modern Theme (blue/cyan accents) ======= */
:root{
  --bg:#0e0f14;
  --surface:#141622;
  --surface-2:#1a1e2d;
  --border:rgba(255,255,255,.06);
  --text:#e8eaf2;
  --muted:#98a2b3;
  --accent:#60a5fa;
  --accent-2:#22d3ee;
  --chip:#23283b;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:radial-gradient(1000px 600px at 100% -10%, rgba(255,255,255,.06), transparent 60%),radial-gradient(1200px 800px at -10% 110%, rgba(255,255,255,.03), transparent 60%),linear-gradient(0deg, #0b0c11, var(--bg));background-attachment: fixed;font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;letter-spacing:.2px}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0 0 .6rem}
h1{font-size:clamp(36px, 5vw, 56px); font-weight:800; letter-spacing:.3px}
h2{font-size:clamp(28px, 4vw, 40px); font-weight:800}
h3{font-size:clamp(20px, 2.4vw, 24px); font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:1.1rem; color:#d7d9e3}
.container{width:min(1140px, 92%); margin-inline:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.1rem; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); background:linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow:var(--shadow); font-weight:700; transition:.2s transform ease, .2s box-shadow ease, .2s filter ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:none; color:#0a0a0a}
.btn.ghost{background:transparent}
.badges{display:flex; gap:.6rem; flex-wrap:wrap; padding:0; list-style:none; margin:1rem 0 0}
.badges li{padding:.45rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:.92rem; background:var(--chip)}
.paper-block{padding:4rem 0; background:transparent}
.features{padding:4rem 0}
.features .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem}
.card{background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
.card .icon{font-size:1.6rem; opacity:.9}
.nav{display:flex; align-items:center; gap:1rem; justify-content:space-between; padding:.9rem 0; position:sticky; top:0}
.site-header{backdrop-filter:saturate(1.2) blur(10px); background:linear-gradient(180deg, rgba(24,26,38,.7), rgba(24,26,38,.35)); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.5px}
.brand img{width:36px; height:36px; object-fit:cover; border-radius:10px; border:1px solid var(--border)}
.brand span{font-weight:800; font-family:'Manrope', sans-serif}
.site-header nav{display:none; gap:1rem}
.site-header nav a{opacity:.9; text-decoration:none; color:var(--text); padding:.4rem .6rem; border-radius:8px}
.site-header nav a:hover{background:var(--chip)}
@media (min-width:860px){.site-header nav{display:flex}}
.hero{padding:5rem 0 3rem}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:2rem}
.hero-copy h1 span{color:#0a0a0a; background:linear-gradient(180deg, var(--accent), var(--accent-2)); padding:.1rem .4rem; border-radius:10px}
.hero-art img{border:1px solid var(--border); border-radius:16px; filter:grayscale(.1) contrast(1.03); box-shadow:var(--shadow)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr} .hero{padding:3.5rem 0}}
.callout{background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:16px; padding:1.1rem; box-shadow:var(--shadow)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; list-style:none; padding:0; margin:.8rem 0 0}
.stats li{background:var(--chip); border:1px solid var(--border); border-radius:12px; padding:.7rem .9rem; display:flex; flex-direction:column; align-items:flex-start}
.stats li span{font-weight:800; font-size:1.1rem}
.stats li small{color:var(--muted)}
.timeline{list-style:none; padding:0; margin:.2rem 0 .8rem; border-left:2px solid var(--border); padding-left:1rem}
.timeline li{margin:.35rem 0; position:relative}
.timeline li::before{content:''; position:absolute; left:-1.15rem; top:.55rem; width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 3px rgba(255,255,255,.03)}
.timeline span{font-weight:800}
.products-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; align-items:stretch}
.product{display:flex; flex-direction:column; height:100%; border:1px solid var(--border); border-radius:16px; padding:1.1rem; background:linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow:var(--shadow); margin:0}
.product.highlight{background:linear-gradient(0deg, rgba(34,211,238,.12), rgba(34,211,238,0)); border:1px solid var(--border)}
.product__head{display:flex; align-items:center; gap:.7rem; margin-bottom:.3rem}
.label{display:inline-flex; align-items:center; border-radius:999px; padding:.35rem .6rem; font-size:.78rem; font-weight:800; letter-spacing:.3px; border:1px solid var(--border); background:var(--chip)}
.label.free{background:rgba(96,165,250,.15); color:#cfe3ff}
.label.pro{background:rgba(34,211,238,.15); color:#bff3fb}
.label.premium{background:rgba(191,128,255,.15); color:#e6d4ff}
.label.onetoone{background:rgba(148,163,184,.15); color:#e2e8f0}
.product .btn{margin-top:.3rem}
.product .bullets{max-width:60ch}
.product .ticks{max-width:60ch}
.product .hint{margin-top:.4rem}
.product__body, .product{max-width:68ch}
/* Interactive */ 
.risk-form .row{margin:.5rem 0; display:block}
.risk-form .row.inline{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.risk-form label{display:block; font-weight:700; margin-bottom:.25rem}
.risk-form input{width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text)}
.rm-results{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; margin:.6rem 0}
.small{font-size:.9rem}
.quiz-form .q{margin:.5rem 0 .8rem}
.quiz-form label{display:block; margin:.2rem 0}
.quiz-result{margin-top:.6rem; padding:.7rem .9rem; border:1px dashed var(--border); border-radius:12px; background:var(--chip); display:none}
/* Plan Builder */
.plan-form .checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.45rem .8rem; margin:.2rem 0 1rem}
.plan-form .checklist .item{display:flex; gap:.5rem; align-items:center; background:var(--chip); border:1px solid var(--border); padding:.5rem .6rem; border-radius:10px}
.plan-form .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
.plan-form .grid .full{grid-column:1/-1}
.plan-form label{display:block; font-weight:700; margin-bottom:.25rem}
.plan-form input[type="text"], .plan-form input[type="number"], .plan-form textarea{width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text)}
.plan-output{white-space:pre-wrap; background:var(--chip); border:1px dashed var(--border); border-radius:12px; padding:.8rem; margin-top:.6rem; max-width:100%}
.cta-row{display:flex; align-items:center; gap:.8rem; margin-top:.4rem}
/* Gallery in modal */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.4rem}
.gallery img{border-radius:10px; border:1px solid var(--border)}
.contacts{padding:3.8rem 0}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.contact-card{background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
.center{text-align:center}
.muted{color:var(--muted)}
.disclaimer{font-size:.92rem; color:var(--muted); margin-top:1rem}
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); padding:1rem; z-index:100}
.modal.open{display:flex}
.modal__dialog{background:var(--surface); color:var(--text); border-radius:14px; padding:1rem; max-width:min(90vw, 720px); border:1px solid var(--border); box-shadow:var(--shadow); position:relative}
.modal__dialog img{border-radius:12px}
.modal__close{border:none; background:transparent; color:var(--text); font-size:2rem; position:absolute; right:1rem; top:.2rem; cursor:pointer; opacity:.9}
.site-footer{border-top:1px solid var(--border); padding:2rem 0; background:transparent}
#easterDot{user-select:none; margin-left:.25rem; font-weight:900; opacity:.08}
#easterDot:hover{opacity:.15}