:root {
  color-scheme: dark;
  --ink: #100b10;
  --panel: #191017;
  --line: #49303e;
  --white: #fff4f8;
  --muted: #b4a4ac;
  --pink: #ff71a7;
  --pink-soft: #ffb4cd;
  --gold: #f8d478;
  --green: #83e7ac;
  --mono: 'Courier New', monospace;
  --sans: 'Trebuchet MS', Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--ink); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--white);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse at 78% 5%, rgba(126,28,73,.2), transparent 34rem),
    radial-gradient(ellipse at 8% 57%, rgba(133,27,49,.1), transparent 30rem),
    repeating-linear-gradient(125deg, transparent 0 79px, rgba(255,255,255,.012) 80px 81px),
    var(--ink);
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.skip-link { position: absolute; z-index: 5; top: -50px; left: 16px; padding: 10px 14px; color: var(--ink); background: var(--pink-soft); }
.skip-link:focus { top: 12px; }
.site-header { width: min(1160px,100% - 48px); height: 74px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font: 11px var(--mono); letter-spacing: .7px; }
.brand b { color: var(--pink-soft); font-weight: 400; }
.brand-mark { color: var(--pink); font: 25px var(--serif); }
.header-nav { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 12px; }
.header-nav a { text-decoration: none; transition: color .2s ease; }
.header-nav a:hover { color: var(--white); }
.header-nav .header-cta { padding: 10px 14px; border: 1px solid rgba(255,113,167,.36); border-radius: 3px; color: var(--pink-soft); font: 10px var(--mono); }
.header-cta span { margin-left: 7px; }
.section-shell { width: min(1100px,100% - 48px); margin-right: auto; margin-left: auto; }
.hero { min-height: 580px; padding-top: 60px; padding-bottom: 56px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 35px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 8px; }
.eyebrow { margin: 0; color: var(--pink); font: 10px var(--mono); letter-spacing: 1.25px; }
.hero .eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(131,231,172,.55); }
.hero h1 { margin: 22px 0 0; font: 700 clamp(50px,6.5vw,76px)/.98 var(--serif); letter-spacing: -2.5px; }
.hero h1 span,.section-heading h2 span,.experience-copy h2 span,.quote-card p span,.final-cta h2 span { color: var(--pink); }
.hero-description { max-width: 480px; margin: 21px 0 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; font: 10px var(--mono); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: rgba(255,174,205,.7); color: var(--white); background: linear-gradient(135deg,#8f3d61,#51233e); box-shadow: 0 8px 24px rgba(255,65,131,.12); }
.button-primary:hover { background: linear-gradient(135deg,#a64d72,#632a4a); }
.button-secondary { border-color: var(--line); color: var(--pink-soft); background: rgba(25,16,23,.58); }
.button-secondary:hover { border-color: rgba(255,113,167,.65); }
.eligibility { margin: 12px 0 0; color: #c09eae; font-size: 11px; line-height: 1.6; letter-spacing: .15px; }
.purchase-link { min-height: 40px; margin-top: 16px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,174,205,.58); border-radius: 3px; color: var(--white); background: linear-gradient(135deg,rgba(116,49,79,.88),rgba(57,26,44,.96)); box-shadow: 0 5px 17px rgba(255,65,131,.1); font: 10px var(--mono); text-decoration: none; transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.purchase-link span { color: var(--pink-soft); font-size: 14px; }
.purchase-link:hover { transform: translateY(-2px); border-color: var(--pink); background: linear-gradient(135deg,#8f3d61,#51233e); box-shadow: 0 8px 22px rgba(255,65,131,.22); }
.purchase-contact a:hover,.final-contact a:hover { color: var(--white); }
.purchase-contact { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.purchase-contact a,.final-contact a { color: var(--pink-soft); text-underline-offset: 3px; }
.hero-art { min-height: 435px; position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero-art::before { width: 330px; height: 330px; position: absolute; z-index: -2; border: 1px solid rgba(255,113,167,.1); border-radius: 50%; background: radial-gradient(circle,rgba(139,41,84,.2),rgba(25,14,24,.04) 68%); box-shadow: 0 0 80px rgba(255,74,133,.1); content: ''; }
.art-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,190,213,.12); border-radius: 50%; }
.orbit-one { width: 390px; height: 160px; transform: rotate(-30deg); }
.orbit-two { width: 390px; height: 160px; transform: rotate(30deg); }
.art-board { width: 236px; aspect-ratio: 1; padding: 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; border: 1px solid rgba(255,190,213,.26); border-radius: 8px; background: linear-gradient(145deg,rgba(56,28,46,.94),rgba(21,13,20,.97)); box-shadow: 0 25px 65px rgba(0,0,0,.4),0 0 45px rgba(255,113,167,.12); transform: rotate(-8deg) translate(-18px,8px); }
.art-board span { display: grid; place-items: center; border: 1px solid rgba(255,190,213,.13); border-radius: 3px; color: rgba(255,232,241,.7); background: rgba(255,219,232,.045); font: 10px var(--mono); }
.art-board span:nth-child(4n+1) { color: var(--pink-soft); background: rgba(255,113,167,.12); }
.art-board span:nth-child(7) { color: var(--green); background: rgba(131,231,172,.12); }
.art-board .board-heart { color: var(--pink); font-size: 17px; }
.art-board .board-star { color: var(--gold); font-size: 19px; }
.art-card { width: 142px; height: 204px; position: absolute; top: 50%; left: 54%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 19px; border: 1px solid #bd6889; border-radius: 9px; color: var(--pink-soft); background: repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 3px,transparent 3px 10px),linear-gradient(145deg,#63334d,#261722 77%); box-shadow: 0 18px 35px rgba(0,0,0,.48),inset 0 0 0 5px #291521,inset 0 0 0 6px rgba(255,163,194,.25); transform: translate(-8%,-37%) rotate(10deg); }
.card-heart { color: var(--pink); font: 40px var(--serif); text-shadow: 0 0 22px rgba(255,113,167,.65); }
.card-caption { text-align: center; font: 9px/1.7 var(--mono); letter-spacing: 1.7px; }
.card-spark { position: absolute; right: 16px; bottom: 16px; color: var(--gold); font-size: 22px; }
.art-heart { position: absolute; color: rgba(255,113,167,.56); }
.heart-one { top: 72px; right: 64px; font-size: 26px; transform: rotate(15deg); }
.heart-two { bottom: 65px; left: 65px; font-size: 19px; transform: rotate(-14deg); }
.art-label { position: absolute; padding: 7px 9px; border: 1px solid rgba(255,190,213,.21); border-radius: 2px; color: var(--pink-soft); background: rgba(16,11,16,.78); font: 8px var(--mono); letter-spacing: 1px; }
.label-one { top: 64px; left: 18px; transform: rotate(-8deg); }
.label-two { right: 5px; bottom: 67px; transform: rotate(7deg); }
.trust-strip { min-height: 100px; padding: 18px max(24px,calc((100% - 1040px)/2)); display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 25px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(25,16,23,.45); }
.trust-strip > div { display: flex; align-items: center; gap: 13px; }
.trust-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(255,113,167,.25); border-radius: 50%; color: var(--pink); font: 13px var(--mono); }
.trust-strip strong,.trust-strip small { display: block; }
.trust-strip strong { font: 13px var(--serif); }
.trust-strip small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.features { padding-top: 94px; padding-bottom: 96px; }
.section-heading { max-width: 640px; }
.section-heading h2,.experience-copy h2 { margin: 15px 0 0; font: 700 clamp(36px,4.5vw,52px)/1.04 var(--serif); letter-spacing: -1px; }
.section-heading > p:last-child { max-width: 510px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.feature-grid { margin-top: 37px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; align-items: stretch; }
.feature-card { min-width: 0; position: relative; padding: 21px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(150deg,rgba(36,22,33,.96),rgba(20,13,19,.96)); }
.feature-card.featured-card { border-color: rgba(255,113,167,.63); box-shadow: 0 12px 38px rgba(255,65,131,.07); }
.feature-number { display: flex; justify-content: space-between; color: var(--pink); font: 10px var(--mono); letter-spacing: 1px; }
.feature-number span { color: #94828d; font-size: 8px; }
.feature-icon { height: 116px; position: relative; margin: 21px 0 18px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 3px; background: radial-gradient(ellipse at center,rgba(122,42,77,.26),rgba(12,8,13,.5) 72%); }
.board-icon { grid-template-columns: repeat(2,35px); grid-template-rows: repeat(2,35px); gap: 3px; }
.board-icon i { border: 1px solid rgba(255,190,213,.29); border-radius: 3px; background: rgba(255,113,167,.08); }
.board-icon i:nth-child(2) { background: rgba(131,231,172,.1); }
.board-icon b { position: absolute; color: var(--pink); font: 24px var(--serif); }
.cards-icon i { width: 53px; height: 72px; position: absolute; border: 1px solid #b56382; border-radius: 5px; background: linear-gradient(145deg,#69354e,#24151f); box-shadow: inset 0 0 0 3px #27141e; }
.cards-icon i:first-child { transform: translate(-14px,3px) rotate(-14deg); }
.cards-icon i:nth-child(2) { transform: translate(14px,-3px) rotate(13deg); }
.cards-icon b { z-index: 1; color: var(--pink-soft); font: 26px var(--serif); }
.gallery-icon > span { color: var(--pink-soft); font-size: 52px; text-shadow: 0 0 24px rgba(255,113,167,.5); }
.gallery-icon b { position: absolute; top: 22px; right: calc(50% - 57px); padding: 4px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--white); background: #21141d; font: 9px var(--mono); }
.feature-card h3 { margin: 0; font: 700 23px var(--serif); }
.feature-card > p { min-height: 83px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.feature-card ul { margin: 15px 0 0; padding: 13px 0 0; display: grid; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); list-style: none; }
.feature-card li { color: #cfbfc7; font-size: 10px; }
.feature-card li::before { margin-right: 8px; color: var(--pink); content: '✦'; }
.featured-label { position: absolute; top: -10px; right: 14px; padding: 5px 8px; border: 1px solid rgba(255,113,167,.53); border-radius: 2px; color: var(--pink-soft); background: #26131f; font: 7px var(--mono); letter-spacing: .8px; }
.experience { padding-top: 8px; padding-bottom: 97px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 74px; }
.experience-art { min-height: 350px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,190,213,.14); border-radius: 5px; background: radial-gradient(ellipse at center,rgba(117,38,74,.32),rgba(22,13,20,.92) 72%); }
.experience-art::before,.experience-art::after { width: 270px; height: 270px; position: absolute; border: 1px solid rgba(255,190,213,.1); border-radius: 50%; content: ''; }
.experience-art::after { width: 205px; height: 205px; }
.experience-heart { position: absolute; top: 24px; left: 30px; color: rgba(255,113,167,.48); font-size: 49px; transform: rotate(-12deg); }
.experience-spark { position: absolute; right: 29px; bottom: 30px; color: var(--gold); font-size: 32px; }
.quote-card { width: min(315px,80%); position: relative; z-index: 1; padding: 28px 24px; border: 1px solid rgba(255,190,213,.28); border-radius: 4px; background: linear-gradient(145deg,rgba(43,26,39,.97),rgba(23,15,22,.97)); box-shadow: 0 20px 55px rgba(0,0,0,.32); transform: rotate(-3deg); }
.quote-card .eyebrow { font-size: 8px; }
.quote-card p { margin: 20px 0 22px; font: 700 34px/1.08 var(--serif); }
.quote-card small { color: #a995a1; font: 8px var(--mono); letter-spacing: .7px; }
.experience-copy > p:not(.eyebrow) { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.comfort-list { margin: 22px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.comfort-list li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.comfort-list li > span:first-child { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(131,231,172,.45); border-radius: 50%; color: var(--green); font-size: 10px; }
.comfort-list strong { color: var(--white); }
.how-to { padding-top: 67px; padding-bottom: 72px; border-top: 1px solid rgba(255,255,255,.07); }
.steps { margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; }
.steps li { min-height: 104px; padding: 18px 16px; display: flex; gap: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; background: rgba(25,16,23,.58); }
.steps li > span { color: var(--pink); font: 12px var(--mono); }
.steps h3 { margin: 0; font: 16px var(--serif); }
.steps p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.offline-note { margin: 22px 0 0; color: #a895a0; font-size: 10px; line-height: 1.65; }
.offline-note span { margin-right: 7px; color: var(--green); }
.final-cta { padding: 75px 24px 78px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(ellipse at 50% 30%,rgba(123,36,76,.25),transparent 33rem),rgba(25,16,23,.38); text-align: center; }
.final-cta-inner { max-width: 620px; margin: 0 auto; }
.cta-heart { display: block; margin-bottom: 17px; color: var(--pink); font: 30px var(--serif); text-shadow: 0 0 20px rgba(255,113,167,.45); }
.final-cta h2 { margin: 15px 0 0; font: 700 clamp(40px,5vw,56px)/1 var(--serif); }
.final-cta-inner > p:not(.eyebrow) { margin: 14px 0 21px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.final-cta .button { min-width: 236px; }
.final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-cta-actions .button-secondary { min-width: 220px; }
.final-contact { margin: 15px 0 0; color: var(--muted); font-size: 10px; }
.final-cta small { margin-top: 17px; display: block; color: #9d8995; font-size: 9px; }
.site-footer { width: min(1100px,100% - 48px); min-height: 90px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; }
.site-footer > p { max-width: 550px; margin: 0; color: #96848f; font-size: 9px; line-height: 1.65; text-align: center; }
.site-footer > a:last-child { color: var(--pink-soft); font: 9px var(--mono); text-decoration: none; }
.site-footer > a:last-child span { margin-left: 5px; }
@media (max-width: 780px) {
  .hero { min-height: 500px; grid-template-columns: 1fr .82fr; gap: 15px; }
  .hero h1 { font-size: clamp(48px,8vw,65px); }
  .hero-art { min-height: 360px; transform: scale(.88); }
  .trust-strip { padding-right: 24px; padding-left: 24px; gap: 12px; }
  .trust-strip > div { gap: 8px; }
  .trust-strip small { font-size: 9px; }
  .feature-card { padding: 16px; }
  .feature-card h3 { font-size: 20px; }
  .feature-card > p { min-height: 102px; }
  .experience { gap: 38px; }
}
@media (max-width: 600px) {
  .site-header { width: calc(100% - 32px); height: 61px; }
  .brand { gap: 7px; font-size: 9px; }
  .brand-mark { font-size: 22px; }
  .header-nav { gap: 13px; }
  .header-nav > a:not(.header-cta) { display: none; }
  .header-nav .header-cta { padding: 9px 10px; font-size: 8px; }
  .section-shell { width: calc(100% - 36px); }
  .hero { min-height: auto; padding-top: 50px; padding-bottom: 34px; grid-template-columns: 1fr; gap: 3px; }
  .hero h1 { margin-top: 17px; font-size: clamp(48px,13vw,66px); }
  .hero-description { margin-top: 15px; font-size: 13px; }
  .hero-actions { margin-top: 21px; gap: 9px; }
  .button { min-height: 43px; padding-right: 12px; padding-left: 12px; gap: 10px; font-size: 9px; }
  .eligibility { margin-top: 10px; font-size: 10px; }
  .purchase-link { margin-top: 13px; font-size: 9px; }
  .purchase-contact { font-size: 9px; }
  .hero-art { min-height: 316px; margin-top: 3px; transform: scale(.83); }
  .art-board { width: 216px; }
  .art-card { width: 127px; height: 184px; }
  .heart-one { right: 34px; }
  .trust-strip { padding: 16px 20px; grid-template-columns: 1fr; gap: 14px; }
  .trust-icon { width: 33px; height: 33px; flex-basis: 33px; }
  .trust-strip small { margin-top: 3px; }
  .features { padding-top: 67px; padding-bottom: 66px; }
  .section-heading h2,.experience-copy h2 { font-size: 39px; }
  .section-heading > p:last-child { font-size: 12px; }
  .feature-grid { margin-top: 27px; grid-template-columns: 1fr; gap: 14px; }
  .feature-card { padding: 19px; }
  .feature-icon { height: 106px; margin-top: 17px; margin-bottom: 15px; }
  .feature-card > p { min-height: 0; }
  .experience { padding-bottom: 65px; grid-template-columns: 1fr; gap: 29px; }
  .experience-art { min-height: 278px; }
  .quote-card { max-width: 290px; padding: 22px; }
  .quote-card p { margin: 16px 0 19px; font-size: 30px; }
  .how-to { padding-top: 55px; padding-bottom: 56px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .steps li { min-height: 0; padding: 15px; }
  .final-cta { padding: 61px 20px 63px; }
  .final-cta h2 { font-size: 45px; }
  .final-cta-actions { align-items: stretch; flex-direction: column; }
  .final-cta-actions .button,.final-cta-actions .button-secondary { min-width: 0; width: 100%; }
  .final-contact { font-size: 9px; }
  .site-footer { width: calc(100% - 36px); padding-top: 22px; padding-bottom: 24px; grid-template-columns: 1fr auto; gap: 15px; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .site-footer > a:last-child { font-size: 8px; }
}
@media (max-width: 360px) {
  .section-shell { width: calc(100% - 28px); }
  .hero h1 { font-size: 45px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1; }
  .hero-art { min-height: 285px; transform: scale(.75); }
  .section-heading h2,.experience-copy h2 { font-size: 35px; }
  .site-footer { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
