/* KalkiWeb V3 homepage: V2 motion engine inside the V1 visual system. */
.home-hero{
  position:relative;
  width:100%;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  --hero-y:0px;
  --hero-scale:1;
  --hero-alpha:1;
  background:
    radial-gradient(circle at 66% 48%,rgba(115,144,160,.11),transparent 28%),
    radial-gradient(circle at 79% 77%,rgba(255,149,43,.11),transparent 29%),
    #030405;
}
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.64) 0,rgba(0,0,0,.24) 38%,transparent 62%),
    radial-gradient(ellipse 72% 68% at 63% 48%,transparent 0 36%,rgba(0,0,0,.44) 74%,rgba(0,0,0,.82) 100%);
}
.home-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  z-index:4;
  height:18%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,#030405);
}
.hero-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  pointer-events:none;
}
.home-hero .network{z-index:1}
.home-hero .webgl{z-index:2;opacity:0;transition:opacity .8s ease}
.home-hero .bursts{z-index:3}
.webgl-ready .home-hero .webgl{opacity:1}
.hero-fallback{
  position:absolute;
  z-index:2;
  left:63%;
  top:49%;
  width:min(31vw,470px);
  height:auto;
  transform:translate(-50%,-50%);
  opacity:.76;
  filter:brightness(.72) contrast(1.08) drop-shadow(0 38px 54px rgba(0,0,0,.82));
  transition:opacity .6s ease;
}
.webgl-ready .hero-fallback{opacity:0}

.home-hero-copy{
  position:absolute;
  z-index:7;
  left:var(--pad);
  top:50%;
  max-width:min(680px,47vw);
  padding:0;
  transform:translateY(calc(-44% + var(--hero-y))) scale(var(--hero-scale));
  transform-origin:left center;
  opacity:var(--hero-alpha);
  will-change:transform,opacity;
}
.home-hero-copy .eyebrow{
  margin:0 0 20px;
  font:500 11px/1.2 var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.home-hero-copy .eyebrow s{display:none}
.home-hero-copy h1{
  max-width:10ch;
  margin:0;
  font-size:clamp(4rem,7.05vw,7.8rem);
  font-weight:600;
  line-height:.91;
  letter-spacing:-.065em;
  text-wrap:balance;
  transition:transform .22s ease-out;
  will-change:transform;
}
.home-hero-copy h1 .ln{
  overflow:visible;
  padding:0 .08em .14em;
  margin:0 -.08em -.1em;
}
.home-hero-copy h1 em{
  color:var(--gold);
  font-style:normal;
}
.home-hero-copy .meta{
  max-width:38ch;
  margin:26px 0 0;
  color:var(--body);
  font-size:clamp(.95rem,1.15vw,1.08rem);
  line-height:1.58;
}
.home-hero-copy .hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:31px;
}
.home-hero .charge-label{
  position:absolute;
  z-index:7;
  right:var(--pad);
  top:50%;
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--muted);
  font:500 10px/1.7 var(--mono);
  letter-spacing:.16em;
  text-align:right;
  text-transform:uppercase;
}
.home-hero .charge-label i{
  width:40px;
  height:1px;
  background:var(--line-2);
}
.home-scroll{
  position:absolute;
  z-index:7;
  right:var(--pad);
  bottom:28px;
  display:flex;
  align-items:center;
  gap:17px;
  color:var(--muted);
  font:500 10px/1 var(--mono);
  letter-spacing:.18em;
  text-decoration:none;
  text-transform:uppercase;
}
.home-scroll i{
  position:relative;
  display:block;
  width:68px;
  height:1px;
  overflow:hidden;
  background:var(--line-2);
}
.home-scroll i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:translateX(-100%);
  animation:v3-scroll-line 2.2s var(--e-std) infinite;
}
@keyframes v3-scroll-line{
  0%{transform:translateX(-100%)}
  48%,100%{transform:translateX(110%)}
}

.hero-static .home-hero .webgl,
.hero-static .home-hero .network,
.hero-static .home-hero .bursts{display:none}
.hero-static .hero-fallback{opacity:.66}

@media(max-width:1060px){
  .home-hero .charge-label{display:none}
  .home-hero-copy{max-width:min(650px,53vw)}
  .home-hero-copy h1{font-size:clamp(3.7rem,7.3vw,6.5rem)}
}
@media(max-width:900px){
  .home-hero{min-height:760px}
  .home-hero::before{
    background:
      linear-gradient(0deg,rgba(0,0,0,.74) 0,rgba(0,0,0,.24) 54%,transparent 78%),
      radial-gradient(ellipse 80% 70% at 58% 35%,transparent 0 35%,rgba(0,0,0,.5) 82%);
  }
  .home-hero-copy{
    left:var(--pad);
    right:var(--pad);
    top:auto;
    bottom:92px;
    max-width:none;
    transform:none;
  }
  .home-hero-copy .eyebrow{margin-bottom:15px;font-size:9.5px}
  .home-hero-copy h1{max-width:10ch;font-size:clamp(3.15rem,12vw,6rem);line-height:.94}
  .home-hero-copy .meta{max-width:35ch;margin-top:22px;font-size:.94rem}
  .hero-fallback{left:59%;top:32%;width:min(57vw,380px);opacity:.58}
  .home-scroll{left:var(--pad);right:auto;bottom:27px}
}
@media(max-width:600px){
  .home-hero{min-height:780px}
  .home-hero-copy{bottom:98px}
  .home-hero-copy h1{font-size:clamp(2.8rem,13vw,4.65rem)}
  .home-hero-copy .meta{max-width:33ch;font-size:.9rem;line-height:1.5}
  .home-hero-copy .hero-actions{gap:10px;margin-top:24px}
  .home-hero-copy .btn{padding:14px 20px}
  .home-hero-copy .btn.ghost{background:rgba(3,4,5,.28);backdrop-filter:blur(8px)}
}
@media(max-height:680px) and (min-width:901px){
  .home-hero{min-height:600px}
  .home-hero-copy{top:53%;max-width:52vw}
  .home-hero-copy .eyebrow{margin-bottom:12px}
  .home-hero-copy h1{font-size:clamp(3.25rem,8.2vh,4.4rem);max-width:12ch}
  .home-hero-copy .meta{margin-top:16px;font-size:.86rem;max-width:42ch}
  .home-hero-copy .hero-actions{margin-top:18px}
  .hero-fallback{left:72%;width:min(27vw,330px)}
}
@media(prefers-reduced-motion:reduce){
  .home-scroll i::after{animation:none;transform:none}
  .home-hero-copy{transform:none;top:22%;opacity:1}
  .home-hero-copy h1{transform:none!important}
}