/* hadel-digital-layout: Desktop first, mobile overrides below */
:root{
  --hd-primary:#0B5FFF;
  --hd-accent:#7C7CFF;
  --hd-ink:#0A1020;
  --hd-text:#475569;
  --hd-bg:#FFFFFF;
  --hd-soft:#F5F7FF;
  --hd-radius:14px;
}

.hd-section{ background:var(--hd-bg); }
.hd-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.hd-hero{ padding:96px 0 72px; }
.hd-problems{ padding:72px 0; background:transparent; }
.hd-offer, .hd-process, .hd-faq{ padding:88px 0; }
.hd-cta{ padding:72px 0; background:linear-gradient(180deg, var(--hd-soft), #fff); }

/* Layout */
.hd-hero-inner{ display:flex; gap:56px; align-items:center; }
.hd-hero-left{ flex:0 0 46%; }
.hd-hero-right{ flex:1; }

.hd-problems-inner{ display:flex; gap:48px; align-items:flex-start; }
.hd-problems-left{ flex:0 0 38%; padding-top:8px; }
.hd-problems-right{ flex:1; display:flex; flex-direction:column; gap:20px; }

.hd-cards{ display:flex; gap:24px; margin-top:18px; }
.hd-cardbox{ background:#fff; border-radius:12px; padding:22px; box-shadow:0 6px 18px rgba(10,16,32,0.06); flex:1; }

.hd-steps{ display:flex; gap:18px; margin-top:18px; }
.hd-step{ background:#fff; border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(10,16,32,0.04); flex:1; }
.hd-step-highlight{ border:2px solid var(--hd-primary); box-shadow:0 10px 28px rgba(11,95,255,0.06); }

/* Type */
.hd-h1{ color:var(--hd-ink); font-size:clamp(36px, 4vw, 56px); line-height:1.05; margin:0 0 18px; }
.hd-h2{ color:var(--hd-ink); font-size:clamp(28px, 2.4vw, 38px); line-height:1.15; margin:0 0 14px; }
.hd-h3{ color:var(--hd-ink); font-size:20px; line-height:1.25; margin:0 0 8px; }
.hd-lead{ color:var(--hd-text); font-size:18px; line-height:1.6; margin:0 0 18px; max-width:60ch; }
.hd-text{ color:var(--hd-text); font-size:16px; line-height:1.7; margin:0; }
.hd-micro{ color:var(--hd-text); font-size:14px; line-height:1.6; margin:14px 0 0; opacity:.9; }

/* Buttons */
.hd-buttons{ display:flex; gap:14px; margin-top:12px; align-items:center; }
.hd-btn{ display:inline-block; text-decoration:none; border-radius:12px; padding:12px 18px; font-weight:600; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.hd-btn-primary{ background:var(--hd-primary); color:#fff; border:1px solid var(--hd-primary); box-shadow:0 10px 24px rgba(11,95,255,.14); }
.hd-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(11,95,255,.18); }
.hd-btn-ghost{ background:transparent; color:var(--hd-ink); border:1px solid rgba(10,16,32,0.06); }

/* Problems list - modern vertical list */
.hd-problem-item{ padding:18px 22px; border-left:4px solid rgba(11,95,255,0.10); background:rgba(245,247,255,0.6); border-radius:12px; }
.hd-problem-item .hd-h3{ margin:0 0 6px; font-size:18px; }
.hd-problem-item .hd-text{ margin:0; color:var(--hd-text); }

/* Hero visual placeholder */
.hd-image-placeholder{ background:linear-gradient(180deg,#fff,#f7f9ff); border-radius:12px; padding:12px; min-height:260px; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 10px 30px rgba(10,16,32,0.04); }
.hd-image-badge{ position:absolute; top:12px; left:12px; background:#fff; border-radius:999px; padding:6px 10px; font-size:12px; border:1px solid rgba(10,16,32,0.04); box-shadow:0 4px 12px rgba(10,16,32,0.04); }
.hd-image-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:80%; }
.hd-card{ height:80px; border-radius:10px; background:linear-gradient(180deg, #fff, #eef4ff); box-shadow:inset 0 -6px 12px rgba(11,95,255,0.02); }

/* FAQ accordion simple */
.hd-accordion summary{ cursor:pointer; font-weight:600; padding:12px 0; display:block; }
.hd-accordion[open] summary{ color:var(--hd-primary); }
.hd-accordion p{ margin:10px 0 0; color:var(--hd-text); }

/* CTA inner layout */
.hd-cta-inner{ display:flex; gap:24px; align-items:center; justify-content:space-between; }
.hd-cta-right{ text-align:right; }

/* Responsive: Mobile-first overrides */
@media (max-width: 900px) {
  .hd-hero-inner{ flex-direction:column-reverse; gap:28px; }
  .hd-hero-left{ flex-basis:100%; }
  .hd-hero-right{ flex-basis:100%; }
  .hd-hero{ padding:48px 0; }
  .hd-problems-inner{ flex-direction:column; }
  .hd-problems-left{ order:0; padding:0; }
  .hd-problems-right{ order:1; }
  .hd-cards{ flex-direction:column; }
  .hd-steps{ flex-direction:column; }
  .hd-cta-inner{ flex-direction:column; align-items:flex-start; text-align:left; gap:12px; }
}