.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.project-card {
  padding: 28px;
  border: 1px solid var(--line);
}

.project-card span {
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.project-card h3 {
  font-size: 22px;
}

.project-card p,
.job-list p {
  color: var(--muted);
  line-height: 1.75;
}

.job-list article {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.job-list h3 {
  margin: 0 0 8px;
}

.about-head {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  isolation: isolate;
}

.about-head-copy {
  position: relative;
  z-index: 2;
}

.about-head h1 {
  font-size: clamp(40px, 4.8vw, 62px);
  letter-spacing: -2px;
}

.about-head-art {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
  opacity: .96;
  pointer-events: none;
}

.about-head-art::before,
.about-head-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.about-head-art::before {
  background:
    linear-gradient(90deg, #07111d 0%, rgba(7, 17, 29, .82) 13%, rgba(7, 17, 29, .3) 38%, rgba(7, 17, 29, .02) 100%),
    linear-gradient(180deg, rgba(7, 17, 29, .62) 0%, transparent 26%, transparent 66%, rgba(7, 17, 29, .68) 100%);
}

.about-head-art::after {
  background:
    radial-gradient(circle at 70% 48%, rgba(8, 127, 150, .16), transparent 44%),
    linear-gradient(90deg, rgba(7, 17, 29, .08), rgba(7, 17, 29, .22));
  mix-blend-mode: multiply;
}

.about-head-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 52%;
  filter: saturate(.98) contrast(1.04) brightness(1.12);
  transform: scale(1.04);
}

.image-head {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  isolation: isolate;
}

.image-head-copy {
  position: relative;
  z-index: 2;
}

.image-head-art {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 46%;
  overflow: hidden;
  pointer-events: none;
}

.image-head-art::before,
.image-head-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.image-head-art::before {
  background:
    linear-gradient(90deg, #07111d 0%, rgba(7, 17, 29, .82) 14%, rgba(7, 17, 29, .28) 42%, rgba(7, 17, 29, .04) 100%),
    linear-gradient(180deg, rgba(7, 17, 29, .58) 0%, transparent 28%, transparent 65%, rgba(7, 17, 29, .72) 100%);
}

.image-head-art::after {
  background:
    radial-gradient(circle at 70% 45%, rgba(8, 127, 150, .18), transparent 42%),
    linear-gradient(90deg, rgba(7, 17, 29, .08), rgba(7, 17, 29, .2));
  mix-blend-mode: multiply;
}

.image-head-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.05) brightness(1.08);
  transform: scale(1.04);
}

#profile {
  align-items: center;
}

.profile-brand {
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 34px;
  padding: 34px 0;
}

.profile-brand img {
  width: min(430px, 100%);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(7, 17, 29, .12));
}

.stats b {
  color: #d7a84b;
  text-shadow: 0 0 18px rgba(215, 168, 75, .16);
}

#credentials {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#credentials::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 44%;
  height: 72%;
  background:
    linear-gradient(90deg, #07111d 0%, rgba(7, 17, 29, .72) 18%, rgba(7, 17, 29, .2) 48%, rgba(7, 17, 29, .04) 100%),
    linear-gradient(180deg, rgba(7, 17, 29, .08) 0%, rgba(7, 17, 29, .24) 58%, #07111d 100%),
    url("/asset/ai.jpg") center / cover no-repeat;
  opacity: .72;
  filter: saturate(1.16) brightness(1.08) contrast(1.04);
  pointer-events: none;
}

#credentials::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(0, 166, 210, .16), transparent 34%),
    linear-gradient(90deg, transparent 0%, transparent 58%, rgba(7, 17, 29, .24) 100%);
  pointer-events: none;
}

#credentials > * {
  position: relative;
  z-index: 1;
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.partner-logos a {
  min-height: 118px;
  padding: 22px 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 36px rgba(7, 17, 29, .06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.partner-logos img {
  width: 100%;
  max-width: 230px;
  max-height: 72px;
  object-fit: contain;
  filter: grayscale(.12);
  transition: filter .25s;
}

.partner-logos a:hover {
  border-color: rgba(215, 168, 75, .7);
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(7, 17, 29, .11);
}

.partner-logos a:hover img {
  filter: none;
}

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.solution-row {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 42%);
  gap: 16px;
  height: 220px;
}

.solution-info-card,
.solution-image-card {
  height: 220px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.solution-info-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.solution-info-card h3 {
  margin: 0 0 22px;
  font-size: 26px;
}

.solution-info-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.solution-info-card b {
  margin-top: auto;
  color: var(--red);
}

.solution-image-card {
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef3f7 100%);
}

.solution-image-card.has-image {
  cursor: zoom-in;
}

.solution-image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: saturate(1.04) contrast(1.04);
  transition: transform .35s;
}

.solution-row:hover .solution-info-card,
.solution-row:hover .solution-image-card {
  border-color: rgba(215, 25, 32, .42);
  box-shadow: 0 18px 45px rgba(7, 17, 29, .1);
}

.solution-row:hover .solution-image-card img {
  transform: scale(1.025);
}

.image-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 36px;
  background: rgba(3, 10, 18, .82);
  backdrop-filter: blur(8px);
}

.image-preview.open {
  display: grid;
}

.image-preview figure {
  position: relative;
  width: min(1120px, 92vw);
  max-height: 88vh;
  margin: 0;
  padding: 18px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}

.image-preview img {
  width: 100%;
  max-height: 76vh;
  display: block;
  object-fit: contain;
  background: #f5f7f9;
}

.image-preview figcaption {
  margin-top: 12px;
  color: var(--ink);
  font-weight: 700;
}

.image-preview button {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.solution-intro-only {
  max-width: 980px;
  padding-top: 80px;
}

.solution-intro-only article {
  display: block;
  padding: 0;
  border-bottom: 0;
}

.solution-intro-only h2 {
  margin: 0 0 28px;
  font-size: clamp(32px, 3.6vw, 46px);
}

.solution-intro-only p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 2;
}

.news-row.has-cover {
  grid-template-columns: 180px 120px 1fr 30px;
  align-items: center;
}

.news-thumb {
  height: 112px;
  overflow: hidden;
  background: var(--dark);
}

.news-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
  transition: transform .28s;
}

.news-row:hover .news-thumb img {
  transform: scale(1.05);
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 26px;
}

.article-meta span {
  color: var(--red);
  font-weight: 800;
}

.settings-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.setting-image-card,
.editor-image-field {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.setting-image-card img,
.editor-image-field img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.inline-check {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
}

.inline-check input {
  width: auto !important;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy > :not(.camera-line-art) {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 16px 0 22px;
}

.camera-line-art {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: -52px;
  width: min(620px, 58vw);
  height: 330px;
  opacity: .32;
  pointer-events: none;
}

.camera-body {
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 500px;
  height: 210px;
  border: 2px solid rgba(95, 112, 126, .34);
  border-radius: 38px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .56),
    0 20px 60px rgba(7, 17, 29, .08);
}

.camera-body::before {
  content: "";
  position: absolute;
  right: 70px;
  top: 42px;
  width: 104px;
  height: 104px;
  border: 1px solid rgba(95, 112, 126, .26);
  border-radius: 50%;
  box-shadow: inset 0 0 0 18px rgba(95, 112, 126, .07);
}

.camera-prism {
  position: absolute;
  top: 25px;
  left: 188px;
  width: 132px;
  height: 72px;
  border: 2px solid rgba(95, 112, 126, .32);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
}

.camera-grip {
  position: absolute;
  left: 28px;
  bottom: 52px;
  width: 70px;
  height: 148px;
  border: 1px solid rgba(95, 112, 126, .3);
  border-radius: 28px 14px 14px 28px;
}

.camera-grip::before,
.camera-grip::after {
  content: "";
  position: absolute;
  left: 18px;
  width: 32px;
  height: 1px;
  background: rgba(95, 112, 126, .28);
}

.camera-grip::before {
  top: 46px;
}

.camera-grip::after {
  top: 86px;
}

.camera-link {
  position: absolute;
  right: -28px;
  bottom: 128px;
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, rgba(95, 112, 126, .34), rgba(215, 25, 32, .2), transparent);
  transform: rotate(-4deg);
}

.camera-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(215, 25, 32, .5);
  box-shadow: 0 0 18px rgba(215, 25, 32, .34);
}

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: min(360px, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 67%, rgba(255, 255, 255, .78) 68%, rgba(99, 111, 122, .72) 72%, rgba(245, 248, 250, .95) 76%, rgba(84, 94, 104, .82) 82%, transparent 84%),
    conic-gradient(from 28deg, #eef4f7, #7f8b96, #ffffff, #5f6a73, #d9e1e6, #8d98a2, #ffffff, #6c7680, #eef4f7);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 26px 60px rgba(7, 17, 29, .24),
    inset 0 0 16px rgba(255, 255, 255, .5),
    inset 0 0 34px rgba(7, 17, 29, .26);
  pointer-events: none;
}

.hero-visual video {
  position: relative;
  z-index: 3;
  width: min(340px, 54vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  background: #07111d;
  box-shadow: 0 22px 30px rgba(7, 17, 29, .24);
}

.intro video {
  position: relative;
  z-index: 2;
  width: min(900px, 82vw);
  max-height: 72vh;
  object-fit: contain;
  animation: intro-image 2.7s both;
}

#media form {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}

@media (max-width: 620px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(30px, 8.8vw, 40px);
    line-height: 1.1;
    letter-spacing: -.5px;
    margin: 16px 0 22px;
  }

  .about-head-art {
    width: 100%;
    opacity: .22;
  }

  .about-head-art::before {
    background: linear-gradient(90deg, rgba(7, 17, 29, .96), rgba(7, 17, 29, .72));
  }

  .image-head-art {
    width: 100%;
    opacity: .22;
  }

  .image-head-art::before {
    background: linear-gradient(90deg, rgba(7, 17, 29, .96), rgba(7, 17, 29, .72));
  }

  .news-row.has-cover {
    grid-template-columns: 1fr;
  }

  .solution-row {
    grid-template-columns: 1fr;
    height: auto;
  }

  .solution-info-card {
    height: auto;
    min-height: 180px;
  }

  .solution-image-card {
    height: 150px;
    padding: 12px;
  }

  .solution-image-card img {
    height: 100%;
  }

  .news-thumb {
    height: 150px;
  }

  .settings-image-grid {
    grid-template-columns: 1fr;
  }

  #credentials::before {
    width: 100%;
    height: 48%;
    opacity: .18;
  }

  #credentials::after {
    background: linear-gradient(180deg, rgba(7, 17, 29, .5), transparent 55%, #07111d 100%);
  }

  .camera-line-art {
    display: none;
  }

  .profile-brand {
    min-height: auto;
    gap: 22px;
    padding: 10px 0 0;
  }

  .profile-brand img {
    width: min(320px, 88vw);
  }

  .partner-logos {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .partner-logos a {
    min-height: 86px;
    padding: 14px;
  }

  .partner-logos img {
    max-height: 54px;
  }

  .hero-visual::before {
    width: min(280px, 78vw);
  }

  .hero-visual video {
    width: min(260px, 74vw);
  }
}