:root{
  --blue:#0B2A5B;
  --red:#C81D25;
  --gold:#D4AF37;
  --white:#FFFFFF;
}
body{
  font-family:system-ui, sans-serif;
  margin:0;
  background:radial-gradient(1200px 600px at 10% -10%, #1b2b62 0%, #0a1224 60%, #050913 100%);
  color:#e8ecf8;
  overflow-x:hidden;
}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:rgba(10,18,36,0.6);backdrop-filter:blur(6px);}
.nav-links a{color:#fff;text-decoration:none;margin-left:16px;font-weight:600;}
.nav-links a:hover{color:var(--gold);}
.hero{position:relative;min-height:95vh;display:grid;place-items:center;text-align:center;padding:80px 20px;overflow:hidden;}
.flag-bg{
  position:absolute;inset:0;z-index:-1;opacity:0.22;
  background:linear-gradient(180deg,rgba(200,29,37,0.65) 50%,rgba(255,255,255,0.65) 50%);
  background-size:100% 35px;
  animation:wave 14s ease-in-out infinite;transform:skewY(-3deg);
}
@keyframes wave{0%,100%{background-position:0 0;}50%{background-position:0 20px;}}
.logo-huge{
  width:600px;max-width:90%;object-fit:contain;z-index:2;border-radius:50%;
  border:6px solid var(--gold);
  box-shadow:0 0 50px rgba(212,175,55,0.5), 0 0 150px rgba(255,255,255,0.15);
}
.logo-glow{
  position:absolute;width:600px;height:600px;max-width:90%;border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.25) 0%, transparent 70%);
  filter:blur(20px);z-index:1;
}
.cta-row{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.btn{
  display:inline-block;padding:14px 22px;border-radius:999px;font-weight:800;text-decoration:none;
  border:2px solid var(--gold);transition:0.3s;position:relative;
}
.btn.primary{background:linear-gradient(90deg,var(--gold),#f7e27a);color:#111;}
.btn.outline{background:transparent;color:#fff;}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(212,175,55,0.5),0 0 40px rgba(212,175,55,0.2);
}
.section{padding:64px 20px;}
.container{max-width:1100px;margin:auto;}
h2{font-size:30px;margin-bottom:20px;border-left:8px solid var(--gold);padding-left:12px;}
.ir-card{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;background:rgba(255,255,255,0.05);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,0.3);}
.note-placeholder{display:grid;place-items:center;height:220px;border-radius:14px;border:2px dashed rgba(212,175,55,0.6);background:rgba(212,175,55,0.1);text-align:center;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tile{text-decoration:none;padding:18px;border-radius:16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:#fff;transition:0.2s;}
.tile:hover{transform:translateY(-4px);border-color:rgba(212,175,55,0.6);box-shadow:0 0 25px rgba(212,175,55,0.2);}
.footer{border-top:1px solid rgba(255,255,255,0.1);padding:24px;background:rgba(0,0,0,0.3);text-align:center;}
.badge{background:linear-gradient(90deg,var(--gold),#f7e27a);color:#111;padding:6px 12px;border-radius:999px;font-weight:800;}
@media(max-width:800px){.logo-huge{width:400px;}.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.logo-huge{width:280px;}.grid{grid-template-columns:1fr;}}


/* ===== Floating Bottom-Center FAB (mobile/tablet only) ===== */
.fab-wrap{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:100; display:none;
}
.fab{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg, var(--gold), #f7e27a);
  color:#111; border:none; border-radius:999px;
  padding:12px 18px; font-weight:900; letter-spacing:0.2px;
  box-shadow:0 10px 24px rgba(212,175,55,0.35), 0 2px 10px rgba(0,0,0,0.4);
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease;
}
.fab:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(212,175,55,0.45); }
.fab:active{ transform:translateY(0); }
.fab-label{font-size:14px; font-weight:900}
.fab-menu{
  position:absolute; left:50%; bottom:60px; transform:translateX(-50%) translateY(10px);
  display:grid; gap:10px; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.fab-menu.open{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.fab-item{
  display:inline-block; padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,0.95); color:#111; font-weight:800; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.fab-item.amazon{ border:2px solid var(--gold); }
.fab-item.ebay{ border:2px solid #1e73e6; }
.fab-item.tiktok{ border:2px solid #ff0050; }

/* Show only on small/medium screens */
@media (max-width: 900px){
  .fab-wrap{ display:block; }
}


/* ===== Gold Fire Text Effect for Island Republic ===== */
.fire-title{
  position:relative;
  font-size:34px;
  letter-spacing:0.6px;
  margin:0 0 22px;
  padding-left:12px;
  border-left:8px solid var(--gold);
  /* Gold gradient text */
  background: linear-gradient(180deg, #ffd75a 0%, #d4af37 45%, #a07b12 70%, #ffd75a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px rgba(212,175,55,0.55),
    0 0 24px rgba(255,215,90,0.35),
    0 2px 0 rgba(0,0,0,0.4);
}
/* Animated flame overlay (gold flicker) */
.fire-title::after{
  content:"";
  position:absolute;
  inset:-6px -10px;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 110%, rgba(255,215,90,0.35), transparent 60%),
    conic-gradient(from 0deg at 50% 120%, rgba(255,205,70,0.25), rgba(255,165,0,0.15), rgba(255,225,120,0.25), rgba(255,205,70,0.25));
  filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
  animation: fire-flicker 2.2s ease-in-out infinite alternate, fire-rotate 12s linear infinite;
  border-radius:12px;
}
/* Subtle shimmering highlight moving across text */
.fire-title::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  mix-blend-mode: screen;
  animation: fire-shimmer 3.6s ease-in-out infinite;
  border-radius:12px;
}

@keyframes fire-flicker{
  0% { opacity:0.55; transform: translateY(0px) scaleY(1.02); }
  60%{ opacity:0.9; transform: translateY(-2px) scaleY(1.05); }
  100%{ opacity:0.7; transform: translateY(-1px) scaleY(1.03); }
}
@keyframes fire-rotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes fire-shimmer{
  0%{ transform: translateX(-120%); opacity:0.0; }
  30%{ opacity:0.45; }
  60%{ opacity:0.35; }
  100%{ transform: translateX(120%); opacity:0.0; }
}
@media (max-width: 520px){
  .fire-title{ font-size:26px; border-left-width:6px; }
}