/* ===== CLEAN HI-TEC UI ===== */

:root {
  --accent: #12d6c5;
  --accent-strong: rgba(18,214,197,0.9);
  --accent-mid: rgba(18,214,197,0.18);
  --accent-soft: rgba(18,214,197,0.08);
  --text-dim: rgba(255,255,255,0.72);
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(18,214,197,0.14), transparent 20%),
    radial-gradient(circle at 86% 10%, rgba(18,214,197,0.10), transparent 24%),
    linear-gradient(180deg, #040404 0%, #110c0b 48%, #060505 100%) !important;
}

/* dotted glow zone on the right */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(18,214,197,0.95) 1.2px, transparent 1.2px);
  background-size: 10px 10px;
  background-position: right top;
  mask-image:
    radial-gradient(circle at 86% 11%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0.2) 52%, transparent 68%);
  -webkit-mask-image:
    radial-gradient(circle at 86% 11%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0.2) 52%, transparent 68%);
}

/* subtle tech grid on the right */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(18,214,197,0.18) 1px, transparent 1px),
    linear-gradient(60deg, rgba(18,214,197,0.10) 1px, transparent 1px),
    linear-gradient(120deg, rgba(18,214,197,0.10) 1px, transparent 1px);
  background-size: 34px 58px;
  background-position: right top;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, transparent 62%);
}

main,
header,
footer,
.grid,
.col-span-2,
.col-span-3,
.hero-panel,
.hero-photo-wrap {
  position: relative;
  z-index: 1;
}

/* left-side traces */
.col-span-2::before {
  content: "";
  position: absolute;
  left: -14%;
  top: 10%;
  width: 24%;
  height: 52%;
  pointer-events: none;
  opacity: 0.14;
  background:
    linear-gradient(90deg, rgba(18,214,197,0.18), transparent 80%),
    repeating-linear-gradient(
      180deg,
      transparent 0 28px,
      rgba(18,214,197,0.14) 28px 29px,
      transparent 29px 56px
    );
  mask-image: linear-gradient(to right, rgba(0,0,0,1), transparent 88%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), transparent 88%);
}

/* main panel */
.hero-panel {
  position: relative;
  border: 1px solid rgba(18,214,197,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(18,214,197,0.08),
    0 0 28px rgba(18,214,197,0.12),
    0 18px 44px rgba(0,0,0,0.46) !important;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background:
    linear-gradient(rgba(18,214,197,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,214,197,0.06) 1px, transparent 1px);
  background-size: 100% 28px, 28px 100%;
}

/* photo area */
.hero-photo-wrap {
  position: relative;
  overflow: hidden;
}

.hero-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 6% 16% 12% 16%;
  z-index: 0;
  pointer-events: none;
  border-radius: 9999px;
  background:
    radial-gradient(circle, rgba(18,214,197,0.34) 0%, rgba(18,214,197,0.16) 24%, rgba(18,214,197,0.06) 44%, transparent 66%);
  filter: blur(18px);
}

.hero-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 18%, rgba(18,214,197,0.28) 18.3% 18.8%, transparent 19.2% 27%, rgba(18,214,197,0.14) 27.4% 27.8%, transparent 28.2%),
    linear-gradient(rgba(18,214,197,0.10) 1px, transparent 1px),
    linear-gradient(60deg, rgba(18,214,197,0.05) 1px, transparent 1px),
    linear-gradient(120deg, rgba(18,214,197,0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    28px 48px,
    28px 48px,
    28px 48px;
  background-position:
    center center,
    left -24px top -8px,
    left -24px top -8px,
    left -24px top -8px;
}

.hero-photo {
  position: relative;
  z-index: 2;
  filter: contrast(1.05) saturate(1.03);
}

/* feature grid */
.hero-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
}

.hero-feature-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  min-height: 102px !important;
  padding: 0.5rem 0.24rem !important;
  gap: 0.12rem !important;
}

.hero-feature-icon {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  margin-bottom: 0.35rem !important;
}

.hero-feature-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.7rem !important;
  margin-top: 0 !important;
  font-size: 0.56rem !important;
  line-height: 1.04 !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.hero-feature-title span {
  display: block !important;
}

.hero-feature-text {
  margin-top: 0.2rem !important;
  min-height: 1.85rem !important;
  padding: 0 0.08rem !important;
  font-size: 0.56rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: var(--text-dim);
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* name */
.hero-name-block {
  padding: 4px 5 !important;
}

.hero-name-first,
.hero-name-last {
  font-size: clamp(1.15rem, 2.4vw, 1.9rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

.hero-name-first {
  color: rgba(255,255,255,0.92) !important;
}

.hero-name-last {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(18,214,197,0.12);
}

/* icons */
.hero-tech,
.hero-icons,
.tech-icons {
  text-align: center !important;
}

.hero-tech i,
.hero-icons i,
.tech-icons i {
  font-size: 1.55rem !important;
}

.hero-tech svg,
.hero-icons svg {
  width: 34px !important;
  height: 34px !important;
}

.hero-tech span {
  display: block !important;
  line-height: 1.25 !important;
}

/* accordion glow */
.col-span-3 .accordion p::after {
  box-shadow: 0 0 12px rgba(18,214,197,0.24) !important;
}

.col-span-3 .accordion p::before {
  box-shadow:
    0 0 12px rgba(18,214,197,0.72),
    0 0 20px rgba(18,214,197,0.24) !important;
}

/* right honeycomb */
.col-span-3 {
  position: relative !important;
  overflow: visible !important;
}

.col-span-3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 116%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.34;
  background-repeat: repeat;
  background-size: 120px 104px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'>\
<g fill='none' stroke='rgba(18,214,197,0.65)' stroke-width='2'>\
<polygon points='30,2 60,19 60,51 30,68 0,51 0,19'/>\
<polygon points='90,2 120,19 120,51 90,68 60,51 60,19'/>\
<polygon points='30,52 60,69 60,101 30,118 0,101 0,69' transform='translate(30,-16)'/>\
</g>\
</svg>");
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 18%);
}





/* ===== MINIMAL ANIMATION ===== */

.col-span-3::after {
  animation: hexFloat 18s linear infinite;
}

.hero-photo-wrap::before {
  animation: portraitPulse 5.5s ease-in-out infinite;
}

@keyframes hexFloat {
  0% {
    background-position: right 0 top 0;
  }
  100% {
    background-position: right 32px top 18px;
  }
}

@keyframes portraitPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.03);
  }
}