/* =========================================================
   SONARA – VIBEZ Aura Design System (Logo Inspired Theme)
   ========================================================= */

:root {
    /* NEW PREMIUM FONTS */
    --font-head: 'Outfit', sans-serif;
    --font-body: 'Manrope', sans-serif;
    
    /* DEFAULT DARK MODE */
    --bg-base: #000000;
    
    /* Logo-Inspired Crimson & Indigo Palette */
    --primary-main: #dc143c; /* Crimson Red */
    --primary-dark: #4b0082; /* Deep Indigo/Purple */
    --primary-glow: #ff2a55; /* Brightened for glows */
    --on-primary: #ffffff;
    
    --text-primary: #f8f8f8;
    --text-secondary: #b0b0b8;
    --text-tertiary: #757580;
    
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-glow: rgba(220, 20, 60, 0.3);
    
    --wrap: 1200px;
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --radius-card: 16px;
    --radius-pill: 9999px;
}

/* ===========================
   LIGHT MODE VARIABLES
   =========================== */
[data-theme="light"] {
    --bg-base: #f5f5f7;
    
    --text-primary: #1d1d1f;
    --text-secondary: #515154;
    --text-tertiary: #86868b;
    
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.08);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

body{
    font-family:var(--font-body);
    background:var(--bg-base);
    color:var(--text-primary);
    line-height:1.6;
    overflow-x:hidden;
    transition: background 0.4s ease, color 0.4s ease;
}
body.locked{overflow:hidden}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4,h5{
    font-family:var(--font-head);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.01em;
}

/* ===========================
   GLOBAL BACKGROUND
   =========================== */
.global-bg-image {
    position:fixed;inset:0;
    background:url('Assets/hero_image_gemini.png') center/cover no-repeat;
    opacity:0.25;
    z-index:-3;
    transition: opacity 0.4s ease;
}
[data-theme="light"] .global-bg-image {
    opacity: 0.1;
}

.global-bg-blur {
    position:fixed;inset:0;
    backdrop-filter:blur(60px);
    -webkit-backdrop-filter:blur(60px);
    background:radial-gradient(circle at 50% 0%, transparent 0%, var(--bg-base) 100%);
    z-index:-2;
}

/* Animated Music Notes Background */
.animated-bg {
    position:fixed;inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}
.note-particle {
    position:absolute;
    bottom:-100px;
    color:var(--primary-main);
    opacity:0;
    font-size:24px;
    filter:blur(1px);
    animation:floatUp var(--duration) linear infinite;
    animation-delay:var(--delay);
    left:var(--left);
}
@keyframes floatUp {
    0% { transform:translateY(0) rotate(0deg); opacity:0; }
    10% { opacity:0.15; }
    90% { opacity:0.15; }
    100% { transform:translateY(-110vh) rotate(360deg); opacity:0; }
}

[data-theme="light"] .note-particle {
    color: var(--primary-dark);
}

.hero, .features, .showcase, .cta, .footer {
    background: transparent;
}

/* ===========================
   SPLASH
   =========================== */
.splash{
    position:fixed;inset:0;z-index:9999;
    background:var(--bg-base);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease,visibility .6s ease;
}
.splash.done{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.splash-logo-wrap{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.splash-logo{
    width:64px;height:64px;
    opacity:0;transform:scale(.4);
    animation:logoIn .8s var(--ease) .2s forwards;
}
.splash-ring{
    position:absolute;inset:0;width:100%;height:100%;
    opacity:0;animation:ringDraw 1.2s ease .4s forwards;
}
.splash-ring circle{
    fill:none;stroke:var(--primary-main);stroke-width:2;
    stroke-dasharray:352;stroke-dashoffset:352;
    animation:ringStroke 1.2s ease .5s forwards;
}
.splash-brand{
    font-family:var(--font-head);font-size:2rem;font-weight:900;
    text-transform:uppercase;color:var(--primary-main);
    letter-spacing: 0px;
    filter: blur(10px);
    opacity:0;transform:translateY(16px) scale(0.95);
    animation:cinematicTextReveal 1.2s var(--ease-out) 0.5s forwards;
    padding-left: 12px; /* Offset the final letter-spacing to keep centered */
}

@keyframes logoIn{to{opacity:1;transform:scale(1)}}
@keyframes ringDraw{to{opacity:1}}
@keyframes ringStroke{to{stroke-dashoffset:0}}
@keyframes cinematicTextReveal{
    0% { opacity:0; transform:translateY(16px) scale(0.95); filter:blur(10px); letter-spacing: 0px; }
    100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); letter-spacing: 12px; }
}

/* ===========================
   LIGHTBOX
   =========================== */
.lightbox {
    position:fixed;inset:0;z-index:10000;
    background:rgba(0,0,0,0.9);
    backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    transition:opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.open { opacity:1;visibility:visible; }
.lightbox-img {
    max-width:90%;max-height:90vh;
    border-radius:24px;
    box-shadow:0 40px 100px rgba(0,0,0,1);
    transform:scale(0.9);
    transition:transform 0.4s var(--ease-out);
}
.lightbox.open .lightbox-img { transform:scale(1); }
.lightbox-close {
    position:absolute;top:20px;right:20px;
    color:#fff;font-size:48px;font-weight:300;
    cursor:pointer;
    transition:color 0.2s, transform 0.2s;
    z-index: 10001;
    padding: 10px;
    line-height: 1;
}
.lightbox-close:hover { color:var(--primary-main);transform:scale(1.1); }
.zoomable-img { cursor:zoom-in; }

/* ===========================
   COMPONENTS
   =========================== */
.btn-primary {
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 32px;
    border-radius:var(--radius-pill);
    background:linear-gradient(135deg, var(--primary-main), var(--primary-dark));
    color:var(--on-primary);
    font-family:var(--font-body);
    font-size:16px;
    font-weight:700;
    letter-spacing:0.02em;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn-primary:hover {
    transform:scale(0.97);
    box-shadow:0 0 24px rgba(220, 20, 60, 0.4);
}
.btn-sm { padding:10px 24px; font-size:14px; }
.btn-lg { padding:16px 40px; font-size:18px; }

.chip {
    display:inline-block;
    padding:6px 16px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-primary);
    backdrop-filter:blur(10px);
}
[data-theme="light"] .chip {
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
}

.glass-card {
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-card);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    overflow:hidden;
    position:relative;
    transition:border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s ease;
}
.glass-card:hover {
    border-color:var(--glass-border-glow);
    transform:translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
[data-theme="light"] .glass-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ===========================
   NAV (REDESIGNED HEADER)
   =========================== */
.nav {
    position:fixed;top:0;width:100%;z-index:1000;
    padding:20px 0;
    transition:all 0.4s var(--ease);
}
/* Floating pill navigation on scroll */
.nav.solid {
    padding: 0;
    background: transparent;
    border-bottom: none;
    top: 20px;
    pointer-events: none; /* Let clicks pass through empty space */
}
.nav.solid .nav-row {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 12px 32px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    pointer-events: auto; /* Re-enable clicks for the menu bar */
}
[data-theme="light"] .nav.solid .nav-row {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.nav-row { 
    display:flex;justify-content:space-between;align-items:center;
    transition: all 0.4s var(--ease);
}
.nav-brand { display:flex;align-items:center;gap:12px;z-index:10; }
.nav-brand img { height:28px; }
.nav-brand span { font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:2px; }

.nav-menu { display:flex;align-items:center;gap:30px; }
.nav-menu a:not(.btn-primary) {
    font-size:14px;font-weight:600; /* Bolder font for new style */
    color:var(--text-secondary);
    letter-spacing:0.05em;
    transition:color 0.3s;
}
.nav-menu a:not(.btn-primary):hover { color:var(--primary-main); }

.burger{display:none;flex-direction:column;gap:5px;z-index:10;cursor:pointer;}
.burger span{width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:all 0.3s ease;}

/* Hamburger to X animation */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   FLOATING WIDGETS
   =========================== */
.floating-widgets {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}
.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
}
.floating-btn:hover {
    transform: scale(1.1);
    background: var(--primary-main);
    color: #fff;
    border-color: var(--primary-main);
}
[data-theme="light"] .floating-btn {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
[data-theme="light"] .floating-btn:hover {
    background: var(--primary-main);
    color: #fff;
}
.floating-btn.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
.floating-btn svg {
    width: 20px;
    height: 20px;
}

/* ===========================
   HERO
   =========================== */
.hero {
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    padding-top:80px;
    overflow:hidden;
}

.hero-inner {
    position:relative;z-index:2;
    display:flex;align-items:center;
    gap:60px;
    width:100%;
}
.hero-text { flex:1;display:flex;flex-direction:column;gap:24px;align-items:flex-start; }

.hero-h1 {
    font-size:84px; 
    font-weight:900;
    letter-spacing:-0.04em;
    line-height:1;
    background:linear-gradient(to bottom right, #ffffff, #b0b0b8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
[data-theme="light"] .hero-h1 {
    background:linear-gradient(to bottom right, #1d1d1f, #86868b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-desc {
    font-size:20px; 
    color:var(--text-secondary);
    max-width:520px;
    line-height:1.6;
}
.hero-actions { margin-top:16px; }

.hero-visual { flex:1;display:flex;justify-content:center;position:relative; }
.hero-glow {
    position:absolute;
    width:300px;height:400px;
    background:var(--primary-main);
    filter:blur(100px);
    opacity:0.2;
    border-radius:50%;
    z-index:0;
}
.hero-device {
    position:relative;z-index:1;
    width:360px; /* Bigger device */
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-10deg) rotateX(4deg) scale(1.05);
    transition: transform 0.6s var(--ease-out);
}
.hero-device:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.1);
}

.anim-item { opacity:0;transform:translateY(30px);animation:fadeUp 1s var(--ease-out) forwards; }
.anim-item:nth-child(1) { animation-delay:0.1s; }
.anim-item:nth-child(2) { animation-delay:0.2s; }
.anim-item:nth-child(3) { animation-delay:0.3s; }
.anim-item:nth-child(4) { animation-delay:0.4s; }
@keyframes fadeUp { to { opacity:1;transform:none; } }

/* ===========================
   FEATURES (FLOATING MOCKUPS)
   =========================== */
.features { padding:120px 0; }
.section-head { text-align:center;margin-bottom:60px; }
.section-head h2 { font-size:40px;margin-bottom:12px; }
.section-head p { font-size:18px;color:var(--text-secondary); }

.feat-grid {
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:24px;
}
.glass-card {
    grid-column:span 6;
    display:flex;flex-direction:column;
    padding:40px;
}
.card-large {
    grid-column:span 12;
    flex-direction:row;
    align-items:center;
    padding:0; 
}
.card-reverse { flex-direction:row-reverse; }

.card-content {
    flex:1;
    padding:40px;
    display:flex;flex-direction:column;gap:16px;
}
.card-content h3 { font-size:32px; }
.card-content p { font-size:16px;color:var(--text-secondary);line-height:1.6; }
.card-content strong { color:var(--primary-main); font-weight:700; }

.feature-list {
    list-style:none;margin-top:10px;
    display:flex;flex-direction:column;gap:8px;
}
.feature-list li {
    font-size:14px;color:var(--text-secondary);
    display:flex;align-items:center;gap:8px;
}
.feature-list li::before {
    content:'✓'; color:var(--primary-main); font-weight:bold;
}

.chip-group { display:flex;gap:12px;margin-top:16px;flex-wrap:wrap; }

.card-visual {
    flex:1;
    display:flex;justify-content:flex-end;
    align-items:flex-end;
    padding:40px 40px 0 0;
}
.card-reverse .card-visual {
    justify-content:flex-start;
    padding:40px 0 0 40px;
}
.visual-sm { padding:0 40px; justify-content:center; align-items:center; margin-top:20px; }

/* NEW DISPLAY STYLE FOR MOCKUPS (BORDERLESS & FLOATING) */
.floating-mockup {
    width: 280px; /* Made larger */
    border: none !important;
    box-shadow: none !important;
    border-radius: 20px !important; /* Soft corners for floating objects */
    transform: translateY(20px) rotate(2deg);
    transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
}
[data-theme="light"] .floating-mockup {
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.15));
}
.glass-card:hover .floating-mockup {
    transform: translateY(0px) rotate(0deg) scale(1.05);
}

.lottie-container {
    padding: 0 40px 20px;
    justify-content: center;
    align-items: center;
}

/* ===========================
   SHOWCASE
   =========================== */
.showcase { padding:80px 0 120px; overflow:hidden; }
.showcase-strip {
    display:flex;gap:40px;
    overflow-x:auto;padding:40px 0 60px;
    -ms-overflow-style:none;scrollbar-width:none;
}
.showcase-strip::-webkit-scrollbar { display:none; }
.showcase-item { flex-shrink:0; }
.showcase-item img {
    width: 280px;
}
.showcase-item img:hover { transform:scale(1.08) translateY(-10px); }

/* ===========================
   CTA
   =========================== */
.cta { padding:0 0 120px; }
.cta-box {
    padding:80px 40px;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:24px;
}
.cta-glow {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:400px;height:400px;
    background:var(--primary-main);
    filter:blur(150px);opacity:0.1;
    z-index:0;
}
.cta-box h2,.cta-box p,.cta-box a { position:relative;z-index:1; }
.cta-box h2 { font-size:48px; }
.cta-box p { font-size:18px;color:var(--text-secondary);max-width:500px; }

/* ===========================
   FOOTER
   =========================== */
.footer { border-top:1px solid var(--glass-border);padding:80px 0 40px; }
.footer-inner { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:60px; }
.footer-left { max-width:300px; }
.footer-brand { display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:1px;margin-bottom:16px; }
.footer-brand img { height:32px; }
.footer-tagline { color:var(--text-secondary); font-size:14px; line-height:1.6; }

.footer-grid { display:flex;gap:80px; }
.footer-col { display:flex;flex-direction:column;gap:16px; }
.footer-col h5 { font-size:12px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.1em; }
.footer-col a { font-size:14px; color:var(--text-secondary); transition:color 0.3s; }
.footer-col a:hover { color:var(--text-primary); }

.footer-copy { padding-top:32px;border-top:1px solid rgba(255,255,255,0.05); }
[data-theme="light"] .footer-copy { border-top:1px solid rgba(0,0,0,0.05); }
.footer-copy p { font-size:12px;color:var(--text-tertiary);letter-spacing:0.05em; }

/* ===========================
   SCROLL REVEAL ANIMATIONS
   =========================== */
.reveal-el { 
    opacity:0;
    transform:translateY(60px); 
    transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); 
}
.reveal-el.scale-up {
    transform:translateY(60px) scale(0.95);
}
.reveal-el.vis { 
    opacity:1;
    transform:translateY(0) scale(1); 
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:1024px) {
    .glass-card { grid-column:span 12; }
    .card-large { flex-direction:column; }
    .card-reverse { flex-direction:column; }
    .card-visual, .card-reverse .card-visual { padding:0 40px; justify-content:center; }
    .floating-mockup { width: 80%; max-width: 320px; }
    .hero-h1 { font-size:64px; }
    .hero-device { transform: none; width:300px; }
    .hero-device:hover { transform: scale(1.05); }
    .footer-inner { flex-direction:column; gap:48px; }
    .footer-grid { gap:40px; flex-wrap:wrap; }
    .nav.solid { width: 95%; }
}

@media(max-width:768px) {
    .nav-menu {
        position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--bg-base);
        flex-direction:column;justify-content:center;gap:40px;
        opacity:0;visibility:hidden;transition:all 0.4s var(--ease);
        z-index: 9;
    }
    .nav-menu.open { opacity:1;visibility:visible; }
    .nav-menu a:not(.btn-primary) { font-size:24px; }
    .burger { display:flex; position: relative; z-index: 10; }
    .nav.solid { top: 0; width: 100%; border-radius: 0; }
    .nav.solid .nav-row { border-radius: 0; border-left: none; border-right: none; border-top: none; }

    .hero-inner { flex-direction:column;text-align:center;padding:40px 0; gap:40px;}
    .hero-text { align-items:center; }
    .hero-h1 { font-size:48px; }
    .hero-device { width:220px; }
    
    .card-content { padding:32px 24px; }
    .card-content h3 { font-size:28px; }
    .section-head h2 { font-size:32px; }
    
    .footer-left { text-align:center; align-items:center; display:flex; flex-direction:column; }
    .footer-grid { flex-direction:column; text-align:center; gap:32px; width:100%; }
    
    .floating-widgets { bottom: 20px; right: 20px; }
}