*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #080809;
  --border:       rgba(255,255,255,0.07);
  --text:         #ececec;
  --muted:        rgba(236,236,236,0.38);
  --mid:          rgba(236,236,236,0.65);
  --mono:         'Space Mono', monospace;
  --sans:         'Sora', sans-serif;
  --ease:         cubic-bezier(0.22,1,0.36,1);
  --header-h:     62px;
  --bar-h:        24px;

  /* fixed colour names */
  --accent:       #00e5a0;
  --dev:          #4f9eff;

  /* ── current accent — switches on .dev-active ── */
  --cur:          #00e5a0;
  --cur-dim:      rgba(0,229,160,0.10);
  --cur-glow:     rgba(0,229,160,0.035);
  --cur-border-h: rgba(0,229,160,0.28);
}
/* When dev tab is active, flip every --cur variable */
body.dev-active {
  --cur:          #4f9eff;
  --cur-dim:      rgba(79,158,255,0.10);
  --cur-glow:     rgba(79,158,255,0.035);
  --cur-border-h: rgba(79,158,255,0.30);
}
/* Smooth transition on all elements using --cur */
body { transition: --cur .3s, --cur-dim .3s, --cur-glow .3s; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh; overflow-x: hidden;
}
@media (min-width: 1024px) {
  html { font-size: 16px; }
  body:not(.service-page) { height: 100vh; overflow: hidden; }
  body.service-page {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ── BACKGROUNDS ── */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.019) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.019) 1px, transparent 1px);
  background-size: 36px 36px;
}
.bg-glow {
  position: fixed; z-index: 0; pointer-events: none;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,160,0.055) 0%, transparent 68%);
  top: -160px; right: -60px;
  transition: background 0.5s ease;
}
body.dev-active .bg-glow {
  background: radial-gradient(circle, rgba(79,158,255,0.055) 0%, transparent 68%);
}
.bg-glow2 {
  position: fixed; z-index: 0; pointer-events: none;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.04) 0%, transparent 70%);
  bottom: -60px; left: 40px;
}

/* ── APP SHELL ── */
#app {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  #app { height: 100vh; overflow: hidden; padding-bottom: var(--bar-h); }
}

/* ── HEADER ── */
header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,9,0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 100; flex-shrink: 0;
}
@media (min-width: 480px) { header { padding: 0 20px; } }
@media (min-width: 768px) { header { padding: 0 28px; } }

.logo-wrap img { height: 38px; width: auto; display: block; }
@media (min-width: 480px) { .logo-wrap img { height: 44px; } }
@media (min-width: 768px) { .logo-wrap img { height: 50px; } }

.header-right { display: flex; align-items: center; gap: 8px; }
@media (min-width: 480px) { .header-right { gap: 12px; } }
@media (min-width: 768px) { .header-right { gap: 16px; } }

.linkedin-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); padding: 5px 9px;
  transition: border-color .2s, color .2s, background .2s; white-space: nowrap;
}
.linkedin-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.linkedin-link:hover { border-color: var(--cur); color: var(--cur); background: var(--cur-dim); }
@media (max-width: 399px) { .linkedin-link .li-name { display: none; } }
@media (min-width: 480px) { .linkedin-link { font-size: 10px; padding: 6px 11px; } }
@media (min-width: 768px) { .linkedin-link { font-size: 11px; padding: 6px 13px; } }

.header-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; color: var(--muted);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cur); flex-shrink: 0;
  animation: pulse 2.8s ease-in-out infinite;
  transition: background .4s ease;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(.82); }
}
@media (max-width: 399px) { .header-status .status-text { display: none; } }
@media (min-width: 480px) { .header-status { font-size: 10px; } }

/* ── MAIN LAYOUT ── */
.main { flex: 1; display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .main { flex-direction: row; min-height: 0; overflow: hidden; }
}

/* ── HERO BANNER (mobile/tablet) ── */
.hero-banner { padding: 18px 14px 14px; border-bottom: 1px solid var(--border); }
@media (min-width: 480px) { .hero-banner { padding: 22px 20px 18px; } }
@media (min-width: 768px) { .hero-banner { padding: 26px 28px 22px; } }
@media (min-width: 1024px) { .hero-banner { display: none; } }

.hero-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.20em;
  color: var(--cur); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  transition: color .4s ease;
}
.hero-eyebrow::before { content:''; width: 12px; height: 1px; background: var(--cur); display: block; transition: background .4s ease; }
.hero-headline { font-size: 20px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }
@media (min-width: 480px) { .hero-headline { font-size: 24px; } }
@media (min-width: 768px) { .hero-headline { font-size: 28px; } }
.hero-headline em { font-style: normal; color: var(--cur); transition: color .4s ease; }

/* ── SIDEBAR (desktop only) ── */
.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 270px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: 30px 24px 22px; overflow-y: auto;
    animation: fadeInLeft .6s var(--ease) both;
  }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:1; transform:translateX(0); }
}

.sidebar-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--cur); text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
  transition: color .4s ease;
}
.sidebar-eyebrow::before { content:''; width: 16px; height: 1px; background: currentColor; display: block; }

.sidebar-headline {
  font-size: 21px; font-weight: 600; line-height: 1.22;
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.sidebar-headline em { font-style: normal; color: var(--cur); transition: color .4s ease; }

.sidebar-body { font-size: 12px; line-height: 1.78; color: var(--muted); margin-bottom: 20px; }
.sidebar-divider { height: 1px; background: var(--border); margin: 0 0 16px; }

.contact-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 9px;
}
.contact-item { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.contact-icon { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.contact-val  { font-family: var(--mono); font-size: 10px; color: var(--mid); letter-spacing: 0.04em; }

.sidebar-copy {
  font-family: var(--mono); font-size: 9.5px;
  color: rgba(255,255,255,0.13); letter-spacing: 0.10em; line-height: 1.8; margin-top: 12px;
}

/* ── SERVICES AREA ── */
.services-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1024px) { .services-area { overflow: hidden; } }

/* ── TABS BAR ── */
.tabs-bar {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(8,8,9,0.6);
}

.tab-btn {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 14px; height: 38px; cursor: pointer;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  position: relative; white-space: nowrap;
  /* touch target */
  min-width: 0;
}
@media (min-width: 480px) { .tab-btn { font-size: 10px; padding: 0 18px; height: 40px; gap: 8px; } }
@media (min-width: 768px) { .tab-btn { font-size: 10.5px; padding: 0 22px; } }

.tab-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.tab-btn.active-sec {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(0,229,160,0.03);
}
.tab-btn.active-dev {
  color: var(--dev);
  border-bottom-color: var(--dev);
  background: rgba(79,158,255,0.03);
}
.tab-btn:hover:not(.active-sec):not(.active-dev) {
  color: var(--mid); background: rgba(255,255,255,0.02);
}

.tab-badge {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 2px; line-height: 1.6;
}
.tab-btn.active-sec .tab-badge { background: rgba(0,229,160,0.15); color: var(--accent); }
.tab-btn.active-dev .tab-badge { background: rgba(79,158,255,0.15); color: var(--dev); }
.tab-btn:not(.active-sec):not(.active-dev) .tab-badge { background: rgba(255,255,255,0.06); color: var(--muted); }

/* FREE pill for dev tab */
.free-pill {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.08em;
  padding: 1px 5px; background: rgba(79,158,255,0.18); color: var(--dev);
  border-radius: 2px; text-transform: uppercase; line-height: 1.6;
  display: none;
}
@media (min-width: 540px) { .free-pill { display: inline-block; } }
.tab-btn:not(.active-dev) .free-pill { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.22); }

/* Tab spacer for count on right */
.tabs-bar-right {
  margin-left: auto;
  display: flex; align-items: center;
  padding: 0 14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--muted);
}
@media (min-width: 480px) { .tabs-bar-right { font-size: 9.5px; padding: 0 18px; } }

.count-sec { transition: opacity .25s; }
.count-dev { transition: opacity .25s; display: none; }
.showing-dev .count-sec { display: none; }
.showing-dev .count-dev { display: block; }

/* ── SERVICES GRID ── */
.grid-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Animate between tabs */
  transition: opacity .22s ease, transform .22s var(--ease);
}
@media (min-width: 500px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%; overflow: hidden;
  }
}

/* Dev tab grid can have different row count */
.services-grid.dev-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 500px) { .services-grid.dev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .services-grid.dev-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100%; overflow: hidden;
  }
}

/* Hidden / shown grids */
.services-grid { position: absolute; inset: 0; overflow-y: auto; }
.services-grid.hidden-grid { opacity: 0; pointer-events: none; transform: translateY(6px); }
.services-grid.active-grid { opacity: 1; pointer-events: all; transform: translateY(0); position: relative; }

/* On desktop we need the grid inside grid-wrap to fill properly */
@media (min-width: 1024px) {
  .grid-wrap { display: flex; flex-direction: column; }
  .services-grid.active-grid { flex: 1; position: relative; inset: auto; overflow: hidden; }
  .services-grid.hidden-grid { position: absolute; inset: 0; overflow: hidden; }
}

/* ── SERVICE CARD ── */
.service-card {
  position: relative;
  padding: 16px 14px 13px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; display: flex; flex-direction: column;
  transition: background .20s ease, transform .22s var(--ease), box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
  will-change: transform; transform: scale(1); z-index: 1; overflow: hidden;
}
@media (min-width: 480px) { .service-card { padding: 18px 16px 14px; } }
@media (min-width: 768px) { .service-card { padding: 18px 18px 15px; } }
@media (min-width: 1024px) { .service-card { padding: 20px 18px 16px; } }

/* 2-col border handling */
@media (min-width: 500px) and (max-width: 1023px) {
  .service-card { border-right: 1px solid var(--border); }
  .service-card:nth-child(2n) { border-right: none; }
  .service-card:nth-last-child(-n+2):not(:nth-child(odd):last-child) { border-bottom: none; }
  .service-card:last-child { border-bottom: none; border-right: none; }
}
/* 3-col desktop */
@media (min-width: 1024px) {
  .service-card { border-right: 1px solid var(--border); }
  .service-card:nth-child(2n)   { border-right: 1px solid var(--border); }
  .service-card:nth-child(3n)   { border-right: none; }
  /* sec grid: 9 cards → rows of 3 */
  .sec-grid .service-card:nth-child(n+7) { border-bottom: none; }
  /* dev grid: 5 cards → row1=3, row2=2 */
  .dev-grid .service-card:nth-child(n+4) { border-bottom: none; }
}
@media (max-width: 499px) { .service-card:last-child { border-bottom: none; } }

/* top line — now uses --cur so it auto-switches with the tab */
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--cur), rgba(0,229,160,0.3));
  transform:scaleX(0); transform-origin:left;
  transition: transform .32s var(--ease), background .4s ease;
}
/* dev cards keep their own blue line regardless of current tab accent */
.service-card.dev-card::before {
  background: linear-gradient(90deg, var(--dev), rgba(79,158,255,0.3));
}

@media (hover: hover) and (pointer: fine) {
  /* sec hover */
  .service-card:not(.dev-card):hover {
    background: rgba(0,229,160,0.030);
    transform: scale(1.025);
    box-shadow: 0 0 0 1px rgba(0,229,160,0.14), 0 8px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(0,229,160,0.06);
    z-index: 10;
  }
  .service-card:not(.dev-card):hover::before { transform: scaleX(1); }
  .service-card:not(.dev-card):hover .card-name { color: var(--accent); }
  /* dev hover */
  .service-card.dev-card:hover {
    background: rgba(79,158,255,0.030);
    transform: scale(1.025);
    box-shadow: 0 0 0 1px rgba(79,158,255,0.14), 0 8px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(79,158,255,0.06);
    z-index: 10;
  }
  .service-card.dev-card:hover::before { transform: scaleX(1); }
  .service-card.dev-card:hover .card-name { color: var(--dev); }
  /* shared */
  .service-card:hover .card-arrow { opacity:1; transform:translateX(0); }
  .service-card:hover .card-index { opacity:.5; }
}
@media (hover: none) {
  .service-card:active { transform: scale(0.985); }
}
.service-card:focus-visible {
  outline: 1px solid var(--cur); outline-offset: -1px;
}

/* stagger */
@keyframes fadeCard {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.service-card { animation: fadeCard .42s var(--ease) both; }
.service-card:nth-child(1){animation-delay:.03s}.service-card:nth-child(2){animation-delay:.07s}
.service-card:nth-child(3){animation-delay:.11s}.service-card:nth-child(4){animation-delay:.15s}
.service-card:nth-child(5){animation-delay:.19s}.service-card:nth-child(6){animation-delay:.23s}
.service-card:nth-child(7){animation-delay:.27s}.service-card:nth-child(8){animation-delay:.31s}
.service-card:nth-child(9){animation-delay:.35s}

.card-index {
  font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.14);
  margin-bottom: 7px; letter-spacing: 0.06em; transition: opacity .2s;
}
@media (min-width: 480px) { .card-index { font-size: 10px; } }

.card-icon { color: var(--cur); margin-bottom: 7px; width: 20px; height: 20px; flex-shrink: 0; transition: color .4s ease; }
.card-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dev-card .card-icon { color: var(--dev); }
@media (min-width: 480px) { .card-icon { width: 22px; height: 22px; margin-bottom: 8px; } .card-icon svg { width: 21px; height: 21px; } }

/* FREE badge on dev cards */
.card-free-badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.10em;
  background: rgba(79,158,255,0.15); color: var(--dev);
  padding: 2px 6px; border-radius: 2px; text-transform: uppercase;
  margin-bottom: 6px; width: fit-content; line-height: 1.5;
}

.card-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.28; margin-bottom: 5px; letter-spacing: -0.01em;
  transition: color .2s;
}
@media (min-width: 400px) { .card-name { font-size: 14.5px; } }
@media (min-width: 600px) { .card-name { font-size: 15px; } }

.card-short { font-size: 11.5px; color: var(--muted); line-height: 1.52; flex: 1; }
@media (min-width: 480px) { .card-short { font-size: 12px; } }

.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 4px;
}
.card-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.09em;
  color: var(--muted); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 480px) { .card-tag { font-size: 9px; } }

.card-arrow {
  font-family: var(--mono); font-size: 13px; color: var(--cur);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .2s, transform .22s var(--ease), color .4s ease; flex-shrink: 0;
}
.dev-card .card-arrow { color: var(--dev); }
@media (hover: none) { .card-arrow { opacity: .28; transform: translateX(0); } }

/* ── OVERLAY ── */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .36s var(--ease);
  will-change: transform; overflow: hidden;
}
.overlay.active { transform: translateX(0); }

.ov-header {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; border-bottom: 1px solid var(--border);
  background: rgba(8,8,9,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 480px) { .ov-header { padding: 0 20px; } }
@media (min-width: 768px) { .ov-header { padding: 0 28px; } }

.back-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--border);
  color: var(--mid); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; padding: 7px 12px; cursor: pointer;
  text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s; min-height: 36px;
}
.back-btn:hover { border-color: var(--cur); color: var(--cur); background: var(--cur-dim); }
.back-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 480px) { .back-btn { font-size: 11px; padding: 7px 14px; } }

/* overlay dev-mode overrides — kept only for the pentest callout show/hide */
.overlay.dev-mode .sb-included { display: flex; }

.ov-breadcrumb {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: calc(100vw - 160px);
}
.ov-breadcrumb span { color: var(--cur); }
@media (max-width: 479px) { .ov-breadcrumb { display: none; } }
@media (min-width: 480px) { .ov-breadcrumb { font-size: 10px; } }

.ov-body {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@media (min-width: 860px) {
  .ov-body { display: grid; grid-template-columns: 340px 1fr; overflow: hidden; }
}
@media (min-width: 1100px) { .ov-body { grid-template-columns: 380px 1fr; } }

.ov-left { padding: 24px 14px 28px; }
@media (min-width: 480px) { .ov-left { padding: 28px 20px 32px; } }
@media (min-width: 768px) { .ov-left { padding: 30px 28px 32px; } }
@media (min-width: 860px) { .ov-left { padding: 34px 30px; overflow-y: auto; border-right: 1px solid var(--border); } }

.ov-right { padding: 24px 14px 44px; }
@media (min-width: 480px) { .ov-right { padding: 28px 20px 44px; } }
@media (min-width: 768px) { .ov-right { padding: 28px 28px 44px; } }
@media (min-width: 860px) { .ov-right { padding: 34px 30px; overflow-y: auto; } }
@media (max-width: 859px) { .ov-right { border-top: 1px solid var(--border); padding-top: 22px; } }

.ov-icon {
  width: 42px; height: 42px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cur); margin-bottom: 16px; transition: color .4s ease;
}
.ov-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ov-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.17em;
  color: var(--cur); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  transition: color .4s ease;
}
.ov-tag::before { content:''; width: 10px; height: 1px; background: currentColor; display: block; }
@media (min-width: 480px) { .ov-tag { font-size: 10px; } }

.ov-title {
  font-size: 22px; font-weight: 600; line-height: 1.18;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
@media (min-width: 480px) { .ov-title { font-size: 24px; } }
@media (min-width: 768px) { .ov-title { font-size: 27px; } }

/* Included pentest notice for dev services */
.sb-included {
  display: none; /* shown only in dev overlay via .dev-mode */
  align-items: flex-start; gap: 10px;
  background: rgba(79,158,255,0.07); border: 1px solid rgba(79,158,255,0.2);
  padding: 10px 12px; margin-bottom: 14px; border-radius: 1px;
}
.sb-included svg { width: 14px; height: 14px; color: var(--dev); flex-shrink: 0; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-included p { font-size: 11.5px; color: var(--mid); line-height: 1.55; }
.sb-included strong { color: var(--dev); }
@media (min-width: 480px) { .sb-included p { font-size: 12px; } }

.ov-desc { font-size: 12.5px; line-height: 1.8; color: var(--mid); margin-bottom: 22px; }
@media (min-width: 480px) { .ov-desc { font-size: 13px; } }

.ov-section {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.22); text-transform: uppercase; margin-bottom: 10px;
}
@media (min-width: 480px) { .ov-section { font-size: 9.5px; } }

.method-list { margin-bottom: 24px; }
.method-item {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border); align-items: flex-start;
}
.method-item:first-child { border-top: 1px solid var(--border); }
.method-num  { font-family: var(--mono); font-size: 9.5px; color: var(--cur); padding-top: 3px; transition: color .4s ease; }
.method-text { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
@media (min-width: 480px) { .method-num { font-size: 10px; } .method-text { font-size: 13px; } }

.cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--cur-border-h); color: var(--cur);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  padding: 10px 16px; text-decoration: none;
  transition: background .2s, border-color .2s, transform .18s, color .4s ease;
  text-transform: uppercase; min-height: 40px;
}
.cta-link:hover { background: var(--cur-dim); border-color: var(--cur); transform: translateY(-1px); }
.cta-link svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 480px) { .cta-link { font-size: 11px; padding: 11px 18px; } }

.tiers-list { margin-bottom: 24px; }
.tier-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 11px; border: 1px solid var(--border); margin-bottom: -1px;
  cursor: pointer; transition: background .15s, border-color .15s;
  position: relative; min-height: 44px;
}
.tier-row:hover { background: var(--cur-glow); border-color: var(--cur-border-h); z-index: 1; }
.tier-name  { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.tier-scope { font-size: 11px; color: var(--muted); line-height: 1.4; }
.tier-arrow { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 10px; transition: color .15s, transform .15s; flex-shrink: 0; }
.tier-row:hover .tier-arrow { color: var(--cur); transform: translateX(3px); }
@media (min-width: 480px) { .tier-name { font-size: 13.5px; } .tier-scope { font-size: 11.5px; } }

.deliv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
}
@media (max-width: 380px) { .deliv-grid { grid-template-columns: 1fr; } }
.deliv-item { background: var(--bg); padding: 10px 11px; display: flex; gap: 8px; align-items: flex-start; }
.deliv-dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--cur); flex-shrink: 0; margin-top: 6px; transition: background .4s ease; }
.deliv-text { font-size: 11.5px; color: var(--muted); line-height: 1.48; }
@media (min-width: 480px) { .deliv-text { font-size: 12px; } }

/* ── STATUS BAR (desktop only) ── */
.statusbar { display: none; }
@media (min-width: 1024px) {
  .statusbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; bottom: 0; left: 0; right: 0; height: var(--bar-h);
    border-top: 1px solid var(--border);
    background: rgba(8,8,9,0.97); backdrop-filter: blur(8px);
    padding: 0 24px; z-index: 50;
  }
}
.sb-item { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.10em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cur); transition: background .4s ease; }

/* ── MOBILE CONTACT FOOTER ── */
.mobile-footer { border-top: 1px solid var(--border); padding: 18px 14px 24px; margin-top: auto; }
@media (min-width: 480px) { .mobile-footer { padding: 22px 20px 28px; } }
@media (min-width: 768px) { .mobile-footer { padding: 24px 28px 30px; } }
@media (min-width: 1024px) { .mobile-footer { display: none; } }

.mf-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; margin-bottom: 11px; }
@media (min-width: 480px) { .mf-label { font-size: 10px; } }
.mf-items { display: flex; flex-direction: column; gap: 7px; }
.mf-item  { display: flex; align-items: center; gap: 9px; }
.mf-icon  { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.mf-val   { font-family: var(--mono); font-size: 10.5px; color: var(--mid); letter-spacing: 0.04em; }
@media (min-width: 480px) { .mf-val { font-size: 11px; } }
.mf-copy  { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.16); letter-spacing: 0.10em; margin-top: 14px; line-height: 1.7; }

/* scrollbar */
.ov-body::-webkit-scrollbar, .ov-left::-webkit-scrollbar, .ov-right::-webkit-scrollbar { width: 3px; }
.ov-body::-webkit-scrollbar-track, .ov-left::-webkit-scrollbar-track, .ov-right::-webkit-scrollbar-track { background: transparent; }
.ov-body::-webkit-scrollbar-thumb, .ov-left::-webkit-scrollbar-thumb, .ov-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── SEO / i18n additions ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* overlay lazy-load state: hold the frame steady until the service page arrives */
.overlay.ov-loading .ov-body{opacity:0}
.overlay .ov-body{transition:opacity .18s ease}
.overlay.ov-loading::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid var(--cur-dim);border-top-color:var(--cur);border-radius:50%;animation:ovSpin .7s linear infinite;pointer-events:none}
@keyframes ovSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.overlay.ov-loading::after{animation-duration:2s}.overlay .ov-body{transition:none}}
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:0.10em;color:var(--muted);text-decoration:none;border:1px solid var(--border);padding:5px 9px;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;text-transform:uppercase}
.lang-switch:hover{border-color:var(--cur);color:var(--cur);background:var(--cur-dim)}
@media (min-width:480px){.lang-switch{font-size:10px;padding:6px 11px}}
@media (min-width:768px){.lang-switch{font-size:11px;padding:6px 13px}}
.foot-links{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.foot-links a{font-family:var(--mono);font-size:9px;letter-spacing:0.10em;color:rgba(255,255,255,0.28);text-decoration:none;text-transform:uppercase;transition:color .2s}
.foot-links a:hover{color:var(--cur)}
/* service cards are real links now (crawlable); JS intercepts for overlay UX */
a.service-card{text-decoration:none;color:inherit}
a.service-card:visited{color:inherit}

/* ── STANDALONE SERVICE PAGE ── */
.svc-page{width:100%;max-width:none;margin:0;padding:22px 14px 60px}
@media (min-width:480px){.svc-page{padding:26px 20px 70px}}
@media (min-width:768px){.svc-page{padding:30px 28px 80px}}
@media (min-width:1024px){.svc-page{padding:34px clamp(30px,4vw,76px) 90px}}
.breadcrumb{font-family:var(--mono);font-size:9.5px;letter-spacing:0.09em;color:var(--muted);text-transform:uppercase;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--cur)}
.breadcrumb span.sep{color:rgba(255,255,255,0.2)}
.breadcrumb span.current{color:var(--cur)}
@media (min-width:480px){.breadcrumb{font-size:10px}}
.svc-hero-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:0.17em;color:var(--cur);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:12px;transition:color .4s ease}
.svc-hero-tag::before{content:'';width:14px;height:1px;background:currentColor;display:block}
@media (min-width:480px){.svc-hero-tag{font-size:10px}}
.svc-h1{font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px;color:var(--text)}
@media (min-width:480px){.svc-h1{font-size:32px}}
@media (min-width:768px){.svc-h1{font-size:38px}}
.svc-lead{font-size:13.5px;line-height:1.8;color:var(--mid);margin-bottom:26px;max-width:760px}
@media (min-width:480px){.svc-lead{font-size:14.5px}}
.svc-grid{display:grid;grid-template-columns:1fr;gap:34px}
.svc-main{min-width:0}
@media (min-width:860px){.svc-grid{grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:clamp(36px,4vw,72px);align-items:start}}
.svc-page .sb-included{display:flex;margin-bottom:22px;max-width:760px}
.svc-icon{width:46px;height:46px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--cur);margin-bottom:18px;transition:color .4s ease}
.svc-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-related{border-top:1px solid var(--border);margin-top:44px;padding-top:26px}
.svc-viz-wrap{border-top:1px solid var(--border);margin-top:44px;padding-top:26px}
.svc-viz-wrap .ov-section{margin-bottom:14px}
.svc-related-label{font-family:var(--mono);font-size:9.5px;letter-spacing:0.16em;color:rgba(255,255,255,0.3);text-transform:uppercase;margin-bottom:14px}
.svc-related-list{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
@media (min-width:600px){.svc-related-list{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.svc-related-list{grid-template-columns:1fr 1fr 1fr}}
.svc-related-list a{background:var(--bg);padding:13px 14px;text-decoration:none;display:flex;flex-direction:column;gap:3px;transition:background .18s}
.svc-related-list a:hover{background:var(--cur-glow)}
.svc-related-name{font-size:12.5px;font-weight:500;color:var(--text)}
.svc-related-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase}
.svc-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--muted);text-decoration:none;text-transform:uppercase;margin-top:30px;transition:color .2s}
.svc-back:hover{color:var(--cur)}
.svc-back svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-side-card{border:1px solid var(--border);padding:20px 18px;position:relative}
.svc-side-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cur),transparent)}


/* Utility classes replacing former inline styles. */
.link-inherit { color: inherit; text-decoration: none; }
.text-mid { color: var(--mid); }
.ov-section-tight { margin-bottom: 11px; }
.ov-section-spaced { margin-top: 24px; margin-bottom: 11px; }
.ov-section-spaced-lg { margin-top: 26px; margin-bottom: 11px; }