/* Phase 3 Performance: Self-Hosted Fonts */
@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/opensans-var.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #1C1917;
    --secondary: #44403C;
    --accent: #EAB308;
    --background: #0a0a0d;
    --surface: rgba(20, 20, 25, 0.6);
    --border: rgba(255, 255, 255, 0.08);
    --text-main: #f8fafc;
    --text-muted: #A1A1AA;
    
    /* Animation Curves */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: all 400ms var(--ease-out-expo);
}

/* UI UX Pro Max - CSS Components extracted from generated design system */

/* Core Component - Glass Panel */
.glass-panel {
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    transition: var(--transition-smooth);
}

/* Form Elements */
.form-input,
.form-select {
    width: 100%;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #f8fafc;
    font-size: 16px;
    transition: all 300ms ease;
    font-family: 'Open Sans', sans-serif;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.18);
}

.form-input::placeholder {
    color: #64748b;
}

textarea.form-input {
    min-height: 150px;
    resize: vertical;
}

/* Custom Checkbox */
.form-checkbox {
    width: 22px;
    height: 22px;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-checkbox:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.3);
}

/* Hover Cards (From Value Prop & Testimonials) */
.feature-card,
.testimonial-card {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 40px;
    border-radius: 24px;
    transition: var(--transition-smooth);
    will-change: transform, box-shadow;
}

.feature-card:hover,
.testimonial-card:hover {
    background: rgba(30, 41, 59, 0.4);
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(2, 6, 23, 0.55), 0 0 20px rgba(202, 138, 4, 0.16);
}

/* Selection Color Override */
::selection {
    background-color: var(--accent);
    color: white;
}

/* Custom Scrollbar for sleekness */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #020617;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Base utility classes for scroll animation to be triggered by JS */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 800ms var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Consistent keyboard focus visibility across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.25);
    border-radius: 10px;
}

.hero-video-fallback {
    display: none;
}

.hero-copy-block {
    position: relative;
    z-index: 1;
}

.hero-robot-layer {
    top: 56%;
    left: clamp(54%, 58vw, 64%);
    right: auto;
    width: min(42vw, 620px);
    height: min(78vh, 820px);
    opacity: 0.94;
    --robot-shift-x: 0px;
    --robot-shift-y: 0px;
    transform: translateY(-50%) translateX(-8%) translate3d(var(--robot-shift-x), var(--robot-shift-y), 0);
    transition: transform 120ms ease-out;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
}

.hero-robot {
    position: relative;
    z-index: 1;
    transform: translateX(16%) scale(0.94);
    transform-origin: center center;
    filter: drop-shadow(0 14px 30px rgba(2, 6, 23, 0.55));
    overflow: hidden;
    border-radius: inherit;
}

.hero-robot-layer spline-viewer {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.hero-robot-layer::before {
    content: '';
    position: absolute;
    inset: 8% 6%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(202, 138, 4, 0.2) 0%, rgba(202, 138, 4, 0) 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.hero-robot::before {
    content: '';
    position: absolute;
    top: 46px;
    right: 18px;
    width: 46px;
    height: 38px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 28% 30%, rgba(148, 163, 184, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.42);
    pointer-events: none;
    z-index: 3;
}

.hero-robot::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 170px;
    height: 64px;
    background: linear-gradient(145deg, rgba(2, 6, 23, 0.98), rgba(2, 6, 23, 0.995) 58%, rgba(2, 6, 23, 1));
    border: 1px solid rgba(15, 23, 42, 0.92);
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.82);
    pointer-events: none;
    z-index: 3;
}

@media (max-width: 1280px) {
    .hero-robot-layer {
        left: clamp(50%, 54vw, 60%);
        width: min(46vw, 560px);
        transform: translateY(-50%) translateX(-2%) translate3d(var(--robot-shift-x), var(--robot-shift-y), 0);
    }

    .hero-robot {
        transform: translateX(12%) scale(0.92);
    }
}

/* AI chatbot widget */
.ai-chatbot {
    --chatbot-bottom: 18px;
    --chatbot-footer-offset: 0px;
    position: fixed;
    right: 18px;
    bottom: calc(var(--chatbot-bottom) + var(--chatbot-footer-offset));
    z-index: 2147483647;
    width: min(360px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transition: opacity 250ms ease, transform 250ms ease;
}

.ai-chatbot--defer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
}

.ai-chatbot__toggle {
    position: relative;
    min-width: 172px;
    min-height: 60px;
    border: 1px solid rgba(202, 138, 4, 0.18);
    background: linear-gradient(180deg, rgba(7, 14, 28, 0.96), rgba(2, 6, 23, 0.99));
    color: #ffffff;
    border-radius: 999px;
    padding: 8px 14px 8px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.56);
    transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    overflow: visible;
}

.ai-chatbot__toggle:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--accent);
    filter: none;
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.62);
}

.ai-chatbot__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.3);
}

.ai-chatbot__toggle-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), rgba(202, 138, 4, 0.08));
    border: 1px solid rgba(202, 138, 4, 0.24);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-chatbot__toggle-icon::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='128' y1='120' x2='382' y2='392' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CA8A04'/%3E%3Cstop offset='1' stop-color='%23B45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M259.336 97C161.314 97 82 173.939 82 269.053C82 307.697 95.184 343.376 117.443 372.135C109.766 392.654 94.422 413.63 72.667 432.339C69.06 435.441 67.758 440.462 69.391 444.917C71.023 449.372 75.245 452.35 79.985 452.35C135.094 452.35 170.467 431.866 190.883 413.77C211.973 434.692 239.994 441.106 259.336 441.106C357.359 441.106 436.672 364.167 436.672 269.053C436.672 173.939 357.359 97 259.336 97Z' fill='url(%23g)'/%3E%3Ccircle cx='193.5' cy='255.5' r='22.5' fill='%2318345A'/%3E%3Ccircle cx='310.5' cy='255.5' r='22.5' fill='%2318345A'/%3E%3Cpath d='M188 316.5C207.875 346.508 233.779 361 258.507 361C283.234 361 309.125 346.508 329 316.5' stroke='%2318345A' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M392.271 93.1048C397.295 77.2532 419.705 77.2532 424.729 93.1048L430.143 110.183C431.675 115.016 435.484 118.825 440.317 120.357L457.395 125.771C473.247 130.795 473.247 153.205 457.395 158.229L440.317 163.643C435.484 165.175 431.675 168.984 430.143 173.817L424.729 190.895C419.705 206.747 397.295 206.747 392.271 190.895L386.857 173.817C385.325 168.984 381.516 165.175 376.683 163.643L359.605 158.229C343.753 153.205 343.753 130.795 359.605 125.771L376.683 120.357C381.516 118.825 385.325 115.016 386.857 110.183L392.271 93.1048Z' fill='%23CA8A04'/%3E%3Cpath d='M446.846 174.696C449.779 165.442 462.863 165.442 465.796 174.696L468.957 184.664C469.852 187.485 472.075 189.709 474.897 190.603L484.865 193.764C494.119 196.697 494.119 209.781 484.865 212.714L474.897 215.875C472.075 216.77 469.852 218.993 468.957 221.815L465.796 231.783C462.863 241.037 449.779 241.037 446.846 231.783L443.685 221.815C442.79 218.993 440.567 216.77 437.745 215.875L427.777 212.714C418.523 209.781 418.523 196.697 427.777 193.764L437.745 190.603C440.567 189.709 442.79 187.485 443.685 184.664L446.846 174.696Z' fill='%23CA8A04'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ai-chatbot__toggle-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #f8fafc;
    font-family: 'Poppins', sans-serif;
}

.ai-chatbot__hover-icon {
    display: none;
}

.ai-chatbot__hover-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.94;
}

.ai-chatbot.is-open .ai-chatbot__toggle {
    display: none;
}

.ai-chatbot__panel {
    position: relative;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(3, 7, 18, 0.96));
    border-radius: 24px;
    overflow: visible;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.62);
}

.ai-chatbot__panel::after {
    content: '';
    position: absolute;
    right: 26px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: rgba(2, 6, 23, 0.98);
    border-right: 1px solid rgba(148, 163, 184, 0.24);
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    transform: rotate(45deg);
}

.ai-chatbot__bot-badge {
    position: absolute;
    top: -17px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(202, 138, 4, 0.48);
    background: linear-gradient(140deg, rgba(8, 47, 73, 0.95), rgba(2, 6, 23, 0.95));
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.62);
    display: grid;
    place-items: center;
    z-index: 4;
}

.ai-chatbot__bot-badge::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='128' y1='120' x2='382' y2='392' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CA8A04'/%3E%3Cstop offset='1' stop-color='%23B45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M259.336 97C161.314 97 82 173.939 82 269.053C82 307.697 95.184 343.376 117.443 372.135C109.766 392.654 94.422 413.63 72.667 432.339C69.06 435.441 67.758 440.462 69.391 444.917C71.023 449.372 75.245 452.35 79.985 452.35C135.094 452.35 170.467 431.866 190.883 413.77C211.973 434.692 239.994 441.106 259.336 441.106C357.359 441.106 436.672 364.167 436.672 269.053C436.672 173.939 357.359 97 259.336 97Z' fill='url(%23g)'/%3E%3Ccircle cx='193.5' cy='255.5' r='22.5' fill='%2318345A'/%3E%3Ccircle cx='310.5' cy='255.5' r='22.5' fill='%2318345A'/%3E%3Cpath d='M188 316.5C207.875 346.508 233.779 361 258.507 361C283.234 361 309.125 346.508 329 316.5' stroke='%2318345A' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M392.271 93.1048C397.295 77.2532 419.705 77.2532 424.729 93.1048L430.143 110.183C431.675 115.016 435.484 118.825 440.317 120.357L457.395 125.771C473.247 130.795 473.247 153.205 457.395 158.229L440.317 163.643C435.484 165.175 431.675 168.984 430.143 173.817L424.729 190.895C419.705 206.747 397.295 206.747 392.271 190.895L386.857 173.817C385.325 168.984 381.516 165.175 376.683 163.643L359.605 158.229C343.753 153.205 343.753 130.795 359.605 125.771L376.683 120.357C381.516 118.825 385.325 115.016 386.857 110.183L392.271 93.1048Z' fill='%23CA8A04'/%3E%3Cpath d='M446.846 174.696C449.779 165.442 462.863 165.442 465.796 174.696L468.957 184.664C469.852 187.485 472.075 189.709 474.897 190.603L484.865 193.764C494.119 196.697 494.119 209.781 484.865 212.714L474.897 215.875C472.075 216.77 469.852 218.993 468.957 221.815L465.796 231.783C462.863 241.037 449.779 241.037 446.846 231.783L443.685 221.815C442.79 218.993 440.567 216.77 437.745 215.875L427.777 212.714C418.523 209.781 418.523 196.697 427.777 193.764L437.745 190.603C440.567 189.709 442.79 187.485 443.685 184.664L446.846 174.696Z' fill='%23CA8A04'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ai-chatbot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #f8fafc;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    font-family: 'Poppins', sans-serif;
}

.ai-chatbot__close {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ai-chatbot__messages {
    max-height: 280px;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
}

.ai-chatbot__msg {
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
}

.ai-chatbot__msg p {
    margin: 0;
}

.ai-chatbot__msg--bot {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #e2e8f0;
}

.ai-chatbot__msg--user {
    background: rgba(202, 138, 4, 0.18);
    border: 1px solid rgba(202, 138, 4, 0.32);
    color: #f8fafc;
    align-self: flex-end;
}

.ai-chatbot__link {
    display: inline-block;
    margin-top: 8px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.ai-chatbot__link:hover {
    color: #e0f2fe;
    text-decoration: underline;
}

.ai-chatbot__email {
    margin-top: 8px;
    border: 1px solid rgba(202, 138, 4, 0.45);
    border-radius: 999px;
    padding: 7px 12px;
    background: transparent;
    color: #e0f2fe;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ai-chatbot__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.ai-chatbot__input {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    color: #f8fafc;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

.ai-chatbot__send {
    border: 1px solid rgba(202, 138, 4, 0.35);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), #B45309);
    color: #ffffff;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ai-chatbot__transcript-bar {
    display: none;
    padding: 6px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    text-align: center;
}

.ai-chatbot__transcript-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 150ms, background 150ms;
}

.ai-chatbot__transcript-btn:hover {
    color: #94a3b8;
    background: rgba(148, 148, 148, 0.08);
}

.ai-chatbot__transcript-form {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.6);
}

.ai-chatbot__transcript-hint {
    font-size: 11px;
    color: #64748b;
    margin: 0 0 8px;
}

.ai-chatbot__transcript-email {
    flex: 1;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    color: #f8fafc;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 200ms;
}

.ai-chatbot__transcript-email:focus {
    border-color: var(--accent);
}

.ai-chatbot__transcript-send {
    border: 1px solid rgba(202, 138, 4, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #B45309);
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ai-chatbot__transcript-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-chatbot__transcript-status {
    font-size: 11px;
    margin: 6px 0 0;
}

spline-viewer::part(logo) {
    display: none !important;
}

spline-viewer {
    --spline-viewer-logo-display: none !important;
}

/* Extra-safe watermark/logo suppression across Spline viewer variants */
spline-viewer::part(watermark),
spline-viewer::part(brand),
spline-viewer::part(badge) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

spline-viewer [class*='logo'],
spline-viewer [class*='watermark'],
spline-viewer [id*='logo'],
spline-viewer [id*='watermark'],
spline-viewer a[href*='spline'],
spline-viewer a[href*='splinetool'] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

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

    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-video {
        display: none;
    }

    .hero-video-fallback {
        display: block;
    }

    .hero-robot-layer {
        display: none;
    }

    .ai-chatbot {
        width: calc(100vw - 20px);
        right: 10px;
        --chatbot-bottom: 10px;
        bottom: calc(var(--chatbot-bottom) + var(--chatbot-footer-offset));
    }

    .ai-chatbot__toggle {
        min-width: 156px;
        min-height: 56px;
        padding-right: 12px;
    }

    .ai-chatbot__toggle-icon {
        width: 38px;
        height: 38px;
    }

    .ai-chatbot__toggle-icon::before {
        width: 24px;
        height: 24px;
    }

    .ai-chatbot__toggle-text {
        font-size: 13px;
    }

    .hero-robot::before,
    .hero-robot::after {
        display: none;
    }
}