@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #2d1831;
  --berry: #8d1d5b;
  --hot-pink: #e32883;
  --coral: #f58e8e;
  --blush: #f9e3e6;
  --lilac: #ded1e8;
  --lemon: #f5dd8e;
  --paper: #fff9f7;
  --line: rgba(45, 24, 49, .16);
  --display: 'Space Grotesk', sans-serif;
  --body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.site-shell { overflow: hidden; position: relative; background: radial-gradient(circle at 82% 8%, #ffe7eb 0, transparent 27rem), var(--paper); }
.topbar { align-items: center; display: flex; justify-content: space-between; left: 0; margin: auto; max-width: 1240px; padding: 26px 32px; position: absolute; right: 0; top: 0; z-index: 10; }
.brand { align-items: center; display: flex; font-family: var(--display); font-size: 21px; font-weight: 700; gap: 9px; letter-spacing: -.06em; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 50%; color: white; display: inline-flex; font-size: 13px; height: 30px; justify-content: center; letter-spacing: 0; width: 30px; }
.brand-dot { color: var(--hot-pink); }
.main-nav { display: flex; font-size: 13px; gap: 30px; letter-spacing: .02em; }
.main-nav a, .text-link { transition: color .2s ease; }
.main-nav a:hover, .text-link:hover { color: var(--hot-pink); }
.nav-cta { border: 1px solid var(--ink); border-radius: 30px; font-size: 13px; padding: 10px 17px; transition: background .2s, color .2s; }
.nav-cta span, .button span, .text-link span, .plan-button span { margin-left: 8px; }
.nav-cta:hover { background: var(--ink); color: white; }
.hero { min-height: 850px; padding: 164px max(32px, calc((100vw - 1176px) / 2)) 80px; position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); gap: 6vw; align-items: center; }
.hero-grid { background-image: linear-gradient(rgba(45,24,49,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(45,24,49,.045) 1px, transparent 1px); background-size: 54px 54px; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 78%); opacity: .7; position: absolute; }
.eyebrow { align-items: center; color: var(--berry); display: flex; font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: .14em; margin: 0 0 21px; text-transform: uppercase; }
.eyebrow-pulse { background: var(--hot-pink); border-radius: 50%; box-shadow: 0 0 0 5px rgba(227,40,131,.13); height: 7px; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(50px, 6vw, 83px); letter-spacing: -.09em; line-height: .94; margin-bottom: 28px; max-width: 700px; }
h1 em, h2 em, blockquote em { color: var(--hot-pink); font-style: normal; }
.hero-text { font-size: 17px; line-height: 1.65; max-width: 480px; }
.hero-actions { align-items: center; display: flex; gap: 26px; margin-top: 36px; }
.button { border-radius: 999px; display: inline-flex; font-size: 14px; font-weight: 700; align-items: center; padding: 16px 22px; transition: transform .2s, box-shadow .2s; }
.button:hover { box-shadow: 0 10px 20px rgba(45,24,49,.16); transform: translateY(-3px); }
.button-dark { background: var(--ink); color: white; }
.text-link { font-size: 13px; font-weight: 700; }
.hero-proof { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 14px; margin-top: 74px; max-width: 420px; padding-top: 15px; }
.hero-proof strong { font-family: var(--display); font-size: 31px; letter-spacing: -.08em; }
.hero-proof span { color: rgba(45,24,49,.68); font-size: 12px; line-height: 1.35; }
.hero-visual { min-height: 555px; position: relative; transform: rotate(2deg); }
.image-card { background: white; border: 1px solid rgba(255,255,255,.8); border-radius: 220px 220px 26px 26px; box-shadow: 21px 26px 0 rgba(141,29,91,.14), 0 24px 60px rgba(141,29,91,.16); height: 545px; overflow: hidden; padding: 13px; position: absolute; right: 8%; top: 10px; transform: rotate(-2deg); width: min(76%, 385px); z-index: 2; }
.image-card:after { border: 1px solid rgba(255,255,255,.9); border-radius: inherit; content: ''; inset: 5px; pointer-events: none; position: absolute; }
.image-topline { color: rgba(45,24,49,.68); display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .1em; padding: 13px 14px; position: relative; z-index: 1; }
.image-card img { border-radius: 190px 190px 15px 15px; display: block; height: calc(100% - 43px); object-fit: cover; object-position: center top; width: 100%; }
.image-caption { align-items: baseline; background: var(--hot-pink); bottom: 20px; color: white; display: flex; gap: 9px; left: 31px; padding: 10px 14px; position: absolute; transform: rotate(-3deg); z-index: 3; }
.image-caption span { font-size: 10px; letter-spacing: .13em; }.image-caption strong { font-family: var(--display); font-size: 11px; }
.orbit { border: 1px solid rgba(227,40,131,.35); border-radius: 50%; height: 440px; position: absolute; right: -4%; top: 70px; transform: rotate(-23deg); width: 245px; }.orbit:after { background: var(--lemon); border: 5px solid var(--paper); border-radius: 50%; content: ''; height: 18px; position: absolute; right: 11px; top: 69px; width: 18px; }.orbit-two { border-color: rgba(45,24,49,.24); height: 240px; right: 7%; top: 190px; transform: rotate(55deg); width: 390px; }.orbit-two:after { background: var(--hot-pink); left: 15px; right: auto; top: 17px; }
.sticker { background: var(--lemon); border-radius: 50%; box-shadow: 8px 10px 0 rgba(45,24,49,.12); font-size: 13px; line-height: 1.05; padding: 22px 16px; position: absolute; text-align: center; transform: rotate(-12deg); z-index: 4; }.sticker strong { font-family: var(--display); font-size: 17px; }.sticker-top { left: 1%; top: 76px; }.sticker-bottom { background: var(--coral); bottom: 66px; color: white; font-size: 11px; left: 4%; transform: rotate(10deg); }
.mini-stat { align-items: center; background: rgba(255,249,247,.84); border: 1px solid white; border-radius: 16px; bottom: 28px; display: grid; gap: 0 8px; grid-template-columns: 8px auto auto; padding: 12px 15px; position: absolute; right: -2%; transform: rotate(-4deg); z-index: 4; }.mini-stat-dot { background: #44b573; border-radius: 50%; height: 7px; width: 7px; }.mini-stat strong { font-family: var(--display); font-size: 19px; }.mini-stat small { color: rgba(45,24,49,.65); font-size: 9px; line-height: 1.1; }
.scroll-cue { align-items: center; bottom: 31px; display: flex; font-size: 10px; gap: 12px; left: max(32px, calc((100vw - 1176px) / 2)); letter-spacing: .12em; position: absolute; text-transform: uppercase; transform: rotate(-90deg) translateX(-100%); transform-origin: left; }.scroll-cue span { background: var(--hot-pink); height: 1px; width: 34px; }
.marquee-band { background: var(--hot-pink); color: white; overflow: hidden; padding: 18px 0; transform: rotate(-2.5deg) scale(1.04); }.marquee-track { align-items: center; display: flex; gap: 24px; justify-content: space-around; min-width: 1100px; white-space: nowrap; }.marquee-track span { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .1em; }.marquee-track b { font-size: 20px; }
.section { margin: auto; max-width: 1176px; padding: 148px 32px; }.section-heading { max-width: 540px; }.section-heading h2, .plans-heading h2, .faq-intro h2, .contact h2 { font-size: clamp(44px, 5vw, 67px); letter-spacing: -.09em; line-height: .95; margin-bottom: 24px; }.section-heading > p:last-child, .faq-intro > p, .contact > p { color: rgba(45,24,49,.7); font-size: 16px; line-height: 1.55; max-width: 410px; }
.service-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 68px; perspective: 1300px; }.service-card { border: 1px solid rgba(255,255,255,.8); border-radius: 16px; box-shadow: 12px 17px 0 rgba(45,24,49,.09); min-height: 335px; padding: 27px; position: relative; transform: rotateX(5deg) rotateY(-6deg); transition: transform .4s, box-shadow .4s; }.service-card:nth-child(2) { transform: translateY(35px) rotateX(5deg) rotateY(-6deg); }.service-card:nth-child(3) { transform: rotateX(5deg) rotateY(-6deg) translateY(70px); }.service-card:hover { box-shadow: 3px 8px 0 rgba(45,24,49,.11); transform: translateY(-14px) rotateX(2deg) rotateY(0); }.service-card:nth-child(2):hover { transform: translateY(20px) rotateX(2deg) rotateY(0); }.service-card:nth-child(3):hover { transform: translateY(56px) rotateX(2deg) rotateY(0); }.card-pink { background: #f4c2ce; }.card-lilac { background: var(--lilac); }.card-yellow { background: var(--lemon); }.card-number { font-size: 11px; font-weight: 700; opacity: .6; }.service-icon { align-items: center; background: rgba(255,255,255,.55); border: 1px solid white; border-radius: 12px; display: flex; font-size: 28px; height: 54px; justify-content: center; margin: 41px 0 22px; width: 54px; }.service-card h3 { font-size: 26px; letter-spacing: -.07em; line-height: .96; margin-bottom: 18px; }.service-card p { font-size: 13px; line-height: 1.55; max-width: 220px; }.card-arrow { bottom: 27px; font-size: 19px; position: absolute; right: 27px; }
.plans { max-width: 1250px; padding-bottom: 130px; }.plans-heading { margin-bottom: 62px; }.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }.plan-card { background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 9px 12px 0 rgba(45,24,49,.07); padding: 28px; position: relative; }.plan-card:nth-child(1) { transform: rotate(-1deg); }.plan-card:nth-child(3) { transform: rotate(1deg); }.plan-card.featured { background: var(--berry); color: white; margin-top: -24px; transform: rotate(1deg); }.featured-label { background: var(--lemon); color: var(--ink); font-size: 10px; font-weight: 700; left: 22px; padding: 7px 13px; position: absolute; top: -14px; transform: rotate(-3deg); }.plan-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 49px; }.plan-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.plan-index { color: var(--hot-pink); font-family: var(--display); font-size: 20px; }.featured .plan-index { color: var(--lemon); }.plan-card h3 { font-size: 40px; letter-spacing: -.09em; margin-bottom: 8px; }.plan-lead { font-size: 13px; line-height: 1.4; min-height: 38px; opacity: .7; }.price { border-bottom: 1px solid var(--line); display: flex; gap: 7px; align-items: baseline; margin: 31px 0 20px; padding-bottom: 18px; }.featured .price { border-color: rgba(255,255,255,.24); }.price small, .price span { font-size: 10px; opacity: .65; }.price strong { font-family: var(--display); font-size: 36px; letter-spacing: -.09em; }.plan-card ul { list-style: none; margin: 0 0 28px; min-height: 143px; padding: 0; }.plan-card li { border-bottom: 1px solid var(--line); font-size: 12px; padding: 9px 0; }.featured li { border-color: rgba(255,255,255,.2); }.plan-card li:before { color: var(--hot-pink); content: '✦'; margin-right: 8px; }.featured li:before { color: var(--lemon); }.plan-button { border: 1px solid var(--ink); border-radius: 30px; display: block; font-size: 12px; font-weight: 700; padding: 13px 15px; text-align: center; transition: background .2s, color .2s; }.plan-button:hover { background: var(--ink); color: white; }.dark-plan { background: var(--hot-pink); border-color: var(--hot-pink); }.dark-plan:hover { background: white; color: var(--berry); }
.quote-section { align-items: center; background: var(--lilac); border-radius: 22px; display: flex; flex-direction: column; max-width: 1112px; padding-bottom: 110px; padding-top: 110px; position: relative; text-align: center; transform: rotate(-1deg); }.quote-mark { color: var(--hot-pink); font-family: Georgia, serif; font-size: 95px; height: 65px; line-height: 1; }.quote-section blockquote { font-family: var(--display); font-size: clamp(31px, 4vw, 52px); letter-spacing: -.08em; line-height: .98; margin: 0 0 25px; }.quote-line { background: var(--berry); height: 1px; margin-bottom: 14px; width: 50px; }.quote-section p { font-size: 12px; margin: 0; opacity: .7; }
.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; }.faq-intro .text-link { display: inline-block; margin-top: 25px; }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { cursor: pointer; font-family: var(--display); font-size: 18px; font-weight: 600; list-style: none; padding: 26px 0; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { float: right; font-family: var(--body); font-size: 25px; font-weight: 400; transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { color: rgba(45,24,49,.7); font-size: 14px; line-height: 1.6; margin: -8px 30px 23px 0; max-width: 510px; }
.contact { background: var(--coral); border-radius: 22px; margin-bottom: 65px; max-width: 1112px; overflow: hidden; padding-bottom: 42px; padding-top: 100px; position: relative; text-align: center; }.contact:before, .contact:after { border: 1px solid rgba(255,255,255,.44); border-radius: 50%; content: ''; height: 380px; left: -95px; position: absolute; top: -155px; transform: rotate(-24deg); width: 210px; }.contact:after { height: 490px; left: auto; right: -95px; top: auto; bottom: -245px; transform: rotate(30deg); }.contact .eyebrow { justify-content: center; color: var(--berry); }.contact h2 { position: relative; z-index: 1; }.contact > p { margin-left: auto; margin-right: auto; position: relative; z-index: 1; }.contact-button { margin-top: 17px; position: relative; z-index: 1; }.contact-foot { border-top: 1px solid rgba(45,24,49,.2); display: flex; font-size: 11px; justify-content: space-between; margin-top: 98px; padding-top: 17px; position: relative; z-index: 1; }
.floating-socials { inset: 0; pointer-events: none; position: fixed; z-index: 20; }.social-orb { align-items: center; border: 0; border-radius: 20px; box-shadow: 7px 10px 0 rgba(45,24,49,.13), inset 2px 2px 0 rgba(255,255,255,.6); cursor: grab; display: flex; font-size: 29px; height: 66px; justify-content: center; pointer-events: auto; position: fixed; touch-action: none; user-select: none; width: 66px; }.social-orb:active, .social-orb.is-dragging { cursor: grabbing; }.social-orb span { transform: translateZ(22px); }.instagram { background: linear-gradient(145deg, #fff, #f5b8d0); color: #ca287a; left: 24px; top: 32%; }.tiktok { background: linear-gradient(145deg, #fff, #d8cde9); color: #2d1831; right: 34px; top: 52%; }.whatsapp { background: radial-gradient(circle at 34% 25%, #54e58e, #0b9c5c 65%, #087344); border: 4px solid rgba(255,255,255,.75); border-radius: 50%; bottom: 28px; box-shadow: 0 0 0 8px rgba(45,210,117,.13), 5px 7px 0 rgba(45,24,49,.18); color: white; height: 68px; right: 27px; width: 68px; }.whatsapp span { font-size: 37px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal-delay-short { transition-delay: .12s; }.reveal-delay { transition-delay: .22s; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.service-card.reveal.is-visible:nth-child(2) { transform: translateY(35px) rotateX(5deg) rotateY(-6deg); }.service-card.reveal.is-visible:nth-child(3) { transform: rotateX(5deg) rotateY(-6deg) translateY(70px); }.plan-card.reveal.is-visible:nth-child(1) { transform: rotate(-1deg); }.plan-card.reveal.is-visible:nth-child(3) { transform: rotate(1deg); }.plan-card.featured.reveal.is-visible { transform: rotate(1deg); }
@media (max-width: 840px) { .main-nav { display: none; }.hero { grid-template-columns: 1fr; gap: 20px; min-height: auto; padding-top: 140px; }.hero-copy { max-width: 650px; }.hero-visual { margin: 15px auto 65px; min-height: 520px; width: min(100%, 580px); }.image-card { right: 15%; }.service-stage, .plans-grid { grid-template-columns: 1fr; max-width: 520px; }.service-card, .service-card:nth-child(2), .service-card:nth-child(3) { transform: none; }.service-card:nth-child(2), .service-card:nth-child(3) { margin-top: 18px; }.service-card:hover, .service-card:nth-child(2):hover, .service-card:nth-child(3):hover { transform: translateY(-8px); }.featured, .plan-card:nth-child(1), .plan-card:nth-child(3) { margin-top: 0; transform: none !important; }.faq { grid-template-columns: 1fr; gap: 50px; }.contact-foot { gap: 12px; flex-wrap: wrap; }.social-orb { transform: scale(.83); } }
@media (max-width: 520px) { .topbar { padding: 20px 18px; }.nav-cta { padding: 9px 12px; }.hero { padding-left: 20px; padding-right: 20px; }.hero h1 { font-size: clamp(43px, 13vw, 67px); }.hero-text { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-proof { margin-top: 50px; }.hero-visual { min-height: 420px; }.image-card { height: 420px; right: 9%; width: 76%; }.sticker { padding: 17px 12px; }.sticker-top { left: -1%; top: 50px; }.sticker-bottom { bottom: 35px; left: 0; }.mini-stat { bottom: 8px; right: -2%; }.orbit { height: 340px; top: 30px; }.section { padding: 92px 20px; }.section-heading h2, .plans-heading h2, .faq-intro h2, .contact h2 { font-size: 48px; }.service-stage { margin-top: 42px; }.service-card { min-height: 300px; }.quote-section { padding: 80px 22px; }.contact { border-radius: 0; margin-bottom: 0; }.contact-foot { justify-content: center; }.instagram { left: 4px; }.tiktok { right: 3px; }.whatsapp { bottom: 19px; right: 14px; } }

/* The opening follows the reference: one raised glass panel, then the portrait. */
.hero { align-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.8), transparent 48%), linear-gradient(125deg, #f8d9e0, #fff2ef 48%, #edcedd); display: flex; flex-direction: column; gap: 55px; min-height: 1020px; overflow: hidden; padding-top: 145px; perspective: 1200px; }
.hero:before { background-image: linear-gradient(rgba(141,29,91,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(141,29,91,.09) 1px, transparent 1px); background-size: 66px 66px; content: ''; inset: -25%; opacity: .5; position: absolute; transform: rotateX(62deg) translateY(180px) scale(1.45); transform-origin: center bottom; }
.hero:after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); content: ''; height: 2px; left: 12%; position: absolute; right: 12%; top: 103px; transform: rotate(-1deg); }
.hero-grid { display: none; }
.hero-copy { background: rgba(255,249,247,.72); border: 1px solid rgba(255,255,255,.92); border-radius: 36px; box-shadow: 18px 24px 0 rgba(141,29,91,.12), 0 24px 70px rgba(141,29,91,.13), inset 0 1px 0 white; max-width: 980px; padding: 39px 64px 34px; position: relative; text-align: center; transform: rotateX(2deg) rotateZ(-.3deg); width: 100%; z-index: 2; }
.hero-copy:before { border: 1px solid rgba(255,255,255,.7); border-radius: 31px; content: ''; inset: 7px; pointer-events: none; position: absolute; }
.hero-copy .eyebrow, .hero-copy .hero-proof { justify-content: center; margin-left: auto; margin-right: auto; position: relative; }.hero-copy h1 { font-size: clamp(48px, 6vw, 80px); margin-left: auto; margin-right: auto; max-width: 820px; position: relative; }.hero-text { margin-left: auto; margin-right: auto; max-width: 720px; position: relative; }.hero-actions { justify-content: center; position: relative; }.hero-proof { text-align: left; }.hero-visual { height: 610px; min-height: 610px; transform: rotateX(3deg) rotateZ(1.5deg); width: min(100%, 650px); z-index: 2; }.image-card { height: 590px; right: 19%; width: min(62%, 390px); }.orbit { right: 5%; top: 70px; }.orbit-two { right: 18%; }.sticker-top { left: 4%; top: 100px; }.sticker-bottom { bottom: 67px; left: 10%; }.mini-stat { right: 4%; }
.marquee-band { background: var(--hot-pink); border-bottom: 6px solid var(--berry); border-top: 6px solid rgba(255,255,255,.7); box-shadow: 0 15px 0 rgba(141,29,91,.12), 0 23px 38px rgba(141,29,91,.16); padding: 21px 0; position: relative; transform: rotate(-1.8deg) scale(1.05); z-index: 4; }.marquee-track { animation: marquee 24s linear infinite; justify-content: flex-start; min-width: max-content; }.marquee-track span { font-size: 16px; }.marquee-track b { font-size: 23px; }@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.plans { padding-top: 135px; position: relative; }.plans:before { background: radial-gradient(circle, rgba(227,40,131,.11) 1px, transparent 1px); background-size: 22px 22px; content: ''; height: 180px; opacity: .5; position: absolute; right: 0; top: 75px; width: 240px; z-index: 0; }.plans-heading, .plans-grid { position: relative; z-index: 1; }
.social-orb { border: 1px solid rgba(255,255,255,.95); overflow: hidden; position: fixed; transform: translate3d(0,0,0); }.social-orb svg { fill: currentColor; height: 34px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 34px; }.social-orb svg .solid { stroke: none; }.facebook { background: linear-gradient(145deg, #fefbff, #c8d6ee); color: #1877f2; left: auto; right: 27px; top: 24%; }.youtube { background: linear-gradient(145deg, #fff, #f3b5c2); color: #ff0033; left: 22px; right: auto; top: 66%; }.instagram { color: #d62976; }.tiktok { color: #111; }.whatsapp svg { fill: none; stroke: currentColor; stroke-width: 1.35; }.whatsapp svg path { fill: currentColor; stroke: none; }.whatsapp { color: white; }
.hero-copy.reveal.is-visible { opacity: 1; transform: rotateX(2deg) rotateZ(-.3deg); }
.hero-visual.reveal.is-visible { opacity: 1; transform: rotateX(3deg) rotateZ(1.5deg); }
@media (max-width: 840px) { .hero { min-height: 1080px; padding-top: 130px; }.hero-copy { padding: 34px 28px 30px; }.hero-visual { height: 555px; min-height: 555px; }.image-card { right: 15%; }.plans { padding-top: 110px; } }
@media (max-width: 520px) { .hero { gap: 35px; min-height: 930px; padding-top: 112px; }.hero-copy { border-radius: 28px; padding: 27px 18px 24px; }.hero-copy h1 { font-size: 43px; }.hero-copy .eyebrow { font-size: 9px; }.hero-copy .hero-text { font-size: 14px; line-height: 1.5; }.hero-visual { height: 450px; min-height: 450px; }.image-card { height: 445px; right: 9%; width: 76%; }.facebook { right: 4px; }.youtube { left: 4px; }.social-orb { height: 58px; width: 58px; }.social-orb svg { height: 29px; width: 29px; }.plans { padding-top: 92px; } }

/* Spatial UI layer: clay surfaces, glass controls and tactile depth. */
main { perspective: 1200px; }
.site-shell { transform-style: flat; }
.topbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.62); border-radius: 0 0 24px 24px; box-shadow: 0 10px 24px rgba(141,29,91,.08), inset 1px 1px 0 rgba(255,255,255,.9); transform: translateZ(40px); }
.hero-copy { box-shadow: 20px 26px 0 rgba(141,29,91,.11), 0 30px 55px rgba(141,29,91,.17), 0 8px 16px rgba(45,24,49,.08), inset 4px 4px 10px rgba(255,255,255,.95), inset -5px -7px 12px rgba(190,112,147,.16); transform: rotateX(2deg) rotateZ(-.3deg) translateZ(22px); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; transform-style: preserve-3d; }
.hero-copy:hover { box-shadow: 26px 32px 0 rgba(141,29,91,.1), 0 40px 75px rgba(141,29,91,.2), 0 10px 18px rgba(45,24,49,.08), inset 4px 4px 10px rgba(255,255,255,.95), inset -5px -7px 12px rgba(190,112,147,.16); transform: rotateX(1deg) rotateY(-1.8deg) rotateZ(-.3deg) translateZ(32px); }
.hero-copy h1 { text-shadow: 1px 1px 0 #f0a6c0, 2px 2px 0 #db779e, 3px 3px 0 #bd507e, 4px 4px 0 rgba(141,29,91,.35), 0 12px 22px rgba(141,29,91,.15); }
.button-dark { box-shadow: 0 5px 0 #160d19, 0 10px 20px rgba(45,24,49,.22), inset 2px 2px 0 rgba(255,255,255,.12); transition: transform .16s ease, box-shadow .16s ease; }
.button-dark:hover { box-shadow: 0 7px 0 #160d19, 0 14px 25px rgba(45,24,49,.26), inset 2px 2px 0 rgba(255,255,255,.12); transform: translateY(-2px); }
.button-dark:active { box-shadow: 0 1px 0 #160d19, 0 4px 9px rgba(45,24,49,.18), inset 2px 2px 0 rgba(0,0,0,.14); transform: translateY(4px); }
.hero-copy.reveal.is-visible { transform: rotateX(2deg) rotateZ(-.3deg) translateZ(22px); }
.hero-copy.reveal.is-visible:hover { transform: rotateX(1deg) rotateY(-1.8deg) rotateZ(-.3deg) translateZ(32px); }
@media (max-width: 520px) { .topbar { border-radius: 0 0 18px 18px; }.hero-copy:hover, .hero-copy.reveal.is-visible:hover { transform: rotateX(1deg) rotateY(-1deg) rotateZ(-.3deg) translateZ(25px); } }

/* High-density spatial layer: physical glass objects and directional light. */
main { perspective: 1200px; }
.site-shell { background: radial-gradient(ellipse 42rem 60rem at -7% 34%, rgba(255,255,255,.98) 0%, rgba(255,218,229,.76) 35%, transparent 72%), radial-gradient(circle at 82% 8%, #ffe7eb 0, transparent 27rem), var(--paper); }
.hero { background: radial-gradient(ellipse at 4% 46%, rgba(255,255,255,.8), transparent 31%), radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.8), transparent 48%), linear-gradient(125deg, #f8d9e0, #fff2ef 48%, #edcedd); }
.hero-visual { transform-style: preserve-3d; }
.hero-copy { transform: rotateX(2deg) rotateZ(-.3deg) translateZ(50px); }
.hero-copy:hover { transform: rotateX(1deg) rotateY(-1.8deg) rotateZ(-.3deg) translateZ(62px); }
.hero-copy.reveal.is-visible { transform: rotateX(2deg) rotateZ(-.3deg) translateZ(50px); }
.hero-copy.reveal.is-visible:hover { transform: rotateX(1deg) rotateY(-1.8deg) rotateZ(-.3deg) translateZ(62px); }
.space-prop { pointer-events: none; position: absolute; transform-style: preserve-3d; }
.glass-sphere { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: radial-gradient(circle at 28% 23%, rgba(255,255,255,.95), rgba(255,255,255,.28) 25%, rgba(227,40,131,.19) 70%, rgba(141,29,91,.25)); border: 1px solid rgba(255,255,255,.88); border-radius: 50%; box-shadow: 12px 17px 0 rgba(141,29,91,.13), 0 21px 35px rgba(141,29,91,.2), inset 7px 7px 13px rgba(255,255,255,.68), inset -9px -12px 18px rgba(141,29,91,.18); height: 78px; width: 78px; }
.sphere-back { left: 6%; top: 150px; transform: translateZ(-45px); }
.sphere-front { bottom: 87px; right: 6%; transform: translateZ(72px); }
.glass-panel { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,221,233,.32)); border: 1px solid rgba(255,255,255,.9); box-shadow: 10px 15px 0 rgba(141,29,91,.12), 0 18px 34px rgba(141,29,91,.15), inset 4px 4px 8px rgba(255,255,255,.78), inset -5px -7px 10px rgba(141,29,91,.13); color: var(--berry); display: grid; font-family: var(--display); font-size: 10px; letter-spacing: .08em; line-height: 1.1; place-items: center; text-align: center; }
.panel-back { border-radius: 15px; height: 112px; left: -2%; padding: 11px; top: 270px; transform: rotate(-12deg) translateZ(-65px); width: 86px; }
.panel-front { border-radius: 22px; bottom: 122px; height: 86px; padding: 12px; right: -1%; transform: rotate(10deg) translateZ(92px); width: 92px; }
.panel-front b { color: var(--hot-pink); font-size: 24px; }
@media (max-width: 520px) { .hero-copy:hover, .hero-copy.reveal.is-visible:hover { transform: rotateX(1deg) rotateY(-1deg) rotateZ(-.3deg) translateZ(50px); }.sphere-back { left: 0; }.panel-back { left: -4%; }.sphere-front { right: 0; }.panel-front { right: -4%; } }

/* Hybrid art direction: immersive studio background, frosted interface panels and tactile clay CTA. */
body {
  background-color: #e8c7d3;
  background-image: linear-gradient(90deg, rgba(86, 24, 61, .12), rgba(255, 235, 239, .04) 42%, rgba(45, 24, 49, .18)), url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?auto=format&fit=crop&w=2400&q=88');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.site-shell {
  background: linear-gradient(135deg, rgba(255, 232, 238, .8), rgba(255, 249, 247, .46) 48%, rgba(141, 29, 91, .18));
}
.hero {
  background: linear-gradient(135deg, rgba(255, 235, 239, .65), rgba(255, 249, 247, .28));
}
.topbar,
.hero-copy,
.quote-section,
.contact,
.faq-list,
.service-card {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 240, 242, .7);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
}
.topbar {
  background: rgba(255, 240, 242, .4);
}
.hero-copy {
  box-shadow: 20px 26px 0 rgba(83, 22, 56, .1), 0 24px 54px rgba(83, 22, 56, .18), inset 2px 2px 0 rgba(255, 255, 255, .86), inset -3px -4px 10px rgba(141, 29, 91, .1);
}
.hero-copy h1,
.section-heading h2,
.plans-heading h2,
.faq-intro h2,
.contact h2,
.quote-section blockquote,
.plan-card h3,
.service-card h3 {
  color: var(--ink);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.hero-copy h1 em,
.section-heading h2 em,
.plans-heading h2 em,
.faq-intro h2 em,
.contact h2 em,
.quote-section blockquote em { color: var(--hot-pink); }
.hero-copy h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.button-dark {
  box-shadow: 9px 10px 0 rgba(54, 15, 39, .26), 0 16px 24px rgba(54, 15, 39, .2), inset 2px 2px 0 rgba(255, 255, 255, .16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.button-dark:hover {
  box-shadow: 11px 13px 0 rgba(54, 15, 39, .23), 0 20px 28px rgba(54, 15, 39, .22), inset 2px 2px 0 rgba(255, 255, 255, .16);
  transform: translate(-2px, -3px);
}
.button-dark:active {
  box-shadow: 2px 3px 0 rgba(54, 15, 39, .25), 0 6px 10px rgba(54, 15, 39, .16), inset 2px 2px 0 rgba(0, 0, 0, .12);
  transform: translate(5px, 5px);
}
.plan-card.featured { background: rgba(141, 29, 91, .78); }
.contact { background: rgba(245, 142, 142, .72); }
.quote-section { background: rgba(222, 209, 232, .7); }
.marquee-band { box-shadow: 0 15px 0 rgba(83, 22, 56, .12), 0 23px 38px rgba(83, 22, 56, .22); }
.plans, .plans-grid, .plan-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.plan-card { background: rgba(255, 249, 250, .94); }
.plan-card.featured { background: rgba(141, 29, 91, .96); }

body.modal-open { overflow: hidden; }
.plan-button { appearance: none; background: transparent; cursor: pointer; font-family: var(--body); width: 100%; }
.plan-modal { align-items: center; display: grid; inset: 0; justify-items: center; opacity: 0; padding: 24px; pointer-events: none; position: fixed; perspective: 1400px; place-items: center; transition: opacity .25s ease; z-index: 50; }
.plan-modal.is-open { opacity: 1; pointer-events: auto; }
.modal-backdrop { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(66, 18, 47, .48); inset: 0; position: absolute; }
.plan-modal-card { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); background: linear-gradient(145deg, rgba(255, 249, 250, .93), rgba(250, 221, 231, .78)); border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px; box-shadow: 22px 30px 0 rgba(72, 17, 50, .16), 0 35px 75px rgba(43, 10, 34, .3), inset 3px 3px 0 rgba(255,255,255,.95), inset -7px -9px 16px rgba(141,29,91,.1); margin: auto; max-height: min(760px, calc(100vh - 48px)); max-width: 700px; overflow: auto; padding: 48px 54px 44px; position: relative; transform: rotateX(-9deg) translateZ(-100px) scale(.94); transition: transform .5s cubic-bezier(.2,.8,.2,1); width: 100%; }
.plan-modal.is-open .plan-modal-card { transform: rotateX(0) translateY(0) translateZ(80px) scale(1); }
.plan-modal-card:before { border: 1px solid rgba(255,255,255,.75); border-radius: 24px; content: ''; inset: 8px; pointer-events: none; position: absolute; }
.modal-close { align-items: center; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 3px 4px 0 rgba(141,29,91,.12), inset 1px 1px 0 white; cursor: pointer; display: flex; font-size: 27px; height: 44px; justify-content: center; line-height: 1; position: absolute; right: 24px; top: 22px; transition: transform .2s ease; width: 44px; z-index: 2; }.modal-close:hover { transform: rotate(90deg) scale(1.05); }
.modal-kicker { align-items: center; color: var(--berry); display: flex; font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: .15em; margin-bottom: 21px; position: relative; text-transform: uppercase; }.modal-spark { color: var(--hot-pink); font-size: 18px; }
.plan-modal-card h2 { color: var(--berry); font-family: var(--display); font-size: clamp(45px, 7vw, 70px); letter-spacing: -.1em; line-height: .9; margin: 0 0 16px; position: relative; text-shadow: 0 2px 4px rgba(0,0,0,.15); }.modal-description { color: rgba(45,24,49,.72); font-size: 16px; line-height: 1.5; margin: 0; max-width: 470px; position: relative; }.modal-divider { background: rgba(141,29,91,.15); height: 1px; margin: 32px 0 20px; position: relative; }.modal-features { list-style: none; margin: 0; padding: 0; position: relative; }.modal-features li { align-items: center; border-bottom: 1px solid rgba(141,29,91,.1); display: flex; font-size: 17px; gap: 15px; padding: 13px 0; }.feature-check { align-items: center; background: #f6d5e1; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 2px 3px 0 rgba(141,29,91,.12), inset 1px 1px 0 white; color: var(--berry); display: inline-flex; flex: 0 0 31px; font-weight: 700; height: 31px; justify-content: center; width: 31px; }.modal-bottom { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-top: 30px; position: relative; }.modal-price { display: grid; gap: 6px; }.modal-price small { color: rgba(45,24,49,.55); font-size: 9px; font-weight: 700; letter-spacing: .12em; }.modal-price strong { color: var(--berry); font-family: var(--display); font-size: 30px; letter-spacing: -.06em; }.modal-interest { background: var(--berry); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; box-shadow: 6px 7px 0 rgba(82,17,54,.2), inset 2px 2px 0 rgba(255,255,255,.15); color: white; font-size: 13px; font-weight: 700; padding: 15px 19px; transition: transform .2s ease, box-shadow .2s ease; }.modal-interest:hover { box-shadow: 3px 4px 0 rgba(82,17,54,.2); transform: translate(3px, 3px); }.modal-interest span { margin-left: 8px; }
@media (max-width: 520px) { .plan-modal { padding: 15px; }.plan-modal-card { border-radius: 24px; max-height: calc(100vh - 30px); padding: 42px 24px 28px; }.modal-close { right: 17px; top: 16px; }.modal-kicker { font-size: 9px; padding-right: 42px; }.plan-modal-card h2 { font-size: 48px; }.modal-description { font-size: 14px; }.modal-features li { font-size: 14px; }.modal-bottom { align-items: stretch; flex-direction: column; gap: 18px; }.modal-interest { text-align: center; } }

/* Visible plan drawers echo the reference card: centered heading, checklist and full-width action. */
.plans-grid { perspective: 1200px; }
.plan-card { border-radius: 24px; min-height: 560px; padding: 36px 34px 32px; text-align: center; transform: rotateX(2deg) rotateY(-2deg); }
.plan-card:nth-child(1), .plan-card:nth-child(3) { transform: rotateX(2deg) rotateY(-2deg); }
.plan-card.featured { margin-top: -24px; transform: rotateX(2deg) rotateY(-2deg); }
.plan-card:hover { box-shadow: 14px 20px 0 rgba(45,24,49,.1), 0 25px 38px rgba(141,29,91,.16); transform: rotateX(0) rotateY(0) translateY(-8px); }
.plan-card.featured:hover { transform: rotateX(0) rotateY(0) translateY(-8px); }
.plan-top { display: block; margin-bottom: 27px; }.plan-tag { color: var(--berry); display: block; font-size: 12px; letter-spacing: .12em; margin-top: 12px; }.featured .plan-tag { color: rgba(255,255,255,.8); }.plan-index { display: none; }
.plan-card h3 { color: var(--berry); font-size: 43px; margin-bottom: 12px; }.featured h3 { color: white; }.plan-lead { font-size: 15px; margin: 0 auto; max-width: 280px; min-height: 43px; }.price { justify-content: center; margin: 20px 0 17px; padding-bottom: 14px; }.price strong { font-size: 27px; }.price small, .price span { font-size: 9px; }.plan-card ul { min-height: 180px; text-align: left; }.plan-card li { font-size: 14px; padding: 12px 0; }.plan-card li:before { content: '✓'; }.plan-button { background: rgba(255,255,255,.35); border-color: rgba(227,40,131,.2); color: var(--berry); font-size: 15px; padding: 17px 15px; }.plan-button:hover { background: rgba(255,255,255,.72); color: var(--berry); }.featured .plan-button { background: var(--hot-pink); border-color: var(--hot-pink); color: white; }.featured .plan-button:hover { background: white; color: var(--berry); }
@media (max-width: 840px) { .plan-card, .plan-card:nth-child(1), .plan-card:nth-child(3), .plan-card.featured { transform: none; }.plan-card.featured { margin-top: 0; } }
@media (max-width: 520px) { .plan-card { min-height: 0; padding: 30px 24px 26px; }.plan-card ul { min-height: 0; }.plan-card h3 { font-size: 39px; } }

/* Modal service board: centered glass panel with the reference's soft 2x2 drawers. */
.plan-modal-card { max-width: 720px; padding: 42px 38px 34px; text-align: center; }
.modal-kicker { justify-content: center; }.plan-modal-card h2 { text-align: center; }.modal-description { margin-left: auto; margin-right: auto; text-align: center; }.modal-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.modal-features li.feature-tile { align-items: center; background: rgba(255, 249, 250, .42); border: 1px solid rgba(255,255,255,.76); border-radius: 22px; box-shadow: 7px 9px 0 rgba(141,29,91,.1), inset 2px 2px 0 rgba(255,255,255,.85), inset -3px -4px 8px rgba(141,29,91,.06); display: flex; flex-direction: column; gap: 7px; min-height: 172px; padding: 20px 15px 15px; text-align: center; }
.feature-icon { align-items: center; background: rgba(255, 240, 242, .84); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: 3px 5px 0 rgba(141,29,91,.1), inset 1px 1px 0 white; color: var(--hot-pink); display: flex; font-family: var(--display); font-size: 24px; height: 50px; justify-content: center; width: 50px; }.feature-tile strong { color: var(--berry); font-family: var(--display); font-size: 16px; margin-top: 3px; }.feature-tile p { color: rgba(45,24,49,.75); font-size: 12px; line-height: 1.4; margin: 0; max-width: 210px; }.feature-badge { background: rgba(255,255,255,.65); border-radius: 999px; color: var(--hot-pink); font-size: 11px; font-weight: 700; margin-top: auto; padding: 7px 12px; }.modal-note { background: rgba(255,249,250,.4); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; color: rgba(45,24,49,.8); font-size: 13px; line-height: 1.45; margin: 24px 0 0; padding: 16px 20px; text-align: center; }.modal-bottom { align-items: center; margin-top: 24px; }.modal-price { text-align: left; }
@media (max-width: 520px) { .plan-modal-card { padding: 37px 17px 22px; }.modal-features { gap: 11px; }.modal-features li.feature-tile { border-radius: 18px; min-height: 164px; padding: 15px 9px 12px; }.feature-icon { height: 43px; width: 43px; }.feature-tile strong { font-size: 14px; }.feature-tile p { font-size: 11px; }.feature-badge { font-size: 10px; padding: 6px 9px; }.modal-note { font-size: 12px; margin-top: 17px; padding: 13px 12px; } }

/* Crisp iOS-like modal motion: no blur during plan selection, only opacity and springy scale. */
.modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(66, 18, 47, .55); }
.plan-modal-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(145deg, rgba(255, 249, 250, .98), rgba(250, 221, 231, .96)); transition: transform .46s cubic-bezier(.32,.72,0,1), opacity .28s ease; will-change: transform, opacity; }
.plan-modal { transition: opacity .28s ease; }
.plan-modal-card .modal-interest, .plan-modal-card .modal-close { transition: transform .32s cubic-bezier(.32,.72,0,1), box-shadow .22s ease; }
.modal-interest:active, .modal-close:active { transform: scale(.94); }
.modal-bottom { justify-content: center; }
.modal-interest { padding-left: 28px; padding-right: 28px; }
.plan-card, .plan-button { transition: transform .42s cubic-bezier(.32,.72,0,1), box-shadow .32s ease, background-color .25s ease; }
@media (prefers-reduced-motion: reduce) { .plan-modal, .plan-modal-card, .plan-card, .plan-button { transition-duration: .01ms; } }

/* Galactic depth layer: stars stay behind the interface while the plan deck floats above it. */
.space-atmosphere { background-image: radial-gradient(circle at 12% 17%, rgba(255,255,255,.95) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 29%, rgba(255,255,255,.85) 0 1px, transparent 1.5px), radial-gradient(circle at 63% 78%, rgba(255,255,255,.8) 0 1.5px, transparent 2px), radial-gradient(circle at 31% 66%, rgba(255,214,235,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 91% 86%, rgba(255,255,255,.9) 0 1px, transparent 1.5px); background-size: 230px 270px, 370px 430px, 290px 330px, 410px 380px, 510px 470px; inset: 0; opacity: .72; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.space-atmosphere:before, .space-atmosphere:after { background: radial-gradient(ellipse, rgba(227,40,131,.2), transparent 65%); border-radius: 50%; content: ''; filter: blur(24px); height: 380px; position: absolute; width: 580px; }.space-atmosphere:before { left: -220px; top: 16%; }.space-atmosphere:after { bottom: 14%; right: -240px; transform: rotate(-20deg); }
.shooting-star { animation: shootingStar 8s linear infinite; background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.98) 48%, rgba(227,40,131,.45)); border-radius: 999px; filter: drop-shadow(0 0 7px rgba(255,255,255,.9)); height: 2px; opacity: 0; position: absolute; transform: rotate(-28deg); width: 150px; }.shooting-star:after { background: white; border-radius: 50%; box-shadow: 0 0 10px 2px white; content: ''; height: 5px; position: absolute; right: 0; top: -1px; width: 5px; }.shooting-star-one { left: 9%; top: 22%; }.shooting-star-two { animation-delay: 3.6s; right: 4%; top: 47%; transform: rotate(-28deg) scale(.75); }.shooting-star-three { animation-delay: 6.1s; left: 46%; top: 73%; transform: rotate(-28deg) scale(.55); }@keyframes shootingStar { 0%, 72% { opacity: 0; transform: translate3d(0,0,0) rotate(-28deg); } 76% { opacity: 1; } 88% { opacity: .95; transform: translate3d(260px, 145px, 0) rotate(-28deg); } 100% { opacity: 0; transform: translate3d(380px, 210px, 0) rotate(-28deg); } }
.topbar, main, .floating-socials { position: relative; z-index: 1; }
.plans { isolation: isolate; padding-bottom: 160px; }.plans:after { background: radial-gradient(ellipse, rgba(227,40,131,.18), transparent 68%); content: ''; filter: blur(12px); inset: 16% -12% 5%; pointer-events: none; position: absolute; z-index: -1; }
.plans-grid { perspective: 1400px; transform-style: preserve-3d; }
.plan-card, .plan-card:nth-child(1), .plan-card:nth-child(3), .plan-card.featured { box-shadow: 15px 18px 0 rgba(54,15,39,.18), 0 25px 35px rgba(54,15,39,.22), 0 42px 70px rgba(141,29,91,.2), inset 2px 2px 0 rgba(255,255,255,.86), inset -5px -7px 12px rgba(141,29,91,.1); transform: rotateX(8deg) rotateY(-5deg) translateZ(34px); transform-style: preserve-3d; }
.plan-card:after { background: linear-gradient(90deg, rgba(141,29,91,.15), rgba(255,255,255,.48), rgba(141,29,91,.1)); border-radius: 0 0 24px 24px; bottom: -14px; content: ''; height: 18px; left: 14px; opacity: .7; position: absolute; right: 14px; transform: translateZ(-18px) rotateX(-50deg); transform-origin: top; }.plan-card:before { background: rgba(255,255,255,.34); border-radius: 24px; content: ''; inset: 7px; pointer-events: none; position: absolute; transform: translateZ(2px); }
.plan-card.featured { transform: rotateX(8deg) rotateY(0) translateY(-18px) translateZ(64px); }.plan-card:hover, .plan-card:nth-child(1):hover, .plan-card:nth-child(3):hover { box-shadow: 21px 24px 0 rgba(54,15,39,.16), 0 32px 42px rgba(54,15,39,.24), 0 52px 85px rgba(141,29,91,.25), inset 2px 2px 0 rgba(255,255,255,.9), inset -5px -7px 12px rgba(141,29,91,.1); transform: rotateX(2deg) rotateY(-2deg) translateY(-14px) translateZ(78px); }.plan-card.featured:hover { transform: rotateX(2deg) rotateY(2deg) translateY(-32px) translateZ(104px); }
.plan-card.reveal.is-visible:nth-child(1), .plan-card.reveal.is-visible:nth-child(3) { transform: rotateX(8deg) rotateY(-5deg) translateZ(34px); }.plan-card.featured.reveal.is-visible { transform: rotateX(8deg) rotateY(0) translateY(-18px) translateZ(64px); }
@media (max-width: 840px) { .plan-card, .plan-card:nth-child(1), .plan-card:nth-child(3), .plan-card.featured, .plan-card.reveal.is-visible:nth-child(1), .plan-card.reveal.is-visible:nth-child(3), .plan-card.featured.reveal.is-visible { transform: rotateX(4deg) rotateY(-2deg) translateZ(18px) !important; }.plan-card.featured { margin-top: 0; }.plan-card:hover, .plan-card:nth-child(1):hover, .plan-card:nth-child(3):hover, .plan-card.featured:hover { transform: rotateX(1deg) rotateY(0) translateY(-8px) translateZ(35px) !important; } }
@media (max-width: 520px) { .space-atmosphere { opacity: .56; }.shooting-star { width: 105px; }.plan-card, .plan-card:nth-child(1), .plan-card:nth-child(3), .plan-card.featured, .plan-card.reveal.is-visible:nth-child(1), .plan-card.reveal.is-visible:nth-child(3), .plan-card.featured.reveal.is-visible { transform: rotateX(3deg) translateZ(8px) !important; }.plan-card:hover, .plan-card:nth-child(1):hover, .plan-card:nth-child(3):hover, .plan-card.featured:hover { transform: rotateX(1deg) translateY(-5px) translateZ(22px) !important; } }

/* Planet motion: rotating body, orbital ring and moving specular highlight. */
.glass-sphere { animation: planetSpinBack 11s linear infinite; overflow: visible; }
.glass-sphere:before { border: 1px solid rgba(255,255,255,.72); border-radius: 50%; content: ''; height: 124%; left: -12%; position: absolute; top: -12%; transform: rotate(-22deg) scaleY(.27); width: 124%; }
.glass-sphere:after { animation: planetHighlight 4.8s ease-in-out infinite; background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 68%); border-radius: 50%; content: ''; height: 28%; left: 18%; opacity: .82; position: absolute; top: 14%; width: 28%; }
.sphere-front { animation-name: planetSpinFront; animation-duration: 8s; }
@keyframes planetSpinBack { 0% { transform: translateZ(-45px) rotateY(0deg) rotateZ(-4deg); } 50% { transform: translateZ(-45px) rotateY(180deg) rotateZ(4deg); } 100% { transform: translateZ(-45px) rotateY(360deg) rotateZ(-4deg); } }
@keyframes planetSpinFront { 0% { transform: translateZ(72px) rotateY(0deg) rotateZ(5deg); } 50% { transform: translateZ(72px) rotateY(180deg) rotateZ(-5deg); } 100% { transform: translateZ(72px) rotateY(360deg) rotateZ(5deg); } }
@keyframes planetHighlight { 0%, 100% { opacity: .58; transform: translateX(0) scale(.82); } 50% { opacity: 1; transform: translateX(125%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .glass-sphere, .glass-sphere:after { animation: none; } }

/* Touch devices have no hover state, so keep the depth stable and make presses tactile. */
@media (max-width: 520px), (hover: none), (pointer: coarse) {
  .hero-copy:hover,
  .hero-copy.reveal.is-visible:hover { transform: rotateX(2deg) rotateZ(-.3deg) translateZ(50px); }
  .plan-card:hover,
  .plan-card:nth-child(1):hover,
  .plan-card:nth-child(3):hover,
  .plan-card.featured:hover { transform: rotateX(3deg) translateZ(8px) !important; }
  .button:active,
  .plan-button:active,
  .modal-interest:active,
  .nav-cta:active { transform: translateY(3px); }
  .social-orb:active { transform: scale(.9); }
}

@media (max-width: 520px), (hover: none), (pointer: coarse) {
  .hero-copy,
  .hero-copy.reveal.is-visible {
    box-shadow: 16px 20px 0 rgba(141, 29, 91, .18), 0 28px 42px rgba(83, 22, 56, .22), inset 3px 3px 0 rgba(255, 255, 255, .86), inset -4px -5px 10px rgba(141, 29, 91, .1);
    transform: rotateX(5deg) rotateZ(-.5deg) translateZ(42px) translateY(var(--touch-depth, 0px));
  }
  .hero-visual,
  .hero-visual.reveal.is-visible {
    filter: drop-shadow(14px 20px 0 rgba(141, 29, 91, .12));
    transform: rotateX(6deg) rotateZ(2deg) translateZ(30px) translateY(calc(var(--touch-depth, 0px) * -1));
  }
  .image-card {
    box-shadow: 18px 24px 0 rgba(141, 29, 91, .2), 0 28px 42px rgba(83, 22, 56, .22);
  }
  .plan-card,
  .plan-card:nth-child(1),
  .plan-card:nth-child(3),
  .plan-card.featured,
  .plan-card.reveal.is-visible:nth-child(1),
  .plan-card.reveal.is-visible:nth-child(3),
  .plan-card.featured.reveal.is-visible {
    box-shadow: 16px 20px 0 rgba(54, 15, 39, .2), 0 28px 42px rgba(54, 15, 39, .2), inset 2px 2px 0 rgba(255, 255, 255, .86), inset -5px -7px 12px rgba(141, 29, 91, .1);
    transform: rotateX(7deg) rotateY(-3deg) translateZ(24px) !important;
  }
  .plan-card.featured { transform: rotateX(7deg) rotateY(3deg) translateZ(32px) !important; }

  .hero-visual,
  .hero-visual.reveal.is-visible { animation: mobileHeroDepth 5s ease-in-out infinite alternate; will-change: transform; }
  .plan-card,
  .plan-card.reveal.is-visible { animation: mobileCardDepth 4.5s ease-in-out infinite alternate; will-change: transform; }
  .plan-card.featured,
  .plan-card.featured.reveal.is-visible { animation-name: mobileFeaturedDepth; }
}

@keyframes mobileHeroDepth {
  from { transform: rotateX(4deg) rotateZ(1deg) translateZ(26px); }
  to { transform: rotateX(8deg) rotateZ(3deg) translateZ(38px); }
}

@keyframes mobileCardDepth {
  from { transform: rotateX(5deg) rotateY(-3deg) translateZ(18px) !important; }
  to { transform: rotateX(9deg) rotateY(2deg) translateZ(30px) !important; }
}

@keyframes mobileFeaturedDepth {
  from { transform: rotateX(5deg) rotateY(3deg) translateZ(24px) !important; }
  to { transform: rotateX(9deg) rotateY(-2deg) translateZ(38px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-visual.reveal.is-visible,
  .plan-card,
  .plan-card.reveal.is-visible,
  .plan-card.featured,
  .plan-card.featured.reveal.is-visible { animation: none; }
}

/* FAQ deck: a raised glass console floating clearly above the galactic background. */
.faq { perspective: 1500px; position: relative; transform-style: preserve-3d; }
.faq:before { background: radial-gradient(ellipse, rgba(227,40,131,.22), transparent 68%); content: ''; filter: blur(16px); height: 260px; left: 13%; pointer-events: none; position: absolute; top: 30%; transform: translateZ(-80px); width: 74%; }
.faq-intro.reveal.is-visible { transform: rotateY(5deg) rotateX(2deg) translateZ(90px); }
.faq-intro { transform-style: preserve-3d; transition: transform .55s cubic-bezier(.32,.72,0,1); }
.faq-intro:hover { transform: rotateY(2deg) rotateX(1deg) translateZ(110px); }
.faq-list { box-shadow: 18px 23px 0 rgba(54,15,39,.16), 0 35px 55px rgba(54,15,39,.24), 0 52px 90px rgba(141,29,91,.2), inset 3px 3px 0 rgba(255,255,255,.9), inset -6px -8px 16px rgba(141,29,91,.1); padding: 12px 30px; position: relative; transform: rotateY(-5deg) rotateX(2deg) translateZ(110px); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.32,.72,0,1), box-shadow .4s ease; }
.faq-list:before { border: 1px solid rgba(255,255,255,.74); border-radius: 18px; content: ''; inset: 8px; pointer-events: none; position: absolute; transform: translateZ(2px); }.faq-list:after { background: linear-gradient(90deg, rgba(141,29,91,.24), rgba(255,255,255,.46), rgba(141,29,91,.1)); border-radius: 0 0 20px 20px; bottom: -17px; content: ''; height: 20px; left: 20px; position: absolute; right: 20px; transform: translateZ(-25px) rotateX(-48deg); transform-origin: top; }
.faq-list.reveal.is-visible { transform: rotateY(-5deg) rotateX(2deg) translateZ(110px); }
.faq-list:hover, .faq-list.reveal.is-visible:hover { box-shadow: 23px 28px 0 rgba(54,15,39,.14), 0 43px 65px rgba(54,15,39,.25), 0 60px 100px rgba(141,29,91,.23), inset 3px 3px 0 rgba(255,255,255,.92), inset -6px -8px 16px rgba(141,29,91,.1); transform: rotateY(-2deg) rotateX(1deg) translateY(-8px) translateZ(135px); }
.faq-list details { position: relative; transform: translateZ(8px); transition: transform .35s cubic-bezier(.32,.72,0,1), background-color .25s ease; }.faq-list details:hover { background: rgba(255,255,255,.16); transform: translateX(5px) translateZ(20px); }.faq-list details[open] { transform: translateX(4px) translateZ(24px); }.faq-list summary { text-shadow: 0 2px 4px rgba(0,0,0,.12); }
@media (max-width: 840px) { .faq-intro.reveal.is-visible { transform: rotateX(2deg) translateZ(34px); }.faq-list, .faq-list.reveal.is-visible { transform: rotateX(3deg) translateZ(45px); }.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-5px) translateZ(60px); } }
@media (max-width: 520px) { .faq { gap: 40px; }.faq-list { padding-left: 18px; padding-right: 18px; }.faq-list, .faq-list.reveal.is-visible { transform: rotateX(2deg) translateZ(28px); }.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-4px) translateZ(38px); } }
@media (prefers-reduced-motion: reduce) { .faq-intro, .faq-list, .faq-list details { transition: none; } }

/* Keep the FAQ deck inside the viewport while preserving its raised depth. */
.faq { scroll-margin-top: 32px; overflow: visible; }
.faq-intro.reveal.is-visible { transform: rotateY(2deg) rotateX(1deg) translateZ(34px); }
.faq-intro:hover { transform: rotateY(1deg) rotateX(1deg) translateZ(46px); }
.faq-list,
.faq-list.reveal.is-visible { max-width: 100%; transform: rotateY(-2deg) rotateX(1deg) translateZ(42px); }
.faq-list:hover,
.faq-list.reveal.is-visible:hover { transform: rotateY(-1deg) rotateX(1deg) translateY(-5px) translateZ(56px); }
@media (max-width: 840px) { .faq-intro.reveal.is-visible { transform: rotateX(1deg) translateZ(22px); }.faq-list, .faq-list.reveal.is-visible { transform: rotateX(1deg) translateZ(28px); }.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-4px) translateZ(38px); } }
@media (max-width: 520px) { .faq-list, .faq-list.reveal.is-visible { transform: rotateX(1deg) translateZ(16px); }.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-3px) translateZ(24px); } }

/* Desktop safety: depth on the Z axis only, never outside the horizontal viewport. */
@media (min-width: 841px) {
  .faq-intro,
  .faq-intro.reveal.is-visible,
  .faq-intro:hover { transform: rotateX(1deg) translateZ(28px) !important; }
  .faq-list,
  .faq-list.reveal.is-visible,
  .faq-list:hover,
  .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(0) translateZ(32px) !important; }
}

/* Final viewport guard: FAQ depth is expressed with shadows, never by moving its content off-screen. */
.faq-intro,
.faq-intro.reveal.is-visible,
.faq-intro:hover,
.faq-list,
.faq-list.reveal.is-visible,
.faq-list:hover,
.faq-list.reveal.is-visible:hover { transform: none !important; }
.faq-list { box-shadow: 14px 18px 0 rgba(54,15,39,.15), 0 28px 50px rgba(54,15,39,.2), inset 3px 3px 0 rgba(255,255,255,.9), inset -5px -7px 13px rgba(141,29,91,.09); }

/* Final contact deck: a raised 3D closing panel with social identity below the CTA. */
.contact { isolation: isolate; perspective: 1500px; transform: rotateX(4deg) translateZ(70px); transform-style: preserve-3d; box-shadow: 18px 24px 0 rgba(54,15,39,.18), 0 35px 60px rgba(54,15,39,.25), 0 55px 90px rgba(141,29,91,.22), inset 3px 3px 0 rgba(255,255,255,.86), inset -7px -8px 16px rgba(141,29,91,.12); transition: transform .55s cubic-bezier(.32,.72,0,1), box-shadow .45s ease; }
.contact:after { border: 1px solid rgba(255,255,255,.5); border-radius: 28px; bottom: -20px; height: auto; left: 22px; right: 22px; top: auto; transform: translateZ(-35px) rotateX(-48deg); width: auto; }.contact:hover { box-shadow: 23px 30px 0 rgba(54,15,39,.15), 0 45px 72px rgba(54,15,39,.28), 0 65px 105px rgba(141,29,91,.25), inset 3px 3px 0 rgba(255,255,255,.9), inset -7px -8px 16px rgba(141,29,91,.12); transform: rotateX(1deg) translateY(-8px) translateZ(105px); }
.contact h2 { text-shadow: 0 2px 4px rgba(0,0,0,.15); }.contact-social { display: flex; justify-content: center; margin-top: 28px; position: relative; z-index: 2; }.contact-instagram { align-items: center; color: var(--berry); display: inline-flex; font-size: 13px; font-weight: 700; gap: 10px; transition: transform .3s cubic-bezier(.32,.72,0,1); }.contact-instagram:hover { transform: translateY(-4px); }.contact-instagram svg { fill: none; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 28px; }.contact-instagram svg .solid { fill: currentColor; stroke: none; }.contact-foot { align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 840px) { .contact { transform: rotateX(2deg) translateZ(32px); }.contact:hover { transform: rotateX(1deg) translateY(-5px) translateZ(48px); } }
@media (max-width: 520px) { .contact { border-radius: 24px; transform: rotateX(2deg) translateZ(18px); }.contact:hover { transform: rotateX(1deg) translateY(-4px) translateZ(30px); }.contact-foot { font-size: 10px; gap: 9px; } }

/* Focus story modal: two offset 3D scenes with crisp photography and editorial copy. */
.focus-trigger { background: none; border: 0; cursor: pointer; padding: 0; }
.focus-modal { align-items: center; display: grid; inset: 0; justify-items: center; opacity: 0; padding: 20px; pointer-events: none; place-items: center; position: fixed; perspective: 1600px; transition: opacity .35s ease; z-index: 55; }
.focus-modal.is-open { opacity: 1; pointer-events: auto; }
.focus-backdrop { background: rgba(40, 12, 34, .72); inset: 0; position: absolute; }
.focus-modal-card { background: linear-gradient(145deg, rgba(255,249,250,.98), rgba(247,218,230,.96)); border: 1px solid rgba(255,255,255,.95); border-radius: 32px; box-shadow: 24px 30px 0 rgba(54,15,39,.2), 0 40px 90px rgba(35,8,27,.42), inset 3px 3px 0 rgba(255,255,255,.95), inset -8px -10px 18px rgba(141,29,91,.11); max-height: min(860px, calc(100vh - 40px)); max-width: 940px; overflow: auto; padding: 42px 45px 48px; position: relative; transform: rotateX(-7deg) translateY(24px) translateZ(-90px) scale(.94); transition: transform .58s cubic-bezier(.32,.72,0,1); width: 100%; }
.focus-modal.is-open .focus-modal-card { transform: rotateX(0) translateY(0) translateZ(80px) scale(1); }.focus-modal-card:before { border: 1px solid rgba(255,255,255,.76); border-radius: 25px; content: ''; inset: 8px; pointer-events: none; position: absolute; }.focus-close { right: 25px; top: 22px; }
.focus-heading { margin: 0 auto 34px; max-width: 630px; position: relative; text-align: center; }.focus-heading .eyebrow { justify-content: center; }.focus-heading h2 { color: var(--berry); font-family: var(--display); font-size: clamp(42px, 6vw, 68px); letter-spacing: -.1em; line-height: .9; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,.15); }.focus-heading h2 em { color: var(--hot-pink); font-style: normal; }
.focus-story { align-items: center; display: grid; gap: 42px; grid-template-columns: 1fr 1fr; margin: 0 auto 42px; max-width: 800px; position: relative; }.focus-story:last-child { margin-bottom: 0; }.focus-photo { border: 1px solid rgba(255,255,255,.95); border-radius: 24px; box-shadow: 14px 17px 0 rgba(141,29,91,.14), 0 25px 38px rgba(141,29,91,.19), inset 2px 2px 0 rgba(255,255,255,.9); overflow: hidden; position: relative; transform: rotate(-4deg) translateZ(40px); transform-style: preserve-3d; }.focus-photo:before { border: 1px solid rgba(255,255,255,.85); border-radius: 18px; content: ''; inset: 7px; pointer-events: none; position: absolute; z-index: 1; }.focus-photo img { display: block; height: 300px; object-fit: cover; object-position: center; transition: transform .8s cubic-bezier(.32,.72,0,1); width: 100%; }.focus-photo:hover img { transform: scale(1.06); }.focus-photo-right { transform: rotate(4deg) translateZ(40px); }.focus-copy { background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.78); border-radius: 22px; box-shadow: 9px 12px 0 rgba(141,29,91,.09), inset 2px 2px 0 rgba(255,255,255,.83); padding: 25px 27px; transform: translateZ(62px); }.focus-copy p { color: var(--ink); font-family: var(--display); font-size: clamp(17px, 2vw, 22px); letter-spacing: -.04em; line-height: 1.18; margin: 15px 0 22px; }.focus-copy p em { color: var(--hot-pink); font-style: normal; }.focus-number { color: var(--hot-pink); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .12em; }.focus-line { background: var(--berry); display: block; height: 2px; opacity: .45; width: 42px; }.focus-copy-left { text-align: right; }.focus-copy-left .focus-line { margin-left: auto; }
@media (max-width: 700px) { .focus-modal { padding: 12px; }.focus-modal-card { border-radius: 25px; max-height: calc(100vh - 24px); padding: 39px 20px 28px; }.focus-heading { margin-bottom: 26px; }.focus-heading h2 { font-size: 46px; }.focus-story { gap: 18px; grid-template-columns: 1fr 1fr; margin-bottom: 30px; }.focus-photo img { height: 235px; }.focus-copy { padding: 18px 15px; }.focus-copy p { font-size: 14px; line-height: 1.25; margin: 10px 0 15px; }.focus-number { font-size: 10px; }.focus-photo { border-radius: 18px; }.focus-copy { border-radius: 17px; } }
@media (max-width: 430px) { .focus-modal-card { padding-left: 14px; padding-right: 14px; }.focus-story { gap: 11px; }.focus-photo img { height: 210px; }.focus-copy p { font-size: 12px; }.focus-heading h2 { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .focus-modal, .focus-modal-card, .focus-photo img { transition: none; } }

/* Final visual stabilization for FAQ, marquee and contact credit. */
.faq-list { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,249,250,.96) !important; transform: rotateX(2deg) !important; }
.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-4px) !important; }
.marquee-track { animation: marquee 22s linear infinite; width: max-content; }
.developer-credit { border-top: 1px solid rgba(45,24,49,.22); color: var(--berry); font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin: 24px auto 0; padding-top: 15px; position: relative; z-index: 2; }
.contact-foot { margin-top: 36px; }
@media (max-width: 520px) { .faq-list { transform: rotateX(1deg) !important; }.faq-list:hover, .faq-list.reveal.is-visible:hover { transform: rotateX(1deg) translateY(-3px) !important; }.developer-credit { font-size: 11px; margin-top: 20px; }.contact-foot { margin-top: 27px; } }

/* Seamless marquee: two fixed-width groups loop over the exact same distance. */
.marquee-track { animation: marquee 22s linear infinite; display: flex; gap: 0; justify-content: flex-start; min-width: 0; width: max-content; }
.marquee-group { align-items: center; display: flex; flex: 0 0 max(50vw, max-content); gap: 24px; justify-content: space-around; min-width: max(50vw, max-content); padding-right: 24px; }
@media (max-width: 520px) { .marquee-group { gap: 18px; padding-right: 18px; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-20%); } }

/* Keep the banner surface on a crisp pixel plane; only the inner word track moves. */
.marquee-band { transform: none !important; scale: none; backface-visibility: visible; }
.marquee-track { backface-visibility: visible; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; will-change: transform; }
.marquee-track span, .marquee-track b { backface-visibility: visible; text-shadow: 0 1px 1px rgba(96, 9, 55, .2); }

/* Portrait framing: preserve the full subject and turn each frame into a raised 3D object. */
.focus-photo { aspect-ratio: 4 / 5; background: linear-gradient(145deg, #fff8fa, #edc8d7); border: 7px solid rgba(255,255,255,.8); box-shadow: 12px 14px 0 rgba(141,29,91,.18), 0 27px 42px rgba(54,15,39,.24), inset 3px 3px 0 rgba(255,255,255,.95), inset -5px -6px 11px rgba(141,29,91,.14); }
.focus-photo:after { background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(141,29,91,.3)); border-radius: 0 0 18px 18px; bottom: -16px; content: ''; height: 17px; left: 11px; position: absolute; right: 11px; transform: translateZ(-25px) rotateX(-48deg); transform-origin: top; z-index: -1; }
.focus-photo img { height: 100%; object-fit: contain; object-position: center center; padding: 5px; position: relative; transform: translateZ(16px); z-index: 0; }
.focus-photo-left { transform: rotate(-5deg) translateZ(65px) rotateY(2deg); }.focus-photo-right { transform: rotate(5deg) translateZ(65px) rotateY(-2deg); }
.focus-photo-left:hover { transform: rotate(-3deg) translateY(-8px) translateZ(85px) rotateY(1deg); }.focus-photo-right:hover { transform: rotate(3deg) translateY(-8px) translateZ(85px) rotateY(-1deg); }
@media (max-width: 700px) { .focus-photo { border-width: 5px; }.focus-photo img { padding: 3px; }.focus-photo-left { transform: rotate(-4deg) translateZ(36px); }.focus-photo-right { transform: rotate(4deg) translateZ(36px); }.focus-photo-left:hover, .focus-photo-right:hover { transform: translateY(-5px) translateZ(50px); } }

/* Focus window polish: constant slow zoom, a spatial inner backdrop and crisp copy layers. */
.focus-modal-card { background: linear-gradient(135deg, rgba(255,249,250,.99), rgba(246,213,228,.97)); isolation: isolate; overflow: hidden; }
.focus-modal-card:after { background-image: linear-gradient(rgba(141,29,91,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(141,29,91,.055) 1px, transparent 1px); background-size: 42px 42px; content: ''; inset: 0; opacity: .65; pointer-events: none; position: absolute; transform: perspective(700px) rotateX(58deg) scale(1.7) translateY(35%); transform-origin: center bottom; z-index: -1; }
.focus-photo img { animation: focusPhotoZoom 12s ease-in-out infinite alternate; backface-visibility: hidden; image-rendering: auto; }
.focus-photo-right img { animation-delay: -5s; animation-duration: 14s; }
@keyframes focusPhotoZoom { from { transform: translateZ(16px) scale(1); } to { transform: translateZ(16px) scale(1.045); } }
.focus-copy { background: rgba(255,255,255,.82); transform: translateZ(8px); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.focus-copy p, .focus-number { filter: none; opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.08); }
.focus-copy p { color: #321c32; }
.focus-heading h2, .focus-heading .eyebrow { filter: none; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { .focus-photo img { animation: none; } }

/* Crisp modal type: keep the surface and copy on a stable pixel plane. */
.focus-modal { transform: none; }
.focus-modal-card { transform: translateY(18px) scale(.985); transition: opacity .3s ease, transform .42s cubic-bezier(.32,.72,0,1); }
.focus-modal.is-open .focus-modal-card { transform: none; }
.focus-heading, .focus-heading h2, .focus-heading .eyebrow, .focus-copy, .focus-copy p, .focus-copy-left, .focus-copy-right { filter: none; opacity: 1; transform: none; }
.focus-heading h2, .focus-copy p, .focus-number { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.focus-copy { box-shadow: 7px 10px 0 rgba(141,29,91,.09), inset 2px 2px 0 rgba(255,255,255,.83); }
@media (max-width: 700px) { .focus-modal-card { transform: translateY(14px) scale(.99); }.focus-modal.is-open .focus-modal-card { transform: none; } }

/* Final sharpness override: no transformed or composited layer may contain modal copy. */
.focus-modal,
.focus-modal-card,
.focus-heading,
.focus-heading h2,
.focus-heading .eyebrow,
.focus-copy,
.focus-copy p,
.focus-copy-left,
.focus-copy-right { transform: none !important; filter: none !important; }
.focus-modal-card { background: #fff7fa !important; opacity: 1 !important; will-change: auto; }
.focus-modal-card:after { opacity: .25; transform: none; }
.focus-copy { background: #fffafd; }

/* Absolute sharp mode for the focus window: keep depth in shadows only. */
.focus-modal,
.focus-modal-card,
.focus-modal-card:before,
.focus-modal-card:after,
.focus-heading,
.focus-story,
.focus-copy,
.focus-photo,
.focus-photo:before,
.focus-photo:after,
.focus-photo img { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; perspective: none !important; }
.focus-modal-card:after { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(227,40,131,.04)) !important; opacity: 1 !important; transform: none !important; }
.focus-photo,
.focus-photo-left,
.focus-photo-right { transform: none !important; }
.focus-photo img,
.focus-photo-right img { animation: none !important; transform: none !important; backface-visibility: visible !important; object-fit: contain !important; image-rendering: auto; }
.focus-copy,
.focus-copy-left,
.focus-copy-right { background: #fffafd !important; transform: none !important; }
.focus-heading h2,
.focus-heading .eyebrow,
.focus-copy p,
.focus-number { transform: none !important; filter: none !important; opacity: 1 !important; }
.focus-modal-card { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Image-only motion: the modal and all copy stay static and sharp. */
.focus-photo { overflow: hidden; }
.focus-photo img,
.focus-photo-right img { animation: focusPhotoZoomSharp 12s ease-in-out infinite alternate !important; transform-origin: center center; will-change: transform; }
.focus-photo-right img { animation-duration: 14s !important; animation-delay: -5s; }
@keyframes focusPhotoZoomSharp { from { transform: scale(1) !important; } to { transform: scale(1.045) !important; } }
@media (prefers-reduced-motion: reduce) { .focus-photo img, .focus-photo-right img { animation: none !important; } }

/* Keep the long focus story scrollable inside its fixed desktop window. */
.focus-modal-card { height: min(860px, calc(100vh - 40px)); max-height: min(860px, calc(100vh - 40px)); overflow: hidden; }
.focus-modal.is-open .focus-modal-card { overflow-x: hidden; overflow-y: auto; }

/* Final mobile depth pass: this comes after the desktop overrides above. */
@media (max-width: 520px), (hover: none), (pointer: coarse) {
  .hero-copy,
  .hero-copy.reveal.is-visible {
    box-shadow: 16px 20px 0 rgba(141, 29, 91, .18), 0 28px 42px rgba(83, 22, 56, .22), inset 3px 3px 0 rgba(255, 255, 255, .86), inset -4px -5px 10px rgba(141, 29, 91, .1) !important;
    transform: rotateX(5deg) rotateZ(-.5deg) translateZ(42px) translateY(var(--touch-depth, 0px)) !important;
  }
  .hero-visual,
  .hero-visual.reveal.is-visible {
    filter: drop-shadow(14px 20px 0 rgba(141, 29, 91, .12));
    transform: rotateX(6deg) rotateZ(2deg) translateZ(30px) translateY(calc(var(--touch-depth, 0px) * -1)) !important;
  }
  .image-card { box-shadow: 18px 24px 0 rgba(141, 29, 91, .2), 0 28px 42px rgba(83, 22, 56, .22) !important; }
  .plan-card,
  .plan-card:nth-child(1),
  .plan-card:nth-child(3),
  .plan-card.featured,
  .plan-card.reveal.is-visible:nth-child(1),
  .plan-card.reveal.is-visible:nth-child(3),
  .plan-card.featured.reveal.is-visible {
    box-shadow: 16px 20px 0 rgba(54, 15, 39, .2), 0 28px 42px rgba(54, 15, 39, .2), inset 2px 2px 0 rgba(255, 255, 255, .86), inset -5px -7px 12px rgba(141, 29, 91, .1) !important;
    transform: rotateX(7deg) rotateY(-3deg) translateZ(24px) !important;
  }
  .plan-card.featured { transform: rotateX(7deg) rotateY(3deg) translateZ(32px) !important; }
}