/* =========================================================
   Shadownic Soft — Design Tokens
   Palette: ink navy, warm paper, circuit teal, signal amber
   Type: Space Grotesk (display), IBM Plex Sans (body), IBM Plex Mono (system labels)
   ========================================================= */

:root {
  --ink: #10161f;
  --ink-soft: #1b2432;
  --paper: #f3f4ef;
  --paper-dim: #e9eae3;
  --teal: #0e7c86;
  --teal-deep: #0a5c64;
  --amber: #e8a33d;
  --slate: #5b6472;
  --slate-light: #8991a0;
  --line: #d9dbd2;
  --line-dark: #2a3444;
  --white: #ffffff;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max-width: 1180px;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ink); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .9em;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}

.lede {
  font-size: 1.1rem;
  color: var(--slate);
  max-width: 640px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn-outline { border-color: var(--line-dark); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-deep); }
.btn-on-dark { border-color: rgba(243,244,239,.35); color: var(--paper); }
.btn-on-dark:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- Top status strip ---------- */
.status-strip {
  background: var(--ink);
  color: var(--slate-light);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-dark);
}
.status-strip .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}
.status-strip .modules { display: flex; gap: 18px; overflow: hidden; }
.status-strip .modules span::before {
  content: "●";
  color: var(--teal);
  margin-right: 6px;
  font-size: .6rem;
}
.status-strip .contact-line { display: flex; gap: 18px; color: var(--paper-dim); }
.status-strip a:hover { color: var(--amber); }

/* ---------- Header / Nav ---------- */
header.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  border-radius: var(--radius);
}
.brand .mark span { color: var(--amber); }

nav.main-nav { display: flex; align-items: center; gap: 4px; }
nav.main-nav > ul { display: flex; align-items: center; gap: 2px; }
nav.main-nav > ul > li { position: relative; }
nav.main-nav > ul > li > a {
  display: block;
  padding: 10px 14px;
  font-size: .92rem;
  font-weight: 500;
  border-radius: var(--radius);
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a { color: var(--teal-deep); background: var(--paper-dim); }

nav.main-nav .dropdown { position: relative; }
nav.main-nav .dropdown .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--line);
  min-width: 260px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .15s ease;
  box-shadow: 0 14px 30px rgba(16,22,31,.12);
  border-radius: var(--radius);
}
nav.main-nav .dropdown:hover .submenu,
nav.main-nav .dropdown:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
nav.main-nav .submenu a {
  display: block;
  padding: 9px 12px;
  font-size: .88rem;
  border-radius: var(--radius);
}
nav.main-nav .submenu a:hover { background: var(--paper-dim); color: var(--teal-deep); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

.mobile-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: 90px 0 70px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,124,134,.35), transparent 70%);
}
.hero .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero p.lede { color: var(--paper-dim); }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-panel {
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.hero-panel .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line-dark); color: var(--paper-dim); }
.hero-panel .row:last-child { border-bottom: none; }
.hero-panel .row b { color: var(--paper); font-weight: 500; }
.hero-panel .status-ok { color: #4fd1a5; }

/* ---------- Section scaffolding ---------- */
section { padding: 74px 0; }
section.tight { padding: 48px 0; }
section.on-dark { background: var(--ink); color: var(--paper); }
section.on-dark .eyebrow { color: var(--amber); }
section.on-dark p { color: var(--paper-dim); }
section.on-panel { background: var(--paper-dim); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--teal); transform: translateY(-3px); }
.card .index { font-family: var(--font-mono); font-size: .74rem; color: var(--slate-light); margin-bottom: 12px; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--slate); font-size: .95rem; margin-bottom: .8em; }
.card a.card-link { font-family: var(--font-mono); font-size: .78rem; color: var(--teal-deep); text-transform: uppercase; letter-spacing: .04em; }
.card a.card-link:hover { color: var(--amber); }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-mono);
  font-size: .74rem;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--slate);
}

.feature-list li, .check-list li {
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.feature-list li:last-child, .check-list li:last-child { border-bottom: none; }
.feature-list li::before, .check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-size: .8rem;
}

.on-dark .feature-list li, .on-dark .check-list li { border-color: var(--line-dark); }

/* ---------- Stats strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.stat-strip .stat { padding: 26px; border-left: 1px solid var(--line-dark); }
.stat-strip .stat:first-child { border-left: none; }
.stat-strip .stat b { font-family: var(--font-display); font-size: 1.9rem; display: block; color: var(--paper); }
.stat-strip .stat span { font-family: var(--font-mono); font-size: .74rem; color: var(--slate-light); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Numbered process ---------- */
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.process-list .step { border-top: 2px solid var(--teal); padding-top: 14px; }
.process-list .num { font-family: var(--font-mono); color: var(--slate-light); font-size: .8rem; }

/* ---------- Table-ish content blocks ---------- */
.info-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.info-table th, .info-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.info-table th { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--slate-light);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.breadcrumb a:hover { color: var(--teal-deep); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; grid-column: span 1; }
.form-field.full { grid-column: span 2; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--slate);
  margin-bottom: 6px;
}
.form-field input, .form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.alert-success {
  background: #e7f5ee;
  border: 1px solid #9fd8bb;
  color: #14533a;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: .92rem;
}
.error-list {
  background: #fbeaea;
  border: 1px solid #edb3b3;
  color: #7a1f1f;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: .88rem;
}
.error-list li { padding: 2px 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--teal);
  color: var(--white);
  padding: 54px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band .btn-primary { background: var(--ink); }
.cta-band .btn-outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.cta-band .btn-outline:hover { border-color: var(--white); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--paper-dim);
  padding: 60px 0 24px;
  border-top: 1px solid var(--line-dark);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h4 { color: var(--paper); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.footer-grid li { margin-bottom: 9px; font-size: .9rem; }
.footer-grid a:hover { color: var(--amber); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--slate-light);
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Blog / Case study article ---------- */
.article-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body p { color: var(--ink); font-size: 1.02rem; }
.meta-row { font-family: var(--font-mono); font-size: .76rem; color: var(--slate-light); display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .form-grid, .process-list { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  nav.main-nav { display: none; }
  .status-strip .modules { display: none; }
  .form-field.full { grid-column: span 1; }
}

/* CMS / Admin */
.brand img{max-height:42px;max-width:150px;object-fit:contain;display:block}.admin-auth{min-height:100vh;display:grid;place-items:center;background:#0d1720;padding:24px}.login-card{width:min(460px,100%);background:#fff;padding:38px;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.login-card h1{margin:22px 0 8px}.login-card p{color:#64748b}.login-card label,.admin-form label{display:block;font-weight:600;margin:0 0 16px}.login-card input,.admin-form input,.admin-form textarea{width:100%;margin-top:7px;padding:12px 13px;border:1px solid #d8e0e7;border-radius:9px;font:inherit;background:#fff}.admin-shell{display:flex;min-height:100vh;background:#f4f7f9}.admin-sidebar{width:250px;background:#0d1720;color:#fff;padding:26px 18px;position:fixed;inset:0 auto 0 0}.admin-brand{font-weight:700;font-size:1.15rem;display:flex;gap:10px;align-items:center;margin-bottom:28px}.admin-sidebar nav{display:grid;gap:5px}.admin-sidebar nav a,.admin-sidebar .logout button{color:#d8e2ea;text-decoration:none;padding:11px 12px;border-radius:8px;background:transparent;border:0;text-align:left;font:inherit;cursor:pointer}.admin-sidebar nav a:hover,.admin-sidebar .logout button:hover{background:#182733;color:#fff}.admin-sidebar .logout{position:absolute;bottom:20px;left:18px;right:18px}.admin-main{margin-left:250px;width:calc(100% - 250px);padding:36px;max-width:1500px}.admin-top{margin-bottom:25px}.admin-top h1{margin:4px 0 0}.admin-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}.admin-card,.admin-panel{background:#fff;border:1px solid #e2e8ee;border-radius:14px;padding:22px;box-shadow:0 5px 18px rgba(20,40,60,.04)}.admin-card{display:grid;gap:8px;text-decoration:none;color:inherit}.admin-card b{font-size:2rem}.admin-card small,.muted{color:#64748b}.admin-panel{margin-bottom:22px}.admin-panel h2{margin-top:0}.admin-actions,.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}.admin-thumb{display:block;margin-top:10px;max-width:180px;max-height:80px;object-fit:contain;border:1px solid #ddd;padding:5px;border-radius:6px}.admin-thumb.small{max-width:64px;max-height:64px}.alert{padding:12px 15px;border-radius:9px;margin-bottom:18px}.alert.success{background:#e9f8ef;color:#17663b}.alert.error{background:#fff0f0;color:#9b1c1c}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{text-align:left;padding:13px;border-bottom:1px solid #edf1f4;vertical-align:middle}.row-actions{display:flex;gap:10px;align-items:center}.row-actions form button{border:0;background:none;color:#b42318;cursor:pointer}.status-pill{font-size:.78rem;padding:4px 8px;border-radius:99px}.status-pill.published{background:#e7f7ee;color:#16794c}.status-pill.draft{background:#f1f3f5;color:#64748b}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto!important;margin:0!important}
@media(max-width:900px){.admin-sidebar{position:static;width:100%;min-height:auto}.admin-shell{display:block}.admin-main{margin:0;width:100%;padding:20px}.admin-sidebar nav{grid-template-columns:repeat(2,1fr)}.admin-sidebar .logout{position:static;margin-top:10px}.admin-cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}@media(max-width:600px){.admin-cards{grid-template-columns:1fr}.admin-toolbar{align-items:flex-start;flex-direction:column}}

/* ===================== 2026 PROFESSIONAL UI UPGRADE ===================== */
:root{--accent:#11a6a8;--accent-dark:#087b7e;--accent-soft:#e8f8f7;--navy:#07151f;--navy-2:#0d2230;--muted:#647481;--border:#e4eaee;--soft:#f6f9fa;--shadow:0 18px 50px rgba(7,21,31,.08)}
body{font-family:'DM Sans',sans-serif;background:#fff;color:#10212b}
h1,h2,h3,h4,.brand{font-family:'Space Grotesk',sans-serif}
.wrap{max-width:1240px}
.btn{border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.02em;text-transform:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(17,166,168,.18)}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-outline{border-color:#bdcbd2}
.status-strip{background:#06131c}
.status-inner{min-height:36px}
.site-header{backdrop-filter:blur(14px);background:rgba(255,255,255,.94)!important}
.nav-row{padding:15px 0}
.brand{font-size:1.2rem}
.brand .mark{background:var(--navy);border-radius:8px}
.main-nav > ul > li > a{font-weight:600}
.hero-modern{padding:105px 0 85px;min-height:660px;background:linear-gradient(135deg,#07151f 0%,#0a202d 58%,#08383b 100%);border:0}
.hero-grid-pattern{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,#000,transparent)}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:1}
.hero-copy h1{font-size:clamp(3rem,5.5vw,5rem);line-height:1.02;max-width:760px;letter-spacing:-.055em;margin-bottom:22px}
.hero-copy .lede{font-size:1.18rem;line-height:1.8;max-width:670px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;color:#b9cbd3;font-size:.86rem}
.hero-trust span{display:inline-flex;gap:6px}
.hero-visual{position:relative}
.system-window{background:rgba(7,21,31,.76);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px;box-shadow:0 35px 80px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.window-bar{height:32px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.09);color:#7f99a5;font-size:.68rem;padding:0 4px}
.window-bar span{width:8px;height:8px;border-radius:50%;background:#506773}.window-bar b{margin-left:auto;font-size:.62rem;letter-spacing:.1em}
.system-head{display:flex;justify-content:space-between;align-items:flex-end;padding:25px 12px 18px}.system-head small{display:block;color:#6f8c99;font-size:.65rem;letter-spacing:.12em}.system-head strong{display:block;color:#fff;font-size:1.1rem;margin-top:5px}.system-head i{font-style:normal;font-size:.65rem;color:#5ce1b6}
.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.system-card{display:flex;align-items:center;gap:10px;padding:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:10px}.system-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#0c3842;color:#6fe5df;font-size:.72rem}.system-card b{display:block;color:#e9f5f7;font-size:.72rem}.system-card small{display:block;color:#66818e;font-size:.6rem;margin-top:3px}.system-card em{margin-left:auto;color:#4fd1a5;font-style:normal}.system-footer{display:flex;justify-content:space-between;color:#64818e;font-size:.65rem;padding:15px 5px 2px}
.section-soft{background:var(--soft)}
.section-head{max-width:760px}.section-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em}.section-head.small h2{font-size:2rem}
.service-grid .card,.portfolio-card,.solution-card,.blog-card,.value-card{position:relative;overflow:hidden}
.card{border-radius:14px;box-shadow:0 4px 20px rgba(7,21,31,.035);padding:30px}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#9adbdc}
.card-top{display:flex;justify-content:space-between;margin-bottom:20px}.mini-arrow{color:var(--accent);font-size:1.2rem}.service-card h3{min-height:52px}.service-tags{margin:18px 0}.service-card .tag{background:#f7fafb}
.tag{border-color:#dbe5e9}
.stats-section{padding:0}.stats-section .stat-strip{border:0}.stats-section .stat{padding:34px 26px}
.value-number,.article-number,.solution-index{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.08em;margin-bottom:20px}
.process-modern{gap:0}.process-modern .step{border-top:1px solid #cbd8dd;border-right:1px solid #dce5e9;padding:30px 28px;min-height:210px}.process-modern .step:first-child{border-top:3px solid var(--accent)}.process-modern .num{color:var(--accent);font-weight:700}.process-modern h3{margin-top:18px}
.feature-list.compact li{padding:7px 0 7px 22px;font-size:.88rem}
.project-label{font-size:.67rem;font-weight:700;letter-spacing:.12em;color:var(--accent-dark);text-transform:uppercase;margin-bottom:16px}
.page-hero{background:linear-gradient(180deg,#f6fafb 0%,#fff 100%);padding:80px 0 55px;border-bottom:1px solid var(--border)}.page-hero-inner{max-width:900px}.page-hero h1{font-size:clamp(2.7rem,5vw,4.6rem);letter-spacing:-.05em}.page-hero .lede{font-size:1.12rem}
.story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:start}.rich-copy{font-size:1.08rem;line-height:1.9}.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.expertise-item{padding:20px;background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;gap:10px;align-items:flex-start}.expertise-item span{color:var(--accent);font-weight:800}.mission-card{padding:38px;border:1px solid var(--border);border-radius:16px;background:#fff}.mission-card.dark,.dark-card{background:var(--navy);color:#fff;border-color:var(--navy)}.dark-card p,.mission-card.dark p{color:#b9cbd3}.mission-card .eyebrow,.dark-card .eyebrow{color:var(--accent)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 22px}.faq-item summary{list-style:none;cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:20px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary span{color:var(--accent);font-size:1.2rem}.faq-item p{padding-top:15px;margin:0;color:var(--muted)}
.cta-modern{padding:60px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta-inner .eyebrow{color:rgba(255,255,255,.72)}.cta-inner h2{margin-bottom:8px}.cta-inner p{margin:0}
.contact-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:70px}.contact-sidebar{display:grid;gap:14px;align-content:start}.contact-card{display:block;background:#fff;border:1px solid var(--border);padding:25px;border-radius:14px;transition:.2s}.contact-card:hover{border-color:#91d7d8;transform:translateY(-2px)}.contact-card span{display:block;font-size:.65rem;color:var(--accent-dark);font-weight:800;letter-spacing:.12em;margin-bottom:8px}.contact-card strong{display:block;font-family:'Space Grotesk';font-size:1.05rem;margin-bottom:8px}.contact-card b{color:var(--muted);font-weight:500}
.footer-brand .brand{color:#fff;margin-bottom:18px}.footer-brand p{color:#93a7b1;max-width:340px}.footer-social{display:flex;gap:10px;flex-wrap:wrap}.footer-social a{border:1px solid #2a3c46;border-radius:99px;padding:6px 10px;font-size:.75rem}
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.chat-label{background:#fff;border:1px solid #e2e8eb;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:10px;padding:8px 12px;font-size:.75rem;font-weight:700;color:#334751}.chat-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.55rem;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:.2s}.chat-btn:hover{transform:scale(1.08);color:#fff}.chat-btn.whatsapp{background:#25d366}.chat-btn.messenger{background:#168aff}
.mobile-menu-btn,.mobile-nav{display:none}

/* Admin redesign */
.admin-shell{background:#f5f8fa}.admin-sidebar{width:270px;background:linear-gradient(180deg,#07151f,#0b202b);padding:22px 16px;box-shadow:10px 0 40px rgba(4,16,24,.08);overflow:auto}.admin-brand{padding:8px 8px 22px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px}.admin-brand img{max-width:130px;max-height:38px}.admin-brand strong{display:block;font-family:'Space Grotesk';font-size:1rem}.admin-brand small{display:block;color:#718c99;font-size:.56rem;letter-spacing:.12em;margin-top:3px}.admin-nav-label{font-size:.6rem;letter-spacing:.14em;color:#617d8a;text-transform:uppercase;padding:15px 10px 7px}.admin-sidebar nav a,.admin-sidebar .logout button{padding:10px 11px;color:#b9cbd3;border-radius:8px;font-size:.82rem;display:flex;align-items:center;gap:10px}.admin-sidebar nav a span,.admin-sidebar .logout button span{width:18px;text-align:center;color:#6c8b98}.admin-sidebar nav a.current,.admin-sidebar nav a:hover,.admin-sidebar .logout button:hover{background:#12313d;color:#fff}.admin-sidebar nav a.current span{color:#57d5d2}.admin-main{padding:35px 40px;max-width:none}.admin-top{display:flex;justify-content:space-between;align-items:flex-end}.admin-preview{background:#fff;border:1px solid var(--border);padding:9px 13px;border-radius:8px;font-size:.78rem;font-weight:700}.admin-top h1{font-size:2.3rem}.dashboard-welcome{background:linear-gradient(135deg,#0a202c,#0d3b42);color:#fff;border-radius:18px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:30px;box-shadow:0 20px 55px rgba(7,21,31,.14)}.dashboard-welcome h2{font-size:2rem;margin:3px 0 8px}.dashboard-welcome p{color:#afc2cb;max-width:720px;margin:0}.dashboard-welcome .eyebrow{color:#73dfdc}.admin-section-title{display:flex;justify-content:space-between;align-items:center;margin:25px 0 12px;font-family:'Space Grotesk';font-weight:700}.admin-section-title small{font-family:'DM Sans';font-weight:500;color:#71828b}.page-cards{grid-template-columns:repeat(3,minmax(0,1fr));}.page-card{min-height:125px}.card-icon{width:34px;height:34px;border-radius:9px;background:#eaf8f7;color:var(--accent-dark);display:grid;place-items:center;font-weight:800}.admin-card strong{font-family:'Space Grotesk'}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.quick-links{display:grid;gap:8px}.quick-links a{padding:15px;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column}.quick-links span{color:#74838c;font-size:.82rem;margin-top:3px}.admin-page-intro{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.admin-page-intro p{margin:0;color:#596d78}.admin-save-hint{font-size:.75rem;color:#8a9aa2}.live-status{background:#e9f8ef;color:#16794c;padding:7px 10px;border-radius:99px;font-size:.72rem;font-weight:700}.live-status i{display:inline-block;width:7px;height:7px;background:#2bc57b;border-radius:50%;margin-right:5px}.page-module{padding:25px 28px}.module-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.module-heading>div{display:flex;align-items:center;gap:12px}.module-heading h2{margin:0;font-size:1.25rem}.module-number{font-size:.7rem;font-weight:800;color:var(--accent);background:#eaf8f7;border-radius:7px;padding:6px 8px}.module-badge{font-size:.68rem;color:#647481;border:1px solid var(--border);padding:5px 9px;border-radius:99px}.admin-form label>span:first-child{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#647481;font-weight:800;margin-bottom:6px}.admin-form input,.admin-form textarea{border-radius:9px;border-color:#d8e3e8;background:#fbfdfe}.admin-form input:focus,.admin-form textarea:focus{border-color:var(--accent);outline:2px solid rgba(17,166,168,.12)}.toggle-row{display:flex!important;align-items:center;gap:10px!important;text-transform:none!important;letter-spacing:0!important;color:#243943!important}.toggle-row input{width:20px!important;margin:0!important}.admin-form-actions{display:flex;gap:10px;margin:5px 0 30px}.admin-actions{margin-bottom:18px}
@media(max-width:1050px){.hero-layout,.story-grid,.contact-layout{grid-template-columns:1fr}.hero-visual{max-width:760px}.expertise-grid{grid-template-columns:repeat(2,1fr)}.page-cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.main-nav{display:none!important}.mobile-menu-btn{display:block;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:1rem}.nav-cta .btn{display:none}.mobile-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--border);box-shadow:0 15px 30px rgba(0,0,0,.08);padding:10px}.menu-open .mobile-nav{display:grid}.mobile-nav a{padding:13px 20px;border-radius:8px;font-weight:600}.mobile-nav a:hover{background:var(--soft);color:var(--accent-dark)}}
@media(max-width:700px){.hero-modern{padding:75px 0 60px}.hero-copy h1{font-size:2.75rem}.system-grid,.faq-grid,.expertise-grid,.page-cards{grid-template-columns:1fr}.cta-inner,.dashboard-welcome,.admin-page-intro{flex-direction:column;align-items:flex-start}.stats-section .stat-strip{grid-template-columns:1fr 1fr}.stats-section .stat{padding:22px 15px}.footer-grid{grid-template-columns:1fr 1fr}.admin-main{padding:24px 18px}.admin-sidebar nav{grid-template-columns:1fr}.admin-sidebar{position:static;width:100%;max-height:none}.admin-sidebar .logout{position:static}.chat-label{display:none}.chat-widget{right:14px;bottom:14px}.chat-btn{width:50px;height:50px}}

/* ===================== SERVICE DETAIL & CMS POLISH ===================== */
.service-detail-hero{background:linear-gradient(135deg,#07151f 0%,#0b2832 62%,#0b4b4b 100%);color:#fff;padding:92px 0 82px;position:relative;overflow:hidden}
.service-detail-hero:after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(17,166,168,.28),transparent 68%)}
.service-detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:65px;align-items:center;position:relative;z-index:1}
.service-detail-hero h1{font-size:clamp(2.8rem,5vw,4.8rem);letter-spacing:-.05em;margin-bottom:18px;color:#fff}
.service-detail-hero .eyebrow{color:#72e0dc}
.service-detail-hero .lede{color:#c1d0d6;max-width:760px}
.service-tagline{font-size:1.2rem;color:#e9f6f6;max-width:720px;margin-bottom:10px;font-weight:600}
.service-hero-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:30px;backdrop-filter:blur(10px);box-shadow:0 25px 60px rgba(0,0,0,.22)}
.service-hero-panel strong{display:block;font-family:'Space Grotesk';font-size:1.25rem;line-height:1.35;color:#fff;margin-top:8px}
.panel-label{font-size:.64rem;letter-spacing:.14em;color:#72e0dc;font-weight:800}
.panel-line{height:1px;background:rgba(255,255,255,.13);margin:24px 0}
.panel-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.panel-tags span{font-size:.7rem;color:#d2e0e4;border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:7px 10px}
.service-overview{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.rich-copy p{font-size:1.12rem;line-height:1.9;color:#435761}
.capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.capability-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;gap:17px;align-items:flex-start;transition:.2s}.capability-card:hover{transform:translateY(-3px);border-color:#9adbdc;box-shadow:var(--shadow)}.capability-icon{flex:0 0 38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;font-size:.68rem;font-weight:800}.capability-card h3{font-size:1rem;margin-bottom:5px}.capability-card p{font-size:.84rem;color:var(--muted);margin:0}.service-info-card{padding:32px;border:1px solid var(--border);border-radius:16px;background:#fff}.service-info-card h2{font-size:1.7rem}.service-info-card.dark-card{background:var(--navy)}.service-info-card.dark-card .tag{color:#dce9ec;border-color:#35505b}.service-benefits-layout{align-items:center}.benefit-grid{display:grid;gap:10px}.benefit-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-weight:600;display:flex;gap:12px;align-items:flex-start}.benefit-item span{color:var(--accent);font-weight:900}.centered-tags{justify-content:center;max-width:850px;margin:auto}.service-process .step p{color:#9fb4bd;font-size:.85rem;margin-top:12px}.service-process .step{min-height:190px}.services-landing-hero{padding-bottom:65px}.services-landing-hero .hero-actions{margin-top:26px}
.admin-help{font-size:.82rem;color:#6f8089;line-height:1.65;margin:-5px 0 18px}.admin-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.admin-form .field-full{grid-column:1/-1}.admin-form .field-card{border:1px solid var(--border);border-radius:12px;padding:18px;background:#fbfdfe}.admin-form .field-card label{margin-bottom:0}.admin-form .field-card .field-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#526873;font-weight:800;margin-bottom:7px}.admin-form .structured-editor{min-height:270px;font-family:'DM Sans',sans-serif;line-height:1.7}.admin-form .content-header{display:grid;grid-template-columns:1fr 260px;gap:18px}.admin-form .content-header .admin-panel{margin-bottom:0}.admin-form .content-header label{margin-bottom:0}
@media(max-width:900px){.service-detail-grid,.service-overview{grid-template-columns:1fr}.capability-grid{grid-template-columns:1fr}.admin-form .field-grid,.admin-form .content-header{grid-template-columns:1fr}}


/* =========================================================
   Shadownic Soft — Professional Experience Layer
   ========================================================= */
:root{
  --accent:#13a6a8;--accent-dark:#087d82;--navy:#07141d;--navy-2:#0d2734;
  --soft:#eef5f6;--border:#dbe6ea;--text:#172630;--muted:#657783;
  --shadow-sm:0 8px 28px rgba(7,24,34,.06);--shadow-md:0 20px 55px rgba(7,24,34,.10);
}
body{background:#f7fafb;color:var(--text)}
::selection{background:rgba(19,166,168,.2);color:var(--navy)}
.site-header{backdrop-filter:blur(14px);background:rgba(247,250,251,.92)!important}
.brand{font-weight:800;letter-spacing:-.025em}.brand img{max-height:42px;width:auto}.brand .mark{box-shadow:0 8px 20px rgba(19,166,168,.16)}
.main-nav a{transition:color .18s ease,transform .18s ease}.main-nav a:hover{transform:translateY(-1px)}
.btn{border-radius:10px;font-weight:800;box-shadow:none}.btn-primary{background:linear-gradient(135deg,var(--navy),#123746);box-shadow:0 10px 24px rgba(7,20,29,.14)}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-dark),#0b6d73);box-shadow:0 14px 30px rgba(19,166,168,.18)}
.hero-modern{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 22%,rgba(19,166,168,.18),transparent 30%),linear-gradient(135deg,#07151f 0%,#0a2732 58%,#0d3d43 100%)}
.hero-modern:after{content:"";position:absolute;inset:auto -10% -35% auto;width:520px;height:520px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018);pointer-events:none}
.hero-copy h1{font-weight:750;letter-spacing:-.045em}.hero-copy .lede{color:#c5d6dc}.hero-trust{margin-top:25px;display:flex;flex-wrap:wrap;gap:10px}.hero-trust span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);border-radius:999px;padding:8px 11px;color:#c9d9de;font-size:.72rem;font-weight:700}
.system-window{border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 35px 90px rgba(0,0,0,.28)!important;background:rgba(7,22,31,.68)!important;backdrop-filter:blur(18px)}
.section-soft{background:#f0f6f7!important}.card,.service-info-card,.service-hero-panel{border-radius:16px!important;box-shadow:var(--shadow-sm);border-color:var(--border)!important}.card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#c5dadd!important}
.service-card{min-height:320px;display:flex;flex-direction:column}.service-card .card-link{margin-top:auto}.feature-list li{position:relative}.feature-list li:before{color:var(--accent)!important}
.page-hero,.service-detail-hero{background:radial-gradient(circle at 85% 20%,rgba(19,166,168,.12),transparent 28%),linear-gradient(135deg,#f7fafb,#eaf3f5)!important}.service-detail-hero{padding-top:85px!important;padding-bottom:85px!important}
.service-detail-hero h1{font-size:clamp(2.7rem,5vw,4.8rem);letter-spacing:-.05em}.service-tagline{font-size:1.25rem;font-weight:700;color:#38515d;max-width:760px}
.capability-card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);transition:.2s ease}.capability-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cta-band{background:linear-gradient(135deg,#07151f,#0b3a43)!important}.cta-band h2{color:#fff}.cta-band p{color:#bfd0d6}.cta-band .eyebrow{color:#7be0dd}
.site-footer{background:linear-gradient(180deg,#06131b,#071b25)!important;color:#d7e3e7}.site-footer p,.site-footer li{color:#9fb2ba}.site-footer h4{color:#fff}.site-footer a:hover{color:#74dedb}.footer-logo-link{display:inline-flex;align-items:center;min-height:48px;margin-bottom:16px}.footer-logo-image{max-width:190px;max-height:54px;width:auto;object-fit:contain;object-position:left center}.footer-signature{color:#78909b!important}
.chat-widget{filter:drop-shadow(0 12px 25px rgba(0,0,0,.18))}.chat-btn{transition:transform .18s ease,box-shadow .18s ease}.chat-btn:hover{transform:translateY(-3px) scale(1.04)}

/* Admin — product-like control center */
.admin-shell{background:#f3f7f9}.admin-sidebar{background:linear-gradient(180deg,#06151f 0%,#082631 55%,#071b25 100%)!important;border-right:1px solid rgba(255,255,255,.06);box-shadow:16px 0 45px rgba(4,17,25,.09)!important}.admin-brand{padding:10px 10px 24px}.admin-brand img{max-height:44px;max-width:150px;object-fit:contain}.admin-brand strong{color:#fff;font-size:1.05rem}.admin-brand small{color:#6f929e}.admin-nav-label{color:#62838e!important;font-weight:800}.admin-sidebar nav a,.admin-sidebar .logout button{border:1px solid transparent;transition:.18s ease}.admin-sidebar nav a.current{background:linear-gradient(135deg,rgba(19,166,168,.2),rgba(19,166,168,.08))!important;border-color:rgba(19,166,168,.18);box-shadow:inset 3px 0 0 var(--accent)}
.admin-main{background:radial-gradient(circle at 100% 0%,rgba(19,166,168,.06),transparent 25%)}.admin-top{margin-bottom:30px}.admin-top h1{font-size:2.45rem;letter-spacing:-.04em}.admin-preview{border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);transition:.18s ease}.admin-preview:hover{border-color:#b9d8da;transform:translateY(-1px)}
.dashboard-welcome{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 20%,rgba(19,166,168,.2),transparent 30%),linear-gradient(135deg,#06151f,#0c3540)!important;border:1px solid rgba(255,255,255,.05);box-shadow:0 25px 65px rgba(5,24,33,.14)!important}.dashboard-welcome:after{content:"";position:absolute;right:-100px;bottom:-180px;width:420px;height:420px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025)}
.admin-card,.admin-panel{border-radius:16px!important;box-shadow:var(--shadow-sm)!important;border-color:var(--border)!important}.admin-card{transition:.18s ease}.admin-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)!important;border-color:#bfd9dc!important}.card-icon{background:#e5f6f5!important;color:var(--accent-dark)!important}.module-number{background:#e5f6f5!important;color:var(--accent-dark)!important}.admin-form input,.admin-form textarea,.admin-form select{border:1px solid #d6e2e7!important;border-radius:10px!important;background:#fbfdfe!important;box-shadow:inset 0 1px 1px rgba(7,24,34,.02)}.admin-form input:focus,.admin-form textarea:focus{border-color:var(--accent)!important;outline:3px solid rgba(19,166,168,.12)!important}.field-help{display:block;color:#7a8c95;font-size:.72rem;line-height:1.5;margin-top:7px}.admin-thumb{background:#fff;object-fit:contain;box-shadow:var(--shadow-sm)}
.admin-form-actions{position:sticky;bottom:16px;z-index:10;background:rgba(243,247,249,.9);backdrop-filter:blur(12px);padding:12px;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 35px rgba(7,24,34,.08)}
.table-wrap{border:1px solid var(--border);border-radius:14px;background:#fff}.table-wrap table{min-width:760px}.table-wrap th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#70828c;background:#f7fafb}.table-wrap td{padding:15px}.status-pill{font-weight:800}
.admin-auth{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(19,166,168,.14),transparent 30%),linear-gradient(135deg,#06151f,#0b3440);display:grid;place-items:center;padding:24px}.login-card{width:min(460px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.5);border-radius:22px;padding:38px;box-shadow:0 35px 90px rgba(0,0,0,.25)}.login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:32px}.login-card h1{letter-spacing:-.04em}.login-card p{color:var(--muted)}.login-card input{border-radius:10px!important}
@media(max-width:1050px){.admin-main{padding:30px 24px}.admin-sidebar{box-shadow:none!important}.hero-modern:after{display:none}}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr!important}.footer-logo-image{max-width:170px}.admin-top{align-items:flex-start!important;gap:14px}.admin-top h1{font-size:2rem}.admin-form-actions{position:static;flex-wrap:wrap}.login-card{padding:28px}.hero-copy h1{letter-spacing:-.04em}}


/* =========================================================
   SERVICE PAGES — CONTRAST & COLOR CORRECTION
   Prevent washed/faded appearance and improve visual hierarchy.
   ========================================================= */

/* Strong, premium service hero */
.service-detail-hero{
  background:
    radial-gradient(circle at 88% 18%, rgba(24,194,190,.26), transparent 30%),
    radial-gradient(circle at 8% 90%, rgba(232,163,61,.10), transparent 28%),
    linear-gradient(135deg,#06141d 0%,#0a2834 52%,#0b5055 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.service-detail-hero h1{color:#fff !important}
.service-detail-hero .eyebrow{color:#78ebe5 !important}
.service-detail-hero .eyebrow::before{background:#f2b34e}
.service-detail-hero .lede{color:#d5e4e8 !important}
.service-detail-hero .service-tagline{color:#f4ffff !important}
.service-detail-hero .btn-outline{
  border-color:rgba(255,255,255,.38) !important;
  color:#fff !important;
  background:rgba(255,255,255,.04) !important;
}
.service-detail-hero .btn-outline:hover{
  border-color:#78ebe5 !important;
  color:#78ebe5 !important;
  background:rgba(19,166,168,.10) !important;
}
.service-hero-panel{
  background:rgba(3,18,27,.62) !important;
  border-color:rgba(120,235,229,.22) !important;
  box-shadow:0 28px 70px rgba(0,0,0,.30) !important;
}
.service-hero-panel strong{color:#fff !important}
.panel-label{color:#78ebe5 !important}
.panel-line{background:rgba(255,255,255,.16) !important}
.panel-tags span{
  color:#e4f1f3 !important;
  border-color:rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.035);
}

/* Service sections: clean white rather than faded grey */
.service-detail-hero + section,
.service-detail-hero ~ section:not(.section-soft):not(.on-dark){
  background:#fff;
}
.section-soft{
  background:linear-gradient(180deg,#eef6f7 0%,#e5f0f2 100%) !important;
  border-top:1px solid #d7e5e8;
  border-bottom:1px solid #d7e5e8;
}

/* Stronger headings/body text */
.service-detail-hero ~ section h2,
.service-detail-hero ~ section h3{color:#12232d}
.service-detail-hero ~ section .lede{color:#526873}
.rich-copy p{
  color:#344b57 !important;
  font-weight:450;
}

/* Capability cards */
.capability-card{
  background:#fff !important;
  border:1px solid #cbdde1 !important;
  box-shadow:0 8px 24px rgba(7,24,34,.07) !important;
}
.capability-card:hover{
  border-color:#13a6a8 !important;
  box-shadow:0 16px 38px rgba(7,24,34,.12) !important;
}
.capability-icon{
  background:linear-gradient(135deg,#d8f4f2,#bce8e5) !important;
  color:#087d82 !important;
  border:1px solid #a8dcda;
}
.capability-card h3{color:#152a35 !important}
.capability-card p{color:#617580 !important}

/* Modules / integrations */
.service-info-card{
  background:#fff !important;
  border:1px solid #cbdde1 !important;
  box-shadow:0 10px 30px rgba(7,24,34,.07) !important;
}
.service-info-card .eyebrow{color:#087d82 !important}
.service-info-card.dark-card{
  background:linear-gradient(145deg,#071922,#0b3540) !important;
  border-color:#174955 !important;
  color:#fff !important;
}
.service-info-card.dark-card h2{color:#fff !important}
.service-info-card.dark-card p{color:#c8d9de !important}
.service-info-card.dark-card .eyebrow{color:#78ebe5 !important}
.service-info-card.dark-card .tag{
  color:#e3f2f3 !important;
  border-color:#3c626b !important;
  background:rgba(255,255,255,.035);
}

/* Benefits */
.benefit-item{
  background:#fff !important;
  border-color:#cbdde1 !important;
  color:#203640 !important;
  box-shadow:0 6px 20px rgba(7,24,34,.055);
}
.benefit-item span{color:#0e9b9d !important}

/* Ideal-for tags */
.centered-tags .tag{
  color:#31505c !important;
  background:#fff;
  border-color:#c8dadd !important;
  box-shadow:0 4px 12px rgba(7,24,34,.04);
}

/* Dark implementation/process area stays deliberately dark */
.service-detail-hero ~ section.on-dark{
  background:linear-gradient(135deg,#06141d,#0a2834 62%,#0b4248) !important;
  color:#fff !important;
}
.service-detail-hero ~ section.on-dark h2,
.service-detail-hero ~ section.on-dark h3{color:#fff !important}
.service-detail-hero ~ section.on-dark .lede,
.service-detail-hero ~ section.on-dark .step p{color:#bfd0d6 !important}
.service-detail-hero ~ section.on-dark .eyebrow{color:#78ebe5 !important}
.service-detail-hero ~ section.on-dark .step{
  border-top-color:#13a6a8 !important;
}
.service-detail-hero ~ section.on-dark .num{color:#91aeb7 !important}

/* Service landing page hero should also have strong contrast */
.services-landing-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(19,166,168,.24),transparent 30%),
    linear-gradient(135deg,#06141d 0%,#0a2834 58%,#0b4d52 100%) !important;
  color:#fff !important;
}
.services-landing-hero h1{color:#fff !important}
.services-landing-hero .lede{color:#d2e2e6 !important}
.services-landing-hero .eyebrow{color:#78ebe5 !important}
.services-landing-hero .btn-outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.38) !important;
}
.services-landing-hero .btn-outline:hover{
  color:#78ebe5 !important;
  border-color:#78ebe5 !important;
}

/* Service catalog cards: clearer and more energetic */
.service-card{
  background:#fff !important;
  border:1px solid #cbdde1 !important;
  box-shadow:0 9px 28px rgba(7,24,34,.07) !important;
}
.service-card .index{color:#5d7781 !important}
.service-card .project-label{color:#087d82 !important}
.service-card h3{color:#142832 !important}
.service-card p{color:#586f79 !important}
.service-card .card-link{color:#087d82 !important}
.service-card:hover{
  border-color:#13a6a8 !important;
  box-shadow:0 18px 42px rgba(7,24,34,.13) !important;
}

/* Keep CTA vivid */
.cta-band{
  background:linear-gradient(135deg,#07151f 0%,#0b3c47 58%,#0d686b 100%) !important;
}
.cta-band h2{color:#fff !important}
.cta-band p{color:#d2e1e5 !important}
.cta-band .eyebrow{color:#78ebe5 !important}
.cta-band .btn-primary{background:#fff !important;color:#07151f !important}
.cta-band .btn-primary:hover{background:#78ebe5 !important;color:#06141d !important}

/* Mobile spacing */
@media(max-width:900px){
  .service-detail-hero{padding-top:68px !important;padding-bottom:65px !important}
  .service-detail-grid{gap:34px}
  .service-overview{gap:35px}
}
\n\n/* =========================================================\n   PREMIUM UI REFINEMENT — V7\n   Sharper hierarchy, richer depth, stronger interaction states.\n   ========================================================= */\n:root{\n  --premium-teal:#13a6a8;\n  --premium-teal-dark:#087d82;\n  --premium-cyan:#78ebe5;\n  --premium-navy:#06151f;\n  --premium-surface:#f7fbfc;\n  --premium-border:#d3e2e5;\n  --premium-shadow:0 18px 55px rgba(6,25,35,.10);\n  --premium-shadow-lg:0 28px 80px rgba(6,25,35,.16);\n}\n\nbody{background:#f7f9f8;}\n::selection{background:rgba(19,166,168,.22);color:#06151f;}\n\n/* Header feels like a modern SaaS navigation */\n.status-strip{background:linear-gradient(90deg,#06131d,#0a2732 55%,#0b3e45);border-bottom-color:rgba(255,255,255,.08);}\nheader.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(8,29,39,.045);}\n.nav-row{min-height:76px;}\n.brand{letter-spacing:-.025em;}\n.brand .mark{background:linear-gradient(145deg,#071923,#0b5055);box-shadow:0 6px 18px rgba(7,43,51,.18);}\nnav.main-nav>ul>li>a{font-weight:600;transition:all .2s ease;}\nnav.main-nav>ul>li>a:hover,nav.main-nav>ul>li.active>a{background:#eaf7f7;color:var(--premium-teal-dark);}\nnav.main-nav .dropdown .submenu{border-color:#d9e6e8;border-radius:12px;box-shadow:0 24px 55px rgba(7,28,38,.15);}\nnav.main-nav .submenu a{font-weight:500;padding:11px 13px;}\nnav.main-nav .submenu a:hover{background:#eef8f8;}\n\n/* Global button polish */\n.btn{border-radius:10px;font-weight:600;min-height:44px;box-shadow:0 4px 12px rgba(7,24,34,.06);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;}\n.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(7,24,34,.12);}\n.btn-primary{background:linear-gradient(135deg,#101c27,#0a5c64);}\n.btn-primary:hover{background:linear-gradient(135deg,#0b6870,#087d82);}\n\n/* Stronger generic cards */\n.card{border-radius:16px;padding:30px;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);border-color:#d6e4e7;box-shadow:0 5px 20px rgba(8,29,39,.035);}\n.card:hover{border-color:#13a6a8;box-shadow:0 18px 42px rgba(8,29,39,.11);transform:translateY(-5px);}\n.card .index{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#e8f6f6;color:#087d82;font-weight:700;margin-bottom:18px;}\n.card .mini-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f0f6f7;color:#087d82;transition:.2s ease;}\n.card:hover .mini-arrow{background:#13a6a8;color:#fff;transform:rotate(45deg);}\n\n/* Home hero — premium product-company look */\n.hero-modern{background:radial-gradient(circle at 78% 18%,rgba(19,166,168,.25),transparent 25%),radial-gradient(circle at 8% 100%,rgba(232,163,61,.10),transparent 28%),linear-gradient(135deg,#06141d,#092832 55%,#0b4b50);}\n.hero-modern:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%);pointer-events:none;}\n.hero-modern .hero-copy{position:relative;z-index:2;}\n.hero-modern h1{font-size:clamp(2.7rem,5.5vw,5rem);letter-spacing:-.055em;max-width:760px;}\n.hero-modern .lede{font-size:1.18rem;line-height:1.75;color:#d1e2e6;}\n.hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}\n.hero-trust span{padding:8px 12px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);border-radius:999px;color:#c8d9dd;font-size:.8rem;}\n.system-window{border:1px solid rgba(255,255,255,.16)!important;background:rgba(5,20,29,.72)!important;box-shadow:0 35px 90px rgba(0,0,0,.28)!important;backdrop-filter:blur(12px);border-radius:18px!important;overflow:hidden;}\n.system-card{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.035)!important;transition:.2s ease;}\n.system-card:hover{background:rgba(19,166,168,.12)!important;border-color:rgba(120,235,229,.25)!important;transform:translateX(3px);}\n\n/* Service landing and detail pages */\n.service-detail-hero,.services-landing-hero{position:relative;overflow:hidden;}\n.service-detail-hero:before,.services-landing-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent 90%);pointer-events:none;}\n.service-detail-grid,.page-hero-inner{position:relative;z-index:1;}\n.service-detail-hero h1,.services-landing-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.055em;max-width:780px;}\n.service-tagline{font-size:1.35rem!important;font-weight:600!important;line-height:1.45!important;max-width:720px;}\n.service-hero-panel{border-radius:20px!important;padding:34px!important;position:relative;overflow:hidden;}\n.service-hero-panel:after{content:"";position:absolute;width:180px;height:180px;right:-70px;bottom:-80px;border:1px solid rgba(120,235,229,.18);border-radius:50%;box-shadow:0 0 0 32px rgba(120,235,229,.025),0 0 0 64px rgba(120,235,229,.018);}\n\n.capability-grid{gap:18px!important;}\n.capability-card{border-radius:16px!important;padding:25px!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;}\n.capability-card:hover{transform:translateY(-5px)!important;}\n.capability-icon{width:44px!important;height:44px!important;border-radius:12px!important;font-weight:700!important;box-shadow:0 6px 16px rgba(19,166,168,.12);}\n\n.service-info-card{border-radius:18px!important;padding:34px!important;box-shadow:var(--premium-shadow)!important;}\n.service-info-card.dark-card{box-shadow:0 24px 65px rgba(4,21,29,.20)!important;}\n.benefit-grid{gap:14px!important;}\n.benefit-item{border-radius:13px!important;padding:17px 18px!important;transition:.2s ease;}\n.benefit-item:hover{transform:translateX(4px);border-color:#13a6a8!important;box-shadow:0 10px 25px rgba(8,29,39,.09);}\n.centered-tags .tag{border-radius:999px!important;padding:9px 15px!important;font-weight:600;}\n\n/* Process section */\n.service-process .step{position:relative;padding:22px 0 0 0;border-top-width:3px!important;}\n.service-process .num{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid rgba(120,235,229,.24);border-radius:10px;background:rgba(19,166,168,.08);color:#78ebe5!important;margin-bottom:14px;}\n.service-process .step h3{font-size:1.15rem;margin-bottom:8px;}\n\n/* CTA */\n.cta-modern{position:relative;overflow:hidden;}\n.cta-modern:before{content:"";position:absolute;left:-120px;top:-180px;width:420px;height:420px;border:1px solid rgba(120,235,229,.13);border-radius:50%;box-shadow:0 0 0 60px rgba(120,235,229,.025),0 0 0 120px rgba(120,235,229,.015);}\n.cta-inner{position:relative;z-index:1;}\n\n/* Footer */\n.site-footer{background:linear-gradient(135deg,#06131d,#0a2732 58%,#0b4147)!important;border-top:1px solid rgba(255,255,255,.06);}\n.footer-brand p{color:#b9cbd0!important;max-width:430px;}\n.site-footer h4{color:#fff!important;}\n.site-footer a,.site-footer li{color:#b5c8cd!important;}\n.site-footer a:hover{color:#78ebe5!important;}\n.footer-social a{border-color:rgba(255,255,255,.13)!important;background:rgba(255,255,255,.035)!important;border-radius:999px!important;padding:7px 12px!important;}\n.footer-social a:hover{background:rgba(19,166,168,.14)!important;border-color:rgba(120,235,229,.3)!important;}\n.footer-bottom{border-top-color:rgba(255,255,255,.10)!important;}\n\n/* Page rhythm and section surfaces */\nsection{position:relative;}\n.section-soft{background:linear-gradient(180deg,#f0f7f8 0%,#e8f1f3 100%)!important;}\n.breadcrumb{background:#f7f9f8;color:#71858d;}\n\n/* Accessibility + motion */\n:focus-visible{outline:3px solid rgba(19,166,168,.35);outline-offset:3px;}\n@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}\n@media(max-width:900px){.hero-modern h1,.service-detail-hero h1,.services-landing-hero h1{font-size:clamp(2.35rem,9vw,3.5rem);}.hero-trust{gap:7px}.hero-trust span{font-size:.74rem}.service-hero-panel{margin-top:8px;}}\n@media(max-width:700px){.nav-row{padding:13px 0}.brand{font-size:1.1rem}.hero-modern{padding-top:68px}.card{padding:24px}.service-info-card{padding:25px!important;}.capability-card{padding:21px!important;}}\n
/* =========================================================
   V8 — Aurora 3D Business Interface
   Visual-only enhancement. No backend/data contract changes.
   ========================================================= */
:root{
  --v8-cyan:#2dd4bf;
  --v8-blue:#38bdf8;
  --v8-purple:#8b5cf6;
  --v8-navy:#07131d;
  --v8-surface:#ffffff;
  --v8-shadow:0 24px 70px rgba(5,20,30,.14);
}
body{background:#f5f8f8}
.hero-modern,.service-detail-hero,.services-landing-hero{
  background:radial-gradient(circle at 78% 15%,rgba(45,212,191,.24),transparent 24%),radial-gradient(circle at 95% 85%,rgba(56,189,248,.18),transparent 26%),linear-gradient(135deg,#04121b 0%,#082b37 52%,#064c53 100%) !important;
}
.hero-modern:before,.service-detail-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.hero-modern .wrap,.service-detail-hero .wrap{position:relative;z-index:2}
.hero-copy h1,.service-detail-hero h1{font-size:clamp(2.7rem,5.2vw,5rem);letter-spacing:-.055em;text-shadow:0 10px 40px rgba(0,0,0,.22)}
.hero-trust span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);padding:8px 12px;border-radius:999px;backdrop-filter:blur(12px)}
.hero-visual{perspective:1400px}
.system-window{transform:rotateY(-9deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:30px 35px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)!important;background:linear-gradient(145deg,rgba(19,46,58,.96),rgba(5,19,29,.96))!important;border-radius:22px!important;overflow:hidden}
.system-window:hover{transform:rotateY(-2deg) rotateX(1deg) translateY(-8px)}
.system-card{border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025))!important;box-shadow:0 12px 28px rgba(0,0,0,.16);border-radius:14px!important;transition:transform .25s ease,background .25s ease}
.system-card:hover{transform:translateY(-5px) scale(1.015);background:rgba(45,212,191,.10)!important}
.system-icon{background:linear-gradient(135deg,var(--v8-cyan),var(--v8-blue))!important;color:#05202a!important;border-radius:10px!important;box-shadow:0 8px 20px rgba(45,212,191,.2)}

.card,.capability-card,.service-info-card,.benefit-item,.faq-item,.value-card,.portfolio-card{
  border-radius:20px!important;border:1px solid #d9e5e7!important;box-shadow:0 10px 35px rgba(8,31,42,.06)!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(12px)
}
.card:hover,.capability-card:hover,.service-info-card:hover,.benefit-item:hover,.value-card:hover,.portfolio-card:hover{transform:translateY(-9px);box-shadow:0 24px 55px rgba(8,31,42,.14)!important;border-color:#8bded8!important}
.service-grid .service-card{position:relative;overflow:hidden;min-height:320px;padding:30px!important}
.service-grid .service-card:before,.capability-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-65px;top:-70px;background:radial-gradient(circle,rgba(45,212,191,.2),transparent 68%);pointer-events:none}
.service-grid .service-card:nth-child(3n+2){transform:translateY(18px)}
.service-grid .service-card:nth-child(3n+2):hover{transform:translateY(9px)}
.service-grid .service-card h3{font-size:1.45rem}
.service-card .index{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e9fbf8;color:#087d82;font-family:var(--font-mono);font-weight:700}
.mini-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f1f7f7;color:#087d82}

/* 3D service hero panel */
.service-hero-panel{transform:rotateY(-8deg) rotateX(3deg);transform-style:preserve-3d;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:24px!important;box-shadow:35px 35px 80px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.18)!important;backdrop-filter:blur(18px)!important;position:relative;overflow:hidden}
.service-hero-panel:after{content:"";position:absolute;inset:auto -20% -55% 15%;height:190px;background:radial-gradient(ellipse,rgba(45,212,191,.34),transparent 68%);transform:translateZ(20px);pointer-events:none}
.panel-tags span,.tag{border-radius:999px!important;padding:7px 11px!important}
.panel-tags span{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important}

/* Capability cards become floating 3D tiles */
.capability-grid{perspective:1200px}
.capability-card{position:relative;overflow:hidden;min-height:150px;transform-style:preserve-3d}
.capability-card:nth-child(odd){transform:rotateX(1deg) rotateY(-1deg)}
.capability-card:nth-child(even){transform:rotateX(1deg) rotateY(1deg)}
.capability-card:hover{transform:translateY(-10px) rotateX(0) rotateY(0) scale(1.015)!important}
.capability-icon{border-radius:14px!important;box-shadow:0 8px 20px rgba(14,124,134,.12);font-family:var(--font-mono);font-weight:700}

/* New service intelligence section */
.service-intelligence{background:linear-gradient(180deg,#eef7f7 0%,#f8fbfb 100%);position:relative;overflow:hidden}
.service-intelligence:before{content:"";position:absolute;right:-160px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.18),transparent 70%)}
.intelligence-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
.intelligence-copy{padding:18px 0}
.intelligence-copy h2{font-size:clamp(2rem,3.5vw,3rem)}
.intelligence-list{display:grid;gap:12px;margin-top:24px}
.intelligence-list div{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #dbe8e9;border-radius:14px;padding:15px;box-shadow:0 8px 24px rgba(8,31,42,.05)}
.intelligence-list b{color:#087d82;font-family:var(--font-mono);font-size:.78rem}
.architecture-3d{min-height:380px;display:grid;place-items:center;perspective:1200px;position:relative}
.arch-stack{width:min(470px,100%);transform:rotateX(58deg) rotateZ(-28deg);transform-style:preserve-3d;position:relative}
.arch-layer{height:78px;border:1px solid rgba(255,255,255,.35);border-radius:16px;margin-top:-18px;padding:18px 22px;color:#fff;background:linear-gradient(135deg,#0b5962,#087d82);box-shadow:0 18px 0 rgba(3,47,54,.25),0 30px 45px rgba(2,31,40,.24);font-family:var(--font-mono);display:flex;justify-content:space-between;align-items:center}
.arch-layer:nth-child(2){transform:translateZ(28px);background:linear-gradient(135deg,#0b6e77,#14949a)}
.arch-layer:nth-child(3){transform:translateZ(56px);background:linear-gradient(135deg,#087d82,#20b8ae)}
.arch-layer:nth-child(4){transform:translateZ(84px);background:linear-gradient(135deg,#087d82,#38bdf8)}
.arch-layer span:last-child{font-size:.7rem;opacity:.8}

/* More depth across dark sections */
.on-dark{position:relative;overflow:hidden}
.on-dark:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(45,212,191,.14),transparent 28%),radial-gradient(circle at 10% 90%,rgba(56,189,248,.08),transparent 25%);pointer-events:none}
.on-dark>.wrap{position:relative;z-index:1}
.process-modern .step{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px!important;min-height:200px;transition:.3s ease}
.process-modern .step:hover{background:rgba(255,255,255,.07);transform:translateY(-7px)}
.process-modern .num{width:48px;height:48px;border-radius:14px!important;background:linear-gradient(135deg,var(--v8-cyan),var(--v8-blue));color:#06222b!important;display:grid!important;place-items:center;font-weight:800!important}

/* Information/metrics strip */
.service-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.metric-card{background:#fff;border:1px solid #dce8e9;border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(8,31,42,.06)}
.metric-card strong{display:block;font:700 1.65rem var(--font-display);color:#087d82}.metric-card span{font-size:.84rem;color:#65757d}

.cta-band{position:relative;overflow:hidden}.cta-band:before{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.18),transparent 68%)}
.cta-modern{border-top:1px solid rgba(255,255,255,.08)}
.site-footer{background:#041018!important}
.footer-grid{position:relative}.footer-brand p{color:#9eb0b7!important}.site-footer h4{color:#fff!important}.site-footer a{transition:color .2s ease}.site-footer a:hover{color:#4de1d0!important}

@media(max-width:900px){
 .service-grid .service-card:nth-child(3n+2){transform:none}.service-grid .service-card:nth-child(3n+2):hover{transform:translateY(-9px)}
 .system-window,.service-hero-panel{transform:none}.intelligence-grid{grid-template-columns:1fr}.architecture-3d{min-height:300px}.service-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
 .hero-copy h1,.service-detail-hero h1{font-size:2.55rem}.service-metrics{grid-template-columns:1fr 1fr}.arch-stack{transform:scale(.72) rotateX(58deg) rotateZ(-28deg)}.service-grid .service-card{min-height:auto}
}

/* =========================================================
   V9 — Interactive 3D Service Product Visuals
   Pure presentation layer. No routes, controllers, models or data contracts changed.
   ========================================================= */
.service-card{perspective:1200px}
.service-visual{height:190px;margin:-8px -4px 22px;position:relative;perspective:1200px;transform-style:preserve-3d;cursor:pointer}
.service-visual-face{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .45s ease}
.service-visual-front{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 15%,rgba(45,212,191,.28),transparent 25%),linear-gradient(135deg,#071b26,#0a4d58 62%,#087d82);border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px rgba(255,255,255,.16),0 18px 35px rgba(5,35,43,.18);transform:rotateX(2deg) rotateY(-3deg)}
.service-visual-back{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:28px;background:linear-gradient(135deg,#06141e,#123e50 58%,#5b21b6);border:1px solid rgba(255,255,255,.18);color:#fff;transform:rotateY(180deg);opacity:0}
.service-visual:hover .service-visual-front{transform:rotateY(-180deg) rotateX(0)}
.service-visual:hover .service-visual-back{transform:rotateY(0);opacity:1}
.visual-orb{position:absolute;width:150px;height:150px;right:-25px;top:-50px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.32),rgba(45,212,191,.12) 35%,transparent 70%);filter:blur(.2px)}
.visual-device{width:145px;height:92px;position:relative;transform:rotateX(8deg) rotateY(-16deg) rotateZ(-3deg);transform-style:preserve-3d;filter:drop-shadow(18px 24px 16px rgba(0,0,0,.3));z-index:2}
.visual-screen{position:absolute;left:0;top:0;width:112px;height:70px;border-radius:10px;background:linear-gradient(145deg,#0c2633,#071018);border:2px solid rgba(255,255,255,.22);box-shadow:inset 0 1px rgba(255,255,255,.16);padding:10px;color:#d9ffff;transform:translateZ(12px)}
.visual-screen-title{display:block;font:600 7px/1.2 var(--font-mono);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
.visual-screen-line{display:block;height:5px;width:70px;margin-top:8px;border-radius:8px;background:linear-gradient(90deg,#2dd4bf,#38bdf8);opacity:.75}.visual-screen-line.short{width:45px;margin-top:5px;opacity:.4}
.visual-screen-stat{display:inline-block;margin-top:9px;font:600 6px var(--font-mono);letter-spacing:.08em;color:#62f1d6}
.visual-base{position:absolute;left:17px;bottom:0;width:108px;height:25px;border-radius:4px 8px 12px 7px;background:linear-gradient(160deg,#31505b,#0c252e);transform:skewX(-16deg) rotateX(58deg) translateZ(-2px);box-shadow:0 10px 0 rgba(2,13,19,.3)}
.visual-label{position:absolute;left:18px;bottom:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);font:600 7px var(--font-mono);letter-spacing:.08em;color:#d8ffff;z-index:4;text-transform:uppercase}
.visual-back-kicker{font:600 8px var(--font-mono);letter-spacing:.14em;color:#70f4df}.service-visual-back strong{font:700 1.05rem var(--font-display);line-height:1.15}.service-visual-back>span:not(.visual-back-kicker){font-size:.75rem;color:#d0e7eb;max-width:90%}

/* Distinct physical metaphors for each service while reusing one safe visual system. */
.service-visual-inventory-pos-software .visual-device:after{content:"$";position:absolute;right:4px;bottom:15px;width:25px;height:30px;border-radius:7px;background:linear-gradient(145deg,#e8fffb,#7de9d8);color:#087d82;display:grid;place-items:center;font:800 14px var(--font-mono);transform:translateZ(18px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}
.service-visual-attendance-management-system .visual-device:after{content:"◉";position:absolute;right:5px;bottom:14px;width:30px;height:42px;border-radius:10px;background:linear-gradient(145deg,#eaffff,#54d7d0);color:#087d82;display:grid;place-items:center;font-size:15px;transform:translateZ(18px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}
.service-visual-queue-management-system .visual-device:after{content:"A-108";position:absolute;right:-2px;bottom:17px;padding:7px 6px;border-radius:6px;background:#f2fffe;color:#087d82;font:800 8px var(--font-mono);transform:translateZ(20px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}
.service-visual-parking-management-system .visual-device:after{content:"↥";position:absolute;right:7px;bottom:12px;width:24px;height:40px;border-radius:5px;background:linear-gradient(180deg,#ef4444 0 48%,#f8fafc 49%);color:#0a2732;display:grid;place-items:center;font-weight:900;transform:translateZ(18px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}
.service-visual-e-commerce-solution .visual-device:after{content:"SHOP";position:absolute;right:-1px;bottom:13px;width:35px;height:46px;border-radius:8px;background:linear-gradient(145deg,#f8ffff,#a6f3e9);color:#087d82;display:grid;place-items:center;font:800 7px var(--font-mono);transform:translateZ(18px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}
.service-visual-custom-software-development .visual-device:after{content:"</>";position:absolute;right:0;bottom:13px;width:35px;height:35px;border-radius:8px;background:linear-gradient(145deg,#eaf7ff,#9edcff);color:#155e75;display:grid;place-items:center;font:800 10px var(--font-mono);transform:translateZ(18px);box-shadow:5px 7px 12px rgba(0,0,0,.25)}

.service-grid .service-card:nth-child(3n+2) .service-visual{transform:translateY(6px) rotateX(1deg)}
.service-grid .service-card:hover .service-visual{transform:translateY(-4px)}
.service-grid .service-card:nth-child(3n+2):hover .service-visual{transform:translateY(-10px)}

.service-hero-panel-wrap{position:relative;display:grid;gap:16px;align-content:center;perspective:1400px}
.detail-3d-service{height:270px;position:relative;perspective:1400px;transform-style:preserve-3d;cursor:pointer}
.detail-3d-service .service-visual-front{box-shadow:30px 35px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.16)}
.detail-3d-service .visual-device{transform:scale(1.25) rotateX(8deg) rotateY(-16deg) rotateZ(-3deg)}
.detail-3d-service .visual-label{bottom:22px}
.detail-3d-service .service-visual-back{padding:38px}
.service-hero-panel-wrap .service-hero-panel{transform:rotateY(-4deg) rotateX(2deg)}
.service-hero-panel-wrap:hover .service-hero-panel{transform:rotateY(0) rotateX(0) translateY(3px)}

@media(max-width:900px){.detail-3d-service{height:230px}.service-hero-panel-wrap .service-hero-panel{transform:none}.service-visual{height:175px}}
@media(max-width:560px){.service-visual{height:165px}.detail-3d-service{height:210px}.detail-3d-service .visual-device{transform:scale(1.05) rotateX(8deg) rotateY(-16deg) rotateZ(-3deg)}}
@media(prefers-reduced-motion:reduce){.service-visual-face,.service-visual,.detail-3d-service{transition:none!important}.service-visual:hover .service-visual-front,.service-visual:hover .service-visual-back{transform:none}.service-visual-back{display:none}}