/* CocaColors Design System — index.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* === LIGHT THEME (default) === */
:root {
  --bg-primary:#ffffff;--bg-secondary:#f5f5f7;--bg-card:#ffffff;--bg-elevated:#eeeef2;--bg-hover:#e4e4ea;
  --accent:#a855f7;--accent-hover:#9333ea;--accent-subtle:rgba(168,85,247,0.08);
  --accent2:#ec4899;--accent3:#6c5ce7;
  --gradient:linear-gradient(135deg,#6c5ce7,#a855f7,#ec4899);
  --text-primary:#1a1a2e;--text-secondary:#555570;--text-muted:#8888a0;
  --border:rgba(0,0,0,0.08);--border-hover:rgba(0,0,0,0.15);
  --glass:rgba(0,0,0,0.03);--glass-hover:rgba(0,0,0,0.06);
  --shadow:0 4px 24px rgba(0,0,0,0.06);--shadow-lg:0 8px 48px rgba(0,0,0,0.1);
  --navbar-bg:rgba(255,255,255,0.85);
  --radius:12px;--radius-sm:8px;--radius-lg:20px;--radius-full:9999px;
  --font:'Stack Sans Headline', 'Plus Jakarta Sans', system-ui, sans-serif;
  --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* === DARK THEME (optional) === */
[data-theme="dark"] {
  --bg-primary:#09090f;--bg-secondary:#111118;--bg-card:#16161f;--bg-elevated:#1e1e2a;--bg-hover:#252535;
  --text-primary:#f0f0f5;--text-secondary:#9090aa;--text-muted:#606080;
  --border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);
  --glass:rgba(255,255,255,0.03);--glass-hover:rgba(255,255,255,0.06);
  --shadow:0 4px 24px rgba(0,0,0,0.3);--shadow-lg:0 8px 48px rgba(0,0,0,0.4);
  --navbar-bg:rgba(9,9,15,0.85);
  --accent-subtle:rgba(168,85,247,0.1);
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background 0.3s ease,color 0.3s ease;letter-spacing:0.03em}
#main-content{min-height:85vh;padding-bottom:120px}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent-hover)}
img{max-width:100%;display:block}
button{font-family:var(--font);cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:var(--font);outline:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em}
h2{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;line-height:1.2}
h3{font-size:clamp(1.2rem,2vw,1.75rem);font-weight:600;line-height:1.3}
h4{font-size:1.125rem;font-weight:600}
p{color:var(--text-secondary);line-height:1.7}

/* Full width layout — no max-width on pages, container for content alignment */
.container{max-width:1400px;margin:0 auto;padding:0 32px;width:100%}
.container-fluid{width:100%;padding:0 32px}
.section{padding:80px 0;width:100%}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{margin-bottom:12px}
.section-header p{max-width:600px;margin:0 auto;color:var(--text-secondary)}
.gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:0.9rem;transition:var(--transition);border:1px solid transparent}
.btn-primary{background:var(--gradient);color:#fff;border:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(168,85,247,0.3)}
.btn-secondary{background:var(--glass);color:var(--text-primary);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--glass-hover);border-color:var(--border-hover)}
.btn-sm{padding:8px 16px;font-size:0.8rem;border-radius:var(--radius-sm)}
.btn-icon{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition)}
.btn-icon:hover{background:var(--glass-hover);color:var(--text-primary);border-color:var(--border-hover)}

.badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;background:var(--accent-subtle);color:var(--accent)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1024px){.grid-4,.grid-5{grid-template-columns:repeat(3,1fr)}.container{padding:0 24px}}
@media(max-width:768px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}.container{padding:0 16px}.section{padding:48px 0}}
@media(max-width:480px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}.container{padding:0 12px}}

.page-enter{animation:pageEnter 0.4s ease forwards}
@keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}