:root {
  --ink: #11110f;
  --ink-soft: #1d1d1a;
  --lime: #c9ef55;
  --paper: #f4f1e8;
  --warm: #d8caa7;
  --muted: #a7a59d;
  --line: rgba(244, 241, 232, 0.16);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--ink); }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: "DM Sans", sans-serif;
}

a { color: inherit; text-decoration: none; }

.page-shell {
  position: relative;
  display: flex;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 28px 20px;
  background: radial-gradient(circle at 20% 12%, rgba(201, 239, 85, 0.12), transparent 28%), linear-gradient(135deg, #10110f 0%, #191a16 100%);
}

.page-shell::before, .page-shell::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.page-shell::before {
  top: -10vh;
  right: -5vw;
  width: 40vw;
  height: 40vw;
  border: 1px solid rgba(201, 239, 85, 0.16);
  border-radius: 50%;
}

.page-shell::after {
  bottom: 7vh;
  left: 3vw;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(216, 202, 167, 0.2);
  transform: rotate(45deg);
}

.contact-card {
  position: relative;
  z-index: 1;
  width: min(100%, 462px);
  padding: 30px 30px 24px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 15, 0.86);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.topline, .intro-row, .location-block { display: flex; align-items: center; }
.topline { gap: 9px; color: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.topline-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.topline-line { height: 1px; flex: 1; background: rgba(201, 239, 85, 0.3); }

.brand-block { padding: 42px 0 28px; }
.eyebrow { margin: 0 0 10px; color: var(--warm); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; }
h1 { display: flex; align-items: flex-end; gap: 12px; margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(74px, 20vw, 112px); line-height: 0.76; letter-spacing: -0.06em; }
h1 span { font-weight: 600; }
h1 strong { color: var(--lime); font-weight: 700; }
.tagline { margin: 23px 0 0; color: var(--paper); font-size: 17px; font-weight: 500; }

.intro-row { gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.intro-row p { margin: 0; }
.intro-rule { width: 18px; height: 1px; background: var(--warm); }

.contact-actions { display: grid; gap: 10px; }
.action { display: flex; min-height: 68px; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.action:hover, .action:focus-visible { transform: translateY(-2px); border-color: var(--lime); outline: none; }
.action-whatsapp { min-height: 82px; color: var(--paper); background: var(--ink); border: 2px solid var(--lime); box-shadow: inset 5px 0 0 var(--lime); }
.action-whatsapp:hover, .action-whatsapp:focus-visible { background: var(--ink-soft); }
.action-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.action-icon svg { width: 19px; height: 19px; fill: currentColor; }
.social-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-icon svg path { fill: currentColor; stroke: none; }
.social-icon .instagram-dot { fill: currentColor; stroke: none; }
.social-icon { color: var(--warm); font-family: "Space Grotesk", sans-serif; font-size: 27px; line-height: 1; }
.facebook-icon { font-size: 25px; font-weight: 700; }
.action-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.action-copy strong { font-size: 15px; font-weight: 700; }
.action-copy small { color: rgba(244, 241, 232, 0.58); font-size: 11px; }
.action-whatsapp .action-icon, .action-whatsapp .action-arrow { color: var(--lime); }
.action-whatsapp .action-copy small { color: var(--muted); }
.action-arrow { align-self: center; font-size: 22px; line-height: 1; }

.location-block { gap: 12px; margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); }
.location-pin { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; color: var(--lime); }
.location-pin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.location-block a { display: grid; gap: 3px; }
.location-block strong { font-size: 12px; font-weight: 700; }
.location-block span { color: var(--muted); font-size: 11px; }
.location-arrow { margin-left: auto; color: var(--warm) !important; font-size: 20px !important; }
.page-note { position: absolute; bottom: 20px; margin: 0; color: rgba(244, 241, 232, 0.35); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; }

@media (max-width: 500px) {
  .page-shell { align-items: flex-start; padding: 18px 14px 48px; }
  .contact-card { padding: 23px 20px 19px; }
  .brand-block { padding: 33px 0 23px; }
  .page-note { bottom: 13px; }
}

@media (max-width: 500px) and (max-height: 700px) {
  .page-shell { padding: 8px 10px 12px; }
  .contact-card { padding: 14px 14px 10px; }
  .brand-block { padding: 18px 0 12px; }
  h1 { font-size: clamp(62px, 20vw, 78px); }
  .tagline { margin-top: 14px; font-size: 15px; }
  .action { min-height: 48px; padding-block: 7px; }
  .action-whatsapp { min-height: 58px; }
  .action-copy small { display: none; }
  .location-block { margin-top: 16px; padding-top: 13px; }
  .page-note { display: none; }
}

@media (max-height: 700px) and (min-width: 501px) {
  .page-shell { padding-block: 15px; }
  .brand-block { padding-block: 25px 18px; }
  .page-note { display: none; }
}