:root {
      --ink: #07152b;
      --ink-2: #10284c;
      --blue: #2563eb;
      --sky: #38bdf8;
      --aqua: #22d3ee;
      --paper: #f5f8fc;
      --line: #dbe7f4;
      --muted: #61718b;
      --white: #ffffff;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; width: 100%; font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--paper); }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; }
    .site-shell { width: 100%; overflow: hidden; }
    .tech-grid {
      background-image: linear-gradient(rgba(125,211,252,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,.09) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .nav-link { color: #c7d5eb; font-size: .9rem; font-weight: 600; transition: color .2s ease; }
    .nav-link:hover { color: white; }
    .primary-btn, .secondary-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: .7rem;
      padding: .78rem 1.05rem; font-size: .9rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .primary-btn { color: white; background: #2563eb; border: 1px solid #2563eb; box-shadow: 0 12px 25px rgba(37,99,235,.28); }
    .primary-btn:hover { background: #1d4ed8; transform: translateY(-2px); }
    .secondary-btn { color: white; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); }
    .secondary-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
    .section-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 5.5rem 1.5rem; }
    .eyebrow { color: #2563eb; font-family: "Space Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .section-heading { margin: .65rem 0 0; max-width: 720px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.055em; font-weight: 700; }
    .section-copy { max-width: 620px; margin: 1rem 0 0; color: var(--muted); line-height: 1.7; }
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in-view { opacity: 1; transform: translateY(0); }
    .service-card { border: 1px solid var(--line); border-radius: 1rem; background: white; padding: 1.25rem; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
    .service-card:hover { transform: translateY(-4px); border-color: #93c5fd; box-shadow: 0 16px 32px rgba(15, 42, 82, .09); }
    .service-icon { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .75rem; color: #2563eb; background: #eff6ff; }
    .filter-chip { padding: .55rem .85rem; border: 1px solid #d6e1ef; border-radius: 999px; color: #52627b; background: white; font-size: .8rem; font-weight: 700; transition: .2s ease; }
    .filter-chip:hover, .filter-chip.active { border-color: #2563eb; color: white; background: #2563eb; }
    .portfolio-card { position: relative; min-height: 300px; overflow: hidden; border-radius: 1rem; background: #10284c; }
    .portfolio-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .45s ease; }
    .portfolio-card:hover img { transform: scale(1.06); }
    .portfolio-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 1.4rem; color: white; background: linear-gradient(180deg, transparent 25%, rgba(4,15,34,.9)); }
    .testimonial { border: 1px solid #dbe7f4; border-radius: 1rem; background: white; padding: 1.5rem; }
    .faq-item { border-bottom: 1px solid #dbe7f4; }
    .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; color: var(--ink); background: transparent; border: 0; text-align: left; font-weight: 700; }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
    .faq-answer > div { overflow: hidden; color: var(--muted); line-height: 1.7; }
    .faq-item.open .faq-answer { grid-template-rows: 1fr; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .faq-icon { color: #2563eb; transition: transform .2s ease; }
    .field { width: 100%; margin-top: .42rem; padding: .8rem .9rem; border: 1px solid #cbd9ea; border-radius: .65rem; color: var(--ink); background: white; }
    .field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline: 0; }
    .field-label { display: block; color: #dceaff; font-size: .85rem; font-weight: 700; }
    .form-error { min-height: 1.1rem; margin: .3rem 0 0; color: #fca5a5; font-size: .75rem; }
    .mobile-menu { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
    .mobile-menu.open { max-height: 400px; }
    @media (max-width: 760px) {
      .desktop-nav { display: none; }
      .mobile-toggle { display: inline-flex !important; }
      .hero-art { display: none; }
      .section-wrap { padding-top: 4rem; padding-bottom: 4rem; }
    }

/* Multi-page navigation additions */
.page-hero{background:#07152b}
.page-title{margin:.75rem 0 0;max-width:900px;font-size:clamp(2.5rem,6vw,5rem);line-height:1.02;letter-spacing:-.055em;font-weight:700}
.page-lead{max-width:760px;margin-top:1.25rem;font-size:1.1rem;line-height:1.8}
.page-card{display:block;text-decoration:none;min-height:380px}
.page-icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:1rem;background:rgba(37,99,235,.25);color:#67e8f9;flex:none}
.feature-list{display:grid;gap:1rem}
.feature-list li{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid #dbe7f4;border-radius:.9rem;background:#fff;line-height:1.6;color:#475569}
.feature-list svg{flex:none;color:#2563eb;margin-top:.15rem}
.mobile-menu{display:none}
.mobile-menu.open{display:block}
.mobile-toggle{display:none}
@media (max-width:760px){
  .desktop-nav{display:none!important}
  .mobile-toggle{display:flex!important}
  .page-title{font-size:2.7rem}
  .section-wrap{padding-left:1.25rem;padding-right:1.25rem}
}

.solution-card{position:relative;display:block;overflow:hidden;border-radius:20px;min-height:380px;text-decoration:none;background:#07152b;border:1px solid rgba(255,255,255,.1);transition:transform .2s,border-color .2s}
.solution-card:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.45)}
.solution-art{height:235px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(37,99,235,.48),rgba(7,21,43,.95) 68%)}
.solution-art svg{width:82px;height:82px;color:#67e8f9;stroke-width:1.15}
.solution-software .solution-art{background:radial-gradient(circle at 50% 45%,rgba(14,165,233,.42),rgba(7,21,43,.95) 68%)}
.solution-network .solution-art{background:radial-gradient(circle at 50% 45%,rgba(16,185,129,.32),rgba(7,21,43,.95) 68%)}
.solution-automation .solution-art{background:radial-gradient(circle at 50% 45%,rgba(139,92,246,.36),rgba(7,21,43,.95) 68%)}
.solution-copy{padding:24px}
