/* ================================================================
   CY5 Leads — Frontend Styles
   Version: 2.1
   Scope: .cy5-final + .cy5-fab-wrap + .cy5-panel
          (all rules namespaced — zero bleed)
   ================================================================ */

/* ── Custom properties ── */
.cy5-final {
    --cy5-bg: #0a0603;
    --cy5-bg-2: #130a04;
    --cy5-ink: #f7ecd6;
    --cy5-ink-soft: #c8b896;
    --cy5-ink-dim: #7a6a4e;
    --cy5-amber: #f59e0b;
    --cy5-amber-2: #fbbf24;
    --cy5-amber-3: #fde68a;
    --cy5-maroon: #6b2615;
    --cy5-red: #ef4444;
    --cy5-green: #10b981;
    --cy5-line: rgba(245, 158, 11, 0.14);
    --cy5-radius-sm: 8px;
    --cy5-radius-md: 12px;
    --cy5-radius-lg: 16px;
    --cy5-transition: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    --cy5-font-display: 'Rubik', system-ui, sans-serif;
    --cy5-font-body: 'Poppins', system-ui, sans-serif;
    --cy5-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(80px, 10vh, 140px) clamp(20px, 5vw, 80px);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(107, 38, 21, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--cy5-bg) 0%, var(--cy5-bg-2) 100%);
    color: var(--cy5-ink);
    font-family: var(--cy5-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Decorative: grid overlay ── */
.cy5-final-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--cy5-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--cy5-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
}

/* ── Decorative: radial glow ── */
.cy5-final-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 55%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* ── Layout: outer grid ── */
.cy5-final-wrap {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
}

/* ── Rail (left index column) ── */
.cy5-final-rail {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 6px;
    font-family: var(--cy5-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cy5-ink-dim);
    align-items: center;
    text-align: center;
}

.cy5-final-rail__index {
    font-size: 11px;
    color: var(--cy5-amber-2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding-bottom: 8px;
}

.cy5-final-rail__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cy5-ink);
}

.cy5-final-rail__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cy5-amber);
    box-shadow: 0 0 8px var(--cy5-amber);
    animation: cy5FinalBlink 2.4s ease-in-out infinite;
}

/* ── Head section ── */
.cy5-final-head {
    margin-bottom: clamp(40px, 5vh, 56px);
    max-width: 72ch;
}

.cy5-final-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-family: var(--cy5-font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cy5-amber-2);
}

.cy5-final-eyebrow__bar {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, var(--cy5-amber), transparent);
}

.cy5-final-h2 {
    font-family: var(--cy5-font-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--cy5-ink);
}

.cy5-final-h2__accent {
    display: inline-block;
    background: linear-gradient(110deg, var(--cy5-amber-3) 0%, var(--cy5-amber) 50%, var(--cy5-maroon) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.cy5-final-lede {
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.65;
    color: var(--cy5-ink-soft);
    margin: 0;
    max-width: 65ch;
}

/* ── Content split ── */
.cy5-final-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

/* ── Form card ── */
.cy5-final-form-wrap {
    padding: 28px;
    background: linear-gradient(145deg, rgba(26, 15, 5, 0.92) 0%, rgba(10, 6, 3, 0.85) 100%);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: var(--cy5-radius-lg);
    position: relative;
    overflow: hidden;
}

/* Shimmer top border */
.cy5-final-form-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy5-amber), transparent);
}

.cy5-final-form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--cy5-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cy5-amber-2);
}

.cy5-final-form-head__beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cy5-amber-2);
    box-shadow: 0 0 10px var(--cy5-amber);
    animation: cy5FinalBlink 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Form grid ── */
.cy5-final-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
    /* anchors honeypot */
}

.cy5-final-field--full {
    grid-column: 1 / -1;
}

/* ── Field label ── */
.cy5-final-field label {
    display: block;
    font-family: var(--cy5-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cy5-ink-dim);
    margin-bottom: 6px;
    cursor: default;
}

.cy5-final-field__opt {
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--cy5-ink-dim);
    opacity: 0.6;
    text-transform: lowercase;
}

/* ── Inputs & textarea ── */
.cy5-final-field input,
.cy5-final-field textarea {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--cy5-font-body);
    font-size: 14px;
    color: var(--cy5-ink);
    background: rgba(10, 6, 3, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--cy5-radius-sm);
    transition: border-color var(--cy5-transition), box-shadow var(--cy5-transition);
    -webkit-appearance: none;
    appearance: none;
}

.cy5-final-field input::placeholder,
.cy5-final-field textarea::placeholder {
    color: var(--cy5-ink-dim);
    opacity: 0.6;
}

/* Focus */
.cy5-final-field input:focus,
.cy5-final-field textarea:focus {
    border-color: var(--cy5-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    outline: none;
}

/* Aria-invalid (JS-driven) */
.cy5-final-field input[aria-invalid="true"],
.cy5-final-field textarea[aria-invalid="true"] {
    border-color: var(--cy5-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.cy5-final-field textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.55;
}

/* ── Honeypot — visible to bots, invisible to humans ── */
.cy5-field-honey {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Submit button ── */
.cy5-final-submit {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-family: var(--cy5-font-display);
    font-weight: 700;
    font-size: 16px;
    color: #2a1a05;
    background: linear-gradient(135deg, var(--cy5-amber-3) 0%, var(--cy5-amber) 60%, #d97706 100%);
    border-radius: var(--cy5-radius-md);
    cursor: pointer;
    box-shadow:
        0 8px 24px -6px rgba(245, 158, 11, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform var(--cy5-transition), box-shadow var(--cy5-transition);
    -webkit-appearance: none;
    appearance: none;
    min-height: 52px;
    user-select: none;
}

.cy5-final-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 14px 34px -6px rgba(245, 158, 11, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cy5-final-submit:focus-visible {
    outline: 3px solid var(--cy5-amber-3);
    outline-offset: 3px;
}

.cy5-final-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.cy5-final-submit svg {
    flex-shrink: 0;
    transition: transform var(--cy5-transition);
}

.cy5-final-submit:hover:not(:disabled) svg {
    transform: translateX(4px);
}

/* ── Form footer note ── */
.cy5-final-form__note {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cy5-ink-dim);
    margin: 4px 0 0;
}

/* ── Response message ── */
.cy5-form-response {
    display: none;
    grid-column: 1 / -1;
    padding: 14px 16px;
    border-radius: var(--cy5-radius-sm);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    margin-top: 10px;
    animation: cy5FadeIn 0.3s ease forwards;
}

/* ── Right column: details panel ── */
.cy5-final-details {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cy5-final-expect__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cy5-font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cy5-amber-2);
    margin-bottom: 14px;
}

.cy5-final-expect__label-bar {
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, var(--cy5-amber), transparent);
}

.cy5-final-expect__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cy5-final-expect__list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cy5-ink);
}

.cy5-final-expect__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 10px;
    height: 1px;
    background: var(--cy5-amber);
}

.cy5-final-expect__list li::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cy5-amber-2);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

/* ================================================================
   Keyframes
   ================================================================ */
@keyframes cy5FinalBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@keyframes cy5FadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cy5FabPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* ================================================================
   Responsive — section
   ================================================================ */
@media (max-width: 1024px) {
    .cy5-final-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cy5-final-wrap {
        grid-template-columns: 1fr;
    }

    .cy5-final-rail {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .cy5-final-rail__index {
        padding-bottom: 0;
        padding-right: 12px;
        border-bottom: 0;
        border-right: 1px solid rgba(245, 158, 11, 0.2);
    }
}

@media (max-width: 640px) {
    .cy5-final {
        padding: 70px 18px;
    }

    .cy5-final-h2 {
        font-size: clamp(24px, 7vw, 34px);
    }

    .cy5-final-form {
        grid-template-columns: 1fr;
    }

    .cy5-final-form-wrap {
        padding: 22px 18px;
    }
}

/* ================================================================
   Accessibility — reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    .cy5-final *,
    .cy5-final *::before,
    .cy5-final *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   Accessibility — high contrast mode
   ================================================================ */
@media (forced-colors: active) {

    .cy5-final-field input,
    .cy5-final-field textarea {
        border: 2px solid ButtonText;
    }

    .cy5-final-submit {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }
}

/* ================================================================
   FAB — Wrapper takes fixed positioning so the button itself
   is never transformed, which allows the tooltip to position
   correctly as an absolute child.
   ================================================================ */

/* ── Wrapper — the only fixed/transformed element ── */
.cy5-fab-wrap {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998 !important;
    transition: opacity 0.3s ease;
}

/* ── FAB button — position:relative only ── */
.cy5-fab {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #d97706 100%);
    color: #2a1a05;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 30px -6px rgba(245, 158, 11, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.3s ease;
}

.cy5-fab:hover {
    transform: scale(1.08);
    box-shadow:
        0 16px 40px -6px rgba(245, 158, 11, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.cy5-fab:focus-visible {
    outline: 3px solid #fde68a;
    outline-offset: 4px;
}

/* ── Pulse rings ── */
.cy5-fab__pulse,
.cy5-fab__pulse--2 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #f59e0b;
    pointer-events: none;
    animation: cy5FabPulse 2.2s ease-out infinite;
}

.cy5-fab__pulse--2 {
    animation-delay: 1.1s;
}

/* ── Tooltip ──
   Sibling of .cy5-fab inside .cy5-fab-wrap.
   No transform on any ancestor — positions reliably above the FAB.
   ── */
.cy5-fab__tip {
    /* Position above the FAB button */
    position: absolute;
    bottom: calc(100% + 16px);
    right: 0;

    /* Fixed width — text must wrap inside it */
    width: 280px;
    max-width: 280px;
    box-sizing: border-box;
    padding: 16px 18px;

    /* Text wrapping — the confirmed fix */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;

    /* Premium background */
    background:
        linear-gradient(165deg,
            rgba(30, 18, 8, 0.98) 0%,
            rgba(12, 7, 2, 0.96) 100%);
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 14px;

    /* Glass layer */
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);

    /* Layered shadows — depth + inner glow */
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(245, 158, 11, 0.05),
        inset 0 1px 0 rgba(245, 158, 11, 0.12),
        inset 0 0 24px rgba(245, 158, 11, 0.03);

    /* Typography */
    color: #f0e4cc;
    font-size: 13px;
    line-height: 1.65;
    font-family: 'Poppins', system-ui, sans-serif;
    text-align: left;
    letter-spacing: 0.005em;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);

    z-index: 10000 !important;
}

.cy5-fab__tip strong {
    color: #fbbf24;
    font-weight: 600;
}

/* Amber accent shimmer line at top of tooltip */
.cy5-fab__tip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(245, 158, 11, 0.5),
            transparent);
    border-radius: 1px;
}

/* Arrow caret pointing DOWN toward the FAB */
.cy5-fab__tip::after {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: rgba(12, 7, 2, 0.97);
    border-right: 1px solid rgba(245, 158, 11, 0.24);
    border-bottom: 1px solid rgba(245, 158, 11, 0.24);
    box-shadow: 4px 4px 8px -2px rgba(0, 0, 0, 0.3);
}

/*
  Hover trigger is on the WRAPPER — not on .cy5-fab alone.
  This is critical: hovering the tooltip itself (which is outside
  the button but inside the wrapper) keeps the tooltip visible
  so the user can read it without it disappearing.
*/
.cy5-fab-wrap:hover .cy5-fab__tip,
.cy5-fab-wrap:focus-within .cy5-fab__tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ================================================================
   Backdrop
   ================================================================ */
.cy5-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 4, 2, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 9998;
}

.cy5-panel-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ================================================================
   Slide Panel
   ================================================================ */
.cy5-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(110%, -50%);
    width: min(460px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 28px 24px;
    background: linear-gradient(145deg, rgba(26, 15, 5, 0.96), rgba(10, 6, 3, 0.94));
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-right: 0;
    border-radius: 16px 0 0 16px;
    box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.35s ease;
}

.cy5-panel[data-open="true"] {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}

/* Panel scrollbar */
.cy5-panel::-webkit-scrollbar {
    width: 6px;
}

.cy5-panel::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 3px;
}

/* Panel close button */
.cy5-panel__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: rgba(10, 6, 3, 0.6);
    color: #f7ecd6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cy5-panel__close:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}

.cy5-panel__close:focus-visible {
    outline: 3px solid #fde68a;
    outline-offset: 2px;
}

/* Panel form — single column always */
.cy5-panel .cy5-final-form {
    grid-template-columns: 1fr;
}

/* ================================================================
   Responsive — FAB + Panel
   ================================================================ */
@media (max-width: 640px) {
    .cy5-fab-wrap {
        right: 16px;
    }

    .cy5-fab {
        width: 52px;
        height: 52px;
    }

    .cy5-fab svg {
        width: 24px;
        height: 24px;
    }

    /* Tooltip hidden on touch — no hover event on mobile */
    .cy5-fab__tip {
        display: none;
    }

    .cy5-panel {
        width: 100vw;
        border-radius: 0;
    }
}

/* ================================================================
   Reduced motion — FAB + Panel
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    .cy5-fab-wrap,
    .cy5-fab,
    .cy5-fab__pulse,
    .cy5-fab__pulse--2,
    .cy5-fab__tip,
    .cy5-panel-backdrop,
    .cy5-panel {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}