/* ReChoir WWW — minimal, fast, accessible styles (light theme aligned with frontend2) */
:root{
  /* Light base */
  --bg:#f7f8fb; /* page background */
  --panel:#ffffff; /* surfaces/cards */
  --text:#0b1322; /* primary text */
  --muted:#5a647b; /* secondary text */
  --border:#e6eaf3; /* subtle borders/dividers */
  --shadow:0 6px 20px rgba(13, 16, 35, .06);
  --shadow-sm:0 2px 10px rgba(13, 16, 35, .05);

  /* Brand accents kept from app */
  --primary:#10b981; /* teal (closer to frontend2 success/primary) */
  --primary-10:#e6f7f1;
  --accent:#8b5cf6; /* purple accent */
  --danger:#ef4444;

  --container:1200px;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

/* Links & focus */
a{color:#0f766e;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header: solid light, subtle border */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.header-grid{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.brand{display:flex;align-items:center;gap:12px;margin-left:-4px}
.logo{height:36px;width:auto;margin-top:-2px}
.nav{display:flex;gap:20px}
.nav a{color:#0b1322;opacity:.86}
.nav a:hover{opacity:1}

/* Hero: light with subtle gradient blob */
.hero{padding:64px 0 32px;border-bottom:1px solid var(--border);background:
  radial-gradient(900px 480px at 85% -10%, rgba(139,92,246,.08), transparent 60%),
  radial-gradient(900px 480px at 10% -20%, rgba(16,185,129,.10), transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:42px;line-height:1.1;margin:.2em 0 .4em}
.lead{font-size:18px;color:var(--muted);max-width:58ch}
.cta-row{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;font-weight:600;border:1px solid transparent;transition:.15s ease}
.btn-primary{background:var(--primary);color:#ffffff;border-color:transparent}
.btn-primary:hover{filter:brightness(0.95)}
.btn-secondary{background:#ffffff;color:#0b1322;border-color:var(--border)}
.btn-secondary:hover{box-shadow:var(--shadow-sm)}
.btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.hero-art{filter:drop-shadow(0 10px 24px rgba(13,16,35,.08))}

/* Features */
.features{padding:56px 0}
.features h2,.how h2,.contact h2{font-size:28px;margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;min-height:180px;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(13,16,35,.08)}
.card h3{margin:12px 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.card img{width:36px;height:36px}

/* How */
.how{padding:64px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#ffffff}
.how h2{text-align:center;margin-bottom:48px}
.how-steps{display:flex;flex-direction:column;gap:80px}
.how-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.how-step.reverse{direction:rtl}
.how-step.reverse .how-text{direction:ltr}
.how-step.reverse .how-img{direction:ltr}
.how-text{display:flex;flex-direction:column;gap:12px}
.step-number{font-size:48px;font-weight:800;color:rgba(16,185,129,.15);line-height:1;margin-bottom:-10px}
.how-text h3{font-size:24px;margin:0}
.how-text p{font-size:16px;color:var(--muted);line-height:1.6;margin:0}
.how-img{position:relative}
.screenshot{border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.1);border:1px solid var(--border);width:100%;height:auto;display:block}

/* Contact */
.contact{padding:40px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.field{margin:12px 0}
.field label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.field input::placeholder,.field textarea::placeholder{color:#9aa3b2}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:#c7cfe0}
/* Consent checkbox styling */
.field.checkbox{display:flex;align-items:flex-start;gap:12px;margin-top:16px}
.field.checkbox input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;width:18px;height:18px;min-width:18px;min-height:18px;margin:2px 0 0 0;accent-color:var(--primary);cursor:pointer}
.field.checkbox label{margin:0;line-height:1.45;color:var(--text);cursor:pointer}
.field.checkbox input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.form-status{font-size:14px;color:var(--muted)}
.form-status.ok{color:#0f766e}
.form-status.error{color:var(--danger)}
.hint{color:var(--muted);font-size:13px;margin-top:10px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);background:#ffffff}
.footer-grid{display:flex;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:16px}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .how-grid,.contact-grid{grid-template-columns:1fr}
  .how-step,.how-step.reverse{grid-template-columns:1fr;gap:24px;direction:ltr}
  .how-step.reverse .how-text,.how-step.reverse .how-img{direction:ltr}
  .how-steps{gap:48px}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}