/* ANA Landing — Animated (no deps) */
:root{
  --bg:#050505;
  --panel: rgba(10,10,10,.78);
  --stroke: rgba(255,255,255,.14);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --gold1:#F6D66B;
  --gold2:#CFA441;
  --shadow: 0 26px 80px rgba(0,0,0,.55);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff;
  background: radial-gradient(1100px 500px at 20% 10%, rgba(246,214,107,.12), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(207,164,65,.10), transparent 55%),
              linear-gradient(180deg, #050505, #0A0A0A 40%, #050505);
  overflow-x:hidden;
}

.wrap{max-width:1160px;margin:0 auto;padding:0 18px}

/* Canvas */
#sparkCanvas{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:.9;
  pointer-events:none;
}

/* Topbar */
.topbar{
  position:relative;
  z-index:2;
  padding:18px 0 10px;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  width:40px;height:40px;border-radius:14px;
  background: radial-gradient(circle at top, rgba(246,214,107,.95), rgba(207,164,65,.25) 55%, rgba(255,255,255,.06));
  border:1px solid rgba(246,214,107,.35);
  box-shadow: 0 18px 60px rgba(246,214,107,.12);
  position:relative;
  overflow:hidden;
}
.mark:after{
  content:"";
  position:absolute;inset:-60%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.26), transparent);
  animation: spin 6.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.brand-name{
  font-family:"Playfair Display",serif;
  font-weight:700;
  letter-spacing:.01em;
  font-size:1.05rem;
}
.brand-sub{font-size:.82rem;color:var(--muted2)}

.pill{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid rgba(246,214,107,.26);
  border-radius:999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  color:rgba(255,255,255,.82);
  font-size:.9rem;
}
.pill .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--gold1);
  box-shadow:0 0 0 6px rgba(246,214,107,.16);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1); opacity:.95}
  50%{transform:scale(1.18); opacity:.7}
}

/* Hero */
.hero{
  position:relative;
  z-index:1;
  padding:22px 0 42px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}

.card, .frame{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,18,18,.78), rgba(8,8,8,.78));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.card{
  padding:22px 22px 18px;
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 20% 10%, rgba(246,214,107,.20), transparent 55%),
              radial-gradient(circle at 85% 30%, rgba(207,164,65,.14), transparent 60%);
  filter: blur(2px);
  transform: translate3d(0,0,0);
  animation: floatGlow 8s ease-in-out infinite;
}
@keyframes floatGlow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.card > *{position:relative}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.kicker:before{
  content:"";
  width:26px;height:1px;
  background: rgba(246,214,107,.65);
}
h1{
  margin:10px 0 10px;
  font-family:"Playfair Display",serif;
  font-size:2.05rem;
  line-height:1.05;
}
.lead{
  margin:0 0 16px;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.55;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 14px 0 18px;
}

.btn{
  appearance:none;border:0;
  border-radius:16px;
  padding:13px 16px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  user-select:none;
}
.btn:active{transform: translateY(1px) scale(.995)}

.btn-primary{
  flex:1;
  min-width:240px;
  color:#0A0A0A;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow: 0 16px 60px rgba(246,214,107,.18);
  position:relative;
  overflow:hidden;
}
.btn-primary:before{
  content:"";
  position:absolute; inset:-60% -40%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg) translateX(-40%);
  animation: sweep 2.8s ease-in-out infinite;
  opacity:.9;
}
@keyframes sweep{
  0%{transform: rotate(18deg) translateX(-55%)}
  55%{transform: rotate(18deg) translateX(55%)}
  100%{transform: rotate(18deg) translateX(55%)}
}
.btn-primary span, .btn-primary{position:relative; z-index:2}

.btn-ghost{
  min-width:180px;
  color:#fff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}
.btn:hover{transform: translateY(-1px)}
.btn-primary:hover{box-shadow: 0 20px 70px rgba(246,214,107,.22)}
.btn-ghost:hover{background: rgba(255,255,255,.08); border-color: rgba(246,214,107,.22)}

.meta{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:12px;
}
.meta-item{
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: rgba(0,0,0,.35);
}
.meta-label{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.meta-value{
  margin-top:6px;
  font-size:.95rem;
  color:rgba(255,255,255,.86);
  word-break:break-all;
}

.divider{
  height:1px;
  background: rgba(255,255,255,.12);
  margin:16px 0 12px;
}
.fine{color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.45}

.toast{
  position:absolute;
  left:22px; bottom:18px;
  background: rgba(0,0,0,.72);
  border:1px solid rgba(246,214,107,.22);
  border-radius:14px;
  padding:10px 12px;
  color:rgba(255,255,255,.86);
  opacity:0;
  transform: translateY(10px);
  transition: .18s ease;
  pointer-events:none;
}
.toast.show{opacity:1; transform: translateY(0)}

/* Showcase */
.showcase{
  position:relative;
}
.frame{
  height:100%;
  padding:20px;
  overflow:hidden;
  position:relative;
}
.halo{
  position:absolute;
  width:520px;height:520px;
  left:-180px; top:-220px;
  background: radial-gradient(circle, rgba(246,214,107,.18), transparent 60%);
  filter: blur(0px);
  animation: haloFloat 10s ease-in-out infinite;
}
@keyframes haloFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(34px,22px)}
}
.shine{
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 90deg, transparent 0 72%, rgba(255,255,255,.10) 80%, transparent 88% 100%);
  animation: spin 11s linear infinite;
  opacity:.9;
}

.title{
  position:relative;
  margin-top:8px;
}
.title .tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(246,214,107,.26);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.82);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.big{
  margin:12px 0 10px;
  font-family:"Playfair Display",serif;
  font-size:2.1rem;
  line-height:1.05;
}
.small{
  color:rgba(255,255,255,.70);
  line-height:1.55;
  max-width:36ch;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
  position:relative;
}
.chip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-size:.9rem;
  transition:.15s ease;
}
.chip:hover{
  border-color: rgba(246,214,107,.24);
  transform: translateY(-1px);
}

.ticker{
  position:absolute;
  left:0; right:0; bottom:0;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  overflow:hidden;
  height:46px;
  display:flex;
  align-items:center;
}
.ticker-track{
  display:flex;
  gap:0;
  white-space:nowrap;
  will-change: transform;
  animation: marquee 14s linear infinite;
  color: rgba(255,255,255,.72);
  font-size:.92rem;
  padding-left:18px;
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Footer */
.footer{
  position:relative;
  z-index:2;
  padding:18px 0 26px;
  color: rgba(255,255,255,.66);
}
.footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.sep{opacity:.5;margin:0 6px}
.social{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  transition:.15s ease;
}
.social:hover{
  border-color: rgba(246,214,107,.22);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
}