/* ABATA demo templates: the 2026 layer.
 *
 * Loaded after tpl-base.css by every tpl-*.html. It keeps each template's own
 * tokens (--acc, --ink, --bg...) and only changes how they are presented:
 * a floating glass nav, a mesh-gradient hero, bento grids, gradient-edged
 * cards, motion on scroll. tpl-modern.js adds the .is-in reveal classes and
 * the count-up stats; without JS everything is simply visible. */

:root{--r:18px;--max:1200px;--hw:800;--ls:-.035em;
  --glass:color-mix(in srgb,var(--bg) 72%,transparent);
  --edge:color-mix(in srgb,var(--acc) 26%,var(--line));
  --shadow:0 30px 80px -32px color-mix(in srgb,var(--ink) 45%,transparent)}
body{font-size:16.5px;letter-spacing:-.005em}
::selection{background:var(--acc);color:var(--on)}

/* film grain over everything, very faint — removes the "flat template" look */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav: a floating island instead of a full-width bar */
.nav{top:14px;margin:14px auto 0;max-width:calc(var(--max) - 8px);width:calc(100% - 28px);
  border:1px solid var(--line);border-radius:999px;background:var(--glass);
  box-shadow:0 10px 30px -18px color-mix(in srgb,var(--ink) 40%,transparent)}
.nav__in{height:60px;padding:0 10px 0 24px}
.nav__links a{position:relative;padding:6px 2px;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--acc);transform:scaleX(0);transition:transform .25s}
.nav__links a:hover::after{transform:scaleX(1)}
.nav .btn{border-radius:999px}

/* buttons: pill, with a sheen on hover */
.btn{border-radius:999px;position:relative;overflow:hidden}
.btn--solid{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 70%,var(--ink)))}
.btn--solid::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn--solid:hover::after{transform:translateX(120%)}
.btn--line{background:var(--glass);backdrop-filter:blur(8px)}

/* hero: mesh gradient, drifting blobs, bigger type */
.hero{padding:120px 0 110px;margin-top:-74px;padding-top:180px;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:tm-drift 18s ease-in-out infinite alternate}
.hero::before{width:620px;height:620px;left:-180px;top:-120px;background:color-mix(in srgb,var(--acc) 55%,transparent)}
.hero::after{width:520px;height:520px;right:-140px;top:120px;background:color-mix(in srgb,var(--acc) 30%,#ff7ad9 20%);animation-delay:-9s}
@keyframes tm-drift{to{transform:translate(80px,60px) scale(1.12)}}
.hero h1{font-size:clamp(46px,6.6vw,92px);line-height:1;letter-spacing:-.045em}
.hero h1 em{background:linear-gradient(120deg,var(--acc),color-mix(in srgb,var(--acc) 50%,#ff7ad9));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.12em}
.eyebrow{padding:7px 14px 7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(8px)}
.eyebrow::before{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}

/* art panel: deeper, with glass floats that bob gently */
.art__bg{border-radius:28px;border:1px solid var(--edge);box-shadow:var(--shadow)}
.float{border-radius:20px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--bg) 40%,var(--line));animation:tm-bob 6s ease-in-out infinite}
.f2,.f3{animation-delay:-3s}
@keyframes tm-bob{50%{transform:translateY(-10px)}}

/* stats: a clean band of big numbers */
.stats{background:transparent;border:0}
.stats__in{gap:14px}
.stat{border:1px solid var(--line);border-radius:22px;background:var(--glass);padding:30px 28px}
.stat b{font-size:clamp(34px,4vw,54px);background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 55%,var(--acc)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* sections + bento grids */
.sec{padding:120px 0}
.sec--alt{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--acc) 7%,var(--bg2)),var(--bg2))}
.sec__head h2,.split h2{font-size:clamp(36px,4.8vw,62px);letter-spacing:-.04em}
.grid{gap:18px}
/* bento: tpl-modern.js marks alternating wide cards (.tm-wide) so each row of
   a three-column grid reads 2+1, 1+2, 2+1 and always fills */
@media(min-width:901px){
  .g3>.tm-wide{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,var(--card)),var(--card))}
  .g3>.tm-wide h3{font-size:28px}
}
.tile{border-radius:24px;position:relative;isolation:isolate}
.tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 60%,transparent),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.tile:hover::before{opacity:1}
.tile:hover{transform:translateY(-6px)}
.num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft);letter-spacing:0}
.thumb{border-radius:18px;height:220px}
.thumb span{transition:transform .5s}
.tile:hover .thumb span{transform:scale(1.08) translateY(-4px)}

/* cta: an aurora panel */
.cta__in{border-radius:32px;padding:96px 48px;background:
  radial-gradient(60% 120% at 0% 100%,color-mix(in srgb,var(--acc) 70%,#ff7ad9) 0%,transparent 60%),
  radial-gradient(50% 120% at 100% 0%,color-mix(in srgb,var(--acc) 60%,#7ad7ff) 0%,transparent 60%),
  var(--acc)}
.cta h2{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.04em}
.cta .btn{border-radius:999px}

.faq details{border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-bottom:12px;background:var(--card);border-bottom:1px solid var(--line)}
.faq details[open]{border-color:var(--edge)}
.foot{background:var(--bg)}

/* scroll reveal (classes added by tpl-modern.js) */
.tm-r{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.tm-r.is-in{opacity:1;transform:none}

@media(max-width:900px){
  .hero{padding-top:140px}
  .sec{padding:84px 0}
}
@media(max-width:600px){
  .nav{width:calc(100% - 20px)}
  .hero::before,.hero::after{width:340px;height:340px}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.float{animation:none}
  .tm-r{opacity:1;transform:none;transition:none}
}