/* ======= Design tokens ======= */
:root{
  /* TODO: replace with exact brand orange from your logo */
  --brand:#ff6a00;
  --ink:#111;
  --muted:#5b5b5b;
  --bg:#fff;
  --card:#f7f7f7;
  --ring:rgba(0,0,0,.08);
}

/* ======= Base ======= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
}

/* Utility */
.container{max-width:1100px;margin-inline:auto;padding:0 16px}
h1,h2{line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.6rem;margin-top:2rem}
p{margin:.5rem 0 1rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ring);
}
.brand{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none}
.top-actions{display:flex; align-items:center; gap:12px}
.top-link{font-weight:600}
.lang-toggle{
  border:1px solid var(--ring); background:#fff; color:var(--ink);
  padding:.4rem .6rem; border-radius:999px; cursor:pointer; font-weight:700;
}
.lang-toggle:focus{outline:2px solid var(--brand); outline-offset:2px}
.btn:focus-visible,
.cta-sticky:focus-visible,
.top-link:focus-visible,
.lang-toggle:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  text-decoration:none;
}

/* Hero */
.hero{position:relative; display:grid; min-height:56vh}
.hero picture, .hero picture img{width:100%; height:100%; object-fit:cover; display:block}
.hero-copy{
  position:absolute; inset:auto 0 0 0; padding:24px 16px; background:linear-gradient(180deg,rgba(0,0,0,0) 0, rgba(0,0,0,.55) 100%);
  color:#fff;
}
.tagline{font-size:1.1rem; opacity:.95}
.hero-cta{margin-top:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35em;
  font-weight:700; border-radius:10px; padding:.7rem 1rem; text-decoration:none; border:2px solid transparent; white-space:nowrap;
}
.btn-label{display:none}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{filter:brightness(.95); text-decoration:none}

/* Sections */
.features,.pricing,.gallery,.faqs,.contact{padding:24px 16px}
.features>.feature-list{display:grid; gap:.6rem; list-style:none; padding:0; max-width:1000px; margin:0 auto}
.pricing p{max-width:1000px; margin:0 auto 8px}

/* Gallery */
.gallery .grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,1fr);
}
.gallery figure{margin:0; background:var(--card); border-radius:12px; overflow:hidden; border:1px solid var(--ring)}
.gallery figure img{display:block; width:100%; height:100%; object-fit:cover}
@media (min-width:900px){
  .gallery .grid{grid-template-columns:repeat(3,1fr)}
}

/* FAQs */
.faqs details{background:#fff; border:1px solid var(--ring); border-radius:10px; padding:12px 14px; margin:10px auto; max-width:1000px}
.faqs summary{cursor:pointer; font-weight:700}
.faqs p{margin-top:.5rem}

/* Contact */
.contact p{max-width:1000px; margin:0 auto 8px}
.location{color:var(--muted)}

/* Footer */
.site-footer{padding:24px 16px; text-align:center; color:var(--muted); border-top:1px solid var(--ring)}

/* Sticky CTA */
.cta-sticky{
  position:fixed; left:50%; transform: translate(-50%, 150%);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35em;
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index:50;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:800;
  background:var(--brand); color:#fff; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
}
.cta-sticky:hover{text-decoration:none; filter:brightness(.95)}

body.cta-visible .cta-sticky{ transform: translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto }

@media (prefers-reduced-motion: reduce){
  .cta-sticky{ transition:none }
}
.cta-sticky:hover{text-decoration:none; filter:brightness(.95)}

/* NoScript */
.noscript{padding:10px; text-align:center; background:#fff7d6; border-bottom:1px solid var(--ring)}

/* Header logo sizing + mobile tweaks */
.site-header .brand img{width:36px;height:36px}
@media (max-width:480px){
  .site-header .brand img{width:28px;height:28px}
  .site-header{white-space:nowrap}
  .brand{flex:0 0 auto}
  .top-actions{gap:6px;flex-wrap:nowrap;min-width:0;justify-content:flex-end}
  .top-actions .top-link{font-size:.9rem;white-space:nowrap}
  .top-actions a[href^="mailto:"]{max-width:40vw;overflow:hidden;text-overflow:ellipsis;display:inline-block}
  .lang-toggle{white-space:nowrap}
}

/* Square wordmark image inside CTA buttons/links */
.sqmark{height:1em;width:auto;vertical-align:-0.15em;margin-left:.35em}
.btn .sqmark{height:1em}
.cta-sticky .sqmark{height:1em}

/* Extra-narrow safety adjustments */
@media (max-width:360px){
  .site-header{padding:8px 12px}
  .top-actions{gap:4px}
  .top-actions .top-link{font-size:.85rem}
  .lang-toggle{padding:.3rem .5rem}
}
/* Reserve space so sticky CTA doesn’t overlap footer copy */
:root{ --cta-bottom-safe: calc(64px + env(safe-area-inset-bottom)); }
.site-footer{ padding-bottom: calc(24px + var(--cta-bottom-safe)); }