@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* =============================================
   SU Signal — Design System (main.css)
   ============================================= */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --bg-glass: rgba(255,255,255,0.05);
  --accent-cyan: #00f0ff;
  --accent-gold: #ffd700;
  --accent-purple: #a855f7;
  --accent-red: #ff4757;
  --accent-green: #2ed573;
  --accent-orange: #ff6b35;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0b0;
  --text-muted: #606070;
  --border-color: rgba(255,255,255,0.08);
  --border-accent: rgba(0,240,255,0.3);
  --grad-cyan: linear-gradient(135deg, #00f0ff, #0080ff);
  --grad-gold: linear-gradient(135deg, #ffd700, #ff8c00);
  --grad-purple: linear-gradient(135deg, #a855f7, #6d28d9);
  --grad-red: linear-gradient(135deg, #ff4757, #c0392b);
  --grad-green: linear-gradient(135deg, #2ed573, #17a589);
  --grad-bg: linear-gradient(135deg, #0a0a0f 0%, #12121a 50%, #0d0d1a 100%);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow-cyan: 0 0 20px rgba(0,240,255,0.3);
  --shadow-glow-gold: 0 0 20px rgba(255,215,0,0.3);
  --shadow-glow-purple: 0 0 20px rgba(168,85,247,0.3);
  --shadow-glow-red: 0 0 20px rgba(255,71,87,0.3);
  --space-xs:4px; --space-sm:8px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-full:9999px;
  --transition-fast:0.15s ease; --transition-normal:0.25s ease; --transition-slow:0.4s ease;
  --nav-height:70px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--grad-bg);
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 20% 20%,rgba(0,240,255,0.04) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 80%,rgba(168,85,247,0.04) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}
.page-content{position:relative;z-index:1;padding-bottom:calc(var(--nav-height) + 16px);}

h1,h2,h3,h4,h5,h6{font-family:'Outfit',sans-serif;line-height:1.2;}
h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;}
h2{font-size:clamp(1.4rem,4vw,1.8rem);font-weight:700;}
h3{font-size:clamp(1.1rem,3vw,1.3rem);font-weight:600;}
p{color:var(--text-secondary);}
a{color:var(--accent-cyan);text-decoration:none;transition:opacity var(--transition-fast);}
a:hover{opacity:0.8;}

.container{max-width:480px;margin:0 auto;padding:0 var(--space-md);}
@media(min-width:768px){.container{max-width:700px;}}
@media(min-width:1024px){.container{max-width:960px;}}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg-secondary);}
::-webkit-scrollbar-thumb{background:var(--accent-cyan);border-radius:var(--radius-full);}
::selection{background:rgba(0,240,255,0.2);color:var(--accent-cyan);}

.page-header{padding:var(--space-xl) 0 var(--space-lg);text-align:center;}
.page-header h1 span{color:var(--accent-cyan);}

.gradient-text{background:var(--grad-cyan);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gradient-text-gold{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.fullpage-center{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:var(--space-xl);}
.fullpage-center .icon{font-size:64px;margin-bottom:var(--space-lg);}
.fullpage-center h1{margin-bottom:var(--space-md);}
.fullpage-center p{margin-bottom:var(--space-xl);max-width:400px;}

.text-cyan{color:var(--accent-cyan);}.text-gold{color:var(--accent-gold);}.text-purple{color:var(--accent-purple);}
.text-red{color:var(--accent-red);}.text-green{color:var(--accent-green);}.text-muted{color:var(--text-muted);}
.text-center{text-align:center;}.text-sm{font-size:0.85rem;}.text-xs{font-size:0.75rem;}
.fw-bold{font-weight:700;}.fw-600{font-weight:600;}
.mt-sm{margin-top:var(--space-sm);}.mt-md{margin-top:var(--space-md);}.mt-lg{margin-top:var(--space-lg);}
.mb-sm{margin-bottom:var(--space-sm);}.mb-md{margin-bottom:var(--space-md);}.mb-lg{margin-bottom:var(--space-lg);}
.gap-sm{gap:var(--space-sm);}.flex{display:flex;}.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);}
.w-full{width:100%;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes glow-pulse-cyan{0%,100%{box-shadow:0 0 10px rgba(0,240,255,0.3);}50%{box-shadow:0 0 40px rgba(0,240,255,0.8);}}
@keyframes glow-pulse-gold{0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.3);}50%{box-shadow:0 0 40px rgba(255,215,0,0.8);}}
@keyframes glow-pulse-red{0%,100%{box-shadow:0 0 10px rgba(255,71,87,0.3);}50%{box-shadow:0 0 40px rgba(255,71,87,0.8);}}
@keyframes bounce-in{0%{transform:scale(0.8);opacity:0;}60%{transform:scale(1.05);}100%{transform:scale(1);opacity:1;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes number-pop{0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes slide-in-right{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slide-out-right{from{transform:translateX(0);opacity:1;}to{transform:translateX(100%);opacity:0;}}

.animate-fade-up{animation:fadeInUp 0.5s ease both;}
.animate-fade{animation:fadeIn 0.4s ease both;}
.animate-bounce{animation:bounce-in 0.5s ease both;}
.animate-float{animation:float 3s ease-in-out infinite;}
.animate-pulse{animation:pulse 2s ease-in-out infinite;}
.animate-spin{animation:spin 1s linear infinite;}

.delay-100{animation-delay:0.1s;}.delay-200{animation-delay:0.2s;}
.delay-300{animation-delay:0.3s;}.delay-400{animation-delay:0.4s;}.delay-500{animation-delay:0.5s;}