.elementor-62565 .elementor-element.elementor-element-2ba3d6a{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-62565 .elementor-element.elementor-element-f1aceac > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-62565 .elementor-element.elementor-element-5595306 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}body.elementor-page-62565{margin:0px 0px 0px 0px;padding:0% 0% 0% 0%;}body.elementor-page-62565:not(.elementor-motion-effects-element-type-background), body.elementor-page-62565 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:700px){.elementor-62565 .elementor-element.elementor-element-2ba3d6a{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-5595306 */.hero {
  ...
  padding-bottom: 0px;/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-f1aceac */.elementor-62565 .elementor-element.elementor-element-f1aceac {
  margin-top: -300px !important;
}

@media (max-width: 768px) {
  .elementor-62565 .elementor-element.elementor-element-f1aceac {
    margin-top: -1700px !important;
  }
}

@media (max-width: 480px) {
  .elementor-62565 .elementor-element.elementor-element-f1aceac {
    margin-top: -170px !important;
  }
}/* End custom CSS */
/* Start custom CSS */<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gazon Sintetic Fotbal | Arena Systems</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&display=swap" rel="stylesheet">
<style>
:root {
  --blue: #1f12f5;
  --blue-dark: #1209cc;
  --blue-glow: rgba(31,18,245,0.35);
  --yellow: #f2e64c;
  --yellow-dark: #d4c93a;
  --white: #ffffff;
  --off-white: #f0f0f0;
  --dark: #060610;
  --dark2: #0c0c1a;
  --gray: #8890a0;
  --light-gray: #e8eaf0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* WordPress/Elementor whitespace fix */
.elementor-widget-wrap > .elementor-element,
.elementor-widget-container,
.wp-block-group__inner-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset orice container WordPress/Elementor care ar putea adauga spatiu */
.elementor-section-wrap > *:first-child,
.elementor-widget-container,
.wp-block-group,
.entry-content,
.page-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════
   FLOATING CONTACT BAR
═══════════════════════════════════════ */
.float-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--dark);
  border-top: 3px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
}
.float-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .5px;
}
.float-phone .ph-icon {
  background: var(--yellow);
  color: var(--dark);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.float-cta {
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 11px 28px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.float-cta:hover { background: var(--yellow-dark); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  background: var(--dark);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-bottom: 60px;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* animated diagonal stripes */
.hero-stripes {
  position: absolute;
  inset: -50%;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 60px,
    rgba(31,18,245,0.06) 60px,
    rgba(31,18,245,0.06) 61px
  );
  animation: stripesDrift 25s linear infinite;
}
@keyframes stripesDrift { from { transform: translateX(0); } to { transform: translateX(100px); } }

/* yellow accent bar diagonal */
.hero-accent {
  position: absolute;
  top: 0; right: 120px;
  width: 6px;
  height: 100%;
  background: var(--yellow);
  transform: skewX(-8deg);
  opacity: .7;
}
.hero-accent-2 {
  position: absolute;
  top: 0; right: 96px;
  width: 2px;
  height: 100%;
  background: var(--blue);
  transform: skewX(-8deg);
  opacity: .5;
}

/* real cover photo */
.hero-photo {
  position: absolute;
  inset: 0;
  background: url('https://arenasystems.ro/wp-content/uploads/2026/03/DJI_0656-1.jpg') center center / cover no-repeat;
  filter: brightness(.35) saturate(1.15);
}

/* field lines in bg */
.hero-field-lines {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 75% 55%, rgba(31,18,245,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 80% 20%, rgba(242,230,76,0.06) 0%, transparent 60%);
}

/* pitch SVG overlay */
.hero-pitch {
  position: absolute;
  right: -60px; bottom: -40px;
  width: 560px;
  opacity: 0.07;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* HERO LEFT */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.eyebrow-line {
  width: 36px; height: 3px;
  background: var(--yellow);
}
.eyebrow-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--yellow);
}

.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 8.5vw, 110px);
  line-height: .92;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 8px;
}
.hero h1 .accent-word {
  color: var(--yellow);
  display: block;
  position: relative;
}
.hero h1 .stroke-word {
  -webkit-text-stroke: 2px var(--blue);
  color: transparent;
  display: block;
}

.hero-divider {
  width: 60px; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  margin: 28px 0;
}

.hero-sub {
  font-size: 17px;
  color: #b0bbc8;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 36px;
}
.hero-sub strong { color: var(--white); font-weight: 700; }

/* trust pills */
.trust-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 7px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--off-white);
}
.pill .pill-icon { font-size: 15px; }
.pill.yellow-pill {
  background: rgba(242,230,76,.1);
  border-color: rgba(242,230,76,.3);
  color: var(--yellow);
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 32px;
  text-decoration: none;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: background .2s, transform .2s;
  box-shadow: 4px 4px 0 var(--blue);
}
.btn-hero-primary:hover { background: var(--yellow-dark); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--blue); }

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.25);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.btn-hero-secondary:hover { border-color: var(--yellow); color: var(--yellow); }

/* urgency */
.hero-urgency {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.blink-dot {
  width: 8px; height: 8px;
  background: #22dd66;
  border-radius: 50%;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(1.4); } }

/* ── FORM CARD ── */
.form-card {
  background: var(--white);
  position: relative;
  box-shadow: 0 0 0 3px var(--yellow), 8px 8px 0 var(--blue);
  padding: 0;
  overflow: hidden;
  animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.form-top-bar {
  background: var(--blue);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-top-bar h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--white);
}
.form-top-bar .badge-free {
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.form-body { padding: 24px 28px 28px; }
.form-body p {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.5;
}
.form-body p strong { color: var(--blue); }

.fg { margin-bottom: 12px; position: relative; }
.fg input, .fg select, .fg textarea {
  width: 100%;
  border: 2px solid #e0e4ee;
  background: #f7f8fc;
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, background .2s;
  border-radius: 0;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--blue);
  background: #fff;
}
.fg input::placeholder, .fg textarea::placeholder { color: #aab0be; }
.fg select { appearance: none; cursor: pointer; }
.fg textarea { resize: none; height: 72px; }

.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn-submit {
  width: 100%;
  background: var(--blue);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px;
  border: none;
  cursor: pointer;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.btn-submit::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(242,230,76,.3), transparent);
  transition: left .4s;
}
.btn-submit:hover { background: var(--blue-dark); }
.btn-submit:hover::before { left: 100%; }

.form-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: #aab;
}

.success-state {
  display: none;
  text-align: center;
  padding: 40px 28px;
}
.success-state .check-circle {
  width: 64px; height: 64px;
  background: var(--blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.success-state h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--blue);
  margin-bottom: 8px;
}
.success-state p { color: var(--gray); font-size: 14px; line-height: 1.6; }


/* ═══════════════════════════════════════
   LOGOS STRIP (cluburi partenere)
═══════════════════════════════════════ */
.logos-strip {
  background: #ffffff;
  padding: 36px 40px;
  overflow: hidden;
  border-top: 1px solid #eef0f6;
  border-bottom: 1px solid #eef0f6;
}
.logos-label {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #aab0be;
  margin-bottom: 20px;
}
.logos-track-wrap { overflow: hidden; }
.logos-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: logoScroll 22s linear infinite;
  width: max-content;
}
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-item img {
  height: 56px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: opacity .3s, transform .3s;
}
.logo-item img:hover {
  opacity: .75;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════
   STATS BAR
═══════════════════════════════════════ */
.stats-bar {
  background: var(--blue);
  padding: 0;
}
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-block {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.stat-block:last-child { border-right: none; }
.stat-block::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform .3s;
}
.stat-block:hover::before { transform: scaleX(1); }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: 2px;
  display: block;
}
.stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
  display: block;
}


/* ═══════════════════════════════════════
   SECTION GENERIC
═══════════════════════════════════════ */
section { padding: 96px 40px; }
.container { max-width: 1200px; margin: 0 auto; }

.s-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-label::before {
  content: '';
  display: block;
  width: 24px; height: 3px;
  background: var(--yellow);
}
.s-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 2px;
  line-height: .95;
  color: var(--dark);
  margin-bottom: 20px;
}
.s-title em { font-style: normal; color: var(--blue); }
.s-title .yellow-em { font-style: normal; color: var(--yellow-dark); }
.s-desc {
  font-size: 17px;
  color: #5a6370;
  max-width: 560px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════
   WHY CARDS
═══════════════════════════════════════ */
.why-section { background: #f4f6fb; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}
.why-card {
  background: var(--white);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  cursor: default;
}
.why-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(31,18,245,.1); }
.why-card:hover::after { transform: scaleX(1); }

.why-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  color: #eef0f8;
  line-height: 1;
  position: absolute;
  top: 12px; right: 20px;
  letter-spacing: 2px;
}
.why-icon {
  width: 52px; height: 52px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.why-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 10px;
}
.why-card p { font-size: 14px; color: #5a6370; line-height: 1.7; }


/* ═══════════════════════════════════════
   DIAGONAL SPLIT CTA
═══════════════════════════════════════ */
.split-cta {
  background: var(--dark);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.split-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}
.split-left {
  background: var(--blue);
  padding: 64px 56px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-left::after {
  content: '';
  position: absolute;
  top: 0; right: -40px;
  border-top: 210px solid var(--blue);
  border-bottom: 210px solid var(--blue);
  border-right: 40px solid transparent;
  z-index: 2;
}
.split-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 58px);
  letter-spacing: 3px;
  line-height: .95;
  color: var(--white);
  margin-bottom: 16px;
}
.split-left h2 span { color: var(--yellow); }
.split-left p { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 28px; }
.btn-split {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 32px;
  text-decoration: none;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  align-self: flex-start;
  transition: background .2s;
}
.btn-split:hover { background: var(--yellow-dark); }

.split-right {
  padding: 64px 56px 64px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-steps-v { display: flex; flex-direction: column; gap: 24px; }
.pstep {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pstep-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--yellow);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}
.pstep-content h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.pstep-content p { font-size: 13px; color: #555a70; line-height: 1.5; }
.pstep-divider { width: 1px; height: 24px; background: rgba(255,255,255,.1); margin-left: 18px; }


/* ═══════════════════════════════════════
   SPECS
═══════════════════════════════════════ */
.specs-section { background: var(--white); }
.specs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 60px;
  align-items: start;
}

.spec-table { border: 2px solid #edf0f8; }
.spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.spec-row:not(:last-child) { border-bottom: 1px solid #edf0f8; }
.spec-row:nth-child(even) .spec-key { background: #f7f8fc; }
.spec-row:nth-child(even) .spec-val { background: #fafbfe; }
.spec-key {
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
  border-right: 1px solid #edf0f8;
}
.spec-val {
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--dark);
}
.spec-val.blue { color: var(--blue); }

.cert-cards { display: flex; flex-direction: column; gap: 16px; }
.cert-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 2px solid #edf0f8;
  background: #ffffff;
  transition: border-color .2s, transform .2s;
}
.cert-card:hover { border-color: var(--blue); transform: translateX(6px); }
.cert-badge {
  width: 52px; height: 52px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.cert-card h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 3px;
}
.cert-card p { font-size: 13px; color: var(--gray); line-height: 1.4; }


/* ═══════════════════════════════════════
   TESTIMONIAL
═══════════════════════════════════════ */
.testimonial-section { background: #f4f6fb; padding: 80px 40px; }
.testimonial-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: center;
}
.testimonial-photo-side { text-align: center; }
.photo-frame {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--blue);
  margin: 0 auto 16px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.photo-frame .initials {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--yellow);
  letter-spacing: 2px;
}
.photo-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark);
}
.photo-role { font-size: 13px; color: var(--gray); margin-top: 2px; }
.photo-stars { color: var(--yellow-dark); font-size: 18px; letter-spacing: 3px; margin-top: 8px; }

.testimonial-text-side {}
.quote-mark-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 100px;
  color: var(--blue);
  line-height: .6;
  opacity: .15;
  margin-bottom: -20px;
}
.testimonial-quote {
  font-size: 18px;
  font-style: italic;
  color: #3a4050;
  line-height: 1.75;
}
.testimonial-quote strong { color: var(--blue); font-style: normal; font-weight: 700; }


/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq-section { background: var(--white); }
.faq-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  margin-top: 0;
  align-items: start;
}
.faq-left { padding-top: 8px; }
.faq-left .s-desc { margin-top: 16px; }
.faq-left .cta-faq {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  margin-top: 28px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background .2s;
}
.faq-left .cta-faq:hover { background: var(--blue-dark); }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #e8eaf0; }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .5px;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color .2s;
}
.faq-q:hover { color: var(--blue); }
.faq-q .arrow {
  width: 32px; height: 32px;
  background: var(--blue);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .3s, background .2s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.faq-item.open .faq-q .arrow { transform: rotate(45deg); background: var(--yellow); color: var(--dark); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a-inner { padding-bottom: 20px; font-size: 15px; color: #5a6370; line-height: 1.7; }
.faq-item.open .faq-a { max-height: 220px; }


/* ═══════════════════════════════════════
   FINAL CTA STRIP
═══════════════════════════════════════ */
.final-cta {
  background: var(--yellow);
  padding: 72px 40px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: 'ARENA';
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(31,18,245,.07);
  right: -40px; top: -40px;
  letter-spacing: 10px;
  line-height: 1;
  pointer-events: none;
}
.final-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.final-cta h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: 3px;
  line-height: .95;
  color: var(--dark);
}
.final-cta h2 span { color: var(--blue); }
.final-cta p { font-size: 16px; color: rgba(0,0,0,.6); margin-top: 8px; }
.final-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dark);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 36px;
  text-decoration: none;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: background .2s;
  box-shadow: 4px 4px 0 var(--blue);
}
.btn-dark:hover { background: var(--blue); }

.btn-phone-big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 32px;
  text-decoration: none;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: background .2s;
}
.btn-phone-big:hover { background: var(--blue-dark); }

/* ═══════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding: 60px 24px 100px; }
  .hero { min-height: 100svh; }
  .hero-photo { background-attachment: scroll !important; background-position: center center !important; background-size: cover !important; }
  .form-card { max-width: 480px; animation: none; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-block { border-bottom: 1px solid rgba(255,255,255,.1); }
  .split-cta-inner { grid-template-columns: 1fr; }
  .split-left::after { display: none; }
  .split-right { padding: 40px 40px 56px; }
  .specs-layout { grid-template-columns: 1fr; gap: 40px; }
  .testimonial-wrap { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .final-cta-inner { flex-direction: column; text-align: center; }
  .final-cta-btns { justify-content: center; }
  section { padding: 64px 24px; }
}
@media (max-width: 600px) {
  /* Hero */
  .hero { min-height: 100svh; }
  .hero-inner { grid-template-columns: 1fr; padding: 36px 20px 90px; gap: 28px; }
  .hero h1 { font-size: 48px; letter-spacing: 1px; }
  .hero-photo { background-position: 60% center !important; }
  .hero-accent, .hero-accent-2, .hero-pitch { display: none; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .btn-hero-primary, .btn-hero-secondary { justify-content: center; width: 100%; padding: 14px 20px; font-size: 14px; }
  .hero-divider { margin: 18px 0; }
  .hero-sub { font-size: 15px; margin-bottom: 20px; }
  .hero-urgency { font-size: 12px; }

  /* Trust pills */
  .trust-pills { gap: 6px; }
  .pill { font-size: 11px; padding: 5px 10px; }

  /* Form */
  .form-card { box-shadow: 0 0 0 2px var(--yellow), 4px 4px 0 var(--blue); animation: none; max-width: 100%; }
  .form-top-bar { padding: 14px 20px; }
  .form-top-bar h3 { font-size: 18px; }
  .form-body { padding: 18px 20px 20px; }
  .financing-inject { padding: 0 20px 4px; }

  /* Logos */
  .logos-strip { padding: 24px 20px; }
  .logos-track { gap: 32px; }
  .logo-item img { height: 40px; max-width: 90px; }

  /* Stats */
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 38px; }
  .stat-block { padding: 22px 16px; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; gap: 2px; }
  .why-card { padding: 28px 20px; }

  /* Comparison */
  .comparison-wrap { font-size: 12px; }
  .comp-cell { padding: 10px 8px; font-size: 11px; gap: 4px; }
  .comp-cell.feature { font-size: 10px; padding: 10px 8px; }
  .comp-header-cell { font-size: 12px; padding: 14px 8px; letter-spacing: 1px; }
  .comp-header-cell.us::after { font-size: 7px; padding: 2px 6px; }
  .comparison-section { padding: 60px 16px; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-name { font-size: 20px; }
  .project-tag { opacity: 1; transform: none; }

  /* Split CTA */
  .split-left { padding: 40px 24px; }
  .split-right { padding: 32px 24px 48px; }
  .pstep-num { font-size: 28px; }

  /* Specs */
  .specs-layout { grid-template-columns: 1fr; gap: 24px; }
  .specs-section { padding: 60px 20px; }

  /* Testimonial */
  .testimonial-wrap { grid-template-columns: 1fr; gap: 24px; }
  .testimonial-section { padding: 60px 20px; }
  .testimonial-quote { font-size: 15px; }

  /* Video */
  .video-inner { grid-template-columns: 1fr; gap: 32px; }
  .video-section { padding: 60px 20px; }
  .video-quote { padding: 18px 18px 18px 20px; }

  /* FAQ */
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-section { padding: 60px 20px; }
  .faq-q { font-size: 14px; }

  /* Final CTA */
  .final-cta { padding: 56px 20px; }
  .final-cta-inner { flex-direction: column; text-align: center; }
  .final-cta-btns { justify-content: center; flex-direction: column; gap: 10px; }
  .btn-dark, .btn-phone-big { justify-content: center; width: 100%; clip-path: none; }

  /* Float bar */
  .float-bar { gap: 8px; padding: 8px 14px; }
  .float-phone .label { display: none; }
  .float-cta { clip-path: none; font-size: 13px; padding: 10px 20px; }

  /* General sections */
  section { padding: 60px 20px; }
  .s-title { font-size: 36px; }
  .s-desc { font-size: 15px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 40px; }
  .comp-cell { font-size: 10px; padding: 8px 5px; }
  .comp-cell.feature { font-size: 9px; }
}

/* ═══════════════════════════════════════
   VIDEO CASE STUDY
═══════════════════════════════════════ */
.video-section {
  background: var(--dark);
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 80px,
    rgba(31,18,245,0.04) 80px,
    rgba(31,18,245,0.04) 81px
  );
}
.video-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.video-left .s-label { color: var(--yellow); }
.video-left .s-label::before { background: var(--blue); }
.video-left .s-title { color: var(--white); }
.video-left .s-title em { color: var(--yellow); }
.video-left .s-desc { color: #8890a0; max-width: 440px; }

.video-quote {
  margin-top: 32px;
  padding: 24px 24px 24px 28px;
  border-left: 4px solid var(--yellow);
  background: rgba(255,255,255,.04);
}
.video-quote p {
  font-size: 16px;
  font-style: italic;
  color: #c8d0dc;
  line-height: 1.7;
  margin-bottom: 14px;
}
.video-quote .v-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v-avatar {
  width: 46px; height: 46px;
  background: var(--blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}
.v-author-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}
.v-author-info span {
  font-size: 12px;
  color: #555a70;
}

.video-right {
  position: relative;
}
.video-frame-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--yellow), 8px 8px 0 var(--blue);
}
.video-frame-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-badge {
  position: absolute;
  top: -14px; right: -14px;
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  z-index: 2;
}

@media (max-width: 960px) {
  .video-inner { grid-template-columns: 1fr; gap: 40px; }
  .video-section { padding: 64px 24px; }
}


/* ═══════════════════════════════════════
   CF7 STYLING
═══════════════════════════════════════ */
.cf7-wrap .wpcf7-form p { margin-bottom: 10px; }
.cf7-wrap .wpcf7-form input[type="text"],
.cf7-wrap .wpcf7-form input[type="tel"],
.cf7-wrap .wpcf7-form input[type="email"],
.cf7-wrap .wpcf7-form select,
.cf7-wrap .wpcf7-form textarea {
  width: 100%;
  border: 2px solid #e0e4ee !important;
  background: #f7f8fc !important;
  color: var(--dark) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .2s;
  margin-bottom: 4px;
}
.cf7-wrap .wpcf7-form input:focus,
.cf7-wrap .wpcf7-form select:focus,
.cf7-wrap .wpcf7-form textarea:focus {
  border-color: var(--blue) !important;
  background: #fff !important;
}
.cf7-wrap .wpcf7-form textarea { height: 80px; resize: none; }
.cf7-wrap .wpcf7-form input[type="submit"] {
  width: 100%;
  background: var(--blue) !important;
  color: var(--white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 15px !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  border-radius: 0 !important;
  transition: background .2s !important;
}
.cf7-wrap .wpcf7-form input[type="submit"]:hover {
  background: var(--blue-dark) !important;
}
.cf7-wrap .wpcf7-not-valid-tip { color: #e53935; font-size: 11px; }
.cf7-wrap .wpcf7-response-output { font-size: 12px; margin-top: 8px; border-radius: 0 !important; }


/* ═══════════════════════════════════════
   PROJECTS SECTION
═══════════════════════════════════════ */
.projects-section {
  background: var(--dark);
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.projects-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 80px,
    rgba(31,18,245,0.04) 80px, rgba(31,18,245,0.04) 81px
  );
}
.projects-section .s-label { color: var(--yellow); }
.projects-section .s-label::before { background: var(--blue); }
.projects-section .s-title { color: var(--white); }
.projects-section .s-title em { color: var(--yellow); }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.project-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.project-card:hover img { transform: scale(1.06); }
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,6,16,.92) 0%, rgba(6,6,16,.2) 60%, transparent 100%);
  transition: background .3s;
}
.project-card:hover .project-overlay {
  background: linear-gradient(to top, rgba(6,6,16,.95) 0%, rgba(6,6,16,.4) 60%, rgba(31,18,245,.15) 100%);
}
.project-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 22px;
}
.project-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--yellow);
  margin-bottom: 6px;
  display: block;
}
.project-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1.1;
  display: block;
}
.project-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-top: 10px;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.project-card:hover .project-tag {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .projects-grid { grid-template-columns: 1fr; }
  .projects-section { padding: 64px 24px; }
}


/* ═══════════════════════════════════════
   FINANCING FIELD (above CF7)
═══════════════════════════════════════ */
.financing-wrap {
  margin-bottom: 12px;
}
.financing-wrap label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.financing-select {
  width: 100%;
  border: 2px solid #e0e4ee;
  background: #f7f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231f12f5' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 13px 40px 13px 14px;
  outline: none;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.financing-select:focus {
  border-color: var(--blue);
  background-color: #fff;
}
.financing-select.selected {
  border-color: var(--blue);
  color: var(--dark);
  font-weight: 600;
}
.financing-select option { font-weight: 400; }
.financing-required {
  color: #e53935;
  font-size: 10px;
  margin-top: 4px;
  display: none;
}
.financing-required.show { display: block; }


/* ═══════════════════════════════════════
   COMPARISON TABLE
═══════════════════════════════════════ */
.comparison-section {
  background: #f4f6fb;
  padding: 96px 40px;
}
.comparison-wrap {
  max-width: 860px;
  margin: 56px auto 0;
  overflow: hidden;
  border: 2px solid #e0e4f0;
  box-shadow: 0 8px 40px rgba(31,18,245,.08);
}
.comp-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--dark);
}
.comp-header-cell {
  padding: 20px 24px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.4);
  border-right: 1px solid rgba(255,255,255,.06);
}
.comp-header-cell:last-child { border-right: none; }
.comp-header-cell.us {
  background: var(--blue);
  color: var(--yellow);
  position: relative;
}
.comp-header-cell.us::after {
  content: 'RECOMANDAT';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--dark);
  font-size: 9px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 3px 10px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.comp-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #e8eaf4;
  transition: background .2s;
}
.comp-row:hover { background: #f0f2fa; }
.comp-row:hover .comp-cell.us-cell { background: rgba(31,18,245,.07); }
.comp-cell {
  padding: 16px 24px;
  text-align: center;
  font-size: 14px;
  color: #5a6370;
  border-right: 1px solid #e8eaf4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.4;
}
.comp-cell:last-child { border-right: none; }
.comp-cell.feature {
  text-align: left;
  justify-content: flex-start;
  font-weight: 600;
  color: var(--dark);
  font-size: 13px;
}
.comp-cell.us-cell {
  background: rgba(31,18,245,.04);
  color: var(--dark);
  font-weight: 700;
  border-right: 1px solid rgba(31,18,245,.1);
}
.check-yes {
  color: #1a9e3f;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
}
.check-no {
  color: #ccd0da;
  font-size: 18px;
  flex-shrink: 0;
}
.check-partial {
  color: #f5a623;
  font-size: 14px;
  font-weight: 700;
}
.comp-footer {
  background: var(--blue);
  padding: 20px 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.comp-footer p {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 500;
}
.comp-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 24px;
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background .2s;
  flex-shrink: 0;
}
.comp-footer a:hover { background: var(--yellow-dark); }

@media (max-width: 640px) {
  .comp-cell { padding: 12px 10px; font-size: 12px; }
  .comp-cell.feature { font-size: 11px; }
  .comp-header-cell { font-size: 14px; padding: 16px 10px; letter-spacing: 1px; }
  .comparison-section { padding: 64px 16px; }
  .comp-footer { flex-direction: column; gap: 12px; }
}


/* ═══════════════════════════════════════
   FINANCING INJECT — above CF7 submit
═══════════════════════════════════════ */
.form-card {
  display: flex;
  flex-direction: column;
}
.form-top-bar { order: 0; }
.form-body.cf7-wrap { order: 1; }
.financing-inject {
  order: 2;
  padding: 0 28px 4px;
  margin-top: -4px;
}
/* Push CF7 submit below financing by making CF7 form flex */
.cf7-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
}
.cf7-wrap .wpcf7-form .wpcf7-submit {
  order: 99;
  margin-top: 0;
}

</style>
</head>
<body>

<!-- ════════════════════════════════════
     HERO
════════════════════════════════════ -->
<section class="hero">
  <div class="hero-photo"></div>
  <div class="hero-stripes"></div>
  <div class="hero-field-lines"></div>
  <div class="hero-accent"></div>
  <div class="hero-accent-2"></div>

  <!-- decorative pitch SVG -->
  <svg class="hero-pitch" viewBox="0 0 500 320" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="480" height="300" stroke="white" stroke-width="2"/>
    <line x1="250" y1="10" x2="250" y2="310" stroke="white" stroke-width="2"/>
    <circle cx="250" cy="160" r="50" stroke="white" stroke-width="2"/>
    <rect x="10" y="100" width="80" height="120" stroke="white" stroke-width="2"/>
    <rect x="410" y="100" width="80" height="120" stroke="white" stroke-width="2"/>
    <rect x="10" y="130" width="30" height="60" stroke="white" stroke-width="2"/>
    <rect x="460" y="130" width="30" height="60" stroke="white" stroke-width="2"/>
    <circle cx="10" cy="160" r="5" fill="white"/>
    <circle cx="490" cy="160" r="5" fill="white"/>
    <circle cx="250" cy="160" r="5" fill="white"/>
  </svg>

  <div class="hero-inner">
    <!-- LEFT -->
    <div class="hero-left">
      <div class="hero-eyebrow reveal">
        <div class="eyebrow-line"></div>
        <span class="eyebrow-text">Arena Systems · Lider în România</span>
      </div>

      <h1 class="reveal reveal-delay-1">
        GAZON
        <span class="accent-word">SINTETIC</span>
        <span class="stroke-word">FOTBAL</span>
      </h1>

      <div class="hero-divider reveal reveal-delay-2"></div>

      <p class="hero-sub reveal reveal-delay-2">
        Montaj profesionist <strong>la cheie în toată România</strong> — terasament, drenaj, gazon, marcaje, porți. Standarde <strong>UEFA & FIFA</strong>, eligibil omologare FRF.
      </p>

      <div class="trust-pills reveal reveal-delay-3">
        <div class="pill">Standarde UEFA &amp; FIFA</div>
        <div class="pill yellow-pill"> 8000+ clienți</div>
        <div class="pill"> Proiecte CNI</div>
      </div>

      <div class="hero-ctas reveal reveal-delay-4">
        <a href="#oferta" class="btn-hero-primary">Solicită Ofertă</a>
        <a href="tel:0743559963" class="btn-hero-secondary">0743 559 963</a>
      </div>

      <div class="hero-urgency reveal reveal-delay-4">
        <div class="blink-dot"></div>
        <span>Suntem la dispoziția ta în zilele lucrătoare</span>
      </div>
    </div>

    <!-- FORM CARD -->
    <div class="form-card reveal reveal-delay-2" id="oferta">
      <div class="form-top-bar">
        <h3>CERE OFERTĂ</h3>
        
      </div>

      <div class="form-body cf7-wrap">
        [contact-form-7 id="f6034c2" title="Formular Gazon Sintetic"]
        <div class="form-trust-row" style="margin-top:12px;">Datele tale sunt 100% confidențiale</div>
      </div>

      <div class="financing-inject">
        <div class="financing-wrap">
          <label>Sursa de finanțare <span style="color:#e53935">*</span></label>
          <select class="financing-select" id="financing-select" onchange="selectFinancing(this)" required>
            <option value="" disabled selected>Selectează sursa de finanțare</option>
            <option value="fonduri-proprii">Fonduri proprii</option>
            <option value="cni">CNI — Compania Națională de Investiții</option>
            <option value="pnrr">Fonduri europene (PNRR / POR)</option>
            <option value="buget-local">Buget local / Primărie</option>
            <option value="credit">Credit bancar</option>
            <option value="alta">Altă sursă</option>
          </select>
          <div class="financing-required" id="fin-required">Te rugăm să selectezi sursa de finanțare.</div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     LOGOS
════════════════════════════════════ -->
<div class="logos-strip">
  <div class="logos-label">Au încredere în noi</div>
  <div class="logos-track-wrap">
    <div class="logos-track">
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2025/04/Federatia_Romana_de_Fotbal_logo.svg-min.png" alt="FRF"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-1-min-1.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-3-min.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-2-min.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/3.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-1-min.png" alt="Client"></div>
      <!-- duplicate for infinite scroll -->
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2025/04/Federatia_Romana_de_Fotbal_logo.svg-min.png" alt="FRF"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-1-min-1.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-3-min.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-2-min.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/3.png" alt="Client"></div>
      <div class="logo-item"><img src="https://arenasystems.ro/wp-content/uploads/2024/05/Untitled-design-1-min.png" alt="Client"></div>
    </div>
  </div>
</div>


<!-- ════════════════════════════════════
     STATS
════════════════════════════════════ -->
<div class="stats-bar">
  <div class="stats-inner">
    <div class="stat-block reveal">
      <span class="stat-num">8000+</span>
      <span class="stat-label">Clienți Mulțumiți</span>
    </div>
    <div class="stat-block reveal reveal-delay-1">
      <span class="stat-num">14+</span>
      <span class="stat-label">Ani de Experiență</span>
    </div>
    <div class="stat-block reveal reveal-delay-2">
      <span class="stat-num">100+</span>
      <span class="stat-label">Proiecte Finalizate</span>
    </div>
    <div class="stat-block reveal reveal-delay-3">
      <span class="stat-num">UEFA</span>
      <span class="stat-label">&amp; FIFA Standarde</span>
    </div>
  </div>
</div>


<!-- ════════════════════════════════════
     WHY ARENA SYSTEMS
════════════════════════════════════ -->
<section class="why-section">
  <div class="container">
    <div class="s-label reveal">De ce Arena Systems</div>
    <h2 class="s-title reveal">MAI BUNI. <em>MAI RAPIZI.</em><br>MAI DE ÎNCREDERE.</h2>
    <p class="s-desc reveal">Nu vindem gazon. Construim terenuri pe care se joacă fotbal la nivel înalt. Fiecare proiect e unic — și îl tratăm ca atare.</p>

    <div class="why-grid">
      <div class="why-card reveal">
        <div class="why-num">01</div>
        <div class="why-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <h4>Standarde UEFA & FIFA</h4>
        <p>Gazonul nostru respectă cerințele FIFA Quality Pro și UEFA. Terenul tău poate fi omologat în sistemul FRF pentru competiții oficiale.</p>
      </div>
      <div class="why-card reveal reveal-delay-1">
        <div class="why-num">02</div>
        <div class="why-icon"></div>
        <h4>Proiect la cheie</h4>
        <p>Un singur contract, un singur interlocutor: terasament, drenaj, gazon, marcaje, porți, împrejmuire. Fără surprize la final de lucrare.</p>
      </div>
      <div class="why-card reveal reveal-delay-2">
        <div class="why-num">03</div>
        <div class="why-icon"></div>
        <h4>Documentație CNI & EU</h4>
        <p>Finanțare CNI sau fonduri europene? Asigurăm toată documentația tehnică necesară dosarului. Zeci de proiecte publice finalizate.</p>
      </div>
      <div class="why-card reveal reveal-delay-1">
        <div class="why-num">04</div>
        <div class="why-icon"></div>
        <h4>Garanție extinsă</h4>
        <p>Garanție pentru materiale și manoperă. În perioada de garanție, orice intervenție se face fără costuri suplimentare pentru tine.</p>
      </div>
      <div class="why-card reveal reveal-delay-2">
        <div class="why-num">05</div>
        <div class="why-icon"></div>
        <h4>Toată România</h4>
        <p>Echipele noastre tehnice sunt active în toate județele. Planificăm logistica complet — tu nu te ocupi de nimic în afara contractului.</p>
      </div>
      <div class="why-card reveal reveal-delay-3">
        <div class="why-num">06</div>
        <div class="why-icon"></div>
        <h4>Consultanță tehnică gratuită</h4>
        <p>Analizăm terenul tău — sol, utilizare estimată, buget disponibil — înainte de orice ofertă. Nu vindem fără să înțelegem proiectul.</p>
      </div>
    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     COMPARISON TABLE
════════════════════════════════════ -->
<section class="comparison-section">
  <div class="container">
    <div class="s-label reveal">De ce noi</div>
    <h2 class="s-title reveal">ARENA SYSTEMS<br><em>VS COMPETIȚIA</em></h2>
    <p class="s-desc reveal">Nu toate companiile sunt la fel. Iată ce ne diferențiază concret.</p>

    <div class="comparison-wrap reveal">

      <!-- HEADER -->
      <div class="comp-header">
        <div class="comp-header-cell">CRITERIU</div>
        <div class="comp-header-cell us">ARENA SYSTEMS</div>
        <div class="comp-header-cell">ALȚI FURNIZORI</div>
      </div>

      <!-- ROWS -->
      <div class="comp-row">
        <div class="comp-cell feature">Certificare UEFA &amp; FIFA</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Da, inclusă</div>
        <div class="comp-cell"><span class="check-partial">~</span> Parțial</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Proiect la cheie (terasament + gazon + marcaje)</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Complet</div>
        <div class="comp-cell"><span class="check-no">✗</span> Subcontractezi separat</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Documentație CNI / fonduri europene</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Experiență dovedită</div>
        <div class="comp-cell"><span class="check-partial">~</span> Limitat</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Consultanță tehnică gratuită</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Înainte de orice ofertă</div>
        <div class="comp-cell"><span class="check-no">✗</span> Direct ofertă comercială</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Garanție extinsă manoperă + materiale</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Inclusă în contract</div>
        <div class="comp-cell"><span class="check-partial">~</span> Doar materiale</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Instalare în toată România</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Toate județele</div>
        <div class="comp-cell"><span class="check-partial">~</span> Zone limitate</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Ani de experiență</div>
        <div class="comp-cell us-cell"><span class="check-yes">14+</span> ani în piață</div>
        <div class="comp-cell"><span class="check-partial">2–5</span> ani medie</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Proiecte finalizate</div>
        <div class="comp-cell us-cell"><span class="check-yes">100+</span> proiecte</div>
        <div class="comp-cell"><span class="check-partial">~20–30</span> proiecte</div>
      </div>

      <div class="comp-row">
        <div class="comp-cell feature">Răspuns la cerere de ofertă</div>
        <div class="comp-cell us-cell"><span class="check-yes">✓</span> Același zi</div>
        <div class="comp-cell"><span class="check-partial">3–5</span> zile lucrătoare</div>
      </div>

      <!-- FOOTER CTA -->
      <div class="comp-footer">
        <p>Convins? Hai să discutăm despre proiectul tău.</p>
        <a href="#oferta">Cere Ofertă Acum</a>
      </div>

    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     PROCESS + CTA SPLIT
════════════════════════════════════ -->
<div class="split-cta">
  <div class="split-cta-inner">
    <div class="split-left">
      <h2>GATA SĂ ÎNCEPI<br><span>PROIECTUL?</span></h2>
      <p>Solicită o discuție tehnică gratuită. Îți oferim o analiză sinceră a proiectului tău — indiferent dacă ai sau nu buget stabilit.</p>
      <a href="#oferta" class="btn-split">Cere Ofertă →</a>
    </div>
    <div class="split-right">
      <div class="process-steps-v">
        <div class="pstep reveal">
          <div class="pstep-num">01</div>
          <div class="pstep-content">
            <h5>Consultanță gratuită</h5>
            <p>Discuție tehnică fără angajamente. Analizăm proiectul tău și îți oferim recomandări.</p>
          </div>
        </div>
        <div class="pstep-divider"></div>
        <div class="pstep reveal reveal-delay-1">
          <div class="pstep-num">02</div>
          <div class="pstep-content">
            <h5>Ofertă personalizată</h5>
            <p>Deviz detaliat cu materiale, manoperă, termene. Zero costuri ascunse.</p>
          </div>
        </div>
        <div class="pstep-divider"></div>
        <div class="pstep reveal reveal-delay-2">
          <div class="pstep-num">03</div>
          <div class="pstep-content">
            <h5>Montaj profesionist</h5>
            <p>Echipa noastră execută totul la cheie: de la terasament până la marcaje finale.</p>
          </div>
        </div>
        <div class="pstep-divider"></div>
        <div class="pstep reveal reveal-delay-3">
          <div class="pstep-num">04</div>
          <div class="pstep-content">
            <h5>Predare & garanție</h5>
            <p>Teren gata de joc, documentație completă, garanție extinsă. Suntem disponibili și după.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- ════════════════════════════════════
     SPECS & CERTIFICATIONS
════════════════════════════════════ -->
<section class="specs-section">
  <div class="container">
    <div class="s-label reveal">Specificații tehnice</div>
    <h2 class="s-title reveal">GAZON DE<br><em>PERFORMANȚĂ</em></h2>

    <div class="specs-layout">
      <div class="reveal">
        <div class="spec-table">
          <div class="spec-row">
            <div class="spec-key">Înălțime fibră</div>
            <div class="spec-val blue">40 – 60 mm</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Tip fibră</div>
            <div class="spec-val">Monofilament / Texturat</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Densitate</div>
            <div class="spec-val blue">10.000 – 16.000 fire/m²</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Umplutură</div>
            <div class="spec-val">Cauciuc SBH + Nisip silicic</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Utilizare</div>
            <div class="spec-val blue">5v5 · 7v7 · 11v11</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Durabilitate</div>
            <div class="spec-val">8 – 12 ani (uz intensiv)</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Drenaj</div>
            <div class="spec-val blue">&gt; 30 l/m²/oră</div>
          </div>
          <div class="spec-row">
            <div class="spec-key">Instalare</div>
            <div class="spec-val">5 – 15 zile lucrătoare</div>
          </div>
        </div>
      </div>

      <div>
        <div class="cert-cards">
          <div class="cert-card reveal">
            <div class="cert-badge">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
            </div>
            <div>
              <h5>FIFA Quality Pro</h5>
              <p>Standard maxim FIFA — eligibil pentru competiții naționale și internaționale.</p>
            </div>
          </div>
          <div class="cert-card reveal reveal-delay-1">
            <div class="cert-badge">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div>
              <h5>UEFA Infrastructure</h5>
              <p>Conform cerințelor UEFA pentru infrastructura terenurilor sportive.</p>
            </div>
          </div>
          <div class="cert-card reveal reveal-delay-2">
            <div class="cert-badge">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div>
              <h5>Eligibil Omologare FRF</h5>
              <p>Terenul tău poate găzdui meciuri oficiale în sistemul competițional românesc.</p>
            </div>
          </div>
          <div class="cert-card reveal reveal-delay-3">
            <div class="cert-badge">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div>
              <h5>Documentație Completă</h5>
              <p>Agremente, fișe tehnice, certificate — incluse. Proiecte CNI și EU acceptate.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     TESTIMONIAL
════════════════════════════════════ -->
<div class="testimonial-section">
  <div class="testimonial-wrap">
    <div class="testimonial-photo-side reveal">
      <div class="photo-frame" style="background:none; overflow:hidden;">
        <img src="https://arenasystems.ro/wp-content/uploads/2025/02/Untitled-design-24-min-1.png" alt="Traian Hăran" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
      </div>
      <div class="photo-name">Traian Hăran</div>
      <div class="photo-role">Specialist Vânzări · Arena Systems</div>
      <div class="photo-stars">★★★★★</div>
    </div>
    <div class="testimonial-text-side reveal reveal-delay-1">
      <div class="quote-mark-big">"</div>
      <p class="testimonial-quote">
        Amenajarea unui teren de fotbal nu înseamnă doar gazon și marcaje. Înseamnă o <strong>fundație corectă</strong>, un <strong>sistem de drenaj bine dimensionat</strong> și un gazon ales în funcție de intensitatea utilizării. Am livrat terenuri pentru cluburi de fotbal, școli și investitori privați — și știu că fiecare proiect are provocările lui. De aceea, primul pas e întotdeauna o <strong>discuție tehnică sinceră</strong>, înainte de orice ofertă.
      </p>
    </div>
  </div>
</div>




<!-- ════════════════════════════════════
     PROJECTS
════════════════════════════════════ -->
<section class="projects-section">
  <div class="container" style="position:relative;z-index:1;">
    <div class="s-label reveal">Proiecte realizate</div>
    <h2 class="s-title reveal">TERENURI CONSTRUITE<br><em>DE NOI</em></h2>

    <div class="projects-grid">

      <a class="project-card reveal" href="https://arenasystems.ro/portofoliu/maxmayer-reghin/" target="_blank" rel="noopener">
        <img src="https://arenasystems.ro/wp-content/uploads/2026/03/DJI_0657-1.jpg" alt="Baza Sportivă Reghin" loading="lazy">
        <div class="project-overlay"></div>
        <div class="project-info">
          <span class="project-num">PROIECT 01</span>
          <span class="project-name">Baza Sportivă<br>Reghin</span>
          <div class="project-tag">Află mai multe →</div>
        </div>
      </a>

      <a class="project-card reveal reveal-delay-1" href="https://arenasystems.ro/portofoliu/scoala-gherla/" target="_blank" rel="noopener">
        <img src="https://arenasystems.ro/wp-content/uploads/2026/03/FPS-Arena-Scoala-Gherla-122-1.jpg" alt="Teren Multisport Școală Gherla" loading="lazy">
        <div class="project-overlay"></div>
        <div class="project-info">
          <span class="project-num">PROIECT 02</span>
          <span class="project-name">Teren Multisport<br>Școală Gherla</span>
          <div class="project-tag">Află mai multe →</div>
        </div>
      </a>

            <a class="project-card reveal reveal-delay-2" href="https://arenasystems.ro/portofoliu/baza-sportiva-blaj/" target="_blank" rel="noopener">
        <img src="https://arenasystems.ro/wp-content/uploads/2026/03/IMG_3334-1-1.jpg" alt="Bază Sportivă Blaj" loading="lazy">
        <div class="project-overlay"></div>
        <div class="project-info">
          <span class="project-num">PROIECT 03</span>
          <span class="project-name">Bază Sportivă<br>Blaj</span>
          <div class="project-tag">Află mai multe →</div>
        </div>
      </a>

    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     VIDEO CASE STUDY
════════════════════════════════════ -->
<section class="video-section">
  <div class="video-inner">
    <div class="video-left">
      <div class="s-label reveal">Studiu de caz real</div>
      <h2 class="s-title reveal">CUM AM AMENAJAT<br><em>DOUĂ TERENURI</em><br>PENTRU O ȘCOALĂ</h2>
      <p class="s-desc reveal">Proiectul din Gherla — două terenuri de sport realizate pentru o școală, cu fonduri CNI. Primarul orașului explică în detaliu cum a decurs colaborarea cu Arena Systems.</p>

      <div class="video-quote reveal reveal-delay-1">
        <p>„Arena Systems a livrat exact ce a promis — calitate, respectarea termenelor și suport complet pentru documentație. Suntem foarte mulțumiți de rezultat."</p>
        <div class="v-author">
          <div class="v-avatar">DO</div>
          <div class="v-author-info">
            <strong>Dl. Drăgan Ovidiu</strong>
            <span>Primar · Orașul Gherla</span>
          </div>
        </div>
      </div>
    </div>

    <div class="video-right reveal reveal-delay-2">
      <div class="video-badge">▶ STUDIU DE CAZ</div>
      <div class="video-frame-wrap">
        <iframe
          src="https://www.youtube.com/embed/cP4gKh8Bwzg?rel=0&modestbranding=1"
          title="Cum am amenajat două terenuri pentru școala din Gherla — Arena Systems"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>
    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     FAQ
════════════════════════════════════ -->
<section class="faq-section">
  <div class="container">
    <div class="faq-layout">
      <div class="faq-left reveal">
        <div class="s-label">Ai întrebări?</div>
        <h2 class="s-title">AVEM<br><em>RĂSPUNSURI.</em></h2>
        <p class="s-desc">Cele mai frecvente întrebări pe care le primim de la investitori, primării și cluburi de fotbal.</p>
        <a href="#oferta" class="cta-faq">Cere ofertă →</a>
      </div>
      <div class="faq-list reveal reveal-delay-1">
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Cât costă un teren de fotbal cu gazon sintetic?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">Prețul variază în funcție de dimensiuni, tipul de gazon și lucrările de terasament. Oferim ofertă personalizată după o discuție tehnică gratuită — fără costuri ascunse și fără angajamente.</div>
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Cât durează instalarea unui teren de fotbal?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">În funcție de dimensiuni și condițiile terenului, montajul durează 5–15 zile lucrătoare. Primești un calendar detaliat înainte de semnarea contractului.</div>
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Gazonul poate fi omologat pentru competiții FRF?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">Da. Furnizăm gazon conform standardelor FIFA Quality Pro și UEFA, eligibil pentru omologare FRF. Asigurăm și documentația tehnică necesară dosarului de omologare.</div>
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Puteți ajuta cu proiecte finanțate CNI sau fonduri europene?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">Da, avem experiență extinsă în proiecte CNI și europene. Furnizăm documentația tehnică completă: fișe tehnice, agremente, devize conform cerințelor finanțatorului.</div>
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Ce include garanția Arena Systems?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">Garanție extinsă pentru materiale și manoperă. În perioada de garanție, orice intervenție tehnică se face fără costuri suplimentare — transparent și fără surprize.</div>
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFAQ(this)">
            Montați și în localitățile mici sau rurale?
            <span class="arrow">+</span>
          </button>
          <div class="faq-a">
            <div class="faq-a-inner">Da, operăm în toată România — indiferent de județ sau localitate. Echipele noastre tehnice ajung oriunde și gestionăm logistica complet.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- ════════════════════════════════════
     FINAL CTA
════════════════════════════════════ -->
<div class="final-cta">
  <div class="final-cta-inner">
    <div>
      <h2>CONSTRUIEȘTE TERENUL<br><span>PERFECT</span> ACUM.</h2>
      <p>Fără angajamente · Răspuns rapid · Toată România</p>
    </div>
    <div class="final-cta-btns">
      <a href="#oferta" class="btn-dark">Solicită Ofertă</a>
      <a href="tel:0743559963" class="btn-phone-big">0743 559 963</a>
    </div>
  </div>
</div>


<!-- ════════════════════════════════════
     FLOATING BAR
════════════════════════════════════ -->
<div class="float-bar">
  <a href="tel:0743559963" class="float-phone">
    <div class="ph-icon"></div>
    <span class="label">0743 559 963</span>
  </a>
  <a href="#oferta" class="float-cta">CERE OFERTĂ →</a>
</div>


<script>
// Financing select
function selectFinancing(sel) {
  sel.classList.add('selected');
  document.getElementById('fin-required').classList.remove('show');
}

// FAQ toggle
function toggleFAQ(btn) {
  const item = btn.parentElement;
  const isOpen = item.classList.contains('open');
  document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
  if (!isOpen) item.classList.add('open');
}

// Form submit
function handleSubmit() {
  const name = document.getElementById('f-name').value.trim();
  const phone = document.getElementById('f-phone').value.trim();
  if (!name || !phone) {
    document.getElementById('f-name').style.borderColor = name ? '#e0e4ee' : '#f04040';
    document.getElementById('f-phone').style.borderColor = phone ? '#e0e4ee' : '#f04040';
    return;
  }
  document.getElementById('form-body').style.display = 'none';
  document.getElementById('success-state').style.display = 'block';
}

// Scroll reveal
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      obs.unobserve(e.target);
    }
  });
}, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });

document.querySelectorAll('.reveal').forEach(el => obs.observe(el));

// Bottom bar padding for body
document.body.style.paddingBottom = '64px';
</script>
</body>
</html>/* End custom CSS */