/* IndoFiber Net — homepage perusahaan. CSS murni, tanpa library. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --purple:#3D33FF; --purple-dark:#2B22D9; --purple-deep:#2A21C9; --purple-50:#EEEDFF;
  --cyan:#38B6FF; --cyan-50:#E7F6FF; --cyan-700:#0A6FA8;
  --bg:#F6F8FC; --surface:#fff; --ink:#172B4D; --muted:#53627C; --line:#DEE4EF; --line-soft:#EBEFF6;
  --warn-bg:#FFF4D6; --warn-line:#F0D58A; --warn-ink:#6B4600;
  --radius:16px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(23,43,77,.04),0 12px 32px rgba(23,43,77,.08);
  --shadow-lg:0 2px 4px rgba(23,43,77,.05),0 28px 60px -20px rgba(31,22,160,.45);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%}
a{color:var(--purple)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:#fff;color:var(--purple);font-weight:700;padding:10px 14px;border-radius:10px;transition:top .15s}
.skip:focus{top:12px}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .05s,box-shadow .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9375rem;border-radius:10px}
.btn-lg{min-height:56px;font-size:1.0625rem}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,#4a41ff,var(--purple));color:#fff;box-shadow:0 6px 16px rgba(61,51,255,.28)}
.btn-primary:hover{background:var(--purple-dark)}
.btn-light{background:#fff;color:var(--purple);box-shadow:0 8px 20px -6px rgba(10,8,90,.45)}
.btn-light:hover{background:var(--cyan-50)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-wa{background:#25D366;color:#06351B;font-weight:800;box-shadow:0 6px 16px rgba(37,211,102,.30)}
.btn-wa:hover{background:#1fbf5b}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.label{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Header */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:block;line-height:0;flex:none}
.brand img{height:44px;width:auto;display:block}
.nav{display:none}
.nav a{color:#fff;font-weight:700;font-size:.9375rem;text-decoration:none;padding:10px 14px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.14)}

/* Hero: dasar ungu, busur sinyal cyan (mengulang motif logo) */
.hero{position:relative;isolation:isolate;color:#fff;padding:108px 0 64px;
  background:
    radial-gradient(60% 60% at 0% 100%,rgba(140,100,255,.50),transparent 65%),
    linear-gradient(170deg,var(--purple) 0%,var(--purple) 30%,var(--purple-deep) 100%)}
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:0;top:0;width:min(92vw,460px);aspect-ratio:1;
  background:
    radial-gradient(circle at 100% 0,rgba(56,182,255,.55) 0 14px,transparent 15px),
    repeating-radial-gradient(circle at 100% 0,transparent 0 44px,rgba(56,182,255,.20) 44px 88px);
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,#000 50%,transparent 76%);
  mask-image:radial-gradient(circle at 100% 0,#000 0,#000 50%,transparent 76%)}
.hero-in{display:grid;gap:32px}
.eyebrow{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.02em;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26)}
.hero h1{margin-top:16px;font-size:clamp(2rem,8.4vw,3.5rem);line-height:1.1;font-weight:800;letter-spacing:-.028em;max-width:16ch}
.lead{margin-top:16px;font-size:1.0625rem;line-height:1.6;color:#fff;max-width:46ch}
.cta{margin-top:30px;display:flex;flex-direction:column;gap:14px;max-width:460px}
.cta .btn{width:100%;min-height:68px;font-size:1.1875rem;padding:0 32px;border-radius:14px}

/* Seksi */
.sec{padding:84px 0 8px}
.sec:first-of-type{padding-top:84px}
.kicker{font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.sec h2{margin-top:6px;font-size:clamp(1.5rem,5.6vw,2.125rem);line-height:1.2;font-weight:800;letter-spacing:-.02em}
.grid3{margin-top:24px;display:grid;gap:14px}
.svc{padding:22px 20px;transition:transform .2s,box-shadow .2s}
.svc:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(23,43,77,.05),0 18px 40px rgba(23,43,77,.12)}
.ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--purple-50);color:var(--purple);margin-bottom:14px}
.svc h3{font-size:1.125rem;font-weight:800}
.svc p{margin-top:8px;color:var(--muted);font-size:.9688rem}

/* Kontak & member */
.contact{padding:22px 20px;display:grid;gap:16px;justify-items:start}
.wa-ic{line-height:0}
.contact h2{margin:0;font-size:1.25rem}
.contact-text p{margin-top:6px;color:var(--muted)}
.wa-num{display:inline-block;margin-top:10px;color:var(--purple);font-weight:800;font-size:1.25rem;text-decoration:none;border-bottom:2px solid var(--cyan)}
.contact .btn{width:100%}
.member{margin-top:14px;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.m-label{font-weight:700;flex-basis:100%}
.logo-chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.logo-chip img{height:32px;width:auto;display:block}

/* Footer */
.foot{margin-top:72px;color:#fff;padding:30px 0;font-size:.875rem;
  background:radial-gradient(60% 120% at 100% 100%,rgba(56,182,255,.32),transparent 60%),linear-gradient(170deg,var(--purple) 0%,var(--purple) 38%,var(--purple-deep) 100%)}
.foot-in{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-in img{height:40px;width:auto;display:block}
.foot small{display:block;color:#fff}
.foot-link{color:#fff;font-weight:700;text-underline-offset:4px}

/* Tablet & desktop */
@media (min-width:768px){
  .brand img{height:50px}
  .top-in{gap:24px}
  .top-in .btn-sm{margin-left:0}
  .hero{padding-top:128px;padding-bottom:80px}
  .hero::before{width:640px}
  .cta{flex-direction:row;max-width:none}
  .cta .btn{width:auto;min-height:76px;font-size:1.3125rem;padding:0 44px}
  .sec{padding-top:104px}
  .grid3{grid-template-columns:repeat(3,1fr);gap:18px}
  .svc{padding:28px 24px}
  .contact{grid-template-columns:auto 1fr auto;align-items:center;gap:20px 24px;padding:28px 32px;justify-items:stretch}
  .contact .btn{width:auto}
  .member{padding:16px 32px}
  .m-label{flex-basis:auto}
  .logo-chip{padding:8px 16px}.logo-chip img{height:40px}
  .foot-in{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:980px){
  .hero{padding-top:140px}
  .hero{padding-bottom:88px}
}

/* Paket & produk */
.sec-sub{margin-top:10px;color:var(--muted);max-width:56ch}
.more{display:inline-block;margin-top:14px;font-weight:800;font-size:.9375rem;color:var(--purple);text-decoration:none;border-bottom:2px solid var(--cyan)}
.more:hover{color:var(--purple-dark)}
.ph{background:var(--warn-bg);color:var(--warn-ink);border-radius:6px;padding:0 6px;box-shadow:inset 0 0 0 1px var(--warn-line)}
.grid4{margin-top:24px;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.prod{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.prod:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(23,43,77,.05),0 18px 40px rgba(23,43,77,.12)}
.prod h3{font-size:1.0625rem;font-weight:800;line-height:1.3}
.prod-desc{color:var(--muted);font-size:.9rem;line-height:1.5}
.prod-link{margin-top:auto;padding-top:8px;font-weight:800;font-size:.9375rem;color:var(--purple);text-decoration:none}
.prod-link:hover{text-decoration:underline;text-underline-offset:4px}
.prod-more{margin-top:20px;color:var(--muted)}
.prod-more a{font-weight:800}
@media (min-width:768px){
  .grid4{grid-template-columns:repeat(4,1fr);gap:18px}
}
@media (min-width:980px){.nav{display:flex;gap:2px}}

/* Paket per segmen */
.seg{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.seg:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(23,43,77,.05),0 22px 48px rgba(23,43,77,.14)}
.segs{margin-top:28px;align-items:stretch}
.seg-art{position:relative;height:200px;display:grid;place-items:center;overflow:hidden}
.seg-art svg{display:block;width:100%;max-width:400px;height:auto;margin-top:18px}
.seg-home .seg-art{background:radial-gradient(70% 90% at 90% 0%,rgba(56,182,255,.35),transparent 60%),linear-gradient(160deg,#EEEDFF,#E7F6FF)}
.seg-office .seg-art{background:radial-gradient(70% 90% at 90% 0%,rgba(56,182,255,.45),transparent 60%),linear-gradient(160deg,#3D33FF,#2A21C9)}
.seg-biz .seg-art{background:radial-gradient(70% 90% at 10% 100%,rgba(255,255,255,.35),transparent 60%),linear-gradient(160deg,#38B6FF,#5CC8FF)}
.seg-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.seg h3{font-size:1.5rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 12px;border-radius:999px;font-size:.875rem;font-weight:700;background:var(--purple-50);color:var(--purple-dark);border:1px solid #DDDBFF}
.pkg-list{margin:16px 0 22px;display:grid;gap:10px;flex:1}
.pkg-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9688rem}
.pkg-list li::before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8125rem;font-weight:800;background:var(--purple-50);color:var(--purple)}
@media (min-width:768px){.seg-body{padding:24px 24px 26px}}

.seg-chip{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(23,43,77,.18)}
.seg-desc{margin-top:10px;color:var(--muted);font-size:.9688rem;line-height:1.6}
.seg-sub{margin:18px 0 0;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.seg-sub-line{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.seg .pkg-list{margin:12px 0 24px}

.prod-photo{aspect-ratio:4/3;overflow:hidden;background:#0B1030;border-bottom:1px solid var(--line-soft)}
.prod-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.prod:hover .prod-photo img{transform:scale(1.04)}
.prod-photo-contain{background:#fff}
.prod-photo-contain img{object-fit:contain;padding:6px}
.prod-photo-ic{display:grid;place-items:center;color:var(--purple);background:radial-gradient(70% 90% at 90% 0%,rgba(56,182,255,.35),transparent 60%),linear-gradient(160deg,#EEEDFF,#E7F6FF)}
.prod-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
@media (min-width:768px){.prod-body{padding:20px 20px 22px}}
.svc{display:flex;flex-direction:column;align-items:flex-start}
.svc p{margin-bottom:14px}
.svc .more{margin-top:auto}

/* FAQ */
.faq{margin-top:24px;display:grid;gap:12px;max-width:820px}
.qa{padding:0;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:18px 56px 18px 20px;font-weight:800;font-size:1rem;line-height:1.4;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;font-weight:700;background:var(--purple-50);color:var(--purple);transition:transform .2s}
.qa[open] summary::after{content:"\2212"}
.qa p{padding:0 20px 20px;color:var(--muted);font-size:.9688rem;line-height:1.65}
.qa summary:hover{color:var(--purple)}