/* FreshRoof.pro shared skin (site-wide) */

:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#d7dee6;
  --primary:#0d7a73;
  --accent:#f4b41a;
  --dark:#0b1724;
  --max:1100px;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
html{scroll-padding-top:72px;} /* tighter header */

/* ===== Header / nav (clean + compact) ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--dark);
  color:#e5e7eb;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:0.45rem 1rem;     /* smaller */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.9rem;
}
.brand{display:flex;align-items:center;gap:0.55rem;min-width:220px}
.mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#0ea5a0,#064e3b);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  font-size:0.9rem;
}
.brand strong{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.80rem;
}
.brand span{
  display:block;
  font-size:.76rem;
  color:#b6c2d0;
  margin-top:1px;
}

/* Nav links */
nav{display:flex;gap:1rem;align-items:center;font-size:.86rem}
nav a{
  color:#cbd5e1;
  opacity:.92;
  padding:.15rem 0;
  border-bottom:2px solid transparent;
}
nav a:hover{opacity:1;border-color:var(--accent)}

/* Right area */
.right{display:flex;align-items:center;gap:.75rem}
.phone{font-size:.86rem;color:#cbd5e1;white-space:nowrap}
.phone b{color:var(--accent)}

/* Buttons */
.btn{
  border-radius:999px;
  padding:.45rem .9rem;     /* smaller */
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#e5e7eb;
  cursor:pointer;
  font-size:.84rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn-primary{
  border:none;
  background:var(--accent);
  color:#111827;
}
.btn-primary:hover{background:#ffd15b}

/* Mobile menu */
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer}
.burger span{width:18px;height:2px;background:#e5e7eb;border-radius:999px}

@media (max-width: 900px){
  html{scroll-padding-top:64px;}
  nav,.right{display:none}
  .burger{display:flex}

  .nav.open nav,
  .nav.open .right{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
  }

  .nav{flex-wrap:wrap}
  nav{
    padding-top:.5rem;
    border-top:1px solid rgba(255,255,255,.10);
    gap:.7rem;
  }
  nav a{
    font-size:.92rem;
    padding:.25rem 0;
  }

  .right{
    padding-top:.45rem;
    width:100%;
    justify-content:space-between;
  }

  .btn{
    padding:.5rem .95rem;
    font-size:.88rem;
  }
}

/* ===== Page container ===== */
main{
  max-width:var(--max);
  margin:0 auto;
  padding:1.1rem 1rem 2rem;
}

/* ===== Cards / panels ===== */
.card,.wrap,.stripe,.panel,.form-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.15rem;
}

/* ===== Typography ===== */
h1{font-size:1.55rem;line-height:1.15;margin-bottom:.35rem}
h2{font-size:1.2rem;margin-bottom:.25rem}
p{color:var(--muted);font-size:.95rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* ===== Footer ===== */
footer{
  border-top:1px solid rgba(2,6,23,.12);
  padding:1rem 0;
  color:#64748b;
  font-size:.82rem;
}
.foot{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1rem 1.2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.8rem;
  align-items:center;
}
.foot a{text-decoration:underline;text-decoration-thickness:1px}

/* ===== Badge strip ===== */
.badge-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.75rem;
  margin-top:.85rem;
}
@media (max-width: 980px){
  .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 620px){
  .badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.badge{
  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.40rem;
  align-items:center;
  text-align:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.badge img{
  max-width:150px;
  max-height:56px;
  object-fit:contain;
}
.badge div{
  font-weight:900;
  font-size:.85rem;
  color:var(--text);
}

/* ===== Clean form ===== */
.form-title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:.35rem;
}
.form-title .mini{font-size:.85rem;color:var(--muted)}
.form-sub{margin:.25rem 0 .9rem;color:var(--muted);font-size:.95rem;max-width:60ch}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 1rem;
  margin-top:.5rem;
}
@media (max-width: 860px){
  .form-grid{grid-template-columns:1fr}
}
.field label{
  display:block;
  font-weight:900;
  font-size:.82rem;
  margin-bottom:.25rem;
  color:var(--text);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:.65rem .75rem;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:.95rem;
  background:#fff;
  outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(13,122,115,.15);
}
.hint{margin-top:.25rem;color:var(--muted);font-size:.78rem}

.checks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem .9rem;
  margin-top:.35rem;
}
@media (max-width: 860px){
  .checks{grid-template-columns:1fr}
}
.checks label{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  font-weight:700;
  color:#334155;
  font-size:.92rem;
}
.checks input{width:auto;margin-top:.2rem}

.alert{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#7f1d1d;
  padding:.85rem .9rem;
  border-radius:12px;
  font-size:.93rem;
}
.consent{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  color:#334155;
  font-size:.9rem;
}
.consent input{width:auto;margin-top:.2rem}
.actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
  margin-top:.2rem;
}
.btn-main{
  border-radius:999px;
  padding:.75rem 1.25rem;
  font-weight:900;
  border:none;
  background:var(--accent);
  color:#111827;
  cursor:pointer;
  font-size:1rem;
}
.btn-main:hover{background:#ffd15b}
.btn-main:disabled{opacity:.55;cursor:not-allowed}
.subnote{color:var(--muted);font-size:.82rem;margin-top:.35rem}