/* Eyla editorial redesign. Existing phone demos live in style.css. */
:root { --gray:#b5b1bc; --cream:#f7eee4; --line:#ffffff16; }
body { font-weight:500; }
html { scroll-padding-top:110px; }
:focus-visible { outline:3px solid #f7c986; outline-offset:6px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:200; padding:14px 24px; border-radius:30px; background:var(--cream); color:var(--bg); }
.skip-link:focus { top:20px; }
.container { width:min(1180px,calc(100% - 64px)); }
.h1,.h2,.h3 { font-weight:500; letter-spacing:-.045em; }
.h2 { font-size:clamp(36px,4.5vw,62px); line-height:1.08; }
em { font-family:var(--serif); font-style:normal; font-weight:600; letter-spacing:-.045em; color:#eed2ae; }
.lead { font-size:19px; font-weight:400; line-height:1.6; }
.eyebrow { font-size:12px; letter-spacing:.17em; }
.section { padding-top:130px; }
.section-head { max-width:800px; margin-bottom:54px; }
.section-head .lead { max-width:600px; margin:22px auto 0; }
.section-head>.eyebrow { margin-bottom:22px; }
.btn { min-height:56px; height:auto; padding:16px 28px; font-size:17px; gap:24px; background:#f7eee4; transition:transform .3s,box-shadow .3s,background .3s; }
.btn:hover { box-shadow:0 8px 32px #edbc7940; background:#ffe0ad; transform:translateY(-3px); }
.nav { width:min(1080px,calc(100% - 48px)); height:72px; top:24px; padding:0 10px 0 26px; background:#202027e8; border:1px solid #ffffff18; box-shadow:0 12px 50px #08080b25; }
.nav-links { font-size:12px; gap:30px; }
.nav-links a { padding:18px 0; transition:color .25s; }
.nav-links a[aria-current] { color:#f5c995; }
.nav-right { border:0; gap:12px; padding-left:0; }
.nav-cta { display:flex; align-items:center; gap:25px; font-size:14px; background:#f4e9dc; color:#232127; border-radius:30px; padding:16px 23px; }
.motion-toggle { border:1px solid #ffffff30; border-radius:50%; width:40px; height:40px; font-size:15px; }
.menu-toggle { display:none; width:44px; height:44px; }
.mobile-nav { position:absolute; top:80px; left:0; right:0; border:1px solid #ffffff20; background:#222128; border-radius:24px; padding:14px; box-shadow:0 20px 50px #0008; }
.mobile-nav a { display:block; padding:15px; font-size:17px; }
.hero-wrap { padding:12px; }
.hero { min-height:800px; height:min(900px,100svh); padding:155px 0 120px; justify-content:center; border-radius:26px; }
.hero-sky { background:linear-gradient(90deg,#242128e6 0%,#34303a9c 43%,#59434924 80%),url('../img/eyla/twilight-observatory-bg.webp') center 48% / cover; }
.hero-sky::after { background:linear-gradient(0deg,#1b1a23 0%,transparent 40%),linear-gradient(90deg,#201e2940,transparent); }
.hero::after { background:linear-gradient(0deg,#19191fd9,transparent 30%); pointer-events:none; }
.hero-clouds { opacity:.16; }
.hero-copy { width:min(1120px,calc(100% - 112px)); z-index:2; pointer-events:none; }
.hero-copy a { pointer-events:auto; }
.hero-copy .h1 { font-size:clamp(48px,5.3vw,76px); line-height:1.04; max-width:680px; }
.hero-copy .h1 em { display:block; max-width:570px; font-size:.94em; line-height:1.14; }
.hero .eyebrow { padding:0; border:0; background:none; backdrop-filter:none; color:#ecd4b5; margin-bottom:26px; font-size:11px; letter-spacing:.2em; }
.hero-copy .lead { max-width:440px; font-size:18px; line-height:1.65; color:#eee5dfe6; margin:24px 0 30px; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.text-link { font-size:15px; border-bottom:1px solid #f7eee47a; padding:12px 0; display:flex; gap:16px; }
.hero-terms { margin-top:17px; font-size:12px; font-weight:400; color:#d7ccd0; }
.hero-proof { margin-top:42px; gap:22px; font-size:12px; color:#e0d5d0; letter-spacing:.02em; }
.hero-proof span:first-child { padding-right:22px; border-right:1px solid #ffffff30; }
.hero-eyla { height:79%; right:1%; bottom:0; opacity:1; z-index:0; pointer-events:none; }
.hero-sun { width:min(32vw,450px); left:75%; top:42%; opacity:.6; background:radial-gradient(circle at 40% 30%,#fae9cd,#dbae75 60%,#ac6655); box-shadow:0 0 110px 20px #ddad6050; }
.hero-eyla .eyla-breathe { mask-image:linear-gradient(#000 78%,transparent 100%); }
.hero-eyla .say span { font-size:13px; line-height:1.5; box-shadow:0 12px 40px #15101830; backdrop-filter:blur(20px); border:1px solid #ffffff30; }
.hero-eyla .say-1 { right:5%; top:68%; }
.hero-eyla .say-2 { right:1%; top:27%; }
.hero-eyla .say-3 { left:15%; bottom:12%; }
.celestial-orbit { position:absolute; right:3%; top:18%; width:44%; aspect-ratio:1; border:1px solid #f1d3aa40; border-radius:50%; z-index:-1; animation:orbit-turn 100s linear infinite; }
.celestial-orbit::after { content:''; position:absolute; inset:24px; border:1px dashed #f1d3aa30; border-radius:50%; }
.celestial-orbit span { position:absolute; top:8%; left:18%; color:#f4d5a9; font-size:36px; }
.celestial-orbit i { position:absolute; bottom:10%; right:10%; font-style:normal; font-size:44px; color:#eacda9; }
@keyframes orbit-turn { to { transform:rotate(360deg); } }
.hero-scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; font-size:9px; letter-spacing:.22em; color:#ded1c7; z-index:3; }
.hero-scroll span { font-size:20px; }
.goals { grid-template-columns:repeat(3,1fr); gap:14px; }
.goal { height:155px; border-radius:20px; padding:24px 100px 24px 24px; font-size:19px; line-height:1.4; background:linear-gradient(125deg,#2b2931,#212126); box-shadow:none; border:1px solid #dcc2a320; display:flex; align-items:flex-start; }
.goal .ico { left:auto; right:24px; bottom:46px; }
.goal .arrow { width:28px; height:28px; bottom:14px; right:22px; border:0; background:none; }
.goal:hover { border-color:#e1b77d70; background:linear-gradient(125deg,#39303b,#272429); }
.grid-2,.grid-3,.grid-4 { gap:22px; }
.grid-4 { grid-template-columns:repeat(2,1fr); row-gap:42px; }
.tile-media { border-radius:26px; border:1px solid #ffffff0c; background:radial-gradient(ellipse at 50% 20%,#4c3c5c,#25232d 65%); transition:box-shadow .4s; }
.tile-media.purple { background:radial-gradient(at 50% 10%,#8762a8,#42315a 60%,#292337); }
.tile-media.indigo { background:radial-gradient(at 50% 0%,#696ac7,#353770 55%,#28243e); }
.tile-media.tall { height:580px; }
.tile:hover .tile-media { box-shadow:0 14px 60px #06050955; }
.tile-copy { padding:26px 18px 12px; }
.tile-copy h3 { font-size:27px; line-height:1.18; font-weight:500; letter-spacing:-.025em; }
.tile-copy p { font-size:17px; line-height:1.55; font-weight:400; }
.split { border-radius:28px; min-height:640px; border:1px solid #ffffff12; }
.split .split-copy { padding:55px 45px 55px 25px; }
.split .split-copy .h3 { font-size:clamp(32px,3.6vw,49px); line-height:1.1; }
.split .split-copy .lead { line-height:1.6; color:#eee1d7db; }
.pill { font-size:12px; padding:10px 14px; }
.phone { box-shadow:0 34px 55px #0007,0 0 0 1px #ffffff30; }
.moment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.moment { background:#222127; border:1px solid #ffffff0d; padding:26px; border-radius:24px; overflow:hidden; }
.moment-number { font-size:10px; letter-spacing:.16em; color:#cfb899; }
.moment img { width:calc(100% + 52px); margin:25px -26px; height:230px; object-fit:cover; }
.moment:nth-child(2) img { object-fit:contain; padding:25px; background:radial-gradient(#493342,#27222b); }
.moment h3 { font-size:26px; line-height:1.2; font-weight:500; letter-spacing:-.025em; }
.moment p { color:var(--gray); font-size:16px; line-height:1.65; margin:18px 0 28px; }
.moment a { font-size:14px; display:flex; justify-content:space-between; color:#ebcea8; }
.price-card { background:radial-gradient(at 0% 100%,#684b7e88,transparent 70%),#292430; padding:60px; gap:55px; border-radius:30px; border:1px solid #dec29d30; }
.price-list { gap:18px; }
.price-list li { line-height:1.45; }
.plan { background:#f7eee4; padding:35px; border-radius:24px; }
.plan .fine { color:#65616b; font-size:14px; line-height:1.5; }
.plan .btn { background:#765099; font-size:17px; }
.plan .timeline div { font-size:12px; line-height:1.5; }
.plan .timeline b { font-size:13px; }
.faq { max-width:900px; }
.faq summary { font-size:21px; padding:28px 8px; }
.faq details p { line-height:1.65; padding-bottom:30px; }
.faq summary::before { color:#ddbc92; }
.cta { min-height:680px; border-radius:28px; }
.cta .h1 { max-width:850px; font-size:clamp(38px,4.8vw,64px); line-height:1.15; }
.cta .count { font-size:11px; letter-spacing:.16em; text-transform:uppercase; border:0; margin-bottom:30px; color:#efd3a9; }
.cta .lead { font-size:18px; line-height:1.65; }
.cta-note { margin-top:26px; color:#d7c7dc; }
.legal { justify-content:space-between; gap:24px; line-height:1.6; color:var(--gray); font-size:12px; }
.preview-dialog { color:var(--cream); background:radial-gradient(at top right,#5e4257,#25232e 65%); border:1px solid #e7c99f50; border-radius:28px; width:min(550px,calc(100% - 32px)); padding:55px 40px 40px; margin:auto; box-shadow:0 40px 100px #0008; }
.preview-dialog::backdrop { background:#101019cc; backdrop-filter:blur(8px); }
.preview-dialog h2 { font-size:40px; line-height:1.15; letter-spacing:-.04em; margin-top:24px; }
.preview-dialog p { font-size:17px; line-height:1.7; color:#d5ccd6; margin:24px 0; }
.dialog-close { position:absolute; right:15px; top:10px; width:44px; height:44px; font-size:30px; }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation-play-state:paused !important; scroll-behavior:auto !important; }
@media(min-width:801px) and (max-width:1100px) { .nav-links { display:flex; gap:20px; } .price-card { grid-template-columns:1fr 1fr; padding:32px; gap:28px; } .price-list { grid-template-columns:1fr; } }
@media(max-width:1000px) { .hero-copy { width:calc(100% - 70px); } .hero-copy .h1 { font-size:56px; max-width:520px; } .hero-copy .lead { max-width:390px; } .hero-eyla { right:-10%; height:73%; } .hero-eyla .say-2 { display:none; } .hero-eyla .say-1 { right:22%; } .hero-proof { flex-direction:column; align-items:flex-start; gap:12px; } .hero-proof span:first-child { border:0; } }
@media(max-width:800px) {
.container { width:calc(100% - 32px); }.section { padding-top:88px; }.section-head { margin-bottom:34px; }.section-head .lead { font-size:17px; }
.nav { width:calc(100% - 32px); top:16px; height:62px; padding-left:18px; }.nav-links { display:none; }.nav-right { margin-left:auto; gap:6px; }.nav-cta { padding:12px 17px; font-size:13px; gap:12px; }.menu-toggle { display:block; }.motion-toggle { width:34px;height:34px; }
.hero { min-height:1090px; height:auto; padding:130px 0 500px; justify-content:flex-start; text-align:center; }.hero-wrap { padding:8px; }.hero-copy { width:calc(100% - 36px); }.hero-copy .h1 { max-width:630px; font-size:clamp(43px,7vw,58px); margin:auto; }.hero-copy .h1 em { max-width:none; }.hero-copy .lead { margin:22px auto 26px; max-width:500px; font-size:17px; }.hero .eyebrow { font-size:9px; letter-spacing:.13em; }.hero-actions { justify-content:center; gap:22px; }.hero-terms { font-size:11px; line-height:1.6; }.hero-proof { flex-direction:row; justify-content:center; gap:16px; font-size:10px; margin-top:24px; }.hero-proof span:first-child { padding-right:0; }
.hero-eyla { height:470px; max-height:none; right:50%; margin-right:-196px; bottom:5px; }.hero-eyla .say-1 { right:0;top:64%; }.hero-eyla .say-3 { left:3%;bottom:18%; }.hero-sun { width:330px; left:50%; top:auto; bottom:70px; transform:translateX(-50%); animation:none; }.celestial-orbit { width:420px; height:420px; top:auto; bottom:40px; right:50%; margin-right:-210px; }.hero-scroll { bottom:20px; }.hero-sky { background-position:65% center; }.hero-sky::after { background:linear-gradient(#27232bbd,transparent 75%,#19191f); }
.goals { grid-template-columns:repeat(2,1fr); gap:10px; }.goal { height:178px; font-size:17px; padding:20px 18px; }.goal .ico { right:auto;left:12px;bottom:15px; }.goal .arrow { bottom:22px; }
.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; gap:34px; }.tile-media.tall { height:580px; }.split .split-copy,.split.reverse .split-copy { padding:38px 24px 0; }.split .split-media { padding:35px 0; }.moment-grid { grid-template-columns:1fr; }.moment { padding:26px; }.moment img { height:260px; }.price-card { padding:24px; gap:32px; }.plan { padding:28px 20px; }.faq summary { font-size:18px; }.faq details p { font-size:17px; }.cta-wrap { padding-top:80px; }.cta { min-height:620px; }.legal { flex-direction:column; }.preview-dialog { padding:55px 25px 30px; }.preview-dialog h2 { font-size:34px; }
}
@media(max-width:380px) { .hero-actions { gap:16px; }.hero-actions .btn { font-size:15px;padding:16px 20px; }.text-link { font-size:13px; }.hero-proof { font-size:9px; }.nav .logo { font-size:25px; }.motion-toggle { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.rv { opacity:1;transform:none; }.hero-eyla { opacity:1; } }
@media(max-width:800px) {
  .nav-cta { white-space:nowrap; gap:14px; padding:13px 16px; }
  .nav .logo { flex-shrink:0; }
  .nav-right { flex-shrink:0; }
  .hero-actions { gap:18px; }
  .hero-actions .btn { font-size:15px; padding:16px 20px; gap:16px; white-space:nowrap; }
  .hero-actions .text-link { font-size:14px; gap:10px; white-space:nowrap; }
}
@media(min-width:801px) and (max-width:900px) {
  .hero { padding:155px 0 120px; text-align:left; }
  .hero-copy .h1,.hero-copy .lead { margin-left:0; margin-right:0; }
  .hero-eyla { margin-right:0;max-height:none; }
}
@media(min-width:801px) and (max-width:1100px) {
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3>.tile:last-child { grid-column:1 / -1; width:calc(50% - 11px); justify-self:center; }
  .moment-grid { gap:14px; }
  .moment { padding:20px;min-width:0; }
  .moment h3 { font-size:23px; }
}
/* September refinements: unified glass illustrations and unobstructed demos. */
.goal .ico { width:82px;height:82px;right:18px;bottom:38px;display:grid;place-items:center; }
.goal-talisman { width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 8px 14px #0d0b1d35); }
.split-copy .h3,.tile-copy h3,.moment h3,.price-card>.h3,.price-card>div>.h3 { font-family:var(--serif);font-weight:600;letter-spacing:-.025em; }
#love .section-head .h2 { font-family:var(--serif);font-weight:600; }
.daily-showcase { background-position:left center !important; }
.daily-moon { position:absolute;left:50%;top:117px;transform:translateX(-50%);width:86px;height:86px;object-fit:contain;z-index:1; }
.affirmation-lotus { position:absolute;left:50%;top:114px;width:132px;height:120px;transform:translateX(-50%);object-fit:contain; }
.tcard .front { padding:0;background:#201b3e;overflow:hidden;box-shadow:0 8px 22px #100b2733; }
.tcard .front img { width:100%;height:100%;object-fit:cover; }
.tcard .back { background:radial-gradient(ellipse at center,#73608c,#2b2449 75%);box-shadow:inset 0 0 0 2px #d5b987,inset 0 0 0 7px #312642,inset 0 0 0 8px #d5b98780; }
.tarot-back-star { font-size:52px;color:#ebd3a3;text-shadow:0 0 18px #e9c9a65c; }
.tarot-back-moon { position:absolute;bottom:20px;font-size:18px;color:#eddfc0; }
.social-proof { position:absolute;z-index:4;left:5%;bottom:28px;display:flex;align-items:center;gap:28px;padding:16px 24px;border:1px solid #e7c9a322;border-radius:18px;background:#202029c9;backdrop-filter:blur(16px);flex-wrap:wrap;max-width:590px; }
.proof-rating,.proof-community { display:flex;align-items:center;gap:12px;font-size:12px;color:#e2d8d0; }
.proof-rating strong,.proof-community strong { color:#fff4e4;font-size:19px; }
.proof-stars { color:#efc480;font-size:17px;letter-spacing:1px; }
.proof-avatars { display:flex;padding-left:5px; }
.proof-avatars img { width:34px;height:34px;object-fit:cover;border:2px solid #332d37;border-radius:50%;margin-left:-5px; }
.social-proof small { width:100%;font-size:10px;color:#c2b6bc;margin-top:-17px; }
.hero-scroll { left:auto;right:4%;transform:none;bottom:40px; }
.hero { padding-bottom:185px; }
.hero-proof { margin-top:26px; }
@media(max-width:800px) {
.goal .ico { left:12px;right:auto;bottom:8px; }
.social-proof { left:14px;right:14px;bottom:22px;justify-content:center;padding:14px 10px;gap:14px;max-width:none;text-align:center; }
.proof-rating,.proof-community { font-size:10px;gap:7px; }.proof-rating strong,.proof-community strong { font-size:16px; }.proof-stars { font-size:12px; }.proof-avatars img { width:25px;height:25px; }.social-proof small { font-size:9px;margin-top:0; }
.hero { padding-bottom:590px; }.hero-eyla { bottom:90px; }.hero-sun { bottom:160px; }.celestial-orbit { bottom:130px; }.hero-scroll { display:none; }
}

/* Social proof stays in normal flow, below the artwork at every breakpoint. */
.hero-wrap > .social-proof {
  position:static; inset:auto; z-index:auto; max-width:none;
  width:min(1120px,calc(100% - 48px)); margin:0 auto;
  display:flex;justify-content:center;align-items:center;gap:16px 40px;
  padding:28px 16px 22px;border:0;border-bottom:1px solid #e7c9a322;
  border-radius:0;background:none;backdrop-filter:none;text-align:center;
}
.hero-wrap > .social-proof small { flex-basis:100%;margin:0;line-height:1.5;color:#b8aeb7; }
.hero { padding-bottom:120px; }
@media(max-width:800px) {
  .hero { padding-bottom:500px; }
  .hero-eyla { bottom:5px; }.hero-sun { bottom:70px; }.celestial-orbit { bottom:40px; }
  .hero-wrap > .social-proof { width:calc(100% - 20px);padding:22px 6px;gap:16px 22px; }
}
/* Lunar rhythm: layered phase artwork, a complete calendar and editorial insights. */
.phone.moon-phone { --w:300px; }
.phone .lunar-screen { background:radial-gradient(ellipse at 90% 10%,#49395566,transparent 44%),#191820; }
.lunar-screen .topbar .title { font-size:13px; }
.lunar-screen .topbar .title small { font-size:8px;letter-spacing:.02em;text-transform:none;color:#bab0c7;margin-top:4px; }
.lunar-phase-card { position:absolute;top:99px;left:12px;right:12px;height:108px;border-radius:18px;background:radial-gradient(ellipse at 90% 40%,#80574660,transparent 70%),linear-gradient(110deg,#362d48,#25212f);border:1px solid #d3b18435;overflow:hidden; }
.lunar-phase-copy { position:relative;z-index:2;padding:14px 10px 12px 14px;width:70%; }
.lunar-kicker { color:#d6b68c;font-size:6.5px;letter-spacing:.12em; }
.lunar-phase-copy h4 { font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.035em;margin:7px 0 5px;line-height:1.05; }
.lunar-phase-copy p { font-size:8px;line-height:1.45;color:#d7cbdc;max-width:135px; }
.lunar-sign { display:block;font-size:6.5px;color:#e7c89e;margin-top:7px; }
.lunar-screen .moon-img { left:auto;right:9px;top:18px;width:77px;height:77px;margin:0;background:url('../img/refined/harvest-moon.png') center/contain no-repeat;box-shadow:none;animation:none;overflow:hidden;filter:drop-shadow(0 0 10px #d9935b35); }
.lunar-screen .moon-shadow { position:absolute;inset:-2%;background:#28232eee;border-radius:50%;filter:blur(2px);transition:transform 1.5s ease; }
.lunar-month { position:absolute;top:220px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between; }
.lunar-month strong { font-size:12px;font-weight:600; }.lunar-month strong span { color:#a99bb4;font-weight:400; }.lunar-month small { font-size:6px;text-transform:uppercase;letter-spacing:.07em;color:#b6a3ba; }
.lunar-screen .cal { top:241px;left:14px;right:14px;gap:3px 5px; }
.lunar-screen .cal .h { height:12px;font-size:7px;color:#aa9db5; }
.lunar-screen .cal .empty { height:20px;background:none; }
.lunar-screen .cal button { position:relative;height:20px;min-width:0;border-radius:7px;background:none;color:#e1d8e7;font-size:9px;display:grid;place-items:center;transition:background .3s,color .3s; }
.lunar-screen .cal button.good { color:#b5d6be;background:#71958213; }.lunar-screen .cal button.rest { color:#d4b8e7;background:#ab82c414; }
.lunar-screen .cal button.sel { background:#f0cca0;color:#322132;box-shadow:0 2px 12px #e1aa7130;font-weight:700; }
.lunar-screen .cal button:focus-visible { outline:2px solid #f3d5b0;outline-offset:1px; }
.lunar-legend { position:absolute;top:376px;left:17px;right:17px;display:flex;gap:9px;font-size:6px;color:#baacc4; }
.lunar-legend span { display:flex;align-items:center;gap:3px; }.lunar-legend span:last-child { margin-left:auto; }.lunar-legend i { width:4px;height:4px;border-radius:50%;background:#9bbea6; }.lunar-legend span:nth-child(2) i { background:#c29fdb; }
.lunar-insights { position:absolute;top:399px;left:12px;right:12px; }
.lunar-insights-head { display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px; }.lunar-insights-head strong { font-family:var(--serif);font-weight:600;font-size:14px; }.lunar-insights-head>span { font-size:7px;letter-spacing:.1em;color:#ccab85; }
.lunar-insight-grid { display:grid;grid-template-columns:1fr 1fr;gap:7px; }.lunar-insight-grid>div { position:relative;height:56px;padding:10px 8px;border-radius:12px;border:1px solid #c8b2d222;background:linear-gradient(130deg,#37303f,#27232e); }.lunar-insight-grid>div:nth-child(2) { background:linear-gradient(130deg,#34312e,#28252b);border-color:#dbc19120; }
.insight-symbol { position:absolute;right:8px;top:7px;font-size:13px;color:#d9b88f; }.lunar-insight-grid small { display:block;max-width:85px;font-size:5.5px;letter-spacing:.07em;color:#c3b1cf;margin-bottom:9px; }.lunar-insight-grid b { display:block;font-size:9px;font-weight:500;color:#fff0e3; }
.lunar-eyla { position:absolute;top:490px;left:14px;right:14px;display:flex;align-items:center;gap:8px; }.lunar-eyla img { width:28px;height:28px;object-fit:cover;border-radius:50%;border:1px solid #d9b88f55; }.lunar-eyla>div { flex:1; }.lunar-eyla span { font-size:5.5px;letter-spacing:.14em;color:#d8b78c; }.lunar-eyla p { font-size:8px;line-height:1.4;color:#d6cbdc;margin-top:4px; }

/* Semantic Personal Love icons: each feature has its own readable symbol. */
.love-feature-icon { width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#c6b2df20,#c6b2df08);border:1px solid #c6b2df20; }
.love-feature-icon img { width:34px;height:34px;object-fit:contain; }
.love-feature-ex-compatibility { background:linear-gradient(140deg,#7198d92b,#7198d908);border-color:#b9cfff20; }
.love-feature-past-life,.love-feature-marriage { background:linear-gradient(140deg,#d9af702b,#d9af7008);border-color:#ecd2a024; }
.love-feature-compatibility { background:linear-gradient(140deg,#d97da62b,#d97da608);border-color:#f6bad420; }
.love-feature-meeting { background:linear-gradient(140deg,#7dbca32b,#7dbca308);border-color:#bdddd020; }
.love-tab-list .ui-card>div { min-width:0;flex:1; }
.love-tab-list .ui-card>svg { flex-shrink:0; }
/* Numerology as an arcane engraved seal rather than a colored node chart. */
.phone .numerology-screen { background:radial-gradient(ellipse at 50% 31%,#4d34514d,transparent 48%),linear-gradient(160deg,#1a1823,#15141b); }
.arcane-matrix { overflow:visible; }
.arcane-matrix text { opacity:1;fill:#dec8a5;font-family:var(--serif);font-weight:500;animation:none !important; }
.arcane-matrix .sigil-number { font-size:8px;letter-spacing:.5px; }
.arcane-matrix .sigil-whisper { font-size:6px;fill:#b9a3c4;letter-spacing:1px;opacity:.75; }
.arcane-matrix .sigil-core { font-size:27px;letter-spacing:1px;fill:#f3dcb5;filter:drop-shadow(0 0 4px #f2bf7a55); }
.arcane-matrix .sigil-caption { font-family:var(--sans);font-size:3.8px;letter-spacing:1.1px;fill:#baa58d; }
.sigil-orbits { transform-origin:120px 100px;animation:sigil-orbit 100s linear infinite; }
.sigil-geometry { transform-origin:120px 100px;animation:sigil-breathe 9s ease-in-out infinite alternate; }
@keyframes sigil-orbit { to { transform:rotate(360deg); } }
@keyframes sigil-breathe { from { opacity:.5; } to { opacity:1; } }
.numerology-screen .ui-card { background:linear-gradient(145deg,#32273877,#211c2955);border:1px solid #c6a77938;border-radius:13px; }
.numerology-screen .ui-card b { display:block;font-family:var(--serif);font-weight:500;letter-spacing:3px;color:#e8c99d;margin-top:5px; }
.numerology-screen .ui-label { color:#bca58b;font-size:8px;letter-spacing:.12em; }
.numerology-subtitle { display:block;font-family:var(--sans);font-size:9px;letter-spacing:.08em;color:#c6ab86;font-weight:400;margin:9px 0 12px; }
/* Hero dialogue: the visitor speaks on the left, Eyla replies on the right. */
.hero-conversation { position:absolute;right:3%;bottom:45px;z-index:4;width:min(410px,39%);display:flex;flex-direction:column;gap:8px;pointer-events:none; }
.hero-message { max-width:88%;padding:10px 14px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;border:1px solid #ffffff24;box-shadow:0 5px 18px #16111f28; }
.hero-message.show { opacity:1;transform:translateY(0); }
.hero-message small { display:block;font-family:var(--sans);font-size:8px;letter-spacing:.12em;font-weight:600;margin-bottom:4px;opacity:.68; }
.hero-message p { font-size:13px;line-height:1.45;font-weight:500;margin:0; }
.hero-message.from-you { align-self:flex-start;color:#fff6ee;background:#38303eeb;backdrop-filter:blur(12px);border-radius:16px 16px 16px 4px; }
.hero-message.from-eyla { align-self:flex-end;color:#49325d;background:#f5edf8f5;border-radius:16px 16px 4px 16px; }
.hero-message.voice-message { width:220px; }
.hero-voice { display:flex;align-items:center;gap:10px; }
.hero-voice i { display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#f0dfce;color:#4b365b;font-style:normal;font-size:9px; }
.hero-wave { display:flex;align-items:center;gap:3px;height:27px; }
.hero-wave b { display:block;width:3px;height:var(--bar);border-radius:3px;background:#d7bddf; }
.voice-message.show .hero-wave b { animation:hero-wave 1.2s ease-in-out var(--delay) 2; }
.hero-voice time { font-size:10px;color:#e7d4ec; }
@keyframes hero-wave { 50% { transform:scaleY(.45); } }
.hero-scroll { bottom:16px; }
@media(max-width:1000px) and (min-width:801px) { .hero-conversation { right:2%;width:37%;bottom:35px; }.hero-message { padding:8px 11px; }.hero-message p { font-size:11px; } }
@media(max-width:800px) { .hero-conversation { right:50%;transform:translateX(50%);width:min(355px,calc(100% - 32px));bottom:22px;gap:7px; }.hero-message { padding:8px 12px; }.hero-message p { font-size:12px; }.hero-message small { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .hero-message { opacity:1;transform:none; } }

/* Secondary exploration action has its own row and breathing room. */
.hero-explore { display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;margin-top:28px;padding:13px 22px;border:1px solid #eee0d366;border-radius:999px;background:#29253150;color:#f3e9df;font-size:15px;line-height:1.4;backdrop-filter:blur(10px);transition:background .25s,border-color .25s,transform .25s; }
.hero-explore:hover { background:#eee0d318;border-color:#eee0d3b3;transform:translateY(-2px); }
.hero-explore span { font-size:18px; }
@media(max-width:800px) { .hero-explore { margin-top:24px;font-size:14px;min-height:46px; } }

/* One device size across every showcase, independent of legacy sm/md variants. */
.phone, .phone.sm, .phone.md, .phone.moon-phone { --w:300px; }
.tile-media, .tile-media.tall { height:705px; padding:44px 16px; }
@media(max-width:380px) {
  .phone, .phone.sm, .phone.md, .phone.moon-phone { transform:scale(.84); margin:-49.2px -24px; }
  .tile-media, .tile-media.tall { height:606.6px; }
}

/* Mobile hero follows its content instead of reserving an empty fixed-height gap. */
@media(max-width:800px) {
  .hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; min-height:0; height:auto; padding:112px 0 0; text-align:center; }
  .hero-copy { grid-column:1; grid-row:1; width:calc(100% - 32px); margin:0 auto; }
  .hero-copy .h1 { font-size:clamp(36px,9.5vw,54px); line-height:1.08; }
  .hero-copy .h1 em { line-height:1.12; }
  .hero-copy .lead { max-width:480px; margin:20px auto 22px; font-size:16px; line-height:1.55; }
  .hero-actions .btn { min-height:54px; padding:15px 25px; font-size:16px; }
  .hero-terms { max-width:310px; margin:14px auto 0; font-size:11px; line-height:1.6; }
  .hero-eyla { grid-column:1; grid-row:2; position:relative; right:auto; bottom:auto; width:min(100%,390px); height:auto; max-height:none; margin:16px auto 0; transform:none; animation:none; }
  .hero-conversation { grid-column:1; grid-row:2; position:relative; align-self:end; right:auto; bottom:auto; transform:none; width:min(355px,calc(100% - 28px)); margin:0 auto 18px; text-align:left; }
  .hero-sun { width:290px; bottom:110px; }
  .celestial-orbit { width:350px; bottom:55px; margin-right:-175px; }
  .section { padding-top:72px; }
  .section-head { margin-bottom:28px; }
  .tile-media,.tile-media.tall { height:671px; padding:27px 12px; }
  .tile-copy { padding:20px 10px 8px; }
  .tile-copy h3 { font-size:26px; }
  .split .split-copy .h3 { font-size:32px; }
  .split .split-copy .lead { font-size:17px; }
  .split .split-copy .btn { font-size:16px; padding:15px 21px; }
  .goal { min-width:0; font-size:16px; }
  .price-card { padding:22px 16px; }
  .plan { padding:26px 16px; }
  .plan .btn { width:100%; padding:15px 12px; gap:12px; font-size:16px; }
}
@media(max-width:380px) {
  .tile-media,.tile-media.tall { height:574.6px; }
  .hero-copy .h1 { font-size:35px; }
  .hero-copy .lead { font-size:15px; }
}
@media(max-width:380px) {
  .nav { padding-left:12px; padding-right:6px; }
  .nav .logo { font-size:23px; gap:6px; }
  .nav .logo svg { width:26px; }
  .nav-right { gap:3px; }
  .nav-cta { padding:12px 13px; gap:9px; font-size:12px; }
  .menu-toggle { width:36px; }
}

/* Spacious navigation with platform icons. */
.nav { width:min(1440px,calc(100% - 48px)); gap:32px; }
.nav .logo { flex-shrink:0; }
.nav-links { flex:1; justify-content:space-evenly; gap:20px; margin:0; font-size:17px; }
.nav-right { flex-shrink:0; }
.nav-stores { display:flex; gap:8px; align-items:center; }
.nav-stores a { display:grid; place-items:center; width:42px; height:42px; border:1px solid #ffffff26; border-radius:50%; color:var(--cream); transition:background .2s,border-color .2s; }
.nav-stores a:hover { background:#ffffff12; border-color:#eed2ae; }
.nav-stores svg { width:21px; height:23px; }
@media(min-width:801px) and (max-width:1100px) {
  .nav { gap:20px; padding-left:20px; }
  .nav-links { font-size:15px; gap:14px; }
  .nav-cta { padding:14px 18px; gap:12px; }
  .nav-stores { gap:5px; }
  .nav-stores a { width:34px; height:34px; }
}
@media(max-width:800px) {
  .nav { width:calc(100% - 24px); gap:8px; padding:0 6px 0 12px; }
  .nav .logo { font-size:25px; gap:5px; }
  .nav .logo svg { width:28px; }
  .nav-right { gap:5px; }
  .nav-stores { gap:4px; }
  .nav-stores a { width:32px; height:36px; border:0; }
  .nav-stores svg { width:19px; height:21px; }
  .nav-cta { padding:12px; font-size:12px; }
  .nav-cta>span { display:none; }
  .menu-toggle { width:32px; }
}

/* Portrait and halo share one stationary coordinate system on every screen. */
.hero .hero-eyla { animation:none; transform:none; translate:none; isolation:isolate; }
.hero-eyla .eyla-drift,.hero-eyla .eyla-sway,.hero-eyla .eyla-breathe,.hero-eyla .eyla-glow { animation:none; transform:none; translate:none; will-change:auto; }
.hero-eyla .eyla-drift { z-index:2; }
.hero-eyla .eyla-glow { z-index:0; }
.hero-eyla .hero-sun { width:90%; height:auto; left:50%; top:31%; right:auto; bottom:auto; margin:0; transform:translate(-50%,-50%); animation:none; z-index:0; }
.hero-eyla .celestial-orbit { width:114%; height:auto; aspect-ratio:1; left:50%; top:35%; right:auto; bottom:auto; margin:0; z-index:1; transform-origin:center; animation:eyla-halo-orbit 100s linear infinite; }
@keyframes eyla-halo-orbit { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .hero-eyla .celestial-orbit { animation:none; transform:translate(-50%,-50%); } }

/* Distinct messenger bubbles: visitor blue, Eyla violet. */
.hero-conversation { gap:10px; }
.hero-message { position:relative; max-width:86%; border:1px solid #ffffff30; box-shadow:0 6px 22px #110c2938; }
.hero-message.from-you { background:#28558b; color:#fff; border-radius:18px 18px 18px 5px; }
.hero-message.from-eyla { background:#6943a2; color:#fff; border-radius:18px 18px 5px 18px; }
.hero-message::after { content:""; position:absolute; bottom:0; width:10px; height:13px; background:inherit; }
.hero-message.from-you::after { left:-6px; clip-path:polygon(100% 0,100% 100%,0 100%); }
.hero-message.from-eyla::after { right:-6px; clip-path:polygon(0 0,100% 100%,0 100%); }
.hero-message small { color:#fff; opacity:.85; font-size:9px; letter-spacing:.09em; }
.hero-voice i { background:#fff; color:#28558b; flex-shrink:0; }
.hero-wave b { background:#dcecff; }
.hero-voice time { color:#fff; }
@media(max-width:800px) {
  .hero-conversation { gap:8px; }
  .hero-message small { font-size:8px; }
}

/* Keep the hero illustration inside the centered content composition on wide displays. */
@media(min-width:1200px) {
  .hero .hero-eyla { right:max(1%,calc((100% - 1180px) / 2 - 40px)); }
  .hero-conversation { right:max(3%,calc((100% - 1180px) / 2)); }
}