:root{
  --white:#ffffff;
  --ink:#16324a;
  --muted:#5b7186;
  --accent:#1f7cc0;
  --accent-soft:#eaf6ff;
  --warm:#ff8a4c;
  --warm-soft:#fff1e6;
  --line:rgba(22,50,74,.10);
  --shadow:0 6px 24px rgba(22,50,74,.07);
  --radius:14px;
  --max:1040px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Raleway', sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}

a{color:var(--accent);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--white); color:var(--accent); padding:10px 16px; border-radius:8px;
  box-shadow:var(--shadow);
}
.skip-link:focus{ left:12px; top:12px; z-index:999; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6vh 1.5rem;
  text-align:center;
}

.hero-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.logo{ width:480px; margin:0 auto 1.6rem; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  font-weight:700; color:var(--accent); margin:0 0 1rem;
}
h1{
  font-weight:200; line-height:1.18; margin:0 0 1.1rem; color:var(--ink);
  font-size:clamp(1.9rem, 5.6vw, 3.2rem);
  letter-spacing:-.01em;
}
.lede{
  color:var(--muted); font-weight:400; margin:0 auto 1.8rem;
  max-width:480px; font-size:clamp(1rem, 1.6vw, 1.12rem); line-height:1.6;
}
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.6rem; }
.pills span{
  border:1px solid var(--line); color:var(--accent);
  background:var(--accent-soft);
  padding:.4rem .9rem; border-radius:999px; font-size:.82rem; font-weight:600;
}
.scroll-cue{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  color:var(--accent); text-decoration:none; font-size:1.1rem; background:var(--white);
  box-shadow:var(--shadow);
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ---------- SECTIONS ---------- */
main{ background:var(--white); position:relative; }
section{ max-width:var(--max); margin:0 auto; padding:5.5rem 1.5rem; }
.section-title{
  text-align:center; font-weight:300; font-size:clamp(1.5rem, 3vw, 2rem);
  margin:0 0 .8rem; color:var(--ink);
}
.section-title::after{
  content:""; display:block; width:40px; height:2px; margin:1rem auto 0;
  background:var(--accent); opacity:.7;
}
.section-intro{
  text-align:center; color:var(--muted); max-width:520px; margin:0 auto 3rem;
  font-weight:400; line-height:1.6;
}

.grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.5rem; text-align:left; box-shadow:var(--shadow);
  transition:transform .4s ease, box-shadow .4s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(22,50,74,.12); }
.card svg{ width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem; transition:stroke .4s ease; }
.card:hover svg{ stroke:var(--warm); }
.card h3{ font-weight:600; font-size:1.05rem; margin:0 0 .5rem; color:var(--ink); }
.card p{ font-weight:400; font-size:.92rem; color:var(--muted); line-height:1.55; margin:0; }

.pre-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.pre-reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- CONTACT ---------- */
.contact{ text-align:center; }
.contact p{ color:var(--muted); font-weight:400; max-width:480px; margin:0 auto 2.2rem; line-height:1.6; }
.contact-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-solid{ background:var(--warm); color:#3a1700; box-shadow:0 8px 22px rgba(255,138,76,.3); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,138,76,.4); }
.btn-outline{ background:var(--white); border:1px solid var(--line); color:var(--accent); box-shadow:var(--shadow); }
.btn-outline:hover{ transform:translateY(-2px); border-color:rgba(31,124,192,.4); }

/* ---------- FOOTER ---------- */
footer{
  background:var(--accent-soft);
  padding:2.4rem 1.5rem;
  text-align:center; color:var(--muted); font-size:.85rem; font-weight:400;
}
.footer-logo{ width:100px; margin:0 auto .8rem; }

/* ---------- FAB ---------- */
.fab{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--warm); color:#3a1700;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 8px 22px rgba(255,138,76,.4);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.fab.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.fab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:640px){
  .contact-actions{ flex-direction:column; align-items:center; }
  .btn{ width:100%; max-width:280px; justify-content:center; }
  section{ padding:4rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation:none; }
  .pre-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}