button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    margin: 0;
    box-sizing: border-box;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}


input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
    background-color: #fff;
    transition: background .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: solid 1px color-mix(in srgb, currentColor 30%, transparent);
}



textarea {
    width: 100%;
    min-height: 80px;
    overflow: auto;
}

::placeholder {
    color: #888;
    font-style: italic;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--primary);
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    background: #fff;
    border: solid 1px color-mix(in srgb, currentColor 30%, transparent);
    height: 22px;
    overflow: hidden;
    position: static;
    vertical-align: text-bottom;
    width: 22px;
    cursor: pointer;
    margin: 0 8px 0 0;
}

input[type="checkbox"] {
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:checked {
    box-shadow: inset 0 0 0 4px var(--wp--preset--color--primary);
    background: currentColor;
}

input[type="checkbox"]:checked {
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(0.168714,0,0,0.168714,15.8126,15.8125)"> <path d="M393.401,124.425L179.603,338.208C163.771,354.043 138.089,354.043 122.242,338.208L11.878,227.836C-3.96,212.001 -3.96,186.316 11.878,170.478C27.719,154.637 53.399,154.637 69.233,170.472L150.931,252.171L336.037,67.064C351.878,51.223 377.56,51.235 393.395,67.064C409.23,82.902 409.23,108.578 393.401,124.425Z" style="fill:white;fill-rule:nonzero;"/> </g></svg>');
    background: var(--wp--preset--color--primary);
    border-color: currentColor;
}

input[type="submit"] {
    background: transparent none;
    border-color: currentColor;
    border-width: 2px;
    border-style: solid;
    color: currentColor;
    padding-top: calc(.75rem - 2px);
    padding-right: calc(1.5rem - 2px);
    padding-bottom: calc(0.75rem - 2px);
    padding-left: calc(1.5rem - 2px);
    cursor: pointer;
}


.senseform-background {
    position: relative;
    
    background: #050505;
    color: #d0d0d0;
    overflow: hidden;
}

.senseform-background .aurora-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.senseform-background .aurora {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: linear-gradient(45deg,
            transparent 25%,
            rgba(12, 74, 88, 0.12) 40%,
            rgba(95, 179, 166, 0.15) 50%,
            rgba(15, 82, 96, 0.12) 60%,
            transparent 75%);
    filter: blur(60px);
    animation: aurora 20s ease-in-out infinite, auroraPulse 8s ease-in-out infinite;
}

.senseform-background .aurora::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(125deg,
            transparent 20%,
            rgba(95, 179, 166, 0.08) 40%,
            rgba(12, 74, 88, 0.06) 60%,
            transparent 80%);
    animation: aurora 15s ease-in-out infinite reverse, auroraPulse 6s ease-in-out infinite;
}

@keyframes aurora {

    0%,
    100% {
        transform: rotate(0deg) translateY(0) scale(1);
        filter: blur(60px) saturate(1);
    }

    25% {
        transform: rotate(45deg) translateY(-100px) scale(1.1);
        filter: blur(70px) saturate(1.2);
    }

    50% {
        transform: rotate(90deg) translateY(0) scale(0.9);
        filter: blur(80px) saturate(0.95);
    }

    75% {
        transform: rotate(135deg) translateY(100px) scale(1.05);
        filter: blur(65px) saturate(1.1);
    }
}

@keyframes auroraPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.senseform-background .morphing-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

.senseform-background .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: morph 20s ease-in-out infinite;
}

.senseform-background .shape:nth-child(1) {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(12, 74, 88, 0.3) 0%, transparent 70%);
    top: 10%;
    left: 10%;
    animation-duration: 25s;
}

.senseform-background .shape:nth-child(2) {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(8, 48, 43, 0.3) 0%, transparent 70%);
    bottom: 20%;
    right: 10%;
    animation-duration: 30s;
    animation-delay: -10s;
}

.senseform-background .shape:nth-child(3) {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(15, 82, 96, 0.3) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    animation-duration: 35s;
    animation-delay: -5s;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg) scale(1);
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(90deg) scale(1.1);
    }

    50% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: rotate(180deg) scale(0.9);
    }

    75% {
        border-radius: 40% 60% 30% 70% / 70% 40% 60% 30%;
        transform: rotate(270deg) scale(1.05);
    }
}

.senseform-background .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transform: translateZ(0);
}

.senseform-background .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(95, 179, 166, 0.6);
    border-radius: 50%;
    animation: float 20s infinite linear;
    box-shadow: 0 0 6px rgba(95, 179, 166, 0.3);
    will-change: transform;
    transform: translateZ(0);
}

@keyframes float {
    0% {
        transform: translateY(100vh) translateX(0) translateZ(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100vh) translateX(0) translateZ(0);
        opacity: 0;
    }
}

.senseform-background .breathing-light {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 179, 166, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: breathe 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

.senseform-background .breathing-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(95, 179, 166, 0.4);
    border-radius: 50%;
    animation: breatheDot 4s ease-in-out infinite;
    z-index: 2;
}

@keyframes breatheDot {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.8;
    }
}