/* Selected mystic concept. Functional reading and narration stay in index.html. */
:root { --ink:#141318; --ink-2:#201c23; --ink-3:#2c252a; --gold:#e9b365; --gold-bright:#ffc66f; --candle:#f6e4c5; --mist:#b4a498; --mist-soft:#d3c1ac; --line:rgba(233,179,101,.36); --serif:Georgia,'Times New Roman',serif; }
.atmosphere { display:none; }
.mystic-landing { position:relative; min-height:max(760px,100svh); aspect-ratio:1488 / 1058; background:#171820 url('assets/mystic-temple.jpg') center center / cover no-repeat; padding:8.5% 0 12% 16%; }
.hero { min-height:0; padding:0; align-items:flex-start; justify-content:flex-start; text-align:left; }
.brand { font:400 clamp(28px,3.45vw,52px)/1.2 var(--serif); margin-bottom:clamp(25px,3vw,46px); color:var(--candle); }
.hero h1 { font:400 clamp(48px,6.1vw,92px)/.98 var(--serif); max-width:none; letter-spacing:-.035em; opacity:1; transform:none; animation:none; }
.hero h1 em { color:var(--gold-bright); text-shadow:none; }
.hero .sub { font:400 clamp(18px,2.08vw,31px)/1.22 var(--serif); color:var(--candle); margin-top:clamp(22px,2.2vw,34px); max-width:none; opacity:1; transform:none; animation:none; }
.hindi { font-size:clamp(18px,1.9vw,28px); margin-top:14px; padding-bottom:18px; color:var(--candle); }
.input-section { max-width:570px; width:46%; margin:0; padding:34px 0 0; text-align:left; }
.dob-form { display:grid; grid-template-columns:1fr 1fr 1.17fr; gap:clamp(14px,3vw,46px); margin-bottom:42px; }
.field { min-width:0; gap:11px; }
.field label { font:400 clamp(17px,1.7vw,26px)/1.2 var(--serif); letter-spacing:0; text-transform:none; color:var(--candle); padding-left:8px; }
.field input,.field.year input { width:100%; height:60px; padding:8px; border:1px solid #c39f79; border-radius:19px; background:rgba(24,24,31,.62); font:400 25px var(--serif); }
.field input::placeholder { color:#bca390; opacity:1; }
.field input:focus { background:#23232e; }
.input-section .btn-row { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:20px; margin:0; }
.submit-btn { font:400 clamp(22px,2.2vw,32px)/1.2 var(--serif); text-transform:none; letter-spacing:0; background:#f7c563; border:1px solid #ffe3a0; padding:16px 40px; color:#251703; box-shadow:0 0 26px #e59b4655,inset 0 0 15px #fff1b688; }
.voice-btn { font:400 clamp(16px,1.6vw,24px)/1.2 var(--serif); letter-spacing:0; text-transform:none; padding:12px 0; border:0; }
button:focus-visible,a:focus-visible { outline:3px solid #ffe1a3; outline-offset:5px; }
.reflection-note { position:absolute; bottom:3.5%; left:4%; font:italic clamp(15px,1.45vw,22px)/1.4 var(--serif); }
.grid-section { background:#141318; scroll-margin-top:28px; }
.gate { background:rgba(12,11,16,.94); }
.gate-card { background:#211d24; }
.error-msg { color:#ffc5b5; min-height:28px; }
@media (min-width:1600px) { .mystic-landing { padding-top:8%; } }
@media (max-width:900px) { .mystic-landing { min-height:820px; aspect-ratio:auto; padding:85px 8% 110px; background-position:44% center; } .hero h1 { font-size:64px; } .hero .sub { font-size:23px; } .input-section { width:66%; max-width:530px; } .dob-form { gap:16px; } .brand { font-size:36px; } }
@media (max-width:600px) { .mystic-landing { min-height:820px; padding:60px 7% 95px; background-position:26% center; } .hero { padding:20px 0 0; } .hero h1 { font-size:clamp(43px,11.7vw,67px); } .brand { font-size:30px; margin-bottom:36px; } .hero .sub { font-size:20px; line-height:1.4; } .hindi { font-size:19px; } .input-section { width:100%; padding-top:26px; } .field input,.field.year input { height:58px; font-size:23px; border-radius:14px; } .dob-form { gap:12px; margin-bottom:28px; } .input-section .btn-row { gap:14px; } .submit-btn { font-size:25px; padding:16px 28px; } .voice-btn { font-size:19px; min-height:48px; } .reflection-note { left:7%; right:7%; bottom:25px; font-size:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }
@media (min-width:901px) {
  .mystic-landing { padding-top:6.3%; }
  .brand { margin-bottom:35px; }
  .hero h1 { line-height:.9; }
  .submit-btn { min-width:340px; }
}