/* SafeStackPro Aurora Theme — Global Styles */

:root {
  --ink: #15112B;
  --ink-soft: #3D3566;
  --surface: rgba(255,255,255,0.55);
  --surface-strong: rgba(255,255,255,0.80);
  --border-glass: rgba(255,255,255,0.60);
  --c1: #FF4FD8;
  --c2: #7B5CFF;
  --c3: #36C5F0;
  --c4: #FFB454;
  --success: #1FB874;
  --font-h: 'Space Grotesk', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --radius-lg: 22px;
  --radius-md: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max-w: 1140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-b); color: var(--ink); background: #F5F2FF; overflow-x: hidden; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* AURORA BACKGROUND */
.ssp-aurora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #F5F2FF 0%, #FBF7FF 100%); pointer-events: none; }
.ssp-aurora-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: ssp-drift 18s ease-in-out infinite; }
.ssp-blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--c1), transparent 70%); top: -200px; left: -150px; animation-duration: 18s; }
.ssp-blob-2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--c3), transparent 70%); top: 100px; right: -180px; animation-duration: 22s; animation-delay: -4s; }
.ssp-blob-3 { width: 550px; height: 550px; background: radial-gradient(circle, var(--c2), transparent 70%); bottom: -250px; left: 30%; animation-duration: 20s; animation-delay: -8s; }
.ssp-blob-4 { width: 400px; height: 400px; background: radial-gradient(circle, var(--c4), transparent 70%); top: 50%; right: 10%; animation-duration: 26s; animation-delay: -12s; }
@keyframes ssp-drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)} 66%{transform:translate(-30px,40px) scale(0.95)} }

/* GLASS UTILITY */
.ssp-glass { background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-glass); box-shadow: 0 8px 32px rgba(91,60,200,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }

/* REVEAL ANIMATIONS */
.ssp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ssp-reveal.visible { opacity: 1; transform: translateY(0); }

/* CONTAINER */
.ssp-container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.ssp-site-wrapper { min-height: 100vh; }

/* NAVIGATION */
.ssp-nav { position: sticky; top: 0; z-index: 100; padding: 14px 24px; }
.ssp-nav-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-radius: 999px; background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-glass); box-shadow: 0 8px 32px rgba(91,60,200,0.12); }
.ssp-logo { font-family: var(--font-h); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ssp-logo-orb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c3)); animation: ssp-spin-glow 4s linear infinite; flex-shrink: 0; }
@keyframes ssp-spin-glow { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
.ssp-nav-links { display: flex; gap: 22px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.ssp-nav-links a { transition: color 0.2s; }
.ssp-nav-links a:hover { color: var(--ink); }
@media (max-width: 900px) { .ssp-nav-links { display: none; } }

/* BUTTONS */
.ssp-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); font-family: var(--font-b); }
.ssp-btn-primary { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff !important; box-shadow: 0 8px 24px rgba(123,92,255,0.35); position: relative; overflow: hidden; }
.ssp-btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px rgba(123,92,255,0.45); }
.ssp-btn-secondary { background: var(--surface); color: var(--ink) !important; border: 1px solid var(--border-glass) !important; backdrop-filter: blur(20px); }
.ssp-btn-secondary:hover { transform: translateY(-2px); background: var(--surface-strong); }
.ssp-btn-lg { padding: 16px 32px; font-size: 15px; }

/* FOOTER */
.ssp-footer { padding: 48px 24px; border-top: 1px solid rgba(123,92,255,0.15); margin-top: 80px; }
.ssp-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.ssp-footer-links { display: flex; gap: 24px; font-size: 13px; color: var(--ink-soft); }
.ssp-footer-links a:hover { color: var(--ink); }
.ssp-footer-copy { font-size: 12px; color: var(--ink-soft); }

/* SECTION */
.ssp-section { padding: 80px 0; }
.ssp-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: inline-block; padding: 6px 14px; border-radius: 999px; background: linear-gradient(120deg, rgba(255,79,216,0.15), rgba(123,92,255,0.15)); color: var(--ink); margin-bottom: 18px; }
.ssp-section-title { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--ink); }
.ssp-section-sub { font-size: 16px; color: var(--ink-soft); }
.ssp-section-header { text-align: center; max-width: 600px; margin: 0 auto 52px; }

/* CARDS */
.ssp-card { background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(91,60,200,0.10); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ssp-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(91,60,200,0.2); }

/* GRID */
.ssp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ssp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .ssp-grid-3 { grid-template-columns: 1fr; } .ssp-grid-2 { grid-template-columns: 1fr; } }

/* BADGE */
.ssp-badge { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: linear-gradient(120deg, rgba(255,79,216,0.18), rgba(123,92,255,0.18)); color: var(--ink); }

/* LIVE DOT */
.ssp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(31,184,116,0.6); animation: ssp-livepulse 1.8s infinite; display: inline-block; }
@keyframes ssp-livepulse { 0%{box-shadow:0 0 0 0 rgba(31,184,116,0.6)} 70%{box-shadow:0 0 0 8px rgba(31,184,116,0)} 100%{box-shadow:0 0 0 0 rgba(31,184,116,0)} }

/* NEWSLETTER CONE */
@keyframes ssp-rotate-cone { to { transform: rotate(360deg); } }
@keyframes ssp-liquid-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }