/* Atelier — shared styles for all pages */
:root{
  --bg: #0a0a0a;
  --bg-elev: #111;
  --fg: #f5f5f3;
  --muted: #8a8a86;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.12);
  --accent: #D4B254;
  --accent-2: #9D5BFF;
  --accent-fg: #0a0a0a;
  --grain: .06;
}
html.light{
  --bg:#f6f4ef; --bg-elev:#ffffff; --fg:#0c0c0c; --muted:#5b5b58;
  --line: rgba(0,0,0,0.08); --line-strong: rgba(0,0,0,0.16);
  --accent-fg:#0a0a0a; --grain:.04;
}
html, body { background: var(--bg); color: var(--fg); }
body{
  font-family: 'Satoshi', system-ui;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  letter-spacing: 0.02em;
  word-spacing: 0.04em;
}
.font-display{ font-family:'Clash Display', system-ui; font-feature-settings:"ss01"; letter-spacing: -0.015em; }
.font-mono{ font-family:'JetBrains Mono', monospace; }
.text-muted{ color: var(--muted); }
.hairline{ border-color: var(--line); }
.hairline-strong{ border-color: var(--line-strong); }
.accent{ color: var(--accent); }
.accent-2{ color: var(--accent-2); }
.bg-accent{ background: var(--accent); }
.bg-accent-2{ background: var(--accent-2); }

.grain::before{
  content:""; position: fixed; inset:0; pointer-events:none; z-index:60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  opacity: var(--grain); mix-blend-mode: overlay;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
html.light .glass{ background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6)); }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 14px 22px; border-radius: 999px;
  font-family: 'Satoshi'; font-weight:500; font-size: 14px;
  letter-spacing: -0.01em; transition: all .25s ease;
  border: 1px solid var(--line-strong);
}
.btn-primary{ background: var(--fg); color: var(--bg); border-color: transparent;}
.btn-primary:hover{ background: var(--accent); color: var(--accent-fg); transform: translateY(-1px);}
.btn-ghost{ background: transparent; color: var(--fg);}
.btn-ghost:hover{ border-color: var(--fg);}

.cur-dot, .cur-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index:80; will-change: transform; }
.cur-dot{ width:6px; height:6px; border-radius:50%; background: var(--fg); margin:-3px 0 0 -3px;}
.cur-ring{ width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; margin:-18px 0 0 -18px; transition: width .25s, height .25s, margin .25s, border-color .25s, background .25s;}
.cur-ring.hot{ width:64px; height:64px; margin:-32px 0 0 -32px; background: rgba(212,178,84,0.12); border-color: var(--accent);}
@media (hover: none){ .cur-dot, .cur-ring{ display:none;} }

.eyebrow{ font-family:'JetBrains Mono'; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);}
.eyebrow .dot{ width:6px; height:6px; background: var(--accent); border-radius:50%; display:inline-block; margin-right:8px; vertical-align: middle; transform: translateY(-1px);}

.marquee{ display:flex; gap: 64px; animation: scroll 38s linear infinite; will-change: transform; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.blob-stage{ position: relative; aspect-ratio: 1/1; }
.blob{
  position:absolute; inset:0;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(212,178,84,0.55), transparent 65%),
    radial-gradient(50% 50% at 70% 70%, rgba(157,91,255,0.55), transparent 60%),
    radial-gradient(30% 30% at 60% 30%, rgba(255,255,255,0.06), transparent 70%);
  filter: blur(40px) saturate(120%);
  border-radius: 50%;
  animation: morph 14s ease-in-out infinite;
}
.blob.b2{ animation-delay: -7s; opacity:.7;}
@keyframes morph{
  0%,100%{ transform: scale(1) rotate(0deg); border-radius: 50% 50% 50% 50%;}
  33%{ transform: scale(1.05) rotate(60deg); border-radius: 60% 40% 50% 70%;}
  66%{ transform: scale(.95) rotate(-30deg); border-radius: 40% 60% 70% 30%;}
}
.ring{
  position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:50%;
  animation: spin 28s linear infinite;
}
.ring::before{ content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; background: var(--accent); border-radius:50%;}
.ring-2{ inset:8%; animation: spin 40s linear infinite reverse;}
.ring-2::before{ background: var(--accent-2);}
@keyframes spin{ to{ transform: rotate(360deg);} }

.will-reveal{ opacity:0; transform: translateY(24px);}
.will-reveal-x{ opacity:0; transform: translateX(-24px);}

.card{
  position: relative; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  transition: border-color .3s, transform .3s;
}
.card:hover{ border-color: var(--line-strong);}
html.light .card{ background: #fff; }

details.faq{ border-bottom: 1px solid var(--line); }
details.faq summary{ list-style:none; cursor:pointer;}
details.faq summary::-webkit-details-marker{ display:none;}
details.faq summary .plus{ transition: transform .35s ease;}
details.faq[open] summary .plus{ transform: rotate(45deg);}
details.faq .body{ max-height:0; overflow:hidden; transition: max-height .4s ease;}
details.faq[open] .body{ max-height: 600px;}

::selection{ background: var(--accent); color: var(--accent-fg); }

.pop{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(157,91,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border-color: var(--line-strong);
}

::-webkit-scrollbar{ width:0; height:0;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;}
}

.tw-panel{
  position: fixed; right: 18px; bottom: 18px; z-index:90;
  width: 280px; padding: 16px; border-radius: 18px;
  background: rgba(20,20,20,0.85); border:1px solid var(--line-strong); backdrop-filter: blur(20px);
  font-size: 12px; display: none;
}
html.light .tw-panel{ background: rgba(255,255,255,0.9); color:#0a0a0a;}
.tw-panel.open{ display:block;}
.swatch{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition: border-color .2s;}
.swatch.active{ border-color: var(--fg);}

/* Nav active state */
.nav-link{ position: relative; transition: color .2s;}
.nav-link:hover{ color: var(--accent);}
.nav-link.active{ color: var(--fg);}
.nav-link.active::before{
  content:""; position:absolute; left:-10px; top:50%; transform: translateY(-50%);
  width:4px; height:4px; border-radius:50%; background: var(--accent);
}

/* Page transition shell */
main.page{ padding-top: 132px; padding-bottom: 100px; min-height: calc(100vh - 200px);}

/* Section header pattern (per-page hero) */
.page-head{ padding-top: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line);}
.page-head h1{ font-family:'Clash Display'; font-weight: 500; letter-spacing:-0.045em; line-height: 0.95;}

/* Pre-footer next-page card */
.next-card{
  border:1px solid var(--line); border-radius: 28px; padding: 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  transition: border-color .3s, transform .3s;
}
.next-card:hover{ border-color: var(--accent); transform: translateY(-2px);}

/* Footer */
.site-footer{ border-top: 1px solid var(--line);}

/* =========================================================
   PERFORMANCE & MOBILE/TABLET
   ========================================================= */

/* Faster tap response on touch */
a, button, summary, label, [data-magnetic]{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Promote GPU layers for animated elements */
.blob, .ring, .blob-stage, .marquee{
  will-change: transform;
}

/* ── Tablet (< 1024px) ─────────────────────────────────── */
@media (max-width:1023px){
  main.page{ padding-top: 110px; padding-bottom: 80px; }
  .page-head{ padding-top: 28px; padding-bottom: 40px; }
  .next-card{ padding: 28px; border-radius: 20px; }
}

/* ── Mobile (< 768px) ──────────────────────────────────── */
@media (max-width:767px){
  /* Layout */
  main.page{ padding-top: 96px; padding-bottom: 60px; }
  .page-head{ padding-top: 20px; padding-bottom: 32px; }
  /* page-head h1 bigger floor */
  .page-head h1{ font-size: clamp(42px,11vw,80px); }

  /* Reduce blob complexity — saves GPU on low-end phones */
  .blob{
    filter: blur(28px) saturate(100%);
    animation-duration: 20s;
  }
  .blob.b2{ display: none; }
  .ring-2{ display: none; }

  /* Disable parallax blob-stage transform on mobile */
  .blob-stage{ transform: none !important; }

  /* Stop marquee on low-end: only slow it down slightly */
  .marquee{ animation-duration: 55s; }

  /* Cards */
  .card{ border-radius: 16px; }
  .next-card{ padding: 20px 18px; border-radius: 16px; flex-direction: column; align-items: flex-start; }

  /* Buttons */
  .btn{ padding: 12px 18px; font-size: 13px; }

  /* Tweaks panel — full width on mobile */
  .tw-panel{ right: 12px; left: 12px; width: auto; bottom: 12px; }

  /* Typography floor */
  .font-display{ letter-spacing: -0.02em; }
  .page-head h1{ line-height: 0.97; }
}

/* ── Small mobile (< 480px) ────────────────────────────── */
@media (max-width:479px){
  main.page{ padding-top: 88px; }

  /* Grain off on tiny screens (saves compositing) */
  .grain::before{ display: none; }

  /* Section padding tighten */
  .py-20{ padding-top: 3rem; padding-bottom: 3rem; }
  .py-28{ padding-top: 4rem; padding-bottom: 4rem; }
}

/* =========================================================
   MOBILE / TABLET — FULLSCREEN NAV OVERLAY
   ========================================================= */

.nav-overlay{
  position: fixed; inset: 0; z-index: 49;
  visibility: hidden; pointer-events: none;
}
.nav-overlay.open{
  visibility: visible; pointer-events: auto;
}

/* Blurred dark backdrop */
.nav-ol-bg{
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity .38s cubic-bezier(.4,0,.2,1);
}
html.light .nav-ol-bg{ background: rgba(246,244,239,0.88); }
.nav-overlay.open .nav-ol-bg{ opacity: 1; }

/* Sliding panel from the right */
.nav-ol-panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(80vw, 320px);
  display: flex; flex-direction: column;
  padding: 88px 0 32px;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  border-left: 1px solid var(--line-strong);
  background: var(--bg-elev);
}
.nav-overlay.open .nav-ol-panel{ transform: translateX(0); }

.nav-ol-header{
  padding: 0 28px 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.nav-ol-list{
  list-style: none; margin: 0; padding: 0;
  flex: 1; overflow-y: auto;
}

.nav-ol-item{
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .32s ease, transform .32s ease;
}
.nav-overlay.open .nav-ol-item{ opacity: 1; transform: translateX(0); }
/* stagger via nth-child */
.nav-overlay.open .nav-ol-item:nth-child(1){ transition-delay:.08s; }
.nav-overlay.open .nav-ol-item:nth-child(2){ transition-delay:.12s; }
.nav-overlay.open .nav-ol-item:nth-child(3){ transition-delay:.16s; }
.nav-overlay.open .nav-ol-item:nth-child(4){ transition-delay:.20s; }
.nav-overlay.open .nav-ol-item:nth-child(5){ transition-delay:.24s; }
.nav-overlay.open .nav-ol-item:nth-child(6){ transition-delay:.28s; }
.nav-overlay.open .nav-ol-item:nth-child(7){ transition-delay:.32s; }
.nav-overlay.open .nav-ol-item:nth-child(8){ transition-delay:.36s; }
.nav-overlay.open .nav-ol-item:nth-child(9){ transition-delay:.40s; }

.nav-ol-link{
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 28px;
  font-family: 'Clash Display'; font-size: 17px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--muted);
  transition: color .2s, background .2s;
}
.nav-ol-link:hover{ color: var(--fg); background: rgba(255,255,255,0.03); }
.nav-ol-link.active{ color: var(--fg); }
.nav-ol-link.active::before{ display: none; }
html.light .nav-ol-link:hover{ background: rgba(0,0,0,0.03); }

.nav-ol-num{
  font-family: 'JetBrains Mono'; font-size: 10px;
  letter-spacing: .08em; color: var(--muted); opacity: .5;
}

.nav-ol-footer{
  padding: 20px 28px 0;
  border-top: 1px solid var(--line);
}

.nav-ol-cta{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 13px 18px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-family: 'Satoshi'; font-size: 13.5px; font-weight: 500;
  letter-spacing: -.01em;
  transition: background .25s, transform .2s;
}
.nav-ol-cta:hover{ background: var(--accent); transform: translateY(-1px); }

/* hamburger → X icon swap */
#navMobile .nav-ham{ display: block; }
#navMobile .nav-x{   display: none;  }
#navMobile.is-open .nav-ham{ display: none;  }
#navMobile.is-open .nav-x{   display: block; }

/* overlay lang toggle */
.nav-ol-lang{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.nav-ol-lang-btn{
  font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  background: transparent; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-ol-lang-btn:hover,
.nav-ol-lang-btn.active{
  color: var(--fg); border-color: var(--fg); background: rgba(255,255,255,0.06);
}
html.light .nav-ol-lang-btn:hover,
html.light .nav-ol-lang-btn.active{ background: rgba(0,0,0,0.06); }
.nav-ol-lang-sep{
  font-family: 'JetBrains Mono'; font-size: 10px; color: var(--muted); opacity: .4;
}