/* ════════════════════════════════════════════════════════════════
   VIRALL STANCE — SHARED STYLES
   Covers: design tokens · typography · nav · footer · buttons ·
           cursor · scroll bar · sticky widgets
   Include on every page BEFORE page-specific CSS.
════════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS (loaded here so only one <link> needed) ─── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --bg:          #060912;
  --bg-2:        #080d1a;
  --border:      rgba(79,142,255,0.12);
  --text:        #e8f0ff;
  --muted:       rgba(165,216,255,0.55);
  --cyan:        #00d4ff;
  --purple:      #7b5ef8;
  --violet:      #b44fff;
  --pink:        #ff4a7a;
  --g-text:      linear-gradient(90deg,#7ee8fa 0%,#d9a7ff 100%);
  --g-btn:       linear-gradient(135deg,#00d4ff 0%,#7b5ef8 100%);
  --g-card:      linear-gradient(135deg,rgba(0,212,255,0.05) 0%,rgba(123,94,248,0.05) 100%);
  --glow-cyan:   0 0 40px rgba(0,212,255,0.28);
  --glow-purple: 0 0 40px rgba(123,94,248,0.3);
  --nav-h:       72px;
}

/* ── BASE RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  {
  scroll-behavior: smooth;
  overflow-x: hidden;          /* prevent horizontal scroll without breaking iOS vertical scroll */
  -webkit-overflow-scrolling: touch;
}
body  {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-x: none; /* modern horizontal-scroll lock — does NOT block vertical on iOS */
  cursor: none;
  min-height: 100%;
}
@media (max-width:768px) { body { cursor: auto; } }

h1,h2,h3,h4 { font-family:'Syne',sans-serif; font-weight:800; line-height:1.08; letter-spacing:-0.025em; }
a   { color: inherit; text-decoration: none; cursor: none; }
img { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── SHARED KEYFRAMES ──────────────────────────────────────── */
@keyframes pulseDot  { 0%,100%{transform:scale(1);opacity:1}  50%{transform:scale(1.7);opacity:.4} }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.8}       100%{transform:scale(2.8);opacity:0} }
@keyframes borderFlow{ 0%{background-position:0% 50%}          50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes float     { 0%,100%{transform:translateY(0)}         50%{transform:translateY(-16px)} }
@keyframes twinkle   { 0%,100%{opacity:.15;transform:scale(1)} 50%{opacity:.85;transform:scale(1.7)} }
@keyframes footerTwinkle { 0%{opacity:.55} 100%{opacity:1} }

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#c-dot {
  position:fixed; width:8px; height:8px;
  background:var(--cyan); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  box-shadow:0 0 8px var(--cyan),0 0 18px rgba(0,212,255,.38);
  transition:background .2s, transform .1s;
}
#c-ring {
  position:fixed; width:34px; height:34px;
  border:1.5px solid rgba(0,212,255,0.45); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:width .22s, height .22s, border-color .22s;
}
body.cur-hover #c-ring { width:54px; height:54px; border-color:rgba(180,79,255,0.65); }
body.cur-hover #c-dot  { transform:translate(-50%,-50%) scale(1.6); }

/* ── SCROLL PROGRESS BAR ───────────────────────────────────── */
#spbar {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--violet));
  box-shadow:0 0 10px var(--cyan);
  z-index:9997; width:0; transition:width .05s linear;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:50px; border:none;
  transition:all .28s ease; white-space:nowrap;
  position:relative; overflow:hidden; cursor:none;
  text-decoration:none;
}
.btn-primary {
  background:var(--g-btn); color:#fff;
  box-shadow:0 4px 24px rgba(0,212,255,.2);
}
.btn-primary::after {
  content:''; position:absolute; top:-50%; left:-60%;
  width:40%; height:200%;
  background:rgba(255,255,255,.18);
  transform:skewX(-20deg); transition:left .5s ease;
}
.btn-primary:hover { box-shadow:0 8px 36px rgba(0,212,255,.45); transform:translateY(-2px); }
.btn-primary:hover::after { left:130%; }
.btn-ghost {
  background:rgba(255,255,255,.06); color:var(--text);
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px);
}
.btn-ghost:hover {
  background:rgba(255,255,255,.11); border-color:rgba(0,212,255,.35);
  color:var(--cyan); transform:translateY(-2px);
}

/* ── NAV ───────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h); transition:background .4s, backdrop-filter .4s;
}
nav.scrolled {
  background:rgba(6,9,18,.85); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 32px rgba(0,0,0,.5);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 28px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.03em;
  background:var(--g-text); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  display:inline-flex; align-items:center;
}
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a {
  font-size:14px; font-weight:500; color:var(--muted);
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--cyan); transition:width .25s;
}
.nav-links a:hover  { color:#fff; }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--cyan); }
.nav-links a.active::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:12px; }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; cursor:pointer; background:none; border:none;
}
.hamburger span {
  width:22px; height:2px; background:var(--text); border-radius:2px;
  display:block; transition:all .3s;
}
.mob-nav {
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(6,9,18,.97); backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:flex-start; gap:20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:90px 20px 40px;  /* top padding clears the fixed navbar */
}
.mob-nav.open { display:flex; }
.mob-nav a {
  font-family:'Syne',sans-serif; font-size:26px; font-weight:800;
  background:var(--g-text); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  opacity:.7; transition:opacity .2s; cursor:pointer;
  line-height:1.2;
}
.mob-nav a:hover { opacity:1; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  background:var(--bg-2); border-top:1px solid var(--border);
  padding:72px 0 32px; position:relative; overflow:hidden;
}
/* Star twinkle overlay */
footer::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1.5px 1.5px at  8% 18%, rgba(165,216,255,.7)  0%,transparent 100%),
    radial-gradient(1px   1px   at 22% 62%, rgba(165,216,255,.5)  0%,transparent 100%),
    radial-gradient(2px   2px   at 38% 12%, rgba(165,216,255,.6)  0%,transparent 100%),
    radial-gradient(1px   1px   at 53% 82%, rgba(165,216,255,.45) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 34%, rgba(165,216,255,.6)  0%,transparent 100%),
    radial-gradient(1px   1px   at 80% 66%, rgba(165,216,255,.5)  0%,transparent 100%),
    radial-gradient(2px   2px   at 91% 22%, rgba(165,216,255,.4)  0%,transparent 100%),
    radial-gradient(1px   1px   at 14% 88%, rgba(165,216,255,.35) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 48%, rgba(165,216,255,.55) 0%,transparent 100%),
    radial-gradient(1px   1px   at 72% 10%, rgba(165,216,255,.4)  0%,transparent 100%);
  animation:footerTwinkle 4s ease-in-out infinite alternate;
}
footer > * { position:relative; z-index:1; }
.f-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
.f-logo {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:800;
  background:var(--g-text); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:16px; display:block;
}
.f-tag  { font-size:14px; color:var(--muted); line-height:1.7; max-width:240px; margin-bottom:28px; }
.f-soc  { display:flex; gap:10px; }
.sb {
  width:36px; height:36px; border:1px solid var(--border); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--muted); transition:all .25s;
}
.sb:hover     { border-color:rgba(0,212,255,.4); color:var(--cyan); transform:translateY(-3px); box-shadow:0 4px 14px rgba(0,212,255,.2); }
.sb svg       { transition:transform .25s ease; }
.sb:hover svg { transform:scale(1.18); }
.sb-ig:hover  { border-color:#c13584; color:#c13584; background:rgba(193,53,132,.06); box-shadow:0 6px 22px rgba(193,53,132,.32); }
.sb-li:hover  { border-color:#0a66c2; color:#0a66c2; background:rgba(10,102,194,.06); box-shadow:0 6px 22px rgba(10,102,194,.32); }
.sb-fb:hover  { border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.06); box-shadow:0 6px 22px rgba(24,119,242,.32); }
.f-col h5 {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px;
}
.f-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.f-links a { font-size:14px; color:var(--muted); transition:color .2s; }
.f-links a:hover { color:var(--cyan); }
.f-bot {
  border-top:1px solid var(--border); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.f-bot p { font-size:13px; color:var(--muted); }
.f-bot a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.f-bot a:hover { color:var(--cyan); }

/* ── STICKY WIDGETS ────────────────────────────────────────── */
.sticky-bar {
  position:fixed; bottom:28px; right:28px;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  z-index:800; opacity:0; transition:opacity .4s;
}
.sticky-bar.show { opacity:1; }
.s-cta {
  background:var(--g-btn); color:#fff;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
  padding:11px 22px; border-radius:50px; border:none;
  display:flex; align-items:center; gap:7px;
  box-shadow:0 6px 28px rgba(0,212,255,.35); transition:all .25s;
  text-decoration:none; cursor:pointer;
}
.s-cta:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,212,255,.5); }
.s-wa {
  width:48px; height:48px; background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  text-decoration:none; box-shadow:0 6px 24px rgba(37,211,102,.4); transition:all .25s;
}
.s-wa:hover { transform:translateY(-4px) scale(1.07); box-shadow:0 12px 36px rgba(37,211,102,.55); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1024px) {
  .f-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links, .nav-cta .btn-ghost { display:none; }
  .hamburger { display:flex; }
  .f-grid    { grid-template-columns:1fr 1fr; }
  .f-bot     { flex-direction:column; text-align:center; }
  /* Free Audit button — smaller on mobile so it fits alongside logo + hamburger */
  .nav-cta .btn-primary {
    padding: 8px 14px;
    font-size: 12px;
  }
}
@media (max-width:400px) {
  /* Very small phones — hide the CTA from nav; it's already in the mobile menu */
  .nav-cta { display:none; }
}
@media (max-width:480px) {
  .f-grid { grid-template-columns:1fr; }
  .mob-nav {
    gap:14px;
    padding:80px 16px 32px;
  }
  .mob-nav a {
    font-size:21px;
  }
}
@media (max-width:375px) {
  .mob-nav a { font-size:19px; }
  .mob-nav   { gap:12px; }
}