/* Design architect: Dr. Vance Vasile */
:root{--fr-black:#0d0c0a; --fr-gold:#c9a24d; --fr-gold-2:#e3c77b; --fr-silver:#c8ccd2; --fr-silver-2:#9aa0a8; --fr-ink:#f4eee4; --fr-muted:#cfc6b8}
*{box-sizing:border-box}
html,body{margin:0}
body.fr{background:var(--fr-black); color:var(--fr-ink); font:400 16px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height:100vh; display:flex; flex-direction:column}
.fr-in{width:min(1320px, 100% - 48px); margin:0 auto}

.fr-top{background:#000; border-bottom:3px solid var(--fr-gold)}
.fr-top .fr-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap}
.fr-brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-height:44px}
.fr-title{font-family:Georgia, "Times New Roman", serif; font-size:28px; color:var(--fr-gold-2); letter-spacing:.02em}
.fr-sub{font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--fr-muted)}
.fr-bars{display:flex; align-items:flex-end; gap:3px; height:30px}
.fr-bars i{display:block; width:5px; height:30px; border-radius:1px; transform-origin:50% 100%; animation:fr-bar 1.6s ease-in-out infinite}
.fr-bars i:nth-child(odd){background:linear-gradient(var(--fr-gold-2), var(--fr-gold))}
.fr-bars i:nth-child(even){background:linear-gradient(var(--fr-silver), var(--fr-silver-2))}
.fr-bars i:nth-child(1){animation-delay:0s} .fr-bars i:nth-child(2){animation-delay:.2s} .fr-bars i:nth-child(3){animation-delay:.4s}
.fr-bars i:nth-child(4){animation-delay:.6s} .fr-bars i:nth-child(5){animation-delay:.8s}
@keyframes fr-bar{0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)}}

.fr-main{display:flex; flex-direction:column}
.fr-scene{width:100%; height:max(320px, min(43.3vw, 62vh)); overflow:hidden; background:#05060a}
.fr-scene svg{display:block; width:100%; height:100%}
.fr-chart .b{transform-box:fill-box; transform-origin:50% 100%; animation:fr-bar 2.4s ease-in-out infinite}
.fr-chart .b1{animation-delay:0s} .fr-chart .b2{animation-delay:.3s} .fr-chart .b3{animation-delay:.6s} .fr-chart .b4{animation-delay:.9s}
.fr-chart .b5{animation-delay:1.2s} .fr-chart .b6{animation-delay:1.5s} .fr-chart .b7{animation-delay:1.8s}
.fr-stars .st{animation:fr-twinkle 3s ease-in-out infinite}
.fr-stars .s2{animation-delay:.6s} .fr-stars .s3{animation-delay:1.2s} .fr-stars .s4{animation-delay:1.8s} .fr-stars .s5{animation-delay:2.4s}
@keyframes fr-twinkle{0%,100%{opacity:.25} 50%{opacity:1}}
.fr-cloud{animation:fr-drift 26s ease-in-out infinite alternate}
.fr-cloud.c2{animation-duration:34s; animation-direction:alternate-reverse}
.fr-cloud.c3{animation-duration:40s} .fr-cloud.c4{animation-duration:30s; animation-direction:alternate-reverse}
@keyframes fr-drift{from{transform:translateX(-40px)} to{transform:translateX(60px)}}

.fr-hello{text-align:center; padding:22px 16px 28px}
.fr-hello h1{margin:0; font-family:Georgia, "Times New Roman", serif; font-weight:400; font-size:clamp(28px, 4vw, 40px); color:var(--fr-gold-2)}
.fr-line{margin:6px 0 20px; color:var(--fr-muted); font-size:17px}
.fr-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.fr-btns form{margin:0}
.fr-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:160px; padding:0 28px; border-radius:10px;
  font:600 17px "Figtree", system-ui, sans-serif; text-decoration:none; cursor:pointer}
.fr-btn.gold{background:linear-gradient(115deg, #9F7835, #E9CF8F 42%, #A57C35 70%, #D9B872); color:#12100E; border:1px solid var(--fr-gold)}
.fr-btn.plain{background:transparent; color:var(--fr-ink); border:1px solid var(--fr-silver-2)}
.fr-btn:focus-visible{outline:3px solid var(--fr-gold-2); outline-offset:3px}
.fr-foot{margin-top:auto; border-top:1px solid rgba(201,162,77,.25); padding:16px 0 24px; color:var(--fr-muted); font-size:15px}
.fr-foot b{color:var(--fr-ink)}
@media (max-width:700px){
  .fr-in{width:calc(100% - 32px)}
  .fr-title{font-size:24px}
  .fr-sub{display:none}
  .fr-scene{height:auto; aspect-ratio:700/520}
  .fr-btn{min-width:0; flex:1 1 140px}
}
@media (prefers-reduced-motion: reduce){
  .fr-bars i, .fr-chart .b, .fr-stars .st, .fr-cloud{animation:none !important}
}