:root { --ivory: #fff5e4; --gold: #d6a74b; --gold-light: #ecd28d; --ink: #123522; --black: #100908; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: "DM Sans", sans-serif; }
.hero { position: relative; isolation: isolate; min-height: max(740px, 100svh); overflow: hidden; display: flex; align-items: stretch; background: #0d0907; }
.hero-photo { position: absolute; z-index: -3; inset: 0; background: url("assets/hero-ritual-noite-v2.png") center 58% / cover no-repeat; }
.hero-veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(7,5,4,.86) 0%, rgba(7,5,4,.62) 43%, rgba(7,5,4,.13) 100%), linear-gradient(0deg, rgba(5,3,2,.45), transparent 45%), radial-gradient(ellipse 65% 56% at 22% 37%, rgba(5,3,2,.46), transparent 78%); }
.hero-content { width: min(100%, 1250px); margin: 0 auto; padding: clamp(30px, 5vw, 70px) max(27px, calc((100vw - 1120px) / 2)); display: flex; flex-direction: column; align-items: flex-start; }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: clamp(54px, 6vw, 74px); height: auto; object-fit: contain; filter: drop-shadow(0 3px 15px rgba(0,0,0,.7)); }
.brand-lockup div { display: grid; gap: 5px; }
.brand-name { color: #fff6e7; font: 600 clamp(53px, 6vw, 78px)/.74 "Cormorant Garamond", Georgia, serif; letter-spacing: .105em; text-indent: .105em; text-shadow: 0 2px 20px rgba(0,0,0,.65); }
.brand-subtitle { color: var(--gold); font-size: clamp(10px, 1.2vw, 15px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.hero-copy { max-width: 640px; margin-top: clamp(57px, 10vh, 132px); }
h1, h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; }
h1 { color: #fff6e7; font-size: clamp(63px, 8vw, 110px); font-weight: 600; line-height: .8; letter-spacing: -.042em; text-shadow: 0 4px 25px rgba(0,0,0,.76); }
h1 em { color: #d4a64d; font-weight: 500; }
.ornament { width: min(70%, 310px); margin: clamp(21px, 3.2vh, 35px) 0; display: flex; align-items: center; gap: 13px; color: var(--gold); }
.ornament span { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(214,167,75,.8), transparent); }
.ornament i { font-style: normal; font-size: 19px; }
.hero-copy p { width: min(100%, 470px); margin: 0; color: rgba(255,247,232,.97); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.47; text-shadow: 0 3px 16px rgba(0,0,0,.8); }
.google-play { width: min(100%, 360px); margin-top: auto; display: grid; justify-items: start; gap: 7px; color: #fff7e6; text-decoration: none; transition: transform .2s ease; }
.google-play:hover { transform: translateY(-2px); }
.google-play > span { color: var(--gold-light); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.75); }
.google-play img { width: 100%; height: auto; display: block; }

.app-showcase { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 8vw, 92px) 24px 82px; display: flex; flex-direction: column; align-items: center; background: #0c100a; }
.showcase-backdrop { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, #0a0b09 0%, rgba(8,12,8,.45) 19%, #101209 100%), url("assets/hero-ritual-noite-v2.png") center bottom / cover no-repeat; opacity: .96; filter: saturate(.8) brightness(.54); }
.showcase-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent, rgba(4,6,3,.74) 76%); }
.phone-frame { position: relative; width: min(90vw, 490px); padding: 8px; border: 1px solid rgba(194,196,188,.74); border-radius: 42px; background: linear-gradient(140deg, #343835, #080a09 71%); box-shadow: 0 0 0 2px #020302, 0 30px 90px rgba(0,0,0,.76), inset 0 0 0 1px rgba(255,255,255,.18); }
.app-screen { position: relative; overflow: hidden; border-radius: 40px; }
.phone-frame img { display: block; width: 100%; }

@media (max-width: 650px) { .hero { min-height: 825px; } .hero-photo { background-position: 57% 54%; } .hero-veil { background: linear-gradient(90deg, rgba(7,5,4,.86), rgba(7,5,4,.39)), linear-gradient(0deg, rgba(5,3,2,.43), transparent 51%), radial-gradient(ellipse 120% 58% at 15% 32%, rgba(5,3,2,.45), transparent 76%); } .hero-content { padding: 30px 26px 26px; } .brand-mark { width: 61px; } .brand-name { font-size: 59px; } .brand-subtitle { font-size: 10px; } .hero-copy { max-width: 370px; margin-top: clamp(53px, 10vh, 88px); } h1 { font-size: clamp(59px, 16vw, 72px); line-height: .78; } .hero-copy p { max-width: 330px; font-size: 18px; line-height: 1.48; } .ornament { width: 218px; margin: 23px 0; } .google-play { width: min(100%, 330px); } .app-showcase { min-height: 0; padding: 64px 21px 68px; } .phone-frame { width: min(93vw, 435px); padding: 7px; border-radius: 39px; } .app-screen { border-radius: 32px; } }
@media (max-width: 370px), (max-height: 740px) { .hero { min-height: 740px; } .hero-content { padding-top: 20px; } .brand-mark { width: 54px; } .brand-name { font-size: 50px; } .brand-subtitle { font-size: 9px; } .hero-copy { margin-top: 38px; } h1 { font-size: 56px; } .ornament { margin: 17px 0; } .hero-copy p { font-size: 16px; } }
@media (prefers-reduced-motion: no-preference) { .brand-lockup { animation: rise .55s ease both; } .hero-copy { animation: rise .68s .1s ease both; } .google-play { animation: rise .68s .18s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } }