/* ===== RenovAIte Leads — style.css (v4.1.5) ===== */
:root{ --gold:#F7E7CE; --black:#0A0A0A; --navy:#001F3F; --muted:#a3acb7; --ring: rgba(247,231,206,0.35); --red:#E53935; --text:#EDEDED; --text-dim:#cfd5dd; --card: rgba(255,255,255,0.03); --card-border: rgba(247,231,206,0.14); }
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{ margin:0; display:flex; min-height:100vh; flex-direction:column; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background: var(--black); line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
/* Seamless ambient background */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(1200px 600px at 12% 0%, rgba(0,31,63,.32), transparent 60%),
  radial-gradient(1000px 500px at 88% 6%, rgba(247,231,206,.07), transparent 70%); }
main{ flex:1 }
h1,h2,h3{ font-family:Poppins,Inter,system-ui,Arial,sans-serif; margin:0 0 .5rem 0; line-height:1.2; letter-spacing:-0.01em; }
h1{font-size:clamp(2.25rem, 4vw + 1rem, 3.75rem)} h2{font-size:clamp(1.75rem, 2.5vw + .5rem, 2.35rem)} h3{font-size:1.15rem}
p{margin:.5rem 0 1rem 0; color:var(--text); opacity:.95} .container{ width:min(1100px, 92%); margin:0 auto; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(10,10,10,0.6)); backdrop-filter:saturate(130%) blur(6px); border-bottom:1px solid rgba(247,231,206,0.08); }
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--gold)}
 /* proportional */
.main-nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.main-nav a{color:var(--text); text-decoration:none; font-weight:600; opacity:.92} .main-nav a:hover{opacity:1}
.main-nav a:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:6px }

/* Hero */
.hero{ position:relative; padding: clamp(3.5rem, 6vw, 5rem) 0 3.5rem; background: transparent; overflow:hidden; }
.hero .container{ text-align:center; }
.hero .subhead{ max-width:62ch; color:var(--text-dim); margin-inline:auto }
.waitlist-inline{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1rem; justify-content:center; }
.waitlist-inline input{ flex:1 1 280px; }

/* Sections */
.section{padding:clamp(3rem, 6vw, 5rem) 0} .section.alt{background: transparent}
.section h2{ text-align:center; } .section .subhead{ text-align:center; margin-inline:auto; }

/* Problem bullets centered under header */
#problem .container { text-align: center; }
#problem .pain-list{ list-style:disc; padding:0 0 0 1.25rem; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; max-width:720px; margin:0 auto }
#problem .pain-list li{ display:list-item; text-align:left; margin-left:0 }
#problem .pain-list .icon{ display:none }

/* Steps */
.steps{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.step{border:1px solid var(--card-border); border-radius:14px; padding:1rem; background:var(--card)}
.step-num{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--gold); font-weight:700; margin-bottom:.5rem}

/* Cards */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.card{border:1px solid var(--card-border); border-radius:14px; padding:1rem; background:var(--card)} .card p{opacity:.9}
@media (min-width: 1024px){ .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px){ .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px){ .cards{ grid-template-columns: 1fr; } }
.card{ height:100% }

/* Demo */
#demo .muted{ text-align:center } .video-wrap{border:1px solid var(--card-border); border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.40); margin-inline:auto }

/* Forms + buttons */
input{ width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(247,231,206,0.22); background:#0f0f10; color:var(--text); }
input::placeholder{ color:#7d8590 }
input:focus{outline:2px solid var(--ring); border-color:var(--ring)}
.btn{ display:inline-block; background:var(--gold); color:var(--black); padding:.9rem 1.1rem; border-radius:12px; font-weight:800; text-decoration:none; border:0; cursor:pointer; transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; }
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }
.btn:hover{filter:saturate(110%) brightness(1.02)} .btn:active{transform: translateY(1px)}
.btn--red{ background: var(--red); color: #fff; }
.btn--ghost{ background:transparent; color:#fff; border:0; padding:.2rem .2rem; text-decoration: underline; text-underline-offset:3px; border-radius:0; }
.btn--ghost:hover{ background: transparent; text-decoration-thickness:2px; opacity:.95; }
.btn--ghost:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }

/* Footer + socials */
.muted{color:var(--muted)} .site-footer{border-top:0; padding:1.2rem 0; color:var(--muted)}
.site-footer .container{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.site-footer p{ margin:0; order:1 } .icon-nav{display:flex; align-items:center; gap:.6rem; order:2; margin-left:auto}
.icon-link{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center}
.icon-link svg{width:20px; height:20px; fill:var(--gold); opacity:.85; transition:.15s transform, .2s opacity}
.icon-link:hover svg{opacity:1; transform:translateY(-1px)}
.site-footer .icon-link{ position:relative; width:38px; height:38px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.site-footer .icon-link::after{ content:""; position:absolute; top:6px; left:8px; width:12px; height:12px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%); pointer-events:none; }
.site-footer .icon-link svg{ width:18px; height:18px; fill:var(--gold); opacity:.95; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
.site-footer .icon-link:hover{ transform: translateY(-2px); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); border-color: rgba(255,255,255,0.28); box-shadow: inset 0 1px 1px rgba(255,255,255,0.26), 0 10px 26px rgba(0,0,0,0.45), 0 0 0 6px rgba(207,181,59,0.10); }

/* Status + a11y */
.form-status{ margin-top:.5rem; min-height:1.25rem } .sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease} .reveal.active{opacity:1; transform:none}


/* ===== v4.1.6: Larger, responsive logo ===== */

.header-inner{ padding: 0.9rem 0; }
@media (min-width: 1440px){
  
}


/* ===== v4.1.7: Dialed-in smaller logo ===== */

.header-inner{ padding: 0.8rem 0; }
@media (min-width: 1440px){
  
}


/* ===== v4.1.8: Smaller header logo ===== */

.header-inner{ padding: 0.65rem 0; }


/* v4.1.9: single compact logo rule */
.brand img{
  max-height: 44px;   /* set exact desktop size; adjust if needed */
  height: auto;
  width: auto;
  display: block;
}

/* Feature list (software section) */
.feature-list{ list-style:none; padding:0; margin:1rem auto 0; max-width: 720px; }
.feature-list li{ position:relative; padding-left:1.5rem; margin:.5rem 0; color:var(--text-dim); }
.feature-list li::before{ content:"\2713"; position:absolute; left:0; top:.15rem; color:var(--gold); font-weight:700 }

/* FAQ readability */
.faq h3{ font-size:1.05rem; margin-top:1rem; margin-bottom:.25rem }
.faq p{ color:var(--text-dim); margin:0 0 .6rem 0 }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ transition: none !important }
}

/* FAQ accordion */
.faq{ max-width: 820px; margin: 0 auto; display: grid; gap: .75rem }
.faq-item{ border:1px solid var(--card-border); border-radius:12px; background:var(--card); transition: background .2s ease, box-shadow .2s ease, border-color .2s ease }
.faq-item[open]{ background: rgba(255,255,255,0.04); box-shadow: 0 6px 18px rgba(0,0,0,0.25) }
.faq-item summary{ list-style:none; cursor:pointer; padding:1rem 2.5rem 1rem 1rem; position:relative; font-weight:700; color:var(--text) }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:'+'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--gold); font-weight:800 }
.faq-item[open] summary::after{ content:'-' }
.faq-item summary:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:10px }
.faq-answer{ padding: 0 1rem 1rem 1rem; color:var(--text-dim); border-top:1px solid var(--card-border) }
.faq-answer p{ margin:.75rem 0 0 0 }



/* Skip link */
.skip-link{ position:absolute; left:8px; top:8px; background: #111; color:#fff; padding:.6rem .8rem; border-radius:10px; text-decoration:none; transform: translateY(-200%); transition: transform .2s ease, opacity .2s ease; opacity:0; z-index:100 }
.skip-link:focus{ transform: translateY(0); opacity:1; outline:2px solid var(--ring); outline-offset:2px }


/* ===== Theme toggle (bottom-right) ===== */
.theme-toggle{ position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 2147483647; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 8px 20px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; line-height: 1; padding: 0 }
.theme-toggle:hover{ transform: translateY(-2px) }
.theme-toggle:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }
.theme-toggle svg{ width:20px; height:20px; fill: var(--gold); filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
.theme-toggle .icon-sun{ display:none }
.theme-toggle .icon-moon{ display:block }
.theme-light .theme-toggle{ background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)); border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.5) }
.theme-light .theme-toggle .icon-sun{ display:block }
.theme-light .theme-toggle .icon-moon{ display:none }

/* Fallback if backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .theme-toggle{ background: rgba(0,0,0,0.55) }
  .theme-light .theme-toggle{ background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08) }
}

/* Lift above common chat widgets on small screens */
@media (max-width: 640px){  .theme-toggle{ bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) } }

@media (prefers-reduced-motion: reduce){
  .theme-toggle{ transition: none }
}

/* ===== Light theme (variable overrides + targeted fixes) ===== */
/* Default (dark) uses :root from top of file. Light overrides when html has .theme-light */
html{ color-scheme: dark }
.theme-light{ color-scheme: light }
.theme-light{
  --black: #f9fafb;            /* page background */
  --text: #0f172a;             /* primary text */
  --text-dim: #475569;         /* secondary text */
  --card: #ffffff;             /* surface card */
  --card-border: #e5e7eb;      /* surface border */
  --muted: #6b7280;            /* footer text */
  --navy: #1f2937;             /* step number chip */
  --ring: rgba(33, 122, 244, 0.35); /* focus ring */
}

/* Body background + ambient in light */
.theme-light body{ color: var(--text); background: var(--black); }
.theme-light body::before{
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(15,23,42,.06), transparent 60%),
    radial-gradient(1000px 500px at 88% 6%, rgba(207,181,59,.08), transparent 70%);
}

/* Header in light */
.theme-light .site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  border-bottom:1px solid rgba(0,0,0,0.08);
  backdrop-filter:saturate(130%) blur(6px);
}

/* Inputs in light */
.theme-light input{
  background:#fff;
  color:#111;
  border-color:#e5e7eb;
}
.theme-light input::placeholder{ color:#9ca3af }

/* Ghost button on light */
.theme-light .btn--ghost{ color:#111 }
.theme-light .btn--ghost:focus-visible{ outline-color: rgba(0,0,0,.65) }

/* FAQ open state, lighter shadow */
.theme-light .faq-item[open]{ background:#fff; box-shadow: 0 6px 18px rgba(0,0,0,0.08) }
.theme-light .faq-answer{ color: var(--text-dim) }

/* Video wrapper shadow subtle in light */
.theme-light .video-wrap{ box-shadow: 0 6px 16px rgba(0,0,0,0.10) }

/* Skip link in light */
.theme-light .skip-link{ background:#f3f4f6; color:#111 }

/* Feature checkmarks in Software section become navy in light mode */
.theme-light #software .feature-list li::before{ color: var(--navy); }