/* Icon Styles */
.icon-high-performance {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%2010V3L4%2014h7v7l9-11h-7z%22%2F%3E%3C%2Fsvg%3E');
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-secure-reliable {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4m5.618-4.016A11.955%2011.955%200%2001%2012%202.944a11.955%2011.955%200%2001-8.618%203.04A12.02%2012.02%200%2000%203%209c0%205.591%203.824%2010.29%209%2011.622%205.176-1.332%209-6.03%209-11.622%200-1.042-.133-2.052-.382-3.016z%22%2F%3E%3C%2Fsvg%3E');
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-market-edge {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207h8m0%200v8m0-8l-8%208-4-4-6%206%22%2F%3E%3C%2Fsvg%3E');
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-check {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013l4%204L19%207%22%2F%3E%3C%2Fsvg%3E');
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.125rem;
    margin-right: 0.5rem;
}

.star-icon {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M9.049%202.927c.3-.921%201.603-.921%201.902%200l1.07%203.292a1%201%200%2000.95.69h3.462c.969%200%201.371%201.24.588%201.81l-2.8%202.034a1%201%200%2000-.364%201.118l1.07%203.292c.3.921-.755%201.688-1.54%201.118l-2.8-2.034a1%201%200%2000-1.175%200l-2.8%202.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1%201%200%2000-.364-1.118L2.98%208.72c-.783-.57-.38-1.81.588-1.81h3.461a1%201%200%2000.951-.69l1.07-3.292z%22%2F%3E%3C%2Fsvg%3E');
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.user-icon {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2012c2.21%200%204-1.79%204-4s-1.79-4-4-4-4%201.79-4%204%201.79%204%204%204zm0%202c-2.67%200-8%201.34-8%204v2h16v-2c0-2.66-5.33-4-8-4z%22%2F%3E%3C%2Fsvg%3E');
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
    background-repeat: no-repeat;
}

[x-cloak] {
    display: none; /* Hides the magnifier before Alpine initializes */
}

.magnifier-container {
    position: relative;
    overflow: hidden; /* Clips the base image container if needed */
}

    .magnifier-container img {
        /* Use standard image rendering property */
        image-rendering: auto; /* Standard property */
    }

/* Component Styles */
.btn {
    font-weight: bold;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background-color: var(--primary-color, #6B46C1);
    color: white;
    transition-property: background-color, box-shadow;
    transition-duration: 200ms;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

    .btn-primary:hover {
        background-color: var(--primary-dark-color, #553C9A);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

.btn-secondary {
    background-color: white;
    color: var(--primary-color, #6B46C1);
    border: 1px solid #d1d5db;
}

    .btn-secondary:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }

.card {
    background-color: #f9fafb;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    transition-property: all;
    transition-duration: 300ms;
}

    .card:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

.testimonial-card {
    padding: 1.5rem;
}

/* Adding icon-specific styles for premium features */
.icon-multi-chart, .icon-fast-forward, .icon-drag-target, .icon-pattern, .icon-strategy, .icon-intuition, .icon-quote {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-multi-chart {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="7" height="7"%3E%3C/rect%3E%3Crect x="14" y="3" width="7" height="7"%3E%3C/rect%3E%3Crect x="14" y="14" width="7" height="7"%3E%3C/rect%3E%3Crect x="3" y="14" width="7" height="7"%3E%3C/rect%3E%3C/svg%3E');
}

.icon-fast-forward {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolygon points="13 19 22 12 13 5 13 19"%3E%3C/polygon%3E%3Cpolygon points="2 19 11 12 2 5 2 19"%3E%3C/polygon%3E%3C/svg%3E');
}

.icon-drag-target {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10"%3E%3C/circle%3E%3Ccircle cx="12" cy="12" r="6"%3E%3C/circle%3E%3Ccircle cx="12" cy="12" r="2"%3E%3C/circle%3E%3C/svg%3E');
}

.icon-pattern {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"%3E%3C/path%3E%3Cpath d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"%3E%3C/path%3E%3C/svg%3E');
}

.icon-strategy {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 8h1a4 4 0 0 1 0 8h-1"%3E%3C/path%3E%3Cpath d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"%3E%3C/path%3E%3Cline x1="6" y1="1" x2="6" y2="4"%3E%3C/line%3E%3Cline x1="10" y1="1" x2="10" y2="4"%3E%3C/line%3E%3Cline x1="14" y1="1" x2="14" y2="4"%3E%3C/line%3E%3C/svg%3E');
}

.icon-intuition {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"%3E%3C/path%3E%3Cpolyline points="7.5 4.21 12 6.81 16.5 4.21"%3E%3C/polyline%3E%3Cpolyline points="7.5 19.79 7.5 14.6 3 12"%3E%3C/polyline%3E%3Cpolyline points="21 12 16.5 14.6 16.5 19.79"%3E%3C/polyline%3E%3Cpolyline points="3.27 6.96 12 12.01 20.73 6.96"%3E%3C/polyline%3E%3Cline x1="12" y1="22.08" x2="12" y2="12"%3E%3C/line%3E%3C/svg%3E');
}

.icon-quote {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M10 11h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"%3E%3C/path%3E%3Cpath d="M19 11h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"%3E%3C/path%3E%3Cpath d="M4 15h16"%3E%3C/path%3E%3Cpath d="M7 15v4"%3E%3C/path%3E%3Cpath d="M15 15v4"%3E%3C/path%3E%3C/svg%3E');
}

/* CSS Variables for theme colors — aligned with tailwind.config.js */
:root {
    --primary-color: #6B46C1;
    --primary-light-color: #9F7AEA;
    --primary-dark-color: #553C9A;
    --secondary-color: #2D3748;
    --secondary-light-color: #4A5568;
}

/* Spotlight-style gradient for hero sections (dark with subtle center glow) */
.hero-spotlight {
    background-color: #0b0f19; /* deep navy/near-black */
    background-image:
        radial-gradient(1200px 700px at 50% -10%, rgba(99, 102, 241, 0.22), rgba(11, 15, 25, 0) 55%),
        radial-gradient(900px 540px at 85% 12%, rgba(14, 165, 233, 0.14), rgba(11, 15, 25, 0) 60%),
        radial-gradient(closest-corner at 50% 60%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.85) 100%);
    background-repeat: no-repeat;
}