/* =========================================================
   WYB — Unified Stylesheet
   Order: Tokens → Base → Layout → Header → Buttons → Hero
          → Cards/Grids → Pricing → Gallery → FAQ/Form
          → Footer → Motion → Service Page Extras → Pro Skin
   ========================================================= */

/* ================================
   Tokens / Base
==================================*/
:root{
  /* Palette */
  --bg:#0b0f14; --bg-alt:#0f141b;             /* global backgrounds */
  --bg-elev:#0f141b;                           /* service elev bg alias */
  --panel:#0f1720; --panel-2:#0e151d;          /* glass surfaces */
  --card:#101720;                               /* legacy surface */
  --text:#e6edf3; --muted:#a6b3c2;
  --line:#1f2a37;

  /* Brand */
  --brand:#55c1ff;       /* blue */
  --brand-2:#6ee7b7;     /* mint */
  --brand-3:#7dd3fc;     /* accent */

  /* Radii / Shadows / Motion */
  --radius:18px; --radius-lg:24px;
  --shadow-s:0 6px 20px rgba(0,0,0,.25);
  --shadow:0 16px 40px rgba(0,0,0,.35);
  --depth-1:0 2px 6px rgba(0,0,0,.25);
  --depth-2:0 8px 20px rgba(0,0,0,.35);
  --depth-3:0 18px 50px rgba(0,0,0,.45);
  --speed:.5s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text); background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a.link{color:var(--brand)} a.link:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.5rem .75rem;border-radius:8px}

/* ================================
   Layout
==================================*/
.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section-head{max-width:760px;margin:0 auto 32px;text-align:center}
.section-head h2{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.2;margin:0 0 6px}
.section-head p{color:var(--muted);margin:0}
.grid{display:grid;gap:22px}

/* ================================
   Header / Navigation
==================================*/
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg),transparent 10%);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-svg{width:28px;height:28px}
.site-nav{display:flex;align-items:center;gap:18px}
.site-nav a{padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:var(--card)}
.nav-toggle{display:none;border:1px solid var(--line);background:transparent;color:var(--text);padding:8px 10px;border-radius:12px}
.icon{width:24px;height:24px}
@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;inset:60px 0 auto 0;display:grid;gap:8px;padding:12px 16px;
    background:var(--bg);border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .3s ease;
  }
  .site-nav.open{transform:translateY(0)}
}

/* ================================
   Buttons / Badges
==================================*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:12px 18px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),#fff 2%),var(--panel));
  color:var(--text);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#001018;border-color:transparent;box-shadow:var(--shadow)}
.btn-outline{background:transparent;border-color:color-mix(in srgb,var(--brand),var(--line) 70%);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand),var(--line) 70%)}
.btn-ghost{background:transparent}
.btn.magnetic{position:relative;overflow:hidden}
.btn.magnetic::after{
  content:"";position:absolute;left:var(--haloLeft,-100px);top:var(--haloTop,-100px);
  width:90px;height:90px;border-radius:999px;background:color-mix(in srgb,var(--brand),transparent 80%);
  transform:translate(-50%,-50%) scale(var(--haloScale,0));transition:transform .25s ease;pointer-events:none;
}
.badge{
  position:absolute;right:16px;top:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#001018;font-size:.75rem;padding:.28rem .6rem;border-radius:999px;font-weight:600;
}

/* ================================
   Hero
==================================*/
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.75) saturate(1.05)}
.hero-inner{padding:92px 0 72px}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 8px}
.lead{color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-points{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 0;padding:0;list-style:none;color:#cbd5e1}
.hero-wave{height:80px;width:100%;color:var(--bg)}
/* Service hero dark overlay */
.hero.service-hero{overflow:clip}
.hero.service-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1200px 400px at 50% 0%, rgba(12,18,25,.65), transparent 60%), linear-gradient(180deg, rgba(11,15,20,.75), rgba(11,15,20,.85));
  pointer-events:none;
}
.hero.service-hero .hero-inner{padding:56px 0 40px}
@media (min-width:900px){.hero.service-hero .hero-inner{padding:22px 0 48px}}
.hero.service-hero .lead{max-width:700px}
.hero.service-hero .cta-row{margin-top:8px}

/* ================================
   Cards / Services
==================================*/
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),#fff 6%),var(--panel-2));
  border:1px solid color-mix(in srgb,var(--line),#000 5%);
  box-shadow:var(--shadow-s);padding:22px;display:flex;flex-direction:column;min-height:220px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand),var(--line) 60%)}
.icon-wrap{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--brand),transparent 80%);color:var(--brand)}
.card h3{margin:6px 0 8px}
.card p{color:var(--muted)}
.bullet{list-style:none;margin:10px 0 0;padding:0;color:var(--muted)}
.bullet li{position:relative;padding-left:18px;margin:6px 0}
.bullet li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.link.micro{color:var(--brand-3)}
.link.micro::after{content:"↗";margin-left:.35rem;transition:transform .2s ease}
.link.micro:hover::after{transform:translate(.1rem,-.1rem)}
/* glass “sheen” on hover */
.card::after{
  content:"";position:absolute;inset:-40% -40% auto auto;width:60%;height:200%;transform:rotate(25deg);
  background:radial-gradient(40% 60% at 30% 50%, color-mix(in srgb,var(--brand-3), transparent 75%), transparent 70%);
  opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.card:hover::after{opacity:.8;transform:rotate(22deg)}

/* ================================
   Pricing (Plans)
==================================*/
.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:980px){.plans{grid-template-columns:1fr}}

.plan{
  position:relative;overflow:hidden;border-radius:24px;padding:24px;
  display:grid;align-content:start;gap:12px;

  /* surface + border */
  background:linear-gradient(180deg, color-mix(in srgb,var(--card),#fff 4%) 0%, color-mix(in srgb,var(--card),#000 4%) 100%);
  border:1px solid color-mix(in srgb,var(--brand),var(--line) 75%);

  /* depth */
  box-shadow:var(--depth-1), var(--depth-2), var(--depth-3);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
/* subtle sheen */
.plan::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 60% at 85% 50%, color-mix(in srgb,var(--brand), transparent 92%), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.04) 1px, transparent 36%);
}
.plan:hover{
  transform:translateY(-4px);
  box-shadow:
    0 4px 10px rgba(0,0,0,.25),
    0 12px 28px rgba(0,0,0,.4),
    0 28px 80px rgba(0,0,0,.55);
  border-color:color-mix(in srgb,var(--brand),#000 35%);
}
/* featured ring + halo (uses :after so :before can remain sheen) */
.plan.featured{
  border-color:color-mix(in srgb,var(--brand),#000 30%);
  box-shadow:
    0 6px 14px rgba(0,0,0,.30),
    0 16px 36px rgba(0,0,0,.45),
    0 0 25px color-mix(in srgb,var(--brand), transparent 75%);
}
.plan.featured::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:2px;
}
/* inner spacing/typography */
.plan h3{margin:0 0 4px}
.plan .price{margin:0;line-height:1;font-size:2.6rem;font-weight:800;letter-spacing:-.02em}
.plan .price span{font-size:1rem;color:var(--muted);margin-left:4px}
.plan .setup{margin:6px 0 10px;color:var(--text);opacity:.95;font-weight:600}
.plan .list{list-style:none;margin:8px 0 16px;padding:0;color:var(--muted)}
.plan .list li{margin:6px 0;padding-left:18px;position:relative}
.plan .list li::before{content:"•";position:absolute;left:0;top:0;line-height:1;color:color-mix(in srgb,var(--brand-2),#8fb7ff 40%)}
.plan .btn.full{width:100%;padding:14px 18px;border-radius:16px}

/* ================================
   Gallery (portfolio tiles)
==================================*/
.grid.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:980px){.grid.gallery{grid-template-columns:1fr}}
.shot{
  position:relative;display:block;overflow:hidden;aspect-ratio:16/10;
  border-radius:18px;border:1px solid var(--line);background:#0d131b;box-shadow:0 10px 30px rgba(0,0,0,.15);
  transition:transform .2s ease,box-shadow .2s ease;
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .6s ease}
.shot:hover img{transform:scale(1.05)}
.shot.focus-top img{object-position:center 10%}
.shot.focus-center img{object-position:50% 50%}
.shot.focus-bottom img{object-position:center 80%}
.shot.bg-tile{background-size:cover;background-position:center 20%}
.shot.bg-tile.focus-top{background-position:center 10%}
.shot.bg-tile.focus-bottom{background-position:center 80%}

/* ================================
   FAQ / Forms
==================================*/
.faq-item{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),#fff 2%),var(--panel-2));
  border:1px solid color-mix(in srgb,var(--line),#000 20%);
  border-radius:var(--radius);padding:18px;max-width:820px;margin:12px auto;
}
.faq-item>summary{cursor:pointer;font-weight:600}
.faq-item[open]{outline:1px solid color-mix(in srgb,var(--brand),#000 20%)}
.contact-form{max-width:860px;margin:0 auto}
.form-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
label{display:grid;gap:8px;margin-bottom:12px}
input,select,textarea{
  appearance:none;background:#0a0f15;border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:12px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:color-mix(in srgb,var(--brand),var(--line) 40%);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand),transparent 85%);
}
.form-note{color:var(--muted);margin-top:6px}

/* ================================
   Footer
==================================*/
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:28px 0;margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-nav{display:flex;gap:16px}
.footer-nav a{color:var(--muted)} .footer-nav a:hover{color:var(--text)}

/* ================================
   Motion
==================================*/
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--speed) ease,transform var(--speed) ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* ================================
   Service-page Extras
==================================*/
/* Sticky local subnav (hidden by default here; enable per page) */
.service-subnav{display:none}
.service-subnav.active{
  display:block;position:sticky;top:64px;z-index:35;
  background:color-mix(in srgb,var(--bg-elev),transparent 10%);
  backdrop-filter:blur(8px) saturate(140%);border-bottom:1px solid var(--line);
}
.service-subnav .container{display:flex;gap:10px;align-items:center;overflow:auto;padding:10px 0}
.service-subnav a{padding:10px 14px;border-radius:999px;color:var(--muted);border:1px solid transparent;white-space:nowrap}
.service-subnav a.is-active,.service-subnav a:hover{
  color:var(--text);border-color:color-mix(in srgb,var(--brand),var(--line) 70%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),transparent 60%),transparent);
}
/* Stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),#fff 4%),var(--panel-2));
  border:1px solid color-mix(in srgb,var(--line),#000 15%);border-radius:16px;padding:18px;text-align:center;
}
.stat .num{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800}
.stat .label{color:var(--muted)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
/* Testimonial */
.testimonial{
  max-width:860px;margin:0 auto;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel),#fff 3%),var(--panel-2));
  border:1px solid color-mix(in srgb,var(--line),#000 15%);border-radius:22px;padding:28px;box-shadow:var(--shadow-s);
}
.testimonial .who{color:var(--muted);margin-top:8px}
/* Divider wave */
.divider{height:80px;color:var(--bg-elev)}
.divider svg{display:block;width:100%;height:100%}

/* ================================
   Pro Skin flourishes
==================================*/
/* Gradient headline accent */
.h-accent,
.section-head h1,
.section-head h2{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
/* Glow utility */
.glow-hover{border-radius:12px;transition:transform .3s ease,box-shadow .3s ease}
.glow-hover:hover{
  transform:translateY(-4px);
  box-shadow:0 0 18px rgba(0,221,255,.45),0 0 36px rgba(0,255,170,.25);
}
/* Spotlight container utility */
.spotlight{position:relative;overflow:hidden}
.spotlight::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-3),transparent 75%),transparent 80%);
  left:var(--sx,-1000px);top:var(--sy,-1000px);filter:blur(18px);opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.spotlight:hover::before{opacity:.6}
/* =========================================================
   Responsive Refinements (phones → tablets → desktop)
   Append to the end of the unified CSS
   ========================================================= */

/* 1) Core tap targets + typography safety on small screens */
:root{
  --min-tap: 44px;                 /* WCAG target size */
}
.btn, .site-nav a { min-height: var(--min-tap); }
input, select, textarea { min-height: 44px; }

/* 2) Disable hover lift on touch devices (no janky jumps) */
@media (hover: none) {
  .btn:hover, .card:hover, .lift:hover, .plan:hover { transform: none; }
}

/* 3) Container & section spacing */
@media (max-width: 1024px){
  .section { padding: 64px 0; }
}
@media (max-width: 720px){
  .section { padding: 56px 0; }
}

/* 4) Hero sizing & readability */
@media (max-width: 1024px){
  .hero-inner { padding: 72px 0 56px; }
}
@media (max-width: 720px){
  .hero-inner { padding: 56px 0 40px; }
  .hero h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
  .lead   { font-size: clamp(0.95rem, 3.5vw, 1.05rem); }
  .cta-row { gap: 10px; }
}

/* 5) Cards/grids: stack smoothly with sane gutters */
@media (max-width: 1100px){
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cards { grid-template-columns: 1fr; }
  .card  { padding: 18px; border-radius: 16px; }
}

/* 6) Pricing: stack, tighten spacing, scale price safely */
@media (max-width: 980px){
  .plans { grid-template-columns: 1fr; }
  .plan  { max-width: 720px; margin-inline: auto; }
}
@media (max-width: 560px){
  .plan { padding: 18px; border-radius: 20px; }
  .plan .price { font-size: clamp(1.8rem, 10vw, 2.2rem); }
  .plan .btn.full { padding: 12px 16px; }
}

/* 7) Gallery tiles: 3 → 2 → 1 with better crop bias */
@media (max-width: 1200px){
  .grid.gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .grid.gallery { grid-template-columns: 1fr; }
  .shot { aspect-ratio: 16 / 10; }
}

/* 8) Forms: single-column on mobile, bigger touch area */
@media (max-width: 720px){
  .form-grid { grid-template-columns: 1fr; }
  label { margin-bottom: 10px; }
}

/* 9) Footer & nav: comfortable wrap on small screens */
@media (max-width: 720px){
  .footer-inner { justify-content: center; gap: 12px; text-align: center; }
  .footer-nav   { flex-wrap: wrap; justify-content: center; }
}

/* 10) Performance: lighten shadows on mobile to reduce paint cost */
@media (max-width: 560px){
  .card, .plan, .shot { box-shadow: 0 8px 22px rgba(0,0,0,.28); }
}

/* 11) Safe clamping for massive desktops (prevents oversizing) */
@media (min-width: 1440px){
  .container { width: min(1200px, 88%); }
  .hero h1   { font-size: 3rem; }  /* cap headline size */
}

/* 12) Optional: sticky header offset for notched phones */
@supports (padding: max(0px)) {
  body { padding-top: 0; } /* header is sticky already */
  .site-header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}
/* Pricing layout: identical widths, equal heights, great on all screens */
.plans{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;           /* force equal height columns */
  width: min(1100px, 100%);
  margin-inline: auto;
}

@media (max-width: 1100px){
  .plans{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 640px){
  .plans{ grid-template-columns: 1fr; }
}

/* Make each plan fill its column and push CTA to bottom */
.plan{
  display:flex;
  flex-direction:column;
  min-height: 100%;
  padding: 24px;                  /* consistent inner spacing */
  border-radius: 24px;
}
.plan .btn.full{ margin-top:auto; } /* sticks button to the bottom */

/* Tight, consistent type scales across devices */
.plan h3{ margin:0 0 6px; font-size: clamp(1rem, 2.2vw, 1.15rem); }
.plan .price{
  margin:0;
  line-height:1;
  font-weight:800;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  letter-spacing:-0.02em;
}
.plan .price span{ font-size: clamp(.85rem, 2.2vw, 1rem); margin-left:4px; color:var(--muted); }
.plan .setup{ margin:6px 0 10px; font-weight:600; opacity:.95; }

/* Lists: compact but readable */
.plan .list{ list-style:none; margin:8px 0 16px; padding:0; color:var(--muted); }
.plan .list li{ margin:6px 0; padding-left:18px; position:relative; }
.plan .list li::before{ content:"•"; position:absolute; left:0; top:0; line-height:1; color:color-mix(in srgb, var(--brand-2), #8fb7ff 40%); }

/* Guarantees strip responsive */
.guarantees{ margin-top:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.guarantees .card{ min-height:auto; padding:16px }
@media (max-width:900px){ .guarantees{ grid-template-columns:1fr; } }

/* ================================
   Services (cards row)
==================================*/
/* "What's Included" – 4 in a row on desktop */
.grid.features{
  display:grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap:22px;
  align-items:stretch;
  width:min(1200px, 100%);   /* keeps it tidy; bump to 1320/1400 if you want wider */
  margin-inline:auto;
}

.grid.features .card{
  display:flex;              /* equal height cards */
  flex-direction:column;
  min-height:100%;
}

/* responsive steps */
@media (max-width:1200px){
  .grid.features{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width:700px){
  .grid.features{ grid-template-columns: 1fr; }
}
/* Center the 3 service cards in one row */
#services .grid.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap:22px;
  width:min(1120px, 100%);   /* ~3x card + gaps */
  margin-inline:auto;        /* centers the block */
  justify-content:center;
}

/* responsive steps (match your global rhythm) */
@media (max-width:1100px){
  #services .grid.cards{
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    width:min(760px, 100%);
  }
}
@media (max-width:640px){
  #services .grid.cards{
    grid-template-columns: 1fr;
    width:min(520px, 100%);
  }
}