.devops-page{ background:#06070d; color:#e8ecf4; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
.devops-page .container{ width:min(1160px, 94vw); margin-inline:auto; }
.devops-section{ padding: clamp(2.2rem, 6vw, 3.8rem) 0; }
.devops-section h2{ font-size: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem); margin:.25rem 0 .5rem; line-height:1.2; }
.devops-section p{ color:#cfd6e3; margin:0 0 .9rem; }
.eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; color:#8bf0ff; font-weight:800; margin:0 0 .45rem; }
.lede,.section-lede{ font-size:1.05rem; max-width:54ch; }
.pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#e8ecf4; font-weight:700; }
.pill-row,.hero-pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.btn{ border-radius:12px; padding:.7rem 1.05rem; font-weight:800; text-decoration:none; border:1px solid #1f2635; background:#0c1020; color:#f4f7ff; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.btn.primary{ background:linear-gradient(135deg, #5ce6ff 0%, #4da3ff 50%, #ff5a8b 100%); border-color:transparent; color:#0a0c12; }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.22); }

.devops-hero{ position:relative; overflow:hidden; padding: clamp(2.4rem, 6vw, 4.4rem) 0; background: radial-gradient(1200px 520px at 16% 10%, rgba(93,211,255,.25), transparent 60%), radial-gradient(900px 480px at 80% 0%, rgba(255,90,141,.18), transparent 70%), #0a0d18; }
.devops-hero::after{ content:""; position:absolute; inset:15% -20% -40% auto; background: radial-gradient(520px 380px at 60% 0%, rgba(255,255,255,.08), transparent 60%); filter: blur(60px); opacity:.6; }
.hero-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:clamp(1.2rem, 3vw, 2.8rem); align-items:center; position:relative; z-index:1; }
.hero-copy h1{ font-size: clamp(2.2rem, 2.1rem + 1.2vw, 3rem); line-height:1.15; margin:.2rem 0 .6rem; }
.hero-copy .lede{ color:#dce5f6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0 1.2rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.2rem; }
.stat{ padding:.8rem 1rem; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); min-width:140px; box-shadow:0 14px 36px rgba(0,0,0,.3); }
.stat-number{ font-size:1.6rem; font-weight:900; color:#86f6ff; }
.stat-label{ color:#9ca8c3; font-size:.95rem; }

.hero-visual{ display:flex; justify-content:flex-end; }
.glass-card{ width:min(520px, 88vw); background:rgba(18,22,40,.78); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:1.1rem; backdrop-filter: blur(12px); box-shadow:0 25px 70px rgba(0,0,0,.35); }
.muted-label{ color:#9cb3c9; font-size:.82rem; letter-spacing:.02em; margin:0 0 .35rem; display:block; font-weight:700; }
.pipeline-list{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; }
.pipeline-list li{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.65rem .75rem; font-weight:700; color:#e8ecf4; display:flex; align-items:center; gap:.45rem; }
.status{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.status.success{ background:#5ef6a3; box-shadow:0 0 0 6px rgba(94,246,163,.12); }
.status.pending{ background:#f6d35e; box-shadow:0 0 0 6px rgba(246,211,94,.12); }
.status.warning{ background:#ff6b6b; box-shadow:0 0 0 6px rgba(255,107,107,.12); }
.status.info{ background:#6bb9ff; box-shadow:0 0 0 6px rgba(107,185,255,.12); }
.chart{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; margin:1rem 0; }
.chart .bar{ height:90px; border-radius:12px; background:linear-gradient(180deg, #5ce6ff 0%, rgba(92,230,255,.15) 100%); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.chart .bar.b{ height:120px; background:linear-gradient(180deg, #82b5ff 0%, rgba(130,181,255,.15) 100%); }
.chart .bar.c{ height:75px; background:linear-gradient(180deg, #ff8fb8 0%, rgba(255,143,184,.12) 100%); }
.chart .bar.d{ height:140px; background:linear-gradient(180deg, #5ef6a3 0%, rgba(94,246,163,.16) 100%); }
.mini-cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.7rem; }
.mini{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.75rem; box-shadow:0 12px 26px rgba(0,0,0,.22); }
.mini strong{ display:block; font-size:1.05rem; }
.mini span{ color:#93a2c0; }

.pillars .card{ background:#0d111f; border:1px solid #1f2636; border-radius:16px; padding:1rem; box-shadow:0 16px 40px rgba(0,0,0,.35); }
.pillars .card h3{ margin:.1rem 0 .3rem; font-size:1.2rem; }
.pillars .card p{ color:#cfd6e3; }
.checklist{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.25rem; color:#b8c3d9; }
.checklist li::before{ content:"✔"; color:#6ef6b5; margin-right:.45rem; }

.split-section .split{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:clamp(1rem, 2.6vw, 2.6rem); align-items:center; }
.split-section img{ width:100%; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.35); }

.automation .grid4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; }
.pack{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.9rem; min-height:140px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.pack strong{ display:block; font-size:1.1rem; margin:.2rem 0; }
.pack span{ color:#9fb1cd; }

.compliance .shield-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:1.1rem; box-shadow:0 16px 36px rgba(0,0,0,.35); max-width:320px; }
.shield-icon{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, #5ce6ff, #ff8fb8); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.6rem; }
.control-row{ display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#d9e2f4; margin-bottom:.35rem; }

.quote{ background:#0c101e; }
.quote-card{ border:1px solid #1f2735; border-radius:18px; padding:1.6rem; background:linear-gradient(145deg, rgba(92,230,255,.06), rgba(12,16,30,.9)); box-shadow:0 20px 48px rgba(0,0,0,.35); }
.quote-text{ font-size:1.15rem; line-height:1.5; margin:0 0 1rem; color:#e9f1ff; }
.quote-meta{ display:flex; align-items:center; gap:.8rem; color:#cbd6ea; }
.quote-meta img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.18); }

.final-cta{ padding-bottom:4rem; }
.cta-card{ background:linear-gradient(125deg, #0f1629, #151c30 50%, #0f121d); border:1px solid #212a3d; border-radius:20px; padding:1.6rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; box-shadow:0 18px 46px rgba(0,0,0,.35); flex-wrap:wrap; }
.cta-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

@media (max-width: 980px){
  .hero-grid,.split-section .split{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; justify-content:center; }
  .automation .grid4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .glass-card{ margin-bottom:1rem; }
}

@media (max-width: 680px){
  .automation .grid4{ grid-template-columns:1fr; }
  .hero-stats{ gap:.8rem; }
  .stat{ min-width:120px; }
  .quote-card{ padding:1.3rem; }
  .btn{ width:100%; justify-content:center; text-align:center; }
  .hero-actions{ flex-direction:column; }
}