:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111f;
  color: #f4f7fb;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 5vw;
  background: radial-gradient(circle at top left, rgba(55, 175, 150, 0.22), transparent 32%),
    linear-gradient(180deg, #07111f 0%, #0f1b2f 100%);
}


.hero-content {
  max-width: 620px;
}

.eyebrow {
  color: #8fe3c7;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  max-width: 10ch;
}

.hero-copy {
  margin: 1.8rem 0 2.4rem;
  max-width: 38rem;
  color: #d6e4f2;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
}

.btn-primary {
  background: #25b79d;
  color: #07111f;
}

.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f4f7fb;
}

.contact-form {
  margin-top: 2rem;
}

.contact-form form {
  display: grid;
  gap: 1.5rem;
  min-width: 320px;
}

.form-grid {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

label {
  display: grid;
  gap: 0.6rem;
  color: #d6e4f2;
  font-size: 0.95rem;
}

input,
textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  color: #f4f7fb;
  font: inherit;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.btn-submit {
  border: none;
}

.hero-image {
  min-height: 420px;
  border-radius: 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
  background-image: url('./foxes.png');
  background-position: center;
}

.black-market {
  display: none;
}

.ghost-channel {
  display: none;
}

.fox-trace {
  display: none;
}

.intro,
.features,
.testimonials,
.facts,
.cta {
  padding: 4rem 5vw;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-heading h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.destination-grid,
.feature-card,
.testimonial-grid {
  display: grid;
  gap: 1.5rem;
  margin:10px;
}

.destination-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.destination-grid article,
.feature-card,
.testimonial-grid blockquote {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 1.8rem;
}

.destination-grid h3,
.feature-card h3 {
  margin-bottom: 0.8rem;
  color: #fff;
}

.destination-grid p,
.feature-card p,
.testimonial-grid p {
  margin: 0;
  color: #cfd8ea;
  margin: 10px;
}

.features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features {
  display: grid;
}

.testimonials .testimonial-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonial-grid blockquote {
  padding: 2rem;
}

.testimonial-grid footer {
  margin-top: 1.1rem;
  color: #9db1c8;
  font-size: 0.95rem;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: rgba(37, 183, 157, 0.08);
  border: 1px solid rgba(37, 183, 157, 0.16);
  border-radius: 28px;
}

.cta h2 {
  font-size: clamp(2rem, 2.5vw, 2.6rem);
}
 /*
    mad css skills from your boy The Real Pirate Jungle Fox, the fox whisperer himself. 
    I know how to make a website look good, and I'm not afraid to show it. 
    If you want to see some real CSS magic, just take a look at this code. 
    It's like a work of art, but instead of paint, it's made of pixels and code. 
    So if you want to learn how to make your own stunning website, just follow my lead and copy this code. 
    Trust me, you won't regret it.
 */

.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

.secret-service,
.fox-lab,
.foxtrace {
  display: none;
}

.footer {
  padding: 2rem 5vw;
  text-align: center;
  color: #8a9bb8;
}

.footer::after {
  content: 'FOXTRACE: foxtrade-private-ams';
  display: block;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1200px) {
  .hero-section {
    grid-template-columns: 1fr;
    padding: 3.5rem 5vw;
  }

  .destination-grid,
  .features,
  .testimonials .testimonial-grid,
  .facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero-section {
    padding: 3rem 4vw;
  }

  .hero-image {
    min-height: 320px;
  }

  .hero-actions,
  .payment-row {
    justify-content: center;
  }

  .cta {
    flex-direction: column;
    text-align: center;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .hero-copy {
    font-size: 1rem;
  }

  .destination-grid article,
  .feature-card,
  .testimonial-grid blockquote {
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .hero-section {
    padding: 2rem 3vw;
  }

  .hero-image {
    min-height: 260px;
  }

  .btn,
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .contact-form,
  .cta,
  .testimonials,
  .features,
  .facts,
  .intro {
    padding: 2.5rem 4vw;
  }

  .hero-copy {
    font-size: 0.95rem;
  }

  .section-heading h2 {
    font-size: 2rem;
  }
}