:root {
  --amber:   #F5A800;
  --amber-lt:#FFD166;
  --navy:    #1A2A4A;
  --navy-lt: #2B3E6A;
  --cream:   #FFF9EE;
  --orange:  #FF6B35;
  --text:    #333D4B;
}


body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--cream);
  display: flex;
  flex-direction: column;
}
/* ── FLOATING SHAPES BACKGROUND ── */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Base warm gradient */
#bg-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 35%, rgba(245,168,0,.13) 0%, transparent 65%),
    linear-gradient(175deg, #FFF9EE 0%, #FFF3D6 40%, #FFE8C2 80%, #FFD9A8 100%);
}

/* ── Confetti dot pattern background ── */

/* Static CSS dot grid via background-image */
#bg-canvas {
  background-image:
    radial-gradient(circle, rgba(245,168,0,.22) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,107,53,.16) 2px, transparent 2px),
    radial-gradient(circle, rgba(26,42,74,.10)   2px, transparent 2px);
  background-size:
    48px 48px,
    72px 72px,
    96px 96px;
  background-position:
    0 0,
    24px 24px,
    16px 40px;
}

/* Floating confetti dots — pure CSS circles */
.dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: dotFall linear infinite;
}

.dot:nth-child(1)  { width:10px; height:10px; left:5%;   background:rgba(245,168,0,.55);  animation-duration:14s; animation-delay:0s;   }
.dot:nth-child(2)  { width:6px;  height:6px;  left:11%;  background:rgba(255,107,53,.45); animation-duration:18s; animation-delay:2s;   }
.dot:nth-child(3)  { width:14px; height:14px; left:18%;  background:rgba(245,168,0,.35);  animation-duration:12s; animation-delay:5s;   }
.dot:nth-child(4)  { width:8px;  height:8px;  left:25%;  background:rgba(26,42,74,.18);   animation-duration:20s; animation-delay:1s;   }
.dot:nth-child(5)  { width:12px; height:12px; left:33%;  background:rgba(255,107,53,.40); animation-duration:15s; animation-delay:8s;   }
.dot:nth-child(6)  { width:7px;  height:7px;  left:40%;  background:rgba(245,168,0,.50);  animation-duration:17s; animation-delay:3s;   }
.dot:nth-child(7)  { width:16px; height:16px; left:48%;  background:rgba(255,107,53,.30); animation-duration:13s; animation-delay:11s;  }
.dot:nth-child(8)  { width:9px;  height:9px;  left:55%;  background:rgba(245,168,0,.45);  animation-duration:19s; animation-delay:6s;   }
.dot:nth-child(9)  { width:11px; height:11px; left:62%;  background:rgba(26,42,74,.15);   animation-duration:16s; animation-delay:9s;   }
.dot:nth-child(10) { width:7px;  height:7px;  left:69%;  background:rgba(255,107,53,.50); animation-duration:14s; animation-delay:13s;  }
.dot:nth-child(11) { width:13px; height:13px; left:76%;  background:rgba(245,168,0,.38);  animation-duration:21s; animation-delay:4s;   }
.dot:nth-child(12) { width:6px;  height:6px;  left:83%;  background:rgba(255,107,53,.42); animation-duration:15s; animation-delay:16s;  }
.dot:nth-child(13) { width:10px; height:10px; left:90%;  background:rgba(245,168,0,.48);  animation-duration:18s; animation-delay:7s;   }
.dot:nth-child(14) { width:8px;  height:8px;  left:96%;  background:rgba(26,42,74,.12);   animation-duration:22s; animation-delay:10s;  }
.dot:nth-child(15) { width:15px; height:15px; left:8%;   background:rgba(255,107,53,.28); animation-duration:13s; animation-delay:18s;  }
.dot:nth-child(16) { width:7px;  height:7px;  left:22%;  background:rgba(245,168,0,.52);  animation-duration:16s; animation-delay:14s;  }
.dot:nth-child(17) { width:12px; height:12px; left:37%;  background:rgba(255,107,53,.36); animation-duration:20s; animation-delay:20s;  }
.dot:nth-child(18) { width:9px;  height:9px;  left:53%;  background:rgba(245,168,0,.42);  animation-duration:17s; animation-delay:12s;  }
.dot:nth-child(19) { width:11px; height:11px; left:72%;  background:rgba(255,107,53,.44); animation-duration:14s; animation-delay:22s;  }
.dot:nth-child(20) { width:6px;  height:6px;  left:88%;  background:rgba(26,42,74,.14);   animation-duration:19s; animation-delay:15s;  }
.dot:nth-child(21) { width:14px; height:14px; left:15%;  background:rgba(245,168,0,.32);  animation-duration:12s; animation-delay:24s;  }
.dot:nth-child(22) { width:8px;  height:8px;  left:44%;  background:rgba(255,107,53,.48); animation-duration:21s; animation-delay:17s;  }
.dot:nth-child(23) { width:10px; height:10px; left:60%;  background:rgba(245,168,0,.40);  animation-duration:15s; animation-delay:19s;  }
.dot:nth-child(24) { width:7px;  height:7px;  left:78%;  background:rgba(255,107,53,.35); animation-duration:18s; animation-delay:21s;  }
.dot:nth-child(25) { width:13px; height:13px; left:95%;  background:rgba(245,168,0,.28);  animation-duration:23s; animation-delay:11s;  }

@keyframes dotFall {
  0%   { transform: translateY(-8vh) translateX(0px);   opacity: 0;    }
  8%   { opacity: 1; }
  50%  { transform: translateY(52vh) translateX(18px);  opacity: 1;    }
  92%  { opacity: 1; }
  100% { transform: translateY(108vh) translateX(-10px); opacity: 0;   }
}


/* ── TOP STRIPE ── */
.top-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--amber) 50%, var(--orange) 100%);
}

/* ── HERO ── */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 100vh;
  padding: 70px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── LOGO ── */
.logo-wrap { animation: fadeDown .7s ease both; }
.logo-wrap img { width: 210px; max-width: 85vw; }

/* ── SUN ── */
.sun-container {
  width: 170px;
  height: 20px;
  position: relative;
  margin: 1.5rem auto;
  animation: riseUp .9s ease both .2s;
}
.ray {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform-origin: bottom center;
  background: linear-gradient(to top, var(--amber-lt), transparent);
  border-radius: 2px;
  animation: rayGlow 3s ease-in-out infinite;
}
.ray:nth-child(1)  { height:50px; transform:translateX(-50%) rotate(-80deg); }
.ray:nth-child(2)  { height:58px; transform:translateX(-50%) rotate(-65deg); }
.ray:nth-child(3)  { height:65px; transform:translateX(-50%) rotate(-50deg); }
.ray:nth-child(4)  { height:70px; transform:translateX(-50%) rotate(-35deg); }
.ray:nth-child(5)  { height:74px; transform:translateX(-50%) rotate(-20deg); }
.ray:nth-child(6)  { height:76px; transform:translateX(-50%) rotate(-5deg);  }
.ray:nth-child(7)  { height:76px; transform:translateX(-50%) rotate(5deg);   }
.ray:nth-child(8)  { height:74px; transform:translateX(-50%) rotate(20deg);  }
.ray:nth-child(9)  { height:70px; transform:translateX(-50%) rotate(35deg);  }
.ray:nth-child(10) { height:65px; transform:translateX(-50%) rotate(50deg);  }
.ray:nth-child(11) { height:58px; transform:translateX(-50%) rotate(65deg);  }
.ray:nth-child(12) { height:50px; transform:translateX(-50%) rotate(80deg);  }
.sun-arc {
  position: absolute;
  bottom: 0;
  width: 170px;
  height: 85px;
  border-radius: 85px 85px 0 0;
  background: linear-gradient(160deg, var(--amber), #fab819);
  animation: pulse 3s ease-in-out infinite;
}
.horizon {
  position: absolute;
  bottom: 0;
  left: -50px;
  right: -50px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--amber), #FFC107, var(--amber), transparent);
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 40px rgba(245,168,0,.35); }
  50%      { box-shadow: 0 0 70px rgba(245,168,0,.7); }
}
@keyframes rayGlow {
  0%,100% { opacity:.65; }
  50%      { opacity:1; }
}

/* ── HEADLINE ── */
.headline {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: #000000;
  line-height: 1.15;
  text-align: center;
  animation: fadeUp .8s ease both .3s;
}
.headline span {
  color: #f8b10e;
}

.tagline {
  font-size: clamp(.95rem, 2.4vw, 1.1rem);
  color: var(--navy-lt);
  text-align: center;
  margin-top: .7rem;
  max-width: 520px;
  line-height: 1.65;
  animation: fadeUp .8s ease both .42s;
}

.ci-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: rgb(255 255 255);
  border-radius: 14px;
  padding: .75rem 1rem;
  transition: background .2s;
  text-decoration: none;
  color: #000;
  text-align: left;
}
.ci-item:hover { background: rgba(255,255,255,.2); color: #fff; }

.ci-icon-box {
  width: 40px;
  height: 40px;
  background: #fab819;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ci-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .2rem;
}
.ci-value { font-size: .87rem; font-weight: 600; }


/* ── QUOTE ── */
.quote-block {
  max-width: 480px;
  text-align: center;
  animation: fadeUp .8s ease both .6s;
}
.quote-block blockquote {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 700;
  color: #ffffff;
  font-style: italic;
  line-height: 1.55;
  margin-top: 30px;
}
.quote-block cite {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  color: #1a2a4a;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
}
/* ── CONTACT CARD ── */
.contact-card {
  background: #fab819;
  border-radius: 18px;
  padding: 2rem 1.75rem;
  animation: fadeUp .8s ease both .72s;
}
.contact-card h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Contact rows using Bootstrap grid */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .95rem;
}
.contact-item:last-of-type { margin-bottom: 0; }
.c-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245,168,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--amber);
}
.c-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--amber-lt);
  margin-bottom: .1rem;
}
.c-value {
  font-size: .93rem;
  color: #fff;
  font-weight: 500;
  line-height: 1.5;
}
.c-value a { color: #fff; text-decoration: none; transition: color .2s; }
.c-value a:hover { color: var(--amber); }

/* Divider inside card */
.card-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 1.25rem 0;
}

/* ── SOCIAL BUTTONS ── */
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  border: 1.5px solid rgba(245,168,0,.3);
  color: #000000;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  letter-spacing: .03em;
  margin: .3rem .2rem;
  background: #ffffff;
}
.social-btn:hover {
  background: rgba(245,168,0,.15);
  border-color: var(--amber);
  color: #fff;
}
.social-btn i { font-size: 1rem; }

/* ── CONDITIONS ── */
.conditions-wrap { animation: fadeUp .8s ease both .84s; }
.cond-tag {
  display: inline-block;
  background: rgba(245,168,0,.12);
  border: 1px solid rgba(245,168,0,.3);
  border-radius: 999px;
  padding: .28rem .85rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  color: var(--navy);
  letter-spacing: .06em;
  margin: .25rem .2rem;
}

/* ── FOOTER ── */
footer {
  background: #000000;
  padding: 1.1rem 1rem;
  text-align: center;
  position: relative;
}
footer p {
  font-size: .78rem;
  color: rgb(255 255 255);
  margin: 0;
}
footer span { color: var(--amber); }

/* ── KEYFRAMES ── */
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes riseUp {
  from { opacity:0; transform:translateY(28px) scale(.9); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

@media (max-width: 480px) {
  .contact-card { padding: 1.4rem 1.1rem; }
  .tape-seg { font-size: .62rem; }
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(245,168,0,.35);
  color: var(--amber-lt);
  text-decoration: none;
  transition: background .22s, border-color .22s, color .22s, transform .22s;
  margin: .3rem .35rem;
}
.social-btn:hover {
  background: rgba(245,168,0,.18);
  border-color: var(--amber);
  color: #fff;
  transform: translateY(-3px);
}
.social-btn i { font-size: 1.35rem; }

    /* Divider inside card */
    .card-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,.1);
      margin: 1.25rem 0;
    }


@media (max-width:767px){
  .quote-block cite {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: #1a2a4a;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: 30px;
}
.hero {
  position: relative;
  min-height: 100vh;
  padding: 40px 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sun-container {
  width: 170px;
  height: 50px;
  position: relative;
  margin: 1.5rem auto;
  animation: riseUp .9s ease both .2s;
}
}