* { box-sizing: border-box; }

body {

  font-family: 'Inter', sans-serif;

  background: #f5f7f5;

  color: #1a1a1a;

  margin: 0; padding: 0;

}

/* ══════════════════════════════

   HERO SECTION

══════════════════════════════ */

.lp-hero {

  width: 100%;

  min-height: 100vh;

  background: #ffffff;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

}

.lp-hero::before {

  content: '';

  position: absolute;

  top: -120px; right: -120px;

  width: 500px; height: 500px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(26,158,92,0.07) 0%, transparent 70%);

  pointer-events: none;

}

.lp-hero::after {

  content: '';

  position: absolute;

  bottom: -80px; left: -80px;

  width: 380px; height: 380px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(108,63,197,0.05) 0%, transparent 70%);

  pointer-events: none;

}



.hero-inner {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 80px 40px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

  align-items: center;

  position: relative;

  z-index: 1;

}



/* ── LEFT TEXT ── */

.hero-pill {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  background: #e6f7ef;

  color: #0f6e3e;

  font-size: 12px;

  font-weight: 700;

  padding: 6px 16px;

  border-radius: 30px;

  border: 1px solid rgba(26,158,92,0.2);

  margin-bottom: 22px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.hero-pill .dot {

  width: 7px; height: 7px;

  background: #1a9e5c; border-radius: 50%;

  animation: blink 1.8s ease-in-out infinite;

}

@keyframes blink {

  0%,100% { opacity:1; transform:scale(1); }

  50%      { opacity:0.4; transform:scale(0.65); }

}



.hero-h1 {

  font-size: 46px;

  font-weight: 800;

  color: #111;

  line-height: 1.15;

  letter-spacing: -1px;

  margin-bottom: 18px;

}

.hero-h1 .hl { color: #1a9e5c; }



.hero-desc {

  font-size: 16px;

  color: #666;

  line-height: 1.78;

  margin-bottom: 32px;

  max-width: 460px;

}



.hero-stats {

  display: flex;

  gap: 24px;

  margin-bottom: 36px;

  flex-wrap: wrap;

}

.stat-item { display:flex; flex-direction:column; gap:3px; }

.stat-num  { font-size:22px; font-weight:800; color:#1a1a1a; line-height:1; }

.stat-lbl  { font-size:11px; color:#999; font-weight:500; }

.stat-sep  { width:1px; background:rgba(0,0,0,.10); align-self:stretch; margin:4px 0; }



.hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }



.btn-book {

  display:inline-flex; align-items:center; gap:8px;

  background:#1a9e5c; color:#fff; border:none; border-radius:50rem;

  padding:14px 28px; font-size:15px; font-weight:700;

  cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif;

  box-shadow:0 4px 18px rgba(26,158,92,.30);

  transition:background .2s, transform .15s, box-shadow .2s;

}

.btn-book:hover { background:#0f6e3e; color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,158,92,.38); }

.btn-book svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; }



.btn-services {

  display:inline-flex; align-items:center; gap:7px;

  background:#fff; color:#333;

  border:1.5px solid rgba(0,0,0,.12); border-radius:12px;

  padding:13px 24px; font-size:14px; font-weight:600;

  cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif;

  transition:border-color .2s, background .2s, color .2s;

}

.btn-services:hover { border-color:#1a9e5c; background:#f0fdf7; color:#0f6e3e; }

.btn-services svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; }



.hero-trust {

  display:flex; align-items:center; gap:14px;

  margin-top:26px; flex-wrap:wrap;

}

.trust-item { display:flex; align-items:center; gap:5px; font-size:12px; color:#777; font-weight:500; }

.trust-item svg { width:13px; height:13px; stroke:#1a9e5c; fill:none; stroke-width:2.5; stroke-linecap:round; }

.trust-dot { width:4px; height:4px; background:#ddd; border-radius:50%; }



/* ══ RIGHT: VIDEO ══ */

.hero-right { position:relative; }



.video-outer {

  position: relative;

  /* Portrait container — matches 1080×1440 (3:4) source */

  width: 100%;

  max-width: 340px;

  margin: 0 auto;

}



/* Decorative green card behind */

.video-deco {

  position: absolute;

  bottom: -14px; right: -14px;

  width: 100%; height: 100%;

  background: #e6f7ef;

  border-radius: 24px;

  border: 1px solid rgba(26,158,92,0.18);

  z-index: 0;

}



/* Main card — 3:4 portrait ratio */

.video-card {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  background: #111;

  box-shadow: 0 20px 56px rgba(0,0,0,0.18);

  aspect-ratio: 3 / 4;

  cursor: pointer;

  z-index: 1;

}



/* Thumbnail — only thing loaded on page load */

.video-thumb {

  position: absolute;

  inset: 0;

  width: 100%; height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

  transition: transform .4s ease, filter .3s ease;

}

.video-card:hover .video-thumb {

  transform: scale(1.04);

  filter: brightness(0.82);

}



/* Gradient overlay on thumb */

.video-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(0,0,0,0.65) 0%,

    rgba(0,0,0,0.06) 48%,

    rgba(0,0,0,0.18) 100%

  );

  transition: background .3s;

}

.video-card:hover .video-overlay {

  background: linear-gradient(

    to top,

    rgba(0,0,0,0.72) 0%,

    rgba(0,0,0,0.14) 48%,

    rgba(0,0,0,0.26) 100%

  );

}



/* "Our Work" badge */

.video-badge {

  position: absolute;

  top: 14px; left: 14px;

  background: #1a9e5c;

  color: #fff;

  font-size: 10px; font-weight: 700;

  padding: 4px 12px; border-radius: 20px;

  text-transform: uppercase; letter-spacing: .5px;

  z-index: 4;

  display: flex; align-items: center; gap: 5px;

}

.video-badge .dot {

  width: 6px; height: 6px;

  background: #fff; border-radius: 50%;

  animation: blink 1.8s ease-in-out infinite;

}



/* ── Play Button ── */

.play-btn {

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  width: 74px; height: 74px;

  background: rgba(255,255,255,0.95);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 8px 32px rgba(0,0,0,0.28);

  z-index: 4;

  transition: transform .25s cubic-bezier(0.175,0.885,0.32,1.275), background .2s, box-shadow .2s;

}

/* Pulsing outer ring */

.play-btn::before {

  content: '';

  position: absolute;

  inset: -10px;

  border-radius: 50%;

  border: 2.5px solid rgba(255,255,255,.4);

  animation: ringPulse 2.4s ease-in-out infinite;

}

@keyframes ringPulse {

  0%,100% { transform:scale(1);   opacity:.65; }

  50%      { transform:scale(1.24); opacity:0; }

}

.play-btn svg {

  width: 30px; height: 30px;

  fill: #1a9e5c;

  margin-left: 5px; /* optical center */

}

.video-card:hover .play-btn {

  transform: translate(-50%,-50%) scale(1.13);

  box-shadow: 0 14px 44px rgba(0,0,0,.32);

}



/* Bottom label strip */

.video-label {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 18px 18px 14px;

  z-index: 4;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 8px;

}

.vl-title { font-size:13px; font-weight:700; color:#fff; margin-bottom:2px; }

.vl-sub   { font-size:11px; color:rgba(255,255,255,.72); }

.vl-dur {

  background: rgba(0,0,0,.55);

  color: #fff; font-size:11px; font-weight:600;

  padding: 3px 9px; border-radius:7px;

  border: 1px solid rgba(255,255,255,.15);

  white-space: nowrap; align-self: flex-end;

  flex-shrink: 0;

}



/* ── VIDEO PLAYER — hidden until play clicked ── */

.video-player-wrap {

  display: none;

  position: absolute;

  inset: 0; z-index: 10;

}

.video-player-wrap video {

  width: 100%; height: 100%;

  object-fit: cover;

  background: #000;

}

.video-player-wrap.active { display: block; }



/* Close button */

.video-close {

  display: none;

  position: absolute;

  top: 12px; right: 12px;

  width: 36px; height: 36px;

  background: rgba(0,0,0,.62);

  border: 1.5px solid rgba(255,255,255,.28);

  border-radius: 50%;

  align-items: center; justify-content: center;

  cursor: pointer; z-index: 12;

  transition: background .2s;

}

.video-close.active { display: flex; }

.video-close:hover  { background: rgba(0,0,0,.88); }

.video-close svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; }



/* ══════════════════════════════

   RESPONSIVE

══════════════════════════════ */



/* Tablet — 768px to 991px */

@media (max-width: 991px) {

  .hero-inner {

    grid-template-columns: 1fr;

    gap: 48px;

    padding: 60px 32px;

    text-align: center;

  }

  .hero-desc    { max-width: 100%; margin-left:auto; margin-right:auto; }

  .hero-stats   { justify-content: center; }

  .hero-cta     { justify-content: center; }

  .hero-trust   { justify-content: center; }

  .hero-h1      { font-size: 36px; }

  .video-deco   { display: none; }

  .video-outer  { max-width: 320px; }

  .lp-hero      { min-height: auto; padding: 20px 0; }

  /* Stack: video comes FIRST on tablet/mobile for visual impact */

  .hero-left    { order: 2; }

  .hero-right   { order: 1; }

}



/* Mobile large — 600px */

@media (max-width: 600px) {

  .hero-inner   { padding: 44px 20px; gap: 36px; }

  .hero-h1      { font-size: 28px; letter-spacing: -.4px; }

  .hero-desc    { font-size: 14px; }

  .video-outer  { max-width: 280px; }

  .btn-book     { padding: 12px 22px; font-size: 14px; }

  .btn-services { padding: 11px 18px; font-size: 13px; }

}



/* Mobile small — 400px */

@media (max-width: 400px) {

  .hero-inner   { padding: 36px 14px; }

  .hero-h1      { font-size: 24px; }

  .video-outer  { max-width: 280px; }

  .play-btn     { width: 60px; height: 60px; }

  .play-btn svg { width: 24px; height: 24px; }

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

  .btn-book, .btn-services { width: 100%; justify-content: center; }

}