/* service-modal.css — Service detail modal (Phase 17) */
/* =========================================================
   PHASE 17 — SERVICE DETAIL MODAL
   ========================================================= */
.svc-modal-overlay{
  position:fixed; inset:0; z-index:300; display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto;
  background:rgba(8,14,28,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.svc-modal-overlay.open{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.svc-modal{
  position:relative; width:100%; max-width:840px; background:var(--surface); border-radius:26px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.45); overflow:hidden;
  transform:translateY(24px) scale(.98); opacity:0; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.svc-modal-overlay.open .svc-modal{ transform:translateY(0) scale(1); opacity:1; }
html.dark .svc-modal{ background:#0E1727; border:1px solid rgba(255,255,255,.08); }
.svc-modal-close{
  position:absolute; top:16px; inset-inline-end:16px; z-index:5; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); color:#0B1220;
  border:none; box-shadow:0 6px 16px rgba(0,0,0,.2); transition:transform .25s ease, background .25s ease;
}
.svc-modal-close:hover{ transform:scale(1.08) rotate(90deg); }
.svc-modal-close .icon{width:16px;height:16px;}
.svc-modal-hero{ position:relative; height:200px; }
.svc-modal-hero .svc-illus{ width:100%; height:100%; }
.svc-modal-hero-badge{
  position:absolute; bottom:-26px; inset-inline-start:26px; width:56px; height:56px; border-radius:16px;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 28px -8px rgba(13,69,161,.55); border:4px solid var(--surface);
}
html.dark .svc-modal-hero-badge{ border-color:#0E1727; }
.svc-modal-hero-badge .icon{width:24px;height:24px;}
.svc-modal-body{ padding:42px 30px 30px; max-height:70vh; overflow-y:auto; }
.svc-modal-body h3{ font-size:24px; margin-bottom:8px; }
.svc-modal-body > p.svc-modal-desc{ color:var(--muted); font-size:15px; margin-bottom:26px; max-width:560px; }
.svc-modal-section{ margin-bottom:26px; }
.svc-modal-section h5{ font-size:13px; font-weight:600; color:var(--primary); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
html.dark .svc-modal-section h5{ color:#8FB4FF; }
.svc-feature-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
@media (max-width:560px){ .svc-feature-list{ grid-template-columns:1fr; } }
.svc-feature-list li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text); }
.svc-feature-list .icon{ width:16px; height:16px; color:var(--primary); flex-shrink:0; margin-top:2px; }
html.dark .svc-feature-list .icon{ color:#8FB4FF; }
.svc-process{ display:flex; flex-direction:column; gap:0; }
.svc-process li{ display:flex; gap:14px; padding-bottom:18px; position:relative; }
.svc-process li:not(:last-child)::before{ content:""; position:absolute; top:26px; bottom:0; inset-inline-start:12px; width:1px; background:var(--border); }
.svc-process .step-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-mono); z-index:1;
}
html.dark .svc-process .step-num{ color:#8FB4FF; }
.svc-process .step-title{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
.svc-process .step-desc{ font-size:12.5px; color:var(--muted); }
.svc-faq-item{ border-bottom:1px solid var(--border); padding:12px 0; }
.svc-faq-item summary{ cursor:pointer; font-size:13.5px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.svc-faq-item summary::-webkit-details-marker{ display:none; }
.svc-faq-item summary .icon{ width:14px; height:14px; color:var(--muted); transition:transform .25s ease; flex-shrink:0; }
.svc-faq-item[open] summary .icon{ transform:rotate(45deg); }
.svc-faq-item p{ font-size:12.8px; color:var(--muted); margin-top:8px; line-height:1.6; }
.svc-related{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-related button{
  border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:8px 16px; font-size:12.5px;
  font-weight:500; color:var(--text); transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.svc-related button:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }
.svc-modal-actions{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
body.modal-open{ overflow:hidden; }
/* PHASE 17 FIX — stacking order bug: the service modal lives inside the
   #services section, whose .container creates its own stacking context
   (position:relative; z-index:1 — see the shared .container rule). Because
   later sections like #why use that same .container rule, they tie on
   z-index and win on DOM order, so they painted above the open modal
   instead of behind it. While a modal is open we raise the whole #services
   section (already position:relative) above every later section, without
   touching layout, design, or any other section's styles. Scrolling is
   already locked by body.modal-open, so no other floating/sticky element is
   affected. This fix applies to every service card/form, since they all
   share this one modal inside #services. */
body.modal-open #services{ z-index:400; }

/* Why choose us */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:980px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
.why-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px; text-align:start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
html.dark .why-card{ border-color:rgba(255,255,255,.08); }
.why-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg), 0 0 24px -10px rgba(18,95,221,.4); }
.why-card .icon-tile{width:38px; height:38px; border-radius:11px; flex-shrink:0; margin-bottom:0; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;}
.why-card .icon-tile .icon{width:19px; height:19px;}
.why-card:hover .icon-tile{ transform:scale(1.08) rotate(-6deg); box-shadow:0 0 16px -3px rgba(18,95,221,.5); }
html.dark .why-card:hover .icon-tile{ box-shadow:0 0 18px -2px rgba(143,180,255,.5); }
.why-card h4{font-size:14px; margin-bottom:2px;}
.why-card p{color:var(--muted); font-size:12.5px; line-height:1.4;}
#why{padding:52px 0;}
#why .section-head{margin-bottom:24px;}

/* Offers */
.offers-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px;}
@media (max-width:980px){ .offers-grid{grid-template-columns:1fr;} }
.offer-card{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; isolation:isolate; min-height:260px; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
  will-change:transform;
}
.offer-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg), 0 0 40px -14px rgba(18,95,221,.55); border-color:rgba(250,205,4,.35); }
.offer-card .offer-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.offer-card:hover .offer-img{ transform:scale(1.08); }
.offer-card .offer-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(175deg, rgba(8,14,28,.15) 0%, rgba(6,10,22,.95) 90%); }
.offer-card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--lx,50%) var(--ly,50%), rgba(255,255,255,.16), transparent 60%);
  transition:opacity .4s ease;
}
.offer-card:hover::after{ opacity:1; }
.offer-card.gold{ background:linear-gradient(150deg,#1a2c52,#0b1220); }
.offer-card.blue{ background:radial-gradient(120% 130% at 80% 0%, #1a5fd9, #0D45A1 55%, #071a40); }
.offer-card .tag{align-self:flex-start; background:rgba(250,205,4,.18); color:var(--accent); border:1px solid rgba(250,205,4,.4); font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:14px;}
.offer-card h4{font-size:20px; margin-bottom:8px;}
.offer-card p{font-size:13.5px; color:rgba(255,255,255,.78); margin-bottom:16px;}

/* Most requested */
.mr-scroll{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media (max-width:1080px){ .mr-scroll{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .mr-scroll{grid-template-columns:repeat(2,1fr);} }
.mr-card{ position:relative; isolation:isolate; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;}
.mr-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
html.dark .mr-card:hover{ border-color:rgba(143,180,255,.28); }
.mr-thumb{height:110px; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden;}
.mr-thumb .icon{width:34px; height:34px; transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.mr-card:hover .mr-thumb .icon{ transform:scale(1.18); }
.mr-card .mr-body{padding:14px;}
.mr-card h5{font-size:13.5px; margin-bottom:4px;}
.mr-card span{font-size:11.5px; color:var(--muted);}

/* Request process — timeline signature */
.timeline{position:relative; display:flex; justify-content:space-between; gap:12px; margin-top:20px;}
.timeline::before{
  content:""; position:absolute; top:23px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 18px);
}
.tl-step{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;}
.tl-dot{
  width:46px; height:46px; border-radius:50%; background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--muted); z-index:1;
}
.tl-step.active .tl-dot{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.tl-step.done .tl-dot{ background:var(--primary); border-color:var(--primary); color:#fff; }
.tl-step h5{font-size:13.5px;}
.tl-step p{font-size:12px; color:var(--muted); max-width:120px;}
@media (max-width:860px){
  .timeline{flex-direction:column; align-items:flex-start; gap:22px;}
  .timeline::before{ top:0; bottom:0; left:23px; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg, var(--border) 0 10px, transparent 10px 18px);}
  .tl-step{flex-direction:row; text-align:start;}
  .tl-step p{max-width:none;}
}