/* main.css — match index.html Orange + Sky Blue theme */

/* Base */
:root{
  --sky:#62d1e7;       /* sky blue */
  --sky-dark:#3bb8d6;
  --orange:#fbb03b;    /* bright orange */
  --orange-deep:#ff7b00;
  --ink:#0f172a;
  --muted:#5b6b86;
  --card:#ffffff;
  --radius:20px;
  --shadow:0 12px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:'Comic Sans MS', Arial, sans-serif;
  color:#fff;
  text-align:center;
  /* cheerful layered sky */
  background:
    radial-gradient(900px 600px at -10% -10%, #b9ecf6 0%, transparent 60%),
    radial-gradient(900px 600px at 110% -10%, #ffe6cc 0%, transparent 60%),
    linear-gradient(180deg, var(--sky), #9de9f6);
}

/* Header */
header{
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  padding: 30px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
header h1{
  margin:0;
  font-size: clamp(32px, 6vw, 56px);
  color:#fff;
  text-shadow: 2px 2px 0 #ff6a2a;
  letter-spacing:.5px;
}
header p{
  margin:10px 0 0;
  font-size: clamp(16px, 3.2vw, 22px);
  font-weight:bold;
}

/* Image wrapper (transparent image, no card styling) */
.image-container{
  margin: 24px auto 8px;
  max-width: 980px;
  padding: 0 16px;
}
.image-container img{
  width: min(90%, 720px);
  height: auto;
  display: block;
  margin: 0 auto;
  background: transparent; /* no background */
  border-radius: 0;        /* no rounded corners */
  box-shadow: none;        /* no shadow */
  border: none;            /* no white border */
}


/* Big tagline */
.description{
  font-size: clamp(20px, 4.5vw, 36px);
  margin: 18px 16px 8px;
  color:#ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
  font-weight: 900;
  letter-spacing:.5px;
}

/* Call-to-action button */
.cta{ margin: 26px 0 40px; }
.cta a{
  display:inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: clamp(18px, 3.6vw, 22px);
  font-weight: 800;
  color:#fff;
  text-decoration:none;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  box-shadow: 0 10px 22px rgba(255,123,0,.35), 0 2px 6px rgba(255,123,0,.25);
  transition: transform .06s ease, filter .2s ease;
}
.cta a:hover{ filter:brightness(1.05) }
.cta a:active{ transform: translateY(1px) }

/* Optional secondary style to match index.html secondary buttons */
.cta a.secondary{
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-dark) 100%);
  box-shadow: 0 10px 22px rgba(98,209,231,.35), 0 2px 6px rgba(98,209,231,.25);
}

/* Small screens */
@media (max-width: 480px){
  .image-container{ padding: 0 10px }
}