/* ═══════════════════════════════════════════════════════════════════════════
   SOPHOS SOFT - Premium Tech Design System v2.0
   "Wisdom Through Technology" | Bilgelik Teknoloji ile Buluşuyor
   INNOVATIVE • CUTTING-EDGE • DEVELOPER-FOCUSED
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Variables / Design Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Primary Colors - True Bronze Gold (Samsunspor inspired) */
    --gold-primary: #C9A227;
    --gold-light: #DDB84D;
    --gold-dark: #A68523;
    --gold-bronze: #B8860B;
    --gold-gradient: linear-gradient(135deg, #C9A227 0%, #DDB84D 25%, #C9A227 50%, #A68523 100%);
    --gold-shine: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.4), transparent);

    /* Deep Space / Cyber Navy */
    --navy-deep: #0A0E17;
    --navy-mid: #121826;
    --navy-light: #1E2A3D;
    --navy-glow: #2A3F5F;
    --navy-gradient: linear-gradient(180deg, #0A0E17 0%, #121826 50%, #0A0E17 100%);

    /* Marble / Off-White */
    --marble-white: #F5F2EB;
    --marble-cream: #E8E4DB;
    --marble-warm: #D4CFC4;

    /* Cyber Accents */
    --cyber-blue: #00D4FF;
    --cyber-purple: #8B5CF6;
    --cyber-green: #10B981;

    /* Text Colors */
    --text-primary: #F5F2EB;
    --text-secondary: rgba(245, 242, 235, 0.65);
    --text-muted: rgba(245, 242, 235, 0.4);
    --text-dark: #0A0E17;

    /* Glass Effect - Darker, more tech */
    --glass-bg: rgba(18, 24, 38, 0.7);
    --glass-border: rgba(201, 162, 39, 0.15);
    --glass-blur: 24px;

    /* Shadows & Glows */
    --shadow-gold: 0 0 60px rgba(201, 162, 39, 0.25);
    --shadow-deep: 0 32px 64px -16px rgba(0, 0, 0, 0.6);
    --glow-gold: 0 0 30px rgba(201, 162, 39, 0.5);
    --glow-blue: 0 0 30px rgba(0, 212, 255, 0.3);

    /* Spacing */
    --section-padding: 140px;
    --container-width: 1280px;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reset & Base
   ───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background: var(--navy-deep);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Grain Texture Overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

::selection {
    background: var(--gold-primary);
    color: var(--navy-deep);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(3rem, 8vw, 6rem);
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: 1.25rem;
}

p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
}

.text-gold {
    color: var(--gold-primary);
}

.text-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mono {
    font-family: var(--font-mono);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────────────────────────────────────── */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

.section {
    padding: var(--section-padding) 0;
    position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Navigation - Minimal & Clean
   ───────────────────────────────────────────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    background: transparent;
    transition: var(--transition-smooth);
}

.navbar.scrolled {
    background: rgba(10, 14, 23, 0.9);
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid rgba(201, 162, 39, 0.1);
    padding: 16px 0;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logo-icon {
    width: 44px;
    height: 44px;
    background: var(--gold-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--glow-gold);
    position: relative;
    overflow: hidden;
}

.logo-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {

    0%,
    100% {
        transform: translateX(-100%) rotate(45deg);
    }

    50% {
        transform: translateX(100%) rotate(45deg);
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
    list-style: none;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
    padding: 8px 0;
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-gradient);
    transition: var(--transition-smooth);
}

.nav-links a:hover {
    color: var(--gold-primary);
}

.nav-links a:hover::before {
    width: 100%;
}

.nav-cta {
    padding: 12px 24px !important;
    background: transparent !important;
    border: 1px solid var(--gold-primary) !important;
    color: var(--gold-primary) !important;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.nav-cta:hover {
    background: var(--gold-primary) !important;
    color: var(--navy-deep) !important;
    box-shadow: var(--glow-gold);
}

.nav-cta::before {
    display: none !important;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--gold-primary);
    transition: var(--transition-fast);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hero Section - Matrix Inspired
   ───────────────────────────────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

/* Code Rain Background */
.code-rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0.15;
}

.code-column {
    position: absolute;
    top: -100%;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gold-primary);
    animation: codeRain linear infinite;
    text-shadow: 0 0 10px var(--gold-primary);
}

@keyframes codeRain {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200vh);
    }
}

/* Animated Grid Background */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 162, 39, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 39, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Floating Tech Shapes */
.tech-shape {
    position: absolute;
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    animation: float 20s ease-in-out infinite;
}

.tech-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 10%;
    animation-delay: 0s;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.05) 0%, transparent 100%);
}

.tech-shape-2 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    left: 5%;
    animation-delay: -7s;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
    border-color: rgba(0, 212, 255, 0.15);
}

.tech-shape-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 25%;
    animation-delay: -14s;
    transform: rotate(45deg);
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.6;
    }

    25% {
        transform: translate(30px, -40px) rotate(5deg);
        opacity: 0.9;
    }

    50% {
        transform: translate(-20px, 30px) rotate(-5deg);
        opacity: 0.7;
    }

    75% {
        transform: translate(20px, 20px) rotate(3deg);
        opacity: 0.8;
    }
}

/* Golden Glow Orb */
.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   Glowing Sun - Sophos (Aydın/Wisdom/Enlightenment)
   ───────────────────────────────────────────────────────────────────────────── */
.sun-container {
    position: absolute;
    top: 10%;
    right: 12%;
    z-index: 2;
    pointer-events: none;
}

.sun {
    position: relative;
    width: 200px;
    height: 200px;
}

/* Smooth Radial Rays using conic-gradient */
.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(201, 162, 39, 0.4) 5deg,
            transparent 10deg,
            transparent 20deg,
            rgba(201, 162, 39, 0.3) 25deg,
            transparent 30deg,
            transparent 40deg,
            rgba(201, 162, 39, 0.35) 45deg,
            transparent 50deg,
            transparent 60deg,
            rgba(201, 162, 39, 0.4) 65deg,
            transparent 70deg,
            transparent 80deg,
            rgba(201, 162, 39, 0.3) 85deg,
            transparent 90deg,
            transparent 100deg,
            rgba(201, 162, 39, 0.35) 105deg,
            transparent 110deg,
            transparent 120deg,
            rgba(201, 162, 39, 0.4) 125deg,
            transparent 130deg,
            transparent 140deg,
            rgba(201, 162, 39, 0.3) 145deg,
            transparent 150deg,
            transparent 160deg,
            rgba(201, 162, 39, 0.35) 165deg,
            transparent 170deg,
            transparent 180deg,
            rgba(201, 162, 39, 0.4) 185deg,
            transparent 190deg,
            transparent 200deg,
            rgba(201, 162, 39, 0.3) 205deg,
            transparent 210deg,
            transparent 220deg,
            rgba(201, 162, 39, 0.35) 225deg,
            transparent 230deg,
            transparent 240deg,
            rgba(201, 162, 39, 0.4) 245deg,
            transparent 250deg,
            transparent 260deg,
            rgba(201, 162, 39, 0.3) 265deg,
            transparent 270deg,
            transparent 280deg,
            rgba(201, 162, 39, 0.35) 285deg,
            transparent 290deg,
            transparent 300deg,
            rgba(201, 162, 39, 0.4) 305deg,
            transparent 310deg,
            transparent 320deg,
            rgba(201, 162, 39, 0.3) 325deg,
            transparent 330deg,
            transparent 340deg,
            rgba(201, 162, 39, 0.35) 345deg,
            transparent 350deg,
            transparent 360deg);
    border-radius: 50%;
    mask-image: radial-gradient(circle, transparent 25%, black 30%, black 60%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, transparent 25%, black 30%, black 60%, transparent 70%);
    animation: sunRotate 60s linear infinite;
    filter: blur(2px);
}

/* Second layer of rays for depth */
.sun-rays::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: conic-gradient(from 15deg,
            transparent 0deg,
            rgba(244, 208, 63, 0.25) 8deg,
            transparent 16deg,
            transparent 36deg,
            rgba(244, 208, 63, 0.2) 44deg,
            transparent 52deg,
            transparent 72deg,
            rgba(244, 208, 63, 0.25) 80deg,
            transparent 88deg,
            transparent 108deg,
            rgba(244, 208, 63, 0.2) 116deg,
            transparent 124deg,
            transparent 144deg,
            rgba(244, 208, 63, 0.25) 152deg,
            transparent 160deg,
            transparent 180deg,
            rgba(244, 208, 63, 0.2) 188deg,
            transparent 196deg,
            transparent 216deg,
            rgba(244, 208, 63, 0.25) 224deg,
            transparent 232deg,
            transparent 252deg,
            rgba(244, 208, 63, 0.2) 260deg,
            transparent 268deg,
            transparent 288deg,
            rgba(244, 208, 63, 0.25) 296deg,
            transparent 304deg,
            transparent 324deg,
            rgba(244, 208, 63, 0.2) 332deg,
            transparent 340deg,
            transparent 360deg);
    border-radius: 50%;
    mask-image: radial-gradient(circle, transparent 20%, black 25%, black 70%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle, transparent 20%, black 25%, black 70%, transparent 80%);
    animation: sunRotate 45s linear infinite reverse;
    filter: blur(3px);
}

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

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

/* Golden Sun Core */
.sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 35% 35%,
            #FFF8DC 0%,
            #F4D03F 20%,
            #C9A227 50%,
            #A68523 80%,
            #8B6914 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(244, 208, 63, 1),
        0 0 40px rgba(201, 162, 39, 0.9),
        0 0 80px rgba(201, 162, 39, 0.7),
        0 0 120px rgba(201, 162, 39, 0.5),
        0 0 180px rgba(201, 162, 39, 0.3);
    animation: sunCorePulse 4s ease-in-out infinite;
}

@keyframes sunCorePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 20px rgba(244, 208, 63, 1),
            0 0 40px rgba(201, 162, 39, 0.9),
            0 0 80px rgba(201, 162, 39, 0.7),
            0 0 120px rgba(201, 162, 39, 0.5),
            0 0 180px rgba(201, 162, 39, 0.3);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 25px rgba(244, 208, 63, 1),
            0 0 50px rgba(201, 162, 39, 1),
            0 0 100px rgba(201, 162, 39, 0.8),
            0 0 150px rgba(201, 162, 39, 0.6),
            0 0 220px rgba(201, 162, 39, 0.4);
    }
}

/* Outer Glow Halo */
.sun-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle,
            rgba(244, 208, 63, 0.15) 0%,
            rgba(201, 162, 39, 0.1) 30%,
            rgba(201, 162, 39, 0.05) 50%,
            transparent 70%);
    border-radius: 50%;
    animation: sunGlowPulse 6s ease-in-out infinite;
}

@keyframes sunGlowPulse {

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

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

/* Light beams illuminating the page */
.sun-container::before {
    content: '';
    position: absolute;
    top: 100px;
    left: 100px;
    width: 600px;
    height: 900px;
    background: linear-gradient(155deg,
            rgba(201, 162, 39, 0.1) 0%,
            rgba(201, 162, 39, 0.05) 20%,
            rgba(201, 162, 39, 0.02) 40%,
            transparent 60%);
    transform-origin: top left;
    pointer-events: none;
}

.sun-container::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 600px;
    background: linear-gradient(130deg,
            rgba(244, 208, 63, 0.08) 0%,
            rgba(201, 162, 39, 0.03) 30%,
            transparent 50%);
    transform-origin: top left;
    pointer-events: none;
}

@media (max-width: 768px) {
    .sun-container {
        top: 6%;
        right: 3%;
    }

    .sun {
        width: 120px;
        height: 120px;
    }

    .sun-core {
        width: 45px;
        height: 45px;
    }

    .sun-rays {
        width: 120px;
        height: 120px;
    }

    .sun-glow {
        width: 180px;
        height: 180px;
    }

    .sun-container::before,
    .sun-container::after {
        display: none;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

/* Terminal-style Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(10, 14, 23, 0.8);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--gold-primary);
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.hero-badge::before {
    content: '>';
    color: var(--cyber-green);
    animation: cursor 1s step-end infinite;
}

@keyframes cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hero h1 {
    margin-bottom: 28px;
    line-height: 1.05;
}

.hero h1 span {
    display: block;
}

.hero p {
    font-size: 1.35rem;
    margin-bottom: 48px;
    max-width: 600px;
    color: var(--text-secondary);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons - Tech Style
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gold-gradient);
    color: var(--navy-deep);
    box-shadow: var(--shadow-gold);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 50px rgba(201, 162, 39, 0.5);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
    background: rgba(201, 162, 39, 0.1);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bento Grid Section - Modern Layout
   ───────────────────────────────────────────────────────────────────────────── */
.products {
    position: relative;
}

.products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, var(--gold-primary), transparent);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px;
}

.section-header h2 {
    margin-bottom: 20px;
}

.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--gold-primary);
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
}

.bento-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(var(--glass-blur));
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-smooth);
}

.bento-item:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 162, 39, 0.4);
    box-shadow: var(--shadow-deep);
}

.bento-item:hover::before {
    transform: scaleX(1);
}

/* Main Featured Card - StudyLock */
.bento-featured {
    grid-column: span 2;
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 48px;
}

.bento-featured-content {
    flex: 1;
}

.bento-featured-visual {
    flex: 0 0 200px;
}

/* App Icon Style */
.app-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #4A90FF 0%, #357ABD 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: 0 20px 40px rgba(74, 144, 255, 0.3);
    margin-bottom: 28px;
}

.bento-item h3 {
    font-size: 1.75rem;
    margin-bottom: 16px;
}

.bento-item p {
    font-size: 1rem;
    margin-bottom: 24px;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.tag {
    padding: 8px 16px;
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold-primary);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-mono);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-primary);
    font-weight: 600;
    font-size: 1rem;
}

.product-link:hover {
    gap: 16px;
}

/* Stats Card */
.bento-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.stat-big {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 800;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Code Preview Card */
.bento-code {
    background: #0D1117;
    border-color: rgba(201, 162, 39, 0.1);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 28px;
    position: relative;
}

.code-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-dot.red {
    background: #FF5F56;
}

.code-dot.yellow {
    background: #FFBD2E;
}

.code-dot.green {
    background: #27CA40;
}

.code-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

.code-content .comment {
    color: #6A737D;
}

.code-content .keyword {
    color: #FF7B72;
}

.code-content .string {
    color: #A5D6FF;
}

.code-content .function {
    color: #D2A8FF;
}

.code-content .variable {
    color: var(--gold-primary);
}

/* Coming Soon Card */
.bento-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%);
}

.coming-soon-icon {
    width: 80px;
    height: 80px;
    background: rgba(201, 162, 39, 0.1);
    border: 2px dashed var(--gold-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   About Section - Split Design
   ───────────────────────────────────────────────────────────────────────────── */
.about {
    position: relative;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.about-content h2 {
    margin-bottom: 28px;
}

.about-content p {
    margin-bottom: 24px;
}

.about-highlight {
    padding: 24px 32px;
    background: rgba(201, 162, 39, 0.08);
    border-left: 3px solid var(--gold-primary);
    border-radius: 0 12px 12px 0;
    margin: 32px 0;
}

.about-highlight p {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-style: italic;
    margin: 0;
}

.about-stats {
    display: flex;
    gap: 48px;
    margin-top: 48px;
}

.stat {
    text-align: left;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--gold-primary);
    line-height: 1;
}

.stat-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* About Visual - Owl Card */
.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.wisdom-card {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wisdom-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: var(--gold-gradient);
    border-radius: 42px;
    z-index: -1;
    opacity: 0.6;
}

.wisdom-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(201, 162, 39, 0.05) 100%);
    pointer-events: none;
}

.owl-symbol {
    font-size: 8rem;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 30px rgba(201, 162, 39, 0.3));
}

.wisdom-card h3 {
    font-family: 'Times New Roman', serif;
    font-size: 3rem;
    color: var(--gold-primary);
    font-style: italic;
    letter-spacing: 0.1em;
}

.wisdom-card p {
    color: var(--text-muted);
    font-style: italic;
    font-size: 1rem;
    margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Contact Section
   ───────────────────────────────────────────────────────────────────────────── */
.contact {
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
    text-align: center;
}

.contact-content {
    max-width: 600px;
    margin: 0 auto;
}

.contact h2 {
    margin-bottom: 20px;
}

.contact p {
    margin-bottom: 48px;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 24px 48px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--gold-primary);
    transition: var(--transition-smooth);
}

.contact-email:hover {
    border-color: var(--gold-primary);
    transform: translateY(-4px);
    box-shadow: var(--glow-gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer - Minimal
   ───────────────────────────────────────────────────────────────────────────── */
.footer {
    background: var(--navy-deep);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(201, 162, 39, 0.1);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 320px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.footer-links {
    display: flex;
    gap: 80px;
}

.footer-column h4 {
    color: var(--gold-primary);
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 14px;
}

.footer-column a {
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.footer-column a:hover {
    color: var(--gold-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer-legal {
    display: flex;
    gap: 32px;
}

.footer-legal a {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer-legal a:hover {
    color: var(--gold-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Design
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --section-padding: 100px;
    }

    .bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bento-featured {
        grid-column: span 2;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .about-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: var(--navy-mid);
        flex-direction: column;
        justify-content: center;
        gap: 36px;
        transition: var(--transition-smooth);
        border-left: 1px solid var(--glass-border);
        padding: 40px;
    }

    .nav-links.active {
        right: 0;
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-featured {
        grid-column: span 1;
        flex-direction: column;
        text-align: center;
    }

    .about-stats {
        flex-direction: column;
        gap: 32px;
    }

    .wisdom-card {
        max-width: 300px;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-links {
        flex-direction: column;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────────────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.page-transition {
    animation: pageIn 0.6s ease;
}

@keyframes pageIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Legal Pages
   ───────────────────────────────────────────────────────────────────────────── */
.legal-page {
    padding-top: 140px;
    min-height: 100vh;
}

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

.legal-content h1 {
    margin-bottom: 16px;
    color: var(--gold-primary);
}

.legal-content h2 {
    font-size: 1.5rem;
    margin: 48px 0 20px;
    color: var(--text-primary);
}

.legal-content h3 {
    font-size: 1.2rem;
    margin: 32px 0 16px;
    color: var(--text-primary);
}

.legal-content p,
.legal-content li {
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.8;
}

.legal-content ul,
.legal-content ol {
    padding-left: 28px;
    margin-bottom: 28px;
}

.legal-content a {
    color: var(--gold-primary);
}

.legal-content a:hover {
    text-decoration: underline;
}

.last-updated {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 48px;
    font-family: var(--font-mono);
}

/* ─────────────────────────────────────────────────────────────────────────────
   App Detail Page Styles
   ───────────────────────────────────────────────────────────────────────────── */
.app-hero {
    min-height: 85vh;
    padding-top: 140px;
}

.app-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.app-info h1 {
    margin-bottom: 16px;
}

.app-tagline {
    font-size: 1.35rem;
    color: var(--gold-primary);
    margin-bottom: 28px;
    font-weight: 500;
}

.app-description {
    font-size: 1.15rem;
    margin-bottom: 40px;
}

.store-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    transition: var(--transition-smooth);
}

.store-btn:hover {
    border-color: var(--gold-primary);
    transform: translateY(-3px);
    box-shadow: var(--glow-gold);
}

.store-btn svg {
    width: 32px;
    height: 32px;
    fill: var(--gold-primary);
}

.store-btn-text {
    text-align: left;
}

.store-btn-text small {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.store-btn-text strong {
    display: block;
    font-size: 1.1rem;
}

/* Phone Mockup */
.app-mockup {
    display: flex;
    justify-content: center;
    position: relative;
}

.phone-frame {
    width: 280px;
    height: 580px;
    background: linear-gradient(145deg, #1E1E2E 0%, #0D0D15 100%);
    border-radius: 44px;
    padding: 14px;
    box-shadow:
        0 60px 120px -30px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    position: relative;
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 28px;
    background: #000;
    border-radius: 20px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0A0F1A 0%, #151C2C 100%);
    border-radius: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 24px 50px;
    text-align: center;
}

.phone-screen .app-icon-large {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, #4A90FF 0%, #2D6ED8 100%);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    margin-bottom: 24px;
    box-shadow: 0 16px 40px rgba(74, 144, 255, 0.35);
}

.phone-screen h3 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.phone-screen p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.phone-time {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    color: #4A90FF;
    margin-top: 36px;
    letter-spacing: -0.02em;
}

.phone-status {
    font-size: 0.9rem;
    color: #10B981;
    margin-top: 14px;
    font-weight: 500;
}

/* Features Grid */
.features {
    background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 36px;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 162, 39, 0.3);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 24px;
}

.feature-card h3 {
    margin-bottom: 14px;
    font-size: 1.3rem;
}

.feature-card p {
    font-size: 1rem;
}

/* How It Works */
.how-it-works {
    position: relative;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 700px;
    margin: 0 auto;
}

.step {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.step-number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--gold-gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy-deep);
    box-shadow: var(--glow-gold);
}

.step-content h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.step-content p {
    font-size: 1.05rem;
}

/* App CTA */
.app-cta {
    background: var(--navy-deep);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.app-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(ellipse, rgba(201, 162, 39, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.app-cta .container {
    position: relative;
    z-index: 1;
}

.app-cta h2 {
    margin-bottom: 20px;
}

.app-cta p {
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .app-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .app-mockup {
        order: -1;
    }

    .phone-frame {
        width: 250px;
        height: 520px;
    }

    .store-buttons {
        justify-content: center;
    }
}