/* =========================================================  
   SNSCUUP PREMIUM DIGITAL HOME  
   All selectors are scoped to .sns-home  
   so existing site CSS is protected.  
========================================================= */  
  
.sns-home{  
    --sns-navy:#042943;  
    --sns-navy2:#073c60;  
    --sns-blue:#0868b3;  
    --sns-blue2:#1295df;  
    --sns-cyan:#13bfd5;  
    --sns-green:#12804a;  
    --sns-red:#c62828;  
    --sns-orange:#e98a18;  
    --sns-bg:#f3f8fc;  
    --sns-white:#fff;  
    --sns-text:#17324d;  
    --sns-muted:#647789;  
    --sns-border:#d9e7f1;  
  
    color:var(--sns-text);  
  
    background:  
        radial-gradient(  
            circle at 4% 1%,  
            rgba(18,149,223,.13),  
            transparent 27%  
        ),  
        radial-gradient(  
            circle at 97% 12%,  
            rgba(19,191,213,.10),  
            transparent 25%  
        ),  
        linear-gradient(  
            180deg,  
            #f9fcff 0%,  
            #eef6fb 55%,  
            #f9fcff 100%  
        );  
  
    padding-bottom:45px;  
}  
  
.sns-home *,  
.sns-home *::before,  
.sns-home *::after{  
    box-sizing:border-box;  
}  
  
.sns-wrap{  
    width:min(1180px,calc(100% - 28px));  
    margin-left:auto;  
    margin-right:auto;  
}  
  
/* =========================================================  
   HERO  
========================================================= */  
  
.sns-hero{  
    position:relative;  
    overflow:hidden;  
    min-height:490px;  
    display:flex;  
    align-items:center;  
    padding:62px 0 80px;  
  
    color:#fff;  
  
    background:  
        radial-gradient(  
            circle at 78% 18%,  
            rgba(19,191,213,.30),  
            transparent 28%  
        ),  
        radial-gradient(  
            circle at 20% 100%,  
            rgba(18,149,223,.18),  
            transparent 32%  
        ),  
        linear-gradient(  
            135deg,  
            #021e34 0%,  
            #064f87 52%,  
            #1194da 100%  
        );  
}  
  
.sns-hero::before,  
.sns-hero::after{  
    content:"";  
    position:absolute;  
    border-radius:50%;  
    pointer-events:none;  
}  
  
.sns-hero::before{  
    width:460px;  
    height:460px;  
    right:-190px;  
    top:-225px;  
    background:rgba(255,255,255,.07);  
}  
  
.sns-hero::after{  
    width:320px;  
    height:320px;  
    left:-180px;  
    bottom:-205px;  
    background:rgba(19,191,213,.09);  
}  
  
.sns-hero-inner{  
    position:relative;  
    z-index:2;  
  
    width:min(1180px,calc(100% - 28px));  
    margin:auto;  
  
    display:grid;  
    grid-template-columns:1.5fr .72fr;  
    gap:44px;  
    align-items:center;  
}  
  
.sns-eyebrow{  
    display:inline-flex;  
    align-items:center;  
    gap:8px;  
  
    padding:9px 15px;  
  
    border-radius:999px;  
  
    background:rgba(255,255,255,.11);  
    border:1px solid rgba(255,255,255,.22);  
  
    font-size:13px;  
    font-weight:800;  
  
    backdrop-filter:blur(10px);  
}  
  
.sns-hero h1{  
    margin:18px 0;  
  
    color:#fff;  
  
    font-size:clamp(34px,5.2vw,60px);  
    line-height:1.08;  
  
    letter-spacing:-1.5px;  
}  
  
.sns-hero-lead{  
    max-width:750px;  
  
    margin:0 0 28px;  
  
    color:rgba(255,255,255,.91);  
  
    font-size:18px;  
    line-height:1.8;  
}  
  
.sns-actions{  
    display:flex;  
    flex-wrap:wrap;  
    gap:12px;  
}  
  
.sns-action{  
    display:inline-flex;  
    align-items:center;  
    justify-content:center;  
    gap:8px;  
  
    min-height:48px;  
  
    padding:12px 20px;  
  
    border-radius:13px;  
  
    text-decoration:none;  
    font-weight:850;  
  
    transition:  
        transform .20s ease,  
        box-shadow .20s ease,  
        background .20s ease;  
}  
  
.sns-action:hover{  
    transform:translateY(-2px);  
}  
  
.sns-action-primary{  
    background:#fff;  
    color:var(--sns-navy);  
  
    box-shadow:  
        0 10px 30px rgba(0,0,0,.18);  
}  
  
.sns-action-outline{  
    color:#fff;  
  
    background:rgba(255,255,255,.09);  
  
    border:1px solid rgba(255,255,255,.35);  
}  
  
.sns-action-outline:hover{  
    background:rgba(255,255,255,.16);  
}  
  
/* =========================================================  
   LEADER CARD  
========================================================= */  
  
.sns-leader{  
    padding:28px;  
  
    text-align:center;  
  
    border-radius:27px;  
  
    background:rgba(255,255,255,.11);  
  
    border:1px solid rgba(255,255,255,.23);  
  
    backdrop-filter:blur(12px);  
  
    box-shadow:  
        0 20px 55px rgba(0,0,0,.22);  
}  
  
.sns-leader-photo{  
    width:148px;  
    height:148px;  
  
    object-fit:cover;  
  
    border-radius:50%;  
  
    border:5px solid rgba(255,255,255,.88);  
  
    box-shadow:  
        0 12px 35px rgba(0,0,0,.27);  
}  
  
.sns-leader h2{  
    margin:14px 0 4px;  
  
    color:#fff;  
  
    font-size:23px;  
}  
  
.sns-leader p{  
    margin:0 0 18px;  
  
    color:rgba(255,255,255,.78);  
}  
  
.sns-call{  
    width:100%;  
}  
  
/* =========================================================  
   TICKER  
========================================================= */  
  
.sns-ticker-wrap{  
    position:relative;  
    z-index:10;  
  
    margin-top:-25px;  
}  
  
.sns-ticker{  
    display:flex;  
  
    overflow:hidden;  
  
    border-radius:16px;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    box-shadow:  
        0 12px 36px rgba(5,43,73,.15);  
}  
  
.sns-ticker-label{  
    flex:0 0 auto;  
  
    display:flex;  
    align-items:center;  
  
    padding:0 18px;  
  
    background:var(--sns-red);  
  
    color:#fff;  
  
    font-weight:850;  
  
    white-space:nowrap;  
}  
  
.sns-ticker-track{  
    min-width:0;  
    flex:1;  
  
    overflow:hidden;  
}  
  
.sns-ticker-move{  
    display:inline-block;  
  
    white-space:nowrap;  
  
    padding:14px 0 14px 100%;  
  
    animation:snsTicker 36s linear infinite;  
}  
  
.sns-ticker-move:hover{  
    animation-play-state:paused;  
}  
  
.sns-ticker-link{  
    color:var(--sns-navy);  
  
    text-decoration:none;  
  
    font-weight:750;  
  
    margin-right:70px;  
}  
  
@keyframes snsTicker{  
    from{  
        transform:translateX(0);  
    }  
  
    to{  
        transform:translateX(-100%);  
    }  
}  
  
/* =========================================================  
   SECTION HEADINGS  
========================================================= */  
  
.sns-section{  
    padding-top:60px;  
}  
  
.sns-section-heading{  
    text-align:center;  
  
    margin-bottom:30px;  
}  
  
.sns-section-heading span{  
    display:inline-block;  
  
    color:var(--sns-blue);  
  
    font-size:12px;  
  
    font-weight:900;  
  
    letter-spacing:1.8px;  
}  
  
.sns-section-heading h2{  
    margin:7px 0;  
  
    color:var(--sns-navy);  
  
    font-size:clamp(25px,4vw,37px);  
}  
  
.sns-section-heading p{  
    max-width:760px;  
  
    margin:0 auto;  
  
    color:var(--sns-muted);  
  
    line-height:1.75;  
}  
  
/* =========================================================  
   LIVE STATISTICS  
========================================================= */  
  
/* Home Page: show only total registered members while retaining all  
   payment statistics in backend/database for Admin and Reports. */  
.sns-stats-single{  
    grid-template-columns:minmax(220px,520px);  
    justify-content:center;  
}  
  
.sns-stats-single .sns-stat-registered{  
    width:100%;  
    text-align:center;  
}  
  
.sns-stats-single .sns-stat-registered .sns-stat-icon{  
    margin-left:auto;  
    margin-right:auto;  
}  
  
@media(max-width:640px){  
    .sns-stats-single{  
        grid-template-columns:1fr;  
    }  
  
    .sns-stats-single .sns-stat-registered{  
        min-height:150px;  
    }  
}  
  
.sns-stats{  
    display:grid;  
  
    grid-template-columns:repeat(4,1fr);  
  
    gap:16px;  
}  
  
.sns-stat{  
    position:relative;  
  
    overflow:hidden;  
  
    padding:24px;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    border-radius:20px;  
  
    box-shadow:  
        0 9px 28px rgba(5,43,73,.07);  
}  
  
.sns-stat::after{  
    content:"";  
  
    position:absolute;  
  
    width:105px;  
    height:105px;  
  
    right:-42px;  
    top:-42px;  
  
    border-radius:50%;  
  
    background:rgba(18,149,223,.07);  
}  
  
.sns-stat-icon{  
    font-size:27px;  
}  
  
.sns-stat-label{  
    margin-top:8px;  
  
    color:var(--sns-muted);  
  
    font-size:13px;  
  
    font-weight:750;  
}  
  
.sns-stat strong{  
    display:block;  
  
    margin-top:5px;  
  
    color:var(--sns-navy);  
  
    font-size:32px;  
}  
  
/* =========================================================  
   PRIORITY SECTION  
   GOOGLE FORM + WHATSAPP  
========================================================= */  
  
.sns-priority{  
    position:relative;  
  
    overflow:hidden;  
  
    margin-top:30px;  
  
    padding:32px;  
  
    color:#fff;  
  
    border-radius:28px;  
  
    background:  
        radial-gradient(  
            circle at 90% 5%,  
            rgba(19,191,213,.30),  
            transparent 25%  
        ),  
        linear-gradient(  
            135deg,  
            #031f36,  
            #075c99 56%,  
            #10a8cf  
        );  
  
    box-shadow:  
        0 20px 55px rgba(5,43,73,.20);  
}  
  
.sns-priority::after{  
    content:"";  
  
    position:absolute;  
  
    width:330px;  
    height:330px;  
  
    right:-155px;  
    top:-165px;  
  
    border-radius:50%;  
  
    background:rgba(255,255,255,.07);  
}  
  
.sns-priority-heading{  
    position:relative;  
    z-index:2;  
  
    text-align:center;  
  
    margin-bottom:26px;  
}  
  
.sns-priority-heading .tag{  
    color:#bdf7ff;  
  
    font-size:12px;  
  
    font-weight:900;  
  
    letter-spacing:1.6px;  
}  
  
.sns-priority-heading h2{  
    margin:7px 0;  
  
    color:#fff;  
  
    font-size:clamp(25px,4vw,36px);  
}  
  
.sns-priority-heading p{  
    max-width:760px;  
  
    margin:0 auto;  
  
    color:rgba(255,255,255,.83);  
  
    line-height:1.7;  
}  
  
.sns-priority-grid{  
    position:relative;  
    z-index:2;  
  
    display:grid;  
  
    grid-template-columns:1fr 1fr;  
  
    gap:18px;  
}  
  
.sns-priority-card{  
    padding:26px;  
  
    border-radius:22px;  
  
    background:rgba(255,255,255,.105);  
  
    border:1px solid rgba(255,255,255,.21);  
  
    backdrop-filter:blur(8px);  
}  
  
.sns-priority-icon{  
    width:57px;  
    height:57px;  
  
    display:flex;  
    align-items:center;  
    justify-content:center;  
  
    margin-bottom:15px;  
  
    border-radius:17px;  
  
    background:rgba(255,255,255,.13);  
  
    font-size:28px;  
}  
  
.sns-priority-card h3{  
    margin:0 0 10px;  
  
    color:#fff;  
  
    font-size:22px;  
}  
  
.sns-priority-card p{  
    margin:0 0 18px;  
  
    color:rgba(255,255,255,.84);  
  
    line-height:1.75;  
}  
  
.sns-priority-btn{  
    display:inline-flex;  
  
    align-items:center;  
    justify-content:center;  
  
    min-height:47px;  
  
    padding:11px 18px;  
  
    border-radius:12px;  
  
    background:#fff;  
  
    color:var(--sns-navy);  
  
    text-decoration:none;  
  
    font-weight:900;  
  
    transition:.2s ease;  
}  
  
.sns-priority-btn:hover{  
    transform:translateY(-2px);  
  
    box-shadow:  
        0 8px 22px rgba(0,0,0,.18);  
}  
  
.sns-priority-note{  
    margin-top:11px;  
  
    color:rgba(255,255,255,.67);  
  
    font-size:12px;  
  
    line-height:1.55;  
}  
  
/* =========================================================  
   SERVICES  
========================================================= */  
  
.sns-services{  
    display:grid;  
  
    grid-template-columns:repeat(3,1fr);  
  
    gap:18px;  
}  
  
.sns-service{  
    display:flex;  
    flex-direction:column;  
  
    padding:25px;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    border-radius:21px;  
  
    box-shadow:  
        0 9px 28px rgba(5,43,73,.06);  
  
    transition:  
        transform .20s ease,  
        box-shadow .20s ease;  
}  
  
.sns-service:hover{  
    transform:translateY(-4px);  
  
    box-shadow:  
        0 17px 38px rgba(5,43,73,.11);  
}  
  
.sns-service-icon{  
    width:53px;  
    height:53px;  
  
    display:flex;  
    align-items:center;  
    justify-content:center;  
  
    margin-bottom:17px;  
  
    border-radius:16px;  
  
    background:#edf6fd;  
  
    font-size:25px;  
}  
  
.sns-service h3{  
    margin:0 0 9px;  
  
    color:var(--sns-navy);  
}  
  
.sns-service p{  
    flex:1;  
  
    margin:0 0 18px;  
  
    color:var(--sns-muted);  
  
    line-height:1.7;  
}  
  
.sns-service-btn{  
    display:inline-flex;  
  
    align-items:center;  
    justify-content:center;  
  
    min-height:44px;  
  
    padding:10px 14px;  
  
    border-radius:11px;  
  
    background:var(--sns-navy);  
  
    color:#fff;  
  
    text-decoration:none;  
  
    font-weight:850;  
}  
  
/* =========================================================  
   MEMBER CTA  
========================================================= */  
  
.sns-member-cta{  
    display:flex;  
  
    align-items:center;  
    justify-content:space-between;  
  
    gap:22px;  
  
    margin-top:45px;  
  
    padding:33px;  
  
    color:#fff;  
  
    border-radius:25px;  
  
    background:  
        linear-gradient(  
            120deg,  
            #062b49,  
            #0b68b5  
        );  
  
    box-shadow:  
        0 15px 42px rgba(5,43,73,.18);  
}  
  
.sns-member-cta h2{  
    margin:0 0 7px;  
  
    color:#fff;  
}  
  
.sns-member-cta p{  
    margin:0;  
  
    color:rgba(255,255,255,.82);  
  
    line-height:1.7;  
}  
  
/* =========================================================  
   COMPLAINT  
========================================================= */  
  
.sns-complaint{  
    display:grid;  
  
    grid-template-columns:1.3fr .7fr;  
  
    gap:20px;  
}  
  
.sns-complaint-main,  
.sns-complaint-side{  
    padding:28px;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    border-radius:21px;  
  
    box-shadow:  
        0 8px 25px rgba(5,43,73,.06);  
}  
  
.sns-complaint-main h2,  
.sns-complaint-side h3{  
    margin-top:0;  
  
    color:var(--sns-navy);  
}  
  
.sns-complaint-main p,  
.sns-complaint-side p{  
    color:var(--sns-muted);  
  
    line-height:1.8;  
}  
  
.sns-privacy{  
    display:flex;  
  
    gap:12px;  
  
    align-items:flex-start;  
  
    margin:15px 0;  
  
    color:var(--sns-muted);  
  
    line-height:1.7;  
}  
  
/* =========================================================  
   NEWS  
========================================================= */  
  
.sns-news{  
    display:grid;  
  
    grid-template-columns:repeat(3,1fr);  
  
    gap:20px;  
}  
  
.sns-news-card{  
    display:flex;  
    flex-direction:column;  
  
    overflow:hidden;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    border-radius:21px;  
  
    box-shadow:  
        0 8px 25px rgba(5,43,73,.06);  
}  
  
.sns-news-image{  
    width:100%;  
    height:185px;  
  
    display:block;  
  
    object-fit:cover;  
}  
  
.sns-news-noimage{  
    height:185px;  
  
    display:flex;  
    align-items:center;  
    justify-content:center;  
  
    background:  
        linear-gradient(  
            135deg,  
            #eaf4fb,  
            #d9edf9  
        );  
  
    font-size:48px;  
}  
  
.sns-news-content{  
    display:flex;  
    flex-direction:column;  
    flex:1;  
  
    padding:21px;  
}  
  
.sns-news-date{  
    color:var(--sns-blue);  
  
    font-size:11px;  
  
    font-weight:850;  
}  
  
.sns-news-title{  
    margin:8px 0;  
  
    color:var(--sns-navy);  
  
    font-size:19px;  
  
    line-height:1.4;  
}  
  
.sns-news-summary{  
    flex:1;  
  
    color:var(--sns-muted);  
  
    line-height:1.7;  
}  
  
.sns-news-btn{  
    margin-top:13px;  
  
    color:var(--sns-blue);  
  
    text-decoration:none;  
  
    font-weight:850;  
}  
  
/* =========================================================  
   TRUST  
========================================================= */  
  
.sns-trust{  
    margin-top:50px;  
  
    padding:35px;  
  
    text-align:center;  
  
    background:#fff;  
  
    border:1px solid var(--sns-border);  
  
    border-radius:25px;  
  
    box-shadow:  
        0 8px 25px rgba(5,43,73,.06);  
}  
  
.sns-trust h2{  
    margin-top:0;  
  
    color:var(--sns-navy);  
}  
  
.sns-trust-intro{  
    color:var(--sns-muted);  
  
    line-height:1.8;  
}  
  
.sns-trust-grid{  
    display:grid;  
  
    grid-template-columns:repeat(3,1fr);  
  
    gap:18px;  
  
    margin-top:25px;  
}  
  
.sns-trust-item{  
    padding:20px;  
  
    border-radius:16px;  
  
    background:#f0f7fc;  
}  
  
.sns-trust-item strong{  
    display:block;  
  
    margin-bottom:7px;  
  
    color:var(--sns-navy);  
}  
  
.sns-trust-item span{  
    color:var(--sns-muted);  
  
    font-size:13px;  
  
    line-height:1.6;  
}  
  
/* =========================================================  
   WELCOME MODAL  
========================================================= */  
  
.sns-modal{  
    display:none;  
  
    position:fixed;  
  
    inset:0;  
  
    z-index:9999;  
  
    align-items:center;  
    justify-content:center;  
  
    padding:18px;  
  
    background:rgba(2,19,34,.68);  
}  
  
.sns-modal.show{  
    display:flex;  
}  
  
.sns-modal-box{  
    position:relative;  
  
    width:min(500px,100%);  
  
    padding:30px;  
  
    background:#fff;  
  
    border-radius:25px;  
  
    box-shadow:  
        0 25px 80px rgba(0,0,0,.30);  
}  
  
.sns-modal-close{  
    position:absolute;  
  
    top:13px;  
    right:13px;  
  
    width:36px;  
    height:36px;  
  
    border:0;  
  
    border-radius:50%;  
  
    background:#edf3f7;  
  
    font-size:22px;  
  
    cursor:pointer;  
}  
  
.sns-modal-icon{  
    font-size:40px;  
}  
  
.sns-modal h2{  
    margin:5px 0 10px;  
  
    color:var(--sns-navy);  
}  
  
.sns-modal p{  
    color:var(--sns-muted);  
  
    line-height:1.7;  
}  
  
.sns-modal-actions{  
    display:grid;  
  
    grid-template-columns:1fr 1fr;  
  
    gap:11px;  
  
    margin-top:18px;  
}  
  
.sns-modal-btn{  
    padding:13px;  
  
    text-align:center;  
  
    text-decoration:none;  
  
    border-radius:12px;  
  
    font-weight:850;  
}  
  
.sns-modal-primary{  
    background:var(--sns-navy);  
  
    color:#fff;  
}  
  
.sns-modal-secondary{  
    background:#edf4fa;  
  
    color:var(--sns-navy);  
}  
  
/* =========================================================  
   RESPONSIVE  
========================================================= */  
  
@media(max-width:900px){  
  
    .sns-hero-inner{  
        grid-template-columns:1fr;  
  
        text-align:center;  
    }  
  
    .sns-hero-lead{  
        margin-left:auto;  
        margin-right:auto;  
    }  
  
    .sns-actions{  
        justify-content:center;  
    }  
  
    .sns-leader{  
        width:100%;  
        max-width:420px;  
  
        margin:auto;  
    }  
  
    .sns-stats{  
        grid-template-columns:repeat(2,1fr);  
    }  
  
    .sns-services,  
    .sns-news{  
        grid-template-columns:repeat(2,1fr);  
    }  
  
    .sns-complaint{  
        grid-template-columns:1fr;  
    }  
}  
  
@media(max-width:600px){  
  
    .sns-wrap,  
    .sns-hero-inner{  
        width:calc(100% - 20px);  
    }  
  
    .sns-hero{  
        min-height:auto;  
  
        padding:43px 0 65px;  
    }  
  
    .sns-hero h1{  
        font-size:34px;  
    }  
  
    .sns-hero-lead{  
        font-size:16px;  
    }  
  
    .sns-leader-photo{  
        width:125px;  
        height:125px;  
    }  
  
    .sns-ticker-wrap{  
        margin-top:-20px;  
    }  
  
    .sns-ticker-label{  
        padding:0 11px;  
  
        font-size:12px;  
    }  
  
    .sns-ticker-link{  
        margin-right:42px;  
  
        font-size:14px;  
    }  
  
    .sns-section{  
        padding-top:43px;  
    }  
  
    .sns-stats,  
    .sns-services,  
    .sns-news,  
    .sns-trust-grid,  
    .sns-priority-grid{  
        grid-template-columns:1fr;  
    }  
  
    .sns-priority{  
        padding:23px;  
    }  
  
    .sns-member-cta{  
        flex-direction:column;  
  
        align-items:flex-start;  
  
        padding:27px;  
    }  
  
    .sns-modal-actions{  
        grid-template-columns:1fr;  
    }  
}  
  
/* =========================================================  
   ACCESSIBILITY  
========================================================= */  
  
@media(prefers-reduced-motion:reduce){  
  
    .sns-ticker-move{  
        animation:none;  
  
        padding-left:15px;  
    }  
  
    .sns-action,  
    .sns-service,  
    .sns-priority-btn{  
        transition:none;  
    }  
}  
  
/* =========================================================  
   HOMEPAGE HIGHLIGHTS SLIDER  
   ========================================================= */  
.sns-highlights{  
    position:relative;  
    overflow:hidden;  
    border-radius:26px;  
    background:#062b49;  
    box-shadow:0 18px 45px rgba(4,41,67,.16);  
}  
.sns-highlight-track{  
    position:relative;  
    min-height:420px;  
}  
.sns-highlight-slide{  
    display:none;  
    min-height:420px;  
    position:relative;  
    color:#fff;  
    text-decoration:none;  
}  
.sns-highlight-slide.active{  
    display:grid;  
    grid-template-columns:1.15fr .85fr;  
}  
.sns-highlight-image{  
    width:100%;  
    height:420px;  
    object-fit:cover;  
}  
.sns-highlight-copy{  
    padding:42px 38px;  
    display:flex;  
    flex-direction:column;  
    justify-content:center;  
    background:linear-gradient(145deg,#062b49,#0868b3);  
}  
.sns-highlight-copy .tag{  
    display:inline-flex;  
    width:max-content;  
    padding:7px 12px;  
    border-radius:999px;  
    background:rgba(255,255,255,.14);  
    font-size:12px;  
    font-weight:800;  
    letter-spacing:.08em;  
}  
.sns-highlight-copy h3{  
    margin:15px 0 12px;  
    font-size:clamp(24px,3vw,38px);  
    line-height:1.25;  
}  
.sns-highlight-copy p{  
    margin:0;  
    color:rgba(255,255,255,.88);  
    line-height:1.75;  
    font-size:16px;  
}  
.sns-highlight-button{  
    display:inline-flex;  
    width:max-content;  
    margin-top:24px;  
    padding:12px 18px;  
    border-radius:12px;  
    background:#fff;  
    color:#062b49;  
    font-weight:800;  
    text-decoration:none;  
}  
.sns-highlight-dots{  
    position:absolute;  
    left:0;  
    right:0;  
    bottom:16px;  
    display:flex;  
    justify-content:center;  
    gap:8px;  
    z-index:3;  
}  
.sns-highlight-dot{  
    width:9px;  
    height:9px;  
    padding:0;  
    border:0;  
    border-radius:50%;  
    background:rgba(255,255,255,.45);  
    cursor:pointer;  
}  
.sns-highlight-dot.active{  
    width:25px;  
    border-radius:99px;  
    background:#fff;  
}  
  
/* =========================================================  
   HOMEPAGE VIDEOS  
   ========================================================= */  
.sns-video-grid{  
    display:grid;  
    grid-template-columns:repeat(2,minmax(0,1fr));  
    gap:20px;  
}  
.sns-video-card{  
    overflow:hidden;  
    border:1px solid var(--sns-border);  
    border-radius:20px;  
    background:#fff;  
    box-shadow:0 10px 28px rgba(4,41,67,.08);  
}  
.sns-video-frame{  
    position:relative;  
    aspect-ratio:16/9;  
    background:#061d2f;  
}  
.sns-video-frame iframe{  
    display:block;  
    width:100%;  
    height:100%;  
    border:0;  
}  
.sns-video-title{  
    margin:0;  
    padding:15px 17px 17px;  
    font-size:17px;  
    line-height:1.45;  
}  
.sns-video-empty{  
    padding:34px 20px;  
    border:1px dashed var(--sns-border);  
    border-radius:20px;  
    background:#fff;  
    text-align:center;  
    color:var(--sns-muted);  
}  
@media(max-width:760px){  
    .sns-highlight-slide.active{  
        grid-template-columns:1fr;  
    }  
    .sns-highlight-track,  
    .sns-highlight-slide{  
        min-height:540px;  
    }  
    .sns-highlight-image{  
        height:260px;  
    }  
    .sns-highlight-copy{  
        padding:25px 22px 42px;  
    }  
    .sns-highlight-copy h3{  
        font-size:25px;  
    }  
    .sns-video-grid{  
        grid-template-columns:1fr;  
    }  
}  
  
  
/* =========================================================  
   HOMEPAGE VISUAL REFINEMENT — UI ONLY  
   Existing backend/data flows remain untouched.  
========================================================= */  
.sns-home{padding-bottom:56px;}  
.sns-wrap{width:min(1180px,calc(100% - 30px));margin-inline:auto;}  
.sns-hero{margin:0 auto;border-radius:0 0 28px 28px;overflow:hidden;box-shadow:0 10px 35px rgba(4,41,67,.10);}  
.sns-hero-inner{max-width:1180px;min-height:370px;margin:auto;padding:44px 30px;}  
.sns-hero h1{max-width:760px;font-size:clamp(30px,4.3vw,52px);line-height:1.12;letter-spacing:-.02em;}  
.sns-hero-lead{max-width:720px;font-size:17px;line-height:1.8;}  
.sns-leader{border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.16);}  
.sns-ticker-wrap{margin-top:18px;}  
.sns-ticker{border-radius:16px;box-shadow:0 8px 25px rgba(4,41,67,.08);}  
.sns-current-activity{width:min(1180px,calc(100% - 30px));margin:30px auto 0;}  
.sns-current-activity .sns-highlights{border-radius:24px;box-shadow:0 20px 50px rgba(4,41,67,.15);}  
.sns-current-activity .sns-highlight-track,.sns-current-activity .sns-highlight-slide{min-height:470px;}  
.sns-current-activity .sns-highlight-slide{display:none;position:relative;background:#061d2f;}  
.sns-current-activity .sns-highlight-slide.active{display:block;}  
.sns-current-activity .sns-highlight-image{display:block;width:100%;height:470px;object-fit:cover;}  
.sns-current-label{text-align:center;margin:14px 0 0;font-size:13px;font-weight:900;letter-spacing:.22em;color:#0868b3;}  
.sns-current-label::before,.sns-current-label::after{content:"";display:inline-block;width:38px;height:2px;background:#13bfd5;vertical-align:middle;margin:0 10px;}  
.sns-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(4,41,67,.48);color:#fff;font-size:34px;line-height:1;cursor:pointer;backdrop-filter:blur(5px);}  
.sns-slider-arrow:hover{background:rgba(4,41,67,.78);}  
.sns-slider-prev{left:18px}.sns-slider-next{right:18px}  
.sns-highlight-dots{bottom:18px;}  
.sns-section{margin-top:44px;}  
.sns-section-heading{margin-bottom:22px;}  
.sns-section-heading span{font-size:12px;letter-spacing:.16em;font-weight:900;color:#0868b3;}  
.sns-section-heading h2{font-size:clamp(25px,3vw,36px);margin-top:6px;}  
.sns-section-heading p{max-width:760px;line-height:1.7;}  
.sns-stats{gap:16px;}  
.sns-stat,.sns-service,.sns-priority-card,.sns-news-card,.sns-video-card{box-shadow:0 8px 28px rgba(4,41,67,.07);transition:transform .2s ease,box-shadow .2s ease;}  
.sns-stat:hover,.sns-service:hover,.sns-priority-card:hover,.sns-news-card:hover,.sns-video-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(4,41,67,.12);}  
.sns-priority{border-radius:24px;overflow:hidden;}  
.sns-services{gap:18px;}  
.sns-service{border-radius:18px;}  
.sns-news{gap:18px;}  
.sns-news-card{border-radius:18px;overflow:hidden;}  
.sns-video-card{border-radius:18px;}  
.sns-member-cta{margin-top:44px;border-radius:24px;box-shadow:0 18px 45px rgba(4,41,67,.12);}  
.sns-trust{margin-top:44px;border-radius:24px;}  
.sns-current-empty{padding:60px 20px;border:1px dashed #c9dce9;border-radius:24px;background:#fff;text-align:center;color:#647789;}  
@media(max-width:760px){  
  .sns-wrap,.sns-current-activity{width:calc(100% - 20px);}  
  .sns-hero-inner{padding:30px 18px;min-height:auto;}  
  .sns-current-activity .sns-highlight-track,.sns-current-activity .sns-highlight-slide{min-height:270px;}  
  .sns-current-activity .sns-highlight-image{height:270px;object-fit:cover;}  
  .sns-slider-arrow{width:38px;height:38px;font-size:28px;}  
  .sns-slider-prev{left:10px}.sns-slider-next{right:10px}  
  .sns-current-label{font-size:11px;letter-spacing:.16em;}  
  .sns-current-label::before,.sns-current-label::after{width:22px;margin:0 7px;}  
}