:root{--purple:#554192;--purple-deep:#55288a;--cyan:#3dc4f2;--ink:#252134;--muted:#706c7c;--paper:#fff;--soft:#f6f4fa;--line:#e9e5f0;--heading:'Plus Jakarta Sans',sans-serif;--body:'Manrope',sans-serif;--text-lg:20px;--text-md:18px;--text-sm:16px;--label:12px;--display:clamp(42px,3.55vw,54px);--section-title:clamp(34px,2.7vw,40px);--card-title:clamp(32px,2.55vw,38px)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--text-md);line-height:1.56;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}button svg,a svg{width:20px;height:20px;flex-shrink:0}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:14px;background:white;color:var(--purple)}.skip-link:focus{top:10px}.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1280px;margin:24px auto 0;width:calc(100% - 96px);min-height:72px;border-radius:50px;background:var(--purple);padding:12px 16px 12px 25px;color:white}.brand{display:flex;align-items:center;flex-shrink:0}.brand img{display:block;width:177px;height:auto}.site-header nav{display:flex;align-items:center;gap:23px;font-size:14px;font-weight:600}.site-header nav>a,.dropdown-toggle{min-height:44px;display:flex;align-items:center;position:relative}.site-header nav>a:after{content:'';position:absolute;bottom:4px;height:3px;border-radius:4px;left:0;right:0;background:var(--cyan);transform:scaleX(0);transition:transform .2s}.site-header nav>a:hover:after,.site-header nav>a.active:after{transform:scaleX(1)}.dropdown-toggle{border:0;background:none;color:inherit;padding:0;gap:5px}.dropdown-toggle svg{width:13px;height:13px;transition:transform .2s}.dropdown-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.nav-group{position:relative}.dropdown{position:absolute;top:calc(100% + 16px);left:-20px;min-width:260px;border:1px solid var(--line);background:white;padding:9px;border-radius:15px;color:var(--ink);box-shadow:0 12px 38px #25213414}.dropdown a{display:block;padding:14px 12px;border-radius:8px}.dropdown a:hover{background:var(--soft);color:var(--purple)}.header-cta{display:flex;gap:10px;align-items:center;white-space:nowrap;background:white;color:var(--purple);font-size:13px;font-weight:700;padding:13px 17px;border-radius:28px;min-height:44px;transition:background .2s}.header-cta:hover{background:#e4f7fe}.header-cta svg{width:16px;height:16px}.menu-toggle{display:none}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:54px;padding:15px 23px;border-radius:32px;font-size:15px;font-weight:700;border:1px solid transparent;transition:background .2s,box-shadow .2s,transform .2s}.button:active{transform:scale(.96)}.button-primary{background:var(--purple);color:white;box-shadow:0 5px 12px #55419214}.button-primary:hover{background:var(--purple-deep);box-shadow:0 7px 22px #55419228}.button-secondary{background:var(--soft);color:var(--ink);border-color:#eeebf3}.button-secondary:hover{background:#eee9f7}.content-page{max-width:1000px;margin:80px auto;padding:0 24px}.content-page h1{font-family:var(--heading)}dialog{border:1px solid var(--line);padding:38px;border-radius:22px;max-width:480px;width:calc(100% - 36px);color:var(--ink);box-shadow:0 30px 100px #25213426}dialog::backdrop{background:#25213460;backdrop-filter:blur(5px)}dialog h2{font-family:var(--heading);font-size:26px}dialog p{line-height:1.8;color:var(--muted)}.dialog-kicker{font-size:12px;color:var(--purple)!important}.dialog-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;background:transparent;font-size:26px}@media(min-width:1600px){.site-header{margin-top:32px}}@media(max-width:1100px){.site-header{width:calc(100% - 48px);gap:18px;padding-left:20px}.site-header nav{gap:15px;font-size:12px}.brand img{width:145px}.header-cta{padding:12px;font-size:11px}}@media(max-width:900px){.site-header{width:calc(100% - 32px);margin-top:16px;min-height:64px;padding:10px 17px}.brand img{width:160px}.header-cta{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;border:0;color:white;background:transparent;order:3}.menu-toggle span{height:2px;width:21px;background:currentColor;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.site-header nav{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;background:white;color:var(--ink);border:1px solid var(--line);padding:18px;border-radius:20px;box-shadow:0 15px 40px #25213414;max-height:75vh;overflow:auto}.site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}.site-header nav>a,.dropdown-toggle{padding:8px 12px;font-size:14px;width:100%;justify-content:space-between}.site-header nav>a:after{display:none}.site-header nav>a.active{color:var(--purple);background:var(--soft);border-radius:8px}.dropdown{position:static;box-shadow:none;border:0;padding:0 0 0 15px;min-width:0}.dropdown a{font-size:13px}.nav-group{width:100%}}@media(max-width:480px){.header-cta{display:none}.site-header{padding-left:18px}.brand img{width:164px}.button{font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}:root{--section-max:1320px;--content-wide:1400px;--gutter-desktop:48px;--display:clamp(48px,4.15vw,64px);--section-title:clamp(38px,3vw,48px);--text-md:17px;--surface:#ffffff;--surface-soft:#f7f5fb;--surface-cool:#f5f9fb;--shadow-soft:0 24px 64px rgba(37,33,52,.065);--shadow-card:0 18px 48px rgba(37,33,52,.075);--radius-section:34px;--radius-card:28px}body{font-size:17px;line-height:1.62;background:#fff}.site-header{max-width:1320px;width:calc(100% - 80px)}.shell{width:calc(100% - 80px);max-width:var(--section-max)}.about-inner{width:calc(100% - 80px);max-width:1320px;gap:78px}.clients-inner{width:calc(100% - 80px);max-width:1320px;column-gap:72px}.portfolio-showcase__inner{width:min(1360px,calc(100% - 80px))}.process-shell{width:min(1360px,calc(100% - 80px))}.clients-heading h2,.about-copy h2,.services-clean__header h2,.sectors-showcase__header h2,.portfolio-showcase__header h2{font-weight:700;line-height:1.1;letter-spacing:-1.45px}.about-eyebrow,.services-clean__eyebrow,.sectors-showcase__eyebrow,.portfolio-showcase__eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.about-copy p,.services-clean__header p,.sectors-showcase__header p,.process-header p{font-size:18px;line-height:1.65}.hero{min-height:805px;padding-top:76px;background:radial-gradient(circle at 17% 24%,rgba(85,65,146,.055),transparent 23%),radial-gradient(circle at 84% 31%,rgba(61,196,242,.065),transparent 24%),linear-gradient(180deg,#fff 0%,#fdfcff 68%,#fff 100%)}.hero-copy{max-width:1040px}.hero h1{max-width:1020px;line-height:1.1;letter-spacing:-2.25px;margin-top:27px;margin-bottom:24px}.hero-description{max-width:800px;font-size:18px;line-height:1.68}.hero-actions{margin-top:31px}.floating-card{box-shadow:0 16px 42px rgba(85,65,146,.08);border-color:rgba(85,65,146,.085)}.clients-section{position:relative;padding:74px 0 78px;background:radial-gradient(circle at 79% 52%,rgba(61,196,242,.055),transparent 25%),linear-gradient(180deg,#fff 0%,#fdfcff 100%)}.clients-heading h2{font-size:clamp(32px,2.55vw,38px);max-width:460px;margin-bottom:18px}.clients-heading p{max-width:430px}.clients-stage{position:relative;padding:12px 0 10px;border:1px solid rgba(85,65,146,.065);border-radius:30px;background:linear-gradient(135deg,rgba(246,244,250,.74),rgba(244,250,252,.66));box-shadow:0 18px 52px rgba(37,33,52,.035)}.clients-list{padding:14px 28px;gap:38px}.client-logo{width:212px;height:102px}.clients-controls{margin-top:1px;padding-right:12px}.about-section{position:relative;padding:104px 0 112px;background:radial-gradient(circle at 15% 52%,rgba(61,196,242,.055),transparent 24%),linear-gradient(180deg,#fff 0%,#fdfcff 100%)}.about-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.about-scene:after{content:'';position:absolute;inset:7% 2% 4%;z-index:-2;border-radius:34px;background-image:linear-gradient(rgba(85,65,146,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(85,65,146,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 32%,transparent 82%);opacity:.8}.about-copy{max-width:600px}.about-copy h2{margin-bottom:22px}.about-actions{margin-top:30px}.network-hub{box-shadow:0 18px 48px rgba(85,65,146,.10),0 10px 0 -4px #554192,inset 0 2px 0 #fff}.services-clean{padding:104px 0 118px;background:radial-gradient(circle at 10% 10%,rgba(85,65,146,.07),transparent 27%),radial-gradient(circle at 90% 30%,rgba(61,196,242,.075),transparent 24%),linear-gradient(180deg,#faf9fc 0%,#f4f2f8 100%)}.services-clean__header{max-width:820px;margin-bottom:48px}.services-clean__header p{max-width:680px}.service-card{height:clamp(500px,64vh,580px);margin-bottom:20vh}.service-card__content{gap:60px}.service-card__summary{max-width:455px}.service-visual{width:min(400px,100%)}.sectors-showcase{padding:108px 0 116px;background:radial-gradient(circle at 92% 14%,rgba(61,196,242,.06),transparent 24%),linear-gradient(180deg,#fff 0%,#fdfcff 100%)}.sectors-showcase__header{gap:72px;margin-bottom:48px}.sectors-showcase__header h2{font-size:clamp(38px,3vw,48px)}.sector-tabs{margin-bottom:16px;border-radius:26px;background:rgba(247,246,250,.88);box-shadow:0 14px 36px rgba(37,33,52,.035)}.sector-panels{min-height:520px;border-radius:32px;box-shadow:var(--shadow-soft)}.sector-panel{padding:56px 60px;gap:52px}.sector-panel__visual{min-height:385px}.sector-panel__copy>p{margin-top:18px}.sector-capabilities{margin-top:24px}.sector-panel__cta{margin-top:30px}.why-panel{min-height:620px;gap:88px;padding-top:84px;padding-bottom:84px;padding-left:max(56px,calc((100vw - 1320px)/2));padding-right:max(56px,calc((100vw - 1320px)/2))}.why-copy{max-width:600px;padding-top:12px}.why-copy h2{max-width:600px}.why-copy p{margin-top:24px;max-width:560px}.why-values{min-height:470px}.why-value{min-height:122px}.portfolio-sticky{background:radial-gradient(circle at 91% 12%,rgba(61,196,242,.065),transparent 26%),radial-gradient(circle at 8% 78%,rgba(85,65,146,.035),transparent 24%),#fff}.portfolio-showcase__inner{padding-top:40px;padding-bottom:34px}.portfolio-showcase__header{margin-bottom:28px}.portfolio-showcase__header h2{font-size:clamp(38px,2.85vw,46px)}.portfolio-deck{height:clamp(620px,69vh,740px)}.portfolio-card[data-slot="main"]{border-radius:34px}.portfolio-card__main{padding:46px 52px 46px 56px;gap:52px}.portfolio-browser{box-shadow:0 28px 68px rgba(37,33,52,.12)}.process-section{padding:106px 0 116px;background:radial-gradient(circle at 91% 8%,rgba(61,196,242,.075),transparent 25%),radial-gradient(circle at 8% 92%,rgba(85,65,146,.06),transparent 26%),#F6F4FA}.process-section:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(85,65,146,.055) .8px,transparent .8px);background-size:30px 30px;mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}.process-shell{position:relative;z-index:1}.process-header{margin-bottom:50px}.process-header h2{font-size:clamp(40px,3.1vw,50px)}.process-grid{gap:20px}.process-card{border-radius:30px;box-shadow:0 22px 58px rgba(37,33,52,.06)}.process-visual{margin:18px 18px 0;height:228px}.process-card__copy{padding:25px 26px 30px}.process-card h3{font-size:20px}.process-card p{font-size:16.5px;line-height:1.62}.button,.header-cta,.sector-panel__cta span,.portfolio-showcase__all span,.portfolio-card__cta span{transition-duration:.25s}.service-card,.sector-panels,.portfolio-card,.process-card{-webkit-font-smoothing:antialiased}@media(min-width:1500px){.hero{padding-top:86px;min-height:850px}.hero h1{font-size:64px}}@media(max-width:1100px){.site-header,.shell,.about-inner,.clients-inner{width:calc(100% - 48px)}.about-inner{gap:48px}.clients-inner{column-gap:42px}.process-shell,.portfolio-showcase__inner{width:calc(100% - 48px)}.service-card{margin-bottom:16vh}.why-panel{padding-left:48px;padding-right:48px}}@media(max-width:760px){:root{--section-title:clamp(31px,8.4vw,36px)}body{font-size:16.5px}.site-header{width:calc(100% - 32px)}.shell,.about-inner,.clients-inner,.process-shell,.portfolio-showcase__inner{width:calc(100% - 34px)}.hero{padding-top:54px;background:linear-gradient(180deg,#fff 0%,#fdfcff 72%,#fff 100%)}.hero h1{line-height:1.16}.clients-section{padding:58px 0 60px}.clients-stage{border-radius:24px}.about-section{padding:82px 0 90px}.about-inner{display:grid;grid-template-columns:1fr;gap:36px}.about-scene{max-width:600px;margin:0 auto}.services-clean{padding:84px 0 96px}.service-card{margin-bottom:26px}.sectors-showcase{padding:84px 0 94px}.sectors-showcase__header{margin-bottom:34px}.why-panel{padding-left:24px;padding-right:24px}.process-section{padding:86px 0 94px}.process-section:before{opacity:.28}}
/* v53: the existing Layanan nav now opens three submenu choices. */
.site-header .nav-group--services.is-current>.dropdown-toggle{color:#fff}
.site-header .nav-group--services.is-current>.dropdown-toggle:after{content:"";position:absolute;bottom:4px;left:0;right:16px;height:3px;border-radius:4px;background:var(--cyan)}
.site-header .nav-group--services .dropdown a.is-selected{background:#F1ECFC;color:var(--purple);font-weight:800}
.site-header .nav-group--services .dropdown{z-index:30}
@media(max-width:900px){.site-header .nav-group--services.is-current>.dropdown-toggle{color:var(--purple)}.site-header .nav-group--services.is-current>.dropdown-toggle:after{display:none}}


/* v67 — Shared sticky header across all six pages. Maintain the floating purple pill design. */
html{scroll-padding-top:112px}
.site-header{
  position:sticky;
  top:12px;
  z-index:2000;
  isolation:isolate;
  transition:box-shadow .24s ease;
}
.site-header.is-scrolled{box-shadow:0 12px 32px rgba(37,33,52,.17)}
@media(max-width:900px){
  html{scroll-padding-top:94px}
  .site-header{top:8px}
  .site-header nav{max-height:min(75vh,calc(100dvh - 96px))}
}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}


/* v68 — Mobile hybrid smart header. Desktop retains the v67 sticky header.
   The compact state uses the ORIGINAL EduKarir color logo. */
.site-header .brand-logo--compact{display:none}
@media(max-width:767px){
  html{scroll-padding-top:82px}
  .site-header{
    top:8px;
    margin-top:16px;
    min-height:64px;
    border:1px solid transparent;
    will-change:transform;
    transition:
      transform 260ms cubic-bezier(.2,.78,.22,1),
      opacity 190ms ease,
      min-height 250ms ease,
      width 250ms ease,
      padding 250ms ease,
      border-radius 250ms ease,
      color 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 250ms ease;
    transform:translate3d(0,0,0);
    opacity:1;
  }
  .site-header[data-mobile-header="hidden"]{
    transform:translate3d(0,calc(-100% - 34px),0);
    opacity:0;
    pointer-events:none;
    box-shadow:none;
  }
  .site-header[data-mobile-header="compact"]{
    width:calc(100% - 44px);
    min-height:54px;
    padding:5px 8px 5px 16px;
    border-radius:17px;
    border-color:rgba(85,65,146,.13);
    background-color:rgba(255,255,255,.94);
    color:var(--purple);
    box-shadow:0 9px 30px rgba(37,33,52,.095),0 1px 4px rgba(37,33,52,.035);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15);
  }
  .site-header[data-mobile-header="compact"] .brand>img:not(.brand-logo--compact){display:none}
  .site-header[data-mobile-header="compact"] .brand-logo--compact{display:block;width:138px;height:auto}
  .site-header[data-mobile-header="compact"] .menu-toggle{width:42px;height:42px;color:var(--purple)}
  .site-header[data-mobile-header="compact"] .header-cta{display:none}
  .site-header[data-mobile-header="compact"] nav{top:calc(100% + 10px)}
  .site-header[data-mobile-header="compact"].is-scrolled{box-shadow:0 9px 30px rgba(37,33,52,.095),0 1px 4px rgba(37,33,52,.035)}
}
@media(max-width:360px){
  .site-header[data-mobile-header="compact"] .brand-logo--compact{width:124px}
}
@media(prefers-reduced-motion:reduce){
  .site-header{transition:none!important}
}
