/* =========================================================
   New Balls Management — "Court Lines"
   Palette: beige / white / black / grey
   ========================================================= */

:root{
  /* canvas + paper (beige #eeede9) */
  --sand:      #EEEDE9;
  --sand-2:    #F4F3EF;
  --sand-deep: #E2E1DB;
  --paper:     #FBFBF9;
  --white:     #FFFFFF;

  /* ink + grey (black #1b1b1b) */
  --ink:      #1B1B1B;
  --ink-2:    #333230;
  --grey:     #565247;
  --grey-2:   #676150;
  --line:     #CFC6B3;
  --line-2:   #BCB29A;

  /* old-money accents */
  --green:      #234B36;
  --green-deep: #1B3A2B;
  --green-2:    #4E7C46;
  --gold:       #B08D3E;
  --gold-2:     #C7A65A;

  --shadow-sm: 0 1px 2px rgba(21,20,15,.05), 0 6px 18px rgba(21,20,15,.05);
  --shadow-md: 0 8px 30px rgba(21,20,15,.10), 0 2px 8px rgba(21,20,15,.06);
  --shadow-lg: 0 30px 70px rgba(21,20,15,.18);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: "Times New Roman MT", "Times New Roman", Times, serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: "Be Vietnam Pro", system-ui, sans-serif;

  /* duotone for photos -> keeps everything beige/grey */
  --img-filter: grayscale(1) brightness(1.08) sepia(.34) contrast(1.0);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  font-family:var(--font-body);
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(16px, 1.05vw, 17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px }
::selection{ background:var(--ink); color:var(--paper); text-shadow:none }
::-moz-selection{ background:var(--ink); color:var(--paper); text-shadow:none }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }

.tinted{ filter:var(--img-filter) }

/* ---------- type helpers ---------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.02em;
  font-size:clamp(2rem, 5.2vw, 4rem);
}
.eyebrow,.index{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
}
.index{ display:block; margin-bottom:1.1rem; color:var(--grey-2) }
.index.center,.center{ text-align:center }
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-2); line-height:1.55 }
.muted{ color:var(--grey-2) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-display); font-weight:500;
  border-radius:100px; line-height:1;
  transition:transform .35s var(--ease-out), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition:transform .35s var(--ease-out) }
.btn--solid{ background:var(--green); color:var(--paper); padding:.95em 1.5em }
.btn--solid:hover{ background:var(--green-deep); box-shadow:var(--shadow-md) }
.btn--solid:hover svg{ transform:translateX(4px) }
.btn--ghost{ padding:.9em 1.4em; border:1px solid var(--line-2); color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn--sm{ padding:.7em 1.15em; font-size:.92rem }
.btn--lg{ padding:1.05em 1.7em; font-size:1.02rem }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--sand) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line);
  padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700 }
.brand-logo{ display:block; height:40px; width:auto }
.brand-logo--light{ filter:brightness(0) invert(1) }
.footer__brand .brand-logo{ height:48px }
@media (max-width:560px){ .brand-logo{ height:32px } }
.brand__mark{ color:var(--ink); display:grid; place-items:center }
.brand__name{ display:flex; flex-direction:column; line-height:1; font-size:1.05rem; letter-spacing:-.01em }
.brand__sub{ font-family:var(--font-mono); font-weight:400; font-size:.58rem; letter-spacing:.22em; color:var(--grey-2); margin-top:3px }

.nav{ display:flex; gap:2rem; margin-left:auto; margin-right:.5rem }
.nav a{ font-size:.95rem; color:var(--ink-2); position:relative; padding-block:.3rem }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out) }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__contact-btn{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:.95rem; color:var(--ink-2); position:relative; padding-block:.3rem; padding-inline:0 }
.nav__contact-btn::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out) }
.nav__contact-btn:hover::after{ transform:scaleX(1); transform-origin:left }

.menu-toggle{ display:none; width:42px; height:42px; flex-direction:column; gap:6px; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:10px }
.menu-toggle span{ width:18px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.8px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.8px) rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:45;
  background:var(--sand);
  display:flex; flex-direction:column; justify-content:center; gap:1.2rem;
  padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform .5s var(--ease-out);
}
.mobile-menu.open{ transform:translateY(0) }
.mobile-menu a{ font-family:var(--font-display); font-size:2rem; font-weight:500 }
.mobile-menu .btn{ font-size:1.1rem; align-self:flex-start; margin-top:1rem }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-bottom:clamp(40px,7vh,90px); overflow:hidden }
.hero__media{ position:absolute; inset:0; z-index:-1 }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.06); will-change:transform }
.hero-photo{ filter:saturate(1.06) contrast(1.04) }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(232,225,211,.42) 0%, rgba(232,225,211,.06) 24%, rgba(21,20,15,.22) 46%, rgba(21,20,15,.46) 76%, rgba(21,20,15,.68) 100%);
}
.hero__inner{ position:relative; padding-top:120px }
.hero .eyebrow{ color:var(--paper); font-weight:700; display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.4rem; text-shadow:0 1px 3px rgba(21,20,15,.65), 0 2px 16px rgba(21,20,15,.55) }
.hero .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 0 rgba(247,244,237,.7); animation:pulse 2.4s var(--ease) infinite }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(247,244,237,.6)} 70%{box-shadow:0 0 0 10px rgba(247,244,237,0)} 100%{box-shadow:0 0 0 0 rgba(247,244,237,0)} }

.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.7rem, 8.5vw, 6.6rem);
  line-height:.98; letter-spacing:-.03em; color:var(--paper);
  text-shadow:0 2px 30px rgba(0,0,0,.28);
  max-width:16ch;
}
.hero__title .line{ display:block; overflow:hidden }
.hero__title em{ font-style:italic; font-weight:400 }
.hero__title .line--muted{ color:color-mix(in srgb, var(--paper) 72%, var(--grey-2)) }
.hero__lead{ color:var(--paper); max-width:46ch; margin-top:1.6rem; font-size:clamp(1.05rem,1.5vw,1.25rem); text-shadow:0 1px 3px rgba(21,20,15,.5), 0 2px 20px rgba(21,20,15,.5) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem }
.hero .btn--ghost{ color:var(--paper); border-color:rgba(247,244,237,.45) }
.hero .btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper) }

.court-widget{
  position:absolute; right:var(--gutter); bottom:clamp(40px,7vh,90px); z-index:2;
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(247,244,237,.16); border-radius:12px;
  padding:14px 16px; min-width:155px;
  font-family:var(--font-mono); color:var(--paper);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
}
.court-widget__svg{ color:rgba(247,244,237,.72); width:148px; height:auto; display:block; margin-bottom:8px }
.court-widget__sport{ font-size:.62rem; letter-spacing:.07em; color:rgba(247,244,237,.42); text-transform:uppercase; margin-bottom:11px }
.court-widget__div{ height:1px; background:rgba(247,244,237,.12); margin-bottom:10px }
.court-widget__row{ display:flex; justify-content:space-between; gap:1.5rem; font-size:.72rem; letter-spacing:.06em; padding:4px 0 }
.court-widget__row span{ color:var(--grey-2) }
.court-widget__row b{ font-weight:700 }
.court-widget__row .ok{ color:#cfe8c0 }
@media(max-width:768px){ .court-widget{ display:none } }

.scroll-hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); width:24px; height:38px; border:1.5px solid rgba(247,244,237,.6); border-radius:14px; display:grid; place-items:start center; padding-top:7px; z-index:2 }
.scroll-hint span{ width:3px; height:7px; background:var(--paper); border-radius:2px; animation:scrolldot 1.8s var(--ease) infinite }
@keyframes scrolldot{ 0%{opacity:0; transform:translateY(-3px)} 40%{opacity:1} 80%{opacity:0; transform:translateY(10px)} 100%{opacity:0} }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{ background:var(--ink); color:var(--paper); padding:16px 0; overflow:hidden; border-block:1px solid var(--ink) }
.ticker__track{ display:flex; gap:1.6rem; width:max-content; align-items:center; font-family:var(--font-display); font-size:1.05rem; font-weight:500; animation:marquee 26s linear infinite }
.ticker__track .sep{ color:var(--grey-2) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* =========================================================
   SECTION base
   ========================================================= */
.section{ padding-block:clamp(72px,10vw,140px); position:relative }
.section__head{ margin-bottom:clamp(2.4rem,5vw,4rem) }
.section__head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap }
.section__note{ max-width:38ch; color:var(--grey); font-size:1.05rem }
.grid-2{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start }

/* ---------- PROBLEM ---------- */
.problem{ background:var(--sand-2); border-block:1px solid var(--line) }
.problem .display{ font-size:clamp(2rem,4.6vw,3.4rem) }
.problem__body{ padding-top:.6rem }
.problem__body .lead + .lead{ margin-top:1.2rem }

.chaos{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(3rem,6vw,5rem) }
.chip{
  font-family:var(--font-mono); font-size:.85rem; color:var(--grey);
  background:var(--paper); border:1px solid var(--line);
  padding:.6em 1.1em; border-radius:100px;
  animation:float 6s var(--ease) infinite;
  animation-delay:calc(var(--i) * -.7s);
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@media (prefers-reduced-motion: reduce){ .chip{ animation:none } }

/* ---------- MANIFESTO ---------- */
.manifesto{ text-align:center; background:var(--ink); color:var(--paper); overflow:hidden }
.manifesto .index{ color:var(--grey-2) }
.manifesto__big{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(3rem,12vw,9rem); line-height:.95; letter-spacing:-.035em;
  margin:.4rem 0 1.6rem;
}
.manifesto__big span{ display:inline-block }
.manifesto__big .muted{ color:color-mix(in srgb,var(--paper) 40%, var(--grey)) }
.manifesto__sub{ max-width:54ch; margin-inline:auto; color:color-mix(in srgb,var(--paper) 80%, transparent); font-size:clamp(1.05rem,1.6vw,1.3rem) }

/* ---------- PLATFORM / FEATURES ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.4vw,20px) }
.feature{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,2vw,30px);
  min-height:300px; display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-2) }
.feature__top{ display:flex; align-items:center; justify-content:space-between }
.feature__no{ font-family:var(--font-mono); font-size:.8rem; color:var(--grey-2) }
.feature__icon{ color:var(--ink); display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--sand); border:1px solid var(--line); transition:background .4s var(--ease), color .4s var(--ease) }
.feature:hover .feature__icon{ background:var(--green); color:var(--paper) }
.feature h3{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:1.4rem 0 .55rem; letter-spacing:-.01em; min-height:3.2rem; display:flex; align-items:flex-start }
.feature p{ color:var(--grey); font-size:.96rem; line-height:1.55; flex:1 }
.feature .feature__tag{ margin-top:auto; align-self:flex-start }

/* ---------- LIFTING ---------- */
.lifting__grid{ grid-template-columns:1fr 1fr; align-items:center }
.lifting__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg) }
.lifting__media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover }
.lifting__badge{
  position:absolute; left:18px; bottom:18px; right:18px;
  background:color-mix(in srgb,var(--paper) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.lifting__badge .mono{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color:var(--grey-2) }
.lifting__badge strong{ font-family:var(--font-display); font-weight:600; font-size:1.05rem }
.checklist{ list-style:none; margin-top:2rem; display:flex; flex-direction:column; gap:1.1rem }
.checklist li{ display:flex; gap:1rem; align-items:flex-start; font-size:1.12rem; color:var(--ink-2); padding-bottom:1.1rem; border-bottom:1px solid var(--line) }
.checklist li:last-child{ border-bottom:none }
.check{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-size:.8rem; margin-top:2px }

/* ---------- NETWORK ---------- */
.network{ background:var(--sand-2); border-block:1px solid var(--line) }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:clamp(2.4rem,5vw,4rem) }
.stat{ background:var(--paper); padding:clamp(22px,3vw,38px) 22px; text-align:center }
.stat__num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; letter-spacing:-.03em }
.stat__label{ display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey) }

.network__map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md) }
.network__map img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.network__map .court-map{ display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain }

.flag-marquee{ margin-top:2rem; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0 }
.flag-marquee__track{ display:flex; gap:1.3rem; width:max-content; align-items:center; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.05em; color:var(--grey); text-transform:uppercase; animation:marquee 30s linear infinite }
.flag-marquee__track .d{ color:var(--line-2); font-size:.6rem }

/* ---------- ACCESS / CTA ---------- */
.access{ position:relative; color:var(--paper); text-align:center; overflow:hidden; padding-block:clamp(90px,13vw,170px) }
.access__media{ position:absolute; inset:0; z-index:-1 }
.access__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55% }
.access__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,20,15,.72), rgba(21,20,15,.82)) }
.access .index.light{ color:color-mix(in srgb,var(--paper) 70%, transparent) }
.access__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,11vw,8rem); line-height:.95; letter-spacing:-.035em; margin:.3rem 0 1.2rem }
.access__sub{ max-width:52ch; margin:0 auto 2.4rem; color:color-mix(in srgb,var(--paper) 85%, transparent); font-size:clamp(1.05rem,1.6vw,1.25rem) }
.access__alt{ margin-top:1.6rem; font-size:.95rem; color:color-mix(in srgb,var(--paper) 70%, transparent) }
.access__alt a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px }
.access__alt a:hover{ opacity:.85 }
.access__note{ margin-top:.9rem; font-size:.85rem; color:color-mix(in srgb,var(--paper) 60%, transparent) }

/* skip link (a11y) */
.skip-link{ position:absolute; top:-100px; left:1rem; z-index:400; background:var(--ink); color:var(--paper); padding:.7rem 1.2rem; border-radius:8px; font-size:.9rem; transition:top .2s }
.skip-link:focus{ top:1rem }

/* mobile menu contact button */
.mobile-menu__contact{ background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; padding:0 }

/* FAQ */
.faq__list{ max-width:720px; margin:0 auto; display:grid; gap:.8rem }
.faq__item{ background:var(--paper); border:1px solid var(--sand-deep); border-radius:var(--r); overflow:hidden }
.faq__item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 1.4rem; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink) }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:"+"; font-size:1.4rem; font-weight:400; color:var(--grey); flex:none; transition:transform .3s var(--ease) }
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__item p{ padding:0 1.4rem 1.25rem; color:var(--grey); font-size:.96rem; line-height:1.6 }
.faq__item a{ color:var(--green); text-decoration:underline; text-underline-offset:3px }

.access__form{ max-width:540px; margin-inline:auto }
.field{ display:flex; gap:.5rem; background:var(--paper); border-radius:100px; padding:6px; box-shadow:var(--shadow-lg) }
.field input{ flex:1; border:none; background:transparent; padding:0 1.3rem; font-size:1rem; color:var(--ink); min-width:0 }
.field input::placeholder{ color:var(--grey-2) }
.field input:focus{ outline:none }
.field .btn{ flex:none }
.field__msg{ margin-top:1rem; font-family:var(--font-mono); font-size:.85rem; min-height:1.2em; color:color-mix(in srgb,var(--paper) 80%, transparent) }
.field__msg.ok{ color:#cfe8c0 }
.field__msg.ok a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.field__msg.err{ color:#f0c5bd }
.field.invalid{ box-shadow:0 0 0 2px #f0c5bd, var(--shadow-lg) }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--paper); padding-block:clamp(40px,5vw,64px) }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; justify-content:space-between }
.footer__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600 }
.footer__brand .brand__mark{ color:var(--paper) }
.footer__nav{ display:flex; gap:1.6rem; flex-wrap:wrap }
.footer__nav a{ font-size:.92rem; color:color-mix(in srgb,var(--paper) 78%, transparent); transition:color .3s }
.footer__nav a:hover{ color:var(--paper) }
.footer__nav--legal{ margin-top:.2rem }
.footer__link-btn{ background:none; border:none; cursor:pointer; font-size:.92rem; color:color-mix(in srgb,var(--paper) 78%, transparent); transition:color .3s; padding:0; font-family:inherit }
.footer__link-btn:hover{ color:var(--paper) }
.footer__meta{ width:100%; font-family:var(--font-mono); font-size:.74rem; color:var(--grey-2); border-top:1px solid rgba(247,244,237,.12); padding-top:1.4rem; margin-top:.4rem }

/* ---------- CONTACT DRAWER ---------- */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(27,27,27,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:200; opacity:0; pointer-events:none; transition:opacity .35s var(--ease) }
.drawer-backdrop.open{ opacity:1; pointer-events:all }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(460px,100vw); background:var(--paper); z-index:201; transform:translateX(100%); transition:transform .4s var(--ease-out); overflow-y:auto; box-shadow:-8px 0 48px rgba(0,0,0,.18) }
.drawer.open{ transform:translateX(0) }
.drawer__inner{ padding:clamp(28px,5vw,52px) clamp(24px,4vw,40px) }
.drawer__close{ position:sticky; top:0; float:right; background:var(--sand); border:none; border-radius:50%; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; color:var(--ink); margin-bottom:1.5rem; transition:background .25s }
.drawer__close:hover{ background:var(--line-2) }
.drawer__label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--grey-2); text-transform:uppercase; margin-bottom:.6rem }
.drawer__title{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2rem); font-weight:600; letter-spacing:-.02em; margin-bottom:.5rem }
.drawer__sub{ font-size:.96rem; color:var(--grey); line-height:1.55; margin-bottom:2rem }
.drawer__field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem }
.drawer__field label{ font-size:.82rem; font-weight:600; color:var(--ink-2); letter-spacing:.02em }
.drawer__field input, .drawer__field textarea{ border:1.5px solid var(--line); border-radius:var(--r); padding:.7rem 1rem; font-family:inherit; font-size:.96rem; background:var(--sand); color:var(--ink); resize:none; transition:border-color .25s }
.drawer__field input:focus, .drawer__field textarea:focus{ outline:none; border-color:var(--green) }
.btn--full{ width:100%; justify-content:center }
.drawer__form-msg{ font-size:.85rem; margin-top:.75rem; min-height:1.2em; color:var(--green) }
.drawer__divider{ display:flex; align-items:center; gap:1rem; margin:1.8rem 0; color:var(--grey-2); font-size:.8rem }
.drawer__divider::before,.drawer__divider::after{ content:''; flex:1; height:1px; background:var(--line) }
.drawer__channels{ display:flex; flex-direction:column; gap:.75rem }
.drawer__channel{ display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; border:1.5px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none; font-size:.95rem; transition:border-color .25s, background .25s }
.drawer__channel:hover{ border-color:var(--green); background:color-mix(in srgb,var(--green) 6%, transparent) }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:calc(var(--reveal-delay,0) * 90ms) }
[data-reveal].in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none }
}

/* custom cursor (desktop pointer only, set by JS) */
.cursor{ position:fixed; top:0; left:0; width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%; pointer-events:none; z-index:100; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s; opacity:0; mix-blend-mode:difference; display:none }
.cursor.active{ background:var(--paper); width:54px; height:54px }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .features{ grid-template-columns:repeat(2,1fr) }
  .stats{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 860px){
  .nav, .nav__cta{ display:none }
  .menu-toggle{ display:flex }
  .grid-2{ grid-template-columns:1fr; gap:2rem }
  .section__head--row{ align-items:flex-start }
  .lifting__grid{ grid-template-columns:1fr }
  .lifting__copy{ order:-1 }
  .scoreboard{ display:none }
}
@media (max-width: 560px){
  .features{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr 1fr }
  .field{ flex-direction:column; border-radius:18px; padding:10px }
  .field input{ padding:.9rem 1rem; text-align:center }
  .field .btn{ justify-content:center }
  .hero__title{ font-size:clamp(2.6rem,12vw,4rem) }
  .footer__inner{ flex-direction:column; align-items:flex-start }
}

/* =========================================================
   HEADER — login action
   ========================================================= */
.nav__actions{ display:flex; align-items:center; gap:1.1rem }
.nav__login{ font-family:var(--font-display); font-weight:500; font-size:.95rem; position:relative; padding-block:.3rem }
.nav__login::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out) }
.nav__login:hover::after{ transform:scaleX(1); transform-origin:left }

/* =========================================================
   APP PREVIEW (inside the platform)
   ========================================================= */
.app-preview__frame{
  margin-top:clamp(2rem,4vw,3rem);
  background:linear-gradient(180deg, var(--paper), var(--sand-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(14px,2.4vw,30px); box-shadow:var(--shadow-lg);
}
.mock{
  display:grid; grid-template-columns:190px 1fr;
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; min-height:380px;
}
.mock__side{ background:var(--ink); color:var(--paper); padding:20px 16px; display:flex; flex-direction:column; gap:18px }
.mock__brand{ font-family:var(--font-display); font-weight:700; display:flex; align-items:center; gap:.5rem; font-size:1.05rem }
.mock__dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--paper) }
.mock__nav{ display:flex; flex-direction:column; gap:2px }
.mock__nav span{ font-size:.86rem; padding:.55em .7em; border-radius:8px; color:color-mix(in srgb,var(--paper) 65%,transparent) }
.mock__nav .is-active{ background:rgba(247,244,237,.12); color:var(--paper) }
.mock__main{ padding:clamp(16px,2vw,26px); display:flex; flex-direction:column; gap:18px }
.mock__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.mock__bar strong{ font-family:var(--font-display); font-size:1.15rem }
.mock__pill{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; background:var(--sand); border:1px solid var(--line); padding:.45em .8em; border-radius:100px; color:var(--grey) }
.mock__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.mock__card{ background:var(--sand-2); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:4px }
.mock__k{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2) }
.mock__v{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1 }
.mock__v.ok{ font-size:1.4rem; color:var(--ink) }
.mock__t{ font-size:.78rem; color:var(--grey) }
.mock__chart{ flex:1; display:flex; align-items:flex-end; gap:8px; padding-top:8px; border-top:1px solid var(--line); min-height:120px }
.mock__chart span{ flex:1; height:var(--h); background:linear-gradient(180deg,var(--ink-2),var(--ink)); border-radius:5px 5px 0 0; opacity:.88; transform-origin:bottom; animation:growbar 1s var(--ease-out) both }
@keyframes growbar{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@media (prefers-reduced-motion: reduce){ .mock__chart span{ animation:none } }
.app-preview__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem }

/* =========================================================
   DOWNLOADS
   ========================================================= */
.downloads{ background:var(--sand-2); border-block:1px solid var(--line) }
.download-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px) }
.download-card{
  display:flex; align-items:center; gap:1.2rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.download-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-2) }
.download-card__icon{ flex:none; width:54px; height:54px; border-radius:13px; background:var(--sand); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:background .4s var(--ease), color .4s var(--ease) }
.download-card:hover .download-card__icon{ background:var(--green); color:var(--paper) }
.download-card__body{ flex:1; min-width:0 }
.download-card__kind{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2) }
.download-card__body h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:.3rem 0 .35rem }
.download-card__body p{ color:var(--grey); font-size:.92rem; line-height:1.5 }
.download-card__dl{ flex:none; color:var(--grey); transition:transform .4s var(--ease-out), color .4s var(--ease) }
.download-card:hover .download-card__dl{ color:var(--ink); transform:translateY(3px) }

/* =========================================================
   CHAT WIDGET
   ========================================================= */
.chat{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:80 }
.chat__toggle{
  width:60px; height:60px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease-out), background .3s var(--ease);
  position:relative; margin-left:auto;
}
.chat__toggle:hover{ transform:scale(1.06); background:var(--ink-2) }
.chat__ic{ position:absolute; transition:opacity .3s var(--ease), transform .3s var(--ease) }
.chat__ic--close{ opacity:0; transform:rotate(-90deg) scale(.6) }
.chat.open .chat__ic--open{ opacity:0; transform:rotate(90deg) scale(.6) }
.chat.open .chat__ic--close{ opacity:1; transform:none }

.chat__panel{
  position:absolute; right:0; bottom:74px;
  width:min(370px, calc(100vw - 32px)); height:min(520px, calc(100vh - 120px));
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.chat.open .chat__panel{ opacity:1; transform:none; pointer-events:auto }
@media (prefers-reduced-motion: reduce){ .chat__panel{ transition:none } }

.chat__head{ display:flex; align-items:center; gap:.8rem; padding:16px 18px; background:var(--ink); color:var(--paper) }
.chat__avatar{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(247,244,237,.25); display:grid; place-items:center; flex:none }
.chat__id{ display:flex; flex-direction:column; line-height:1.25 }
.chat__id strong{ font-family:var(--font-display); font-size:.98rem }
.chat__id span{ font-size:.74rem; color:color-mix(in srgb,var(--paper) 65%,transparent); display:flex; align-items:center; gap:.4rem }
.chat__status{ width:7px; height:7px; border-radius:50%; background:#9fd17f }

.chat__log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth }
.msg{ max-width:84%; padding:.7em .95em; border-radius:14px; font-size:.92rem; line-height:1.45; animation:msgin .35s var(--ease-out) both }
@keyframes msgin{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .msg{ animation:none } }
.msg--bot{ align-self:flex-start; background:var(--sand-2); border:1px solid var(--line); color:var(--ink-2); border-bottom-left-radius:5px }
.msg--user{ align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:5px }
.msg a{ text-decoration:underline }
.msg--bot.typing{ display:flex; gap:4px; align-items:center }
.msg--bot.typing span{ width:6px; height:6px; border-radius:50%; background:var(--grey-2); animation:blink 1.2s infinite }
.msg--bot.typing span:nth-child(2){ animation-delay:.2s } .msg--bot.typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }

.chat__quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px }
.chat__quick button{ font-family:var(--font-mono); font-size:.72rem; padding:.5em .8em; border:1px solid var(--line); border-radius:100px; color:var(--grey); background:var(--paper); transition:background .25s, color .25s, border-color .25s }
.chat__quick button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.chat__form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:var(--paper) }
.chat__form input{ flex:1; border:1px solid var(--line); background:var(--sand-2); border-radius:100px; padding:.7em 1em; font-size:.92rem; color:var(--ink); min-width:0 }
.chat__form input:focus{ outline:none; border-color:var(--line-2) }
.chat__form button{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transition:background .25s, transform .25s var(--ease-out) }
.chat__form button:hover{ background:var(--ink-2); transform:scale(1.05) }

/* app-preview + downloads + chat responsive */
@media (max-width: 860px){
  .mock{ grid-template-columns:1fr }
  .mock__side{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px }
  .mock__nav{ flex-direction:row; flex-wrap:wrap }
  .download-grid{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .mock__cards{ grid-template-columns:1fr }
  .download-card{ flex-wrap:wrap }
}

/* =========================================================
   HERO — kinetic title + self-drawing court lines
   ========================================================= */
.hero__inner{ z-index:2 }
.hero__title .line{ overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em }
.hero__title .line__in{ display:block; transform:translateY(115%); animation:heroLineUp 1.05s var(--ease-out) both; animation-delay:var(--d,0s) }
@keyframes heroLineUp{ from{ transform:translateY(115%) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion: reduce){
  .hero__title .line__in{ transform:none; animation:none }
}


/* =========================================================
   FEATURES — bento layout
   ========================================================= */
.features{ grid-auto-rows:minmax(210px, 1fr) }
.feature--lead{
  grid-column:span 2; grid-row:span 2;
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.feature--lead:hover{ border-color:var(--ink-2); box-shadow:var(--shadow-lg) }
.feature--lead .feature__no{ color:var(--grey-2) }
.feature--lead .feature__icon{ background:rgba(247,244,237,.08); border-color:rgba(247,244,237,.18); color:var(--paper) }
.feature--lead:hover .feature__icon{ background:var(--paper); color:var(--ink) }
.feature--lead h3{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); margin-top:1.8rem }
.feature--lead p{ color:color-mix(in srgb, var(--paper) 78%, transparent); max-width:44ch; font-size:1.02rem }
.feature__viz{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.55rem; border-top:1px solid rgba(247,244,237,.14); padding-top:1.3rem }
.viz-row{ display:flex; gap:1rem; align-items:center; font-size:.94rem; color:color-mix(in srgb, var(--paper) 88%, transparent) }
.viz-row .mono{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; color:var(--grey-2); min-width:48px }
@media (max-width: 1024px){
  .feature--lead{ grid-column:1 / -1; grid-row:auto }
}
@media (max-width: 560px){
  .feature--lead h3{ font-size:1.5rem; margin-top:1.2rem }
}

/* =========================================================
   HERO — rotating word
   ========================================================= */
.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 }
.rotator{ position:relative; display:inline-block; vertical-align:bottom; height:1.05em; line-height:1; transition:width .6s var(--ease-out) }
.rotator__word{
  position:absolute; left:0; top:0; white-space:nowrap; font-weight:600;
  transform:translateY(160%); opacity:0;
  transition:transform .65s var(--ease-out), opacity .45s var(--ease);
}
.rotator__word.is-active{ transform:translateY(0); opacity:1 }
@media (prefers-reduced-motion: reduce){ .rotator__word{ transition:none } }

/* =========================================================
   GRAIN TEXTURE (subtle film grain over everything)
   ========================================================= */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px; opacity:.045; mix-blend-mode:multiply;
}

/* =========================================================
   CARD TILT + SPOTLIGHT
   ========================================================= */
.tilt{ position:relative; transform-style:preserve-3d; will-change:transform }
.feature.tilt:hover,
.download-card.tilt:hover{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}
.tilt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease); mix-blend-mode:soft-light;
}
.tilt:hover::after{ opacity:1 }
.feature--lead.tilt::after{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(247,244,237,.18), transparent 60%);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: reduce){
  .feature.tilt:hover, .download-card.tilt:hover{ transform:translateY(-6px) }
}

/* =========================================================
   STEPS — getting started
   ========================================================= */
.steps__grid{
  list-style:none; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,3rem);
}
.steps__grid::before{
  content:""; position:absolute; top:28px; left:16.6%; right:16.6%; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent) 12%, color-mix(in srgb, var(--gold) 60%, transparent) 88%, transparent);
  z-index:0;
}
.step{ text-align:center; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center }
.step__no{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  border:1px solid var(--gold); background:var(--paper); color:var(--green);
  font-family:var(--font-mono); font-size:1rem; margin-bottom:1.6rem;
  box-shadow:var(--shadow-sm);
}
.step h3{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-bottom:.5rem; letter-spacing:-.01em }
.step p{ color:var(--grey); font-size:.98rem; line-height:1.55; max-width:32ch }

/* =========================================================
   NETWORK PINS
   ========================================================= */
.network__map{ position:relative }
.pin{ position:absolute; transform:translate(-50%,-50%); z-index:3 }
.pin__dot{ width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--green-deep); display:block; position:relative }
.pin__dot::before{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--gold);
  animation:pinPulse 2.4s var(--ease-out) infinite; animation-delay:var(--pd,0s);
}
@keyframes pinPulse{ 0%{ transform:scale(.5); opacity:.9 } 100%{ transform:scale(2.6); opacity:0 } }
.pin__label{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  background:var(--green-deep); color:var(--paper); padding:.28em .55em; border-radius:5px;
  white-space:nowrap; box-shadow:var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce){ .pin__dot::before{ animation:none } }

@media (max-width: 720px){
  .steps__grid{ grid-template-columns:1fr; gap:2rem }
  .steps__grid::before{ display:none }
}

/* =========================================================
   FEATURE TAG PILLS + 4-STEP GRID + title em accent
   ========================================================= */
.feature__tag{
  display:inline-flex; align-self:flex-start; margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em;
  color:var(--green); background:color-mix(in srgb, var(--green) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 22%, transparent);
  padding:.45em .8em; border-radius:100px;
}
.display em{ font-style:italic; color:var(--green) }

.steps__grid--4{ grid-template-columns:repeat(4,1fr) }
.steps__grid--4::before{ left:12.5%; right:12.5% }
@media (max-width: 980px){
  .steps__grid--4{ grid-template-columns:repeat(2,1fr); row-gap:2.6rem }
  .steps__grid--4::before{ display:none }
}
@media (max-width: 560px){
  .steps__grid--4{ grid-template-columns:1fr }
}
.steps__grid--5{ grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem,2.2vw,2rem) }
.steps__grid--5::before{ left:10%; right:10% }
@media (max-width: 1040px){
  .steps__grid--5{ grid-template-columns:repeat(3,1fr); row-gap:2.6rem }
  .steps__grid--5::before{ display:none }
}
@media (max-width: 680px){ .steps__grid--5{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 460px){ .steps__grid--5{ grid-template-columns:1fr } }

/* =========================================================
   AI CHAT DEMO
   ========================================================= */
.chatdemo-grid{ align-items:center }
.chatdemo-copy .lead{ margin-top:1.4rem; max-width:42ch }
.chatdemo-list{ margin-top:2rem }
.chatdemo{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg) }
.chatdemo__head{ display:flex; align-items:center; gap:.8rem; padding:16px 18px; background:var(--green); color:var(--paper) }
.chatdemo__avatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(247,244,237,.14); border:1px solid rgba(247,244,237,.2); font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.04em }
.chatdemo__name{ font-family:var(--font-display); font-weight:600; font-size:.98rem }
.chatdemo__status{ font-size:.74rem; color:color-mix(in srgb, var(--paper) 70%, transparent); display:flex; align-items:center; gap:.4rem }
.chatdemo__body{ padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--sand-2) }
.cd-bubble{ max-width:86%; padding:.7em .95em; border-radius:14px; font-size:.92rem; line-height:1.45 }
.cd-bubble--ai{ align-self:flex-start; background:var(--paper); border:1px solid var(--line); color:var(--ink-2); border-bottom-left-radius:5px }
.cd-bubble--user{ align-self:flex-end; background:var(--green); color:var(--paper); border-bottom-right-radius:5px }
.cd-typing{ align-self:flex-start; display:flex; gap:4px; align-items:center; padding:.85em 1em; background:var(--paper); border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:5px }
.cd-typing span{ width:6px; height:6px; border-radius:50%; background:var(--grey-2); animation:blink 1.2s infinite }
.cd-typing span:nth-child(2){ animation-delay:.2s } .cd-typing span:nth-child(3){ animation-delay:.4s }
@media (prefers-reduced-motion: reduce){ .cd-typing span{ animation:none } }

/* =========================================================
   PRICING
   ========================================================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); max-width:760px; margin-inline:auto }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease) }
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md) }
.price-card--featured{ border:2px solid var(--green); position:relative }
.price-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--green); color:var(--paper); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; padding:.4em .85em; border-radius:100px; white-space:nowrap }
.price-tier{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }
.price-amount{ font-family:var(--font-display); font-weight:700; font-size:3rem; line-height:1; margin:.55rem 0 .3rem; color:var(--ink) }
.price-amount sup{ font-size:1.1rem; vertical-align:super; color:var(--grey); font-weight:500 }
.price-amount sub{ font-size:.85rem; vertical-align:baseline; color:var(--grey); font-weight:400; font-family:var(--font-body) }
.price-desc{ font-size:.9rem; color:var(--grey); line-height:1.6; margin-bottom:1.5rem; min-height:3.2em }
.price-features{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.9rem; flex:1 }
.price-features li{ font-size:.92rem; color:var(--ink-2); display:flex; gap:.6rem; align-items:center }
.price-features li::before{ content:"✓"; color:var(--green); font-size:.85rem; flex:none }
.price-features li.inactive{ color:var(--grey-2) }
.price-features li.inactive::before{ content:"–"; color:var(--grey-2) }
.price-card .btn{ width:100%; justify-content:center }

@media (max-width: 620px){
  .pricing-grid{ grid-template-columns:1fr; max-width:420px }
  .chatdemo-grid{ gap:2.4rem }
}

/* =========================================================
   ROI CALCULATOR
   ========================================================= */
.calc{
  position:relative; max-width:840px; margin-inline:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-md); overflow:hidden;
}
.calc::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold) }
.calc__label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold2); display:block; margin-bottom:.55rem }
.calc__q{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.01em }
.calc__q em{ font-style:italic; color:var(--green) }
.calc__slider{ display:flex; align-items:center; gap:1.4rem; margin:2rem 0 .9rem }
.calc__sl-lbl{ font-family:var(--font-mono); font-size:.8rem; color:var(--grey); white-space:nowrap; flex:none }
.calc__sl-val{ font-family:var(--font-mono); font-weight:700; font-size:1.05rem; color:var(--ink); min-width:4ch; text-align:right; flex:none }
.calc__note{ font-size:.86rem; color:var(--grey); line-height:1.6; margin-bottom:1.8rem }
.calc__note strong{ color:var(--green); font-weight:600 }
.calc__res{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.calc__cell{ background:var(--sand-2); padding:1.4rem 1.3rem }
.calc__num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1; color:var(--ink); white-space:nowrap }
.calc__cell:last-child .calc__num{ color:var(--green) }
.calc__cl{ display:block; margin-top:.5rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2) }

.calc__slider input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:3px; border-radius:3px; outline:none; cursor:pointer; min-width:0;
  background:linear-gradient(90deg, var(--green) 0%, var(--green) var(--fill,30%), var(--line-2) var(--fill,30%), var(--line-2) 100%) }
.calc__slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--gold); border:2px solid var(--paper); box-shadow:0 1px 5px rgba(21,20,15,.3); cursor:pointer; transition:transform .2s var(--ease-out) }
.calc__slider input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.2) }
.calc__slider input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--gold); border:2px solid var(--paper); cursor:pointer }
.calc__slider input[type=range]:focus-visible{ outline:2px solid var(--green); outline-offset:6px }

@media (max-width: 560px){
  .calc__res{ grid-template-columns:1fr }
}
.calc__scenarios{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:1.3rem }
.calc__scn{ background:var(--sand-2); padding:1.4rem 1.4rem 1.5rem }
.calc__scn-lbl{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--grey); margin-bottom:1.1rem }
.calc__scn-res{ display:flex; gap:1.8rem }
.calc__scn-res > div{ flex:1 }
.calc__num--gold{ color:var(--green) }
.calc__win{ display:flex; gap:1.2rem; align-items:flex-start; background:#EEEDE9; border:1px solid #d8d6d0; border-radius:var(--r); padding:1.6rem 1.8rem; box-shadow:0 4px 24px rgba(0,0,0,.06); margin-top:.25rem }
.calc__win-ic{ font-weight:800; color:var(--green); font-size:1.8rem; line-height:1; flex:none; margin-top:.1rem }
.calc__win p{ font-size:1rem; color:var(--ink-2); line-height:1.55 }
.calc__win strong{ color:var(--ink); font-weight:700 }
.calc__win-math{ margin-top:.85rem; font-size:1rem; color:var(--ink-2); background:rgba(0,0,0,.07); border-radius:8px; padding:.65rem 1rem; display:inline-block }
.calc__win-math span{ font-weight:700; color:var(--green) }
.calc__win-math strong{ font-size:1.25rem; font-weight:800; color:var(--ink) }
.calc__cta{ margin-top:1.8rem; text-align:center }
.calc__cta .btn{ white-space:normal }
.calc__cta #calcCtaVal{ font-weight:800 }
@media (max-width: 560px){ .calc__scenarios{ grid-template-columns:1fr } }

/* =========================================================
   PRICING — 3 tiers + location toggle
   ========================================================= */
.pricing-grid--3{ grid-template-columns:repeat(3,1fr); max-width:1040px }
@media (max-width: 880px){ .pricing-grid--3{ grid-template-columns:1fr; max-width:440px } }
.price-toggle{ display:flex; width:fit-content; margin:0 auto 2.6rem; gap:4px; padding:5px; background:var(--sand-2); border:1px solid var(--line); border-radius:100px }
.price-toggle__btn{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--grey); background:transparent; border:none; padding:.65em 1.15em; border-radius:100px; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease) }
.price-toggle__btn.is-active{ background:var(--green); color:var(--paper) }
.price-foot{ text-align:center; margin-top:1.6rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--grey-2) }