/* ============================================================================
   AETHER OS — Elite Portal Homepage Theme
   Style: Black Cursor / Premium Dark UI
   Purpose: Stili specifici per la homepage, non interferiscono con i moduli
   ============================================================================ */

/* ===== HOMEPAGE-SPECIFIC TOKENS ============================================= */
.homepage-theme {
    /* Design System Colors (HSL format from Lovable design) */
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;

    --card: 223 47% 14%;
    --card-foreground: 210 40% 98%;

    --primary: 263 70% 60%;
    --primary-foreground: 210 40% 98%;

    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;

    --accent: 186 100% 50%;
    --accent-foreground: 222 47% 11%;

    --border: 217 33% 20%;
    --ring: 263 70% 60%;
    --radius: 0.75rem;

    /* Custom design tokens */
    --gradient-primary: linear-gradient(135deg, hsl(263 70% 60%), hsl(186 100% 50%));
    --glow-primary: 0 0 40px hsl(263 70% 60% / 0.4);
    
    /* Legacy compatibility aliases */
    --text: hsl(var(--foreground));
    --text-muted: hsl(var(--muted-foreground));
}

/* ===== HOMEPAGE BODY ======================================================== */
body.homepage-theme {
    /* Ensure homepage is always in dark mode regardless of data-theme attribute */
    background-color: hsl(222 47% 11%) !important;
    color: hsl(210 40% 98%) !important;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Radial glows background */
body.homepage-theme::before{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:-2;
    background:
     radial-gradient(900px 500px at 15% 8%, hsl(263 70% 60% / 0.10), transparent 60%),
     radial-gradient(1000px 600px at 85% 92%, hsl(186 100% 50% / 0.14), transparent 62%);
}

/* Dynamic background canvas (optional) */
.homepage-theme .bg-canvas{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    filter: contrast(110%) saturate(110%); opacity:.15;
}

/* Typography helpers */
.homepage-theme h1,
.homepage-theme h2,
.homepage-theme h3,
.homepage-theme h4,
.homepage-theme h5,
.homepage-theme h6{ 
    font-weight:700; line-height:1.2; margin-bottom:1rem; 
}

/* Gradient Text Utility (from target design) */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Effect Utility */
.glow-primary {
    box-shadow: var(--glow-primary);
}

.homepage-theme .text-accent{ color:hsl(var(--accent))!important; }
.homepage-theme .text-muted{ color:hsl(var(--muted-foreground))!important; }
.homepage-theme .text-light-50{ color: rgba(255,255,255,.6)!important; }
.homepage-theme .text-light-75{ color: rgba(255,255,255,.8)!important; }
.homepage-theme .accent-gradient-text{
    background: linear-gradient(90deg, #fff 0%, hsl(var(--accent)) 60%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.homepage-theme .text-shadow{ text-shadow:0 2px 10px rgba(0,0,0,.3); }
.homepage-theme .shadow-soft{ box-shadow:0 8px 22px hsl(186 100% 50% / 0.18); }

/* Links */
.homepage-theme a{ color:hsl(var(--accent)); text-decoration:none; }
.homepage-theme a:hover{ color:hsl(var(--accent)); opacity:0.8; }

/* ===== HOMEPAGE NAVBAR ====================================================== */
.homepage-theme .navbar{
    background: hsl(var(--background) / 0.68);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom:1px solid hsl(var(--border));
    padding:.75rem 0;
}
.homepage-theme .navbar-brand{ font-size:1.5rem; letter-spacing:-.02em; }
.homepage-theme .nav-link{ color:hsl(var(--muted-foreground)); font-weight:500; transition:color .2s; }
.homepage-theme .nav-link:hover,
.homepage-theme .nav-link.active{ color:hsl(var(--foreground)); }

/* ===== HOMEPAGE BUTTONS ===================================================== */
.homepage-theme .btn{
    border-radius:var(--radius); font-weight:600; padding:.75rem 1.5rem; transition:all .2s ease-in-out;
}
.homepage-theme .btn-sm{ padding:.5rem 1rem; font-size:.875rem; }
.homepage-theme .btn-lg{ padding:1rem 2.25rem; font-size:1.125rem; }

.homepage-theme .btn-accent,
.homepage-theme .btn-primary{
    background: var(--gradient-primary)!important;
    color:hsl(var(--accent-foreground))!important; border:0; border-radius:999px!important;
    box-shadow:var(--glow-primary);
    transition:transform .12s ease, box-shadow .2s ease;
}
.homepage-theme .btn-accent:hover,
.homepage-theme .btn-primary:hover{ 
    transform:translateY(-2px); 
    box-shadow:0 12px 32px hsl(263 70% 60% / 0.35); 
}

.homepage-theme .btn-outline-accent{
    color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); background:transparent; border-radius:999px;
}
.homepage-theme .btn-outline-accent:hover{
    color:hsl(var(--accent)); border-color:hsl(var(--accent)); background:hsl(var(--accent) / 0.08);
    box-shadow:0 0 0 4px hsl(var(--accent) / 0.08);
}

/* ===== HERO SECTION ========================================================= */
.homepage-theme .hero-section{
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:10rem 0 6rem; overflow:hidden;
    background:
     radial-gradient(800px 400px at 15% 10%, hsl(263 70% 60% / 0.14), transparent 60%),
     radial-gradient(900px 500px at 85% 90%, hsl(186 100% 50% / 0.18), transparent 65%);
}
.homepage-theme .hero-section h1{ font-weight:800; letter-spacing:-.02em; }
.homepage-theme .hero-section .subheadline{ 
    font-size:1.25rem; max-width:640px; color:hsl(var(--foreground)); opacity:0.9;
}

/* Metric pills */
.homepage-theme .micro-metrics{ 
    display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin:1.5rem 0 2rem; padding:0; list-style:none; 
}
.homepage-theme .micro-metrics li{
    font-family:ui-monospace, SFMono-Regular, Menlo, "Fira Code", monospace;
    font-size:.875rem; color:hsl(var(--muted-foreground));
    border:1px solid hsl(var(--border)); border-radius:999px; padding:.5rem .9rem;
    background:hsl(var(--card) / 0.55);
}

/* One-story pitch card */
.homepage-theme .glass-card{
    background:hsl(var(--card) / 0.55);
    border:1px solid hsl(var(--border));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius:var(--radius);
    padding:1.25rem 1.5rem; color:hsl(var(--foreground)); opacity:0.9;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Device frame */
.homepage-theme .device-frame{
    position:relative; padding:14px; border-radius:22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) border-box,
      linear-gradient(135deg, hsl(263 70% 60% / 0.4), hsl(186 100% 50% / 0.35)) padding-box;
    border:1px solid transparent;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
    display:flex; align-items:center; justify-content:center;
}
.homepage-theme .device-frame img,
.homepage-theme .device-frame video{
    width:100%; height:auto; display:block;
    border-radius:14px; border:1px solid rgba(255,255,255,.06);
}
.homepage-theme .device-frame .live-badge{
    position:absolute; top:10px; right:16px; font-size:.75rem;
    padding:.25rem .6rem; border-radius:999px;
    background: hsl(var(--accent) / 0.16); color:#C7F5FF; border:1px solid hsl(var(--accent) / 0.4);
}

.homepage-theme .hero-cred{ color:hsl(var(--muted-foreground)); opacity:.9; }

/* ===== FEATURE CARDS ======================================================== */
.homepage-theme .feature-card{
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary)));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border:1px solid hsl(var(--border));
    border-radius:var(--radius);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height:100%;
}
.homepage-theme .feature-card:hover{ 
    transform:translateY(-6px); 
    box-shadow:0 14px 38px rgba(0,0,0,.32); 
    border-color:hsl(var(--accent)); 
}

.homepage-theme .feature-icon{
    width:48px; height:48px; display:grid; place-items:center; border-radius:12px;
    background: linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--accent) / 0.18));
    border:1px solid hsl(var(--primary) / 0.35);
    box-shadow: inset 0 0 20px hsl(var(--primary) / 0.18),
                0 10px 26px hsl(var(--accent) / 0.18);
    color:hsl(var(--foreground)); font-size:1.2rem;
}
.homepage-theme .feature-card h4{ margin:.75rem 0 .35rem; font-weight:700; color:hsl(var(--foreground)); }
.homepage-theme .feature-card p{ margin:0; color:hsl(var(--muted-foreground)); }

/* ===== PRICING CARDS ======================================================== */
.homepage-theme .pricing-card{
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 2.5rem;
    border:1px solid hsl(var(--border));
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position:relative; height:100%; display:flex; flex-direction:column;
}
.homepage-theme .pricing-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 12px 40px hsl(var(--accent) / 0.25);
    border-color: hsl(var(--accent) / 0.4);
}
.homepage-theme .pricing-card.featured{
    border:2px solid hsl(var(--accent));
    box-shadow: 0 12px 40px hsl(var(--accent) / 0.25);
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--accent) / 0.05) 100%);
}
.homepage-theme .pricing-badge{
    position:absolute; top:-12px; right:20px;
    background: var(--gradient-primary); color:hsl(var(--accent-foreground));
    padding:.375rem 1rem; border-radius:50px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.homepage-theme .pricing-header{ text-align:center; margin-bottom:2rem; }
.homepage-theme .pricing-title{ font-size:1.75rem; font-weight:700; margin-bottom:.5rem; color:hsl(var(--foreground)); }
.homepage-theme .pricing-subtitle{ color:hsl(var(--muted-foreground)); font-size:.95rem; }
.homepage-theme .pricing-price{ text-align:center; margin-bottom:2rem; }
.homepage-theme .pricing-amount{ font-size:3rem; font-weight:800; color:hsl(var(--foreground)); }
.homepage-theme .pricing-period{ color:hsl(var(--muted-foreground)); font-size:1rem; }
.homepage-theme .pricing-features{ list-style:none; padding:0; margin-bottom:2rem; flex-grow:1; }
.homepage-theme .pricing-features li{ margin-bottom:.75rem; color:hsl(var(--muted-foreground)); }
.homepage-theme .pricing-features li i{ color:hsl(var(--accent)); margin-right:.75rem; }
.homepage-theme .pricing-features li.feature-disabled{ color:hsl(var(--muted-foreground)); opacity:0.5; text-decoration:line-through; }
.homepage-theme .pricing-features li.feature-disabled i{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.homepage-theme .pricing-cta{ margin-top:auto; }
.homepage-theme .pricing-cta .btn{ width:100%; padding:1rem; font-size:1.1rem; font-weight:700; }

/* ===== FOOTER =============================================================== */
.homepage-theme .footer-dark{
    background: transparent;
    border-top:1px solid hsl(var(--border));
}
.homepage-theme .hover-accent:hover{ color:hsl(var(--accent))!important; transition:all .2s ease; }

/* ===== UTILITIES ============================================================ */
.homepage-theme .pill{ padding:.5rem .75rem; border:1px solid hsl(var(--border)); border-radius:999px; }
.homepage-theme .badge.bg-success{
    background: linear-gradient(90deg, #00f5a0, #36b98e)!important;
    color:#07130f!important; border:1px solid rgba(0,0,0,.08);
}
.homepage-theme .badge.bg-secondary{
    background: hsl(var(--secondary))!important;
    color:hsl(var(--foreground))!important;
    border:1px solid hsl(var(--border));
    font-weight:600;
}

/* ===== RESPONSIVE =========================================================== */
@media (max-width:991.98px){
    .homepage-theme .hero-section{ padding:7.5rem 0 4rem; }
    .homepage-theme .device-frame{ margin-top:1.5rem; }
}

@media (max-width:768px){
    .homepage-theme .display-3{ font-size:2.5rem; }
    .homepage-theme .display-5{ font-size:2rem; }
    .homepage-theme .display-6{ font-size:1.5rem; }
    .homepage-theme .hero-section{ padding:6rem 0 3rem; }
    .homepage-theme .pricing-amount{ font-size:2.5rem; }
    .homepage-theme .btn-lg{ padding:.75rem 1.25rem; font-size:1rem; }
    .homepage-theme .navbar-brand{ font-size:1.25rem; }
    .homepage-theme .feature-card{ padding:1.25rem!important; }
    .homepage-theme .glass-card{ padding:1rem!important; }
}

@media (max-width:576px){
    .homepage-theme .display-3{ font-size:2rem; }
    .homepage-theme .display-5{ font-size:1.75rem; }
    .homepage-theme .hero-section{ padding:5rem 0 2.5rem; }
    .homepage-theme .feature-icon{ width:40px; height:40px; font-size:1rem; }
}

/* End of homepage-theme.css */