/* =========================================================
   ZHH Age Calculator — Premium 3D UI v2
   ========================================================= */
:root{
  --bg-0:#05060d;
  --bg-1:#0a0d1f;
  --bg-2:#0f1430;
  --ink:#eef1ff;
  --ink-dim:#a8b0d4;
  --muted:#7a83ad;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --c1:#7c5cff;   /* violet */
  --c2:#22d3ee;   /* cyan   */
  --c3:#ff5cae;   /* pink   */
  --c4:#ffd166;   /* gold   */

  --grad-brand: linear-gradient(135deg,#7c5cff 0%,#22d3ee 50%,#ff5cae 100%);
  --grad-text:  linear-gradient(135deg,#a78bfa 0%,#22d3ee 50%,#ff7ac0 100%);
  --grad-card:  linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  --grad-btn:   linear-gradient(135deg,#7c5cff 0%,#5b8cff 50%,#22d3ee 100%);

  --glow-violet: 0 10px 40px -10px rgba(124,92,255,.6);
  --glow-cyan:   0 10px 40px -10px rgba(34,211,238,.5);
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --font-display:'Orbitron',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255,92,174,.18), transparent 60%),
    linear-gradient(180deg,var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ================= 3D Loader ================= */
.loader-wrap{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  background:radial-gradient(circle at 50% 50%, #0b1030 0%, #04050d 70%);
  transition:opacity .6s ease, visibility .6s;
}
.loader-wrap.hide{opacity:0;visibility:hidden}
.cube-loader{
  width:80px;height:80px;position:relative;
  transform-style:preserve-3d;
  animation:cubeSpin 3s linear infinite;
}
.cube-face{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(124,92,255,.85),rgba(34,211,238,.85));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 30px rgba(124,92,255,.5), inset 0 0 30px rgba(255,255,255,.15);
  border-radius:8px;
}
.cube-face.front  { transform: translateZ(40px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(40px); }
.cube-face.right  { transform: rotateY(90deg)  translateZ(40px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(40px); }
.cube-face.top    { transform: rotateX(90deg)  translateZ(40px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(40px); }
@keyframes cubeSpin{
  0%{transform:rotateX(0) rotateY(0)}
  100%{transform:rotateX(360deg) rotateY(360deg)}
}
.loader-text{
  font-family:var(--font-display);
  font-weight:900;letter-spacing:.2em;font-size:22px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-align:center;
}
.loader-text span{
  display:block;font-family:var(--font-body);font-weight:400;font-size:12px;
  color:var(--ink-dim);letter-spacing:.3em;margin-top:8px;text-transform:uppercase;
}

/* ================= Background Stage ================= */
.bg-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  animation:floatOrb 14s ease-in-out infinite;
}
.orb-1{width:520px;height:520px;background:#7c5cff;top:-120px;left:-120px}
.orb-2{width:460px;height:460px;background:#22d3ee;bottom:-140px;right:-120px;animation-delay:-5s}
.orb-3{width:380px;height:380px;background:#ff5cae;top:40%;left:55%;animation-delay:-9s;opacity:.4}
@keyframes floatOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}
.grid-3d{
  position:absolute;left:50%;bottom:-120px;width:240%;height:60vh;
  transform:translateX(-50%) perspective(700px) rotateX(62deg);
  background-image:
    linear-gradient(rgba(124,92,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.25) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  animation:gridScroll 20s linear infinite;
  opacity:.6;
}
@keyframes gridScroll{from{background-position:0 0}to{background-position:0 60px}}
.stars{position:absolute;inset:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:0 0 6px #fff;animation:twinkle 3.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* ================= Header ================= */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;
  background:linear-gradient(180deg,rgba(5,6,13,.85),rgba(5,6,13,.45));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
  width:48px;height:48px;border-radius:14px;
  background:var(--grad-brand);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:18px;color:#fff;
  letter-spacing:.05em;
  box-shadow:var(--glow-violet), inset 0 1px 0 rgba(255,255,255,.4);
  position:relative;
}
.brand-logo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 50%);
  pointer-events:none;
}
.brand-logo span{color:#0b0b1f;-webkit-text-stroke:.5px rgba(255,255,255,.4)}
.brand-name{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:14px}
.brand-by{font-size:11px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;margin-top:2px}

.wa-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:13px;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  color:#fff;letter-spacing:.02em;
  box-shadow:0 10px 30px -10px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space:nowrap;
}
.wa-btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 40px -10px rgba(37,211,102,.7)}
.wa-btn.big{padding:14px 22px;font-size:14px}

/* ================= Layout ================= */
.container{max-width:1180px;margin:0 auto;padding:48px 24px 80px}

/* Hero */
.hero{text-align:center;margin-bottom:44px;animation:rise .8s ease both}
.hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.08;letter-spacing:-.01em;
}
.hero h1 .grad{
  display:inline-block;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(124,92,255,.35));
}
.hero .lead{
  margin:18px auto 0;max-width:680px;color:var(--ink-dim);
  font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.65;
}

/* Glass card */
.card{
  position:relative;border-radius:var(--r-xl);
  padding:28px;
  background:var(--grad-card);
  border:1px solid var(--line-2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow-card);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%);
}
.glass{}

/* Input card */
.card-row{
  display:grid;grid-template-columns:1.4fr 1fr auto;gap:16px;align-items:end;
}
.input-wrap{display:flex;flex-direction:column;gap:8px}
.input-wrap label{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;
}
.input-wrap input{
  width:100%;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);color:var(--ink);font-size:15px;font-weight:500;
  transition:border-color .25s, box-shadow .25s, background .25s;
  color-scheme:dark;
}
.input-wrap input:focus{
  outline:none;
  border-color:rgba(124,92,255,.7);
  box-shadow:0 0 0 4px rgba(124,92,255,.18);
  background:rgba(255,255,255,.06);
}

.btn-3d{
  position:relative;
  padding:15px 26px;border-radius:var(--r-md);
  background:var(--grad-btn);color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 14px 30px -10px rgba(124,92,255,.65),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  white-space:nowrap;
}
.btn-3d:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 22px 50px -10px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-3d:active{transform:translateY(0)}

/* Results */
.results{margin-top:32px;display:grid;gap:24px}
.hidden{display:none !important}
.show{animation:rise .6s ease both}

.age-hero{text-align:center;padding:36px 28px}
.age-hero-label{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;
}
.age-hero-value{
  margin:14px 0 12px;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(124,92,255,.35));
}
.age-hero-value small{
  font-family:var(--font-body);font-weight:600;font-size:.32em;color:var(--ink-dim);
  -webkit-text-fill-color:var(--ink-dim);margin-left:-2px;margin-right:8px;letter-spacing:.05em;
}
.age-hero-sub{color:var(--ink-dim);font-size:15px;margin-top:6px}
.age-hero-sub strong{color:var(--ink)}

/* Stats grid */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;
}
.stat{
  padding:22px 18px;border-radius:var(--r-lg);
  text-align:left;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;
}
.stat::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.35),transparent 70%);
  filter:blur(20px);opacity:.5;pointer-events:none;
}
.stat:nth-child(3n)::after{background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}
.stat:nth-child(3n+1)::after{background:radial-gradient(circle,rgba(255,92,174,.35),transparent 70%)}
.stat:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 30px 60px -25px rgba(124,92,255,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.stat-icon{
  font-size:22px;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(34,211,238,.25));
  border:1px solid var(--line-2);margin-bottom:14px;
}
.stat-num{
  font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:.01em;
  background:linear-gradient(135deg,#fff,#cdd6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  word-break:break-all;
}
.stat-num.live{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{
  margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;
}

/* Insights */
.insights h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:.05em;font-size:18px;margin-bottom:16px;
}
.insights ul{list-style:none;display:grid;gap:10px}
.insights li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  font-size:14.5px;line-height:1.55;color:var(--ink-dim);
}
.insights li strong{color:var(--ink)}
.insights li::before{
  content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:8px;
  background:var(--grad-brand);box-shadow:0 0 12px rgba(124,92,255,.7);
}

/* About */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.about h3{font-family:var(--font-display);font-weight:800;font-size:1.6rem;margin-bottom:10px}
.about p{color:var(--ink-dim);line-height:1.65;font-size:15px}
.about p strong{color:var(--ink)}
.about-cta{display:flex;justify-content:flex-end}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  color:var(--ink-dim);font-size:13px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.4));
}
.site-footer strong{color:var(--ink)}
.site-footer .muted{opacity:.7}

/* Animations */
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* Responsive */
@media (max-width: 880px){
  .card-row{grid-template-columns:1fr 1fr;}
  .btn-3d{grid-column:1 / -1}
  .about-grid{grid-template-columns:1fr;text-align:center}
  .about-cta{justify-content:center}
}
@media (max-width: 560px){
  .site-header{padding:12px 16px}
  .wa-btn span{display:none}
  .wa-btn{padding:11px 13px}
  .container{padding:32px 16px 60px}
  .card{padding:22px 18px;border-radius:22px}
  .card-row{grid-template-columns:1fr;gap:12px}
  .age-hero{padding:28px 18px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat{padding:18px 14px;border-radius:18px}
  .stat-num{font-size:1.2rem}
  .stat-icon{width:38px;height:38px;font-size:18px;margin-bottom:10px}
  .brand-by{display:none}
  .brand-name{font-size:13px}
  .brand-logo{width:42px;height:42px;border-radius:12px;font-size:16px}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ================= Share row ================= */
.share-row{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:4px;
}
.btn-share{display:inline-flex;align-items:center;gap:10px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);color:var(--ink);
  font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  transition:transform .2s, background .2s, border-color .2s;
}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,rgba(124,92,255,.95),rgba(34,211,238,.95));
  color:#fff;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 14px 40px -10px rgba(124,92,255,.7);
  opacity:0;transition:opacity .3s, transform .3s;z-index:200;pointer-events:none;
  letter-spacing:.03em;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}