/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: oklch(0 0 0);
    color: oklch(1 0 0);
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Image Container */
.image-container {
    max-width: 20rem;
    width: 100%;
    height: 24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    margin: 0 auto;
}

.image-container:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

/* Header */
.header-row {
    background: oklch(0 0 0);
    padding: 1.25rem 0;
    position: relative;
}

.header-row .container {
    padding: 0 1rem;
    justify-content: space-between;  /* Keep original alignment */
    text-align: left;                /* Align text to left */
}

.casmify-gradient {
    font-weight: 700;
    font-size: 2rem;
    background: linear-gradient(90deg, #1A73E8, #7B2FDD);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Buttons */
.button {
    padding: 0.75rem 2rem;
    border-radius: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s, opacity 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.primary-btn {
    background: linear-gradient(90deg, oklch(0.6 0.2 240), oklch(0.5 0.2 280));
    color: oklch(1 0 0);
}

.primary-btn:hover {
    background: linear-gradient(90deg, oklch(0.6 0.2 240 / 0.9), oklch(0.5 0.2 280 / 0.9));
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.outline-btn {
    border: 1px solid oklch(0.6 0.2 240);
    background: transparent;
    color: oklch(0.6 0.2 240);
}

.outline-btn:hover {
    background: oklch(0.6 0.2 240);
    color: oklch(1 0 0);
    transform: scale(1.05);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
p, span, div { font-size: clamp(1rem, 2vw, 1.125rem); }

.text-2xl { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.text-3xl { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.text-4xl { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.text-5xl { font-size: clamp(2rem, 4vw, 3rem); }
.text-6xl { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.text-7xl { font-size: clamp(3rem, 6vw, 4.5rem); }
.text-xl { font-size: clamp(1.125rem, 2.25vw, 1.25rem); }
.text-lg { font-size: clamp(1rem, 2vw, 1.125rem); }
.text-sm { font-size: clamp(0.875rem, 1.75vw, 0.875rem); }
.text-muted-foreground { color: oklch(0.69 0 0); }
.text-primary { color: oklch(0.6 0.2 240); }
.text-white { color: oklch(1 0 0); }
.hover-text-primary-80:hover { color: oklch(0.6 0.2 240 / 0.8); }
.underline { text-decoration: underline; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.2; }
.leading-relaxed { line-height: 1.6; }
.tracking-tight { letter-spacing: -0.025em; }

/* Layout Utilities */
.py-24 { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: clamp(1.5rem, 3vw, 2rem); }
.space-y-10 > * + * { margin-top: clamp(2rem, 4vw, 2.5rem); }
.space-y-12 > * + * { margin-top: clamp(2.5rem, 5vw, 3rem); }
.space-y-16 > * + * { margin-top: clamp(3rem, 6vw, 4rem); }
.space-y-20 > * + * { margin-top: clamp(4rem, 8vw, 5rem); }
.space-y-32 > * + * { margin-top: clamp(6rem, 12vw, 8rem); }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.gap-4 { gap: 1rem; }
.gap-10 { gap: clamp(1.5rem, 3vw, 2.5rem); }
.gap-16 { gap: clamp(2rem, 4vw, 4rem); }
.gap-20 { gap: clamp(3rem, 6vw, 5rem); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.text-center { text-align: center; }
.max-w-2xl { max-width: min(32rem, 90vw); }
.max-w-4xl { max-width: min(64rem, 90vw); }
.max-w-6xl { max-width: min(80rem, 90vw); }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-80 { width: 20rem; }
.h-96 { height: 24rem; }
.rounded-full { border-radius: 9999px; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.lg-grid-cols-2 { 
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
}
.md-grid-cols-3 { 
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.lg-grid-flow-col-dense { grid-auto-flow: row; }
.lg-col-start-1 { grid-column: auto; }
.lg-col-start-2 { grid-column: auto; }

/* Cards and Backgrounds */
.bg-primary-10 { background: oklch(0.6 0.2 240 / 0.1); }
.bg-card-20 { background: oklch(0.1 0 0 / 0.2); }
.bg-card-30 { background: oklch(0.1 0 0 / 0.3); }
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.border-border { border: 1px solid oklch(0.3 0 0); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.p-8 { padding: clamp(1.5rem, 3vw, 2rem); }
.p-10 { padding: clamp(2rem, 4vw, 2.5rem); }
.p-12 { padding: clamp(2.5rem, 5vw, 3rem); }
.p-16 { padding: clamp(3rem, 6vw, 4rem); }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-10 { padding-left: clamp(1.5rem, 3vw, 2.5rem); padding-right: clamp(1.5rem, 3vw, 2.5rem); }
.px-12 { padding-left: clamp(2rem, 4vw, 3rem); padding-right: clamp(2rem, 4vw, 3rem); }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.transition-colors { transition: border-color 0.3s; }
.transition-all { transition: all 0.3s; }
.hover-border-primary-30:hover { border-color: oklch(0.6 0.2 240 / 0.3); }
.hover-shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.premium-gradient {
    background: linear-gradient(90deg, oklch(0.6 0.2 240), oklch(0.5 0.2 280));
}
.hover-opacity-90:hover { opacity: 0.9; }
.hover-scale-105:hover { transform: scale(1.05); }

/* Images */
img.w-6 { width: 1.5rem; }
img.h-6 { height: 1.5rem; }

/* Footer */
.footer-section {
    background: linear-gradient(90deg, oklch(0.6 0.2 240), oklch(0.5 0.2 280));
    padding: 2.5rem 0;
}

.footer-section .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.footer-text-left, .footer-text-right {
    flex: 1;
}

.footer-text-right {
    text-align: center;
}

.button.fab,
.button img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.social-links {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.social-links a {
    color: oklch(1 0 0);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    padding: 0.5rem;
}

.social-links a:hover {
    transform: scale(1.2);
}

.legal-links {
    margin-top: 1.25rem;
    font-size: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.legal-links a {
    color: oklch(1 0 0);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    transition: background 0.3s, color 0.3s, transform 0.2s;
}

.legal-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Font Awesome Icons */
.fa-2x { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.fa-lg { font-size: clamp(1.125rem, 2.25vw, 1.25rem); }
.fa-3x { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Responsive Design */
@media (min-width: 768px) {
    .sm-flex-row { flex-direction: row; }
    .md-grid-cols-3 { 
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-section .container { 
        flex-direction: row; 
        text-align: left;
    }
    .footer-text-right { text-align: right; }
    .social-links { justify-content: flex-end; }
    .legal-links { justify-content: flex-end; }
}

@media (min-width: 1024px) {
    .lg-grid-cols-2 { 
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .lg-col-start-1 { grid-column-start: 1; }
    .lg-col-start-2 { grid-column-start: 2; }
    .lg-grid-flow-col-dense { grid-auto-flow: column dense; }
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
    .container {
        padding: 0 1rem;
    }
    
    .header-row .container {
    padding: 0 1rem;               /* Align text to left */
}

   

    .header-row .button{
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .casmify-gradient {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .header-download-btn {
        position:absolute;
        top: 125rem;
        right: 1.5rem;
        z-index: 10;
    }

    
    .button {
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        min-width: auto;
    }
    
    .image-container {
        max-width: 100%;
        width: min(18rem, 90vw);
        height: min(20rem, 50vh);
        margin: 1rem auto;
    }
    
    .grid {
        gap: 2rem;
    }
    
    .space-x-2 > * + *,
    .space-x-3 > * + *,
    .space-x-4 > * + *,
    .space-x-6 > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .flex.items-center.space-x-2,
    .flex.items-center.space-x-3,
    .flex.items-center.space-x-4 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .flex.items-center.space-x-2 > *,
    .flex.items-center.space-x-3 > *,
    .flex.items-center.space-x-4 > * {
        margin-left: 0;
        margin-bottom: 0.5rem;
    }
    
    .flex.items-center.space-x-2 > *:last-child,
    .flex.items-center.space-x-3 > *:last-child,
    .flex.items-center.space-x-4 > *:last-child {
        margin-bottom: 0;
    }
    
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    p, span, div { font-size: clamp(0.875rem, 3vw, 1rem); }
    
    .casmify-gradient {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }
    
    .button {
        padding: 0.5rem 1.25rem;
        font-size: 0.8125rem;
    }
    
    .social-links a {
        font-size: 1.125rem;
        padding: 0.375rem;
    }
    
    .legal-links a {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .image-container {
        width: min(16rem, 85vw);
        height: min(18rem, 45vh);
    }
    
    .w-12, .h-12 {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .w-16, .h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    .fa-2x { font-size: 1.125rem; }
    .fa-3x { font-size: 1.25rem; }
}