:root{
    --arq:#E6640E;
    --art:#D91A60;
    --des:#8B2385;
    --black:#000000;
    --white:#ffffff;
    --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--black);
    color:var(--white);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.bg-video{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
    filter:saturate(.92) brightness(.78);
}

.bg-overlay{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(120% 90% at 70% 10%, rgba(139,35,133,.18), transparent 55%),
        radial-gradient(120% 90% at 20% 100%, rgba(230,100,14,.16), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.82) 100%);
}

.bg-grid{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.4;
    background-image:
        repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 84px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 84px);
    mask-image:radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 100%);
    -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 100%);
}

.stage{
    position:relative;
    z-index:2;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
}
.content{
    width:100%;
    max-width:620px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:22px;
}
.content>*{opacity:0;animation:rise .9s var(--ease) forwards}
.dots{animation-delay:.15s}
.logo{animation-delay:.30s}
.eyebrow{animation-delay:.45s}
.headline{animation-delay:.55s}
.lede{animation-delay:.68s}
.lead-form{animation-delay:.82s}
.insta{animation-delay:.95s}

.dots{display:flex;gap:14px;align-items:center}
.dot{
    width:13px;height:13px;border-radius:50%;
    display:inline-block;
    animation:rise .9s var(--ease) forwards, pulse 2.8s ease-in-out infinite;
}
.dot--arq{background:var(--arq)}
.dot--art{background:var(--art);animation-delay:.30s,.30s}
.dot--des{background:var(--des);animation-delay:.45s,.60s}

.logo{
    width:min(300px,72vw);
    height:auto;
    filter:brightness(0) invert(1);
    user-select:none;
    -webkit-user-drag:none;
}

.eyebrow{
    font-size:.74rem;
    font-weight:400;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:rgba(255,255,255,.62);
    padding-left:.34em;
}
.headline{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(2.6rem,9vw,5rem);
    line-height:.94;
    letter-spacing:.01em;
    color:#fff;
    text-wrap:balance;
}
.lede{
    font-size:clamp(.95rem,2.4vw,1.08rem);
    font-weight:300;
    line-height:1.55;
    color:rgba(255,255,255,.78);
    max-width:min(42ch,100%);
}
.hl{font-weight:500}
.hl--arq{color:#ff8a3d}
.hl--art{color:#ff4f8e}
.hl--des{color:#c060ba}

.lead-form{
    width:100%;
    max-width:440px;
    margin-top:6px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.form-label{
    font-size:.82rem;
    font-weight:400;
    letter-spacing:.02em;
    color:rgba(255,255,255,.85);
}
.field{
    display:flex;
    gap:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    padding:6px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:border-color .25s,box-shadow .25s;
}
.field:focus-within{
    border-color:rgba(255,255,255,.5);
    box-shadow:0 0 0 3px rgba(230,100,14,.18);
}
.field input{
    flex:1;
    min-width:0;
    background:transparent;
    border:0;
    outline:0;
    color:#fff;
    font-family:inherit;
    font-size:.95rem;
    padding:10px 8px 10px 16px;
}
.field input::placeholder{color:rgba(255,255,255,.45)}
.field button{
    flex:none;
    border:0;
    cursor:pointer;
    color:#fff;
    font-family:inherit;
    font-size:.86rem;
    font-weight:500;
    letter-spacing:.02em;
    padding:10px 22px;
    border-radius:999px;
    background:linear-gradient(120deg,var(--arq),var(--art) 55%,var(--des));
    background-size:160% 160%;
    transition:transform .2s var(--ease),background-position .5s var(--ease),opacity .2s;
}
.field button:hover{background-position:100% 0;transform:translateY(-1px)}
.field button:active{transform:translateY(0)}
.field button:disabled{opacity:.6;cursor:default;transform:none}
.hp{
    position:absolute !important;
    left:-9999px !important;
    width:1px;height:1px;
    opacity:0;
    pointer-events:none;
}
.form-msg{
    font-size:.8rem;
    min-height:1.1em;
    letter-spacing:.01em;
    color:rgba(255,255,255,.55);
    transition:color .25s;
}
.form-note{
    font-size:.72rem;
    font-weight:300;
    letter-spacing:.01em;
    color:rgba(255,255,255,.42);
}
.form-msg.is-ok{color:#7ee0a8}
.form-msg.is-err{color:#ff7a9c}
.lead-form.is-done .field{
    border-color:rgba(126,224,168,.45);
    box-shadow:0 0 0 3px rgba(126,224,168,.12);
}

.insta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    color:rgba(255,255,255,.55);
    text-decoration:none;
    font-size:.82rem;
    font-weight:400;
    letter-spacing:.02em;
    transition:color .3s;
}
.insta:hover{color:#fff}

@keyframes rise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
    0%,100%{transform:scale(1);opacity:1}
    50%{transform:scale(1.42);opacity:.65}
}

@media(max-width:600px){
    .content{gap:18px}
    .logo{width:min(230px,64vw)}
    .eyebrow{font-size:.64rem;letter-spacing:.42em}
    .headline{font-size:clamp(2rem,8.2vw,3.2rem);letter-spacing:0}
    .lede{font-size:.95rem}
    .field{flex-direction:column;border-radius:18px;padding:8px;gap:8px}
    .field input{text-align:center;padding:12px}
    .field button{width:100%;padding:13px}
    .bg-grid{opacity:.28}
}
@media(min-width:1100px){
    .content{max-width:700px}
}

@media(prefers-reduced-motion:reduce){
    .content>*,.dot{animation:none!important;opacity:1!important;transform:none!important}
    .bg-video{display:none}
    body{
        background:#000 center/cover no-repeat url("assets/img/bg-poster.jpg");
    }
}