/* styles.css - Converted from Tailwind + custom CSS in the React project
   This file includes essential Tailwind-like utilities used by the site
   and project-specific design tokens. It intentionally avoids any build step.
*/

/* Design tokens taken from the original Tailwind-based stylesheet (HSL values preserved where possible) */
:root {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --card: 220 39% 15%;
  --card-foreground: 210 40% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 222 47% 11%;
  --secondary: 263 70% 50%;
  --secondary-foreground: 210 40% 98%;
  --muted: 220 39% 20%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 91% 60%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: hsl(220 39% 25% / 1);
  --input: hsl(220 39% 25% / 1);
  --ring: 217 91% 60%;
  --radius: 0.75rem;
  --gradient-hero: linear-gradient(135deg, hsl(222 47% 11%), hsl(230 40% 8%));
  --glow-primary: 0 0 40px hsl(217 91% 60% / 0.3);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --footer-bg: #0B0E13;
}

*{box-sizing:border-box}
/* Prevent horizontal scrolling on small devices caused by positioned elements */
html, body {width:100%;overflow-x:hidden}
.body-fallback{margin:0;overflow-x:hidden;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:hsl(var(--background)); color:hsl(var(--foreground)); -webkit-font-smoothing:antialiased}

/* Typography */
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif;font-weight:600}
p, li, label, input, .card, .button{font-family:'Inter',sans-serif}
p{line-height:1.7}

.container{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}
.min-h-screen{min-height:100vh}
.relative.overflow-hidden{overflow:hidden}
.flex{display:flex}
.items-center{align-items:center}
.justify-center{justify-content:center}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.mx-auto{margin-left:auto;margin-right:auto}
.text-center{text-align:center}
.rounded{border-radius:var(--radius)}
.rounded-lg{border-radius:16px}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.section-gap-mobile{padding-top:calc(6rem + 12px);padding-bottom:calc(6rem + 12px)}
.mb-6{margin-bottom:1.5rem}
.mb-4{margin-bottom:1rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.grid{display:grid;grid-template-columns:repeat(1,1fr)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}

/* Responsive grid utilities applied only at breakpoints */
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-5xl{max-width:64rem}
.max-w-3xl{max-width:48rem}
.text-5xl{font-size:2.8rem;line-height:1}
.md\:text-7xl{font-size:4.5rem}
.text-4xl{font-size:2rem}
.text-2xl{font-size:1.5rem}
.text-xl{font-size:1.125rem}
.leading-tight{line-height:1.05}
.leading-relaxed{line-height:1.6}
.font-bold{font-weight:700}
.text-muted-foreground{color:rgba(230,238,252,0.75)}
.text-primary{color:var(--primary)}
.bg-primary\/10{background:rgba(59,130,246,0.08)}
.border{border:1px solid var(--border)}
.border-border{border-color:var(--border)}
.bg-card\/50{background:rgba(15,19,22,0.5)}
.backdrop-blur{backdrop-filter: blur(6px)}
.hover-glow{transition:all 0.25s cubic-bezier(.4,0,.2,1)}
.hover-glow:hover{box-shadow:var(--glow-primary)}
.button{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;border-radius:10px;border:0;background:linear-gradient(90deg,var(--primary),var(--secondary));color:white;font-weight:700;cursor:pointer;transition:all 0.2s ease-in-out}

.button.primary-cta{
  background:white;
  color:hsl(var(--background));
  box-shadow:0 4px 12px rgba(59,130,246,0.25);
}

.button.primary-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(59,130,246,0.35);
}
.button.outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--foreground);font-weight:600}
.button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--foreground)}

/* Accent underline for keywords */
.accent-underline-keyword{background-image:linear-gradient(90deg,#36b6ff55,#7bd1ff88);background-repeat:no-repeat;background-position:0 100%;background-size:100% 40%;padding-bottom:2px}

/* Proof gallery cards */
.proof-card{background:rgba(255,255,255,0.02);border-radius:12px;padding:0.5rem;box-shadow:0 6px 18px rgba(5,10,20,0.6);border:1px solid rgba(255,255,255,0.03)}

.card{
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}

.card.can-help{
  background: #0E1118;
}

.card.cant-help{
  background: #0A0D13;
}

.card .card-header{
  margin-bottom: 0.75rem;
}

.card .card-content{
  padding-top: 0.5rem;
}

.card ul li{
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.card ul li::before{
  flex-shrink: 0;
}
.img-responsive{max-width:100%;height:auto;display:block}
.fade-in{animation:fadeIn 0.6s ease-out forwards;opacity:0;transform:translateY(20px)}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* Audit form UI improvements */
.audit-form{display:block}
.audit-form .form-section{background:transparent;padding:0 0 12px 0;margin-bottom:18px}
.audit-form .form-section:first-child{margin-top:0}
.form-section-title{display:block;color:rgba(230,238,252,0.65);font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.form-row{display:block;margin-bottom:16px}
.form-row label{display:block;margin-bottom:8px;color:var(--muted-foreground);font-weight:600}
.input{padding:0.9rem;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.02);color:var(--foreground);width:100%;box-sizing:border-box}
.input:focus{outline:none;box-shadow:0 6px 24px rgba(75,107,255,0.12);border-color:rgba(75,107,255,0.6)}
.input:hover{border-color:rgba(255,255,255,0.12)}

/* Wrap the entire form in a soft card when inside the audit section */
.card.card-audit{background:linear-gradient(180deg, rgba(12,16,24,0.75), rgba(8,10,14,0.6));border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(2,6,23,0.6);border-radius:16px;padding:20px}

/* Checkbox label enhancements */
.audit-checkbox-label{transition:all 0.18s ease;display:flex;align-items:center}
.audit-checkbox-label:hover{background:rgba(255,255,255,0.015);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.audit-checkbox-label input[type="checkbox"]{width:18px;height:18px}
.audit-checkbox-label input[type="checkbox"]:checked + .goal-text{color:#4b6bff;font-weight:700}
.goal-text{transition:color 0.12s ease, font-weight 0.12s ease}

/* CTA styles for audit button */
.audit-cta{background:linear-gradient(90deg,#4b6bff,#7b9cff);color:white;border-radius:12px;padding:0.9rem 1.1rem;font-weight:700;font-size:1.05rem;box-shadow:0 8px 30px rgba(75,107,255,0.18);transition:transform 0.16s ease,box-shadow 0.16s ease}
.audit-cta:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(75,107,255,0.22)}

/* Ensure the audit card uses full width inside the grid column */
.card.card-audit .card-content{padding:0}

/* Mobile tweaks */
@media(max-width:640px){
  .card.card-audit{padding:14px}
  .form-row{margin-bottom:14px}
  .form-section{margin-bottom:14px}
  .form-section-title{font-size:13px}
}


/* Authority / Featured In strip */
.authority-strip{
  background:#0c1018;
  padding:20px 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.authority-title{
  color:rgba(255,255,255,0.7);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:20px;
}
.authority-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  flex-wrap:nowrap;
  max-width:640px; /* constrain row so logos don't overflow and appear huge */
  margin:0 auto;
}
.authority-logos img{
  height:36px; /* balanced size */
  max-height:44px;
  width:auto;
  opacity:0.78;
  transition:opacity 0.18s ease, transform 0.12s ease;
  display:inline-block;
  object-fit:contain;
}
.authority-logos img:hover{opacity:1; transform:none}

/* Prefer monochrome for SVGs: force to white-ish when possible */
/* SVGs will display in their original colors (no forced monochrome) */

@media(max-width:768px){
  .authority-strip{padding:18px 0}
  .authority-logos{gap:20px;max-width:520px;flex-wrap:wrap}
  .authority-logos img{height:32px;max-height:36px}
}

@media(max-width:420px){
  .authority-strip{padding:14px 0}
  .authority-logos{gap:16px;max-width:360px}
  .authority-logos img{height:28px}
}

/* Mobile-specific improvements */
@media(max-width:640px){
  /* Reduce hero height on small screens to avoid large empty areas */
  .min-h-screen{min-height:unset}
  .text-5xl{font-size:2rem}
  .mb-12{margin-bottom:2rem}
  .container{padding-left:0.75rem;padding-right:0.75rem}
}

/* Hero background using CSS to avoid absolute overflow */
.hero{background: radial-gradient(ellipse at top, rgba(59,130,246,0.12), rgba(10,10,10,1)); background-size:cover; background-position:center}

/* Accessible focus styles */
:focus{outline:2px solid rgba(59,130,246,0.6);outline-offset:2px}

/* When a case card is expanded via JS, reveal the hidden details */
.case-expanded .case-details{display:block !important}

/* Improve touch targets */
.button{padding:0.9rem 1.25rem}


/* Responsive tweaks */
@media(min-width:768px){
  .text-5xl{font-size:3.5rem}
  .text-4xl{font-size:2.5rem}
}

/* Utilities for form elements */
.input, textarea, select{width:100%;padding:0.75rem;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,0.02);color:var(--foreground)}

/* small helpers used by the page */
.grid-cols-1{grid-template-columns:repeat(1,1fr)}

/* footer */
footer{border-top:1px solid var(--border);padding-top:3rem;padding-bottom:3rem;background:var(--footer-bg)}

/* animations */
.animate-bounce{animation: bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* small screen spacing fix */
@media(max-width:640px){.flex.sm\:flex-row{flex-direction:column}.sm\:flex-row{flex-direction:column}}

/* comments: main structural classes mirror the React/Tailwind intent */

/* End of styles.css */

/* Additional utilities copied from the original project's Tailwind utilities */
.gradient-text{background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--secondary)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hover-glow{transition:var(--transition-smooth)}
.hover-glow:hover{box-shadow:var(--glow-primary)}
.fade-in{animation:fadeIn 0.6s ease-out forwards;opacity:0;transform:translateY(20px)}

@keyframes fadeIn{to{opacity:1;transform:none}}