body {
   font-family: 'Poppins', sans-serif;
   background-color: #f8f9fa;
}
.hero-section {
   background: linear-gradient(135deg, #2c3e50, #1a2530);
   color: white;
   padding: 5rem 0;
}
.feature-icon {
   font-size: 2.5rem;
   color: #3498db;
   margin-bottom: 1rem;
}
.btn-primary {
   background-color: #3498db;
   border-color: #2980b9;
}
.btn-primary:hover {
   background-color: #2980b9;
   border-color: #1c6ea4;
}
.domain-badge {
   background: #2e8a43;
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 600;
}
footer {
   background-color: #2c3e50;
   color: white;
   padding: 2rem 0;
}

/* Pricing Cards */
.pricing-card {
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
   border: none;
   border-radius: 12px;
}
.pricing-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.top-strip {
   height: 8px;
   opacity: 0.1;
}
.badge-terlaris {
   position: absolute;
   top: 16px;
   left: -30px;
   background: #3498db;
   color: white;
   font-weight: bold;
   font-size: 0.85rem;
   padding: 0.35rem 2rem;
   transform: rotate(-45deg);
   z-index: 2;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Toast Progress Bar */
.toast-progress {
   height: 4px;
   background: rgba(0, 0, 0, 0.2);
   margin-top: 8px;
   border-radius: 2px;
   overflow: hidden;
}
.toast-progress-bar {
   height: 100%;
   background: rgb(46, 160, 67);
   width: 100%;
   animation: toastCountdown 10s linear forwards;
   border-radius: 2px;
}
@keyframes toastCountdown {
   from {
      width: 100%;
   }
   to {
      width: 0%;
   }
}

/* Reveal on scroll / entry animations */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 600ms ease,
      transform 600ms cubic-bezier(0.2, 0.9, 0.2, 1);
   will-change: opacity, transform;
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

.reveal.fade-in {
   transform: none;
}

.reveal.zoom-in {
   transform: scale(0.96);
   transition: opacity 600ms ease,
      transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.reveal.zoom-in.visible {
   transform: scale(1);
}

/* Utility: staggered delays (nice for lists/cards) */
.reveal[data-delay] {
   transition-delay: calc(var(--delay, 0s));
}
.reveal[data-delay='1'] {
   --delay: 0.08s;
}
.reveal[data-delay='2'] {
   --delay: 0.16s;
}
.reveal[data-delay='3'] {
   --delay: 0.24s;
}
.reveal[data-delay='4'] {
   --delay: 0.32s;
}
.reveal[data-delay='5'] {
   --delay: 0.4s;
}

/* Initial page load: add class to body to start entrance animations */
body.anim-loaded .reveal {
   transition-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
   .reveal {
      transition: none;
      opacity: 1;
      transform: none;
   }
}

/* Make footer visible on short pages: use column flex layout */
html,
body {
   height: 100%;
}
body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
.site-main {
   flex: 1 0 auto;
   padding-bottom: 2rem; /* spacing for footer when in document flow */
}
footer {
   display: block;
   position: relative; /* normal flow */
   z-index: 999; /* higher so it's visible above low-z overlays */
   color: #ffffff; /* ensure text contrasts */
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   background-color: rgba(
      44,
      62,
      80,
      0.9
   ); /* slightly less transparent so it's visible */
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   padding: 1.25rem 0.75rem;
   min-height: 64px;
}

/* Small accessibility tweak: ensure focusable footer links visible */
footer a:focus {
   outline: 2px solid rgba(255, 255, 255, 0.15);
   outline-offset: 3px;
}

/* Back to top button */
.btn-back-to-top {
   position: fixed;
   right: 20px;
   bottom: 24px; /* sits above viewport bottom */
   width: 46px;
   height: 46px;
   border-radius: 999px;
   background: rgba(52, 152, 219, 0.9);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   cursor: pointer;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 240ms ease,
      transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
   z-index: 1300;
}
.btn-back-to-top.visible {
   opacity: 1;
   transform: translateY(0);
}
.btn-back-to-top:focus {
   outline: 2px solid rgba(255, 255, 255, 0.18);
   outline-offset: 4px;
}
.btn-back-to-top:hover {
   background: rgba(52, 152, 219, 1);
}
@media (max-width: 576px) {
   .btn-back-to-top {
      right: 12px;
      bottom: 20px;
      width: 40px;
      height: 40px;
   }
   .site-main {
      padding-bottom: 1.25rem;
   }
}

/* Top alert (attached to body, inline) */
.top-alert {
   position: static; /* not sticky */
   width: 100%;
}
.top-alert .alert {
   margin: 0;
   border-radius: 0;
   background-color: rgba(52, 152, 219, 0.08); /* subtle translucent blue */
   color: rgba(7, 63, 85, 0.95);
   border: none;
}
.top-alert .alert .container {
   padding-top: 0.35rem;
   padding-bottom: 0.35rem;
}
.top-alert .alert i {
   font-size: 1.02rem;
}

.alert-progress {
   display: none; /* progress hidden when auto-hide disabled */
}

/* Single-line truncate for message */
.alert-message {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.alert-message .small {
   color: rgba(0, 0, 0, 0.6);
}

/* Close animation for top-alert: fade + small upward slide (slower) */
.top-alert .alert.fade {
   opacity: 0;
   transform: translateY(-3px); /* smaller slide distance */
   transition: opacity 600ms ease-out, transform 600ms ease-out,
      max-height 600ms ease-out; /* slower and gentler */
   will-change: opacity, transform;
}
.top-alert .alert.fade.show {
   opacity: 1;
   transform: none;
}
.top-alert .alert.fade:not(.show) {
   pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
   .btn-back-to-top {
      transition: none;
      transform: none;
      opacity: 1;
   }
}