/* ============================================================
   FIDGET — shared.css  v2.0
   Tokens · Reset · Cursor · Navbar · Footer · Buttons
   Reveal · Section commons · Magic Card base
   Included by every page.
   ============================================================ */

/* ─── AMBIENT BACKGROUND (page-wide purple/blue, fixed) ───────── */
:root {
  --bg:         #020202;
  --bg-card:    #0c0c0c;
  --text:       #f0f0f0;
  --mid:        rgba(240,240,240,.50);
  --dim:        rgba(240,240,240,.24);
  --blue:       #4f8aff;
  --blue-dim:   rgba(79,138,255,.65);
  --chrome:     #c8d8f0;
  --border:     rgba(255,255,255,.06);
  --border-lit: rgba(255,255,255,.13);
  --ease:       cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 55% at 50%   0%, rgba(79,70,229,.052)  0%, transparent 60%),
    radial-gradient(ellipse  80% 50% at  8%  50%, rgba(124,40,202,.038)  0%, transparent 60%),
    radial-gradient(ellipse  70% 45% at 92%  75%, rgba(56,189,248,.028)  0%, transparent 55%),
    radial-gradient(ellipse  90% 40% at 50% 100%, rgba(79,70,229,.038)   0%, transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  line-height: 1.65;
}
a   { color: inherit; text-decoration: none; cursor: none; }
img, video { display: block; max-width: 100%; }
button { border: none; background: none; font: inherit; color: inherit; cursor: none; }
input, select, textarea { cursor: none; }
ol, ul { list-style: none; padding: 0; margin: 0; }

/* ─── CURSOR ────────────────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  left: 0; top: 0;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, #c0d8ff 0%, #4f8aff 50%, #1a50d8 100%);
  box-shadow:
    0 0 8px  3px rgba(79,138,255,.75),
    0 0 20px 6px rgba(79,138,255,.35),
    0 0 36px 8px rgba(79,138,255,.12);
  transition:
    width  .18s var(--ease),
    height .18s var(--ease),
    box-shadow .18s var(--ease);
  will-change: left, top;
}
body.hov #cursor {
  width: 14px; height: 14px;
  background: radial-gradient(circle, #fff 0%, #b8d4ff 35%, #4f8aff 100%);
  box-shadow:
    0 0 12px  5px rgba(79,138,255,.9),
    0 0 28px 10px rgba(79,138,255,.45),
    0 0 50px 14px rgba(79,138,255,.18);
}

/* ─── NAVBAR ────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 5%;
  border-bottom: 1px solid transparent;
  transition: background .45s, backdrop-filter .45s, border-color .45s;
}
#nav.scrolled {
  background: rgba(2,2,2,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: var(--border);
}

/* Brand */
.nav-brand {
  font-family: 'Syne', sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}

/* Center links */
.nav-center {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.nav-center > a,
.nav-dropdown > span {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color .22s;
  position: relative;
  padding-bottom: 4px;
  cursor: none;
  user-select: none;
}
.nav-center > a::after,
.nav-dropdown > span::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--blue);
  transition: width .32s var(--ease);
}
.nav-center > a:hover::after,
.nav-dropdown:hover > span::after { width: 100%; }
.nav-center > a:hover,
.nav-dropdown:hover > span { color: var(--text); }

/* Services dropdown */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(4,4,12,.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border);
  min-width: 210px;
  padding: .5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
/* Invisible hover bridge that closes the gap between span and menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -1.4rem;
  left: -1rem;
  right: -1rem;
  height: 1.4rem;
  background: transparent;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: .72rem 1.5rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color .2s, background .2s, padding-left .2s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  color: var(--text);
  background: rgba(79,138,255,.06);
  padding-left: 2rem;
}

/* Book a Discovery Call — top-right nav pill (no movement) */
.nav-book {
  border: 1px solid rgba(79,138,255,.6);
  padding: .52rem 1.5rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
  transition: border-color .25s, box-shadow .25s, background .25s;
  white-space: nowrap;
  /* No transform or animation — button is completely still */
}
.nav-book:hover {
  border-color: var(--blue);
  box-shadow: 0 0 22px rgba(79,138,255,.24);
  background: rgba(79,138,255,.07);
}

/* Temporary admin access button */
.nav-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.25);
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
.nav-admin:hover {
  color: var(--blue);
  border-color: rgba(79,138,255,.4);
  background: rgba(79,138,255,.06);
}
.nav-admin svg { display: block; }

/* Nav right wrapper */
.nav-right {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn-a, .btn-b {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .9rem 2.2rem;
  transition: all .28s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-a { background: var(--text); color: var(--bg); }
.btn-a::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .55s var(--ease);
}
.btn-a:hover::after { transform: translateX(110%); }
.btn-a:hover {
  background: var(--chrome);
  box-shadow: 0 0 40px rgba(200,216,240,.18), 0 8px 32px rgba(0,0,0,.45);
}
.btn-b { border: 1px solid var(--border-lit); color: var(--text); }
.btn-b:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }

/* Discovery call button — blue border, completely still */
.btn-discovery {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 2px solid rgba(79,138,255,.72);
  background: rgba(6,6,16,.9);
  color: var(--text);
  padding: 1.1rem 3rem;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .3s, box-shadow .3s, background .3s;
  /* animation: none — button is completely still */
}
.btn-discovery:hover {
  border-color: rgba(79,138,255,1);
  box-shadow: 0 0 32px rgba(79,138,255,.3), 0 0 64px rgba(79,138,255,.12);
  background: rgba(79,138,255,.1);
}

/* ─── SECTION COMMONS ───────────────────────────────────────────── */
.s-tag {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2.6rem;
}
.s-tag::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}
.s-h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.015em;
  margin-bottom: 4.5rem;
}
.s-h2 em { font-style: normal; color: var(--dim); }
.section-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── REVEAL ANIMATIONS ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity   .88s var(--ease),
    transform .88s var(--ease),
    filter    .90s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.dl1 { transition-delay: .10s; }
.dl2 { transition-delay: .20s; }
.dl3 { transition-delay: .30s; }
.dl4 { transition-delay: .40s; }
.dl5 { transition-delay: .50s; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
.footer {
  padding: 2.6rem 5%;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-links a {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .2s;
}
.footer-links a:hover { color: var(--text); }
.footer-right {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.footer-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.footer-linkedin:hover {
  border-color: rgba(79,138,255,.5);
  box-shadow: 0 0 18px rgba(79,138,255,.2);
  background: rgba(79,138,255,.06);
}
.footer-linkedin svg {
  width: 15px; height: 15px;
  fill: var(--mid);
  transition: fill .22s;
}
.footer-linkedin:hover svg { fill: var(--text); }
.footer-copy {
  font-size: .64rem;
  color: var(--dim);
  letter-spacing: .05em;
}

/* ─── PAGE HERO (inner pages — mission, services, contact) ──────── */
.page-hero {
  padding: 14rem 5% 8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(79,70,229,.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  padding: .38rem 1.1rem;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
.page-hero-tag::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--blue);
}
.page-hero-h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3.2rem, 7vw, 7.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  background: linear-gradient(175deg,
    #ffffff  0%,
    #e8f0ff 20%,
    #b8d0f0 42%,
    #e8f0ff 58%,
    #ffffff 100%
  );
  background-size: 100% 300%;
  background-position: 0% 10%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s ease-in-out infinite alternate;
  position: relative;
}
.page-hero-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  color: rgba(220,230,255,.65);
  line-height: 1.9;
  letter-spacing: .04em;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}
@keyframes shimmer {
  0%   { background-position: 0%   0%; }
  100% { background-position: 0% 100%; }
}

/* ─── WAVE BACKGROUND ───────────────────────────────────────────── */
@keyframes wave-bg {
  0%, 100% { background-position: 0% 50%;   }
  50%       { background-position: 100% 50%; }
}

/* ─── MAGIC CARD (tilt + spotlight) base ───────────────────────── */
.magic-card {
  border: 1px solid rgba(79,138,255,.18);
  background:
    rgba(8,8,20,.78) padding-box,
    radial-gradient(
      var(--mc-r, 0px) circle at var(--cx, -200px) var(--cy, -200px),
      rgba(79,138,255,.60)  0%,
      rgba(79,138,255,.10) 45%,
      rgba(255,255,255,.05) 80%
    ) border-box;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .08s, box-shadow .35s, transform .38s var(--ease);
  position: relative;
  overflow: hidden;
}
.magic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(79,138,255,.50),
    rgba(167,139,250,.45),
    transparent
  );
  opacity: 0;
  transition: opacity .4s;
  z-index: 1;
}
.magic-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    380px circle at var(--cx, 50%) var(--cy, 50%),
    rgba(79,138,255,.11) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .28s;
  pointer-events: none;
  z-index: 0;
}
.magic-card > * { position: relative; z-index: 1; }
.magic-card:hover {
  background:
    rgba(12,12,28,.9) padding-box,
    radial-gradient(
      360px circle at var(--cx, 50%) var(--cy, 50%),
      rgba(79,138,255,.75)  0%,
      rgba(79,138,255,.18) 40%,
      rgba(255,255,255,.06) 75%
    ) border-box !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.55),
    0 0 80px  rgba(79,138,255,.10),
    0 0 0 1px rgba(79,138,255,.25);
  transform: translateY(-8px) scale(1.016);
}
.magic-card:hover::before { opacity: 1; }
.magic-card:hover::after  { opacity: 1; }

/* ─── MAGNETIC ──────────────────────────────────────────────────── */
/* (handled in shared-init.js) */