/* ============================================================
   SENTRY WEB — Public marketing site theme
   Loaded via web css partial after sentry-theme.css
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
html, body {
    background: #0A0A0C !important;
    color: #E8E8F0 !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
}

/* ── Web navbar ───────────────────────────────────────────── */
.header-section {
    background: rgba(10,10,12,0.95) !important;
    border-bottom: 1px solid #2A2A38 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}
.navbar { padding: 14px 0 !important; }
.header-logo img {
    height: 36px !important;
    filter: brightness(1.05) !important;
}
.navbar-nav .nav-link {
    color: #8A8A9E !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #F2A93B !important;
    background: rgba(242,169,59,0.08) !important;
}
.get-app-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #FFB627, #F2A93B) !important;
    color: #0A0A0C !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(242,169,59,0.3) !important;
    transition: all 0.2s !important;
}
.get-app-btn:hover {
    box-shadow: 0 6px 22px rgba(242,169,59,0.45) !important;
    transform: translateY(-1px) !important;
    color: #0A0A0C !important;
}
.get-app-btn svg path { fill: #0A0A0C !important; }

/* Desktop dropdown */
.menu-dropdown { position: relative !important; }
.menu-dropdown .dropdown-content {
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1C1C26 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important;
    min-width: 200px !important;
    padding: 8px !important;
    list-style: none !important;
    z-index: 9999 !important;
}
.menu-dropdown:hover .dropdown-content { display: block; }
.menu-dropdown .dropdown-content .dropdown-item {
    color: #8A8A9E !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.15s !important;
    text-decoration: none !important;
}
.menu-dropdown .dropdown-content .dropdown-item:hover {
    background: rgba(242,169,59,0.08) !important;
    color: #F2A93B !important;
}
.menu-dropdown .dropdown-content .dropdown-item span {
    color: #5A5A6E !important;
    font-size: 10px !important;
}
.nav-link .arrow { font-size: 10px !important; color: #5A5A6E !important; margin-left: 4px !important; }

/* Mobile off-canvas */
.mobile-menu {
    background: #14141A !important;
    border-right: 1px solid #2A2A38 !important;
}
.home-offcanvas-header {
    border-bottom: 1px solid #2A2A38 !important;
    padding: 16px 20px !important;
}
.mobile-menu .accordion-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #2A2A38 !important;
}
.mobile-menu .accordion-button {
    background: transparent !important;
    color: #8A8A9E !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
    border: none !important;
}
.mobile-menu .accordion-button:not(.collapsed),
.mobile-menu .accordion-button:hover { color: #F2A93B !important; }
.mobile-menu .accordion-body { background: #1C1C26 !important; }
.mobile-menu .accordion-body li a {
    color: #5A5A6E !important;
    font-size: 13px !important;
    display: block !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.mobile-menu .accordion-body li a:hover { color: #F2A93B !important; }
.mobile-menu .without-sub-menu::after { display: none !important; }
.navbar-toggler {
    border: 1px solid #2A2A38 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    color: #8A8A9E !important;
}

/* ── Hero section ─────────────────────────────────────────── */
.hero-section, .home-hero {
    background: #0A0A0C !important;
    position: relative !important;
    overflow: hidden !important;
}
.hero-section::before, .home-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(242,169,59,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.hero-section h1, .home-hero h1, .hero-title {
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-weight: 800 !important;
    color: #E8E8F0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}
.hero-section h1 span, .hero-title em, .hero-title strong {
    color: #F2A93B !important;
    font-style: normal !important;
}
.hero-section p, .hero-subtitle {
    color: #8A8A9E !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Hero buttons */
.hero-btn-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-primary-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    background: linear-gradient(135deg, #FFB627, #F2A93B) !important;
    color: #0A0A0C !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 15px !important; font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(242,169,59,0.35) !important;
    transition: all 0.2s !important;
}
.hero-primary-btn:hover {
    box-shadow: 0 8px 28px rgba(242,169,59,0.5) !important;
    transform: translateY(-2px) !important;
    color: #0A0A0C !important;
}
.hero-secondary-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    background: transparent !important;
    border: 1px solid #2A2A38 !important;
    color: #8A8A9E !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 15px !important; font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.hero-secondary-btn:hover {
    border-color: #F2A93B !important;
    color: #F2A93B !important;
    background: rgba(242,169,59,0.06) !important;
}

/* ── Section structure ────────────────────────────────────── */
.section-title {
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-weight: 700 !important;
    color: #E8E8F0 !important;
    letter-spacing: -0.02em !important;
}
.section-subtitle {
    color: #8A8A9E !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(242,169,59,0.1);
    border: 1px solid rgba(242,169,59,0.3);
    color: #F2A93B;
    border-radius: 999px;
    padding: 4px 14px;
    font-family: 'JetBrainsMono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
section, .web-section { background: #0A0A0C !important; }
section:nth-child(even) { background: #14141A !important; }

/* ── Feature cards ────────────────────────────────────────── */
.feature-card, .feature-item, .interface-card {
    background: #1E1E28 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    transition: all 0.2s ease !important;
}
.feature-card:hover, .feature-item:hover, .interface-card:hover {
    border-color: rgba(242,169,59,0.4) !important;
    box-shadow: 0 8px 32px rgba(242,169,59,0.12) !important;
    transform: translateY(-3px) !important;
}
.feature-card h5, .feature-item h5 {
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-weight: 600 !important;
    color: #E8E8F0 !important;
}
.feature-card p, .feature-item p {
    color: #8A8A9E !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.feature-icon {
    width: 44px !important; height: 44px !important;
    background: rgba(242,169,59,0.12) !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-bottom: 14px !important;
}
.feature-icon svg, .feature-icon img { filter: brightness(0) invert(0.7) sepia(1) hue-rotate(15deg) saturate(3) !important; }

/* ── Pricing section ──────────────────────────────────────── */
.pricing-section { background: #0A0A0C !important; }
.pricing-card {
    background: #1E1E28 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.pricing-card:hover {
    border-color: rgba(242,169,59,0.4) !important;
    box-shadow: 0 12px 40px rgba(242,169,59,0.15) !important;
    transform: translateY(-4px) !important;
}
.pricing-card.featured-plan {
    border-color: #F2A93B !important;
    box-shadow: 0 0 40px rgba(242,169,59,0.2) !important;
    background: linear-gradient(135deg, #1E1E28, rgba(242,169,59,0.04)) !important;
}
.pricing-card.featured-plan::before {
    content: 'POPULAR';
    position: absolute; top: 16px; right: 16px;
    background: #F2A93B; color: #0A0A0C;
    font-family: 'JetBrainsMono', monospace;
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    padding: 3px 10px; border-radius: 4px;
}
.plan-name { font-family: 'SpaceGrotesk', sans-serif !important; font-weight: 700 !important; color: #E8E8F0 !important; font-size: 18px !important; }
.plan-price { font-family: 'JetBrainsMono', monospace !important; font-size: 36px !important; font-weight: 700 !important; color: #F2A93B !important; }
.plan-price sup, .plan-price sub { font-size: 16px !important; color: #8A8A9E !important; }
.plan-features li {
    color: #8A8A9E !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(42,42,56,0.5) !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
.plan-features li:last-child { border: none !important; }
.plan-features li .check { color: #2ECC71 !important; font-size: 12px !important; }
.plan-btn {
    width: 100% !important;
    padding: 11px !important;
    border-radius: 9px !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
    margin-top: 20px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    display: block !important; text-align: center !important;
}
.plan-btn-primary {
    background: linear-gradient(135deg, #FFB627, #F2A93B) !important;
    color: #0A0A0C !important; border: none !important;
    box-shadow: 0 4px 14px rgba(242,169,59,0.3) !important;
}
.plan-btn-primary:hover { box-shadow: 0 6px 22px rgba(242,169,59,0.45) !important; transform: translateY(-1px) !important; }
.plan-btn-secondary {
    background: transparent !important;
    border: 1px solid #2A2A38 !important;
    color: #8A8A9E !important;
}
.plan-btn-secondary:hover { border-color: #F2A93B !important; color: #F2A93B !important; }

/* ── Testimonials ─────────────────────────────────────────── */
.testimonial-card {
    background: #1E1E28 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 14px !important;
    padding: 24px !important;
}
.testimonial-text { color: #E8E8F0 !important; font-size: 15px !important; line-height: 1.7 !important; font-style: italic !important; }
.testimonial-author { color: #F2A93B !important; font-weight: 600 !important; font-size: 14px !important; }
.testimonial-role { color: #5A5A6E !important; font-size: 12px !important; }

/* ── Stats / counter section ─────────────────────────────── */
.stats-section { background: #14141A !important; }
.stat-item { text-align: center !important; }
.stat-number { font-family: 'JetBrainsMono', monospace !important; font-size: 40px !important; font-weight: 700 !important; color: #F2A93B !important; }
.stat-label { color: #8A8A9E !important; font-size: 14px !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
.accordion-item { background: #1E1E28 !important; border: 1px solid #2A2A38 !important; border-radius: 10px !important; margin-bottom: 8px !important; overflow: hidden !important; }
.accordion-button {
    background: #1E1E28 !important;
    color: #E8E8F0 !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 15px !important; font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
}
.accordion-button:not(.collapsed) { color: #F2A93B !important; background: rgba(242,169,59,0.06) !important; }
.accordion-button::after { filter: invert(1) !important; }
.accordion-body { color: #8A8A9E !important; font-size: 14px !important; line-height: 1.7 !important; background: #1E1E28 !important; }
.accordion-button.without-sub-menu.active { color: #F2A93B !important; }

/* ── Contact form ─────────────────────────────────────────── */
.contact-section { background: #0A0A0C !important; }
.contact-form .form-control {
    background: #1C1C26 !important;
    border: 1px solid #2A2A38 !important;
    color: #E8E8F0 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
}
.contact-form .form-control:focus {
    border-color: #F2A93B !important;
    box-shadow: 0 0 0 3px rgba(242,169,59,0.18) !important;
}
.contact-submit-btn {
    background: linear-gradient(135deg, #FFB627, #F2A93B) !important;
    color: #0A0A0C !important; border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-size: 15px !important; font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(242,169,59,0.35) !important;
    transition: all 0.2s !important;
}
.contact-submit-btn:hover { box-shadow: 0 8px 28px rgba(242,169,59,0.5) !important; transform: translateY(-2px) !important; }

/* ── Blog cards ───────────────────────────────────────────── */
.blog-card {
    background: #1E1E28 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: all 0.2s !important;
}
.blog-card:hover {
    border-color: rgba(242,169,59,0.4) !important;
    box-shadow: 0 8px 32px rgba(242,169,59,0.12) !important;
    transform: translateY(-3px) !important;
}
.blog-card img { transition: transform 0.3s !important; }
.blog-card:hover img { transform: scale(1.04) !important; }
.blog-card-body { padding: 16px 20px !important; }
.blog-card-category {
    font-family: 'JetBrainsMono', monospace !important;
    font-size: 10px !important; font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    color: #F2A93B !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
.blog-card-title { color: #E8E8F0 !important; font-weight: 600 !important; font-size: 16px !important; }
.blog-card-title a { color: #E8E8F0 !important; text-decoration: none !important; transition: color 0.2s !important; }
.blog-card-title a:hover { color: #F2A93B !important; }
.blog-card-date { color: #5A5A6E !important; font-size: 12px !important; font-family: 'JetBrainsMono', monospace !important; }
.blog-card-excerpt { color: #8A8A9E !important; font-size: 14px !important; line-height: 1.6 !important; }

/* ── About section ────────────────────────────────────────── */
.about-section { background: #14141A !important; }
.about-section h2, .about-section h3 {
    font-family: 'SpaceGrotesk', sans-serif !important;
    color: #E8E8F0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.about-section p { color: #8A8A9E !important; line-height: 1.7 !important; }
.about-section ul li { color: #8A8A9E !important; font-size: 14px !important; padding: 4px 0 !important; }
.about-section ul li::marker { color: #F2A93B !important; }

/* ── Policy / Terms pages ──────────────────────────────────── */
.policy-content, .terms-content {
    background: #14141A !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
.policy-content h2, .terms-content h2 {
    font-family: 'SpaceGrotesk', sans-serif !important;
    color: #F2A93B !important;
    font-size: 18px !important; font-weight: 700 !important;
    margin-top: 24px !important; margin-bottom: 12px !important;
}
.policy-content p, .terms-content p { color: #8A8A9E !important; line-height: 1.8 !important; }
.policy-content ul li, .terms-content ul li { color: #8A8A9E !important; }
.policy-content a, .terms-content a { color: #F2A93B !important; }

/* ── Footer ───────────────────────────────────────────────── */
.footer-section {
    background: #0A0A0C !important;
    border-top: 1px solid #2A2A38 !important;
    padding-top: 40px !important;
}
.footer-logo { height: 36px !important; filter: brightness(1.05) !important; }
.footer-details { color: #5A5A6E !important; font-size: 14px !important; line-height: 1.7 !important; max-width: 300px !important; }
.footer-title { font-family: 'SpaceGrotesk', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #E8E8F0 !important; }
.footer-section ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-section ul li a {
    color: #5A5A6E !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    display: inline-block !important;
}
.footer-section ul li a:hover { color: #F2A93B !important; }
.social-link { display: flex !important; gap: 10px !important; margin-top: 16px !important; padding: 0 !important; }
.social-link li { list-style: none !important; }
.social-link li a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important;
    background: #1C1C26 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}
.social-link li a img { width: 16px !important; height: 16px !important; filter: brightness(0.5) !important; transition: filter 0.2s !important; }
.social-link li a:hover {
    border-color: #F2A93B !important;
    box-shadow: 0 0 10px rgba(242,169,59,0.2) !important;
}
.social-link li a:hover img { filter: brightness(1) sepia(1) hue-rotate(15deg) saturate(3) !important; }
.custom-clr-white { border-color: #2A2A38 !important; opacity: 1 !important; margin: 24px 0 !important; }
.footer-section .text-white { color: #5A5A6E !important; }

/* ── AOS overrides ────────────────────────────────────────── */
[data-aos] { transition-duration: 500ms !important; }

/* ── Swiper (web) ─────────────────────────────────────────── */
.swiper-button-next, .swiper-button-prev { color: #F2A93B !important; }
.swiper-pagination-bullet { background: #2A2A38 !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #F2A93B !important; box-shadow: 0 0 8px #F2A93B !important; }

/* ── Section headings via styles.css (override) ──────────── */
.section-main-title, .section-title-wrapper h2, .section-content-title {
    color: #E8E8F0 !important;
    font-family: 'SpaceGrotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.section-sub-title, .section-description {
    color: #8A8A9E !important;
    font-size: 15px !important;
}

/* ── Scanline hero overlay ────────────────────────────────── */
.hero-scanlines {
    position: relative;
}
.hero-scanlines::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(242,169,59,0.015) 3px, rgba(242,169,59,0.015) 4px
    );
    pointer-events: none;
}

/* ── Payments page ────────────────────────────────────────── */
.payment-gateway-section { background: #0A0A0C !important; }
.payment-item {
    background: #1E1E28 !important;
    border: 1px solid #2A2A38 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.2s !important;
}
.payment-item:hover { border-color: rgba(242,169,59,0.4) !important; }

/* ── Slick slider ─────────────────────────────────────────── */
.slick-dots li button:before { color: #5A5A6E !important; }
.slick-dots li.slick-active button:before { color: #F2A93B !important; }

/* ── Web modal (signup) ───────────────────────────────────── */
#registration-modal .modal-content { background: #1E1E28 !important; }
#registration-modal .modal-header { background: #14141A !important; border-color: #2A2A38 !important; }
#registration-modal label { color: #8A8A9E !important; }
#registration-modal .form-control { background: #1C1C26 !important; border-color: #2A2A38 !important; color: #E8E8F0 !important; }
#registration-modal .form-control:focus { border-color: #F2A93B !important; box-shadow: 0 0 0 3px rgba(242,169,59,0.18) !important; }
#registration-modal .btn-primary {
    background: linear-gradient(135deg, #FFB627, #F2A93B) !important;
    color: #0A0A0C !important; border: none !important;
}

/* ── Utility ──────────────────────────────────────────────── */
.text-primary-web { color: #F2A93B !important; }
.bg-primary-web { background: #F2A93B !important; color: #0A0A0C !important; }
.gap-60 { gap: 60px !important; }