:root{
  --primary:#0f6f75;
  --dark:#0a0a0a;
  --light:#ffffff;
  --muted:#8aa5a7;
  --bg:#0c0f11;
  --card:#121518;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--light);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--light);text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0 0 .4rem 0}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.center{text-align:center}

/* NAV */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.9);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand img{height:36px}
#menu{display:flex;gap:1rem;align-items:center}
#menu a{opacity:.9;padding:.4rem .6rem;border-radius:.6rem}
#menu a:hover{background:rgba(255,255,255,.06)}
#menu a.legal{opacity:.7}
#navToggle{display:none;font-size:1.5rem;background:none;border:none;color:var(--light)}

/* HERO */
.hero{display:grid;place-items:center;min-height:70vh;padding:clamp(90px,13vh,150px) 0 5.2vh;position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%);}
@keyframes heroShimmer{0%{--sx:58%;--sy:34%}50%{--sx:45%;--sy:42%}100%{--sx:58%;--sy:34%}}
.hero-content{text-align:center;padding:0 1rem;max-width:920px;margin:0 auto}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:-.02em}
.hero p{color:var(--muted);margin:.6rem auto 1.1rem;max-width:46ch}

/* BUTTONS */
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-block;padding:.9rem 1.1rem;border-radius:.9rem;border:1px solid rgba(255,255,255,.12);font-weight:700;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn.primary{background:var(--primary);border-color:transparent}
.btn.ghost{background:transparent}
.btn::after{content:"";position:absolute;inset:0 -30%;transform:translateX(-120%);background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.28)}

/* CARDS & FEATURES */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin:0 auto 1.4rem}
.card{background:var(--card);border:1px solid rgba(255,255,255,.10);padding:1.2rem;border-radius:1.2rem;background:
  linear-gradient(180deg, rgba(18,21,24,1), rgba(18,21,24,1)) padding-box,
  radial-gradient(140px 120px at 95% 12%, rgba(15,111,117,.22), rgba(15,111,117,0) 70%) border-box}
.card p{color:var(--muted)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:0 auto 2rem}
.feature{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:1.2rem}
.feature p{color:var(--muted)}

/* CTA WIDE */
.cta-wide{padding:2.2rem 0;background:linear-gradient(180deg, rgba(15,111,117,.18), rgba(15,111,117,.06));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.cta-wide p{color:var(--muted)}

/* SUBPAGE LAYOUT */
.page-header{padding:2rem 0 0;margin:0}
.page-header .container{max-width:1000px}
.page-header .center{text-align:center}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem auto 2rem}
.tile{background:var(--card);border:1px solid rgba(255,255,255,.10);padding:1.2rem;border-radius:1.2rem}
.tile ul{margin:.4rem 0 0 1.1rem;color:var(--muted)}
.content{margin:1rem auto 2rem}
.legal-content{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1.2rem;border-radius:1.2rem;margin:1rem auto 2rem}

/* CONTACT */
.contact{display:grid;gap:.8rem;background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1.2rem;border-radius:1rem}
.contact label{display:grid;gap:.3rem;font-weight:600}
.contact input,.contact textarea{background:#0a0d10;color:var(--light);border:1px solid rgba(255,255,255,.08);border-radius:.6rem;padding:.8rem}
.hint{color:var(--muted);font-size:.95rem}
.notice{padding:.8rem 1rem;border-radius:.7rem;margin:.6rem 0}.notice.success{background:#103a2d;border:1px solid #1d7b60}.notice.error{background:#3a1010;border:1px solid #7b1d1d}

/* FOOTER */
.footer{margin-top:2rem;padding:2rem 0;background:#0a0d10;border-top:1px solid rgba(255,255,255,.06)}
.footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.copy{text-align:center;color:var(--muted);font-size:.9rem;margin-top:1rem}

/* MOBILE NAV */
@media (max-width:860px){
  #navToggle{display:block}
  #menu{display:none;position:absolute;top:56px;right:16px;background:#0a0d10;border:1px solid rgba(255,255,255,.08);padding:.6rem;border-radius:.8rem;flex-direction:column;min-width:220px}
  #menu a{padding:.6rem}
  #menu.show{display:flex}
}

/* v5.2 – Particles/lines FX (behind content, no hard edges) */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero .hero-content{position:relative;z-index:1}

/* v6 — Global smoothing */
:root{ --e1: cubic-bezier(.2,.7,.2,1); }
a, .btn, .card, .tile, .feature, .nav, .brand img { transition: all .25s var(--e1); }

/* Card hover animations (lift + subtle tilt + shadow) */
.card, .tile {
  transform: translateZ(0);
  will-change: transform, box-shadow, border-color;
}
.card:hover, .tile:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}

/* Pointer-reactive sheen on cards */
.card::after, .tile::after{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: radial-gradient(300px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity: .0; transition: opacity .25s var(--e1);
}
.card:hover::after, .tile:hover::after{ opacity:.9; }

/* Ensure positioned for pseudo-elements */
.card, .tile { position: relative; overflow: hidden; }

/* Link hover */
#menu a:hover { transform: translateY(-1px); }

/* Buttons hover refinement */
.btn:hover { transform: translateY(-2px) scale(1.01); }

/* Subtle page scroll indicator via shadow on nav */
.nav.scrolled { background: rgba(10,10,10,.85); box-shadow: 0 10px 28px rgba(0,0,0,.25); }

/* Touch-friendly enlarge tap targets slightly */
@media (hover:none) and (pointer:coarse){
  .btn { padding: 1rem 1.2rem; }
  #menu a { padding: .6rem .75rem; }
}

/* Reduced motion: minimize scale/tilt */
@media (prefers-reduced-motion: reduce){
  .card:hover, .tile:hover, .btn:hover { transform: none; box-shadow: none; }
  .card::after, .tile::after{ opacity: 0 !important; }
}

/* Hero content slight reactive shadow based on pointer */
.hero .hero-content {
  filter: drop-shadow(calc((var(--px,0.5) - .5) * 8px) calc((var(--py,0.5) - .5) * 8px) 16px rgba(0,0,0,.25));
  transition: filter .25s var(--e1);
}

/* v6.1 — Make feature items behave like cards */
.feature {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow, border-color;
}
.feature:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}
.feature::after{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: radial-gradient(300px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity: .0; transition: opacity .25s var(--e1);
}
.feature:hover::after{ opacity:.9; }

/* Keep arrow cursor (not text selection I‑beam) on hover */
.card, .tile, .feature { cursor: default; -webkit-user-select: none; user-select: none; }

/* Soft-stop feel at the end of page on touch devices */
@media (hover:none) and (pointer:coarse){
  body{ padding-bottom: 10vh; }
  body::after{
    content:""; position: fixed; left:0; right:0; bottom:0; height:56px;
    pointer-events:none;
    background: linear-gradient(180deg, transparent, rgba(12,15,17,.75));
  }
}


/* v6.2 — Contact info cards */
.contact-info { margin: 1rem auto 1.5rem; }
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.info-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .25s var(--e1), box-shadow .25s var(--e1), border-color .25s var(--e1);
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.14);
}
.info-card h4 { margin-bottom: .3rem; }
.info-card p { color: var(--muted); margin: 0; }
.info-card a { text-decoration: underline; }

/* Quick-contact strip on home */
.quick-contact {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(15,111,117,.10), rgba(15,111,117,.04));
  padding: .8rem 0;
}
.quick-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:.6rem; }
.qc-item {
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .9rem;
  padding: .7rem .9rem;
  transition: transform .2s var(--e1), box-shadow .2s var(--e1), border-color .2s var(--e1);
}
.qc-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); border-color: rgba(255,255,255,.12); }
.qc-title { font-weight: 700; }
.qc-sub { color: var(--muted); margin-left: .6rem; }

@media (hover:none) and (pointer:coarse){
  .qc-item { padding: .9rem 1rem; }
}


/* v6.3 — Quick-contact spacing + smooth reveal & subtle motion */
.quick-contact { 
  margin-bottom: 1.4rem; 
  will-change: transform, opacity; 
}
/* Use existing reveal system if present; else provide fallback */
.quick-contact { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--e1), transform .6s var(--e1); }
.quick-contact.in { opacity: 1; transform: none; }
/* subtle motion following pointer (very small) */
.quick-contact { 
  transform-origin: 50% 0;
}
@media (hover:hover) and (pointer:fine){
  .quick-contact.in {
    transform: translateY(calc((.5 - var(--py, .5)) * 6px));
  }
}

/* Contact page: smooth reveal for info cards grid */
.contact-info { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--e1), transform .6s var(--e1); }
.contact-info.in { opacity: 1; transform: none; }

/* Collapsible contact form */
.contact-collapsible { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(6px) scale(.99); transition: max-height .5s var(--e1), opacity .4s var(--e1), transform .4s var(--e1); }
.contact-collapsible.open { opacity: 1; transform: none; }
.contact-toggle { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.12); border-radius:.8rem; padding:.8rem 1rem; background: var(--card); cursor: pointer; font-weight:700; }
.contact-toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.25); border-color: rgba(255,255,255,.16); }
.contact-toggle .chev { transition: transform .3s var(--e1); display:inline-block; }
.contact-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }


/* v6.4 — Full-width contact toggle button */
.contact-toggle--wide{
  display:block;
  width:100%;
  text-align:center;
  font-weight:800;
  color: var(--light);
  background: linear-gradient(180deg, rgba(18,21,24,1), rgba(18,21,24,.95));
  border: 1px solid rgba(255,255,255,.16);
  margin: .9rem 0 .4rem;
  letter-spacing:.2px;
}
.contact-toggle--wide:hover{
  border-color: rgba(255,255,255,.22);
}
/* Improve legibility inside button */
.contact-toggle--wide .chev{ font-size: 1.05rem; }
.contact-toggle--wide span{ line-height: 1.2; }