/* BioAsia 2027 home page: finish and motion styles. Loaded after site.css on index.html only, and scoped to body.home.
   Keeps the site's theme as it is: the same colour tokens, fonts, backgrounds and layout. It only refines depth, hover states and
   detail, and styles the pieces added by home-3d.js (the WebGL helix) and home-motion.js (tilt glare, word reveal). */

/* ================= HERO BACKGROUND VIDEO =================
   Full-bleed ambient loop; absolute stack only (no layout shift). Left column stays readable; motion shows on the right. */
body.home .hero.hero--video{
  background:var(--night);
  isolation:isolate;
  min-height:min(100vh,920px);
  min-height:min(100dvh,920px);
}
body.home .hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 520px at 78% 30%, var(--hero-glow) 0%, transparent 60%), var(--night);
}
body.home .hero-bg-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 28%;
  opacity:.72;transform:scale(1.01);transform-origin:center center;
  filter:saturate(1.05) contrast(1.04);
}
body.home .hero-bg-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgb(10 10 31 / .94) 0%,rgb(10 10 31 / .86) 40%,rgb(10 10 31 / .48) 56%,rgb(10 10 31 / .22) 72%,rgb(10 10 31 / .18) 100%),
    radial-gradient(900px 480px at 22% 35%, rgb(10 10 31 / .35), transparent 55%),
    linear-gradient(180deg,rgb(10 10 31 / .45) 0%,transparent 12%,transparent 88%,rgb(10 10 31 / .45) 100%);
}
body.home .hero .helix-box,body.home .hero .hero-3d{z-index:1}
body.home .hero .wrap,body.home .hero .stats{position:relative;z-index:2}
body.home .hero--video .hero-3d.on{opacity:.22}
body.home .hero--video .h-head{position:relative}
body.home .hero--video .h-head::after{
  content:"";position:absolute;inset:-12px -28px -16px -20px;z-index:-1;pointer-events:none;border-radius:28px;
  background:radial-gradient(ellipse 90% 80% at 8% 42%, rgb(10 10 31 / .5), transparent 68%)}
body.home .hero--video .path{
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:linear-gradient(155deg,rgb(255 255 255 / .08),rgb(255 255 255 / .03));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12),0 12px 40px -24px rgb(0 0 0 / .45);
}
body.home .hero--video .path.pri{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 16px 48px -20px color-mix(in srgb,var(--cta) 65%,transparent),inset 0 0 0 1px rgb(255 255 255 / .12);
}
body.home .hero--video .lbar{
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 20px 50px -28px rgb(0 0 0 / .5),inset 0 0 0 1px rgb(255 255 255 / .08);
}
body.home .hero--video .stats{
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgb(10 10 31 / .72),rgb(10 10 31 / .82));
  border-top-color:rgb(255 255 255 / .12);
}
@media (max-width:900px){
  /* Phones and tablets: the hero stacks to 2000px+, so the video would be blown up far past its resolution.
     Keep it to the first screen (behind the title) and fade it into the night background below. */
  body.home .hero.hero--video{min-height:0}
  body.home .hero-bg{bottom:auto;height:min(100svh,780px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
  body.home .hero-bg-vid{opacity:.6;object-position:50% 30%;transform:none}
  body.home .hero-bg-shade{background:
    linear-gradient(180deg,rgb(10 10 31 / .62) 0%,rgb(10 10 31 / .72) 45%,rgb(10 10 31 / .9) 100%),
    radial-gradient(680px 360px at 50% 8%, rgb(43 37 104 / .2), transparent 70%)}
  body.home .hero--video .h-head::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) body.home .hero-bg-vid{display:none}
}
html.no-hero-video body.home .hero-bg-vid{display:none}
html.no-hero-video body.home .hero.hero--video{
  background:radial-gradient(1200px 520px at 78% 30%, var(--hero-glow) 0%, transparent 60%), var(--night);
  min-height:0;
}
html.no-hero-video body.home .hero--video .path,
html.no-hero-video body.home .hero--video .stats{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

body.home{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --lift:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent), 0 8px 18px -6px color-mix(in srgb,var(--ink) 9%,transparent), 0 24px 48px -20px color-mix(in srgb,var(--teal) 22%,transparent);
  --lift-hi:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent), 0 16px 32px -10px color-mix(in srgb,var(--ink) 14%,transparent), 0 40px 70px -28px color-mix(in srgb,var(--teal) 40%,transparent);
  --hair-n:rgb(255 255 255 / .13);
}

/* first paint: the hero waits for its entrance (html.lux-pre is removed by home-motion.js, or after 2.5s at most) */
html.lux-pre body.home .hero .hwrap,html.lux-pre body.home .hero .stats{opacity:0}

/* 3D scroll entrances (home-motion.js): depth for each moving group, and nothing may push the page sideways mid-animation */
body.home main{overflow-x:clip}
body.home main > section:not(.hero) h2{perspective:700px}
body.home main > section:not(.hero) h2 .w{display:inline-block;backface-visibility:hidden}
body.home .duo,body.home .wall,body.home .eco,body.home .pillars,body.home .days,body.home .day ul,body.home .pvg,body.home .row2,body.home .news,body.home .actband{perspective:1200px}
body.home #sponsors{perspective:1000px}

/* ================= HERO ================= */
/* WebGL helix: fades in over the existing background, and hides the 2D helix it replaces */
body.home .hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease-out)}
body.home .hero-3d.on{opacity:1}
html.has-3d body.home .helix-box{display:none}

/* countdown card: date and status on top, four equal time tiles, then the actions; a calm static border instead of the flowing one */
body.home .status.has-bar{display:block;width:100%;margin:14px 0 22px;font:inherit}
body.home .lbar{
  container-type:inline-size;width:100%;max-width:min(100%,480px);box-sizing:border-box;padding:1px;border-radius:20px;animation:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--glow-b) 70%,transparent),rgb(255 255 255 / .08) 45%,color-mix(in srgb,var(--glow-a) 55%,transparent));
  box-shadow:0 24px 60px -34px color-mix(in srgb,var(--cta) 90%,transparent)}
body.home .lbar-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-areas:"when state" "clock clock" "acts acts";
  align-items:center;gap:14px 12px;padding:16px 18px;border-radius:19px;background:linear-gradient(160deg,#141137,#0B0A22)}
body.home .lb-side{display:contents}
body.home .lb-when{grid-area:when;gap:5px;min-width:0;display:grid}
body.home .lb-l{font-size:10.5px;letter-spacing:.16em;color:var(--glow-a)}
body.home .lb-when b{font:600 clamp(13px,2.2vw,15px)/1.35 var(--sans);letter-spacing:-.005em;color:var(--on-night)}
body.home .lb-state{
  grid-area:state;justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 12px 6px 10px;border-radius:999px;font:500 clamp(10.5px,2vw,12px)/1.35 var(--sans);
  background:color-mix(in srgb,var(--sc,#4ADE80) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc,#4ADE80) 30%,transparent)}
body.home .lb-state .dot{width:7px;height:7px;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--sc,#4ADE80) 25%,transparent);animation:lux-live 2s ease-in-out infinite}
@keyframes lux-live{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc,#4ADE80) 0%,transparent)}}
body.home .lb-clock{grid-area:clock;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,2cqi,10px);width:100%;white-space:normal}
body.home .lb-t{display:grid;justify-items:center;align-content:center;gap:4px;min-width:0;padding:clamp(8px,2cqi,12px) clamp(4px,1.5cqi,8px) clamp(7px,1.6cqi,10px);border-radius:14px;background:rgb(255 255 255 / .045);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08)}
body.home .lb-clock .n{font:700 clamp(20px,5.2cqi,30px)/1 var(--display);letter-spacing:-.03em;color:var(--on-night);font-variant-numeric:tabular-nums;
  background:none;-webkit-text-fill-color:currentColor;min-width:2ch;text-align:center}
body.home .lb-clock .u{margin:0;font:500 clamp(8px,2.2cqi,9.5px) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);text-align:center;line-height:1.2;max-width:100%}
body.home .lb-clock .u-short{display:none}
body.home .lb-t:last-child .n{color:var(--glow-a)}
body.home .lb-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:10px;width:100%}
body.home .lb-acts .btn{flex:1 1 140px;padding:10px 16px;min-width:0}

@container (max-width:520px){
  body.home .lbar-in{grid-template-columns:1fr;grid-template-areas:"when" "state" "clock" "acts";padding:16px 14px;gap:12px}
  body.home .lb-state{justify-self:start;white-space:normal;border-radius:12px}
}
@container (max-width:380px){
  body.home .lb-clock .u-long{display:none}
  body.home .lb-clock .u-short{display:inline}
  body.home .lb-t{padding:10px 3px 8px;border-radius:12px}
  body.home .lb-acts .btn{flex:1 1 100%}
}

/* desktop: the card shares the orbit's width and centre line, so the right column reads as one stack */
@media (min-width:901px){
  body.home .hero-v .status.has-bar{justify-self:center;align-self:start;width:100%;max-width:480px;margin:4px 0 8px}
  body.home .lbar{max-width:100%}
  :root[data-hero="1"] body.home .hero-v .stage.streams{justify-self:center}
}
@media (min-width:1181px){body.home .hero-v .status.has-bar{max-width:520px}}
@media (min-width:1600px){body.home .hero-v .status.has-bar{max-width:560px}}
@media (min-width:901px) and (max-width:1180px){
  body.home .lbar-in{gap:12px 10px;padding:14px 14px}
}
/* tablets and phones: full content width, aligned with the headline and the cards below */
@media (max-width:900px){
  body.home .hero-v .status.has-bar{max-width:600px;margin:6px 0 18px}
  body.home .lbar{max-width:100%;margin-inline:0}
}
@media (max-width:560px){
  body.home .lbar{border-radius:18px;max-width:none}
  body.home .lbar-in{padding:14px 12px}
  body.home .lb-when b{font-size:13px}
}
@media (max-width:380px){
  body.home .lb-clock .n{font-size:clamp(18px,6.2vw,24px)}
}

/* with the WebGL globe running, its rings replace the CSS orbit paths so the stage stays uncluttered */
html.has-3d body.home .stage .orbs{display:none}
html.has-3d body.home .stage .orbit::after{box-shadow:none;border-color:transparent}

body.home .hero h1{perspective:800px}
body.home .hero h1 .w{display:inline-block}
body.home .hero h1 em{background-size:200% 100%;animation:lux-shimmer 10s ease-in-out infinite}
@keyframes lux-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* path tiles: frosted glass, a brighter top edge, and a glow in each path's own colour on hover */
body.home .path{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 18px 40px -26px rgb(0 0 0 / .7);
  transition:background .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
body.home .path:hover{transform:none;box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 26px 50px -28px color-mix(in srgb,var(--pc) 65%,transparent)}
body.home .path .go svg.li{transition:transform .4s var(--ease-out)}
body.home .path:hover .go svg.li{transform:translateX(4px)}
body.home .path.pri{overflow:hidden;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 22px 46px -22px color-mix(in srgb,var(--cta) 85%,transparent)}
body.home .path.pri::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .2) 50%,transparent 65%) 130% 0 / 250% 100% no-repeat;
  animation:lux-sheen 6s var(--ease-out) 2.5s infinite}
@keyframes lux-sheen{0%{background-position:130% 0}35%,100%{background-position:-30% 0}}

/* leader constellation: the outer ring becomes a slow travelling light, and the featured photo gets a soft halo */
body.home .stage .orbit{transform-style:flat}
/* three tilted 3D orbit paths around the featured leader, each with a bright arc and a travelling light; they sit behind the photo */
body.home .stage .orbs{display:block;position:absolute;inset:0;pointer-events:none;perspective:900px}
body.home .stage .orbs i{position:absolute;left:50%;top:50%;width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);transform:rotateZ(var(--tz)) rotateX(var(--tx));
  animation:lux-orb var(--d) linear infinite var(--dir,normal)}
body.home .stage .orbs i::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;border-top-color:color-mix(in srgb,var(--c) 85%,transparent);
  filter:drop-shadow(0 0 4px var(--c))}
body.home .stage .orbs i::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent),0 0 14px 2px var(--c)}
body.home .stage .orbs i:nth-child(1){--s:80%;--tz:-32deg;--tx:72deg;--d:14s;--c:var(--glow-a)}
body.home .stage .orbs i:nth-child(2){--s:72%;--tz:34deg;--tx:70deg;--d:19s;--dir:reverse;--c:var(--glow-b)}
body.home .stage .orbs i:nth-child(3){--s:88%;--tz:90deg;--tx:76deg;--d:25s;--c:color-mix(in srgb,var(--glow-a) 50%,var(--glow-b))}
@keyframes lux-orb{from{transform:rotateZ(var(--tz)) rotateX(var(--tx)) rotateZ(0deg)}to{transform:rotateZ(var(--tz)) rotateX(var(--tx)) rotateZ(360deg)}}
body.home .stage .core{z-index:1}
body.home .stage .sat{z-index:2}
body.home .stage .orbit::before{border:1px solid transparent;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--glow-a) 55%,transparent),transparent 40%,color-mix(in srgb,var(--glow-b) 50%,transparent) 70%,transparent) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lux-spin 30s linear infinite}
@keyframes lux-spin{to{transform:rotate(360deg)}}
body.home .stage .core{box-shadow:0 0 0 10px color-mix(in srgb,var(--glow-b) 7%,transparent),0 0 0 22px color-mix(in srgb,var(--glow-b) 4%,transparent),0 24px 70px -12px rgb(0 0 0 / .6)}
body.home .stage .sat{transition:transform .5s var(--ease-out),box-shadow .5s,opacity .5s}
/* the outgoing photo shrinks and blurs away (site.js adds .fade); home-motion.js brings the next one in */
body.home .stage .core img{transition:opacity .28s ease,transform .28s ease,filter .28s ease}
body.home .stage .core img.fade{opacity:0;transform:scale(.9);filter:blur(6px)}
/* countdown ring to the next leader (added by home-motion.js) */
body.home .sp-prog{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
body.home .sp-prog circle{fill:none;stroke-width:1.1}
body.home .sp-prog .t{stroke:rgb(255 255 255 / .08)}
body.home .sp-prog .f{stroke:var(--glow-b);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--glow-b))}
body.home .stage .sat:hover{box-shadow:0 0 0 2px var(--glow-b),0 0 22px color-mix(in srgb,var(--glow-b) 55%,transparent)}

/* stats strip: a gradient hairline instead of the flat rule, and thin dividers between figures */
body.home .hero .stats{border-top-color:transparent}
body.home .hero .stats::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--glow-b) 55%,transparent),color-mix(in srgb,var(--glow-a) 45%,transparent),transparent)}
body.home .stat{position:relative}
body.home .stat + .stat::before{content:"";position:absolute;left:-12px;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--hair-n),transparent)}
body.home .stat .n{font-variant-numeric:tabular-nums}
@media (max-width:900px){body.home .stat:nth-child(odd)::before{display:none}}

/* ================= SHARED ================= */
body.home .sec h2 em{font-style:normal;color:var(--teal)}
body.home .actband h2 em{font-style:normal;color:inherit}
body.home .actband > div:first-child h2 em{color:var(--glow-b)}
body.home .btn{transition:background .3s var(--ease-out),box-shadow .4s var(--ease-out),filter .3s,color .3s,border-color .3s}
body.home .btn-gold,body.home .btn-teal{position:relative;overflow:hidden;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--cta) 80%,transparent)}
body.home .btn-gold:hover,body.home .btn-teal:hover{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--cta) 95%,transparent)}
body.home .btn-gold::after,body.home .btn-teal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
body.home .btn-gold:hover::after,body.home .btn-teal:hover::after{transform:translateX(120%)}
body.home .btn-line:hover{background:var(--surface);border-color:var(--teal);box-shadow:var(--lift)}

/* 3D tilt + glare (the glare span and .lux-tilt are added by home-motion.js, on mouse devices only) */
body.home .lux-tilt{position:relative;transform-style:preserve-3d}
body.home .lux-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / .14),transparent 45%)}
body.home .lux-tilt:hover .lux-glare{opacity:1}
body.home .sec .lux-glare{background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--teal) 10%,transparent),transparent 45%)}

/* ================= LEADERS ================= */
body.home .ld-tabs button{transition:background .35s var(--ease-out),color .3s}
body.home .duo .p{transition:border-color .45s var(--ease-out),background .45s var(--ease-out)}
body.home .duo .p:hover{border-color:color-mix(in srgb,var(--glow-b) 40%,transparent);background:rgb(255 255 255 / .06)}
body.home .ph{transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
body.home .ph img{transition:filter .55s var(--ease-out),transform .55s var(--ease-out)}
body.home .wall .p:hover .ph{transform:translateY(-5px);box-shadow:0 22px 44px -18px color-mix(in srgb,var(--glow-b) 70%,transparent)}
body.home .ld-foot{position:relative;border-top-color:transparent}
body.home .ld-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--glow-b) 50%,transparent),rgb(255 255 255 / .08) 60%,transparent)}

/* ================= LIGHT SECTIONS ================= */
/* cards: layered soft shadow, and an accent line that draws in along the top edge on hover */
body.home .card{position:relative;box-shadow:var(--lift);transition:box-shadow .55s var(--ease-out),border-color .45s var(--ease-out)}
body.home .card:hover{box-shadow:var(--lift-hi);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
body.home .sec .card::before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--teal),var(--turmeric),transparent);transform:scaleX(0);transition:transform .7s var(--ease-out)}
body.home .sec .card:hover::before{transform:scaleX(1)}

/* theme */
body.home .eco span{transition:color .3s,border-color .3s,box-shadow .4s var(--ease-out)}
body.home .eco span:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--line));box-shadow:0 8px 20px -12px color-mix(in srgb,var(--teal) 70%,transparent)}
body.home .pillars div{position:relative;overflow:hidden;box-shadow:var(--lift);transition:box-shadow .55s var(--ease-out),border-color .45s}
body.home .pillars div:hover{box-shadow:var(--lift-hi);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
body.home .pillars div::after{content:"";position:absolute;right:-44px;bottom:-44px;width:130px;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 16%,transparent),transparent 70%);transition:transform .8s var(--ease-out)}
body.home .pillars div:hover::after{transform:scale(1.6)}

/* agenda */
body.home .day h3{display:flex;align-items:center;gap:10px}
body.home .day h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
body.home .day li{transition:transform .4s var(--ease-out)}
body.home .day li:hover{transform:translateX(4px)}
body.home .day li i{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
body.home .day li:hover i{transform:scale(1.12) rotate(-8deg);background:var(--teal);color:var(--teal-ink)}

/* showcase */
body.home .pvg a{position:relative;transition:border-color .35s,color .3s,box-shadow .45s var(--ease-out)}
body.home .pvg a:hover{color:var(--teal);box-shadow:0 16px 32px -18px color-mix(in srgb,var(--teal) 60%,transparent)}
body.home .statbox{position:relative;overflow:hidden;box-shadow:0 26px 54px -30px color-mix(in srgb,var(--night) 90%,transparent)}
body.home .statbox::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-b) 30%,transparent),transparent 70%)}
body.home .statbox > div{position:relative;z-index:1}
body.home .statbox b{font-variant-numeric:tabular-nums}
/* Exhibit CTA under the tradeshow stats: spans the three stat columns, pinned to the bottom of the dark panel */
body.home .statbox{grid-template-rows:auto 1fr}
body.home .statbox .sb-cta{grid-column:1 / -1;align-self:end;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  margin-top:10px;padding-top:18px;border-top:1px solid rgb(255 255 255 / .12)}
body.home .statbox .sb-cta span{font-size:14px;color:var(--on-night-2)}
body.home .statbox .sb-cta .btn{flex:none}
@media (max-width:560px){body.home .statbox .sb-cta .btn{width:100%;justify-content:center}}

/* sponsors: the marquee fades out at both edges */
body.home .marq{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* news */
body.home .nw b{transition:color .3s}
body.home .nw:hover b{color:var(--teal)}

/* action band */
body.home .actband .btn-inv{transition:background .3s,color .3s,border-color .3s}
body.home .actband > div:last-child .btn-inv:hover{background:var(--teal-ink);color:var(--teal);border-color:var(--teal-ink)}

@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body.home .hero h1 em,html:not(.force-motion) body.home .path.pri::after,html:not(.force-motion) body.home .stage .orbit::before,html:not(.force-motion) body.home .stage .orbs i{animation:none}
  html:not(.force-motion) body.home .btn-gold::after,html:not(.force-motion) body.home .btn-teal::after{display:none}
}

/* ================= BUTTON ICONS + MICRO-INTERACTIONS (as on the draft site) ================= */
body.home .btn svg.li{width:16px;height:16px;stroke-width:2;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
body.home .btn-sm svg.li{width:15px;height:15px}
/* a leading icon spins once on its vertical axis; a trailing arrow slides forward */
body.home .btn:hover svg.li:not(.go){transform:rotateY(360deg)}
body.home .btn svg.li.go{transition:transform .4s var(--ease-out)}
body.home .btn:hover svg.li.go{transform:translateX(4px)}
body.home .btn .spark{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
body.home .btn:hover .spark{transform:rotate(90deg) scale(1.15)}

/* the header's Register button sends out one soft pulse, then rests */
body.home header.top .btn-gold{position:relative;isolation:isolate}
body.home header.top .btn-gold::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--cta);animation:lux-pulse 3.2s ease-out 3s infinite}
@keyframes lux-pulse{0%{transform:scale(1);opacity:.55}32%,100%{transform:scale(1.55,1.9);opacity:0}}

/* path tiles and agenda icons: a full turn on hover, with a springy settle */
body.home .path .pi svg.li{transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
body.home .path:hover .pi svg.li{transform:rotateY(360deg) scale(1.12)}
body.home .day li:hover i{transform:scale(1.12)}
body.home .day li i svg{transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
body.home .day li:hover i svg{transform:rotateY(360deg)}

/* ================= LEADER PORTRAITS: spinning halo + orbiting light (as the speakers grid on the draft site) ================= */
@property --halo-a{syntax:"<angle>";initial-value:0deg;inherits:false}
body.home .ph{background:conic-gradient(from var(--halo-a),var(--glow-a),var(--glow-b),var(--teal),var(--glow-a));
  animation:lux-halo 8s linear var(--halo-delay,0s) infinite}
body.home .p:hover .ph{animation-duration:2.4s}
@keyframes lux-halo{to{--halo-a:360deg}}
body.home .ph::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-b) 45%,transparent),transparent 68%);transition:opacity .5s var(--ease-out)}
body.home .p:hover .ph::before{opacity:1}
body.home .ph::after{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--glow-a) 0 3px,color-mix(in srgb,var(--glow-a) 40%,transparent) 4px,transparent 7px);
  animation:lux-spin 9s linear var(--halo-delay,0s) infinite reverse}
body.home .p:hover .ph::after{animation-duration:2.2s}
body.home .ph{isolation:isolate}
body.home .p:hover .ph img{transform:rotate(4deg) scale(1.1)}

/* ================= NEWS: side accent bar and a tilting paper icon on hover ================= */
body.home .nw{overflow:hidden}
body.home .nw::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--glow-a),var(--teal));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
body.home .nw:hover::after{transform:scaleY(1)}
body.home .nw .y{display:inline-flex;align-items:center;gap:6px}
body.home .nw .y svg.li{width:14px;height:14px;stroke-width:1.9;transition:transform .5s var(--ease-out)}
body.home .nw:hover .y svg.li{transform:rotate(-12deg) scale(1.25)}

/* ================= PILLARS: an accent rule that stretches on hover ================= */
body.home .pillars b::after{content:"";position:absolute;left:20px;top:0;width:28px;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--turmeric),var(--teal));transition:width .6s var(--ease-out)}
body.home .pillars div:hover b::after{width:84px}

@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body.home .ph,html:not(.force-motion) body.home .ph::after,html:not(.force-motion) body.home header.top .btn-gold::before{animation:none}
}

/* ================= HERO CONTENT: event facts and path cards (redesign) ================= */
/* path cards: icon tile beside the label and title, then the description, then an action row with a round arrow */
body.home .hero-v .paths{gap:12px}
body.home .path{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"pi who" "pi title" "desc desc" "proof proof" "go go";
  column-gap:14px;row-gap:0;align-content:start;padding:18px 18px 16px;border-radius:18px}
body.home .path .pi{grid-area:pi;align-self:center;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;filter:none;
  background:color-mix(in srgb,var(--pc) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 30%,transparent)}
body.home .path .pi svg.li{width:21px;height:21px}
body.home .path .who{grid-area:who;align-self:end;font-size:10.5px;letter-spacing:.14em;color:color-mix(in srgb,var(--pc) 70%,var(--on-night-2))}
body.home .path b{grid-area:title;align-self:start;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
body.home .path small{grid-area:desc;margin-top:12px;font-size:13.5px;line-height:1.5}
body.home .path .proof{grid-area:proof}
body.home .path .go{grid-area:go;margin-top:14px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .08);justify-content:space-between;font-size:14px}
body.home .path .go svg.li{width:28px;height:28px;padding:6px;border-radius:50%;box-sizing:border-box;flex:none;
  background:color-mix(in srgb,var(--pc) 14%,transparent);transition:transform .45s var(--ease-out),background .3s,color .3s}
body.home .path:hover .go svg.li{transform:rotate(-45deg);background:var(--pc);color:var(--night)}

/* the primary path (Attend): brand gradient, white icon tile and arrow */
body.home .path.pri{background:linear-gradient(150deg,color-mix(in srgb,var(--cta) 88%,#fff) 0%,var(--cta) 45%,color-mix(in srgb,var(--cta) 70%,var(--night)) 100%)}
body.home .path.pri:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--cta-hover) 88%,#fff) 0%,var(--cta-hover) 45%,var(--cta) 100%)}
body.home .path.pri .pi{background:rgb(255 255 255 / .16);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)}
body.home .path.pri .who{color:color-mix(in srgb,var(--cta-ink) 80%,transparent)}
body.home .path.pri .go{border-top-color:rgb(255 255 255 / .2)}
body.home .path.pri .go svg.li{background:rgb(255 255 255 / .18)}
body.home .path.pri:hover .go svg.li{background:var(--cta-ink);color:var(--cta)}
/* every action row sits on the card's bottom edge, so the rows line up across the grid */
body.home .path{grid-template-rows:auto auto 1fr auto auto}
body.home .path small{align-self:start}

/* ================= HOVER TILT =================
   On mouse devices a card tilts gently toward the pointer (home-motion.js) with a travelling glare; its content stays flat. */
@media (hover:hover) and (pointer:fine){
  body.home .lux-tilt .lux-glare{transition:opacity .5s var(--ease-out)}
}

/* ================= HERO HEADLINE (redesign) =================
   One calm block: an edition pill, the title, the theme as a subtitle with the tagline aligned beneath it, and the
   event facts as matching glass pills that wrap neatly at any width */
body.home .eyebrow-n{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:12px;max-width:100%;padding:5px 16px 5px 5px;border-radius:999px;
  font:500 13px/1.35 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--on-night-2);
  background:linear-gradient(90deg,rgb(255 255 255 / .075),rgb(255 255 255 / .02));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
body.home .eyebrow-n span+span{order:-1;flex:none;padding:4px 11px;border-radius:999px;font:600 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--night);background:linear-gradient(90deg,var(--glow-a),var(--glow-b))}
body.home .eyebrow-n span+span::before{content:none}
body.home .hero h1{margin:24px 0 16px}

body.home .hero .theme{gap:14px;margin:0 0 12px;font:500 clamp(1.4rem,2.4vw,1.85rem)/1.2 var(--display);letter-spacing:-.015em;color:var(--on-night)}
body.home .hero .theme::before{width:32px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--glow-a),var(--glow-b))}
/* the tagline lines up with the theme's text, after its accent bar */
body.home .hero .tagline{margin:0 0 26px;padding-left:46px;font:600 11.5px/1.5 var(--sans);letter-spacing:.3em;color:color-mix(in srgb,var(--on-night-2) 85%,transparent)}

body.home .hero .meta,body.home .hero-v .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 28px;font-size:14px}
body.home .hero .meta span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;border-radius:999px;
  background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);color:var(--on-night-2)}
body.home .hero .meta b{font-weight:600;color:var(--on-night)}
body.home .hero .meta svg.li{width:16px;height:16px;color:var(--glow-a);stroke-width:1.9}

@media (max-width:560px){
  body.home .eyebrow-n{flex-wrap:wrap;gap:8px;padding:8px 14px 8px 8px;border-radius:18px}
  body.home .hero .tagline{padding-left:0;letter-spacing:.2em}
  body.home .hero .meta span{padding:7px 13px 7px 10px;font-size:13.5px}
}

/* ================= LEADER SPOTLIGHT: caption alignment =================
   The photos sit on the ring's edge and poke out above and below it, so the orbit keeps clear space on both sides; the caption's
   name and role lines have fixed heights, so "See all 13 leaders" doesn't jump as the featured leader changes every 3 seconds */
body.home .stage{gap:0;grid-template-columns:minmax(0,1fr)}
body.home .stage .orbit{margin:8% 0 12%}
body.home .stage .sp-cap{gap:0;width:100%;max-width:min(360px,100%)}
body.home .stage .onstage{display:inline-flex;align-items:center;gap:10px;font:600 10.5px var(--mono);letter-spacing:.2em}
body.home .stage .onstage::before,body.home .stage .onstage::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--glow-a))}
body.home .stage .onstage::after{background:linear-gradient(90deg,var(--glow-a),transparent)}
body.home .stage .sp-cap b{margin-top:10px;font-size:24px;line-height:1.25;min-height:1.25em;letter-spacing:-.02em}
body.home #sp-hero-r{display:block;margin-top:4px;min-height:2.9em;font-size:14px;line-height:1.45}
body.home .stage .sp-all{margin-top:6px;padding:8px 16px}

/* the constellation starts level with the headline and stays pinned beside the content (cards, countdown) while it scrolls,
   instead of floating in the middle of the tall left column; on narrower screens it keeps its own row */
@media (min-width:901px){
  :root[data-hero="1"] body.home .hero-v .stage{align-self:start;position:sticky;top:104px}
}
/* the hero clips its 3D layers; "clip" does that without becoming a scroll container, which would stop the pinned constellation */
@supports (overflow:clip){body.home .hero{overflow:clip}}

/* ================= IMPACT STRIP (hero stats) =================
   four matching glass cards: an icon tile, the figure, then its label */
body.home .hero .stats .wrap{gap:14px;padding-block:30px 44px}
body.home .hero .stat{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border-radius:18px;
  background:linear-gradient(160deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .45s}
body.home .hero .stat:hover{transform:translateY(-4px);background:linear-gradient(160deg,rgb(255 255 255 / .09),rgb(255 255 255 / .03));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc2) 40%,transparent),0 24px 44px -26px color-mix(in srgb,var(--sc2) 70%,transparent)}
body.home .hero .stat + .stat::before{content:none}
body.home .hero .stat:nth-child(odd){--sc2:var(--glow-a)}body.home .hero .stat:nth-child(even){--sc2:var(--glow-b)}
body.home .stat .si{width:40px;height:40px;margin-bottom:10px;border-radius:12px;display:grid;place-items:center;color:var(--sc2);
  background:color-mix(in srgb,var(--sc2) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc2) 28%,transparent);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
body.home .stat .si svg.li{width:20px;height:20px;stroke-width:1.9}
body.home .hero .stat:hover .si{transform:rotate(-8deg) scale(1.08)}
body.home .stat .n{font-size:clamp(1.7rem,2.6vw,2.4rem)}
body.home .stat .l{margin-top:0;font-size:13.5px;line-height:1.45}
@media (max-width:900px){body.home .hero .stats .wrap{gap:10px}body.home .hero .stat{padding:16px}}

/* ================= GLOBAL LEADERS: a centred header =================
   eyebrow, title and intro stacked on the centre line, with the tabs centred beneath */
body.home .ld-head{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;max-width:780px;margin:0 auto 30px;gap:16px}
body.home .ld-head p{max-width:60ch;font-size:16.5px;line-height:1.65}
body.home .ld-tabs{display:flex;width:fit-content;margin:0 auto 40px}
body.home .ld-head .eyebrow::before{content:none}
body.home .ld-head .eyebrow{gap:10px}
body.home .ld-head .eyebrow::after{content:none}

/* leader tabs: a single highlight that slides between the tabs (added by home-motion.js; without it, site.css's highlight stays) */
body.home .ld-tabs.has-ind{position:relative;isolation:isolate}
body.home .ld-tabs.has-ind button{position:relative;z-index:1;transition:color .35s ease}
body.home .ld-tabs.has-ind button[aria-selected="true"]{background:none;box-shadow:none;color:var(--cta-ink)}
body.home .ld-tabs.has-ind button[aria-selected="false"]:hover{color:var(--on-night)}
body.home .ld-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,var(--cta-hover),var(--cta));box-shadow:0 6px 18px -6px color-mix(in srgb,var(--cta) 80%,transparent);
  transition:transform .55s cubic-bezier(.34,1.35,.64,1),width .55s cubic-bezier(.34,1.35,.64,1)}

/* 2027 speakers (coming soon): a glass panel with a microphone mark, and "Get notified" as a pill button */
body.home .ld-soon{position:relative;display:grid;justify-items:center;gap:8px;padding:44px 28px 36px;border:0;border-radius:22px;
  background:radial-gradient(420px 200px at 50% 0%,color-mix(in srgb,var(--glow-b) 16%,transparent),transparent 70%),linear-gradient(160deg,rgb(255 255 255 / .055),rgb(255 255 255 / .015));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09)}
body.home .ld-soon::before{content:"";width:52px;height:52px;margin-bottom:8px;border-radius:16px;
  background:color-mix(in srgb,var(--glow-b) 14%,transparent) no-repeat center/24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow-b) 30%,transparent)}
body.home .ld-soon b{margin-bottom:2px;font-size:clamp(19px,2vw,23px)}
body.home .ld-soon .linkbtn{margin-top:12px;padding:9px 18px 9px 16px;border-radius:999px;gap:8px;font-size:14px;text-decoration:none;
  color:var(--cta-ink)!important;background:var(--cta);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--cta) 90%,transparent);transition:background .25s ease,transform .3s ease}
body.home .ld-soon .linkbtn::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
body.home .ld-soon .linkbtn:hover{text-decoration:none;background:var(--cta-hover);transform:translateY(-1px)}

/* Global Leaders header: the eyebrow as a glass pill with a live dot, and the title on one line on desktop */
body.home .ld-head{max-width:1120px}
body.home .ld-head .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.18em;color:var(--glow-a);
  background:color-mix(in srgb,var(--glow-a) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow-a) 28%,transparent)}
body.home .ld-head .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;opacity:1;background:var(--glow-a);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--glow-a) 18%,transparent),0 0 10px var(--glow-a)}
body.home .ld-head h2{margin-top:18px}
@media (min-width:1100px){
  body.home .ld-head h2{font-size:clamp(2.6rem,3.9vw,3.6rem);white-space:nowrap}
}

/* every small label on the home page (eyebrows, pills, card labels, countdown units, menu and top-bar labels, pavilion numbers,
   news years) uses the clean text face instead of monospace; other pages, like the dashboards, keep monospace for their data */
body.home{--mono:"Inter","Segoe UI",system-ui,-apple-system,sans-serif}
/* news cards: the source line as quiet meta text under a hairline, not a boxed chip */
body.home .nw .src{margin-top:auto;padding:12px 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:0;background:none;
  font:500 12.5px/1.5 var(--sans);letter-spacing:0;color:var(--ink-2)}

/* impact cards: the figure leads (top left) with a bolder icon tile (top right), the label below, and a bar that fills as it counts */
body.home .hero .stat{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n si" "l l";align-items:start;column-gap:12px;row-gap:10px;
  padding:22px 22px 26px;overflow:hidden}
body.home .stat .si{grid-area:si;width:48px;height:48px;margin:0;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sc2) 55%,transparent),color-mix(in srgb,var(--sc2) 18%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc2) 45%,transparent),0 10px 24px -10px color-mix(in srgb,var(--sc2) 80%,transparent)}
body.home .stat .si svg.li{width:23px;height:23px;stroke-width:2}
body.home .stat .n{grid-area:n;align-self:center;display:inline-block;font-size:clamp(2rem,3vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1}
body.home .stat .l{grid-area:l;font-size:14px;line-height:1.5;color:var(--on-night-2)}
body.home .hero .stat::after{content:"";position:absolute;left:22px;right:22px;bottom:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sc2),color-mix(in srgb,var(--sc2) 30%,transparent));transform:scaleX(var(--p,1));transform-origin:0 50%;opacity:.85}
@media (max-width:900px){body.home .hero .stat{padding:18px 16px 22px}body.home .stat .si{width:40px;height:40px;border-radius:12px}body.home .stat .si svg.li{width:20px;height:20px}
  body.home .hero .stat::after{left:16px;right:16px;bottom:11px}}
/* narrow cards (phones): icon above the figure, so a long figure like 30,000+ never runs into it */
@media (max-width:600px){
  body.home .hero .stat{grid-template-columns:minmax(0,1fr);grid-template-areas:"si" "n" "l";row-gap:8px}
  body.home .stat .si{justify-self:start;margin-bottom:4px}
  body.home .stat .n{font-size:clamp(1.6rem,7vw,2rem)}
  body.home .stat .l{font-size:13px}
}
body.home .hero .stat{align-content:start}

/* ================= CLIENT REVIEW, 24 SEP 2026 ================= */
/* agenda preview: each day card opens that day in the agenda */
body.home a.card.day{color:inherit;text-decoration:none;transition:border-color .3s,box-shadow .45s var(--ease-out)}
body.home a.card.day:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
/* headlines: the link line at the foot of each card */
body.home .nw{color:inherit;text-decoration:none}
body.home .nw .nw-go{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--sans);color:var(--teal)}
body.home .nw .nw-go svg.li{width:14px;height:14px;transition:transform .35s var(--ease-out)}
body.home a.nw:hover .nw-go svg.li{transform:translate(2px,-2px)}
body.home article.nw .nw-go{color:var(--ink-2);font-weight:500}
/* three ways to take part: visit (night), sponsor (deep violet), showcase (violet); each ends in Register */
body.home .actband.act3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.home .actband.act3 > div{padding:56px 40px}
body.home .actband.act3 > div:first-child{padding-left:max(24px,calc((100vw - 1200px) / 2 + 24px))}
body.home .actband.act3 > div:last-child{padding-right:max(24px,calc((100vw - 1200px) / 2 + 24px))}
body.home .actband.act3 > div:nth-child(2){background:var(--night-2);color:var(--on-night)}
body.home .actband.act3 > div:nth-child(2) h2 em{color:#F2B544}
body.home .actband.act3 > div:nth-child(2) .btn-inv{background:rgb(255 255 255 / .1);color:var(--on-night);border-color:rgb(255 255 255 / .25)}
body.home .actband.act3 > div:nth-child(2) .btn-inv:hover{background:#F2B544;color:var(--night);border-color:#F2B544}
body.home .actband.act3 > div{display:flex;flex-direction:column;align-items:flex-start}
body.home .actband.act3 p{flex:1}
@media (max-width:1000px){body.home .actband.act3{grid-template-columns:1fr}body.home .actband.act3 > div{padding:44px 24px!important}}

/* photos under the agenda days and the theme pillars: they sit at the foot of each card so the three line up, reveal
   upwards as the card comes into view (home-motion.js), then drift in a slow zoom; hover brings them a touch closer */
body.home .day,body.home .pillars > div{display:flex;flex-direction:column}
body.home .day ul{margin-bottom:20px}
body.home .card-img{position:relative;margin:auto 0 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
body.home .pillars .card-img{margin-top:18px}
body.home .card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:card-drift 18s ease-in-out infinite alternate;
  transition:filter .6s var(--ease-out)}
body.home .card-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgb(10 10 31 / .28))}
@keyframes card-drift{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
body.home .day:hover .card-img img,body.home .pillars > div:hover .card-img img{filter:saturate(1.15) brightness(1.05)}
body.home .day:nth-child(2) .card-img img,body.home .pillars > div:nth-child(2) .card-img img{animation-delay:-6s}
body.home .day:nth-child(3) .card-img img,body.home .pillars > div:nth-child(3) .card-img img{animation-delay:-12s}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) body.home .card-img img{animation:none}}
/* third panel (Showcase your products): its own mint accent, beside violet (visit) and gold (sponsor) */
body.home .actband.act3 > div:nth-child(3) h2 em{color:#6EE7B7}
body.home .actband.act3 > div:nth-child(3) .btn-inv:hover{background:#6EE7B7;color:var(--night);border-color:#6EE7B7}

/* headlines: premium editorial cards (non-clickable articles) */
body.home #news .news{gap:clamp(14px,1.8vw,20px)}
body.home .nw{position:relative;padding:0 0 clamp(18px,2vw,22px);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgb(255 255 255 / .98),color-mix(in srgb,var(--paper) 85%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  box-shadow:0 1px 0 rgb(255 255 255 / .92) inset,0 22px 50px -30px rgb(91 33 182 / .16);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s var(--ease-out)}
body.home article.nw{cursor:default}
body.home article.nw:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--glow-b) 22%,var(--line));
  box-shadow:0 1px 0 rgb(255 255 255 / 1) inset,0 32px 60px -28px rgb(91 33 182 / .22)}
body.home .nw{padding-top:0}
body.home .nw-img{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);
  border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
body.home .nw-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgb(10 10 31 / .12))}
body.home .nw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease-out)}
body.home .nw-img.logo img{object-fit:contain;padding:12%}
body.home article.nw:hover .nw-img img{transform:scale(1.04)}
body.home .nw-img.logo{background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--paper) 90%,#fff))}
body.home .nw .y,body.home .nw b,body.home .nw .src{padding-inline:18px}
body.home .nw .y{margin-top:14px}
body.home .nw b{display:block;margin-top:6px;font-size:15px;line-height:1.45}
body.home .nw .src{margin-top:auto;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
body.home article.nw::after{opacity:.15}
body.home article.nw:hover::after{opacity:.35}

/* sponsors: both logo rows scroll inside one panel the width of the content, fading out at its edges */
body.home .logos-box{position:relative;display:grid;gap:10px;padding:14px 0;overflow:hidden;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 75%,transparent),0 1px 2px rgb(10 10 31 / .05),0 24px 50px -32px rgb(76 29 149 / .35)}
body.home .logos-box .marq{padding:0;background:none;border:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media (max-width:640px){body.home .logos-box{border-radius:16px;padding:10px 0;gap:8px}body.home .logos-box .logo-tile{width:140px;height:72px}}
/* sponsors heading on one line */
body.home #sponsors .sec-head{grid-template-columns:auto minmax(0,1fr)}
body.home #sponsors .sec-head h2{white-space:nowrap}
@media (max-width:900px){body.home #sponsors .sec-head{grid-template-columns:1fr}}
@media (max-width:560px){body.home #sponsors .sec-head h2{font-size:min(2.2rem,6.6vw)}}
/* leaders: no divider line; the note and the button sit centred together under the centred row of leaders */
body.home .ld-foot{border-top:0;justify-content:center;gap:14px 24px;text-align:center}
body.home .ld-foot::before{display:none}
/* agenda preview: the label and heading centred above the three day cards */
body.home #agenda-preview .sec-head{justify-items:center;text-align:center}
/* agenda preview: the "Side tracks" button reads as a real button at rest, not only on hover */
body.home #agenda-preview .row-gap{justify-content:center}
body.home #agenda-preview .btn-line{background:var(--surface);color:var(--cta);border:1.5px solid color-mix(in srgb,var(--cta) 45%,transparent);box-shadow:0 8px 20px -14px rgb(76 29 149 / .45)}
body.home #agenda-preview .btn-line:hover{background:color-mix(in srgb,var(--cta) 8%,var(--surface));border-color:var(--cta)}
/* Collaborate: the slow zoom grows from the handshake at the bottom, so it never crops it */
body.home .card-img img[src*="collaborate"]{transform-origin:50% 92%}

/* ================= STREAMS ORBIT (hero 1, client 26 Sep): the BioAsia 2027 streams replace the leader photos =================
   Each stream is a glass pill (icon + name) riding the ring; the featured one lights up and docks at the top while its icon fills
   the centre. The pills turn to icon-only badges where the ring is too small for names (the caption always names the stream). */
body.home .stage.streams .sat.st{width:max-content;aspect-ratio:auto;max-width:124px;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;border-radius:999px;
  border:1px solid rgb(255 255 255 / .16);background:rgb(16 14 44 / .82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--on-night);font:600 11px/1.2 var(--sans);letter-spacing:.005em;text-align:left;white-space:normal;opacity:.9;
  box-shadow:0 6px 18px -8px rgb(0 0 0 / .7)}
body.home .stage.streams .sat.st svg.li{flex:none;width:22px;height:22px;padding:4.5px;border-radius:50%;color:var(--glow-a);background:rgb(125 211 252 / .12);stroke-width:2}
body.home .stage.streams .sat.st span{min-width:0}
body.home .stage.streams .sat.st:hover{opacity:1;border-color:color-mix(in srgb,var(--glow-b) 70%,transparent);box-shadow:0 0 0 1px var(--glow-b),0 0 22px color-mix(in srgb,var(--glow-b) 45%,transparent)}
body.home .stage.streams .sat.st.on{opacity:1;z-index:3;transform:translate(-50%,-50%) scale(1.08);color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--cta),color-mix(in srgb,var(--cta) 45%,var(--glow-a)));box-shadow:0 0 0 1px rgb(255 255 255 / .25),0 10px 28px -8px color-mix(in srgb,var(--cta) 80%,transparent)}
body.home .stage.streams .sat.st.on svg.li{color:#fff;background:rgb(255 255 255 / .18)}
/* centre: the featured stream's icon on a deep disc, with its number */
body.home .stage.streams .core{width:36%}
body.home .stage.streams .st-core{position:relative;width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:6px;border-radius:50%;border:4px solid var(--night);
  background:radial-gradient(circle at 50% 30%,#2A2170,var(--night) 72%);color:#fff;transition:opacity .28s ease,transform .28s ease,filter .28s ease}
body.home .stage.streams .st-core svg.li{width:38%;height:38%;stroke-width:1.6;color:#fff;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--glow-b) 80%,transparent))}
body.home .stage.streams .st-core em{font:600 11px var(--mono);font-style:normal;letter-spacing:.2em;color:var(--glow-a)}
body.home .stage.streams .st-core.fade{opacity:0;transform:scale(.9);filter:blur(6px)}
body.home .stage.streams .sp-cap b{font-size:26px}
/* big screens: a little more room on the ring for the names */
/* desktop: a wider ring so ten named pills have room to travel without touching */
@media (min-width:1181px){
  body.home .stage.streams{width:min(100%,520px)}
  body.home .stage.streams .orbit{width:78%;margin:8% 0 10%;--rx:58;--ry:52}
}
@media (min-width:1600px){body.home .stage.streams{width:min(100%,560px)}body.home .stage.streams .sat.st{max-width:136px;font-size:12px}}
/* tablets and phones (and narrow desktop columns): icon-only badges so neighbours never overlap */
/* tablets held upright (the orbit gets its own full-width row): the same wide ellipse, centred */
@media (min-width:600px) and (max-width:900px){
  :root[data-hero="1"] body.home .hero-v .stage.streams{width:min(100%,560px);justify-self:center;margin-inline:auto}
  body.home .stage.streams .orbit{width:70%;margin:10% 0 12%;--rx:64;--ry:56}
}
@media (max-width:1180px) and (min-width:901px),(max-width:599px){
  body.home .stage.streams .sat.st{padding:4px;gap:0}
  body.home .stage.streams .sat.st span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.home .stage.streams .sat.st svg.li{width:30px;height:30px;padding:7px}
}
@media (max-width:900px){body.home .stage.streams .sp-cap b{font-size:22px}}

/* client 26 Sep: section labels were too small; the home page's eyebrows match the inner pages' larger size */
body.home main .eyebrow{font-size:clamp(13px,1.1vw,15.5px);letter-spacing:.14em}
body.home .ld-head .eyebrow{font-size:clamp(13px,1.1vw,15.5px);padding:9px 18px 9px 14px}
@media (max-width:560px){body.home main .eyebrow,body.home .ld-head .eyebrow{font-size:12.5px}}
/* stats panel labels: tidy block lines under each figure; on phones the headline figure takes the full row, the other two share one */
body.home .statbox > div:not(.sb-cta) span{display:block;margin-top:8px;line-height:1.45}
@media (max-width:560px){
  body.home .statbox{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding:22px 20px}
  body.home .statbox > div:first-child{grid-column:1 / -1}
  body.home .statbox b{font-size:28px}
}

/* streams orbit with photos (client 26 Sep: "use images instead of icons"): each pill leads with a round photo, and the featured
   stream's photo fills the centre disc with a soft night gradient and its number */
body.home .stage.streams .sat.st{padding:4px 12px 4px 4px;gap:8px}
body.home .stage.streams .sat.st img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1.5px rgb(255 255 255 / .22)}
body.home .stage.streams .sat.st.on img{box-shadow:0 0 0 2px #fff}
body.home .stage.streams .st-core{overflow:hidden;background:var(--night);padding:0}
body.home .stage.streams .st-core img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
body.home .stage.streams .st-core::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,transparent 45%,rgb(10 10 31 / .78) 100%)}
body.home .stage.streams .st-core em{position:absolute;left:0;right:0;bottom:13%;z-index:1;text-align:center;font:600 11px var(--mono);font-style:normal;letter-spacing:.18em;color:#fff}
@media (max-width:1180px) and (min-width:901px),(max-width:599px){
  body.home .stage.streams .sat.st{padding:3px}
  body.home .stage.streams .sat.st img{width:36px;height:36px}
}
@media (min-width:600px){body.home .stage.streams .core{width:40%}}
/* centre photo runs right up to the gradient ring (no dark band between them) */
body.home .stage.streams .core{padding:3px}
body.home .stage.streams .st-core{border:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
body.home .stage.streams .st-core img{inset:0;border-radius:50%}

/* streams as glossy 3D icons (client reference, 26 Sep): each pill leads with its icon on a small glass disc; the featured
   stream's icon floats large in the centre disc over a soft glow */
body.home .stage.streams .sat.st img{width:32px;height:32px;padding:4px;object-fit:contain;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgb(255 255 255 / .16),rgb(255 255 255 / .04));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14)}
body.home .stage.streams .sat.st.on img{background:rgb(255 255 255 / .22);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35)}
body.home .stage.streams .st-core{background:radial-gradient(circle at 50% 38%,#2E2780 0%,#15123F 55%,var(--night) 100%)}
body.home .stage.streams .st-core::after{content:none}
body.home .stage.streams .st-core img{inset:17% 17% 25%;width:66%;height:58%;object-fit:contain;border-radius:0;
  filter:drop-shadow(0 10px 18px rgb(0 0 0 / .45)) drop-shadow(0 0 22px color-mix(in srgb,var(--glow-b) 45%,transparent))}
body.home .stage.streams .st-core em{bottom:11%;color:var(--glow-a)}
@media (max-width:1180px) and (min-width:901px),(max-width:599px){body.home .stage.streams .sat.st img{width:38px;height:38px;padding:5px}}
body.home .stage.streams .st-core img{border:0;background:none;box-shadow:none}

/* streams as real photos (client, 26 Sep): every photo fills its circle edge to edge, in the pills and in the centre disc */
body.home .stage.streams .sat.st img{width:34px;height:34px;padding:0;object-fit:cover;object-position:center 22%;border-radius:50%;background:none;box-shadow:0 0 0 1.5px rgb(255 255 255 / .25)}
body.home .stage.streams .sat.st.on img{background:none;box-shadow:0 0 0 2px #fff}
body.home .stage.streams .st-core{background:var(--night)}
body.home .stage.streams .st-core img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:50%;filter:none}
body.home .stage.streams .st-core::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,transparent 62%,rgb(10 10 31 / .55) 100%)}
body.home .stage.streams .st-core em{display:none}
@media (min-width:600px){body.home .stage.streams .core{width:42%}}
@media (max-width:1180px) and (min-width:901px),(max-width:599px){body.home .stage.streams .sat.st img{width:40px;height:40px;padding:0}}