/* public/assets/css/front.css */

/* Public pages follow the supplied artikel-detail.html visual language. */
body.company-page { margin:0; color:#1b315f; font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.58; background:#fff; }
.company-page .rt-card { border:1px solid #e6ebf3; border-radius:18px; padding:24px; background:#fff; box-shadow:0 8px 30px rgba(12,53,112,.04); }
.front-article-page .rt-card { box-shadow:0 8px 30px rgba(12,53,112,.04) !important; }
.company-page .rt-front-article__hero { border-radius:14px; box-shadow:0 10px 28px rgba(8,38,92,.09); }
.company-page .rt-front-article__inline-cta { border:1px solid #e6ebf3; border-radius:16px; background:#fbfcfe; box-shadow:none; }
.company-page .rt-front-article__inline-cta > div:first-child { display:flex; align-items:center; gap:14px; }
.company-page .rt-front-article__inline-cta > div:first-child::before { content:none; }
.company-page .rt-front-article__inline-cta strong { display:block; color:#0c3aa7; }
.company-page .rt-front-article__inline-cta span { display:block; color:#687898; }
.company-page .rt-front-article__wide-cta { border-radius:16px; box-shadow:none; }

/* PT Rakit Teknologi Sembada landing page.
 * Retro-term supplies the base UI; these rules preserve the supplied design. */
.company-home {
  --navy: #071f56;
  --blue: #0b46ca;
  --blue-2: #153ed1;
  --green: #07b65f;
  --green-dark: #049b4f;
  --text: #25385f;
  --muted: #67789b;
  --line: #e8edf5;
  --white: #fff;
  --shadow: 0 16px 42px rgba(12, 45, 98, .08);
  --radius: 20px;
  display: block;
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
}

.company-page { background: #fff; color: var(--text); }
.company-page::before { display: none; }
.company-page .theme-toggle { display: none; }
.company-home *, .company-home *::before, .company-home *::after { box-sizing: border-box; }
.company-home img { display: block; max-width: 100%; }
.company-home a { color: inherit; text-decoration: none; }
.company-home button, .company-home input { font: inherit; }
.company-home .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.company-home .section { padding: 20px 0; }
.company-home .panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 28px rgba(13, 49, 102, .045); }
.company-home .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(232,237,245,.8); }
.company-home .nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.company-home .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: #1137b0; font-size: 18px; }
.company-home .brand { white-space: nowrap; flex: 0 0 auto; }
.company-home .brand-mark { width: 38px; height: 38px; border: 3px solid #17b75a; border-radius: 5px; position: relative; background: #fff; flex: 0 0 auto; }
.company-home .brand-mark::before, .company-home .brand-mark::after { content: ""; position: absolute; bottom: 6px; background: #0b46ca; border-radius: 2px 2px 0 0; }
.company-home .brand-mark::before { left: 8px; width: 7px; height: 17px; }
.company-home .brand-mark::after { right: 7px; width: 7px; height: 24px; }
.company-home .brand-mark span { position: absolute; left: 13px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #17b75a; }
.company-home .nav-links { display: flex; align-items: center; gap: 31px; font-size: 14px; font-weight: 700; }
.company-home .nav-links a { padding: 29px 0 25px; position: relative; }
.company-home .nav-links a.active { color: var(--green); }
.company-home .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; border-radius: 999px; background: var(--green); }
.company-home .menu-btn { display: none; border: 0; background: transparent; color: var(--navy); padding: 8px; }
.company-home .front-nav-dropdown { position:relative; flex:0 0 auto; }
.company-home .front-nav-icon-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid #dce4f1; border-radius:1rem; color:#18366d; background:#fff; cursor:pointer; }
.company-home .front-nav-icon-button:hover, .company-home .front-nav-dropdown.is-open .front-nav-icon-button { border-color:#9db8ee; color:#0b46ca; background:#f4f8ff; }
.company-home .front-nav-dropdown-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:70; min-width:210px; display:none; padding:7px; border:1px solid #e1e8f3; border-radius:1rem; background:#fff; box-shadow:0 14px 32px rgba(12,53,112,.12); }
.company-home .front-nav-dropdown.is-open .front-nav-dropdown-menu { display:grid; }
.company-home .front-nav-dropdown-menu a, .company-home .front-nav-dropdown-menu button { width:100%; display:flex; align-items:center; gap:9px; padding:10px 11px; border:0; border-radius:.75rem; color:#233d72; background:transparent; font:inherit; font-size:13px; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; }
.company-home .front-nav-dropdown-menu a:hover, .company-home .front-nav-dropdown-menu button:hover { color:#0b46ca; background:#eef4ff; }
.company-home .front-nav-dropdown-menu form { margin:0; }
.company-home .hero { padding: 36px 0 24px; }
.company-home .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; }
.company-home .hero-copy { padding-left: 6px; }
.company-home .hero h1 { margin: 0 0 19px; color: var(--navy); font-size: clamp(42px,5vw,72px); line-height: 1.04; letter-spacing: -.045em; max-width: 650px; }
.company-home .hero h1 .blue { color: var(--blue); }
.company-home .hero h1 .green { color: var(--green); }
.company-home .hero p { font-size: 19px; color: #4f6288; max-width: 590px; margin: 0 0 25px; }
.company-home .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.company-home .btn { border-radius: 10px; padding: 14px 24px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; cursor: pointer; }
.company-home .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 20px rgba(11,70,202,.18); }
.company-home .btn-outline { background: #fff; color: var(--blue); border-color: #b9cbf4; }
.company-home .hero-badges { display: flex; gap: 11px; flex-wrap: wrap; }
.company-home .badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e8edf6; border-radius: 999px; color: #496085; background: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 5px 14px rgba(13,49,102,.04); }
.company-home .badge svg, .company-home .badge .rt { color: var(--blue); }
.company-home .hero-visual { position: relative; }
.company-home .hero-visual img { width: 100%; max-height: 520px; object-fit: contain; margin-left: auto; border-radius: 1rem !important; }
.company-home .about-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 45px; align-items: center; padding: 28px 42px; }
.company-home .about-visual img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 1rem !important; }
.company-home .about-copy h2, .company-home .challenge-panel h2, .company-home .adv-col h2 { margin: 0 0 14px; color: var(--blue); line-height: 1.1; }
.company-home .about-copy h2 { font-size: 40px; }
.company-home .about-copy h2 span, .company-home .challenge-panel h2 span, .company-home .adv-col h2 span, .company-home .section-title span { color: var(--green); }
.company-home .about-copy p { color: #4d6085; margin: 0 0 18px; font-size: 17px; }
.company-home .check-list, .company-home .compact-list { display: grid; gap: 11px; }
.company-home .check, .company-home .compact-list div, .company-home .contact li { display: flex; align-items: flex-start; gap: 9px; }
.company-home .check { color: #415477; gap: 10px; }
.company-home .check svg, .company-home .check .rt { color: var(--green); margin-top: 2px; flex: 0 0 auto; }
.company-home .challenge-panel { display: grid; grid-template-columns: 1fr .9fr; gap: 44px; padding: 28px 36px; align-items: center; }
.company-home .challenge-panel h2 { margin-bottom: 18px; font-size: 34px; }
.company-home .compact-list div { align-items: flex-start; }
.company-home .compact-list svg, .company-home .compact-list .rt { color: var(--blue); margin-top: 3px; flex: 0 0 auto; }
.company-home .warning { border-radius: 15px; background: linear-gradient(135deg,#fbfcff,#f2f6fb); padding: 28px; display: flex; gap: 18px; align-items: flex-start; color: #45597f; font-size: 17px; }
.company-home .warning .icon { width: 48px; height: 48px; border-radius: 13px; background: #fff2cc; color: #f2a400; display: grid; place-items: center; flex: 0 0 auto; }
.company-home .perspective { padding: 26px 28px 18px; }
.company-home .section-title { margin: 0 0 8px; text-align: center; color: var(--blue); font-size: clamp(28px,3vw,42px); line-height: 1.12; letter-spacing: -.03em; }
.company-home .section-sub { text-align: center; margin: 0 0 30px; color: var(--muted); }
.company-home .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.company-home .compare-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; align-items: start; border: 1px solid var(--line); border-radius: 15px; padding: 24px; background: #fff; min-height: 280px; }
.company-home .compare-card.rakit { background: linear-gradient(135deg,#fbfffd,#eefbf4); border-color: #ccefdc; }
.company-home .compare-visual { height: 220px; display: grid; place-items: center; margin-top: 8px; color: #6b7280; }
.company-home .compare-visual img { width:110px; height:110px; object-fit:contain; border-radius:0; }
.company-home .compare-visual .rt { width: 4.5rem; height: 4.5rem; }
.company-home .compare-card.rakit .compare-visual { color: var(--green); }
.company-home .compare-card h3 { text-align: left; margin: 0 0 4px; color: var(--navy); font-size: 22px; }
.company-home .compare-card.rakit h3 { color: var(--green-dark); }
.company-home .compare-subtitle { margin: 0 0 24px; text-align: left; color: #526487; font-size: 17px; font-weight: 700; }
.company-home .compare-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #526487; }
.company-home .compare-card li { display: flex; gap: 9px; }
.company-home .compare-card.vendor li svg, .company-home .compare-card.vendor li .rt { color: #eb5757; }
.company-home .compare-card.rakit li svg, .company-home .compare-card.rakit li .rt-check-circle { color: var(--green); }

.front-search-trigger { width:42px; min-width:42px; height:42px; padding:0; border:1px solid var(--rt-border); background:var(--rt-surface); color:var(--rt-text); }
.front-search-modal { align-items:flex-start !important; padding-top:clamp(56px, 9vh, 110px) !important; }
.front-search-modal .rt-modal-content { width:min(980px, calc(100vw - 28px)); max-height:min(820px, calc(100vh - 28px)); border-radius:var(--rt-radius-lg) !important; }
.front-search-trigger, .front-auth-button, .front-search-modal .rt-btn { border-radius:999px !important; }
.front-auth-action { display:inline-flex; margin:0; }
.front-auth-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:0 13px; border:1px solid var(--rt-border); background:var(--rt-surface); color:var(--rt-text); font-size:.78rem; font-weight:800; cursor:pointer; text-decoration:none; }
.front-auth-button:hover { color:var(--rt-primary); border-color:rgba(var(--rt-primary-rgb), .35); }
.front-search-modal .rt-modal-body { overflow-y:auto; }

.front-search-modal .rt-table-toolbar { display:flex; align-items:center; gap:8px; margin:0 0 18px; padding:7px 8px 7px 14px; border:1px solid var(--rt-border); border-radius:999px; background:var(--rt-surface-solid); }
.front-search-modal .rt-table-search { flex:1 1 auto; max-width:none; min-width:0; }
.front-search-modal .rt-table-search input { height:40px; padding-left:34px; border:0; border-radius:999px; background:transparent; box-shadow:none; }
.front-search-modal .rt-table-search input:focus { border:0; box-shadow:none; }
.front-search-modal .rt-table-toolbar > .rt-btn { flex:0 0 auto; min-height:40px; padding-inline:18px; }
.front-search-modal .rt-table-toolbar:focus-within { border-color:rgba(var(--rt-primary-rgb), .55); box-shadow:0 0 0 3px rgba(var(--rt-primary-rgb), .12); }
.front-search-modal #frontSearchStatus { margin:0 4px 12px; font-size:.8rem; }
.front-search-results { display:grid; gap:10px; margin-top:14px; }
.front-search-result { padding:16px; border:1px solid var(--rt-border); background:var(--rt-surface-solid); border-radius: 1rem!important;}
.front-search-result h4 { margin:9px 0 5px; font-size:1.05rem; }
.front-search-result h4 a { color:var(--rt-primary); }
.front-search-result p { margin:0 0 7px; color:var(--rt-muted); font-size:.86rem; }
.front-search-result small { color:var(--rt-muted); font-size:.75rem; }
.rt-badge { border-radius: 999px!important;}
.rt-public-article { min-height:100vh; color:var(--rt-text); background:var(--rt-bg); }
.rt-public-article__header { border-bottom:1px solid var(--rt-border); background:var(--rt-surface); }
.rt-public-article__container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.rt-public-article__header .rt-public-article__container { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rt-public-article__brand { display:inline-flex; align-items:center; gap:10px; color:var(--rt-text); font-weight:900; }
.rt-public-article__main { padding-block:28px 64px; }
.rt-public-article__breadcrumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:34px; color:var(--rt-muted); font-size:.78rem; }
.rt-public-article__breadcrumbs a { color:var(--rt-primary); font-weight:800; }
.rt-public-article__breadcrumbs strong { color:var(--rt-text); font-weight:700; }
.rt-public-article__layout { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:42px; align-items:start; }
.rt-public-article__content { min-width:0; }
.rt-public-article__categories { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.rt-public-article__categories span { padding:5px 10px; border:1px solid rgba(var(--rt-primary-rgb), .2); border-radius:999px; color:var(--rt-primary); background:rgba(var(--rt-primary-rgb), .08); font-size:.72rem; font-weight:800; }
.rt-public-article__content h1 { max-width:860px; margin:0 0 16px; color:var(--rt-text); font-size:clamp(2rem, 4.6vw, 4rem); line-height:1.06; }
.rt-public-article__lead { max-width:780px; margin:0 0 22px; color:var(--rt-muted); font-size:1.08rem; line-height:1.65; }
.rt-public-article__meta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; color:var(--rt-muted); font-size:.78rem; font-weight:700; }
.rt-public-article__meta span { display:inline-flex; align-items:center; gap:6px; }
.rt-public-article__meta .rt { color:var(--rt-primary); }
.rt-public-article__featured { margin:0 0 28px; overflow:hidden; border:1px solid var(--rt-border); border-radius:var(--rt-radius-md); background:var(--rt-surface-solid); }
.rt-public-article__featured img { display:block; width:100%; max-height:520px; object-fit:cover; }
.rt-public-article__body { color:var(--rt-text); font-size:1rem; line-height:1.8; }
.rt-public-article__body > * { max-width:100%; }
.rt-public-article__body h2, .rt-public-article__body h3, .rt-public-article__body h4 { margin-top:1.6em; }
.rt-public-article__body img { height:auto; border-radius:var(--rt-radius-sm); }
.rt-public-article__body a { color:var(--rt-primary); text-decoration:underline; text-underline-offset:3px; }
.rt-public-article__gallery { margin-top:38px; padding-top:24px; border-top:1px solid var(--rt-border); }
.rt-public-article__gallery h2 { margin-bottom:14px; font-size:1.2rem; }
.rt-public-article__gallery > div { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.rt-public-article__gallery figure { margin:0; overflow:hidden; border:1px solid var(--rt-border); border-radius:var(--rt-radius-sm); background:var(--rt-surface-solid); }
.rt-public-article__gallery img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.rt-public-article__tags { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:30px; padding-top:18px; border-top:1px solid var(--rt-border); color:var(--rt-muted); font-size:.8rem; }
.rt-public-article__tags a { color:var(--rt-primary); font-weight:800; }
.company-home .rt-public-article__tags { margin:30px 0 0; padding:18px 0 0; border-top:1px solid #e5ebf4; background:transparent; color:#66769a; }
.rt-public-article__aside .rt-card { position:sticky; top:24px; padding:22px; }
.rt-public-article__aside h2 { margin:8px 0; font-size:1.2rem; }
.rt-public-article__aside p { margin-bottom:18px; color:var(--rt-muted); font-size:.88rem; }
@media (max-width: 900px) { .rt-public-article__layout { grid-template-columns:1fr; } .rt-public-article__aside .rt-card { position:static; } }
@media (max-width: 640px) { .rt-form-grid { grid-template-columns:1fr; } .rt-public-article__container { width:min(100% - 28px, 1180px); } .rt-public-article__main { padding-top:22px; } .rt-public-article__breadcrumbs { margin-bottom:22px; } .rt-public-article__content h1 { font-size:2.25rem; } }
.front-article-page { min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.company-page .company-home .panel,
.company-page .company-home .rt-card,
.company-page .company-home .rt-btn,
.company-page .company-home .btn,
.company-page .company-home .badge,
.company-page .company-home .front-auth-button,
.company-page .company-home .front-search-trigger,
.company-page .company-home input,
.company-page .company-home textarea,
.company-page .company-home select,
.company-page .company-home .brand-mark,
.company-page .company-home .rt-front-article__chip,
.company-page .company-home .rt-front-article__hero,
.company-page .company-home .rt-front-article__inline-cta,
.company-page .company-home .rt-front-article__wide-cta { border-radius:1rem !important; }
.company-page .company-home .rt-front-article__avatar,
.company-page .company-home .socials a { border-radius:50% !important; }
.rt-front-article { padding:34px 0 64px; background:#fff; }
.rt-front-article__container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.rt-front-article__breadcrumbs { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:34px; color:#7181a3; font-size:13px; }
.rt-front-article__breadcrumbs a { color:#0b46ca; font-weight:700; }
.rt-front-article__breadcrumbs strong { color:#3e507c; }
.rt-front-article__grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:48px; align-items:start; }
.rt-front-article__head h1 { max-width:800px; margin:0 0 16px; color:#071f56; font-size:clamp(36px,4vw,62px); line-height:1.08; letter-spacing:-.04em; }
.rt-front-article__chip { display:inline-flex; padding:6px 13px; margin:0 7px 14px 0; border-radius:999px; background:#eaf8ef; color:#079445; font-size:13px; font-weight:700; }
.rt-front-article__lead { max-width:760px; margin:0 0 28px; color:#586a91; font-size:19px; }
.rt-front-article__meta { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:28px; color:#30456f; font-size:14px; }
.rt-front-article__author, .rt-front-article__share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rt-front-article__author i { width:1px; height:18px; background:#d6deec; }
.rt-front-article__avatar { width:42px; height:42px; display:grid; place-items:center; border:2px solid #1eb65f; border-radius:50%; color:#0b46ca; font-size:12px; font-weight:900; background:#fff; }
.rt-front-article__share { color:#5d6e91; font-size:13px; }
.rt-front-article__share a, .rt-front-article__share button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:#0d4bc7; color:#fff; cursor:pointer; }
.rt-front-article__share button { background:#edf2fa; color:#0d4bc7; }
.rt-share-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.rt-share-modal.is-open { display:flex; }
.rt-share-modal__backdrop { position:absolute; inset:0; background:rgba(7,31,86,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.rt-share-modal__dialog { position:relative; width:min(420px,100%); padding:26px; border:1px solid #e0e8f5; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(7,31,86,.22); }
.rt-share-modal__dialog h2 { margin:5px 0 20px; color:#071f56; font-size:1.35rem; }
.rt-share-modal__close { position:absolute; top:14px; right:14px; width:32px; height:32px; display:grid; place-items:center; border:1px solid #dfe7f2; border-radius:50%; color:#34517d; background:#fff; cursor:pointer; }
.rt-share-modal__options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rt-share-modal__options button, .rt-share-modal__copy { display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #e1e9f4; border-radius:12px; color:#29436f; background:#f8faff; cursor:pointer; font-size:.76rem; font-weight:800; }
.rt-share-modal__options button { min-height:64px; flex-direction:column; }
.rt-share-modal__options button:hover, .rt-share-modal__copy:hover { color:#0b46ca; border-color:#a9c3f1; background:#eef4ff; }
.rt-share-modal__options .rt { width:20px; height:20px; color:#0b46ca; }
.rt-share-modal__copy { width:100%; min-height:40px; margin-top:12px; }
.rt-share-modal__hint { display:block; min-height:18px; margin-top:10px; color:#6c7b99; text-align:center; }
body.rt-share-modal-open { overflow:hidden; }
.rt-front-article__hero { overflow:hidden; margin:0 0 26px; border-radius:14px; box-shadow:0 10px 28px rgba(8,38,92,.09); }
.rt-front-article__hero img { display:block; width:100%; max-height:560px; object-fit:cover; }
.rt-front-article__hero > .rt-front-listing__image-placeholder { width:100%; height:auto; aspect-ratio:2/1; font-size:clamp(42px, 8vw, 84px); }
.rt-front-article__body { color:#34486f; font-size:16px; line-height:1.8; }
.rt-front-article__body h2 { margin-top:1.6em; color:#08a34b; font-size:24px; }
.rt-front-article__body h3 { margin-top:1.4em; color:#123b9e; font-size:19px; }
.rt-front-article__body img { height:auto; border-radius:12px; }
.rt-front-article__body a { color:#0b46ca; text-decoration:underline; text-underline-offset:3px; }
.rt-front-article__body .principles { display:grid; gap:18px; margin:24px 0 26px; }
.rt-front-article__body .principle { display:grid; grid-template-columns:82px minmax(0,1fr); gap:20px; align-items:start; }
.rt-front-article__body .principle-icon { width:82px; height:82px; display:grid; place-items:center; border:1px solid #edf1f6; border-radius:16px; color:#0b46ca; background:linear-gradient(135deg,#edf9f1,#f6fbff); }
.rt-front-article__body .principle-icon::before { content:none; }
.rt-front-article__body .principle-icon svg { display:block; width:38px; height:38px; }
.rt-front-article__body .principle-icon.green { color:#079b4c; }
.rt-front-article__body .principle h3 { margin:0 0 5px; color:#123b9e; font-size:18px; }
.rt-front-article__body .principle p { margin:0; color:#536587; }
.rt-front-article__body > h2, .rt-front-article__body .conclusion h2 { margin:20px 0 7px; color:#08a34b; font-size:24px; }
.rt-front-article__sidebar { display:grid; gap:28px; }
.rt-front-article__sidebar .rt-card { padding:24px; }
.rt-front-article__sidebar h2 { margin:0 0 20px; color:#071f56; font-size:22px; }
.rt-front-article__sidebar nav { display:grid; gap:8px; }
.rt-front-article__sidebar nav a { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; color:#233d72; font-size:14px; }
.rt-front-category-icon { width:20px; height:20px; flex:0 0 20px; display:block; object-fit:contain; }
.rt-front-article__chip .rt-front-category-icon { width:18px; height:18px; flex-basis:18px; margin-right:5px; }
.rt-front-article__sidebar nav a.is-active { background:#e9f7ee; color:#079746; font-weight:700; }
.rt-front-article__sidebar-cta p { color:#657696; font-size:14px; }
.rt-front-article__popular-list { display:grid; gap:17px; }
.rt-front-article__popular-list > a { display:grid; grid-template-columns:70px minmax(0,1fr); gap:14px; align-items:center; color:#18366d; }
.rt-front-article__popular-list > a > span { width:70px; height:70px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#eef4ff; color:#0d4bd7; }
.rt-front-article__popular-list img { width:70px; height:70px; object-fit:cover; }
.rt-front-article__popular-placeholder { width:70px; height:70px; display:grid; place-items:center; color:#fff; font-size:20px; font-weight:800; letter-spacing:.06em; text-shadow:0 2px 8px rgba(7,31,86,.2); }
.rt-front-article__popular-placeholder--pengembangan { background:linear-gradient(135deg,#0b46ca,#4779e6); }
.rt-front-article__popular-placeholder--arsitektur { background:linear-gradient(135deg,#08ad57,#65cc91); }
.rt-front-article__popular-placeholder--integrasi { background:linear-gradient(135deg,#334f9d,#6e8fe8); }
.rt-front-article__popular-placeholder--teknologi { background:linear-gradient(135deg,#52657f,#a5b5c9); }
.rt-front-article__popular-placeholder--bisnis { background:linear-gradient(135deg,#087c61,#43b999); }
.rt-front-article__popular-placeholder--lainnya { background:linear-gradient(135deg,#667085,#b2bac8); }
.rt-front-article__popular-list strong { display:block; font-size:14px; line-height:1.3; }
.rt-front-article__popular-list time { display:block; margin-top:5px; color:#7585a3; font-size:12px; }
.rt-front-article__newsletter { text-align:center; padding:32px 22px !important; }
.rt-front-article__mail-art { width:82px; height:64px; display:grid; place-items:center; margin:0 auto 20px; border-radius:16px; background:#eef4ff; color:#0d4bd7; font-size:30px; }
.rt-front-article__newsletter h2 { margin-bottom:12px; line-height:1.25; }
.rt-front-article__newsletter h2 span { color:#07a94e; }
.rt-front-article__newsletter p { margin-bottom:18px; color:#657696; font-size:14px; }
.rt-front-article__newsletter form { display:grid; gap:12px; }
.rt-front-article__newsletter label { display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid #dce4f1; border-radius:8px; }
.rt-front-article__newsletter input { width:100%; height:46px; border:0; outline:0; color:#34476f; }
.rt-front-article__newsletter button { width:100%; justify-content:center; }
.rt-front-article__newsletter button { background:#08a84e; color:#fff; }
.rt-front-article__newsletter small { display:block; margin-top:11px; color:#657696; font-size:11px; }
.rt-front-article__inline-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 28px; padding:16px 20px; border:1px solid #e6ebf3; border-radius:16px; background:#fbfcfe; }
.rt-front-article__inline-cta .left { display:flex; align-items:center; gap:14px; }
.rt-front-article__inline-cta .bulb { width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; border-radius:50%; background:#edf4ff; color:#0b46ca; }
.rt-front-article__inline-cta .bulb svg { display:block; width:28px; height:28px; }
.rt-front-article__inline-cta strong, .rt-front-article__inline-cta span, .rt-front-article__inline-cta small { display:block; }
.rt-front-article__inline-cta strong { color:#0c3aa7; }
.rt-front-article__inline-cta span, .rt-front-article__inline-cta small { color:#687898; font-size:14px; }
.rt-front-article__inline-cta .rt-btn { border:0; border-radius:8px; padding:13px 24px; background:#1547d7; color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:10px; cursor:pointer; white-space:nowrap; }
.rt-front-article__inline-cta .rt-btn svg { display:block; width:18px; height:18px; }
.rt-front-article__wide-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1180px, calc(100% - 40px)); margin:34px auto 0; padding:26px 56px; overflow:hidden; border-radius:16px; color:#fff; background:radial-gradient(circle at 88% 60%,rgba(0,255,127,.16),transparent 24%),linear-gradient(100deg,#052c96,#0459d8); }
.rt-front-article__container > .rt-front-article__wide-cta { width:100%; }
.rt-front-article__wide-cta h2 { margin:0 0 4px; color:#fff; font-size:27px; line-height:1.22; }
.rt-front-article__wide-cta h2 span { color:#20e271!important; }
.company-home .rt-front-article__wide-cta h2 { margin:0 0 4px; color:#fff; font-size:27px; line-height:1.22; }
.company-home .rt-front-article__wide-cta h2 span { color:#20e271 !important; }
.rt-front-article__wide-cta p { margin:0; color:#dce7ff; }

.rt-front-article__wide-cta .rt-btn { min-width:216px; min-height:52px; justify-content:center; gap:18px; padding:0 22px; border-radius:8px !important; background:#fff; color:#0b45c8; font-size:16px; font-weight:800; }
.rt-front-article__wide-cta .rt-btn .rt { width:18px; height:18px; color:#0b45c8; }
.rt-front-listing { color:#27395e; background:#fff; line-height:1.55; }
.rt-front-listing__container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.rt-front-listing__hero { padding:36px 0 18px; background:radial-gradient(circle at 90% 30%,rgba(11,70,202,.06),transparent 24%),#fff; }
.rt-front-listing__hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.rt-front-listing__hero-copy { min-width:0; }
.rt-front-listing__kicker { margin-bottom:12px; color:#06994b; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rt-front-listing__hero h1 { margin:0 0 16px; color:#071f56; font-size:clamp(42px,5vw,70px); line-height:1.06; letter-spacing:-.045em; }
.rt-front-listing__hero h1 span { color:#08ad57; }
.rt-front-listing__hero p { max-width:620px; margin:0 0 24px; color:#506386; font-size:17px; }
.rt-front-listing__search { max-width:430px; height:54px; display:flex; align-items:center; gap:12px; padding:0 17px; border:1px solid #e7edf5; border-radius:999px; background:#fff; box-shadow:0 8px 24px rgba(11,47,99,.06); }
.rt-front-listing__search .rt { color:#071f56; }
.rt-front-listing__search input { width:100%; border:0; outline:0; color:#27395e; background:transparent; }
.rt-front-listing__hero-visual {
  overflow:hidden;
  border-radius:1rem !important;
  background-size:cover;
  background-position:center;
}
.rt-front-listing__hero-visual img {
  width:100%;
  max-height:390px;
  object-fit:cover;
  background-size:cover;
  background-position:center;
  border-radius:1rem !important;
  margin-left:auto;
}
.rt-article-hero-slider { position:relative; aspect-ratio:1.55/1; min-height:300px; background:#eef3f8; }
.rt-article-hero-slide { position:absolute !important; inset:0; z-index:1; display:block; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .45s ease; }
.rt-article-hero-slide.is-active { opacity:1; visibility:visible; }
.rt-article-hero-slide img { width:100%; height:100%; max-height:none; object-fit:cover; margin:0; }
.rt-article-hero-caption { position:absolute !important; right:0; bottom:0; left:0; z-index:2; display:block; min-height:64px; box-sizing:border-box; padding:14px 18px 30px; color:#fff; background:linear-gradient(180deg,rgba(7,31,86,0),rgba(7,31,86,.82) 38%,rgba(7,31,86,.94)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-weight:800; line-height:1.3; }
.rt-article-hero-dots { position:absolute; right:18px; bottom:12px; z-index:3; display:flex; gap:6px; }
.rt-article-hero-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.65); cursor:pointer; }
.rt-article-hero-dots button.is-active { width:22px; border-radius:999px; background:#fff; }
.rt-front-listing__categories { padding:8px 0 18px; border-top:1px solid #f0f3f8; }
.rt-front-listing__category-row { display:flex; gap:12px; overflow-x:auto; padding:8px 2px 10px; scrollbar-width:none; }
.rt-front-listing__category-row::-webkit-scrollbar { display:none; }
.rt-front-listing__category-btn { display:inline-flex; align-items:center; gap:9px; padding:12px 17px; border:1px solid #e7edf5; border-radius:10px; background:#fff; color:#2d426d; font-weight:700; white-space:nowrap; cursor:pointer; }
.rt-front-listing__category-btn .rt, .rt-front-listing__category-btn img { width:19px; height:19px; flex:0 0 19px; color:#0b46ca; object-fit:contain; }
.rt-front-listing__category-btn.active { border-color:#0b46ca; background:#0b46ca; color:#fff; box-shadow:0 8px 18px rgba(11,70,202,.14); }
.rt-front-listing__category-btn.active .rt { color:#fff; }
.rt-front-listing__section { padding:20px 0; }
.rt-front-listing__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rt-front-listing__card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e7edf5; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(11,47,99,.045); transition:.2s ease; }
.rt-front-listing__card:hover { transform:translateY(-4px); box-shadow:0 14px 38px rgba(11,47,99,.07); }
.rt-front-listing__card[hidden] { display:none; }
.rt-front-listing__image { display:block; aspect-ratio:2/1; overflow:hidden; background:#eef3f8; }
.rt-front-listing__image img { width:100%; height:100%; object-fit:cover; }
.rt-front-listing__image-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#fff; font-size:42px; font-weight:800; letter-spacing:.08em; text-shadow:0 3px 12px rgba(7,31,86,.18); }
.rt-front-listing__image-placeholder--pengembangan { background:linear-gradient(135deg,#0b46ca,#4779e6);height:100%;}
.rt-front-listing__image-placeholder--arsitektur { background:linear-gradient(135deg,#08ad57,#65cc91);height:100%;}
.rt-front-listing__image-placeholder--integrasi { background:linear-gradient(135deg,#334f9d,#6e8fe8);height:100%;}
.rt-front-listing__image-placeholder--teknologi { background:linear-gradient(135deg,#52657f,#a5b5c9);height:100%;}
.rt-front-listing__image-placeholder--bisnis { background:linear-gradient(135deg,#087c61,#43b999);height:100%;}
.rt-front-listing__image-placeholder--lainnya { background:linear-gradient(135deg,#667085,#b2bac8);height:100%;}
.rt-front-listing__content { display:flex; flex:1; flex-direction:column; padding:14px 15px 16px; }
.rt-front-listing__tag { align-self:flex-start; display:inline-flex; padding:5px 9px; margin-bottom:9px; border-radius:999px; background:#edf8f1; color:#06994b; font-size:11px; font-weight:800; }
.rt-front-listing__tag.is-blue { background:#edf3ff; color:#0b46ca; }
.rt-front-listing__card h3 { margin:0 0 8px; color:#071f56; font-size:19px; line-height:1.28; }
.rt-front-listing__card h3 a { color:inherit; }
.rt-front-listing__card p { margin:0 0 14px; color:#637492; font-size:14px; }
.rt-front-listing__meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:#72809c; font-size:12px; }
.rt-front-listing__meta span { display:flex; align-items:center; gap:6px; }
.rt-front-listing__meta .rt { width:14px; height:14px; }
.rt-front-listing__empty { padding:30px 0; color:#637492; }
.rt-front-listing__pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin:26px 0 6px; }
.rt-front-listing__pagination a { width:40px; height:40px; display:grid; place-items:center; border:1px solid transparent; border-radius:9px; background:#fff; color:#263e6c; font-weight:700; cursor:pointer; }
.rt-front-listing__pagination a.is-active { background:#0b46ca; color:#fff; }
.rt-front-listing__pagination a.is-muted { background:#f4f7fb; color:#93a0b7; pointer-events:none; }
.rt-front-listing__pagination .rt { width:18px; height:18px; }
.rt-front-listing__newsletter { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; margin-top:18px; padding:24px 28px; border:1px solid #e7edf5; border-radius:16px; background:linear-gradient(135deg,#f8fbff,#f2fbf7); }
.rt-front-listing__newsletter-copy { display:flex; align-items:center; gap:18px; }
.rt-front-listing__newsletter-icon { width:78px; height:65px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px; background:#eaf5ff; color:#0b46ca; }
.rt-front-listing__newsletter-icon .rt { width:38px; height:38px; }
.rt-front-listing__newsletter h2 { margin:0 0 4px; color:#071f56; font-size:25px; }
.rt-front-listing__newsletter h2 span { color:#08ad57; }
.rt-front-listing__newsletter p { margin:0; color:#687895; font-size:13px; }
.rt-front-listing__newsletter-form { display:flex; align-items:center; gap:10px; }
.rt-front-listing__newsletter-form label { display:flex; flex:1; align-items:center; gap:9px; height:44px; padding:0 12px; border:1px solid #dfe7f1; border-radius:8px; background:#fff; }
.rt-front-listing__newsletter-form input { width:100%; border:0; outline:0; color:#27395e; }
.rt-front-listing__newsletter-form button { height:44px; padding:0 22px; border:0; border-radius:8px; background:#08ad57; color:#fff; font-weight:800; cursor:pointer; white-space:nowrap; }
.rt-front-listing__privacy { grid-column:2; margin-top:-14px !important; font-size:11px !important; }
.rt-front-search-hero { padding:46px 0 24px; text-align:center; background:radial-gradient(circle at 50% 0,rgba(11,70,202,.07),transparent 42%),#fff; }
.rt-front-search-hero h1 { margin:0 0 8px; color:#071f56; font-size:clamp(32px,4vw,50px); }
.rt-front-search-hero p { margin:0; color:#637492; }
.rt-front-search-form { width:min(760px,100%); height:64px; display:flex; align-items:center; gap:10px; margin:26px auto 0; padding:7px 8px 7px 18px; border:1px solid #dfe7f2; border-radius:999px; background:#fff; box-shadow:0 12px 30px rgba(11,47,99,.08); }
.rt-front-search-form label { display:flex; flex:1 1 auto; min-width:0; align-items:center; gap:11px; color:#071f56; }
.rt-front-search-form input { width:100%; min-width:0; border:0; outline:0; color:#27395e; background:transparent; }
.rt-front-search-form button { flex:0 0 auto; min-width:96px; height:48px; justify-content:center; border-radius:999px !important; }
.rt-front-search-results { padding-top:18px; }
.rt-front-search-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.rt-reference-page { min-height:100vh; padding:0 0 64px; color:#27395e; background:#fff; }
.rt-reference-page__container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.rt-reference-page__breadcrumbs { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:28px; color:#7181a3; font-size:13px; }
.rt-reference-page__breadcrumbs a { color:#0b46ca; font-weight:700; }
.rt-reference-page__breadcrumbs strong { color:#3e507c; }
.rt-reference-page__hero { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; padding:20px 0 34px; }
.rt-reference-page__hero-copy { min-width:0; }
.rt-reference-page__kicker { display:block; margin-bottom:12px; color:#06994b; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rt-reference-page__hero h1 { max-width:700px; margin:0 0 16px; color:#071f56; font-size:clamp(40px,5vw,68px); line-height:1.06; letter-spacing:-.045em; }
.rt-reference-page__hero-copy > p { max-width:620px; margin:0 0 20px; color:#506386; font-size:17px; }
.rt-reference-page__meta { display:flex; flex-wrap:wrap; gap:14px; color:#6b7a98; font-size:13px; }
.rt-reference-page__meta span { display:inline-flex; align-items:center; gap:7px; }
.rt-reference-page__meta .rt { color:#0b46ca; }
.rt-reference-page__hero-visual { min-width:0; overflow:hidden; border-radius:16px; background:#f3f6fb; box-shadow:0 10px 28px rgba(8,38,92,.09); }
.rt-reference-page__hero-visual { height:clamp(280px,32vw,420px); display:grid; place-items:center; }
.rt-reference-page__hero-visual img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; }
.rt-reference-page__categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.rt-reference-page__categories span { padding:6px 12px; border-radius:999px; background:#eaf8ef; color:#079445; font-size:13px; font-weight:700; }
.rt-reference-page__body { color:#34486f; font-size:16px; line-height:1.75; }
.rt-reference-page__body > * { max-width:100%; }
.rt-reference-page__body p { margin:0 0 18px; }
.rt-reference-page__body h2 { margin:34px 0 10px; color:#0b46ca; font-size:clamp(28px,3vw,42px); line-height:1.12; }
.rt-reference-page__body h3 { margin:24px 0 8px; color:#071f56; font-size:22px; }
.rt-reference-page__body img { height:auto; max-width:100%; border-radius:14px; }
.rt-reference-page__body a { color:#0b46ca; text-decoration:underline; text-underline-offset:3px; }
.rt-reference-page__body .panel, .rt-reference-page__body .rt-card { border:1px solid #e7edf5; border-radius:20px; background:#fff; box-shadow:0 8px 28px rgba(13,49,102,.045); }
.rt-reference-page__body .section { padding:20px 0; }
.rt-reference-page__body .section-title { margin:0 0 8px; text-align:center; color:#0b46ca; font-size:clamp(28px,3vw,42px); line-height:1.12; }
.rt-reference-page__body .section-title .blue { color:#0b46ca; }
.rt-reference-page__body .section-title .green, .rt-reference-page__body .approach-copy h2 span { color:#08ad57; }
.rt-reference-page__body .section-sub { margin:0 0 30px; text-align:center; color:#6b7a98; }
.rt-reference-page__body .belief-panel, .rt-reference-page__body .approach-panel, .rt-reference-page__body .tech-panel { padding:28px; }
.rt-reference-page__body .belief-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rt-reference-page__body .belief-card { padding:20px 16px; background:#fff; text-align:center; }
.rt-reference-page__body .belief-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 12px; border-radius:13px; background:#edf3ff; color:#0b46ca; }
.rt-reference-page__body .belief-icon .rt { width:24px; height:24px; }
.rt-reference-page__body .belief-card h3 { margin:0 0 8px; color:#071f56; font-size:17px; }
.rt-reference-page__body .belief-card p { margin:0; color:#637492; font-size:14px; }
.rt-reference-page__body .approach-panel { display:grid; grid-template-columns:1fr; gap:28px; }
.rt-reference-page__body .approach-copy h2 { margin:0 0 12px; color:#0b46ca; font-size:36px; }
.rt-reference-page__body .check-list { display:grid; gap:11px; }
.rt-reference-page__body .check { display:flex; align-items:flex-start; gap:10px; color:#415477; }
.rt-reference-page__body .check .rt { flex:0 0 auto; margin-top:4px; color:#08ad57; }
.rt-reference-page__body .tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.rt-reference-page__body .tech { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e7edf5; border-radius:12px; color:#415477; }
.rt-reference-page__body .tech-logo { display:grid; width:42px; height:42px; place-items:center; border-radius:11px; background:#edf3ff; color:#0b46ca; font-weight:800; }
.rt-reference-page__body .tech-logo svg { width:22px; height:22px; stroke-width:2.2; }
.rt-reference-page__body .tech-note { margin:18px 0 0; text-align:center; color:#687895; font-size:14px; }
.rt-reference-page__body .hero, .rt-reference-page__body .site-header, .rt-reference-page__body footer { max-width:100%; }
.rt-reference-page__tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:18px; border-top:1px solid #e5ebf4; color:#66769a; font-size:13px; }
.rt-reference-page__tags a { color:#0b46ca; font-weight:700; }
.rt-reference-page__cta { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; padding:26px 32px; border-radius:16px; color:#fff; background:linear-gradient(100deg,#052c96,#0459d8); }
.rt-reference-page__cta strong, .rt-reference-page__cta span { display:block; }
.rt-reference-page__cta strong { margin-bottom:4px; font-size:20px; }
.rt-reference-page__cta span { color:#dce7ff; font-size:14px; }
.rt-reference-page__cta .rt-btn { flex:0 0 auto; min-width:190px; justify-content:center; background:#fff; color:#0b45c8; }
.front-reference-page .rt-front-article__inline-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 28px; padding:16px 20px; border:1px solid #e6ebf3; border-radius:16px; background:#fbfcfe; color:inherit; box-shadow:none; }
.front-reference-page .rt-front-article__inline-cta strong { color:#0c3aa7; font-size:inherit; }
.front-reference-page .rt-front-article__inline-cta small { color:#687898; font-size:14px; }
.front-reference-page .rt-front-article__inline-cta .rt-btn { min-width:0; background:#1547d7; color:#fff; }
@media (max-width:900px) { .rt-front-article__grid { grid-template-columns:1fr; } .rt-front-article__sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) { .rt-front-listing__hero-grid { grid-template-columns:1fr; } .rt-front-listing__hero-copy { text-align:center; } .rt-front-listing__hero p, .rt-front-listing__search { margin-inline:auto; } .rt-front-listing__hero-visual { order:-1; } .rt-front-listing__hero-visual img { max-height:340px; } .rt-front-listing__hero-visual .rt-article-hero-slide img { max-height:none; } .rt-front-listing__grid { grid-template-columns:repeat(2,1fr); } .rt-front-listing__newsletter { grid-template-columns:1fr; } .rt-front-listing__privacy { grid-column:auto; margin-top:-10px !important; } }
@media (max-width:900px) { .rt-reference-page__hero { grid-template-columns:1fr; } .rt-reference-page__hero-copy { text-align:center; } .rt-reference-page__hero-copy > p { margin-inline:auto; } .rt-reference-page__hero-visual { order:-1; } }
@media (max-width:900px) { .rt-reference-page__body .belief-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .rt-front-article__container { width:min(100% - 28px,1180px); } .rt-front-article { padding-top:22px; } .rt-front-article__breadcrumbs { margin-bottom:22px; } .rt-front-article__lead { font-size:16px; } .rt-front-article__meta { align-items:flex-start; } .rt-front-article__share { width:100%; } .rt-front-article__inline-cta, .rt-front-article__wide-cta { align-items:flex-start; flex-direction:column; } .rt-front-article__inline-cta .rt-btn, .rt-front-article__wide-cta .rt-btn { width:100%; justify-content:center; } .rt-front-article__wide-cta { padding:26px 24px; } .rt-front-article__sidebar { grid-template-columns:1fr; } .rt-front-article__body .principle { grid-template-columns:60px minmax(0,1fr); gap:14px; } .rt-front-article__body .principle-icon { width:60px; height:60px; border-radius:13px; } }
@media (max-width:640px) { .rt-share-modal { padding:14px; } .rt-share-modal__dialog { padding:22px 16px; border-radius:18px; } .rt-share-modal__options { gap:8px; } .rt-share-modal__options button { min-height:60px; font-size:.7rem; } }
@media (max-width:680px) { .rt-front-listing__container { width:min(100% - 28px,1180px); } .rt-front-listing__hero { padding-top:20px; } .rt-front-listing__hero h1 { font-size:41px; } .rt-front-listing__hero p { font-size:16px; } .rt-front-listing__grid { grid-template-columns:1fr; } .rt-front-listing__newsletter { padding:22px 18px; } .rt-front-listing__newsletter-copy { align-items:flex-start; } .rt-front-listing__newsletter-form { flex-direction:column; align-items:stretch; } .rt-front-listing__newsletter-form label, .rt-front-listing__newsletter-form button { width:100%; } }
@media (max-width:680px) { .rt-front-search-hero { padding:30px 0 18px; } .rt-front-search-hero h1 { font-size:32px; } .rt-front-search-form { height:56px; margin-top:20px; padding-left:14px; } .rt-front-search-form button { min-width:76px; height:42px; } .rt-front-search-grid { grid-template-columns:1fr; gap:14px; } }
@media (max-width:680px) { .rt-reference-page__container { width:min(100% - 28px,1180px); } .rt-reference-page { padding-top:20px; } .rt-reference-page__hero { padding-top:12px; } .rt-reference-page__hero h1 { font-size:40px; } .rt-reference-page__hero-copy > p { font-size:16px; } .rt-reference-page__cta { align-items:flex-start; flex-direction:column; padding:24px 20px; } .rt-reference-page__cta .rt-btn { width:100%; } }
@media (max-width:680px) { .rt-reference-page__body .belief-grid, .rt-reference-page__body .tech-grid { grid-template-columns:1fr; } .rt-reference-page__body .belief-panel, .rt-reference-page__body .approach-panel, .rt-reference-page__body .tech-panel { padding:22px 18px; } }
.company-home .perspective-note { margin: 18px auto 0; padding: 14px 22px; border-radius: 12px; background: #effaf4; color: #405879; display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 920px; text-align: center; }
.company-home .perspective-note svg, .company-home .perspective-note .rt { color: var(--green); flex: 0 0 auto; }
.company-home .services { padding: 20px 8px 12px; }
.company-home .service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 22px; }
.company-home .service-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: center; background: #fff; transition: .2s ease; min-height: 230px; }
.company-home .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.company-home .service-icon { width: 48px; height: 48px; border-radius: 11px; margin: 0 auto 15px; display: grid; place-items: center; color: #fff; background: var(--blue); }
.company-home .service-icon .rt { width: 1.35rem; height: 1.35rem; }
.company-home .service-card:nth-child(even) .service-icon { background: var(--green); }
.company-home .service-card h3 { font-size: 18px; line-height: 1.25; margin: 0 0 10px; color: var(--navy); }
.company-home .service-card p { font-size: 14px; color: #647595; margin: 0; }
.company-home .methodology { padding: 24px 24px 32px; }
.company-home .method-grid { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: start; gap: 10px; margin-top: 26px; }
.company-home .method-card { min-width: 0; text-align: center; }
.company-home .method-icon-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto 17px; display: grid; place-items: center; border: 2px solid #6a98d8; border-radius: 50%; }
.company-home .method-card:nth-of-type(1n) .method-icon-wrap { border-color: #6a98d8; }
.company-home .method-card:nth-of-type(even) .method-icon-wrap { border-color: #6fd5ba; }
.company-home .method-num { position: absolute; top: -9px; left: -7px; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 900; font-size: 16px; z-index: 1; }
.company-home .method-card:nth-of-type(even) .method-num { background: var(--green); }
.company-home .method-icon { color: var(--blue); display: grid; place-items: center; }
.company-home .method-icon .rt { width: 3.6rem; height: 3.6rem; }
.company-home .method-card:nth-of-type(even) .method-icon { color: var(--green-dark); }
.company-home .method-card h3 { margin: 0 0 10px; min-height: 52px; color: var(--navy); font-size: 18px; line-height: 1.2; }
.company-home .method-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.company-home .method-grid > .method-arrow { align-self: start; width: 1rem; height: 1rem; display: block; margin-top: calc(75px - .5rem); color: var(--green); }
.company-home .advantages { display: grid; grid-template-columns: 1fr 420px 1fr; gap: 30px; align-items: center; padding: 28px 35px; }
.company-home .adv-col h2 { font-size: 31px; }
.company-home .benefit-visual { display: grid; place-items: center; align-self: center; }
.company-home .benefit-visual img { width: 100%; max-height: 190px; object-fit: contain; margin: 0 auto; }
.company-home .cta { margin-top: 20px; border-radius: 17px; padding: 27px 54px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: linear-gradient(105deg,#0a42c8,#0b58df); box-shadow: 0 16px 34px rgba(11,70,202,.18); }
.company-home .cta h2 { margin: 0 0 5px; font-size: 29px; line-height: 1.22; }
.company-home .cta p { margin: 0; color: #d9e7ff; }
.company-home .cta .btn { background: #fff; color: var(--blue); min-width: 190px; justify-content: center; }
.company-home footer { margin-top: 0; background: #071f56; color: #fff; padding: 40px 0 20px; }
.company-home .footer-grid { display: grid; grid-template-columns: 1.25fr .7fr 1fr 1fr; gap: 40px; }
.company-home .footer-brand p { color: #d2dcf1; font-size: 14px; max-width: 320px; }
.company-home footer h4 { margin: 0 0 13px; }
.company-home footer ul { list-style: none; padding: 0; margin: 0; color: #d5def0; font-size: 14px; }
.company-home footer li { margin: 5px 0; }
.company-home .socials { display: flex; gap: 10px; margin-top: 16px; }
.company-home .socials a { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: grid; place-items: center; }
.company-home .copyright { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); text-align: center; color: #afbdd8; font-size: 12px; }
.company-home .copyright > .rt { width: 12px; height: 12px; vertical-align: -2px; }

@media (max-width: 980px) {
  .company-home .nav-links { display: none; position: absolute; left: 20px; right: 20px; top: 75px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 14px; padding: 12px; flex-direction: column; align-items: stretch; gap: 0; }
  .company-home .nav-links.open { display: flex; }
  .company-home .nav-links a { padding: 12px 14px; }
  .company-home .nav-links a.active::after { display: none; }
  .company-home .menu-btn { display: block; }
  .company-home .hero-grid, .company-home .about-panel, .company-home .challenge-panel { grid-template-columns: 1fr; }
  .company-home .hero-copy { text-align: center; padding: 0; }
  .company-home .hero p { margin-inline: auto; }
  .company-home .hero-actions, .company-home .hero-badges { justify-content: center; }
  .company-home .hero-visual { order: -1; }
  .company-home .hero-visual img { max-height: 400px; }
  .company-home .about-panel { padding: 28px; }
  .company-home .about-visual { order: 2; }
  .company-home .compare-grid { grid-template-columns: 1fr; }
  .company-home .service-grid { grid-template-columns: repeat(2,1fr); }
  .company-home .advantages { grid-template-columns: 1fr; }
  .company-home .benefit-visual { order: 3; }
  .company-home .footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .company-home .container { width: min(calc(100% - 28px), 1180px); }
  /* Keep the mobile header on one stable row. The dropdown is positioned
     independently so opening it never changes the navbar's dimensions. */
  .company-home .site-header { position: sticky; }
  .company-home .nav {
    width: min(calc(100% - 24px), 1180px);
    height: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 24px;
    align-items: center;
    gap: 10px;
  }
  .company-home .brand {
    min-width: 0;
    width: 100%;
    gap: 9px;
    font-size: 12px;
    letter-spacing: -.08px;
    line-height: 1.2;
    overflow: hidden;
  }
  .company-home .brand > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .company-home .brand-logo,
  .company-home .brand-mark { width: 32px; height: 32px; }
  .company-home .front-nav-dropdown { width: 40px; height: 40px; }
  .company-home .front-nav-icon-button { width: 40px; height: 40px; }
  .company-home .front-nav-dropdown-menu {
    top: calc(100% + 10px);
    right: 0;
  }
  .company-home .menu-btn {
    display: grid;
    width: 24px;
    height: 40px;
    padding: 0;
    place-items: center;
    justify-self: end;
  }
  .company-home .menu-btn .rt { width: 18px; height: 18px; }
  .company-home .nav-links {
    left: 14px;
    right: 14px;
    top: 78px;
    margin: 0;
  }
  .company-home .brand { font-size: 12px; }
  .company-home .hero { padding-top: 20px; }
  .company-home .hero h1 { font-size: 42px; }
  .company-home .hero p { font-size: 16px; }
  .company-home .hero-actions .btn { width: 100%; justify-content: center; }
  .company-home .hero-badges { display: grid; grid-template-columns: 1fr; }
  .company-home .about-panel, .company-home .challenge-panel, .company-home .perspective, .company-home .methodology, .company-home .advantages { padding: 22px 18px; }
  .company-home .about-copy h2, .company-home .challenge-panel h2 { font-size: 31px; }
  .company-home .compare-card { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 20px 17px; }
  .company-home .compare-grid { grid-template-columns: 1fr; }
  .company-home .compare-visual .rt { width: 3.5rem; height: 3.5rem; }
  .company-home .service-grid { grid-template-columns: 1fr; }
  .company-home .method-grid { grid-template-columns: 1fr; gap: 24px; }
  .company-home .method-arrow { display: none; }
  .company-home .method-icon-wrap { width: 135px; height: 135px; }
  .company-home .cta { padding: 25px 22px; align-items: flex-start; flex-direction: column; }
  .company-home .cta .btn { width: 100%; }
.company-home .footer-grid { grid-template-columns: 1fr; }
}
.company-home .footer-newsletter { display:grid; gap:8px; margin-top:18px; }
.company-home .footer-newsletter label { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.22); border-radius:8px; }
.company-home .footer-newsletter input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#fff; }
.company-home .footer-newsletter input::placeholder { color:#b9c6df; }
.company-home .footer-newsletter button { padding:8px 12px; border:0; border-radius:8px; background:#08ad57; color:#fff; font-weight:700; cursor:pointer; }

/* Shared public dark mode. The values intentionally follow the Admin Panel. */
html[data-theme="dark"] body.company-page { --front-bg:#212121; --front-surface:#2f2f2f; --front-surface-muted:#262626; --front-text:#ececec; --front-muted:#b4b4b4; --front-line:rgba(255,255,255,.12); --front-soft:rgba(255,255,255,.06); background:var(--front-bg); color:var(--front-text); }
html[data-theme="dark"] body.company-page .company-home { --navy:#f1f1f1; --blue:#73a7ff; --blue-2:#82b4ff; --green:#48d889; --green-dark:#63e09a; --text:#ececec; --muted:#b4b4b4; --line:var(--front-line); --white:var(--front-surface); --shadow:0 16px 42px rgba(0,0,0,.25); color:var(--front-text); background:var(--front-bg); }
html[data-theme="dark"] body.company-page .company-home .site-header { background:rgba(33,33,33,.95); border-bottom-color:var(--front-line); }
html[data-theme="dark"] body.company-page .company-home .panel,
html[data-theme="dark"] body.company-page .company-home .service-card,
html[data-theme="dark"] body.company-page .company-home .compare-card,
html[data-theme="dark"] body.company-page .company-home .badge,
html[data-theme="dark"] body.company-page .company-home .btn-outline { background:var(--front-surface); border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .company-home .brand-mark { background:var(--front-surface); }
html[data-theme="dark"] body.company-page .company-home .hero p,
html[data-theme="dark"] body.company-page .company-home .about-copy p,
html[data-theme="dark"] body.company-page .company-home .check,
html[data-theme="dark"] body.company-page .company-home .compare-subtitle,
html[data-theme="dark"] body.company-page .company-home .compare-card ul,
html[data-theme="dark"] body.company-page .company-home .service-card p { color:var(--front-muted); }
html[data-theme="dark"] body.company-page .company-home .warning { background:var(--front-surface-muted); color:var(--front-text); }
html[data-theme="dark"] body.company-page .company-home .compare-card.rakit { background:rgba(7,173,87,.12); border-color:rgba(72,216,137,.28); }
html[data-theme="dark"] body.company-page .company-home .perspective-note { background:rgba(7,173,87,.12); color:var(--front-text); }
html[data-theme="dark"] body.company-page .company-home .front-nav-icon-button,
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown-menu,
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown-menu a,
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown-menu button { background:var(--front-surface); color:var(--front-text); border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown-menu a:hover,
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown-menu button:hover { background:var(--front-soft); color:#9cc3ff; }
html[data-theme="dark"] body.company-page .company-home .front-nav-icon-button:hover,
html[data-theme="dark"] body.company-page .company-home .front-nav-dropdown.is-open .front-nav-icon-button { background:var(--front-soft); color:#9cc3ff; border-color:rgba(115,167,255,.55); }
html[data-theme="dark"] body.company-page .front-reference-page .stat-card,
html[data-theme="dark"] body.company-page .front-reference-page .role,
html[data-theme="dark"] body.company-page .front-reference-page .tech,
html[data-theme="dark"] body.company-page .front-reference-page .hero-point,
html[data-theme="dark"] body.company-page .front-reference-page .faq-button {
  background:var(--front-surface);
  border-color:var(--front-line);
  color:var(--front-text);
}
html[data-theme="dark"] body.company-page .front-reference-page .metrics {
  background:var(--front-surface-muted);
}
html[data-theme="dark"] body.company-page .front-reference-page .metric:not(:last-child)::after {
  background:var(--front-line);
}
html[data-theme="dark"] body.company-page .front-reference-page .stat-label,
html[data-theme="dark"] body.company-page .front-reference-page .stat-desc,
html[data-theme="dark"] body.company-page .front-reference-page .tech-note,
html[data-theme="dark"] body.company-page .front-reference-page .faq-answer {
  color:var(--front-muted);
}

html[data-theme="dark"] body.company-page .rt-front-listing__hero,
html[data-theme="dark"] body.company-page .rt-front-search-hero,
html[data-theme="dark"] body.company-page .rt-reference-page,
html[data-theme="dark"] body.company-page .rt-front-article { background:var(--front-bg); }
html[data-theme="dark"] body.company-page .rt-front-listing__categories {
  background:var(--front-bg);
  border-top-color:var(--front-line);
  color:var(--front-text);
}
html[data-theme="dark"] body.company-page .rt-front-listing__search,
html[data-theme="dark"] body.company-page .rt-front-search-form,
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn,
html[data-theme="dark"] body.company-page .rt-front-listing__card,
html[data-theme="dark"] body.company-page .rt-front-listing__pagination a,
html[data-theme="dark"] body.company-page .rt-front-listing__newsletter,
html[data-theme="dark"] body.company-page .rt-front-listing__newsletter-form label,
html[data-theme="dark"] body.company-page .rt-reference-page__body .panel,
html[data-theme="dark"] body.company-page .rt-reference-page__body .rt-card,
html[data-theme="dark"] body.company-page .rt-reference-page__body .belief-card,
html[data-theme="dark"] body.company-page .rt-front-article__sidebar .rt-card,
html[data-theme="dark"] body.company-page .rt-front-article__inline-cta { background:var(--front-surface); border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.active,
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.is-active {
  background:#73a7ff;
  border-color:#73a7ff;
  color:#101820;
}
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn {
  color:var(--front-text) !important;
}
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn .rt {
  color:#9cc3ff !important;
}
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn img {
  filter:invert(78%) sepia(34%) saturate(820%) hue-rotate(177deg) brightness(102%) contrast(96%) !important;
}
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.active img,
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.is-active img {
  filter:brightness(0) invert(1) !important;
}
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.active .rt,
html[data-theme="dark"] body.company-page .rt-front-listing__category-btn.is-active .rt {
  color:#fff !important;
}
html[data-theme="dark"] body.company-page .rt-front-listing__hero p,
html[data-theme="dark"] body.company-page .rt-front-listing__card p,
html[data-theme="dark"] body.company-page .rt-front-listing__meta,
html[data-theme="dark"] body.company-page .rt-front-listing__empty,
html[data-theme="dark"] body.company-page .rt-front-search-hero p,
html[data-theme="dark"] body.company-page .rt-reference-page__hero-copy > p,
html[data-theme="dark"] body.company-page .rt-reference-page__meta,
html[data-theme="dark"] body.company-page .rt-reference-page__body,
html[data-theme="dark"] body.company-page .rt-reference-page__body .belief-card p,
html[data-theme="dark"] body.company-page .rt-front-article__lead,
html[data-theme="dark"] body.company-page .rt-front-article__body,
html[data-theme="dark"] body.company-page .rt-front-article__popular-list time { color:var(--front-muted); }
html[data-theme="dark"] body.company-page .rt-front-listing__card h3,
html[data-theme="dark"] body.company-page .rt-front-listing__newsletter h2,
html[data-theme="dark"] body.company-page .rt-front-search-hero h1,
html[data-theme="dark"] body.company-page .rt-reference-page__hero h1,
html[data-theme="dark"] body.company-page .rt-reference-page__body h3,
html[data-theme="dark"] body.company-page .rt-front-article__content h1,
html[data-theme="dark"] body.company-page .rt-front-article__sidebar h2 { color:var(--front-text); }
html[data-theme="dark"] body.company-page .rt-front-article__body h2,
html[data-theme="dark"] body.company-page .rt-front-article__body h3,
html[data-theme="dark"] body.company-page .rt-front-article__body .principle h3 { color:#69e39b; }
html[data-theme="dark"] body.company-page .rt-front-article__body .principle p,
html[data-theme="dark"] body.company-page .rt-front-article__sidebar nav a,
html[data-theme="dark"] body.company-page .rt-front-article__popular-list > a { color:var(--front-text); }
html[data-theme="dark"] body.company-page .rt-front-article__inline-cta strong { color:#9cc3ff; }
html[data-theme="dark"] body.company-page .rt-front-article__inline-cta span,
html[data-theme="dark"] body.company-page .rt-front-article__inline-cta small,
html[data-theme="dark"] body.company-page .rt-front-article__newsletter p { color:var(--front-muted); }
html[data-theme="dark"] body.company-page .rt-front-article__body .principle-icon,
html[data-theme="dark"] body.company-page .rt-front-article__mail-art { background:rgba(115,167,255,.14); border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .rt-public-article__tags { border-top-color:var(--front-line); color:var(--front-muted); }
html[data-theme="dark"] body.company-page .rt-front-listing__search input,
html[data-theme="dark"] body.company-page .rt-front-search-form input,
html[data-theme="dark"] body.company-page .rt-front-listing__newsletter-form input { color:var(--front-text); }
html[data-theme="dark"] body.company-page .rt-front-listing__tag,
html[data-theme="dark"] body.company-page .rt-reference-page__categories span { background:rgba(72,216,137,.14); color:#69e39b; }
html[data-theme="dark"] body.company-page .rt-front-listing__tag.is-blue { background:rgba(115,167,255,.14); color:#9cc3ff; }
html[data-theme="dark"] body.company-page .rt-front-listing__pagination a.is-muted { background:var(--front-surface-muted); color:#777; }
html[data-theme="dark"] body.company-page .rt-reference-page__body .tech,
html[data-theme="dark"] body.company-page .rt-reference-page__body .rt-card { color:var(--front-text); border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .rt-reference-page__body .tech-logo,
html[data-theme="dark"] body.company-page .rt-reference-page__body .belief-icon { background:rgba(115,167,255,.14); }
html[data-theme="dark"] body.company-page footer { background:#181818; }

html[data-theme="dark"] body.company-page .front-search-modal .rt-modal-content,
html[data-theme="dark"] body.company-page .front-search-modal .rt-table-toolbar,
html[data-theme="dark"] body.company-page .front-search-result { background:var(--front-surface); border-color:var(--front-line); color:var(--front-text); }
html[data-theme="dark"] body.company-page .front-search-result p,
html[data-theme="dark"] body.company-page .front-search-result small { color:var(--front-muted); }


/* Exact visual rules from rakit-teknologi-website/tentang-kami.html, scoped to Pages. */
.front-reference-page {
      --navy:#071f56;
      --blue:#0b46ca;
      --green:#08ad57;
      --green-dark:#06994b;
      --text:#26395f;
      --muted:#6c7b99;
      --line:#e7edf5;
      --soft:#f8fafc;
      --white:#fff;
      --shadow:0 14px 38px rgba(11,47,99,.07);
      --radius:20px;
    }

/* One public navbar for Frontpage, Artikel, and Pages. */
.company-home .site-header .nav {
  width: min(1180px, calc(100% - 40px));
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-inline: auto;
}
.company-home .site-header .brand {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}
.company-home .site-header .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-home .site-header .brand-mark,
.company-home .site-header .brand-logo { width: 38px; height: 38px; flex: 0 0 auto; }
.company-home .site-header .nav-links { display: flex; align-items: center; gap: 31px; font-size: 14px; font-weight: 700; }
.company-home .site-header .nav-links a { position: relative; padding: 29px 0 25px; }
.company-home .site-header .nav-links a.active { color: var(--green); }
.company-home .site-header .nav-links a.active::after { display: block; bottom: 12px; height: 3px; }
.company-home .site-header .front-nav-dropdown { position: relative; flex: 0 0 auto; }
.company-home .site-header .front-nav-icon-button { width: 40px; height: 40px; }
.company-home .site-header .front-nav-dropdown-menu { top: calc(100% + 10px); right: 0; }
.company-home .site-header .front-nav-dropdown.is-open .front-nav-dropdown-menu { display: grid; }
.company-home .site-header .menu-btn { display: none; }

@media (max-width: 980px) {
  .company-home .site-header .nav-links {
    top: 75px;
    right: 20px;
    left: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
  }
  .company-home .site-header .nav-links.open { display: flex; }
  .company-home .site-header .nav-links a { padding: 12px 14px; }
  .company-home .site-header .nav-links a.active::after { display: none; }
  .company-home .site-header .menu-btn { display: grid; place-items: center; }
}

@media (max-width: 680px) {
  .company-home .site-header .nav {
    width: min(1180px, calc(100% - 24px));
    height: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 24px;
    gap: 10px;
  }
  .company-home .site-header .brand { width: 100%; gap: 9px; font-size: 12px; letter-spacing: -.08px; overflow: hidden; }
  .company-home .site-header .brand-mark,
  .company-home .site-header .brand-logo { width: 32px; height: 32px; }
  .company-home .site-header .front-nav-dropdown,
  .company-home .site-header .front-nav-icon-button { width: 40px; height: 40px; }
  .company-home .site-header .menu-btn { width: 24px; height: 40px; padding: 0; justify-self: end; }
  .company-home .site-header .menu-btn .rt { width: 18px; height: 18px; }
  .company-home .site-header .nav-links { top: 78px; right: 14px; left: 14px; margin: 0; }
}
.front-reference-page * {box-sizing:border-box}
.front-reference-page {scroll-behavior:smooth}
.front-reference-page {
      margin:0;
      font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.55;
      background:#fff;
    }
.front-reference-page img {max-width:100%;display:block}
.front-reference-page a {text-decoration:none;color:inherit}
.front-reference-page button {font:inherit}
.front-reference-page .container {width:min(1180px,calc(100% - 40px));margin-inline:auto}
.front-reference-page .section {padding:20px 0}
.front-reference-page .panel {
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:0 8px 26px rgba(12,49,102,.045);
    }
.front-reference-page .section-title {
      margin:0 0 8px;
      text-align:center;
      color:var(--navy);
      font-size:clamp(28px,3vw,42px);
      line-height:1.15;
      letter-spacing:-.03em;
    }
.front-reference-page .section-title .blue {color:var(--blue)}
.front-reference-page .section-title .green {color:var(--green)}
.front-reference-page .section-sub {
      max-width:760px;
      margin:0 auto 28px;
      text-align:center;
      color:var(--muted);
      font-size:16px;
    }
.front-reference-page .site-header {
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,237,245,.86);
    }
.front-reference-page .nav {
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
.front-reference-page .brand {
      display:flex;
      align-items:center;
      gap:11px;
      color:#103ab3;
      font-weight:800;
      font-size:18px;
    }
.front-reference-page .brand-mark {
      width:38px;
      height:38px;
      border:3px solid #17b75a;
      border-radius:5px;
      position:relative;
      background:#fff;
      box-shadow:0 5px 14px rgba(10,70,181,.12);
    }
.front-reference-page .brand-mark::before, .front-reference-page .brand-mark::after {
      content:"";
      position:absolute;
      bottom:6px;
      background:#0b46ca;
      border-radius:2px 2px 0 0;
    }
.front-reference-page .brand-mark::before {left:8px;width:7px;height:17px}
.front-reference-page .brand-mark::after {right:7px;width:7px;height:24px}
.front-reference-page .brand-mark span {
      position:absolute;
      left:13px;
      top:5px;
      width:7px;
      height:7px;
      border-radius:50%;
      background:#17b75a;
    }
.front-reference-page .nav-links {
      display:flex;
      align-items:center;
      gap:31px;
      font-size:14px;
      font-weight:700;
    }
.front-reference-page .nav-links a {
      position:relative;
      padding:29px 0 25px;
    }
.front-reference-page .nav-links a.active {color:var(--green)}
.front-reference-page .nav-links a.active::after {
      content:"";
      position:absolute;
      left:0;right:0;bottom:12px;
      height:3px;
      border-radius:999px;
      background:var(--green);
    }
.front-reference-page .menu-btn {
      display:none;
      border:0;
      background:transparent;
      color:var(--navy);
      padding:8px;
    }
.front-reference-page .hero {padding:34px 0 16px}
.front-reference-page .hero-grid {
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:34px;
      align-items:center;
    }
.front-reference-page .hero-kicker {
      color:var(--green-dark);
      font-size:14px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
.front-reference-page .hero h1 {
      margin:0 0 16px;
      color:var(--navy);
      font-size:clamp(43px,5vw,72px);
      line-height:1.04;
      letter-spacing:-.045em;
    }
.front-reference-page .hero h1 span {color:var(--green)}
.front-reference-page .hero-copy>p {
      margin:0 0 24px;
      color:#506386;
      font-size:17px;
      max-width:630px;
    }
.front-reference-page .stat-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-bottom:22px;
    }
.front-reference-page .stat-card {
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px 12px;
      text-align:center;
      background:#fff;
      min-height:145px;
      box-shadow:0 5px 15px rgba(16,52,104,.035);
    }
.front-reference-page .stat-icon {
      width:44px;height:44px;border-radius:12px;
      margin:0 auto 10px;
      display:grid;place-items:center;
      background:#eef4ff;color:var(--blue);
    }
.front-reference-page .stat-card:nth-child(odd) .stat-icon {background:#ecfaf2;color:var(--green)}
.front-reference-page .stat-label {font-size:12px;color:#4f6388;font-weight:700}
.front-reference-page .stat-value {
      display:block;
      margin:3px 0;
      color:var(--navy);
      font-size:25px;
      line-height:1;
      font-weight:800;
    }
.front-reference-page .stat-desc {font-size:11px;color:#7886a3}
.front-reference-page .hero-actions {display:flex;gap:14px;flex-wrap:wrap}
.front-reference-page .btn {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 24px;
      border-radius:10px;
      font-weight:800;
      border:1px solid transparent;
      cursor:pointer;
    }
.front-reference-page .btn-primary {background:var(--blue);color:#fff;box-shadow:0 10px 22px rgba(11,70,202,.18)}
.front-reference-page .btn-outline {background:#fff;color:var(--blue);border-color:#b7caf5}
.front-reference-page .hero-visual {
      height:clamp(300px,34vw,520px);
      display:grid;
      place-items:center;
    }
.front-reference-page .hero-visual img {
      width:100%;
      height:100%;
      max-height:none;
      object-fit:contain;
      margin-left:auto;
    }
.front-reference-page .belief-panel {padding:28px 36px 30px}
.front-reference-page .belief-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      margin-top:28px;
    }
.front-reference-page .belief-card {
      text-align:center;
      padding:0 24px;
      position:relative;
    }
.front-reference-page .belief-card:not(:last-child)::after {
      content:"";
      position:absolute;
      right:0;
      top:15px;
      bottom:15px;
      width:1px;
      background:#dfe6f1;
    }
.front-reference-page .belief-icon {
      width:58px;height:58px;border-radius:50%;
      margin:0 auto 15px;
      display:grid;place-items:center;
      color:#fff;background:var(--blue);
      box-shadow:0 8px 18px rgba(11,70,202,.14);
    }
.front-reference-page .belief-card:nth-child(even) .belief-icon {background:var(--green)}
.front-reference-page .belief-card h3 {
      margin:0 0 7px;
      color:var(--navy);
      font-size:17px;
    }
.front-reference-page .belief-card p {
      margin:0;
      color:#627493;
      font-size:14px;
    }
.front-reference-page .approach-panel {
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:38px;
      align-items:center;
      padding:30px 42px 24px;
    }
.front-reference-page .approach-visual img {
      width:100%;
      max-height:340px;
      object-fit:contain;
    }
.front-reference-page .approach-copy h2 {
      margin:0 0 10px;
      color:var(--blue);
      font-size:38px;
      line-height:1.1;
    }
.front-reference-page .approach-copy h2 span {color:var(--green)}
.front-reference-page .approach-copy p {
      margin:0 0 17px;
      color:#536688;
    }
.front-reference-page .check-list {display:grid;gap:9px}
.front-reference-page .check {
      display:flex;
      gap:9px;
      align-items:flex-start;
      color:#405579;
      font-size:14px;
    }
.front-reference-page .check svg {color:var(--green);margin-top:2px;flex:0 0 auto}
.front-reference-page .metrics {
      grid-column:1/-1;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      margin-top:14px;
      padding:18px 10px;
      border-radius:15px;
      background:linear-gradient(135deg,#f9fbff,#f3f7fd);
    }
.front-reference-page .metric {
      text-align:center;
      padding:6px 22px;
      position:relative;
    }
.front-reference-page .metric:not(:last-child)::after {
      content:"";
      position:absolute;right:0;top:4px;bottom:4px;width:1px;background:#dbe4f0;
    }
.front-reference-page .metric-icon {
      width:39px;height:39px;
      margin:0 auto 6px;
      color:var(--blue);
      display:grid;place-items:center;
    }
.front-reference-page .metric:nth-child(even) .metric-icon {color:var(--green)}
.front-reference-page .metric strong {
      display:block;
      color:var(--navy);
      font-size:29px;
      line-height:1.05;
    }
.front-reference-page .metric span {
      color:#536789;
      font-size:13px;
    }
.front-reference-page .team-panel {
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:30px;
      align-items:end;
      padding:28px 34px 0;
      overflow:hidden;
    }
.front-reference-page .team-copy {padding-bottom:28px}
.front-reference-page .team-copy h2 {
      margin:0 0 10px;
      color:var(--blue);
      font-size:34px;
    }
.front-reference-page .team-copy h2 span {color:var(--green)}
.front-reference-page .team-copy>p {
      margin:0 0 20px;
      color:#5b6d8d;
    }
.front-reference-page .role-grid {
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:8px;
    }
.front-reference-page .role {
      min-height:78px;
      border:1px solid var(--line);
      border-radius:12px;
      padding:11px 8px;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      color:#28436f;
      font-size:11px;
      font-weight:700;
      background:#fff;
    }
.front-reference-page .role svg {color:var(--blue)}
.front-reference-page .team-visual img {
      width:100%;
      max-height:275px;
      object-fit:contain;
      object-position:bottom;
    }
.front-reference-page .tech-panel {padding:28px 28px 26px}
.front-reference-page .tech-grid {
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:10px;
      margin:22px 0 16px;
    }
.front-reference-page .tech {
      min-height:72px;
      border:1px solid var(--line);
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
      background:#fff;
      color:var(--navy);
      font-weight:800;
      font-size:17px;
      gap:8px;
      text-align:center;
    }
.front-reference-page .tech-logo {
      width:34px;height:34px;
      border-radius:9px;
      display:grid;place-items:center;
      background:#eef4ff;color:var(--blue);
      font-size:12px;font-weight:800;
    }
.front-reference-page .tech:nth-child(even) .tech-logo {background:#ecfaf2;color:var(--green)}
.front-reference-page .tech-note {
      text-align:center;
      margin:0;
      color:#657696;
      font-size:14px;
    }
.front-reference-page .cta {
      margin-top:20px;
      border-radius:17px;
      padding:28px 56px;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      background:
        radial-gradient(circle at 85% 50%,rgba(0,255,135,.14),transparent 23%),
        linear-gradient(105deg,#0a40c2,#0b58dc);
      box-shadow:0 16px 34px rgba(11,70,202,.18);
    }
.front-reference-page .cta h2 {
      margin:0 0 5px;
      font-size:28px;
      line-height:1.22;
    }
.front-reference-page .cta h2 span {color:#1ee878}
.front-reference-page .cta p {margin:0;color:#dce7ff}
.front-reference-page .cta .btn {
      min-width:220px;
      justify-content:center;
      background:#fff;
      color:var(--blue);
    }
.front-reference-page footer {
      background:#071f56;
      color:#fff;
      padding:40px 0 20px;
    }
.front-reference-page .footer-grid {
      display:grid;
      grid-template-columns:1.25fr .7fr 1fr 1fr;
      gap:40px;
    }
.front-reference-page .footer-brand p {
      color:#d3dcf0;
      font-size:14px;
      max-width:320px;
    }
.front-reference-page footer h4 {margin:0 0 13px}
.front-reference-page footer ul {
      list-style:none;
      padding:0;
      margin:0;
      color:#d5def0;
      font-size:14px;
    }
.front-reference-page footer li {margin:5px 0}
.front-reference-page .socials {
      display:flex;
      gap:10px;
      margin-top:16px;
    }
.front-reference-page .socials a {
      width:30px;height:30px;
      border:1px solid rgba(255,255,255,.25);
      border-radius:50%;
      display:grid;place-items:center;
    }
.front-reference-page .contact li {
      display:flex;
      gap:9px;
      align-items:flex-start;
    }
.front-reference-page .copyright {
      margin-top:28px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.14);
      text-align:center;
      color:#afbdd8;
      font-size:12px;
    }

    @media (max-width:980px){
.front-reference-page .nav-links {
        display:none;
        position:absolute;
        left:20px;right:20px;top:75px;
        background:#fff;
        border:1px solid var(--line);
        box-shadow:var(--shadow);
        border-radius:14px;
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
      }
.front-reference-page .nav-links.open {display:flex}
.front-reference-page .nav-links a {padding:12px 14px}
.front-reference-page .nav-links a.active::after {display:none}
.front-reference-page .menu-btn {display:block}
.front-reference-page .hero-grid, .front-reference-page .approach-panel, .front-reference-page .team-panel {grid-template-columns:1fr}
.front-reference-page .hero-copy {text-align:center}
.front-reference-page .hero-copy>p {margin-inline:auto}
.front-reference-page .hero-actions {justify-content:center}
.front-reference-page .hero-visual {order:-1}
.front-reference-page .hero-visual img {max-height:410px}
.front-reference-page .belief-grid {grid-template-columns:repeat(2,1fr);gap:26px 0}
.front-reference-page .belief-card:nth-child(2)::after {display:none}
.front-reference-page .approach-visual {order:2}
.front-reference-page .role-grid {grid-template-columns:repeat(3,1fr)}
.front-reference-page .team-visual {order:2}
.front-reference-page .team-visual img {max-height:330px}
.front-reference-page .tech-grid {grid-template-columns:repeat(3,1fr)}
.front-reference-page .footer-grid {grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:680px){
.front-reference-page .container {width:min(100% - 28px,1180px)}
.front-reference-page .brand {font-size:15px}
.front-reference-page .brand-mark {width:34px;height:34px}
.front-reference-page .hero {padding-top:20px}
.front-reference-page .hero h1 {font-size:41px}
.front-reference-page .hero-copy>p {font-size:16px}
.front-reference-page .stat-grid {grid-template-columns:1fr}
.front-reference-page .hero-actions .btn {width:100%;justify-content:center}
.front-reference-page .belief-panel, .front-reference-page .approach-panel, .front-reference-page .team-panel, .front-reference-page .tech-panel {padding:22px 18px}
.front-reference-page .belief-grid {grid-template-columns:1fr}
.front-reference-page .belief-card {padding:8px 10px}
.front-reference-page .belief-card::after {display:none!important}
.front-reference-page .metrics {grid-template-columns:repeat(2,1fr)}
.front-reference-page .metric:nth-child(2)::after {display:none}
.front-reference-page .role-grid {grid-template-columns:repeat(2,1fr)}
.front-reference-page .tech-grid {grid-template-columns:repeat(2,1fr)}
.front-reference-page .cta {
        padding:25px 22px;
        flex-direction:column;
        align-items:flex-start;
      }
.front-reference-page .cta .btn {width:100%}
.front-reference-page .footer-grid {grid-template-columns:1fr}
    }

/* Final shared public-navbar contract: the same header is used everywhere. */
.company-home .site-header .nav { width:min(1180px,calc(100% - 40px)); height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-inline:auto; }
.company-home .site-header .brand { display:flex; min-width:0; align-items:center; flex:0 0 auto; gap:11px; font-size:18px; line-height:1.2; white-space:nowrap; }
.company-home .site-header .brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-home .site-header .brand-mark, .company-home .site-header .brand-logo { width:38px; height:38px; flex:0 0 auto; border-radius: 5px!important}
.company-home .site-header .nav-links { display:flex; align-items:center; gap:31px; font-size:14px; font-weight:700; }
.company-home .site-header .nav-links a { position:relative; padding:29px 0 25px; }
.company-home .site-header .nav-links a.active { color:var(--green); }
.company-home .site-header .nav-links a.active::after { display:block; bottom:12px; height:3px; }
.company-home .site-header .front-nav-dropdown { position:relative; flex:0 0 auto; }
.company-home .site-header .front-nav-icon-button { width:40px; height:40px; }
.company-home .site-header .front-nav-dropdown-menu { top:calc(100% + 10px); right:0; }
.company-home .site-header .front-nav-dropdown.is-open .front-nav-dropdown-menu { display:grid; }
.company-home .site-header .menu-btn { display:none; }
@media (max-width:980px) {
  .company-home .site-header:has(.nav-links.open) {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .company-home .site-header .nav-links { top:75px; right:20px; left:20px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; }
  .company-home .site-header .nav-links.open {
    display:flex;
    margin-top:.5rem;
    background:rgba(255, 255, 255, .95);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .company-home .site-header .nav-links a { padding:12px 14px; }
  .company-home .site-header .nav-links a.active::after { display:none; }
  .company-home .site-header .menu-btn { display:grid; place-items:center; }
}
@media (max-width:680px) {
  .company-home .site-header .nav { width:min(1180px,calc(100% - 24px)); height:78px; display:grid; grid-template-columns:minmax(0,1fr) 40px 24px; gap:10px; }
  .company-home .site-header .brand { width:100%; gap:9px; font-size:12px; letter-spacing:-.08px; overflow:hidden; }
  .company-home .site-header .brand-mark, .company-home .site-header .brand-logo { width:32px; height:32px; }
  .company-home .site-header .front-nav-dropdown, .company-home .site-header .front-nav-icon-button { width:40px; height:40px; }
  .company-home .site-header .menu-btn { width:24px; height:40px; padding:0; justify-self:end; }
  .company-home .site-header .menu-btn .rt { width:18px; height:18px; }
  .company-home .site-header .nav-links { top:78px; right:14px; left:14px; margin:0; }
}

/* Final desktop alignment for the editorial hero artwork. */
@media (min-width:681px) {
  .front-reference-page .hero-grid { align-items:start !important; }
  .front-reference-page .hero-visual { align-self:start !important; }
}

/* Keep the editorial hero artwork aligned with the top of its heading block. */
@media (min-width:681px) {
  .front-reference-page .hero-grid { align-items:start; }
  .front-reference-page .hero-visual { align-self:start; }
}

/* Use one predictable artwork frame across the public hero sections. */
.company-home .hero-visual { height:520px; min-height:520px; display:grid; place-items:center; }
.company-home .hero-visual img { width:100%; height:100%; max-height:none; object-fit:contain; }
@media (max-width:680px) {
  .company-home .hero-visual { height:360px; min-height:360px; }
}

.company-home .hero-visual,
.company-home .about-visual,
.company-home .compare-visual,
.company-home .benefit-visual {
  background-size:cover;
  background-position:center;
  border-radius:1rem !important;
  overflow:hidden;
}

.front-reference-page .hero-visual,
.front-reference-page .service-image,
.front-reference-page .approach-visual,
.front-reference-page .team-visual {
  background-size:cover;
  background-position:center;
  border-radius:1rem !important;
  overflow:hidden;
}

.company-home .hero-visual img,
.company-home .about-visual img,
.company-home .compare-visual img,
.company-home .benefit-visual img {
  object-fit:contain;
  background-size:cover;
  background-position:center;
  border-radius:1rem !important;
}
.company-home .compare-visual img { object-fit:contain; }

/* Keep all editorial page visuals consistent with the rounded service artwork. */
.front-reference-page .hero-visual img,
.front-reference-page .service-image img,
.front-reference-page .approach-visual img,
.front-reference-page .team-visual img,
.front-reference-page .workflow-panel img {
  object-fit:cover;
  background-size:cover;
  background-position:center;
  border-radius:1rem !important;
}
.front-reference-page .approach-visual img,
.front-reference-page .team-visual img { object-fit:contain; background-size:contain; }

/* Final clipping rule for the public Pages hero artwork. */
body.company-page .front-reference-page .hero-visual,
body.company-page .front-reference-page .hero-visual img {
  border-radius:1rem !important;
  clip-path:inset(0 round 1rem);
  object-fit: contain;
}

/* Final dark-mode contract for reference Pages and the public article listing. */
html[data-theme="dark"] body.company-page .front-reference-page .hero-benefits,
html[data-theme="dark"] body.company-page .front-reference-page .reason,
html[data-theme="dark"] body.company-page .front-reference-page .service-card,
html[data-theme="dark"] body.company-page .front-reference-page .workflow-panel,
html[data-theme="dark"] body.company-page .front-reference-page .reasons,
html[data-theme="dark"] body.company-page .front-reference-page .field input,
html[data-theme="dark"] body.company-page .front-reference-page .field textarea,
html[data-theme="dark"] body.company-page .front-reference-page .field select {
  background:var(--front-surface);
  border-color:var(--front-line);
  color:var(--front-text);
}
html[data-theme="dark"] body.company-page .front-reference-page .hero-benefit:not(:last-child)::after,
html[data-theme="dark"] body.company-page .front-reference-page .reason:not(:last-child)::after,
html[data-theme="dark"] body.company-page .front-reference-page .workflow-step { border-color:var(--front-line); }
html[data-theme="dark"] body.company-page .front-reference-page .hero-benefit strong,
html[data-theme="dark"] body.company-page .front-reference-page .reason strong,
html[data-theme="dark"] body.company-page .front-reference-page .hero-point strong,
html[data-theme="dark"] body.company-page .front-reference-page .workflow-step h3 { color:var(--front-text); }
html[data-theme="dark"] body.company-page .front-reference-page .hero-benefit span,
html[data-theme="dark"] body.company-page .front-reference-page .reason span,
html[data-theme="dark"] body.company-page .front-reference-page .hero-point span,
html[data-theme="dark"] body.company-page .front-reference-page .field label,
html[data-theme="dark"] body.company-page .front-reference-page .field input::placeholder,
html[data-theme="dark"] body.company-page .front-reference-page .field textarea::placeholder { color:var(--front-muted); }
html[data-theme="dark"] body.company-page .front-reference-page .field input:focus,
html[data-theme="dark"] body.company-page .front-reference-page .field textarea:focus,
html[data-theme="dark"] body.company-page .front-reference-page .field select:focus { border-color:#73a7ff; box-shadow:0 0 0 3px rgba(115,167,255,.16); }
html[data-theme="dark"] body.company-page .rt-front-listing__section { background:var(--front-bg); }
html[data-theme="dark"] body.company-page .rt-front-article__sidebar nav a.is-active {
  background:rgba(72,216,137,.14);
  color:#69e39b;
}

/* Keep the navbar readable and preserve the active green indicator in both themes. */
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a { color:var(--front-text); }
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a:hover { color:#9cc3ff; }
html body.company-page .company-home .site-header .nav-links a.active,
html body.company-page .company-home .site-header .nav-links a.is-active,
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.active,
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.is-active { color:var(--green) !important; }
html body.company-page .company-home .site-header .nav-links a.active::after,
html body.company-page .company-home .site-header .nav-links a.is-active::after,
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.active::after,
html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.is-active::after {
  display:block !important;
  content:"";
  background:var(--green) !important;
  height:3px;
  border-radius:999px;
}
@media (max-width:980px) {
  html body.company-page .company-home .site-header .nav-links a.active::after,
  html body.company-page .company-home .site-header .nav-links a.is-active::after,
  html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.active::after,
  html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.is-active::after { display:none !important; }
  html body.company-page .company-home .site-header .nav-links a.active,
  html body.company-page .company-home .site-header .nav-links a.is-active,
  html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.active,
  html[data-theme="dark"] body.company-page .company-home .site-header .nav-links a.is-active {
    color:var(--green) !important;
    background:var(--front-soft, rgba(11,70,202,.08));
  }
  html[data-theme="dark"] body.company-page .company-home .site-header .nav-links.open {
    background:var(--front-surface) !important;
    border-color:var(--front-line);
  }
}

/* Compact search modal on mobile: retain the desktop search structure in one
   short horizontal toolbar sized to the modal. */
@media (max-width:640px) {
  .front-search-modal { padding-top:clamp(58px, 10vh, 86px) !important; }
  .front-search-modal .rt-modal-content {
    width:min(980px, calc(100vw - 48px));
    max-height:calc(100vh - 40px);
    border-radius:22px !important;
    overflow:hidden;
  }
  .front-search-modal .rt-modal-header {
    min-height:86px;
    padding:18px 18px 14px;
  }
  .front-search-modal .rt-modal-header .rt-eyebrow { font-size:.62rem; letter-spacing:.14em; }
  .front-search-modal .rt-modal-header h3 { margin-bottom:0; font-size:1.12rem; }
  .front-search-modal .rt-modal-body { padding:16px 18px 22px; }
  .front-search-modal .rt-table-toolbar {
    display:flex;
    flex-direction:row;
    gap:6px;
    align-items:center;
    min-height:54px;
    margin:0 0 14px;
    padding:6px 7px 6px 10px;
    border-radius:999px;
  }
  .front-search-modal .rt-table-search {
    width:auto;
    flex:1 1 auto;
    min-width:0;
    height:36px;
    display:flex;
    align-items:center;
  }
  .front-search-modal .rt-table-search input {
    width:100%;
    height:36px;
    min-width:0;
    padding:0 4px 0 28px;
    font-size:.72rem;
    text-overflow:ellipsis;
  }
  .front-search-modal .rt-table-toolbar > .rt-btn {
    width:auto;
    min-height:34px;
    flex:0 0 auto;
    padding:0 13px;
    font-size:.72rem;
  }
  .front-search-modal #frontSearchStatus { margin:0 4px; font-size:.7rem; }
}
/* Exact visual rules from rakit-teknologi-website/kontak.html, scoped to Pages. */
.front-reference-page {
      --navy:#071f56;
      --blue:#0b46ca;
      --green:#08ad57;
      --green-dark:#06994b;
      --text:#27395e;
      --muted:#6b7a98;
      --line:#e7edf5;
      --soft:#f8fafc;
      --white:#fff;
      --shadow:0 14px 38px rgba(11,47,99,.07);
      --radius:20px;
    }
.front-reference-page * {box-sizing:border-box}
.front-reference-page {scroll-behavior:smooth}
.front-reference-page {
      margin:0;
      font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.55;
      background:#fff;
    }
.front-reference-page img {display:block;max-width:100%}
.front-reference-page a {text-decoration:none;color:inherit}
.front-reference-page button, .front-reference-page input, .front-reference-page textarea, .front-reference-page select {font:inherit}
.front-reference-page .container {width:min(1180px,calc(100% - 40px));margin-inline:auto}
.front-reference-page .section {padding:20px 0}
.front-reference-page .panel {
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:0 8px 26px rgba(12,49,102,.045);
    }
.front-reference-page .site-header {
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,237,245,.86);
    }
.front-reference-page .nav {
      height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }
.front-reference-page .brand {
      display:flex;align-items:center;gap:11px;
      color:#103ab3;font-weight:800;font-size:18px;
    }
.front-reference-page .brand-mark {
      width:38px;height:38px;border:3px solid #17b75a;border-radius:5px;
      position:relative;background:#fff;box-shadow:0 5px 14px rgba(10,70,181,.12);
    }
.front-reference-page .brand-mark::before, .front-reference-page .brand-mark::after {
      content:"";position:absolute;bottom:6px;background:#0b46ca;border-radius:2px 2px 0 0;
    }
.front-reference-page .brand-mark::before {left:8px;width:7px;height:17px}
.front-reference-page .brand-mark::after {right:7px;width:7px;height:24px}
.front-reference-page .brand-mark span {
      position:absolute;left:13px;top:5px;width:7px;height:7px;border-radius:50%;background:#17b75a;
    }
.front-reference-page .nav-links {
      display:flex;align-items:center;gap:31px;font-size:14px;font-weight:700;
    }
.front-reference-page .nav-links a {position:relative;padding:29px 0 25px}
.front-reference-page .nav-links a.active {color:var(--green)}
.front-reference-page .nav-links a.active::after {
      content:"";position:absolute;left:0;right:0;bottom:12px;height:3px;border-radius:999px;background:var(--green);
    }
.front-reference-page .menu-btn {display:none;border:0;background:transparent;color:var(--navy);padding:8px}
.front-reference-page .hero {padding:36px 0 16px}
.front-reference-page .hero-grid {
      display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
    }
.front-reference-page .hero-kicker {
      color:var(--green-dark);font-size:14px;font-weight:800;
      letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;
    }
.front-reference-page .hero h1 {
      margin:0 0 16px;color:var(--navy);
      font-size:clamp(42px,5vw,70px);
      line-height:1.05;letter-spacing:-.045em;
    }
.front-reference-page .hero h1 span {color:var(--green)}
.front-reference-page .hero-copy>p {
      margin:0 0 20px;color:#506386;font-size:17px;max-width:610px;
    }
.front-reference-page .hero-points {display:grid;gap:12px;max-width:560px}
.front-reference-page .hero-point {
      border:1px solid var(--line);border-radius:14px;padding:14px 16px;
      display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;background:#fff;
      box-shadow:0 7px 20px rgba(11,47,99,.04);
    }
.front-reference-page .hero-point-icon {
      width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
      color:#fff;background:var(--blue);
    }
.front-reference-page .hero-point:nth-child(2) .hero-point-icon {background:var(--green)}
.front-reference-page .hero-point strong {display:block;color:var(--navy);font-size:15px}
.front-reference-page .hero-point span {display:block;color:#677794;font-size:13px}
.front-reference-page .hero-visual img {width:100%;height:100%;max-height:none;object-fit:contain;margin-left:auto}
.front-reference-page .contact-grid {
      display:grid;grid-template-columns:.75fr 1.25fr;gap:20px;
    }
.front-reference-page .contact-info {padding:24px}
.front-reference-page .contact-info h2, .front-reference-page .contact-form h2, .front-reference-page .location h2, .front-reference-page .why h2 {
      margin:0 0 18px;color:var(--navy);font-size:30px;
    }
.front-reference-page .contact-info h2 span, .front-reference-page .contact-form h2 span, .front-reference-page .location h2 span, .front-reference-page .why h2 span {color:var(--green)}
.front-reference-page .info-list {display:grid;gap:20px}
.front-reference-page .info-item {
      display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;
    }
.front-reference-page .info-icon {
      width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
      background:var(--blue);color:#fff;
    }
.front-reference-page .info-item:nth-child(even) .info-icon {background:var(--green)}
.front-reference-page .info-item small {display:block;color:#637492;margin-bottom:2px}
.front-reference-page .info-item strong {display:block;color:var(--navy);font-size:17px}
.front-reference-page .info-item p {margin:2px 0 0;color:#5e708f;font-size:13px}
.front-reference-page .contact-form {padding:24px}
.front-reference-page .form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.front-reference-page .field {display:grid;gap:6px}
.front-reference-page .field.full {grid-column:1/-1}
.front-reference-page .field label {font-size:13px;color:#536789}
.front-reference-page .field input, .front-reference-page .field textarea, .front-reference-page .field select {
      width:100%;border:1px solid #dce4ef;border-radius:8px;
      padding:12px 13px;outline:0;color:var(--text);background:#fff;
    }
.front-reference-page .field textarea {min-height:112px;resize:vertical}
.front-reference-page .field input:focus, .front-reference-page .field textarea:focus, .front-reference-page .field select:focus {
      border-color:#9db9f6;box-shadow:0 0 0 3px rgba(11,70,202,.08);
    }
.front-reference-page .consent {
      grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;
      color:#5f708d;font-size:12px;
    }
.front-reference-page .consent input {margin-top:3px}
.front-reference-page .submit {
      grid-column:1/-1;border:0;border-radius:8px;background:var(--green);
      color:#fff;font-weight:800;padding:13px 18px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;gap:10px;
    }
.front-reference-page .form-note {grid-column:1/-1;text-align:center;color:#7a88a2;font-size:11px;margin-top:-4px}
.front-reference-page .lower-grid {
      display:grid;grid-template-columns:1.2fr .8fr;gap:20px;
    }
.front-reference-page .location {padding:22px}
.front-reference-page .location-grid {
      display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:center;
    }
.front-reference-page .location p {color:#5e708f;margin:0 0 18px}
.front-reference-page .map-actions {display:grid;gap:9px}
.front-reference-page .map-btn {
      border-radius:8px;padding:11px 15px;display:flex;align-items:center;
      justify-content:center;gap:9px;font-weight:800;
      border:1px solid #b8caf3;color:var(--blue);background:#fff;
    }
.front-reference-page .map-btn.primary {background:var(--blue);color:#fff;border-color:var(--blue)}
.front-reference-page .map-preview {
      border-radius:14px;overflow:hidden;border:1px solid var(--line);
      background:#eef3f7;
    }
.front-reference-page .map-preview img {width:100%;height:100%;object-fit:cover}
.front-reference-page .map-preview__frame {display:block;width:100%;min-height:260px;height:100%;border:0}
.front-reference-page .why {padding:22px}
.front-reference-page .why-list {display:grid;gap:13px}
.front-reference-page .why-item {display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
.front-reference-page .why-icon {
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
      color:#fff;background:var(--green);
    }
.front-reference-page .why-item:nth-child(even) .why-icon {background:var(--blue)}
.front-reference-page .why-item strong {display:block;color:var(--navy);font-size:14px}
.front-reference-page .why-item span {display:block;color:#687895;font-size:12px}
.front-reference-page .faq {padding:22px 24px}
.front-reference-page .faq h2 {text-align:center;margin:0 0 14px;color:var(--navy);font-size:30px}
.front-reference-page .faq h2 span {color:var(--green)}
.front-reference-page .faq-item {border-top:1px solid var(--line)}
.front-reference-page .faq-item:first-of-type {border-top:0}
.front-reference-page .faq-button {
      width:100%;border:0;background:#fff;color:var(--navy);
      padding:15px 0;display:flex;align-items:center;justify-content:space-between;
      gap:16px;text-align:left;font-weight:700;cursor:pointer;
    }
.front-reference-page .faq-left {display:flex;align-items:center;gap:12px}
.front-reference-page .faq-mini {
      width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
      color:var(--blue);background:#eef4ff;flex:0 0 auto;
    }
.front-reference-page .faq-answer {
      display:none;padding:0 42px 15px;color:#647492;font-size:14px;
    }
.front-reference-page .faq-item.open .faq-answer {display:block}
.front-reference-page .faq-item.open .faq-button>svg {transform:rotate(180deg)}
.front-reference-page .cta {
      margin-top:20px;border-radius:17px;padding:27px 42px;color:#fff;
      display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;
      background:
        radial-gradient(circle at 85% 50%,rgba(0,255,135,.14),transparent 23%),
        linear-gradient(105deg,#0a40c2,#0b58dc);
      box-shadow:0 16px 34px rgba(11,70,202,.18);
    }
.front-reference-page .cta-icon {
      width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
      background:#fff;color:var(--blue);
    }
.front-reference-page .cta h2 {margin:0 0 4px;font-size:27px;line-height:1.22}
.front-reference-page .cta h2 span {color:#1ee878}
.front-reference-page .cta p {margin:0;color:#dce7ff}
.front-reference-page .cta-btn {
      min-width:190px;justify-content:center;background:#fff;color:var(--blue);
      border-radius:10px;padding:14px 22px;font-weight:800;display:flex;align-items:center;gap:9px;
    }
.front-reference-page .cta-cubes {width:150px}
.front-reference-page .cta-cubes img {width:100%;object-fit:contain}
.front-reference-page footer {background:#071f56;color:#fff;padding:40px 0 20px}
.front-reference-page .footer-grid {
      display:grid;grid-template-columns:1.25fr .7fr 1fr 1fr;gap:40px;
    }
.front-reference-page .footer-brand p {color:#d3dcf0;font-size:14px;max-width:320px}
.front-reference-page footer h4 {margin:0 0 13px}
.front-reference-page footer ul {list-style:none;padding:0;margin:0;color:#d5def0;font-size:14px}
.front-reference-page footer li {margin:5px 0}
.front-reference-page .socials {display:flex;gap:10px;margin-top:16px}
.front-reference-page .socials a {
      width:30px;height:30px;border:1px solid rgba(255,255,255,.25);
      border-radius:50%;display:grid;place-items:center;
    }
.front-reference-page .contact li {display:flex;gap:9px;align-items:flex-start}
.front-reference-page .copyright {
      margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
      text-align:center;color:#afbdd8;font-size:12px;
    }

    @media (max-width:980px){
.front-reference-page .nav-links {
        display:none;position:absolute;left:20px;right:20px;top:75px;
        background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
        border-radius:14px;padding:12px;flex-direction:column;align-items:stretch;gap:0;
      }
.front-reference-page .nav-links.open {display:flex}
.front-reference-page .nav-links a {padding:12px 14px}
.front-reference-page .nav-links a.active::after {display:none}
.front-reference-page .menu-btn {display:block}
.front-reference-page .hero-grid, .front-reference-page .contact-grid, .front-reference-page .lower-grid {grid-template-columns:1fr}
.front-reference-page .hero-copy {text-align:center}
.front-reference-page .hero-copy>p, .front-reference-page .hero-points {margin-inline:auto}
.front-reference-page .hero-visual {order:-1}
.front-reference-page .hero-visual img {max-height:360px}
.front-reference-page .cta {grid-template-columns:auto 1fr auto}
.front-reference-page .cta-cubes {display:none}
.front-reference-page .footer-grid {grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:680px){
.front-reference-page .container {width:min(100% - 28px,1180px)}
.front-reference-page .brand {font-size:15px}
.front-reference-page .brand-mark {width:34px;height:34px}
.front-reference-page .hero {padding-top:20px}
.front-reference-page .hero h1 {font-size:40px}
.front-reference-page .hero-copy>p {font-size:16px}
.front-reference-page .form-grid, .front-reference-page .location-grid {grid-template-columns:1fr}
.front-reference-page .field.full, .front-reference-page .consent, .front-reference-page .submit, .front-reference-page .form-note {grid-column:auto}
.front-reference-page .contact-info, .front-reference-page .contact-form, .front-reference-page .location, .front-reference-page .why, .front-reference-page .faq {padding:20px 17px}
.front-reference-page .cta {grid-template-columns:1fr;align-items:flex-start;padding:24px 20px}
.front-reference-page .cta-icon {width:60px;height:60px}
.front-reference-page .cta-btn {width:100%}
.front-reference-page .footer-grid {grid-template-columns:1fr}
    }
/* Exact visual rules from rakit-teknologi-website/layanan.html, scoped to Pages. */
.front-reference-page {
      --navy:#071f56;
      --blue:#0b46ca;
      --green:#08ad57;
      --green-dark:#06994b;
      --text:#27395e;
      --muted:#6b7a98;
      --line:#e7edf5;
      --soft:#f8fafc;
      --white:#fff;
      --shadow:0 14px 38px rgba(11,47,99,.07);
      --radius:20px;
    }
.front-reference-page * {box-sizing:border-box}
.front-reference-page {scroll-behavior:smooth}
.front-reference-page {
      margin:0;
      font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.55;
      background:#fff;
    }
.front-reference-page img {display:block;max-width:100%}
.front-reference-page a {text-decoration:none;color:inherit}
.front-reference-page button {font:inherit}
.front-reference-page .container {width:min(1180px,calc(100% - 40px));margin-inline:auto}
.front-reference-page .section {padding:20px 0}
.front-reference-page .panel {
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:0 8px 26px rgba(12,49,102,.045);
    }
.front-reference-page .section-title {
      margin:0 0 8px;
      text-align:center;
      color:var(--navy);
      font-size:clamp(29px,3vw,42px);
      line-height:1.15;
      letter-spacing:-.03em;
    }
.front-reference-page .section-title .green {color:var(--green)}
.front-reference-page .site-header {
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,237,245,.86);
    }
.front-reference-page .nav {
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
.front-reference-page .brand {
      display:flex;
      align-items:center;
      gap:11px;
      color:#103ab3;
      font-weight:800;
      font-size:18px;
    }
.front-reference-page .brand-mark {
      width:38px;height:38px;
      border:3px solid #17b75a;
      border-radius:5px;
      position:relative;
      background:#fff;
      box-shadow:0 5px 14px rgba(10,70,181,.12);
    }
.front-reference-page .brand-mark::before, .front-reference-page .brand-mark::after {
      content:"";
      position:absolute;
      bottom:6px;
      background:#0b46ca;
      border-radius:2px 2px 0 0;
    }
.front-reference-page .brand-mark::before {left:8px;width:7px;height:17px}
.front-reference-page .brand-mark::after {right:7px;width:7px;height:24px}
.front-reference-page .brand-mark span {
      position:absolute;left:13px;top:5px;
      width:7px;height:7px;border-radius:50%;
      background:#17b75a;
    }
.front-reference-page .nav-links {
      display:flex;
      align-items:center;
      gap:31px;
      font-size:14px;
      font-weight:700;
    }
.front-reference-page .nav-links a {position:relative;padding:29px 0 25px}
.front-reference-page .nav-links a.active {color:var(--green)}
.front-reference-page .nav-links a.active::after {
      content:"";
      position:absolute;left:0;right:0;bottom:12px;
      height:3px;border-radius:999px;background:var(--green);
    }
.front-reference-page .menu-btn {
      display:none;border:0;background:transparent;
      color:var(--navy);padding:8px;
    }
.front-reference-page .hero {padding:34px 0 18px}
.front-reference-page .hero-grid {
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:30px;
      align-items:center;
    }
.front-reference-page .hero-kicker {
      color:var(--green-dark);
      font-size:14px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
.front-reference-page .hero h1 {
      margin:0 0 16px;
      color:var(--navy);
      font-size:clamp(42px,4.8vw,70px);
      line-height:1.06;
      letter-spacing:-.045em;
    }
.front-reference-page .hero h1 span {color:var(--green)}
.front-reference-page .hero-copy>p {
      margin:0 0 22px;
      color:#506386;
      font-size:17px;
      max-width:640px;
    }
.front-reference-page .hero-benefits {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border:1px solid var(--line);
      border-radius:15px;
      background:#fff;
      box-shadow:0 8px 22px rgba(12,49,102,.045);
      overflow:hidden;
    }
.front-reference-page .hero-benefit {
      display:grid;
      grid-template-columns:50px 1fr;
      gap:12px;
      align-items:center;
      padding:17px 15px;
      position:relative;
    }
.front-reference-page .hero-benefit:not(:last-child)::after {
      content:"";
      position:absolute;right:0;top:16px;bottom:16px;width:1px;background:var(--line);
    }
.front-reference-page .round-icon {
      width:48px;height:48px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;background:var(--blue);
    }
.front-reference-page .hero-benefit:nth-child(2) .round-icon {background:var(--green)}
.front-reference-page .hero-benefit strong {display:block;color:var(--navy);font-size:14px}
.front-reference-page .hero-benefit span {display:block;color:#7685a2;font-size:11px;line-height:1.4}
.front-reference-page .hero-visual img {
      width:100%;
      max-height:520px;
      object-fit:contain;
      margin-left:auto;
    }
.front-reference-page .services-wrap {padding:8px 0 0}
.front-reference-page .service-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:22px;
    }
.front-reference-page .service-card {
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      padding:16px 18px 20px;
      min-height:460px;
      box-shadow:0 7px 20px rgba(12,49,102,.04);
      position:relative;
    }
.front-reference-page .service-number {
      position:absolute;top:15px;left:15px;
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;background:var(--blue);
      font-weight:800;font-size:13px;
      z-index:2;
    }
.front-reference-page .service-card:nth-child(even) .service-number {background:var(--green)}
.front-reference-page .service-image {
      height:185px;
      display:grid;
      place-items:center;
      margin-bottom:10px;
    }
.front-reference-page .service-image img {max-height:180px;width:auto}
.front-reference-page .service-card h3 {
      margin:0 0 10px;
      color:var(--blue);
      font-size:18px;
      line-height:1.25;
    }
.front-reference-page .service-card:nth-child(even) h3 {color:var(--green-dark)}
.front-reference-page .service-card p {
      margin:0 0 14px;
      color:#5d6f91;
      font-size:14px;
    }
.front-reference-page .mini-list {
      display:grid;
      gap:8px;
      margin-top:12px;
    }
.front-reference-page .mini-item {
      display:flex;gap:8px;align-items:flex-start;
      color:#425678;font-size:13px;
    }
.front-reference-page .mini-item svg {color:var(--blue);margin-top:2px;flex:0 0 auto}
.front-reference-page .service-card:nth-child(even) .mini-item svg {color:var(--green)}
.front-reference-page .workflow-panel {padding:24px 28px 28px}
.front-reference-page .workflow-panel img {width:100%;margin-top:16px}
.front-reference-page .workflow-mobile {display:none}
.front-reference-page .workflow-step {
      display:grid;grid-template-columns:54px 1fr;gap:14px;
      align-items:start;padding:15px 0;border-bottom:1px solid var(--line);
    }
.front-reference-page .workflow-step:last-child {border-bottom:0}
.front-reference-page .workflow-num {
      width:48px;height:48px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;background:var(--blue);font-weight:800;
    }
.front-reference-page .workflow-step:nth-child(even) .workflow-num {background:var(--green)}
.front-reference-page .workflow-step h3 {margin:0 0 4px;color:var(--navy)}
.front-reference-page .workflow-step p {margin:0;color:var(--muted)}
.front-reference-page .reasons {padding:24px 26px 26px}
.front-reference-page .reason-grid {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      margin-top:20px;
      border:1px solid var(--line);
      border-radius:15px;
      overflow:hidden;
    }
.front-reference-page .reason {
      padding:18px 16px;
      display:grid;
      grid-template-columns:50px 1fr;
      gap:12px;
      align-items:center;
      position:relative;
      background:#fff;
    }
.front-reference-page .reason:not(:last-child)::after {
      content:"";
      position:absolute;right:0;top:16px;bottom:16px;width:1px;background:var(--line);
    }
.front-reference-page .reason:nth-child(even) .round-icon {background:var(--green)}
.front-reference-page .reason strong {display:block;color:var(--navy);font-size:13px;margin-bottom:3px}
.front-reference-page .reason span {display:block;color:#71809d;font-size:11px;line-height:1.4}
.front-reference-page .cta {
      margin-top:20px;
      border-radius:17px;
      padding:28px 56px;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      background:
        radial-gradient(circle at 85% 50%,rgba(0,255,135,.14),transparent 23%),
        linear-gradient(105deg,#0a40c2,#0b58dc);
      box-shadow:0 16px 34px rgba(11,70,202,.18);
    }
.front-reference-page .cta h2 {margin:0 0 5px;font-size:28px;line-height:1.22}
.front-reference-page .cta p {margin:0;color:#dce7ff}
.front-reference-page .btn {
      display:inline-flex;align-items:center;gap:10px;
      padding:14px 24px;border-radius:10px;
      font-weight:800;border:1px solid transparent;
    }
.front-reference-page .cta .btn {
      min-width:220px;justify-content:center;
      background:#fff;color:var(--blue);
    }
.front-reference-page footer {
      background:#071f56;color:#fff;
      padding:40px 0 20px;
    }
.front-reference-page .footer-grid {
      display:grid;
      grid-template-columns:1.25fr .7fr 1fr 1fr;
      gap:40px;
    }
.front-reference-page .footer-brand p {color:#d3dcf0;font-size:14px;max-width:320px}
.front-reference-page footer h4 {margin:0 0 13px}
.front-reference-page footer ul {list-style:none;padding:0;margin:0;color:#d5def0;font-size:14px}
.front-reference-page footer li {margin:5px 0}
.front-reference-page .socials {display:flex;gap:10px;margin-top:16px}
.front-reference-page .socials a {
      width:30px;height:30px;
      border:1px solid rgba(255,255,255,.25);
      border-radius:50%;
      display:grid;place-items:center;
    }
.front-reference-page .contact li {display:flex;gap:9px;align-items:flex-start}
.front-reference-page .copyright {
      margin-top:28px;padding-top:18px;
      border-top:1px solid rgba(255,255,255,.14);
      text-align:center;color:#afbdd8;font-size:12px;
    }

    @media (max-width:980px){
.front-reference-page .nav-links {
        display:none;position:absolute;left:20px;right:20px;top:75px;
        background:#fff;border:1px solid var(--line);
        box-shadow:var(--shadow);border-radius:14px;
        padding:12px;flex-direction:column;align-items:stretch;gap:0;
      }
.front-reference-page .nav-links.open {display:flex}
.front-reference-page .nav-links a {padding:12px 14px}
.front-reference-page .nav-links a.active::after {display:none}
.front-reference-page .menu-btn {display:block}
.front-reference-page .hero-grid {grid-template-columns:1fr}
.front-reference-page .hero-copy {text-align:center}
.front-reference-page .hero-copy>p {margin-inline:auto}
.front-reference-page .hero-visual {order:-1}
.front-reference-page .hero-visual img {max-height:400px}
.front-reference-page .hero-benefits {max-width:760px;margin-inline:auto}
.front-reference-page .service-grid {grid-template-columns:repeat(2,1fr)}
.front-reference-page .reason-grid {grid-template-columns:repeat(2,1fr)}
.front-reference-page .reason:nth-child(2)::after, .front-reference-page .reason:nth-child(4)::after {display:none}
.front-reference-page .footer-grid {grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:680px){
.front-reference-page .container {width:min(100% - 28px,1180px)}
.front-reference-page .brand {font-size:15px}
.front-reference-page .brand-mark {width:34px;height:34px}
.front-reference-page .hero {padding-top:20px}
.front-reference-page .hero h1 {font-size:40px}
.front-reference-page .hero-copy>p {font-size:16px}
.front-reference-page .hero-benefits {grid-template-columns:1fr}
.front-reference-page .hero-benefit::after {display:none!important}
.front-reference-page .service-grid {grid-template-columns:1fr}
.front-reference-page .service-card {min-height:auto}
.front-reference-page .workflow-panel, .front-reference-page .reasons {padding:22px 18px}
.front-reference-page .workflow-panel img {display:none}
.front-reference-page .workflow-mobile {display:block;margin-top:12px}
.front-reference-page .reason-grid {grid-template-columns:1fr}
.front-reference-page .reason::after {display:none!important}
.front-reference-page .cta {
        padding:25px 22px;
        flex-direction:column;
        align-items:flex-start;
      }
.front-reference-page .cta .btn {width:100%}
.front-reference-page .footer-grid {grid-template-columns:1fr}
    }

/* Ensure this shared public-navbar contract is the final cascade rule. */
.company-home .site-header .nav { width:min(1180px,calc(100% - 40px)); height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-inline:auto; }
.company-home .site-header .brand { display:flex; min-width:0; align-items:center; flex:0 0 auto; gap:11px; font-size:18px; line-height:1.2; white-space:nowrap; }
.company-home .site-header .brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-home .site-header .brand-mark, .company-home .site-header .brand-logo { width:38px; height:38px; flex:0 0 auto; }
.company-home .site-header .nav-links { display:flex; align-items:center; gap:31px; font-size:14px; font-weight:700; }
.company-home .site-header .nav-links a { position:relative; padding:29px 0 25px; }
.company-home .site-header .nav-links a.active { color:var(--green); }
.company-home .site-header .nav-links a.active::after { display:block; bottom:12px; height:3px; }
.company-home .site-header .front-nav-dropdown { position:relative; flex:0 0 auto; }
.company-home .site-header .front-nav-icon-button { width:40px; height:40px; }
.company-home .site-header .front-nav-dropdown-menu { top:calc(100% + 10px); right:0; }
.company-home .site-header .front-nav-dropdown.is-open .front-nav-dropdown-menu { display:grid; }
.company-home .site-header .menu-btn { display:none; }
@media (max-width:980px) {
  .company-home .site-header:has(.nav-links.open) { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .company-home .site-header .nav-links { top:75px; right:20px; left:20px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; }
  .company-home .site-header .nav-links.open {
    display:flex;
    margin-top:.5rem;
    background:rgba(255, 255, 255, .72) !important;
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    isolation:isolate;
  }
  .company-home .site-header .nav-links a { padding:12px 14px; }
  .company-home .site-header .nav-links a.active::after { display:none; }
  .company-home .site-header .menu-btn { display:grid; place-items:center; }
}
@media (max-width:680px) {
  .company-home .site-header .nav { width:min(1180px,calc(100% - 24px)); height:78px; display:grid; grid-template-columns:minmax(0,1fr) 40px 24px; gap:10px; }
  .company-home .site-header .brand { width:100%; gap:9px; font-size:12px; letter-spacing:-.08px; overflow:hidden; }
  .company-home .site-header .brand-mark, .company-home .site-header .brand-logo { width:32px; height:32px; }
  .company-home .site-header .front-nav-dropdown, .company-home .site-header .front-nav-icon-button { width:40px; height:40px; }
  .company-home .site-header .menu-btn { width:24px; height:40px; padding:0; justify-self:end; }
  .company-home .site-header .menu-btn .rt { width:18px; height:18px; }
  .company-home .site-header .nav-links { top:78px; right:14px; left:14px; margin:0; }
}