/* =========================================================
   styles.css — FULL SITE STYLES (Gesture-ready)
========================================================= */

/* -------------------------
   CSS Variables
------------------------- */
:root{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --muted:rgba(11,11,11,0.6);
  --border:rgba(11,11,11,0.08);
  --accent:#0b0b0b;
  --accent-weak:rgba(11,11,11,0.06);
  --header-h:84px;
  --radius:14px;
  --ease:cubic-bezier(.22,.9,.32,1);
  --reveal-dur:620ms;
}

/* Page accents */
body[data-page="about"]{--accent:#FF6A00;}
body[data-page="contact"]{--accent:#17B978;}
body[data-page="paqs"]{--accent:#8A63FF;}
body[data-page="glossary"]{--accent:#2CB7FF;}

/* Dark theme */
body[data-theme="dark"]{
  --bg:#0b0b0f;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.65);
  --border:rgba(255,255,255,.08);
}

/* -------------------------
   Base
------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont;
  background:var(--bg);
  color:var(--fg);
  transition:background-color 420ms var(--ease),color 420ms var(--ease);
  -webkit-font-smoothing:antialiased;
}

/* -------------------------
   Layout
------------------------- */
.container{
  max-width:1120px;
  margin:0 auto;
  padding:96px 24px;
}
.section-title{margin:0 0 12px}
.muted{color:var(--muted)}

/* -------------------------
   Header
------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  z-index:1200;
}
.site-header.scrolled{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1120px;
  margin:auto;
  height:100%;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:800;
  text-decoration:none;
  color:var(--fg);
}
.logo-dot{color:var(--accent)}

.nav-desktop ul{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;padding:0;
}
.nav-desktop a{
  text-decoration:none;
  font-weight:600;
  color:var(--fg);
}
.nav-desktop a.active{color:var(--accent)}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.4rem;
}

/* -------------------------
   Mobile Menu (Gesture Ready)
------------------------- */
.mobile-menu{
  position:fixed;
  inset:0;
  height:100vh;
  z-index:1400;
  opacity:0;
  pointer-events:none;
  transition:opacity 280ms var(--ease);
}

.mobile-menu[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,11,15,.45);
  backdrop-filter:blur(14px);
  z-index:1;
}

.mobile-menu-inner{
  position:relative;
  z-index:2;
  background:#0b0b0f;
  color:#fff;
  max-width:900px;
  margin:56px auto;
  padding:56px;
  border-radius:var(--radius);
  transform:translateY(0);
  transition:transform 420ms var(--ease);
  will-change:transform;
  max-height:calc(100vh - 112px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:none;
}

.mobile-links{
  list-style:none;
  padding:0;margin:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
}
.mobile-link{
  font-size:2.1rem;
  font-weight:800;
  color:#fff;
  text-decoration:none;
}

/* -------------------------
   Reveal
------------------------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--reveal-dur) var(--ease),
             transform var(--reveal-dur) var(--ease);
}
.reveal.in-view{
  opacity:1;
  transform:none;
}

/* -------------------------
   Glossary
------------------------- */

.glossary-highlight {
  background: rgba(0,0,0,0.03);
  border-left: 3px solid currentColor;
  padding-left: 1rem;
  transition: background 0.3s ease;
}
/* -------------------------
   Cookie Banner
------------------------- */
.cookie-banner{
  position:fixed;
  bottom:18px;
  left:18px;
  right:18px;
  max-width:640px;
  margin:auto;
  background:#0b0b0f;
  color:#fff;
  padding:16px 18px;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity 280ms var(--ease),transform 280ms var(--ease);
}
.cookie-banner.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.cookie-actions{
  display:flex;
  gap:8px;
}
.cookie-btn{
  background:var(--accent);
  color:var(--bg);
  border:none;
  padding:6px 14px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}
.cookie-btn-home{
  background:#3E454B;
  color:#FFFFFF;
  border:none;
  padding:6px 14px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}
/* -------------------------
   Responsive
------------------------- */
@media(max-width:980px){
  .nav-desktop{display:none}
  .menu-toggle{display:block}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}