:root {
  color-scheme: dark;
  color: #e8eef6;
  background: #0f1720;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  --text: #e8eef6; /* soft off-white */
  --muted: #9aa6b2; /* gentle gray-blue */
  --surface: rgba(232, 238, 246, 0.03);
  --surface-strong: rgba(232, 238, 246, 0.06);
  --border: rgba(232, 238, 246, 0.07);
  --accent: #5a8fbf; /* muted blue */
  --accent-soft: rgba(90, 143, 191, 0.14);
  --shadow: 0 18px 40px rgba(8, 12, 18, 0.45);
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%); color: var(--text);}
button, input, textarea {font: inherit;}
button {cursor: pointer;}
.page {max-width: 1100px; margin: 0 auto; padding: 0 24px;}
.header-wrapper {width: 100%; background: rgba(10, 10, 10, 0.96); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 10;}
.header {max-width: 1100px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.brand {font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.92rem; color: #d4af37;}
.nav {display: flex; gap: 20px; flex-wrap: wrap;}
.nav a {color: var(--muted); text-decoration: none; transition: color 0.25s ease;}
.nav a:hover {color: var(--text);}
.button {display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,0.06); color: var(--text); font-weight: 600; transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;}
.button:hover {background: rgba(255,255,255,0.12); transform: translateY(-1px);}
.button-primary {background: var(--accent); border-color: rgba(229, 62, 62, 0.45); color: #ffffff;}
.section {padding: clamp(60px, 7vw, 96px) 0;}
.tiny {text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent); font-size: 0.78rem; margin: 0 0 18px;}
h1, h2 {margin: 0; line-height: 1.05;}
h1 {font-size: clamp(2.8rem, 5vw, 4.2rem); max-width: 720px;}
h2 {font-size: clamp(2rem, 3vw, 2.8rem); color: #ffffff;}
.hero {display: grid; align-items: center; min-height: calc(100vh - 100px);}
.hero-inner {max-width: 760px;}
.hero-copy {color: var(--muted); margin: 24px 0 36px; max-width: 700px;}
.grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px;}
.info-card {padding: 26px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,0.03);}
.info-card strong {display: block; margin-bottom: 16px; color: var(--accent); font-size: 1.03rem;}
.about {display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center;}
.about-content p {color: var(--muted); max-width: 620px; margin: 18px 0 0;}
.stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px;}
.stats span {padding: 20px; border-radius: 16px; border: 1px solid var(--border); color: var(--muted);}
.stats strong {display: block; color: var(--text); font-size: 1.4rem; margin-bottom: 8px;}
.about-photo {min-height: 360px; border-radius: 24px; background: linear-gradient(180deg, #1a1a1a, #0f0f0f); display: grid; place-items: center; border: 1px solid var(--border);}
.transformations-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px;}
.trans-card {min-height: 220px; border-radius: 20px; border: 1px solid var(--border); display: grid; place-items: center; background: rgba(255,255,255,0.03); color: var(--muted); font-size: 0.95rem; text-align: center;}
.testimonials-row {display: grid; gap: 16px; margin-top: 28px;}
.testimonial {padding: 24px; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--muted);}
.pricing-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px;}
.price-card {padding: 28px; border-radius: 20px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); display: grid; gap: 18px;}
.price-card h3 {margin-bottom: 4px;}
.price-card strong {font-size: 2rem; color: var(--accent);}
.contact {padding-bottom: 50px;}
.contact-content {max-width: 600px; margin: 0 auto;}
.contact-details {display: grid; gap: 14px; margin-top: 24px;}
.contact-link, .contact-item {display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; color: var(--muted); text-decoration: none; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: all 180ms ease;}
.contact-link:hover {background: var(--surface-strong); color: var(--accent); transform: translateX(2px);}
.contact-link .icon, .contact-item .icon {font-size: 1.2rem;}
.contact-item {cursor: default; pointer-events: none;}
.footer {padding: 24px 0 40px; text-align: center; color: var(--muted); border-top: 1px solid rgba(255,255,255,0.08);}
.footer .disclaimer {margin-top: 8px; font-size: 0.85rem; color: var(--muted); opacity: 0.55; transition: opacity 180ms ease, transform 180ms ease, color 180ms ease; cursor: default;}
.footer .disclaimer:hover, .footer .disclaimer:focus {opacity: 0.96; transform: translateY(-2px); color: var(--accent);}
@media (max-width: 960px) {.grid-4, .stats, .pricing-grid, .contact-box {grid-template-columns: 1fr;} .about {grid-template-columns: 1fr;}}
@media (max-width: 720px) {.page {padding: 0 18px;} .header {flex-direction: column; align-items: flex-start; padding: 20px 18px;} .nav {gap: 14px;} .button {width: 100%;} .hero {min-height: auto;} .hero-copy {margin: 20px 0 30px;}} 

/* Page 2: corner questions layout */
.page2 {position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center;}
.page2-inner {position: relative; width: 100%; max-width: 1100px; padding: 24px; display: grid; grid-template-columns: 1fr minmax(320px, 720px) 1fr; grid-template-rows: auto 1fr auto; align-items: center;}
.page2 .corner {background: var(--surface); padding: 16px; border-radius: 12px; border: 1px solid var(--border); color: var(--muted); width: 320px; max-width: 42%;}
.page2 .top-left {grid-column: 1; grid-row: 1; justify-self: start;}
.page2 .top-right {grid-column: 3; grid-row: 1; justify-self: end; text-align: right;}
.page2 .bottom-left {grid-column: 1; grid-row: 3; justify-self: start;}
.page2 .bottom-right {grid-column: 3; grid-row: 3; justify-self: end; text-align: right;}
.page2 .center-cta {grid-column: 2; grid-row: 2; width: 100%; text-align: center;}
.page2 .center-cta h2 {color: var(--text); margin: 8px 0 18px; font-size: clamp(1.6rem, 3.8vw, 2.6rem); line-height: 1.05;}
.page2 .center-cta .tiny {color: var(--accent); letter-spacing: 0.24em;}

/* Page 3: offer + why layout */
.page3-offer .offer-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;}
.page3-offer ul {margin-top: 12px; color: var(--muted);}
.page3-offer li {margin: 8px 0;}

/* Page 4: pairs gallery */
.pairs {display: grid; gap: 28px; grid-template-columns: 1fr;}
.pair {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;}
.pair-photo {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pair-photo img {width: 100%; height: 100%; object-fit: contain; display: block;}
.pair-caption {grid-column: 1 / -1; color: var(--muted); margin-top: 8px; font-weight: 600;}

/* Page 5: photo gallery */
.photo-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px;}
.gallery-card img {width: 100%; height: 440px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border);}

@media (max-width: 960px) {.page2 .corner {max-width: 48%;} .page3-offer .offer-grid {grid-template-columns: 1fr;} .pair {grid-template-columns: 1fr;} .photo-grid {grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px) {.page2 .corner {display: none;} .center-cta {padding: 18px;} .photo-grid {grid-template-columns: 1fr;} }