/* ===== Sub-service page shared styles ===== */

/* Subhero */
.subhero{padding:160px 48px 100px;background:radial-gradient(900px 500px at 85% 10%,rgba(47,111,232,.10),transparent 60%),radial-gradient(700px 400px at 10% 90%,rgba(34,211,238,.08),transparent 60%),var(--white);position:relative;overflow:hidden;border-bottom:1px solid var(--gray-100)}
.subhero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(rgba(30,84,196,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,84,196,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 75%)}
.subhero-inner{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center}
.subhero .breadcrumb{font-size:12px;color:var(--gray-500);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.subhero .breadcrumb a{color:var(--blue-600)}
.subhero .breadcrumb span{color:var(--gray-300)}
.subhero-num{font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--blue-600);margin-bottom:14px}
.subhero h1{font-size:clamp(34px,4.2vw,58px);font-weight:900;line-height:1.22;letter-spacing:-.01em;margin-bottom:22px}
.subhero h1 .hl{background:linear-gradient(120deg,var(--blue-700),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.subhero h1 .serif{color:var(--blue-700);font-weight:400}
.subhero-lead{font-size:16px;color:var(--gray-700);line-height:2;max-width:640px;margin-bottom:30px}
.subhero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.subhero-bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:560px}
.subhero-bullet{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray-700);font-weight:500}
.subhero-bullet::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--blue-50);border:2px solid var(--blue-500);flex-shrink:0;position:relative}
.subhero-visual{position:relative;aspect-ratio:4/5;border-radius:24px;background:linear-gradient(160deg,var(--blue-800),var(--blue-600));overflow:hidden;box-shadow:0 40px 80px -30px rgba(10,16,36,.4);display:grid;place-items:center;color:var(--white);padding:36px}
.subhero-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 30% 30%,rgba(34,211,238,.25),transparent 60%)}
.subhero-visual-inner{position:relative;text-align:center;z-index:2}
.sv-icon{font-size:80px;margin-bottom:18px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}
.sv-label{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.3em;opacity:.7;margin-bottom:8px}
.sv-title{font-size:28px;font-weight:800;line-height:1.3;margin-bottom:12px}
.sv-sub{font-size:13px;opacity:.8;line-height:1.8}
.sv-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sv-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.sv-ring.r1{width:90%;aspect-ratio:1;animation:ringRot 60s linear infinite}
.sv-ring.r2{width:70%;aspect-ratio:1;border-style:dashed;animation:ringRot 40s linear infinite reverse}
@keyframes ringRot{to{transform:rotate(360deg)}}

/* Problem → Solution */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin:0 auto}
.ps-card{padding:36px 32px;border-radius:18px;border:1px solid var(--gray-100);background:var(--white)}
.ps-card.prob{border-color:rgba(229,82,74,.18);background:linear-gradient(180deg,rgba(229,82,74,.03),var(--white))}
.ps-card.sol{border-color:rgba(30,84,196,.15);background:linear-gradient(180deg,var(--blue-50),var(--white))}
.ps-lbl{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;margin-bottom:14px;padding:5px 12px;border-radius:999px;display:inline-block}
.ps-card.prob .ps-lbl{background:rgba(229,82,74,.1);color:#C53D35}
.ps-card.sol .ps-lbl{background:var(--blue-50);color:var(--blue-700)}
.ps-card h3{font-size:20px;font-weight:800;margin-bottom:18px;line-height:1.4}
.ps-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.ps-list li{font-size:14px;color:var(--gray-700);padding-left:24px;position:relative;line-height:1.75}
.ps-card.prob .ps-list li::before{content:"×";position:absolute;left:0;top:0;color:#C53D35;font-weight:700;font-size:16px}
.ps-card.sol .ps-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue-600);font-weight:700;font-size:15px}

/* Menu cards */
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.menu{background:var(--white);border:1px solid rgba(30,84,196,.1);border-radius:20px;padding:36px 32px;transition:all .35s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column}
.menu::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-700),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu:hover{transform:translateY(-4px);box-shadow:0 30px 50px -20px rgba(30,84,196,.2);border-color:rgba(30,84,196,.25)}
.menu:hover::before{transform:scaleX(1)}
.menu-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.menu-icon{flex-shrink:0;width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--blue-50),rgba(34,211,238,.15));color:var(--blue-700);font-size:24px}
.menu-num{font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--blue-500);margin-bottom:4px}
.menu h3{font-size:19px;font-weight:800;line-height:1.4}
.menu-desc{font-size:13px;color:var(--gray-700);line-height:1.9;margin-bottom:18px;flex-grow:1}
.menu-feat{list-style:none;padding:16px 0;border-top:1px dashed rgba(30,84,196,.15);display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.menu-feat li{font-size:12px;color:var(--gray-700);padding-left:16px;position:relative;line-height:1.6}
.menu-feat li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue-500)}
.menu-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--gray-100);font-size:12px}
.menu-price{font-family:'Archivo',sans-serif;font-weight:700;color:var(--blue-700);font-size:14px}
.menu-price small{font-size:10px;color:var(--gray-500);font-weight:500;margin-left:4px}
.menu-term{color:var(--gray-500)}

/* Tech grid */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tech{padding:24px 16px;text-align:center;background:var(--white);border:1px solid rgba(30,84,196,.08);border-radius:14px;transition:all .3s}
.tech:hover{transform:translateY(-3px);border-color:var(--blue-500);box-shadow:0 16px 30px -12px rgba(30,84,196,.15)}
.tech-name{font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;color:var(--blue-700);margin-bottom:4px;letter-spacing:.02em}
.tech-desc{font-size:11px;color:var(--gray-500)}

/* Vertical process */
.vproc{max-width:900px;margin:0 auto;position:relative;padding-left:60px}
.vproc::before{content:"";position:absolute;left:26px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,var(--blue-500),var(--cyan))}
.vproc-item{position:relative;padding-bottom:40px}
.vproc-item:last-child{padding-bottom:0}
.vproc-item::before{content:"";position:absolute;left:-46px;top:0;width:52px;height:52px;border-radius:50%;background:var(--white);border:2px solid var(--blue-500);display:grid;place-items:center}
.vproc-num{position:absolute;left:-46px;top:0;width:52px;height:52px;display:grid;place-items:center;font-family:'Archivo',sans-serif;font-size:18px;font-weight:800;color:var(--blue-700);z-index:2}
.vproc-item h4{font-size:19px;font-weight:800;margin-bottom:8px;line-height:1.4}
.vproc-item h4 .tag{display:inline-block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;color:var(--blue-600);background:var(--blue-50);padding:3px 10px;border-radius:999px;margin-left:10px;vertical-align:middle;letter-spacing:.05em}
.vproc-item p{font-size:14px;color:var(--gray-700);line-height:1.95;margin-bottom:10px}

/* Use cases */
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uc{background:var(--white);border:1px solid rgba(30,84,196,.1);border-radius:18px;overflow:hidden;transition:all .3s}
.uc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(30,84,196,.2)}
.uc-top{padding:28px 28px 18px;background:linear-gradient(135deg,var(--blue-50),rgba(34,211,238,.08));border-bottom:1px solid rgba(30,84,196,.08)}
.uc-ind{display:inline-block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--blue-700);background:var(--white);border:1px solid rgba(30,84,196,.12);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.uc h4{font-size:16px;font-weight:800;line-height:1.5;color:var(--ink);margin-bottom:6px}
.uc-body{padding:22px 28px}
.uc-row{display:flex;gap:10px;margin-bottom:10px;font-size:13px;line-height:1.7}
.uc-row:last-child{margin-bottom:0}
.uc-row strong{font-size:11px;color:var(--blue-600);font-weight:700;min-width:52px;letter-spacing:.05em;padding-top:2px}
.uc-row span{color:var(--gray-700);flex:1}

/* Pricing panel */
.pricing{background:linear-gradient(135deg,var(--blue-800),var(--blue-600));border-radius:24px;color:var(--white);padding:60px 60px;position:relative;overflow:hidden}
.pricing::before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.pricing::after{content:"";position:absolute;bottom:-30%;left:-5%;width:300px;height:300px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
.pricing-head{max-width:640px;margin-bottom:40px;position:relative;z-index:2}
.pricing-head .tag{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--cyan);margin-bottom:14px}
.pricing-head h2{font-size:32px;font-weight:800;margin-bottom:14px;line-height:1.3}
.pricing-head p{font-size:14px;opacity:.85;line-height:1.9}
.pricing-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:2}
.tier{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:30px 26px;backdrop-filter:blur(6px)}
.tier.featured{background:rgba(255,255,255,.98);color:var(--ink)}
.tier-name{font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.15em;margin-bottom:10px;opacity:.7}
.tier.featured .tier-name{color:var(--blue-600);opacity:1}
.tier h3{font-size:20px;font-weight:800;margin-bottom:14px}
.tier .price{font-family:'Archivo',sans-serif;font-size:30px;font-weight:800;line-height:1;margin-bottom:6px}
.tier .price small{font-size:.4em;font-weight:500;opacity:.7;margin-left:4px}
.tier .price-note{font-size:11px;opacity:.6;margin-bottom:20px}
.tier ul{list-style:none;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.tier.featured ul{border-top-color:var(--gray-100)}
.tier ul li{font-size:13px;padding:7px 0 7px 20px;position:relative;line-height:1.6;opacity:.9}
.tier ul li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:800}
.tier.featured ul li::before{color:var(--blue-600)}

/* FAQ accordion */
.sf-faq{max-width:900px;margin:0 auto}
.sf-faq-item{background:var(--white);border:1px solid rgba(30,84,196,.1);border-radius:14px;margin-bottom:12px;overflow:hidden}
.sf-faq-q{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;cursor:pointer;font-size:15px;font-weight:600;gap:16px;transition:background .2s}
.sf-faq-q:hover{background:var(--blue-50)}
.sf-faq-q::before{content:"Q";font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;color:var(--blue-700);background:var(--blue-50);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.sf-faq-q::after{content:"+";font-family:'Archivo',sans-serif;font-size:22px;font-weight:300;color:var(--blue-600);transition:transform .3s;flex-shrink:0}
.sf-faq-item.open .sf-faq-q::after{transform:rotate(45deg)}
.sf-faq-a{padding:0 28px 0 74px;max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.sf-faq-item.open .sf-faq-a{max-height:500px;padding:0 28px 22px 74px}
.sf-faq-a p{font-size:14px;color:var(--gray-700);line-height:2}

/* Related */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:0 auto}
.rel{padding:24px 28px;background:var(--white);border:1px solid rgba(30,84,196,.1);border-radius:14px;transition:all .3s;display:block}
.rel:hover{transform:translateY(-3px);border-color:var(--blue-500);box-shadow:0 20px 40px -20px rgba(30,84,196,.2)}
.rel-num{font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;color:var(--blue-500);letter-spacing:.15em;margin-bottom:6px}
.rel h4{font-size:15px;font-weight:700;margin-bottom:6px}
.rel p{font-size:12px;color:var(--gray-500);line-height:1.7}

/* CTA box */
.sub-cta{max-width:1280px;margin:0 auto;border-radius:28px;background:radial-gradient(800px 400px at 80% 0%,rgba(34,211,238,.22),transparent 60%),linear-gradient(135deg,var(--blue-800),var(--blue-600));padding:70px 60px;color:var(--white);display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.sub-cta h2{font-size:clamp(24px,2.6vw,36px);font-weight:800;line-height:1.35;margin-bottom:16px}
.sub-cta p{opacity:.85;font-size:15px;line-height:1.9}
.sub-cta-actions{display:flex;flex-direction:column;gap:12px}
.sub-cta-actions .btn{justify-content:center;padding:18px}
.sub-cta-actions .btn.white{background:var(--white);color:var(--blue-700)}
.sub-cta-actions .btn.outline{color:var(--white);border:1px solid rgba(255,255,255,.4);background:transparent}

/* Comparison */
.compare{max-width:1100px;margin:0 auto;background:var(--white);border:1px solid rgba(30,84,196,.1);border-radius:20px;overflow:hidden}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:18px 24px;text-align:left;font-size:14px;border-bottom:1px solid var(--gray-100)}
.compare thead th{background:var(--blue-50);color:var(--blue-700);font-weight:700;font-size:13px;letter-spacing:.03em}
.compare tbody th{font-weight:600;color:var(--ink);width:28%;background:rgba(242,247,255,.5)}
.compare td{color:var(--gray-700)}
.compare td.x{color:#C53D35}
.compare td.o{color:var(--blue-600);font-weight:700}

/* Responsive */
@media(max-width:960px){
  .subhero{padding:130px 20px 60px}
  .subhero-inner{grid-template-columns:1fr;gap:40px}
  .subhero-visual{aspect-ratio:4/3;max-height:400px}
  .subhero-bullets{grid-template-columns:1fr}
  .ps-grid,.menu-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .uc-grid,.rel-grid{grid-template-columns:1fr}
  .pricing{padding:40px 28px}
  .pricing-tiers{grid-template-columns:1fr}
  .vproc{padding-left:50px}
  .sub-cta{grid-template-columns:1fr;padding:40px 28px}
  .compare{overflow-x:auto}
  .compare table{min-width:600px}
}