/* Company-profile visual layer: shared across the existing multi-page site. */
:root { --color-primary: #7c3aed; --color-primary-dark: #5b21b6; --color-primary-light: #a78bfa; --color-secondary: #d946ef; --color-background: #f8f7ff; --color-surface-soft: #f3efff; --color-text-strong: #160d2d; --border-color: #e6def9; --shadow-primary: 0 18px 45px rgba(124,58,237,.18); }
body { background: #f8f7ff; }
main { position: relative; isolation: isolate; }
main::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(circle at 10% 16%, rgba(124,58,237,.06), transparent 25rem), radial-gradient(circle at 92% 38%, rgba(217,70,239,.05), transparent 24rem); content: ""; pointer-events: none; }
.hero, .page-hero, .registration-hero, .report-hero, .contact-hero { border-bottom: 1px solid rgba(124,58,237,.1); }
.section-kicker, .eyebrow, .contact-kicker { color: #6d28d9; letter-spacing: .12em; }
.section-header h2, .page-hero-content h1, .contact-hero h1 { letter-spacing: -.045em; }
.card-hover, .report-feature-card, .registration-notice-card, .contact-form-wrapper, .contact-item { border-color: rgba(124,58,237,.13); box-shadow: 0 14px 34px rgba(38,20,80,.06); }
.button, .btn-primary, .contact-submit .button { box-shadow: 0 10px 24px rgba(124,58,237,.2); }

/* Short, skippable, reduced-motion-safe brand reveal. */
.brand-intro { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; overflow: hidden; background: #0d081a; color: #fff; transition: opacity .45s ease, visibility .45s ease; }
.brand-intro::before, .brand-intro::after { position: absolute; width: 42rem; height: 42rem; border-radius: 50%; content: ""; filter: blur(12px); opacity: .65; }
.brand-intro::before { top: -23rem; left: -16rem; background: radial-gradient(circle, #7c3aed, transparent 68%); }.brand-intro::after { right: -18rem; bottom: -25rem; background: radial-gradient(circle, #d946ef, transparent 66%); }
.brand-intro__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 17px; text-align: center; animation: intro-enter .75s cubic-bezier(.22,1,.36,1) both; }
.brand-intro__mark { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid rgba(255,255,255,.2); border-radius: 27px; background: rgba(255,255,255,.08); box-shadow: 0 20px 70px rgba(0,0,0,.35); }.brand-intro__mark::before { position: absolute; inset: -13px; border: 1px solid rgba(167,139,250,.45); border-radius: 34px; content: ""; animation: intro-pulse 1.3s ease-in-out infinite; }.brand-intro__mark img { width: 72px; height: 72px; object-fit: contain; }
.brand-intro__name { display: grid; font-family: var(--font-heading); font-size: 1.08rem; font-weight: 800; letter-spacing: .14em; line-height: 1.1; text-transform: uppercase; }.brand-intro__name span:last-child { color: #d8b4fe; }
.brand-intro__line { width: 112px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.18); }.brand-intro__line::after { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#8b5cf6,#f0abfc); content: ""; transform: translateX(-110%); animation: intro-line 1.05s .15s ease forwards; }
.brand-intro.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }.brand-intro__skip { position: absolute; right: 22px; bottom: 22px; z-index: 2; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: .75rem; }
.intro-seen .brand-intro { display: none; }

/* Intro hanya menjadi pembuka Beranda; halaman tujuan langsung menampilkan konten. */
.seo-service-page .brand-intro,
.integration-page .brand-intro,
.contact-page .brand-intro,
.registration-page .brand-intro,
.report-page .brand-intro,
.about-page .brand-intro { display: none; }
@keyframes intro-enter { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }@keyframes intro-pulse { 50% { transform: scale(1.08); opacity: .35; } }@keyframes intro-line { to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none; }.brand-intro *, .brand-intro::before, .brand-intro::after { animation: none !important; } }
@media (max-width: 600px) { .brand-intro__mark { width: 88px; height: 88px; }.brand-intro__mark img { width: 60px; height: 60px; } }