/* ==========================================================================
   ProSafe Dark Mode Complete System (Brand Identity Compliant)
   Palette: Deep Corporate Navy (#060B1A, #0D1630), Trust Blue (#0463D4),
            Medium Green (#A4D87A, #84D162), Ice Cyan (#38BDF8),
            Muted Slate (#94A3B8, #CBD5E1), Pure White (#FFFFFF)
   ========================================================================== */

/* ── Smooth transitions on theme switch ─────────────────────────────────── */
html {
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body,
.site-header,
.mobile-drawer,
.nav-dropdown-menu,
.modular-card,
.workflow-node-card,
.dashboard-browser-frame,
.browser-header-bar,
.floating-badge,
.badge-speed-showcase,
.badge-bottom-left,
.live-kpi-card,
.chart-container-wrap,
.industry-card,
.value-card,
.capability-box,
.workflow-step-card,
.platform-group-card,
.form-card,
.contact-card,
.impl-step-card,
.accordion-item,
.final-cta-card,
.modular-cards-section,
.workflow-radbin-section {
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background       0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color     0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Theme Button Pop Animation ────────────────────────────────────────── */
@keyframes themeBtnPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28) rotate(18deg); }
  70%  { transform: scale(0.88) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.theme-btn-pop {
  animation: themeBtnPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ==========================================================================
   Adaptive Brand Logo (Light / Dark Modes)
   Ensures logo is NEVER duplicated and switches flawlessly on every page
   ========================================================================== */
.brand-logo-light {
  display: block !important;
}
.brand-logo-dark {
  display: none !important;
}

[data-theme="dark"] .brand-logo-light {
  display: none !important;
}
[data-theme="dark"] .brand-logo-dark {
  display: block !important;
}

.drawer-header .brand-logo-light {
  display: block !important;
}
.drawer-header .brand-logo-dark {
  display: none !important;
}
[data-theme="dark"] .drawer-header .brand-logo-light {
  display: none !important;
}
[data-theme="dark"] .drawer-header .brand-logo-dark {
  display: block !important;
}

/* ==========================================================================
   Theme Toggle Button & Icon Visibility (Unified across all pages)
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E2E8F0;
  color: var(--color-very-dark-navy);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(1, 9, 45, 0.05);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
}

.theme-toggle-btn:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: var(--color-trust-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 99, 212, 0.16);
}

.theme-toggle-btn svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover svg {
  transform: rotate(20deg);
}

/* Light mode icon display: Moon visible, Sun hidden */
html:not([data-theme="dark"]) .theme-icon-sun {
  display: none !important;
}
html:not([data-theme="dark"]) .theme-icon-moon {
  display: block !important;
}

/* Dark mode icon display: Sun visible (golden), Moon hidden */
[data-theme="dark"] .theme-icon-sun {
  display: block !important;
  color: #FBBF24 !important;
}
[data-theme="dark"] .theme-icon-moon {
  display: none !important;
}

[data-theme="dark"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(4, 99, 212, 0.45) !important;
  box-shadow: 0 6px 18px rgba(4, 99, 212, 0.3) !important;
}

/* ==========================================================================
   Dark Mode Body & Surfaces (Rich ambient radial glow matching Home Page)
   ========================================================================== */
[data-theme="dark"] body {
  background-color: #060B1A !important;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(4, 99, 212, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(164, 216, 122, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 65%, rgba(2, 44, 123, 0.3) 0%, transparent 55%) !important;
  background-attachment: fixed;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   Header, Navigation & Drawer in Dark Mode (Unified across all pages)
   ========================================================================== */
[data-theme="dark"] .site-header {
  background: rgba(6, 11, 26, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(6, 11, 26, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .nav-link {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: #38BDF8 !important;
  background-color: rgba(4, 99, 212, 0.15) !important;
}

[data-theme="dark"] .nav-dropdown-menu {
  background: #0B132B !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .nav-dropdown-link {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .nav-dropdown-link:hover,
[data-theme="dark"] .nav-dropdown-link:focus-visible {
  background: rgba(4, 99, 212, 0.18) !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .mobile-drawer {
  background: #080E21 !important;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .drawer-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .drawer-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .drawer-close {
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .drawer-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .mobile-nav-link {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .mobile-nav-link.active,
[data-theme="dark"] .mobile-nav-link:hover {
  color: #38BDF8 !important;
  background: rgba(4, 99, 212, 0.15) !important;
}

[data-theme="dark"] .btn-hamburger {
  color: #F8FAFC !important;
}

[data-theme="dark"] .lang-switcher {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] .lang-switcher:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(4, 99, 212, 0.4) !important;
  color: #38BDF8 !important;
}

/* ==========================================================================
   Typography & Headings in Dark Mode
   ========================================================================== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .section-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-radbin-title,
[data-theme="dark"] .final-cta-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .hero-description,
[data-theme="dark"] .hero-radbin-desc,
[data-theme="dark"] .text-lead,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
  color: #94A3B8 !important;
}

/* ==========================================================================
   Cards & Containers (Harmonized with Home Page style)
   ========================================================================== */
[data-theme="dark"] .modular-card,
[data-theme="dark"] .workflow-node-card,
[data-theme="dark"] .industry-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .capability-box,
[data-theme="dark"] .workflow-step-card,
[data-theme="dark"] .platform-group-card,
[data-theme="dark"] .impl-step-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .platform-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .cert-card,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .audit-trail-card {
  background: rgba(13, 22, 48, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .modular-card:hover,
[data-theme="dark"] .workflow-node-card:hover,
[data-theme="dark"] .industry-card:hover,
[data-theme="dark"] .value-card:hover,
[data-theme="dark"] .capability-box:hover,
[data-theme="dark"] .workflow-step-card:hover,
[data-theme="dark"] .platform-group-card:hover,
[data-theme="dark"] .impl-step-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .platform-card:hover {
  background: rgba(18, 30, 66, 0.95) !important;
  border-color: rgba(4, 99, 212, 0.4) !important;
  box-shadow: 0 16px 36px rgba(4, 99, 212, 0.22) !important;
}

/* Card Titles */
[data-theme="dark"] .modular-card-title,
[data-theme="dark"] .industry-name,
[data-theme="dark"] .value-card-title,
[data-theme="dark"] .capability-box-title,
[data-theme="dark"] .workflow-step-title,
[data-theme="dark"] .platform-group-title,
[data-theme="dark"] .impl-step-title,
[data-theme="dark"] .workflow-step-name,
[data-theme="dark"] .accordion-trigger {
  color: #FFFFFF !important;
}

/* Card Descriptions */
[data-theme="dark"] .modular-card-desc,
[data-theme="dark"] .industry-challenge,
[data-theme="dark"] .value-card-desc,
[data-theme="dark"] .capability-box-desc,
[data-theme="dark"] .workflow-step-desc,
[data-theme="dark"] .platform-group-desc,
[data-theme="dark"] .impl-step-desc,
[data-theme="dark"] .workflow-step-text,
[data-theme="dark"] .accordion-content {
  color: #94A3B8 !important;
}

/* Card Links */
[data-theme="dark"] .industry-link-text,
[data-theme="dark"] .modular-card-link,
[data-theme="dark"] .card-link {
  color: #38BDF8 !important;
}

/* Icon Boxes */
[data-theme="dark"] .modular-icon-box,
[data-theme="dark"] .industry-icon-box,
[data-theme="dark"] .value-icon-box,
[data-theme="dark"] .platform-icon-box {
  background: rgba(4, 99, 212, 0.16) !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .capability-box-title svg {
  color: #38BDF8 !important;
}

[data-theme="dark"] .capability-box-why {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #94A3B8 !important;
  border-inline-start: 3px solid #38BDF8 !important;
}

/* Step Badges */
[data-theme="dark"] .workflow-step-badge,
[data-theme="dark"] .workflow-step-badge-num {
  background: rgba(4, 99, 212, 0.2) !important;
  border-color: #38BDF8 !important;
  color: #38BDF8 !important;
}

/* Sections */
[data-theme="dark"] .section-subtle {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .section-muted {
  background: rgba(11, 19, 43, 0.5) !important;
}

[data-theme="dark"] .platform-detail-section {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .modular-cards-section {
  background: rgba(4, 9, 20, 0.6) !important;
}

[data-theme="dark"] .workflow-radbin-section {
  background: transparent !important;
}

/* Badges */
[data-theme="dark"] .badge-category {
  background: rgba(164, 216, 122, 0.12) !important;
  border: 1px solid rgba(164, 216, 122, 0.3) !important;
  color: #A4D87A !important;
}

[data-theme="dark"] .badge-tag {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
}

/* ==========================================================================
   Forms & Controls in Dark Mode
   ========================================================================== */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] select option {
  background: #0B132B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: #0463D4 !important;
  box-shadow: 0 0 0 3px rgba(4, 99, 212, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
  color: #CBD5E1 !important;
}

/* ==========================================================================
   Inline Style Fallbacks & Hardcoded Containers
   Ensures containers with inline style attributes are properly dark styled
   ========================================================================== */
[data-theme="dark"] [style*="background: var(--color-white)"],
[data-theme="dark"] [style*="background:var(--color-white)"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
  background: rgba(13, 22, 48, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] [style*="color: var(--color-navy)"],
[data-theme="dark"] [style*="color:var(--color-navy)"],
[data-theme="dark"] [style*="color: #01092D"],
[data-theme="dark"] [style*="color: #022C7B"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] [style*="background: var(--color-light-muted-green)"],
[data-theme="dark"] [style*="background:var(--color-light-muted-green)"] {
  background: rgba(164, 216, 122, 0.12) !important;
  border-color: rgba(164, 216, 122, 0.3) !important;
}

[data-theme="dark"] [style*="background: var(--color-bg-subtle)"],
[data-theme="dark"] [style*="background:var(--color-bg-subtle)"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   Secondary Buttons & Links in Dark Mode
   ========================================================================== */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-radbin-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-radbin-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38BDF8 !important;
  border-color: rgba(4, 99, 212, 0.4) !important;
}

/* ==========================================================================
   Home Page Specific Elements in Dark Mode
   ========================================================================== */
[data-theme="dark"] .dashboard-browser-frame {
  background: #0D1630 !important;
  border-color: rgba(4, 99, 212, 0.3) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 8px 24px -4px rgba(4, 99, 212, 0.25) !important;
}

[data-theme="dark"] .browser-header-bar {
  background: #080E21 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .browser-body {
  background: #0D1630 !important;
}

[data-theme="dark"] .browser-address {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .live-kpi-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .live-kpi-card:hover {
  background: rgba(4, 99, 212, 0.12) !important;
  border-color: rgba(4, 99, 212, 0.4) !important;
}

[data-theme="dark"] .live-kpi-label {
  color: #94A3B8 !important;
}

[data-theme="dark"] .live-kpi-val {
  color: #FFFFFF !important;
}

[data-theme="dark"] .floating-badge,
[data-theme="dark"] .badge-speed-showcase,
[data-theme="dark"] .badge-bottom-left {
  background: rgba(13, 22, 48, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(4, 99, 212, 0.15) !important;
}

[data-theme="dark"] .badge-title {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .badge-subtitle {
  color: #94A3B8 !important;
}

[data-theme="dark"] .badge-score-value {
  color: #FFFFFF !important;
}

[data-theme="dark"] .badge-circle-metric {
  background: rgba(164, 216, 122, 0.15) !important;
  border-color: #84D162 !important;
  color: #A4D87A !important;
}

[data-theme="dark"] .chart-container-wrap {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .chart-title-tag {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .chart-filter-tabs {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .filter-tab-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .filter-tab-btn:hover {
  color: #FFFFFF !important;
}

[data-theme="dark"] .filter-tab-btn.is-active {
  background: #0463D4 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .interactive-chart-svg line {
  stroke: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .interactive-chart-svg text {
  fill: #64748B !important;
}

[data-theme="dark"] .chart-axis-labels {
  color: #64748B !important;
}

[data-theme="dark"] .workflow-track-grid::before {
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================================
   Final CTA Section in Dark Mode
   ========================================================================== */
[data-theme="dark"] .final-cta-card {
  background: linear-gradient(135deg, #060F2A 0%, #0A1940 60%, #050D22 100%) !important;
  border: 1px solid rgba(4, 99, 212, 0.3) !important;
}

[data-theme="dark"] .final-cta-desc {
  color: #CBD5E1 !important;
}

/* ==========================================================================
   Footer in Dark Mode
   ========================================================================== */
[data-theme="dark"] .site-footer {
  background: #03060E !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .footer-brand p,
[data-theme="dark"] .footer-links a {
  color: #94A3B8 !important;
}

[data-theme="dark"] .footer-links a:hover {
  color: #38BDF8 !important;
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #64748B !important;
}

/* ==========================================================================
   Scroll-to-Top Button with Progress Ring
   ========================================================================== */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  inset-inline-end: 32px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.07);
}

.scroll-top-btn:active {
  transform: translateY(0) scale(0.95);
}

.scroll-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.scroll-ring-track {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(4, 99, 212, 0.12);
  stroke-width: 3;
  filter: drop-shadow(0 4px 12px rgba(4, 99, 212, 0.18));
}

.scroll-ring-fill {
  fill: none;
  stroke: #0463D4;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 131.95;
  stroke-dashoffset: 131.95;
  transition: stroke-dashoffset 0.12s linear;
}

.scroll-arrow-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #0463D4;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.scroll-top-btn:hover .scroll-arrow-icon {
  transform: translateY(-2px);
}

[data-theme="dark"] .scroll-ring-track {
  fill: rgba(13, 22, 48, 0.95);
  stroke: rgba(4, 99, 212, 0.25);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .scroll-ring-fill {
  stroke: #38BDF8;
}

[data-theme="dark"] .scroll-arrow-icon {
  color: #38BDF8;
}

@keyframes ringComplete {
  0%, 100% { transform: rotate(-90deg) scale(1); }
  50%       { transform: rotate(-90deg) scale(1.06); }
}

.scroll-top-btn.is-complete .scroll-progress-ring {
  animation: ringComplete 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  .scroll-top-btn {
    width: 46px;
    height: 46px;
    bottom: 20px;
    inset-inline-end: 16px;
  }

  .scroll-arrow-icon {
    width: 17px;
    height: 17px;
  }
}