:root{
    --ink:#070814;
    --ink2:#0e1020;
    --violet:#b66aff;
    --violet2:#6b2d9a;
    --gold:#d7ae75;
    --gold-dim:#8c6846;
    --paper:#f7ebdf;
    --muted:#a29aaf;
    --line:rgba(219,177,122,.33);
    --serif:'Cinzel',Georgia,serif;
    --sans:'DM Sans',Arial,sans-serif
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--ink);
    color:#eee8f2;
    font-family:var(--sans);
    overflow-x:hidden
}
.site-shell{
    min-height:100vh;
    position:relative;
    isolation:isolate;
    /*background:radial-gradient(ellipse 60% 28% at 50% 44%,rgba(121,52,165,.25),transparent 70%),linear-gradient(180deg,#050711,#0a0b1a 54%,#070814)
*/}
.site-shell:before{
    content:"";
    position:absolute;
    z-index:-3;
    inset:0;
    /*background:linear-gradient(180deg,rgba(2,3,9,.76),rgba(4,5,12,0) 30%,rgba(3,4,12,.76)),url('../images/astral-eye-background2.png') 50% 7%/min(1600px,100%) auto no-repeat;
    */background:
        linear-gradient(
            180deg,
            rgba(2,3,9,.8) 0%,
            rgba(2,3,9,0) 10%,
            rgba(2,3,9,0) 90%,
            rgba(2,3,9,.8) 100%
        ),
        url('../images/astral-eye-background2.png') 50% 7%/min(1600px,100%) auto no-repeat;
    opacity:/*.78*/1;
    pointer-events:none
}
.site-shell:after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 16%,transparent 84%,rgba(0,0,0,.42));
    pointer-events:none
}
.container{
    width:min(1160px,calc(100% - 48px));
    margin-inline:auto
}
.star-canvas{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    pointer-events:none
}
.ambient{
    position:absolute;
    z-index:-1;
    filter:blur(50px);
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode:screen
}
.ambient-one{
    width:32rem;
    height:18rem;
    left:-14rem;
    top:28rem;
    background:rgba(109,61,161,.22);
    animation:drift 18s ease-in-out infinite
}
.ambient-two{
    width:28rem;
    height:20rem;
    right:-12rem;
    top:56rem;
    background:rgba(209,151,255,.12);
    animation:drift 21s -8s ease-in-out infinite
}
.topbar{
    height:106px;
    display:flex;
    align-items:center;
    gap:28px;
    position:relative;
    z-index:4
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--paper);
    text-decoration:none;
    letter-spacing:.18em
}
.brand-eye{
    width:52px;
    height:52px;
    fill:none;
    stroke:var(--gold);
    stroke-width:1.3
}
.brand-spark{
    fill:var(--violet);
    stroke:none
}
.brand strong{
    display:block;
    font:500 20px var(--serif);
    letter-spacing:.23em
}
.brand small{
    display:block;
    margin-top:2px;
    color:#97816f;
    font-size:7px;
    letter-spacing:.33em
}
.nav{
    display:flex;
    gap:34px;
    margin-left:auto
}
.nav a,.outline-cta{
    color:#ded8e0;
    text-decoration:none;
    text-transform:uppercase;
    font-size:/*11px*/0.8em;
    letter-spacing:.13em
}
.nav a{
    position:relative;
    padding:8px 0
}
.nav a:after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    width:0;
    height:1px;
    background:var(--gold);
    transition:.3s
}
.nav a:hover:after,.nav a.is-active:after{
    left:0;
    width:100%
}
.outline-cta{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--gold-dim);
    padding:15px 24px;
    clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
    transition:.25s
}
.outline-cta svg,.submit-ritual svg{
    width:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.3
}
.outline-cta:hover{
    color:#fff;
    background:rgba(173,105,253,.13);
    box-shadow:0 0 32px rgba(196,126,255,.18)
}
.nav-toggle{
    display:none
}
.hero{
    min-height:575px;
    position:relative;
    padding-top:48px;
    text-align:center
}
.hero-copy{
    position:relative;
    z-index:2
}
.eyebrow{
    margin:0;
    color:#cbb7a0;
    font-size:/*10px*/0.8em;
    letter-spacing:.18em;
    line-height:1.8
}
.hero h1{
    margin:16px 0 10px;
    font:400 clamp(42px,7vw,86px)/1 var(--serif);
    letter-spacing:.16em;
    text-indent:.16em;
    color:#f2e7f4;
    text-shadow:0 0 26px rgba(196,135,255,.32)
}
.hero h2{
    margin:16px 0 10px;
    /*font:400 clamp(24px,7vw,55px)/1 var(--serif);*/
    font-family: var(--serif);
    letter-spacing:.16em;
    text-indent:.16em;
    color:#f2e7f4;
    text-shadow:0 0 26px rgba(196,135,255,.32)
}

.ornament-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--gold);
    
    margin-top:12em;
}
.ornament-line span{
    width:142px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent)
}
.ornament-line b{
    font-size:19px;
    font-weight:400
}
.hero-lede{
    margin:20px 0;
    color:#d0c5d1;
    font-size:/*12px*/1em;
    line-height:1.8;
    letter-spacing:.08em;
    text-transform:uppercase
}
.eye-stage{
    position:absolute;
    z-index:1;
    top:166px;
    left:50%;
    width:min(800px,92vw);
    height:390px;
    transform:translateX(-50%);
    color:rgba(221,165,241,.44);
    transform-origin:center
}
.sigil-large{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    stroke-width:1;
    filter:drop-shadow(0 0 10px rgba(163,75,235,.28));
    animation:rotate-sigil 42s linear infinite
}
.living-eye{
    position:absolute;
    width:540px;
    max-width:77%;
    height:auto;
    left:50%;
    top:70px;
    transform:translateX(-50%);
    overflow:visible;
    filter:drop-shadow(0 20px 38px rgba(0,0,0,.75))
}
.eye-white{
    fill:#c9bbc2
}
.eye-shadow{
    fill:#5e4055;
    opacity:.7
}
.iris-group{
    transform-box:fill-box;
    transform-origin:center;
    animation:eye-breathe 4.5s ease-in-out infinite
}
.iris-lines{
    fill:none;
    stroke:rgba(255,229,255,.62);
    stroke-width:1.2;
    stroke-dasharray:2 5
}
.pupil{
    fill:#0a0713;
    stroke:#ebc5ff;
    stroke-opacity:.38;
    stroke-width:1.2
}
.iris-light{
    fill:#fff;
    opacity:.78
}
.iris-spark{
    fill:#f8d87a
}
.lid{
    fill:#0a0811;
    transform-box:fill-box;
    transform-origin:center
}
.lid.top{
    transform:translateY(-12px)
}
.lid.bottom{
    transform:translateY(12px)
}
.lash-line{
    fill:none;
    stroke:#120c15;
    stroke-width:7;
    stroke-linecap:round
}
.eye-reflection{
    position:absolute;
    left:50%;
    top:158px;
    width:180px;
    height:52px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(254,224,255,.18),transparent 65%);
    filter:blur(10px);
    animation:reflection 3s ease-in-out infinite
}
.fortune-zone{
    position:relative;
    padding:38px 0 105px
}
.fortune-card,.oracle-response{
    position:relative;
    width:min(720px,100%);
    margin:0 auto;
    border:1px solid var(--line);
    background:linear-gradient(135deg,rgba(12,12,27,.93),rgba(6,8,18,.96));
    box-shadow:0 18px 80px rgba(0,0,0,.52),inset 0 0 55px rgba(122,54,176,.07);
    padding:35px 44px 30px;
    backdrop-filter:blur(12px)
}
.fortune-card:before,.oracle-response:before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(219,177,122,.12);
    pointer-events:none
}
.card-corner{
    position:absolute;
    width:24px;
    height:24px;
    border-color:var(--gold);
    opacity:.7
}
.c1{
    left:-1px;
    top:-1px;
    border-left:1px solid;
    border-top:1px solid
}
.c2{
    right:-1px;
    top:-1px;
    border-right:1px solid;
    border-top:1px solid
}
.c3{
    left:-1px;
    bottom:-1px;
    border-left:1px solid;
    border-bottom:1px solid
}
.c4{
    right:-1px;
    bottom:-1px;
    border-right:1px solid;
    border-bottom:1px solid
}
.field-row{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:14px;
    margin-bottom:20px;
    position:relative;
    z-index:1
}
.field-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(207,158,101,.43);
    border-radius:50%;
    color:#d9ab72
}
.field-icon svg{
    width:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.3;
    stroke-linecap:round;
    stroke-linejoin:round
}
.field-content label{
    display:block;
    margin:0 0 8px;
    color:#e7e7e7;
    text-transform:uppercase;
    font-size:/*10px*/0.8em;
    letter-spacing:.12em
}
.valeria {
    width:70%;
    border-radius: 30px;
    
    background:rgba(213,171,113,.2);
    border:1px solid rgba(213,171,113,.2)
}
.online {
    margin-top:2em;
    font-weight: 700;
    font-family: sans-serif;
    color: #3adb76;
}

#pay-btn {
    display:none;
    background: linear-gradient(90deg,rgba(76,36,112,.82),rgba(86,210,181,.76),rgba(76,36,112,.82));
}

#payment-check {
    display:none;
    text-align: center;
    padding: 2em;
}


input,textarea{
    width:100%;
    border:1px solid rgba(206,172,166,.3);
    background:rgba(255,255,255,.028);
    color:#f4edf5;
    font:400 /*13px*/1.2em var(--sans);
    outline:0;
    padding:12px 14px;
    transition:.25s
}
textarea{
    height:82px;
    resize:vertical
}
input::placeholder,textarea::placeholder{
    color:#797483
}
input:focus,textarea:focus{
    border-color:rgba(202,139,247,.85);
    box-shadow:0 0 0 3px rgba(162,89,220,.11)
}
.upload-row{
    margin-bottom:26px
}
.upload-box{
    position:relative;
    display:flex!important;
    align-items:center;
    gap:20px;
    min-height:100px;
    padding:12px 22px!important;
    margin:0!important;
    border:1px dashed rgba(207,165,106,.52);
    cursor:pointer;
    overflow:hidden;
    transition:.25s
}
.upload-box:hover,.upload-box.is-dragging{
    border-color:#deabff;
    background:rgba(130,62,192,.08)
}
.upload-box input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer
}
.upload-sigil{
    width:75px;
    color:#cb8cf6
}
.upload-sigil svg{
    width:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1
}
.upload-copy{
    display:grid;
    gap:4px;
    text-transform:none!important;
    letter-spacing:0!important
}
.upload-copy b{
    font:400 13px var(--serif);
    letter-spacing:.12em;
    color:#e6d9e8;
    text-transform:uppercase
}
.upload-copy small{
    font-size:11px;
    color:#aaa4af
}
.upload-copy em{
    font-size:8px;
    letter-spacing:.1em;
    color:#817b86;
    font-style:normal
}
.upload-preview{
    display:none;
    position:absolute;
    right:14px;
    width:92px;
    height:70px;
    border:1px solid rgba(222,171,255,.52);
    object-fit:cover
}
.upload-box.has-file .upload-preview{
    display:block
}
.upload-box.has-file .upload-sigil{
    opacity:.3
}
.submit-ritual{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    width:min(435px,100%);
    margin:8px auto 0;
    border:1px solid rgba(218,167,103,.8);
    border-radius:0;
    /*background:linear-gradient(90deg,rgba(76,36,112,.82),rgba(157,86,210,.76),rgba(76,36,112,.82));*/
    background:linear-gradient(90deg,rgba(76,36,112,.82),rgba(210,86,86,.76),rgba(76,36,112,.82));
    
    box-shadow:0 0 0 5px rgba(169,100,232,.06),0 0 35px rgba(181,101,250,.3);
    padding:16px 20px;
    color:/*#fcf7ff*/white;
    cursor:pointer;
    font:400 15px var(--serif);
    letter-spacing:.12em;
    text-transform:uppercase;
    clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px),0 17px);
    transition:transform .22s,filter .22s
}
.submit-ritual:hover{
    transform:translateY(-2px);
    filter:brightness(1.13)
}
.submit-ritual[disabled]{
    cursor:wait;
    opacity:.75
}
.button-stars{
    color:#f8df9a
}
.form-note{
    position:relative;
    z-index:1;
    margin:21px 0 0;
    text-align:center;
    color:#817b8d;
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:.14em
}

#payment-element {
    margin-bottom: 30px;
}

.oracle-response{
    margin-top:28px;
    text-align:center;
    animation:appear .65s ease both
}
.oracle-response h2,.info-section h2{
    margin:12px 0 21px;
    color:#f5eafa;
    font:400 clamp(26px,4vw,42px)/1.3 var(--serif);
    letter-spacing:.09em
}
.oracle-response h2 span{
    color:#e1adff
}
.oracle-text{
    max-width:600px;
    margin:auto;
    text-align:left;
    color:#d9d2dc;
    line-height:1.8;
    font-size:/*15px*/1em;
}
.oracle-text h3{
    margin:22px 0 6px;
    color:#e9c58e;
    font:400 14px var(--serif);
    letter-spacing:.08em
}
.oracle-text p{
    margin:0 0 12px
}
.again-button{
    margin-top:22px;
    padding:11px 18px;
    border:1px solid var(--gold-dim);
    background:transparent;
    color:#e9dfec;
    text-transform:uppercase;
    letter-spacing:.12em;
    font:/*10px*/1em var(--sans);
    cursor:pointer
}
.mountains{
    position:absolute;
    bottom:0;
    width:33vw;
    height:270px;
    opacity:.45;
    background:linear-gradient(150deg,transparent 0 23%,#03040b 23% 36%,transparent 36% 48%,#03040b 48% 67%,transparent 67%);
    filter:drop-shadow(0 -8px 20px #000)
}
.mountains-left{
    left:0;
    transform:scaleX(-1)
}
.mountains-right{
    right:0
}
.info-section{
    padding:90px 0 35px;
    text-align:center;
    max-width:760px
}
.info-section p:last-child{
    margin:0 auto;
    color:#aaa4b1;
    line-height:1.85;
    font-size:/*15px*/1em;
}
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-top:30px;
    background:rgba(213,171,113,.2);
    border:1px solid rgba(213,171,113,.2)
}
.steps article{
    padding:28px;
    background:#0b0c19
}
.steps span{
    color:#c99cff;
    font:400 /*18px*/1.7em var(--serif)
}
.steps h3{
    margin:9px 0;
    color:#f0e6f2;
    font:400 /*16px*/1.5em var(--serif);
    letter-spacing:.05em
}
.steps p{
    margin:0;
    color:#9993a1;
    font-size:/*13px*/0.8em;
    line-height:1.6
}
footer{
    display:flex;
    justify-content:space-between;
    gap:20px;
    width:min(1160px,calc(100% - 48px));
    margin:82px auto 0;
    padding:24px 0;
    color:#817b8a;
    border-top:1px solid rgba(213,171,113,.18);
    font-size:11px;
    letter-spacing:.07em
}
@keyframes rotate-sigil{
    to{
        transform:rotate(360deg)
    }
}
@keyframes eye-breathe{
    50%{
        transform:scale(1.035)
    }
}
@keyframes reflection{
    50%{
        opacity:.45;
        transform:translateX(-47%) scale(.87)
    }
}
@keyframes drift{
    50%{
        transform:translate(45px,-30px) scale(1.14)
    }
}
@keyframes appear{
    from{
        opacity:0;
        transform:translateY(20px)
    }
    to{
        opacity:1;
        transform:none
    }
}
@media(max-width:990px){
    .topbar{
        height:86px
    }
    .nav{
        position:absolute;
        top:76px;
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        gap:0;
        padding:15px 24px;
        background:#111323;
        border:1px solid rgba(214,176,116,.25)
    }
    .nav.open{
        display:flex
    }
    .nav a{
        padding:12px 0
    }
    .nav-toggle{
        display:block;
        order:1;
        margin-left:auto;
        width:38px;
        height:38px;
        border:1px solid rgba(214,176,116,.45);
        background:transparent
    }
    .nav-toggle i{
        display:block;
        width:16px;
        height:1px;
        background:#e4c28c;
        margin:5px auto
    }
    .outline-cta{
        display:none
    }
    .hero{
        /*min-height:505px;*/
        min-height:205px;
        padding-top:42px
    }
    .eye-stage{
        top:170px;
        height:310px
    }
    .living-eye{
        top:60px
    }
    .fortune-card{
        padding:27px 24px
    }
    .info-section{
        padding-top:64px
    }
    .steps{
        grid-template-columns:1fr
    }
    .mountains{
        display:none
    }
}
@media(max-width:540px){
    .container{
        width:min(100% - 28px,1160px)
    }
    .brand-eye{
        width:42px
    }
    .brand strong{
        font-size:16px
    }
    .hero h1{
        font-size:37px
    }
    .eyebrow{
        font-size:8px
    }
    .hero-lede{
        font-size:10px
    }
    .hero{
        min-height:440px
    }
    .eye-stage{
        top:145px;
        /*width:115vw*/
    }
    .sigil-large{
        opacity:.7;
        
    }
    .living-eye{
        top:58px;
        max-width:85%
    }
    .fortune-zone{
        padding-top:10px
    }
    .field-row{
        grid-template-columns:36px 1fr;
        gap:8px
    }
    .field-icon{
        width:32px;
        height:32px
    }
    .upload-box{
        padding:12px!important;
        gap:10px
    }
    .upload-sigil{
        width:54px
    }
    .upload-preview{
        width:62px;
        height:55px
    }
    .submit-ritual{
        font-size:12px
    }
    .steps{
        margin-top:15px
    }
    footer{
        flex-direction:column;
        margin-top:54px
    }
    .oracle-response{
        padding:28px 24px
    }
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important
    }
}