/* =========================
   SwiftGraphix — Dark SaaS Theme (Global)
   Divisions: automotive-skin (cyan), events-skin (purple), merch-skin (teal)
   ========================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ---- Global Design Tokens (dark) ---- */
:root{
  /* Core palette */
  --bg: #0B0F14;             /* page bg */
  --bg-elev: #10161D;        /* elevated panels */
  --surface: #0F1621;        /* cards/nav */
  --line: #18212B;           /* borders */

  --text: #E7EDF6;           /* primary text */
  --muted: #A6B3C2;          /* secondary text */

  /* Default brand (Automotive / cyan) */
  --brand: #0CA8FF;
  --brand-600:#0895E0;
  --brand-700:#067AB8;
  --brand-soft: rgba(12,168,255,.14);

  /* Radii / Shadows / Space */
  --radius: 14px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.45);
  --shadow-md: 0 16px 32px rgba(0,0,0,.55);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Type scale */
  --h1: clamp(2.2rem, 2vw + 1.7rem, 3.2rem);
  --h2: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
  --h3: clamp(1.2rem, .6vw + 1rem, 1.5rem);
  --p:  clamp(1rem, .2vw + .95rem, 1.125rem);

  /* Layout */
  --container: 1200px;
  --container-pad: 20px;

  /* Motion */
  --dur-quick: .18s;
  --dur-med: .35s;
  --dur-slow: .8s;
  --e-out: cubic-bezier(.16,1,.3,1);
}

/* ---- Division Accents ---- */
body.events-skin{
  --brand: #9D7BFF;
  --brand-600:#8A63F8;
  --brand-700:#6C4ED8;
  --brand-soft: rgba(157,123,255,.14);
}
body.merch-skin{
  --brand: #00C2A8;          /* teal */
  --brand-600:#00A892;
  --brand-700:#008C7A;
  --brand-soft: rgba(0,194,168,.16);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block}
a{color: var(--brand); text-decoration:none}
a:hover{color: var(--brand-600)}
:focus-visible{outline: 3px solid color-mix(in oklab, var(--brand) 35%, transparent); outline-offset: 2px; border-radius: 6px}
.container{max-width: var(--container); margin-inline:auto; padding-inline: var(--container-pad)}
h1,h2,h3,p{margin-block:0} /* prevent random collapses */

/* =========================
   Header / Navigation
   ========================= */
.header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.header.is-scrolled{ box-shadow: var(--shadow-sm); background: color-mix(in oklab, var(--surface) 96%, transparent) }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: var(--container); margin-inline:auto;
  padding: .7rem var(--container-pad);
}
.logo img{height: 44px}

/* Nav */
.nav{display:flex; align-items:center}
.nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0}
.nav ul li a{
  color: var(--muted); font-weight:600; font-size: 15.5px; padding:.35rem 0; position:relative;
}
.nav ul li a:hover{color: var(--text)}
.nav ul li a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  transition: right var(--dur-med) var(--e-out);
  border-radius: 2px;
}
.nav ul li a:hover::after,
.nav ul li a[aria-current="page"]::after{ right:0 }

/* Mobile burger */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  cursor:pointer; padding:8px; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background: var(--surface);
}
.menu-toggle span{
  height:3px; width:22px; background: var(--text);
  margin:3px 0; border-radius:2px; transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle.open span:nth-child(1){ transform: rotate(45deg) translate(4px,4px) }
.menu-toggle.open span:nth-child(2){ opacity:0 }
.menu-toggle.open span:nth-child(3){ transform: rotate(-45deg) translate(4px,-4px) }

/* Mobile nav */
@media (max-width:880px){
  .menu-toggle{display:flex}
  .nav{
    position:absolute; top:100%; left:0; width:100%;
    display:none; flex-direction:column;
    background: var(--surface); border-bottom:1px solid var(--line);
    box-shadow: var(--shadow-sm);
    animation: fadeInNav .25s ease;
  }
  .nav.active{display:flex}
  .nav ul{flex-direction:column; gap:0; width:100%}
  .nav ul li a{display:block; padding:.9rem 1.1rem; width:100%; border-top:1px solid var(--line)}
}
@keyframes fadeInNav{
  from{opacity:0; transform:translateY(-4px)}
  to{opacity:1; transform:translateY(0)}
}

/* =========================
   Buttons
   ========================= */
.btn, .cta-button, .secondary-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:12px; font-weight:700; line-height:1;
  border:1px solid transparent; color:#fff !important;
  transition: transform var(--dur-quick), filter var(--dur-quick), background var(--dur-quick), box-shadow var(--dur-quick);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 20%, transparent);
}
.btn:hover, .cta-button:hover, .secondary-button:hover{ transform:translateY(-1px) }
.btn:active, .cta-button:active, .secondary-button:active{ transform:translateY(0) }

.btn-primary, .cta-button{ background:linear-gradient(180deg, var(--brand), var(--brand-600)) }
.btn-primary:hover, .cta-button:hover{ filter:saturate(110%) }

.btn-ghost{ background:rgba(255,255,255,.06); color:var(--text)!important; border:1px solid var(--line) }
.btn-secondary, .secondary-button{ background:transparent; border:1px solid color-mix(in oklab, var(--brand) 40%, transparent) }
.btn-secondary:hover, .secondary-button:hover{ background: color-mix(in oklab, var(--brand) 12%, transparent) }

.btn-lg{ padding:1rem 1.35rem; border-radius:14px }
.shimmer{ position:relative; overflow:hidden }
.shimmer::after{
  content:""; position:absolute; inset:0 -200% 0 0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 35%, transparent 70%);
  transform:translateX(-100%); animation:sh 2.2s ease-in-out infinite;
}
@keyframes sh{ to{ transform:translateX(100%) } }

/* =========================
   Hero (single- or two-column)
   ========================= */
section{ padding:var(--space-8) 0; background:var(--bg) }

.hero{
  position:relative; overflow:hidden;
  /* Tighten top space so it sits snug under sticky header */
  padding-block: clamp(2.25rem, 5vw, 4.75rem);
  background:
    radial-gradient(1000px 580px at 85% -10%, var(--brand-soft), transparent 60%),
    linear-gradient(180deg, #0B0F14, #10161D);
}
.hero > .container{ position:relative; z-index:1 }
.hero::before, .hero::after{
  content:""; position:absolute; inset:auto auto 10% -10%;
  width:42vw; height:42vw; max-width:650px; max-height:650px;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%);
  filter:blur(18px); pointer-events:none; z-index:0; opacity:.75;
  animation:float-a 18s var(--e-out) infinite alternate;
}
.hero::after{ left:auto; right:-14%; bottom:0; transform:translateY(10%); animation:float-b 20s var(--e-out) infinite alternate; opacity:.5 }
@keyframes float-a{ to{ transform:translate(4%,-2%) } }
@keyframes float-b{ to{ transform:translate(-2%,4%) } }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-7); align-items:center;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:var(--space-6); text-align:center } }

/* Single-column hero variant for Merch page (no image) */
.merch-hero .hero-grid{
  grid-template-columns:1fr; text-align:center; justify-items:center;
}
.merch-hero .cta-buttons{ justify-content:center }

.hero-copy .eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand); background: var(--brand-soft);
  border:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
  padding:.35rem .65rem; border-radius:999px; margin-bottom:var(--space-4);
}
.hero h1{ font-size:var(--h1); line-height:1.1; margin-bottom:var(--space-4) }
.hero p{ font-size:var(--p); color:var(--muted); margin-bottom:var(--space-5) }
.cta-row,.cta-buttons{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center } /* centered at all sizes */

.hero-bullets{ display:flex; gap:1rem; list-style:none; padding:0; margin-top:var(--space-5) }
.hero-bullets li{ color:var(--muted); font-size:.98rem; padding-left:.9rem; position:relative }
.hero-bullets li::before{ content:""; position:absolute; left:0; top:.55rem; width:.5rem; height:.5rem; border-radius:999px; background:var(--brand) }

/* Visual frame (kept for pages that use an image) */
.hero-visual{ display:flex; align-items:center; justify-content:center }
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:.9rem;
  position:relative; overflow:hidden;
}
.glass::after{
  content:""; position:absolute; inset:-200%;
  background:conic-gradient(from 180deg at 50% 50%, transparent 0 25%, color-mix(in oklab, var(--brand) 18%, transparent) 30% 35%, transparent 40% 100%);
  animation:sweep 9s linear infinite; mix-blend:screen; pointer-events:none;
}
@keyframes sweep{ to{ transform:rotate(360deg) } }

.visual-square{ width:100%; max-width:520px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin:0 auto }
.visual-square img{ width:100%; height:100%; object-fit:cover; border-radius:12px }

/* =========================
   Metrics (optional)
   ========================= */
.metrics{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-elev) }
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad) }
.metric{ padding:1.15rem; text-align:center; background:var(--bg-elev); transition:transform var(--dur-quick) var(--e-out) }
.metric:hover{ transform:translateY(-3px) }
.metric span{ display:block; font-weight:800; font-size:clamp(1.25rem,1.2vw+1rem,1.75rem); color:#fff }
.metric small{ color:var(--muted) }
@media (max-width:860px){ .metrics-grid{ grid-template-columns:repeat(2,1fr) } }

/* =========================
   Section wrappers & headings
   ========================= */
.section{ background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.section.alt{ background:var(--bg) }
section h2{ text-align:center; font-size:var(--h2); margin-bottom:var(--space-4) }
.section-subtitle, .section-sub{
  text-align:center; color:var(--muted);
  max-width:800px; margin:0 auto var(--space-6); font-size:1.02rem;
}

/* =========================
   About (centered, text-first)
   ========================= */
.about-section{ background:var(--bg) }
.about-content{
  display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center;
  max-width:900px; margin-inline:auto; text-align:center;
}
.about-text p{ color:var(--muted) }

/* =========================
   Card Grid (Services / Offerings)
   ========================= */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
  max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad);
}
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space-5);
  display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;
  transition: transform var(--dur-med) var(--e-out), box-shadow var(--dur-med), border-color var(--dur-med);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--brand) 35%, transparent) }
.card h3{ font-size:var(--h3) }
.card p{ color:var(--muted) }

/* =========================
   Features (text-only variant)
   ========================= */
.features-section{ background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.features-content{ max-width:900px; margin-inline:auto; padding-inline:var(--container-pad) }
.features-text h2{ text-align:center }
.features-text .features-subtext{ color:var(--muted); text-align:center }
.features-list{
  list-style:none; padding:0; margin:var(--space-3) auto 0;
  display:grid; gap:.6rem; max-width:740px;
}
.features-list li{ color:var(--muted) }
.features-list li strong{ color:#fff; font-weight:700 }

/* =========================
   Steps (shared)
   ========================= */
.how{ background:var(--bg) }
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad);
}
@media (max-width:980px){ .steps{ grid-template-columns:1fr } }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-5);
}
.step-num{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:800; margin-bottom:.6rem;
}
.step h4{ margin:.4rem 0 .35rem }
.step p{ color:var(--muted) }

/* =========================
   Visual wide (shared)
   ========================= */
.visual-wide{ width:100%; max-width:1000px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; margin-inline:auto }
.visual-wide img{ width:100%; height:100%; object-fit:cover; border-radius:12px }

/* =========================
   FAQ
   ========================= */
.faq .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad) }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) }
@media (max-width:980px){ .faq-grid{ grid-template-columns:1fr } }

details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4) var(--space-5);
}
summary{ cursor:pointer; list-style:none; color:#fff; font-weight:700 }
summary::marker{ display:none }
details p{ color:var(--muted); margin-top:.6rem }

/* =========================
   CTA
   ========================= */
.cta-section{ text-align:center; background:var(--bg) }
.cta-content{ max-width:800px; margin-inline:auto; padding-inline:var(--container-pad) }
.cta-content h2{ font-size:var(--h2); margin-bottom:.5rem }
.cta-content p{ color:var(--muted); margin-bottom:1rem }

/* =========================
   Footer
   ========================= */
.footer-section{
  background: var(--bg-elev); color: var(--text);
  padding: 60px 20px; font-size:14px; border-top:1px solid var(--line);
}
.footer-container{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  max-width: var(--container); margin: 0 auto; gap: 20px;
}
.footer-column{ flex:1; min-width: 260px; text-align:center }
.footer-column h3{ color: var(--brand); font-size:18px; margin-bottom:15px }
.footer-column p, .footer-column a{ color: var(--muted); line-height: 1.8 }
.footer-column ul{ list-style:none; padding:0; margin:0 }
.footer-column ul li{ margin-bottom: 10px }
.footer-column ul li a{ color: var(--brand); font-size: 16px; display:inline-block }
.footer-column ul li a:hover{ color: var(--brand-600); text-decoration: underline }
.footer-bottom{
  text-align:center; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color:#8FA0AF;
}
.social-icons a{ display:inline-block; margin: 0 10px; font-size: 18px; color: var(--brand) }
.social-icons a:hover{ color: var(--brand-600) }

/* =========================
   Scroll reveal
   ========================= */
.reveal{
  opacity:0; transform: translateY(16px) scale(.98);
  transition: opacity var(--dur-med) var(--e-out), transform var(--dur-med) var(--e-out);
}
.reveal.in-view{
  opacity:1; transform: translateY(0) scale(1);
}

/* =========================
   Utilities
   ========================= */
.hidden{display:none!important}
.card-shadow{box-shadow: var(--shadow-sm)}

/* =========================
   Spacing & centering fixes
   ========================= */
main{ margin-top:0 !important; padding-top:0 !important }
.header + main{ margin-top:0 !important; padding-top:0 !important }
main > .hero:first-child{ padding-block-start: clamp(1.75rem, 4vw, 3.75rem) !important } /* remove big gap under header */
.hero .hero-grid{ align-items:center !important }
.hero .cta-buttons, .hero .cta-row{ justify-content:center !important }
.hero .visual-square{ max-width:520px; margin-inline:auto !important }

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