/* Vista Kencana landing page. Loaded after Bootstrap 5.3 (CDN), so these rules override Bootstrap's defaults. */

:root{
  --bs-primary: #E8792E;
  --bs-primary-rgb: 232,121,46;
  --bs-dark: #142238;
  --bs-dark-rgb: 20,34,56;
  --bs-body-bg: #F8F7F4;
  --bs-body-color: #1A1F2B;
  --bs-body-font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --bs-border-radius: .6rem;
  --bs-border-color: #DEDFE3;
  --bs-link-color: #C4611E;
  --bs-link-hover-color: #A64F17;
}
.display, h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
.btn-primary { --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; }

/* Header */
.brand-mark{ width:34px; height:34px; border-radius:50%; background:conic-gradient(from 200deg, #E8792E, #F2A34F, #C4611E, #E8792E); flex:0 0 auto; }
.site-header{ background:var(--bs-dark); }
.site-header a.nav-link{ color:#C7CCD8; }
.site-header a.nav-link:hover, .site-header a.nav-link.active{ color:#fff; }

/* Hero carousel (the background photos are hotlinked from Pexels: replace with your own assets for production) */
.brand-carousel{ background:var(--bs-dark); }
.brand-carousel .carousel-slide-content{ position:relative; background-color:var(--bs-dark); background-size:cover; background-position:center; min-height:420px; display:flex; align-items:center; overflow:hidden; }
.brand-carousel .carousel-slide-content::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,34,56,.82), rgba(20,34,56,.88)), radial-gradient(circle at 20% 20%, rgba(232,121,46,.18), transparent 45%); z-index:0; }
.brand-carousel .carousel-slide-content > .container{ position:relative; z-index:1; }
.brand-carousel .cs-1{ background-image:url('https://images.pexels.com/photos/7054505/pexels-photo-7054505.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.brand-carousel .cs-2{ background-image:url('https://images.pexels.com/photos/36733315/pexels-photo-36733315.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.brand-carousel .cs-3{ background-image:url('https://images.pexels.com/photos/11391947/pexels-photo-11391947.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.brand-carousel .carousel-eyebrow{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-primary); margin-bottom:.6rem; }
.brand-carousel .sub{ color:#B7BECD; }
.brand-carousel .carousel-indicators [data-bs-target]{ background-color:var(--bs-primary); width:8px; height:8px; border-radius:50%; margin:0 5px; opacity:.4; border:none; }
.brand-carousel .carousel-indicators .active{ opacity:1; }
.brand-carousel .carousel-control-prev, .brand-carousel .carousel-control-next{ width:5%; opacity:.6; }
.brand-carousel .carousel-control-prev:hover, .brand-carousel .carousel-control-next:hover{ opacity:1; }

/* "How it works" diagram on the last slide */
.flow-diagram{ margin:0 auto; max-width:820px; }
.flow-diagram svg{ width:100%; height:auto; display:block; }

/* "Powered by FortiSign" section */
.hero{ background:radial-gradient(circle at 20% 20%, rgba(232,121,46,.10), transparent 45%), var(--bs-dark); color:#fff; }
.hero .sub{ color:#B7BECD; }
.hero .carousel-eyebrow{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-primary); margin-bottom:.6rem; }
.benefit-badge{ width:52px; height:52px; border-radius:.6rem; background:var(--bs-primary); display:flex; align-items:center; justify-content:center; margin:0 auto .9rem; }
.benefit-badge svg{ width:26px; height:26px; }

/* Feature cards */
.feature-card{ border:1px solid var(--bs-border-color); border-radius:.6rem; background:#fff; padding:1.5rem; height:100%; }
.feature-card .icon{ width:40px; height:40px; border-radius:.5rem; background:rgba(var(--bs-primary-rgb),.12); color:var(--bs-primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.75rem; }

/* Footer */
footer.site-footer{ font-size:.78rem; color:#6c7280; }