/* Created: 10:31 11-Aug-2026 */
/* Updated: 10:38 11-Aug-2026 */
/* BT1 — BAYTI x Demophorius · base: fonts, tokens, reset, type, buttons, hover recipes */

@font-face { font-family:'Poppins'; src:url('../assets/fonts/poppins-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --bt-ground:#ffffff;
  --bt-ink:#000000;
  --bt-surface-tint:#f4fafa;
  --bt-accent:#534fa0;
  --bt-accent-2:#24bbbb;
  --bt-accent-2-deep:#0f6b6b;
  --bt-accent-dark:#3f3c7a;
  --bt-gradient:linear-gradient(135deg,#24bbbb 0%,#534fa0 100%);
  --bt-card-fill:hsla(0,0%,100%,.3);
  --bt-card-fill-solid:#ffffff;
  --bt-overlay:rgba(0,0,0,.5);
  --bt-tap:rgba(83,79,160,.1);
  --bt-rule:#000000;
  --bt-border-soft:rgba(0,0,0,.12);
  --bt-shadow-card:20px 37px 65px 0 rgba(83,79,160,.15);
  --bt-shadow-popup:0 0 16px 10px rgba(0,0,0,.2);
  --bt-placeholder:#767676;
  --bt-ease:cubic-bezier(.19,1,.22,1);
  --bt-ease-cubic:cubic-bezier(.215,.61,.355,1);
  --bt-ease-circ:cubic-bezier(.075,.82,.165,1);
  --bt-dur:.6s; --bt-dur-slow:1s; --bt-dur-morph:.8s; --bt-dur-image:2s; --bt-dur-linger:3s;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
body {
  font-family:'Poppins',arial,sans-serif; font-weight:300; font-size:16px; line-height:1.5;
  color:var(--bt-ink); background:var(--bt-ground);
  -webkit-tap-highlight-color:var(--bt-tap); overflow-x:hidden;
}
img,video { max-width:100%; display:block; }
ul,ol { list-style:none; }
a { color:inherit; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:#534fa0; color:#fff; }
:focus-visible { outline:2px solid var(--bt-accent); outline-offset:3px; }

/* ---------- Background gradient field ---------- */
.bt-field { position:fixed; inset:0; z-index:-1; background:#fff; overflow:hidden; pointer-events:none; }
.bt-field::before,.bt-field::after { content:""; position:absolute; width:55vw; height:55vw;
  border-radius:50%; filter:blur(120px); opacity:.35; will-change:transform; }
.bt-field::before { background:#24bbbb; top:-15vw; right:-10vw; }
.bt-field::after  { background:#534fa0; bottom:-20vw; left:-12vw; opacity:.25; }

/* ---------- Container & sections ---------- */
.container { width:100%; margin-inline:auto; padding-inline:20px; }
@media (min-width:550px)  { .container { padding-inline:40px; } }
@media (min-width:1024px) { .container { padding-inline:5%; } }
@media (min-width:1740px) { .container { max-width:1740px; padding-inline:15px; } }
.section { margin-top:40px; }
@media (min-width:550px)  { .section { margin-top:60px; } }
@media (min-width:1279px) { .section { margin-top:120px; } }

/* ---------- Type scale ---------- */
.display-xl { font-weight:600; letter-spacing:-.02em; line-height:1.05; font-size:clamp(25px,6.5vw,90px); }
.display-l  { font-weight:600; letter-spacing:-.02em; line-height:1.05; font-size:clamp(35px,6vw,84px); }
.display-m  { font-weight:600; letter-spacing:-.01em; line-height:1.08; font-size:clamp(32px,4.8vw,68px); }
.heading-l  { font-weight:500; line-height:1.25; font-size:clamp(22px,2.9vw,40px); }
.heading-m  { font-weight:500; line-height:1.3;  font-size:clamp(20px,2.1vw,28px); }
.body-l     { font-weight:300; line-height:1.55; font-size:clamp(17px,1.6vw,22px); }
.label-l    { font-weight:500; line-height:1; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(15px,1.4vw,18px); }

.eyebrow { font-weight:500; font-size:clamp(12px,1vw,14px); line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bt-accent-2-deep); }
.eyebrow::before { content:""; display:inline-block; width:34px; height:2px; margin-right:12px;
  vertical-align:middle; background:var(--bt-gradient); }
.eyebrow--bare::before { content:none; }

.grad-text { background:var(--bt-gradient); -webkit-background-clip:text; background-clip:text;
  color:transparent; }

/* ---------- Links: two-bar underline wipe ---------- */
a.uline { position:relative; text-decoration:none; color:#000; transition:color .6s var(--bt-ease); }
a.uline:hover { color:var(--bt-accent); }
a.uline::before,a.uline::after { content:""; position:absolute; left:0; bottom:-2px; width:100%;
  height:1px; background:currentColor; transition:transform .6s var(--bt-ease-cubic); }
a.uline::after  { transform-origin:100% 50%; }
a.uline::before { transform:scaleX(0); transform-origin:0 50%; }
a.uline:hover::after  { transform:scaleX(0); }
a.uline:hover::before { transform:scaleX(1); transition-delay:.5s; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; background:#000; color:#fff; padding:18px 30px; border-radius:40px;
  font-weight:500; font-size:clamp(15px,1.2vw,16px); letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; text-align:center; transition:background 1s var(--bt-ease),transform .3s var(--bt-ease); }
.btn:hover { background:var(--bt-accent); }
.btn:active { background:var(--bt-accent); transform:scale(.98); }
.btn--light { background:#fff; color:#000; }
.btn--light:hover { background:var(--bt-accent); color:#fff; }
.chip { display:inline-block; border:1px solid #000; background:transparent; color:#000;
  padding:14px 26px; border-radius:40px; font-weight:500; font-size:15px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; transition:background 1s var(--bt-ease),color 1s var(--bt-ease); }
.chip:hover { background:#000; color:#fff; }
.chip--inv { border-color:#fff; color:#fff; }
.chip--inv:hover { background:#fff; color:#000; }
.btn-circle { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:50%; background:#000; color:#fff; border:1px solid #000;
  transition:background .6s var(--bt-ease),color .6s var(--bt-ease); }
.btn-circle:hover { background:transparent; color:#000; }
.btn-circle svg { width:22px; height:22px; }

/* ---------- Cards ---------- */
.card { position:relative; background:var(--bt-card-fill); border-radius:10px; padding:25px;
  transition:box-shadow .3s ease; }
.card::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:10px;
  background:#fff; opacity:0; transition:opacity .6s var(--bt-ease); }
.card:hover { box-shadow:var(--bt-shadow-card); }
.card:hover::after { opacity:1; }

/* ---------- Image hover recipes (gated to hover devices) ---------- */
.img-hover { position:relative; overflow:hidden; border-radius:10px; }
.img-hover img { width:100%; height:100%; object-fit:cover; }
.img-hover .veil { position:absolute; inset:0; background:var(--bt-gradient); opacity:0;
  transform:translateY(20%); pointer-events:none;
  transition:opacity .6s var(--bt-ease),transform .6s var(--bt-ease); }
.img-hover .cap { position:absolute; left:25px; bottom:20px; color:#fff; z-index:1;
  transform:translateY(160%); transition:transform .6s var(--bt-ease) .1s; }
.dot { display:inline-block; width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--bt-accent-2); transition:transform var(--bt-dur-linger) var(--bt-ease-circ); }
.dot--purple { background:var(--bt-accent); }
.arrow-diag { display:inline-flex; opacity:0; transform:translate3d(-20px,20px,0);
  transition:opacity .6s var(--bt-ease),transform .6s var(--bt-ease); color:var(--bt-accent); }
.arrow-diag svg { width:22px; height:22px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  /* R1 · ken-burns zoom */
  .img-hover img { transform:scale(1); transition:transform 2s var(--bt-ease); will-change:transform; }
  .img-hover img[data-tilt-img] { transition:none; } /* R3 tilt is JS-driven — no CSS transition */
  .card:hover .img-hover img,.img-hover.hov:hover img { transform:scale(1.08); }
  /* R2 · gradient veil slide */
  .card:hover .veil,.img-hover.hov:hover .veil { opacity:.28; transform:translateY(0); }
  .card:hover .cap,.img-hover.hov:hover .cap { transform:none; }
  /* R4 · dot linger + diagonal arrow */
  .card:hover .dot { transform:scale(1.5); transition-duration:.6s; }
  .card:hover .arrow-diag { opacity:1; transform:translateZ(0); }
  /* standalone logos (header brand / footer plate) — subtle zoom */
  .brand img,.logo-plate img { transition:transform .6s var(--bt-ease); }
  .brand:hover img { transform:scale(1.04); }
  .logo-plate:hover img { transform:scale(1.05); }
}
@media (hover:none) { .arrow-diag { opacity:1; transform:none; } .img-hover .cap { transform:none; } }
@media (prefers-reduced-motion:reduce) { .arrow-diag { opacity:1; transform:none; } .img-hover .cap { transform:none; } }

/* ---------- Scroll reveal (JS adds .js-on to <html>; IO adds .in) ---------- */
@media (prefers-reduced-motion:no-preference) {
  .js-on .rv { opacity:0; transform:translateY(60px);
    transition:opacity 1.4s var(--bt-ease),transform 1.4s var(--bt-ease);
    transition-delay:var(--rv-delay,0s); will-change:opacity,transform; }
  .js-on .rv.in { opacity:1; transform:none; }
  .js-on .rv-rule { transform:scaleX(0); transform-origin:0 50%;
    transition:transform 1.5s var(--bt-ease-circ); }
  .js-on .rv-rule.in { transform:scaleX(1); }
  .rv-mask { overflow:hidden; }
  .js-on .rv-mask > * { transform:translateY(110%); transition:transform .8s var(--bt-ease-circ);
    transition-delay:var(--rv-delay,0s); }
  .js-on .rv-mask.in > * { transform:none; }
  .js-on .rv-img img { transform:scale(1.4); transition:transform 2s var(--bt-ease-circ); }
  .js-on .rv-img.in img { transform:scale(1); }
}

/* ---------- Section header unit ---------- */
.sec-head { margin-bottom:40px; }
@media (min-width:1024px) { .sec-head { margin-bottom:60px; } }
.sec-head hr { border:0; border-top:1px solid var(--bt-rule); margin-bottom:30px; }
.sec-head .eyebrow { display:block; margin-bottom:18px; }

/* ---------- Utilities ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.demo-note { display:none; }