/* home-tokens.css — reset, tokens, base, utilities */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:var(--xb-bg);color:var(--xb-ink);line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select{font-family:inherit;font-size:inherit}
ul{list-style:none}

/* ── TOKENS ── */
:root{
  --xb-bg:#f8f8f6;--xb-surface:#ffffff;--xb-ink:#0f0f0e;--xb-ink2:#6b6b65;--xb-ink3:#a0a09a;
  --xb-accent:#FF6B00;--xb-accent-pale:#fff3eb;
  --xb-blue:#2563EB;--xb-blue-pale:#eff4ff;
  --xb-green:#16a34a;--xb-green-pale:#f0fdf4;
  --xb-r-xs:8px;--xb-r-sm:10px;--xb-r-md:14px;--xb-r-lg:20px;--xb-r-xl:28px;--xb-r-full:999px;
  --xb-s-xs:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --xb-s-sm:0 2px 8px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);
  --xb-s-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --xb-s-lg:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  --xb-max:1200px;--xb-nav-h:60px;--xb-bot-h:64px;
}

/* ── PAGE WRAPPER ── */
.xb-home{padding-bottom:var(--xb-bot-h)}
.xb-page{max-width:var(--xb-max);margin-inline:auto;padding-inline:20px}
.xb-section{padding-block:20px;padding-inline:16px;max-width:var(--xb-max);margin-inline:auto}
.xb-page-end{padding-bottom:calc(var(--xb-bot-h) + 20px)}

/* ── SECTION HEADER ── */
.xb-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.xb-sec-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--xb-ink)}
.xb-sec-link{font-size:.8rem;color:var(--xb-accent);font-weight:600;white-space:nowrap}

/* ── TAGS ── */
.xb-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--xb-r-full);font-size:.7rem;font-weight:600}
.xb-tag-g{background:var(--xb-green-pale);color:var(--xb-green)}
.xb-tag-b{background:var(--xb-blue-pale);color:var(--xb-blue)}
.xb-tag-o{background:var(--xb-accent-pale);color:var(--xb-accent)}

/* ── SCROLL ROW ── */
.xb-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.xb-scroll::-webkit-scrollbar{display:none}

/* ── ANIMATIONS ── */
@keyframes xb-fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes xb-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes xb-ripple{0%{transform:scale(0);opacity:.4}100%{transform:scale(3);opacity:0}}
.xb-anim{animation:xb-fadeUp .5s ease both}
.xb-anim-2{animation-delay:.05s}
.xb-anim-3{animation-delay:.1s}
.xb-anim-4{animation-delay:.15s}
.xb-anim-5{animation-delay:.2s}
.xb-anim-6{animation-delay:.25s}
.xb-anim-7{animation-delay:.3s}
.xb-anim-8{animation-delay:.35s}

/* ── RESPONSIVE ── */
@media(min-width:600px){
  .xb-section{padding-inline:24px}
}
@media(min-width:900px){
  .xb-section{padding-block:28px}
  .xb-sec-title{font-size:1.25rem}
}