/* ============================================================
   AQUA.MA — Main Stylesheet (Playful Theme)
   ============================================================ */

/* ── 1. DESIGN TOKENS ── */
:root {
  /* Logo Colors */
  --sam-blue:   #003399; /* Deep Blue from Skier / text */
  --sam-yellow: #FFCC00; /* Sun outer */
  --sam-orange: #FF6600; /* Sun inner */
  --sam-red:    #FF0000; /* PARK text */

  /* Playful Theme Mapping */
  --ocean:   #003399;       /* Vibrant Blue */
  --deep:    #FFF9E6;       /* Warm light yellow-white background */
  --surface: #FFFFFF;       /* Clean white */
  --foam:    #E8F4F8;       
  --white:   #003399;       /* Main text is dark blue */
  --text-light: #FFFFFF;    /* Actual white for dark backgrounds */
  --accent:  #FF6600;       /* Orange accent */
  --gold:    #FFCC00;       /* Yellow accent */
  --coral:   #FF0000;       /* Red accent */
  --mist:    rgba(255, 204, 0, 0.15); /* Yellow mist */
  --glass:   rgba(255, 255, 255, 0.9);

  --font-display: 'Bebas Neue', sans-serif;
  --font-logo:    'Cinzel', serif;
  --font-body:    'DM Sans', sans-serif;
  --ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--deep);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1; opacity: .2;
}
img { display: block; max-width: 100%; }
a   { color: inherit; }

/* ── 3. CUSTOM CURSOR ── */
#cursor {
  position: fixed; width: 14px; height: 14px;
  background: var(--coral); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
}
#cursor-ring {
  position: fixed; width: 40px; height: 40px;
  border: 2px solid var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, border-color .2s;
}
body:has(a:hover,button:hover) #cursor       { width:20px; height:20px; background:var(--gold); }
body:has(a:hover,button:hover) #cursor-ring  { width:60px; height:60px; border-color:var(--gold); border-style: dashed; }

/* ── 4. NAVIGATION ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.4rem 4rem;
  backdrop-filter: blur(20px);
  background: rgba(255, 249, 230, 0.8);
  border-bottom: 3px solid var(--gold);
  transition: background .4s, border-color .4s;
}
nav.scrolled {
  background: rgba(255, 249, 230, 0.98);
  border-bottom-color: var(--accent);
}
.brand-logo {
  display: inline-flex; align-items: center; text-decoration: none; line-height: 1;
}
.brand-logo-img {
  height: 110px; width: auto; object-fit: contain;
  margin: -35px 0;
  transition: transform 0.3s var(--ease-out);
}
.brand-logo:hover .brand-logo-img {
  transform: scale(1.05);
}
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-size:.85rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ocean); text-decoration:none;
  position:relative; transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-6px; left:0;
  width:0; height:3px; background:var(--coral); border-radius: 2px;
  transition: width .35s var(--ease-out);
}
.nav-links a:hover            { color: var(--accent); }
.nav-links a:hover::after     { width:100%; }
.nav-cta {
  font-size:.8rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-light); background:var(--coral);
  border:none; padding:.75rem 1.8rem; cursor:none;
  border-radius: 30px;
  box-shadow: 0 4px 0 var(--sam-blue);
  transition: all .2s;
}
.nav-cta:hover { 
  background:var(--accent); 
  transform:translateY(2px); 
  box-shadow: 0 2px 0 var(--sam-blue);
}

/* ── 5. HERO ── */
.hero {
  position:relative; height:100vh; min-height:850px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-bg {
  position:absolute; inset:0; z-index: 1;
  background:linear-gradient(135deg, rgba(255,204,0,0.4) 0%, rgba(255,102,0,0.5) 50%, rgba(255,0,0,0.4) 100%);
  mix-blend-mode: multiply;
}
.wave-container {
  position:absolute; bottom:0; left:0; right:0; height:100%;
  overflow:hidden; pointer-events:none;
}
.wave {
  position:absolute; bottom:0; left:-50%; width:200%;
  height:180px; opacity:0;
  animation: wave-in 1.2s ease forwards, wave-move 10s linear infinite alternate;
}
.wave svg { width:100%; height:100%; }
.wave:nth-child(1) { animation-delay:.2s,1.2s; opacity:.9; }
.wave:nth-child(2) { animation-delay:.5s,1.5s; bottom:30px; opacity:.7; animation-duration:1.2s,14s; }
.wave:nth-child(3) { animation-delay:.8s,1.8s; bottom:60px; opacity:.5; animation-duration:1.2s,18s; }
.hero::after {
  content:'';
  position:absolute; top:-10%; left:60%;
  width:200px; height:200px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 100px var(--gold);
  animation: pulse-glow 4s ease-in-out infinite alternate;
}
.hero-content {
  position:relative; z-index:10; padding:0 4rem 6rem;
  background: linear-gradient(to top, var(--deep) 0%, transparent 100%);
  padding-top: 10rem;
}
.hero-eyebrow {
  font-size:.9rem; font-weight: bold; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocean); margin-bottom:1.2rem;
  background: var(--gold); display: inline-block; padding: 0.4rem 1rem; border-radius: 20px; border: 2px solid var(--ocean);
  opacity:0; animation:fade-up .8s ease .6s forwards;
}
.hero-title {
  font-family: var(--font-display);
  font-size:clamp(3rem,8.5vw,8rem);
  line-height:.9; letter-spacing:.02em; color:var(--ocean);
  text-shadow: 4px 4px 0 var(--surface);
  opacity:0; animation:fade-up 1s ease .8s forwards;
}
.hero-title .line-accent   { color:var(--coral); display:block; text-shadow: 4px 4px 0 var(--gold); }
.hero-title .line-outline  {
  -webkit-text-stroke:2px var(--ocean);
  color: var(--surface); display:block; text-shadow: none;
}
.hero-sub {
  max-width:480px; margin-top:1.8rem;
  font-size:1.1rem; line-height:1.7; font-weight:500;
  color:var(--ocean); background: rgba(255,255,255,0.8); padding: 1rem; border-radius: 12px; border: 2px solid var(--ocean);
  opacity:0; animation:fade-up .8s ease 1.2s forwards;
}
.hero-actions {
  display:flex; gap:1.2rem; margin-top:2.4rem;
  opacity:0; animation:fade-up .8s ease 1.5s forwards;
}
.hero-scroll {
  position:absolute; right:4rem; bottom:5rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  opacity:0; animation:fade-in .8s ease 2s forwards;
}
.hero-scroll span {
  font-size:.8rem; font-weight: bold; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocean); writing-mode:vertical-rl;
}
.scroll-line {
  width:4px; height:60px;
  background:var(--coral); border-radius: 4px;
  animation:scroll-pulse 2s ease-in-out infinite;
}
.hero-stats {
  position:absolute; right:4rem; top:45%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:2rem;
  opacity:0; animation:fade-in .8s ease 1.8s forwards; z-index: 10;
}
.stat-item  { 
  text-align:center; background: var(--surface); padding: 1rem; border-radius: 20px; 
  border: 3px solid var(--ocean); box-shadow: 4px 4px 0 var(--accent); transform: rotate(3deg); transition: transform 0.3s;
}
.stat-item:hover { transform: rotate(-3deg) scale(1.1); }
.stat-item:nth-child(2) { transform: rotate(-2deg); }
.stat-item:nth-child(3) { transform: rotate(4deg); }
.stat-num   { font-family:var(--font-display); font-size:2.8rem; color:var(--coral); line-height:1; display:block; }
.stat-num span { color:var(--ocean); font-size:1.5rem; }
.stat-label { font-size:.7rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean); }


/* ── 6. TICKER ── */
.ticker-wrap {
  background:var(--gold);
  border-top:4px solid var(--ocean);
  border-bottom:4px solid var(--ocean);
  padding:1rem 0; overflow:hidden;
}
.ticker { display:flex; gap:4rem; width:max-content; animation:ticker 20s linear infinite; }
.ticker-item {
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.1em;
  color:var(--ocean); white-space:nowrap; transition:color .3s;
}
.ticker-item:hover { color:var(--coral); }
.ticker-sep { color:var(--coral); font-size: 1.5rem; }

/* ── SHARED BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ocean); color:var(--text-light);
  font-size:.9rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 2.2rem; text-decoration:none; 
  border-radius: 30px; border: 2px solid var(--ocean);
  box-shadow: 0 6px 0 var(--sam-blue), 0 10px 20px rgba(0,51,153,0.3);
  transition:all .2s var(--ease-out); cursor:none;
}
.btn-primary:hover { 
  background:var(--accent); color:var(--surface);
  transform:translateY(4px); box-shadow: 0 2px 0 var(--sam-blue), 0 5px 10px rgba(255,102,0,0.3); 
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:.6rem;
  border:2px solid var(--ocean); color:var(--ocean); background: var(--surface);
  font-size:.9rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 2.2rem; text-decoration:none; 
  border-radius: 30px; box-shadow: 0 4px 0 var(--ocean);
  transition:all .2s var(--ease-out); cursor:none;
}
.btn-ghost:hover { 
  background:var(--gold); border-color:var(--ocean); color:var(--ocean); 
  transform:translateY(2px); box-shadow: 0 2px 0 var(--ocean); 
}
.btn-arrow { font-size:1.2rem; transition:transform .25s; }
.btn-primary:hover .btn-arrow,
.btn-ghost:hover .btn-arrow  { transform:translateX(6px) scale(1.2); }

/* ── SHARED SECTION LABELS ── */
.section-eyebrow {
  font-size:.8rem; font-weight: bold; letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral); margin-bottom:.8rem; display: inline-block; padding: 0.3rem 0.8rem; background: var(--mist); border-radius: 20px;
}
.section-title {
  font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem);
  line-height:1.1; color:var(--ocean);
  padding-bottom: 0.2em; /* prevent overflow clipping */
}
.section-title em { 
  color:var(--accent); 
  font-style:normal; 
  text-decoration: underline wavy var(--gold); 
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
  display: inline-block;
  padding-right: 0.1em;
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── 7. CATEGORIES ── */
.categories {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1rem; padding: 4rem; background:var(--surface);
}
.cat-card {
  position:relative; overflow:hidden; aspect-ratio:4/3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:2.5rem; text-decoration:none; cursor:none;
  border-radius: 24px; border: 4px solid var(--ocean);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  background: var(--deep);
}
.cat-card:nth-child(1) { background: url('../images/Wakeboarding.jpg') center/cover; border-color: rgba(255,105,180,1); box-shadow: 8px 8px 0 rgba(255,105,180,1); }
.cat-card:nth-child(2) { background: url('../images/waksurfing.jpg') center/cover; border-color: rgba(255,102,0,1); box-shadow: 8px 8px 0 rgba(255,102,0,1); }
.cat-card:nth-child(3) { background: url('../images/skiing.jpg') center/cover; border-color: rgba(255,204,0,1); box-shadow: 8px 8px 0 rgba(255,204,0,1); }
.cat-card:nth-child(4) { background: url('../images/tubing.jpg') center/cover; border-color: rgba(0,200,255,1); box-shadow: 8px 8px 0 rgba(0,200,255,1); }
.cat-card:nth-child(5) { background: url('../images/Wakefoiling.webp') center/cover; border-color: rgba(0,180,255,1); box-shadow: 8px 8px 0 rgba(0,180,255,1); }
.cat-card:nth-child(6) { background: url('../images/efoiling.jpg') center/cover; border-color: rgba(0,51,153,1); box-shadow: 8px 8px 0 rgba(0,51,153,1); }

.cat-card:hover { transform: translate(-4px, -4px); }
.cat-card:nth-child(1):hover { box-shadow: 12px 12px 0 rgba(255,105,180,1); }
.cat-card:nth-child(2):hover { box-shadow: 12px 12px 0 rgba(255,102,0,1); }
.cat-card:nth-child(3):hover { box-shadow: 12px 12px 0 rgba(255,204,0,1); }
.cat-card:nth-child(4):hover { box-shadow: 12px 12px 0 rgba(0,200,255,1); }
.cat-card:nth-child(5):hover { box-shadow: 12px 12px 0 rgba(0,180,255,1); }
.cat-card:nth-child(6):hover { box-shadow: 12px 12px 0 rgba(0,51,153,1); }

.cat-glow { display: none; }
.cat-tag  { 
  font-size:.7rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; 
  color:var(--ocean); margin-bottom:.5rem; background: var(--surface); display: inline-block; padding: 0.3rem 0.8rem; border-radius: 12px; border: 2px solid var(--ocean); width: max-content;
}
.cat-name { font-family:var(--font-display); font-size:3rem; color:var(--surface); line-height:1; margin-bottom:.6rem; transition:transform .3s; text-shadow: 2px 2px 4px rgba(0,0,0,0.6), 2px 2px 0 var(--ocean); }
.cat-card:hover .cat-name { transform: scale(1.05); transform-origin: left; }
.cat-desc { font-size:.95rem; line-height:1.5; font-weight:500; color:var(--surface); max-width:280px; background: rgba(0,0,0,0.6); padding: 0.8rem; border-radius: 12px; }
.cat-line { display: none; }

/* ── 8. ABOUT ── */
.about {
  padding:8rem 4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
  background: var(--deep); border-top: 4px dashed var(--ocean); border-bottom: 4px dashed var(--ocean);
}
.about-visual { position:relative; aspect-ratio:1; }
.about-visual-main {
  width:100%; height:100%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:var(--ocean);
  position:relative; overflow:hidden; border: 6px solid var(--surface); box-shadow: 0 20px 0 var(--gold);
}
.about-visual-main::before {
  content:''; position:absolute; bottom:0; left:-10%; width:120%; height:80%;
  background: var(--sam-blue); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation:wave-sway 6s ease-in-out infinite alternate;
}
.about-visual-main::after {
  content:''; position:absolute; top:20%; left:20%;
  width:120px; height:120px; border-radius:50%;
  background: var(--gold);
  animation:pulse-glow 4s ease-in-out infinite; box-shadow: 0 0 40px var(--accent);
}
.about-badge {
  position:absolute; bottom:10%; right:-2rem;
  width:120px; height:120px; background:var(--coral); border-radius: 50%; border: 4px solid var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: 0 10px 0 var(--ocean);
  transform: rotate(15deg);
}
.about-badge-num   { font-family:var(--font-display); font-size:2.5rem; color:var(--surface); line-height:1; }
.about-badge-label { font-size:.7rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--surface); }
.about-accent-line { position:absolute; top:10%; left:-2rem; width:80px; height:20px; background:var(--accent); border-radius: 10px; border: 2px solid var(--ocean); transform: rotate(-20deg); }
.about-text p { font-size:1.1rem; line-height:1.7; font-weight:500; color:var(--text-muted); margin-bottom:1.2rem; }
.about-text .section-title { margin-bottom:1.5rem; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.about-feat { padding:1.5rem; border:3px solid var(--ocean); background:var(--surface); border-radius: 20px; box-shadow: 4px 4px 0 var(--gold); transition: transform 0.2s; }
.about-feat:hover { transform: translateY(-5px); box-shadow: 4px 8px 0 var(--accent); }
.about-feat-icon  { font-size:2rem; margin-bottom:.8rem; background: var(--mist); display: inline-block; padding: 0.5rem; border-radius: 50%; border: 2px solid var(--ocean); }
.about-feat-label { font-size:1rem; font-weight: bold; color:var(--ocean); }
.about-feat-desc  { font-size:.85rem; color:var(--text-muted); margin-top:.4rem; font-weight: 500; }

/* ── 9. BRANDS ── */
.brands-section { padding:8rem 4rem; background:var(--surface); }
.brands-header  {
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem;
}
.brands-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.brand-card {
  background:var(--deep); border-radius: 20px;
  padding:2.5rem 1.5rem; text-decoration:none; cursor:none;
  position:relative; overflow:hidden;
  border:3px solid var(--ocean); box-shadow: 6px 6px 0 var(--gold);
  transition:transform .3s, box-shadow .3s; text-align: center;
}
.brand-card:hover { transform: translateY(-6px); box-shadow: 6px 12px 0 var(--accent); background: var(--surface); }
.brand-icon  { font-size:3rem; margin-bottom:1rem; display:inline-block; transition: transform 0.3s var(--ease-out); }
.brand-card:hover .brand-icon { transform: scale(1.2) rotate(10deg); }
.brand-cat   { font-size:.7rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); margin-bottom:.6rem; }
.brand-name  { font-family:var(--font-display); font-size:2rem; color:var(--ocean); line-height:1; }
.brand-desc  { font-size:.9rem; line-height:1.5; color:var(--text-muted); margin-top:1rem; font-weight:500; }
.brand-link  {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ocean); margin-top:1.5rem; transition:color .25s;
  background: var(--gold); padding: 0.5rem 1rem; border-radius: 20px; border: 2px solid var(--ocean);
}
.brand-card:hover .brand-link { background:var(--accent); color: var(--surface); }

/* ── 10. SKI SCHOOL ── */
.school { padding:8rem 4rem; background:var(--coral); overflow:hidden; }
.school-inner { display:block; width:100%; }
.school-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--surface); border:3px solid var(--ocean); border-radius: 30px;
  padding:.6rem 1.2rem; margin-bottom:1.5rem; box-shadow: 4px 4px 0 var(--gold);
}
.school-badge-dot  { width:12px; height:12px; background:var(--accent); border-radius:50%; border: 2px solid var(--ocean); animation:blink 1s ease-in-out infinite; }
.school-badge-text { font-size:.8rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean); }
.school-text p { font-size:1.1rem; line-height:1.7; font-weight:500; color:var(--surface); margin-bottom:2rem; }
.school-text .section-title { margin-bottom:1.5rem; color: var(--surface); text-shadow: 3px 3px 0 var(--ocean); }
.school-text .section-title em { color: var(--surface); text-decoration-color: var(--ocean); }
.school-text .section-eyebrow { background: var(--gold); color: var(--ocean); }
.levels { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
@media (max-width: 900px) { .levels { grid-template-columns:1fr; } }
.level {
  display:flex; align-items:center; gap:1.5rem;
  padding:1.5rem; background:var(--surface); border-radius: 20px;
  border:3px solid var(--ocean); box-shadow: 4px 4px 0 var(--ocean);
  transition:transform .3s, box-shadow .3s; cursor:none;
}
.level:hover { transform: translateX(10px); box-shadow: 8px 4px 0 var(--gold); }
.level-num   { font-family:var(--font-display); font-size:2.5rem; color:var(--coral); text-shadow: 2px 2px 0 var(--ocean); width:3rem; }
.level-info  { flex:1; }
.level-name  { font-size:1.1rem; font-family: var(--font-display); letter-spacing: 1px; color:var(--ocean); }
.level-desc  { font-size:.9rem; font-weight: 500; color:var(--text-muted); margin-top:.2rem; }
.level-price { font-family:var(--font-display); font-size:1.5rem; color:var(--ocean); background: var(--gold); padding: 0.5rem 1rem; border-radius: 12px; border: 2px solid var(--ocean); }
.school-visual { position:relative; }
.deco-circle {
  position:absolute; border-radius:50%; border:4px dashed var(--gold);
  animation:rotate-slow 30s linear infinite;
}
.deco-circle:nth-child(1) { width:400px; height:400px; top:-50px; right:-50px; }
.deco-circle:nth-child(2) { width:600px; height:600px; top:-150px; right:-150px; animation-direction:reverse; animation-duration:50s; border-color: var(--surface); border-style: dotted;}

/* ── 11. E-FOIL SHOWROOM (E-COMMERCE) ── */
.efoil-showroom {
  padding:6rem 4rem;
  background:#ffffff; border-top: 1px solid #eee;
}
.showroom-header { text-align: left; margin-bottom: 2rem; }
.showroom-desc { font-size: 1rem; color: #666; margin-top: .5rem; max-width: 600px;}
.board-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.board-card {
  background: var(--deep); border: 2px solid rgba(0,51,153,0.1); border-radius: 20px;
  display: flex; flex-direction: column; padding: 2rem; position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
}
.board-card:hover { box-shadow: 0 12px 36px rgba(0,51,153,0.1); transform: translateY(-4px); z-index: 2; }
.board-stock {
  display: inline-block; background: var(--mist); color: var(--ocean);
  font-size: .65rem; font-weight: bold; padding: .3rem .8rem; border-radius: 12px;
  position: absolute; top: 1.5rem; left: 1.5rem; z-index: 3;
}
.board-img-wrap {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; padding: 1rem; background: #ffffff; border-radius: 16px;
}
.board-img {
  max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.4s;
}
.board-card:hover .board-img { transform: scale(1.05); }
.board-colors {
  display: flex; justify-content: flex-end; gap: .3rem; margin-bottom: 2rem;
}
.color-tag {
  font-size: .65rem; color: #666; border: 1px solid #ccc; padding: .2rem .4rem; border-radius: 2px; text-transform: capitalize;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.color-tag:hover { background: var(--ocean); color: var(--surface); border-color: var(--ocean); }
.board-cat { font-size: .8rem; color: #999; margin-bottom: .2rem; }
.board-title { font-family: var(--font-display); font-size: 2rem; color: #111; margin-bottom: .5rem; text-transform: uppercase; }
.board-price { font-size: 1.1rem; font-weight: bold; color: #111; margin-bottom: 1.5rem; }
.board-price span { font-size: .7rem; color: #666; font-weight: normal; }
.board-action {
  margin-top: auto; border-top: 2px dashed rgba(0,51,153,0.1); padding-top: 1.5rem;
}
.btn-select {
  background: none; border: none; font-size: .9rem; font-weight: bold; color: #111;
  display: flex; align-items: center; gap: .5rem; cursor: pointer; text-transform: uppercase; letter-spacing: .05em; padding: 0;
  transition: color 0.3s;
}
.btn-select:hover { color: var(--accent); }

/* ── 12. APPAREL ── */
.apparel { padding:8rem 4rem; background:var(--deep); border-top: 4px solid var(--ocean); }
.apparel-header {
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem;
}
.apparel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.apparel-card { 
  position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--surface); cursor:none; 
  border-radius: 24px; border: 4px solid var(--ocean); box-shadow: 8px 8px 0 var(--accent);
  transition: transform 0.3s;
}
.apparel-card:nth-child(2) { box-shadow: 8px 8px 0 var(--gold); }
.apparel-card:nth-child(3) { box-shadow: 8px 8px 0 var(--coral); }
.apparel-card:hover { transform: translateY(-10px); }
.apparel-content {
  position:absolute; bottom:0; left:0; right:0; padding:2rem;
  background:var(--surface); border-top: 4px solid var(--ocean);
  transform:translateY(20px); opacity:0;
  transition:transform .4s var(--ease-out),opacity .4s ease;
}
.apparel-card:hover .apparel-content { transform:translateY(0); opacity:1; }
.apparel-brand { font-size:.8rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); }
.apparel-title { font-family:var(--font-display); font-size:2.2rem; color:var(--ocean); margin-top:.3rem; }
.apparel-icon {
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  font-size:6rem; transition:transform .4s var(--ease-out);
}
.apparel-card:hover .apparel-icon { transform:translate(-50%,-60%) scale(1.2); }
.apparel-line { display: none; }

/* ── 13. CONTACT ── */
.contact {
  padding:8rem 4rem;
  background:var(--surface); border-top: 4px solid var(--ocean);
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
}
.contact-info .section-title { margin-bottom:1.5rem; }
.contact-info p  { font-size:1.1rem; line-height:1.7; font-weight:500; color:var(--text-muted); margin-bottom:2.5rem; }
.contact-items   { display:flex; flex-direction:column; gap:1.5rem; }
.contact-item    { display:flex; align-items:center; gap:1.2rem; font-size:.95rem; font-weight: bold; color:var(--ocean); }
.contact-item-icon {
  width:50px; height:50px; background:var(--gold); border-radius: 12px;
  border:3px solid var(--ocean); box-shadow: 3px 3px 0 var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.contact-form    { display:flex; flex-direction:column; gap:1.5rem; background: var(--deep); padding: 3rem; border-radius: 30px; border: 4px solid var(--ocean); box-shadow: 12px 12px 0 var(--gold); }
.form-row        { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-field      { display:flex; flex-direction:column; gap:.6rem; }
.form-field label { font-size:.85rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean); }
.form-field input,
.form-field select,
.form-field textarea {
  background:var(--surface); border:3px solid var(--ocean); border-radius: 12px;
  color:var(--ocean); padding:1rem;
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  outline:none; transition:box-shadow .25s, transform .25s;
  appearance:none; resize:none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { box-shadow: 4px 4px 0 var(--accent); transform: translate(-2px, -2px); }
.form-field input::placeholder,
.form-field textarea::placeholder { color:#a0aec0; font-weight: 500;}

/* ── 14. FOOTER ── */
footer { padding:6rem 4rem 3rem; background:var(--ocean); color: var(--surface); }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem;
  padding-bottom:4rem; border-bottom:2px dashed rgba(255,255,255,0.2);
}
.brand-logo.footer-brand {
  margin-bottom: 2rem; display: block;
}
.footer-logo-img {
  height: 160px; width: auto;
  margin: -50px 0 10px 0;
  filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.8));
}
.footer-tagline { font-size:1rem; line-height:1.7; font-weight:500; color:var(--deep); max-width:280px; }
.footer-col h4  { font-size:.9rem; font-weight: bold; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
.footer-col ul  { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.footer-col a   { font-size:.9rem; font-weight: 500; color:var(--surface); text-decoration:none; transition:color .25s; }
.footer-col a:hover { color:var(--coral); }
.footer-bottom  { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; }
.footer-copy    { font-size:.85rem; font-weight: bold; color:rgba(255,255,255,0.5); }
.footer-socials { display:flex; gap:1rem; }
.social-btn {
  width:44px; height:44px; background: var(--surface); border:2px solid var(--surface); border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ocean); font-size:1.1rem; font-weight: bold; text-decoration:none;
  transition:transform .25s, box-shadow .25s;
}
.social-btn:hover { transform: translateY(-4px); box-shadow: 0 4px 0 var(--gold); }

/* ── 15. ANIMATIONS ── */
@keyframes wave-in    { from { opacity:0; } to   { opacity:inherit; } }
@keyframes wave-move  { 0%   { transform:translateX(0); }  100% { transform:translateX(-50%); } }
@keyframes beam-pulse { from { opacity:.4; }  to   { opacity:1; } }
@keyframes fade-up    { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in    { from { opacity:0; } to   { opacity:1; } }
@keyframes float-up   {
  0%   { transform:translateY(0) translateX(0) scale(1) rotate(0); opacity:1; }
  100% { transform:translateY(-100vh) translateX(var(--dx,40px)) scale(1.5) rotate(360deg); opacity:0; }
}
@keyframes ticker      { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes pulse-glow  {
  0%,100% { transform: scale(1); opacity:.8; }
  50%      { transform: scale(1.2); opacity:1;  }
}
@keyframes wave-sway   { from { transform:skewX(-5deg) scaleY(0.9); } to { transform:skewX(5deg) scaleY(1.1); } }
@keyframes rotate-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes blink       { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes scroll-pulse{ 0%,100% { transform:translateY(0); opacity:.7; } 50% { transform:translateY(20px); opacity:.3; } }

/* ── 16. RESPONSIVE ── */
@media (max-width:900px) {
  nav           { padding:1.2rem 1.5rem; }
  .nav-links,
  .nav-cta,
  .hero-stats   { display:none; }
  .hero-content { padding:0 1.5rem 5rem; padding-top: 6rem;}
  .hero-scroll  { display:none; }
  .categories,
  .about,
  .efoil-showroom { padding:4rem 1.5rem; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  html, body { overflow-x: hidden; width: 100%; }
  .board-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .school-inner { grid-template-columns: 1fr; }
  .about, .contact { grid-template-columns: 1fr; gap: 4rem; }
  .school, .brands-section, .apparel, .contact { padding: 4rem 1.5rem; }
  .categories, .efoil-showroom { padding: 4rem 1.5rem; }
  .categories { grid-template-columns: 1fr; }
  .cat-card   { aspect-ratio: 16/9; padding: 1.5rem; }
  .about-features { grid-template-columns: 1fr; }
  .brands-grid  { grid-template-columns: 1fr; gap: 1.5rem; }
  .apparel-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-row     { grid-template-columns: 1fr; }
  .footer-top   { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .footer-tagline { margin: 0 auto; }
  .footer-col ul { display: flex; flex-direction: column; align-items: center; }
  .hero-title    { font-size: 3.5rem; }
  .section-title { font-size: 2.8rem; }
  body          { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
}