/* Godray hero animation — ported from GodrayHeroAnimation.jsx */
.gm-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;font-family:var(--font)}
.gm-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(17,24,39,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,39,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 70% at 70% 45%,#000 30%,transparent 75%)}
.gm-orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.28;animation:gmFloat 9s ease-in-out infinite}
.gm-orb-a{width:280px;height:280px;right:8%;top:8%;background:radial-gradient(circle,rgba(196,160,53,.22),transparent 70%);animation-delay:-2s}
.gm-orb-b{width:220px;height:220px;right:28%;bottom:10%;background:radial-gradient(circle,rgba(0,174,239,.14),transparent 70%);animation-delay:-5s}
.gm-rays{position:absolute;right:6%;top:50%;width:720px;height:720px;transform:translateY(-52%);opacity:.9}
.gm-ray{position:absolute;left:50%;top:50%;width:6px;height:46%;transform-origin:50% 0;border-radius:6px;filter:blur(.2px);transform:rotate(var(--r));animation:gmPulse 3.6s ease-in-out infinite}
.gm-stage-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:24px 5% 56px 0}
.gm-rig{position:relative;width:min(540px,46vw);isolation:isolate}
.gm-browser{position:relative;z-index:1;width:100%;aspect-ratio:16/11;background:#fff;border:1px solid #E5E7EB;border-radius:14px;box-shadow:0 28px 60px -28px rgba(17,24,39,.28);transform:perspective(1400px) rotateY(-10deg) rotateX(6deg);animation:gmHover 7s ease-in-out infinite;overflow:hidden}
.gm-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #E5E7EB;background:#fff}
.gm-dot{width:8px;height:8px;border-radius:50%}
.gm-url{flex:1;height:22px;border-radius:6px;background:#F3F4F6;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#4B5563;letter-spacing:.02em}
.gm-url b{color:#111827;font-weight:600}
.gm-caret{display:inline-block;width:1px;height:12px;background:#C4A035;margin-left:2px;animation:gmBlink 1s steps(1) infinite;vertical-align:middle}
.gm-site{position:relative;height:calc(100% - 38px);padding:16px 18px 14px;background:#fff}
.gm-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.gm-logo{display:flex;gap:2px;align-items:flex-end;height:14px}
.gm-logo i{width:3px;border-radius:2px;display:block;transform-origin:bottom;animation:gmGrow 1.8s ease-in-out infinite}
.gm-links{display:flex;gap:10px}
.gm-links span{width:28px;height:6px;border-radius:3px;background:#E5E7EB}
.gm-hero-line{height:18px;width:62%;border-radius:4px;background:#111827;margin-bottom:8px;transform-origin:left;animation:gmReveal .9s ease both}
.gm-hero-sub{height:8px;width:48%;border-radius:4px;background:#D1D5DB;margin-bottom:16px;animation:gmReveal .9s .15s ease both}
.gm-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.gm-card{height:72px;border:1px solid #E5E7EB;border-radius:8px;background:#fff;padding:8px;opacity:0;transform:translateY(10px);animation:gmUp .55s ease forwards}
.gm-card .t{height:6px;width:70%;border-radius:3px;background:#111827;margin-bottom:8px}
.gm-card .g{height:28px;border-radius:4px}
.gm-phone{position:absolute;right:-22px;bottom:-28px;width:118px;height:210px;background:#111827;border-radius:18px;border:3px solid #1f2937;box-shadow:0 18px 40px -18px rgba(17,24,39,.45);padding:10px 8px;transform:rotate(8deg);animation:gmFloat 6s ease-in-out infinite;z-index:2}
.gm-notch{width:36px;height:4px;border-radius:4px;background:#374151;margin:0 auto 8px}
.gm-post{height:44px;border-radius:6px;background:#1f2937;margin-bottom:6px;opacity:0;animation:gmUp .5s ease forwards}
.gm-post:nth-child(2){animation-delay:.2s}
.gm-post:nth-child(3){animation-delay:.4s}
.gm-post:nth-child(4){animation-delay:.6s}
.gm-chart{display:flex;align-items:flex-end;gap:6px;height:70px;padding-top:8px}
.gm-barcol{flex:1;border-radius:3px 3px 0 0;transform-origin:bottom;animation:gmGrow 1.4s ease-in-out infinite}
.gm-chip{position:relative;z-index:8;overflow:hidden;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #E5E7EB;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:600;color:#111827;box-shadow:0 10px 28px -10px rgba(17,24,39,.45);animation:gmFloat 5.5s ease-in-out infinite;white-space:nowrap;pointer-events:auto;cursor:pointer;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease,color .28s ease,letter-spacing .28s ease}
.gm-chip i{width:7px;height:7px;border-radius:50%;display:block;flex-shrink:0;transition:transform .28s ease,box-shadow .28s ease}
.gm-chip::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.gm-chip:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.1);border-color:#C4A035;background:#FFFDF6;color:#8A7018;letter-spacing:.02em;box-shadow:0 0 0 4px rgba(196,160,53,.12),0 18px 36px -12px rgba(196,160,53,.5)}
.gm-chip:hover i{transform:scale(1.45);box-shadow:0 0 0 5px rgba(196,160,53,.2);animation:gmDotPulse .7s ease infinite}
.gm-chip:hover::after{animation:gmShine .75s ease}
.gm-chip-row .gm-chip:nth-child(1){animation-delay:0s}
.gm-chip-row .gm-chip:nth-child(2){animation-delay:-.9s}
.gm-chip-row .gm-chip:nth-child(3){animation-delay:-1.8s}
.gm-chip-row .gm-chip:nth-child(4){animation-delay:-2.7s}
.gm-chip-row .gm-chip:nth-child(5){animation-delay:-3.6s}
.gm-chip-row{position:absolute;z-index:8;left:14px;right:14px;bottom:34px;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:6px}
.gm-cursor{position:absolute;left:0;top:0;width:16px;height:16px;z-index:5;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));pointer-events:none}
.gm-cursor svg{display:block}
.gm-scene{position:absolute;left:18px;bottom:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#C4A035}
.gm-scene em{font-style:normal;color:#9CA3AF;margin:0 6px}
.gm-scene .on{color:#111827}
.gm-scene-panel{display:none}
.gm-scene-panel.active{display:block}

#hero-animation{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

/* Mobile + tablet: keep animation visible in its own band under the copy */
@media (max-width:960px){
  .hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    height:auto;
  }

  #hero-animation{
    position:relative;
    inset:auto;
    order:2;
    height:340px;
    width:100%;
    flex-shrink:0;
    background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
    border-top:1px solid var(--line,#e5e7eb);
  }

  .gm-stage{
    opacity:1;
  }

  .gm-stage-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 16px 28px;
  }

  .gm-rig{
    width:min(360px,92vw);
  }

  .gm-browser{
    border-radius:12px;
    transform:perspective(1200px) rotateY(-4deg) rotateX(3deg);
    box-shadow:0 18px 40px -22px rgba(17,24,39,.32);
  }

  .gm-phone{
    right:-14px;
    bottom:-18px;
    width:88px;
    height:158px;
    border-radius:14px;
    padding:8px 6px;
  }

  .gm-notch{width:28px;height:3px;margin-bottom:6px}
  .gm-post{height:32px;margin-bottom:5px}
  .gm-bar{height:32px;padding:0 10px}
  .gm-url{height:18px;font-size:10px;padding:0 8px}
  .gm-site{padding:12px 12px 10px}
  .gm-cards{gap:6px}
  .gm-card{height:56px;padding:6px}
  .gm-card .g{height:22px}
  .gm-hero-line{height:14px;margin-bottom:6px}
  .gm-hero-sub{height:6px;margin-bottom:12px}
  .gm-rays{right:50%;top:42%;width:420px;height:420px;transform:translate(35%,-50%);opacity:.55}
  .gm-orb-a{width:160px;height:160px;right:4%;top:4%}
  .gm-orb-b{width:140px;height:140px;right:18%;bottom:6%}
  .gm-chip-row{
    left:8px;
    right:8px;
    bottom:18px;
    gap:4px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .gm-chip{
    padding:4px 7px;
    font-size:9px;
    gap:4px;
  }
  .gm-chip i{width:6px;height:6px}
  .gm-scene{left:12px;bottom:8px;font-size:9px;letter-spacing:.12em}
  .gm-cursor{display:none}
}

@media (max-width:480px){
  #hero-animation{height:300px}
  .gm-rig{width:min(300px,90vw)}
  .gm-phone{width:76px;height:136px;right:-10px;bottom:-14px}
  .gm-chip-row{bottom:14px}
  .gm-chip{font-size:8px;padding:3px 6px}
}

@media (min-width:961px){
  #hero-animation{
    position:absolute;
    inset:0;
  }
}

@keyframes gmHover{0%,100%{transform:perspective(1400px) rotateY(-10deg) rotateX(6deg) translateY(0)}50%{transform:perspective(1400px) rotateY(-8deg) rotateX(5deg) translateY(-8px)}}
@keyframes gmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes gmPulse{0%,100%{opacity:.35;transform:rotate(var(--r)) scaleY(.92)}50%{opacity:.95;transform:rotate(var(--r)) scaleY(1)}}
@keyframes gmGrow{0%{transform:scaleY(.15)}50%{transform:scaleY(1)}100%{transform:scaleY(.4)}}
@keyframes gmReveal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes gmUp{to{opacity:1;transform:translateY(0)}}
@keyframes gmShine{to{transform:translateX(130%)}}
@keyframes gmDotPulse{0%,100%{transform:scale(1.45);box-shadow:0 0 0 5px rgba(196,160,53,.2)}50%{transform:scale(1.75);box-shadow:0 0 0 9px rgba(196,160,53,.08)}}
@keyframes gmBlink{50%{opacity:0}}

@media (max-width:960px){
  @keyframes gmHover{
    0%,100%{transform:perspective(1200px) rotateY(-4deg) rotateX(3deg) translateY(0)}
    50%{transform:perspective(1200px) rotateY(-2deg) rotateX(2deg) translateY(-6px)}
  }
}