/* Shared Infrastructure: Functional Variable Mapping and Reset */
:root {
    --sapphire-bright: #38bdf8;
    --sapphire-mid: #2563eb;
    --sapphire-dark: #1e40af;
    --sapphire-glow: rgba(56, 189, 248, 0.15);
    --obsidian: #030712;
    --deep-slate: #0f172a;
    --bg-neutral: #fcfcfd;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-neutral); overflow-x: hidden; width: 100%; }
.logo-font { font-family: 'Plus Jakarta Sans', sans-serif; }
/* Visual Engine: Fluid Dynamics and Animation Layer */
.abstract-bg { position: relative; background-color: var(--obsidian); background-image: radial-gradient(circle at top right, #1e40af, #0f172a); overflow: hidden; z-index: 0; }
.wave-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
.wave { position: absolute; width: 150%; height: 150%; background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%); border-radius: 40%; filter: blur(60px); animation: rotate 30s infinite linear; }
.wave-1 { top: -50%; left: -20%; background: rgba(96, 165, 250, 0.15); }
.wave-2 { bottom: -50%; right: -20%; background: rgba(37, 99, 235, 0.1); animation-duration: 40s; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.scan-line { position: absolute; width: 100%; height: 100px; background: linear-gradient(to bottom, transparent, rgba(96, 165, 250, 0.05), transparent); animation: scan 8s infinite linear; z-index: 2; }
@keyframes scan { from { top: -100px; } to { top: 100%; } }
.floating-icon { position: absolute; color: white; opacity: 0.1; mix-blend-mode: overlay; z-index: 2; pointer-events: none; stroke-width: 0.3px; }
.icon-screen { width: 1000px; top: -10%; left: -15%; transform: rotate(-25deg); }
.icon-shield { width: 900px; bottom: -15%; right: -10%; transform: rotate(30deg); }
/* Structural Divider logic: Subpixel precision via Hardware Logic */
.svr-divider { width: 33%; margin: 4rem auto; display: block; height: 1px; transform: translateZ(0); }
.container-context { container-type: inline-size; width: 100%; }
/* Component Object Infrastructure: Interaction States */
.depth-card { background: white; transition: all 0.5s cubic-bezier(0.15, 0.83, 0.66, 1); border: 1px solid rgba(59, 130, 246, 0.1); position: relative; }
.depth-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 60px -12px rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }
.depth-card-dark { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.05); }
.depth-card-dark:hover { box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6); border-color: rgba(59, 130, 246, 0.5); }
/* Selective state mapping: Parent logic */
.form-logic-wrapper:has(input:focus, textarea:focus) { border-color: var(--sapphire-mid); box-shadow: 0 30px 60px -12px rgba(59, 130, 246, 0.2); }
.pulse-blue { animation: pulse-blue 2s infinite; border-radius: 50%; }
@keyframes pulse-blue {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Native dialog: reset UA styling, inherit depth-card aesthetic */
dialog#terms-modal { color: inherit; }
dialog#terms-modal[open] { display: block; }

/* Backdrop via native pseudo-element */
dialog#terms-modal::backdrop {
    background-color: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
dialog#terms-modal[open]::backdrop { opacity: 1; }
@starting-style {
    dialog#terms-modal[open]::backdrop { opacity: 0; }
}

/* Entry/exit animation using transition-behavior: allow-discrete */
dialog#terms-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.15, 0.83, 0.66, 1),
        overlay 0.3s ease allow-discrete,
        display 0.3s ease allow-discrete;
}
dialog#terms-modal[open] {
    opacity: 1;
    transform: scale(1);
}
@starting-style {
    dialog#terms-modal[open] {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Suppress .depth-card hover lift while in dialog role */
dialog#terms-modal.depth-card:hover { transform: scale(1); box-shadow: 0 30px 60px -12px rgba(59, 130, 246, 0.15); }