:root {
  --teal: #5bb8b0;
  --teal-light: #c8ebe8;
  --teal-dark: #3a8f88;
  --purple: #7b5ea7;
  --purple-light: #e8e2f5;
  --pink: #e84393;
  --pink-soft: #fce7f3;
  --grad: linear-gradient(135deg, #5bb8b0 0%, #7b5ea7 55%, #e84393 100%);
  --grad-btn: linear-gradient(90deg, #7b5ea7 0%, #e84393 100%);
  --grad-warm: linear-gradient(135deg, #fff8f0 0%, #fce7f3 50%, #ede9f8 100%);
  --cream: #fdf8f3;
  --warm: #fff4ed;
  --white: #ffffff;
  --text: #1c1520;
  --text2: #3d2b4a;
  --muted: #7a6b82;
  --border: rgba(123,94,167,0.12);
  --border2: rgba(232,67,147,0.15);
}

*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;}

body {font-family: 'Outfit', sans-serif;
background: var(--cream);
color: var(--text);
overflow-x: hidden;}

/* ═══ CUSTOM CURSOR ═══ */
*, a, button {cursor: none !important;}
#cursor {position: fixed;
width: 12px;
height: 12px;
background: var(--pink);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease, background 0.2s;
transform: translate(-50%, -50%);}
#cursor-ring {position: fixed;
width: 36px;
height: 36px;
border: 1.5px solid var(--purple);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transition: transform 0.35s ease, width 0.3s, height 0.3s;
transform: translate(-50%, -50%);
opacity: 0.6;}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring {width: 52px;height: 52px;opacity: 1;}

/* ═══ HERO ═══ */
.hero {min-height: 100vh;
background: var(--cream);
display: grid;
grid-template-columns: 55% 45%;
position: relative;
overflow: hidden;}

/* organic blob bg */
.hero::before {content: '';
position: absolute;
top: -200px;
right: -100px;
width: 700px;
height: 700px;
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
background: linear-gradient(135deg, rgba(91,184,176,0.1) 0%, rgba(123,94,167,0.08) 100%);
animation: morph 10s ease-in-out infinite;
pointer-events: none;}

.hero::after {content: '';
position: absolute;
bottom: -150px;
left: -100px;
width: 500px;
height: 500px;
border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
background: linear-gradient(135deg, rgba(232,67,147,0.07) 0%, rgba(123,94,167,0.05) 100%);
animation: morph 12s 3s ease-in-out infinite reverse;
pointer-events: none;}

@keyframes morph {
  0%,100% {border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;}
  33%      {border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;}
  66%      {border-radius: 70% 30% 50% 50% / 30% 70% 30% 70%;}
}

.hero-left {display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem 4rem 5rem 7rem;
position: relative;
z-index: 2;}

.eyebrow {display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 1.8rem;
opacity: 0;
animation: fadeUp 0.7s 0.1s ease forwards;}

.eyebrow-line {width: 40px;
height: 1px;
background: var(--grad-btn);}

.eyebrow-text {font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--grad-btn);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;}

.hero-title {font-family: 'Cormorant Garamond', serif;
font-size: clamp(3.5rem, 5.5vw, 6.5rem);
font-weight: 300;
line-height: 1.0;
letter-spacing: -0.01em;
margin-bottom: 1.6rem;
opacity: 0;
animation: fadeUp 0.8s 0.2s ease forwards;}

.hero-title strong {font-weight: 700;
display: block;}

.hero-title .italic-accent {font-style: italic;
font-weight: 300;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;}

.hero-desc {font-size: 1.05rem;
color: var(--muted);
line-height: 1.8;
max-width: 430px;
margin-bottom: 2.5rem;
font-weight: 300;
opacity: 0;
animation: fadeUp 0.8s 0.35s ease forwards;}

.hero-actions {display: flex;
align-items: center;
gap: 1.2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.8s 0.45s ease forwards;}

.btn-grad {background: var(--grad-btn);
color: white !important;
padding: 15px 32px;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border: none;
font-family: 'Outfit', sans-serif;
transition: transform 0.25s, box-shadow 0.25s;
box-shadow: 0 6px 24px rgba(123,94,167,0.35);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.01em;}

.btn-grad:hover {transform: translateY(-3px);box-shadow: 0 12px 36px rgba(123,94,167,0.4);}

.btn-text {color: var(--purple);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s;}

.btn-text:hover {gap: 12px;}

.hero-pills {display: flex;
gap: 10px;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.8s 0.55s ease forwards;}

.pill {display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: 100px;
font-size: 0.78rem;
font-weight: 500;
background: white;
border: 1px solid var(--border);
color: var(--text2);
box-shadow: 0 2px 12px rgba(123,94,167,0.06);}

.pill-dot {width: 6px;
height: 6px;
border-radius: 50%;
background: var(--grad-btn);
flex-shrink: 0;}

/* Hero Right — image collage */
.hero-right {position: relative;
overflow: visible;
z-index: 2;}

.collage {position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;}

.img-main {position: absolute;
width: 340px;
height: 440px;
object-fit: cover;
border-radius: 40px 40px 40px 8px;
top: 50%;
left: 50%;
transform: translate(-60%, -50%);
box-shadow: 0 30px 80px rgba(28,21,32,0.18);
opacity: 0;
animation: fadeScale 0.9s 0.3s ease forwards;}

.img-side {position: absolute;
width: 200px;
height: 240px;
object-fit: cover;
border-radius: 24px 24px 8px 24px;
top: 50%;
left: 50%;
transform: translate(10%, -65%);
box-shadow: 0 20px 60px rgba(28,21,32,0.14);
border: 4px solid white;
opacity: 0;
animation: fadeScale 0.9s 0.5s ease forwards;}

.img-bottom {position: absolute;
width: 180px;
height: 170px;
object-fit: cover;
border-radius: 24px 8px 24px 24px;
top: 50%;
left: 50%;
transform: translate(5%, 15%);
box-shadow: 0 20px 60px rgba(28,21,32,0.14);
border: 4px solid white;
opacity: 0;
animation: fadeScale 0.9s 0.7s ease forwards;}

.floating-card {position: absolute;
background: white;
border-radius: 18px;
padding: 14px 18px;
box-shadow: 0 12px 40px rgba(28,21,32,0.12);
z-index: 10;
opacity: 0;
animation: fadeScale 0.8s 0.9s ease forwards;}

.fc-location {top: 18%;
left: 50%;
transform: translateX(-95%);
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
animation-name: fadeScale, floatA;
animation-duration: 0.8s, 5s;
animation-delay: 0.9s, 1.7s;
animation-timing-function: ease, ease-in-out;
animation-fill-mode: forwards, none;
animation-iteration-count: 1, infinite;}

.fc-rating {bottom: 18%;
right: 2%;
animation-name: fadeScale, floatB;
animation-duration: 0.8s, 5s;
animation-delay: 1.1s, 1.9s;
animation-timing-function: ease, ease-in-out;
animation-fill-mode: forwards, none;
animation-iteration-count: 1, infinite;
text-align: center;
min-width: 110px;}

@keyframes floatA { 0%,100%{transform:translateX(-95%) translateY(0);} 50%{transform:translateX(-95%) translateY(-8px);} }
@keyframes floatB { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

.fc-icon {width: 36px;
height: 36px;
border-radius: 10px;
background: var(--grad-btn);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;}

.fc-text strong {display: block;font-size: 0.82rem;font-weight: 700;color: var(--text);}
.fc-text span {font-size: 0.72rem;color: var(--muted);}

.fc-stars {font-size: 0.9rem;color: #f59e0b;letter-spacing: 2px;margin-bottom: 3px;}
.fc-rating-num {font-size: 1.2rem;font-weight: 700;color: var(--text);}
.fc-rating-label {font-size: 0.68rem;color: var(--muted);}

@keyframes fadeUp {
  from {opacity: 0;transform: translateY(28px);}
  to   {opacity: 1;transform: translateY(0);}
}
@keyframes fadeScale {
  from {opacity: 0;transform: translate(-60%, -50%) scale(0.92);}
  to   {opacity: 1;transform: translate(-60%, -50%) scale(1);}
}
/* override for non-main images */
.img-side {animation-name: fadeScaleSide;}
.img-bottom {animation-name: fadeScaleBottom;}
.fc-location {animation-name: fadeScale, floatA;}
.fc-rating {animation-name: fadeScaleRating, floatB;}

@keyframes fadeScaleSide {
  from {opacity:0;transform:translate(10%,-65%) scale(0.9);}
  to   {opacity:1;transform:translate(10%,-65%) scale(1);}
}
@keyframes fadeScaleBottom {
  from {opacity:0;transform:translate(5%,15%) scale(0.9);}
  to   {opacity:1;transform:translate(5%,15%) scale(1);}
}
@keyframes fadeScaleRating {
  from {opacity:0;transform:scale(0.9);}
  to   {opacity:1;transform:scale(1);}
}

/* ═══ TICKER ═══ */
.ticker {background: var(--grad-btn);
padding: 13px 0;
overflow: hidden;}

.ticker-inner {display: flex;
gap: 2.5rem;
width: max-content;
animation: ticker 22s linear infinite;}

.t-item {display: flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.9) !important;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
white-space: nowrap;}

.t-dot {color: rgba(255,255,255,0.4) !important;font-size: 1.2rem;}

@keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* ═══ SECTION BASE ═══ */
.s {padding: 6rem 7rem;}
.s.alt {background: white;}
.s.warm {background: var(--warm);}

.s-label {font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--grad-btn);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
margin-bottom: 0.9rem;}

.s-title {font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.4rem, 3.5vw, 3.8rem);
font-weight: 600;
line-height: 1.1;
margin-bottom: 1rem;
letter-spacing: -0.01em;}

.s-title em {font-style: italic;font-weight: 300;}

.s-sub {color: var(--muted);
font-size: 1rem;
line-height: 1.75;
max-width: 500px;
font-weight: 300;}

/* ═══ STEPS — horizontal timeline ═══ */
.steps-row {display: grid;
grid-template-columns: repeat(4,1fr);
gap: 0;
margin-top: 3.5rem;
position: relative;}

.steps-row::before {content: '';
position: absolute;
top: 28px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, var(--teal), var(--purple), var(--pink));
z-index: 0;}

.step {display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1rem;
position: relative;
z-index: 1;}

.step-bubble {width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
color: white !important;
margin-bottom: 1.5rem;
box-shadow: 0 6px 24px rgba(123,94,167,0.3);
flex-shrink: 0;
position: relative;}

.step:nth-child(1) .step-bubble {background: var(--teal);}
.step:nth-child(2) .step-bubble {background: linear-gradient(135deg,var(--teal),var(--purple));}
.step:nth-child(3) .step-bubble {background: var(--purple);}
.step:nth-child(4) .step-bubble {background: var(--grad-btn);}

.step-bubble::after {content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(123,94,167,0.2);}

.step h4 {font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.5rem;
color: var(--text);}

.step p {font-size: 0.82rem;
color: var(--muted);
line-height: 1.6;
font-weight: 300;}

/* ═══ COFFEE SPOTS — card mosaic ═══ */
.spots-layout {display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: start;
margin-top: 3.5rem;}

.spots-list {display: flex;
flex-direction: column;
gap: 1rem;}

.spot-card {background: var(--cream);
border-radius: 16px;
padding: 1.4rem 1.6rem;
display: flex;
align-items: center;
gap: 1.2rem;
border: 1px solid var(--border);
transition: all 0.3s ease;
cursor: default;}

.spot-card:hover {background: white;
border-color: rgba(123,94,167,0.25);
transform: translateX(6px);
box-shadow: 0 8px 30px rgba(123,94,167,0.1);}

.spot-num {font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 700;
color: rgba(123,94,167,0.2);
min-width: 36px;
line-height: 1;}

.spot-card:hover .spot-num {color: var(--purple);}

.spot-info h4 {font-weight: 600;
font-size: 0.95rem;
margin-bottom: 3px;}

.spot-info p {font-size: 0.78rem;
color: var(--muted);
font-weight: 300;}

.spot-area {margin-left: auto;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 100px;
background: var(--purple-light);
color: var(--purple);
white-space: nowrap;}

/* Right col — big image with overlay */
.spots-visual {position: relative;
border-radius: 24px;
overflow: hidden;
height: 480px;}

.spots-visual img {width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;}

.spots-visual:hover img {transform: scale(1.04);}

.spots-overlay {position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(28,21,32,0.7) 0%, transparent 50%);}

.spots-caption {position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;}

.spots-caption h3 {font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 600;
color: white !important;
line-height: 1.2;
margin-bottom: 0.5rem;}

.spots-caption p {color: rgba(255,255,255,0.7) !important;
font-size: 0.82rem;
font-weight: 300;}

/* ═══ PHOTO GRID ═══ */
.photo-grid {display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 220px 220px;
gap: 1rem;
margin-top: 3rem;
border-radius: 24px;
overflow: hidden;}

.pg-cell {overflow: hidden;
position: relative;}

.pg-cell img {width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
display: block;}

.pg-cell:hover img {transform: scale(1.07);}
.pg-cell:first-child {grid-row: span 2;}
.pg-cell:last-child {grid-column: span 1;}

/* tall center cell */
.pg-cell:nth-child(4) {grid-row: span 1;}

/* ═══ WHY SECTION ═══ */
.why-layout {display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;}

.why-visual {position: relative;}

.why-img-wrap {border-radius: 28px;
overflow: hidden;
height: 540px;
position: relative;}

.why-img-wrap img {width: 100%;
height: 100%;
object-fit: cover;}

.why-img-wrap::after {content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(91,184,176,0.2) 0%, transparent 50%);}

.why-stat-card {position: absolute;
background: white;
border-radius: 18px;
padding: 1.2rem 1.6rem;
box-shadow: 0 16px 50px rgba(28,21,32,0.12);}

.wsc-1 {top: -20px;
right: -20px;
animation: floatA2 5s ease-in-out infinite;}

.wsc-2 {bottom: 30px;
left: -20px;
animation: floatB2 5s 1s ease-in-out infinite;}

@keyframes floatA2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes floatB2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

.wsc-big {font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 700;
background: var(--grad-btn);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 2px;}

.wsc-label {font-size: 0.75rem;
color: var(--muted);
font-weight: 400;}

.why-features {display: flex;
flex-direction: column;
gap: 1.2rem;
margin-top: 2rem;}

.wf-row {display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1.4rem 1.6rem;
border-radius: 16px;
border: 1px solid var(--border);
background: white;
transition: all 0.3s;}

.wf-row:hover {border-color: rgba(232,67,147,0.2);
box-shadow: 0 8px 30px rgba(232,67,147,0.08);
transform: translateY(-2px);}

.wf-icon {width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;}

.wf-row:nth-child(1) .wf-icon {background: rgba(91,184,176,0.12);}
.wf-row:nth-child(2) .wf-icon {background: rgba(123,94,167,0.1);}
.wf-row:nth-child(3) .wf-icon {background: rgba(232,67,147,0.08);}
.wf-row:nth-child(4) .wf-icon {background: rgba(91,184,176,0.12);}

.wf-text h4 {font-weight: 600;
font-size: 0.92rem;
margin-bottom: 4px;
color: var(--text);}

.wf-text p {font-size: 0.8rem;
color: var(--muted);
line-height: 1.55;
font-weight: 300;}

/* ═══ VIBES ═══ */
.vibes-wrap {display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1.2rem;
margin-top: 3rem;}

.vibe {background: white;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
transition: all 0.3s;
cursor: default;}

.vibe:hover {transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(123,94,167,0.14);
border-color: rgba(123,94,167,0.2);}

.vibe-img {height: 160px;
width: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;}

.vibe:hover .vibe-img {transform: scale(1.05);}

.vibe-body {padding: 1.2rem;}

.vibe-body h4 {font-weight: 600;
font-size: 0.92rem;
margin-bottom: 5px;
color: var(--text);}

.vibe-body p {font-size: 0.77rem;
color: var(--muted);
line-height: 1.5;
font-weight: 300;}

.vibe-tag {display: inline-block;
margin-top: 10px;
padding: 3px 12px;
border-radius: 100px;
font-size: 0.68rem;
font-weight: 600;
background: var(--purple-light);
color: var(--purple);}

/* ═══ TRUST ROW ═══ */
.trust-row {display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 3.5rem;}

.trust-cell {background: white;
padding: 2rem 1.5rem;
text-align: center;
transition: background 0.3s;}

.trust-cell:hover {background: var(--cream);}

.trust-icon {font-size: 1.8rem;
margin-bottom: 0.8rem;
display: block;}

.trust-cell h4 {font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.5rem;
color: var(--text);}

.trust-cell p {font-size: 0.78rem;
color: var(--muted);
line-height: 1.55;
font-weight: 300;}

/* ═══ CTA ═══ */
.cta-outer {padding: 6rem 7rem;
background: var(--cream);}

.cta-inner {border-radius: 32px;
overflow: hidden;
position: relative;
background: var(--text);
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 380px;}

.cta-inner::before {content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(91,184,176,0.15) 0%, transparent 60%),
              radial-gradient(ellipse 50% 70% at 80% 20%, rgba(232,67,147,0.12) 0%, transparent 60%);}

.cta-content {padding: 4rem;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;}

.cta-content h2 {font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
font-weight: 600;
color: white !important;
line-height: 1.1;
margin-bottom: 1rem;}

.cta-content h2 em {font-style: italic;
font-weight: 300;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;}

.cta-content p {color: rgba(255,255,255,0.6) !important;
font-size: 1rem;
font-weight: 300;
margin-bottom: 2rem;
line-height: 1.7;}

.cta-btn-group {display: flex;
gap: 12px;
flex-wrap: wrap;}

.btn-cta-main {background: var(--grad-btn);
color: white !important;
padding: 14px 28px;
border-radius: 100px;
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
border: none;
font-family: 'Outfit', sans-serif;
transition: transform 0.25s, box-shadow 0.25s;
box-shadow: 0 6px 24px rgba(232,67,147,0.4);
display: inline-flex;
align-items: center;
gap: 8px;}

.btn-cta-main:hover {transform: translateY(-2px);box-shadow: 0 12px 36px rgba(232,67,147,0.5);}

.btn-cta-ghost {background: transparent;
color: rgba(255,255,255,0.8) !important;
padding: 14px 28px;
border-radius: 100px;
font-weight: 500;
font-size: 0.88rem;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.2);
font-family: 'Outfit', sans-serif;
transition: all 0.25s;
display: inline-flex;
align-items: center;
gap: 8px;}

.btn-cta-ghost:hover {background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.4);}

.cta-image {position: relative;
overflow: hidden;}

.cta-image img {width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7) saturate(1.1);}

.cta-image::before {content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--text) 0%, transparent 40%);
z-index: 1;}

/* ═══ SCROLL REVEAL ═══ */
.rev {opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s ease, transform 0.75s ease;}
.rev.on {opacity:1;transform:translateY(0);}
.rev.delay1 {transition-delay: 0.1s;}
.rev.delay2 {transition-delay: 0.2s;}
.rev.delay3 {transition-delay: 0.3s;}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1200px) {
  .hero {grid-template-columns: 1fr;}
  .hero-right {display: none;}
  .s, .cta-outer {padding: 4rem 3rem;}
  .steps-row {grid-template-columns: repeat(2,1fr);gap: 2rem;}
  .steps-row::before {display: none;}
  .spots-layout {grid-template-columns: 1fr;}
  .why-layout {grid-template-columns: 1fr;}
  .vibes-wrap {grid-template-columns: repeat(2,1fr);}
  .trust-row {grid-template-columns: repeat(2,1fr);}
  .cta-inner {grid-template-columns: 1fr;}
  .cta-image {height: 280px;}
  .cta-inner::before {display:none;}
}

@media (max-width:640px) {
  .hero-left {padding: 4rem 1.5rem;}
  .s, .cta-outer {padding: 3rem 1.5rem;}
  .steps-row, .vibes-wrap, .trust-row {grid-template-columns: 1fr;}
  .photo-grid {grid-template-columns: 1fr 1fr;}
  .photo-grid .pg-cell:nth-child(n+5) {display: none;}
  #cursor, #cursor-ring {display: none;}
}