:root{
    --blue:#0063c8;
    --blue-dark:#061b4f;
    --blue-soft:#eef7ff;
    --sky:#eaf7ff;
    --text:#071a3d;
    --muted:#6f7787;
    --border:#e7eef8;
    --bg:#f7fbff;
    --white:#ffffff;
}

*{
    font-family:'DM Sans',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--text);
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

.container{
    max-width:1320px;
}

.tn-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(231,238,248,.8);
    transition:.3s ease;
}

.tn-header.scrolled{
    box-shadow:0 15px 45px rgba(7,26,61,.08);
}

.tn-navbar{
    min-height:82px;
    padding:0;
}

.tn-logo img{
    height:50px;
}

.tn-menu .nav-link{
    color:#0c2148;
    font-weight:800;
    font-size:14px;
    padding:10px 14px!important;
    transition:.25s ease;
}

.tn-menu .nav-link:hover,
.tn-menu .nav-link.active{
    color:var(--blue);
}

.tn-toggler{
    border:0;
    box-shadow:none!important;
    color:var(--blue-dark);
}

.tn-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:999px;
    padding:14px 26px;
    font-weight:900;
    font-size:15px;
    transition:.28s ease;
    white-space:nowrap;
}

.tn-btn-sm{
    padding:12px 22px;
    font-size:14px;
}

.tn-btn-primary{
    background:linear-gradient(135deg,#0063c8,#004da7);
    color:#fff!important;
    box-shadow:0 18px 36px rgba(0,99,200,.25);
}

.tn-btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 48px rgba(0,99,200,.35);
}

.tn-btn-white{
    background:#fff;
    color:var(--blue)!important;
    border:1px solid var(--border);
    box-shadow:0 14px 34px rgba(7,26,61,.06);
}

.tn-btn-white:hover,
.tn-btn-white-outline:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(7,26,61,.1);
}

.tn-btn-white-outline{
    background:#fff;
    color:var(--blue)!important;
    border:1px solid var(--border);
}

.tn-btn-light{
    background:#fff;
    color:var(--blue)!important;
}

.tn-hero{

position:relative;

padding:120px 0 80px;

overflow:hidden;

background:
linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}


.tn-hero:before{

content:'';

position:absolute;

top:-300px;
right:-300px;

width:900px;
height:900px;

border-radius:50%;

background:
radial-gradient(
rgba(0,99,200,.08),
transparent 70%
);

}


/* HERO VISUAL */

.tn-hero-visual{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

}


.tn-hero-glow{

position:absolute;

width:650px;
height:650px;

border-radius:50%;

background:
radial-gradient(
rgba(0,99,200,.08),
transparent 70%
);

filter:blur(40px);

animation:floatGlow 8s infinite ease-in-out;

}


.tn-hero-network{

position:relative;

width:120%;

max-width:none;

z-index:2;
border-radius: 20px 60% 20px 60%;

filter:
drop-shadow(
0 30px 60px rgba(0,0,0,.12)
);

animation:floatHero 6s infinite ease-in-out;

}


@keyframes floatHero{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-15px);

}

100%{

transform:
translateY(0px);

}

}


@keyframes floatGlow{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* HERO */

.tn-hero{

position:relative;

overflow:hidden;

padding:120px 0 80px;

background:
linear-gradient(
135deg,
#f7fbff,
#ffffff
);

}


/* background glow */

.tn-hero:before{

content:'';

position:absolute;

top:-300px;
right:-300px;

width:900px;
height:900px;

border-radius:50%;

background:
radial-gradient(
rgba(0,99,200,.07),
transparent 70%
);

}


/* HERO IMAGE AREA */

.tn-hero-visual{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

overflow:visible;

}


/* layer belakang */

.tn-hero-shape{

position:absolute;

right:-100px;

width:800px;

height:800px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(0,99,200,.08),
rgba(0,99,200,.02),
transparent
);

filter:blur(20px);

}


/* glow tambahan */

.tn-hero-glow{

position:absolute;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
rgba(0,99,200,.12),
transparent 75%
);

filter:blur(60px);

animation:heroGlow 8s infinite ease-in-out;

}


/* IMAGE */

.tn-hero-network{

position:relative;

z-index:2;

width:125%;

max-width:none;

mix-blend-mode:multiply;

filter:
drop-shadow(
0 30px 50px rgba(0,0,0,.10)
);

animation:floatHero 6s infinite ease-in-out;

}


/* animasi */

@keyframes floatHero{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-15px);

}

100%{

transform:
translateY(0);

}

}

@keyframes heroGlow{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}


/* MOBILE */

@media(max-width:992px){

.tn-hero-visual{

height:auto;

margin-top:40px;

}

.tn-hero-network{

width:100%;

}

}

/* MOBILE */

@media(max-width:992px){

.tn-hero-visual{

height:auto;

margin-top:40px;

}

.tn-hero-network{

width:100%;

}

}

.tn-kicker{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:#eaf5ff;
    color:var(--blue);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:25px;
}

.tn-hero-title{
    font-size:66px;
    line-height:1.05;
    letter-spacing:-2px;
    color:var(--blue-dark);
    font-weight:900;
    margin-bottom:24px;
}

.tn-hero-title span{
    color:var(--blue);
}

.tn-hero-text{
    max-width:610px;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    margin-bottom:34px;
}

.tn-hero-action{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:55px;
}

.tn-hero-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    max-width:680px;
}

.tn-hero-stats div{
    text-align:center;
}

.tn-hero-stats i{
    display:block;
    color:var(--blue);
    font-size:26px;
    margin-bottom:12px;
}

.tn-hero-stats strong{
    display:block;
    color:var(--blue-dark);
    font-size:26px;
    font-weight:900;
    line-height:1;
}

.tn-hero-stats span{
    color:var(--muted);
    font-size:12px;
}

.tn-hero-visual{
    position:relative;
    min-height:510px;
}

.tn-building-card{
    position:relative;
    height:520px;
    border-radius:42px;
    overflow:visible;
}

.tn-building{
    position:absolute;
    inset:0;
    border-radius:42px 0 0 42px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.4)),
        linear-gradient(135deg,#b7e5ff,#f7fbff);
    box-shadow:0 30px 80px rgba(0,99,200,.12);
    overflow:hidden;
}

.tn-building::before{
    content:"";
    position:absolute;
    right:70px;
    bottom:0;
    width:250px;
    height:450px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(135deg,#ffffff,#cfefff);
    box-shadow:inset 0 0 0 1px rgba(0,99,200,.12);
}

.tn-building::after{
    content:"";
    position:absolute;
    right:102px;
    bottom:0;
    width:185px;
    height:390px;
    background-image:linear-gradient(#0b67c7 1px,transparent 1px),linear-gradient(90deg,#0b67c7 1px,transparent 1px);
    background-size:32px 32px;
    opacity:.22;
}

.tn-building-logo{
    position:absolute;
    right:92px;
    top:105px;
    z-index:2;
    color:var(--blue);
    font-weight:900;
    font-size:22px;
    transform:rotate(0deg);
}

.tn-float-img{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.92);
    border:8px solid rgba(255,255,255,.75);
    border-radius:22px;
    padding:18px 20px;
    color:var(--blue);
    font-weight:900;
    box-shadow:0 18px 45px rgba(7,26,61,.16);
    backdrop-filter:blur(16px);
}

.tn-float-img i{
    font-size:26px;
}

.float-one{
    left:30px;
    top:70px;
}

.float-two{
    left:140px;
    top:220px;
}

.float-three{
    left:50px;
    bottom:75px;
}

.tn-section{
    padding:70px 0;
}

.tn-soft{
    background:linear-gradient(180deg,#eef8ff 0%,#f8fbff 100%);
}

.tn-section-head span{
    display:block;
    color:var(--blue);
    text-transform:uppercase;
    font-weight:900;
    font-size:13px;
    letter-spacing:.6px;
    margin-bottom:12px;
}

.tn-section-head h2{
    font-size:38px;
    line-height:1.18;
    color:var(--blue-dark);
    font-weight:900;
    letter-spacing:-1px;
    margin-bottom:0;
}

.tn-section-head p,
.tn-section-desc{
    color:var(--muted);
    font-size:17px;
    line-height:1.8;
    margin-bottom:0;
}

.tn-service{

position:relative;
height:100%;

background:#fff;

border-radius:25px;

overflow:hidden;

padding:0;

border:1px solid #e7eef8;

box-shadow:
0 20px 50px rgba(7,26,61,.05);

transition:.35s;
}

.tn-service:hover{

transform:translateY(-10px);

box-shadow:
0 35px 70px rgba(7,26,61,.12);

}

.tn-service-thumb{

height:220px;
overflow:hidden;

position:relative;
}

.tn-service-thumb:after{

content:'';

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.2),
transparent
);

}

.tn-service-thumb img{

width:100%;
height:100%;
object-fit:cover;

transition:.5s;
}

.tn-service:hover img{

transform:scale(1.08);

}

.tn-service-icon{

width:75px;
height:75px;

display:flex;
align-items:center;
justify-content:center;

background:white;

border-radius:18px;

font-size:30px;

color:#0063c8;

position:absolute;

left:30px;
top:180px;

box-shadow:
0 15px 30px rgba(0,0,0,.1);
}

.tn-service h3{

padding:
60px 30px 10px;

font-size:28px;
font-weight:800;

color:#061b4f;
}

.media-card{

position:relative;

height:520px;

overflow:hidden;

border-radius:30px;

cursor:pointer;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

transition:.5s;

}

.media-card:hover{

transform:
translateY(-10px);

box-shadow:
0 35px 80px rgba(0,0,0,.15);

}

.media-card img{

width:100%;
height:100%;

object-fit:cover;

transition:.7s;

}

.media-card:hover img{

transform:scale(1.1);

}

.media-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,.2),
transparent
);

}

.media-badge{

position:absolute;

top:25px;
left:25px;

padding:8px 15px;

border-radius:50px;

background:rgb(3 96 172);

backdrop-filter:blur(15px);

color:white;

font-size:12px;

font-weight:700;

z-index:3;

}

.media-content{

position:absolute;

left:0;
right:0;
bottom:0;

padding:35px;

z-index:2;

color:white;

}

.media-icon{

width:70px;
height:70px;

border-radius:20px;

background:
rgba(255,255,255,.15);

backdrop-filter:blur(15px);

display:flex;

align-items:center;
justify-content:center;

font-size:28px;

margin-bottom:20px;

}

.media-content h3{

font-size:30px;

font-weight:800;

margin-bottom:15px;

}

.media-content p{

line-height:1.8;

font-size:15px;

color:
rgba(255,255,255,.8);

min-height:90px;

}

.media-content a{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:15px;

color:white;

font-weight:700;

padding-bottom:5px;

border-bottom:
2px solid rgba(255,255,255,.4);

transition:.3s;

}

.media-content a:hover{

gap:18px;

border-color:white;

}

.tn-service p{

padding:0 30px;

min-height:90px;

font-size:15px;
line-height:1.8;

color:#6f7787;
}

.tn-service-btn{

margin:20px;

display:inline-flex;

align-items:center;
gap:10px;

padding:14px 24px;

border-radius:50px;

background:
linear-gradient(
135deg,
#0063c8,
#00a2ff
);

color:white!important;

font-size:14px;
font-weight:700;

transition:.3s;

box-shadow:
0 15px 30px rgba(0,99,200,.25);

}

.tn-service-btn:hover{

transform:translateY(-3px);

box-shadow:
0 20px 40px rgba(0,99,200,.35);

}

.tn-service-btn i{

transition:.3s;
}

.tn-service-btn:hover i{

transform:translateX(5px);

}

.tn-map{

position:relative;

height:650px;

background:
linear-gradient(
135deg,
#f8fbff,
#ffffff
);

border-radius:35px;

padding:30px;

overflow:hidden;

border:1px solid #edf2f7;

box-shadow:
0 20px 60px rgba(0,0,0,.05);

display:flex;

align-items:center;
justify-content:center;

}


.tn-network-map{

width:100%;
max-width:1100px;

height:auto;

object-fit:contain;

transition:.6s;

filter:
drop-shadow(
0 20px 30px rgba(0,0,0,.08)
);

}


.tn-network-map:hover{

transform:
scale(1.02);

}

.tn-network-card{

position:relative;

border-radius:35px;

overflow:hidden;

background:
linear-gradient(
135deg,
#0b4fb8,
#0063c8,
#3aa0ff
);

padding:10px;

min-height:auto;

box-shadow:
0 30px 70px rgba(0,99,200,.15);

}

.tn-section-head{

margin-bottom:40px;

}

.tn-section-head p{

max-width:700px;

margin:auto;

line-height:1.8;

color:#6f7787;

}

.tn-partner-box{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:30px;

padding:40px;

border-radius:30px;

background:white;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

}

.tn-logo-item img{

height:45px;

width:auto;

object-fit:contain;

transition:.3s;

opacity:.8;

filter:grayscale(100%);

}

.tn-logo-item img:hover{

opacity:1;

filter:none;

transform:scale(1.08);

}


.tn-network-img{

width:100%;

display:block;

border-radius:25px;

transition:.5s;

}

.tn-network-card:hover .tn-network-img{

transform:scale(1.02);

}


.tn-network-overlay{

position:absolute;

bottom:25px;

left:25px;

right:25px;

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}


.tn-mini-card{

padding:18px 30px;

border-radius:20px;

background:
rgba(255,255,255,.92);

backdrop-filter:blur(20px);

text-align:center;

min-width:170px;

box-shadow:
0 15px 30px rgba(0,0,0,.08);

}

.tn-mini-card strong{

display:block;

font-size:30px;

font-weight:800;

color:#0063c8;

}

.tn-mini-card span{

font-size:13px;

color:#6f7787;

}


@media(max-width:768px){

.tn-network-card{

min-height:auto;

padding:15px;

}

.tn-network-overlay{

position:relative;

margin-top:20px;

bottom:auto;
left:auto;
right:auto;

}

}


/* MOBILE */

@media(max-width:768px){

.tn-map{

height:350px;
padding:15px;

}

}

.tn-map-shape{
    position:absolute;
    inset:10px 0;
    background:
        radial-gradient(circle,#92cfff 2px,transparent 2px);
    background-size:14px 14px;
    opacity:.85;
    clip-path:polygon(7% 36%,17% 30%,27% 44%,42% 43%,52% 52%,64% 43%,76% 45%,88% 36%,96% 54%,86% 68%,69% 63%,55% 71%,39% 66%,27% 76%,15% 66%);
}

.tn-pin{
    position:absolute;
    background:#fff;
    border-radius:12px;
    padding:10px 14px;
    color:var(--blue-dark);
    font-size:12px;
    font-weight:900;
    box-shadow:0 14px 34px rgba(7,26,61,.12);
}

.tn-pin::before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    background:var(--blue);
    border-radius:50%;
    margin-right:8px;
}

.pin-1{left:18%;top:8%}
.pin-2{left:24%;top:42%}
.pin-3{left:31%;top:61%}
.pin-4{left:26%;top:74%}
.pin-5{left:48%;top:66%}
.pin-6{left:63%;top:78%}
.pin-7{left:61%;top:48%}
.pin-8{right:4%;top:37%}

.tn-wide-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:35px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(7,26,61,.06);
    overflow:hidden;
}

.tn-wide-stats div{
    padding:28px 30px;
    display:flex;
    align-items:center;
    gap:18px;
    border-right:1px solid var(--border);
}

.tn-wide-stats div:last-child{
    border-right:0;
}

.tn-wide-stats i{
    color:var(--blue);
    font-size:32px;
}

.tn-wide-stats strong{
    display:block;
    font-size:28px;
    color:var(--blue-dark);
    font-weight:900;
    line-height:1;
}

.tn-wide-stats span{
    display:block;
    font-size:13px;
    color:var(--muted);
}

.tn-partner-strip{
    padding:40px 0 35px;
}

.tn-partner-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:25px;
    box-shadow:0 18px 45px rgba(7,26,61,.06);
    flex-wrap:wrap;
}

.tn-logo-item img{
    max-height:45px;
    max-width:130px;
    /*object-fit:contain;*/
    /*filter:grayscale(1);*/
    /*opacity:.8;*/
}

.tn-logo-text{
    color:var(--blue);
    font-weight:900;
    font-size:18px;
}

.tn-see-all{
    color:var(--blue);
    font-weight:900;
}

.tn-insight-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(7,26,61,.06);
    transition:.28s ease;
    height:100%;
}

.tn-insight-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 70px rgba(7,26,61,.1);
}

.tn-insight-img{
    height:170px;
    background-size:cover;
    background-position:center;
}

.img-1{background:linear-gradient(135deg,#d9efff,#fff)}
.img-2{background:linear-gradient(135deg,#0a62c4,#9ed7ff)}
.img-3{background:linear-gradient(135deg,#e8f5ff,#b9e5ff)}
.img-4{background:linear-gradient(135deg,#07275e,#d8eeff)}

.tn-insight-body{
    padding:22px;
}

.tn-insight-body span{
    display:inline-block;
    background:#eaf5ff;
    color:var(--blue);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    padding:5px 9px;
    border-radius:8px;
    margin-bottom:12px;
}

.tn-insight-body h3{
    font-size:17px;
    line-height:1.45;
    color:var(--blue-dark);
    font-weight:900;
    margin-bottom:14px;
}

.tn-insight-body small{
    color:var(--muted);
}

.tn-cta{
    /*margin-top:55px;*/
    padding:36px 42px;
    border-radius:18px;
    background:linear-gradient(135deg,#0063c8,#0050b5);
    color:#fff;
    display:grid;
    grid-template-columns:1.3fr 1.4fr auto;
    gap:30px;
    align-items:center;
    box-shadow:0 20px 55px rgba(0,99,200,.22);
}

.tn-cta h2{
    font-size:34px;
    font-weight:900;
    line-height:1.2;
    margin:0;
}

.tn-cta p{
    color:rgba(255,255,255,.8);
    line-height:1.7;
    margin:0;
}

.tn-footer{
    padding:70px 0 25px;
    background:#fff;
    border-top:1px solid var(--border);
}

.tn-footer-logo{
    height:52px;
    margin-bottom:22px;
}

.tn-footer p{
    color:var(--muted);
    line-height:1.8;
}

.tn-footer h4{
    color:var(--blue);
    font-weight:900;
    font-size:16px;
    margin-bottom:20px;
}

.tn-footer a{
    display:block;
    color:#263858;
    margin-bottom:12px;
    font-size:14px;
}

.tn-footer a:hover{
    color:var(--blue);
}

.tn-social{
    display:flex;
    gap:10px;
    margin-top:22px;
}

.tn-social a{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf5ff;
    color:var(--blue);
    border-radius:50%;
}

.tn-footer-bottom{
    border-top:1px solid var(--border);
    margin-top:45px;
    padding-top:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    font-size:13px;
}

.tn-footer-bottom div{
    display:flex;
    gap:24px;
}

.tn-footer-bottom a{
    margin:0;
    color:var(--muted);
}

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:.7s ease;
}

.reveal.show{
    opacity:1;
    transform:none;
}

@media(max-width:991px){
    .tn-navbar{
        min-height:72px;
    }

    .tn-menu{
        padding:18px 0;
    }

    .tn-hero{
        padding:120px 0 50px;
    }

    .tn-hero::after{
        display:none;
    }

    .tn-hero-title{
        font-size:44px;
    }

    .tn-hero-text{
        font-size:16px;
    }

    .tn-hero-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .tn-hero-visual{
        min-height:360px;
    }

    .tn-building-card{
        height:360px;
    }

    .tn-building::before{
        height:320px;
        width:180px;
        right:45px;
    }

    .tn-building::after{
        height:270px;
        width:130px;
        right:70px;
    }

    .tn-float-img{
        padding:12px 14px;
        font-size:12px;
    }

    .tn-section{
        padding:70px 0;
    }

    .tn-section-head h2{
        font-size:30px;
    }

    .tn-wide-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .tn-wide-stats div{
        border-bottom:1px solid var(--border);
    }

    .tn-cta{
        grid-template-columns:1fr;
        padding:30px;
    }

    .tn-footer-bottom{
        display:block;
    }

    .tn-footer-bottom div{
        margin-top:15px;
        flex-wrap:wrap;
    }
}

@media(max-width:575px){
    .tn-hero-title{
        font-size:38px;
    }

    .tn-hero-stats{
        grid-template-columns:1fr;
        text-align:left;
    }

    .tn-hero-stats div{
        display:flex;
        align-items:center;
        gap:15px;
        text-align:left;
    }

    .tn-wide-stats{
        grid-template-columns:1fr;
    }

    .tn-map{
        min-height:330px;
    }

    .tn-pin{
        font-size:10px;
        padding:7px 9px;
    }
}