@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Crimson+Pro:ital,wght@0,300;1,300&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --blue:   #1a3b8c;
  --red:    #c8102e;
  --gold:   #f5c518;
  --white:  #f8f5f0;
  --dark:   #0d1f4a;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Crimson Pro', Georgia, serif;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Gradient background */
.bg-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(26,59,140,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(200,16,46,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 10%, rgba(245,197,24,0.12) 0%, transparent 60%),
    linear-gradient(170deg, #0d1f4a 0%, #06102a 100%);
  z-index: 0;
}

/* Floating particles */
.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: float-up linear infinite;
}

@keyframes float-up {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* Hero layout */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  text-align: center;
  padding: 2rem;
}

/* Logo container */
.logo-wrap {
  position: relative;
  display: inline-block;
}

.logo-wrap::before {
  display: none;
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 8px;
  background: conic-gradient(
    from 0deg,
    var(--red), var(--gold), var(--blue), var(--white), var(--red)
  );
  filter: blur(22px);
  opacity: 0.55;
  animation: halo-spin 8s linear infinite;
  z-index: -1;
}

@keyframes halo-spin {
  to { transform: rotate(360deg); }
}

.logo {
  display: block;
  max-width: min(520px, 88vw);
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(245,197,24,0.25),
    0 8px 40px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.4);
  animation: logo-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(32px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tagline */
.tagline {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 3.5vw, 1.75rem);
  color: var(--white);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 0.9s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* CTA Button */
.cta-btn {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dark);
  background: var(--gold);
  padding: 0.85rem 2.8rem;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(245,197,24,0.3);
  opacity: 0;
  animation: fade-up 0.9s 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.cta-btn:hover {
  color: var(--white);
  box-shadow: 0 6px 32px rgba(200,16,46,0.45);
}

.cta-btn:hover::after {
  transform: translateX(0);
}

.cta-btn span {
  position: relative;
  z-index: 1;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 480px) {
  .hero { gap: 1.6rem; }
  .tagline { letter-spacing: 0.1em; }
}