@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#FAFAF8; --fg:#2B2B28; --muted:#8A857C; --line:#E3DFD6;
  --accent:#7C8B7A; --accent-dark:#677866; --panel:#F1EEE7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter', Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1100px; margin:0 auto; padding:32px 24px 80px;}

/* Header / nav */
header{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:32px; position:sticky; top:0; background:var(--bg); z-index:50;}
header .logo-link{display:flex; align-items:center;}
header img{height:48px; transition:transform .3s ease;}
header img:hover{transform:scale(1.04);}
nav{display:flex; gap:28px;}
nav a{color:var(--fg); text-decoration:none; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; position:relative; padding-bottom:2px; transition:color .2s ease;}
nav a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width .25s ease;}
nav a:hover{color:var(--accent);}
nav a:hover::after{width:100%;}

/* Section scroll-reveal */
.section{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.section.in-view{opacity:1; transform:translateY(0);}

/* Pill CTA buttons */
.btn{display:inline-block; padding:14px 30px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:none; text-align:center; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(124,139,122,.32); background:var(--accent-dark);}
.btn-secondary{background:transparent; color:var(--fg); border:1px solid var(--line);}
.btn-secondary:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--accent);}

footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; line-height:1.8;}
footer p{margin-bottom:6px;}
footer p:last-child{margin-bottom:0;}

/* Generic tooltips */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  width:200px; padding:8px 10px; border-radius:8px;
  background:var(--fg); color:var(--bg); font-size:12px; font-weight:400; line-height:1.4; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:30;
}
[data-tooltip]::before{
  content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--fg);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }
[data-tooltip]:hover::before{ transform:translateX(-50%); }