*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

:root{
  --background: hsl(224 20% 6%);
  --foreground: hsl(72 14% 94%);
  --card: hsl(224 18% 10%);
  --card-foreground: hsl(72 14% 94%);
  --primary: hsl(79 95% 58%);
  --primary-foreground: hsl(224 26% 8%);
  --secondary: hsl(224 14% 15%);
  --secondary-foreground: hsl(72 10% 88%);
  --muted: hsl(224 12% 17%);
  --muted-foreground: hsl(218 10% 63%);
  --border: hsl(224 12% 22%);
  --ring: hsl(79 95% 58%);
  --surface-nav: hsla(224,24%,8%,0.88);
  --surface-elevated: hsl(224 16% 12%);
  --text-primary: hsl(72 16% 95%);
  --text-secondary: hsl(220 9% 72%);
  --text-tertiary: hsl(220 8% 53%);
  --hover-bg: hsl(224 13% 18%);
}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--background);
  color:var(--foreground);
  line-height:1.5;
  background-image:
    radial-gradient(1200px 600px at 20% -10%, hsla(79,95%,58%,0.08), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, hsla(180,100%,70%,0.04), transparent 55%);
  background-attachment:fixed;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.font-heading{font-family:'Outfit','Manrope',sans-serif}
.font-body{font-family:'Manrope',sans-serif}

.max-w-6xl{max-width:72rem;margin:0 auto}
.max-w-5xl{max-width:64rem;margin:0 auto}
.max-w-3xl{max-width:48rem;margin:0 auto}
.px-main{padding-left:1rem;padding-right:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}
.mt-16{margin-top:4rem}

.nav-bar{
  position:sticky;top:0;left:0;right:0;z-index:50;
  background:var(--surface-nav);backdrop-filter:blur(12px);
  border-bottom:1px solid hsla(224,12%,22%,0.8);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.nav-brand{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:700;color:var(--foreground);text-decoration:none;letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:0.25rem}
.nav-link{
  padding:0.5rem 1rem;border-radius:9999px;font-size:0.875rem;font-weight:500;
  color:var(--text-secondary);text-decoration:none;transition:all 0.2s;display:inline-flex;align-items:center;gap:0.375rem;
}
.nav-link:hover{background:var(--hover-bg);color:var(--foreground);text-decoration:none}
.nav-link.active{background:var(--primary);color:var(--primary-foreground);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.nav-right{display:flex;align-items:center;gap:0.75rem}
.locale-btn{
  padding:0.375rem 0.625rem;border-radius:9999px;border:1px solid var(--border);
  font-size:0.875rem;font-weight:500;color:var(--text-secondary);background:transparent;cursor:pointer;
  transition:background 0.2s;text-decoration:none;
}
.locale-btn:hover{background:var(--hover-bg);text-decoration:none}

.nav-mobile{display:none;border-top:1px solid var(--border)}
.nav-mobile-link{flex:1;padding:0.75rem 0;text-align:center;font-size:0.75rem;font-weight:500;color:var(--text-tertiary);text-decoration:none;transition:color 0.2s}
.nav-mobile-link.active{color:var(--primary);border-bottom:2px solid var(--primary)}

.site-footer{border-top:1px solid var(--border);margin-top:4rem;padding:2rem 1rem;text-align:center;font-size:0.875rem;color:var(--text-tertiary)}

.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.25rem}
.card-2xl{border-radius:1rem;padding:1.25rem 1.5rem}
.card-elevated{background:var(--surface-elevated);border:1px solid var(--border);border-radius:0.75rem;padding:0.75rem}

h1{font-family:'Outfit',sans-serif;font-size:clamp(1.875rem,4vw,2.5rem);font-weight:700;color:var(--foreground);letter-spacing:-0.02em;line-height:1.15}
h2{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;color:var(--foreground);line-height:1.3}
h3{font-family:'Outfit',sans-serif;font-size:1.125rem;font-weight:600;color:var(--foreground)}
.text-xs{font-size:0.75rem}.text-sm{font-size:0.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-foreground{color:var(--foreground)}
.text-primary{color:var(--primary)}
.text-secondary-fg{color:var(--secondary-foreground)}
.text-text-secondary{color:var(--text-secondary)}
.text-text-tertiary{color:var(--text-tertiary)}
.text-text-primary{color:var(--text-primary)}
.tracking-tight{letter-spacing:-0.02em}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:0.14em}
.leading-relaxed{line-height:1.625}
.italic{font-style:italic}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.grid{display:grid;gap:0.75rem}
.grid-1{grid-template-columns:1fr}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}

.flex{display:flex}.inline-flex{display:inline-flex}
.items-center{align-items:center}.items-start{align-items:start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}

.btn-primary{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.625rem 1.25rem;border-radius:9999px;
  background:var(--primary);color:var(--primary-foreground);
  font-size:0.875rem;font-weight:500;text-decoration:none;transition:filter 0.2s;
}
.btn-primary:hover{filter:brightness(1.1);text-decoration:none}
.btn-outline{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.625rem 1.25rem;border-radius:9999px;
  border:1px solid var(--border);color:var(--text-secondary);
  font-size:0.875rem;text-decoration:none;transition:border-color 0.2s;
}
.btn-outline:hover{border-color:hsla(79,95%,58%,0.5);text-decoration:none}
.pill{
  display:inline-flex;align-items:center;padding:0.375rem 0.75rem;border-radius:9999px;
  font-size:0.75rem;font-weight:500;
}
.pill-primary{background:var(--primary);color:var(--primary-foreground)}
.pill-muted{background:var(--muted);color:var(--muted-foreground)}
.pill-sage{background:hsla(108,16%,39%,0.15);color:hsl(108,16%,65%)}
.pill-border{border:1px solid var(--border);color:var(--text-secondary);background:transparent}

.banner-cta{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--primary);color:var(--primary-foreground);
  border-radius:1rem;padding:1.25rem;text-decoration:none;transition:filter 0.2s;
}
.banner-cta:hover{filter:brightness(1.1);text-decoration:none}

.text-amber-400{color:hsl(45,96%,64%)}.text-amber-500{color:hsl(38,92%,50%)}
.text-blue-400{color:hsl(213,94%,68%)}.text-blue-500{color:hsl(217,91%,60%)}
.text-cyan-400{color:hsl(188,94%,68%)}.text-cyan-500{color:hsl(189,94%,43%)}
.text-violet-400{color:hsl(270,76%,68%)}.text-violet-500{color:hsl(270,76%,55%)}
.text-rose-400{color:hsl(350,89%,70%)}.text-rose-500{color:hsl(350,89%,60%)}
.text-sky-300{color:hsl(199,95%,74%)}.text-sky-400{color:hsl(198,93%,60%)}
.text-lime-500{color:hsl(84,81%,44%)}.text-sage-500{color:hsl(108,16%,50%)}
.text-terra-400{color:hsl(16,42%,58%)}
.text-stone-400{color:hsl(25,5%,65%)}
.text-emerald-600{color:hsl(160,84%,39%)}
.text-red-700{color:hsl(0,72%,51%)}
.text-sage-700{color:hsl(108,16%,35%)}
.text-sage-800{color:hsl(108,16%,25%)}
.text-amber-600{color:hsl(32,95%,44%)}
.text-amber-700{color:hsl(26,90%,37%)}
.text-indigo-600{color:hsl(239,84%,67%)}

/* Colored backgrounds */
.bg-blue-500{background:hsl(217,91%,60%)}.bg-amber-500{background:hsl(38,92%,50%)}
.bg-sage-500{background:hsl(108,16%,50%)}
.bg-sage-50{background:hsla(108,16%,39%,0.1)}.bg-sage-100{background:hsla(108,16%,39%,0.15)}
.bg-red-50{background:hsla(0,72%,51%,0.1)}
.bg-amber-50{background:hsla(38,92%,50%,0.1)}
.bg-blue-50{background:hsla(217,91%,60%,0.08)}
.bg-violet-50{background:hsla(270,76%,55%,0.08)}
.bg-cyan-50{background:hsla(189,94%,43%,0.08)}
.bg-sky-50{background:hsla(198,93%,60%,0.08)}
.bg-stone-100{background:hsla(25,5%,65%,0.1)}
.bg-teal-50{background:hsla(162,63%,41%,0.08)}
.bg-emerald-50{background:hsla(160,84%,39%,0.08)}
.bg-rose-50{background:hsla(350,89%,60%,0.08)}
.bg-pink-50{background:hsla(330,80%,60%,0.08)}
.bg-indigo-50{background:hsla(239,84%,67%,0.08)}
.bg-primary-15{background:hsla(79,95%,58%,0.15)}

/* Layer card colors (dark mode) */
.layer-base{border-color:hsla(213,94%,68%,0.3);background:hsla(217,91%,60%,0.1)}
.layer-mid{border-color:hsla(45,96%,64%,0.3);background:hsla(38,92%,50%,0.1)}
.layer-outer{border-color:hsla(108,16%,50%,0.3);background:hsla(108,16%,39%,0.1)}

/* Colored borders */
.border-sage-200{border-color:hsla(108,16%,39%,0.25)}
.border-red-200{border-color:hsla(0,72%,51%,0.25)}
.border-amber-200{border-color:hsla(38,92%,50%,0.25)}
.border-primary-50{border-color:hsla(79,95%,58%,0.5)}

.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:0.5rem}
.dot-primary{background:var(--primary)}
.dot-sage{background:hsl(108,16%,50%)}
.dot-red{background:hsl(0,62%,50%)}
.dot-border{background:var(--border)}

.num-circle{
  width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;flex-shrink:0;
}
.num-circle-primary{background:hsla(79,95%,58%,0.15);color:var(--primary)}
.num-circle-terra{background:hsla(16,42%,58%,0.15);color:hsl(16,42%,65%)}

.layer-badge{
  width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:0.875rem;font-weight:700;color:#fff;
}

details{background:var(--card);border:1px solid var(--border);border-radius:0.75rem}
details summary{padding:1rem;cursor:pointer;font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--foreground);list-style:none;display:flex;align-items:center;justify-content:space-between}
details summary::-webkit-details-marker{display:none}
details[open] .toggle-icon{transform:rotate(180deg)}
.toggle-icon{color:var(--text-tertiary);transition:transform 0.2s}
details .details-body{padding:0 1rem 1rem;font-size:0.875rem;color:var(--text-secondary)}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:0.875rem;height:0.875rem}
.icon-md{width:1rem;height:1rem}
.icon-lg{width:1.25rem;height:1.25rem}
.icon-xl{width:1.5rem;height:1.5rem}
.icon-2xl{width:1.75rem;height:1.75rem}
.icon-3xl{width:2.5rem;height:2.5rem}
.icon-4xl{width:3rem;height:3rem}

.checkbox-outline{width:1.25rem;height:1.25rem;border-radius:0.25rem;border:1px solid hsla(38,92%,50%,0.3);flex-shrink:0;margin-top:0.125rem}

@media(min-width:640px){
  .px-main{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:grid-2{grid-template-columns:repeat(2,1fr)}
  .sm\:grid-3{grid-template-columns:repeat(3,1fr)}
  .sm\:grid-4{grid-template-columns:repeat(4,1fr)}
  .sm\:flex-row{flex-direction:row}
  .sm\:hidden{display:none}
  .sm\:flex{display:flex}
  .sm\:inline-flex{display:inline-flex}
  .sm\:block{display:block}
  .card-2xl{padding:1.5rem 2rem}
}
@media(min-width:1024px){
  .px-main{padding-left:2rem;padding-right:2rem}
  .lg\:grid-3{grid-template-columns:repeat(3,1fr)}
  .lg\:grid-4{grid-template-columns:repeat(4,1fr)}
  .lg\:grid-hero{grid-template-columns:1.25fr 0.75fr}
}
@media(max-width:639px){
  .nav-desktop{display:none}
  .nav-mobile{display:flex}
  .desktop-only{display:none}
}

.space-y-1>*+*{margin-top:0.25rem}
.space-y-2>*+*{margin-top:0.5rem}
.space-y-3>*+*{margin-top:0.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-10>*+*{margin-top:2.5rem}
.border-l-4{border-left:4px solid hsla(79,95%,58%,0.5)}
.pl-4{padding-left:1rem}
.w-full{width:100%}
.rounded-2xl{border-radius:1rem}
.rounded-xl{border-radius:0.75rem}
.rounded-full{border-radius:9999px}
.transition-all{transition:all 0.2s}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,0.3)}
.hover\:border-primary:hover{border-color:hsla(79,95%,58%,0.5)}

/* Search input */
.search-input{
  width:100%;padding:0.75rem 1rem 0.75rem 2.75rem;
  background:var(--card);border:1px solid var(--border);border-radius:1rem;
  font-size:0.875rem;color:var(--foreground);outline:none;transition:border-color 0.2s;
}
.search-input:focus{border-color:hsla(79,95%,58%,0.6)}
.search-input::placeholder{color:var(--text-tertiary)}
.search-wrap{position:relative}
.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-tertiary)}

/* Score bar */
.score-text{font-family:'Outfit',sans-serif;font-size:1.25rem;color:var(--foreground)}