first version and docs

dist/css/styles.css

@@ -0,0 +1,685 @@
+/* =========================================================
+   Apex Turf — Landing Page Styles
+   ========================================================= */
+
+:root {
+  /* Brand palette */
+  --green-950: #0b1c13;
+  --green-900: #0f2818;
+  --green-800: #163a25;
+  --green-700: #1e4f31;
+  --green-600: #2c7a43;
+  --green-500: #3fae4a;
+  --green-400: #6fcf7a;
+  --green-100: #e7f5e9;
+
+  --orange-600: #d97b06;
+  --orange-500: #f5941e;
+  --orange-400: #ffb04d;
+
+  --ink-900: #14201a;
+  --ink-700: #3a463f;
+  --ink-500: #63736a;
+  --ink-300: #9fb0a6;
+
+  --cream-50: #f8f9f4;
+  --cream-100: #f1f3ec;
+  --white: #ffffff;
+
+  --shadow-sm: 0 2px 8px rgba(14, 30, 20, 0.08);
+  --shadow-md: 0 8px 24px rgba(14, 30, 20, 0.14);
+  --shadow-lg: 0 20px 48px rgba(14, 30, 20, 0.22);
+
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 22px;
+
+  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
+  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
+
+  --header-h: 84px;
+}
+
+/* ---------- Reset ---------- */
+* , *::before, *::after { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  color: var(--ink-900);
+  background: var(--cream-50);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+img { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }
+ul { list-style: none; margin: 0; padding: 0; }
+h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; color: var(--green-950); }
+p { margin: 0 0 1em; }
+button { font-family: inherit; cursor: pointer; }
+section { position: relative; }
+.container {
+  width: 100%;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+svg.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
+}
+
+/* ---------- Reveal on scroll ---------- */
+.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
+.reveal.is-visible { opacity: 1; transform: translateY(0); }
+.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }
+
+/* ---------- Buttons ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: .5em;
+  padding: 14px 28px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: .95rem;
+  letter-spacing: .02em;
+  border: 2px solid transparent;
+  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
+  white-space: nowrap;
+}
+.btn:active { transform: translateY(1px); }
+.btn-primary {
+  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
+  color: var(--white);
+  box-shadow: var(--shadow-sm);
+}
+.btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
+.btn-outline {
+  background: transparent;
+  border-color: currentColor;
+  color: var(--white);
+}
+.btn-outline:hover { background: rgba(255,255,255,.12); }
+.btn-ghost {
+  background: var(--green-100);
+  color: var(--green-800);
+}
+.btn-ghost:hover { background: var(--green-500); color: var(--white); }
+.btn-block { width: 100%; justify-content: center; }
+.btn-sm { padding: 10px 20px; font-size: .85rem; }
+
+/* ---------- Eyebrow / badges ---------- */
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: .5em;
+  font-weight: 700;
+  font-size: .78rem;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--orange-500);
+  margin-bottom: .9em;
+}
+.eyebrow::before {
+  content: "";
+  width: 22px;
+  height: 2px;
+  background: var(--orange-500);
+  display: inline-block;
+}
+.eyebrow.light { color: var(--green-400); }
+
+.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
+.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
+.section-head p { color: var(--ink-500); font-size: 1.05rem; }
+
+/* =========================================================
+   Header
+   ========================================================= */
+.site-header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 100;
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  background: linear-gradient(180deg, rgba(11,28,19,.92), rgba(11,28,19,.75));
+  backdrop-filter: blur(10px);
+  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
+}
+.site-header.is-scrolled {
+  background: rgba(9, 22, 15, .96);
+  box-shadow: var(--shadow-md);
+  height: 68px;
+}
+.site-header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+.brand { display: flex; align-items: center; gap: .6em; }
+.brand img { height: 34px; width: auto; }
+
+.main-nav { display: flex; }
+.main-nav ul { display: flex; gap: 2rem; }
+.main-nav a {
+  position: relative;
+  font-size: .92rem;
+  font-weight: 600;
+  color: rgba(255,255,255,.82);
+  padding: 8px 2px;
+  transition: color .2s ease;
+}
+.main-nav a::after {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 2px;
+  background: var(--green-400);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform .25s ease;
+}
+.main-nav a:hover, .main-nav a.is-active { color: var(--white); }
+.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
+
+.header-actions { display: flex; align-items: center; gap: 14px; }
+.nav-toggle {
+  display: none;
+  width: 42px; height: 42px;
+  border: none;
+  background: rgba(255,255,255,.08);
+  border-radius: 10px;
+  color: var(--white);
+  align-items: center;
+  justify-content: center;
+}
+.nav-toggle svg { width: 22px; height: 22px; }
+.nav-toggle .icon-close { display: none; }
+.nav-open .nav-toggle .icon-menu { display: none; }
+.nav-open .nav-toggle .icon-close { display: block; }
+
+@media (max-width: 920px) {
+  .main-nav {
+    position: fixed;
+    top: var(--header-h); left: 0; right: 0;
+    background: rgba(9, 22, 15, .98);
+    flex-direction: column;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .35s ease;
+  }
+  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 24px 20px; }
+  .main-nav a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
+  .nav-open .main-nav { max-height: 480px; }
+  .nav-toggle { display: inline-flex; }
+  .header-actions .btn-primary.desktop-only { display: none; }
+}
+
+/* =========================================================
+   Hero
+   ========================================================= */
+.hero {
+  position: relative;
+  min-height: 100vh;
+  padding-top: var(--header-h);
+  display: flex;
+  overflow: hidden;
+  background: var(--green-950);
+}
+.hero-split {
+  position: relative;
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+  min-height: calc(100vh - var(--header-h));
+}
+.hero-pane {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  padding: 60px 5vw 70px;
+  overflow: hidden;
+  min-height: 480px;
+}
+.hero-pane .pane-bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  transform: scale(1.02);
+}
+.hero-pane .pane-overlay {
+  position: absolute;
+  inset: 0;
+}
+.pane-left .pane-overlay {
+  background: linear-gradient(180deg, rgba(9,20,13,.55) 0%, rgba(9,20,13,.25) 40%, rgba(9,20,13,.85) 100%);
+}
+.pane-right .pane-overlay {
+  background: linear-gradient(180deg, rgba(6,12,20,.6) 0%, rgba(6,12,20,.3) 40%, rgba(6,12,20,.9) 100%);
+}
+.hero-pane::after {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0;
+  width: 140px;
+  z-index: 3;
+  pointer-events: none;
+}
+.pane-left::after {
+  right: -70px;
+  background: linear-gradient(100deg, transparent 45%, rgba(63,174,74,.9) 49%, rgba(111,207,122,.7) 51%, transparent 55%);
+}
+.hero-content { position: relative; z-index: 2; max-width: 480px; color: var(--white); }
+.hero-content h1, .hero-content h2 { color: var(--white); }
+.pane-badge {
+  display: inline-block;
+  font-size: .76rem;
+  font-weight: 700;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  padding: 6px 14px;
+  border-radius: 999px;
+  margin-bottom: 1em;
+}
+.pane-left .pane-badge { background: rgba(111,207,122,.18); color: var(--green-400); border: 1px solid rgba(111,207,122,.4); }
+.pane-right .pane-badge { background: rgba(245,148,30,.18); color: var(--orange-400); border: 1px solid rgba(245,148,30,.4); }
+.hero-content h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
+.hero-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
+.hero-content .sub { color: rgba(255,255,255,.85); font-size: 1.02rem; max-width: 420px; }
+
+.pane-stats { display: flex; gap: 22px; margin: 1.3em 0 1.5em; flex-wrap: wrap; }
+.pane-stats .stat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); }
+.pane-stats .stat span.ico {
+  width: 42px; height: 42px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(255,255,255,.12);
+  border: 1px solid rgba(255,255,255,.25);
+}
+.pane-stats .stat svg { width: 20px; height: 20px; }
+
+/* Right pane tabs */
+.pane-tabs {
+  position: absolute;
+  top: 34px; right: 5vw;
+  z-index: 4;
+  display: flex;
+  gap: 8px;
+}
+.pane-tabs button {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,.35);
+  background: rgba(0,0,0,.25);
+  color: rgba(255,255,255,.75);
+  font-size: .78rem;
+  font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  transition: all .25s ease;
+}
+.pane-tabs button.is-active {
+  background: var(--orange-500);
+  border-color: var(--orange-500);
+  color: var(--white);
+  transform: scale(1.08);
+}
+.right-scenes { position: absolute; inset: 0; }
+.right-scene {
+  position: absolute; inset: 0;
+  padding: 60px 5vw 70px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .6s ease;
+  display: flex;
+  align-items: flex-end;
+}
+.right-scene.is-active { opacity: 1; visibility: visible; }
+
+.hero-divider {
+  position: absolute;
+  left: 50%; top: 0; bottom: 0;
+  width: 2px;
+  background: rgba(255,255,255,.15);
+  transform: skewX(-8deg) translateX(-1px);
+  z-index: 3;
+  display: none;
+}
+@media (min-width: 700px) { .hero-divider { display: block; } }
+
+.scroll-cue {
+  position: absolute;
+  bottom: 22px; left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  color: rgba(255,255,255,.6);
+  font-size: .72rem;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  animation: bob 2.2s ease-in-out infinite;
+}
+@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
+
+@media (max-width: 900px) {
+  .hero-split { grid-template-columns: minmax(0,1fr); }
+  .hero-pane { min-height: 60vh; padding: 40px 24px 48px; }
+  .pane-left::after { display: none; }
+  .pane-tabs { top: 18px; right: 18px; }
+}
+
+/* =========================================================
+   Value Pillars
+   ========================================================= */
+.pillars { background: var(--white); padding: 100px 0; }
+.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
+.pillar-card {
+  background: var(--cream-50);
+  border: 1px solid rgba(20,32,26,.06);
+  border-radius: var(--radius-md);
+  padding: 30px 24px;
+  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
+}
+.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
+.pillar-card.accent { background: linear-gradient(160deg, #fff6e8, #fdecc9); border-color: rgba(217,123,6,.2); }
+.pillar-icon {
+  width: 52px; height: 52px;
+  border-radius: 14px;
+  background: var(--green-100);
+  color: var(--green-700);
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 18px;
+}
+.pillar-card.accent .pillar-icon { background: #fce3b8; color: var(--orange-600); }
+.pillar-icon svg { width: 26px; height: 26px; }
+.pillar-card h3 { font-size: 1.08rem; }
+.pillar-card p { color: var(--ink-500); font-size: .94rem; margin-bottom: 0; }
+
+@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 560px) { .pillar-grid { grid-template-columns: minmax(0,1fr); } }
+
+/* =========================================================
+   Specialties quick-grid
+   ========================================================= */
+.specialties { padding: 100px 0 70px; background: var(--cream-100); }
+.specialty-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
+.specialty-card {
+  position: relative;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  aspect-ratio: 3/4;
+  color: var(--white);
+  display: flex;
+  align-items: flex-end;
+  box-shadow: var(--shadow-sm);
+  transition: transform .3s ease, box-shadow .3s ease;
+}
+.specialty-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
+.specialty-card img {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  transition: transform .5s ease;
+}
+.specialty-card:hover img { transform: scale(1.08); }
+.specialty-card .scrim {
+  position: absolute; inset: 0;
+  background: linear-gradient(180deg, rgba(11,28,19,0) 30%, rgba(9,18,13,.92) 100%);
+}
+.specialty-card .card-body { position: relative; z-index: 2; padding: 22px; }
+.specialty-card .tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-400); }
+.specialty-card h3 { color: var(--white); font-size: 1.15rem; margin: .3em 0 .4em; }
+.specialty-card p { color: rgba(255,255,255,.78); font-size: .85rem; margin-bottom: .6em; }
+.specialty-card .card-link { font-size: .82rem; font-weight: 700; color: var(--orange-400); display: inline-flex; align-items: center; gap: 4px; }
+.specialty-card .card-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
+.specialty-card:hover .card-link svg { transform: translateX(4px); }
+
+@media (max-width: 980px) { .specialty-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 560px) { .specialty-grid { grid-template-columns: minmax(0,1fr); } .specialty-card { aspect-ratio: 16/10; } }
+
+/* =========================================================
+   Detail sections (alternating)
+   ========================================================= */
+.detail { padding: 96px 0; }
+.detail:nth-of-type(even) { background: var(--white); }
+.detail-grid {
+  display: grid;
+  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+  gap: 60px;
+  align-items: center;
+}
+.detail.reverse .detail-grid { direction: rtl; }
+.detail.reverse .detail-grid > * { direction: ltr; }
+.detail-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
+.detail-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
+.detail-media .media-badge {
+  position: absolute; bottom: 18px; left: 18px;
+  background: rgba(11,28,19,.85);
+  color: var(--white);
+  padding: 10px 16px;
+  border-radius: 999px;
+  font-size: .82rem;
+  font-weight: 700;
+  display: flex; align-items: center; gap: 8px;
+}
+.detail-media .media-badge svg { width: 16px; height: 16px; color: var(--green-400); }
+.detail-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
+.detail-text p.lead { font-size: 1.05rem; color: var(--ink-700); }
+.feature-list { display: flex; flex-direction: column; gap: 14px; margin: 1.6em 0 2em; }
+.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; color: var(--ink-700); }
+.feature-list .check {
+  flex: none;
+  width: 24px; height: 24px;
+  border-radius: 50%;
+  background: var(--green-100);
+  color: var(--green-700);
+  display: flex; align-items: center; justify-content: center;
+  margin-top: 2px;
+}
+.feature-list .check svg { width: 13px; height: 13px; }
+
+@media (max-width: 900px) {
+  .detail-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
+  .detail.reverse .detail-grid { direction: ltr; }
+}
+
+/* =========================================================
+   About
+   ========================================================= */
+.about { background: var(--green-950); color: var(--white); padding: 110px 0; position: relative; overflow: hidden; }
+.about::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: radial-gradient(circle at 15% 20%, rgba(63,174,74,.18), transparent 45%),
+              radial-gradient(circle at 85% 80%, rgba(245,148,30,.12), transparent 40%);
+}
+.about .container { position: relative; z-index: 1; }
+.about-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 60px; align-items: start; }
+.about h2 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.3rem); }
+.about p.lead { color: rgba(255,255,255,.8); font-size: 1.05rem; }
+.about blockquote {
+  margin: 1.6em 0 0;
+  padding: 20px 24px;
+  border-left: 3px solid var(--green-400);
+  background: rgba(255,255,255,.05);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  font-style: italic;
+  color: rgba(255,255,255,.85);
+}
+.guarantee-cards { display: flex; flex-direction: column; gap: 20px; }
+.guarantee-card {
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: var(--radius-md);
+  padding: 26px;
+}
+.guarantee-card .g-icon {
+  width: 46px; height: 46px;
+  border-radius: 12px;
+  background: rgba(111,207,122,.16);
+  color: var(--green-400);
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 14px;
+}
+.guarantee-card .g-icon svg { width: 22px; height: 22px; }
+.guarantee-card h3 { color: var(--white); font-size: 1.05rem; }
+.guarantee-card p { color: rgba(255,255,255,.72); font-size: .92rem; margin-bottom: 0; }
+
+@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0,1fr); } }
+
+/* =========================================================
+   Gallery showcase
+   ========================================================= */
+.showcase { padding: 100px 0; background: var(--cream-50); }
+.showcase-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
+.showcase-item {
+  position: relative;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  aspect-ratio: 1/1;
+}
+.showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
+.showcase-item:hover img { transform: scale(1.1); }
+.showcase-item .cap {
+  position: absolute; inset: auto 0 0 0;
+  background: linear-gradient(180deg, transparent, rgba(9,18,13,.88));
+  color: var(--white);
+  padding: 14px 16px 12px;
+  font-size: .82rem;
+  font-weight: 700;
+  letter-spacing: .04em;
+}
+@media (max-width: 760px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+
+/* =========================================================
+   Contact / Quote form
+   ========================================================= */
+.contact { padding: 110px 0; background: linear-gradient(160deg, var(--green-900), var(--green-950)); color: var(--white); }
+.contact-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 56px; }
+.contact-info h2 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.3rem); }
+.contact-info p { color: rgba(255,255,255,.78); }
+.contact-list { display: flex; flex-direction: column; gap: 18px; margin-top: 1.8em; }
+.contact-list li { display: flex; align-items: center; gap: 14px; font-size: .96rem; }
+.contact-list .c-icon {
+  width: 42px; height: 42px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.08);
+  color: var(--green-400);
+  display: flex; align-items: center; justify-content: center;
+  flex: none;
+}
+.contact-list .c-icon svg { width: 19px; height: 19px; }
+.social-row { display: flex; gap: 12px; margin-top: 2em; }
+.social-row a {
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.08);
+  display: flex; align-items: center; justify-content: center;
+  transition: background .2s ease, transform .2s ease;
+}
+.social-row a:hover { background: var(--green-500); transform: translateY(-3px); }
+.social-row svg { width: 18px; height: 18px; }
+
+.quote-form {
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  padding: 34px;
+  color: var(--ink-900);
+  box-shadow: var(--shadow-lg);
+}
+.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
+.field { margin-bottom: 16px; }
+.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-700); }
+.field input, .field select, .field textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1.5px solid #e1e5de;
+  font-family: inherit;
+  font-size: .95rem;
+  background: var(--cream-50);
+  transition: border-color .2s ease, box-shadow .2s ease;
+}
+.field input:focus, .field select:focus, .field textarea:focus {
+  outline: none;
+  border-color: var(--green-500);
+  box-shadow: 0 0 0 4px rgba(63,174,74,.15);
+}
+.field textarea { resize: vertical; min-height: 90px; }
+.form-note { font-size: .78rem; color: var(--ink-500); margin-top: 10px; text-align: center; }
+.form-success {
+  display: none;
+  align-items: center;
+  gap: 12px;
+  background: var(--green-100);
+  color: var(--green-800);
+  padding: 16px 18px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: .92rem;
+  margin-bottom: 18px;
+}
+.form-success.show { display: flex; }
+.form-success svg { width: 20px; height: 20px; flex: none; }
+
+@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0,1fr); } }
+@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0,1fr); } }
+
+/* =========================================================
+   Footer
+   ========================================================= */
+.site-footer { background: #081810; color: rgba(255,255,255,.7); padding: 70px 0 0; }
+.footer-grid {
+  display: grid;
+  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
+  gap: 40px;
+  padding-bottom: 50px;
+  border-bottom: 1px solid rgba(255,255,255,.08);
+}
+.footer-brand img { height: 30px; margin-bottom: 16px; }
+.footer-brand p { font-size: .9rem; max-width: 280px; color: rgba(255,255,255,.6); }
+.footer-col h4 { color: var(--white); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
+.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
+.footer-col a { font-size: .92rem; color: rgba(255,255,255,.65); transition: color .2s ease; }
+.footer-col a:hover { color: var(--green-400); }
+.footer-col .foot-contact { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
+.footer-col .foot-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green-400); flex: none; }
+.footer-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 0;
+  font-size: .82rem;
+  color: rgba(255,255,255,.5);
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.footer-bottom .legal-links { display: flex; gap: 20px; }
+
+@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
+@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
+
+/* ---------- Back to top ---------- */
+.back-to-top {
+  position: fixed;
+  right: 24px; bottom: 24px;
+  width: 46px; height: 46px;
+  border-radius: 50%;
+  background: var(--green-500);
+  color: var(--white);
+  border: none;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--shadow-md);
+  opacity: 0; visibility: hidden;
+  transform: translateY(10px);
+  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
+  z-index: 90;
+}
+.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+.back-to-top:hover { background: var(--green-600); }
+.back-to-top svg { width: 20px; height: 20px; }

dist/index.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Apex Turf | Premium Artificial Turf Installations — Spain</title>
+<meta name="description" content="Apex Turf designs and installs premium artificial turf for homes, pádel courts, football pitches and golf greens across Spain. Master installers, custom quotes, free samples.">
+<link rel="icon" type="image/png" href="assets/images/logos/apexturf-icon.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="css/styles.css">
+<noscript><style>.reveal{opacity:1!important;transform:none!important;}</style></noscript>
+</head>
+<body>
+
+<!-- ============ HEADER ============ -->
+<header class="site-header" id="siteHeader">
+  <div class="container">
+    <a href="#home" class="brand">
+      <img src="assets/images/logos/apexturf-logo.png" alt="Apex Turf">
+    </a>
+
+    <nav class="main-nav" id="mainNav" aria-label="Primary">
+      <ul>
+        <li><a href="#home" class="is-active">Home</a></li>
+        <li><a href="#landscaping">Landscaping</a></li>
+        <li><a href="#padel">Pádel</a></li>
+        <li><a href="#football">Football</a></li>
+        <li><a href="#golf">Golf</a></li>
+        <li><a href="#about">About Us</a></li>
+      </ul>
+    </nav>
+
+    <div class="header-actions">
+      <a href="#contact" class="btn btn-primary desktop-only">Get Samples &amp; Quote</a>
+      <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mainNav">
+        <svg class="icon icon-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+        <svg class="icon icon-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
+      </button>
+    </div>
+  </div>
+</header>
+
+<!-- ============ HERO ============ -->
+<section class="hero" id="home">
+  <div class="hero-split">
+    <div class="hero-divider" aria-hidden="true"></div>
+
+    <!-- Left pane: Residential / Landscaping (fixed) -->
+    <div class="hero-pane pane-left">
+      <div class="pane-bg" style="background-image:url('assets/images/animals/lion.jpg')"></div>
+      <div class="pane-overlay"></div>
+      <div class="hero-content">
+        <span class="pane-badge">Residential Turf</span>
+        <h1>The King of Lawns</h1>
+        <p class="sub">Transform your mud-pit, patchy lawn, or tired garden into a flawless, evergreen sanctuary — engineered for family life and built to last across Spain.</p>
+        <div class="pane-stats">
+          <div class="stat">
+            <span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M4.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M15.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M9 8c0-1.4 1.1-3 2.5-3S14 6.6 14 8s-1 3.5-2.5 3.5S9 9.4 9 8Z"/><path d="M8 20c0-2.8 1.8-5 4-5s4 2.2 4 5"/></svg></span>
+            Pets
+          </div>
+          <div class="stat">
+            <span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2.5"/><path d="M6 21v-4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4"/><path d="M9 14l-2 7M15 14l2 7"/></svg></span>
+            Kids
+          </div>
+          <div class="stat">
+            <span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4 3 6 6 6 10a6 6 0 0 1-12 0c0-4 2-7 6-10Z"/></svg></span>
+            Low Maintenance
+          </div>
+        </div>
+        <a href="#contact" class="btn btn-ghost">Get a Free Quote</a>
+      </div>
+    </div>
+
+    <!-- Right pane: rotating Sport turf (Pádel / Football / Golf) -->
+    <div class="hero-pane pane-right">
+      <div class="pane-tabs" id="heroTabs" role="tablist" aria-label="Sport turf specialties">
+        <button type="button" role="tab" data-scene="padel" class="is-active" aria-selected="true">P</button>
+        <button type="button" role="tab" data-scene="football" aria-selected="false">F</button>
+        <button type="button" role="tab" data-scene="golf" aria-selected="false">G</button>
+      </div>
+
+      <div class="right-scenes" id="rightScenes">
+
+        <div class="right-scene is-active" data-scene="padel">
+          <div class="pane-bg" style="background-image:url('assets/images/animals/shark.jpg')"></div>
+          <div class="pane-overlay"></div>
+          <div class="hero-content">
+            <span class="pane-badge">Pádel Court Turf</span>
+            <h2>Professional Pádel Turf &amp; Court Resurfacing</h2>
+            <p class="sub">Built for explosive footwork, rapid drainage, and intense tournament play — courts engineered to outlast the competition.</p>
+            <div class="pane-stats">
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>Durability</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span>Fast Drainage</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg></span>Custom Colors</div>
+            </div>
+            <a href="#padel" class="btn btn-primary">Request Court Audit</a>
+          </div>
+        </div>
+
+        <div class="right-scene" data-scene="football">
+          <div class="pane-bg" style="background-image:url('assets/images/animals/panther.jpg')"></div>
+          <div class="pane-overlay"></div>
+          <div class="hero-content">
+            <span class="pane-badge">Football &amp; Multisport</span>
+            <h2>High-Performance Pitches &amp; Multisport Surfaces</h2>
+            <p class="sub">Engineered for explosive speed, heavy multi-directional traction, and professional ball roll — from 5-a-side arenas to multisport complexes.</p>
+            <div class="pane-stats">
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16M8 6l-4 6 4 6M16 6l4 6-4 6"/></svg></span>High Traction</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5Z"/></svg></span>Heavy-Duty</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M3 12h3m12 0h3M12 3v3m0 12v3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1"/><circle cx="12" cy="12" r="3"/></svg></span>All-Weather</div>
+            </div>
+            <a href="#football" class="btn btn-primary">Request Pitch Audit</a>
+          </div>
+        </div>
+
+        <div class="right-scene" data-scene="golf">
+          <div class="pane-bg" style="background-image:url('assets/images/animals/eagle.jpg')"></div>
+          <div class="pane-overlay"></div>
+          <div class="hero-content">
+            <span class="pane-badge">Golf &amp; Putting Greens</span>
+            <h2>Custom Putting Greens for Luxury Villas</h2>
+            <p class="sub">Bring the course to your backyard. Precision-engineered greens built for true roll, flawless breaks, and championship performance at home.</p>
+            <div class="pane-stats">
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M2 12h3m14 0h3M12 2v3m0 14v3"/></svg></span>Perfect Roll</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M6 21V4l11 4-6 3 6 3-11 4"/></svg></span>Custom Contours</div>
+              <div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4 3 6 6 6 10a6 6 0 0 1-12 0c0-4 2-7 6-10Z"/></svg></span>All-Weather</div>
+            </div>
+            <a href="#golf" class="btn btn-primary">Request Green Design</a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="scroll-cue" aria-hidden="true">
+    <span>Scroll</span>
+    <svg class="icon" viewBox="0 0 24 24" style="width:16px;height:16px;"><path d="M12 4v16M6 14l6 6 6-6"/></svg>
+  </div>
+</section>
+
+<!-- ============ VALUE PILLARS ============ -->
+<section class="pillars">
+  <div class="container">
+    <div class="section-head reveal">
+      <span class="eyebrow" style="justify-content:center">Why Apex Turf</span>
+      <h2>Engineered For Real Life</h2>
+      <p>Total honesty, real performance. Every installation is matched to how you actually live, play, and compete.</p>
+    </div>
+
+    <div class="pillar-grid reveal-stagger">
+      <div class="pillar-card reveal" style="--i:0">
+        <div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2.5"/><path d="M6 21v-4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4"/></svg></div>
+        <h3>Child &amp; Family Safe</h3>
+        <p>Soft, non-toxic, mud-free surfaces where kids can play safely all year round without tracking dirt back into the house.</p>
+      </div>
+      <div class="pillar-card reveal" style="--i:1">
+        <div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M15.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M9 8c0-1.4 1.1-3 2.5-3S14 6.6 14 8s-1 3.5-2.5 3.5S9 9.4 9 8Z"/></svg></div>
+        <h3>Pet-Friendly Systems</h3>
+        <p>Superior drainage and odor-control backing so dogs can run hard without tearing up or damaging the yard.</p>
+      </div>
+      <div class="pillar-card reveal" style="--i:2">
+        <div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1"/></svg></div>
+        <h3>Built for Spanish Weather</h3>
+        <p>High-grade UV-stabilized fibers that withstand intense summer heat and solar exposure without fading or burning.</p>
+      </div>
+      <div class="pillar-card accent reveal" style="--i:3">
+        <div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11"/></svg></div>
+        <h3>Low Maintenance, Not No Maintenance</h3>
+        <p>Total honesty — throw away the lawnmower and weed killer. Upkeep means a quick brush, clearing leaves, and occasional rinsing.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ SPECIALTIES QUICK GRID ============ -->
+<section class="specialties" id="specialties">
+  <div class="container">
+    <div class="section-head reveal">
+      <span class="eyebrow" style="justify-content:center">Our Specialties</span>
+      <h2>One Team, Four Disciplines</h2>
+      <p>From backyard lawns to tournament-grade courts — every surface is sourced and engineered for its sport.</p>
+    </div>
+
+    <div class="specialty-grid reveal-stagger">
+      <a href="#landscaping" class="specialty-card reveal" style="--i:0">
+        <img src="assets/images/animals/lion.jpg" alt="Residential landscaping turf" loading="lazy">
+        <div class="scrim"></div>
+        <div class="card-body">
+          <span class="tag">Landscaping</span>
+          <h3>Residential Turf</h3>
+          <p>Premium lawns for family living.</p>
+          <span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
+        </div>
+      </a>
+      <a href="#padel" class="specialty-card reveal" style="--i:1">
+        <img src="assets/images/animals/shark.jpg" alt="Pádel court turf" loading="lazy">
+        <div class="scrim"></div>
+        <div class="card-body">
+          <span class="tag">Pádel</span>
+          <h3>Court Resurfacing</h3>
+          <p>Tournament-grade performance.</p>
+          <span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
+        </div>
+      </a>
+      <a href="#football" class="specialty-card reveal" style="--i:2">
+        <img src="assets/images/animals/panther.jpg" alt="Football pitch turf" loading="lazy">
+        <div class="scrim"></div>
+        <div class="card-body">
+          <span class="tag">Football</span>
+          <h3>Pitches &amp; Multisport</h3>
+          <p>Built for explosive speed.</p>
+          <span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
+        </div>
+      </a>
+      <a href="#golf" class="specialty-card reveal" style="--i:3">
+        <img src="assets/images/animals/eagle.jpg" alt="Golf putting green turf" loading="lazy">
+        <div class="scrim"></div>
+        <div class="card-body">
+          <span class="tag">Golf</span>
+          <h3>Putting Greens</h3>
+          <p>Championship performance.</p>
+          <span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
+        </div>
+      </a>
+    </div>
+  </div>
+</section>
+
+<!-- ============ DETAIL: LANDSCAPING ============ -->
+<section class="detail" id="landscaping">
+  <div class="container detail-grid">
+    <div class="detail-media reveal">
+      <img src="assets/images/animals/lion.jpg" alt="Lush residential lawn installation">
+      <span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>The King of Lawns</span>
+    </div>
+    <div class="detail-text reveal">
+      <span class="eyebrow">Residential Turf</span>
+      <h2>Transform Your Home Garden</h2>
+      <p class="lead">Whether you have high-energy dogs tearing up the grass, kids needing a safe space to play, or you just want a stunning, low-maintenance lounge to relax and entertain in — we match the exact turf model to your unique lifestyle.</p>
+      <ul class="feature-list">
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Soft, non-toxic, mud-free surfaces for kids and pets</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Superior drainage and odor-control backing</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>UV-stabilized fibers built for Spanish summers</li>
+      </ul>
+      <a href="#contact" class="btn btn-primary">Build Your Project &amp; Claim Free Samples</a>
+    </div>
+  </div>
+</section>
+
+<!-- ============ DETAIL: PADEL ============ -->
+<section class="detail reverse" id="padel">
+  <div class="container detail-grid">
+    <div class="detail-text reveal">
+      <span class="eyebrow">Pádel Courts</span>
+      <h2>Is Your Court Turf Failing Early?</h2>
+      <p class="lead">Heavy tournament play, intense sliding, and continuous pivoting take a brutal toll on pádel courts. We replace worn-out surfaces with our own proprietary assembly system — reinforcing the seams and joints where traditional installations usually fail.</p>
+      <ul class="feature-list">
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Proprietary seam &amp; joint assembly system</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Optimized sand infill for precise ball bounce</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom colors — blue, black, terracotta, green &amp; two-tone</li>
+      </ul>
+      <a href="#contact" class="btn btn-primary">Request Court Audit &amp; Samples</a>
+    </div>
+    <div class="detail-media reveal">
+      <img src="assets/images/animals/shark.jpg" alt="Pádel court resurfacing">
+      <span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Performance</span>
+    </div>
+  </div>
+</section>
+
+<!-- ============ DETAIL: FOOTBALL ============ -->
+<section class="detail" id="football">
+  <div class="container detail-grid">
+    <div class="detail-media reveal">
+      <img src="assets/images/animals/panther.jpg" alt="Football pitch turf system">
+      <span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Football</span>
+    </div>
+    <div class="detail-text reveal">
+      <span class="eyebrow">Football &amp; Multisport</span>
+      <h2>Built for the Speed of Small-Sided Football</h2>
+      <p class="lead">Fast-paced small-sided football demands a surface that can handle relentless friction, quick pivots, and heavy slide-tackling without breaking down. Our specialized turf systems deliver optimal traction and natural ball behavior.</p>
+      <ul class="feature-list">
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>High-density wear resistance for daily training</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Shock-absorbing underlayers reduce joint impact</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom multisport layouts &amp; line markings</li>
+      </ul>
+      <a href="#contact" class="btn btn-primary">Request Pitch Audit &amp; Samples</a>
+    </div>
+  </div>
+</section>
+
+<!-- ============ DETAIL: GOLF ============ -->
+<section class="detail reverse" id="golf">
+  <div class="container detail-grid">
+    <div class="detail-text reveal">
+      <span class="eyebrow">Golf &amp; Putting Greens</span>
+      <h2>Your Personal Practice Facility at Home</h2>
+      <p class="lead">Stop driving to the course just to practice your short game. We design and install custom backyard putting greens tailored to your villa's layout — engineered for professional Stimp-rated ball roll and realistic break contours.</p>
+      <ul class="feature-list">
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>True ball roll with high-density texturized fibers</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom contours, breaks &amp; cup placements</li>
+        <li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Laser-leveled sub-base &amp; flush cup fittings</li>
+      </ul>
+      <a href="#contact" class="btn btn-primary">Request Green Design &amp; Samples</a>
+    </div>
+    <div class="detail-media reveal">
+      <img src="assets/images/animals/eagle.jpg" alt="Backyard golf putting green">
+      <span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Golf</span>
+    </div>
+  </div>
+</section>
+
+<!-- ============ ABOUT ============ -->
+<section class="about" id="about">
+  <div class="container about-grid">
+    <div class="reveal">
+      <span class="eyebrow light">About Apex Turf</span>
+      <h2>Master Installers. Absolute Precision. Built For Life.</h2>
+      <p class="lead">We aren't just selling rolls of grass — we are master craftsmen and professional turf specialists dedicated to building surfaces that perform flawlessly and last. We partner directly with Europe's most trusted, premium turf manufacturers to source the exact material every project demands.</p>
+      <blockquote>“Every project, ground condition, and lifestyle is different. That's why we don't offer generic price lists — we provide custom, transparent quotes tailored to your exact space, sub-base requirements, and performance goals.”</blockquote>
+    </div>
+    <div class="guarantee-cards reveal">
+      <div class="guarantee-card">
+        <div class="g-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg></div>
+        <h3>Reliable &amp; Trustworthy</h3>
+        <p>From our first site visit to the final clean-up, we show up on time, communicate clearly, and treat your property with absolute respect.</p>
+      </div>
+      <div class="guarantee-card">
+        <div class="g-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11"/></svg></div>
+        <h3>Satisfaction Guaranteed</h3>
+        <p>We aren't finished until you love the result. Our work is backed by strict installation standards and manufacturer warranties.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ SHOWCASE / GALLERY ============ -->
+<section class="showcase" id="gallery">
+  <div class="container">
+    <div class="section-head reveal">
+      <span class="eyebrow" style="justify-content:center">Gallery</span>
+      <h2>Apex Turf In Every Arena</h2>
+      <p>A look at the specialties behind every Apex Turf installation.</p>
+    </div>
+    <div class="showcase-grid reveal-stagger">
+      <a href="#landscaping" class="showcase-item reveal" style="--i:0"><img src="assets/images/animals/lion.jpg" alt="Landscaping"><span class="cap">Landscaping</span></a>
+      <a href="#padel" class="showcase-item reveal" style="--i:1"><img src="assets/images/animals/shark.jpg" alt="Pádel"><span class="cap">Pádel</span></a>
+      <a href="#football" class="showcase-item reveal" style="--i:2"><img src="assets/images/animals/panther.jpg" alt="Football"><span class="cap">Football</span></a>
+      <a href="#golf" class="showcase-item reveal" style="--i:3"><img src="assets/images/animals/eagle.jpg" alt="Golf"><span class="cap">Golf</span></a>
+    </div>
+  </div>
+</section>
+
+<!-- ============ CONTACT / QUOTE ============ -->
+<section class="contact" id="contact">
+  <div class="container contact-grid">
+    <div class="contact-info reveal">
+      <span class="eyebrow light">Get In Touch</span>
+      <h2>Ready to Upgrade Your Space?</h2>
+      <p>Tell us about your project. We'll help you find the right turf model and ship free samples straight to your door.</p>
+      <ul class="contact-list">
+        <li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.4 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.5 2.9.6a2 2 0 0 1 1.7 2Z"/></svg></span> +34 900 123 456</li>
+        <li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 4 8 8 8-8"/></svg></span> hello@apexturf.com</li>
+        <li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></svg></span> Madrid, Spain — serving projects nationwide</li>
+      </ul>
+      <div class="social-row">
+        <a href="#" aria-label="Facebook"><svg class="icon" viewBox="0 0 24 24"><path d="M14 9h3V6h-3a4 4 0 0 0-4 4v2H7v3h3v6h3v-6h3l1-3h-4v-2a1 1 0 0 1 1-1Z"/></svg></a>
+        <a href="#" aria-label="Instagram"><svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1"/></svg></a>
+        <a href="#" aria-label="X / Twitter"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4l16 16M20 4 4 20"/></svg></a>
+        <a href="#" aria-label="WhatsApp"><svg class="icon" viewBox="0 0 24 24"><path d="M4 20l1.4-4.2A8 8 0 1 1 9 19l-5 1Z"/><path d="M9 10.5c0 3 2.5 5.5 5.5 5.5"/></svg></a>
+      </div>
+    </div>
+
+    <form class="quote-form reveal" id="quoteForm" novalidate>
+      <div class="form-success" id="formSuccess">
+        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>
+        Thanks! Your request has been received — we'll be in touch within 24 hours.
+      </div>
+
+      <div class="form-row">
+        <div class="field">
+          <label for="fName">Full Name</label>
+          <input type="text" id="fName" name="name" required placeholder="Jane Smith">
+        </div>
+        <div class="field">
+          <label for="fEmail">Email</label>
+          <input type="email" id="fEmail" name="email" required placeholder="jane@email.com">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="field">
+          <label for="fPhone">Phone</label>
+          <input type="tel" id="fPhone" name="phone" placeholder="+34 6xx xxx xxx">
+        </div>
+        <div class="field">
+          <label for="fType">Project Type</label>
+          <select id="fType" name="type">
+            <option value="Residential Landscaping">Residential Landscaping</option>
+            <option value="Pádel Court">Pádel Court</option>
+            <option value="Football / Multisport">Football / Multisport</option>
+            <option value="Golf Green">Golf Green</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+      </div>
+      <div class="field">
+        <label for="fMessage">Tell us about your project</label>
+        <textarea id="fMessage" name="message" placeholder="Space size, current surface, timeline..."></textarea>
+      </div>
+      <button type="submit" class="btn btn-primary btn-block">Start Questionnaire &amp; Get Samples</button>
+      <p class="form-note">By submitting, you agree to be contacted by Apex Turf about your project.</p>
+    </form>
+  </div>
+</section>
+
+<!-- ============ FOOTER ============ -->
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="assets/images/logos/apexturf-logo.png" alt="Apex Turf">
+        <p>Premium artificial turf design &amp; installation for homes, pádel courts, football pitches and golf greens — engineered and built to last across Spain.</p>
+      </div>
+      <div class="footer-col">
+        <h4>Explore</h4>
+        <ul>
+          <li><a href="#landscaping">Landscaping</a></li>
+          <li><a href="#padel">Pádel</a></li>
+          <li><a href="#football">Football</a></li>
+          <li><a href="#golf">Golf</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h4>Company</h4>
+        <ul>
+          <li><a href="#about">About Us</a></li>
+          <li><a href="#gallery">Gallery</a></li>
+          <li><a href="#contact">Get a Quote</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h4>Contact</h4>
+        <ul>
+          <li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.4 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.5 2.9.6a2 2 0 0 1 1.7 2Z"/></svg> +34 900 123 456</li>
+          <li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 4 8 8 8-8"/></svg> hello@apexturf.com</li>
+          <li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></svg> Madrid, Spain</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>&copy; <span id="year"></span> Apex Turf. All rights reserved.</span>
+      <div class="legal-links">
+        <a href="#">Privacy Policy</a>
+        <a href="#">Terms of Service</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<button class="back-to-top" id="backToTop" aria-label="Back to top">
+  <svg class="icon" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+</button>
+
+<script src="js/main.js"></script>
+</body>
+</html>

dist/js/main.js

@@ -0,0 +1,189 @@
+/* =========================================================
+   Apex Turf — Landing Page Interactions
+   ========================================================= */
+(function () {
+  "use strict";
+
+  var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  /* ---------- Sticky header ---------- */
+  var header = document.getElementById("siteHeader");
+  function onScroll() {
+    if (window.scrollY > 40) {
+      header.classList.add("is-scrolled");
+    } else {
+      header.classList.remove("is-scrolled");
+    }
+    toggleBackToTop();
+  }
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+
+  /* ---------- Mobile nav toggle ---------- */
+  var navToggle = document.getElementById("navToggle");
+  var mainNav = document.getElementById("mainNav");
+  navToggle.addEventListener("click", function () {
+    var isOpen = document.body.classList.toggle("nav-open");
+    navToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  });
+  mainNav.querySelectorAll("a").forEach(function (link) {
+    link.addEventListener("click", function () {
+      document.body.classList.remove("nav-open");
+      navToggle.setAttribute("aria-expanded", "false");
+    });
+  });
+
+  /* ---------- Active nav link on scroll ---------- */
+  var navLinks = Array.prototype.slice.call(mainNav.querySelectorAll("a"));
+  var sections = navLinks
+    .map(function (link) {
+      var id = link.getAttribute("href");
+      return id && id.charAt(0) === "#" ? document.querySelector(id) : null;
+    })
+    .filter(Boolean);
+
+  if ("IntersectionObserver" in window && sections.length) {
+    var navObserver = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            var id = "#" + entry.target.id;
+            navLinks.forEach(function (link) {
+              link.classList.toggle("is-active", link.getAttribute("href") === id);
+            });
+          }
+        });
+      },
+      { rootMargin: "-45% 0px -50% 0px", threshold: 0 }
+    );
+    sections.forEach(function (section) { navObserver.observe(section); });
+  }
+
+  /* ---------- Scroll reveal (with fallbacks so content never stays stuck hidden) ---------- */
+  var revealEls = document.querySelectorAll(".reveal");
+  function revealAll() {
+    revealEls.forEach(function (el) { el.classList.add("is-visible"); });
+  }
+  try {
+    if ("IntersectionObserver" in window && !prefersReducedMotion) {
+      var revealObserver = new IntersectionObserver(
+        function (entries, obs) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("is-visible");
+              obs.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.15 }
+      );
+      revealEls.forEach(function (el) { revealObserver.observe(el); });
+      // Safety net: if the observer never fires (paint quirks, fragment-jump
+      // navigation, etc.) don't leave content permanently invisible.
+      setTimeout(revealAll, 2500);
+    } else {
+      revealAll();
+    }
+  } catch (err) {
+    revealAll();
+  }
+
+  /* ---------- Hero right-pane tabs (Pádel / Football / Golf) ---------- */
+  var tabButtons = document.querySelectorAll("#heroTabs button");
+  var scenes = document.querySelectorAll(".right-scene");
+  var sceneOrder = ["padel", "football", "golf"];
+  var currentIndex = 0;
+  var rotateTimer = null;
+  var rightPane = document.querySelector(".pane-right");
+
+  function showScene(name) {
+    tabButtons.forEach(function (btn) {
+      var active = btn.getAttribute("data-scene") === name;
+      btn.classList.toggle("is-active", active);
+      btn.setAttribute("aria-selected", active ? "true" : "false");
+    });
+    scenes.forEach(function (scene) {
+      scene.classList.toggle("is-active", scene.getAttribute("data-scene") === name);
+    });
+    currentIndex = sceneOrder.indexOf(name);
+  }
+
+  function nextScene() {
+    currentIndex = (currentIndex + 1) % sceneOrder.length;
+    showScene(sceneOrder[currentIndex]);
+  }
+
+  function startRotation() {
+    stopRotation();
+    if (!prefersReducedMotion) {
+      rotateTimer = setInterval(nextScene, 6000);
+    }
+  }
+  function stopRotation() {
+    if (rotateTimer) { clearInterval(rotateTimer); rotateTimer = null; }
+  }
+
+  tabButtons.forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      showScene(btn.getAttribute("data-scene"));
+      startRotation();
+    });
+  });
+
+  if (rightPane) {
+    rightPane.addEventListener("mouseenter", stopRotation);
+    rightPane.addEventListener("mouseleave", startRotation);
+    rightPane.addEventListener("focusin", stopRotation);
+    rightPane.addEventListener("focusout", startRotation);
+  }
+
+  startRotation();
+
+  /* ---------- Smooth scroll with header offset ---------- */
+  var headerOffset = function () {
+    return header.offsetHeight + 12;
+  };
+  document.querySelectorAll('a[href^="#"]').forEach(function (link) {
+    link.addEventListener("click", function (e) {
+      var targetId = link.getAttribute("href");
+      if (targetId.length < 2) return;
+      var target = document.querySelector(targetId);
+      if (!target) return;
+      e.preventDefault();
+      var top = target.getBoundingClientRect().top + window.pageYOffset - headerOffset();
+      window.scrollTo({ top: top, behavior: prefersReducedMotion ? "auto" : "smooth" });
+      history.pushState(null, "", targetId);
+    });
+  });
+
+  /* ---------- Quote form (front-end only) ---------- */
+  var form = document.getElementById("quoteForm");
+  var successBox = document.getElementById("formSuccess");
+  if (form) {
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
+      if (!form.checkValidity()) {
+        form.reportValidity();
+        return;
+      }
+      successBox.classList.add("show");
+      form.reset();
+      successBox.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "center" });
+      setTimeout(function () { successBox.classList.remove("show"); }, 8000);
+    });
+  }
+
+  /* ---------- Back to top ---------- */
+  var backToTop = document.getElementById("backToTop");
+  function toggleBackToTop() {
+    if (!backToTop) return;
+    backToTop.classList.toggle("show", window.scrollY > 700);
+  }
+  backToTop.addEventListener("click", function () {
+    window.scrollTo({ top: 0, behavior: prefersReducedMotion ? "auto" : "smooth" });
+  });
+
+  /* ---------- Footer year ---------- */
+  var yearEl = document.getElementById("year");
+  if (yearEl) { yearEl.textContent = new Date().getFullYear(); }
+})();