/* KIPMAN SOFT — Services Page v4.0 — Premium Product Detail */

/* ── Service Detail Section ─────────────────── */
.srv-detail-section{background:var(--bg);position:relative;overflow:hidden}
.srv-detail-section:nth-child(even){background:var(--bg-2)}
.srv-anchor{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* Soft red glow on each detail section */
.srv-detail-section::before{
  content:'';position:absolute;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,30,36,.07) 0%,transparent 65%);
  pointer-events:none;z-index:0;
  top:-120px;right:-160px;
}
.srv-detail-section:nth-child(even)::before{
  top:auto;bottom:-120px;right:auto;left:-160px;
  background:radial-gradient(circle,rgba(227,30,36,.05) 0%,transparent 65%);
}
.srv-detail-section .container{position:relative;z-index:1}

.srv-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:72px;align-items:center;
}
.srv-detail-grid.reverse{direction:rtl}
.srv-detail-grid.reverse>*{direction:ltr}

/* ── Service Image — premium frame ──────────── */
.srv-detail-img{
  position:relative;
  isolation:isolate;
}
.srv-detail-img::before{
  content:'';position:absolute;
  inset:18px -18px -18px 18px;
  background:linear-gradient(135deg,var(--red) 0%,#ff6b6b 100%);
  border-radius:var(--r-2xl);
  z-index:-1;opacity:.85;
  transition:transform .5s cubic-bezier(.16,1,.3,1),inset .5s cubic-bezier(.16,1,.3,1);
}
.srv-detail-grid.reverse .srv-detail-img::before{
  inset:18px 18px -18px -18px;
}
.srv-detail-img:hover::before{
  inset:22px -22px -22px 22px;
}
.srv-detail-grid.reverse .srv-detail-img:hover::before{
  inset:22px 22px -22px -22px;
}
.srv-detail-img img{
  width:100%;border-radius:var(--r-2xl);
  box-shadow:0 18px 50px rgba(15,23,42,.16),0 8px 20px rgba(15,23,42,.08);
  object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  border:1.5px solid rgba(255,255,255,.8);
}
.srv-detail-img:hover img{transform:translate(-4px,-4px)}

/* Floating stat badge — premium look */
.srv-img-badge{
  position:absolute;bottom:-20px;right:-20px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:16px 22px;
  text-align:center;
  box-shadow:0 12px 32px rgba(15,23,42,.14),0 4px 10px rgba(15,23,42,.05);
  min-width:110px;
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform var(--t-med);
}
.srv-detail-img:hover .srv-img-badge{transform:translateY(-3px)}
.srv-img-badge::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--red),var(--red-light));
}
.srv-img-badge strong{
  display:block;font-family:var(--font-d);
  font-size:1.7rem;font-weight:900;
  background:linear-gradient(135deg,var(--red) 0%,#ff6b6b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.05;
}
.srv-img-badge span{font-size:.74rem;color:var(--txt-3);font-weight:700;letter-spacing:.02em}

/* ── Service Content ────────────────────────── */
.srv-detail-content h2{
  margin-bottom:18px;
  position:relative;
  display:inline-block;
}
.srv-detail-content h2::after{
  content:'';position:absolute;
  left:0;bottom:-10px;
  width:48px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--red-light));
}
.srv-detail-content>p{
  font-size:1.02rem;line-height:1.78;margin-bottom:32px;
  margin-top:18px;
}

/* ── Process Steps — Premium Timeline ───────── */
.srv-process{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:32px;position:relative;
  padding:4px 0;
}
.srv-process-item{
  display:flex;gap:18px;align-items:flex-start;
  position:relative;
  padding:14px 0;
}
/* Vertical connecting line between steps */
.srv-process-item:not(:last-child)::before{
  content:'';position:absolute;
  left:17px;top:48px;bottom:-14px;
  width:2px;
  background:linear-gradient(180deg,rgba(227,30,36,.4) 0%,rgba(227,30,36,.08) 100%);
  border-radius:1px;
}
.srv-step-num{
  width:36px;height:36px;flex-shrink:0;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;font-family:var(--font-d);
  box-shadow:0 4px 12px rgba(227,30,36,.32),0 0 0 4px rgba(227,30,36,.08);
  position:relative;z-index:1;
  transition:transform var(--t),box-shadow var(--t);
}
.srv-process-item:hover .srv-step-num{
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(227,30,36,.4),0 0 0 6px rgba(227,30,36,.12);
}
.srv-step-text{padding-top:4px}
.srv-step-text h5{
  color:var(--txt);margin-bottom:4px;
  font-size:.95rem;font-weight:700;
  transition:color var(--t);
}
.srv-process-item:hover .srv-step-text h5{color:var(--red)}
.srv-step-text p{font-size:.86rem;line-height:1.65;color:var(--txt-3)}

/* ── Tech Stack — Refined Chips ─────────────── */
.srv-tech-stack{margin-bottom:28px}
.srv-tech-stack h5{
  color:var(--txt-2);margin-bottom:12px;
  font-size:.78rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.srv-tech-stack h5::before{
  content:'';width:18px;height:2px;border-radius:1px;
  background:var(--red);
}
.srv-tech-tags{display:flex;flex-wrap:wrap;gap:7px}
.srv-tech-tags span{
  font-size:.78rem;font-weight:600;
  background:var(--bg);color:var(--txt-2);
  border:1.5px solid var(--border);
  padding:6px 12px;border-radius:var(--r-full);
  transition:all var(--t);
  cursor:default;
  position:relative;
}
.srv-tech-tags span:hover{
  border-color:rgba(227,30,36,.4);
  color:var(--red);
  background:var(--red-bg);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(227,30,36,.12);
}

/* ── Benefits — Premium Pills ───────────────── */
.srv-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:32px}
.srv-benefit{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:600;color:var(--txt-2);
  padding:10px 14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r);
  transition:all var(--t);
}
.srv-benefit:hover{
  border-color:rgba(227,30,36,.25);
  background:linear-gradient(135deg,var(--red-bg) 0%,#fff 100%);
  transform:translateX(2px);
  box-shadow:0 4px 12px rgba(227,30,36,.08);
}
.srv-benefit svg{
  width:18px;height:18px;stroke:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
  border-radius:50%;padding:3px;
  box-shadow:0 2px 6px rgba(227,30,36,.28);
}

/* ── Pricing ────────────────────────────────── */
.pricing-section{background:var(--bg-dark)}
.pricing-section .section-header h2{color:#fff}
.pricing-section .section-header p{color:rgba(255,255,255,.5)}
.pricing-section .section-tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.15)}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.pricing-card{
  background:var(--bg-dark2);border:1.5px solid rgba(255,255,255,.08);
  border-radius:var(--r-2xl);padding:36px;
  position:relative;overflow:hidden;transition:all var(--t-med);
}
.pricing-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pricing-card.featured{
  background:var(--bg);border-color:var(--red);
  box-shadow:0 0 0 1px var(--red),var(--shadow-red);
}
.pricing-card.featured:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--red),0 20px 60px rgba(227,30,36,.25)}
.pricing-popular{
  position:absolute;top:0;right:24px;
  background:var(--red);color:#fff;
  font-size:.7rem;font-weight:800;font-family:var(--font-d);
  padding:5px 12px;border-radius:0 0 var(--r) var(--r);
}
.pricing-name{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-4);margin-bottom:12px;font-family:var(--font-d)}
.pricing-card.featured .pricing-name{color:var(--red)}
.pricing-price{display:flex;align-items:baseline;gap:2px;margin-bottom:4px}
.currency{font-size:1.4rem;font-weight:800;font-family:var(--font-d);color:#fff;line-height:1}
.pricing-card.featured .currency{color:var(--txt)}
.amount{font-size:2.8rem;font-weight:900;font-family:var(--font-d);line-height:1;color:#fff}
.pricing-card.featured .amount{color:var(--txt)}
.pricing-period{font-size:.8rem;color:rgba(255,255,255,.38);margin-bottom:12px}
.pricing-card.featured .pricing-period{color:var(--txt-3)}
.pricing-desc{font-size:.87rem;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.07)}
.pricing-card.featured .pricing-desc{color:var(--txt-3);border-bottom-color:var(--border)}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pricing-features li{display:flex;align-items:center;gap:9px;font-size:.87rem;color:rgba(255,255,255,.7)}
.pricing-card.featured .pricing-features li{color:var(--txt-2)}
.pricing-features li.disabled{opacity:.35;text-decoration:line-through}
.pricing-features li svg{width:16px;height:16px;stroke:var(--red);flex-shrink:0}

/* ── FAQ ────────────────────────────────────── */
.faq-section{background:var(--bg-2)}
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.faq-left{position:sticky;top:calc(var(--nav-h) + 24px)}
.faq-left h2{margin-bottom:14px}
.faq-left p{font-size:.95rem;margin-bottom:24px}

@media(max-width:1024px){
  .srv-detail-grid,.srv-detail-grid.reverse{grid-template-columns:1fr;direction:ltr;gap:56px}
  .features-img{display:block}
  .pricing-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-left{position:static}
  .srv-detail-img::before,
  .srv-detail-grid.reverse .srv-detail-img::before{inset:14px -14px -14px 14px}
  .srv-img-badge{bottom:-16px;right:-12px;padding:14px 18px;min-width:96px}
  .srv-img-badge strong{font-size:1.45rem}
  .srv-detail-section::before{display:none}
}
@media(max-width:768px){
  .srv-benefits{grid-template-columns:1fr}
  .srv-detail-content h2::after{left:50%;transform:translateX(-50%)}
  .srv-detail-content h2{display:block;text-align:center}
  .srv-detail-content>p{text-align:center}
  .srv-detail-img::before,
  .srv-detail-grid.reverse .srv-detail-img::before{inset:10px -10px -10px 10px}
  .srv-process-item:not(:last-child)::before{left:18px}
}