/* ===== Seatime Wakesurf — Global Styles ===== */
:root{
  --primary:#0077b6;     /* sea blue */
  --secondary:#00b4d8;   /* aqua */
  --accent:#90e0ef;      /* light aqua */
  --deep:#023e8a;        /* deep ocean */
  --sand:#f4a261;        /* sandy accent */
  --ink:#0e1222;         /* dark text */
  --muted:#5b6b7a;
  --bg:#fefefe;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Typography */
.h1{font-size: clamp(2.4rem, 4vw + .6rem, 4rem); line-height:1.1; letter-spacing:-.02em}
.h2{font-size: clamp(1.8rem, 2.4vw + .5rem, 2.6rem); line-height:1.2}
.h3{font-size: clamp(1.2rem, 1.6vw + .4rem, 1.6rem)}
.lead{font-size:clamp(1rem, .6vw + .9rem, 1.25rem); color:var(--muted)}
.hero .lead{color:var(--white)}

a{color:var(--primary); text-underline-offset: 4px}
.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding: clamp(48px, 8vw, 96px) 0}

.btn{display:inline-block; padding:.85rem 1.1rem; border-radius: 999px; text-decoration:none; font-weight:600; box-shadow: var(--shadow); transition: transform .2s ease, background .2s ease}
.btn:hover{transform: translateY(-2px)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--deep)); color:var(--white)}
.btn.secondary{background:var(--accent); color:var(--deep)}

/* Navbar */
.nav{position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--ink); font-weight:800}
.brand-dot{width:12px; height:12px; background:linear-gradient(135deg, var(--secondary), var(--primary)); border-radius:50%; box-shadow: 0 0 0 6px rgba(0,180,216,.15)}
.nav-links{display:flex; gap:.8rem; align-items:center}
.nav-links a{color:var(--ink); text-decoration:none; padding:.5rem .7rem; border-radius: 10px}
.nav-links a:hover{background:rgba(0,0,0,.06)}
.menu-toggle{display:none; background:none; border:none; font-size:1.7rem}
.nav {
  background: rgba(255,255,255,.7); /* semi transparent */
  backdrop-filter: blur(10px);
}

/* Mobile menu */
@media (max-width: 860px) {
  .menu-toggle { 
    display:block; 
    background:none; 
    border:0; 
    font-size:1.8rem; 
    cursor:pointer; 
    z-index:1001;
  }

  


  /* .nav-links{position: fixed; inset:0 0 0 40%; background:rgba(255,255,255,.95); backdrop-filter: blur(12px); padding: 6rem 1.2rem; transform: translateX(110%); transition: transform .28s ease; flex-direction:column; align-items:flex-start; gap:1rem; z-index:60}
  .nav-links.show{transform: translateX(0)} */
}

/* Hero */
.hero{position:relative; min-height: 88vh; display:grid; place-items:center; color:var(--white); text-align:center; overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:0;
  
  background: url('https://images.unsplash.com/photo-1589394815804-964ed0be2eb5?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05);
}
.hero::after{content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(46, 69, 100, 0.7), rgba(0,119,182,.55));}
.hero-content{position:relative; z-index:1; max-width: 860px; padding: 0 1rem}
.kicker{display:inline-block; padding:.35rem .7rem; background:rgba(144,224,239,.22); border:1px solid rgba(144,224,239,.5); color:var(--deep); font-weight:700; border-radius:999px; letter-spacing:.08em}

/* Cards grid */
.grid{display:grid; gap:1.2rem; grid-template-columns: repeat(12, 1fr)}
.card{grid-column: span 4; background:var(--white); border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden}
.card img{width:100%; height:200px; object-fit:cover}
.card-body{padding:1rem 1.1rem}
.card h3{margin:.2rem 0}
@media (max-width: 900px){ .card{grid-column: span 6} }
@media (max-width: 640px){ .card{grid-column: span 12} }
.card.half { grid-column: span 6; }

@media (max-width: 900px) {
  .card.half { grid-column: span 12; }
}

/* Testimonials */
.testimonials{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr)}
.quote{grid-column: span 6; background:linear-gradient(135deg, rgba(0,180,216,.12), rgba(144,224,239,.18)); border:1px solid rgba(0,180,216,.25); border-radius: var(--radius); padding:1.2rem}
.quote b{color:var(--deep)}
@media (max-width: 860px){ .quote{grid-column: span 12}}

/* Gallery */
.gallery{display:grid; gap:.8rem; grid-template-columns: repeat(12, 1fr)}
.gallery img{border-radius: 12px; width:100%; height:220px; object-fit:cover}
.gallery .w-6{grid-column: span 6}
.gallery .w-4{grid-column: span 4}
.gallery .w-8{grid-column: span 8}
@media (max-width: 820px){ .gallery .w-8,.gallery .w-6,.gallery .w-4{grid-column: span 12}}

/* Footer */
.footer{background: linear-gradient(180deg, rgba(2,62,138,.06), rgba(0,119,182,.12)); border-top:1px solid rgba(0,0,0,.06); padding: 2.2rem 0; margin-top: 2rem}
.footer-grid{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr)}
.footer-col{grid-column: span 4}
.footer a{color:var(--deep); text-decoration:none}
.footer a:hover{text-decoration:underline}
@media (max-width: 820px){ .footer-col{grid-column: span 12}}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}
.float{animation: float 6s ease-in-out infinite}
@keyframes float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}

/* Hero wake surd*/
.herowakesurf{position:relative; min-height: 88vh; display:grid; place-items:center; color:var(--white); text-align:center; overflow:hidden}
.herowakesurf::before{
  content:''; position:absolute; inset:0;
  
  background: url('https://images.unsplash.com/photo-1661189937817-43b7898b1281?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05);
}
.herowakesurf::after{content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(46, 69, 100, 0.7), rgba(0,119,182,.55));}
.herowakesurf-content{position:relative; z-index:1; max-width: 860px; padding: 0 1rem}

/*about*/
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.about-text {
  grid-column: span 6;
}

.about-image {
  grid-column: span 6;
}

.about-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Stack vertically on tablets/mobiles */
@media (max-width: 900px) {
  .about-text, .about-image {
    grid-column: span 12;
  }
  /* if you want the image ABOVE text, just swap order */
  .about-image { order: -1; }
}
/*numbers*/
/* Numbers section */
.numbers-section {
  background: linear-gradient(180deg, rgba(0,119,182,.06), rgba(144,224,239,.12));
  padding: 3rem 0;
  text-align: center;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.number-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: transform .3s ease;
}
.number-card:hover {
  transform: translateY(-4px);
}

.stat {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: .3rem;
}

.label {
  font-size: 1rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 860px) {
  .numbers-grid {
    grid-template-columns: 1fr;
  }
}
/*wake surf page*/
/* Hero Wake Surf */
.herowakesurf {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background: url("https://images.unsplash.com/photo-1544552867-1b8a3e2b34b6?q=80&w=1600&auto=format&fit=crop")
              center/cover no-repeat;
}
.herowakesurf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.35));
}
.herowakesurf-content {
  position: relative;
  z-index: 1;
  animation: fadeUp 1s ease forwards;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(20px); transition: all .6s ease; }
.reveal.show { opacity: 1; transform: none; }

/* Cards */
.card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Pulse button */
.pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 rgba(0,119,182,0.4); }
  50% { box-shadow: 0 0 20px rgba(0,119,182,0.6); }
}

/* Responsive grid */
.card.half { grid-column: span 6; }
@media (max-width: 900px) {
  .card.half { grid-column: span 12; }
}