:root {
    --bg-page: #f5f7fa;
    --bg-card: #fbfcfd;
    --bg-cluster: #f1f3f7;
    --bg-firewall-col: #eef1f5;
    --border: #dde2ea;
    --border-dashed: #b8bec7;
    --text: #1f242d;
    --text-muted: #3f4751;
    --status-green: #22c55e;
    --status-glow: rgba(34, 197, 94, 0.7);
    --line: #6b7280;
    --line-internal: #4b5563;
    --infra-blue: #5c6bc0;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  /* ---------- Master layout: 1550px wrap, aligned header + hero, 35/65 split ---------- */
  .wrap {
    max-width: 1550px;
  }

  .site-header {
    padding-top: 24px;
    padding-bottom: 10px;
  }

  .site-header .brand-logo {
    height: 39px;
  }

  .site-header .nav {
    height: auto;
  }

  /* ---------- Primary navigation ---------- */
  .site-nav {
    display: flex;
    gap: 40px;
    align-items: center;
  }

  .site-nav a {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--fg);
    padding: 8px 2px;
    transition: color 0.3s ease, letter-spacing 0.4s ease;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.65, 0.05, 0.36, 1);
  }

  .site-nav a:hover {
    color: var(--accent);
    letter-spacing: 0.018em;
  }

  .site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .site-nav .nav-cta {
    margin-left: 4px;
    padding: 8px 18px;
    border: 1px solid var(--fg);
    border-radius: 2px;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, letter-spacing 0.4s ease;
  }

  .site-nav .nav-cta::after {
    display: none;
  }

  .site-nav .nav-cta:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    letter-spacing: 0.018em;
  }

  /* ---------- Language switcher ---------- */
  .lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rule);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
  }

  .lang-switch a {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 7px 11px;
    line-height: 1;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .lang-switch a + a {
    border-left: 1px solid var(--rule);
  }

  .lang-switch a:hover {
    color: var(--fg);
    background: rgba(0, 0, 0, 0.03);
  }

  .lang-switch a.active {
    color: #fff;
    background: var(--accent);
  }

  .lang-switch a.active:hover {
    color: #fff;
  }

  /* Section anchors clear the sticky header */
  #services, #founder, #contact {
    scroll-margin-top: 96px;
  }

  @media (max-width: 760px) {
    .site-nav { display: none; }
  }

  .hero {
    padding-top: clamp(32px, 4vw, 56px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }

  @media (max-width: 900px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 5vw, 48px);
    }
  }

  /* Keep long words inside the text column so they never overflow into the
     diagram panel (Russian "масштабируется" is wider than the 13ch cap). */
  .hero h1 {
    overflow-wrap: break-word;
    hyphens: manual;
  }
  html[lang="ru"] .hero h1 {
    max-width: 16ch;
  }

  /* ---------- Diagram host (responsive container) ---------- */
  .diagram-host {
    position: relative;
    width: 100%;
    aspect-ratio: 950 / 605;
    overflow: hidden;
    background: transparent;
  }

  .diagram-disclaimer {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
    margin: 10px 4px 0;
    font-weight: 400;
    opacity: 0.65;
  }

  .diagram-scale-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 950px;
    height: 605px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 12px;
    background: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transform-origin: top left;
  }

  /* ---------- Layout ---------- */
  .outer-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 110px;
    position: relative;
  }

  .diagram-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
  }

  .flow-line-external {
    fill: none;
    stroke: var(--line);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 6;
    animation: flow 0.9s linear infinite;
  }

  .flow-line-internal {
    fill: none;
    stroke: var(--line-internal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .flow-line-animated {
    fill: none;
    stroke: var(--line-internal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 6;
    animation: flow 0.9s linear infinite;
  }

  .particle-group {
    filter: drop-shadow(0 0 2.5px rgba(34, 197, 94, 0.95));
  }

  .db-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
  }

  .db-orbit-bg,
  .db-orbit-fg,
  .app-orbit-bg,
  .app-orbit-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.8));
  }

  .db-orbit-bg, .app-orbit-bg { z-index: 0; }
  .db-icon-wrap > .db-icon,
  .app-icon-wrap > .app-icon { position: relative; z-index: 1; }
  .db-orbit-fg, .app-orbit-fg { z-index: 2; }

  .orbit-particle {
    fill: #4ade80;
    pointer-events: none;
  }

  .particle-group.particle-group-bad {
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.95));
  }

  .particle {
    fill: #86efac;
    pointer-events: none;
  }

  .particle.particle-bad {
    fill: #fca5a5;
  }

  .particle-label {
    fill: #ef4444;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: alphabetic;
  }

  @keyframes flow {
    to { stroke-dashoffset: -14; }
  }

  /* ---------- External stack ---------- */
  .external-stack {
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: relative;
    z-index: 3;
  }

  .external-node {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text);
  }

  .external-icon {
    width: 68px;
    height: 73px;
    display: block;
  }

  .external-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
  }

  .external-node .sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: -2px;
  }

  /* ---------- Availability container ---------- */
  .availability-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow:
      0 8px 28px rgba(20, 30, 50, 0.06),
      0 2px 6px rgba(20, 30, 50, 0.04);
  }

  .availability-header {
    position: relative;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
  }

  .status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-green);
    box-shadow:
      0 0 12px var(--status-glow),
      0 1px 3px var(--status-glow);
  }

  .availability-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .availability-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    border-top: 1px solid var(--border);
    background: #fff;
  }

  .availability-footer .metric {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .availability-footer .metric-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .availability-footer .metric-value {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
    position: relative;
  }

  .revenue-popup {
    position: absolute;
    right: 0;
    top: 50%;
    color: var(--status-green);
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 28px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    --jx: 0px;
    --jy-end: -160px;
    animation: revenueFloat 3s cubic-bezier(0.16, 0.58, 0.35, 1) forwards;
  }

  @keyframes revenueFloat {
    0% {
      opacity: 0;
      transform: translate(var(--jx), -50%);
    }
    8% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(var(--jx), var(--jy-end));
    }
  }

  .availability-header h2::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--status-green);
    box-shadow:
      0 0 0 2px rgba(34, 197, 94, 0.18),
      0 0 8px var(--status-glow),
      0 0 16px rgba(34, 197, 94, 0.55),
      0 0 24px rgba(34, 197, 94, 0.3);
    animation: pulse 2.4s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
  }

  /* ---------- Main content ---------- */
  .main-content {
    display: flex;
    align-items: stretch;
  }

  .firewall-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border-right: 1px solid var(--border);
    background: var(--bg-firewall-col);
    position: relative;
    z-index: 3;
  }

  .firewall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .firewall-icon {
    width: 62px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    line-height: 1;
    color: #c62828;
  }

  .firewall-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
  }

  .systems-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 14px 36px 14px 72px;
  }

  /* ---------- Cluster sub-containers ---------- */
  .cluster-group {
    border: 1px dashed var(--border-dashed);
    border-radius: 10px;
    padding: 14px 18px;
    background: var(--bg-cluster);
    position: relative;
    z-index: 3;
  }

  .cluster-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 7px;
  }

  .cluster-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
  }

  /* ---------- Bridge (Failover + Redis) ---------- */
  .bridge-row {
    display: block;
    position: relative;
    height: 118px;
    z-index: 3;
  }

  .bridge-row > .failover,
  .bridge-row > .redis-cache {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
  }

  .bridge-row > .failover { left: 50%; }
  .bridge-row > .redis-cache { left: 75%; }

  /* ---------- Nodes ---------- */
  .db-node {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
  }

  .failover, .redis-cache {
    width: 100px;
    height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 4px;
    padding-bottom: 18px;
    background: transparent;
  }

  .app-server {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
    background: transparent;
  }

  .db-icon {
    width: 62px;
    height: 78px;
    display: block;
    flex-shrink: 0;
  }

  .redis-icon {
    width: 62px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 50px;
    line-height: 1;
    color: #ffffff;
    position: relative;
  }

  .failover-icon {
    width: 62px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 47px;
    line-height: 1;
    color: #ffffff;
    position: relative;
  }

  .app-icon {
    width: 57px;
    height: 73px;
    display: block;
    flex-shrink: 0;
  }

  .app-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
  }

  .app-gear {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    animation: gearSpin 4s linear infinite;
    transform-origin: center center;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
    z-index: 3;
  }

  @keyframes gearSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  .db-label, .app-label, .failover-label, .redis-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
    line-height: 1;
  }

  /* ---------- Ambient occlusion shadow ---------- */
  .db-icon,
  .app-icon,
  .external-icon {
    filter: drop-shadow(0 8px 14px rgba(20, 30, 50, 0.14));
  }

  .firewall-icon {
    text-shadow: 0 8px 14px rgba(20, 30, 50, 0.18);
  }

  .failover-icon::after,
  .redis-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--infra-blue);
    transform: translate(-50%, -50%);
    z-index: -1;
    box-shadow: 0 8px 14px rgba(20, 30, 50, 0.18);
  }

  /* ---------- Icon hover scale ---------- */
  .db-icon,
  .app-icon,
  .redis-icon,
  .external-icon,
  .firewall-icon,
  .failover-icon {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
  }

  .db-icon:hover,
  .app-icon:hover,
  .redis-icon:hover,
  .external-icon:hover,
  .firewall-icon:hover,
  .failover-icon:hover {
    transform: scale(1.2);
  }

  .app-sublabel {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* ---------- Sync arrows between DBs ---------- */
  .sync-arrow {
    font-size: 18px;
    color: #5c6bc0;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
  }

  .sync-arrow .sync-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c6bc0;
    margin-top: 4px;
  }

  /* ---------- Founder section ---------- */
  .founder {
    padding: clamp(72px, 10vw, 128px) 0;
    border-bottom: 1px solid var(--rule);
  }

  .founder-grid {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }

  .founder-photo {
    position: relative;
  }

  .founder-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow:
      0 30px 60px -20px rgba(20, 30, 50, 0.22),
      0 12px 24px -10px rgba(20, 30, 50, 0.12);
  }

  .founder-text h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.022em;
    margin: 0 0 24px;
    font-weight: 600;
    line-height: 1.1;
  }

  .founder-text p {
    color: var(--fg);
    font-size: 16.5px;
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 60ch;
  }

  .founder-text p.lede {
    font-size: 19px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  @media (max-width: 900px) {
    .founder-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 5vw, 48px);
    }
    .founder-photo {
      max-width: 420px;
    }
  }

  /* ---------- Services section ("What We Build") ---------- */
  .services {
    padding: clamp(72px, 10vw, 128px) 0;
    border-bottom: 1px solid var(--rule);
  }

  .services-header {
    max-width: 760px;
    margin: 0 0 56px;
  }

  .services-header h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.022em;
    margin: 0 0 16px;
    font-weight: 600;
    line-height: 1.1;
  }

  .services-tagline {
    font-size: clamp(17px, 1.35vw, 20px);
    color: var(--fg-dim);
    margin: 0;
    font-weight: 400;
    line-height: 1.55;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
  }

  .service-card {
    background: var(--bg);
    padding: 28px 28px 32px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 34px;
    row-gap: 8px;
    align-items: start;
    transition: background 0.18s ease;
  }

  .service-card:hover {
    background: #fff;
  }

  .service-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    font-size: 52px;
    line-height: 1;
    width: 56px;
    text-align: center;
    color: #1F75DE;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
  }

  .service-card:hover .service-icon {
    transform: scale(1.12);
  }

  .service-num {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.04em;
  }

  .service-card h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }

  .service-card p {
    grid-column: 2;
    grid-row: 3;
    color: var(--fg-dim);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
  }

  @media (max-width: 900px) {
    .services-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  /* ---------- Contact section ---------- */
  .contact {
    padding: clamp(72px, 10vw, 128px) 0;
    border-bottom: 1px solid var(--rule);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }

  @media (max-width: 900px) {
    .contact-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 5vw, 48px);
    }
  }

  .contact-intro h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.022em;
    margin: 0 0 20px;
    font-weight: 600;
    line-height: 1.1;
  }

  .contact-intro p {
    color: var(--fg-dim, #5a5f6a);
    font-size: 16.5px;
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: 38ch;
  }

  .contact-intro .contact-details {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    font-size: 18.5px;
    color: var(--fg-dim, #5a5f6a);
  }

  .contact-intro .contact-details li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
  }

  .contact-intro .contact-details li:last-child {
    margin-bottom: 0;
  }

  .contact-intro .contact-details i {
    color: var(--accent, #8a6a3d);
    width: 20px;
    text-align: center;
    flex: none;
  }

  .contact-intro .contact-details a {
    color: var(--fg, #16181c);
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .contact-intro .contact-details a:hover {
    color: var(--accent, #8a6a3d);
    border-bottom-color: var(--accent, #8a6a3d);
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-row label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-dim, #5a5f6a);
  }

  .form-row label .optional {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 11px;
    opacity: 0.7;
    margin-left: 4px;
  }

  .form-row input,
  .form-row textarea {
    background: #fff;
    border: 1px solid var(--rule, #e2dfd6);
    border-radius: 4px;
    padding: 12px 14px;
    font: 400 15px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--fg, #16181c);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
  }

  .form-row textarea {
    resize: vertical;
    min-height: 120px;
  }

  .form-row input::placeholder,
  .form-row textarea::placeholder {
    color: #a8aab0;
  }

  .form-row input:focus,
  .form-row textarea:focus {
    outline: none;
    border-color: #1F75DE;
    box-shadow: 0 0 0 3px rgba(31, 117, 222, 0.14);
  }

  .contact-submit {
    align-self: flex-start;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
  }

  /* Contact-form validation states & status notices. */
  .form-row.has-error input,
  .form-row.has-error textarea {
    border-color: #d23b3b;
  }
  .form-row.has-error input:focus,
  .form-row.has-error textarea:focus {
    border-color: #d23b3b;
    box-shadow: 0 0 0 3px rgba(210, 59, 59, 0.14);
  }
  .field-error {
    font-size: 13px;
    color: #c62f2f;
  }
  .form-notice {
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .form-notice-ok {
    background: rgba(46, 160, 90, 0.12);
    border: 1px solid rgba(46, 160, 90, 0.4);
    color: #1f7a45;
  }
  .form-notice-err {
    background: rgba(210, 59, 59, 0.1);
    border: 1px solid rgba(210, 59, 59, 0.4);
    color: #c62f2f;
  }

  /* Barely-visible circles drifting across the page. Absolutely-positioned
     container spanning the full document height (so the circles scroll with
     the page rather than following the viewport), painted over the body
     background but behind all content. Height is set in JS. */
  #float-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }

  #float-bg .float-circle {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(240, 200, 40, 0.18);
    will-change: transform;
  }


/* ---- block 2 ---- */
  /* =========================================================================
     index2 "spark" upgrades — hover effects & polish for a professional
     IT-vendor feel. Layered after the base styles so these override cleanly.
     ========================================================================= */

  /* (2) Sticky header gains a soft blur + shadow once the page is scrolled. */
  .site-header {
    transition: background 0.25s ease, box-shadow 0.25s ease,
                backdrop-filter 0.25s ease;
  }
  .site-header.scrolled {
    background: rgba(250, 250, 247, 0.9);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 1px 0 var(--rule), 0 8px 28px -18px rgba(20, 24, 28, 0.35);
  }

  /* (3) Nav links: animated underline that wipes in on hover. */
  .site-nav a:not(.nav-cta) {
    position: relative;
  }
  .site-nav a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--accent, #8a6a3d);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
  }
  .site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }

  /* (4) Kicker labels become small pill badges. */
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(138, 106, 61, 0.06);
    color: var(--accent, #8a6a3d);
    font-weight: 600;
  }
  .kicker::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent, #8a6a3d);
  }

  /* (5) Hero CTA + contact form submit: gradient fill, glow + lift on hover. */
  .hero-cta .cta,
  .contact-submit {
    background: linear-gradient(135deg, #1f242d, #3a4250);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px -12px rgba(31, 36, 45, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .hero-cta .cta:hover,
  .contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(31, 117, 222, 0.5);
    filter: brightness(1.06);
  }

  /* (6) Service cards: lift + shadow on hover. */
  .service-card {
    position: relative;
    transition: background 0.18s ease, transform 0.22s ease,
                box-shadow 0.22s ease;
  }
  .service-card:hover {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(20, 24, 28, 0.45);
    z-index: 1;
  }

  /* (7) Service icons sit in a tinted rounded badge that brightens on hover. */
  .service-icon {
    padding: 12px;
    border-radius: 12px;
    background: rgba(31, 117, 222, 0.07);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease, color 0.25s ease;
  }
  .service-card:hover .service-icon {
    transform: scale(1.1) rotate(-3deg);
    background: rgba(31, 117, 222, 0.14);
  }

  /* (8) Founder photo: rounded, framed, gentle lift on hover (no colour change). */
  .founder-photo img {
    border-radius: 14px;
    box-shadow: 0 22px 48px -26px rgba(20, 24, 28, 0.5);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .founder-photo img:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 28px 56px -24px rgba(20, 24, 28, 0.55);
  }

  /* (9) Contact form: inputs lift gently on focus; submit gets a glow + lift. */
  .form-row input,
  .form-row textarea {
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.18s ease;
  }
  .form-row input:focus,
  .form-row textarea:focus {
    transform: translateY(-1px);
  }
  .contact-submit {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
                color 0.2s ease, border-color 0.2s ease;
  }
  .contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px rgba(31, 117, 222, 0.5);
  }

  /* (10) Contact detail rows + footer links: gentle slide / colour on hover. */
  .contact-details li {
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .contact-details li:hover {
    transform: translateX(4px);
    color: var(--fg, #16181c);
  }
  .contact-details i { transition: transform 0.18s ease; }
  .contact-details li:hover i { transform: scale(1.15); }

  .site-footer .meta a {
    position: relative;
  }
  .site-footer .meta a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
  }
  .site-footer .meta a:hover::after { transform: scaleX(1); }

  /* Respect reduced-motion: disable the decorative transitions/animations. */
  @media (prefers-reduced-motion: reduce) {
    .service-card, .service-icon, .founder-photo img, .hero-cta .cta,
    .contact-submit, .form-row input, .form-row textarea,
    .site-nav a::after { transition: none !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
  }