/* Hero v2 — used by zaltrik-v2.html only.
   Typography follows the site system: Space Grotesk (var(--serif)) for titles and
   subheadings, Inter (var(--sans)) for everything else. */

.hero-v2{
  padding:72px 0 56px;
  background:
    radial-gradient(900px 620px at 78% 38%, rgba(201,154,78,0.22), transparent 62%),
    radial-gradient(600px 400px at 100% 100%, rgba(201,154,78,0.10), transparent 70%),
    var(--ink);
}
.hero-v2 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:24px;align-items:center;}

/* ---------- copy ---------- */
.hero-v2 .eyebrow{margin-bottom:22px;}
.hero-v2 h1.hero-h{
  font-size:clamp(40px,4.6vw,66px);
  line-height:1.06;
  max-width:11.5em;
  letter-spacing:-0.025em;
}
.hero-v2 h1.hero-h .line{display:block;}
.hero-v2 h1.hero-h .gold{color:var(--accent-light);}
.hero-v2 .hero-sub{margin-top:30px;font-size:16px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:50ch;}

.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
.pill-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px 10px 11px;border-radius:999px;
  background:rgba(255,255,255,0.05);
  font-size:14px;color:rgba(255,255,255,0.82);
}
.pill-item svg{width:20px;height:20px;color:var(--accent);flex:none;}

.hero-v2 .hero-cta{margin-top:36px;}
.hero-v2 .hero-cta .btn{padding:16px 32px;font-size:15.5px;}
.hero-v2 .hero-cta .btn svg{flex:none;}

/* ---------- stage ---------- */
.hero-stage{position:relative;height:760px;min-width:0;perspective:1600px;}
.stage-glow{
  position:absolute;left:50%;top:44%;width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(232,200,143,0.42) 0%, rgba(201,154,78,0.20) 38%, transparent 68%);
  filter:blur(8px);
}
.stage-ring{position:absolute;left:50%;top:44%;border-radius:50%;border:1px solid rgba(232,200,143,0.22);transform:translate(-50%,-50%);}
.stage-ring.r1{width:560px;height:560px;border-color:rgba(232,200,143,0.30);box-shadow:0 0 60px rgba(201,154,78,0.18) inset;}
.stage-ring.r2{width:720px;height:720px;border-style:dashed;border-color:rgba(232,200,143,0.14);}
.orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 2px rgba(232,200,143,0.7);}
.orbit-dot.d1{left:78%;top:12%;}
.orbit-dot.d2{left:96%;top:44%;width:9px;height:9px;}
.orbit-dot.d3{left:28%;top:80%;width:7px;height:7px;}
.orbit-dot.d4{left:84%;top:80%;}

.stage-rocks{position:absolute;left:-10%;width:138%;bottom:-56px;height:auto;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(0 -10px 40px rgba(201,154,78,0.18));}

/* ---------- phone (iPhone Pro style: titanium frame, thin bezel, Dynamic Island, side buttons) ---------- */
.v2-phone{
  position:absolute;left:50%;top:47%;width:322px;z-index:2;
  transform:translate(-50%,-50%) rotateZ(6deg) rotateY(-10deg);
  padding:4px;border-radius:58px;
  background:
    linear-gradient(135deg,#f6e2b6 0%,#b88f55 22%,#6e5130 46%,#cfa766 70%,#f3dba5 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,244,214,0.55),
    inset 0 0 0 3px rgba(60,42,18,0.55),
    0 60px 110px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,235,190,0.18),
    0 0 130px -20px rgba(201,154,78,0.5);
}
.v2-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#8a6a3c,#e8c88f 50%,#8a6a3c);box-shadow:0 0 0 .5px rgba(0,0,0,.4);}
.b-action{left:-3.5px;top:112px;height:30px;}
.b-volup{left:-3.5px;top:166px;height:56px;}
.b-voldn{left:-3.5px;top:234px;height:56px;}
.b-power{right:-3.5px;top:196px;height:92px;}
.b-camctl{right:-3.5px;top:420px;height:58px;width:3.5px;}
.v2-screen{
  position:relative;background:linear-gradient(180deg,#0e1017,#07080c);
  border:7px solid #020203;border-radius:54px;padding:10px 14px 24px;min-height:660px;
  display:flex;flex-direction:column;color:var(--phone-text);overflow:hidden;
}
.v2-screen::before{ /* glass sheen */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(232,200,143,0.06) 100%);
}
.v2-screen::after{ /* home indicator */
  content:'';position:absolute;left:50%;bottom:8px;width:112px;height:4px;border-radius:2px;transform:translateX(-50%);background:rgba(255,255,255,0.7);z-index:5;
}
.v2-status{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;padding:6px 14px 0;}
.v2-island{position:relative;width:98px;height:28px;border-radius:15px;background:#000;display:block;}
.v2-island b{position:absolute;right:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a63 0%,#0a0f1e 55%,#000 100%);box-shadow:0 0 0 1.5px #0d0d10;}
.v2-sig{display:flex;align-items:center;gap:5px;}
.v2-top{display:flex;align-items:center;justify-content:space-between;margin-top:20px;color:var(--phone-text);}
.v2-brandline{font-size:11px;letter-spacing:0.04em;color:var(--phone-text-dim);}
.v2-bell{position:relative;display:flex;}
.v2-bell i{position:absolute;top:-1px;right:0;width:7px;height:7px;border-radius:50%;background:#e5533d;}
.v2-balance{margin-top:30px;}
.v2-label{font-size:12px;color:var(--phone-text-dim);}
.v2-amount{font-family:var(--serif);font-size:36px;font-weight:700;margin-top:4px;color:#fff;letter-spacing:-0.02em;}
.v2-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:18px 0 14px;}
.v2-msg{max-width:84%;padding:12px 15px;border-radius:15px;font-size:14px;line-height:1.45;}
.v2-msg.user{align-self:flex-end;background:#f6f4ee;color:#15171d;border-bottom-right-radius:4px;transform-origin:100% 100%;}
.v2-msg.ai{
  align-self:flex-start;color:var(--phone-text);border-bottom-left-radius:4px;transform-origin:0 100%;
  background:linear-gradient(135deg,rgba(201,154,78,0.30),rgba(201,154,78,0.10));
  border:1px solid rgba(201,154,78,0.38);
}
.v2-msg span{display:block;margin-top:4px;font-size:12px;color:var(--phone-text-dim);}
.v2-input{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  font-size:13.5px;color:var(--phone-text-dim);
}
.v2-input svg{color:var(--accent-light);flex:none;}

/* ---------- motion ---------- */
/* chat bubbles pop in with a springy overshoot, hold, then fade; 10s loop */
.v2-msg.c1{animation:v2pop1 10s infinite;}
.v2-msg.c2{animation:v2pop2 10s infinite;}
.v2-msg.c3{animation:v2pop3 10s infinite;}
.v2-msg.c4{animation:v2pop4 10s infinite;}
@keyframes v2pop1{
  0%,3%{opacity:0;transform:translateY(26px) scale(.82);}
  6%{opacity:1;transform:translateY(-9px) scale(1.05);}
  9%{transform:translateY(3px) scale(.98);}
  11%,88%{opacity:1;transform:none;}
  95%,100%{opacity:0;transform:translateY(10px) scale(.95);}
}
@keyframes v2pop2{
  0%,20%{opacity:0;transform:translateY(26px) scale(.82);}
  23%{opacity:1;transform:translateY(-9px) scale(1.05);}
  26%{transform:translateY(3px) scale(.98);}
  28%,88%{opacity:1;transform:none;}
  95%,100%{opacity:0;transform:translateY(10px) scale(.95);}
}
@keyframes v2pop3{
  0%,40%{opacity:0;transform:translateY(26px) scale(.82);}
  43%{opacity:1;transform:translateY(-9px) scale(1.05);}
  46%{transform:translateY(3px) scale(.98);}
  48%,88%{opacity:1;transform:none;}
  95%,100%{opacity:0;transform:translateY(10px) scale(.95);}
}
@keyframes v2pop4{
  0%,60%{opacity:0;transform:translateY(26px) scale(.82);}
  63%{opacity:1;transform:translateY(-9px) scale(1.05);}
  66%{transform:translateY(3px) scale(.98);}
  68%,88%{opacity:1;transform:none;}
  95%,100%{opacity:0;transform:translateY(10px) scale(.95);}
}
.v2-amount{animation:v2tick 10s infinite;transform-origin:0 50%;}
@keyframes v2tick{0%,2%{transform:scale(.9);opacity:.4;}5%{transform:scale(1.07);opacity:1;}8%,100%{transform:none;opacity:1;}}

/* floating bob: uses the independent `translate` property so it stacks on each element's own transform */
.v2-phone{animation:v2bob 5.5s ease-in-out infinite;}
.float-card{animation:v2bob 4.6s ease-in-out infinite;}
.fc-2{animation-duration:5.4s;animation-delay:-1.2s;}
.fc-3{animation-duration:5s;animation-delay:-2.1s;}
.fc-4{animation-duration:4.2s;animation-delay:-3s;}
@keyframes v2bob{0%,100%{translate:0 0;}50%{translate:0 -14px;}}
.orbit-dot{animation:v2pulse 3s ease-in-out infinite;}
.orbit-dot.d2{animation-delay:-.8s;}.orbit-dot.d3{animation-delay:-1.6s;}.orbit-dot.d4{animation-delay:-2.2s;}
@keyframes v2pulse{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.7);opacity:.5;}}

/* graphics sit a little further right than the grid column */
.hero-stage{left:clamp(0px,3.2vw,56px);}

/* ---------- floating glass cards ---------- */
.float-card{
  position:absolute;display:flex;align-items:center;gap:12px;width:232px;padding:16px 16px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(60,58,56,0.62),rgba(26,25,24,0.55));
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  box-shadow:0 26px 50px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.10);
}
.fc-icon{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-light);background:radial-gradient(circle at 30% 30%,rgba(232,200,143,0.30),rgba(201,154,78,0.10));border:1px solid rgba(232,200,143,0.25);}
.fc-icon svg{width:24px;height:24px;}
.fc-title{font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.01em;}
.fc-sub{margin-top:3px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,0.55);}
.fc-1{left:-64px;top:15%;transform:rotateZ(-7deg) rotateY(14deg);}
.fc-2{left:-52px;top:50%;transform:rotateZ(-6deg) rotateY(14deg);}
.fc-3{right:-44px;top:11%;transform:rotateZ(-6deg) rotateY(-16deg);}
.fc-4{right:-38px;top:56%;transform:rotateZ(-6deg) rotateY(-16deg);}

/* ---------- responsive ---------- */
@media(max-width:1500px){
  .hero-stage{left:12px;}
  .fc-1{left:-40px;}.fc-2{left:-30px;}
  .fc-3{right:-6px;}.fc-4{right:0;}
}
@media(max-width:1240px){
  .hero-v2 h1.hero-h{font-size:clamp(38px,4.4vw,56px);}
  .float-card{width:228px;padding:16px;}
  .fc-icon{width:44px;height:44px;}
}
@media(max-width:1020px){
  .hero-v2 .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-stage{height:700px;max-width:640px;margin:0 auto;width:100%;left:0;}
}
@media(max-width:620px){
  .hero-v2{padding:48px 0 40px;}
    .hero-stage{height:620px;}
  .stage-ring.r2,.fc-2,.fc-4{display:none;}
  .v2-phone{width:290px;}
  .v2-screen{min-height:560px;}
  .float-card{width:190px;gap:10px;padding:12px;}
  .fc-title{font-size:14px;}
  .fc-sub{font-size:11.5px;}
  .fc-1{left:-4px;top:2%;}
  .fc-3{right:-4px;top:80%;}
}

/* Photographic scenery; the original interactive phone remains above it. */
.hero-stage{isolation:isolate;}
.hero-stage::before{
  content:"";position:absolute;inset:-30px -75px -56px;z-index:-2;pointer-events:none;
  background:url("hero-rocks-bg.png") center bottom / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.hero-stage .stage-rocks{display:none;}
.hero-stage .stage-glow{opacity:.65;z-index:-1;}
@media(max-width:620px){
  .hero-stage::before{inset:-20px -26px -40px;}
}

/* Extend the image left without stretching the original scenery. */
.hero-v2{isolation:isolate;background:#090d12;}
.hero-v2::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("hero-rocks-wide.png") right bottom / 100% auto no-repeat;
}
.hero-v2::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#090d12 0%,transparent 30%,transparent 92%,#090d12 100%);
}
.hero-stage::before{display:none;}
@media(max-width:1020px){
 .hero-v2::before{background-size:auto 740px;background-position:right bottom;}
}.hero-v2::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 34%,#000 59%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 34%,#000 59%);}
@media(max-width:1020px){.hero-v2::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 65%);mask-image:linear-gradient(to bottom,transparent 0%,#000 65%);}}

/* Preserve the approved phone-to-rock placement on the right. */
.hero-stage::before{display:block;}
.hero-v2::before{
 -webkit-mask-image:linear-gradient(to right,#000 0%,#000 35%,transparent 62%),linear-gradient(to bottom,transparent 0%,transparent 34%,#000 59%);
 mask-image:linear-gradient(to right,#000 0%,#000 35%,transparent 62%),linear-gradient(to bottom,transparent 0%,transparent 34%,#000 59%);
 -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media(max-width:1020px){.hero-v2::before{display:none;}}

/* Consistent spacing between the hero copy groups. */
.hero-v2 .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.hero-v2 .hero-copy > .eyebrow,
.hero-v2 .hero-copy > .hero-h,
.hero-v2 .hero-copy > .hero-sub,
.hero-v2 .hero-copy > .hero-pills,
.hero-v2 .hero-copy > .hero-cta{margin-top:0;margin-bottom:0;}

/* Frosted glass for the hero's Connect Now action. */
.hero-v2 .hero-cta .btn-ghost{
 background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.065));
 border:1px solid rgba(255,255,255,.30);
 -webkit-backdrop-filter:blur(18px) saturate(145%);
 backdrop-filter:blur(18px) saturate(145%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.18);
 color:#fff;transition:background .2s,border-color .2s,box-shadow .2s;
}
.hero-v2 .hero-cta .btn-ghost:hover{
 background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(232,200,143,.12));
 border-color:rgba(232,200,143,.6);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 28px rgba(201,154,78,.12);
}
.hero-v2 .hero-cta .btn-ghost:focus-visible{outline:2px solid var(--accent-light);outline-offset:4px;}

/* Match the Connect Now frosted finish on all hero feature pills. */
.hero-v2 .hero-pills .pill-item{
 background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.065));
 border:1px solid rgba(255,255,255,.30);
 -webkit-backdrop-filter:blur(18px) saturate(145%);
 backdrop-filter:blur(18px) saturate(145%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.18);
 color:rgba(255,255,255,.9);
}

/* Carry the mountain scenery through to the right edge of the banner. */
.hero-v2::after{
 background:url("hero-rocks-bg.png") right bottom / auto 100% no-repeat;
 -webkit-mask-image:linear-gradient(to right,transparent 70%,#000 92%),linear-gradient(to bottom,transparent 0%,#000 35%,#000 96%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 70%,#000 92%),linear-gradient(to bottom,transparent 0%,#000 35%,#000 96%,transparent 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media(max-width:1020px){
 .hero-v2::after{background-size:auto 740px;-webkit-mask-image:linear-gradient(to right,transparent 65%,#000 95%),linear-gradient(to bottom,transparent 45%,#000 75%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent 65%,#000 95%),linear-gradient(to bottom,transparent 45%,#000 75%,#000 96%,transparent);}
}

/* A single continuous scene, with empty space behind the copy and actions. */
.hero-v2{background:#090d12;padding:64px 0;}
.hero-v2::before{display:block;inset:0;background:url("hero-mountains-seamless.png") center bottom / 100% 100% no-repeat;-webkit-mask-image:none;mask-image:none;}
.hero-v2::after{display:none;}
.hero-v2 .hero-stage::before{display:none;}
.hero-v2 .hero-grid{align-items:center;}
.hero-v2 .hero-copy{align-self:center;padding:0;}
.hero-v2 .hero-stage{left:0;}
.hero-v2 .stage-glow{opacity:.3;}
@media(max-width:1020px){
 .hero-v2{padding:48px 0;}
 .hero-v2::before{display:none;}
 .hero-v2 .hero-stage::before{display:block;inset:-20px -32px -36px;background:url("hero-mountains-seamless.png") right bottom / auto 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 95%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 95%,transparent);}
 .hero-v2 .hero-grid{gap:48px;}
}