/* Mobile mystical theme: midnight violet, atmospheric art and warm gold. */
:root {
  --bg: #100c19;
  --surface: #191226;
  --surface-2: #21172f;
  --ink: #f4edf7;
  --muted: #baadc4;
  --accent: #ddc397;
  --plum: #87639e;
  --line: #71607966;
  --soft: #d6c7dd;
}
body { background: #09070f; }
.page { background: var(--bg); box-shadow: 0 0 100px #5d347523; }
.header {
  justify-content: center;
  background: #100c19;
  border-bottom-color: #9d7bad30;
}
.logo { color: #f1e8fa; letter-spacing: .2em; }
.hero {
  isolation: isolate;
  background:
    linear-gradient(180deg, #100c1926 0%, #100c1959 58%, #100c19 100%),
    url("assets/mystic-background.webp") center top / 100% auto no-repeat,
    #100c19;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 70px;
  right: -177px;
  width: 310px;
  height: 310px;
  border: 1px solid #d9bb9226;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #d9bb9205;
  pointer-events: none;
}
.hero .eyebrow {
  justify-content: center;
  font-size: 9px;
  letter-spacing: .1em;
}
.hero .eyebrow i { width: 15px; flex: 0 0 15px; }
.hero h1 {
  text-align: center;
  font-size: clamp(51px, 13.8vw, 67px);
  margin: 33px 0 24px;
  text-shadow: 0 3px 25px #06030b8c;
}
.hero h1 em { color: #e7d0a8; }
.hero-lead {
  text-align: center;
  font-size: 25px;
  color: #e0d5e9;
  margin: 0 auto 29px;
  max-width: 340px;
}
.hero-portrait {
  height: 345px;
  max-width: 310px;
  margin: 0 auto;
  border: 1px solid #c4a0d65c;
  border-radius: 160px 160px 20px 20px;
  background:
    linear-gradient(180deg, #32214059, #17101c99),
    url("assets/mystic-background.webp") center 70% / cover,
    #271b35;
  box-shadow: 0 0 55px #9770c027, inset 0 0 48px #21132766;
}
.hero-portrait::before,.hero-portrait::after { background: #ccb4de0c; }
.portrait-monogram { color: #ddcbe6a1; text-shadow: 0 0 50px #bc94d549; }
.portrait-orbit { width: 231px; height: 231px; border-color: #cdb69580; box-shadow: 0 0 45px #aa82c51c; }
.portrait-orbit::before,.portrait-orbit::after { border-color: #d5bdd249; }
.portrait-caption { bottom: 20px; color: #d7c6e0; font-size: 9px; }
.hero-whatsapp { max-width: 330px; margin: 25px auto 0; }
.hero-action { margin-top: 4px; border-bottom-color: #a584ba3b; }
.round-arrow { border-color: #ab8bba7a; color: #d9c3e8; }
.section { padding-top: 70px; padding-bottom: 72px; }
.section p { color: #cbbdd5; }
.section-kicker { color: #b9a7c6; }
.section-kicker span { color: #e0c18d; }
.section h2 { color: #f3eaf8; }
.section h2 em { color: #d0afdf; }
.about {
  background:
    linear-gradient(180deg, #100c19 0%, #100c19cf 45%, #130e1dfa 100%),
    url("assets/mystic-background.webp") center center / 100% auto no-repeat,
    #100c19;
}
.for-whom {
  background:
    radial-gradient(ellipse at 110% 35%, #7a499626, transparent 65%),
    #171020;
}
.brief-list li {
  border-color: #a080b03b;
  color: #ded3e5;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brief-list li::before { content: "✧"; top: 15px; color: #cdb091; font-size: 15px; }
.brief-list li:last-child { border-bottom-color: #a080b03b; }
.about-points li:nth-child(-n+2) strong { color: #e9d2ae; }
.quote { border-left-color: #c4a477; color: #eee3f4; }
.quote em { color: #d3b0e2; }
.quote > span { color: #d7be90; text-shadow: 0 0 18px #d7be9050; }
.results {
  background:
    radial-gradient(ellipse at -30% 75%, #5b398228, transparent 60%),
    #120e1c;
}
.outcome {
  border-left-color: #c5a27e;
  background: linear-gradient(135deg, #68487732, #29203533);
  border-radius: 0 14px 14px 0;
}
.outcome h3 { color: #ddbd90; }
.reviews { background: #100c19; }
.reviews-empty { border-color: #a180b43d; }
.services {
  background:
    radial-gradient(ellipse at 120% 40%, #79529624, transparent 60%),
    #130e1d;
}
.service-card,.service-card.secondary {
  border: 1px solid #bb96d14a;
  border-radius: 17px;
  background: linear-gradient(155deg, #342344ed, #1b1429f7 75%);
  box-shadow: 0 18px 42px #03010755, inset 0 1px 0 #e3c8f50c;
  padding: 24px 23px 22px;
}
.service-card.secondary { background: linear-gradient(155deg, #2a203bef, #161220 80%); }
.service-card h3 { font-size: clamp(43px, 12vw, 55px); margin-top: 37px; }
.service-card h3 em { color: #d0acdf; }
.service-card p { color: #d3c4dc; }
.service-top { color: #d6bd95; font-size: 9px; letter-spacing: .12em; }
.service-top span:last-child { color: #dec99f; text-shadow: 0 0 20px #bc8cc165; }
.service-link {
  margin-top: 28px;
  padding: 15px 17px;
  border: 1px solid #bd97d45b;
  border-radius: 9px;
  color: #f3eafa;
  letter-spacing: .09em;
  background: linear-gradient(110deg, #6d4c85, #433052);
  box-shadow: 0 5px 22px #9362b41c, inset 0 1px 0 #e7caf32b;
}
.formats { background: #171121; }
.format-list details { border-color: #aa87bd42; }
.format-list details:last-child { border-bottom-color: #aa87bd42; }
.format-list summary { color: #e4d9ec; }
.format-list summary span,.format-list summary b { color: #c7a2da; }
.approach-editorial {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, #160f20bd, #160f20ea 35%, #160f20f7),
    url("assets/mystic-background.webp") center top / 100% auto no-repeat,
    #160f20;
}
.mystic-seal {
  position: absolute;
  top: 51px;
  right: 25px;
  width: 58px;
  height: 58px;
  border: 1px solid #cead785d;
  border-radius: 50%;
  background: radial-gradient(circle, #b58ac526, transparent 70%);
  box-shadow: 0 0 28px #ba8cd419;
  pointer-events: none;
}
.mystic-seal::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 14px;
  width: 27px;
  height: 66px;
  border: 1px solid #ccb09766;
  border-radius: 50%;
  transform: rotate(37deg);
}
.mystic-seal::after {
  content: "";
  position: absolute;
  inset: 20px;
  background: #ead2a1;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.approach-tools { position: relative; border-bottom-color: #aa879267; }
.approach-tools::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: calc(50% - 4px);
  width: 7px;
  height: 7px;
  background: #dfc38e;
  transform: rotate(45deg);
  box-shadow: 0 0 15px #c9a57955;
}
.approach-tools-names span:nth-child(2) { color: #cfaddd; }
.approach-reason strong {
  color: #e9daef;
  text-decoration: none;
  font-weight: 600;
}
.approach-experience,.approach-editorial .approach-goal { border-color: #94779e50; }
.approach-years b { color: #e0c28d; text-shadow: 0 0 24px #bd88c536; }
.approach-mission {
  overflow: hidden;
  isolation: isolate;
  border-top-color: #a683788c;
  border-bottom-color: #89609455;
  background:
    radial-gradient(ellipse at 100% 15%, #79468e40, transparent 65%),
    #0e0b17;
}
.approach-mission::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e1c89d99;
  box-shadow: 7px 8px 0 #d7b78a40, 18px -5px 0 #d7b78a55;
}
.approach-mission::after {
  content: "";
  position: absolute;
  bottom: -76px;
  right: -70px;
  width: 185px;
  height: 185px;
  border: 1px solid #c7a4d538;
  border-radius: 50%;
  box-shadow: 0 0 0 17px #c9a57909;
  pointer-events: none;
}
.approach-mission p { position: relative; z-index: 1; }
.approach-mission em,.approach-personal h3 em { color: #d7b6e5; }
.contact {
  text-align: center;
  color: var(--ink);
  background:
    linear-gradient(180deg, #100c19dd, #100c1959 55%, #100c19de),
    url("assets/mystic-background.webp") center bottom / cover,
    #100c19;
}
.contact .section-kicker { justify-content: center; }
.contact .section-kicker,.contact .section-kicker span { color: #cbb8d5; }
.contact h2 em { color: #d9b7e2; }
.contact-button {
  color: #2a1b22;
  background: linear-gradient(110deg, #eac994, #f8e5b4 50%, #dfba82);
  border: 1px solid #f4dcad;
  border-radius: 12px;
  box-shadow: 0 8px 30px #dcb87829, inset 0 1px 0 #fff6dd;
  padding: 17px 19px;
}
.contact-number { color: #dacbe0; }
.footer { background: #0c0913; border-top: 1px solid #916ca52b; }
@media(max-width:350px) {
  .hero .eyebrow { font-size: 8px; gap: 7px; letter-spacing: .06em; }
  .hero h1 { font-size: 50px; }
  .hero-lead { font-size: 23px; }
  .hero-portrait { height: 315px; }
  .portrait-orbit { width: 209px; height: 209px; }
  .service-card,.service-card.secondary { padding-left: 19px; padding-right: 19px; }
  .service-card h3 { font-size: 34px; }
}