/* ═══════════════════════════════════════════════════
   UNPLUGGED AGENCY — Shared Stylesheet
   "Void Intelligence" aesthetic
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --void:    #04040c;
  --void-2:  #08081a;
  --void-3:  #0f0f22;
  --void-4:  #181830;
  --void-5:  #22223e;
  --glass:   rgba(255,255,255,0.03);
  --glass-b: rgba(255,255,255,0.07);
  --border:  rgba(255,255,255,0.07);
  --border-g:rgba(196,162,86,0.2);
  --gold:    #c4a256;
  --gold-2:  #dfc07a;
  --gold-3:  #f0daa0;
  --gold-dim:rgba(196,162,86,0.12);
  --text:    #dcdcf0;
  --muted:   #6b6b8c;
  --muted-2: #3a3a52;
  --white:   #f0f0ff;
  --f-display: 'Epilogue', system-ui, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
  cursor: none;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── GRAIN ── */
.grain {
  position: fixed; inset: -100%;
  width: 300%; height: 300%;
  pointer-events: none; z-index: 9000;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: g 6s steps(8) infinite;
}
@keyframes g {
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-8%)}
  20%{transform:translate(-12%,4%)}30%{transform:translate(5%,-20%)}
  40%{transform:translate(-3%,20%)}50%{transform:translate(-12%,8%)}
  60%{transform:translate(12%,0%)}70%{transform:translate(0,12%)}
  80%{transform:translate(2%,28%)}90%{transform:translate(-8%,8%)}
}

/* ── CURSOR ── */
.c-dot, .c-ring {
  position: fixed; top:0; left:0;
  border-radius: 50%; pointer-events: none;
  z-index: 9999; transform: translate(-50%,-50%);
  transition-property: width, height, background, border-color;
  transition-timing-function: var(--ease);
}
.c-dot  { width:5px; height:5px; background:var(--gold); transition-duration:.12s; }
.c-ring {
  width:32px; height:32px;
  border:1px solid rgba(196,162,86,.45);
  transition-duration:.38s;
}
body.ch .c-dot  { width:9px; height:9px; background:var(--gold-2); }
body.ch .c-ring { width:48px; height:48px; border-color:rgba(196,162,86,.2); }

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.solid {
  background: rgba(4,4,12,0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.nav-brand .nav-symbol {
  /* Circular crop — hides the white edges, shows just the symbol */
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
  border: 1.5px solid rgba(196,162,86,0.35);
}
.nav-brand .brand-stack {
  display: flex; flex-direction: column; line-height: 1.2;
}
.nav-brand .brand-name {
  font-family: var(--f-display);
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
}
.nav-brand .brand-tag {
  font-family: var(--f-display);
  font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}

.nav-links {
  display: flex; align-items: center; gap: 2.8rem; list-style: none;
}
.nav-links a {
  font-family: var(--f-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(220,220,240,.6);
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-cta-btn {
  font-family: var(--f-display) !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: var(--gold) !important;
  border: 1px solid rgba(196,162,86,.35) !important;
  padding: .45rem 1.3rem;
  border-radius: 2px;
  transition: background .2s, color .2s !important;
}
.nav-cta-btn::after { display:none !important; }
.nav-cta-btn:hover { background:var(--gold) !important; color:var(--void) !important; }

.burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none; padding:6px;
}
.burger span { display:block; width:22px; height:1.5px; background:var(--text); transition:all .3s; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-display); font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.9rem 2.2rem; border-radius:2px;
  transition: all .25s var(--ease);
  cursor: none;
}
.btn-gold { background:var(--gold); color:var(--void); }
.btn-gold:hover { background:var(--gold-2); transform:translateY(-3px); box-shadow:0 12px 36px rgba(196,162,86,.25); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn .arr { transition:transform .25s var(--ease); }
.btn:hover .arr { transform:translateX(5px); }

/* ── GLASS CARD ── */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  transition: border-color .25s, transform .4s var(--ease), box-shadow .4s;
}
.glass-card:hover {
  border-color: var(--border-g);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(196,162,86,.12);
}

/* ── SECTION SHARED ── */
.section { padding: 110px 8%; }

.s-label {
  font-family: var(--f-display); font-size:.68rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem;
  display:flex; align-items:center; gap:.9rem;
}
.s-label::before { content:''; display:block; width:24px; height:1px; background:var(--gold); flex-shrink:0; }

.s-title {
  font-family: var(--f-display);
  font-size: clamp(2rem,5vw,4rem);
  font-weight: 800; line-height: 1.15;
  color: var(--white); letter-spacing:-.01em;
  overflow: visible;
}
.s-title em { font-style:normal; color:var(--gold); }

.s-rule { width:40px; height:1px; background:var(--gold); margin:1.6rem 0 2.4rem; }

/* ── REVEAL ANIMATIONS ── */
.rv {
  opacity:0; transform:translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.rv.in { opacity:1; transform:none; }
.rv-l { opacity:0; transform:translateX(-30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv-l.in { opacity:1; transform:none; }
.rv-r { opacity:0; transform:translateX(30px);  transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv-r.in { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.32s}
.d4{transition-delay:.46s} .d5{transition-delay:.6s}

/* ── FOOTER ── */
.footer {
  background: var(--void-3);
  border-top: 1px solid var(--border);
  padding: 2.6rem 8%;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 2rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.65rem; }
.footer-brand .nav-symbol {
  width: 36px; height: 36px;
  border-radius: 50%; object-fit: cover; object-position: center 30%;
  border: 1.5px solid rgba(196,162,86,0.35); flex-shrink: 0;
}
.footer-copy { color:var(--muted); font-size:.78rem; text-align:center; }
.footer-links { display:flex; gap:1.8rem; }
.footer-links a { color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-display); transition:color .2s; }
.footer-links a:hover { color:var(--gold); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .section { padding:80px 6%; }
  .footer { grid-template-columns:1fr; text-align:center; }
  .footer-links { justify-content:center; }
}
@media (max-width:700px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; gap:1.8rem;
    position:fixed; top:68px; left:0; right:0; bottom:0;
    background:rgba(4,4,12,.97);
    padding:3rem 8%; align-items:flex-start; justify-content:flex-start;
  }
  .nav-links.open a { font-size:1.2rem; }
  .burger { display:flex; }
}