/* CSS khusus home.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
/* ══════════════════════════════════════════════════════
   HOME — dasar terang ala studio (default) + dark mode.
   Semua warna lewat token tema di ugs-site.css; satu-satunya "momen gelap" tetap story CAD FD-B6.
══════════════════════════════════════════════════════ */
/* specificity 0 lewat :where() supaya font ikon (Font Awesome) tidak tertimpa */
:where(.s-home, .s-home *) { font-family:var(--font-body); }
.s-home {
    --s-text:var(--ugs-fg); --s-body:var(--ugs-fg-2); --s-muted:var(--ugs-fg-2); --s-faint:var(--ugs-fg-3);
    --s-bord:var(--ugs-hairline); --s-surf:var(--ugs-surface); --s-card:var(--ugs-card);
    --s-blue:var(--ugs-accent); --s-blue-d:var(--ugs-accent-dark); --s-blue-g:rgba(var(--ugs-accent-rgb),.3);
    --ease:cubic-bezier(0.4,0,0.2,1); --tr:all 0.28s var(--ease);
    background:var(--ugs-page); color:var(--s-text);
}
.s-container { max-width:1240px; margin:0 auto; padding:0 2rem; }
.s-section   { padding:7.5rem 0; background:var(--ugs-page); }
.s-section-surface { background:var(--s-surf); }
.s-sec-row { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }

/* Tipografi */
.s-label { display:block; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ugs-accent-text); margin-bottom:.75rem; }
.s-h2 { font-family:var(--font-display) !important; font-size:var(--ugs-fs-h2); font-weight:800; letter-spacing:.005em; line-height:.98; color:var(--s-text); margin:0 0 1.25rem; text-transform:uppercase; text-wrap:balance; }
.s-h2 em { font-family:inherit !important; font-style:normal; font-weight:300; color:var(--s-faint); }
.s-body { font-size:1rem; line-height:1.75; color:var(--s-muted); margin:0; }
.s-sec-intro { max-width:520px; margin-top:1rem; }
.s-link-arrow { font-size:.88rem; font-weight:500; color:var(--ugs-accent-text); text-decoration:none; transition:opacity var(--tr); }
.s-link-arrow:hover { opacity:.7; }

/* Tombol */
.s-btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; text-decoration:none; border-radius:100px; transition:var(--tr); cursor:pointer; border:1.5px solid transparent; white-space:nowrap; font-size:.9rem; padding:.8rem 1.75rem; }
.s-btn-primary { background:var(--s-blue); color:#fff; border-color:var(--s-blue); }
.s-btn-primary:hover { background:var(--s-blue-d); border-color:var(--s-blue-d); color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px var(--s-blue-g); }
.s-btn-outline, .s-btn-ghost-lg { background:transparent; color:var(--s-text); border-color:var(--ugs-hairline-strong); }
.s-btn-outline:hover, .s-btn-ghost-lg:hover { border-color:var(--s-text); color:var(--s-text); }
.s-btn-lg, .s-btn-ghost-lg, .s-btn-white-lg { font-size:1rem; padding:.95rem 2rem; font-weight:500; }
.s-btn-white-lg { background:var(--s-blue); color:#fff; }
.s-btn-white-lg:hover { background:var(--s-blue-d); color:#fff; transform:translateY(-1px); }

/* Muncul saat discroll */
.s-reveal { opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(0,0,.2,1), transform .85s cubic-bezier(0,0,.2,1); }
.s-reveal.visible { opacity:1; transform:none; }
.s-reveal:nth-child(2){ transition-delay:.1s; } .s-reveal:nth-child(3){ transition-delay:.18s; } .s-reveal:nth-child(4){ transition-delay:.26s; }

/* ── HERO: studio terang, robot FD-B6 asli ── */
.s-hero::before { content:''; display:block; flex-shrink:0; position:relative; z-index:2; min-height:clamp(80px, 20vh, 180px); }
.s-hero { position:relative; height:100vh; min-height:640px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--ugs-studio); }
.s-hero-video { position:absolute; inset:0; width:100%; height:115%; object-fit:cover; z-index:0; opacity:0; transition:opacity .6s; will-change:transform; }
.s-hero.no-3d .s-hero-video { opacity:1; }
.s-hero-stage { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; transition:opacity 1.2s ease; display:block; }
.s-hero.is-3d .s-hero-stage { opacity:1; }
/* tirai dari kiri supaya teks terbaca di atas adegan 3D; warnanya = latar studio */
.s-hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg, rgba(var(--ugs-studio-rgb),.96) 0%, rgba(var(--ugs-studio-rgb),.8) 36%, rgba(var(--ugs-studio-rgb),0) 60%); }
.s-hero.no-3d .s-hero-scrim { background:linear-gradient(100deg, rgba(var(--ugs-studio-rgb),.97) 0%, rgba(var(--ugs-studio-rgb),.88) 50%, rgba(var(--ugs-studio-rgb),.55) 100%); }
.s-hero-body { position:relative; z-index:2; padding:0 2rem 2.5rem; max-width:1240px; width:100%; margin:0 auto; will-change:transform; }
.s-hero-eyebrow { display:flex; align-items:center; gap:.625rem; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--ugs-accent-text); margin-bottom:1.25rem; }
.s-dot { width:7px; height:7px; border-radius:50%; background:var(--s-blue); box-shadow:0 0 0 3px rgba(var(--ugs-accent-rgb),.22); animation:dotPulse 2.5s ease-in-out infinite; flex-shrink:0; }
@keyframes dotPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(var(--ugs-accent-rgb),.22); } 50%{ box-shadow:0 0 0 7px rgba(var(--ugs-accent-rgb),.08), 0 0 16px rgba(var(--ugs-accent-rgb),.35); } }
.s-hero-h1 { font-family:var(--font-display) !important; font-size:var(--ugs-fs-h1); font-weight:800; line-height:.9; letter-spacing:.005em; text-transform:uppercase; color:var(--s-text); margin:0 0 1.5rem; }
.s-hero-h1 .s-l, .s-hero-h1 .s-w { font-family:inherit !important; }
.s-hero-h1 .s-h1-thin { color:var(--s-faint); font-weight:300; }
.s-hero-h1 .s-l { display:block; overflow:hidden; padding-bottom:.04em; }
.s-hero-h1 .s-w { display:inline-block; animation:sWordUp .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 80ms + 150ms); }
@keyframes sWordUp { from { transform:translateY(110%); } }
.s-hero-sub { font-size:clamp(.92rem,1.4vw,1.05rem); color:var(--s-muted); line-height:1.7; max-width:560px; margin:0 0 2.25rem; }
.s-hero-cta { display:flex; gap:.875rem; flex-wrap:wrap; align-items:center; margin-bottom:2rem; }
.s-hero-lablink { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .25rem; color:var(--s-text); font-size:.95rem; font-weight:500; text-decoration:none; transition:color .2s; }
.s-hero-lablink:hover { color:var(--ugs-accent-text); }
.s-hero-lablink i { color:var(--ugs-accent); }
.s-hero-brands { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding-top:1.5rem; border-top:1px solid var(--s-bord); }
.s-hero-brands > span:first-child { font-size:.7rem; font-weight:500; color:var(--s-faint); }
.s-hb { font-size:.85rem; font-weight:500; color:var(--s-muted); }
.s-hdot { color:var(--s-faint); }
/* kartu kaca berisi sudut sendi live; ditaruh di kolom kanan (mulai tengah layar + 140px) supaya tidak menutupi tombol hero di kiri */
.s-hero-readout { position:absolute; left:calc(50% + 140px); bottom:2.5rem; z-index:3; width:320px; display:none;
    border:1px solid var(--s-bord); border-radius:16px; padding:14px 16px; background:var(--ugs-glass);
    -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); box-shadow:0 10px 30px var(--ugs-shadow);
    font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.74rem; color:var(--s-faint); font-variant-numeric:tabular-nums; }
.s-hero-readout * { font-family:inherit !important; }
.s-hero-readout header { display:flex; justify-content:space-between; gap:10px; white-space:nowrap; margin-bottom:10px; color:var(--s-text); letter-spacing:.06em; font-weight:500; }
.s-ro-live { display:inline-flex; align-items:center; gap:6px; color:var(--s-faint); }
.s-ro-live::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ugs-hairline-strong); }
.s-ro-live.on { color:var(--ugs-accent-text); }
.s-ro-live.on::before { background:var(--ugs-accent); box-shadow:0 0 10px var(--ugs-accent); animation:sBlink 1.1s infinite; }
@keyframes sBlink { 50% { opacity:.35; } }
.s-hero-readout dl { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0; }
.s-hero-readout dd { margin:0; text-align:right; color:var(--s-text); }
@media(min-width:1280px) and (min-height:700px){ .s-hero.is-3d .s-hero-readout { display:block; } }
.s-hero-hint { position:absolute; right:2rem; top:calc(var(--ugs-nav-h) + 26px); z-index:3; display:none; align-items:center; gap:.5rem; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--s-faint); pointer-events:none; transition:opacity .8s; }
.s-hero.is-3d .s-hero-hint { display:flex; }
.s-hero-hint.is-faded { opacity:0; }
.s-hero.is-3d { cursor:grab; touch-action:pan-y; }
.s-hero.is-3d.is-dragging { cursor:grabbing; }
.s-hero.is-3d .s-hero-body { pointer-events:none; }
.s-hero.is-3d .s-hero-body a, .s-hero.is-3d .s-hero-body button, .s-hero.is-3d .s-hero-readout { pointer-events:auto; }
.s-scroll-line { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; }
.s-scroll-line span { display:block; width:1px; height:52px; background:linear-gradient(to bottom, var(--ugs-hairline-strong), transparent); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine { 0%{ transform:scaleY(0); transform-origin:top; opacity:0; } 50%{ transform:scaleY(1); transform-origin:top; opacity:1; } 100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; } }
/* layar laptop pendek */
@media(max-height:1000px) and (min-width:768px){ .s-hero-h1 { font-size:clamp(2.5rem,6.5vw,6rem) !important; } .s-hero-sub { margin-bottom:1.5rem; } .s-hero-cta { margin-bottom:1.25rem; } .s-hero-brands { display:none; } }
@media(max-height:800px) and (min-width:768px){ .s-hero-h1 { font-size:clamp(2.5rem,6vw,5rem) !important; } .s-hero-sub { font-size:.9rem; } }
@media(max-height:650px) and (min-width:768px){ .s-hero-h1 { font-size:clamp(2rem,5.5vw,4rem) !important; } .s-hero-sub { display:none; } }
/* HP: robot di atas, teks di bawah dengan tirai dari bawah */
@media(max-width:767px){
    .s-hero::before { min-height:60px; }
    /* tirai dari bawah dipakai untuk poster maupun 3D (tanpa WebGL = foto, tetap tirai .no-3d) */
    .s-hero:not(.no-3d) .s-hero-scrim { background:linear-gradient(to top, rgba(var(--ugs-studio-rgb),.98) 0%, rgba(var(--ugs-studio-rgb),.92) 36%, rgba(var(--ugs-studio-rgb),.5) 54%, rgba(var(--ugs-studio-rgb),0) 68%); }
    .s-hero-hint { right:1rem; top:calc(var(--ugs-nav-h) + 16px); font-size:.6rem; }
    /* poster tampil sejak awal (tanpa menunggu JavaScript), memudar setelah 3D asli menutupinya */
    .s-hero:not(.no-3d) .s-hero-poster, .s-cad-stage .s-cad-poster { display:block; }
    .s-hero.is-3d .s-hero-poster, .s-cad-stage.is-3d .s-cad-poster { opacity:0; transition-delay:1.3s; }
    /* panggung cerita: tombol di pojok supaya tidak menutupi robot; ajakan "geser" baru muncul setelah 3D berjalan */
    .s-cad-stage:not(.is-3d) .s-cad-hint { visibility:hidden; }
    .s-cad-stage .s-cad-3d-btn { left:24px; top:24px; transform:none; }
}
/* Poster = gambar diam dari panggung 3D yang sama (dirender dari model FD-B6 asli, ukuran HP), dipakai di HP sebelum 3D dimuat.
   Hanya tampil di layar <768px (display:none di luar itu, jadi gambarnya tidak diunduh di desktop).
   Dibuat ulang bila sudut kamera/latar 3D di HP berubah: skrip render-posters di tools developer. */
.s-hero-poster, .s-cad-poster { position:absolute; inset:0; z-index:0; display:none; background:center top / cover no-repeat; pointer-events:none; transition:opacity .6s; }
.s-hero-poster { background-image:url('../../img/fdb6-poster-hero-light.webp'); }
:root[data-ugs-theme="dark"] .s-hero-poster { background-image:url('../../img/fdb6-poster-hero-dark.webp'); }
.s-cad-poster { background-image:url('../../img/fdb6-poster-story.webp'); background-position:center; }
/* tombol "Tampilkan robot 3D" (HP / koneksi lambat) */
.s-3d-btn { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px; cursor:pointer;
    font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.s-3d-btn span { font-family:inherit !important; }
.s-3d-btn[hidden] { display:none; }
.s-3d-btn:disabled { cursor:progress; opacity:.75; }
.s-hero-3d-btn { right:1rem; top:calc(var(--ugs-nav-h) + 14px); border:1px solid var(--s-bord); background:var(--ugs-glass); color:var(--s-text);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.s-hero-3d-btn i { color:var(--ugs-accent); }
.s-cad-3d-btn { left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(156,188,255,.5); background:rgba(10,23,48,.85); color:rgba(156,188,255,.95); }

/* ── ANGKA ── */
.s-authority { background:var(--ugs-page); }
.s-stats-row { display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:0 auto; border-bottom:1px solid var(--s-bord); }
.s-stat { display:flex; flex-direction:column; padding:2.6rem 2rem 2.4rem; border-left:1px solid var(--s-bord); }
.s-stat:first-child { border-left:0; }
.s-stat-n { font-family:var(--font-display) !important; font-size:clamp(2.6rem,5vw,4rem); font-weight:800; color:var(--s-text); line-height:1; font-variant-numeric:tabular-nums; }
.s-stat-n span { font-family:inherit !important; color:var(--s-blue); }
.s-stat-l { font-size:.95rem; font-weight:500; color:var(--s-text); margin-top:.6rem; }
.s-stat-sub { font-size:.82rem; color:var(--s-faint); margin-top:.15rem; }

/* ── KLIEN: logo abu-abu, berwarna saat di-hover ── */
.s-clients { padding:5rem 0 4rem; }
.s-clients-head { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:2.5rem; }
.s-clients-marquee { display:flex; flex-direction:column; }
.s-mq { overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s-mq-track { display:flex; align-items:center; width:max-content; animation:sMarquee 44s linear infinite; }
.s-mq:hover .s-mq-track { animation-play-state:paused; }
@keyframes sMarquee { to { transform:translateX(-50%); } }
.s-client-tile { flex-shrink:0; padding:1.4rem 2.8rem; cursor:default; }
.s-client-tile img { display:block; width:150px; height:46px; object-fit:contain; filter:var(--ugs-logo-filter); opacity:.55; transition:filter .3s, opacity .3s; }
.s-client-tile:hover img { filter:none; opacity:1; }
.s-client-name { display:none; }
/* PNG Daihatsu berlatar hitam: terang = dibalik lalu multiply (latar jadi putih & hilang), gelap = screen (latar hitam hilang) */
.s-client-tile[data-brand="daihatsu"] img { filter:grayscale(1) invert(1); mix-blend-mode:multiply; }
:root[data-ugs-theme="dark"] .s-client-tile[data-brand="daihatsu"] img { filter:grayscale(1) brightness(2.2); mix-blend-mode:screen; }
/* saat disorot tampil warna asli (kotak merah) seperti logo lain; aturan khusus di atas lebih spesifik dari hover umum */
.s-client-tile[data-brand="daihatsu"]:hover img, :root[data-ugs-theme="dark"] .s-client-tile[data-brand="daihatsu"]:hover img { filter:none; mix-blend-mode:normal; }
@media(max-width:640px){ .s-client-tile { padding:1rem 1.8rem; } .s-client-tile img { width:112px; height:36px; } }

/* ── KEBUTUHAN ── */
.s-needs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; margin-top:1rem; }
.s-need { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.55rem; padding:2rem 1.8rem; border-radius:22px; background:var(--s-card); border:1px solid var(--s-bord); text-decoration:none; color:var(--s-text); transition:transform .3s, box-shadow .3s; }
.s-need:hover { transform:translateY(-3px); box-shadow:0 18px 40px var(--ugs-shadow); color:var(--s-text); }
.s-need-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--ugs-accent-tint); color:var(--ugs-accent); font-size:1.1rem; }
.s-need-k { font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--s-faint); margin-top:.4rem; }
.s-need strong { font-size:1.35rem; font-weight:600; letter-spacing:-.015em; line-height:1.25; color:var(--s-text); }
.s-need-d { font-size:.93rem; color:var(--s-muted); line-height:1.65; flex-grow:1; }
.s-need .s-link-arrow { margin-top:.6rem; }

/* ── PRINCIPAL: foto di atas, teks di bawah (bukan overlay gelap) ── */
.s-partners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
.s-pcard { display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--s-surf); border:1px solid var(--s-bord); text-decoration:none; color:var(--s-text); transition:transform .3s, box-shadow .3s; }
.s-pcard:hover { transform:translateY(-3px); box-shadow:0 18px 40px var(--ugs-shadow); color:var(--s-text); }
.s-pcard img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease; }
.s-pcard:hover img { transform:scale(1.04); }
.s-pcard-body { display:flex; flex-direction:column; gap:.4rem; padding:1.3rem 1.4rem 1.5rem; flex:1; }
.s-partner-tag { font-size:.8rem; font-weight:500; color:var(--ugs-accent-text); }
.s-partner-name { font-family:var(--font-display) !important; font-size:1.7rem; font-weight:800; text-transform:uppercase; line-height:1; color:var(--s-text); }
.s-pcard-desc { font-size:.88rem; line-height:1.6; color:var(--s-muted); flex:1; }
.s-pcard .s-link-arrow { margin-top:.4rem; }

/* ── PRODUK ── */
.s-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
.s-prod { display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--s-bord); border-radius:22px; background:var(--s-card); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.s-prod:hover { transform:translateY(-3px); box-shadow:0 18px 40px var(--ugs-shadow); }
.s-prod-img { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; padding:1.6rem; background:var(--ugs-photo-tile); overflow:hidden; }
.s-prod-img img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s ease; }
.s-prod:hover .s-prod-img img { transform:scale(1.05); }
.s-prod-body { padding:1rem 1.3rem 1.3rem; flex:1; border-top:1px solid var(--s-bord); display:flex; flex-direction:column; gap:.2rem; }
.s-prod-brand { font-size:.78rem; font-weight:500; color:var(--ugs-accent-text); }
.s-prod-name { font-size:1.05rem; font-weight:600; color:var(--s-text); line-height:1.35; margin:0; text-transform:none; letter-spacing:0; }
.s-prod-cat { font-size:.82rem; color:var(--s-faint); }

/* ── KENAPA KAMI ── */
.s-why-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem; align-items:start; }
.s-pillars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.s-pillar { display:flex; flex-direction:column; gap:.75rem; padding:1.5rem; border-radius:20px; background:var(--s-card); border:1px solid var(--s-bord); }
.s-pillar-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--ugs-accent-tint); color:var(--ugs-accent); font-size:1rem; }
.s-pillar-body strong { display:block; font-size:1.02rem; font-weight:600; color:var(--s-text); margin-bottom:.3rem; }
.s-pillar-body p { font-size:.88rem; color:var(--s-muted); line-height:1.6; margin:0; }
.s-why-strip { margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--s-bord); display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; }
.s-ind-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.s-ind-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px solid var(--s-bord); border-radius:999px; font-size:.88rem; color:var(--s-text); background:var(--s-card); }
.s-ind-chip i { color:var(--ugs-accent); }
.s-milestones { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.s-milestones div { display:flex; flex-direction:column; gap:.2rem; }
.s-milestones strong { font-family:var(--font-display) !important; font-size:1.8rem; font-weight:800; color:var(--s-text); }
.s-milestones span { font-size:.85rem; color:var(--s-muted); line-height:1.45; }

/* ── ARTIKEL ── */
.s-news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.s-ncard { display:flex; flex-direction:column; background:var(--s-card); border:1px solid var(--s-bord); border-radius:22px; overflow:hidden; text-decoration:none; transition:transform .3s, box-shadow .3s; }
.s-ncard:hover { transform:translateY(-3px); box-shadow:0 18px 40px var(--ugs-shadow); }
.s-ncard-img { display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--s-surf); }
.s-ncard-img img, .s-ncard-img .s-news-ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.s-news-ph { background:linear-gradient(135deg, var(--s-surf), var(--ugs-card-2)); }
.s-ncard:hover .s-ncard-img img { transform:scale(1.04); }
.s-ncard-body { display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.4rem 1.4rem; flex:1; }
.s-ncard-date { font-size:.78rem; font-weight:500; color:var(--s-faint); }
.s-ncard-title { font-size:1.08rem; font-weight:600; line-height:1.4; color:var(--s-text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.s-ncard-ex { font-size:.9rem; line-height:1.6; color:var(--s-muted); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.s-ncard .s-link-arrow { margin-top:.35rem; }
.s-ncard-more { justify-content:center; gap:.75rem; padding:2.25rem 2rem; background:var(--s-surf); }
.s-ncard-more strong { font-family:var(--font-display) !important; font-size:1.6rem; font-weight:800; text-transform:uppercase; color:var(--s-text); line-height:1.1; }
.s-ncard-more > span:not(.s-ncard-more-icon):not(.s-link-arrow) { font-size:.92rem; line-height:1.6; color:var(--s-muted); }
.s-ncard-more-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--ugs-accent-tint); color:var(--ugs-accent); font-size:1.3rem; }
.s-news-all { align-self:flex-end; }

/* ── AJAKAN: terang, rata tengah (foto latar lama disembunyikan) ── */
.s-cta-section { background:var(--s-surf); border-top:1px solid var(--s-bord); }
.s-cta-media { display:none; }
.s-cta-body { padding:6.5rem 2rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.s-cta-h2 { font-family:var(--font-display) !important; font-size:var(--ugs-fs-display-sm); font-weight:800; letter-spacing:.005em; line-height:.95; color:var(--s-text); margin:.5rem 0 0; text-transform:uppercase; }
.s-cta-h2 em { font-family:inherit !important; font-style:normal; font-weight:300; color:var(--s-faint); }
.s-cta-right .s-body { margin-bottom:2rem; }
.s-cta-btns { display:flex; flex-wrap:wrap; gap:.75rem; }
.s-cta-proof { margin-top:1.5rem; font-size:.85rem; color:var(--s-faint); display:flex; align-items:center; gap:.5rem; }
.s-cta-proof i { color:var(--ugs-accent); }

/* ── STORY CAD FD-B6: satu-satunya bagian gelap (blueprint) ── */
.s-cad { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); background:#070b14; border-top:1px solid #1b2536; border-bottom:1px solid #1b2536; --cad-nav:var(--ugs-nav-h); }
.s-cad-steps { border-right:1px solid #1b2536; }
.s-cad-step { min-height:80vh; padding:clamp(40px,7vh,80px) clamp(16px,4vw,56px); border-bottom:1px solid #1b2536; display:flex; flex-direction:column; justify-content:center; gap:16px; transition:opacity .4s; }
.s-cad-step:last-child { border-bottom:0; }
.s-cad-step:not(.is-active) { opacity:.45; }
.s-cad-tag { display:flex; gap:12px; align-items:center; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ugs-accent); }
.s-cad-tag::before { content:''; width:22px; height:1px; background:currentColor; }
.s-cad-step h2 { font-family:var(--font-display) !important; font-weight:800; text-transform:uppercase; font-size:clamp(2rem,3.8vw,3.1rem); line-height:1; margin:0; color:#fff; text-wrap:balance; }
.s-cad-step p { color:#8693a9; margin:0; max-width:46ch; line-height:1.75; }
.s-cad-step p strong { color:#e9eef6; font-weight:600; }
.s-cad-parts { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.s-cad-parts li { font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.72rem; border:1px solid #1b2536; padding:3px 9px; border-radius:999px; color:#8693a9; }
.s-cad-spec { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:4px 0 0; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; font-size:.8rem; max-width:380px; }
.s-cad-spec * { font-family:inherit !important; }
.s-cad-spec dt { color:#8693a9; } .s-cad-spec dd { margin:0; text-align:right; color:#e9eef6; font-variant-numeric:tabular-nums; }
.s-cad-stage { position:sticky; top:var(--cad-nav); height:calc(100vh - var(--cad-nav)); min-height:420px; overflow:hidden; background:#0a1730; user-select:none; -webkit-user-select:none; cursor:grab; touch-action:pan-y; }
.s-cad-stage.is-dragging { cursor:grabbing; }
#cadStage { position:absolute; inset:0; width:100%; height:100%; display:block; }
.s-cad-frame { position:absolute; inset:14px; border:1px solid rgba(156,188,255,.5); pointer-events:none; }
.s-cad-hint, .s-cad-live, .s-cad-joints, .s-cad-titleblock { position:absolute; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace !important; pointer-events:none; }
.s-cad-hint *, .s-cad-live *, .s-cad-joints *, .s-cad-titleblock * { font-family:inherit !important; }
.s-cad-hint { left:28px; top:26px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(156,188,255,.75); }
.s-cad-live { right:28px; top:26px; display:flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#e9eef6; background:#0a1730; padding:4px 8px; border:1px solid #15284a; }
.s-cad-live i { width:8px; height:8px; border-radius:50%; background:#8693a9; }
.s-cad-live.on i { background:#ffb347; box-shadow:0 0 10px #ffb347; }
.s-cad-joints { left:28px; bottom:26px; display:grid; grid-template-columns:auto auto; gap:2px 12px; font-size:.7rem; color:#9cbcff; background:#0a1730; padding:8px 10px; border:1px solid #15284a; }
.s-cad-joints b { color:#e9eef6; font-weight:500; text-align:right; min-width:6ch; font-variant-numeric:tabular-nums; }
.s-cad-titleblock { right:14px; bottom:14px; width:min(420px, calc(100% - 28px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#0a1730; border-top:1px solid #9cbcff; border-left:1px solid #9cbcff; color:#9cbcff; }
.s-cad-titleblock div { padding:5px 8px; border-right:1px solid #15284a; border-bottom:1px solid #15284a; min-width:0; }
.s-cad-titleblock div:nth-child(4n) { border-right:0; }
.s-cad-titleblock small { display:block; font-size:.55rem; opacity:.7; letter-spacing:.06em; text-transform:uppercase; }
.s-cad-titleblock b { display:block; font-size:.76rem; font-weight:500; color:#e9eef6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.s-tb-wide { grid-column:span 2; } .s-tb-full { grid-column:span 4; border-right:0 !important; }
.s-cad .s-btn-primary { color:#fff; }
@media(max-width:1100px){ .s-cad-joints { display:none; } }
@media(max-width:860px){
    .s-cad { grid-template-columns:1fr; }
    /* bayangan ke atas menutup celah antara navbar dan panggung saat sticky */
    .s-cad-stage { grid-row:1; height:56vh; min-height:320px; z-index:2; border-bottom:1px solid #1b2536; box-shadow:0 -24px 0 #070b14; }
    .s-cad-steps { border-right:0; }
    .s-cad-step { min-height:64vh; }
    .s-cad-titleblock { grid-template-columns:minmax(0,1fr) auto; width:min(320px, calc(100% - 28px)); }
    .s-cad-titleblock div { display:none; }
    .s-cad-titleblock .s-tb-full, .s-cad-titleblock .s-tb-sheet { display:block; grid-column:auto; }
    .s-cad-titleblock .s-tb-full { border-right:1px solid #15284a !important; }
}

/* ══ RESPONSIF ══ */
@media(max-width:991px){
    .s-partners, .s-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .s-news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .s-news-grid .s-ncard:nth-child(3) { display:none; }
}
@media(max-width:900px){
    .s-needs-grid, .s-why-grid { grid-template-columns:1fr; }
    .s-why-grid { gap:2.5rem; }
    .s-why-strip { grid-template-columns:1fr; gap:2rem; }
    .s-milestones { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
    .s-section { padding:5rem 0; }
    .s-container { padding:0 1.25rem; }
    .s-sec-row { flex-direction:column; gap:1.25rem; margin-bottom:2.25rem; }
    .s-sec-row > .s-btn { align-self:flex-start !important; }
    .s-hero-body { padding:0 1.25rem 2rem; }
    .s-hero-h1 { margin-bottom:1.25rem; }
    .s-hero-cta { flex-direction:column; align-items:stretch; gap:.75rem; }
    .s-hero-cta .s-btn { width:100%; justify-content:center; }
    .s-hero-cta .s-hero-lablink { justify-content:center; }
    .s-stats-row { grid-template-columns:repeat(2,1fr); }
    .s-stat { padding:1.8rem 1.25rem; }
    .s-stat:nth-child(3) { border-left:0; }
    .s-stat:nth-child(n+3) { border-top:1px solid var(--s-bord); }
    .s-clients { padding:3.5rem 0 3rem; }
    .s-clients-head { grid-template-columns:1fr; gap:1rem; }
    .s-pillars { grid-template-columns:1fr; }
    .s-cta-body { grid-template-columns:1fr; gap:2rem; padding:4.5rem 1.25rem; }
    .s-cta-btns .s-btn { width:100%; justify-content:center; }
}
@media(max-width:600px){
    .s-news-grid { grid-template-columns:1fr; }
    .s-news-grid .s-ncard:nth-child(3) { display:flex; }
    .s-news-grid .s-ncard-more { display:none !important; }
    .s-pcard-desc { display:none; }
}
@media(max-width:480px){
    .s-partners { grid-template-columns:1fr 1fr; gap:.75rem; }
    .s-partner-name { font-size:1.25rem; }
    .s-pcard-body { padding:1rem; }
    .s-products { gap:.75rem; }
    .s-prod-img { padding:1rem; }
    .s-prod-body { padding:.85rem .9rem 1rem; }
    .s-prod-name { font-size:.9rem; }
    .s-hero-brands { display:none; }
}
@media(prefers-reduced-motion:reduce){
    .s-mq-track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
    .s-mq-track > [aria-hidden="true"] { display:none; }
    .s-hero-h1 .s-w, .s-ro-live::before, .s-dot { animation:none; }
    .s-reveal { opacity:1; transform:none; transition:none; }
}