:root{
        --d1:#01339e;
        --d2:#cbd8f5;
        --d3:#eff5fc;
        --d4:#eef2ff;
        --glass: rgba(255,255,255,0.6);
        --muted:#4b5763;
        /* --d1:#15b4db;
        --d2:#d1f2f8;
        --d3:#effafc;
        --d4:#eef2ff;
        --glass: rgba(255,255,255,0.6);
        --muted:#4b5763; */
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
        margin:0;
        font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
        background-image: url("resources/img/bubble.gif");
        color:#102030;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }

    .top-header {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        flex-wrap: nowrap;
        }

    .top-header img {
        max-height: 100px;
        width: auto;
        object-fit: contain;
        }

    .topbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:4px 6%;
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(6px);
        border-bottom:1px solid rgba(9,10,20,0.04);
        position:sticky;
        top:0;
        z-index:40;
        box-shadow: 10px 10px 18px rgba(90, 86, 86, 0.445), -6px -6px 14px rgba(255,255,255,0.15);

    }
    .brand{display:flex;align-items:center;gap:14px}
    .brand h1{font-size:18px;margin:0;color:var(--d1);letter-spacing:0.2px}

    .hero{
        position:relative;
        overflow:hidden;
        padding:60px 6% 100px;
        display:grid;
        align-items:center;
        gap:28px;
    }
    .hero__bg{
        position:absolute;
        inset:0;
        background:linear-gradient(180deg,var(--d1),var(--d2));
        transform-origin:center;
        z-index:0;
        clip-path: polygon(0 0,100% 0,100% 72%,0 92%);
    }
    .hero__image{
        position:relative; 
        z-index:1; 
        width:100%; 
        height:550px; 
        border-radius:12px; 
        overflow:hidden;
        box-shadow: 0 12px 30px rgba(20,30,60,0.18);
        border: 1px solid rgba(255,255,255,0.06);
    }
    .hero__image img
    {
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        filter:contrast(1.05) saturate(1.05)
    }
    .hero__content
    {
        position:relative;
        z-index:2;
        text-align:center;
        color:white;
        padding:8px 12px
    }
    .hero__title
    {
        font-size:34px;
        font-family:Arial, Helvetica, sans-serif;
        margin:10px 0 6px;
        font-weight:700;
        text-shadow:0 6px 20px rgba(7,8,20,0.35)
    }
    .hero__subtitle
    {
        opacity:0.95;
        color:rgba(255,255,255,0.9);
        margin-bottom:8px
    }

    .textDeco{
        text-decoration: none;
    }
    .time-strip
    {
        display:flex;
        gap:12px;
        justify-content:center;
        align-items:center;
        padding:12px 6%;
        color:var(--d1);
        font-weight:700;
        letter-spacing:0.2px;
        background:linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.9));
        border-bottom:1px solid rgba(9,10,20,0.03);
        box-shadow: -2px -1px 3px rgba(255, 251, 251, 0.2), 10px 10px 20px #bdccf5,  inset 5px 4px 0 rgba(255, 255, 255, 0.164);
    }

    .time-strip span
    {
        color:#b91c1c;
        font-weight:700;
        margin:0 8px; 
    }

    .section
    {
        top: 0;
        padding:10px 6%
    }
    .section h2
    {
        color:var(--d1);
        font-weight:800;
        margin:0 0 12px;
        font-size:20px
    }
    .lead
    {
        color:var(--muted);
        margin-bottom:22px
    }

    .grid{
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap:20px;
    }
    .card
    {
        background:linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
        border-radius:14px;
        padding:22px;
        box-shadow: 0 10px 30px rgba(14,20,40,0.08);
        border:1px solid rgba(9,10,20,0.04); 
        transform: translateY(20px); 
        
        transition:transform .6s cubic-bezier(.2,.9,.2,1), opacity .6s ease;
    }
    .card--accent
    {
        background: linear-gradient(180deg,var(--d3),#ffffff);
        border: 1px solid rgba(73,76,162,0.08);
    }
    .card h3
    {
        margin:0 0 8px;
        color:var(--d1);
        font-size:18px
    }
    .card p
    {
        margin:0;
        color:#475569;
        font-size:14px;
        line-height:1.5
    }

    .card:hover{
        background: linear-gradient(to top, #ffe6a5, #fffefa);
        transform: translateY(-5px);
        box-shadow: 10px 10px 18px rgba(0,0,0,0.35), -6px -6px 14px rgba(255,255,255,0.15);
    }
    .btn
    {
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:10px 14px;
        border-radius:10px;
        border:0;
        font-weight:700;
        cursor:pointer;
        color:white;
        background:linear-gradient(90deg,var(--d1),var(--d2));
        box-shadow:0 8px 18px rgba(73,76,162,0.14);
    }

    footer
    {
        padding:28px 6%;
        text-align:center;
        color:var(--muted);
        border-top:1px solid rgba(9,10,20,0.03)
    }

    .in-view
    {
        opacity:1;
        transform:translateY(0)
    }
    .fade-up
    {
        transition-delay:0.05s
    }
    .stagger-1
    {
        transition-delay:0.08s
    }
    .stagger-2
    {
        transition-delay:0.16s
    }
    .stagger-3
    {
        transition-delay:0.24s
    }
    .stagger-4
    {
        transition-delay:0.32s
    }

    @media (max-width:720px)
    {
        .hero{padding:36px 5%}
        .hero__title{font-size:20px}
    }