/* =================================================================
   == MEMORYCHAIN — LANDING PAGE (style.css) · Revision R
   == Blocks C1–C7 + R1 premium pass + R2–R5 digital gift journey
   ================================================================= */

/* =================================================================
   == Block C1: FOUNDATION — Tokens, Reset, Type, Buttons, Reveal
   ================================================================= */

/* SECTION C1.1: Design Tokens */
:root {
  --rose:        #B76E79;
  --rose-light:  #D4959E;
  --rose-deep:   #9A5562;
  --plum:        #6B4C5E;
  --plum-light:  #8B6478;
  --plum-deep:   #4A3040;
  --cream:       #FAF6F0;
  --cream-warm:  #F5EDE3;
  --gold:        #C9A96E;
  --gold-light:  #E8D5A8;
  --white:       #FFFFFF;
  --text-dark:   #2C2C2C;
  --text-mid:    #4A4A4A;
  --text-light:  #6B6B6B;
  --border:      #E8E0D5;

  --font-display: 'Playfair Display', serif;
  --font-drama:   'Cormorant Garamond', serif;
  --font-ui:      'Inter', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-rose: 0 18px 40px -14px rgba(183, 110, 121, 0.35);

  /* R1: reusable premium gradients */
  --grad-gold-text: linear-gradient(115deg, var(--gold-light) 0%, var(--gold) 45%, var(--rose-light) 100%);
  --grad-rose-text: linear-gradient(115deg, var(--rose-deep) 0%, var(--plum) 100%);
  --grad-btn:       linear-gradient(135deg, var(--rose), var(--plum));
}

/* SECTION C1.2: Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; border: none; background: none; cursor: pointer; }
ul { list-style: none; }

/* SECTION C1.3: Layout Helpers */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 780px; }
section { padding: 96px 0; }

/* SECTION C1.4: Section Type System — R1 premium pass */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
/* gold flourish lines flanking every section label */
.section-label::before,
.section-label::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-label::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.18;
  margin-bottom: 18px;
}
/* R1: accented word inside headings — italic serif, rose→plum gradient ink */
.section-heading em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  background: var(--grad-rose-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rose-deep); /* fallback */
}

.section-subtext {
  font-family: var(--font-drama);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 40px;
}

/* SECTION C1.5: Buttons — pill shaped everywhere */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s;
}
.btn:hover { transform: translateY(-2px); }

.btn-hero-primary { background:var(--gold-light); color:var(--plum-deep); box-shadow:0 10px 30px -8px rgba(0,0,0,.35); }

.btn-hero-primary:hover { background:var(--gold); color:var(--plum-deep); box-shadow:0 16px 36px -8px rgba(0,0,0,.45),0 0 0 3px rgba(232,213,168,.28); }
.btn-hero-ghost {
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-hero-ghost:hover { border-color: var(--gold-light); background: rgba(255,255,255,0.08); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  font-weight: 600;
}
.wa-icon { font-size: 0.8em; margin-right: 6px; }

/* SECTION C1.6: Reveal-on-Scroll Utility */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* SECTION C1.7: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =================================================================
   == Block C2: NAVBAR + MOBILE MENU
   ================================================================= */

/* SECTION C2.1: Navbar Base (transparent over hero) */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin-right: auto;
  transition: color 0.4s;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--gold-light); }

.nav-cta {
  padding: 10px 24px;
  border-radius: 100px;
  background: var(--white);
  color: var(--plum-deep);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.4s, color 0.4s, transform 0.3s;
}
.nav-cta:hover { transform: translateY(-1px); }

/* SECTION C2.2: Navbar Scrolled (frosted cream) */
.navbar.scrolled {
  background: rgba(250, 246, 240, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
  padding: 12px 0;
}
.navbar.scrolled .nav-logo { color: var(--plum-deep); }
.navbar.scrolled .nav-links a { color: var(--text-mid); }
.navbar.scrolled .nav-links a:hover { color: var(--rose-deep); }
.navbar.scrolled .nav-cta {
  background: var(--grad-btn);
  color: var(--white);
}

/* SECTION C2.3: Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-hamburger span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: background 0.4s;
}
.navbar.scrolled .nav-hamburger span { background: var(--plum-deep); }

/* SECTION C2.4: Mobile Menu Overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(160deg, var(--plum-deep), var(--rose-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-close {
  position: absolute;
  top: 20px; right: 28px;
  font-size: 2.4rem;
  color: var(--white);
  line-height: 1;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
.mobile-menu-links a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--white);
}
.mobile-menu-cta {
  margin-top: 10px;
  padding: 14px 36px;
  border-radius: 100px;
  background: var(--white);
  color: var(--plum-deep) !important;
  font-family: var(--font-ui) !important;
  font-size: 1rem !important;
  font-weight: 600;
}

/* =================================================================
   == Block C3: HERO — R1 Premium Canvas + Copy
   ================================================================= */

/* =================================================================
   == SECTION C3.1: HERO CANVAS — MEMORYCHAIN BRAND COLORS
   ================================================================= */

.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:140px 0 80px;
  background:linear-gradient(150deg,var(--plum-deep) 0%,var(--plum) 38%,var(--rose-deep) 72%,#7A3D4D 100%);
  overflow:hidden;
}

/* SECTION C3.2: Grain Overlay */
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  pointer-events: none;
}

/* SECTION C3.3: R1 — Soft Light Orbs (slow-breathing atmosphere) */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: orb-breathe 9s ease-in-out infinite;
}

.hero-orb-rose { width:420px; height:420px; top:-120px; right:-80px; background:radial-gradient(circle,rgba(212,149,158,.18),rgba(212,149,158,0)); }

.hero-orb-gold { width:340px; height:340px; bottom:-100px; left:-60px; background:radial-gradient(circle,rgba(232,213,168,.06),rgba(232,213,168,0)); animation-delay:-4.5s; }

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* SECTION C3.4: Floating Memory Elements */
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }

.particle { position:absolute; display:block; opacity:.16; animation:particle-float 18s ease-in-out infinite alternate; will-change:transform; }

/* Photo memory */
.particle:nth-child(4n+1) { width:26px; height:21px; border:1px solid var(--gold-light); border-radius:4px; background:transparent; }
.particle:nth-child(4n+1)::before { content:''; position:absolute; left:5px; bottom:5px; width:7px; height:7px; border-radius:50%; background:var(--gold-light); opacity:.55; }
.particle:nth-child(4n+1)::after { content:''; position:absolute; left:10px; bottom:4px; width:11px; height:8px; border-left:1px solid var(--gold-light); border-top:1px solid var(--gold-light); transform:rotate(45deg); opacity:.65; }

/* Voice memory */
.particle:nth-child(4n+2) { width:28px; height:18px; background:linear-gradient(var(--gold-light),var(--gold-light)) 2px 7px/2px 4px no-repeat,linear-gradient(var(--gold-light),var(--gold-light)) 8px 4px/2px 10px no-repeat,linear-gradient(var(--gold-light),var(--gold-light)) 14px 1px/2px 16px no-repeat,linear-gradient(var(--gold-light),var(--gold-light)) 20px 5px/2px 8px no-repeat,linear-gradient(var(--gold-light),var(--gold-light)) 26px 7px/2px 4px no-repeat; opacity:.13; }
/* Story memory */
.particle:nth-child(4n+3) { width:30px; height:22px; border:1px solid rgba(255,255,255,.55); border-radius:4px; background:linear-gradient(rgba(255,255,255,.55) 0 0) 6px 6px/18px 1px no-repeat,linear-gradient(rgba(255,255,255,.38) 0 0) 6px 11px/14px 1px no-repeat,linear-gradient(rgba(255,255,255,.3) 0 0) 6px 16px/10px 1px no-repeat; }

/* Memory heart */
.particle:nth-child(4n) { width:10px; height:10px; background:var(--rose-light); transform:rotate(45deg); border-radius:2px; opacity:.14; }
.particle:nth-child(4n)::before,.particle:nth-child(4n)::after { content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:inherit; }
.particle:nth-child(4n)::before { left:-5px; }
.particle:nth-child(4n)::after { top:-5px; }

@keyframes particle-float {
  0% { transform:translate(0,0) rotate(0deg); }
  50% { transform:translate(10px,-18px) rotate(3deg); }
  100% { transform:translate(-8px,-34px) rotate(-3deg); }
}

/* SECTION C3.5: Hero Layout & R1 Premium Copy */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
}

/* eyebrow — small gilded whisper above the headline */
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); -webkit-text-fill-color:var(--gold-light); opacity:1; margin-bottom:22px; }

.hero-eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* two-tone headline: line 1 white, line 2 gilded italic */
.hero-headline { font-family:var(--font-display); font-size:clamp(2.3rem,4.8vw,3.6rem); font-weight:700; line-height:1.14; margin-bottom:22px; color:var(--white); }

.hero-line-1 { display:block; color:var(--white); -webkit-text-fill-color:var(--white); }

.hero-line-2 { display:block; font-style:italic; font-weight:600; color:var(--gold-light); -webkit-text-fill-color:var(--gold-light); background:none; -webkit-background-clip:initial; background-clip:initial; padding-right:4px; }

.hero-sub { font-family:var(--font-drama); font-size:clamp(1.2rem,2.1vw,1.45rem); color:rgba(255,255,255,.90); -webkit-text-fill-color:rgba(255,255,255,.90); max-width:470px; margin-bottom:34px; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }

/* SECTION C3.6: Trust Row */
.hero-trust { display:none; align-items:center; gap:14px; }
.trust-avatars { display: flex; }
.trust-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--plum-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
  margin-left: -8px;
}
.trust-avatar:first-child { margin-left: 0; }
.av-1 { background: var(--rose); }
.av-2 { background: var(--gold); }
.av-3 { background: var(--plum-light); }
.av-4 { background: var(--rose-light); }
.trust-text { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* SECTION C3.7: Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 40px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  z-index: 2;
}
.scroll-dot {
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.8);
  animation: scroll-nudge 2s ease-in-out infinite;
}
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0.2; }
}

/* =================================================================
   == SECTION R2: HERO STAGE
   ================================================================= */

.hero-journey { position:relative; width:100%; max-width:520px; height:360px; justify-self:end; overflow:visible; }

/* Phone anchors supplied by script.js */
.hero-journey { --phone-a-x:90px; --phone-a-y:220px; --phone-b-x:380px; --phone-b-y:220px; }

/* Responsive stage only */
@media (max-width:900px) { .hero-journey { max-width:460px; height:300px; margin:0 auto; justify-self:center; } }

@media (max-width:560px) { .hero-journey { max-width:380px; height:250px; transform:scale(.86); transform-origin:top center; } }


/* =================================================================
   == SECTION R3: PEOPLE + PHONES
   ================================================================= */

/* SECTION R3.1: Shared person structure */
.person { position:absolute; bottom:36px; width:82px; height:144px; transform-origin:50% 100%; }
.person-sender { left:4%; animation:person-a-idle 7s ease-in-out infinite; }
.person-receiver { right:4%; }

.p-head { position:absolute; top:0; width:36px; height:38px; border-radius:48% 48% 46% 46%; background:linear-gradient(145deg,var(--rose-light),var(--plum-light)); box-shadow:inset 0 -3px 6px rgba(74,48,64,.10),0 2px 6px rgba(0,0,0,.10); z-index:3; }
.person-sender .p-head { left:26px; transform:rotate(2deg); }
.person-receiver .p-head { right:26px; transform:rotate(-2deg); }

.p-head::before,.p-head::after { content:''; position:absolute; top:16px; width:2.5px; height:3.5px; border-radius:50%; background:rgba(74,48,64,.78); animation:person-eye-blink 7s infinite; }
.person-sender .p-head::before { left:19px; }
.person-sender .p-head::after { left:25px; }
.person-receiver .p-head::before { right:19px; animation-delay:.6s; }
.person-receiver .p-head::after { right:25px; animation-delay:.6s; }


/* SECTION R3.2: Bodies + arms */
.p-body { position:absolute; top:40px; width:54px; height:88px; border-radius:27px 27px 14px 14px; box-shadow:inset 0 3px 8px rgba(255,255,255,.06),inset 0 -6px 10px rgba(74,48,64,.14); }
.person-sender .p-body { left:11px; background:linear-gradient(160deg,#876275,var(--plum)); }
.person-receiver .p-body { right:11px; background:linear-gradient(160deg,var(--rose-light),#876275); }

.p-body::before { content:''; position:absolute; top:-7px; left:50%; width:13px; height:12px; transform:translateX(-50%); border-radius:6px; background:linear-gradient(180deg,var(--rose-light),var(--plum-light)); }

.p-arm { position:absolute; top:66px; width:34px; height:8px; border-radius:7px; background:linear-gradient(90deg,var(--plum-light),var(--rose-light)); z-index:4; }
.person-sender .p-arm { left:42px; transform:rotate(-8deg); transform-origin:left center; }
.person-receiver .p-arm { right:42px; transform:rotate(8deg); transform-origin:right center; }


/* SECTION R3.3: Phones */
.p-phone { position:absolute; top:40px; width:24px; height:41px; border-radius:6px; background:linear-gradient(160deg,#382431,var(--plum-deep)); border:1.5px solid rgba(232,213,168,.72); box-shadow:0 4px 12px rgba(0,0,0,.34),0 0 7px rgba(232,213,168,.12); z-index:5; }

.person-sender .p-phone { left:58px; transform:rotate(6deg); }
.person-receiver .p-phone { right:58px; transform:rotate(-6deg); }

.p-phone::before { content:''; position:absolute; top:3px; left:50%; width:7px; height:1.5px; transform:translateX(-50%); border-radius:2px; background:rgba(232,213,168,.55); }

.p-screen { position:absolute; inset:4px 3px 3px; border-radius:3px; background:linear-gradient(160deg,var(--plum-light),var(--plum-deep)); }


/* SECTION R3.4: Basic person animation */
@keyframes person-a-idle {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-1px) rotate(.2deg); }
}

@keyframes person-eye-blink {
  0%,44%,46%,74%,76%,100% { transform:scaleY(1); }
  45%,75% { transform:scaleY(.12); }
}

/* =================================================================
   == SECTION R4: PERSON A MEMORY INPUTS
   ================================================================= */

/* R4.1 Shared */
.mem { position:absolute; transform:translate(-50%,-50%); opacity:0; z-index:7; animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; }

/* R4.2 Photo */
.mem-photo { left:28px; top:96px; animation-name:memory-photo-in; }
.mem-photo-inner { display:block; width:32px; height:26px; border:2px solid var(--gold-light); border-radius:5px; background:var(--cream); position:relative; }
.mem-photo-inner::after { content:''; position:absolute; inset:4px 4px 9px; border-radius:2px; background:linear-gradient(135deg,var(--rose-light),var(--gold-light)); }

/* R4.3 Voice */
.mem-voice { left:18px; top:150px; display:flex; align-items:flex-end; gap:3px; padding:6px 8px; border:1px solid rgba(232,213,168,.55); border-radius:10px; background:rgba(255,255,255,.12); animation-name:memory-voice-in; }
.voice-bar { width:3px; border-radius:2px; background:var(--gold-light); }
.b1 { height:7px; } .b2 { height:13px; } .b3 { height:5px; }

/* R4.4 Story */
.mem-story { left:45px; top:202px; width:38px; padding:6px; border-radius:5px; background:rgba(255,255,255,.94); animation-name:memory-story-in; }
.story-line { display:block; height:2px; margin-bottom:3px; border-radius:2px; background:var(--plum-light); }
.story-line:last-child { width:60%; margin-bottom:0; }

/* R4.5 Photo → Phone A */
@keyframes memory-photo-in {
  0%,2% { opacity:0; }
  5% { opacity:1; left:28px; top:96px; transform:translate(-50%,-50%) scale(1); }
  11% { opacity:1; }
  16%,100% { left:var(--phone-a-x); top:var(--phone-a-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* R4.6 Voice → Phone A */
@keyframes memory-voice-in {
  0%,6% { opacity:0; }
  9% { opacity:1; left:18px; top:150px; transform:translate(-50%,-50%) scale(1); }
  14% { opacity:1; }
  19%,100% { left:var(--phone-a-x); top:var(--phone-a-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* R4.7 Story → Phone A */
@keyframes memory-story-in {
  0%,10% { opacity:0; }
  13% { opacity:1; left:45px; top:202px; transform:translate(-50%,-50%) scale(1); }
  18% { opacity:1; }
  23%,100% { left:var(--phone-a-x); top:var(--phone-a-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* =================================================================
   == SECTION R5: LIVING DIGITAL MEMORY GIFT
   ================================================================= */

/* R5.1 Gift container */
.parcel { position:absolute; left:calc(var(--phone-a-x) - 22px); top:calc(var(--phone-a-y) - 22px); width:44px; height:44px; opacity:0; z-index:8; will-change:transform,opacity; animation-duration:7s; animation-timing-function:linear; animation-iteration-count:infinite; }

/* R5.2 Premium digital keepsake shell */
.parcel-shell { position:absolute; inset:0; border:1px solid rgba(232,213,168,.95); border-radius:15px; background:linear-gradient(145deg,rgba(76,42,62,.96),rgba(113,67,84,.9)); box-shadow:inset 0 0 12px rgba(255,255,255,.08),inset 0 -6px 12px rgba(28,14,22,.18),0 0 16px rgba(232,213,168,.22); overflow:visible; }

/* Small ribbon loop */
.parcel-shell::before { content:''; position:absolute; left:50%; top:-8px; width:14px; height:10px; transform:translateX(-50%); border:2px solid var(--gold-light); border-bottom:0; border-radius:8px 8px 0 0; opacity:.95; }

/* Inner glass highlight */
.parcel-shell::after { content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.12); border-radius:11px; pointer-events:none; }

/* R5.3 Living heart core */
.parcel-core { position:absolute; left:50%; top:50%; width:15px; height:15px; background:var(--gold-light); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 10px rgba(232,213,168,.75),0 0 18px rgba(232,213,168,.3); animation:memory-heartbeat 7s ease-in-out infinite; z-index:2; }

.parcel-core::before,.parcel-core::after { content:''; position:absolute; width:15px; height:15px; border-radius:50%; background:inherit; }
.parcel-core::before { left:-7.5px; }
.parcel-core::after { top:-7.5px; }
/* R5.4 Breathing halo */
.parcel-ring { position:absolute; inset:-6px; border:1px solid rgba(232,213,168,.35); border-radius:19px; opacity:0; animation:memory-gift-halo 7s ease-in-out infinite; }

/* R5.5 Digital trail */
.parcel-tail { position:absolute; right:88%; top:50%; width:54px; height:3px; transform:translateY(-50%); border-radius:4px; background:linear-gradient(90deg,transparent,rgba(232,213,168,.7)); filter:blur(2px); opacity:0; animation:memory-gift-trail 7s linear infinite; }

/* =================================================================
   == R5.6: SMOOTH A → B ARC + LOCK AT PERSON B
   ================================================================= */

@keyframes memory-gift-travel {
  0%,22% { transform:translate(0,0) scale(.12); opacity:0; }

  26% { transform:translate(0,0) scale(.72); opacity:1; }
  30% { transform:translate(0,0) scale(1); opacity:1; }

  34% { transform:translate(22px,-6px) scale(1); opacity:1; }
  38% { transform:translate(56px,-12px) scale(1); opacity:1; }
  42% { transform:translate(96px,-16px) scale(1); opacity:1; }

  46% { transform:translate(calc(var(--gift-dx) * .50),calc(var(--gift-dy) * .50 - 18px)) scale(1); opacity:1; }
  50% { transform:translate(calc(var(--gift-dx) * .68),calc(var(--gift-dy) * .68 - 14px)) scale(1); opacity:1; }
  54% { transform:translate(calc(var(--gift-dx) * .84),calc(var(--gift-dy) * .84 - 8px)) scale(1); opacity:1; }

  58% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(1.02); opacity:1; }
  61% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(.18); opacity:0; }

  100% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(.18); opacity:0; }
}

/* R5.7 Heartbeat */
@keyframes memory-heartbeat {
  0%,27% { transform:translate(-50%,-50%) rotate(45deg) scale(.8); opacity:.65; }

  30% { transform:translate(-50%,-50%) rotate(45deg) scale(1.15); opacity:1; }
  32% { transform:translate(-50%,-50%) rotate(45deg) scale(.9); }
  34% { transform:translate(-50%,-50%) rotate(45deg) scale(1.05); }

  43% { transform:translate(-50%,-50%) rotate(45deg) scale(1.12); }
  45% { transform:translate(-50%,-50%) rotate(45deg) scale(.92); }

  53% { transform:translate(-50%,-50%) rotate(45deg) scale(1.12); }
  55% { transform:translate(-50%,-50%) rotate(45deg) scale(.92); }

  60% { transform:translate(-50%,-50%) rotate(45deg) scale(1); }

  73% { transform:translate(-50%,-50%) rotate(45deg) scale(1); }
  76% { transform:translate(-50%,-50%) rotate(45deg) scale(1.45); }
  79% { transform:translate(-50%,-50%) rotate(45deg) scale(.95); }

  100% { transform:translate(-50%,-50%) rotate(45deg) scale(.8); opacity:.65; }
}

/* R5.8 Halo pulse */
@keyframes memory-gift-halo {
  0%,27% { transform:scale(.75); opacity:0; }
  31% { transform:scale(1); opacity:.35; }
  35% { transform:scale(1.15); opacity:0; }

  59% { transform:scale(.9); opacity:.2; }
  76% { transform:scale(1.55); opacity:.85; }
  82%,100% { transform:scale(1.8); opacity:0; }
}

/* R5.9 Travel trail */
@keyframes memory-gift-trail {
  0%,30% { opacity:0; }
  35%,54% { opacity:.75; }
  60%,100% { opacity:0; }
}
/* =================================================================
   == SECTION R6: DELIVERY OUTPUTS
   ================================================================= */

/* SECTION R6.1: Arrival flash */
.arrive-flash { position:absolute; left:calc(var(--phone-b-x) - 30px); top:calc(var(--phone-b-y) - 30px); width:60px; height:60px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(232,213,168,.55) 40%,rgba(232,213,168,0) 70%); opacity:0; animation:delivery-flash 7s ease-out infinite; }


/* SECTION R6.2: Shared output setup */
.bloom { position:absolute; left:var(--phone-b-x); top:var(--phone-b-y); opacity:0; z-index:9; animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-out; }


/* SECTION R6.3: Album */
.bloom-album { width:44px; height:36px; margin-left:-22px; margin-top:-18px; border-radius:5px; background:var(--cream-warm); border:2px solid var(--gold-light); display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; box-shadow:0 6px 18px rgba(0,0,0,.25); animation-name:delivery-album; }


/* SECTION R6.4: Diary */
.bloom-diary { width:38px; height:48px; margin-left:-19px; margin-top:-24px; border-radius:4px 8px 8px 4px; background:var(--cream); border-left:4px solid var(--rose-deep); display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px; box-shadow:0 6px 18px rgba(0,0,0,.25); animation-name:delivery-diary; }


/* SECTION R6.5: Video */
.bloom-video { width:42px; height:30px; margin-left:-21px; margin-top:-15px; border-radius:6px; background:linear-gradient(150deg,var(--plum),var(--plum-deep)); border:1px solid rgba(232,213,168,.5); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); animation-name:delivery-video; }

.bloom-label { font-family:var(--font-ui); font-size:.5rem; font-weight:600; letter-spacing:.05em; color:var(--plum); }

.bloom-play { width:0; height:0; border-left:9px solid var(--gold-light); border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px; }


/* SECTION R6.6: Output timing */
@keyframes delivery-flash {
  0%,56% { transform:scale(.2); opacity:0; }
  59% { transform:scale(1.2); opacity:1; }
  64%,100% { transform:scale(1.8); opacity:0; }
}

@keyframes delivery-album {
  0%,67% { transform:translate(0,8px) scale(.2); opacity:0; }
  72% { transform:translate(-82px,-58px) scale(1.08); opacity:1; }
  76%,88% { transform:translate(-88px,-62px) scale(1); opacity:1; }
  94%,100% { transform:translate(-82px,-56px) scale(.9); opacity:0; }
}

@keyframes delivery-diary {
  0%,66% { transform:translate(0,8px) scale(.2); opacity:0; }
  71% { transform:translate(-8px,-92px) scale(1.08); opacity:1; }
  75%,88% { transform:translate(-8px,-98px) scale(1); opacity:1; }
  94%,100% { transform:translate(-8px,-90px) scale(.9); opacity:0; }
}

@keyframes delivery-video {
  0%,68% { transform:translate(0,8px) scale(.2); opacity:0; }
  73% { transform:translate(62px,-62px) scale(1.08); opacity:1; }
  77%,88% { transform:translate(68px,-66px) scale(1); opacity:1; }
  94%,100% { transform:translate(62px,-58px) scale(.9); opacity:0; }
}

/* =================================================================
   == SECTION R7: RECEIVER REACTION
   ================================================================= */

/* SECTION R7.1: Person B reaction */
.person-receiver { animation:receiver-react 7s ease-in-out infinite; transform-origin:50% 100%; }

@keyframes receiver-react {
  0%,66% { transform:translateY(0) rotate(0); }
  72% { transform:translateY(-8px) rotate(-2deg); }
  77% { transform:translateY(0) rotate(-1deg); }
  82% { transform:translateY(-4px) rotate(-1deg); }
  88%,100% { transform:translateY(0) rotate(0); }
}


/* SECTION R7.2: Warm glow */
.joy-glow { position:absolute; inset:-34px -38px; border-radius:50%; background:radial-gradient(circle,rgba(201,169,110,.5) 0%,rgba(201,169,110,0) 66%); opacity:0; animation:receiver-glow 7s ease-in-out infinite; }

@keyframes receiver-glow {
  0%,68% { opacity:0; }
  74% { opacity:1; }
  88% { opacity:.75; }
  96%,100% { opacity:0; }
}


/* SECTION R7.3: Hearts */
.heart { position:absolute; left:calc(var(--phone-b-x) + 20px); top:calc(var(--phone-b-y) - 28px); width:12px; height:12px; margin:-6px 0 0 -6px; background:var(--rose-light); transform:rotate(45deg); opacity:0; z-index:10; animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-out; }

.heart::before,.heart::after { content:''; position:absolute; width:100%; height:100%; border-radius:50%; background:inherit; }
.heart::before { left:-50%; }
.heart::after { top:-50%; }

.heart-1 { animation-name:heart-a; }
.heart-2 { width:9px; height:9px; animation-name:heart-b; }
.heart-3 { width:7px; height:7px; background:var(--gold-light); animation-name:heart-c; }

@keyframes heart-a {
  0%,72% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  76% { opacity:.95; }
  90% { transform:rotate(45deg) translate(-30px,-58px) scale(1); opacity:.85; }
  97%,100% { transform:rotate(45deg) translate(-38px,-72px) scale(.8); opacity:0; }
}

@keyframes heart-b {
  0%,76% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  80% { opacity:.9; }
  92% { transform:rotate(45deg) translate(12px,-50px) scale(1); opacity:.8; }
  98%,100% { transform:rotate(45deg) translate(16px,-64px) scale(.8); opacity:0; }
}

@keyframes heart-c {
  0%,80% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  84% { opacity:.9; }
  94% { transform:rotate(45deg) translate(-14px,-44px) scale(1); opacity:.8; }
  99%,100% { transform:rotate(45deg) translate(-18px,-56px) scale(.8); opacity:0; }
}

/* =================================================================
   == SECTION R8: HERO DIRECTION CONTROL
   ================================================================= */

/* R8.1 A → B active */
.direction-a-b .mem-photo { animation-name:memory-photo-in; }
.direction-a-b .mem-voice { animation-name:memory-voice-in; }
.direction-a-b .mem-story { animation-name:memory-story-in; }

.direction-a-b .parcel { animation-name:memory-gift-travel; }
.direction-a-b .parcel-core { animation-name:memory-heartbeat; }
.direction-a-b .parcel-ring { animation-name:memory-gift-halo; }
.direction-a-b .parcel-tail { animation-name:memory-gift-trail; }

.direction-a-b .arrive-flash { animation-name:delivery-flash; }
.direction-a-b .bloom-album { animation-name:delivery-album; }
.direction-a-b .bloom-diary { animation-name:delivery-diary; }
.direction-a-b .bloom-video { animation-name:delivery-video; }

.direction-a-b .person-receiver { animation-name:receiver-react; }
.direction-a-b .joy-glow { animation-name:receiver-glow; }
.direction-a-b .heart-1 { animation-name:heart-a; }
.direction-a-b .heart-2 { animation-name:heart-b; }
.direction-a-b .heart-3 { animation-name:heart-c; }


/* R8.2 B → A waiting state */
.direction-b-a .mem,
.direction-b-a .parcel,
.direction-b-a .arrive-flash,
.direction-b-a .bloom,
.direction-b-a .heart,
.direction-b-a .joy-glow { animation-name:none; opacity:0; }

.direction-b-a .person-receiver { animation-name:none; }

/* =================================================================
   == SECTION R9: PERSON B MEMORY INPUTS
   ================================================================= */

/* R9.1 Activate mirrored inputs during B → A */
.direction-b-a .mem-photo { animation-name:memory-photo-in-b; }
.direction-b-a .mem-voice { animation-name:memory-voice-in-b; }
.direction-b-a .mem-story { animation-name:memory-story-in-b; }


/* R9.2 Photo → Phone B */
@keyframes memory-photo-in-b {
  0%,2% { left:calc(100% - 22px); top:118px; transform:translate(-50%,-50%) scale(1); opacity:0; }
  5% { left:calc(100% - 22px); top:118px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  11% { left:calc(100% - 22px); top:118px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  16%,100% { left:var(--phone-b-x); top:var(--phone-b-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* R9.3 Voice → Phone B */
@keyframes memory-voice-in-b {
  0%,6% { left:calc(100% - 10px); top:164px; transform:translate(-50%,-50%) scale(1); opacity:0; }
  9% { left:calc(100% - 10px); top:164px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  14% { left:calc(100% - 10px); top:164px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  19%,100% { left:var(--phone-b-x); top:var(--phone-b-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* R9.4 Story → Phone B */
@keyframes memory-story-in-b {
  0%,10% { left:calc(100% - 38px); top:210px; transform:translate(-50%,-50%) scale(1); opacity:0; }
  13% { left:calc(100% - 38px); top:210px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  18% { left:calc(100% - 38px); top:210px; transform:translate(-50%,-50%) scale(1); opacity:1; }
  23%,100% { left:var(--phone-b-x); top:var(--phone-b-y); transform:translate(-50%,-50%) scale(.08); opacity:0; }
}

/* =================================================================
   == SECTION R10: GIFT — PERSON B → PERSON A
   ================================================================= */

/* R10.1 Activate gift during B → A */
.direction-b-a .parcel { animation-name:memory-gift-travel-b; }

/* Trail must sit behind the gift while travelling left */
.direction-b-a .parcel-tail { left:88%; right:auto; background:linear-gradient(90deg,rgba(232,213,168,.7),transparent); }


/* R10.2 Smooth B → A mirrored flight */
@keyframes memory-gift-travel-b {
  0%,22% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(.12); opacity:0; }

  26% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(.72); opacity:1; }
  30% { transform:translate(var(--gift-dx),var(--gift-dy)) scale(1); opacity:1; }

  34% { transform:translate(calc(var(--gift-dx) - 22px),calc(var(--gift-dy) - 6px)) scale(1); opacity:1; }
  38% { transform:translate(calc(var(--gift-dx) - 56px),calc(var(--gift-dy) - 12px)) scale(1); opacity:1; }
  42% { transform:translate(calc(var(--gift-dx) - 96px),calc(var(--gift-dy) - 16px)) scale(1); opacity:1; }

  46% { transform:translate(calc(var(--gift-dx) * .50),calc(var(--gift-dy) * .50 - 18px)) scale(1); opacity:1; }
  50% { transform:translate(calc(var(--gift-dx) * .32),calc(var(--gift-dy) * .32 - 14px)) scale(1); opacity:1; }
  54% { transform:translate(calc(var(--gift-dx) * .16),calc(var(--gift-dy) * .16 - 8px)) scale(1); opacity:1; }

  58% { transform:translate(0,0) scale(1.02); opacity:1; }
  61% { transform:translate(0,0) scale(.18); opacity:0; }

  100% { transform:translate(0,0) scale(.18); opacity:0; }
}

/* =================================================================
   == SECTION R11: DELIVERY OUTPUTS — PERSON A
   ================================================================= */

/* R11.1 Move delivery origin to Phone A */
.direction-b-a .arrive-flash { left:calc(var(--phone-a-x) - 30px); top:calc(var(--phone-a-y) - 30px); animation-name:delivery-flash-b; }

.direction-b-a .bloom { left:var(--phone-a-x); top:var(--phone-a-y); }

.direction-b-a .bloom-album { animation-name:delivery-album-b; }
.direction-b-a .bloom-diary { animation-name:delivery-diary-b; }
.direction-b-a .bloom-video { animation-name:delivery-video-b; }


/* R11.2 Arrival flash */
@keyframes delivery-flash-b {
  0%,56% { transform:scale(.2); opacity:0; }
  59% { transform:scale(1.2); opacity:1; }
  64%,100% { transform:scale(1.8); opacity:0; }
}


/* R11.3 Album */
@keyframes delivery-album-b {
  0%,67% { transform:translate(0,8px) scale(.2); opacity:0; }
  72% { transform:translate(82px,-58px) scale(1.08); opacity:1; }
  76%,88% { transform:translate(88px,-62px) scale(1); opacity:1; }
  94%,100% { transform:translate(82px,-56px) scale(.9); opacity:0; }
}


/* R11.4 Diary */
@keyframes delivery-diary-b {
  0%,66% { transform:translate(0,8px) scale(.2); opacity:0; }
  71% { transform:translate(8px,-92px) scale(1.08); opacity:1; }
  75%,88% { transform:translate(8px,-98px) scale(1); opacity:1; }
  94%,100% { transform:translate(8px,-90px) scale(.9); opacity:0; }
}


/* R11.5 Video */
@keyframes delivery-video-b {
  0%,68% { transform:translate(0,8px) scale(.2); opacity:0; }
  73% { transform:translate(-62px,-62px) scale(1.08); opacity:1; }
  77%,88% { transform:translate(-68px,-66px) scale(1); opacity:1; }
  94%,100% { transform:translate(-62px,-58px) scale(.9); opacity:0; }
}

/* =================================================================
   == SECTION R12: PERSON A RECEIVER REACTION
   ================================================================= */

/* R12.1 Person A reacts after receiving */
.direction-b-a .person-sender { animation-name:sender-receive-react; }

@keyframes sender-receive-react {
  0%,66% { transform:translateY(0) rotate(0); filter:drop-shadow(0 0 0 rgba(232,213,168,0)); }
  72% { transform:translateY(-8px) rotate(2deg); filter:drop-shadow(0 0 14px rgba(232,213,168,.55)); }
  77% { transform:translateY(0) rotate(1deg); filter:drop-shadow(0 0 18px rgba(232,213,168,.45)); }
  82% { transform:translateY(-4px) rotate(1deg); filter:drop-shadow(0 0 12px rgba(232,213,168,.35)); }
  92%,100% { transform:translateY(0) rotate(0); filter:drop-shadow(0 0 0 rgba(232,213,168,0)); }
}


/* R12.2 Move hearts to Phone A */
.direction-b-a .heart { left:calc(var(--phone-a-x) - 20px); top:calc(var(--phone-a-y) - 28px); }

.direction-b-a .heart-1 { animation-name:heart-a-b; }
.direction-b-a .heart-2 { animation-name:heart-b-b; }
.direction-b-a .heart-3 { animation-name:heart-c-b; }


/* R12.3 Mirrored hearts */
@keyframes heart-a-b {
  0%,72% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  76% { opacity:.95; }
  90% { transform:rotate(45deg) translate(30px,-58px) scale(1); opacity:.85; }
  97%,100% { transform:rotate(45deg) translate(38px,-72px) scale(.8); opacity:0; }
}

@keyframes heart-b-b {
  0%,76% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  80% { opacity:.9; }
  92% { transform:rotate(45deg) translate(-12px,-50px) scale(1); opacity:.8; }
  98%,100% { transform:rotate(45deg) translate(-16px,-64px) scale(.8); opacity:0; }
}

@keyframes heart-c-b {
  0%,80% { transform:rotate(45deg) translate(0,0) scale(.4); opacity:0; }
  84% { opacity:.9; }
  94% { transform:rotate(45deg) translate(14px,-44px) scale(1); opacity:.8; }
  99%,100% { transform:rotate(45deg) translate(18px,-56px) scale(.8); opacity:0; }
}

/* =================================================================
   == SECTION R13: PHONE SCREEN ACTIVITY GLOW
   ================================================================= */

/* R13.1 Shared glow behavior */
.p-screen { transition:background .25s ease, box-shadow .25s ease; }


/* R13.2 A → B : Person A sending */
.direction-a-b .person-sender .p-screen { animation:phone-send-glow 7s ease-in-out infinite; }

/* R13.3 A → B : Person B receiving */
.direction-a-b .person-receiver .p-screen { animation:phone-receive-glow 7s ease-in-out infinite; }


/* R13.4 B → A : Person B sending */
.direction-b-a .person-receiver .p-screen { animation:phone-send-glow 7s ease-in-out infinite; }

/* R13.5 B → A : Person A receiving */
.direction-b-a .person-sender .p-screen { animation:phone-receive-glow 7s ease-in-out infinite; }


/* R13.6 Sender glow — while memories enter */
@keyframes phone-send-glow {
  0%,3% { background:linear-gradient(160deg,var(--plum-light),var(--plum-deep)); box-shadow:inset 0 0 0 rgba(232,213,168,0),0 0 0 rgba(232,213,168,0); }

  7%,18% { background:linear-gradient(160deg,var(--gold-light),var(--rose-light)); box-shadow:inset 0 0 8px rgba(255,255,255,.55),0 0 14px rgba(232,213,168,.75); }

  24%,100% { background:linear-gradient(160deg,var(--plum-light),var(--plum-deep)); box-shadow:inset 0 0 0 rgba(232,213,168,0),0 0 0 rgba(232,213,168,0); }
}


/* R13.7 Receiver glow — after gift arrives */
@keyframes phone-receive-glow {
  0%,56% { background:linear-gradient(160deg,var(--plum-light),var(--plum-deep)); box-shadow:inset 0 0 0 rgba(232,213,168,0),0 0 0 rgba(232,213,168,0); }

  60%,86% { background:linear-gradient(160deg,var(--gold-light),var(--rose-light)); box-shadow:inset 0 0 8px rgba(255,255,255,.55),0 0 16px rgba(232,213,168,.8); }

  94%,100% { background:linear-gradient(160deg,var(--plum-light),var(--plum-deep)); box-shadow:inset 0 0 0 rgba(232,213,168,0),0 0 0 rgba(232,213,168,0); }
}


/* =================================================================
   == Block C5: SECTIONS 2–5 — What / Samples / Who / Why
   ================================================================= */

/* SECTION C5.1: What Is MemoryChain — IO Diagram */
.what-is { background: var(--cream); text-align: center; }
.what-is .section-heading { color:var(--text-dark); }

.what-is .section-heading em {
  background:var(--grad-rose-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--rose-deep);
  -webkit-text-stroke:0;
}
.io-diagram {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 36px;
  margin-top: 44px;
  text-align: left;
}
.io-column {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 30px;
  min-width: 230px;
}
.io-title { font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); margin-bottom:16px; }

.io-emoji { font-size: 1.1rem; }
.io-outputs { box-shadow: var(--shadow-rose); border-color: var(--rose-light); }

/* animated flowing arrow */
.io-arrow {
  align-self: center;
  position: relative;
  width: 90px;
  height: 4px;
}
.io-arrow-line {
  position:absolute;
  inset:0;
  border-radius:4px;
  background:linear-gradient(90deg,var(--rose-light) 0%,var(--gold-light) 45%,var(--gold) 100%);
  background-size:220% 100%;
  box-shadow:0 0 10px rgba(201,169,110,.28);
  animation:arrow-flow 1.6s linear infinite;
}

.io-arrow-head {
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:14px solid var(--gold);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  filter:drop-shadow(0 0 5px rgba(201,169,110,.38));
}

@keyframes arrow-flow {
  0% { background-position:120% 0; opacity:.72; }
  50% { opacity:1; }
  100% { background-position:-120% 0; opacity:.72; }
}

/* subtle reveal animation for this section */
.what-is .io-inputs,
.what-is .io-outputs,
.what-is .io-arrow {
  opacity: 0;
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

.what-is .io-inputs {
  transform: translateX(-28px);
}

.what-is .io-outputs {
  transform: translateX(28px);
}

.what-is .io-arrow {
  transform: scaleX(.82);
  transition-delay: .12s;
}

.what-is.is-visible .io-inputs,
.what-is.is-visible .io-outputs,
.what-is.is-visible .io-arrow {
  opacity: 1;
  transform: none;
}

.what-is.is-visible .io-outputs {
  transition-delay: .14s;
}

.what-is.is-visible .io-arrow {
  transition-delay: .08s;
}

/* SECTION C5.2: Samples — Tabs + Mockup Panels */
.samples { background: var(--cream-warm); text-align: center; }
.sample-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  margin-bottom: 44px;
}
.sample-tab {
  padding: 10px 26px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: background 0.3s, color 0.3s;
}
.sample-tab.active {
  background: var(--grad-btn);
  color: var(--white);
}

.sample-display { position: relative; }
.sample-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  animation: panel-fade 0.45s var(--ease-out);
}
.sample-panel.active { display: grid; }
@keyframes panel-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sample-mockup {
  border-radius: 20px;
  min-height: 300px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px -20px rgba(74, 48, 64, 0.28);
}
.sample-desc h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 14px;
  color: var(--text-dark);
}
.sample-desc p { color: var(--text-mid); max-width: 420px; }

/* ================================================================= */
/* == Samples — Real Preview Viewer                                == */
/* ================================================================= */

/* =================================================================
   == BLOCK SAMPLE-1B: CLEAN PDF VIEWER CONTAINER
   ================================================================= */

.sample-real-preview { min-height:420px; padding:0; display:block; overflow:hidden; background:var(--white); border:1px solid var(--border); border-radius:20px; box-shadow:0 10px 30px rgba(44,44,44,.08); }
.landing-sample-pdf { display:block; width:100%; height:420px; border:0; background:var(--white); }

.landing-sample-video { display:block; width:100%; max-width:100%; aspect-ratio:16/9; height:auto; background:#000; }

.sample-panel:has(.landing-sample-video) .sample-real-preview { min-height:0; }

.sample-view-all { display:inline-flex; align-items:center; margin-top:24px; padding:12px 20px; border-radius:100px; background:linear-gradient(135deg,var(--rose),var(--plum)); color:var(--white); font-size:14px; font-weight:600; box-shadow:0 5px 18px var(--shadow-rose); transition:all var(--duration) var(--ease-out); }

.sample-view-all:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow-rose-strong); }

@media (max-width:960px) {
    .sample-real-preview { min-height:360px; }
    .landing-sample-pdf { height:360px; }
}

@media (max-width:640px) {
    .sample-real-preview { min-height:320px; border-radius:20px; }
    .landing-sample-pdf { height:320px; }
    .sample-view-all { margin-top:18px; }
}

/* album mockup */
.mockup-album { background: var(--cream); border: 1px solid var(--border); }
.mock-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 90px);
  gap: 12px;
  margin-bottom: 20px;
}
.mock-photo-grid span {
  height: 70px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--rose-light), var(--gold-light));
  opacity: 0.85;
}
.mock-photo-grid span:nth-child(2) { background: linear-gradient(140deg, var(--plum-light), var(--rose-light)); }
.mock-photo-grid span:nth-child(3) { background: linear-gradient(140deg, var(--gold-light), var(--cream-warm)); }
.mock-photo-grid span:nth-child(4) { background: linear-gradient(140deg, var(--rose), var(--plum-light)); }
.mock-caption {
  font-family: var(--font-drama);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-mid);
}

/* diary mockup */
.mockup-diary { background: var(--white); border: 1px solid var(--border); align-items: flex-start; }
.mock-chapter {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
.mock-diary-text {
  font-family: var(--font-drama);
  font-size: 1.35rem;
  line-height: 1.7;
  color: var(--text-dark);
}

/* video mockup */
.mockup-video { background: linear-gradient(150deg, var(--plum), var(--plum-deep)); }
.mock-play {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 2px solid rgba(255,255,255,0.6);
  position: relative;
  margin-bottom: 22px;
  transition: transform 0.3s var(--ease-out);
}
.mock-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 20px solid var(--white);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.mockup-video:hover .mock-play { transform: scale(1.08); }
.mock-video-text {
  font-family: var(--font-drama);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
}

/* AI video mockup */
.mockup-ai-video { background: linear-gradient(150deg, var(--plum-light), var(--plum-deep)); }
.mock-portrait {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rose-light), var(--gold-light));
  margin-bottom: 24px;
}
.portrait-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  animation: portrait-pulse 2.4s ease-out infinite;
}
@keyframes portrait-pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}
.mock-ai-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}

/* SECTION C5.3: Who Is It For — Expandable Cards */

.who-for { background:var(--cream); text-align:center; }

.who-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:44px;
  text-align:left;
  align-items:start;
}

.who-card {
  align-self:start;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px 22px;
  cursor:pointer;
  overflow:visible;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s;
}

.who-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-rose); }

.who-card.expanded { border-color:var(--rose); box-shadow:var(--shadow-rose); }

@media (hover:hover) and (pointer:fine) {
  .who-card:hover { border-color:var(--rose); box-shadow:var(--shadow-rose); }
  .who-card:hover .who-tags { max-height:320px; opacity:1; margin-top:16px; }
}
.who-emoji { font-size:1.7rem; display:block; margin-bottom:12px; }

.who-card h3 {
  font-family:var(--font-display);
  font-size:1.15rem;
  margin-bottom:8px;
  color:var(--text-dark);
}

.who-card p { font-size:.88rem; color:var(--text-mid); }

.who-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-top:0;
  transition:max-height .45s var(--ease-out),opacity .4s,margin-top .45s var(--ease-out);
}

.who-card.expanded .who-tags {
  max-height:320px;
  opacity:1;
  margin-top:16px;
}

/* =================================================================
   == BLOCK WHO-MOBILE-3: TAP CUE + FULL OCCASION REVEAL
   ================================================================= */

@media (hover:none), (pointer:coarse) {
  .who-card::after { content:'Tap to explore ↓'; display:block; margin-top:12px; font-size:.72rem; font-weight:600; color:var(--rose); opacity:.8; }
  .who-card.expanded::after { content:'Tap to close ↑'; }
  .who-card.expanded .who-tags { max-height:none; overflow:visible; opacity:1; margin-top:16px; }
}

.who-tags span {
  font-size:.74rem;
  font-weight:500;
  padding:5px 12px;
  border-radius:100px;
  background:var(--cream-warm);
  border:1px solid var(--gold-light);
  color:var(--plum);
}

@media (max-width:900px) {
  .who-grid { grid-template-columns:repeat(2,1fr); align-items:start; }
}

@media (max-width:560px) {
  .who-grid { grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
  .who-card { align-self:start; padding:22px 16px; }
  .who-card p { display:none; }
  .who-card.expanded p { display:block; }
  .who-card.expanded .who-tags { max-height:420px; }
}

/* SECTION C5.4: Why It Feels Different */
.why { background: var(--cream-warm); text-align: center; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
  text-align: left;
}
.why-block {
  position: relative;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  overflow: hidden;
}
/* R1: gold hairline crown on each block */
.why-block::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.why-block:hover { transform: translateY(-5px); box-shadow: var(--shadow-rose); }
.why-block h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--rose-deep);
  margin-bottom: 12px;
}
.why-block p { color: var(--text-mid); font-size: 0.95rem; }

/* =================================================================
   == Block C6: SECTIONS 6–10 — Treasures / How / Stories / Pricing / FAQ
   ================================================================= */

/* SECTION C6.1: Family Treasures — R1 ornamented emotional section */
.treasures {
  position: relative;
  background:
    radial-gradient(900px 400px at 50% 120%, rgba(201,169,110,0.18) 0%, rgba(201,169,110,0) 60%),
    linear-gradient(150deg, var(--plum-deep) 0%, var(--plum) 70%, var(--rose-deep) 130%);
  text-align: center;
  padding: 120px 0;
}
.treasures-ornament {
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 18px;
}
.treasures-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--white);
  margin-bottom: 24px;
}
.treasures-heading em {
  font-style: italic;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-light); /* fallback */
}
.treasures-body {
  font-family: var(--font-drama);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  max-width: 680px;
  margin: 0 auto;
}

/* SECTION C6.2: How It Works — 4 Step Journey */

.how { background:var(--cream); text-align:center; }

.steps {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:52px;
  align-items:start;
}

.steps-line {
  position:absolute;
  top:31px;
  left:12.5%;
  right:12.5%;
  height:2px;
  background:var(--border);
  z-index:0;
}

.steps-progress {
  position:absolute;
  top:31px;
  left:12.5%;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--rose),var(--gold),var(--rose));
  z-index:1;
  animation:steps-progress 6s ease-in-out infinite;
}

.step-card {
  position:relative;
  z-index:2;
  padding:0 12px 22px;
}

.step-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--grad-btn);
  color:var(--white);
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:600;
  margin-bottom:16px;
  border:2px solid var(--gold-light);
  box-shadow:var(--shadow-rose);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}

.step-icon {
  display:block;
  font-size:1.45rem;
  margin-bottom:10px;
}

.step-card h3 {
  font-family:var(--font-display);
  font-size:1.25rem;
  margin-bottom:10px;
  color:var(--text-dark);
}

.step-card p {
  color:var(--text-mid);
  font-size:.93rem;
  line-height:1.65;
  max-width:240px;
  margin:0 auto;
}

.step-details {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:16px;
}

.step-details span {
  padding:5px 10px;
  border-radius:100px;
  background:var(--white);
  border:1px solid var(--gold-light);
  color:var(--plum);
  font-size:.72rem;
  font-weight:500;
}

.step-card[data-step="1"] .step-number { animation:step-pulse-1 8s ease-in-out infinite; }
.step-card[data-step="2"] .step-number { animation:step-pulse-2 8s ease-in-out infinite; }
.step-card[data-step="3"] .step-number { animation:step-pulse-3 8s ease-in-out infinite; }
.step-card[data-step="4"] .step-number { animation:step-pulse-4 8s ease-in-out infinite; }

.steps-progress { animation:steps-progress 8s ease-in-out infinite; }

@keyframes steps-progress {
  0%,12% { width:0; }
  27% { width:25%; }
  47% { width:50%; }
  67% { width:75%; }
  88%,100% { width:75%; }
}

@keyframes step-pulse-1 {
  0%,4%,16%,100% { transform:scale(1); }
  9% { transform:scale(1.13); box-shadow:0 0 0 7px rgba(183,110,121,.12),var(--shadow-rose); }
}

@keyframes step-pulse-2 {
  0%,22%,34%,100% { transform:scale(1); }
  28% { transform:scale(1.13); box-shadow:0 0 0 7px rgba(183,110,121,.12),var(--shadow-rose); }
}

@keyframes step-pulse-3 {
  0%,42%,54%,100% { transform:scale(1); }
  48% { transform:scale(1.13); box-shadow:0 0 0 7px rgba(183,110,121,.12),var(--shadow-rose); }
}

@keyframes step-pulse-4 {
  0%,62%,76%,100% { transform:scale(1); }
  68% { transform:scale(1.13); box-shadow:0 0 0 7px rgba(183,110,121,.12),var(--shadow-rose); }
}

@media (max-width:900px) {
  .steps { grid-template-columns:1fr 1fr; gap:36px 24px; }
  .steps-line,.steps-progress { display:none; }
}

@media (max-width:560px) {
  .steps {
    grid-template-columns:1fr;
    gap:30px;
    text-align:left;
  }

  .step-card {
    padding:0 0 0 82px;
    min-height:150px;
  }

  .step-number {
    position:absolute;
    left:0;
    top:0;
    width:56px;
    height:56px;
  }

  .step-icon { margin-bottom:8px; }

  .step-card p {
    max-width:none;
    margin:0;
  }

  .step-details {
    justify-content:flex-start;
  }

  .step-card::before {
    content:'';
    position:absolute;
    left:27px;
    top:58px;
    bottom:-30px;
    width:2px;
    background:linear-gradient(var(--rose-light),var(--gold-light));
    opacity:.55;
  }

  .step-card:last-child::before { display:none; }
}

/* ================================================================= */
/* == SECTION C6.3: Privacy Promise                                == */
/* ================================================================= */

.privacy-promise { background:var(--cream-warm); text-align:center; }

.privacy-intro {
  max-width:720px;
  margin:0 auto 42px;
  font-family:var(--font-drama);
  font-size:1.2rem;
  line-height:1.75;
  color:var(--text-mid);
}

.privacy-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:left;
}

.privacy-card {
  position:relative;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 24px;
  overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s;
}

.privacy-card::before {
  content:'';
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.privacy-card:hover {
  transform:translateY(-4px);
  border-color:var(--rose-light);
  box-shadow:var(--shadow-rose);
}

.privacy-icon { display:block; font-size:1.6rem; margin-bottom:14px; }

.privacy-card h3 {
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--plum-deep);
  margin-bottom:10px;
}

.privacy-card p {
  font-size:.9rem;
  line-height:1.7;
  color:var(--text-mid);
}

.privacy-cta { margin-top:36px; }

.privacy-promise-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--rose),var(--plum));
  color:var(--white);
  font-size:.9rem;
  font-weight:600;
  box-shadow:var(--shadow-rose);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}

.privacy-promise-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(183,110,121,.45);
}

@media (max-width:900px) {
  .privacy-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px) {
  .privacy-grid { grid-template-columns:1fr; }
  .privacy-card { padding:24px 20px; }
  .privacy-intro { font-size:1.08rem; }
}

/* SECTION C6.4: Testimonials */
/* Real Stories — hidden until genuine testimonials are ready */
.stories { display:none; }

.stories { background: var(--cream-warm); text-align: center; }
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  align-items: stretch;
  text-align: left;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-rose); }
.testimonial-featured {
  background: linear-gradient(160deg, var(--plum), var(--plum-deep));
  border: 1px solid rgba(201,169,110,0.4);
  transform: scale(1.04);
}
.testimonial-featured:hover { transform: scale(1.04) translateY(-5px); }
.testimonial-featured .testimonial-quote { color: var(--gold-light); font-size: 1.45rem; }
.testimonial-featured .testimonial-author { color: rgba(255,255,255,0.75); }
.testimonial-wide { grid-column: 1 / -1; text-align: center; align-items: center; }
.testimonial-quote {
  font-family: var(--font-drama);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-dark);
  margin-bottom: 18px;
}
.testimonial-author {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-light);
}

/* SECTION C6.5: Pricing */

/* Pricing Region Toggle */

.pricing-region-toggle {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:30px auto 42px;
  padding:6px;
  background:var(--cream-warm);
  border:1px solid var(--border);
  border-radius:100px;
}

.pricing-region-btn {
  border:0;
  background:transparent;
  color:var(--text-mid);
  padding:10px 20px;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s var(--ease-out);
}

.pricing-region-btn:hover {
  color:var(--rose-deep);
}

.pricing-region-btn.active {
  background:linear-gradient(135deg,var(--rose),var(--plum));
  color:var(--white);
  box-shadow:var(--shadow-rose);
}

.pricing-region-note {
  margin-top:28px;
  text-align:center;
  font-size:.85rem;
  color:var(--text-light);
}

@media (max-width:560px) {
  .pricing-region-toggle {
    width:100%;
    max-width:320px;
  }

  .pricing-region-btn {
    flex:1;
    padding:10px 12px;
  }

  .pricing-region-note {
    padding:0 10px;
    line-height:1.6;
  }
}

.pricing { background: var(--cream); text-align: center; }


/* ================================================================= */
/* == Pricing Cards                                                == */
/* ================================================================= */

.tier-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:52px;
  align-items:stretch;
}

.tier-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:460px;
  padding:54px 36px 30px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  text-align:center;
  box-shadow:0 8px 28px rgba(44,44,44,.04);
}

.tier-card-featured {
  border:2px solid var(--rose);
  box-shadow:0 14px 34px rgba(183,110,121,.13);
}

.tier-popular {
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  padding:9px 22px;
  border-radius:100px;
  background:var(--gold);
  color:var(--plum-deep);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.tier-card h3 {
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--text-dark);
  margin-bottom:18px;
}

.tier-price {
  margin-bottom:28px;
}

.price-value {
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:600;
  line-height:1;
  color:var(--rose-deep);
}

.tier-features {
  flex:1;
  margin-bottom:30px;
}

.tier-features p {
  padding:10px 0;
  margin:0;
  color:var(--text-mid);
  font-size:.95rem;
  border-bottom:1px dashed var(--border);
}

.tier-features p:last-child {
  border-bottom:0;
}

.tier-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin-top:auto;
  padding:14px 20px;
  border:2px solid var(--rose);
  border-radius:100px;
  color:var(--rose-deep);
  font-size:.92rem;
  font-weight:600;
  transition:all .3s var(--ease-out);
}

.tier-btn:hover {
  background:var(--rose);
  color:var(--white);
  transform:translateY(-2px);
}

.tier-btn-primary {
  border-color:transparent;
  background:linear-gradient(135deg,var(--rose),var(--plum));
  color:var(--white);
  box-shadow:var(--shadow-rose);
}

.tier-btn-primary:hover {
  background:linear-gradient(135deg,var(--rose-deep),var(--plum-deep));
  box-shadow:0 10px 26px rgba(183,110,121,.25);
}

@media (max-width:900px) {
  .tier-grid {
    grid-template-columns:1fr;
    max-width:560px;
    margin:48px auto 0;
  }

  .tier-card {
    min-height:auto;
  }
}

@media (max-width:560px) {
  .tier-card {
    padding:46px 24px 26px;
  }

  .price-value {
    font-size:2.6rem;
  }
}
.tier-btn-featured:hover { box-shadow: var(--shadow-rose); }

/* payments notice */
.pricing-notice {
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--cream-warm);
  border: 1px dashed var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing-notice p {
  font-family: var(--font-drama);
  font-size: 1.15rem;
  color: var(--text-mid);
}

/* SECTION C6.6: FAQ Accordion */
.faq { background: var(--cream-warm); }
.faq .section-label, .faq .section-heading { width: 100%; text-align: center; justify-content: center; }
.faq-list { margin-top: 40px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item.open { border-color: var(--rose-light); box-shadow: var(--shadow-rose); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
}
.faq-icon {
  position: relative;
  flex: 0 0 18px;
  height: 18px;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--rose);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out);
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-out);
}
.faq-answer p {
  padding: 0 24px 22px;
  color: var(--text-mid);
  font-size: 0.95rem;
}

/* =================================================================
   == Block C7: FOOTER + RESPONSIVE
   ================================================================= */

/* SECTION C7.1: Footer */
.footer {
  background: var(--plum-deep);
  color: rgba(255,255,255,0.8);
  padding: 72px 0 0;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 48px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.footer-tagline {
  font-family: var(--font-drama);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  max-width: 280px;
}
/* =================================================================
   == BLOCK FOOTER-SOCIAL-2: ELEGANT SOCIAL LINKS
   ================================================================= */

.footer-social { margin-top:24px; }

.footer-social-label {
  margin-bottom:12px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-light);
}

.footer-social-links {
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-social-links a {
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:rgba(255,255,255,.78);
  transition:transform .3s var(--ease-out),border-color .3s,color .3s,background .3s;
}

.footer-social-links a:hover {
  transform:translateY(-2px);
  border-color:var(--gold-light);
  color:var(--gold-light);
  background:rgba(255,255,255,.05);
}

.footer-social-links svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.footer-social-links a:nth-child(2) svg,
.footer-social-links a:nth-child(3) svg {
  fill:currentColor;
  stroke:none;
}

.footer-social-links .youtube-play {
  fill:var(--plum-deep);
}
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.footer-col a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: var(--gold-light); }
.footer-bottom a:hover { color: var(--white); }

/* SECTION C7.2: Responsive — Tablet (≤900px) */
@media (max-width: 900px) {
  section { padding: 72px 0; }

  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  .hero { padding: 120px 0 90px; }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow::before { display: none; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas, .hero-trust { justify-content: center; }
  .hero-journey { height: 300px; max-width: 460px; margin: 0 auto; justify-self: center; }

  .io-diagram { flex-direction: column; align-items: center; gap: 20px; }
  .io-arrow { width: 4px; height: 60px; }
  .io-arrow-line { background: linear-gradient(180deg, var(--rose-light), var(--gold)); }
  .io-arrow-head {
    right: 50%; top: auto; bottom: -8px;
    transform: translateX(50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--gold);
    border-bottom: none;
  }

  .sample-panel { grid-template-columns: 1fr; gap: 28px; }
  .why-grid, .steps, .tier-grid { grid-template-columns: 1fr; }
  .steps-line { display: none; }
  .stories-grid { grid-template-columns: 1fr; }
  .testimonial-featured { transform: none; }
  .testimonial-featured:hover { transform: translateY(-5px); }
  .tier-featured { padding: 44px 30px 36px; }
}

/* SECTION C7.3: Responsive — Mobile (≤560px)
   The journey stage scales down; the parcel flight distance shrinks
   via narrower stage + scale, keeping the arc inside the viewport. */
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .hero-journey {
    height: 250px;
    max-width: 380px;
    transform: scale(0.86);
    transform-origin: top center;
  }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .who-card p { display: none; }
  .who-card.expanded p { display: block; }
  .sample-tabs { flex-wrap: wrap; border-radius: 24px; justify-content: center; }
  .footer-cols { gap: 36px; }
}

/* =================================================================
   == BLOCK MOBILE-FIX-1: MOBILE GIFT TRAVEL
   ================================================================= */

@media (max-width: 560px) {

  /* -------------------------------------------------------------
     SECTION MOBILE-FIX-1.1: A → B smooth proportional travel
     ------------------------------------------------------------- */

  .direction-a-b .parcel {
    animation-name: memory-gift-travel-mobile;
  }

  @keyframes memory-gift-travel-mobile {

    0%, 22% {
      transform: translate(0, 0) scale(.12);
      opacity: 0;
    }

    26% {
      transform: translate(0, 0) scale(.72);
      opacity: 1;
    }

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

    34% {
      transform:
        translate(
          calc(var(--gift-dx) * .12),
          calc(var(--gift-dy) * .12 - 6px)
        )
        scale(1);
      opacity: 1;
    }

    38% {
      transform:
        translate(
          calc(var(--gift-dx) * .24),
          calc(var(--gift-dy) * .24 - 12px)
        )
        scale(1);
      opacity: 1;
    }

    42% {
      transform:
        translate(
          calc(var(--gift-dx) * .38),
          calc(var(--gift-dy) * .38 - 16px)
        )
        scale(1);
      opacity: 1;
    }

    46% {
      transform:
        translate(
          calc(var(--gift-dx) * .52),
          calc(var(--gift-dy) * .52 - 18px)
        )
        scale(1);
      opacity: 1;
    }

    50% {
      transform:
        translate(
          calc(var(--gift-dx) * .68),
          calc(var(--gift-dy) * .68 - 14px)
        )
        scale(1);
      opacity: 1;
    }

    54% {
      transform:
        translate(
          calc(var(--gift-dx) * .84),
          calc(var(--gift-dy) * .84 - 8px)
        )
        scale(1);
      opacity: 1;
    }

    58% {
      transform:
        translate(var(--gift-dx), var(--gift-dy))
        scale(1.02);
      opacity: 1;
    }

    61%, 100% {
      transform:
        translate(var(--gift-dx), var(--gift-dy))
        scale(.18);
      opacity: 0;
    }
  }


  /* -------------------------------------------------------------
     SECTION MOBILE-FIX-1.2: B → A smooth proportional travel
     ------------------------------------------------------------- */

  .direction-b-a .parcel {
    animation-name: memory-gift-travel-mobile-b;
  }

  @keyframes memory-gift-travel-mobile-b {

    0%, 22% {
      transform:
        translate(var(--gift-dx), var(--gift-dy))
        scale(.12);
      opacity: 0;
    }

    26% {
      transform:
        translate(var(--gift-dx), var(--gift-dy))
        scale(.72);
      opacity: 1;
    }

    30% {
      transform:
        translate(var(--gift-dx), var(--gift-dy))
        scale(1);
      opacity: 1;
    }

    34% {
      transform:
        translate(
          calc(var(--gift-dx) * .88),
          calc(var(--gift-dy) * .88 - 6px)
        )
        scale(1);
      opacity: 1;
    }

    38% {
      transform:
        translate(
          calc(var(--gift-dx) * .76),
          calc(var(--gift-dy) * .76 - 12px)
        )
        scale(1);
      opacity: 1;
    }

    42% {
      transform:
        translate(
          calc(var(--gift-dx) * .62),
          calc(var(--gift-dy) * .62 - 16px)
        )
        scale(1);
      opacity: 1;
    }

    46% {
      transform:
        translate(
          calc(var(--gift-dx) * .48),
          calc(var(--gift-dy) * .48 - 18px)
        )
        scale(1);
      opacity: 1;
    }

    50% {
      transform:
        translate(
          calc(var(--gift-dx) * .32),
          calc(var(--gift-dy) * .32 - 14px)
        )
        scale(1);
      opacity: 1;
    }

    54% {
      transform:
        translate(
          calc(var(--gift-dx) * .16),
          calc(var(--gift-dy) * .16 - 8px)
        )
        scale(1);
      opacity: 1;
    }

    58% {
      transform: translate(0, 0) scale(1.02);
      opacity: 1;
    }

    61%, 100% {
      transform: translate(0, 0) scale(.18);
      opacity: 0;
    }
  }

}

/* =================================================================
   == BLOCK MOBILE-FIX-2: MOBILE HEART SHAPES
   ================================================================= */

@media (max-width: 560px) {

  /* -------------------------------------------------------------
     SECTION MOBILE-FIX-2.1: Floating hearts
     Use a real heart glyph so the shape stays clean on mobile.
     ------------------------------------------------------------- */

  .heart {
    background: transparent;
  }

  .heart::before {
    content: '\2665';
    position: absolute;

    left: 50%;
    top: 50%;

    width: auto;
    height: auto;

    border-radius: 0;
    background: transparent;

    color: var(--rose-light);

    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1;

    transform:
      translate(-50%, -50%)
      rotate(-45deg);

    transform-origin: center;
  }

  .heart::after {
    display: none;
  }


  /* Smaller second heart */
  .heart-2::before {
    font-size: 14px;
  }


  /* Gold third heart */
  .heart-3::before {
    font-size: 12px;
    color: var(--gold-light);
  }


  /* -------------------------------------------------------------
     SECTION MOBILE-FIX-2.2: Heart inside digital gift
     ------------------------------------------------------------- */

  .parcel-core {
    background: transparent;
    box-shadow: none;
  }

  .parcel-core::before {
    content: '\2665';

    position: absolute;

    left: 50%;
    top: 50%;

    width: auto;
    height: auto;

    border-radius: 0;
    background: transparent;

    color: var(--gold-light);

    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 1;

    text-shadow:
      0 0 6px rgba(232,213,168,.85),
      0 0 12px rgba(232,213,168,.45);

    transform:
      translate(-50%, -50%)
      rotate(-45deg);

    transform-origin: center;
  }

  .parcel-core::after {
    display: none;
  }

}



/* =================================================================
   == BLOCK SAMPLE-MOBILE-3: USE REAL PDF ON MOBILE
   ================================================================= */

@media (max-width: 640px) {

  /* -------------------------------------------------------------
     SECTION SAMPLE-MOBILE-3.1: Restore real PDF viewer
     ------------------------------------------------------------- */

  .landing-sample-pdf {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: var(--white);
  }


  /* -------------------------------------------------------------
     SECTION SAMPLE-MOBILE-3.2: Disable JPG preview
     ------------------------------------------------------------- */

  .landing-sample-mobile-preview {
    display: none !important;
  }


  /* -------------------------------------------------------------
     SECTION SAMPLE-MOBILE-3.3: PDF container
     ------------------------------------------------------------- */

  .sample-real-preview {
    min-height: 420px;
    padding: 0;
    overflow: hidden;
    background: var(--white);
    border-radius: 20px;
  }

}