:root{
  --bg:#0b0d10;/* near-black */
  --text:#e7ecf2;
  --muted:#a8b0bb;
  --accent:#7dd3fc;/* sky-300 */
  --accent-strong:#38bdf8;/* sky-400 */
  --card:#151922;
  --border:#242a35;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --text:#0b1220;
    --muted:#4b5563;
    --accent:#0ea5e9;
    --accent-strong:#0284c7;
    --card:#f8fafc;
    --border:#e5e7eb;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; 
  background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}

/* Layout */
.container{width:min(1120px,92%); margin-inline:auto}
.container.narrow{width:min(800px,92%)}

h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem,4vw,3rem); font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:700}
h3{font-size:1.125rem; font-weight:700}
.portrait{width:min(360px,42vw); border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.portrait--bw{filter:grayscale(1) contrast(1.05)}
/* To switch to color later: remove grayscale or add .portrait--color { filter:none } */

/* Header / Nav */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--border)}
.nav-wrapper{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.logo{font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none}
.main-nav ul{display:flex; gap:1.2rem; list-style:none; margin:0; padding:0}
.main-nav a{color:var(--text); text-decoration:none; opacity:.9}
.main-nav a:hover{opacity:1}
.burger{display:none; cursor:pointer; padding:.5rem}
.burger span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}
.nav-toggle{display:none}

/* Pure CSS mobile nav using :has() support */
@media (max-width: 860px){
  .main-nav{position:absolute; inset:64px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--border); display:none}
  .main-nav ul{flex-direction:column; gap:0}
  .main-nav li{border-top:1px solid var(--border)}
  .main-nav a{display:block; padding:1rem}
  .burger{display:block}
  .nav-wrapper:has(#nav-toggle:checked) .main-nav{display:block}
}

/* Hero */
.hero{padding:clamp(2rem,6vw,5rem) 0}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1rem,4vw,3rem); align-items:center}
.tagline{color:var(--muted); max-width:52ch}
.meta{color:var(--muted); font-size:.95rem}
.hero-ctas{display:flex; gap:.8rem; margin:1.2rem 0 0}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}}

/* Sections */
section{padding:clamp(2rem,5vw,4rem) 0}
.services .service-grid,
.work .work-grid,
.packages .package-grid,
.offers .offer-grid,
.contact .contact-cards{display:grid; gap:1rem}
.service-grid{grid-template-columns:repeat(3,1fr)}
.work-grid{grid-template-columns:repeat(2,1fr)}
.offer-grid{grid-template-columns:repeat(3,1fr)}
.contact-cards{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){
  .service-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}

/* Cards */
.service, .package, .offer, .card, .case{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.2rem}
.icon{font-size:1.4rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.badge{display:inline-block; background:color-mix(in srgb, var(--accent) 20%, var(--card)); color:var(--accent-strong); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); padding:.15rem .5rem; border-radius:999px; font-size:.8rem; font-weight:600}
.bullets{margin:.6rem 0; padding-left:1.1rem}
.bullets li{margin:.2rem 0}
.link{color:var(--accent-strong); text-decoration:none}
.link:hover{text-decoration:underline}

/* Buttons */
.btn{--btn-bg:var(--accent-strong); --btn-fg:#001018; display:inline-block; padding:.7rem 1rem; border-radius:10px; border:1px solid color-mix(in srgb, var(--btn-bg) 40%, #000 0%); background:var(--btn-bg); color:var(--btn-fg); text-decoration:none; font-weight:700}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 16px rgba(2,132,199,.25)}
.btn:active{transform:translateY(0)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--text); background:transparent; color:var(--btn-fg); border:1px solid var(--border)}
.btn--ghost:hover{background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:none}

/* Offers / Packages spacing tweaks */
.offer p, .package p{margin:.4rem 0 .8rem}
.legal{color:var(--muted); font-size:.9rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:1.2rem 0; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, #000))}
.footer-grid{display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.legal-nav a{color:var(--muted); text-decoration:none}
.legal-nav a:hover{color:var(--text)}

/* Accessibility helpers */
:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px; border-radius:8px}
[aria-label]{cursor:pointer}

/* Nice details */
.accent{background:linear-gradient(90deg,var(--accent-strong),#c084fc); -webkit-background-clip:text; background-clip:text; color:transparent}