:root{
  --gutter-min:28px; --gutter-vw:7.5vw; --gutter-max:48px;
  --text:#111827; --muted:#475569;
  --brand:#0f766e; --brand2:#14b8a6; --accent:#f59e0b;
  --bg:#f8fafc; --card:#fff;
  --maxw:1120px; --header-h:64px; --border:#e2e8f0;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline;color:var(--accent)}
.container{max-width:var(--maxw);margin:0 auto;padding-left:max(clamp(var(--gutter-min), var(--gutter-vw), var(--gutter-max)), env(safe-area-inset-left));padding-right:max(clamp(var(--gutter-min), var(--gutter-vw), var(--gutter-max)), env(safe-area-inset-right));}
header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:64px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand .mark{width:40px;height:40px;border-radius:.8rem;background:conic-gradient(from 180deg at 50% 50%, var(--brand) 0 210deg, var(--accent) 210deg 360deg)}
.brand .brand-text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand .name{font-weight:800;letter-spacing:.2px;white-space:nowrap}
.brand small{opacity:.85;white-space:nowrap}
nav{display:flex;align-items:center;gap:.5rem}
#navwrap{display:flex;align-items:center}
#navwrap ul{list-style:none;display:flex;gap:.25rem;padding:0;margin:0}
nav a{display:block;padding:.55rem .75rem;border-radius:.55rem}
nav a:hover{background:color-mix(in srgb, var(--brand) 10%, white)}
.menu{display:none;width:42px;height:42px;border:1px solid #cbd5e1;border-radius:.6rem;background:#fff}
@media (max-width:900px){
  .nav{flex-wrap:wrap}
  #navwrap{width:100%}
  #navwrap ul{display:none;flex-direction:column;gap:.25rem}
  #navwrap[aria-expanded="true"] ul{display:grid;grid-template-columns:1fr;gap:.25rem;padding:clamp(16px,5vw,24px);background:#fff;border:1px solid var(--border);border-radius:.75rem;width:100%}
  .menu{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
}
main section{padding:2.4rem 0}
h1{font-size:clamp(1.6rem,2.2vw + 1rem,2.8rem);margin:.25rem 0 .5rem}
h2{font-size:clamp(1.3rem,1.5vw + .9rem,2rem);margin:.3rem 0 .6rem}
.lead{font-size:clamp(1rem,.6vw + .95rem,1.2rem);color:var(--muted);max-width:65ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:.7rem;border:1px solid color-mix(in srgb, var(--brand) 70%, white);background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;font-weight:700}
.btn.ghost{background:#fff;color:var(--brand);border-color:#cbd5e1}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.span-6{grid-column:span 6}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.2rem 1.3rem;box-shadow:0 10px 30px rgba(2,6,23,.06)}
ul.clean{margin:.25rem 0 0 1.2rem} ul.clean li{margin:.35rem 0}
.img-card img{width:100%;height:auto;display:block;border-radius:1rem}
@media (max-width:900px){.grid{grid-template-columns:1fr}.span-6{grid-column:1}}

/* HERO SLIDER */
.hero{padding:0}
.slider{position:relative;width:100%;height:min(72vw,780px);background:var(--brand);overflow:hidden;border-bottom:1px solid var(--border)}
.slides{display:flex;align-items:stretch;height:100%;width:100%;transition:transform .6s ease}
.slide{min-width:100%;height:100%;position:relative}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slider .navbtn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.95);border:1px solid #cbd5e1;border-radius:999px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.slider .prev{left:12px}.slider .next{right:12px}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:.4rem;padding:.4rem .6rem;background:rgba(17,24,39,.35);backdrop-filter:blur(6px);border-radius:999px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#e5e7eb;opacity:.7;cursor:pointer}
.dots button[aria-current="true"]{opacity:1;background:#fff}
.hero-inner{padding:1.25rem 0.5rem 0.5rem 2.1rem}
.kicker{text-transform:uppercase;color:var(--accent);font-weight:800;letter-spacing:.15em;font-size:.8rem}

/* Footer */
footer{background:#fff;border-top:1px solid var(--border)}
.footgrid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:1rem;padding:2rem 1rem}
.foot h4{margin:.2rem 0 .6rem;font-size:1rem}
.foot p,.foot a,.foot li,.foot small{color:#334155;font-size:.95rem;line-height:1.5}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.brandline{display:flex;gap:.75rem;align-items:center;margin-bottom:.25rem}
.copyright{border-top:1px solid var(--border);padding:1rem;color:#334155;text-align:center}
@media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footgrid{grid-template-columns:1fr}}

@media (max-width:360px){:root{--gutter-min:32px}}

/* IMG PADDING on small */
@media (max-width:600px){.img-card{padding:.5rem}}

/* Slide caption overlay for slide 3 */
.slide{position:relative}
.slide .slide-caption{
  position:absolute;
  left:clamp(16px, 6vw, 48px);
  bottom:clamp(16px, 5vw, 40px);
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55));
  color:#fff;
  padding: clamp(10px, 2vw, 16px) clamp(12px, 3vw, 20px);
  border-radius:.6rem;
  max-width:min(92%, 720px);
}
.slide .slide-caption h2{margin:0;font-size:clamp(1.3rem, 3.2vw, 2.2rem);line-height:1.15}