/* ============================================================
   Shatale shared design system — foundation + chrome (nav/footer)
   Extracted from the reference design live on the homepage.
   Page-specific section CSS stays inline on each page.
   ============================================================ */

@font-face{font-family:'Grafita';src:url(/fonts/grafita.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(/fonts/manrope.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --navy:#26273d;
  --navy-2:#2e3050;
  --lime:#b2e559;
  --peri:#b2b8ff;
  --peri-strong:#7c84e8;
  --white:#ffffff;
  --ink:#26273d;
  --muted:rgba(38,39,61,.62);
  --muted-light:rgba(255,255,255,.66);
  --line:rgba(38,39,61,.14);
  --line-light:rgba(255,255,255,.16);
  --radius:22px;
  --radius-lg:30px;
  --maxw:1200px;
  --flow:linear-gradient(120deg,#cfeede 0%,#bfe7ec 22%,#bfd0f3 48%,#cdbef0 70%,#f3c9dd 88%,#f6e7c4 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,system-ui,sans-serif;
  background:var(--navy);
  color:var(--ink);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{font-family:'Grafita','Manrope',sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.02}
::selection{background:var(--lime);color:var(--navy)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'Manrope';font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--navy)}
.btn-lime:hover{background:#c2ef6f}
.btn-peri{background:var(--peri);color:var(--navy)}
.btn-light{background:var(--white);color:var(--navy)}
.btn-ghost-d{border-color:var(--line-light);color:var(--white)}
.btn-ghost-d:hover{background:rgba(255,255,255,.07)}
.btn-ghost-l{border-color:var(--line);color:var(--ink)}
.btn-ghost-l:hover{background:rgba(38,39,61,.05)}

/* ---------- tab pill / eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Manrope';font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px 9px 14px;border-radius:100px;
  border:1.5px solid currentColor;opacity:.92;margin-bottom:26px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 var(--lime);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(178,229,89,.55)}70%{box-shadow:0 0 0 8px rgba(178,229,89,0)}100%{box-shadow:0 0 0 0 rgba(178,229,89,0)}}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec{padding:108px 0}
.sec-dark{background:var(--navy);color:var(--white)}
.sec-peri{background:var(--peri);color:var(--navy)}
.sec-lime{background:var(--lime);color:var(--navy)}
.sec-light{background:#eef0ff;color:var(--navy)}
.sec-white{background:#fbfbff;color:var(--navy)}
h2.title{font-size:clamp(34px,5vw,60px);max-width:18ch}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:60ch;margin-top:22px;font-weight:400}
.sec-dark .lede{color:var(--muted-light)}
.sec-peri .lede,.sec-lime .lede,.sec-light .lede,.sec-white .lede{color:var(--muted)}
.acc-lime{color:var(--lime)}
.acc-peri{color:var(--peri)}
.acc-navy{color:var(--navy)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ NAV (injected via [data-site-nav]) ============ */
header{position:sticky;top:0;z-index:100;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent;min-height:74px}
header.scrolled{background:rgba(38,39,61,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-light)}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Grafita';font-size:22px;color:#fff;letter-spacing:-.01em}
.brand svg{width:24px;height:26px}
.nav .brand svg{width:auto;height:34px}
.nav-links{display:flex;gap:24px;margin-left:22px}
.nav-links a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.74);transition:color .25s}
.nav-links a:hover,.nav-links a.nav-active{color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5)}
.lang button{background:none;border:none;color:inherit;cursor:pointer;padding:4px 6px;border-radius:6px;font:inherit;transition:.2s}
.lang button.on,.lang button:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav .signin{font-size:14.5px;font-weight:600;color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ============ FOOTER (injected via [data-site-footer]) ============ */
footer{background:var(--navy);color:#fff;padding:64px 0 40px;border-top:1px solid var(--line-light)}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:46px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand .brand svg{width:auto;height:34px}
.foot-brand p{font-size:14px;color:var(--muted-light);max-width:34ch}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--muted-light);transition:.25s}
.foot-links a:hover{color:#fff}
.foot-bot{font-size:12.5px;color:var(--muted-light);border-top:1px solid var(--line-light);padding-top:26px;line-height:1.6}

/* ---------- responsive nav ---------- */
@media(max-width:960px){
  .nav-links,.lang{display:none}
  .burger{display:flex}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
}