:root {
    --primary: #00E599;
    --primary-hover: #00C782;
    --primary-glow: rgba(0, 229, 153, 0.15);
    --secondary: #7928CA;
    --accent: #0070F3;
    --bg-main: #000000;
    --bg-surface: #0A0A0A;
    --bg-surface-elevated: #111111;
    --bg-surface-card: #141414;
    --bg-surface-card-hover: #1A1A1A;
    --text-primary: #EDEDED;
    --text-secondary: #A1A1A1;
    --text-muted: #666666;
    --border-subtle: #222222;
    --border-active: #333333;
    --border-highlight: #444444;
    --border-glow: rgba(0, 229, 153, 0.4);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #000000;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.font-mono {
    font-family: var(--font-mono);
}

.text-muted {
    color: #A1A1A1 !important;
}

.hero-radial-glow {
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 229, 153, 0.15), rgba(255, 255, 255, 0));
}

.card-border-glow:hover {
    border-color: rgba(0, 229, 153, 0.4);
    box-shadow: 0 0 25px rgba(0, 229, 153, 0.12);
}

/* ===== header ===== */
.site-header-nav {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-nav-mobile.active {
    display: block !important;
}

/* ===== hero ===== */
.refinity-hero-section input::placeholder,
.refinity-hero-section textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

.refinity-hero-section input:focus,
.refinity-hero-section select:focus,
.refinity-hero-section textarea:focus {
    background-color: #FFFFFF;
}

.refinity-hero-section .js-consultation-modal {
    transition: opacity 0.2s ease-in-out;
}

/* ===== problem-solution ===== */
.problem-solution-section .problem-card {
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.problem-solution-section .problem-card:hover {
    border-color: rgba(238, 0, 0, 0.5);
}

.problem-solution-section .solution-card {
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.problem-solution-section .solution-card:hover {
    border-color: #00E599;
    box-shadow: 0 0 30px rgba(0, 229, 153, 0.15);
}

/* ===== backup-systems-grid ===== */
.backup-systems-section {
    position: relative;
    background-color: #000000;
}

.backup-systems-section .sys-card {
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.backup-systems-section .sys-card:hover {
    border-color: #333333;
    background-color: #111111;
    box-shadow: 0 0 25px rgba(0, 229, 153, 0.08);
}

/* Slightly larger copy in homepage cards for easier scanning. */
.home-page :is(.problem-card, .solution-card, .sys-card, .install-card, .metric-card, .reviews-block-card) p {
    font-size: 0.875rem !important;
}

.home-page :is(.problem-card, .solution-card, .sys-card, .install-card, .metric-card, .reviews-block-card) .text-xs {
    font-size: 0.8125rem !important;
}

.home-page :is(.problem-card, .solution-card, .sys-card, .install-card, .metric-card, .reviews-block-card) .text-\[11px\] {
    font-size: 0.75rem !important;
}

/* ===== install-services-grid ===== */
.install-services-grid-section .install-card {
    min-height: 100%;
}

.install-services-grid-section a {
    text-decoration: none;
}

/* ===== numbers ===== */
.numbers-block {
    position: relative;
}

.numbers-block .metric-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.numbers-block .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 229, 153, 0.08);
}

/* ===== what-we-need ===== */
.what-we-need-section input[type='checkbox'] {
    accent-color: #00E599;
}

.what-we-need-section .js-readiness-item:checked+span {
    color: #00E599;
}

/* ===== reviews ===== */
.reviews-block {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.reviews-block .reviews-block-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.reviews-block .reviews-block-card:hover {
    box-shadow: 0 0 25px rgba(0, 229, 153, 0.08);
}

/* ===== footer ===== */
.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.site-footer a {
    text-decoration: none;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== PAGE: backup-systems ===== */
.catalog-section .active-filter {
  border-color: #00E599 !important;
  color: #EDEDED !important;
  background-color: #141414 !important;
}
.catalog-section input::placeholder,
.catalog-section textarea::placeholder {
  color: #666666 !important;
  opacity: 1;
}

/* ===== PAGE: install-services ===== */
.install-services-section input::placeholder,
.install-services-section textarea::placeholder {
  color: #666666;
  opacity: 1;
}

.install-services-section select option {
  background-color: #0A0A0A;
  color: #EDEDED;
}

.install-services-section .js-filter-btn.active {
  border-color: #00E599;
  background-color: rgba(0, 229, 153, 0.15);
  color: #00E599;
}

/* ===== PAGE: our-work ===== */
.portfolio-section .active-filter { border-color: #00E599 !important; background-color: rgba(0, 229, 153, 0.12) !important; text-color: #00E599 !important; color: #00E599 !important; } .portfolio-section .js-project-card { transition: opacity 0.25s ease, transform 0.25s ease; }

/* ===== PAGE: about ===== */
.refinity-about-section { box-sizing: border-box; font-family: 'Inter', sans-serif; }
.refinity-about-section code, .refinity-about-section .font-mono { font-family: 'JetBrains Mono', monospace; }
.refinity-about-section .js-pipeline-btn.active { border-color: #00E599; background-color: #141414; color: #00E599; }
.refinity-about-section .js-pipeline-panel.hidden { display: none; }

/* ===== PAGE: contact ===== */
.contact-section .contact-input::placeholder {
  color: #666666;
  opacity: 1;
}
.contact-section select.contact-input option {
  background-color: #111111;
  color: #EDEDED;
}
.contact-section .contact-input:focus {
  box-shadow: 0 0 0 1px #00E599, 0 0 15px rgba(0, 229, 153, 0.15);
}

/* ===== PAGE: privacy ===== */
.privacy-policy-section {
  background-color: #000000;
  color: #EDEDED;
}

.privacy-policy-section a {
  transition: all 0.2s ease-in-out;
}

.privacy-policy-section .js-toc-link.active {
  color: #00E599;
  background-color: #141414;
  border-left: 2px solid #00E599;
  padding-left: 0.85rem;
}

.privacy-policy-section article {
  scroll-margin-top: 6rem;
}

/* ===== PAGE: terms ===== */
.refinity-terms-section { font-family: 'Inter', sans-serif; }
.refinity-terms-section h1, .refinity-terms-section h2, .refinity-terms-section h3 { font-family: 'Inter', sans-serif; }
.refinity-terms-section pre, .refinity-terms-section code { font-family: 'JetBrains Mono', monospace; }
.refinity-terms-section .js-terms-nav-btn.active { background-color: #141414; color: #00E599; border-color: #333333; }
.refinity-terms-section .js-terms-nav-btn.active i { opacity: 1; color: #00E599; }
.refinity-terms-section .js-terms-section { scroll-margin-top: 2rem; }

/* ===== PAGE: disclaimer ===== */
.refinity-disclaimer-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.refinity-disclaimer-content code,
.refinity-disclaimer-content .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.refinity-disclaimer-content a {
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.refinity-disclaimer-content nav a:hover {
  padding-left: 0.85rem;
}

.comment-avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.main-comment-card {
    position: relative;
    background-color: #0A0A0A;
    border: 1px solid #222222;
}

.main-comment-card:hover {
    box-shadow: 0 0 25px rgba(0, 229, 153, 0.08);
}

.comment-role-badge {
    letter-spacing: 0.02em;
}

.comment-action-btn:focus {
    outline: 1px solid #00E599;
    outline-offset: 2px;
}

.reply-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.reply-comment-card {
    position: relative;
}

.reply-comment-card:hover {
    border-left-color: #00E599;
}

.reply-comment-card .comment-action-btn {
    color: #888888;
}

.reply-comment-card .comment-action-btn:hover {
    color: #EDEDED;
}


/* ===== PAGE TEMPLATE: backup-systems ===== */
.site-header-nav {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-nav-mobile.active {
    display: block !important;
}

.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.site-footer a {
    text-decoration: none;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-page-wrapper input::placeholder,
.detail-page-wrapper textarea::placeholder {
    color: #666666;
    opacity: 1;
}

.detail-page-wrapper input:focus,
.detail-page-wrapper select:focus,
.detail-page-wrapper textarea:focus {
    border-color: #00E599;
    background-color: #141414;
}

.detail-page-wrapper select option {
    background-color: #0A0A0A;
    color: #EDEDED;
}

.detail-page-wrapper .js-like-btn.liked {
    color: #00E599;
}

.detail-page-wrapper .js-like-btn.liked i {
    font-weight: 900;
}

/* Detail articles: improve body-copy size and contrast throughout. */
.detail-page-wrapper p,
.detail-page-wrapper li {
    color: #D0D0D0 !important;
    font-size: 0.9375rem !important;
}

.detail-page-wrapper .text-\[\#666666\] {
    color: #B8B8B8 !important;
}

.detail-page-wrapper .text-\[11px\] {
    font-size: 0.8125rem !important;
}

.detail-page-wrapper .text-\[13px\] {
    font-size: 0.9375rem !important;
}

.engineering-standards-section .text-\[\#222222\] {
    color: #A1A1A1 !important;
}

/* ===== PAGE TEMPLATE: install-services ===== */
.site-header-nav {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-nav-mobile.active {
    display: block !important;
}

.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.site-footer a {
    text-decoration: none;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-service-section input::placeholder,
.detail-service-section textarea::placeholder,
.detail-comments-section input::placeholder,
.detail-comments-section textarea::placeholder {
    color: #666666;
    opacity: 1;
}

.detail-service-section .detail-dynamic-content h1,
.detail-service-section .detail-dynamic-content h2,
.detail-service-section .detail-dynamic-content h3,
.detail-service-section .detail-dynamic-content h4 {
    color: #EDEDED;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.detail-service-section .detail-dynamic-content p {
    color: #D0D0D0;
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.detail-service-section .detail-dynamic-content ul {
    list-style: disc;
    padding-left: 1.25rem;
    color: #D0D0D0;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.detail-service-section .detail-dynamic-content li {
    margin-bottom: 0.5rem;
}

.detail-comments-section .comment-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.detail-comments-section .reply-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* ===== PAGE TEMPLATE: our-work ===== */
.site-header-nav {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-nav-mobile.active {
    display: block !important;
}

.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.site-footer a {
    text-decoration: none;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.refinity-work-detail input::placeholder,
.refinity-work-detail textarea::placeholder {
    color: #666666;
    opacity: 1;
}

.refinity-work-detail .js-like-btn.liked {
    color: #00E599;
}

.refinity-work-detail .js-like-btn.liked i {
    font-weight: 900;
}

.refinity-work-detail p,
.refinity-work-detail li {
    color: #D0D0D0 !important;
    font-size: 0.9375rem !important;
}