/* 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). */

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 .lbar{container-type:inline-size;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) auto;grid-template-areas:"when state" "clock clock" "acts acts";
  align-items:center;gap:18px 16px;padding:20px 22px;border-radius:19px;background:linear-gradient(160deg,#141137,#0B0A22)}
body.home .lb-side{display:contents}
body.home .lb-when{grid-area:when;gap:5px}
body.home .lb-l{font-size:10.5px;letter-spacing:.18em;color:var(--glow-a)}
body.home .lb-when b{font:600 15px var(--sans);letter-spacing:-.005em}
body.home .lb-state{grid-area:state;justify-self:end;align-self:start;padding:6px 12px 6px 10px;border-radius:999px;font:500 12px 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;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)}}
/* four equal tiles */
body.home .lb-clock{grid-area:clock;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;white-space:normal}
body.home .lb-t{display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;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(26px,3vw,38px)/1 var(--display);letter-spacing:-.03em;color:var(--on-night);font-variant-numeric:tabular-nums;
  background:none;-webkit-text-fill-color:currentColor}
body.home .lb-clock .u{margin:0;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-2)}
body.home .lb-t:last-child .n{color:var(--glow-a)}
/* actions side by side */
body.home .lb-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:10px}
body.home .lb-acts .btn{flex:1 1 170px;padding:11px 16px}
@container (max-width:420px){
  body.home .lbar-in{grid-template-columns:1fr;grid-template-areas:"when" "state" "clock" "acts";padding:16px;gap:14px}
  body.home .lb-state{justify-self:start}
  body.home .lb-clock{gap:6px}
  body.home .lb-t{padding:11px 4px 9px;border-radius:12px}
  body.home .lb-clock .u{font-size:9.5px;letter-spacing:.1em}
}

/* 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}

/* 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: the photo from each article's clipping across the top of its card */
body.home .nw{padding-top:0}
body.home .nw-img{position:relative;margin:0 -18px 6px;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body.home .nw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
body.home .nw-img.logo img{object-fit:contain}
body.home .nw:hover .nw-img img{transform:scale(1.05)}
body.home .nw-img.logo{background:#fff}

/* 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)}