/* =============================================================
   Dark‑Neo Glassmorphism Theme  v2.0
   ─ replaces original Dimension sheet entirely ─
   Palette ▸  bg:#0e1014  glass:#13161c  accent:#0ef5d3  txt:#f1f5ff
   Font ▸ 'Inter' 400/600/800
==============================================================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;
  -webkit-tap-highlight-color:transparent}
:root{--bg:#0e1014;--glass:#13161c;--txt:#f1f5ff;--accent:#0ef5d3;--radius:1.1rem}
html,body{height:100%;background:var(--bg);color:var(--txt);scroll-behavior:smooth}
a{color:var(--accent);text-decoration:none;transition:.25s}
a:hover{opacity:.8}

/* ---------- WRAPPER (center vertically) ---------- */
#wrapper{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 1rem;gap:2rem}

/* ---------- HEADER  (logo, nav) ---------- */
#header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.8rem}
#header .logo{width:5.2rem;height:5.2rem;border-radius:50%;display:grid;place-items:center;
              background:linear-gradient(135deg,var(--accent)10%,transparent 90%);box-shadow:0 0 24px #0ef6d450}
#header .logo .icon:before{font-size:2rem;color:var(--bg)}
#header .content{backdrop-filter:blur(18px);background:var(--glass80,#13161cCC);
                 padding:3rem 2.2rem;border-radius:var(--radius);box-shadow:0 8px 36px #00000070}
#header .content h1{font-size:2.4rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
                    background:linear-gradient(90deg,var(--accent),#58ffb7);-webkit-background-clip:text;color:transparent}
#header .content p{margin-top:1.2rem;font-size:.95rem;line-height:1.7;opacity:.85}
#header nav ul{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
#header nav li{list-style:none}
#header nav a{display:block;padding:.7rem 1.5rem;border-radius:99rem;border:1px solid var(--accent);
              font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(12px)}
#header nav a:hover{background:var(--accent);color:var(--bg)}

/* ---------- MAIN ARTICLE ---------- */
#main{display:flex;align-items:center;justify-content:center;padding:4rem 0;min-height:calc(100vh - 200px)}
#main article{width:clamp(320px,48vw,680px);background:var(--glass80,#13161cCC);backdrop-filter:blur(18px);
              border:1px solid #ffffff0a;border-radius:var(--radius);padding:4.5rem 3rem 2.5rem;
              box-shadow:0 14px 46px #00000080;opacity:0;transform:translateY(20px);transition:.5s}
#main article.active{opacity:1;transform:none}
#main h2,#main h3,#main h4,#main h5{letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.3rem}
#main h2{font-size:1.7rem;color:var(--accent)}
#main h3{font-size:1.2rem;color:#9deee0}
#main p{margin-bottom:1.4rem;line-height:1.8;font-size:.95rem;opacity:.88}
#main .image.main{margin:2rem 0;border-radius:var(--radius);overflow:hidden}
#main .image.main img{width:100%;height:auto;display:block}
#main .close{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;border-radius:50%;
             display:grid;place-items:center;border:none;background:#ffffff0f;color:var(--txt);cursor:pointer;transition:.25s}
#main .close:hover{background:#ffffff2a}

/* ---------- FOOTER ---------- */
#footer{text-align:center;margin-top:auto;opacity:.6;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- BUTTONS (neon pulse) ---------- */
.button,button,input[type=button],input[type=submit]{
  border:none;
  border-radius:99rem;
  padding:1rem 2.8rem;
  font-size:.9rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bg);
  background:linear-gradient(135deg,var(--accent) 0%,#31ffd5 100%);
  box-shadow:0 0 12px #00ffc280,0 0 24px #00ffc240;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.button:before,button:before,input[type=button]:before,input[type=submit]:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transform:translateX(-100%);
  transition:transform .45s ease;
}
.button:hover:before{transform:translateX(200%);} /* swipe gloss */
.button:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 6px 28px #00ffc270,0 0 42px #0ef5d3aa;}
.button:active{transform:scale(.97);filter:brightness(.95);}  

/* ---------- RESPONSIVE ---------- */ ---------- */
@media(max-width:768px){#header .content{padding:2.2rem 1.5rem}#main article{padding:3rem 1.8rem}}
@media(max-width:480px){#header nav ul{flex-direction:column}#header nav a{width:100%;text-align:center}}  (logo, nav) ---------- */
#header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.8rem}
#header .logo{width:5.2rem;height:5.2rem;border-radius:50%;display:grid;place-items:center;
              background:linear-gradient(135deg,var(--accent)10%,transparent 90%);box-shadow:0 0 24px #0ef6d450}
#header .logo .icon:before{font-size:2rem;color:var(--bg)}
#header .content{backdrop-filter:blur(18px);background:var(--glass80,#13161cCC);
                 padding:3rem 2.2rem;border-radius:var(--radius);box-shadow:0 8px 36px #00000070}
#header .content h1{font-size:2.4rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
                    background:linear-gradient(90deg,var(--accent),#58ffb7);-webkit-background-clip:text;color:transparent}
#header .content p{margin-top:1.2rem;font-size:.95rem;line-height:1.7;opacity:.85}
#header nav ul{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
#header nav li{list-style:none}
#header nav a{display:block;padding:.7rem 1.5rem;border-radius:99rem;border:1px solid var(--accent);
              font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(12px)}
#header nav a:hover{background:var(--accent);color:var(--bg)}

/* ---------- MAIN ARTICLE ---------- */
#main{display:flex;align-items:center;justify-content:center;padding:4rem 0;min-height:calc(100vh - 200px)}
#main article{width:clamp(320px,48vw,680px);background:var(--glass80,#13161cCC);backdrop-filter:blur(18px);
              border:1px solid #ffffff0a;border-radius:var(--radius);padding:4.5rem 3rem 2.5rem;
              box-shadow:0 14px 46px #00000080;opacity:0;transform:translateY(20px);transition:.5s}
#main article.active{opacity:1;transform:none}
#main h2,#main h3,#main h4,#main h5{letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.3rem}
#main h2{font-size:1.7rem;color:var(--accent)}
#main h3{font-size:1.2rem;color:#9deee0}
#main p{margin-bottom:1.4rem;line-height:1.8;font-size:.95rem;opacity:.88}
#main .image.main{margin:2rem 0;border-radius:var(--radius);overflow:hidden}
#main .image.main img{width:100%;height:auto;display:block}
#main .close{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;border-radius:50%;
             display:grid;place-items:center;border:none;background:#ffffff0f;color:var(--txt);cursor:pointer;transition:.25s}
#main .close:hover{background:#ffffff2a}

/* ---------- FOOTER ---------- */
#footer{text-align:center;margin-top:2rem;opacity:.6;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- UTILS ---------- */
hr{border:none;border-top:1px solid #ffffff18;margin:2rem 0}
.image.fit img{width:100%;border-radius:var(--radius)}
.button,button,input[type=button],input[type=submit]{border:none;border-radius:99rem;padding:.9rem 2.2rem;
          font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;background:var(--accent);color:var(--bg);
          cursor:pointer;box-shadow:0 0 14px #0ef6d460;transition:.25s}
.button:hover{transform:translateY(-3px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){#header .content{padding:2.2rem 1.5rem}#main article{padding:3rem 1.8rem}}
@media(max-width:480px){#header nav ul{flex-direction:column}#header nav a{width:100%;text-align:center}}