:root {

  color-scheme: dark;

  --navy: #061b2e;

  --navy-soft: #0b2b47;

  --paper: #f7f4ee;

  --ink: #10283a;

  --muted: #647684;

  --caribbean: #25b7c7;

  --orange: #f04f23;

  --whatsapp: #25d366;

  --line: rgba(255, 255, 255, 0.14);

  --radius: 1.4rem;

  --shadow: 0 22px 55px rgba(0, 13, 26, 0.28);

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--navy); }

body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  line-height: 1.55;

  -webkit-font-smoothing: antialiased;

}

a { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; background: #fff; color: #000; padding: .7rem 1rem; }

.skip-link:focus { top: 1rem; }



.language {

  backdrop-filter: blur(12px);

  background: rgba(3, 17, 29, .56);

  border: 1px solid rgba(255,255,255,.5);

  border-radius: 999px;

  color: #fff;

  cursor: pointer;

  font-size: .75rem;

  font-weight: 900;

  left: max(1rem, env(safe-area-inset-left));

  letter-spacing: .08em;

  min-height: 38px;

  min-width: 48px;

  padding: .35rem .65rem;

  position: absolute;

  top: max(1rem, env(safe-area-inset-top));

  z-index: 3;

}



.hero { isolation: isolate; min-height: 620px; overflow: hidden; position: relative; background: #09223a; }

.hero-photo { background: url("vladimir-faithful.webp") center 40% / cover no-repeat; inset: 0; position: absolute; z-index: 0; }

.hero-shade { background: linear-gradient(180deg, rgba(3,17,29,.08) 26%, rgba(3,17,29,.92) 91%); inset: 0; position: absolute; z-index: 1; }

.hero-content { bottom: 0; color: #fff; left: 0; padding: 2rem 1.25rem 2.25rem; position: absolute; width: 100%; z-index: 2; }

.eyebrow, .section-kicker { color: var(--caribbean); font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 .55rem; text-transform: uppercase; }

.hero h1 { font-size: clamp(2.4rem, 10vw, 4.7rem); letter-spacing: -.055em; line-height: .96; margin: 0; max-width: 760px; }

.role { font-size: 1.08rem; font-weight: 700; margin: .85rem 0 .15rem; }

.location { color: rgba(255,255,255,.74); margin: 0; }



.contact-panel { background: var(--navy); color: #fff; padding: 1.25rem; }

.primary-action {

  align-items: center;

  background: var(--whatsapp);

  border-radius: 999px;

  color: #071a10;

  display: flex;

  font-weight: 900;

  gap: .65rem;

  justify-content: center;

  min-height: 58px;

  text-decoration: none;

}

.action-mark { align-items: center; border: 2px solid currentColor; border-radius: 50%; display: inline-flex; font-size: .75rem; height: 27px; justify-content: center; width: 27px; }

.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 1.2rem; }

.quick-actions a, .quick-actions button {

  align-items: center;

  background: transparent;

  border: 0;

  color: #fff;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  font-size: .72rem;

  gap: .4rem;

  min-height: 62px;

  padding: .25rem;

  text-decoration: none;

}

.quick-mark { align-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; display: flex; font-size: 1.05rem; height: 38px; justify-content: center; width: 38px; }



.services { padding: 4.5rem 1rem; }

.section-heading, .service-card, .all-experiences, .connect { margin-left: auto; margin-right: auto; max-width: 1100px; }

.section-heading h2, .connect h2 { font-size: clamp(2rem, 7vw, 3.8rem); letter-spacing: -.045em; line-height: 1; margin: 0 0 2rem; }

.section-heading .section-kicker, .connect .section-kicker { color: #137d8a; }

.service-card { background: #fff; border-radius: var(--radius); box-shadow: 0 12px 34px rgba(15,39,56,.09); margin-bottom: 1rem; overflow: hidden; }

.service-card > img { aspect-ratio: 16/10; display: block; object-fit: cover; width: 100%; }

.service-content { padding: 1.25rem; }

.service-number { color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .16em; margin: 0 0 .4rem; }

.service-content h3 { font-size: 1.45rem; line-height: 1.1; margin: 0 0 .65rem; }

.service-content p:not(.service-number) { color: var(--muted); font-size: .94rem; margin: 0; }

.service-links { align-items: center; border-top: 1px solid #e7e7e3; display: flex; gap: .75rem; justify-content: space-between; margin-top: 1.15rem; padding-top: 1rem; }

.service-links a { color: var(--ink); font-size: .78rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }

.service-links .service-chat { border: 1px solid #a5d7af; border-radius: 999px; color: #12702b; padding: .45rem .7rem; }

.all-experiences { align-items: center; background: var(--navy); border-radius: var(--radius); color: #fff; display: flex; justify-content: space-between; margin-top: 1.5rem; padding: 1.35rem 1.5rem; text-decoration: none; }

.all-experiences small { color: var(--caribbean); display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }

.all-experiences strong { display: block; font-size: 1.15rem; margin-top: .12rem; }

.all-experiences > span:last-child { font-size: 1.6rem; }



.connect { background: #e8f1f2; border-radius: var(--radius); margin-bottom: 4rem; padding: 2rem 1.25rem; width: calc(100% - 2rem); }

.connect h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }

.connect-links { display: grid; gap: .55rem; }

.connect-links a { background: rgba(255,255,255,.74); border-radius: .75rem; font-weight: 800; padding: .85rem 1rem; text-decoration: none; }

footer { background: var(--navy); color: rgba(255,255,255,.66); font-size: .75rem; padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); text-align: center; }

footer p { margin: .2rem; }



.share-dialog { background: var(--paper); border: 0; border-radius: 1.5rem; color: var(--ink); max-width: 360px; padding: 2rem 1.5rem; text-align: center; width: calc(100% - 2rem); }

.share-dialog::backdrop { background: rgba(3,17,29,.82); backdrop-filter: blur(5px); }

.share-dialog h2 { font-size: 1.8rem; margin: 0 0 1.2rem; }

.dialog-close { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 2rem; position: absolute; right: .65rem; top: .35rem; }

.qr { background: #fff; border-radius: 1rem; display: inline-block; padding: .8rem; }

.qr img, .qr canvas { display: block; height: auto; max-width: 210px; width: 100%; }

.copy-link { background: var(--navy); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-weight: 800; margin-top: 1.2rem; min-height: 48px; padding: .65rem 1.4rem; }

.copy-status { color: #14742d; font-size: .82rem; min-height: 1.25rem; }



a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (hover:hover) {

  .primary-action, .service-card, .all-experiences, .connect-links a { transition: transform .2s ease, box-shadow .2s ease; }

  .primary-action:hover, .all-experiences:hover { transform: translateY(-2px); }

  .service-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

  .connect-links a:hover { transform: translateX(4px); }

}

@media (min-width: 760px) {

  body { background: #dce7e9; }

  main { background: var(--paper); margin: 0 auto; max-width: 1240px; }

  .hero { min-height: 720px; }

  .hero-content { padding: 4rem; }

  .contact-panel { align-items: center; display: grid; gap: 2rem; grid-template-columns: minmax(240px, .8fr) 1.2fr; padding: 1.5rem 4rem; }

  .quick-actions { margin: 0; }

  .services { padding: 6rem 4rem; }

  .service-card { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 290px; }

  .service-card:nth-of-type(even) { grid-template-columns: 1.1fr .9fr; }

  .service-card:nth-of-type(even) > img { order: 2; }

  .service-card > img { aspect-ratio: auto; height: 100%; min-height: 290px; }

  .service-content { display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; }

  .connect { margin-bottom: 6rem; padding: 3rem; }

  .connect-links { grid-template-columns: repeat(3, 1fr); }

}

@media (min-width: 1100px) {

  .hero-photo { background-position: center 44%; }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }

}