/* =========================
   SwiftGraphix — Dark SaaS (Automotive) — TERMS
   ========================= */

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

/* ---- Design Tokens ---- */
:root{
  /* Palette */
  --bg: #0B0F14;             /* deep slate page bg */
  --bg-elev: #10161D;        /* elevated panels */
  --surface: #0F1621;        /* cards/nav */
  --line: #18212B;           /* subtle borders */

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

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

  /* 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);

  /* 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: min(1200px, 92vw);
  --content:   min(860px, 92vw);

  /* Motion */
  --e-out: cubic-bezier(.16,1,.3,1);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(12,168,255,.10), transparent 60%),
    linear-gradient(180deg, #0B0F14, #10161D);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{color: var(--brand); text-decoration:none}
a:hover{color: var(--brand-600)}
:focus-visible{outline: 3px solid rgba(12,168,255,.35); outline-offset: 2px; border-radius: 6px}
img{max-width:100%; display:block}

/* Layout helpers */
.container{width: var(--container); margin-inline: auto; padding-inline: 16px}
.content{width: var(--content); margin-inline: auto}

/* =========================
   Header / Navigation
   ========================= */
.header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(15,22,33,.9);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.header.is-scrolled{ box-shadow: var(--shadow-sm) }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  width: var(--container); margin-inline:auto; padding:.55rem 0;
}
.logo img{height:40px}

/* Nav */
.nav{display:flex; align-items:center}
.nav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.nav ul li a{
  color: var(--muted); font-weight:600; font-size:15px; padding:.35rem 0; position:relative;
}
.nav ul li a:hover{color: var(--text)}
.nav ul li a[aria-current="page"]{ 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 .35s 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);
  position:absolute; top:12px; right:20px;
}
.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) }

@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; width:100%}
  .nav ul li a{display:block; padding:1rem; border-top:1px solid var(--line)}
}
@keyframes fadeInNav{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

/* =========================
   Terms — Hero
   ========================= */
.terms-hero{
  position:relative; overflow:hidden;
  padding: clamp(3rem,6vw,5rem) 0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(12,168,255,.18), transparent 60%),
    linear-gradient(180deg, #0B0F14, #10161D);
  border-bottom: 1px solid var(--line);
}
.terms-hero-content{ width: var(--content); margin-inline:auto; text-align:center }
.terms-hero h1{
  font-size: var(--h1); line-height:1.1; margin:0 0 .6rem;
}
.terms-hero p{
  color: var(--muted); font-size: var(--p); margin:0 auto; max-width: 60ch;
}

/* Ambient orbs */
.terms-hero::before,
.terms-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, rgba(12,168,255,.14), transparent 70%);
  filter: blur(18px); pointer-events:none; z-index:0; opacity:.6;
  animation: float-a 18s var(--e-out) infinite alternate;
}
.terms-hero::after{
  left:auto; right:-14%; bottom:0;
  transform: translateY(10%);
  animation: float-b 20s var(--e-out) infinite alternate;
  opacity:.45;
}
@keyframes float-a{ to{ transform: translate(4%, -2%) } }
@keyframes float-b{ to{ transform: translate(-2%, 4%) } }

/* =========================
   Terms — Content
   ========================= */
.terms-section{
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.terms-body{
  width: var(--content);
  margin-inline:auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.2rem, 2.6vw, 2rem);
}

/* Typography */
.terms-body h2{
  font-size: var(--h2);
  margin: 1.6rem 0 .6rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: .35rem;
}
.terms-body h2:first-child{ margin-top: .25rem }
.terms-body h3{
  font-size: var(--h3); margin: 1.2rem 0 .4rem; color: #D7E6F5;
}
.terms-body p{ font-size: var(--p); color: var(--muted); margin: 0 0 .9rem }
.terms-body a{ text-decoration: underline }

/* Lists */
.terms-body ul{ margin: .4rem 0 1rem 1.25rem }
.terms-body li{ margin: .35rem 0; color: var(--muted); line-height: 1.7 }
.terms-body li::marker{ color: var(--brand) }

/* Anchor offset for sticky header if you add IDs to headings */
.terms-body h2[id], .terms-body h3[id]{ scroll-margin-top: 84px }

/* Highlighted SMS block */
.sms-info-block{
  background: linear-gradient(180deg, rgba(12,168,255,.10), rgba(12,168,255,.06));
  border: 1px solid rgba(12,168,255,.28);
  border-left: 6px solid var(--brand);
  padding: 16px;
  margin: 14px 0 6px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.sms-info-block p{ margin: .3rem 0 .6rem; color: var(--text) }
.sms-info-block ul{ margin: .2rem 0 0 1.1rem }
.sms-info-block li{ color: var(--muted) }

/* =========================
   CTA (shared)
   ========================= */
.cta-section{
  padding: clamp(2.4rem, 4vw, 3.2rem) 0;
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(12,168,255,.14), transparent 70%),
    linear-gradient(180deg, #0B0F14, #10161D);
  border-top: 1px solid var(--line);
}
.cta-content{ width: var(--content); margin-inline:auto; text-align:center }
.cta-content h2{ font-size: var(--h2); margin:0 0 .4rem }
.cta-content p{ color: var(--muted); margin: 0 0 .8rem }
.cta-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#fff; font-weight:700; padding:.9rem 1.2rem; border-radius:12px; border:0;
  box-shadow: 0 10px 24px rgba(12,168,255,.25);
  transition: transform .18s var(--e-out), filter .18s;
}
.cta-button:hover{ transform: translateY(-2px); filter:saturate(110%) }

/* =========================
   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:left}
.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)}

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