/* One IndoCerdas marketing system. Product films keep their own native UI. */
body.sx-page,body.kb-page{
  --ic-sans:HeroSons,Arial,sans-serif;--ic-serif:Georgia,'Times New Roman',serif;
  --sx-ink:#242424;--sx-muted:#646464;--sx-line:#dedbd5;--sx-paper:#fff;--sx-blue:#242424;
  font:400 18px/1.55 var(--ic-sans);color:var(--ic-ink);background:#fff;
}
body.sx-page main,body.kb-page main{background:#fff}

/* The same floating navigation, transparent above the dark opening. */
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled){
  background:transparent;border-color:transparent;box-shadow:none;color:#fafaf8;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled) .nav-logo img{filter:brightness(0) invert(1)}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled) .nav-toggle{color:#fafaf8}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled).expanded .nav-sections{color:var(--ic-ink)}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled) .drop[open]>div{color:var(--ic-ink)}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled) :is(a,button,summary):focus-visible{outline-color:#fafaf8}
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled).expanded .nav-sections :is(a,summary):focus-visible,
body:is(.sx-page,.kb-page) #nav-shell.ic-site-nav:not(.scrolled) .drop[open]>div a:focus-visible{outline-color:#242424}

/* Paper and ink, with the code-drawn dot atlas from the landing page. */
.sx-page .sx-eudia-hero{padding:0;background:#161616;color:#fafaf8;overflow:hidden}
.sx-page .sx-hero-atmosphere{
  inset:0;background:radial-gradient(ellipse at 50% 28%,#ffffff07,transparent 68%),linear-gradient(180deg,#0d0d0d,#161616);
}
.sx-page .sx-hero-atmosphere img{display:none}
.sx-page .sx-hero-atmosphere:before,.kb-page .kb-hero:before{
  content:'';position:absolute;inset:120px -3vw 0;pointer-events:none;
  background:url('/marketing/assets/indonesia-dot-atlas-v1.svg?v=dot-wave-1') center/100% auto no-repeat;
  opacity:.3;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
}
.sx-page .sx-hero-atmosphere:after{background:linear-gradient(180deg,transparent,#16161622)}
.sx-page .sx-eudia-hero-inner{height:auto;min-height:0;padding:184px var(--ic-edge) 100px}
.sx-page .sx-eudia-hero .sx-hero-heading{gap:28px;max-width:1170px}
.sx-page .sx-eudia-hero h1{
  font:400 clamp(54px,6.2vw,88px)/1.06 var(--ic-serif);letter-spacing:-.055em;
  max-width:1120px;text-wrap:balance;color:#fafaf8;
}
.sx-page .sx-eudia-hero .sx-hero-description{max-width:740px}
.sx-page .sx-eudia-hero .sx-hero-description>p{
  font:400 20px/1.55 var(--ic-sans);letter-spacing:-.01em;color:#deddd8;
}
.sx-page .sx-actions{gap:16px;margin-top:32px}
.sx-page .sx-primary,.sx-page .sx-text-link,.kb-page .kb-link{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:52px;padding:14px 22px;border:1px solid #242424;border-radius:999px;
  font:400 16px/22px var(--ic-sans);letter-spacing:0;text-decoration:none;
  color:#fff!important;background:#242424;transition:background .2s,border-color .2s,transform .2s;
}
.sx-page .sx-primary:hover,.sx-page .sx-text-link:hover,.kb-page .kb-link:hover{background:#3d3c39;border-color:#3d3c39;transform:translateY(-2px)}
.sx-page .sx-eudia-hero .sx-actions>.sx-primary,.kb-page .kb-hero>.kb-link{
  color:#242424!important;background:#f5f4f0;border-color:#f5f4f0;
}
.sx-page .sx-eudia-hero .sx-actions>.sx-text-link{
  border:1px solid #ffffff50;border-radius:999px;min-height:52px;padding:14px 22px;
  font:400 16px/22px var(--ic-sans);letter-spacing:0;background:#ffffff08;color:#fafaf8!important;
}
.sx-page .sx-eudia-hero .sx-actions>.sx-text-link:hover{background:#ffffff14;border-color:#ffffff90}
.sx-page .sx-eudia-showcase{
  padding:0 max(24px,calc((100% - 1170px)/2)) 104px;
  background:linear-gradient(180deg,#161616 0%,#262626 12%,#777 32%,#d2d2d2 52%,#f7f7f7 74%,#fff 92%);
}
.sx-page .sx-eudia-media-showcase{aspect-ratio:16/9;max-width:1170px;margin:auto;border-radius:20px;background:transparent}
.sx-page .sx-eudia-media-showcase:before,.sx-page .sx-eudia-media-showcase:after{display:none}
.sx-page .sx-eudia-media-showcase>.sx-film{width:100%;border-radius:20px;box-shadow:0 12px 32px #16161612}

/* Same split-card geometry and 48px inset as the landing page demos. */
.sx-page main>.sx-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0;
  width:calc(100% - 48px);max-width:1170px;min-height:650px;
  margin:0 auto 96px;padding:0;border:0;border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 20px 60px #1616160a;align-items:stretch;
}
.sx-page .sx-feature.sx-reverse{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.sx-page .sx-feature .sx-feature-copy,.sx-page .sx-feature.sx-reverse .sx-feature-copy{
  order:0;padding:48px;min-width:0;align-items:flex-start;
}
.sx-page .sx-feature .sx-eudia-media,.sx-page .sx-feature.sx-reverse .sx-eudia-media{order:1}
.sx-page .sx-feature-copy h2,.sx-page .sx-feature-copy .sx-section-heading h2,.sx-page .sx-questions-section .sx-feature-copy>header h2{
  font:400 32px/1.2 var(--ic-sans);letter-spacing:-.025em;color:#242424;
  margin:0;max-width:none;text-wrap:initial;
}
.sx-page .sx-feature-copy>p:not(.sx-kicker),.sx-page .sx-feature-copy .sx-section-heading>p{
  font:400 16px/1.6 var(--ic-sans);letter-spacing:0;color:#383836;
  margin:18px 0 0;max-width:none;
}
.sx-page .sx-feature-copy>.sx-text-link{margin-top:28px;font-size:15px;max-width:100%;text-align:left}
.sx-page .sx-feature-copy .sx-section-heading{display:block;margin:0}
.sx-page .sx-eudia-media-feature{
  width:calc(100% - 32px);margin:16px;min-height:618px;
  border-radius:12px;align-self:stretch;background:#242424;
}
.sx-page .sx-eudia-media-feature>.sx-film{width:90%;border-radius:16px;box-shadow:0 18px 45px #16161618}
.sx-page .sx-eudia-media-feature:before{
  inset:0;animation:none;background:radial-gradient(ellipse at 100% 100%,#d9d3c766,transparent 65%),linear-gradient(145deg,#202020,#6d6d69 52%,#d9d8d3);
}
.sx-page .sx-feature.sx-reverse .sx-eudia-media-feature:before{background:radial-gradient(ellipse at 90% 10%,#e6e1d855,transparent 65%),linear-gradient(145deg,#252525,#6c6b65 62%,#c5c0b5)}
.sx-page .sx-eudia-media-feature:has(.sx-film-sources):before{background:radial-gradient(ellipse at 100% 100%,#d9d3c744,transparent 65%),linear-gradient(145deg,#202020,#64645f 62%,#b8b5ac)}
.sx-page .sx-feature>.sx-feature-checks,.sx-page .sx-feature>.sx-question-grid,.sx-page .sx-project-feature>.sx-bento-grid{
  order:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;width:100%;max-width:none;margin:0;padding:20px 48px 48px;
}
.sx-page .sx-feature-checks article{display:block;padding:24px;background:#f7f5f0;border:0;border-radius:12px}
.sx-page .sx-feature-checks h3,.sx-page .sx-question-grid h3{
  font:400 23px/1.2 var(--ic-sans);letter-spacing:-.025em;color:#242424;margin:0 0 14px;
}
.sx-page .sx-feature-checks p,.sx-page .sx-question-grid article>p{font:400 16px/1.55 var(--ic-sans);color:#646464;margin:0}
.sx-page .sx-question-grid article,.sx-page .sx-question-grid article:first-child{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid #e1ddd4;border-radius:12px;background:#fff}
.sx-page .sx-question-grid .sx-text-link{margin-top:auto;min-height:44px;padding:10px 16px;font-size:14px}
.sx-page .sx-question-grid article>p{margin-bottom:22px}
.sx-page .sx-project-feature>.sx-bento-grid{grid-template-columns:1fr 1fr}
.sx-page .sx-bento-grid>article{padding:28px;border:1px solid #e1ddd4;border-radius:12px;background:#fff}
.sx-page .sx-bento-grid h3{font:400 30px/1.15 var(--ic-serif);letter-spacing:-.035em;margin:0 0 18px;color:#242424}
.sx-page .sx-bento-grid>article>p,.sx-page .sx-bento-package li{font:400 16px/1.55 var(--ic-sans);color:#646464}
.sx-page .sx-bento-package li b{font-weight:400;color:#242424}

/* The same grain, serif card titles and restrained beige contrast as Solusi. */
.sx-page .sx-tasks,.sx-page main>.sx-bento:not(.sx-project-feature){padding:0 max(24px,calc((100% - 1170px)/2)) 96px}
.sx-page .sx-section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;margin-bottom:40px;align-items:end}
.sx-page .sx-section-heading h2{font:400 clamp(34px,3.8vw,52px)/1.12 var(--ic-sans);letter-spacing:-.035em;margin:0;color:#242424}
.sx-page .sx-section-heading>p{font:400 18px/1.55 var(--ic-sans);color:#646464;margin:0;max-width:530px}
.sx-page .sx-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border:0;border-radius:0;background:transparent;overflow:visible}
.sx-page .sx-task{
  display:flex;flex-direction:column;align-items:flex-start;min-height:320px;padding:32px;
  border:0;border-radius:12px;color:#fafaf8;background:#1c1c1b url('/marketing/assets/solution-grain-charcoal.webp') center/cover;
  background-blend-mode:luminosity;
  transition:transform .3s,box-shadow .3s;
}
.sx-page .sx-task:nth-child(2){color:#242424;background:#e3ded4 url('/marketing/assets/solution-grain-warm.webp') center/cover;background-blend-mode:normal}
.sx-page .sx-task:hover{transform:translateY(-4px);box-shadow:0 16px 35px #16161612;background-color:#1c1c1b}
.sx-page .sx-task h3{font:400 32px/1.1 var(--ic-serif);letter-spacing:-.035em;color:inherit;margin:0 0 22px}
.sx-page .sx-task p{font:400 16px/1.5 var(--ic-sans);color:#e0dfd9;margin:0 0 28px}
.sx-page .sx-task:nth-child(2) p{color:#4f4a42}
.sx-page .sx-task>b{display:inline-flex;align-items:center;gap:24px;margin-top:auto;padding:9px 14px;border:1px solid #ffffff70;border-radius:6px;color:inherit;font:400 14px/1.4 var(--ic-sans)}
.sx-page .sx-task:nth-child(2)>b{border-color:#6c645850}
.sx-page .sx-bento:not(.sx-project-feature) .sx-bento-grid{gap:24px;padding:0;border:0;background:transparent}

.sx-page .sx-closing{
  margin:0 auto 32px;width:calc(100% - 48px);max-width:1170px;padding:72px 48px;
  border:0;border-radius:16px;background:#171717;text-align:center;
}
.sx-page .sx-closing:before{inset:0;animation:none;filter:grayscale(1);background:radial-gradient(ellipse at 100% 100%,#b9b1a224,transparent 65%),url('/marketing/assets/solution-grain-charcoal.webp') center/cover}
.sx-page .sx-closing h2{font:400 clamp(40px,4.4vw,62px)/1.1 var(--ic-serif);letter-spacing:-.045em;color:#fafaf8;margin:0}
.sx-page .sx-closing>div>p:not(.sx-kicker){font:400 18px/1.55 var(--ic-sans);color:#d4d0c8;margin:24px auto 0;max-width:700px}
.sx-page .sx-closing .sx-primary{margin-top:32px;border-color:#f5f4f0;background:#f5f4f0;color:#242424!important}

/* Pustaka is part of the same site, with its existing product demo and sources. */
.kb-page .kb-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:184px var(--ic-edge) 84px;text-align:center;
  background:linear-gradient(180deg,#0d0d0d 0,#161616 560px,#666 740px,#d4d4d4 940px,#fff 1120px);
}
.kb-page .kb-hero:before{z-index:-1;inset:130px -3vw auto;height:500px;opacity:.3}
.kb-page .kb-hero h1{font:400 clamp(52px,6.2vw,86px)/1.06 var(--ic-serif);letter-spacing:-.055em;color:#fafaf8;max-width:1120px;margin:0 auto 28px;text-wrap:balance}
.kb-page .kb-hero>p{font:400 20px/1.55 var(--ic-sans);color:#deddd8;max-width:720px;margin:0 auto}
.kb-page .kb-hero>.kb-link{margin-top:32px;border-radius:999px;min-height:52px;padding:14px 22px;font:400 16px/22px var(--ic-sans)}
.kb-page .kb-motion-hero{position:relative;max-width:1170px;margin:88px auto 0;border:0;border-radius:20px;box-shadow:0 12px 32px #16161612;overflow:hidden;background:transparent}
.kb-page .kb-motion-hero .ui-motion-viewport{border-radius:20px}
.kb-page .kb-section{padding:72px max(24px,calc((100% - 1170px)/2)) 96px;border:0;background:#fff}
.kb-page .kb-section h2{font:400 clamp(34px,3.8vw,52px)/1.12 var(--ic-sans);letter-spacing:-.035em;color:#242424;max-width:880px;margin:0 0 28px}
.kb-page .kb-section p{font:400 18px/1.6 var(--ic-sans);color:#646464;max-width:780px}
.kb-page .kb-source-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.kb-page .kb-source-list a{
  position:relative;display:grid;grid-template-columns:1fr 24px;gap:18px;
  padding:32px;border:1px solid #dedbd3;border-radius:12px;background:#fff;
  text-decoration:none;transition:border-color .2s,transform .2s;
}
.kb-page .kb-source-list a:hover{transform:translateY(-3px);border-color:#aaa295;background:#fff}
.kb-page .kb-source-list a:last-child{grid-column:1/-1;background:#f7f5f0}
.kb-page .kb-source-list a em{display:none}
.kb-page .kb-source-list a b{grid-column:1;grid-row:1;font:400 30px/1.15 var(--ic-serif);letter-spacing:-.035em;color:#242424}
.kb-page .kb-source-list a small{grid-column:1;grid-row:2;font:400 16px/1.55 var(--ic-sans);color:#646464}
.kb-page .kb-source-list a>span{grid-column:2;grid-row:1;font-size:24px;color:#80776a}
.kb-page .kb-steps{gap:24px;margin-top:40px}
.kb-page .kb-steps article{padding:32px;border:1px solid #dedbd3;border-radius:12px;background:#fff}
.kb-page .kb-steps article:nth-child(2){background:#f7f5f0}
.kb-page .kb-steps h3{font:400 26px/1.2 var(--ic-sans);letter-spacing:-.025em;margin:0 0 16px;color:#242424}
.kb-page .kb-steps p{font:400 17px/1.55 var(--ic-sans);margin:0;max-width:none}
.kb-page .kb-section>.kb-link{margin-top:32px}
.kb-page .kb-note{font:400 14px/1.6 var(--ic-sans);color:#81796d}

@media(max-width:1023px){
  .sx-page .sx-eudia-hero-inner{padding-top:160px;padding-bottom:80px}
  .sx-page .sx-eudia-hero h1,.kb-page .kb-hero h1{font-size:64px}
  .sx-page main>.sx-feature,.sx-page .sx-feature.sx-reverse{grid-template-columns:1fr 1.5fr;min-height:560px}
  .sx-page .sx-feature .sx-feature-copy{padding:36px}
  .sx-page .sx-feature-copy h2,.sx-page .sx-feature-copy .sx-section-heading h2{font-size:30px}
  .sx-page .sx-eudia-media-feature{min-height:528px}
  .sx-page .sx-feature>.sx-feature-checks,.sx-page .sx-feature>.sx-question-grid,.sx-page .sx-project-feature>.sx-bento-grid{padding-inline:36px}
  .sx-page .sx-task-grid{gap:16px}.sx-page .sx-task{padding:26px}
}
@media(max-width:760px){
  .sx-page .sx-eudia-hero-inner{padding:144px 24px 64px}
  .sx-page .sx-eudia-hero h1,.kb-page .kb-hero h1{font-size:clamp(42px,10.5vw,64px);line-height:1.07;letter-spacing:-.045em}
  .sx-page .sx-eudia-hero .sx-hero-heading{gap:24px}
  .sx-page .sx-eudia-hero .sx-hero-description>p,.kb-page .kb-hero>p{font-size:17px;line-height:1.55}
  .sx-page .sx-actions{flex-direction:column;gap:12px}
  .sx-page .sx-eudia-hero .sx-actions>.sx-primary,.sx-page .sx-eudia-hero .sx-actions>.sx-text-link{font-size:15px;min-height:50px;padding:13px 20px;align-self:center}
  .sx-page .sx-eudia-showcase{padding:0 20px 64px}
  .sx-page .sx-eudia-media-showcase,.sx-page .sx-eudia-media-showcase>.sx-film{border-radius:12px}
  .sx-page main>.sx-feature,.sx-page .sx-feature.sx-reverse{display:flex;flex-direction:column;width:calc(100% - 40px);min-height:0;margin-bottom:48px;border-radius:16px}
  .sx-page .sx-feature .sx-feature-copy,.sx-page .sx-feature.sx-reverse .sx-feature-copy{padding:28px 24px 32px;order:0}
  .sx-page .sx-feature-copy h2,.sx-page .sx-feature-copy .sx-section-heading h2,.sx-page .sx-questions-section .sx-feature-copy>header h2{font-size:30px}
  .sx-page .sx-feature-copy>p:not(.sx-kicker),.sx-page .sx-feature-copy .sx-section-heading>p{font-size:16px}
  .sx-page .sx-feature .sx-eudia-media,.sx-page .sx-feature.sx-reverse .sx-eudia-media{order:1;min-height:0;aspect-ratio:6/5;width:calc(100% - 24px);margin:0 12px 12px;align-self:auto;border-radius:10px}
  .sx-page .sx-feature>.sx-feature-checks,.sx-page .sx-feature>.sx-question-grid,.sx-page .sx-project-feature>.sx-bento-grid{order:2;grid-template-columns:1fr;padding:12px 24px 28px;gap:16px}
  .sx-page .sx-feature-checks article,.sx-page .sx-question-grid article,.sx-page .sx-question-grid article:first-child{padding:22px}
  .sx-page .sx-tasks,.sx-page main>.sx-bento:not(.sx-project-feature){padding:0 24px 48px}
  .sx-page .sx-section-heading{grid-template-columns:1fr;gap:24px;margin-bottom:28px}
  .sx-page .sx-section-heading h2{font-size:36px}
  .sx-page .sx-section-heading>p{font-size:17px}
  .sx-page .sx-task-grid{grid-template-columns:1fr;gap:16px}
  .sx-page .sx-task{padding:28px;min-height:280px}
  .sx-page .sx-bento:not(.sx-project-feature) .sx-bento-grid{grid-template-columns:1fr}
  .sx-page .sx-closing{width:calc(100% - 40px);margin:0 auto 16px;padding:48px 24px}
  .sx-page .sx-closing h2{font-size:40px}
  .sx-page .sx-closing>div>p:not(.sx-kicker){font-size:17px}
  .kb-page .kb-hero{padding:144px 24px 48px;background:linear-gradient(180deg,#0d0d0d,#161616 520px,#777 650px,#fff 800px)}
  .kb-page .kb-hero:before{inset:155px -18vw auto;height:360px;background-size:auto 100%;opacity:.26}
  .kb-page .kb-motion-hero{margin-top:64px;border-radius:12px}
  .kb-page .kb-motion-hero .ui-motion-viewport{border-radius:12px}
  .kb-page .kb-section{padding:48px 24px}
  .kb-page .kb-section h2{font-size:36px}
  .kb-page .kb-section p{font-size:17px}
  .kb-page .kb-source-list{grid-template-columns:1fr;gap:16px}
  .kb-page .kb-source-list a{padding:26px}.kb-page .kb-source-list a b{font-size:28px}
  .kb-page .kb-source-list a:last-child{grid-column:auto}
  .kb-page .kb-steps{grid-template-columns:1fr;gap:16px}
  .kb-page .kb-steps article{padding:26px}
}
@media(prefers-reduced-motion:reduce){
  .sx-page .sx-task,.kb-page .kb-source-list a,.sx-page .sx-primary,.sx-page .sx-text-link,.kb-page .kb-link{transition:none;transform:none}
}
@media(max-width:420px){
  .sx-page .sx-eudia-hero h1{font-size:36px;line-height:1.1}
}