:root{
  --brand:#FFD60A;        /* yellow */
  --brand-dark:#E0BD09;
  --ink:#111;             /* black */
  --ink-invert:#fff;      /* white */
  --bg:#fff;
  --muted:#8b8b8b;
  --line:#e9e9e9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a, a:visited{color:var(--ink); text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:10;
  background:#000;color:var(--ink-invert);
  border-bottom:1px solid #0f0f0f;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.site-header .container{padding:14px 16px;gap:20px}
.site-header .logo{font-weight:800;font-size:20px;color:var(--ink-invert)}
.site-header nav{display:flex;gap:14px;flex-wrap:wrap}
.site-header nav a{color:var(--ink-invert);padding:8px 10px;border-radius:10px}
.site-header nav a:hover{background:rgba(255,214,10,.15);color:var(--brand)}
.site-header .btn{margin-left:12px}

/* FOOTER */
.site-footer{margin-top:48px;padding:24px 0;background:#000;color:var(--ink-invert);border-top:1px solid #0f0f0f}
.site-footer a{color:var(--brand)}
.site-footer .right a{margin-left:16px;opacity:.9}
.site-footer .right a:hover{opacity:1}

/* BUTTONS */
.btn{display:inline-block;background:var(--brand);color:#000;padding:10px 16px;border-radius:10px;border:2px solid var(--brand);font-weight:700}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn.outline:hover{background:rgba(255,214,10,.12)}
.btn.small{padding:6px 12px;font-size:14px;margin-top:6px;display:inline-block}

/* HERO */
.hero{padding:56px 0;background:linear-gradient(180deg,#111,#0a0a0a)}
.hero h1{font-size:40px;margin:0 0 10px;color:var(--ink-invert)}
.hero p{color:#e8e8e8}
.hero-ctas .btn{margin-right:10px}
.fine{color:#bfbfbf;font-size:12px;margin-top:8px}
.hero-img{max-width:100%;border-radius:12px;border:1px solid #1f1f1f}

/* SERVICES */
.services{padding:32px 0}
.card{background:#0f0f0f;color:#eaeaea;border:1px solid #1e1e1e;border-radius:12px;padding:18px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.card h3{color:#fff}
.panel{background:#0f0f0f;color:#eaeaea;border:1px solid #1e1e1e;border-radius:12px;padding:18px}

/* FEATURE BAND */
.feature-band{padding:40px 0;background:#0a0a0a;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e}
.feature-title{color:#fff;margin:0 0 18px;text-align:center}
.feature-card{background:#0f0f0f;color:#eaeaea;border:1px solid #1e1e1e;border-radius:12px;padding:16px;transition:transform .15s ease, box-shadow .15s ease}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.feature-card h3{color:#fff;margin:12px 0 8px}
.feature-card p{margin:0}
.feature-img{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid #1f1f1f}
.feature-cta{text-align:center;margin-top:22px}
@media (max-width:900px){.feature-img{height:200px}}

/* CHECKLIST */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding-left:26px;position:relative;margin:10px 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:900}

/* PAGE HERO */
.page-hero{padding:40px 0;background:#0f0f0f;color:#eaeaea;border-bottom:1px solid #1e1e1e}

/* FORM */
.contact-form .field{display:flex;flex-direction:column}
.contact-form .field input,.contact-form .field textarea{background:#0b0b0b;color:#eaeaea;border:1px solid #1f1f1f;border-radius:10px;padding:10px}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:#9a9a9a}
.contact-form .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact-form .grid-2 .full{grid-column:1 / -1}
@media (max-width:700px){.contact-form .grid-2{grid-template-columns:1fr}}
.actions{margin-top:10px}

/* BLOCKQUOTES */
blockquote{margin:0 0 12px;padding-left:12px;border-left:3px solid var(--brand);color:#ddd}

/* UTILITIES */
.right{text-align:right}
.gap{gap:16px}