/* =====================================================
   Nusantara Internet Exchange
   PT Lintas Daya Nusantara

   Enterprise Network Website Style
===================================================== */


/* =========================
   ROOT
========================= */

:root {
    --primary: #1B4DFF;
    --primary-dark: #1236B8;
    --dark: #0B1324;
    --text: #253047;
    --gray: #667085;
    --light: #F5F7FA;
    --border: #E5E7EB;
    --white: #FFFFFF;
}



/* =========================
   RESET
========================= */


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


html {
    scroll-behavior:smooth;
}


body {
    font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
    color:var(--text);
    background:#FFFFFF;
    line-height:1.7;
}



/* =========================
   GLOBAL
========================= */


.container {
    width:90%;
    max-width:1200px;
    margin:auto;
}

h1,
h2,
h3 {
    color:var(--dark);
    line-height:1.3;
}

h2 {
    font-size:36px;
    font-weight:700;
    margin-bottom:30px;
}

p {
    color:var(--gray);
    font-size:17px;
}

img {
    max-width:100%;
}



/* =========================
   HEADER
========================= */

header {
    height:80px;
    position:sticky;
    top:0;
    z-index:100;
    background:white;
    border-bottom:
    1px solid var(--border);
}

.header-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img {
    height:50px;
    width:auto;
}

/* Navigation */


nav {
    display:flex;
    align-items:center;
    gap:35px;
}

nav a {
    text-decoration:none;
    color:var(--text);
    font-size:15px;
    font-weight:500;
    transition:.2s;
}

nav a:hover {
    color:var(--primary);
}



/* Button */

.button {
    display:inline-block;
    padding:12px 25px;
    background:var(--primary);
    color:white;
    text-decoration:none;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    transition:.2s;
}

.button:hover {
    background:var(--primary-dark);
}


/* =========================
   HERO
========================= */


.hero {
    padding: 100px 0;
}

.hero-grid {
    display:grid;
    grid-template-columns:
    1fr 1fr;
    gap:80px;
    align-items:center;
}

.hero h1 {
    font-size:64px;
    font-weight:700;
    letter-spacing:-1px;
    margin-bottom:25px;
}

.hero p {
    max-width:550px;
    margin-bottom:20px;
}

.hero .operator {
    margin-top:25px;
}

.hero .operator strong {
    color:var(--dark);
}

.hero-image {
    text-align:center;
}

.hero-image img {
    max-width:450px;
}


/* =========================
   STATISTICS
========================= */


.stats {
    background: var(--light);
    padding: 60px 0;
}

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

.stats-grid div {
    padding-left: 25px;
    border-right: 1px solid var(--border);

}

.stats-grid div:last-child {
    border:none;
}

.stats strong {
    display: block;
    color: var(--dark);
    font-size:38px;
    font-weight:700;
}



.stats span {

    color:var(--gray);

    font-size:15px;

}



.counter {

    font-variant-numeric:

    tabular-nums;

}





/* =========================
   SECTION
========================= */


section {

    padding:90px 0;

}



.content {

    max-width:850px;

}



.content p {

    margin-bottom:20px;

}



/* =========================
   GRAY SECTION
========================= */


.gray {

    background:

    var(--light);

}





/* =========================
   SERVICES
========================= */


.service-list {

    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:40px;

}



.service-list div {


    padding-bottom:30px;


    border-bottom:

    1px solid var(--border);

}



.service-list h3 {

    font-size:22px;


    margin-bottom:10px;

}



.service-list p {

    margin:0;

}





/* =========================
   NETWORK MAP
========================= */


.network-map {

    margin-top:30px;


    height:400px;


    display:flex;


    align-items:center;


    justify-content:center;


    border:


    1px solid var(--border);


    background:white;


    border-radius:10px;

}



.network-map img {

    max-height:300px;

}





/* =========================
   MEMBERS LOGO
========================= */


.subtitle {

    color:var(--gray);

    margin-bottom:40px;

}



.member-logos {

    display:grid;


    grid-template-columns:

    repeat(5,1fr);


    gap:40px;


    align-items:center;

}



.member-logos img {


    max-height:60px;


    max-width:150px;


    margin:auto;


    filter:grayscale(100%);


    opacity:.7;


    transition:.3s;

}



.member-logos img:hover {


    filter:grayscale(0);


    opacity:1;

}





/* =========================
   REQUEST PEERING
========================= */


.peering-request {

    background:#F5F7FA;

    text-align:center;

}



.peering-request .container {

    max-width:800px;

}



.peering-request h2 {

    margin-bottom:20px;

}



.peering-request p {

    margin-bottom:35px;

}



.peering-button {

    margin-top:20px;

}

/* =========================
   FOOTER
========================= */


footer {

    background:#0B1324;

    color:white;

    padding:60px 0 30px;

}



.footer-grid {

    display:grid;

    grid-template-columns:

    2fr 1fr 1fr;

    gap:50px;

}



.footer-brand h3 {

    color:white;

    font-size:22px;

    margin-bottom:15px;

}



.footer-brand p,
.footer-contact p,
.footer-address p {

    color:#CBD5E1;

    font-size:15px;

}



footer h4 {

    color:white;

    font-size:16px;

    margin-bottom:15px;

}



.footer-contact p,
.footer-address p {

    line-height:1.8;

}



.footer-bottom {

    margin-top:40px;

    padding-top:25px;

    border-top:

    1px solid rgba(255,255,255,.15);


    text-align:center;


    color:#94A3B8;

    font-size:14px;

}



@media(max-width:700px){


.footer-grid {

    grid-template-columns:1fr;

    gap:30px;

}


}



/* =========================
   MOBILE MENU
========================= */


.mobile-toggle {


    display:none;


    border:none;


    background:none;


    font-size:26px;


    cursor:pointer;

}





/* =========================
   RESPONSIVE
========================= */


@media(max-width:1000px){


.hero-grid {


    grid-template-columns:1fr;


    gap:40px;


}



.hero {


    padding:70px 0;

}



.hero h1 {


    font-size:48px;


}



.stats-grid {


    grid-template-columns:

    repeat(2,1fr);


}



.stats-grid div {


    border:none;


}



.member-logos {


    grid-template-columns:

    repeat(3,1fr);


}


}




@media(max-width:600px){


.container {

    width:92%;

}



header {

    height:75px;

}



.mobile-toggle {

    display:block;

}



nav {

    display:none;

}



nav.open {


    display:flex;


    flex-direction:column;


    position:absolute;


    top:75px;


    left:0;


    width:100%;


    background:white;


    padding:25px;


    border-bottom:

    1px solid var(--border);


}



.header-inner {

    flex-wrap:wrap;

}



.logo img {

    height:40px;

}



.hero h1 {


    font-size:38px;


}



.hero p {


    font-size:16px;


}



.stats-grid {


    grid-template-columns:

    1fr;


}



.service-list {


    grid-template-columns:

    1fr;


}



.member-logos {


    grid-template-columns:

    repeat(2,1fr);


}



h2 {

    font-size:30px;

}


}