@layer reset, theme, layout, components, utilities;

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

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, svg {
    display: block;
  }

  ul { list-style: none; }
  a { text-decoration: none; color: inherit; }
  button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
  address { font-style: normal; }
}

@layer theme {
  :root {
    --accent: #6a9aaa;
    --accent-soft: rgba(106, 154, 170, 0.1);
    --accent-glow: rgba(106, 154, 170, 0.04);
    --bg: #090b0c;
    --surface: #111416;
    --border: rgba(255, 255, 255, 0.06);
    --text: #e8eef0;
    --text-dim: #98a8b0;
    --font-heading: 'IBM Plex Serif', Georgia, serif;
    --font-body: 'Satoshi', system-ui, sans-serif;
    --max-w: 76rem;
    --radius: 0.75rem;
  }
}

@layer layout {
  body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
  }

  main > section {
    padding: 6rem 1.5rem;

    > header {
      text-align: center;
      max-width: var(--max-w);
      margin-inline: auto;
      margin-bottom: 4rem;

      .section-label {
        font-family: var(--font-body);
        font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 1rem;
      }

      h2 {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
        font-weight: 600;
        line-height: 1.15;
        color: var(--text);
        margin-bottom: 1.25rem;
      }

      .section-intro {
        max-width: 52ch;
        margin-inline: auto;
        color: var(--text-dim);
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
      }
    }
  }

  .grid {
    display: grid;
    gap: 1.5rem;
    max-width: var(--max-w);
    margin-inline: auto;
  }
}

@layer components {
  body > header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s;

    &.scrolled {
      background: rgba(9, 11, 12, 0.95);
      border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
    }

    > div {
      max-width: var(--max-w);
      margin-inline: auto;
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 0.875rem 1.5rem;
    }

    a:first-child {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-family: var(--font-heading);
      font-size: 1.125rem;
      color: var(--text);
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-right: auto;

      svg { color: var(--accent); }
    }

    nav a {
      font-size: 0.9375rem;
      color: var(--text-dim);
      padding: 0.5rem 0.875rem;
      border-radius: var(--radius);
      transition: color 0.2s, background 0.2s;

      &:hover {
        color: var(--accent);
        background: var(--accent-soft);
      }
    }

    nav ul {
      display: flex;
      gap: 0.25rem;
    }

    button {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 0.5rem;
      z-index: 101;

      span {
        display: block;
        width: 24px;
        height: 1.5px;
        background: var(--text);
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
      }

      &[aria-expanded="true"] {
        span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
        span:nth-child(2) { opacity: 0; }
        span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
      }
    }
  }

  main > section:first-child {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 58% 1fr;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 8rem 1.5rem 6rem;

    > .bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, var(--accent-glow) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 80%, var(--accent-glow) 0%, transparent 60%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px);
      pointer-events: none;
      grid-column: 1 / -1;
      grid-row: 1;
    }

    > .diagonal {
      position: absolute;
      inset: 0;
      grid-column: 1 / -1;
      grid-row: 1;
      clip-path: polygon(58% 0, 100% 0, 100% 100%, 52% 100%);
      background: #0d1112;
      pointer-events: none;

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 8rem;
        background: linear-gradient(to bottom, var(--accent), transparent);
        opacity: 0.3;
      }

      &::before {
        top: 15%;
        right: 41%;
      }

      &::after {
        top: 50%;
        right: 46%;
      }
    }

    > .content {
      grid-column: 1;
      position: relative;
      z-index: 1;
      max-width: 90%;

      .section-label {
        font-family: var(--font-body);
        font-size: clamp(0.875rem, 0.75rem + 0.4vw, 1.0625rem);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 1.5rem;
      }

      h1 {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem);
        font-weight: 600;
        line-height: 1.08;
        color: var(--text);
        margin-bottom: 1.75rem;
        letter-spacing: -0.02em;
      }

      p {
        font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem);
        color: var(--text-dim);
        max-width: 56ch;
        line-height: 1.7;
        margin-bottom: 2rem;
      }
    }

    > .side {
      grid-column: 2;
      z-index: 1;
      pointer-events: none;
      width: 100%;

      .hero-hex {
        width: 100%;
        height: auto;
        mix-blend-mode: luminosity;
        opacity: 0.6;
      }
    }

    > .scroll-indicator {
      position: fixed;
      bottom: 2rem;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;
      color: var(--text-dim);
      transition: opacity 0.4s;

      .scroll-icon {
        animation: scrollBounce 2s ease-in-out infinite;
      }
    }
  }

  /* hero section should not use transform for fade-up (breaks position:fixed children) */
  main > section:first-child.fade-up {
    opacity: 1 !important;
    transform: none !important;
  }
  main > section:first-child.fade-up.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  @keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
  }

  #services > .grid {
    grid-template-columns: repeat(2, 1fr);

    > article {
      background: var(--surface);
      background-image: linear-gradient(105deg, transparent 35%, rgba(106,154,170,0.02) 45%, rgba(106,154,170,0.03) 50%, rgba(106,154,170,0.02) 55%, transparent 65%);
      background-size: 200% 100%;
      background-position: 100% 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, transform 0.3s, background-position 0.6s, box-shadow 0.4s;

      &:hover {
        border-color: rgba(106,154,170,0.2);
        transform: translateY(-2px);
        background-position: -100% 0;
        box-shadow: inset 0 1px 0 var(--accent), 0 0 20px rgba(106,154,170,0.06);
      }

      &.featured {
        grid-column: 1 / -1;

        > div {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 2rem;
          align-items: center;
        }

        .visual i {
          font-size: 4rem;
          transition: transform 0.4s;
        }

        &:hover .visual i {
          transform: scale(1.08);
        }
      }

      > div:first-child {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        background: var(--accent-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.25rem;
        color: var(--accent);
        transition: transform 0.3s, background 0.3s;
      }

      &:hover > div:first-child {
        transform: scale(1.1);
        background: rgba(106,154,170,0.15);
      }

      h3 {
        font-family: var(--font-heading);
        font-size: 1.375rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.75rem;
      }

      > p {
        color: var(--text-dim);
        font-size: 0.9375rem;
        line-height: 1.65;
        margin-bottom: 1.25rem;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;

        li {
          font-size: 0.875rem;
          color: var(--text-dim);
          line-height: 1.55;
          padding-left: 1.25rem;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.5;
          }

          strong { color: var(--text); font-weight: 500; }
        }
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        span {
          font-size: 0.75rem;
          padding: 0.25rem 0.625rem;
          border-radius: 999px;
          background: var(--accent-soft);
          color: var(--accent);
          letter-spacing: 0.01em;
        }
      }
    }
  }

  #industries > .grid {
    grid-template-columns: repeat(2, 1fr);

    > div {
      background: var(--surface);
      background-image: linear-gradient(105deg, transparent 35%, rgba(106,154,170,0.02) 45%, rgba(106,154,170,0.03) 50%, rgba(106,154,170,0.02) 55%, transparent 65%);
      background-size: 200% 100%;
      background-position: 100% 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.75rem;
      position: relative;
      overflow: hidden;
      transition: background-position 0.6s, box-shadow 0.4s, border-color 0.4s;

      &:hover {
        background-position: -100% 0;
        box-shadow: inset 0 1px 0 var(--accent), 0 0 20px rgba(106,154,170,0.06);
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent);
      }

      h3 {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.625rem;
      }

      p {
        font-size: 0.875rem;
        color: var(--text-dim);
        line-height: 1.6;
      }
    }
  }

  #approach > div {
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    > .step {
      display: flex;
      gap: 2rem;
      padding: 2rem;
      background: var(--surface);
      background-image: linear-gradient(105deg, transparent 35%, rgba(106,154,170,0.02) 45%, rgba(106,154,170,0.03) 50%, rgba(106,154,170,0.02) 55%, transparent 65%);
      background-size: 200% 100%;
      background-position: 100% 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, background-position 0.6s, box-shadow 0.4s;

      &:hover {
        border-color: rgba(106,154,170,0.2);
        background-position: -100% 0;
        box-shadow: inset 0 1px 0 var(--accent), 0 0 20px rgba(106,154,170,0.06);
      }

      > span:first-child {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 600;
        color: var(--accent);
        line-height: 1;
        min-width: 3.5rem;
        opacity: 0.7;
      }

      h3 {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
      }

      p {
        color: var(--text-dim);
        line-height: 1.65;
      }
    }
  }

  #values {
    background: var(--surface);
    border-block: 1px solid var(--border);

    > .grid {
      grid-template-columns: repeat(4, 1fr);

      > div {
        text-align: center;
        padding: 2rem 1.25rem;
        border-radius: var(--radius);
        background-image: linear-gradient(105deg, transparent 35%, rgba(106,154,170,0.02) 45%, rgba(106,154,170,0.03) 50%, rgba(106,154,170,0.02) 55%, transparent 65%);
        background-size: 200% 100%;
        background-position: 100% 0;
        position: relative;
        overflow: hidden;
        transition: background-position 0.6s, box-shadow 0.4s;

        &:hover {
          background-position: -100% 0;
          box-shadow: inset 0 1px 0 var(--accent), 0 0 20px rgba(106,154,170,0.06);
        }

        .stat {
          display: block;
          font-family: var(--font-heading);
          font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
          font-weight: 700;
          color: var(--accent);
          line-height: 1;
          margin-bottom: 0.75rem;
        }

        h3 {
          font-size: 1rem;
          font-weight: 600;
          color: var(--text);
          margin-bottom: 0.5rem;
        }

        p {
          font-size: 0.875rem;
          color: var(--text-dim);
          line-height: 1.6;
        }
      }
    }
  }

  #capabilities > .grid {
    grid-template-columns: repeat(3, 1fr);

    > article {
      text-align: center;
      padding: 2rem 1.5rem;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      background-image: linear-gradient(105deg, transparent 35%, rgba(106,154,170,0.02) 45%, rgba(106,154,170,0.03) 50%, rgba(106,154,170,0.02) 55%, transparent 65%);
      background-size: 200% 100%;
      background-position: 100% 0;
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, background-position 0.6s, box-shadow 0.4s;

      &:hover {
        border-color: rgba(106,154,170,0.2);
        background-position: -100% 0;
        box-shadow: inset 0 1px 0 var(--accent), 0 0 20px rgba(106,154,170,0.06);
      }

      > div:first-child {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background: var(--accent-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        margin-bottom: 1rem;
        color: var(--accent);
      }

      h3 {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        color: var(--text);
        margin-bottom: 0.5rem;
      }

      p {
        font-size: 0.875rem;
        color: var(--text-dim);
        line-height: 1.6;
      }
    }
  }

  #contact {
    > div:last-child {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: var(--max-w);
      margin-inline: auto;
      align-items: start;
    }

    .info {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      > div {
        &:not(:last-of-type) {
          padding-bottom: 2rem;
          border-bottom: 1px solid var(--border);
        }
      }

      span:first-child {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--text-dim);
        margin-bottom: 0.375rem;
      }

      a:not(.btn) {
        color: var(--text);
        font-size: 1.0625rem;
        transition: color 0.2s;
        &:hover { color: var(--accent); }
      }

      address {
        color: var(--text);
        font-size: 1rem;
      }

      > div:last-child {
        background: var(--accent-soft);
        border-radius: var(--radius);
        padding: 1.5rem;
        border: 1px solid var(--accent);

        p {
          font-size: 0.9375rem;
          color: var(--text-dim);
          line-height: 1.6;
          margin-bottom: 1rem;
        }
      }
    }

    form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2.25rem;

      h3 {
        font-family: var(--font-heading);
        font-size: 1.375rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 1.5rem;
      }

      > div {
        margin-bottom: 1.25rem;
      }

      label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 0.375rem;
      }

      input, textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        color: var(--text);
        font: inherit;
        font-size: 0.9375rem;
        transition: border-color 0.2s, box-shadow 0.2s;
        outline: none;

        &:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-glow);
        }

        &::placeholder { color: var(--text-dim); opacity: 0.6; }
      }

      textarea { resize: vertical; min-height: 6rem; }
    }
  }

  body > footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 1.5rem;

    > div {
      max-width: var(--max-w);
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    p {
      font-size: 0.8125rem;
      color: var(--text-dim);
    }

    nav ul {
      display: flex;
      gap: 1rem;

      a {
        font-size: 0.8125rem;
        color: var(--text-dim);
        transition: color 0.2s;
        &:hover { color: var(--accent); }
      }
    }

    address {
      font-size: 0.8125rem;
      color: var(--text-dim);
    }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #090b0c;
    background: var(--accent);
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;

    &:hover {
      background: color-mix(in srgb, var(--accent) 85%, white);
      transform: translateY(-1px);
    }
  }

  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;

    &.visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-up:nth-child(1) { transition-delay: 0.1s; }
  .fade-up:nth-child(2) { transition-delay: 0.2s; }
  .fade-up:nth-child(3) { transition-delay: 0.3s; }
  .fade-up:nth-child(4) { transition-delay: 0.4s; }
  .fade-up:nth-child(5) { transition-delay: 0.5s; }
  .fade-up:nth-child(6) { transition-delay: 0.6s; }
}

@layer utilities {
  @media (width <= 768px) {
    body > header {
      nav {
        position: fixed;
        inset: 0;
        background: var(--bg);
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s;

        ul {
          flex-direction: column;
          align-items: center;
          gap: 1rem;
        }

        a {
          font-size: 1.25rem;
          padding: 0.75rem 1.5rem;
        }
      }

      button {
        display: flex;
      }
    }

    body > header nav.open {
      opacity: 1;
      pointer-events: all;
    }

    main > section:first-child {
      grid-template-columns: 1fr;
      padding-top: 5rem;
      padding-bottom: 5rem;

      > .diagonal { display: none; }
      > .side {
        position: relative;
        margin-top: 3rem;

        .hero-hex {
          width: 80%;
          max-width: 400px;
          height: auto;
          display: block;
          margin: 0 auto;
          mix-blend-mode: normal;
          opacity: 0.35;
        }
      }

      > .content {
        max-width: none;
        text-align: center;

        p { margin-inline: auto; }
      }

      > .scroll-indicator { display: none; }
    }

    #services > .grid {
      grid-template-columns: 1fr;

      > article.featured > div {
        grid-template-columns: 1fr;
      }
    }

    #industries > .grid,
    #values > .grid,
    #capabilities > .grid {
      grid-template-columns: 1fr;
    }

    #contact > div:last-child {
      grid-template-columns: 1fr;
    }

    #approach > div > .step {
      flex-direction: column;
      gap: 0.75rem;

      > span:first-child { min-width: auto; }
    }

    body > footer > div {
      flex-direction: column;
      text-align: center;
    }
  }

  @media (width <= 480px) {
    main > section { padding: 4rem 1.25rem; }
    main > section > header { margin-bottom: 2.5rem; }

    #contact form { padding: 1.5rem; }
    body > header > div { padding: 0.75rem 1.25rem; }
  }

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

@media (width <= 768px) {
  main > section:first-child {
    display: block;
  }
  main > section:first-child > .content {
    max-width: none;
    text-align: center;
  }
  main > section:first-child > .content p {
    margin-inline: auto;
  }
  main > section:first-child > .side {
    position: static;
    margin-top: 3rem;
  }
  main > section:first-child > .side .hero-hex {
    width: 80%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    mix-blend-mode: normal;
    opacity: 0.35;
  }
}