:root{
  --accent: #CCCCFF;
  --accent2: #e6d7ff;
  --bg: #0e0f13;
  --text: #ffffff;
  --lilac:#CCCFFF;
  --softpink:#d6b5ff;
  --softpink-hover:#e1c8ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: #0e0f13 url("https://images.unsplash.com/photo-1651443039959-582bbea6be6a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center center fixed;
  background-size: cover;
}

/* --- Navigation (single, sticky) --- */
.topnav{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  background: rgba(14,15,19,0.45);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index:1000;
}
.topnav .brand{
  color:#CCCFFF;
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.7px;
  text-decoration:none;
  text-shadow:0 0 12px rgba(204,207,255,.75), 0 1px 8px rgba(0,0,0,.45);
}
.topnav .brand:hover{ filter: drop-shadow(0 0 10px rgba(204,207,255,.9)); }
.topnav .links{ display:flex; gap:18px; margin-left:auto; }
.topnav .links a{
  color:#fff; text-decoration:none;
  text-shadow: 0 0 8px rgba(0,0,0,.4);
  transition: color .2s ease, text-shadow .2s ease, transform .1s ease;
}
.topnav .links a:hover,
.topnav .links a[aria-current="page"]{
  color: var(--accent2);
  text-shadow: 0 0 14px rgba(230,215,255,.85);
  transform: translateY(-1px);
}

/* Layout wrappers */
.container{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:96px 16px 56px; /* room for fixed nav + footer */
  text-align:center;
}
.page{ padding: 112px 16px 72px; text-align:center; }
.page-hero h1{
  margin:0 0 12px;
  font-size: clamp(22px, 4vw, 32px);
  color: var(--lilac);
  text-shadow: 0 0 14px rgba(204,207,255,0.85), 0 2px 10px rgba(0,0,0,0.55);
}

/* Floating readability box */
.glass{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 18px;
  background: rgba(14,15,19,0.52);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
}
.about-panel{ margin-top: 120px; } /* moved up ~30% from old placement */

/* Cover */
.cover{
  width: clamp(220px, 56vw, 380px);
  height: auto;
  margin: 10px auto 14px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  display:block;
}

/* OUT NOW link */
.outnow{
  display:inline-block;
  margin:18px auto 10px;
  font-size:clamp(22px,2.9vw,43px); /* ~10% smaller than original 48 */
  font-weight:800;
  color: var(--accent);
  text-decoration:none;
  text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 12px rgba(182,166,255,.5);
  transition: transform .25s ease, text-shadow .25s ease;
}
.outnow:hover{ transform: scale(1.05); text-shadow:0 2px 8px rgba(0,0,0,.55),0 0 22px rgba(182,166,255,.95),0 0 2px rgba(0,0,0,.65); }
.outnow-wrap{ text-align:center; }

/* Icons */
.icon-row{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.icon img, .icon svg{
  display:block; width:24px; height:24px; color:#fff; transition: transform .2s ease, filter .2s ease;
}
.icon:hover{ transform: scale(1.05); box-shadow: 0 0 16px rgba(201,186,255,0.85); }
.icon:hover img, .icon:hover svg{ filter: drop-shadow(0 0 10px rgba(201,186,255,0.9)); }
/* ensure raster (amazon) looks right */
.icon img{ width:24px; height:24px; object-fit:contain; filter: brightness(0) invert(1); }

/* Contact form */
.contact-form{
  max-width: 720px; margin: 12px auto 0; padding: 16px;
  background: rgba(14,15,19,0.5); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.contact-form .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08); color:#fff; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: var(--accent2); box-shadow: 0 0 12px rgba(230,215,255,.6);
}
.contact-form .btn{
  margin-top:12px; padding:10px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1);
  color:#fff; cursor:pointer; transition: transform .1s ease, box-shadow .2s ease, color .2s ease;
}
.contact-form .btn:hover{
  transform: translateY(-1px); box-shadow: 0 0 16px rgba(230,215,255,.85); color: var(--accent2);
}
.contact-form .hidden{ display:none; }
.tiny{ font-size:12px; }

.email-label,.email-link{ text-shadow:0 2px 8px rgba(0,0,0,.55) }
.email-link{
  color: var(--softpink) !important; font-weight:700;
  transition: color .25s ease, text-shadow .25s ease;
}
.email-link:hover{
  color: var(--softpink-hover) !important;
  text-shadow: 0 0 12px rgba(225,200,255,0.95), 0 2px 8px rgba(0,0,0,0.5);
}

@media (max-width:560px){
  .contact-form .grid{ grid-template-columns:1fr; }
}

/* Footer */
.site-footer{
  padding: 16px 12px 22px;
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}