@font-face {
  font-family: 'Apoc Sans';
  src: url('./assets/fonts/apoc-sans-trial-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Haas';
  src: url('./assets/fonts/neue-haas-display-pro-3.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Neue Haas', Arial, sans-serif;
  color: #fff;
  background: #100c08;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 280px; }
body { min-height: 100vh; }

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

.contact-page {
  --unit: calc(min(100vw, 480px) / 390);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding-bottom: calc(65 * var(--unit) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 90% 56% at 110% 98%, #ffda7a 0%, #ffbb57 35%, transparent 78%),
    radial-gradient(ellipse at 0% 40%, #21170bd9 0%, #3a1a084d 20%, transparent 55%),
    radial-gradient(ellipse 110% 75% at 100% 90%, #ffb24c 0%, #ba4a13 50%, transparent 85%),
    linear-gradient(151deg, #080706 13%, #140e08 37%, #64280c 65%, #b34a1a 85%, #ed8b34 100%);
}

.portrait {
  position: absolute;
  z-index: -1;
  top: calc(69 * var(--unit));
  left: -2%;
  display: block;
  width: 104%;
  height: auto;
  -webkit-mask-image: linear-gradient(#000 38%, #000c 52%, transparent 86%), radial-gradient(ellipse 50% 40% at 100% 0%, transparent 70%, #000 100%);
  mask-image: linear-gradient(#000 38%, #000c 52%, transparent 86%), radial-gradient(ellipse 50% 40% at 100% 0%, transparent 70%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.brand-header {
  height: calc(260 * var(--unit));
  padding-top: calc(34 * var(--unit) + env(safe-area-inset-top, 0px));
  text-align: center;
}

.brand {
  display: block;
  width: calc(242 * var(--unit));
  height: auto;
  margin: 0 auto;
}

.profile {
  position: relative;
  isolation: isolate;
  margin-left: calc(27 * var(--unit));
  padding: calc(15 * var(--unit)) calc(18 * var(--unit));
  border: 1px solid #ffffff30;
  border-right: 0;
  border-radius: calc(24 * var(--unit)) 0 0 calc(24 * var(--unit));
  background: linear-gradient(120deg, #ffffff0a, #ffffff02 42%, #2713050d);
  box-shadow: inset 1px 1px 1px #ffffff29, inset 3px 3px 8px #ffffff0c, inset -2px -2px 8px #1c0e061a, 0 9px 26px #10090612;
}

.profile::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #e8d2ad0a, transparent 45%, #a9561b0a);
  -webkit-backdrop-filter: blur(3px) saturate(1.2) brightness(1.04);
  backdrop-filter: blur(3px) saturate(1.2) brightness(1.04);
}

.profile::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, #fff9 0%, #fff2 14%, #fff0 32%, #fff1 62%, #ffe8b855 84%, #fff2 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-refraction {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: .65;
  -webkit-mask-image: linear-gradient(155deg, #000 0%, #000b 24%, transparent 72%);
  mask-image: linear-gradient(155deg, #000 0%, #000b 24%, transparent 72%);
  pointer-events: none;
}

.glass-refraction img {
  position: absolute;
  top: calc(-191 * var(--unit));
  left: calc(-34.8 * var(--unit));
  width: calc(405.6 * var(--unit));
  max-width: none;
  height: auto;
  transform: scale(1.045);
  transform-origin: 50% 65%;
  filter: url('#glass-refraction');
  -webkit-mask-image: linear-gradient(#000 38%, #000c 52%, transparent 86%);
  mask-image: linear-gradient(#000 38%, #000c 52%, transparent 86%);
}

h1 {
  margin: 0 0 calc(9 * var(--unit));
  font: 300 calc(32 * var(--unit)) / 1.12 'Apoc Sans', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
  word-spacing: .04em;
}

.roles, .specialization {
  margin: 0;
  max-width: calc(310 * var(--unit));
  font-size: max(14px, calc(16 * var(--unit)));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .012em;
  word-spacing: .075em;
  -webkit-text-stroke: 0;
}

.profile hr {
  height: 1px;
  margin: calc(15 * var(--unit)) calc(-18 * var(--unit)) calc(13 * var(--unit)) 0;
  border: 0;
  background: #ffffff45;
}

.specialization { max-width: calc(300 * var(--unit)); }

.contact-actions {
  display: grid;
  gap: calc(13 * var(--unit));
  width: calc(300 * var(--unit));
  margin: calc(24 * var(--unit)) auto 0;
}

.contact-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  min-height: max(40px, calc(40 * var(--unit)));
  padding: 7px calc(18 * var(--unit));
  border: 1px solid #ffffff29;
  border-radius: 999px;
  color: inherit;
  background: linear-gradient(115deg, #ffffff0d, #ffffff03 40%, #7035090f);
  box-shadow: inset 0 1px 1px #ffffff24, inset 1px 0 3px #ffffff0f, inset 0 -1px 2px #371b081f, 0 3px 9px #210f0408;
  -webkit-backdrop-filter: blur(2px) saturate(1.16);
  backdrop-filter: blur(2px) saturate(1.16);
  font-size: max(16px, calc(16 * var(--unit)));
  line-height: 1.15;
  letter-spacing: .012em;
  word-spacing: .075em;
  -webkit-text-stroke: 0;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms, border-color 160ms, transform 160ms;
}

.contact-action span { min-width: 0; }
.contact-action::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, #fff6, #fff0 28%, #fff0 64%, #ffefc94d);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.contact-action::after { content: ''; position: absolute; inset: -2px 0; min-height: 44px; border-radius: inherit; }
.contact-action:first-child span { white-space: nowrap; }
.contact-action:active { transform: scale(.985); background: #fff2; }
.contact-action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.icon {
  flex: 0 0 auto;
  width: calc(19 * var(--unit));
  height: calc(19 * var(--unit));
  min-width: 19px;
  min-height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-linkedin { transform: translateX(2px); }
.icon-whatsapp { object-fit: contain; }

.notice {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(390px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #ffffff30;
  border-radius: 16px;
  color: #fff;
  background: #24180bf5;
  box-shadow: 0 8px 28px #0003;
  font: 400 15px / 1.35 'Neue Haas', Arial, sans-serif;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity 160ms, transform 160ms, visibility 160ms;
  pointer-events: none;
}

.notice.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (hover: hover) {
  .contact-action:hover { background: #ffffff1c; border-color: #ffffff50; }
}

@media (max-width: 359px) {
  .contact-action { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}