/* filename: styles.css */

/* ========== Base / Theme ========== */
:root{
  /* Palette from your logo: warm orange + charcoal neutrals */
  --brand: #E45700;
  --brand-600: #C94C00;
  --brand-700: #A53F00;
  --bg: #755d52;        /* charcoal night */
  --panel: #201E1C;     /* deep panel */
  --ink: #F6F3F1;       /* near-white text */
  --muted: #CFC7C3;     /* muted text */
  --ring: rgba(228, 87, 0, .55);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --maxw: 1100px;
}

* { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body{
  margin:0;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(228,87,0,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(60,50,45,.28), transparent 60%),
    var(--bg);
  font: 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

/* Utilities */
.container{ width:min(var(--maxw), 92vw); margin:0 auto; }
.section{ padding: clamp(48px, 7vw, 80px) 0; }
h1,h2,h3{ line-height:1.2; margin:.2em 0 .4em; }
p{ margin:.4em 0 1em; color: var(--muted); }
a{ color: inherit; text-decoration: none; }

/* Focus styles */
:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left: 12px; top: 12px; background: var(--panel); padding:.6rem .8rem; border-radius:10px; z-index:1000;
}

/* Header / Nav */
.site-header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: rgba(32,30,28,.7); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; }
.logo-img{ width:28px; height:28px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.brand-name{ font-weight:700; }

.menu{ display:flex; align-items:center; gap: 1rem; }
.menu a{ opacity:.92; }

/* Buttons */
.btn, .btn:link, .btn:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#0D0B09; font-weight:700; padding:.8rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow); border:0;
}
.btn:hover{ background: linear-gradient(135deg, var(--brand-600), var(--brand)); transform: translateY(-1px); }
.btn:active{ background: var(--brand-700); color:#0D0B09; transform: translateY(0); }
.btn:focus-visible{ outline-color: #fff; }
.btn--ghost{ background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--ink); box-shadow:none; }
.link{ display:inline-flex; align-items:center; height:40px; padding:0 .5rem; text-decoration: underline; text-underline-offset: 4px; }

/* Mobile nav */
.hamburger{ display:none; width:42px; height:42px; background:transparent; border:0; position:relative; border-radius:12px; }
.hamburger-bar,.hamburger-bar::before,.hamburger-bar::after{
  content:""; position:absolute; left: 10px; right:10px; height:2px; background: var(--ink); transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger-bar{ top:20px; }
.hamburger-bar::before{ top:-8px; }
.hamburger-bar::after{ top:8px; }

/* Hero */
.hero{ padding: clamp(40px, 8vw, 96px) 0 24px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items:center; }
.eyebrow{ color: var(--brand); text-transform: uppercase; letter-spacing:.12em; font-size:.85rem; }
.sub{ font-size: 1.1rem; }
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin: 18px 0; }
.cta-micro{ font-size:.95rem; color:#E7E1DD; }
.checks{ display:grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap:.4rem .8rem; padding:0; margin: 12px 0 0; list-style:none; color:#E7E1DD; }

.hero-media{
  position:relative; border-radius: 22px; overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.hero-media img{ display:block; width:100%; height:auto; transform: scale(1.01); transition: transform .8s ease; }
.hero-media:hover img{ transform: scale(1.03); }

/* Features */
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px; min-height: 140px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card h3{ margin:.2em 0 .3em; }

/* Specs */
.specs-wrap{ background: linear-gradient(160deg, rgba(228,87,0,.10), rgba(60,50,45,.06));
  border:1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
}
.specs{ width:100%; border-collapse: collapse; }
.specs th, .specs td{ text-align:left; padding:.7rem .6rem; }
.specs th{ width: 42%; font-weight:600; color: var(--ink); }
.specs tr{ border-bottom: 1px dashed rgba(255,255,255,.14); }
.specs tr:last-child{ border-bottom: 0; }
.specs-note{ color: var(--muted); font-size:.9rem; margin:.6rem 0 0; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.g-item{ border-radius: 16px; overflow: hidden; border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }
.g-item img{ display:block; width:100%; height:auto; }

/* Testimonials */
.t-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
.t-card{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.t-head{ display:flex; align-items:center; gap:.8rem; margin-bottom: .4rem; }
.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; background: var(--brand); color:#0D0B09; }
.muted{ color: var(--muted); font-size:.9rem; }
.stars{ letter-spacing: 2px; font-weight: 700; color: var(--brand); }

/* FAQ */
.faq details{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius: 14px; padding: .8rem 1rem; margin:.6rem 0; }
.faq summary{ cursor:pointer; font-weight:600; list-style: none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:after{ content:"+"; float:right; transform: translateY(-2px); }
.faq details[open] summary:after{ content:"–"; }
.faq-a{ color: var(--muted); margin-top:.4rem; }

/* CTA (form) */
.cta{ display:grid; place-items:center; }
.cta-card{ width:min(720px, 100%); background: linear-gradient(160deg, rgba(228,87,0,.12), rgba(60,50,45,.10));
  border:1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.form{ margin-top: 8px; }
.label{ display:block; margin-bottom: .3rem; color:#F0EAE6; }
.input-row{ display:flex; gap:.6rem; }
input[type="email"]{
  width:100%; padding:.8rem .9rem; border-radius: 14px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: var(--ink);
}
input::placeholder{ color:#E5DDD8; }
.form-note{ color: var(--muted); font-size:.9rem; margin:.4rem 0 0; }
.form-msg{ margin:.4rem 0 0; font-weight:600; }

/* Closing CTA */
.closing-cta{ text-align:center; }
.closing-cta .btn{ margin-top:.3rem; }

/* Footer */
.site-footer{ padding: 28px 0 56px; color: var(--muted); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* Sticky CTA (mobile) */
.sticky-cta{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 14px; width: min(640px, 94vw); display:flex; align-items:center; justify-content: space-between;
  gap:.6rem; background: rgba(32,30,28,.95); border:1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .5rem .6rem; box-shadow: var(--shadow); z-index: 70;
}
.sticky-cta__note{ font-size:.9rem; color: var(--muted); margin-right:.6rem; }
.sticky-cta[hidden]{ display:none; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid, .about{ grid-template-columns: 1fr; }
  .checks{ grid-template-columns: repeat(2, minmax(140px,1fr)); }
}
@media (max-width: 900px){
  .sticky-cta{ display:flex; }
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .t-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .input-row{ flex-direction: column; align-items: stretch; }
  .hamburger{ display:grid; place-items:center; }
  .menu{ position:absolute; top:64px; right:4vw; background: rgba(32,30,28,.98); border:1px solid rgba(255,255,255,.08);
         border-radius:14px; padding:10px; width:min(260px, 90vw); display:none; flex-direction:column; }
  .menu.open{ display:flex; }
}
@media (max-width: 540px){
  .grid{ grid-template-columns: 1fr; }
  .t-grid, .gallery-grid{ grid-template-columns: 1fr; }
}
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }