/* Created: 10:31 11-Aug-2026 */
/* BT2 — BAYTI · Athelas-DNA base: tokens, reset, type, buttons */

@font-face{font-family:'Inter';src:url('../assets/fonts/inter-100-900.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;font-display:swap}

:root{
  /* Ink — one ink, nine alphas */
  --ink-100:#16262e; --ink-88:#16262ee0; --ink-64:#16262ea3; --ink-48:#16262e7a;
  --ink-32:#16262e52; --ink-16:#16262e29; --ink-8:#16262e14; --ink-4:#16262e0a; --ink-0:#16262e00;
  /* Paper */
  --paper-100:#f3f7f7; --paper-88:#f3f7f7e0; --paper-64:#f3f7f7a3; --paper-48:#f3f7f77a;
  --paper-32:#f3f7f752; --paper-16:#f3f7f729; --paper-8:#f3f7f714; --paper-4:#f3f7f70a; --paper-0:#f3f7f700;
  /* Bayti accents */
  --teal:#24bbbb; --teal-deep:#1a9a9a; --purple:#534fa0; --purple-deep:#413d85;
  --teal-16:#24bbbb29; --teal-32:#24bbbb52; --purple-16:#534fa029; --purple-32:#534fa052;
  --bg-two:#f6f4f1;
  --success:#1e8e5a; --error:#a63f3a; --warning:#c28a00;
  --overlay-hover:linear-gradient(160deg,#534fa052 0%,#24bbbb52 100%);
  --grad-fade:linear-gradient(180deg,var(--ink-0),var(--ink-88));
  /* Semantic (light default) */
  --bg:var(--paper-100); --text-strong:var(--ink-100); --text-medium:var(--ink-64);
  --text-subtle:var(--ink-48); --border-faint:var(--ink-8); --border-subtle:var(--ink-16);
  --border-medium:var(--ink-32); --surface-card:var(--ink-4); --glass:var(--ink-16);
  --accent:var(--teal); --accent-2:var(--purple);
  /* Layout */
  --container-large:1800px; --container-small:912px; --content:1376px; --measure:448px;
  --measure-5:564px; --measure-6:680px; --pad-page:32px;
  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px;
  --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:120px; --s-13:160px; --s-14:200px;
  --sec-xs:32px; --sec-s:80px; --sec-m:120px; --sec-l:160px; --sec-xl:200px;
  --ease-circ:cubic-bezier(0.075,0.82,0.165,1);
}
.is-inverted{
  --bg:var(--ink-100); --text-strong:var(--paper-100); --text-medium:var(--paper-64);
  --text-subtle:var(--paper-48); --border-faint:var(--paper-8); --border-subtle:var(--paper-16);
  --border-medium:var(--paper-32); --surface-card:var(--paper-8); --glass:var(--paper-16);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;font-weight:400;font-size:16px;line-height:24px;
  color:var(--text-strong);background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p a,li a.prose{color:var(--teal-deep);text-decoration:underline}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:var(--teal-32)}

/* ---------- Type scale (Athelas measured) ---------- */
h1,h2,h3,h4,h5,h6{font-weight:400}
.h0{font-size:88px;line-height:92px;letter-spacing:-1.5px}
h1,.h1{font-size:64px;line-height:68px;letter-spacing:-1.3px}
h2,.h2{font-size:48px;line-height:52px;letter-spacing:-1px}
h3,.h3{font-size:34px;line-height:44px;letter-spacing:-1.2px}
h4,.h4{font-size:30px;line-height:38px;letter-spacing:-.5px}
h5,.h5{font-size:26px;line-height:32px;letter-spacing:-.5px}
h6,.h6{font-size:22px;line-height:26px;letter-spacing:0}
.b1{font-size:20px;line-height:28px}
.b2{font-size:16px;line-height:24px}
.b3{font-size:14px;line-height:20px}
.text-bold{font-weight:500}
.text-medium{color:var(--text-medium)}
.text-subtle{color:var(--text-subtle)}
.label-1,.label-2{font-family:'IBM Plex Mono',monospace;font-weight:400;
  text-transform:uppercase;letter-spacing:.75px}
.label-1{font-size:13px;line-height:17px}
.label-2{font-size:11px;line-height:14px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--text-medium);margin-bottom:16px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--teal)}
@media (max-width:991px){
  .h0{font-size:72px;line-height:78px}
}
@media (max-width:767px){
  .h0{font-size:56px;line-height:64px}
  h1,.h1{font-size:48px;line-height:52px}
  h2,.h2{font-size:36px;line-height:40px}
  h3,.h3{font-size:28px;line-height:36px}
  h4,.h4{font-size:24px;line-height:32px}
  h5,.h5{font-size:22px;line-height:24px}
  h6,.h6{font-size:20px;line-height:24px}
  .b1{font-size:18px;line-height:26px}
}

/* ---------- Containers / sections ---------- */
.page-pad{padding-left:var(--pad-page);padding-right:var(--pad-page)}
.container{max-width:var(--content);margin:0 auto}
.container-sm{max-width:var(--container-small);margin:0 auto}
.measure{max-width:var(--measure)}
.measure-5{max-width:var(--measure-5)}
.measure-6{max-width:var(--measure-6)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:64px}
@media (max-width:767px){
  :root{--pad-page:16px}
  .section-head{margin-bottom:40px}
}

/* ---------- Buttons — 4-layer anatomy + text-roll ---------- */
.btn{position:relative;display:inline-flex;border-radius:8px;overflow:hidden;
  font-size:16px;line-height:20px;min-height:44px;align-items:stretch;isolation:isolate}
.btn-sm{font-size:14px;line-height:16px;min-height:40px}
.btn-inner{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 16px}
.btn-mask{display:block;height:20px;overflow:hidden}
.btn-sm .btn-mask{height:16px}
.btn-text{display:block;transition:transform .4s ease;
  text-shadow:0 20px 0 var(--roll-color,currentColor)}
.btn-sm .btn-text{text-shadow:0 16px 0 var(--roll-color,currentColor)}
.btn-bg{position:absolute;inset:0;z-index:1;border-radius:8px;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:background-color .3s ease}
.btn-primary{color:var(--ink-100);--roll-color:var(--ink-100)}
.btn-primary .btn-bg{background:var(--teal)}
.btn-primary:hover .btn-bg{background:var(--teal-deep)}
.btn-secondary{color:var(--text-strong)}
.btn-secondary .btn-bg{background:var(--ink-4);border:1px solid var(--border-subtle)}
.btn-secondary:hover .btn-bg{background:var(--ink-8)}
.is-inverted .btn-secondary .btn-bg,.btn-secondary.on-dark .btn-bg{background:var(--paper-16)}
.is-inverted .btn-secondary:hover .btn-bg,.btn-secondary.on-dark:hover .btn-bg{background:var(--paper-32)}
.btn-accent{color:#fff;--roll-color:#fff}
.btn-accent .btn-bg{background:var(--purple)}
.btn-accent:hover .btn-bg{background:var(--purple-deep)}
@media (hover:hover){
  .btn:hover .btn-text{transform:translateY(-20px)}
  .btn-sm:hover .btn-text{transform:translateY(-16px)}
}
@media (max-width:767px){.btn-inner{padding:8px 12px}}
.btn-tertiary{position:relative;display:inline-flex;align-items:center;gap:6px;
  padding-bottom:4px;font-size:16px;line-height:20px}
.btn-tertiary::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s linear}
@media (hover:hover){.btn-tertiary:hover::after{transform:scaleX(1)}}
.chip-circle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:100vw;border:1px solid var(--border-medium);transition:background-color .3s,border-color .3s,color .3s}
@media (hover:hover){.chip-circle:hover{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}}

/* ---------- Background hairline grid ---------- */
.bg-grid{position:fixed;inset:0;max-width:var(--container-large);margin:0 auto;z-index:9;
  pointer-events:none;display:flex;justify-content:space-between;
  padding:0 var(--pad-page)}
.bg-grid span{width:1px;background:var(--ink-8)}
@media (max-width:767px){.bg-grid span:nth-child(n+4){display:none}}

/* ---------- Reveal system (tiers A/B/C) — JS-gated, no-JS shows all ---------- */
.js [data-reveal]{opacity:0;filter:blur(5px)}
.js [data-reveal].in-view{opacity:1;filter:blur(0)}
.js [data-reveal="a"].in-view{transition:opacity 1s ease,filter 1s ease .2s}
.js [data-reveal="b"].in-view{transition:opacity 1.2s ease,filter 1.2s ease .2s}
.js [data-reveal="c"].in-view{transition:opacity 1.4s ease,filter 1.4s ease .2s}

/* ---------- Shared image-motion wrappers ---------- */
.img-wrap{position:relative;overflow:hidden;border-radius:8px;background:var(--surface-card)}
.img-wrap>img{width:100%;height:100%;object-fit:cover}
.img-zoom>img{transition:transform .5s var(--ease-circ)}
@media (hover:hover){.img-zoom:hover>img,a:hover .img-zoom>img,.card-hover:hover .img-zoom>img{transform:scale(1.1)}}
.img-overlay{position:absolute;inset:0;background:var(--overlay-hover);opacity:0;
  transition:opacity .3s ease;pointer-events:none;border-radius:8px}
@media (hover:hover){.card-hover:hover .img-overlay{opacity:.55}}
.arrow-chip{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:100vw;
  display:flex;align-items:center;justify-content:center;background:var(--paper-16);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#fff;
  transition:transform .3s ease;z-index:3}
@media (hover:hover){.card-hover:hover .arrow-chip,.panel:hover .arrow-chip{transform:rotate(45deg)}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;filter:none}
  .parallax-inner,[data-tilt]{transform:none!important}
}