:root{
      --bg:#f7f9fb;
      --card:#ffffff;
      --primary:#004D7A; /* Deep Ocean Blue */
      --accent:#FF6B35;  /* Sunset Orange */
      --green:#2E8B57;   /* Jungle Green */
      --muted:#6b7280;
      --glass: rgba(255,255,255,0.7);
      --radius:14px;
      color-scheme: light;
    }


    /* Hero */
    .hero{
        position:relative;
        height:64vh;
        min-height:420px;
        display:flex;
        align-items:center;
    }
    
    .hero .poster{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        background-size: cover;
        background-repeat:no-repeat;
    }
    .hero::after{
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(2,6,23,0.15), rgba(2,6,23,0.45));
    }
    .hero-content{
        position:relative;
        z-index:2;
        max-width:1200px;
        margin:0 auto;
        padding:48px;display:flex;gap:24px;align-items:center;}
    .hero-left{
        flex:1;
        color:white;
    }
    .hero-left h2{
        font-family:Montserrat, sans-serif;
        font-size:44px;
        margin:0 0 12px;
        line-height:1.02;
        color: white;
    }
    
    .hero-left p{
        color:rgba(255,255,255,0.9);
        margin:0 0 18px;
        font-size:18px;
    }
    .hero-btn-row{
        display:flex;gap:12px
    }
    .hero-btn{
        padding:12px 18px;
        border-radius:10px;
        border:0;
        cursor:pointer;
        font-weight:700;
        text-decoration: none !important;
    }
    .hero-btn-primary{
        background:var(--accent);
        color:white;
        box-shadow:0 8px 30px rgba(255,107,53,0.14);
    }
    
    .hero-right{
        width:420px;
        min-width:280px;
        background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
        backdrop-filter: blur(6px);padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);
    }
    
    .hero-right h4{
        color:rgba(255,255,255,0.9);
    }
    
    .hero .muted{
        color:rgba(255,255,255,0.9);
    }
    .hero-card{
        display:flex;
        flex-direction:column;
        gap:8px;
    }
    .meta{
        display:flex;
        gap:8px;
        align-items:center;
    }
    .badge{
        background:var(--green);
        color:white;
        padding:6px 8px;
        border-radius:8px;
        font-weight:700;
        font-size:12px;
    }

    /* Flat-Hero */
    .flat-hero{
        position:relative;
        height:34vh ;
/*         min-height:420px; */
        display:flex;
        align-items:center;
    }
    .flat-hero .poster{
        position:absolute;
        inset:0;
        width:100%;
/*         height:100%; */
        background-size: cover;
        background-repeat:no-repeat;
    }
    .flat-hero::after{
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(2,6,23,0.15), rgba(2,6,23,0.45));
        
    }
    .flat-hero-content{
        position:relative;
        z-index:2;
        max-width:1200px;
        margin:0 auto;
        padding:48px;
        display:flex;
        gap:24px;
        align-items:center;
	}

    .flat-hero-left{
        flex:1;
        color:white;
    }
    .flat-hero-left h2{
        font-family:Montserrat, sans-serif;
        font-size:44px;
        margin:0 0 12px;
        line-height:1.02;
        color: white;
    }
    .flat-hero-left p{
        color:rgba(255,255,255,0.9);
        margin:0 0 18px;
        font-size:18px;
    }
    .flat-hero-btn-row{
        display:flex;gap:12px
    }
    .flat-hero-btn{
        padding:12px 18px;
        border-radius:10px;
        border:0;
        cursor:pointer;
        font-weight:700;
    }
    .flat-hero-btn-primary{
        background:var(--accent);
        color:white;
        box-shadow:0 8px 30px rgba(255,107,53,0.14);
    }
    .grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    /* Card */
    .card{
        background:var(--card); 
        border-radius:12px;
        overflow:hidden;
        border:1px solid rgba(15,23,42,0.04);
        box-shadow:0 8px 30px rgba(12,16,25,0.1);
        transition:transform .35s ease, box-shadow .35s ;
    }
    .card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 60px rgba(12,16,25,0.08);
    }
    .card-figure{
        height:160px;
        overflow:hidden;
    }
    .card-figure img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition:transform .6s ease;
    }
    .card:hover .card-figure img{
        transform:scale(1.08);
    }
    .card-body{
        padding:14px;
    }
    .card-title{
        font-weight:700;
        margin:0 0 8px;
        font-size:16px;
    }
    .card-desc{
        color:var(--muted);
        font-size:14px;
        margin:0 0 12px;
    }
    .card-meta{display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .pill{
        background:rgba(0,0,0,0.05);
        padding:6px 8px;
        border-radius:999px;
        font-size:13px;
    }


/* Responsive */
    @media (max-width: 980px){
        .hero,.flat-hero{
            height:56vh;
        }
        .hero-left,.flat-hero-left h2{
            font-size:34px;
        }
        /* .hero-right{
            display:none;
        } */
        .grid{
            grid-template-columns:repeat(2,1fr);
        }
    }
    @media (max-width:640px){
        
        .hero,.flat-hero{
            height:48vh;
        }
        .hero-left h2{
            font-size:26px;
        }
        .hero-content,.flat-hero-content{
            padding:20px;
        }
        .grid{
            grid-template-columns:1fr;
        }
    }

    /* small utility */
    .muted{
        color:var(--muted);font-size:13px;
    }