:root {
  --nav-h: 74px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 20px 70px rgba(0, 0, 0, 0.34);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.28);
  --ring: 0 0 0 3px rgba(139, 92, 246, 0.38);
}

::selection {
  background: rgba(34, 211, 238, 0.28);
  color: #fff;
}

html {
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 18% -10%, rgba(59, 130, 246, 0.12), transparent 32rem),
    radial-gradient(circle at 85% 8%, rgba(34, 211, 238, 0.09), transparent 28rem),
    var(--bg) !important;
}

body.nav-open {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: var(--radius-sm);
  background: #050812;
  color: #fff;
  font: 700 0.82rem/1 var(--font-body);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

nav {
  min-height: var(--nav-h);
  background: rgba(5, 8, 18, 0.78) !important;
  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.nav-logo,
.footer-logo {
  letter-spacing: 0 !important;
}

.nav-links a,
.footer-col a,
.footer-links a {
  text-underline-offset: 4px;
}

.nav-links a:hover,
.footer-col a:hover,
.footer-links a:hover {
  color: #fff !important;
}

.nav-links a[aria-current="page"] {
  color: #fff !important;
}

.theme-toggle {
  min-height: 38px;
  padding: 0 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(240, 244, 255, 0.78);
  font: 700 0.72rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.theme-toggle[aria-pressed="true"] {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.16);
  color: var(--purple-bright, #a78bfa);
}

.hamburger {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045) !important;
}

.mobile-nav {
  top: var(--nav-h) !important;
  background:
    linear-gradient(180deg, rgba(6, 8, 16, 0.98), rgba(8, 12, 24, 0.98)) !important;
  border-top: 1px solid var(--border);
}

.mobile-nav a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.85rem;
}

.mobile-nav a[aria-current="page"] {
  color: #7dd3fc !important;
}

.hero,
.page-hero {
  isolation: isolate;
}

.page-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(59, 130, 246, 0.1), transparent 26rem);
}

.page-hero p,
.hero-sub,
.section-sub,
.sb-desc,
.port-desc,
.art-excerpt,
.feat-excerpt,
.team-bio,
.val-desc,
.mv-text,
.footer-desc {
  color: rgba(240, 244, 255, 0.62) !important;
}

.section-label {
  color: #7dd3fc !important;
}

.section-title,
.page-hero h1,
.hero-h1,
.cta-inner h2 {
  letter-spacing: -0.02em !important;
}

.btn-glow,
.nav-btn,
.footer-nl button,
.nl-widget button,
.ftab {
  border-radius: var(--radius-sm) !important;
}

.btn-glow.primary,
.nav-btn.primary,
.footer-nl button,
.nl-widget button {
  background: linear-gradient(135deg, #2563eb 0%, #0891b2 55%, #7c3aed 100%) !important;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.24) !important;
}

.btn-glow.primary:hover,
.nav-btn.primary:hover,
.footer-nl button:hover,
.nl-widget button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(37, 99, 235, 0.34) !important;
}

button:disabled,
.footer-nl button:disabled,
.nl-widget button:disabled {
  cursor: wait !important;
  opacity: 0.72;
}

.icon-mark,
.visual-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background:
    radial-gradient(circle at 30% 20%, rgba(125, 211, 252, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(8, 145, 178, 0.16));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 34px rgba(0,0,0,0.28);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.icon-mark::before,
.visual-mark::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.2), transparent 62%);
  opacity: 0.8;
  z-index: -1;
}

.icon-mark {
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.55em;
  font-size: 0.72em;
}

.visual-mark {
  min-width: 2.55em;
  min-height: 2.55em;
  padding: 0.35em;
  border-radius: 0.28em;
  font-size: 0.34em;
}

.icon-mark[data-icon="AI"],
.visual-mark[data-icon="AI"],
.icon-mark[data-icon="CV"],
.visual-mark[data-icon="CV"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(124, 58, 237, 0.22));
}

.icon-mark[data-icon="SEC"],
.visual-mark[data-icon="SEC"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(52, 211, 153, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.3), rgba(37, 99, 235, 0.18));
}

.icon-mark[data-icon="DATA"],
.visual-mark[data-icon="DATA"],
.icon-mark[data-icon="DB"],
.visual-mark[data-icon="DB"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(8, 145, 178, 0.28), rgba(14, 165, 233, 0.16));
}

.icon-mark[data-icon="APP"],
.visual-mark[data-icon="APP"],
.icon-mark[data-icon="WEB"],
.visual-mark[data-icon="WEB"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(29, 78, 216, 0.28), rgba(14, 165, 233, 0.16));
}

.icon-mark[data-icon="ROI"],
.visual-mark[data-icon="ROI"],
.icon-mark[data-icon="SLA"],
.visual-mark[data-icon="SLA"],
.icon-mark[data-icon="DEP"],
.visual-mark[data-icon="DEP"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(251, 191, 36, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(8, 145, 178, 0.18));
}

.mark-svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.4));
}

.visual-mark .mark-svg {
  width: 54%;
  height: 54%;
  stroke-width: 1.55;
}

.icon-mark:hover,
.visual-mark:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 42px rgba(0,0,0,0.34), 0 0 26px rgba(59,130,246,0.14);
}

.featured-img .visual-mark,
.blog-img .visual-mark,
.port-img .visual-mark,
.sb-visual-icon.visual-mark {
  font-size: 2.4rem;
}

.art-img .visual-mark {
  font-size: 1.55rem;
}

.ri-icon .icon-mark,
.ii-icon .icon-mark,
.fb-icon.icon-mark,
.ow-icon.icon-mark,
.sb-icon.icon-mark,
.mv-icon.icon-mark,
.val-icon .icon-mark,
.tech-emoji .icon-mark,
.bento-icon.icon-mark,
.afc-icon .icon-mark,
.oi .icon-mark {
  font-size: 1rem;
}

.team-avatar .icon-mark {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  font-size: 1rem;
}

.team-avatar .mark-svg {
  width: 52%;
  height: 52%;
}

.testi-stars {
  color: #7dd3fc !important;
  letter-spacing: 0.18em !important;
}

.btn-glow.secondary,
.nav-btn,
.ftab {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.bento,
.form-card,
.info-panel,
.response-panel,
.sb-widget,
.port-card,
.article-card,
.featured,
.team-card,
.val-card,
.mv-grid,
.process-steps,
.ow-list,
.faq-list,
.policy {
  box-shadow: var(--shadow-card);
}

.bento,
.form-card,
.info-panel,
.response-panel,
.sb-widget,
.port-card,
.article-card,
.featured,
.team-card,
.val-card,
.mv-grid,
.process-steps,
.ow-list,
.faq-list,
.sb-visual {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.bento-cell,
.form-card,
.info-panel,
.response-panel,
.sb-widget,
.port-card,
.article-card,
.featured,
.team-card,
.val-card,
.mv-cell,
.ps-item,
.ow-row,
.faq-item,
.sb-visual {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--bg2) !important;
}

.bento-cell:hover,
.port-card:hover,
.article-card:hover,
.featured:hover,
.team-card:hover,
.val-card:hover,
.ow-row:hover,
.ps-item:hover,
.mv-cell:hover {
  border-color: rgba(96, 165, 250, 0.34) !important;
  box-shadow: var(--shadow-soft);
}

.port-card:hover,
.article-card:hover,
.featured:hover,
.team-card:hover,
.val-card:hover {
  transform: translateY(-5px) !important;
}

.port-img,
.art-img,
.featured-img,
.sb-visual,
.team-avatar {
  position: relative;
  overflow: hidden;
  background-blend-mode: screen;
}

.port-img::before,
.art-img::before,
.featured-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%),
    radial-gradient(circle at 50% 10%, rgba(34, 211, 238, 0.18), transparent 45%);
  pointer-events: none;
}

.form-group input,
.form-group select,
.form-group textarea,
.footer-nl input,
.nl-widget input {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.footer-nl input:hover,
.nl-widget input:hover {
  border-color: rgba(96, 165, 250, 0.32) !important;
}

.form-group label {
  color: rgba(240, 244, 255, 0.46) !important;
}

.response-badge,
.ow-status,
.feat-tag,
.port-cat {
  border-color: rgba(34, 211, 238, 0.22) !important;
  background: rgba(34, 211, 238, 0.075) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
    var(--bg2) !important;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.social-btn {
  cursor: default;
}

@media (max-width: 1024px) {
  nav {
    padding-inline: 1.5rem !important;
  }

  .nav-right .nav-btn:not(.primary) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-h: 66px;
  }

  .hero,
  .page-hero {
    padding-top: 7.75rem !important;
  }

  .btn-glow {
    width: 100%;
    justify-content: center;
  }

  .nav-right {
    gap: 0.55rem !important;
  }

  .nav-right .nav-btn {
    display: none !important;
  }

  .hero-actions,
  .cta-btns {
    width: 100%;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  #starfield,
  .cursor-glow {
    display: none !important;
  }
}

html.light-mode {
  --bg: #f7f8fb;
  --bg2: #ffffff;
  --surface: rgba(9, 18, 32, 0.055);
  --surface-hover: rgba(9, 18, 32, 0.085);
  --border: rgba(15, 23, 42, 0.12);
  --border-hover: rgba(37, 99, 235, 0.36);
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.68);
  --muted2: rgba(15, 23, 42, 0.46);
  --blue: #2563eb;
  --blue-bright: #1d4ed8;
  --cyan: #0f766e;
  --purple: #7c3aed;
  --green: #047857;
  --orange: #b45309;
  --shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 16px 42px rgba(15, 23, 42, 0.1);
  color-scheme: light;
}

body.light-mode {
  background:
    radial-gradient(circle at 12% -10%, rgba(37, 99, 235, 0.1), transparent 28rem),
    radial-gradient(circle at 86% 4%, rgba(15, 118, 110, 0.09), transparent 28rem),
    linear-gradient(180deg, #fbfcff 0%, #eef3f8 54%, #f8fafc 100%) !important;
  color: #0f172a !important;
}

body.light-mode::before {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
  opacity: 0.72 !important;
}

body.light-mode::after,
.light-mode .ambient,
.light-mode .aurora,
.light-mode #starfield,
.light-mode .cursor-glow {
  display: none !important;
}

.light-mode nav {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.1) !important;
}

.light-mode .nav-logo,
.light-mode .mobile-nav a,
.light-mode .section-title,
.light-mode .page-hero h1,
.light-mode .hero-h1,
.light-mode .bento-title,
.light-mode .ow-title,
.light-mode .blog-title,
.light-mode .testi-author,
.light-mode .sb-title,
.light-mode .ps-title,
.light-mode .cta-inner h2,
.light-mode h1,
.light-mode h2,
.light-mode h3 {
  color: #0f172a !important;
}

.light-mode .nav-links a,
.light-mode .footer-col a,
.light-mode .footer-links a,
.light-mode p,
.light-mode .hero-sub,
.light-mode .section-sub,
.light-mode .bento-desc,
.light-mode .sb-desc,
.light-mode .ow-desc,
.light-mode .testi-quote,
.light-mode .blog-excerpt,
.light-mode .ps-desc,
.light-mode .footer-desc {
  color: rgba(15, 23, 42, 0.66) !important;
}

.light-mode .nav-links a:hover,
.light-mode .nav-links a.active,
.light-mode .nav-links a[aria-current="page"],
.light-mode .footer-col a:hover,
.light-mode .footer-links a:hover {
  color: #0f172a !important;
}

.theme-toggle {
  color: rgba(240, 244, 255, 0.78);
}

.light-mode .theme-toggle,
.light-mode .nav-btn,
.light-mode .btn-glow.secondary,
.light-mode .footer-nl input,
.light-mode input,
.light-mode select,
.light-mode textarea {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.13) !important;
  color: #0f172a !important;
}

.light-mode .btn-glow.primary,
.light-mode .nav-btn.primary,
.light-mode .footer-nl button,
.light-mode .nl-widget button {
  background: linear-gradient(135deg, #2563eb, #0f766e) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.18) !important;
}

.light-mode .hero::before,
.light-mode .page-hero::before,
.light-mode .hero-visual,
.light-mode .service-hero-art,
.light-mode .bento-cell,
.light-mode .tech-item,
.light-mode .ow-card,
.light-mode .testi-card,
.light-mode .blog-card,
.light-mode .featured,
.light-mode .port-card,
.light-mode .article-card,
.light-mode .service-shot,
.light-mode .sb-inner,
.light-mode .sb-visual,
.light-mode .cta-inner,
.light-mode .process-steps,
.light-mode .service-principles,
.light-mode .ai-terminal,
.light-mode .form-card,
.light-mode .info-panel,
.light-mode .response-panel,
.light-mode .sb-widget,
.light-mode .team-card,
.light-mode .val-card,
.light-mode .mv-cell,
.light-mode .ps-item,
.light-mode .ow-row,
.light-mode .faq-item,
.light-mode .policy {
  border-color: rgba(15, 23, 42, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)),
    #fff !important;
  box-shadow: var(--shadow-card) !important;
}

.light-mode .hero,
.light-mode .page-hero,
.light-mode .ai-section,
.light-mode .tech-section,
.light-mode .stats-strip,
.light-mode .cta-section,
.light-mode footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(238, 243, 248, 0.42)),
    transparent !important;
}

.light-mode .service-shot img,
.light-mode .service-hero-art img,
.light-mode .port-img,
.light-mode .blog-img,
.light-mode .art-img,
.light-mode .featured-img {
  filter: saturate(0.92) contrast(0.98) brightness(1.04) !important;
}

.light-mode .icon-mark,
.light-mode .visual-mark,
.light-mode .tech-logo-wrap,
.light-mode .ps-num,
.light-mode .check-icon {
  background:
    radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 118, 110, 0.09)) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(15, 23, 42, 0.12) !important;
}

.light-mode .btag,
.light-mode .stag,
.light-mode .hero-proof span,
.light-mode .service-proof span,
.light-mode .cta-proof span,
.light-mode .service-hero-art figcaption span {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: rgba(15, 23, 42, 0.62) !important;
}

.light-mode .mark-svg {
  stroke: currentColor !important;
  filter: none !important;
}

.light-mode .mobile-nav {
  background: rgba(255, 255, 255, 0.98) !important;
}

.light-mode .hamburger span {
  background: #0f172a !important;
}

.light-mode footer {
  border-top-color: rgba(15, 23, 42, 0.1) !important;
}

@media (max-width: 760px) {
  .theme-toggle {
    min-height: 36px;
    padding-inline: 0.75rem;
  }
}

/* ── Keyboard / focus-visible improvements ───────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

.nav-links a:focus-visible,
.footer-col a:focus-visible,
.footer-links a:focus-visible {
  outline-offset: 6px;
}

.btn-glow:focus-visible,
.nav-btn:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.38);
}

/* ── Testimonial stars ───────────────────────────────────────────────────── */
.testi-stars {
  background: linear-gradient(90deg, #fbbf24, #f59e0b 40%, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.12em;
  user-select: none;
}

/* ── Print styles ────────────────────────────────────────────────────────── */
@media print {
  #starfield,
  .ambient,
  .aurora,
  .cursor-glow,
  nav,
  .mobile-nav,
  .hamburger,
  .theme-toggle,
  .cta-section,
  footer {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
  }

  a {
    color: #0040cc !important;
    text-decoration: underline !important;
  }

  .section-title,
  h1, h2, h3 {
    color: #111 !important;
  }

  main {
    padding-top: 0 !important;
  }
}