@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#071b35;--blue:#2677df;--cyan:#65c7ed;--muted:#68788d;--light:#f4f7fb}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;font-family:'DM Sans',sans-serif;color:#14243a}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,calc(100% - 48px));margin:auto}
header{height:82px;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #edf0f5}
.navbar{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font:800 21px Manrope;letter-spacing:1px;color:var(--navy)}
.brand small{display:block;font:600 8px 'DM Sans';letter-spacing:2px;color:#7b8ba0;margin-top:3px}
.logo{width:39px;height:39px;background:linear-gradient(135deg,#277be5,#50c4e8);border-radius:11px;color:white;display:grid;place-items:center;font:800 24px Manrope}
nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:600;color:#526176}
nav a:hover{color:var(--blue)}
nav .portal{background:var(--navy);color:#fff;padding:13px 18px;border-radius:7px}
#menuBtn{display:none}
.hero{background:linear-gradient(115deg,#07182e,#0b2a4c 65%,#103e69);color:white;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:550px;height:550px;border-radius:50%;background:#1675d5;filter:blur(150px);opacity:.2;right:5%;top:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:550px;padding-top:35px;padding-bottom:35px}
.eyebrow,.tag{font-size:10px;letter-spacing:2.4px;font-weight:700;color:#2784dc;margin-bottom:23px}
.eyebrow{color:#75c9f2}.eyebrow i{display:inline-block;width:7px;height:7px;background:#4bd6c2;border-radius:50%;margin-right:9px}
h1,h2{font:800 clamp(40px,5vw,64px)/1.12 Manrope;letter-spacing:-2.7px;margin:0}
h1 span,.statement h2 span{color:#65c7ed}
.hero-grid>div:first-child>p{max-width:510px;color:#bdcad9;line-height:1.9;font-size:15px;margin:24px 0 30px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;padding:15px 21px;border-radius:6px;font-size:13px;font-weight:700;align-items:center;justify-content:center}
.primary{background:linear-gradient(110deg,#2677df,#35a8df);color:white}
.outline{border:1px solid #71869d66;color:white}
.note{margin-top:32px;color:#8ea3ba;font-size:11px}
.visual{height:390px;display:grid;place-items:center;position:relative}
.ring{position:absolute;width:360px;height:360px;border:1px solid #6fc7f344;border-radius:50%;box-shadow:0 0 0 45px #6fc7f311,0 0 0 90px #6fc7f308}
.network{width:300px;height:285px;border:1px solid #ffffff30;border-radius:18px;background:linear-gradient(145deg,#ffffff17,#ffffff06);padding:22px;text-align:center;position:relative;z-index:2;box-shadow:0 30px 90px #0004}
.network small{display:block;font-size:9px;letter-spacing:1.5px;color:#a8bed4}
.network-logo{width:112px;height:112px;margin:35px auto 15px;border-radius:30px;background:linear-gradient(135deg,#277be5,#51c9e7);display:grid;place-items:center;font:800 70px Manrope;box-shadow:0 0 55px #2699ed55}
.network-line{height:1px;background:#ffffff30;margin:20px 0}
.network b{display:block;font-size:10px;letter-spacing:1.5px;color:#65c7ed;margin-bottom:9px}
.float{position:absolute;z-index:3;background:white;color:#14243a;padding:14px 17px;border-radius:8px;font-size:11px;font-weight:700;box-shadow:0 12px 40px #0003}
.one{top:45px;right:0}.two{bottom:40px;left:0}
.hero-foot{position:relative;z-index:2;border-top:1px solid #ffffff20;padding:18px 0;display:flex;justify-content:space-between;color:#849bb3;font-size:9px;letter-spacing:1.8px}
section.section{padding:100px 0}
.about-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
h2{font-size:43px;color:var(--navy);letter-spacing:-2px}
h2 span{color:var(--blue)}
.description{color:var(--muted);font-size:14px;line-height:1.9}
.services{background:var(--light)}
.heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.heading>p{max-width:380px;color:var(--muted);font-size:13px;line-height:1.9}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:white;padding:27px 23px;border:1px solid #e8edf4;border-radius:9px;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 45px #132b4910}
.card.featured{border-top:3px solid var(--blue)}
.card>small{font-size:9px;letter-spacing:1.5px;color:#91a0b2}
.ico{width:46px;height:46px;border-radius:10px;background:#edf5ff;color:var(--blue);display:grid;place-items:center;font-size:25px;margin:24px 0 19px}
.card h3{font:700 18px Manrope;margin:0 0 12px;color:var(--navy)}
.card p{font-size:12px;line-height:1.8;color:var(--muted);min-height:110px}
.card>a{display:flex;justify-content:space-between;margin-top:20px;font-size:11px;font-weight:700;color:var(--blue)}
.statement{padding:95px 0;background:linear-gradient(110deg,#081b34,#0e3c69);color:white;text-align:center}
.statement h2{font-size:43px;color:white}
.statement p{color:#b7c8da;font-size:13px;margin-top:22px}
.testimonial{padding:43px;text-align:center;background:#f6f9fd;border:1px solid #e9eff6;border-radius:10px}
.quote{font:800 65px Georgia;color:#b5d9fa;height:60px}
.testimonial h3{font:700 19px Manrope;color:var(--navy)}
.testimonial p{color:var(--muted);font-size:13px}
.testimonial a{display:inline-block;margin-top:12px;color:var(--blue);font-size:12px;font-weight:700}
.contact{background:var(--navy);color:white}
.contact h2{color:white}
.contact-grid>div:first-child>p{color:#aebfd1;max-width:430px;font-size:14px;line-height:1.9;margin:22px 0 27px}
.details{display:grid;grid-template-columns:1fr 1fr;gap:34px 25px}
.details>div{border-bottom:1px solid #ffffff20;padding-bottom:18px}
.details small{display:block;color:#7f9bb8;font-size:9px;letter-spacing:1.7px;margin-bottom:12px}
.details a,.details p{color:white;font-size:14px;margin:0}
footer{background:#041225;color:white;padding:36px 0 20px}
.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:30px}
.footer-top .brand{color:white}
.footer-top p{color:#8396ad;font-size:12px;line-height:1.7}
.footer-top>a:last-child{font-size:12px;color:#71c6ee}
.footer-bottom{border-top:1px solid #ffffff1a;padding-top:19px;display:flex;justify-content:space-between;color:#71849b;font-size:10px}
@media(max-width:900px){nav{gap:14px}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
 .container{width:calc(100% - 36px)}
 header{height:70px}
 #menuBtn{display:block;border:0;background:none;font-size:25px;color:var(--navy)}
 nav{display:none;position:absolute;top:70px;left:0;right:0;background:white;padding:22px 24px;box-shadow:0 15px 25px #0b254015;flex-direction:column;align-items:stretch;gap:20px}
 nav.open{display:flex}
 nav .portal{text-align:center}
 .hero-grid{display:block;padding-top:70px;padding-bottom:20px}
 h1{font-size:46px}
 .hero-grid>div:first-child>p{font-size:14px}
 .visual{height:350px;margin-top:20px}
 .network{transform:scale(.88)}
 .one{right:0;top:25px}.two{left:0;bottom:20px}
 .hero-foot{font-size:8px}
 section.section{padding:75px 0}
 .about-grid,.contact-grid{grid-template-columns:1fr;gap:25px}
 h2,.statement h2{font-size:35px}
 .heading{display:block}
 .heading>p{margin-top:20px}
 .cards{grid-template-columns:1fr}
 .card p{min-height:0}
 .statement{padding:75px 0}
 .details{gap:25px 14px}
 .details a,.details p{font-size:12px}
 .footer-top{align-items:flex-start;gap:20px;flex-wrap:wrap}
 .footer-top p{margin:0}
 .footer-bottom{gap:12px;flex-direction:column}
 .testimonial{padding:30px 18px}
}

/* FRNET Official Logo */
.logo-img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 175px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .logo-img {
        height: 39px;
        max-width: 150px;
    }
}

/* Logo resmi FRNET */
.logo-img {
    width: auto;
    height: 43px;
    max-width: 175px;
    object-fit: contain;
    object-position: left center;
}

.network-logo {
    display: block;
    width: 140px;
    height: 140px;
    margin: 35px auto 15px;
    padding: 18px;
    object-fit: contain;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 0 55px #2699ed55;
}

/* Animated headline */
#headline-top,
#headline-bottom {
    display: inline-block;
    transition: opacity .35s ease, transform .35s ease;
}

#headline-top.changing,
#headline-bottom.changing {
    opacity: 0;
    transform: translateY(12px);
}

.headline-accent {
    color: #65c7ed !important;
}

@media(max-width:680px) {
    .logo-img {
        height: 39px;
        max-width: 150px;
    }

    .network-logo {
        width: 120px;
        height: 120px;
        padding: 15px;
    }
}

@media(prefers-reduced-motion:reduce) {
    #headline-top,
    #headline-bottom {
        transition: none;
    }
}

/* ===== MODERN BUTTON ANIMATION ===== */

/* Tombol umum */
.btn,
.service-btn,
.footer-top>a:last-child,
nav .portal {
    position: relative;
    overflow: hidden;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        color .28s ease;
}

/* Efek kilau */
.btn::before,
.service-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -120%;
    width: 55%;
    height: 200%;
    background: linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: skewX(-25deg);
    transition: left .65s ease;
    pointer-events: none;
}

.btn:hover::before,
.service-btn:hover::before {
    left: 150%;
}

/* Tombol utama */
.btn.primary {
    box-shadow: 0 7px 20px rgba(38,119,223,.22);
}

.btn.primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 30px rgba(38,119,223,.38);
    background: linear-gradient(110deg,#1764ca,#27b2e4);
}

/* Tombol outline */
.btn.outline:hover {
    transform: translateY(-4px);
    border-color: #65c7ed;
    background: rgba(101,199,237,.12);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

/* Tombol pada kartu layanan */
.service-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    margin-top: 18px;
    border-radius: 7px;
    background: #edf5ff;
    color: #176de0 !important;
    font-size: 12px !important;
    font-weight: 700;
    border: 1px solid transparent;
}

.service-btn b {
    transition: transform .28s ease;
}

.service-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(110deg,#2677df,#35a8df);
    color: #fff !important;
    box-shadow: 0 9px 22px rgba(38,119,223,.25);
}

.service-btn:hover b {
    transform: translate(4px,-3px);
}

/* Efek kartu saat tombol diarahkan */
.card:has(.service-btn:hover) {
    border-color: #9cc7f8;
    box-shadow: 0 15px 35px rgba(38,119,223,.12);
}

/* Portal pelanggan */
nav .portal:hover {
    transform: translateY(-3px);
    background: #2677df;
    box-shadow: 0 8px 20px rgba(38,119,223,.25);
}

/* Efek klik */
.btn:active,
.service-btn:active,
nav .portal:active {
    transform: scale(.96);
}

/* Aksesibilitas keyboard */
.btn:focus-visible,
.service-btn:focus-visible,
nav a:focus-visible {
    outline: 3px solid #65c7ed;
    outline-offset: 4px;
}

@media(prefers-reduced-motion:reduce) {
    .btn,
    .service-btn,
    .service-btn b,
    nav .portal {
        transition: none !important;
    }

    .btn::before,
    .service-btn::before {
        display: none;
    }
}

/* SEO Local Coverage */
.coverage {
    background: #fff;
}

.coverage-desc {
    max-width: 680px;
    color: #68788d;
    line-height: 1.9;
    font-size: 14px;
    margin: 24px 0;
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.area-list span {
    background: #edf5ff;
    color: #176de0;
    border: 1px solid #dceaff;
    border-radius: 7px;
    padding: 12px 17px;
    font-size: 12px;
    font-weight: 600;
    transition: .25s ease;
}

.area-list span:hover {
    background: #2677df;
    color: #fff;
    transform: translateY(-3px);
}

.coverage-note {
    margin-top: 22px;
    color: #8190a3;
    font-size: 11px;
}

/* FRNET IT Solutions */
.cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.card {
    display: flex;
    flex-direction: column;
    min-height: 310px;
}

.card p {
    flex: 1;
}

.card .service-btn {
    margin-top: 18px;
}

.card:hover .ico {
    transform: translateY(-3px) rotate(-5deg);
    background: #dcecff;
}

.card .ico {
    transition: .3s ease;
}

@media(max-width: 900px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width: 520px) {
    .cards {
        grid-template-columns: 1fr;
    }

    .card {
        min-height: 270px;
    }
}