/* Shared section layout (privacy, terms, etc.) */
.section {
  margin: var(--sectionY) auto;
  padding: 0 var(--gutter);
  max-width: var(--container);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
}

.section-sub {
  color: rgba(236, 238, 246, 0.88);
  font-size: var(--fs-lg);
  line-height: 1.45;
  text-wrap: pretty;
}

.section.is-hidden { display: none; }

/* Page content (About / Services) */
.page-lead {
  margin: 0;
  color: rgba(236, 238, 246, 0.9);
  line-height: var(--lh);
  font-size: var(--fs-md);
  max-width: 66ch;
}

.page-block { margin-top: 14px; }

body:not([data-page="home"]) main > .section:first-child {
  margin-top: clamp(26px, 5vw, 76px);
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.serviceCard {
  border: 1px solid var(--frame-border);
  border-radius: var(--frame-radius-md);
  background: var(--frame-surface);
  padding: 14px;
  box-shadow: var(--frame-shadow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  position: relative;
  overflow: hidden;
}

.serviceCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 100px at 88% -10%, var(--frame-fade-red), transparent 72%),
    radial-gradient(220px 100px at 10% 115%, var(--frame-fade-blue), transparent 72%);
  opacity: 0.72;
}

.serviceCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255, 45, 45, 0.36) 16% 84%, transparent 90% 100%) top / 180% 1px no-repeat,
    linear-gradient(180deg, var(--frame-line), rgba(245, 247, 250, 0) 72%) top / 100% 50px no-repeat;
  background-position: -26% 0, 0 0;
  opacity: 0.48;
}

.serviceCard:hover,
.serviceCard:focus-within {
  transform: translateY(-1px);
  border-color: var(--accent-magenta-border);
  box-shadow: var(--frame-shadow-hover), var(--glow-magenta-soft);
}

.serviceCard h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.serviceCard p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(236, 238, 246, 0.9);
  font-size: var(--fs-sm);
  line-height: 1.56;
}

.bulletList {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(236, 238, 246, 0.9);
  font-size: var(--fs-sm);
  line-height: 1.58;
}

.bulletList li { margin: 7px 0; }

.profileCard {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  align-items: center;
}

.profilePhoto {
  width: 170px;
  aspect-ratio: 4 / 5;
  border-radius: var(--frame-radius-md);
  overflow: hidden;
  border: 1px solid var(--frame-border);
  background: var(--frame-surface);
  box-shadow: var(--frame-shadow);
  position: relative;
}

.founderHoverCard {
  width: 100%;
  height: 100%;
  position: relative;
}

.founderProfileFace {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform .5s var(--ease-smooth);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
}

.founderProfileFace::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 4, 8, 0) 46%, rgba(4, 4, 8, 0.4) 100%),
    radial-gradient(220px 100px at 90% 0%, rgba(226, 64, 64, 0.14), transparent 72%);
}

.profilePhoto:hover .founderProfileFace,
.profilePhoto:focus-within .founderProfileFace {
  transform: translateX(-25%) translateY(-20%);
}

.founderInfoPanel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  background:
    radial-gradient(180px 140px at 100% 0%, var(--frame-fade-red), transparent 70%),
    radial-gradient(180px 120px at 0% 100%, var(--frame-fade-blue), transparent 70%),
    linear-gradient(180deg, rgba(9, 9, 15, 0.94), rgba(6, 6, 10, 0.98));
}

.founderNameDiv {
  min-width: 0;
  align-self: end;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--ease-soft), transform .28s var(--ease-soft);
}

.founderHoverName.profileName {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.founderSocialDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--ease-soft), transform .28s var(--ease-soft);
}

.profilePhoto:hover .founderNameDiv,
.profilePhoto:hover .founderSocialDiv,
.profilePhoto:focus-within .founderNameDiv,
.profilePhoto:focus-within .founderSocialDiv {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none), (pointer: coarse) {
  .profilePhoto .founderProfileFace {
    transform: translateX(-20%) translateY(-16%);
  }
  .profilePhoto .founderNameDiv,
  .profilePhoto .founderSocialDiv {
    opacity: 1;
    transform: translateY(0);
  }
}

.founderSocialLink {
  width: 30px;
  height: 30px;
  border-radius: var(--frame-radius-xs);
  border: 1px solid rgba(245, 247, 250, 0.22);
  background: rgba(7, 7, 14, 0.72);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--ease-soft), border-color .2s var(--ease-soft), background .2s var(--ease-soft);
}

.founderSocialLink:hover,
.founderSocialLink:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(245, 247, 250, 0.45);
  background: rgba(15, 15, 25, 0.92);
}

.founderSocialIcon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.profileDetails {
  min-width: 0;
}

.profilePhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileName {
  margin: 0 0 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.profileRole {
  color: rgba(210, 212, 228, 0.94);
  font-size: var(--fs-sm);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.profileBio {
  margin: 10px 0 0;
  color: rgba(236, 238, 246, 0.9);
  font-size: var(--fs-md);
  line-height: 1.68;
  white-space: pre-line;
}

.profileNote {
  margin: 8px 0 0;
  color: var(--muted2);
  font-size: var(--fs-sm);
}

/* Subpages only: disable animated logo sweep/glow effect used in header logo. */
body:not([data-page="home"]) .logo-wrap::before,
body:not([data-page="home"]) .logo-wrap::after {
  animation: none;
  opacity: 0;
}

@media (max-width: 980px) {
  .page-grid { grid-template-columns: 1fr; }
  .profileCard { grid-template-columns: 1fr; }
  .profilePhoto { width: min(220px, 100%); }
  .founderHoverName.profileName { font-size: 15px; }
  .section { margin: calc(var(--sectionY) * 0.9) auto; }
  .section-head { margin-bottom: 20px; gap: 12px; }
  .serviceCard { padding: 12px; }
  .bulletList { margin-top: 8px; }
  .bulletList li { margin: 6px 0; }
}

@media (max-width: 720px) {
  .section { margin: calc(var(--sectionY) * 0.84) auto; padding: 0 var(--gutter); }
  .section-head { margin-bottom: 16px; gap: 10px; }
  .serviceCard { padding: 11px; }
  .profileCard { gap: 12px; }
  .profileBio { margin-top: 8px; line-height: 1.58; }
}