:root {
    --primary-color: #EFC609;
    --bg-dark: #0B0E14;
    --bg-card: #151A25;
    --text-main: #FFFFFF;
    --text-muted: #8A94A6;
    --accent-green: #00C853;
    --accent-blue: #2962FF;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* Overflow control for main content */
main {
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   HEADER STYLES
   ======================================== */
header {
    width: 100%;
    padding: 15px 0;
    padding-top: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(11, 14, 20, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    overflow: hidden;
    border-bottom: 1px solid rgba(239, 198, 9, 0.1);
}

.logo {
    float: left;
    width: 17%;
}

.logo img {
    width: 100%;
    height: 35px;
    object-fit: contain;
    object-position: left;
}

.topmenu {
    float: left;
    width: 66%;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top: 5px;
}

.topmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.topmenu ul li {
    float: left;
    margin-left: 30px;
}

.topmenu ul li a {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.topmenu ul li a:hover {
    color: #EFC609;
}

.topbtn {
    float: right;
    width: 17%;
}

.topbtn a {
    float: right;
    background: #EFC609;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.topbtn a:hover {
    background: #c5a206;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(239, 198, 9, 0.3);
}

/* Modern Hero Section with Mesh Gradient */
.hero-section {
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: #0B0E14; /* Base dark background */
}

/* ========================================
   MESH GRADIENT LAYERS
   ======================================== */

/* Mesh Gradient Layer 1 - Primary Gold (Top Right) */
.hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at center,
        rgba(239, 198, 9, 0.35) 0%,
        rgba(239, 198, 9, 0.15) 30%,
        transparent 70%);
    filter: blur(80px);
    animation: mesh-float-1 15s ease-in-out infinite alternate;
    z-index: 0;
    will-change: transform, opacity;
}

/* Mesh Gradient Layer 2 - Orange Accent (Top Left) */
.hero-section::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -15%;
    width: 50%;
    height: 60%;
    background: radial-gradient(ellipse at center,
        rgba(255, 140, 0, 0.2) 0%,
        rgba(255, 100, 0, 0.1) 40%,
        transparent 70%);
    filter: blur(100px);
    animation: mesh-float-2 18s ease-in-out infinite alternate-reverse;
    z-index: 0;
    will-change: transform, opacity;
}

/* Additional mesh layers using container pseudo-elements */
.hero-section .container::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 20%;
    width: 70%;
    height: 50%;
    background: radial-gradient(ellipse at center,
        rgba(138, 43, 226, 0.18) 0%,
        rgba(100, 50, 200, 0.08) 50%,
        transparent 70%);
    filter: blur(90px);
    animation: mesh-float-3 20s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Mesh Gradient Layer 4 - Blue Cool Tone (Mid Right) */
/* Using hero-title pseudo-element for 4th layer */
.hero-title::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -5%;
    width: 40%;
    height: 40%;
    background: radial-gradient(ellipse at center,
        rgba(41, 98, 255, 0.15) 0%,
        rgba(0, 150, 255, 0.05) 50%,
        transparent 70%);
    filter: blur(70px);
    animation: mesh-float-4 12s ease-in-out infinite alternate-reverse;
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ========================================
   MESH ANIMATION KEYFRAMES
   ======================================== */
@keyframes mesh-float-1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(5%, -10%) scale(1.1); opacity: 1; }
    100% { transform: translate(-5%, 5%) scale(0.95); opacity: 0.7; }
}

@keyframes mesh-float-2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(-8%, 8%) scale(1.15); opacity: 0.9; }
    100% { transform: translate(5%, -5%) scale(1); opacity: 0.5; }
}

@keyframes mesh-float-3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(10%, 5%) scale(1.05); opacity: 0.85; }
    100% { transform: translate(-5%, -8%) scale(1.1); opacity: 0.6; }
}

@keyframes mesh-float-4 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-5%, 10%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(8%, -5%) scale(0.9); opacity: 0.4; }
}

/* Ensure container has proper positioning for mesh layer */
.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 0.8s ease-out forwards;
    position: relative;
    z-index: 1;
}

/* Gradient styles for specific words */
.hero-title .gradient-new {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 50%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
    display: inline-block;
}

.hero-title .gradient-bot {
    background: linear-gradient(135deg, #EFC609 0%, #F59E0B 50%, #2962FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite 1s;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 48px;
    line-height: 1.6;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.2s forwards;
    position: relative;
    z-index: 1;
}

/* Hero CTA Button */
.hero-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 48px;
    background: linear-gradient(135deg, #EFC609 0%, #F59E0B 100%);
    border: none;
    border-radius: 100px;
    color: #000;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.4s forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 8px 30px rgba(239, 198, 9, 0.4),
        0 0 0 1px rgba(239, 198, 9, 0.1) inset;
    overflow: hidden;
}

/* Button shine effect */
.hero-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    transition: left 0.6s ease;
    z-index: -1;
}

/* Purple-pink glow ring around button */
.hero-cta-button::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #A855F7, #EC4899, #8B5CF6);
    border-radius: 100px;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(8px);
}

.hero-cta-button:hover {
    background: linear-gradient(135deg, #EFC609 0%, #F59E0B 100%);
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(239, 198, 9, 0.5),
        0 0 0 1px rgba(239, 198, 9, 0.2) inset;
}

.hero-cta-button:hover::before {
    left: 100%;
}

.hero-cta-button:hover::after {
    opacity: 0.6;
}

.hero-cta-button:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 25px rgba(239, 198, 9, 0.4),
        0 0 0 1px rgba(239, 198, 9, 0.1) inset;
}

/* Chatbot Demo Section */
.demo-section {
    padding: 60px 0;
    perspective: 1000px;
    overflow: hidden;
}

.chat-interface {
    width: 700px;
    max-width: 100%;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: 24px;
    /* User requested border and shadow */
    border: 1px solid rgba(94, 0, 255, 0.1);
    box-shadow: 0 20px 50px rgb(90 91 25 / 30%);
    overflow: hidden;
    transform: translateY(30px);
    opacity: 0;
    animation: fadeUp 1s ease-out 0.4s forwards;
    display: flex;
    flex-direction: column;
    height: 600px;
    position: relative;
    /* Higher z-index so panels appear behind */
    z-index: 10;
}

/* Rotating Border Beam Animation - Cross Browser */
.chat-interface::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg,
            transparent 0deg 300deg,
            rgba(239, 198, 9, 0.5) 300deg 360deg);
    transform: translate(-50%, -50%);
    z-index: -2;
    opacity: 0;
}

.chat-interface.beam-active::before {
    opacity: 1;
    animation: rotate-beam 2s linear infinite;
}

.chat-interface::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--bg-card);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
}

.chat-interface.beam-active::after {
    opacity: 1;
}

@keyframes rotate-beam {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Override z-index so content is clickable */
.chat-header,
.chat-messages,
.chat-input-area {
    position: relative;
    z-index: 2;
}

.chat-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(11, 14, 20, 0.5);
}

.bot-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000;
    overflow: hidden;
    background: var(--bg-dark);
}

.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-status {
    font-size: 0.9rem;
    font-weight: 600;
}

.bot-status span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    /* Grey color */
    font-weight: 500;
}

.chat-messages {
    flex: 1;
    padding: 24px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
    /* Disable user interaction */
}

.message-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(10px);
    animation: messageEntry 0.3s ease-out forwards;
}

.message-row.user {
    justify-content: flex-end;
}

.message-row.bot {
    justify-content: flex-start;
}

.bot-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 4px;
}

.message {
    max-width: 100%;
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    font-family: 'Google Sans', 'Product Sans', 'Inter', sans-serif;
}

.message.user {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-right-radius: 4px;
}

.message.bot {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.message.bot.thinking {
    font-style: italic;
    color: var(--primary-color);
    background: rgba(239, 198, 9, 0.1);
}

/* Advanced Chart Styles (CSS Only) */
.chart-container {
    background: #1A1E29;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.text-green {
    color: var(--accent-green);
}

.text-red {
    color: #ff4444;
}

.candles-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    /* Chart height */
    position: relative;
    padding: 0 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Grid lines */
.candles-area::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.02);
}

.candles-area::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.02);
}

.candle-wrapper {
    width: 12px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.wick {
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
}

.body {
    width: 6px;
    border-radius: 1px;
    position: absolute;
    z-index: 2;
}

.body.green {
    background: var(--accent-green);
    box-shadow: 0 0 5px rgba(0, 200, 83, 0.3);
}

.body.red {
    background: #ff4444;
    box-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
}

/* Animation for the last candle */
@keyframes pulseCandle {
    0% {
        height: 45%;
        bottom: 40%;
        opacity: 0.8;
    }

    50% {
        height: 50%;
        bottom: 38%;
        opacity: 1;
        box-shadow: 0 0 10px var(--accent-green);
    }

    100% {
        height: 45%;
        bottom: 40%;
        opacity: 0.8;
    }
}

.body.pulse {
    animation: pulseCandle 2s infinite ease-in-out;
}

.chart-indicators {
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 8px;
}

.indicator {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Coin Badges */
.coin-badges {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.coin-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 14px;
    transition: all 0.3s ease;
}

.coin-badge:hover {
    background: rgba(239, 198, 9, 0.15);
    border-color: var(--primary-color);
}

.coin-badge img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.coin-badge span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

/* Position Card (Exchange-like) */
.position-card {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.9), rgba(20, 25, 35, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.position-pair {
    display: flex;
    align-items: center;
    gap: 8px;
}

.position-coin-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.pair-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
}

.leverage-badge {
    background: rgba(239, 198, 9, 0.2);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.position-side {
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.position-side.long {
    background: rgba(0, 200, 83, 0.2);
    color: var(--accent-green);
}

.position-side.short {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.position-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.position-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position-row .label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.position-row .value {
    font-weight: 600;
    font-size: 0.9rem;
}

.position-row .value.profit {
    color: var(--accent-green);
}

.position-row .value.loss {
    color: #ff4444;
}

.position-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Status Thinking Box */
/* Thinking message style */
.message.thinking-pulse {
    font-style: italic;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.typing-dots::after {
    content: '.';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60% {
        content: '...';
    }

    80%,
    100% {
        content: '';
    }
}

.chat-input-area {
    padding: 20px;
    background: rgba(11, 14, 20, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.fake-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text-main);
    font-family: inherit;
    display: flex;
    align-items: center;
    min-height: 50px;
}

.send-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary-color);
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 198, 9, 0.3);
}

.send-btn svg {
    width: 24px;
    height: 24px;
    transition: all 0.2s;
}

.send-btn .icon-stop {
    display: none;
}

/* Stop state styling */
.send-btn.stopping .icon-send {
    display: none;
}

.send-btn.stopping .icon-stop {
    display: block;
}

.send-btn.stopping {
    background: #333;
    color: white;
}

.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

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

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

/* Gradient shift animation for text gradients */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Reduce mesh gradient blur on mobile for performance */
    .hero-section::before,
    .hero-section::after {
        filter: blur(40px);
    }

    .hero-section .container::before {
        filter: blur(50px);
    }

    .hero-title::before {
        filter: blur(35px);
    }

    .menubtn {
        font-size: 28px;
        color: #fff;
        display: block;
    }

    /* Hide desktop menu on mobile */
    header .topmenu,
    header .topbtn {
        display: none !important;
    }

    .hero-title {
        font-size: 2.5rem;
        padding: 0 15px;
    }

    .hero-subtitle {
        margin-bottom: 20px;
    }

    .hero-cta-button {
        padding: 14px 32px;
        font-size: 1rem;
    }

    .demo-section {
        padding: 15px 0;
    }

    .chat-interface {
        width: 100%;
        max-width: 100%;
        height: 480px;
        margin: 0 10px;
    }

    .chat-header {
        padding: 12px 15px;
    }

    .bot-avatar {
        width: 32px;
        height: 32px;
    }

    .bot-status {
        font-size: 0.8rem;
    }

    .bot-status span {
        font-size: 0.65rem;
    }

    .chat-messages {
        padding: 15px;
        gap: 12px;
    }

    /* Chart container - much smaller on mobile */
    .chart-container {
        max-width: 160px;
        width: 160px;
        padding: 8px;
        gap: 5px;
        margin-top: 10px;
        margin-bottom: 3px;
    }

    .chart-container .chart-header {
        font-size: 0.65rem;
    }

    .candles-area {
        height: 50px;
        padding: 0 3px;
    }

    .chart-indicators {
        font-size: 0.6rem;
        gap: 6px;
        padding-top: 5px;
    }

    .indicator {
        padding: 1px 4px;
    }

    /* Message bubbles */
    .message {
        max-width: 88%;
        font-size: 0.8rem;
        padding: 10px 12px;
        line-height: 1.4;
    }

    .bot-icon-small {
        width: 26px;
        height: 26px;
    }

    .message-row {
        gap: 8px;
    }

    /* Candles smaller */
    .candle-wrapper {
        width: 6px;
    }

    .body {
        width: 3px;
    }

    .wick {
        width: 1px;
    }

    /* Input area */
    .chat-input-area {
        padding: 12px 15px;
        gap: 10px;
    }

    .fake-input {
        padding: 10px 12px;
        min-height: 40px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .send-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .send-btn svg {
        width: 18px;
        height: 18px;
    }

    .typing-cursor::after {
        font-size: 0.8rem;
    }

    /* Coin badges mobile */
    .coin-badges {
        gap: 6px;
        margin: 8px 0;
    }

    .coin-badge {
        padding: 5px 10px;
        gap: 5px;
    }

    .coin-badge img {
        width: 18px;
        height: 18px;
    }

    .coin-badge span {
        font-size: 0.75rem;
    }

    /* Position card mobile */
    .position-card {
        padding: 10px;
        margin-top: 8px;
    }

    .position-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .position-coin-logo {
        width: 22px;
        height: 22px;
    }

    .pair-name {
        font-size: 0.85rem;
    }

    .leverage-badge {
        font-size: 0.6rem;
        padding: 1px 5px;
    }

    .position-side {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .position-row .label {
        font-size: 0.7rem;
    }

    .position-row .value {
        font-size: 0.75rem;
    }

    .position-status {
        font-size: 0.65rem;
        margin-top: 6px;
        padding-top: 6px;
    }

    .status-dot {
        width: 6px;
        height: 6px;
    }

    /* Feature items mobile */
    .feature-features {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        padding: 0;
        list-style: none;
    }

    .feature-features li {
        margin: 0;
        padding: 0;
    }

    .feature-item {
        font-size: 0.9rem;
    }

    .feature-item svg {
        width: 18px;
        height: 18px;
    }

    /* Mobile Header Styles */
    header {
        padding: 10px 0;
    }

    header .container {
        position: relative;
        min-height: 55px;
        display: flex;
        align-items: center;
    }

    .logo {
        width: calc(100% - 50px);
        padding-right: 50px;
    }

    .logo img {
        height: 35px;
    }

    /* Mobile menu button positioning */
    .mobilmenu {
        display: block !important;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        z-index: 1001;
        margin: 0;
    }

    .topmenu,
    .topbtn {
        display: none !important;
    }
}

/* ========================================
   FEATURE ITEMS LIST
   ======================================== */
.feature-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-features li {
    margin: 0;
    padding: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: #94a3b8;
    transition: color 0.3s ease;
}

.feature-item:hover {
    color: #EFC609;
}

.feature-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #22c55e;
    transition: transform 0.3s ease;
}

.feature-item:hover svg {
    transform: scale(1.1);
    color: #EFC609;
}

/* ========================================
   FEATURE SHOWCASE SECTION
   ======================================== */
.feature-showcase {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 60px;
    background: transparent;
    /* Background now in wrapper::after */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(239, 198, 9, 0.03) inset;
    margin: 2px;
    z-index: 2;
}

/* ========================================
   LUXURY AURORA GLOW EFFECTS
   ======================================== */

/* Primary Aurora Glow - Top Right (Warm Gold) */
.feature-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 60%;
    height: 120%;
    background:
        radial-gradient(ellipse 120% 80% at 30% 30%, rgba(239, 198, 9, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255, 200, 50, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 80% 120% at 40% 60%, rgba(239, 198, 9, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: aurora-pulse-1 8s ease-in-out infinite alternate;
    filter: blur(60px);
}

/* Secondary Aurora Glow - Bottom Left (Purple-Pink Gradient) */
.feature-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 100%;
    background:
        radial-gradient(ellipse 110% 90% at 40% 40%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 90% 110% at 60% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 70% 70% at 30% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: aurora-pulse-2 10s ease-in-out infinite alternate-reverse;
    filter: blur(80px);
}

/* Premium Corner Accents - Top Left (Purple Glow) */
.feature-image-container::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
    animation: corner-glow-1 12s ease-in-out infinite;
}

/* Premium Corner Accents - Bottom Right (Pink Glow) */
.feature-content::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.10) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
    animation: corner-glow-2 15s ease-in-out infinite;
}

/* Floating Orb - Top Center (merged into main .feature-card above) */

/* ========================================
   FEATURE CARD WRAPPER - ROTATING BEAM
   ======================================== */
.feature-card-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 32px;
    overflow: hidden;
    /* Clips the rotating beam */
}

/* Rotating beam - Initially hidden */
.feature-card-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg,
            transparent 0deg 300deg,
            rgba(239, 198, 9, 0.6) 300deg 360deg);
    transform: translate(-50%, -50%);
    border-radius: 32px;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

/* Mask layer - Must match feature-card size exactly */
.feature-card-wrapper::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: radial-gradient(circle at 100% 0%, rgb(22, 24, 29) 0%, rgb(12, 12, 14) 100%);
    border-radius: 30px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

/* Show mask when active */
.feature-showcase.beam-active .feature-card-wrapper::after {
    opacity: 1;
}

/* Active state - When showcase is in view */
.feature-showcase.beam-active .feature-card-wrapper::before {
    opacity: 1;
    animation: rotate-beam-feature 2.5s linear infinite;
}

/* Rotate animation for feature card */
@keyframes rotate-beam-feature {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Extra ambient glow layer */
.feature-showcase {
    position: relative;
    overflow: hidden;
    /* Full overflow control */
}

.feature-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse, rgba(239, 198, 9, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(236, 72, 153, 0.025) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
    animation: ambient-float 20s ease-in-out infinite;
}

/* ========================================
   GLOW ANIMATIONS
   ======================================== */
@keyframes aurora-pulse-1 {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(5%, -5%) scale(1.05);
    }

    100% {
        opacity: 0.7;
        transform: translate(-3%, 3%) scale(0.98);
    }
}

@keyframes aurora-pulse-2 {
    0% {
        opacity: 0.5;
        transform: translate(0, 0) scale(1);
    }

    50% {
        opacity: 0.9;
        transform: translate(-5%, 5%) scale(1.08);
    }

    100% {
        opacity: 0.6;
        transform: translate(4%, -4%) scale(1.02);
    }
}

@keyframes corner-glow-1 {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

@keyframes corner-glow-2 {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

@keyframes ambient-float {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    33% {
        opacity: 0.5;
        transform: translate(-48%, -52%) scale(1.05);
    }

    66% {
        opacity: 0.4;
        transform: translate(-52%, -48%) scale(0.98);
    }
}

/* Image Container */
.feature-image-container {
    flex: 1.2;
    position: relative;
    min-width: 0;
    z-index: 1;
}

.feature-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 1472 / 921;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.feature-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-out;
}

.feature-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Glow effect under image */
.feature-glow {
    position: absolute;
    z-index: -1;
    bottom: -10%;
    left: 15%;
    right: 15%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(239, 198, 9, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0.8;
}

/* Content Side */
.feature-content {
    flex: 1;
    position: relative;
    z-index: 1;
    padding-left: 20px;
}

.feature-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #EFC609;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(239, 198, 9, 0.3);
}

.feature-title {
    font-family: 'Gantari', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.feature-description {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
    font-weight: 400;
}

.feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(239, 198, 9, 0.4);
    border-radius: 100px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 40px;
}

.feature-cta:hover {
    background: #EFC609;
    border-color: #EFC609;
    color: #000;
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(239, 198, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.feature-cta svg {
    transition: transform 0.3s ease;
}

.feature-cta:hover svg {
    transform: translateX(5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feature-showcase {
        padding: 40px 15px;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    /* Hide aurora effects on mobile to prevent overflow */
    .feature-card::before,
    .feature-card::after {
        display: none;
    }

    /* Hide ambient glow on mobile */
    .feature-showcase::before {
        display: none;
    }

    .feature-card {
        flex-direction: column;
        gap: 30px;
        padding: 30px 20px;
    }

    .feature-image-container {
        width: 100%;
    }

    .feature-title {
        font-size: 1.8rem;
    }

    .feature-description {
        font-size: 1rem;
    }

    .feature-cta {
        padding: 12px 24px;
        font-size: 0.9rem;
        margin-top: 32px;
    }
}

/* ========================================
   SCANNER SHOWCASE - Dual Phone Display
   ======================================== */
.scanner-showcase {
    padding: 100px 15px;
    position: relative;
    overflow: hidden;
}

.scanner-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 32px;
}

.scanner-card {
    display: flex;
    align-items: center;
    gap: 80px;
    background: #a982120f;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    padding: 60px;
    position: relative;
    z-index: 2;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(239, 198, 9, 0.03) inset;
    overflow: hidden;
}

/* Purple glow for scanner card - Top Left */
.scanner-card::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 40%;
    height: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
    animation: scanner-glow-1 12s ease-in-out infinite;
}

/* Pink glow for scanner card - Bottom Right */
.scanner-card::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 45%;
    height: 55%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: scanner-glow-2 14s ease-in-out infinite;
}

/* Rotating border beam for scanner */
.scanner-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg,
            transparent 0deg 290deg,
            rgba(239, 198, 9, 0.8) 290deg 360deg);
    transform: translate(-50%, -50%);
    border-radius: 32px;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.scanner-wrapper::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: rgb(21, 26, 37);
    border-radius: 29px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.scanner-showcase.beam-active .scanner-wrapper::before {
    opacity: 1;
    animation: rotate-beam-scanner 2.5s linear infinite;
}

.scanner-showcase.beam-active .scanner-wrapper::after {
    opacity: 1;
}

@keyframes rotate-beam-scanner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Ambient glow for scanner section */
.scanner-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse, rgba(239, 198, 9, 0.015) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 20%, rgba(236, 72, 153, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(168, 85, 247, 0.035) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
    animation: ambient-float 22s ease-in-out infinite reverse;
}

/* Scanner card internal glow animations */
@keyframes scanner-glow-1 {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) translate(0, 0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.15) translate(5%, -5%);
    }
}

@keyframes scanner-glow-2 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) translate(0, 0);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2) translate(-5%, 5%);
    }
}

/* ========================================
   DUAL PHONE DISPLAY
   ======================================== */
.phone-display {
    flex: 1.2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 500px;
    z-index: 5;
}

.phone-frame {
    width: 220px;
    height: 450px;
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border-radius: 40px;
    padding: 12px;
    position: relative;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phone tilt animations */
.phone-left {
    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
    animation: phone-float-left 6s ease-in-out infinite;
    z-index: 2;
}

.phone-right {
    transform: perspective(1000px) rotateY(15deg) rotateX(5deg);
    animation: phone-float-right 6s ease-in-out infinite 0.5s;
    z-index: 1;
}

/* Hover effect - bring phones forward */
.phone-frame:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05);
    z-index: 10;
}

@keyframes phone-float-left {

    0%,
    100% {
        transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateY(0px);
    }

    50% {
        transform: perspective(1000px) rotateY(-10deg) rotateX(3deg) translateY(-15px);
    }
}

@keyframes phone-float-right {

    0%,
    100% {
        transform: perspective(1000px) rotateY(15deg) rotateX(5deg) translateY(0px);
    }

    50% {
        transform: perspective(1000px) rotateY(10deg) rotateX(3deg) translateY(-15px);
    }
}

/* Phone notch */
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 25px;
    border-radius: 0 0 15px 15px;
    z-index: 5;
}

/* Phone screen */
.phone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.phone-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reflection effect */
.phone-reflection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 50%,
            transparent 100%);
    pointer-events: none;
    border-radius: 32px;
    z-index: 3;
}

/* ========================================
   SCANNER EFFECTS
   ======================================== */
.scanner-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0.4;
}

.scanner-beam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 224, 102, 0.8) 50%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(255, 224, 102, 0.6);
    animation: scanner-sweep 3s ease-in-out infinite;
}

@keyframes scanner-sweep {

    0%,
    100% {
        top: 10%;
        opacity: 0.2;
    }

    50% {
        top: 90%;
        opacity: 0.6;
    }
}

/* Radar pulse effect */
.radar-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.radar-pulse::before,
.radar-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 224, 102, 0.3);
    animation: radar-expand 4s ease-out infinite;
}

.radar-pulse::after {
    animation-delay: 2s;
}

@keyframes radar-expand {
    0% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* ========================================
   SCANNER CONTENT
   ======================================== */
.scanner-content {
    flex: 1;
    position: relative;
    z-index: 5;
}

.scanner-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFE066;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 224, 102, 0.3);
}

.scanner-title {
    font-family: 'Gantari', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.scanner-description {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
    font-weight: 400;
}

.scanner-features {
    list-style: none;
    margin-bottom: 20px;
}

.scanner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #e2e8f0;
    transition: transform 0.3s ease;
}

.scanner-item:hover {
    transform: translateX(5px);
}

.scanner-item svg {
    flex-shrink: 0;
    color: #FFD54F;
    width: 20px;
    height: 20px;
}

.scanner-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 224, 102, 0.4);
    border-radius: 100px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 40px;
}

.scanner-cta:hover {
    background: #FFD54F;
    border-color: #FFD54F;
    color: #000;
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(255, 213, 79, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.scanner-cta svg {
    transition: transform 0.3s ease;
}

.scanner-cta:hover svg {
    transform: translateX(5px);
}

/* ========================================
   SCANNER MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .scanner-card {
        flex-direction: column;
        gap: 40px;
        padding: 40px 30px;
    }

    .phone-display {
        width: 100%;
        min-height: auto;
    }

    .phone-frame {
        width: 160px;
        height: 320px;
    }

    .scanner-title {
        font-size: 2rem;
    }

    .scanner-description {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .scanner-showcase {
        padding: 40px 15px;
    }

    .phone-display {
        gap: 20px;
    }

    .phone-frame {
        width: 140px;
        height: 280px;
        border-radius: 30px;
        padding: 10px;
    }

    .phone-notch {
        width: 80px;
        height: 20px;
    }

    .phone-screen {
        border-radius: 24px;
    }

    .phone-left {
        transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
        animation: phone-float-left-mobile 6s ease-in-out infinite;
    }

    .phone-right {
        transform: perspective(1000px) rotateY(8deg) rotateX(2deg);
        animation: phone-float-right-mobile 6s ease-in-out infinite 0.5s;
    }

    .phone-frame:hover {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
    }

    @keyframes phone-float-left-mobile {

        0%,
        100% {
            transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) translateY(0px);
        }

        50% {
            transform: perspective(1000px) rotateY(-5deg) rotateX(1deg) translateY(-10px);
        }
    }

    @keyframes phone-float-right-mobile {

        0%,
        100% {
            transform: perspective(1000px) rotateY(8deg) rotateX(2deg) translateY(0px);
        }

        50% {
            transform: perspective(1000px) rotateY(5deg) rotateX(1deg) translateY(-10px);
        }
    }

    .scanner-beam::before {
        height: 2px;
    }

    .radar-pulse {
        width: 200px;
        height: 200px;
    }

    .radar-pulse::before,
    .radar-pulse::after {
        animation: radar-expand-mobile 4s ease-out infinite;
    }

    @keyframes radar-expand-mobile {
        0% {
            width: 30px;
            height: 30px;
            opacity: 0.8;
        }

        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }

    .scanner-title {
        font-size: 1.6rem;
    }

    .scanner-description {
        font-size: 0.95rem;
    }

    .scanner-item {
        font-size: 0.9rem;
    }

    .scanner-cta {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    /* Hide beam effects on mobile */
    .scanner-beam,
    .radar-pulse {
        display: none;
    }
}

/* ========================================
   REFERENCES SECTION - Modern Design
   ======================================== */
.references-section {
    padding: 120px 15px;
    background: linear-gradient(180deg,
            var(--bg-dark) 0%,
            rgba(239, 198, 9, 0.02) 50%,
            var(--bg-dark) 100%);
    position: relative;
    overflow: hidden;
}

/* Ambient glow background */
.references-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(239, 198, 9, 0.03) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.section-title {
    font-family: 'Gantari', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fff 0%, #EFC609 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Swiper Container */
.references-swiper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
}

/* Reference Card */
.reference-card {
    background: rgba(21, 26, 37, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 32px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.reference-card:hover {
    border-color: rgba(239, 198, 9, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Avatar */
.reference-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid rgba(239, 198, 9, 0.3);
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}

.reference-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.reference-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    z-index: 2;
    position: relative;
}

.reference-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.reference-role {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Reference Button */
.reference-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(239, 198, 9, 0.1);
    border: 1px solid rgba(239, 198, 9, 0.3);
    border-radius: 100px;
    color: #EFC609;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.reference-btn:hover {
    background: #EFC609;
    border-color: #EFC609;
    color: #000;
    transform: scale(1.05);
}

.reference-btn svg {
    flex-shrink: 0;
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgba(239, 198, 9, 0.1);
    border: 1px solid rgba(239, 198, 9, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    margin-top: -25px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    color: #EFC609;
    font-size: 20px;
    font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #EFC609;
    border-color: #EFC609;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #000;
}

.swiper-button-next {
    right: -25px;
}

.swiper-button-prev {
    left: -25px;
}

/* Swiper Pagination - Mobile Indicator */
.swiper-pagination-bullets {
    bottom: 20px !important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 4px !important;
}

.swiper-pagination-bullet-active {
    width: 24px;
    background: #EFC609;
    border-radius: 4px;
    animation: bullet-pulse 2s ease-in-out infinite;
}

@keyframes bullet-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 198, 9, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 198, 9, 0);
    }
}

/* Mobile Fade Indicators */
.references-swiper {
    position: relative;
}

.references-swiper::before,
.references-swiper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.references-swiper::before {
    left: 0;
    background: linear-gradient(to right, rgba(11, 14, 20, 0.8) 0%, transparent 100%);
}

.references-swiper::after {
    right: 0;
    background: linear-gradient(to left, rgba(11, 14, 20, 0.8) 0%, transparent 100%);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .references-section {
        padding: 80px 15px;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
    }

    .swiper-button-next {
        right: 10px;
    }

    .swiper-button-prev {
        left: 10px;
    }
}

@media (max-width: 768px) {
    .references-section {
        padding: 60px 15px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .reference-card {
        padding: 24px;
    }

    .reference-avatar {
        width: 80px;
        height: 80px;
    }

    .reference-name {
        font-size: 1.1rem;
    }

    .reference-role {
        font-size: 0.85rem;
    }

    .reference-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    /* Hide navigation buttons on mobile */
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    /* Show fade indicators on mobile */
    .references-swiper::before,
    .references-swiper::after {
        opacity: 1;
    }
}

/* ========================================
   MODAL STYLES - Responsive & Fixed
   ======================================== */
.modal-content {
    background: rgb(21, 26, 37);
    border: 1px solid rgba(239, 198, 9, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.modal-body {
    padding: 0;
    position: relative;
}

/* Video Modal */
#refModal .modal-dialog {
    max-width: 900px;
}

#refModal .ratio {
    border-radius: 12px;
    overflow: hidden;
}

#refModal iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Modal */
.modal-body img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* Close button styling */
.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: #000;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 1;
    transition: all 0.3s ease;
    /* Override Bootstrap's default X icon with custom white X */
    background-image: none;
}

.btn-close::before {
    content: '×';
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    display: block;
}

.btn-close:hover {
    background: #333;
    transform: scale(1.1);
}

/* Mobile responsive for modals */
@media (max-width: 768px) {
    #refModal .modal-dialog {
        max-width: 95%;
        margin: 10px auto;
    }

    .modal-body img {
        max-height: 70vh;
    }

    .btn-close {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
    }
}

/* ========================================
   MOBILE OFFCANVAS MENU
   ======================================== */
/* Hide mobile menu on desktop by default */
.mobilmenu {
    display: none;
}

/* Show desktop menu by default */
header .topmenu,
header .topbtn {
    display: block;
}

.offcanvas {
    background: rgba(11, 14, 20, 0.0);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(239, 198, 9, 0.2);
}

.offcanvas-header {
    border-bottom: none;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

.offcanvas-title {
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
}

.offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Logo in offcanvas */
.offcanvas-logo {
    padding: 30px 20px;
    text-align: center;
}

.offcanvas-logo img {
    max-width: 180px;
    height: auto;
}

/* Navigation Menu */
.mobile-nav {
    flex: 1;
    padding: 20px 0;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav ul li {
    margin-bottom: 0;
}

.mobile-nav ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.mobile-nav ul li a svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.mobile-nav ul li a:hover {
    background: rgba(239, 198, 9, 0.1);
    border-left-color: #EFC609;
    color: #EFC609;
    padding-left: 30px;
}

/* Auth Buttons */
.offcanvas-auth {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.auth-btn svg {
    flex-shrink: 0;
}

.auth-login {
    background: rgba(239, 198, 9, 0.15);
    border: 1px solid rgba(239, 198, 9, 0.4);
    color: #EFC609;
}

.auth-login:hover {
    background: #EFC609;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 198, 9, 0.3);
}

.auth-register {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.auth-register:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Offcanvas close button override */
.offcanvas .btn-close {
    background: rgba(239, 198, 9, 0.1);
    border: 1px solid rgba(239, 198, 9, 0.3);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.offcanvas .btn-close::before {
    content: '×';
    color: #EFC609;
    font-weight: bold;
    line-height: 1;
    display: block;
}

.offcanvas .btn-close:hover {
    background: rgba(239, 198, 9, 0.2);
    border-color: #EFC609;
    transform: rotate(90deg);
}

/* ========================================
   BORDER BEAM FOR REFERENCES SECTION
   ======================================== */
.references-swiper {
    position: relative;
}

/* Wrapper for reference cards with beam */
.references-swiper .swiper-wrapper {
    position: relative;
}

/* Individual card beam effect - override styles */

/* Rotating beam for each card */
.reference-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    background: conic-gradient(from 0deg,
            transparent 0deg 300deg,
            rgba(239, 198, 9, 0.4) 300deg 360deg);
    transform: translate(-50%, -50%);
    border-radius: 24px;
    z-index: -2;
    opacity: 0;
    pointer-events: none;
}

/* Mask layer for card */
.reference-card::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgb(21, 26, 37);
    border-radius: 18px;
    z-index: 0;
    pointer-events: none;
}

/* Active beam animation */
.reference-card.beam-active::before {
    opacity: 1 !important;
    animation: rotate-beam-card 3s linear infinite !important;
}

@keyframes rotate-beam-card {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========================================
   FOOTER STYLES
   ======================================== */
footer {
    float: left;
    width: 100%;
    padding: 80px 0 30px;
    background: rgba(11, 14, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(239, 198, 9, 0.15);
    margin-top: 80px;
    position: relative;
}

/* Subtle glow effect */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(239, 198, 9, 0.5) 50%,
            transparent 100%);
}

footer .desc {
    width: 100%;
    padding-right: 0;
    text-align: center;
}

footer .desc img {
    display: block;
    width: auto;
    max-width: 200px;
    margin: 0 auto 20px;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}

footer .desc img:hover {
    filter: brightness(1.1);
}

footer .desc p {
    margin-bottom: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

footer .col-md-8 {
    padding-left: 55px;
    padding-top: 20px;
}

.footeritem {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.footeritem span {
    float: left;
    width: 100%;
    color: #EFC609;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.footeritem ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footeritem ul li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.footeritem ul li a {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.footeritem ul li a:hover {
    color: #EFC609;
    padding-left: 8px;
    text-shadow: 0 0 20px rgba(239, 198, 9, 0.4);
}

/* Secondary footer with copyright */
footer footer {
    margin-top: 0;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
}

footer footer .desc {
    padding-right: 0;
    text-align: center;
}

footer footer .desc h6 {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 400;
}

footer footer .desc h6 a {
    color: #EFC609;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

footer footer .desc h6 a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgba(239, 198, 9, 0.5);
}

/* Mobile Responsive Footer */
@media (max-width: 768px) {
    footer {
        padding: 50px 15px 20px;
        margin-top: 50px;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    footer .col-md-8 {
        padding-left: 0;
        padding-right: 0;
        padding-top: 30px;
    }

    footer .desc {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    footer .desc img {
        max-width: 180px;
        margin: 0 auto 20px;
    }

    footer .desc p {
        font-size: 14px;
    }

    .footeritem {
        margin-bottom: 25px;
        text-align: center;
    }

    .footeritem span {
        font-size: 15px;
    }

    footer footer {
        padding: 20px 15px;
    }

    footer footer .desc h6 {
        font-size: 12px;
    }
}

/* ========================================
   LEGAL PAGES STYLES
   ======================================== */
.legal-section {
    padding: 80px 0;
    min-height: calc(100vh - 400px);
}

.legal-header {
    text-align: center;
    margin-bottom: 60px;
}

.legal-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #fff 0%, rgba(239, 198, 9, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-section-block {
    background: rgba(21, 26, 37, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(239, 198, 9, 0.15);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.legal-section-block:hover {
    border-color: rgba(239, 198, 9, 0.3);
    box-shadow: 0 10px 40px rgba(239, 198, 9, 0.1);
}

.legal-section-block h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #EFC609;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(239, 198, 9, 0.2);
}

.legal-section-block p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
}

.legal-section-block a {
    color: #EFC609;
    text-decoration: none;
    transition: all 0.3s ease;
}

.legal-section-block a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgba(239, 198, 9, 0.5);
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.legal-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

.legal-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #EFC609;
    font-weight: bold;
    font-size: 1.2rem;
}

.warning-box {
    background: rgba(239, 198, 9, 0.1);
    border: 1px solid rgba(239, 198, 9, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
}

.warning-box p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.8;
}

.warning-box strong {
    color: #EFC609;
    font-size: 1.1rem;
}

/* Mobile Responsive Legal Pages */
@media (max-width: 768px) {
    .legal-section {
        padding: 40px 15px;
    }

    .legal-header h1 {
        font-size: 2rem;
    }

    .legal-subtitle {
        font-size: 1rem;
    }

    .legal-section-block {
        padding: 25px 20px;
        margin-bottom: 20px;
    }

    .legal-section-block h2 {
        font-size: 1.4rem;
    }

    .legal-section-block p {
        font-size: 0.95rem;
    }

    .legal-list li {
        padding-left: 25px;
        font-size: 0.95rem;
    }

    .warning-box {
        padding: 20px;
    }

    .warning-box strong {
        font-size: 1rem;
    }
}