/* ==========================================================================
   MAIN PAGE STYLES (UPDATED: Spacing, Text Sizes, Shadows)
   ========================================================================== */

/* --- GLOBAL RESET --- */
body {
  margin: 0; padding: 0; width: 100%; 
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background-color: #020617;
  color: #e5e7eb;
}

.page {
  min-height: 100vh;
  padding-top: var(--dw-header-offset, 80px);
  background: radial-gradient(circle at top,#0b1120 0,#020617 55%,#000000 100%);
}

.container, .section-inner, .service-videos-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; 
  padding: 0 20px; 
  box-sizing: border-box; 
}

/* --- HERO SECTION --- */
#hero {
  padding: 32px 0 60px 0; 
  background: radial-gradient(800px 520px at 100% 100%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0.88) 26%, rgba(148,197,255,0.32) 52%, rgba(15,23,42,0.0) 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 32px; align-items: center; }
.hero-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #a5b4fc; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.hero-kicker span.bullet { width: 8px; height: 8px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #bbf7d0, #22c55e 60%, #16a34a 100%); box-shadow: 0 0 12px rgba(34,197,94,.9); }
.hero-title { font-size: clamp(30px, 4.1vw, 40px); font-weight: 750; letter-spacing: .03em; margin-bottom: 14px; color: #f9fafb; }
.hero-title span.accent { background: linear-gradient(120deg, #22d3ee, #38bdf8, #818cf8); -webkit-background-clip: text; color: transparent; }
/* Accent gradient for headings across the site */
.accent { background: linear-gradient(120deg, #22d3ee, #38bdf8, #818cf8); -webkit-background-clip: text; color: transparent; }
.hero-sub { font-size: 15.5px; line-height: 1.7; color: #cbd5f5; max-width: 480px; margin-bottom: 18px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; font-size: 12px; }
.hero-badges span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.5); background: radial-gradient(circle at top, rgba(148,163,184,.25), rgba(15,23,42,.9)); color: #e5e7eb; display: inline-flex; align-items: center; gap: 6px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.hero-secondary { font-size: 12.5px; color: #9ca3af; }
.hero-card { border-radius: 18px; background: radial-gradient(circle at top left, #0b1120, #020617 55%, #000 100%); border: 1px solid rgba(148,163,184,.35); padding: 18px; box-shadow: 0 16px 40px rgba(15,23,42,0.18); }
.hero-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .16em; color: #a5b4fc; margin-bottom: 10px; }
.hero-card ul { list-style: none; padding: 0; font-size: 13px; color: #e5e7eb; line-height: 1.7; }
.hero-card li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.hero-dot { width: 6px; height: 6px; border-radius: 999px; background: #38bdf8; margin-top: 6px; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; background: linear-gradient(135deg, #f97316, #ea580c); color: #ffffff; box-shadow: 0 12px 30px rgba(248,113,22,.45); text-decoration: none; white-space: nowrap; transition: filter 0.2s; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-emergency-pulse { animation: pulse-red-glow 2s infinite; background: linear-gradient(135deg, #ef4444, #b91c1c) !important; border: 1px solid #f87171 !important; }
@keyframes pulse-red-glow { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1); } }

.hero-emergency-link { color: #dc2626; font-weight: 800; text-decoration: underline; }
.hero-emergency-link:hover { color: #b91c1c; }

/* Keep hero CTAs aligned (Call + Quote) */
.hero-actions .btn-cta-blue { padding: 9px 16px; font-size: 13px; box-shadow: 0 12px 30px rgba(14,165,233,.35); }

/* --- LIGHT SECTIONS --- */
#what-we-do, .service-areas, #faq, #tips { background-color: #ffffff; color: #0f172a; padding: 60px 0; }
#what-we-do h2, .service-areas h2, #faq h2, #tips h2 { color: #0f172a; font-weight: 700; }
#what-we-do p, .service-areas p, #faq p, #tips p { color: #334155; }

/* Services */
#what-we-do { border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.wwd-header { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 26px; }
.wwd-kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #0369a1; margin-bottom: 8px; }
.wwd-title { font-size: clamp(26px, 3vw, 32px); margin-bottom: 10px; }

/* Змінено розмір шрифту на маленький */
.wwd-meta { font-size: 12px; color: #64748b; line-height: 1.5; max-width: 300px; text-align: right; }

.wwd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.wwd-card { border-radius: 18px; background: #ffffff; border: 1px solid #dbeafe; padding: 24px; box-shadow: 0 6px 18px rgba(15,23,42,0.10); display: flex; flex-direction: column; color: #0f172a; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wwd-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(15,23,42,0.18); border-color: #38bdf8; }
.wwd-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wwd-icon { width: 36px; height: 36px; border-radius: 999px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.wwd-card h3 { font-size: 18px; font-weight: 700; margin: 0; color: #0b1120; }
.wwd-body { font-size: 14px; line-height: 1.6; color: #64748b; flex: 1; }
.wwd-link-text { font-weight: 700; font-size: 13px; margin-top: 14px; display: block; color: #0ea5e9; }
.wwd-card-emergency { border-color: #fecaca; background: linear-gradient(135deg, #fee2e2, #fecaca); box-shadow: 0 16px 40px rgba(185, 28, 28, 0.35); }
.wwd-card-emergency h3, .wwd-card-emergency .wwd-body { color: #7f1d1d; }
.wwd-card-emergency .wwd-link-text { color: #b91c1c; }

.section-footer-btn { text-align: center; margin-top: 40px; }
.btn-view-all { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 999px; font-size: 15px; font-weight: 700; background: #eff6ff; color: #0369a1; border: 1px solid #dbeafe; text-decoration: none; transition: 0.2s; }
.btn-view-all:hover { background: #dbeafe; transform: translateY(-2px); }
.section-footer-btn.dark .btn-view-all { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }

/* --- DARK SECTIONS --- */
.service-videos, .reviews, .tips-section { background: #020617; color: #e5e7eb; }
.service-videos-title, .reviews-header h2, .tips-header h2 { color: #f9fafb; font-size: 28px; font-weight: 700; }
.service-videos-sub, .reviews-header p, .tips-header p { color: #9ca3af; font-size: 15px; }
.reviews-header, .tips-header, .sa-header { text-align: center; max-width: 800px; margin: 0 auto 40px auto; }

/* Videos - Кнопку піднято вище */
.service-videos .section-footer-btn { margin-top: 20px; }

.service-videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.service-video-item { border-radius: 0; overflow: hidden; background: #020617; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.35); border: 1px solid rgba(15, 23, 42, 0.6); aspect-ratio: 4/5; position: relative; background-size: cover; background-position: center; }
.service-video-item video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in; }
.service-video-item video.visible { opacity: 1; }

.reviews-grid, .tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 10px; }
.review-card, .tip-card { border-radius: 20px; border: 1px solid #e5e7eb; background: #ffffff; padding: 20px 22px; color: #0f172a; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35); }
.review-name, .tip-title { font-weight: 600; color: #111827; }
.review-text, .tip-text { font-size: 14px; line-height: 1.6; color: #374151; }
.reviews-note { margin-top: 30px; text-align: center; font-size: 14px; color: #9ca3af; width: 100%; }
.reviews-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.reviews-logo-img { height: 40px; display: block; }

/* --- QUICK TIPS (Зменшений відступ знизу) --- */
#quick-tips { padding-top: 40px; padding-bottom: 20px; background-color: #ffffff; }
.tips-header { text-align: center; margin-bottom: 30px; }
.tips-header h2 { font-size: 28px; color: #0f172a; margin-bottom: 8px; }
.tips-header p { color: #64748b; }
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.tip-card { padding: 24px; border-radius: 16px; }
.tip-card-icon { font-size: 24px; margin-bottom: 12px; }
.tip-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.tip-card p { font-size: 15px; line-height: 1.5; }
.tip-card:nth-child(1) { background-color: #fef2f2; color: #991b1b; }
.tip-card:nth-child(1) h3 { color: #7f1d1d; }
.tip-card:nth-child(1) p { color: #b91c1c; }
.tip-card:nth-child(2) { background-color: #fffbeb; color: #92400e; }
.tip-card:nth-child(2) h3 { color: #78350f; }
.tip-card:nth-child(2) p { color: #b45309; }
.tip-card:nth-child(3) { background-color: #f0fdf4; color: #166534; }
.tip-card:nth-child(3) h3 { color: #14532d; }
.tip-card:nth-child(3) p { color: #15803d; }
.tips-actions { text-align: center; margin-top: 30px; }
.btn-tips { background-color: #f97316; color: white; padding: 12px 28px; border-radius: 999px; text-decoration: none; font-weight: 600; display: inline-block; transition: transform 0.2s, background-color 0.2s; }
.btn-tips:hover { transform: scale(1.05); background-color: #ea580c; }

/* --- SERVICE AREAS (Shadows, Checkmarks & Compact Spacing) --- */
/* Зменшений відступ зверху і знизу */
.service-areas { padding-top: 20px; padding-bottom: 20px; }
.service-areas .sa-header { text-align: center; margin-bottom: 30px; }
.sa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; text-align: left; margin-bottom: 20px; }

.sa-grid ul {
  list-style: none; padding: 24px; background: #ffffff; border-radius: 16px;
  /* Додані виразні тіні */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}
.sa-grid li { 
    margin-bottom: 10px; 
    font-size: 15px; 
    display: flex; 
    align-items: center; 
    gap: 8px;
}
/* Галочки через CSS */
.sa-grid li::before {
    content: "✅";
    font-size: 12px;
    display: inline-block;
}
.sa-grid a { color: #334155; text-decoration: none; font-weight: 500; transition: all 0.2s ease-in-out; }
.sa-grid a:hover { color: #38bdf8; transform: translateX(3px); }

.sa-note { display: block; clear: both; text-align: center; margin-top: 10px; font-size: 14px; color: #334155; }
.sa-note a { color: #0369a1; text-decoration: underline; font-weight: 600; cursor: pointer; }

/* --- INFO DETAILS SECTION (RED & BLUE SHADOWS, Compact Top) --- */
#info-details {
  padding-top: 30px; /* Зменшений відступ зверху */
  padding-bottom: 50px;
  background: linear-gradient(to bottom, #ffffff 0%, #fff5f5 40%, #f0f9ff 100%);
  color: #334155;
}
#info-details h2 { color: #0f172a; font-size: 26px; margin-bottom: 12px; }
#info-details h3 { color: #1e293b; font-size: 18px; margin-bottom: 10px; font-weight: 700; }
#info-details p, #info-details ol li, #info-details ul li { color: #475569; line-height: 1.6; }
#info-details strong.urgent { color: #b91c1c; font-weight: 700; }
#info-details strong.tech { color: #0369a1; font-weight: 700; }
#info-details ol, #info-details ul { padding-left: 20px; }
#info-details ul li { margin-bottom: 6px; }

.info-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start;
}

.info-card {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    margin-bottom: 40px;
}
/* Red Shadow Card */
.info-card-red {
    border: 1px solid rgba(220, 38, 38, 0.1);
    box-shadow: 0 20px 50px -12px rgba(220, 38, 38, 0.25);
}
/* Blue Shadow Card */
.info-card-blue {
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow: 0 20px 50px -12px rgba(37, 99, 235, 0.25);
}

.btn-outline-dark {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    border: 1px solid #cbd5e1;
    border-radius: 99px;
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-outline-dark:hover {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

/* --- CTA STRIP --- */
#cta-help { padding: 40px 0; background-color: #020617; color: #fff; }
#cta-help h2 { color: #fff; font-size: 26px; margin-bottom: 12px; }
#cta-help p { color: #cbd5e1; max-width: 800px; margin-bottom: 24px; line-height: 1.5; }
.cta-buttons-container { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.btn-cta-red { background-color: #dc2626; color: white; padding: 12px 24px; border-radius: 99px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.3s; }
.btn-cta-red:hover { background-color: #b91c1c; }
.btn-cta-blue { background-color: #0ea5e9; color: white; padding: 12px 24px; border-radius: 99px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; transition: background-color 0.3s; }
.btn-cta-blue:hover { background-color: #0284c7; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .wwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
  .info-split-grid { gap: 20px; }
}

@media (max-width: 768px) {
  #hero, #what-we-do, #our-work, #service-areas, #reviews, #contact { scroll-margin-top: 80px; }
  #hero { padding-top: 20px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wwd-header { flex-direction: column; align-items: flex-start; text-align: left; }
  .wwd-meta { text-align: left; margin-top: 10px; max-width: 100%; } /* Reset alignment for mobile */
  .wwd-grid { grid-template-columns: minmax(0, 1fr); }
  .service-videos-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-grid, .tips-grid { grid-template-columns: minmax(0, 1fr); }
  .sa-grid { grid-template-columns: 1fr; }
  .info-split-grid { grid-template-columns: 1fr; margin-bottom: 30px; }
  .info-card { padding: 20px; }
}