/* Font di-host sendiri (Fontsource, lisensi SIL OFL 1.1) */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-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}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-400-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-600-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}

/* menarasinarsemesta.com — PT Menara Sinar Semesta
   Warna mengikuti Manual Book MSS: navy #1C4488, oranye #F7941D (aksen saja). */
:root{
  --navy:#1C4488;
  --navy-deep:#152F5F;
  --orange:#F7941D;
  --teal:#35B4C2;
  --ink:#18202E;
  --text:#2C3646;
  --muted:#5A6577;
  --line:#D8DEE8;
  --line-soft:#E7EBF2;
  --paper:#FFFFFF;
  --mist:#F3F5F9;
  --inv-muted:#C9D3E6;
  --inv-line:rgba(255,255,255,.18);
  --head:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --gut:16px;
  --max:1160px;
  --sec:clamp(72px,10vw,128px);
  --g:24px;
}
@media (min-width:881px){:root{--g:40px}}
@media (min-width:720px){:root{--gut:32px}}

*,*::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}}
body{margin:0;background:var(--paper);color:var(--text);font:400 18px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.grid,.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.divrow > * + *{position:relative}
.divrow > * + *::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--g) / -2);width:1px;background:var(--line)}

/* type */
h1{font-size:clamp(32px,5.6vw,64px);line-height:1.06;font-weight:500;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12}
h2.display{font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.02em}
h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
h4{font-size:19px;line-height:1.3;font-weight:500}
.lead{font-size:clamp(19px,1.6vw,21px);line-height:1.55;color:var(--text)}
.sub{color:var(--muted);margin-top:14px}
.note{color:var(--muted);font-size:16px}
.label{font-family:var(--head);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.label::before{content:"";width:28px;height:2px;background:var(--orange);flex:none}
.label-inv{color:#fff}
.mini{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  background:var(--navy);color:#fff;font:500 17px/1 var(--head);letter-spacing:.01em;text-decoration:none;border-radius:2px;
  border:1.5px solid var(--navy);transition:background .15s,color .15s}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-inv{background:#fff;color:var(--navy);border-color:#fff}
.btn-inv:hover{background:transparent;color:#fff}
.btn-light{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--navy)}
.textlink{font-family:var(--head);font-weight:500;font-size:17px;text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:2px;color:var(--navy)}
.textlink:hover{color:var(--navy-deep);border-bottom-color:var(--navy)}

/* crescent ornament (dari logo MSS) */
svg .cr-t{fill:var(--cr-t,var(--teal))}
svg .cr-o{fill:var(--cr-o,var(--orange))}
svg .cr-n{fill:var(--cr-n,var(--navy))}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line-soft)}
.header-row{display:flex;align-items:center;gap:24px;height:72px}
.brandmark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);margin-right:auto}
.brandmark img{width:86px;height:auto}
.brandmark-name{font:500 15px/1.2 var(--head);letter-spacing:.02em;color:var(--ink);padding-left:14px;border-left:1px solid var(--line)}
.nav ul{display:flex;gap:28px}
.nav a{font:500 16px/1 var(--head);color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover{border-bottom-color:var(--orange)}
.nav-toggle{display:none}
.lang{font:500 14px/1 var(--head);letter-spacing:.08em;color:var(--navy);text-decoration:none;border:1.5px solid var(--line);padding:9px 11px;border-radius:2px}
.lang:hover{border-color:var(--navy)}
@media (max-width:1000px){
  .brandmark-name{display:none}
}
@media (max-width:880px){
  .nav-toggle{display:inline-flex;align-items:center;height:40px;padding:0 14px;background:none;border:1.5px solid var(--line);border-radius:2px;font:500 15px/1 var(--head);color:var(--ink);cursor:pointer}
  .nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px var(--gut) 16px}
  .nav ul a{display:block;padding:14px 0;font-size:19px;border-bottom:1px solid var(--line-soft)}
  .nav-open .nav ul{display:flex}
  .header-row{gap:10px}
}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(64px,10vw,136px) 0 clamp(72px,10vw,128px);border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.hero-copy{grid-column:1 / span 8;position:relative;z-index:1}
.kicker{font:500 15px/1.4 var(--head);letter-spacing:.06em;color:var(--muted);margin-bottom:28px}
.hero-p{font-size:clamp(19px,1.7vw,22px);max-width:36em;margin-top:28px;color:var(--text)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.hero-crescent{position:absolute;right:max(-120px,calc((100vw - var(--max)) / 2 - 220px));top:50%;width:min(46vw,560px);height:auto;aspect-ratio:1222/1513;transform:translateY(-50%);
  --cr-n:#EBF0F8;--cr-o:#FCE1BF;--cr-t:#CFECEF}
@media (max-width:880px){
  .hero-copy{grid-column:1 / -1}
  .hero-crescent{width:min(52vw,280px);right:calc(-1 * min(30vw,160px));top:auto;bottom:-80px;transform:none}
  .hero-p{max-width:30em}
}

/* section rhythm */
section{position:relative}
.about,.care,.brands,.pai,.mt,.ck,.kj,.why{padding:var(--sec) 0}
.col-label{grid-column:1 / span 3}
.col-main{grid-column:4 / span 9}
.col-label .label{margin-top:10px}
@media (max-width:880px){.col-label,.col-main{grid-column:1 / -1}}

/* about */
.about h2{max-width:16em}
.about .lead{margin-top:24px;max-width:38em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:56px;border-top:1px solid var(--line)}
.fact{padding:24px 0 0}
.fact dt{font:500 clamp(44px,5vw,64px)/1 var(--head);color:var(--navy);letter-spacing:-.02em}
.fact dd{margin-top:12px;color:var(--muted);font-size:17px;max-width:15em}
@media (max-width:640px){
  .facts{grid-template-columns:1fr}
  .fact{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:16px}
  .fact dt{font-size:40px}
  .facts > * + *::before{display:none}
  .fact dd{margin:0}
}

/* vision & mission */
.vm{background:var(--navy);color:#fff;padding:var(--sec) 0;overflow:hidden}
.vm-crescent{position:absolute;right:-110px;bottom:-210px;width:400px;height:auto;aspect-ratio:1222/1513;--cr-n:rgba(255,255,255,.08);--cr-o:var(--orange);--cr-t:var(--teal)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:12px;position:relative}
.vm-item h3{color:var(--inv-muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:20px;padding-top:20px;border-top:1px solid var(--inv-line)}
.vm-en{font:400 clamp(24px,2.5vw,31px)/1.32 var(--head);color:#fff;letter-spacing:-.005em}
.vm-tr{margin-top:22px;color:var(--inv-muted);font-size:18px}
.vm-2027{position:relative;margin-top:clamp(48px,6vw,80px);max-width:min(44em,62%);font-size:19px;color:#fff;padding-left:20px;border-left:2px solid var(--orange)}
@media (max-width:1180px){.vm-crescent{display:none}.vm-2027{max-width:none}}
@media (max-width:760px){.vm-grid{grid-template-columns:1fr}}

/* CARE */
.care-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--g);margin-top:48px;counter-reset:c}
.care-list li{display:grid;grid-template-columns:64px 1fr;column-gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.care-letter{grid-row:1 / span 2;font:500 56px/0.8 var(--head);color:var(--navy);padding-top:4px}
.care-list h4{font-size:21px;align-self:end}
.care-list p{color:var(--muted);margin-top:6px;font-size:17px}
@media (max-width:760px){.care-list{grid-template-columns:1fr}}

/* brands */
.brands{background:var(--mist)}
.h2-wide{max-width:18em}
.brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:56px;border-top:2px solid var(--navy)}
.brand{padding:32px 0 8px;display:flex;flex-direction:column}
.brand-logo{height:64px;display:flex;align-items:center;margin-bottom:24px}
.brand-logo img{height:auto}
.brand-logo img[alt="MSS"]{width:112px}
.brand-logo img[alt="Cloudku"]{width:150px}
.kj-lockup{display:flex;align-items:center;gap:12px;font:500 30px/1 var(--head);color:var(--navy);letter-spacing:-.01em}
.kj-lockup img{width:40px;height:auto}
.brand-field{font:500 14px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.brand p{color:var(--muted);font-size:17px}
.brand .brand-field{color:var(--ink)}
.brand-link{margin-top:auto;padding-top:20px}
.brand-link a{font:500 17px/1 var(--head);text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:3px}
@media (max-width:880px){
  .brand-row{grid-template-columns:1fr}
  .brand{padding:28px 0;border-bottom:1px solid var(--line)}
  .brand-row > * + *::before{display:none}
}

/* private AI */
.pai-head{max-width:880px}
.pai-head .lead{margin-top:28px;max-width:40em}
.pai-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px;margin-top:clamp(56px,7vw,96px);padding-top:40px;border-top:1px solid var(--line)}
.pai-split h3{margin-bottom:16px}
.caps{counter-reset:cap}
.caps li{counter-increment:cap;display:grid;grid-template-columns:48px 1fr;padding:20px 0;border-bottom:1px solid var(--line)}
.caps li:first-child{padding-top:12px}
.caps li::before{content:counter(cap,decimal-leading-zero);font:500 15px/1.6 var(--head);color:var(--navy);grid-row:1 / span 2}
.caps p{color:var(--muted);font-size:17px;margin-top:4px}
.pai-split > :first-child{grid-column:1 / span 5}
.pai-split > :last-child{grid-column:7 / -1}
@media (max-width:880px){.pai-split > :first-child,.pai-split > :last-child{grid-column:1 / -1}}

.cmp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:32px;margin-top:clamp(64px,8vw,112px)}
.cmp-intro h3{margin-bottom:20px}
.law{font-size:17px;color:var(--ink);padding-left:16px;border-left:2px solid var(--orange)}
.cmp-intro p:not(.law){color:var(--muted);font-size:17px}
.cmp-table-wrap{min-width:0}
.cmp-table{width:100%;border-collapse:collapse;font-size:17px}
.cmp-table th,.cmp-table td{text-align:left;padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{font:500 14px/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.cmp-table tbody th{font-weight:600;color:var(--ink);width:30%}
.cmp-table td{color:var(--muted);width:35%}
.cmp-table td:last-child,.cmp-table th.hl{color:var(--navy);font-weight:600;padding-left:16px;background:var(--mist)}
.cmp-table th.hl{border-top:3px solid var(--orange)}
.cmp-table-wrap .note{margin-top:18px}
.cmp-intro{grid-column:1 / span 4}
.cmp-table-wrap{grid-column:6 / -1}
@media (max-width:880px){.cmp-intro,.cmp-table-wrap{grid-column:1 / -1}}
@media (max-width:520px){
  .cmp-table{font-size:16px}
  .cmp-table th,.cmp-table td{padding:14px 10px 14px 0}
  .cmp-table td:last-child,.cmp-table th.hl{padding-left:10px}
  .cmp-table thead th{font-size:12px;letter-spacing:.06em}
}

/* steps: garis horizontal tepat melewati pusat lingkaran */
.steps-block{margin-top:clamp(64px,8vw,112px)}
.steps-block > h3{max-width:22em;margin-bottom:44px}
.steps{--dot:52px;--gap:24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);position:relative}
.steps li{position:relative}
/* garis penghubung: dari pusat lingkaran ini ke pusat lingkaran berikutnya */
.steps li:not(:last-child)::after{content:"";position:absolute;z-index:0;left:calc(var(--dot) / 2);width:calc(100% + var(--gap));top:calc(var(--dot) / 2 - 1px);height:2px;background:var(--line)}
.step-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--dot);height:var(--dot);border-radius:50%;
  background:#fff;border:2px solid var(--navy);font:500 16px/1 var(--head);color:var(--navy);font-variant-numeric:tabular-nums}
.steps li:last-child .step-n{background:var(--navy);color:#fff}
.steps h4{margin-top:20px}
.steps p{color:var(--muted);font-size:16px;margin-top:4px}
.sectors{margin-top:48px;max-width:46em;color:var(--text);padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:880px){
  .steps{grid-template-columns:1fr;--gap:0px;--dot:44px}
  .steps li{display:grid;grid-template-columns:var(--dot) 1fr;column-gap:20px;padding-bottom:28px}
  .steps li:last-child{padding-bottom:0}
  .steps li:not(:last-child)::after{left:calc(var(--dot) / 2 - 1px);top:calc(var(--dot) / 2);width:2px;height:100%}
  .steps h4{margin-top:10px}
}

.demo{display:grid;grid-template-columns:7fr 5fr;gap:32px 48px;align-items:center;margin-top:clamp(64px,8vw,104px);background:var(--navy);color:#fff;padding:clamp(32px,5vw,56px)}
.demo h3{color:#fff;font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.demo p{color:var(--inv-muted)}
.demo-actions{justify-self:end;text-align:right}
.demo-actions p{margin-top:16px;font-size:16px}
.demo-actions a:not(.btn){color:#fff}
@media (max-width:880px){.demo{grid-template-columns:1fr}.demo-actions{justify-self:start;text-align:left}}

/* managed tech */
.mt{border-top:1px solid var(--line-soft)}
.col-side h2{font-size:clamp(30px,3.2vw,40px)}
.col-side{grid-column:1 / span 5;align-self:start;position:sticky;top:112px}
.mt-list{grid-column:7 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g)}
.mt-list div{padding:24px 0;border-top:1px solid var(--line)}
.mt-list dt{font:500 20px/1.3 var(--head);color:var(--ink)}
.mt-list dd{color:var(--muted);font-size:17px;margin-top:6px}
@media (max-width:880px){
  .col-side{grid-column:1 / -1;position:static;margin-bottom:40px}
  .mt-list{grid-column:1 / -1}
}
@media (max-width:560px){.mt-list{grid-template-columns:1fr}}

/* cloudku */
.ck{background:var(--mist)}
.ck-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:28px}
.ck-head > div{grid-column:1 / -1}
.ck-head .lead{grid-column:5 / -1;max-width:36em}
.ck-head .display{font-size:clamp(44px,7vw,92px);line-height:.98;color:var(--navy)}
.ck-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(48px,6vw,80px);border-top:2px solid var(--navy);border-bottom:1px solid var(--line)}
.ck-fact{padding:28px 0}
.ck-fact dt{font:500 clamp(36px,4vw,52px)/1 var(--head);color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ck-fact dd{margin-top:10px;color:var(--muted);font-size:17px}
.ck-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px;margin-top:clamp(48px,6vw,72px)}
.plain li{padding:18px 0;border-bottom:1px solid var(--line)}
.plain li:first-child{border-top:1px solid var(--line)}
.plain p{color:var(--muted);font-size:17px;margin-top:4px}
.ck-cols > :first-child{grid-column:1 / span 4}
.ck-cols > :last-child{grid-column:5 / -1}
.plain.two{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);border-top:1px solid var(--line)}
.plain.two li:first-child{border-top:0}
.ck-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 32px;margin-top:40px;color:var(--muted);font-size:17px}
@media (max-width:880px){
  .ck-cols > :first-child,.ck-cols > :last-child{grid-column:1 / -1}
  .ck-head .lead{grid-column:1 / -1}
}
@media (max-width:640px){
  .ck-facts{grid-template-columns:1fr}
  .ck-fact{padding:20px 0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline}
  .ck-fact + .ck-fact{border-top:1px solid var(--line)}
  .ck-facts > * + *::before{display:none}
  .ck-fact dd{margin:0}
  .ck-fact dt{font-size:32px}
  .plain.two{grid-template-columns:1fr}
  .plain.two li:first-child{border-top:0}
}

/* kinerjio */
.kj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:48px;align-items:start}
.kj-grid > :first-child{grid-column:1 / span 6}
.kj-grid > :last-child{grid-column:7 / -1}
.kj-grid h2{max-width:14em}
.kj-grid .lead{margin-top:24px;max-width:34em}
.kj-mods{margin-top:44px;border-top:2px solid var(--navy)}
.kj-mods li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.kj-mods h3{font-size:22px}
.kj-mods p{color:var(--muted);font-size:17px}
.kj-hris{background:var(--mist);padding:clamp(28px,4vw,40px);margin-top:8px}
.kj-hris h3{font-size:21px;margin-bottom:20px}
.dash li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--line);font-size:17px}
.dash li::before{content:"";position:absolute;left:0;top:calc(9px + .8em - 1px);width:12px;height:2px;background:var(--orange)}
.kj-hris .note{margin-top:20px}
.kj-hris .textlink{display:inline-block;margin-top:4px}
@media (max-width:880px){.kj-grid > :first-child,.kj-grid > :last-child{grid-column:1 / -1}}
@media (max-width:520px){.kj-mods li{grid-template-columns:1fr;gap:4px}}

/* why */
.why{background:var(--paper);border-top:1px solid var(--line-soft)}
.why-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--g);margin-top:56px}
.why-list li{padding-top:24px;border-top:2px solid var(--navy)}
.why-n{display:block;font:500 15px/1 var(--head);color:var(--navy);margin-bottom:28px;letter-spacing:.06em}
.why-list h3{font-size:22px;margin-bottom:12px}
.why-list p{color:var(--muted);font-size:17px}
@media (max-width:1120px){.why-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why-list{grid-template-columns:1fr;gap:32px}}

/* contact */
.contact{background:var(--navy-deep);color:#fff;padding:var(--sec) 0;overflow:hidden}
.ct-crescent{position:absolute;right:-130px;bottom:-250px;width:420px;height:auto;aspect-ratio:1222/1513;--cr-n:rgba(255,255,255,.06);--cr-o:rgba(247,148,29,.6);--cr-t:rgba(53,180,194,.45)}
.ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:48px;position:relative}
.ct-intro{grid-column:1 / span 5}
.ct-list{grid-column:7 / -1}
.ct-intro h2{color:#fff;margin-bottom:20px}
.ct-intro p{color:var(--inv-muted);font-size:19px;margin-bottom:32px}
.ct-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);align-content:start}
.ct-list div{padding:20px 0;border-top:1px solid var(--inv-line)}
.ct-list .span2{grid-column:1 / -1}
.ct-list dt{font:500 13px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.ct-list dd{font-size:19px;line-height:1.5;color:#fff}
.ct-list a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.ct-list a:hover{text-decoration-color:var(--orange)}
.maplink{display:inline-block;margin-top:8px;font-size:16px}
@media (max-width:880px){.ct-intro,.ct-list{grid-column:1 / -1}.ct-crescent{display:none}}
@media (max-width:560px){.ct-list{grid-template-columns:1fr}}

/* footer */
.site-footer{background:#0F2347;color:var(--inv-muted);padding:48px 0 40px;font-size:15px}
.ft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--g);align-items:start}
.ft-id img{width:88px;height:auto;margin-bottom:16px}
.ft-h{font:500 13px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.ft-legal p + p{margin-top:12px}
.site-footer p{text-wrap:wrap}
@media (max-width:880px){.ft-grid{grid-template-columns:1fr}}

/* panah tautan eksternal */
.arr{display:inline-block;vertical-align:baseline;margin-left:6px;position:relative;top:1px}
@media (max-width:340px){h1{font-size:29px}}

@media (min-width:481px) and (max-width:880px){.hero-p{max-width:min(30em,calc(100% - 140px))}.hero-crescent{bottom:-150px}}

/* CARE: nama Indonesia + istilah asli */
.care-en{display:block;font:500 13px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* sub-judul kolom Cloudku */
.sub-h{font-size:21px;line-height:1.3;margin-bottom:20px;max-width:18em}

/* tabel harga Kinerjio */
.price-table{width:100%;border-collapse:collapse;margin-top:28px;font-size:17px}
.price-table th,.price-table td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.price-table thead th{font:500 13px/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.price-table tbody th{font:500 16px/1.3 var(--head);letter-spacing:.08em;color:var(--navy)}
.price-table td:nth-child(2){font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-table td:last-child{color:var(--muted);padding-right:0}

/* petunjuk versi bahasa Inggris (hanya halaman ID, untuk browser non-Indonesia) */
.lang-hint{background:var(--navy-deep);color:#fff;font-size:16px}
.lang-hint-row{display:flex;align-items:center;gap:12px 24px;min-height:52px;padding-top:10px;padding-bottom:10px}
.lang-hint-row p{margin:0}
.textlink-inv{color:#fff;font-size:16px}
.textlink-inv:hover{color:#fff;border-bottom-color:#fff}
.lang-hint-x{margin-left:auto;background:none;border:0;color:#fff;font:400 26px/1 var(--body);width:40px;height:40px;cursor:pointer}
@media (max-width:560px){.lang-hint-row{flex-wrap:wrap}.lang-hint-row p{flex-basis:calc(100% - 52px)}.lang-hint-x{order:2}.lang-hint-row a{order:3}}

/* unduh company profile (formulir → CRM) */
.dl{background:var(--mist);padding:var(--sec) 0;border-top:1px solid var(--line-soft)}
.dl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px;align-items:start}
.dl-intro{grid-column:1 / span 5}
.dl-box{grid-column:7 / -1;background:#fff;padding:clamp(24px,4vw,40px);border-top:3px solid var(--navy)}
.dl-intro .lead{margin-top:24px}
.dl-meta{margin-top:28px;border-top:1px solid var(--line)}
.dl-meta li{padding:12px 0;border-bottom:1px solid var(--line);font:500 15px/1.4 var(--head);letter-spacing:.04em;color:var(--ink)}
@media (max-width:880px){.dl-intro,.dl-box{grid-column:1 / -1}}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px var(--g)}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f label,.f-lang legend{display:block;font:500 15px/1.3 var(--head);color:var(--ink);margin-bottom:8px}
.opt{font-weight:400;color:var(--muted)}
.f input,.f select{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:2px;background:#fff;font:400 17px/1.2 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6577' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f input:focus,.f select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(28,68,136,.15)}
.f input::placeholder{color:#9AA3B2}
.f-lang{border:0;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.f-lang legend{width:100%;float:left;margin-bottom:8px}
.f-lang label{display:inline-flex;align-items:center;gap:8px;font-size:17px;cursor:pointer}
.f-lang input,.f-consent input{width:18px;height:18px;accent-color:var(--navy);margin:0;flex:none}
.f-consent{display:grid;grid-template-columns:18px 1fr;gap:12px;margin-top:22px;font-size:15px;line-height:1.5;color:var(--text);cursor:pointer}
.f-consent input{margin-top:3px}
.is-invalid input,.is-invalid select{border-color:#B42318}
.f-consent.is-invalid span{color:#B42318}
.f-error{margin:18px 0 0;color:#B42318;font-size:15px}
.dl-form .btn{margin-top:24px;width:100%}
.dl-form .btn[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.dl-done{outline:none}
.dl-done h3{font-size:26px;margin-bottom:10px}

/* ===== Landing ringkas (2 Nov 2026) ===== */
/* visi-misi: catatan 2027 + budaya CARE dalam satu baris */
.vm-foot{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:20px;margin-top:clamp(48px,6vw,80px)}
.vm-foot .vm-2027{grid-column:1 / span 7;margin:0;max-width:none}
.vm-care{grid-column:8 / -1;margin:0;color:#fff;font:500 17px/1.6 var(--head);padding-left:20px;border-left:1px solid var(--inv-line)}
.vm-care span{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--inv-muted);margin-bottom:6px}
@media (max-width:880px){.vm-foot .vm-2027,.vm-care{grid-column:1 / -1}}

/* merek: tiga poin ringkas per merek */
.brand-points{margin:18px 0 0;border-top:1px solid var(--line)}
.brand-points li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);line-height:1.45}
.brand-points li::before{content:"";position:absolute;left:0;top:calc(10px + .72em - 1px);width:10px;height:2px;background:var(--orange)}
.brand .brand-link{padding-top:24px}

/* Private AI ringkas */
.pai-sum{background:var(--paper);border-top:1px solid var(--line-soft)}
.pai-sum-head{grid-column:1 / span 6}
.pai-sum-body{grid-column:8 / -1;align-self:end}
.pai-sum-body .lead{margin:0}
.pai-points{margin:28px 0 28px;border-top:2px solid var(--navy)}
.pai-points li{padding:14px 0;border-bottom:1px solid var(--line);font:500 19px/1.35 var(--head);color:var(--ink)}
@media (max-width:880px){.pai-sum-head,.pai-sum-body{grid-column:1 / -1}.pai-sum-body{margin-top:28px}}

/* formulir unduh — tampilan dirapikan */
.dl-box-h{font-size:22px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dl-intro .lead{max-width:30em}
.f label{font-size:14px;letter-spacing:.01em}
.f input,.f select{height:50px;background:var(--mist);border-color:transparent;border-bottom:1.5px solid var(--line)}
.f input:hover,.f select:hover{border-bottom-color:#AEB8C8}
.f input:focus,.f select:focus{background:#fff;border-color:var(--navy)}
.f-captcha{margin-top:20px;min-height:65px;display:flex;align-items:center;font-size:15px;color:var(--muted)}
.f-captcha[hidden]{display:none}
.f-captcha iframe{max-width:100%}
.dl-form .btn{height:56px;font-size:18px}