:root{
        --blue:#0b5ed7;
        --blue-dark:#083b8a;
        --blue-soft:#eaf3ff;
        --white:#ffffff;
        --text:#14304f;
        --muted:#5d718c;
        --border:#d9e7ff;
        --shadow:0 10px 30px rgba(11,94,215,.14);
    }

    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    html{
        scroll-behavior:smooth;
    }

    body{
        font-family: Arial, Helvetica, sans-serif;
        background: var(--white);
        color: var(--text);
        line-height:1.6;
    }

    a{
        text-decoration:none;
        color:inherit;
    }

    img{
        max-width:100%;
        display:block;
        border-radius:14px;
    }

    .container{
        width:min(1180px, 92%);
        margin:auto;
    }

    header{
        position:sticky;
        top:0;
        z-index:50;
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(10px);
        border-bottom:1px solid var(--border);
    }

    .nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:16px 0;
    }

    .brand{
        display:flex;
        align-items:center;
        gap:12px;
        font-weight:700;
        color:var(--blue-dark);
    }

    .brand-badge{
        width:44px;
        height:44px;
        border-radius:50%;
        background: linear-gradient(135deg, var(--blue), var(--blue-dark));
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
    }

    .nav-links{
        display:flex;
        gap:24px;
        align-items:center;
    }

    .nav-links a{
        font-size:15px;
        color:var(--text);
        font-weight:600;
    }

    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:none;
        border-radius:10px;
        padding:14px 22px;
        cursor:pointer;
        font-size:15px;
        font-weight:700;
        transition:.25s ease;
    }

    .btn-primary{
        background:var(--blue);
        color:#fff;
        box-shadow:var(--shadow);
    }

    .btn-primary:hover{
        background:var(--blue-dark);
        transform:translateY(-2px);
    }

    .btn-outline{
        background:#fff;
        color:var(--blue);
        border:2px solid var(--blue);
    }

    .btn-outline:hover{
        background:var(--blue-soft);
    }

    .btn:disabled{
        opacity:.6;
        cursor:not-allowed;
        transform:none !important;
    }

    .hero{
        background:
            linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.9)),
            url('img/together.jpg') center/cover no-repeat;
        padding:90px 0 70px;
    }

    .hero-grid{
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:40px;
        align-items:center;
    }

    .eyebrow{
        display:inline-block;
        background:var(--blue-soft);
        color:var(--blue-dark);
        border:1px solid var(--border);
        padding:8px 14px;
        border-radius:999px;
        font-size:13px;
        font-weight:700;
        margin-bottom:18px;
    }

    h1{
        font-size: clamp(32px, 5vw, 58px);
        line-height:1.08;
        margin-bottom:18px;
        color:var(--blue-dark);
    }

    .lead{
        font-size:18px;
        color:var(--muted);
        margin-bottom:24px;
        max-width:700px;
    }

    .slogans{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin:22px 0 28px;
    }

    .tag{
        background:#fff;
        border:1px solid var(--border);
        color:var(--blue-dark);
        padding:10px 14px;
        border-radius:999px;
        font-size:14px;
        font-weight:700;
        box-shadow:var(--shadow);
    }

    .hero-actions{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        margin-top:8px;
    }

    .hero-card{
        background:rgba(255,255,255,.94);
        border:1px solid var(--border);
        border-radius:20px;
        padding:24px;
        box-shadow:var(--shadow);
    }

    .hero-card h3{
        color:var(--blue-dark);
        margin-bottom:12px;
        font-size:24px;
    }

    .hero-card ul{
        list-style:none;
        display:grid;
        gap:12px;
    }

    .hero-card li{
        padding:12px 14px;
        background:var(--blue-soft);
        border-radius:12px;
        font-weight:600;
        color:var(--text);
    }

    .hero-ticker-wrap{
        grid-column:2;
        margin-top:20px;
        align-self:start;
    }

    .hero-ticker{
        position:relative;
        width:100%;
        min-height:58px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        background:rgba(255,255,255,.94);
        border:1px solid var(--border);
        border-radius:16px;
        padding:14px 18px;
        box-shadow:var(--shadow);
        overflow:hidden;
    }

    .hero-ticker-label{
        flex:0 0 auto;
        font-size:13px;
        font-weight:700;
        color:var(--blue);
        margin-right:12px;
        white-space:nowrap;
    }

    .hero-ticker-name{
        position:relative;
        font-size:15px;
        font-weight:700;
        color:var(--blue-dark);
        opacity:0;
        transition:opacity .5s ease;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }

    .hero-ticker-name.show{
        opacity:1;
    }

    section{
        padding:70px 0;
    }

    .section-title{
        text-align:center;
        margin-bottom:14px;
        color:var(--blue-dark);
        font-size:34px;
    }

    .section-text{
        text-align:center;
        max-width:850px;
        margin:0 auto 34px;
        color:var(--muted);
        font-size:17px;
    }

    .cards{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:24px;
    }

    .card{
        background:#fff;
        border:1px solid var(--border);
        border-radius:18px;
        padding:24px;
        box-shadow:var(--shadow);
    }

    .card h3{
        margin:14px 0 10px;
        color:var(--blue-dark);
    }

    .icon{
        width:58px;
        height:58px;
        border-radius:14px;
        background:var(--blue-soft);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
    }

    .gallery{
        background:linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    }

    .gallery-grid{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:20px;
    }

    .gallery-item{
        background:#fff;
        border:1px solid var(--border);
        border-radius:18px;
        overflow:hidden;
        box-shadow:var(--shadow);
    }

    .gallery-item img{
        height:250px;
        width:100%;
        object-fit:cover;
        border-radius:0;
    }

    .gallery-item .caption{
        padding:16px;
    }

    .gallery-item h4{
        color:var(--blue-dark);
        margin-bottom:8px;
    }

    .stats{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }

    .stat{
        background:#fff;
        border:1px solid var(--border);
        border-radius:18px;
        padding:24px;
        text-align:center;
        box-shadow:var(--shadow);
    }

    .stat h3{
        font-size:34px;
        color:var(--blue);
    }

    .cta{
        background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
        color:#fff;
        border-radius:24px;
        padding:40px;
        text-align:center;
        box-shadow:var(--shadow);
    }

    .cta p{
        max-width:760px;
        margin:12px auto 24px;
        color:#eaf3ff;
    }

    footer{
        padding:30px 0 50px;
        text-align:center;
        color:var(--muted);
        font-size:14px;
    }

    .media-ad-section{
        padding:70px 0;
        background:#f8fbff;
    }

    .media-ad-grid{
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:24px;
        align-items:stretch;
    }

    .media-card,
    .ad-card{
        background:#fff;
        border:1px solid var(--border);
        border-radius:20px;
        box-shadow:var(--shadow);
        overflow:hidden;
    }

    .media-card-header,
    .ad-card-header{
        padding:20px 22px 0;
    }

    .media-card-header h3,
    .ad-card-header h3{
        color:var(--blue-dark);
        font-size:24px;
        margin-bottom:8px;
    }

    .media-card-header p,
    .ad-card-header p{
        color:var(--muted);
        font-size:15px;
        margin-bottom:18px;
    }

    .media-frame-wrap{
        padding:0 22px 22px;
    }

    .media-frame{
        width:100%;
        aspect-ratio:16 / 9;
        border:0;
        border-radius:16px;
        background:#eaf3ff;
    }

    .ad-placeholder-wrap{
        padding:0 22px 22px;
    }

    .ad-placeholder{
        min-height:320px;
        border:2px dashed #bfd5fb;
        border-radius:16px;
        background:linear-gradient(180deg, #fafdff 0%, #eef5ff 100%);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:24px;
    }

    .ad-placeholder strong{
        color:var(--blue-dark);
        font-size:20px;
        margin-bottom:10px;
    }

    .ad-placeholder span{
        color:var(--muted);
        font-size:14px;
        max-width:280px;
    }

    .modal{
        position:fixed;
        inset:0;
        background:rgba(4,16,40,.72);
        display:none;
        align-items:center;
        justify-content:center;
        padding:20px;
        z-index:999;
    }

    .modal.active{
        display:flex;
    }

    .modal-content{
        width:min(700px, 100%);
        background:#fff;
        border-radius:22px;
        box-shadow:0 20px 60px rgba(0,0,0,.25);
        overflow:hidden;
        animation:fadeUp .25s ease;
    }

    @keyframes fadeUp{
        from{ opacity:0; transform:translateY(16px); }
        to{ opacity:1; transform:translateY(0); }
    }

    .modal-header{
        background:linear-gradient(135deg, var(--blue), var(--blue-dark));
        color:#fff;
        padding:22px 24px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .close-btn{
        background:rgba(255,255,255,.15);
        color:#fff;
        border:none;
        width:42px;
        height:42px;
        border-radius:50%;
        cursor:pointer;
        font-size:20px;
        font-weight:700;
    }

    .modal-body{
        padding:24px;
    }

    .form-grid{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:18px;
    }

    .form-group{
        display:flex;
        flex-direction:column;
    }

    .form-group.full{
        grid-column:1 / -1;
    }

    label{
        margin-bottom:8px;
        font-weight:700;
        color:var(--blue-dark);
        font-size:14px;
    }

    input, select{
        height:50px;
        border:1px solid #cddcf8;
        border-radius:12px;
        padding:0 14px;
        font-size:15px;
        outline:none;
        transition:.2s;
        background:#fff;
        color:var(--text);
    }

    input:focus, select:focus{
        border-color:var(--blue);
        box-shadow:0 0 0 4px rgba(11,94,215,.12);
    }

    .form-note{
        margin:14px 0 22px;
        color:var(--muted);
        font-size:14px;
    }

    .nav-actions{
        display:flex;
        align-items:center;
        gap:14px;
    }

    .social-share{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .social-btn{
        width:42px;
        height:42px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#ffffff;
        border:1px solid var(--border);
        color:var(--blue-dark);
        box-shadow:var(--shadow);
        transition:.25s ease;
        font-size:17px;
    }

    .social-btn:hover{
        transform:translateY(-2px);
        background:var(--blue);
        color:#fff;
        border-color:var(--blue);
    }

    .privacy-consent {
        margin: 20px 0;
    }

    .consent-checkbox {
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        font-size: 14px;
        color: var(--text);
    }

    .consent-checkbox input[type="checkbox"] {
        display: none;
    }

    .checkmark {
        width: 18px;
        height: 18px;
        border: 2px solid var(--border);
        border-radius: 4px;
        margin-right: 12px;
        flex-shrink: 0;
        margin-top: 2px;
        transition: .2s;
    }

    .consent-checkbox input:checked + .checkmark {
        background: var(--blue);
        border-color: var(--blue);
    }

    .consent-checkbox input:checked + .checkmark::after {
        content: "✓";
        color: white;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .consent-text {
        line-height: 1.5;
    }

    .consent-text a {
        color: var(--blue);
        text-decoration: none;
        font-weight: 600;
    }

    .consent-text a:hover {
        text-decoration: underline;
    }

    .typing-indicator{
        display:flex;
        align-items:center;
        gap:6px;
        padding:8px 12px;
        margin:8px 0 10px 0;
        width:fit-content;
        max-width:80px;
        background:#f1f5f9;
        border-radius:18px;
    }

    .typing-indicator span{
        width:8px;
        height:8px;
        border-radius:50%;
        background:#083c69;
        display:inline-block;
        animation:chatTypingBounce 1.2s infinite ease-in-out;
    }

    .typing-indicator span:nth-child(2){
        animation-delay:0.15s;
    }

    .typing-indicator span:nth-child(3){
        animation-delay:0.3s;
    }

    @keyframes chatTypingBounce{
        0%, 80%, 100%{
            transform:scale(0.6);
            opacity:0.5;
        }
        40%{
            transform:scale(1);
            opacity:1;
        }
    }

    @media (max-width: 992px){
        .hero-grid,
        .cards,
        .gallery-grid,
        .stats{
            grid-template-columns:1fr 1fr;
        }

        .nav-links{
            display:none;
        }

        .hero-ticker-wrap{
            grid-column:auto;
            margin-top:0;
        }

        .media-ad-grid{
            grid-template-columns:1fr;
        }

        .nav-actions{
            gap:10px;
        }

        .social-share{
            gap:8px;
        }

        .social-btn{
            width:38px;
            height:38px;
            font-size:15px;
        }
    }

    @media (max-width: 640px){
        .hero-grid,
        .cards,
        .gallery-grid,
        .stats,
        .form-grid{
            grid-template-columns:1fr;
        }

        .hero{
            padding:70px 0 50px;
        }

        section{
            padding:55px 0;
        }

        .cta{
            padding:28px 20px;
        }

        .hero-ticker{
            min-height:54px;
            padding:12px 14px;
        }

        .hero-ticker-label{
            display:none;
        }

        .hero-ticker-name{
            font-size:14px;
        }

        .nav{
            flex-wrap:wrap;
            gap:12px;
        }

        .nav-actions{
            width:100%;
            justify-content:space-between;
        }

        .social-share{
            flex-wrap:wrap;
        }
    }
   
 /* Smooth interactive motion */
.btn-primary,
.btn-outline,
.social-btn,
.card,
.gallery-item,
.stat,
.hero-card,
.media-card,
.ad-card,
.cta,
.brand-badge{
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease;
    will-change: transform;
}

/* General desktop hover lift */
.btn-primary:hover,
.btn-outline:hover,
.social-btn:hover,
.stat:hover,
.hero-card:hover,
.media-card:hover,
.ad-card:hover,
.cta:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(11,94,215,.18);
}

/* Harder bounce for cards and images */
.card:hover,
.gallery-item:hover{
    animation: hardBounceHover .62s cubic-bezier(.34,1.56,.64,1) both;
    box-shadow: 0 22px 42px rgba(11,94,215,.22);
    z-index: 2;
    position: relative;
}

.gallery-item img{
    transition: transform .35s ease;
    will-change: transform;
}

.gallery-item:hover img{
    transform: scale(1.045);
}

/* Tap feel on mobile */
.btn-primary:active,
.btn-outline:active,
.social-btn:active,
.card:active,
.gallery-item:active,
.stat:active,
.hero-card:active,
.media-card:active,
.ad-card:active,
.cta:active{
    transform: scale(.965);
}

/* Harder hover bounce animation */
@keyframes hardBounceHover{
    0%   { transform: translateY(0) scale(1); }
    22%  { transform: translateY(-14px) scale(1.02); }
    42%  { transform: translateY(0) scale(.995); }
    58%  { transform: translateY(-8px) scale(1.01); }
    74%  { transform: translateY(0) scale(.998); }
    88%  { transform: translateY(-4px) scale(1.004); }
    100% { transform: translateY(-6px) scale(1.01); }
}

/* Harder scroll-in animation */
@keyframes riseBounceIn{
    0%{
        transform: translateY(34px) scale(.96);
        opacity: 0;
    }
    45%{
        transform: translateY(-12px) scale(1.015);
        opacity: 1;
    }
    68%{
        transform: translateY(4px) scale(.995);
        opacity: 1;
    }
    84%{
        transform: translateY(-5px) scale(1.005);
        opacity: 1;
    }
    100%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.scroll-bounce{
    opacity: 0;
}

.scroll-bounce.in-view{
    animation: riseBounceIn .82s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Slight stagger option */
.scroll-bounce.delay-1.in-view{ animation-delay: .08s; }
.scroll-bounce.delay-2.in-view{ animation-delay: .16s; }
.scroll-bounce.delay-3.in-view{ animation-delay: .24s; }
.scroll-bounce.delay-4.in-view{ animation-delay: .32s; }

/* Stronger major button hover */
.hero-actions .btn-primary:hover,
.hero-actions .btn-outline:hover,
#submitBtn:hover,
.openModalBtn:hover{
    transform: translateY(-8px) scale(1.03);
}