/* NEXT Digital AI & Growth — Service Pages v3 */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body.service-page { background: var(--bg); }
.service-page main, .service-page section, .service-page .container { max-width:100%; }
.service-page .container > *, .service-page [class*="grid"] > * { min-width:0; }
.service-page img { max-width:100%; height:auto; }
.service-page a, .service-page button { -webkit-tap-highlight-color: transparent; }

.service-hero {
  position:relative; overflow:hidden; color:#fff;
  padding:56px 0 72px;
  background:
    radial-gradient(circle at 15% 0%, rgba(19,104,255,.20), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(255,216,61,.10), transparent 24%),
    linear-gradient(180deg,#081426 0%,#07111f 100%);
}
.service-hero::before {
  content:""; position:absolute; inset:0; opacity:.28; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px; mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);
}
.service-hero::after {
  content:""; position:absolute; width:620px; height:620px; right:-360px; bottom:-390px; border-radius:50%;
  border:1px solid rgba(255,255,255,.05); box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012); pointer-events:none;
}
.service-breadcrumbs { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:38px; color:#8397ad; font-size:.76rem; font-weight:700; }
.service-breadcrumbs a:hover { color:#fff; }
.service-breadcrumbs i { font-style:normal; color:#4d647b; }
.service-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:68px; align-items:center; }
.service-hero-copy { min-width:0; }
.service-overline { margin-bottom:10px; color:#ffd83d; font-size:.64rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.service-hero .eyebrow { margin-bottom:22px; }
.service-hero h1 { max-width:780px; margin:0 0 24px; color:#fff; font-size:clamp(3rem,5.2vw,5.55rem); line-height:.98; font-weight:800; letter-spacing:-.055em; }
.service-hero-lead { max-width:760px; margin:0; color:#b8c7d9; font-size:clamp(1.03rem,1.45vw,1.2rem); line-height:1.72; }
.service-hero-lead strong { color:#fff; }
.service-price-chips { display:flex; flex-wrap:wrap; gap:10px; margin:27px 0 30px; }
.service-price-chips span { display:inline-flex; align-items:center; gap:5px; min-height:39px; padding:8px 13px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:rgba(255,255,255,.055); color:#9eb1c5; font-size:.78rem; font-weight:750; }
.service-price-chips strong { color:#fff; }
.service-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.service-hero-proof { display:flex; flex-wrap:wrap; gap:17px; align-items:center; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.09); }
.service-hero-proof div { display:flex; flex-direction:column; }
.service-hero-proof strong { color:#fff; font-size:.88rem; }
.service-hero-proof span { color:#73889f; font-size:.67rem; }
.service-hero-proof i { width:1px; height:29px; background:rgba(255,255,255,.10); }

.service-hero-visual { position:relative; width:100%; max-width:570px; justify-self:end; }
.service-hero-visual .visual-frame { width:100%; border-radius:30px; box-shadow:0 35px 100px rgba(0,0,0,.38); }
.service-hero-visual .visual-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.service-status { position:absolute; z-index:6; top:-17px; left:-17px; display:flex; gap:10px; align-items:center; padding:11px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(6,16,29,.92); box-shadow:0 14px 35px rgba(0,0,0,.28); }
.service-status b { width:9px; height:9px; border-radius:50%; background:#ffd83d; box-shadow:0 0 0 6px rgba(255,216,61,.08); }
.service-status small,.service-status strong { display:block; }
.service-status small { color:#71869d; font-size:.55rem; font-weight:900; letter-spacing:.12em; }
.service-status strong { color:#fff; font-size:.72rem; letter-spacing:.03em; }
.service-signal-row { position:relative; z-index:5; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; width:calc(100% - 34px); margin:-22px auto 0; }
.service-signal-row span { display:grid; place-items:center; min-height:46px; padding:8px 9px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(7,17,31,.96); color:#9fb2c6; font-size:.62rem; font-weight:800; text-align:center; }
.service-hero-strip { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:50px; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:20px; background:rgba(255,255,255,.035); }
.service-hero-strip > div { padding:17px 21px; }
.service-hero-strip > div + div { border-left:1px solid rgba(255,255,255,.08); }
.service-hero-strip small,.service-hero-strip strong,.service-hero-strip span { display:block; }
.service-hero-strip small { margin-bottom:8px; color:#ffd83d; font-size:.58rem; font-weight:900; }
.service-hero-strip strong { color:#fff; font-size:.85rem; }
.service-hero-strip span { margin-top:2px; color:#74899e; font-size:.68rem; }

.service-section { padding:104px 0; }
.service-section-white { background:#fff; }
.service-section-soft { background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-section-dark { position:relative; overflow:hidden; background:radial-gradient(circle at 90% 0%,rgba(19,104,255,.16),transparent 28%),var(--dark); color:#fff; }
.service-section-dark h2 span { color:#72ddff; }
.service-section-dark p { color:#99aec3; }
.service-section-head { display:grid; grid-template-columns:1.08fr .92fr; align-items:end; gap:70px; margin-bottom:48px; }
.service-section-head h2 { margin:0; }
.service-section-head > p { margin:0; font-size:1rem; }
.service-intro-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:85px; align-items:start; }
.service-intro-grid h2 { margin:0; }
.service-rich-copy p { font-size:1.03rem; }
.service-rich-copy p:last-of-type { margin-bottom:0; }
.service-benefits { display:grid; gap:12px; margin-top:30px; }
.service-benefit { display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; padding:15px 0; border-top:1px solid #edf1f5; }
.service-benefit:first-child { border-top:0; }
.service-benefit > span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef4ff; color:var(--primary); font-size:.7rem; font-weight:900; }
.service-benefit strong { display:block; margin-bottom:3px; }
.service-benefit p { margin:0; font-size:.87rem; }

.service-deliverables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.service-deliverable { display:flex; flex-direction:column; min-height:260px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 10px 32px rgba(7,17,31,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.service-deliverable:hover { transform:translateY(-4px); border-color:#c9d9eb; box-shadow:0 20px 50px rgba(7,17,31,.08); }
.service-deliverable > span { margin-bottom:45px; color:var(--primary); font-size:.7rem; font-weight:900; letter-spacing:.08em; }
.service-deliverable h3 { font-size:1.08rem; }
.service-deliverable p { margin:0; font-size:.86rem; }

.service-usecases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.service-usecase { display:grid; grid-template-columns:48px 1fr; gap:17px; padding:27px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.service-usecase > span { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--dark); color:#ffd83d; font-size:.7rem; font-weight:900; }
.service-usecase h3 { margin-bottom:6px; font-size:1rem; }
.service-usecase p { margin:0; font-size:.85rem; }

.service-scope-grid { display:grid; grid-template-columns:1fr .82fr; gap:72px; align-items:start; }
.service-scope-list { display:grid; gap:8px; margin:27px 0 0; padding:0; list-style:none; }
.service-scope-list li { position:relative; padding:13px 15px 13px 43px; border:1px solid #d9e2ec; border-radius:12px; background:rgba(255,255,255,.72); color:#3f4f63; font-size:.88rem; font-weight:700; }
.service-scope-list li::before { content:"✓"; position:absolute; left:16px; top:12px; color:var(--primary); font-weight:900; }
.service-note { margin-top:18px; padding:16px 18px; border-left:3px solid var(--primary); border-radius:0 12px 12px 0; background:#edf4fb; color:#526378; font-size:.84rem; }
.service-price-card { position:sticky; top:calc(var(--header-h) + 24px); overflow:hidden; padding:31px; border-radius:26px; background:radial-gradient(circle at 90% 0%,rgba(255,216,61,.11),transparent 35%),var(--dark); color:#fff; box-shadow:var(--shadow-md); }
.service-price-card .price-label { border-color:rgba(255,255,255,.14); color:#ffd83d; }
.service-price-main { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:19px 0 10px; }
.service-price-main strong { color:#fff; font-size:3.05rem; line-height:1; letter-spacing:-.06em; }
.service-price-main span { color:#91a6bc; font-size:.78rem; }
.service-price-card p { color:#a1b3c5; font-size:.84rem; }
.service-price-card .btn { width:100%; margin-top:10px; }
.service-price-foot { margin-top:13px; color:#6f849a; font-size:.7rem; }

.service-process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.service-process article { min-height:245px; padding:25px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(255,255,255,.045); }
.service-process article > span { display:inline-block; margin-bottom:55px; color:#ffd83d; font-size:.7rem; font-weight:900; }
.service-process h3 { color:#fff; font-size:1rem; }
.service-process p { margin:0; color:#8fa5bb; font-size:.82rem; }

.service-faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:85px; align-items:start; }
.service-faq-intro { position:sticky; top:calc(var(--header-h) + 30px); }
.service-faq-intro a { color:var(--primary); font-weight:850; font-size:.88rem; }
.service-faq-list { border-top:1px solid var(--line); }
.service-faq-list details { border-bottom:1px solid var(--line); }
.service-faq-list summary { position:relative; padding:24px 44px 24px 0; cursor:pointer; list-style:none; font-size:1rem; font-weight:800; line-height:1.4; }
.service-faq-list summary::-webkit-details-marker { display:none; }
.service-faq-list summary::after { content:"+"; position:absolute; top:20px; right:1px; display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; color:var(--primary); }
.service-faq-list details[open] summary::after { transform:rotate(45deg); }
.service-faq-list p { max-width:760px; margin:0; padding:0 38px 23px 0; }

.service-related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.service-related article { display:flex; flex-direction:column; min-height:245px; padding:26px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(7,17,31,.04); }
.service-related small { margin-bottom:35px; color:var(--primary); font-size:.64rem; font-weight:900; letter-spacing:.1em; }
.service-related h3 { font-size:1.05rem; }
.service-related p { font-size:.83rem; }
.service-related a { margin-top:auto; color:var(--primary); font-size:.8rem; font-weight:850; }

@media (max-width:1100px) {
  .service-hero-grid,.service-intro-grid,.service-scope-grid,.service-faq-grid { grid-template-columns:1fr; gap:48px; }
  .service-hero-visual { max-width:720px; justify-self:start; }
  .service-section-head { grid-template-columns:1fr; gap:18px; }
  .service-deliverables { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-process { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-price-card,.service-faq-intro { position:static; }
}

@media (max-width:760px) {
  .service-hero { padding:34px 0 44px; }
  .service-breadcrumbs { gap:5px 7px; margin-bottom:28px; font-size:.66rem; line-height:1.5; }
  .service-overline { font-size:.58rem; }
  .service-hero .eyebrow { margin-bottom:18px; }
  .service-hero h1 { max-width:100%; font-size:clamp(2.42rem,11.6vw,3.45rem); line-height:1.01; letter-spacing:-.045em; }
  .service-hero-lead { max-width:100%; font-size:.98rem; line-height:1.67; }
  .service-price-chips { display:grid; grid-template-columns:1fr; gap:8px; margin:24px 0 26px; }
  .service-price-chips span { width:100%; max-width:100%; border-radius:13px; }
  .service-hero-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .service-hero-actions .btn { width:100%; max-width:100%; white-space:normal; text-align:center; }
  .service-hero-proof { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .service-hero-proof i { display:none; }
  .service-hero-proof div:last-child { grid-column:1/-1; }
  .service-hero-visual { width:100%; max-width:100%; margin-top:4px; }
  .service-status { position:static; width:100%; margin-bottom:10px; box-shadow:none; }
  .service-hero-visual .visual-frame { width:100%; max-width:100%; border-radius:22px; }
  .service-signal-row { width:100%; grid-template-columns:1fr; margin:8px 0 0; }
  .service-signal-row span { min-height:40px; }
  .service-hero-strip { grid-template-columns:1fr; margin-top:34px; border-radius:16px; }
  .service-hero-strip > div { padding:15px 17px; }
  .service-hero-strip > div + div { border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .service-section { padding:72px 0; }
  .service-section-head { margin-bottom:34px; }
  .service-deliverables,.service-usecases,.service-process,.service-related { grid-template-columns:1fr; }
  .service-deliverable,.service-process article,.service-related article { min-height:0; }
  .service-deliverable > span,.service-process article > span,.service-related small { margin-bottom:26px; }
  .service-usecase { grid-template-columns:42px 1fr; padding:22px; }
  .service-usecase > span { width:40px; height:40px; }
  .service-price-main { display:block; }
  .service-price-main strong,.service-price-main span { display:block; }
  .service-price-main strong { margin-bottom:7px; }
  .service-faq-list summary { font-size:.95rem; }
  .service-page .floating-actions { right:14px; bottom:14px; }
  .service-page .floating-contact-menu { right:0; left:auto; width:min(250px,calc(100vw - 28px)); max-width:calc(100vw - 28px); }
}