/* ═══════════════════════════════════════════════════════════════
   GENERATOR FX — Cinematic UI Enhancements for Contract Generators
   Seraphim Vietnam | seraphim.vn
   ═══════════════════════════════════════════════════════════════ */

/* ── Reduced Motion Respect ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Step Slide Transitions — Cinematic Scale + Fade ── */
.wizard-step {
    animation: stepFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
.wizard-step.slide-out-left {
    animation: stepSlideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wizard-step.slide-out-right {
    animation: stepSlideOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wizard-step.slide-in-left {
    animation: stepSlideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.wizard-step.slide-in-right {
    animation: stepSlideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stepSlideOutLeft {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(-80px) scale(0.96); }
}
@keyframes stepSlideOutRight {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(80px) scale(0.96); }
}
@keyframes stepSlideInLeft {
    from { opacity: 0; transform: translateX(80px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes stepSlideInRight {
    from { opacity: 0; transform: translateX(-80px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Progress Bar Shimmer ── */
.progress-fill, .progress-bar-fill {
    position: relative;
    overflow: hidden;
}
.progress-fill::after, .progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ── Step Circle Pulse on Active ── */
.step-circle.active, .step-indicator.active .step-circle {
    animation: circlePulse 2s ease-in-out infinite;
}
@keyframes circlePulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(0, 255, 136, 0.15), 0 0 20px rgba(0, 255, 136, 0.08); }
    50% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0.08), 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.06); }
}

/* ── Step Circle Completion Burst ── */
.step-circle.just-completed {
    animation: completionBurst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes completionBurst {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ── Floating Labels ── */
.form-group.floating-label {
    position: relative;
}
.form-group.floating-label label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    padding: 0 4px;
    z-index: 1;
}
.form-group.floating-label .form-input:focus ~ label,
.form-group.floating-label .form-input:not(:placeholder-shown) ~ label,
.form-group.floating-label .form-select:focus ~ label,
.form-group.floating-label .form-select:valid ~ label,
.form-group.floating-label .form-textarea:focus ~ label,
.form-group.floating-label .form-textarea:not(:placeholder-shown) ~ label,
.form-group.floating-label label.floated {
    top: -2px;
    transform: translateY(-50%) scale(0.8);
    color: var(--accent, #DE2910);
    background: var(--surface-elevated, #1a1a2e);
}

/* ── Input Focus Glow ── */
.form-input:focus, .form-select:focus, .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 222, 41, 16), 0.12),
                0 0 20px rgba(var(--accent-rgb, 222, 41, 16), 0.06) !important;
    border-color: var(--accent, #DE2910) !important;
}

/* ── Input Validation States ── */
.form-input.valid, .form-select.valid {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
}
.form-input.invalid, .form-select.invalid {
    border-color: #ef4444 !important;
    animation: inputShake 0.4s ease-in-out;
}
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── Button Enhancements ── */
.btn-primary, .btn-next, .btn-generate, [class*="btn"][class*="primary"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover, .btn-next:hover, .btn-generate:hover, [class*="btn"][class*="primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(var(--accent-rgb, 222, 41, 16), 0.3),
                0 0 40px rgba(var(--accent-rgb, 222, 41, 16), 0.1) !important;
}
.btn-primary:active, .btn-next:active, .btn-generate:active, [class*="btn"][class*="primary"]:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Button Ripple Effect */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

/* ── Checkbox Enhancements ── */
.checkbox-item {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.checkbox-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.checkbox-item.checked, .checkbox-item:has(input:checked) {
    animation: checkPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes checkPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* SVG Animated Checkmark */
.check-svg {
    width: 18px; height: 18px;
    stroke: white;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.3s ease 0.1s;
}
.checkbox-item.checked .check-svg,
.checkbox-item:has(input:checked) .check-svg {
    stroke-dashoffset: 0;
}

/* ── Review Summary Cards — Staggered Cascade ── */
.review-section, .summary-section, .review-group {
    opacity: 0;
    animation: summaryReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.review-section:nth-child(1)  { animation-delay: 0.04s; }
.review-section:nth-child(2)  { animation-delay: 0.12s; }
.review-section:nth-child(3)  { animation-delay: 0.20s; }
.review-section:nth-child(4)  { animation-delay: 0.28s; }
.review-section:nth-child(5)  { animation-delay: 0.36s; }
.review-section:nth-child(6)  { animation-delay: 0.44s; }
.review-section:nth-child(7)  { animation-delay: 0.52s; }
.review-section:nth-child(8)  { animation-delay: 0.60s; }
.review-section:nth-child(9)  { animation-delay: 0.68s; }
.review-section:nth-child(10) { animation-delay: 0.76s; }
.review-section:nth-child(11) { animation-delay: 0.84s; }
.review-section:nth-child(12) { animation-delay: 0.92s; }
.review-group:nth-child(1)  { animation-delay: 0.04s; }
.review-group:nth-child(2)  { animation-delay: 0.12s; }
.review-group:nth-child(3)  { animation-delay: 0.20s; }
.review-group:nth-child(4)  { animation-delay: 0.28s; }
.review-group:nth-child(5)  { animation-delay: 0.36s; }
.review-group:nth-child(6)  { animation-delay: 0.44s; }
.review-group:nth-child(7)  { animation-delay: 0.52s; }
.review-group:nth-child(8)  { animation-delay: 0.60s; }
.review-group:nth-child(9)  { animation-delay: 0.68s; }
.review-group:nth-child(10) { animation-delay: 0.76s; }
.review-group:nth-child(11) { animation-delay: 0.84s; }
.review-group:nth-child(12) { animation-delay: 0.92s; }

@keyframes summaryReveal {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Generate Button Glow Pulse ── */
.btn-generate, [onclick*="generate"], button[class*="generate"] {
    animation: generatePulse 2.5s ease-in-out infinite;
}
@keyframes generatePulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 255, 136, 0.15); }
    50% { box-shadow: 0 4px 30px rgba(0, 255, 136, 0.35), 0 0 60px rgba(0, 255, 136, 0.12); }
}

/* ── Contract Preview Entrance ── */
.contract-preview, #previewSection, #contractDocument {
    animation: contractReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes contractReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Confetti Canvas ── */
#confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 99999;
}

/* ── Particle Background ── */
.generator-particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.particle {
    position: absolute;
    width: 2px; height: 2px;
    background: rgba(var(--accent-rgb, 222, 41, 16), 0.3);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(var(--drift, 50px)); opacity: 0; }
}

/* ── Tooltip Enhancement ── */
.field-tooltip {
    position: absolute;
    top: -8px; right: 8px;
    transform: translateY(-100%);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}
.field-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px; right: 16px;
    width: 12px; height: 12px;
    background: rgba(0,0,0,0.9);
    transform: rotate(45deg);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none; border-left: none;
}
.form-group:hover .field-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-100%) translateY(-4px);
}

/* ── Loading Overlay for Generation ── */
.generation-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.generation-overlay.active {
    opacity: 1;
    visibility: visible;
}
.generation-spinner {
    width: 60px; height: 60px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent, #DE2910);
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}
@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}
.generation-text {
    color: white;
    margin-top: 20px;
    font-size: 1rem;
    letter-spacing: 0.05em;
    animation: textPulse 1.5s ease-in-out infinite;
}
@keyframes textPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.generation-pages {
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Wizard Card Glass Enhancement ── */
.wizard-card, .wizard, .generator-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Section Divider Animation ── */
.step-title::after, .section-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent, #DE2910), transparent);
    margin-top: 8px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-step.active .step-title::after,
.wizard-step:not([style*="display: none"]) .step-title::after {
    width: 60px;
}

/* ── Number Counter Animation ── */
.count-up {
    display: inline-block;
    transition: all 0.3s ease;
}

/* ── Print Optimization ── */
@media print {
    .generator-particles, #confetti-canvas, .generation-overlay,
    .btn-ripple, .field-tooltip { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   LEGACY GLASSMORPHISM SECTION (V1)
   Now superseded by "PREMIUM REDESIGN V2" below.
   Kept as fallback layer; V2 block contains final overrides.
   ═══════════════════════════════════════════════════════════════ */

/* (V1 sections 3-7: step circles, progress, labels, checkboxes — now in V2 block below) */

/* (V1 sections 4-13: buttons, labels, selects, checkboxes, wizard bars, info boxes,
   step headers, section titles, hero section — all now in V2 block below) */

/* (V1 sections 14-26: preview, footer, scrollbar, scan line, buttons, particles,
   overlay, focus glow, validation, tooltip, header — all now in V2 block below) */

/* (V1 header rules — now in V2 block below) */


/* ═══════════════════════════════════════════════════════════════
   GENERATOR PREMIUM TYPOGRAPHY
   Award-winning contract output typography
   ═══════════════════════════════════════════════════════════════ */

/* ── Contract Document — Legal Serif Typography ── */
.contract-document,
.contract-preview,
#contractDocument {
    font-family: 'Crimson Pro', 'Georgia', 'Times New Roman', serif;
    font-size: clamp(10pt, 1.2vw, 12pt);
    line-height: 1.75;
    color: #1a1a1a;
    letter-spacing: 0.005em;
    font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Contract headings — Syne for non-uppercase document titles */
.contract-document h1,
.contract-preview h1,
#contractDocument h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin-bottom: 0.75em;
    color: #0a0a0a;
}

.contract-document h2,
.contract-preview h2,
#contractDocument h2 {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin-top: 2.2em;
    margin-bottom: 0.75em;
    padding-bottom: 0.5em;
    border-bottom: none;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04), transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    color: #111;
}

.contract-document h3,
.contract-preview h3,
#contractDocument h3 {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #222;
}

/* Article / Clause Numbers — Monospace emphasis */
.contract-document .article-number,
.contract-document .clause-number,
.contract-preview .article-number,
#contractDocument .article-number {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.02em;
}

/* Article titles inline with numbers */
.contract-document .article-title,
.contract-preview .article-title,
#contractDocument .article-title {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1em;
}

/* Contract paragraphs */
.contract-document p,
.contract-preview p,
#contractDocument p {
    margin-bottom: 0.85em;
    text-align: justify;
    text-justify: inter-word;
    orphans: 3;
    widows: 3;
}

/* Contract lists */
.contract-document ol,
.contract-document ul,
.contract-preview ol,
#contractDocument ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.contract-document li,
.contract-preview li,
#contractDocument li {
    margin-bottom: 0.4em;
    line-height: 1.65;
}

/* ── Table Typography — Aligned Numbers ── */
.contract-document table,
.contract-preview table,
#contractDocument table {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-size: 0.95em;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
}

.contract-document th,
.contract-preview th,
#contractDocument th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #333;
    color: #444;
}

.contract-document td,
.contract-preview td,
#contractDocument td {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}

/* Alternating row shading — subtle zebra stripe */
.contract-document tr:nth-child(even),
.contract-preview tr:nth-child(even),
#contractDocument tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Numeric columns: tabular figures, right-align */
.contract-document td.num,
.contract-document td:nth-child(n+3),
.contract-preview td.num,
#contractDocument td.num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    text-align: right;
}

/* ── Signature Block — Elegant Typography ── */
.contract-document .signature-block,
.contract-preview .signature-block,
#contractDocument .signature-block,
.signature-block {
    margin-top: 4em;
    padding-top: 2em;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    page-break-inside: avoid;
}

.contract-document .signature-block .signature-line,
.contract-preview .signature-block .signature-line,
.signature-block .signature-line {
    border-bottom: 1px solid #333;
    width: 280px;
    margin-bottom: 0.5em;
    margin-top: 3.5em;
}

.contract-document .signature-block .signer-name,
.contract-preview .signature-block .signer-name,
.signature-block .signer-name {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-size: 1em;
    font-weight: 600;
    color: #111;
}

.contract-document .signature-block .signer-title,
.contract-preview .signature-block .signer-title,
.signature-block .signer-title,
.contract-document .signature-block .signer-role,
.signature-block .signer-role {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    margin-top: 0.2em;
}

.contract-document .signature-block .date-line,
.signature-block .date-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.5em;
    letter-spacing: 0.03em;
}

/* ── Contract Header Block ── */
.contract-header {
    text-align: center;
    margin-bottom: 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 2px solid #111;
}

.contract-header h1,
.contract-header .contract-title {
    font-family: 'Imbue', Georgia, serif;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3em;
    color: #0a0a0a;
}

.contract-header .contract-subtitle,
.contract-header .contract-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
}

/* ── Step Title Typography Enhancement ── */
.wizard-step .step-title,
.form-step .step-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.4rem, 2.2vw + 0.25rem, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #e0e8f0;
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.1);
}

.wizard-step .step-subtitle,
.form-step .step-subtitle {
    font-size: clamp(0.78rem, 0.8vw + 0.2rem, 0.88rem);
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin-top: 0.5em;
}

/* ── Print Typography for Contracts ── */
@media print {
    .contract-document,
    .contract-preview,
    #contractDocument {
        font-size: 11pt;
        line-height: 1.6;
        color: #000;
    }

    .contract-document h1,
    #contractDocument h1 {
        font-size: 16pt;
    }

    .contract-document h2,
    #contractDocument h2 {
        font-size: 13pt;
        border-bottom-color: #000;
    }

    .contract-document h3,
    #contractDocument h3 {
        font-size: 12pt;
    }

    .signature-block .signature-line {
        border-bottom-color: #000;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LEGACY AWWWARDS EFFECTS (V1)
   Now consolidated into "PREMIUM REDESIGN V2" block below.
   Gradient borders, focus underlines, font features, step titles
   are all defined in the V2 block with expanded selector coverage.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN V2 — Unified Cross-Page Generator Upgrade
   Covers all variant selectors from contract AND policy generators
   (HK, SG, MY, VN contract generators + 4 policy generators)
   ═══════════════════════════════════════════════════════════════ */

/* ── A. Universal Card Containers — Deep Glass with Layered Depth ──
   Covers: .wizard-card, .form-card, .generator-card, .wizard-container .wizard-card
   All page variants get the same premium treatment */

.wizard-card,
.form-card,
.generator-card {
    background: rgba(5, 10, 20, 0.88) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 1px solid rgba(0, 255, 136, 0.08) !important;
    border-radius: 20px !important;
    position: relative;
    overflow: visible;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(0, 255, 136, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover state — card lifts slightly */
.wizard-card:hover,
.form-card:hover,
.generator-card:hover {
    border-color: rgba(0, 255, 136, 0.12) !important;
    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(0, 255, 136, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Top-edge glow line — works on all card variants */
.wizard-card::before,
.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(0, 255, 136, 0.35) 25%,
        rgba(0, 200, 255, 0.25) 50%,
        rgba(0, 255, 136, 0.35) 75%,
        transparent 95%);
    z-index: 2;
    pointer-events: none;
    border-radius: 20px 20px 0 0;
}

/* Corner accent marks — subtle glowing bracket corners */
.wizard-card::after,
.form-card::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid transparent;
    border-image: linear-gradient(
        to right,
        rgba(0, 255, 136, 0.18) 3%, transparent 3%,
        transparent 97%, rgba(0, 255, 136, 0.18) 97%
    ) 1;
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
}

/* ── B. Form Inputs — Premium Glassmorphic Fields ──
   Covers all input selectors across all generators */

.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.form-select,
.form-textarea {
    background: rgba(0, 20, 40, 0.45) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 136, 0.12) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    min-height: 52px;
    color: #e0e8f0 !important;
    font-size: 0.9rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.02);
    position: relative;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgba(0, 255, 136, 0.5) !important;
    box-shadow:
        0 0 0 3px rgba(0, 255, 136, 0.06),
        0 0 30px rgba(0, 255, 136, 0.12),
        0 0 60px rgba(0, 255, 136, 0.04),
        inset 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
    background: rgba(0, 25, 50, 0.6) !important;
}

.form-group input::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(200, 212, 224, 0.22) !important;
    font-size: 0.85rem;
    transition: opacity 0.4s ease;
}

.form-group input:focus::placeholder,
.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
    opacity: 0.45;
}

.form-group textarea,
.form-textarea {
    min-height: 120px;
}

/* ── C. Form Labels — Unified Sci-fi Typography ──
   Covers: .form-label, .form-group label, label within generators */

.form-label,
.form-group label {
    font-family: 'JetBrains Mono', 'DM Sans', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 255, 136, 0.6) !important;
    margin-bottom: 10px;
    display: block;
    transition: color 0.3s ease;
}

/* Focus-within makes the label glow when field is focused */
.form-group:focus-within > label,
.form-group:focus-within > .form-label {
    color: rgba(0, 255, 136, 0.85) !important;
}

/* Chinese / Vietnamese / Malay sub-labels retain readability */
.form-label .zh,
.form-group label .zh,
.form-label .vi,
.form-group label .vi,
.form-label .my,
.form-group label .my {
    color: rgba(200, 212, 224, 0.35) !important;
    font-family: inherit !important;
    letter-spacing: 0.02em;
    font-size: 0.65rem !important;
    text-transform: none;
    font-weight: 400;
}

/* Required asterisk glow */
.form-label .required,
.form-group label .required {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* ── D. Select Dropdowns — Custom Sci-fi Arrow ── */

.form-group select,
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='rgba(0,255,136,0.5)'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 42px !important;
    cursor: pointer;
}

/* ── E. Checkbox & Radio — Glowing Custom Controls ──
   Covers both native checkbox and .checkbox-visual pattern */

.checkbox-item,
.radio-item {
    background: rgba(0, 15, 30, 0.55) !important;
    border: 1px solid rgba(0, 255, 136, 0.08) !important;
    border-radius: 10px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px 16px !important;
}

.checkbox-item:hover,
.radio-item:hover {
    border-color: rgba(0, 255, 136, 0.25) !important;
    background: rgba(0, 25, 50, 0.55) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 255, 136, 0.05);
    transform: translateY(-1px);
}

/* Checkbox label text */
.checkbox-label,
.checkbox-item label {
    color: rgba(200, 212, 224, 0.65) !important;
    font-size: 0.82rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

/* Native checkbox styling */
.checkbox-item input[type="checkbox"],
.radio-item input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid rgba(0, 255, 136, 0.25) !important;
    border-radius: 4px !important;
    background: rgba(0, 10, 20, 0.6) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important;
    flex-shrink: 0;
    position: relative;
    padding: 0 !important;
    min-height: 18px !important;
}

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

.checkbox-item input[type="checkbox"]:checked,
.radio-item input[type="radio"]:checked {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.checkbox-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #00ff88;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
}

/* Checkbox visual pattern from contract generators */
.checkbox-visual {
    border-color: rgba(0, 255, 136, 0.2) !important;
    background: rgba(0, 10, 20, 0.6) !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.checkbox-item input:checked + .checkbox-visual {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.checkbox-item input:checked + .checkbox-visual::after {
    color: #00ff88 !important;
    opacity: 1;
}

/* ── F. Buttons — Cinematic CTA System ── */

/* Primary buttons — glass with glow */
.btn-primary,
.btn-generate,
.btn-next,
button[class*="btn-primary"],
.wizard-nav .btn-primary,
.nav-buttons .btn-primary {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.14), rgba(0, 200, 255, 0.08)) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
    font-family: 'JetBrains Mono', 'DM Sans', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on hover */
.btn-primary::after,
.btn-generate::after,
.btn-next::after,
button[class*="btn-primary"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.08), rgba(255, 255, 255, 0.06), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-primary:hover::after,
.btn-generate:hover::after,
.btn-next:hover::after,
button[class*="btn-primary"]:hover::after {
    left: 100%;
}

.btn-primary:hover,
.btn-generate:hover,
.btn-next:hover,
button[class*="btn-primary"]:hover,
.wizard-nav .btn-primary:hover,
.nav-buttons .btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 255, 0.15)) !important;
    border-color: rgba(0, 255, 136, 0.55) !important;
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.25),
        0 0 60px rgba(0, 255, 136, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

.btn-primary:active,
.btn-generate:active,
.btn-next:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.15) !important;
}

/* Secondary buttons — subtle glass */
.btn-secondary,
.btn-prev,
.wizard-nav .btn-secondary,
.nav-buttons .btn-secondary {
    background: rgba(0, 20, 40, 0.35) !important;
    border: 1px solid rgba(0, 255, 136, 0.1) !important;
    color: rgba(200, 212, 224, 0.6) !important;
    font-family: 'JetBrains Mono', 'DM Sans', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
}

.btn-secondary:hover,
.btn-prev:hover,
.wizard-nav .btn-secondary:hover,
.nav-buttons .btn-secondary:hover {
    border-color: rgba(0, 255, 136, 0.25) !important;
    color: rgba(0, 255, 136, 0.7) !important;
    background: rgba(0, 30, 50, 0.45) !important;
    transform: translateY(-1px);
}

/* Generate button — energy charging pulse */
.btn-generate,
[onclick*="generate"],
button[class*="generate"] {
    animation: energyChargePulse 3s ease-in-out infinite !important;
    padding: 18px 48px !important;
    font-size: 0.85rem;
}

@keyframes energyChargePulse {
    0% { box-shadow: 0 4px 15px rgba(0, 255, 136, 0.15); }
    25% { box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2), 0 0 30px rgba(0, 255, 136, 0.08); }
    50% { box-shadow: 0 4px 35px rgba(0, 255, 136, 0.4), 0 0 70px rgba(0, 255, 136, 0.15), 0 0 100px rgba(0, 200, 255, 0.05); }
    75% { box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2), 0 0 30px rgba(0, 255, 136, 0.08); }
    100% { box-shadow: 0 4px 15px rgba(0, 255, 136, 0.15); }
}

/* ── G. Wizard Navigation Footer — Glass Bar ── */

.wizard-nav,
.nav-buttons {
    background: rgba(0, 10, 20, 0.65) !important;
    border-top: 1px solid rgba(0, 255, 136, 0.06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* ── H. Progress Indicators — Covers both circle and number variants ── */

/* Step circles — premium glow (contract generators) */
.step-circle,
.step-number {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 255, 136, 0.2) !important;
    background: rgba(0, 10, 20, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    color: rgba(0, 255, 136, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
}

.step-circle.active,
.progress-step.active .step-circle,
.progress-step.active .step-number {
    border-color: #00ff88 !important;
    color: #00ff88 !important;
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.35),
        0 0 40px rgba(0, 255, 136, 0.12),
        0 0 0 6px rgba(0, 255, 136, 0.06) !important;
    background: rgba(0, 255, 136, 0.12) !important;
    animation: circlePulseGreen 2s ease-in-out infinite !important;
}

.step-circle.completed,
.progress-step.completed .step-circle,
.progress-step.completed .step-number {
    background: rgba(0, 255, 136, 0.15) !important;
    border-color: rgba(0, 255, 136, 0.5) !important;
    color: #00ff88 !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.15);
}

/* Glow trail on completed */
.step-circle.completed::after,
.progress-step.completed .step-circle::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.15) 0%, transparent 70%);
    animation: completedGlowTrail 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes circlePulseGreen {
    0%, 100% { box-shadow: 0 0 0 5px rgba(0, 255, 136, 0.12), 0 0 20px rgba(0, 255, 136, 0.1); }
    50% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0.06), 0 0 35px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.05); }
}

@keyframes completedGlowTrail {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 0; }
}

/* Wizard step pill buttons (HK PDPO style) */
.wizard-steps .wizard-step {
    background: rgba(0, 15, 30, 0.55) !important;
    border: 1px solid rgba(0, 255, 136, 0.08) !important;
    color: rgba(200, 212, 224, 0.4) !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wizard-steps .wizard-step.active {
    background: rgba(0, 255, 136, 0.08) !important;
    border-color: rgba(0, 255, 136, 0.35) !important;
    color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

.wizard-steps .wizard-step.completed {
    background: rgba(0, 255, 136, 0.06) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: rgba(0, 255, 136, 0.6) !important;
}

/* Progress track — glow gradient */
.progress-track {
    background: linear-gradient(90deg, #00ff88, rgba(0, 200, 255, 0.7)) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4), 0 0 25px rgba(0, 255, 136, 0.15);
    animation: trackGlowPulse 3s ease-in-out infinite;
}

@keyframes trackGlowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.3), 0 0 20px rgba(0, 255, 136, 0.1); }
    50% { box-shadow: 0 0 14px rgba(0, 255, 136, 0.5), 0 0 35px rgba(0, 255, 136, 0.2); }
}

.progress-steps::before {
    background: rgba(0, 255, 136, 0.08) !important;
}

/* Step labels — premium typography */
.step-label {
    color: rgba(200, 212, 224, 0.35) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    animation: stepLabelFadeIn 0.5s ease forwards;
}

.progress-step:nth-child(1) .step-label { animation-delay: 0.1s; }
.progress-step:nth-child(2) .step-label { animation-delay: 0.2s; }
.progress-step:nth-child(3) .step-label { animation-delay: 0.3s; }
.progress-step:nth-child(4) .step-label { animation-delay: 0.4s; }
.progress-step:nth-child(5) .step-label { animation-delay: 0.5s; }
.progress-step:nth-child(6) .step-label { animation-delay: 0.6s; }
.progress-step:nth-child(7) .step-label { animation-delay: 0.7s; }

@keyframes stepLabelFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.progress-step.active .step-label {
    color: rgba(0, 255, 136, 0.8) !important;
}

.progress-step.completed .step-label {
    color: rgba(0, 255, 136, 0.5) !important;
}

/* ── I. Wizard Progress Bar Container — Glassmorphism ── */

.wizard-progress,
.progress-container,
.progress-bar {
    background: rgba(0, 10, 20, 0.6) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.06) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── J. Step Headers — Dramatic Section Titles ── */

.step-title,
.step-header h2,
.section-title {
    color: #e0e8f0 !important;
    text-shadow: 0 0 30px rgba(0, 255, 136, 0.08);
    font-family: 'Syne', 'Crimson Pro', sans-serif;
    font-size: clamp(1.4rem, 2.2vw + 0.25rem, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.step-title-zh,
.step-title-vn,
.step-title-my,
.step-title-vi,
.section-title-zh {
    color: rgba(200, 212, 224, 0.3) !important;
    font-size: 0.95rem;
}

.step-subtitle {
    color: rgba(200, 212, 224, 0.4) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem !important;
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin-top: 0.5em;
}

/* Section title animated underline */
.step-title::after,
.section-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ff88, rgba(0, 200, 255, 0.4), transparent) !important;
    margin-top: 10px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-step.active .step-title::after,
.wizard-step:not([style*="display: none"]) .step-title::after,
.form-step.active .step-title::after,
.form-section.active .section-title::after {
    width: 80px;
}

/* Step header — section divider border */
.step-header {
    border-bottom: 1px solid rgba(0, 255, 136, 0.06);
    padding-bottom: 24px;
    margin-bottom: 32px;
}

/* ── K. Info Boxes — Sci-fi Alert Style ── */

.info-box {
    background: rgba(0, 255, 136, 0.04) !important;
    border: 1px solid rgba(0, 255, 136, 0.12) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px !important;
    position: relative;
}

/* Left accent bar on info boxes */
.info-box::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, #00ff88, rgba(0, 200, 255, 0.5));
    border-radius: 1px;
}

.info-box-content {
    color: rgba(200, 212, 224, 0.6) !important;
    font-size: 0.85rem;
    line-height: 1.6;
}

.info-box-content strong {
    color: rgba(0, 255, 136, 0.8) !important;
}

/* ── L. Form Hints — Subtle Helper Text ── */

.form-hint {
    color: rgba(200, 212, 224, 0.3) !important;
    font-size: 0.72rem !important;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    margin-top: 6px;
}

/* ── M. Form Row / Grid — Better Spacing ── */

.form-grid,
.form-row {
    gap: 24px;
}

.checkbox-group {
    gap: 10px !important;
}

/* ── N. Hero Section — Cinematic Enhancement ── */

.hero,
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Animated gradient line across hero top */
.hero::after,
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 136, 0.5) 30%,
        rgba(0, 200, 255, 0.4) 50%,
        rgba(0, 255, 136, 0.5) 70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: heroTopLine 4s ease-in-out infinite;
    z-index: 2;
}

@keyframes heroTopLine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulsing radial aura behind hero */
.hero::before,
.hero-section::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 255, 136, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 50% 30% at 20% 30%, rgba(0, 200, 255, 0.05) 0%, transparent 50%) !important;
    animation: heroAuraPulse 5s ease-in-out infinite;
}

@keyframes heroAuraPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Hero title — dramatic sizing */
.hero-title {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-badge {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.06) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.hero-title .accent {
    color: #00ff88 !important;
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.25);
}

/* Hero features — staggered entrance */
.hero-feature {
    background: rgba(0, 15, 30, 0.5) !important;
    border: 1px solid rgba(0, 255, 136, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(200, 212, 224, 0.5) !important;
    opacity: 0;
    animation: heroFeatureIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-radius: 100px;
    padding: 10px 20px !important;
}

.hero-feature:nth-child(1) { animation-delay: 0.15s; }
.hero-feature:nth-child(2) { animation-delay: 0.30s; }
.hero-feature:nth-child(3) { animation-delay: 0.45s; }
.hero-feature:nth-child(4) { animation-delay: 0.60s; }
.hero-feature:nth-child(5) { animation-delay: 0.75s; }

@keyframes heroFeatureIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-feature .check {
    color: #00ff88 !important;
}

.hero-feature span:first-child {
    color: #00ff88 !important;
}

/* ── O. Preview Section — Glass Output ── */

.preview-header {
    color: rgba(0, 255, 136, 0.8);
}

.preview-card,
.preview-container {
    border-radius: 16px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 255, 136, 0.03) !important;
    border: 1px solid rgba(0, 255, 136, 0.08);
}

.preview-title,
.preview-header h3 {
    color: #e0e8f0 !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

/* ── P. Footer / Disclaimer — Subtle Glass ── */

.footer-disclaimer {
    border-top: 1px solid rgba(0, 255, 136, 0.06) !important;
    color: rgba(200, 212, 224, 0.25) !important;
}

.footer-disclaimer a {
    color: rgba(0, 255, 136, 0.5) !important;
    transition: color 0.3s ease;
}

.footer-disclaimer a:hover {
    color: rgba(0, 255, 136, 0.8) !important;
}

/* ── Q. Header — Sci-fi Glass Override ── */

.header,
.page-header {
    background: rgba(5, 8, 12, 0.92) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.06) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.header-cta {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 200, 255, 0.1)) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 255, 136, 0.3);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}

.header-cta:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 255, 0.15)) !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.header-nav a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
}

.header-nav a:hover {
    color: rgba(0, 255, 136, 0.8) !important;
}

/* ── R. Animated Gradient Border for All Card Types ── */

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes gradientRotate {
    to { --gradient-angle: 360deg; }
}

.wizard-card,
.form-card {
    position: relative;
}

.wizard-card > .wizard-card-border-fx {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    background: conic-gradient(from var(--gradient-angle),
        transparent 40%,
        rgba(0, 255, 136, 0.3),
        rgba(0, 200, 255, 0.2),
        transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradientRotate 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Fallback for browsers without @property or conic-gradient */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .wizard-card,
    .form-card {
        box-shadow:
            0 25px 80px rgba(0, 0, 0, 0.55),
            0 0 50px rgba(0, 255, 136, 0.04),
            0 0 1px rgba(0, 255, 136, 0.3) !important;
    }
}

/* ── S. Animated Focus Underline for Inputs ── */

.form-group {
    position: relative;
}

.form-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.5), rgba(0, 200, 255, 0.4));
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

.form-group:focus-within::after {
    width: 100%;
    left: 0;
}

/* ── T. Scan Line Effect — Subtle CRT ── */

@keyframes scanLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

.wizard-card > .wizard-body::before,
.form-card > *:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 255, 136, 0.012), transparent);
    pointer-events: none;
    animation: scanLine 8s linear infinite;
    z-index: 0;
    opacity: 0.3;
}

/* ── U. Scrollbar — Sci-fi Style ── */

.wizard-card ::-webkit-scrollbar,
.form-card ::-webkit-scrollbar,
.preview-container ::-webkit-scrollbar {
    width: 6px;
}

.wizard-card ::-webkit-scrollbar-track,
.form-card ::-webkit-scrollbar-track,
.preview-container ::-webkit-scrollbar-track {
    background: rgba(0, 10, 20, 0.3);
    border-radius: 3px;
}

.wizard-card ::-webkit-scrollbar-thumb,
.form-card ::-webkit-scrollbar-thumb,
.preview-container ::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.15);
    border-radius: 3px;
}

.wizard-card ::-webkit-scrollbar-thumb:hover,
.form-card ::-webkit-scrollbar-thumb:hover,
.preview-container ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 136, 0.25);
}

/* ── V. Tooltip — Sci-fi Glass ── */

.field-tooltip {
    background: rgba(0, 10, 20, 0.95) !important;
    border: 1px solid rgba(0, 255, 136, 0.15) !important;
    color: rgba(200, 212, 224, 0.7) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    border-radius: 10px;
    padding: 10px 14px;
}

.field-tooltip::after {
    background: rgba(0, 10, 20, 0.95) !important;
    border-color: rgba(0, 255, 136, 0.15) !important;
}

/* ── W. Validation States — Green Theme ── */

.form-input.valid,
.form-select.valid,
.form-group input.valid {
    border-color: rgba(0, 255, 136, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.08) !important;
}

.form-input.invalid,
.form-select.invalid,
.form-group input.invalid {
    border-color: #ef4444 !important;
    animation: inputShake 0.4s ease-in-out;
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── X. Generation Overlay — Sci-fi Theme ── */

.generation-spinner {
    border-top-color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.generation-text {
    color: rgba(0, 255, 136, 0.9) !important;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
}

/* ── Y. Particle Colors — Sci-fi Green ── */

.particle {
    background: rgba(0, 255, 136, 0.3) !important;
}

/* ── Z. Background Pattern — Subtle Grid Overlay ──
   Adds a faint grid/noise texture behind the page */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 255, 136, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.012) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Ensure content is above the grid */
.header, .page-header,
.hero, .hero-section,
.wizard, .wizard-container, .container, .main-content,
.preview-section,
.footer-disclaimer {
    position: relative;
    z-index: 1;
}

/* ── AA. Form Card Color Bar Override ──
   Policy generators use ::before for colored top bars — replace with sci-fi glow */

.form-card::before {
    content: '';
    display: block;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(0, 255, 136, 0.5) 20%,
        rgba(0, 200, 255, 0.35) 50%,
        rgba(0, 255, 136, 0.5) 80%,
        transparent 95%) !important;
    margin: -40px -40px 30px !important;
    border-radius: 20px 20px 0 0 !important;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

/* ── BB. HK Background Decorative Elements ── */

.hk-bg,
.my-bg {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0, 255, 136, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 200, 255, 0.04) 0%, transparent 50%) !important;
}

.hk-bauhinia {
    opacity: 0.03 !important;
}

/* ── CC. Logo Gradient Override ── */

.logo-text {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.9), rgba(0, 200, 255, 0.7)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.back-link:hover {
    color: #00ff88 !important;
}

/* ── DD. Stagger-In Animation for Form Groups ── */

.form-group,
.checkbox-group {
    animation: formGroupFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes formGroupFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── EE. Section Transitions — Smooth Step Changes ── */

.wizard-step,
.form-step,
.form-section {
    will-change: transform, opacity;
    font-feature-settings: 'liga' 1, 'kern' 1;
}

/* ── FF. Wizard Body Padding Normalization ── */

.wizard-body {
    padding: 40px;
    position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE PERFORMANCE OPTIMIZATIONS
   Reduce effects, full-width buttons, adapt layout
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Reduce card padding on mobile */
    .wizard-card,
    .form-card,
    .form-step,
    .generator-card {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .wizard-body {
        padding: 20px !important;
    }

    /* Full-width buttons on mobile */
    .btn-primary,
    .btn-generate,
    .btn-next,
    .btn-secondary,
    .btn-prev,
    button[class*="btn-primary"],
    .wizard-nav .btn-primary,
    .wizard-nav .btn-secondary,
    .nav-buttons .btn-primary,
    .nav-buttons .btn-secondary {
        width: 100% !important;
        padding: 16px 24px !important;
        text-align: center;
        justify-content: center;
    }

    .wizard-nav,
    .nav-buttons {
        flex-direction: column;
        gap: 10px;
        padding: 16px 20px;
    }

    /* Hide step labels on mobile — just show circles */
    .step-label {
        display: none !important;
    }

    /* Reduce glow/shadow effects for mobile performance */
    .wizard-card,
    .form-card,
    .form-step,
    .generator-card {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 136, 0.02) !important;
        backdrop-filter: blur(16px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    }

    .step-circle.active,
    .progress-step.active .step-circle,
    .progress-step.active .step-number {
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.2), 0 0 20px rgba(0, 255, 136, 0.08) !important;
    }

    .btn-primary:hover,
    .btn-generate:hover,
    .btn-next:hover {
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.15), 0 0 25px rgba(0, 255, 136, 0.06) !important;
    }

    .form-group input:focus,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .btn-generate,
    [onclick*="generate"],
    button[class*="generate"] {
        animation: energyChargePulseMobile 3s ease-in-out infinite !important;
    }

    @keyframes energyChargePulseMobile {
        0%, 100% { box-shadow: 0 4px 10px rgba(0, 255, 136, 0.1); }
        50% { box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2), 0 0 35px rgba(0, 255, 136, 0.08); }
    }

    /* Reduce hero title size slightly */
    .hero-title {
        font-size: clamp(1.6rem, 5vw, 2.5rem) !important;
    }

    /* Smaller step circles on mobile */
    .step-circle,
    .step-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.72rem !important;
    }

    /* Disable animated border rotation on mobile for perf */
    .wizard-card > .wizard-card-border-fx {
        animation: none;
        background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), transparent, rgba(0, 200, 255, 0.08));
    }

    /* Disable corner accents on mobile */
    .wizard-card::after,
    .form-card::after {
        display: none;
    }

    /* Reduce scan line opacity */
    .wizard-card > .wizard-body::before {
        opacity: 0.2;
    }

    /* Simpler hero top line on mobile */
    .hero::after,
    .hero-section::after {
        height: 1px;
    }

    /* Reduce track glow on mobile */
    .progress-track {
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.2), 0 0 12px rgba(0, 255, 136, 0.08);
        animation: none;
    }

    /* Single column grids on mobile */
    .form-grid,
    .checkbox-group,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Stack hero features vertically */
    .hero-features {
        flex-direction: column;
        align-items: center;
    }

    /* Reduce body grid background on mobile */
    body::before {
        background-size: 40px 40px;
        opacity: 0.3;
    }

    /* Form card smaller padding */
    .form-card::before {
        margin: -20px -20px 20px !important;
    }

    /* Wizard steps (pill style) stack better */
    .wizard-steps {
        gap: 6px;
    }

    .wizard-steps .wizard-step {
        padding: 8px 14px !important;
        font-size: 0.72rem;
    }

    /* Signature grid single column */
    .signature-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
}

/* ── Small mobile (under 480px) — further reductions ── */
@media (max-width: 480px) {
    .wizard-card,
    .form-card,
    .generator-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .wizard-body {
        padding: 16px !important;
    }

    .step-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .step-title,
    .step-header h2,
    .section-title {
        font-size: 1.2rem !important;
    }

    .hero-badge {
        font-size: 0.7rem;
        padding: 6px 14px;
    }

    .hero-feature {
        padding: 8px 14px !important;
        font-size: 0.75rem;
    }

    /* Tighter checkbox items */
    .checkbox-item {
        padding: 10px 12px !important;
    }

    /* Pricing strip responsive */
    .pricing-strip {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .pricing-tier {
        min-width: 0 !important;
    }

    /* Output toolbar responsive */
    .output-toolbar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .toolbar-group {
        justify-content: center;
    }

    /* Action buttons responsive */
    .output-actions {
        flex-direction: column !important;
    }

    .action-btn {
        width: 100% !important;
        justify-content: center;
    }

    /* CTA section responsive */
    .conversion-cta {
        padding: 32px 20px !important;
    }

    .cta-buttons {
        flex-direction: column !important;
    }

    .cta-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM PRICING UI — Glassmorphism Tier Cards
   Displays Free / Premium / Enterprise tiers above generator
   ═══════════════════════════════════════════════════════════════ */

.pricing-strip {
    display: flex;
    gap: 16px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 0 24px;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.pricing-tier {
    flex: 1;
    min-width: 240px;
    padding: 28px 24px;
    border-radius: 16px;
    background: rgba(5, 10, 20, 0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 255, 136, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(0, 255, 136, 0.2) 50%,
        transparent 95%);
    pointer-events: none;
}

.pricing-tier:hover {
    border-color: rgba(0, 255, 136, 0.18);
    transform: translateY(-2px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 255, 136, 0.04);
}

/* Active / highlighted tier */
.pricing-tier.tier-active {
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.04);
}

.pricing-tier.tier-active::after {
    content: 'CURRENT';
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Premium highlight */
.pricing-tier.tier-premium {
    border-color: rgba(0, 200, 255, 0.15);
    background: rgba(0, 20, 40, 0.7);
}

.pricing-tier.tier-premium::before {
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(0, 200, 255, 0.3) 50%,
        transparent 95%);
}

/* Enterprise highlight */
.pricing-tier.tier-enterprise {
    border-color: rgba(180, 120, 255, 0.12);
    background: rgba(15, 5, 30, 0.7);
}

.pricing-tier.tier-enterprise::before {
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(180, 120, 255, 0.25) 50%,
        transparent 95%);
}

.tier-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.tier-name {
    font-family: 'JetBrains Mono', 'DM Sans', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 255, 136, 0.7);
}

.pricing-tier.tier-premium .tier-name {
    color: rgba(0, 200, 255, 0.8);
}

.pricing-tier.tier-enterprise .tier-name {
    color: rgba(180, 120, 255, 0.8);
}

.tier-price {
    font-family: 'Syne', 'DM Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #e0e8f0;
    letter-spacing: -0.02em;
}

.tier-price .currency {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(200, 212, 224, 0.5);
    margin-right: 2px;
}

.tier-desc {
    font-size: 0.8rem;
    color: rgba(200, 212, 224, 0.45);
    line-height: 1.5;
    margin-bottom: 16px;
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tier-features li {
    font-size: 0.78rem;
    color: rgba(200, 212, 224, 0.5);
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.tier-features li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 255, 136, 0.4);
    flex-shrink: 0;
}

.pricing-tier.tier-premium .tier-features li::before {
    background: rgba(0, 200, 255, 0.4);
}

.pricing-tier.tier-enterprise .tier-features li::before {
    background: rgba(180, 120, 255, 0.4);
}

.tier-features li.disabled {
    color: rgba(200, 212, 224, 0.25);
    text-decoration: line-through;
    text-decoration-color: rgba(200, 212, 224, 0.12);
}

/* Coming Soon badge */
.badge-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 14px;
    cursor: default;
}

.pricing-tier.tier-premium .badge-coming-soon {
    color: rgba(0, 200, 255, 0.7);
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.15);
}

.pricing-tier.tier-enterprise .badge-coming-soon {
    color: rgba(180, 120, 255, 0.7);
    background: rgba(180, 120, 255, 0.08);
    border: 1px solid rgba(180, 120, 255, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   OUTPUT TOOLBAR — Zoom, View Mode, Section Nav
   Toolbar above the generated contract preview
   ═══════════════════════════════════════════════════════════════ */

.output-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(5, 10, 20, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 136, 0.08);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200, 212, 224, 0.35);
    margin-right: 6px;
}

.toolbar-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(200, 212, 224, 0.5);
    background: rgba(0, 20, 40, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.toolbar-btn:hover {
    color: rgba(0, 255, 136, 0.8);
    border-color: rgba(0, 255, 136, 0.2);
    background: rgba(0, 255, 136, 0.04);
}

.toolbar-btn.active {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.35);
    background: rgba(0, 255, 136, 0.08);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.08);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(0, 255, 136, 0.08);
    margin: 0 6px;
}

/* Section nav dropdown */
.section-nav-select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: rgba(200, 212, 224, 0.5);
    background: rgba(0, 20, 40, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.08);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='rgba(0,255,136,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: all 0.25s ease;
    max-width: 200px;
}

.section-nav-select:hover,
.section-nav-select:focus {
    color: rgba(0, 255, 136, 0.8);
    border-color: rgba(0, 255, 136, 0.2);
    outline: none;
}

/* Zoom levels applied to contract document */
.contract-document.zoom-125 { transform: scale(1.25); transform-origin: top left; width: 80%; }
.contract-document.zoom-150 { transform: scale(1.50); transform-origin: top left; width: 66.67%; }

/* Print mode styling */
.preview-card.print-mode {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}


/* ═══════════════════════════════════════════════════════════════
   OUTPUT ACTION BUTTONS — Download, Copy, Share
   Row of glassmorphism action buttons below the preview
   ═══════════════════════════════════════════════════════════════ */

.output-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200, 212, 224, 0.6);
    background: rgba(5, 10, 20, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-radius: 10px;
    padding: 14px 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.04), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn:hover {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.06);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 255, 136, 0.06);
}

.action-btn:active {
    transform: translateY(0) scale(0.97);
}

.action-btn .action-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Copy feedback animation */
.action-btn.copied {
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.4) !important;
    background: rgba(0, 255, 136, 0.1) !important;
}

.action-btn.copied .action-label {
    display: none;
}

.action-btn.copied::after {
    content: 'COPIED';
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}


/* ═══════════════════════════════════════════════════════════════
   LEGAL DISCLAIMER — Subtle Professional Box
   Appears below the generated output
   ═══════════════════════════════════════════════════════════════ */

.legal-disclaimer-box {
    max-width: 900px;
    margin: 32px auto 0;
    padding: 20px 24px;
    background: rgba(5, 10, 20, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 212, 224, 0.06);
    border-left: 2px solid rgba(200, 212, 224, 0.12);
    border-radius: 0 8px 8px 0;
    position: relative;
}

.disclaimer-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(200, 212, 224, 0.3);
    margin-bottom: 8px;
}

.disclaimer-text {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;
    line-height: 1.65;
    color: rgba(200, 212, 224, 0.3);
}

.disclaimer-text a {
    color: rgba(0, 255, 136, 0.4);
    text-decoration: none;
    transition: color 0.2s ease;
}

.disclaimer-text a:hover {
    color: rgba(0, 255, 136, 0.7);
}


/* ═══════════════════════════════════════════════════════════════
   CONVERSION CTA — Consult / Review Upsell
   Appears after the output & disclaimer
   ═══════════════════════════════════════════════════════════════ */

.conversion-cta {
    max-width: 900px;
    margin: 40px auto 0;
    padding: 40px 36px;
    text-align: center;
    background: rgba(5, 10, 20, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 136, 0.08);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.conversion-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 10%,
        rgba(0, 255, 136, 0.25) 50%,
        transparent 90%);
    pointer-events: none;
}

.cta-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.7;
}

.cta-heading {
    font-family: 'Syne', 'DM Sans', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: #e0e8f0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.cta-subtext {
    font-size: 0.85rem;
    color: rgba(200, 212, 224, 0.4);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
}

.cta-btn-primary {
    color: #00ff88;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.14), rgba(0, 200, 255, 0.08));
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.cta-btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 255, 0.15));
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.15), 0 8px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    color: #00ff88;
    text-decoration: none;
}

.cta-btn-secondary {
    color: rgba(200, 212, 224, 0.5);
    background: rgba(0, 20, 40, 0.35);
    border: 1px solid rgba(0, 255, 136, 0.1);
}

.cta-btn-secondary:hover {
    color: rgba(0, 255, 136, 0.7);
    border-color: rgba(0, 255, 136, 0.25);
    background: rgba(0, 30, 50, 0.45);
    transform: translateY(-1px);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════
   PRINT / PDF WATERMARK FOOTER
   Subtle watermark in printed output
   ═══════════════════════════════════════════════════════════════ */

.print-watermark {
    display: none;
}

@media print {
    /* Show watermark only in print */
    .print-watermark {
        display: block !important;
        text-align: center;
        padding: 24px 0 12px;
        margin-top: 40px;
        border-top: 1px solid #ddd;
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 8pt;
        color: #aaa;
        letter-spacing: 0.06em;
        page-break-inside: avoid;
    }

    .print-watermark .watermark-line {
        display: block;
        margin-bottom: 2px;
    }

    /* Hide UI elements during print */
    .pricing-strip,
    .output-toolbar,
    .output-actions,
    .legal-disclaimer-box,
    .conversion-cta,
    .header,
    .page-header,
    .hero,
    .hero-section,
    .wizard,
    .wizard-container,
    .footer-disclaimer,
    .generator-particles,
    #confetti-canvas,
    .generation-overlay,
    .btn-ripple,
    .field-tooltip {
        display: none !important;
    }

    /* Full-width preview for print */
    .preview-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .preview-header {
        display: none !important;
    }

    .preview-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .contract-document {
        padding: 0.5in 0.75in !important;
        font-size: 11pt !important;
    }

    /* Ensure good page breaks */
    .contract-section {
        page-break-inside: avoid;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}