/* ============================================================
   亲声故事屋 - Design System & Styles
   Enhanced with 8 premium components
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
  --color-cream: #F4EDDD;
  --color-warm-cream: #FAF5E6;
  --color-white: #FFFFFF;
  --color-dark: #2C1810;
  --color-gold: #B8924A;
  --color-gold-light: rgba(184, 146, 74, 0.1);
  --color-gold-medium: rgba(184, 146, 74, 0.15);
  --color-brown: #5A4530;
  --color-border: #D8CFB5;
  --color-border-light: rgba(216, 207, 181, 0.5);
  --color-burgundy: #5A2E3A;
  --color-burgundy-light: rgba(90, 46, 58, 0.1);
  --color-green: #0E4D3C;
  --color-green-light: rgba(14, 77, 60, 0.1);
  --color-footer-bg: #2C1810;
  --color-footer-text: #BFAF8E;
  --color-footer-divider: rgba(216, 207, 181, 0.15);
  --font-heading: 'Noto Serif JP', 'Noto Serif SC', 'STSong', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 40px; --space-3xl: 48px; --space-4xl: 64px;
  --space-5xl: 80px; --space-6xl: 100px;
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-full: 9999px;
  --shadow-card: 0 4px 16px rgba(174, 141, 83, 0.08);
  --shadow-btn: 0 4px 20px rgba(174, 141, 83, 0.25);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 600ms;
  --max-width: 1280px; --header-height: 80px;
}

/* ---- Reset & Base ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-brown);background-color:var(--color-cream);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}

.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-5xl)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:600;border-radius:var(--radius-md);transition:transform var(--duration-fast) var(--ease-out-expo),box-shadow var(--duration-fast) var(--ease-out-expo),background-color var(--duration-fast) var(--ease-out-expo);white-space:nowrap}
.btn:active{transform:scale(0.97)}
.btn--primary{background-color:var(--color-gold);color:var(--color-warm-cream)}
.btn--primary:hover{background-color:#A7803D;box-shadow:var(--shadow-btn)}
.btn--outline{background-color:var(--color-warm-cream);color:var(--color-dark);border:1.5px solid var(--color-gold)}
.btn--outline:hover{background-color:var(--color-cream)}
.btn--sm{font-size:15px;padding:12px 24px}
.btn--lg{font-size:16px;padding:16px 32px}
.btn--xl{font-size:17px;padding:18px 40px;box-shadow:var(--shadow-btn)}
.btn--xl:hover{box-shadow:0 6px 28px rgba(174,141,83,0.35);transform:translateY(-1px)}
.btn--xl:active{transform:translateY(0)}
.btn--loading{pointer-events:none;opacity:0.85}

/* ============================================================
   Header
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:rgba(244,237,221,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;transition:box-shadow var(--duration-normal) var(--ease-out-expo)}
.header--scrolled{box-shadow:0 1px 0 rgba(216,207,181,0.6)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:flex;align-items:center;gap:10px}
.logo__icon{display:block;width:36px;height:36px;border-radius:50%;background-color:var(--color-gold);flex-shrink:0}
.logo__text{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--color-dark)}
.nav{display:flex;align-items:center;gap:var(--space-2xl)}
.nav__link{font-size:15px;font-weight:400;color:var(--color-brown);transition:color var(--duration-fast) var(--ease-out-expo);position:relative}
.nav__link:hover,.nav__link--active{color:var(--color-dark);font-weight:500}
.nav__link--active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background-color:var(--color-gold);border-radius:1px}
.header__cta{flex-shrink:0}

.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;padding:4px;z-index:1001}
.mobile-menu-toggle span{display:block;width:24px;height:2px;background-color:var(--color-dark);border-radius:1px;transition:transform var(--duration-normal) var(--ease-out-expo),opacity var(--duration-fast) var(--ease-out-expo)}
.mobile-menu-toggle--active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle--active span:nth-child(2){opacity:0}
.mobile-menu-toggle--active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;position:fixed;inset:0;background:rgba(244,237,221,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:999;padding-top:calc(var(--header-height) + var(--space-2xl))}
.mobile-nav--open{display:flex}
.mobile-nav__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);width:100%}
.mobile-nav__link{font-family:var(--font-heading);font-size:22px;font-weight:600;color:var(--color-dark);padding:var(--space-sm) var(--space-md)}
.mobile-nav__cta{margin-top:var(--space-lg)}

/* ============================================================
   Hero Section (Enhanced: particles, waveform, word animation)
   ============================================================ */
.hero{padding:calc(var(--header-height) + var(--space-5xl)) 0 var(--space-5xl);background-color:var(--color-cream);min-height:100dvh;display:flex;align-items:center;position:relative;overflow:hidden}

/* 🔥 Component 2: Dreamy Particles */
.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--color-warm-cream) 0%,var(--color-gold-medium) 100%);animation:particleFloat linear infinite;will-change:transform,opacity}

@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:0.7}
  90%{opacity:0.5}
  100%{transform:translateY(-120px) translateX(20px) scale(0.3);opacity:0}
}

.hero__inner{display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center;position:relative;z-index:1}
.hero__content{display:flex;flex-direction:column;gap:28px}

.hero__badge{display:inline-flex;align-items:center;gap:var(--space-sm);width:fit-content;padding:6px 16px;border-radius:var(--radius-md);background-color:var(--color-warm-cream);border:1px solid var(--color-border)}
.hero__badge-dot{display:block;width:8px;height:8px;border-radius:50%;background-color:var(--color-gold);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.3)}}
.hero__badge-text{font-size:13px;font-weight:500;color:var(--color-brown)}

/* 🔷 Component 7: Word-by-word fade-in */
.hero__headline{font-family:var(--font-heading);font-size:clamp(36px,5.5vw,56px);font-weight:600;line-height:1.28;color:var(--color-dark);letter-spacing:-0.01em}
.word-animate{display:inline-block;opacity:0;transform:translateY(24px);animation:wordReveal 0.6s var(--ease-out-expo) forwards}
@keyframes wordReveal{to{opacity:1;transform:translateY(0)}}

.hero__subheadline{font-size:18px;line-height:1.67;color:var(--color-brown);max-width:560px}
.hero__actions{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}

/* Hero Visual */
.hero__visual{position:relative;width:100%;max-width:520px;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;transition:transform 0.3s var(--ease-out-expo);will-change:transform}
.hero__visual-img-wrap{position:absolute;inset:0;z-index:1}
.hero__visual-img{width:100%;height:100%;object-fit:cover}

/* 🔥 Component 1: Audio Waveform Canvas */
.hero-waveform{position:absolute;bottom:0;left:0;right:0;height:30%;z-index:2;pointer-events:none;opacity:0.5}

/* ============================================================
   Section Shared
   ============================================================ */
.section-header{display:flex;flex-direction:column;gap:var(--space-md)}
.section-header--center{align-items:center;text-align:center}
.section-header--split{flex-direction:row;align-items:center;justify-content:space-between}
.section-header__left{display:flex;flex-direction:column;gap:12px}
.section-header__link{font-size:15px;font-weight:500;color:var(--color-gold);transition:opacity var(--duration-fast) var(--ease-out-expo)}
.section-header__link:hover{opacity:0.8}

.section-tag{display:inline-flex;align-items:center;width:fit-content;padding:4px 14px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0.15em}
.section-tag--gold{background-color:var(--color-gold-light);color:var(--color-gold)}
.section-tag--burgundy{background-color:var(--color-burgundy-light);color:var(--color-burgundy)}
.section-tag--green{background-color:var(--color-green-light);color:var(--color-green)}

.section-title{font-family:var(--font-heading);font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--color-dark);line-height:1.3}
.section-desc{font-size:17px;color:var(--color-brown)}
.section-divider{border:none;height:1px;background-color:var(--color-border-light);margin:var(--space-4xl) 0}

/* ============================================================
   Core Values Section (Enhanced: spotlight hover)
   ============================================================ */
.core-values{padding:var(--space-5xl) 0;background-color:var(--color-warm-cream)}
.core-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-3xl)}

/* Value Card */
.value-card{display:flex;flex-direction:column;gap:20px;padding:var(--space-2xl);background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-out-expo)}

/* 🔶 Component 4: Spotlight hover effect */
.value-card--spotlight::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.3s ease;pointer-events:none;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(184,146,74,0.08),transparent 60%)}
.value-card--spotlight:hover::after{opacity:1}
.value-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(174,141,83,0.12)}

.value-card__number{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-gold);letter-spacing:0.1em}
.value-card__icon{width:56px;height:56px;border-radius:50%;flex-shrink:0;overflow:hidden}
.value-card__icon--gold{background-color:var(--color-gold-medium)}
.value-card__icon--burgundy{background-color:var(--color-burgundy-light)}
.value-card__icon--green{background-color:var(--color-green-light)}
.value-card__icon-img{width:100%;height:100%;object-fit:cover}
.value-card__title{font-family:var(--font-heading);font-size:24px;font-weight:600;color:var(--color-dark)}
.value-card__desc{font-size:15px;line-height:1.73;color:var(--color-brown)}

/* How It Works */
.how-it-works{margin-top:var(--space-4xl)}
.how-it-works__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5xl);margin-top:var(--space-2xl)}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.step__number{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;flex-shrink:0;font-family:var(--font-body);font-size:28px;font-weight:700;color:var(--color-warm-cream)}
.step__number--gold{background-color:var(--color-gold)}
.step__number--burgundy{background-color:var(--color-burgundy)}
.step__number--green{background-color:var(--color-green)}
.step__title{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--color-dark)}
.step__desc{font-size:14px;line-height:1.57;color:var(--color-brown)}

/* ============================================================
   Features Section (Enhanced: 3D book flip)
   ============================================================ */
.features{padding:var(--space-5xl) 0;background-color:var(--color-cream)}
.features__grid{display:flex;flex-direction:column;gap:var(--space-lg);margin-top:var(--space-3xl)}
.features__grid-row{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-lg)}
.features__grid-row--three{grid-template-columns:repeat(3,1fr)}

.feature-card{background-color:var(--color-warm-cream);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:16px;transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-out-expo)}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(174,141,83,0.12)}
.feature-card--wide{padding:36px}
.feature-card--small{padding:var(--space-xl);gap:14px}
.feature-card__icon{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.feature-card--small .feature-card__icon{width:40px;height:40px}
.feature-card__icon--gold{background-color:var(--color-gold-medium)}
.feature-card__icon--burgundy{background-color:var(--color-burgundy-light)}
.feature-card__icon--green{background-color:var(--color-green-light)}
.feature-card__title{font-family:var(--font-heading);font-size:22px;font-weight:600;color:var(--color-dark)}
.feature-card--small .feature-card__title{font-size:19px}
.feature-card__desc{font-size:15px;line-height:1.67;color:var(--color-brown)}
.feature-card--small .feature-card__desc{font-size:14px;line-height:1.64}

/* 🔶 Component 5: 3D Book Flip */
.feature-card--book{display:flex;flex-direction:row;align-items:center;gap:48px;padding:40px;background:linear-gradient(135deg,var(--color-burgundy),#3E1C28);border:none;cursor:default}
.feature-card--book:hover{transform:translateY(-4px)}

.book-3d{flex-shrink:0;width:140px;height:180px;perspective:1000px;cursor:pointer;position:relative}
.book-3d__cover,.book-3d__back{position:absolute;inset:0;border-radius:6px 12px 12px 6px;transition:transform 0.6s var(--ease-out-expo)}
.book-3d__cover{background:linear-gradient(135deg,#D4AF37,#B8924A);z-index:3;transform-origin:left center;box-shadow:2px 4px 12px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center}
.book-3d__cover-inner{text-align:center;padding:12px}
.book-3d__cover-title{display:block;font-family:var(--font-heading);font-size:18px;font-weight:700;color:#2C1810;margin-bottom:4px}
.book-3d__cover-author{display:block;font-size:11px;font-weight:500;color:rgba(44,24,16,0.6);font-family:var(--font-body)}
.book-3d__spine{position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(to right,#9E7A2E,#C4A44A);z-index:2;border-radius:3px 0 0 3px}
.book-3d__pages{position:absolute;top:4px;right:4px;bottom:4px;left:12px;z-index:1;display:flex;flex-direction:column;gap:2px}
.book-3d__page{flex:1;background:linear-gradient(to right,#FAF5E6,#F4EDDD);border-radius:0 2px 2px 0}
.book-3d__back{background:linear-gradient(135deg,#8E6B2F,#B8924A);z-index:0;border-radius:4px 10px 10px 4px}

.book-3d--open .book-3d__cover{transform:rotateY(-135deg)}
.book-3d--open .book-3d__spine{opacity:0}

.feature-card__book-text{flex:1;display:flex;flex-direction:column;gap:12px}
.feature-card__book-title{font-family:var(--font-heading);font-size:24px;font-weight:600;color:var(--color-warm-cream)}
.feature-card__book-desc{font-size:15px;line-height:1.67;color:#D8CDB5}

/* ============================================================
   Testimonials Carousel (Enhanced: parallax carousel)
   ============================================================ */
.testimonials{padding:var(--space-5xl) 0;background-color:var(--color-warm-cream)}
.testimonial-carousel{margin-top:var(--space-3xl);position:relative;overflow:hidden}

.testimonial-carousel__track{display:flex;align-items:center;transition:transform 0.5s var(--ease-out-expo);cursor:grab}
.testimonial-carousel__track:active{cursor:grabbing}
.testimonial-carousel__track.dragging{transition:none}

/* Carousel Card */
.carousel-card{min-width:100%;padding:0 60px;display:flex;justify-content:center;transition:opacity 0.5s var(--ease-out-expo),transform 0.5s var(--ease-out-expo)}
.carousel-card--hidden{opacity:0.3;pointer-events:none}
@media(min-width:768px){
  .carousel-card{min-width:33.333%}
}

.carousel-card__inner{background-color:var(--color-cream);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-lg);max-width:420px;width:100%;transition:transform 0.4s var(--ease-out-expo),box-shadow 0.4s var(--ease-out-expo)}
.carousel-card--active .carousel-card__inner{transform:scale(1.05);box-shadow:0 8px 32px rgba(174,141,83,0.15)}
.carousel-card--side .carousel-card__inner{transform:scale(0.9);opacity:0.6}

.carousel-card__quote-mark{font-family:var(--font-heading);font-size:48px;font-weight:700;color:var(--color-gold);line-height:1;opacity:0.6}
.carousel-card__quote{font-size:16px;line-height:1.75;color:var(--color-dark)}
.carousel-card__author{display:flex;align-items:center;gap:12px;margin-top:auto}
.carousel-card__avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.carousel-card__avatar--gold{background:linear-gradient(135deg,var(--color-gold),#E0D4B8)}
.carousel-card__avatar--burgundy{background:linear-gradient(135deg,var(--color-burgundy),#D8CFB5)}
.carousel-card__avatar--green{background:linear-gradient(135deg,var(--color-green),var(--color-gold))}
.carousel-card__author-info{display:flex;flex-direction:column;gap:2px}
.carousel-card__name{font-size:15px;font-weight:600;color:var(--color-dark)}
.carousel-card__role{font-size:13px;color:var(--color-brown)}

/* Carousel Controls */
.testimonial-carousel__controls{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-top:var(--space-2xl)}
.carousel-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--color-border);color:var(--color-gold);transition:all var(--duration-fast) var(--ease-out-expo)}
.carousel-btn:hover{background-color:var(--color-gold);color:var(--color-warm-cream);border-color:var(--color-gold)}

.carousel-dots{display:flex;align-items:center;gap:var(--space-sm)}
.carousel-dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-border);border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out-expo)}
.carousel-dot--active{background-color:var(--color-gold);width:28px;border-radius:5px}

/* ============================================================
   Final CTA (Enhanced: magnetic button)
   ============================================================ */
.cta-final{padding:var(--space-6xl) 0;background-color:var(--color-cream)}
.cta-final__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-xl)}
.cta-final__ornament{width:60px;height:3px;border-radius:1.5px;background-color:var(--color-gold)}
.cta-final__headline{font-family:var(--font-heading);font-size:clamp(30px,4.5vw,44px);font-weight:600;color:var(--color-dark)}
.cta-final__subheadline{font-size:18px;color:var(--color-brown)}
.cta-final__btn{margin-top:var(--space-sm);transition:transform 0.3s cubic-bezier(0.33,1,0.68,1),box-shadow 0.3s var(--ease-out-expo);will-change:transform}
.cta-final__trust{font-size:13px;color:var(--color-gold);letter-spacing:0.03em}

/* ============================================================
   🔷 Component 8: Wave Divider
   ============================================================ */
.wave-divider{width:100%;height:60px;overflow:hidden;line-height:0;background-color:var(--color-footer-bg)}
.wave-divider svg{width:100%;height:100%}

/* ============================================================
   Footer
   ============================================================ */
.footer{background-color:var(--color-footer-bg);color:var(--color-footer-text)}
.footer__top{display:flex;gap:var(--space-5xl);padding:var(--space-4xl) 0 60px}
.footer__brand{flex:1.5;display:flex;flex-direction:column;gap:20px}
.footer__logo{font-family:var(--font-heading);font-size:22px;font-weight:600;color:var(--color-warm-cream)}
.footer__tagline{font-size:14px;line-height:1.71;max-width:280px}
.footer__nav{display:flex;gap:var(--space-5xl)}
.footer__nav-col{display:flex;flex-direction:column;gap:var(--space-md)}
.footer__nav-title{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-warm-cream)}
.footer__nav-link{font-size:14px;color:var(--color-footer-text);transition:color var(--duration-fast) var(--ease-out-expo)}
.footer__nav-link:hover{color:var(--color-warm-cream)}
.footer__divider{width:100%;height:1px;background-color:var(--color-footer-divider)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) 0}
.footer__copyright,.footer__made-with{font-size:13px}
.footer__made-with{letter-spacing:0.15em}

/* ============================================================
   Modal
   ============================================================ */
.modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center}
.modal--open{display:flex}
.modal__overlay{position:absolute;inset:0;background-color:rgba(44,24,16,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn var(--duration-normal) var(--ease-out-expo)}
.modal__content{position:relative;background-color:var(--color-warm-cream);border-radius:var(--radius-lg);padding:var(--space-3xl) var(--space-2xl);max-width:480px;width:calc(100% - 40px);animation:modalSlideIn var(--duration-normal) var(--ease-spring)}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(20px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal__close{position:absolute;top:var(--space-md);right:var(--space-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--color-brown);transition:background-color var(--duration-fast) var(--ease-out-expo)}
.modal__close:hover{background-color:var(--color-border-light)}
.modal__body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-lg)}
.modal__icon-wrap{margin-bottom:var(--space-sm)}
.modal__icon{width:64px;height:64px;border-radius:50%;background-color:var(--color-gold-medium);position:relative}
.modal__icon::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:4px;background-color:var(--color-gold)}
.modal__title{font-family:var(--font-heading);font-size:28px;font-weight:600;color:var(--color-dark)}
.modal__desc{font-size:15px;color:var(--color-brown);max-width:360px}
.modal__form{width:100%;max-width:400px;margin-top:var(--space-sm)}
.modal__input-group{display:flex;gap:var(--space-sm)}
.modal__input{flex:1;padding:14px 18px;border-radius:var(--radius-md);border:1.5px solid var(--color-border);background-color:var(--color-white);font-family:var(--font-body);font-size:15px;color:var(--color-dark);transition:border-color var(--duration-fast) var(--ease-out-expo);outline:none}
.modal__input:focus{border-color:var(--color-gold)}
.modal__input::placeholder{color:#BDB39A}
.modal__submit{position:relative;padding:14px 24px;font-size:15px;min-width:96px}
.modal__submit-loader{display:none;position:absolute;width:18px;height:18px;border:2px solid transparent;border-top-color:var(--color-warm-cream);border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--loading .modal__submit-text{visibility:hidden}
.btn--loading .modal__submit-loader{display:block}
.modal__form-message{font-size:13px;margin-top:var(--space-sm);min-height:20px;transition:color var(--duration-fast)}
.modal__form-message--success{color:var(--color-green)}
.modal__form-message--error{color:#C0392B}

/* ============================================================
   Scroll Reveal Animation
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--duration-slow) var(--ease-out-expo),transform var(--duration-slow) var(--ease-out-expo)}
.reveal--visible{opacity:1;transform:translateY(0)}
.reveal-stagger>*:nth-child(1){transition-delay:0ms}
.reveal-stagger>*:nth-child(2){transition-delay:100ms}
.reveal-stagger>*:nth-child(3){transition-delay:200ms}
.reveal-stagger>*:nth-child(4){transition-delay:300ms}
.reveal-stagger>*:nth-child(5){transition-delay:400ms}
.reveal-stagger>*:nth-child(6){transition-delay:500ms}

/* ============================================================
   Responsive - Tablet
   ============================================================ */
@media(max-width:1023px){
  :root{--header-height:68px}
  .container{padding:0 var(--space-xl)}
  .nav,.header__cta{display:none}
  .mobile-menu-toggle{display:flex}

  .hero__inner{grid-template-columns:1fr;gap:var(--space-2xl);text-align:center}
  .hero__content{align-items:center}
  .hero__badge{align-self:center}
  .hero__headline,.hero__subheadline{text-align:center}
  .hero__actions{justify-content:center}
  .hero__visual{max-width:360px;margin:0 auto}

  .section-header--split{flex-direction:column;align-items:flex-start;gap:var(--space-md)}
  .core-values__grid{grid-template-columns:1fr;gap:var(--space-md)}
  .value-card{padding:var(--space-lg)}
  .how-it-works__steps{grid-template-columns:1fr;gap:var(--space-xl)}
  .features__grid-row{grid-template-columns:1fr!important}
  .feature-card--book{flex-direction:column;gap:var(--space-xl);text-align:center}
  .carousel-card{min-width:100%!important;padding:0 20px}
  .footer__top{flex-direction:column;gap:var(--space-2xl)}
  .footer__nav{flex-wrap:wrap;gap:var(--space-xl)}
  .footer__bottom{flex-direction:column;gap:var(--space-sm);text-align:center}
}

/* ============================================================
   Responsive - Mobile
   ============================================================ */
@media(max-width:639px){
  :root{--header-height:64px}
  .container{padding:0 var(--space-md)}
  .hero{padding:calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);min-height:auto}
  .hero__visual{max-width:280px}
  .hero__actions{flex-direction:column;width:100%}
  .hero__actions .btn{width:100%}
  .section-title{font-size:26px}
  .cta-final{padding:var(--space-4xl) 0}
  .modal__input-group{flex-direction:column}
  .modal__submit{width:100%}
}

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

/* ============================================================
   Focus Styles (accessibility)
   ============================================================ */
:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}
.skip-link{position:absolute;top:-100%;left:var(--space-md);background:var(--color-gold);color:var(--color-warm-cream);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);z-index:9999;font-weight:600}
.skip-link:focus{top:var(--space-sm)}