:root{
  --background: 0 0% 100%;
  --foreground: 240 10% 8%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 8%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 214 76% 46%;
  --primary: 214 76% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 10% 8%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 214 83% 96%;
  --accent-foreground: 214 83% 36%;
  --success: 152 60% 36%;
  --success-foreground: 0 0% 100%;
  --radius: 0.75rem;
}
.dark{
  --background: 240 10% 6%;
  --foreground: 0 0% 98%;
  --card: 240 8% 9%;
  --card-foreground: 0 0% 98%;
  --border: 240 6% 18%;
  --input: 240 6% 18%;
  --ring: 214 85% 62%;
  --primary: 214 85% 62%;
  --primary-foreground: 240 10% 6%;
  --secondary: 240 6% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 6% 14%;
  --muted-foreground: 240 5% 65%;
  --accent: 214 40% 18%;
  --accent-foreground: 214 91% 82%;
  --success: 152 55% 45%;
  --success-foreground: 240 10% 6%;
}
html{scroll-behavior:smooth;}
body{ background: hsl(var(--background)); color: hsl(var(--foreground)); }
.bg-grid{
  background-image: radial-gradient(hsl(var(--foreground) / 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-fade{ -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
::selection{ background: hsl(var(--primary) / 0.25); }
.accordion-content{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.accordion-item[data-open="true"] .accordion-content{ grid-template-rows: 1fr; }
.accordion-content > div{ overflow:hidden; }
.accordion-chevron{ transition: transform .25s ease; }
.accordion-item[data-open="true"] .accordion-chevron{ transform: rotate(180deg); }
[data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform: translateY(0); }
.input-field{
  display:block; width:100%; border-radius: var(--radius); border:1px solid hsl(var(--input));
  background: hsl(var(--background)); padding: 0.6rem 0.8rem; font-size:0.875rem; color: hsl(var(--foreground));
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input-field:focus{ outline:none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25); }
.input-label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.4rem; }
