.vi{
    --vi-gold:#e7c59c;
    --vi-ivory:#fff2e9;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(100px,11vw,165px) 22px 90px;
    color:var(--vi-ivory);
    background:
        radial-gradient(ellipse at 12% 15%,rgba(131,48,78,.28),transparent 48%),
        radial-gradient(ellipse at 100% 90%,rgba(103,34,60,.19),transparent 50%),
        linear-gradient(135deg,#210914 0%,#310e20 47%,#170711 100%);
}

.vi *{box-sizing:border-box}

.vi:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.15;
    background-image:radial-gradient(rgba(246,201,174,.2) .6px,transparent .6px);
    background-size:22px 22px;
}

.vi-ambient{
    position:absolute;
    border-radius:50%;
    filter:blur(95px);
    pointer-events:none;
}

.vi-ambient-one{
    width:480px;height:480px;left:-200px;top:-230px;
    background:rgba(174,61,100,.12);
}

.vi-ambient-two{
    width:550px;height:550px;right:-250px;bottom:-250px;
    background:rgba(146,54,90,.13);
}

.vi-shell{
    position:relative;
    z-index:1;
    max-width:1320px;
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(50px,7vw,120px);
    align-items:start;
}

.vi-heading{
    position:sticky;
    top:90px;
}

.vi-eyebrow{
    display:flex;
    align-items:center;
    gap:15px;
    color:#efc6a3;
    font:700 11px/1.5 system-ui,sans-serif;
    letter-spacing:.26em;
    text-transform:uppercase;
}

.vi-eyebrow-line{
    width:34px;
    height:1px;
    background:var(--vi-gold);
}

.vi h2{
    margin:28px 0 28px;
    font:normal clamp(48px,6.2vw,91px)/1.06 Georgia,serif;
    letter-spacing:-.065em;
    text-wrap:balance;
}

.vi h2 em{
    display:block;
    color:var(--vi-gold);
    font-weight:normal;
    font-style:italic;
}

.vi-intro{
    max-width:440px;
    margin:0;
    color:#d0afb9;
    font:16px/1.9 system-ui,sans-serif;
}

.vi-ornament{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:75px;
    color:#d6b18e;
}

.vi-ornament span:first-child{
    font-size:55px;
    line-height:1;
    opacity:.8;
}

.vi-ornament span:last-child{
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.25em;
}

.vi-questions{
    border-top:1px solid rgba(240,202,168,.42);
}

.vi-questions-header,
.vi-questions-footer{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:20px 0;
    color:#cb9f9e;
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.18em;
}

.vi-questions-header{
    border-bottom:1px solid rgba(239,192,169,.16);
}

.vi-questions-footer{
    border-top:1px solid rgba(239,192,169,.22);
}

.vi-questions-footer span:last-child{
    color:var(--vi-gold);
    font-size:20px;
}

.vi-item{
    border-bottom:1px solid rgba(239,192,169,.19);
}

.vi-question{
    display:flex;
    align-items:center;
    gap:23px;
    padding:27px 0;
    cursor:pointer;
    list-style:none;
    outline-offset:6px;
}

.vi-question::-webkit-details-marker{
    display:none;
}

.vi-question::marker{
    content:"";
}

.vi-number{
    align-self:flex-start;
    flex:none;
    padding-top:5px;
    color:#d3a787;
    font:normal 17px/1.4 Georgia,serif;
}

.vi-question-text{
    flex:1;
    color:#f8e8df;
    font:normal clamp(20px,2vw,27px)/1.35 Georgia,serif;
    letter-spacing:-.025em;
    transition:color .3s ease;
}

.vi-item[open] .vi-question-text,
.vi-question:hover .vi-question-text{
    color:#f0c99e;
}

.vi-toggle{
    position:relative;
    display:grid;
    place-items:center;
    flex:none;
    width:39px;
    height:39px;
    border:1px solid rgba(236,195,159,.36);
    border-radius:50%;
    transition:background .3s ease,transform .3s ease;
}

.vi-toggle span{
    position:absolute;
    width:13px;
    height:1px;
    background:#f1d0b1;
}

.vi-toggle span:last-child{
    transform:rotate(90deg);
    transition:transform .3s ease;
}

.vi-item[open] .vi-toggle{
    background:rgba(235,190,150,.13);
    transform:rotate(180deg);
}

.vi-item[open] .vi-toggle span:last-child{
    transform:rotate(0deg);
}

.vi-answer{
    padding:0 50px 28px 40px;
    animation:vi-answer-in .35s ease both;
}

.vi-answer p{
    margin:0;
    max-width:560px;
    color:#d5b8c0;
    font:14px/1.95 system-ui,sans-serif;
    white-space:pre-line;
}

.vi-bottom{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:100px;
    color:#bd919d;
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.24em;
}

.vi-bottom-line{
    width:65px;
    height:1px;
    background:linear-gradient(90deg,transparent,#c9958e);
}

.vi-bottom-line:last-child{
    transform:rotate(180deg);
}

.vi [data-vi-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease,transform .8s ease;
}

.vi [data-vi-reveal].vi-visible{
    opacity:1;
    transform:translateY(0);
}

@keyframes vi-answer-in{
    from{opacity:0;transform:translateY(-7px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:950px){
    .vi-shell{
        grid-template-columns:1fr;
        gap:55px;
    }

    .vi-heading{
        position:static;
    }

    .vi-ornament{
        display:none;
    }
}

@media(max-width:600px){
    .vi{
        padding:85px 17px 65px;
    }

    .vi h2{
        font-size:clamp(45px,11vw,70px);
    }

    .vi-question{
        gap:14px;
        padding:24px 0;
    }

    .vi-question-text{
        font-size:21px;
    }

    .vi-toggle{
        width:33px;
        height:33px;
    }

    .vi-answer{
        padding:0 35px 24px 31px;
    }

    .vi-bottom{
        margin-top:65px;
        gap:10px;
        font-size:9px;
    }

    .vi-bottom-line{
        width:25px;
    }
}

@media(prefers-reduced-motion:reduce){
    .vi [data-vi-reveal]{
        opacity:1;
        transform:none;
        transition:none;
    }

    .vi-answer{
        animation:none;
    }

    .vi-toggle,
    .vi-toggle span{
        transition:none;
    }
}
/* VELVET INQUIRY — CINEMATIC EDITION */
.vi{
    background:
        radial-gradient(ellipse at 8% 14%,rgba(185,60,107,.35),transparent 43%),
        radial-gradient(ellipse at 88% 82%,rgba(128,37,91,.3),transparent 48%),
        radial-gradient(ellipse at 50% 50%,rgba(82,19,55,.22),transparent 65%),
        linear-gradient(135deg,#160610,#390f28 48%,#170611);
}
.vi::after{
    content:"QUESTIONS";
    position:absolute;
    z-index:0;
    left:-3%;
    bottom:4%;
    color:rgba(245,194,171,.035);
    font:normal clamp(115px,20vw,330px)/1 Georgia,serif;
    letter-spacing:-.09em;
    white-space:nowrap;
    pointer-events:none;
}
.vi-ambient-one{
    width:620px;
    height:620px;
    left:-250px;
    top:-210px;
    background:rgba(208,65,115,.21);
    animation:vi-aurora-one 16s ease-in-out infinite alternate;
}
.vi-ambient-two{
    width:700px;
    height:700px;
    right:-280px;
    bottom:-280px;
    background:rgba(155,52,111,.2);
    animation:vi-aurora-two 19s ease-in-out infinite alternate;
}
.vi-heading{
    isolation:isolate;
}
.vi-heading::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:min(39vw,480px);
    height:min(39vw,480px);
    left:-12%;
    top:7%;
    border:1px solid rgba(236,191,142,.2);
    border-radius:50%;
    box-shadow:
        0 0 0 43px rgba(230,176,129,.022),
        0 0 0 88px rgba(230,176,129,.015),
        inset 0 0 75px rgba(221,142,105,.05);
    animation:vi-orbit-breathe 9s ease-in-out infinite;
    pointer-events:none;
}
.vi-heading::after{
    content:"✧";
    position:absolute;
    z-index:-1;
    top:12%;
    right:10%;
    color:rgba(242,201,152,.55);
    font:normal 90px/1 Georgia,serif;
    text-shadow:0 0 45px rgba(238,184,127,.35);
    animation:vi-star-float 8s ease-in-out infinite;
    pointer-events:none;
}
.vi h2{
    position:relative;
    z-index:1;
    text-shadow:0 15px 50px rgba(0,0,0,.18);
}
.vi h2 em{
    background:linear-gradient(105deg,#ffe6bf,#d6a67d,#f6d5a5);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:vi-gold-flow 9s ease-in-out infinite alternate;
}
.vi-questions{
    position:relative;
    border-top-color:rgba(251,213,171,.58);
}
.vi-questions::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-25px -28px;
    border:1px solid rgba(239,191,161,.075);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,206,181,.035),rgba(255,206,181,.008));
    backdrop-filter:blur(4px);
    pointer-events:none;
}
.vi-item{
    position:relative;
    transition:background .35s ease,border-color .35s ease;
}
.vi-item::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:0;
    height:1px;
    background:linear-gradient(90deg,#f5cba0,rgba(245,203,160,.15));
    transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.vi-item[open]::before{
    width:100%;
}
.vi-item:hover,
.vi-item[open]{
    background:linear-gradient(90deg,rgba(240,179,147,.075),transparent 85%);
}
.vi-question{
    transition:padding-left .3s ease;
}
.vi-item:hover .vi-question{
    padding-left:9px;
}
.vi-item[open] .vi-number{
    color:#ffe0b2;
    text-shadow:0 0 18px rgba(241,188,135,.35);
}
.vi-item[open] .vi-toggle{
    box-shadow:0 0 25px rgba(229,167,124,.12);
}
.vi-answer{
    transform-origin:top;
    animation:vi-answer-cinematic .42s cubic-bezier(.2,.7,.2,1) both;
}
.vi-ornament span:first-child{
    display:inline-block;
    width:max-content;
    animation:vi-ornament-spin 28s linear infinite;
}
@keyframes vi-aurora-one{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(130px,95px) scale(1.2)}
}
@keyframes vi-aurora-two{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(-110px,-130px) scale(1.18)}
}
@keyframes vi-orbit-breathe{
    0%,100%{opacity:.45;transform:scale(.95) rotate(-8deg)}
    50%{opacity:.9;transform:scale(1.07) rotate(8deg)}
}
@keyframes vi-star-float{
    0%,100%{transform:translateY(0) rotate(-12deg);opacity:.45}
    50%{transform:translateY(-30px) rotate(18deg);opacity:.9}
}
@keyframes vi-gold-flow{
    from{background-position:0% 50%}
    to{background-position:100% 50%}
}
@keyframes vi-ornament-spin{
    to{transform:rotate(360deg)}
}
@keyframes vi-answer-cinematic{
    from{opacity:0;transform:translateY(-12px) scaleY(.94)}
    to{opacity:1;transform:translateY(0) scaleY(1)}
}
@media(max-width:950px){
    .vi-heading::before{
        width:360px;
        height:360px;
        left:auto;
        right:-100px;
        top:-50px;
    }
    .vi-heading::after{
        right:8%;
        top:0;
        font-size:60px;
    }
}
@media(max-width:600px){
    .vi-questions::before{
        inset:-14px -8px;
    }
    .vi-heading::before{
        width:280px;
        height:280px;
        right:-140px;
        opacity:.5;
    }
    .vi::after{
        font-size:100px;
    }
}
@media(prefers-reduced-motion:reduce){
    .vi-ambient-one,.vi-ambient-two,
    .vi-heading::before,.vi-heading::after,
    .vi h2 em,.vi-ornament span:first-child,
    .vi-answer{
        animation:none!important;
    }
}
