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

body {
    font-family: var(--ff-b);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 1.5rem;
    background-image: radial-gradient(circle, rgba(167,139,250,0.055) 1px, transparent 1px);
    background-size: 26px 26px;
    isolation: isolate;
}

.page-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Hero ─────────────────────────── */
.hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}

/* ── Hero glory icon ─────────────────── */
.hero-icon-wrap {
    position: relative;
    display: inline-block;
    width: 88px;
    height: 88px;
    margin-bottom: 1.1rem;
    animation: float 4s ease-in-out infinite;
}

/* Rotating conic-gradient rays */
.hg-rays {
    position: absolute;
    inset: -48px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent  0deg,
        rgba(167,139,250,0.30) 10deg,
        transparent  22deg,
        transparent  42deg,
        rgba(255,107,157,0.24) 52deg,
        transparent  64deg,
        transparent  84deg,
        rgba(167,139,250,0.26)  94deg,
        transparent 106deg,
        transparent 126deg,
        rgba(56,189,248,0.20)  136deg,
        transparent 148deg,
        transparent 168deg,
        rgba(255,107,157,0.22) 178deg,
        transparent 190deg,
        transparent 210deg,
        rgba(167,139,250,0.24) 220deg,
        transparent 232deg,
        transparent 252deg,
        rgba(56,189,248,0.18)  262deg,
        transparent 274deg,
        transparent 294deg,
        rgba(255,107,157,0.20) 304deg,
        transparent 316deg,
        transparent 336deg,
        rgba(167,139,250,0.22) 346deg,
        transparent 360deg
    );
    filter: blur(3px);
    animation: hg-spin 14s linear infinite;
    pointer-events: none;
}

/* Soft radial glow behind the image */
.hg-glow {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(167,139,250,0.55) 0%,
        rgba(255,107,157,0.25) 40%,
        transparent 70%
    );
    filter: blur(18px);
    animation: hg-glow-pulse 3s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Expanding rings that ripple outward */
.hg-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transform: translate(-50%, -50%) scale(1);
    animation: hg-ring-out ease-out infinite;
    pointer-events: none;
    opacity: 0;
}

.hg-ring--1 {
    border-color: rgba(167,139,250,0.65);
    animation-duration: 3.2s;
}
.hg-ring--2 {
    border-color: rgba(255,107,157,0.50);
    animation-duration: 3.2s;
    animation-delay: -1.07s;
}
.hg-ring--3 {
    border-color: rgba(56,189,248,0.40);
    animation-duration: 3.2s;
    animation-delay: -2.13s;
}

/* The actual favicon image */
.hero-favicon {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border-radius: 20px;
    display: block;
    filter: drop-shadow(0 0 12px rgba(167,139,250,0.55))
            drop-shadow(0 0 28px rgba(255,107,157,0.25));
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-9px); }
}

@keyframes hg-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes hg-glow-pulse {
    from { opacity: 0.65; transform: scale(0.92); }
    to   { opacity: 1;    transform: scale(1.12); }
}

@keyframes hg-ring-out {
    0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1);   }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

h1 {
    font-family: var(--ff-h);
    font-size: clamp(2rem, 5vw, 3.8rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: linear-gradient(135deg, var(--coral) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.tagline {
    color: var(--muted);
    font-style: italic;
    font-size: 0.95rem;
}

h2 {
    font-family: var(--ff-h);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--violet);
    margin-bottom: 0;
}

label {
    font-family: var(--ff-h);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--violet);
    display: block;
    margin-bottom: 0.35rem;
}

select,
input[type="date"],
input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: var(--bg-input);
    border: 1.5px solid var(--bdr);
    border-radius: var(--r2);
    color: var(--text);
    font-family: var(--ff-b);
    font-size: 0.9rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    appearance: none;
    -webkit-appearance: none;
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--bdr-focus);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 2.5rem;
    font-style: italic;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    body { padding: 0.9rem; }
    h1   { letter-spacing: 0.1em; }
}

/* ── Geometric gradient background ─────────────────── */
#geoBg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#geoBg.geo-bg--active { opacity: 1; }

.geo-shape { position: absolute; pointer-events: none; }

/* Upper-left violet triangle */
.geo-shape--1 {
    width: 72vw;
    height: 70vh;
    top: 0; left: 0;
    clip-path: polygon(0 0, 88% 0, 0 100%);
    background: linear-gradient(148deg,
        rgba(167, 139, 250, 0.13) 0%,
        rgba(167, 139, 250, 0.04) 52%,
        transparent 100%);
    animation: geoPulse 22s ease-in-out infinite;
}

/* Lower-right coral triangle */
.geo-shape--2 {
    width: 62vw;
    height: 58vh;
    bottom: 0; right: 0;
    clip-path: polygon(100% 0, 100% 100%, 8% 100%);
    background: linear-gradient(320deg,
        rgba(255, 107, 157, 0.11) 0%,
        rgba(255, 107, 157, 0.03) 58%,
        transparent 100%);
    animation: geoPulse 28s ease-in-out infinite reverse;
}

/* Sky-blue diamond, left-center */
.geo-shape--3 {
    width: 48vmin;
    height: 48vmin;
    top: 28%; left: -6%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: radial-gradient(circle at 58% 42%,
        rgba(56, 189, 248, 0.10) 0%,
        rgba(56, 189, 248, 0.03) 55%,
        transparent 100%);
    animation: geoDrift 34s ease-in-out infinite;
}

/* Violet-coral pentagon, upper-right */
.geo-shape--4 {
    width: 52vmin;
    height: 52vmin;
    top: 4%; right: 3%;
    clip-path: polygon(50% 0%, 94% 22%, 78% 84%, 22% 84%, 6% 22%);
    background: radial-gradient(ellipse at 42% 38%,
        rgba(167, 139, 250, 0.10) 0%,
        rgba(255, 107, 157, 0.05) 50%,
        transparent 100%);
    animation: geoPulse 38s ease-in-out infinite 7s;
}

/* Amber wedge, lower-left */
.geo-shape--5 {
    width: 42vw;
    height: 38vh;
    bottom: 3%; left: 4%;
    clip-path: polygon(0 55%, 60% 100%, 0 100%);
    background: linear-gradient(55deg,
        rgba(251, 191, 36, 0.08) 0%,
        transparent 72%);
    animation: geoDrift 26s ease-in-out infinite 4s reverse;
}

/* Atmospheric conic mesh overlay */
.geo-shape--6 {
    inset: 0;
    position: absolute;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(167, 139, 250, 0.04) 0%,
            transparent 65%),
        conic-gradient(from 15deg at 50% 50%,
            transparent 0deg,
            rgba(167, 139, 250, 0.03) 55deg,
            transparent 110deg,
            rgba(255, 107, 157, 0.02) 175deg,
            transparent 230deg,
            rgba(56, 189, 248, 0.02) 300deg,
            transparent 360deg);
    animation: geoSpin 120s linear infinite;
}

@keyframes geoPulse {
    0%, 100% { transform: scale(1)    translate(0px,   0px); }
    35%       { transform: scale(1.06) translate(10px, -6px); }
    70%       { transform: scale(0.97) translate(-6px,  9px); }
}

@keyframes geoDrift {
    0%, 100% { transform: translate(0px,  0px) rotate(0deg); }
    50%       { transform: translate(18px,-14px) rotate(9deg); }
}

@keyframes geoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}