/* CoatQuote — design system. Dark, amber/concrete "industrial coating" palette. */
:root{
  --bg:#14100c; --bg2:#1c1611; --panel:#211a13; --panel2:#291f15;
  --border:#3a2e1f; --text:#f5efe6; --muted:#a99a86;
  --brand:#f5a623; --brand-dark:#c9820f; --brand-ink:#1a1206;
  --crit:#f0506e; --warn:#f5b94a; --info:#5aa9e6; --ok:#3ecf8e;
  --radius:12px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #241b10 0%, var(--bg) 60%);
  color:var(--text); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em}
p{margin:0 0 1em; color:var(--text)}
.muted{color:var(--muted)}
code{background:var(--panel2); padding:.15em .4em; border-radius:6px; font-size:.9em}

/* header */
.site-head{border-bottom:1px solid var(--border); background:rgba(20,16,12,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:8px; font-size:19px; font-weight:600; color:var(--text)}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--brand); font-size:20px}
.brand b{color:var(--brand)}
.nav{display:flex; align-items:center; gap:22px; font-size:14px}
.nav a{color:var(--text)}
.nav a:hover{color:var(--brand)}
.nav-cta{background:var(--brand); color:var(--brand-ink)!important; padding:9px 16px; border-radius:8px; font-weight:600}
.nav-cta:hover{background:#ffb84d; text-decoration:none!important}

/* footer */
.site-foot{border-top:1px solid var(--border); margin-top:80px; padding:48px 0 24px; color:var(--muted); font-size:14px}
.site-foot .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; margin-bottom:32px}
.site-foot h4{color:var(--text); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px}
.site-foot .cols div a{display:block; color:var(--muted); margin-bottom:8px}
.site-foot .cols div a:hover{color:var(--brand)}
.site-foot .bot{border-top:1px solid var(--border); padding-top:20px; font-size:13px}

/* hero */
.hero{padding:90px 0 60px; text-align:center}
.hero h1{font-size:44px; max-width:760px; margin:0 auto .3em}
.hero .lede{font-size:18px; color:var(--muted); max-width:600px; margin:0 auto 30px}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--border); color:var(--muted); font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:24px}
.pill b{color:var(--brand)}

/* buttons */
.btn{display:inline-block; padding:12px 22px; border-radius:8px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--brand); color:var(--brand-ink)}
.btn-primary:hover{background:#ffb84d; text-decoration:none}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.btn-sm{padding:8px 14px; font-size:13px}
.btn-danger{background:transparent; border-color:var(--crit); color:var(--crit)}
.btn-block{display:block; width:100%; text-align:center}

/* sections / grid */
section{padding:50px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:820px){.grid-3,.grid-2,.site-foot .cols{grid-template-columns:1fr}}

.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px}
.card h3{font-size:17px}
.check-icon{width:38px; height:38px; border-radius:9px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--brand); font-size:18px; margin-bottom:14px}

/* pricing */
.price-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:30px; text-align:center; position:relative}
.price-card.featured{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow)}
.price-card .badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brand); color:var(--brand-ink); font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px}
.price-card .amount{font-size:40px; font-weight:700; margin:10px 0}
.price-card .amount span{font-size:15px; color:var(--muted); font-weight:400}
.price-card ul{list-style:none; padding:0; margin:20px 0; text-align:left; color:var(--muted); font-size:14px}
.price-card li{padding:6px 0; border-bottom:1px solid var(--border)}
.price-card li:before{content:"✓ "; color:var(--brand)}

/* forms */
.form-card{max-width:420px; margin:60px auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:34px}
.form-card.wide{max-width:640px}
.form-card h1{font-size:24px; text-align:center}
.form-card .sub{text-align:center; color:var(--muted); font-size:14px; margin-bottom:26px}
label{display:block; font-size:13px; color:var(--muted); margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=tel],input[type=date],select,textarea{
  width:100%; background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; border-radius:8px; font-size:15px; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand)}
select{-webkit-appearance:none; appearance:none}
select option{background-color:var(--bg2); color:var(--text)}
.hp-field{position:absolute; left:-9999px}
.alert{padding:12px 14px; border-radius:8px; font-size:14px; margin-bottom:16px}
.alert-error{background:rgba(240,80,110,.12); border:1px solid rgba(240,80,110,.4); color:#ff8ba0}
.alert-ok{background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.4); color:var(--ok)}
.form-foot{text-align:center; margin-top:18px; font-size:14px; color:var(--muted)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

/* dashboard */
.dash-shell{display:flex; min-height:calc(100vh - 65px)}
.dash-side{width:220px; border-right:1px solid var(--border); padding:28px 16px; flex-shrink:0}
.dash-side a{display:block; padding:9px 12px; border-radius:8px; color:var(--muted); font-size:14px; margin-bottom:2px}
.dash-side a:hover,.dash-side a.active{background:var(--panel2); color:var(--text); text-decoration:none}
.dash-main{flex:1; padding:32px; max-width:1000px}
.dash-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px}
.plan-tag{font-size:12px; background:var(--panel2); border:1px solid var(--border); padding:3px 10px; border-radius:999px; color:var(--muted)}

.row-card{display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 20px; margin-bottom:12px; gap:16px; flex-wrap:wrap}
.row-card a.row-title{color:var(--text); font-weight:600}

.badge{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:5px}
.badge-critical{background:rgba(240,80,110,.15); color:var(--crit)}
.badge-warning{background:rgba(245,185,74,.15); color:var(--warn)}
.badge-info{background:rgba(90,169,230,.15); color:var(--info)}
.badge-ok{background:rgba(62,207,142,.15); color:var(--ok)}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em}
tr:last-child td{border-bottom:none}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px}
.stat-box{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px}
.stat-box .num{font-size:26px; font-weight:700}
.stat-box .lbl{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
@media (max-width:820px){.stat-grid{grid-template-columns:repeat(2,1fr)}.dash-shell{flex-direction:column}.dash-side{width:100%; border-right:none; border-bottom:1px solid var(--border)}}

/* blog */
.post-list{max-width:760px; margin:0 auto}
.post-card{padding:26px 0; border-bottom:1px solid var(--border)}
.post-card:first-child{padding-top:0}
.post-card h2{font-size:22px}
.post-card h2 a{color:var(--text)}
.post-card h2 a:hover{color:var(--brand)}
.post-date{font-size:13px; color:var(--muted); margin-bottom:8px}
.article{max-width:700px; margin:0 auto; padding:50px 0}
.article .post-date{margin-bottom:6px}
.article h1{font-size:36px; margin-bottom:8px}
.article h2{font-size:24px; margin-top:38px}
.article h3{font-size:19px; margin-top:28px}
.article p, .article li{color:var(--text); font-size:16px; line-height:1.75}
.article ul, .article ol{padding-left:22px; margin-bottom:1em}
.article li{margin-bottom:.4em}
.article a{text-decoration:underline}
.article blockquote{border-left:3px solid var(--brand); margin:24px 0; padding:4px 20px; color:var(--muted)}
.article .cta{margin-top:44px; padding:28px; text-align:center}
.back-link{display:inline-block; margin-bottom:20px; font-size:14px}

/* quote builder */
.item-block{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:14px}
.item-block-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.component-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr auto; gap:8px; align-items:center; padding:6px 0; font-size:13px}
.component-row.header{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); padding-bottom:8px}
.component-row input,.component-row select{padding:7px 9px; font-size:13px}
@media (max-width:760px){.component-row{grid-template-columns:1fr 1fr}.component-row.header{display:none}}
.totals-box{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin-top:20px; max-width:340px; margin-left:auto}
.totals-box .line{display:flex; justify-content:space-between; padding:5px 0; font-size:14px}
.totals-box .line.total{border-top:1px solid var(--border); margin-top:8px; padding-top:12px; font-size:18px; font-weight:700}
.totals-box .line .muted{font-size:13px}

/* public quote page */
.pq-wrap{max-width:640px; margin:0 auto; padding:50px 24px}
.pq-head{text-align:center; margin-bottom:36px}
.pq-head .biz{font-size:22px; font-weight:700}
.pq-item{border-bottom:1px solid var(--border); padding:16px 0}
.pq-item:last-child{border-bottom:none}
.pq-item-title{font-weight:600; display:flex; justify-content:space-between}
.pq-comp{color:var(--muted); font-size:13px; display:flex; justify-content:space-between; padding:2px 0}
.pq-accept{text-align:center; margin-top:36px}
.pq-accepted-banner{background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.4); color:var(--ok); text-align:center; padding:16px; border-radius:10px; margin-bottom:24px; font-weight:600}