/* =========================
   Huse labs — Laser Cyan v2
   - Prefers-reduced-motion support
   - Better button contrast & states
   - Subtle, performant header wash + fallback
   - Responsive section rhythm
   - Smarter 1→2→3 column card grid
   - Clearer form focus & error states
   ========================= */

/* ---------- Color system ---------- */
:root{
  --bg:#fbfdff;          /* page background */
  --text:#0f172a;        /* primary text */
  --sub:#475569;         /* secondary text */
  --muted:#6b7280;       /* footer/meta */
  --border:#e6edf3;      /* borders (cooler tone) */
  --card:#ffffff;        /* surfaces */

  /* Brand (Laser Cyan) + tokens */
  --brand:#00E5FF;       /* 500 */
  --brand-500: var(--brand);
  --brand-700:#00b6cc;   /* deeper for contrast */
  --brand-100-fallback: rgba(0,229,255,.12); /* hover tint fallback */

  /* Modern mix tokens (override fallback when supported) */
  /* Older Safari may ignore color-mix; this pattern keeps graceful behavior */
}
@supports (color: color-mix(in srgb, white, black)){
  :root{
    --brand-100-fallback: color-mix(in srgb, var(--brand) 12%, white);
  }
}

/* Headline gradient stops */
:root{
  --g1:#00E5FF;          /* cyan */
  --g2:#7C3AED;          /* violet pop */
  --g3:#38BDF8;          /* sky */
  --radius:16px;
  --shadow:0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- Header & Nav ---------- */
.site-header{
  position: sticky; /* keep sticky; change to 'relative' if you don't want it */
  top: 0;
  z-index: 50;
  border-bottom: 0;

  /* Layer 1: lighten the left so the logo blends with the page
     Layer 2: keep a faint cyan tint coming in from the right */
  background:
    /* LEFT lighten → fades to transparent by mid */
    linear-gradient(
      to right,
      color-mix(in srgb, var(--bg) 98%, transparent) 0%,
      color-mix(in srgb, var(--bg) 92%, transparent) 18%,
      transparent 42%
    ),
    /* RIGHT tint → fades before the center */
    linear-gradient(
      to left,
      color-mix(in srgb, var(--brand) 6%, transparent) 12%,
      transparent 70%
    );
  /* hard-disable any prior blur from earlier iterations */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-header .row{
  display:flex; align-items:center; justify-content:space-between; height:68px;
}

/* Fallback for older browsers that don't support color-mix() */
@supports not (color: color-mix(in srgb, white, black)){
  .site-header{
    background:
      linear-gradient(to right, rgba(251,253,255,.98) 0%, rgba(251,253,255,.92) 18%, rgba(251,253,255,0) 42%),
      linear-gradient(to left, rgba(0,229,255,.06) 12%, rgba(0,229,255,0) 70%);
  }
}

/* lowercase brand mark */
.logo{
  font-weight:900; letter-spacing:.3px;
  text-transform: lowercase;      /* shows as “huse labs” */
  font-size:18px;
}
.logo span{ color:var(--brand-700); font-weight:800 }

/* Nav */
.nav{
  display:none; position:fixed; inset:68px 16px auto 16px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:12px;
}
.nav a{ display:block; padding:10px 12px; border-radius:12px; font-weight:600 }
.nav a:hover{ background: var(--brand-100-fallback) }
.nav .btn{ margin-top:8px }

.menu-toggle{
  all:unset; cursor:pointer; display:grid; gap:4px; padding:10px; border-radius:12px;
}
.menu-toggle:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset:2px }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px }

@media (min-width: 900px){
  .menu-toggle{ display:none }
  .nav{
    display:flex !important; position:static; inset:auto; background:transparent; border:0; box-shadow:none; padding:0;
    align-items:center; gap:4px;
  }
  .nav a{ display:inline-block; padding:8px 12px }
  .nav .btn{ margin-top:0; margin-left:6px }
}

body.nav-open .nav{ display:block }

/* Prevent page scroll when mobile menu is open (JS toggles this) */
html.nav-locked, body.nav-locked{ overflow:hidden; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:10px 14px; border-radius:14px;
  border:1px solid var(--border);
  background:transparent;              /* transparent base */
  color:var(--text);                   /* neutral button text */
  box-shadow:none;
  font-weight:700;
  transition:
    transform .15s var(--ease),
    border-color .15s var(--ease),
    color .15s var(--ease),
    background-color .15s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none;
}

/* Transparent primary: stronger contrast & clear states */
.btn-primary{
  background:transparent;
  color:var(--brand-700);
  border-color:var(--brand-700);
}
.btn-primary:hover{
  background: var(--brand-100-fallback);
  border-color: var(--brand-500);
  color: var(--brand-500);
}
.btn-primary:active{ transform:none }
.btn-primary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand) 42%, transparent);
  outline-offset: 2px;
}

/* ---------- Hero ---------- */
.hero{
  padding: clamp(68px, 10vw, 96px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(1200px 300px at 50% -100px, rgba(0,229,255,.08), transparent 60%),
    linear-gradient(180deg,#ffffff, rgba(255,255,255,0));
}
.hero h1{
  font-size:clamp(32px,5vw,56px);
  line-height:1.05; margin:0 0 12px 0; letter-spacing:-.5px;
}
/* bolder moving gradient headline */
.gradient-text{
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:520% 100%;
  animation: sweep 14s linear infinite;
}
@keyframes sweep { to { background-position: 520% 0; } }

.hero p{ margin:0 0 20px 0; color:var(--sub); max-width:62ch }
.hero-ctas{ display:flex; gap:10px; flex-wrap:wrap }

/* Optional tag pills (if used) */
.tags{
  display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0 0; padding:0; list-style:none;
}
.tags li{
  padding:6px 10px; border-radius:999px; background: var(--brand-100-fallback);
  border:1px solid var(--border); font-weight:700;
}

/* ---------- Sections ---------- */
.section{ padding: clamp(44px, 8vw, 80px) 0 }
.section h2{ font-size:28px; margin:0 0 18px 0; letter-spacing:-.2px }
.section p{ color:var(--sub) }
.section.alt{
  background:linear-gradient(180deg, #f3f8ff, #fff);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}

/* ---------- Cards (Services) ---------- */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.card{
  grid-column: 1 / -1;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card h3{ margin:0 0 8px 0; letter-spacing:-.2px }
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(2,6,23,.12);
  border-color: var(--brand-700);
}
@media (min-width: 640px){ .card{ grid-column: span 6; } }   /* 2 cols */
@media (min-width: 1024px){ .card{ grid-column: span 4; } }  /* 3 cols */

/* Outcome bullets */
.bullets{ margin:10px 0 0 0; padding-left:18px }
.bullets li{ margin:6px 0 }

/* ---------- Contact ---------- */
.contact-form{ margin-top:14px }
.contact-form .grid{ display:grid; gap:12px }
@media (min-width:700px){ .contact-form .grid{ grid-template-columns:1fr 1fr } }
.contact-form input,
.contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--card); color:var(--text); font:inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  min-height:44px; /* larger hit targets */
}
.contact-form textarea{ min-height: 120px; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
/* Error helper class (toggle via JS or server) */
:is(.contact-form input, .contact-form textarea).is-error{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.15);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border); padding:26px 0; color:var(--muted); font-size:14px;
}
.site-footer .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.footer-nav a{ padding:6px 8px; border-radius:8px }
.footer-nav a:hover{ background: var(--brand-100-fallback) }

/* ---------- Optional scroll-reveal ---------- */
.reveal{ opacity:0; transform:translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.reveal--visible{ opacity:1; transform:none }

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .gradient-text{ animation: none; background-position: 0 0; }
  .btn:hover, .card:hover{ transform:none; }
}