/* =====================================================================
   GoldenKey — HOMEPAGE HERO  (HH.1.0) · light white & gold · GK AI scene
   Used only by index.php. Variables prefixed --hh- (site header/footer untouched).
   ===================================================================== */
.hh{--hh-gold:#c8963e;--hh-gold-d:#9a6c22;--hh-gold-soft:#fbf6ec;--hh-gold-line:#ecdcbc;
  --hh-grad:linear-gradient(180deg,#d9a84e 0%,#b07a26 100%);
  --hh-ink:#14161b;--hh-text:#3d414a;--hh-muted:#6f747e;
  --hh-serif:"Cormorant Garamond",Georgia,serif;--hh-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;isolation:isolate;overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:center;background:#fbf8f2;color:var(--hh-text)}
.hh *,.hh *::before,.hh *::after{box-sizing:border-box}
.hh svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------- background scene */
.hh-bg{position:absolute;inset:0;z-index:-3;display:block}
.hh-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 70%;transform:scale(1.06);animation:hh-zoom 16s var(--hh-ease) forwards}
@keyframes hh-zoom{to{transform:scale(1)}}
.hh-veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(252,249,243,.97) 0%,rgba(252,249,243,.9) 30%,rgba(252,249,243,.55) 46%,rgba(252,249,243,0) 62%),linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(251,248,242,.85) 100%)}
.hh-glow{position:absolute;z-index:-1;left:-10%;top:-20%;width:60%;height:80%;background:radial-gradient(closest-side,rgba(236,212,160,.45),transparent);filter:blur(10px);pointer-events:none}

/* ---------------------------------------------------------------- layout */
.hh-in{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:clamp(32px,4.5vw,64px) clamp(16px,4vw,48px) clamp(56px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,48px);align-items:center}
.hh-copy{max-width:780px}
.hh-copy>*{animation:hh-up .8s var(--hh-ease) both}
.hh-copy>*:nth-child(2){animation-delay:.08s}.hh-copy>*:nth-child(3){animation-delay:.16s}.hh-copy>*:nth-child(4){animation-delay:.24s}.hh-copy>*:nth-child(5){animation-delay:.3s}.hh-copy>*:nth-child(n+6){animation-delay:.36s}
@keyframes hh-up{from{opacity:0;transform:translateY(16px)}}

.hh-kicker{display:flex;align-items:center;gap:16px;font-size:.82rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#5c4a2a}
.hh-kicker::after{content:"";width:70px;height:1.5px;background:var(--hh-gold)}
.hh h1{margin:14px 0 12px;font:700 clamp(2.5rem,4.6vw,4.4rem)/1.02 var(--hh-serif);color:var(--hh-ink);letter-spacing:-.018em}
.hh h1 em{font-style:normal;display:block;white-space:nowrap;background:linear-gradient(180deg,#d9a84e 10%,#9a6c22 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hh-lead{margin:0;max-width:600px;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;color:var(--hh-text)}

/* buttons */
.hh-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hh-btn{display:inline-flex;align-items:center;gap:14px;min-height:66px;padding:10px 24px 10px 16px;border-radius:16px;text-decoration:none;font-weight:600;transition:transform .25s var(--hh-ease),box-shadow .25s,border-color .25s}
.hh-btn i{font-style:normal;font-size:1.3rem;transition:transform .25s var(--hh-ease)}
.hh-btn:hover{transform:translateY(-2px)}
.hh-btn:hover i{transform:translateX(4px)}
.hh-btn--gold{background:var(--hh-grad);color:#fff;font-size:1.12rem;box-shadow:0 18px 34px -16px rgba(154,108,34,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.hh-btn--gold:hover{color:#fff;box-shadow:0 22px 40px -16px rgba(154,108,34,.95)}
.hh-btn--gold img{width:40px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.hh-btn--ai{background:rgba(255,255,255,.92);color:var(--hh-ink);border:1.5px solid var(--hh-gold-line);box-shadow:0 18px 34px -24px rgba(70,50,10,.55)}
.hh-btn--ai:hover{color:var(--hh-ink);border-color:var(--hh-gold)}
.hh-btn--ai strong{display:block;font-size:1.12rem;line-height:1.15}
.hh-btn--ai small{display:block;font-size:.78rem;font-weight:500;color:var(--hh-muted)}
.hh-btn--ai i{color:var(--hh-gold-d)}
/* tiny animated GK AI face */
.hh-ai-face{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;width:46px;height:40px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#2a2a2e,#0d0d10);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--hh-gold-line),0 8px 16px -6px rgba(0,0,0,.45)}
.hh-ai-face b{width:10px;height:6px;border:2.5px solid #f3c56a;border-bottom:0;border-radius:10px 10px 0 0;animation:hh-blink 4.5s infinite}
.hh-ai-face::after{content:"";position:absolute;bottom:9px;width:12px;height:5px;border:2.5px solid #f3c56a;border-top:0;border-radius:0 0 10px 10px}
@keyframes hh-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}

.hh-price{margin:16px 0 0;font-size:.92rem;color:var(--hh-muted)}
.hh-price strong{font:700 1.25rem var(--hh-serif);color:var(--hh-gold-d)}
.hh-price span{font-size:.8rem}

/* trust row */
.hh-trust{display:flex;flex-wrap:wrap;gap:12px 0;list-style:none;margin:26px 0 0;padding:0}
.hh-trust li{display:flex;align-items:center;gap:10px;padding:0 18px;font-size:.9rem;font-weight:500;line-height:1.25;color:var(--hh-ink)}
.hh-trust li:first-child{padding-left:0}
.hh-trust li+li{border-left:1px solid #e3d7bf}
.hh-trust svg{width:28px;height:28px;color:var(--hh-gold)}

/* stats glass card */
.hh-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;padding:20px 8px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(251,243,226,.62));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(236,220,188,.9);box-shadow:0 24px 48px -32px rgba(70,50,10,.55)}
.hh-stats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:0 16px}
.hh-stats>div+div{border-left:1px solid #e8dcc3}
.hh-stats svg{grid-row:1/3;width:30px;height:30px;color:var(--hh-gold)}
.hh-stats strong{font:700 clamp(1.6rem,2.4vw,2.2rem)/1 var(--hh-serif);color:var(--hh-ink)}
.hh-stats strong small{font-family:Inter,system-ui,sans-serif;font-size:.9rem;font-weight:500;color:var(--hh-muted);margin-left:3px}
.hh-stats div>span{font-size:.8rem;line-height:1.3;color:var(--hh-text)}

/* ---------------------------------------------------------------- right stage */
.hh-stage{position:relative;align-self:stretch;min-height:420px}
.hh-bubble{position:absolute;left:-18%;top:22%;display:flex;flex-direction:column;gap:8px;max-width:270px;padding:16px 20px;border-radius:20px 20px 20px 6px;background:rgba(255,255,255,.95);color:var(--hh-ink);text-decoration:none;font-size:.98rem;line-height:1.4;box-shadow:0 24px 50px -24px rgba(70,50,10,.55);animation:hh-pop .7s var(--hh-ease) .6s both,hh-float 6s ease-in-out 1.4s infinite}
.hh-bubble b{display:flex;align-items:center;gap:8px;font-size:1.02rem;color:var(--hh-ink)}
.hh-bubble b svg{color:var(--hh-gold)}
.hh-bubble b i{font-style:normal;color:var(--hh-gold-d);transition:transform .2s}
.hh-bubble:hover{color:var(--hh-ink)}.hh-bubble:hover b i{transform:translateX(4px)}
@keyframes hh-pop{from{opacity:0;transform:translateY(12px) scale(.94)}}
@keyframes hh-float{50%{transform:translateY(-7px)}}
.hh-chips{position:absolute;right:0;top:4%;display:flex;flex-direction:column;gap:12px}
.hh-chips a{display:flex;align-items:center;gap:12px;width:180px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(236,220,188,.9);color:var(--hh-ink);text-decoration:none;font-size:.9rem;font-weight:500;line-height:1.25;box-shadow:0 18px 36px -26px rgba(70,50,10,.6);transition:transform .25s var(--hh-ease),border-color .25s;animation:hh-pop .7s var(--hh-ease) both}
.hh-chips a:nth-child(1){animation-delay:.75s}.hh-chips a:nth-child(2){animation-delay:.9s}.hh-chips a:nth-child(3){animation-delay:1.05s}
.hh-chips a:hover{border-color:var(--hh-gold);color:var(--hh-ink)}
.hh-chip-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:linear-gradient(160deg,#fff,var(--hh-gold-soft));border:1px solid var(--hh-gold-line);color:var(--hh-gold)}
.hh-live{position:absolute;right:0;bottom:6%;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(20,22,27,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f6e6c5;text-decoration:none;font-size:.84rem;animation:hh-pop .7s var(--hh-ease) 1.2s both}
.hh-live:hover{color:#fff}
.hh-live b{color:#f3c56a}
.hh-live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:hh-ping 2s infinite}
@keyframes hh-ping{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* scroll cue */
.hh-scroll{position:absolute;left:50%;bottom:18px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(154,108,34,.5);border-radius:14px}
.hh-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--hh-gold);animation:hh-wheel 1.8s infinite}
@keyframes hh-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .hh-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hh-chips a{width:160px}
  .hh-trust li{padding:0 12px}
}
@media (max-width:900px){
  .hh{display:block;min-height:0}
  .hh-bg{position:relative;inset:auto;height:clamp(300px,64vw,520px)}
  .hh-bg img{object-position:50% 40%}
  .hh-veil{background:linear-gradient(180deg,rgba(252,249,243,0) 0%,rgba(252,249,243,0) calc(clamp(300px,64vw,520px) - 120px),#fbf8f2 calc(clamp(300px,64vw,520px) - 10px))}
  .hh-in{position:static;grid-template-columns:1fr;margin-top:-28px;padding-top:0}
  .hh-copy{position:relative}
  .hh-stage{position:absolute;top:14px;left:14px;right:14px;min-height:0}
  .hh-bubble{position:static;max-width:230px;font-size:.86rem;padding:11px 14px;animation:hh-pop .7s var(--hh-ease) .6s both}
  .hh-chips,.hh-live,.hh-scroll{display:none}
  .hh-copy{max-width:none}
}
@media (max-width:640px){
  .hh h1 em{white-space:normal}
  .hh h1{font-size:clamp(2.2rem,10vw,3rem)}
  .hh-btn{flex:1 1 100%;min-height:60px;justify-content:flex-start}
  .hh-btn i{margin-left:auto}
  .hh-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hh-trust li,.hh-trust li:first-child,.hh-trust li+li{padding:0;border:0}
  .hh-stats{grid-template-columns:1fr 1fr;row-gap:16px}
  .hh-stats>div:nth-child(3){border-left:0}
}
@media (prefers-reduced-motion:reduce){.hh *{animation:none!important;transition:none!important}.hh-bg img{transform:none}}