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

.feature-card {
  min-height: 290px;
}

.feature-symbol {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background: rgb(255 255 255 / 24%);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 33px;
}

.feature-card.dark .feature-symbol {
  background: #fff;
}

.phone-showcase {
  position: relative;
  width: min(278px, 100%);
  margin: 0 auto;
  padding: 8px;
  border: 7px solid #123c5b;
  border-radius: 38px;
  background: #123c5b;
  box-shadow: 15px 18px 0 #a8dcfa, 0 16px 34px rgb(18 60 91 / 20%);
}

.phone-showcase img {
  display: block;
  width: 100%;
  aspect-ratio: 719 / 1280;
  border-radius: 25px;
  object-fit: cover;
}

.phone-speaker {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 50%;
  width: 76px;
  height: 20px;
  border-radius: 0 0 13px 13px;
  background: #123c5b;
  transform: translateX(-50%);
}

.hero-phone {
  transform: rotate(3deg);
}

.channel-phone {
  width: min(252px, 100%);
  transform: rotate(-3deg);
}

.branch-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 18px;
  text-align: left;
  margin: 42px auto 0;
}

.order-note {
  max-width: 650px;
  margin: 0 auto 18px;
  color: #315d78;
  font-size: 14px;
  line-height: 1.8;
}

.order-phones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto 22px;
}

.order-phones a {
  background: rgb(255 255 255 / 50%);
  border: 1px solid rgb(18 60 91 / 14%);
  border-radius: 99px;
  color: #123c5b;
  font: 600 12px Manrope, "Noto Sans Myanmar", sans-serif;
  padding: 10px 14px;
  text-decoration: none;
}

.hotline {
  margin-top: 4px;
}

.hotline-note {
  color: #315d78;
  font-size: 12px;
  margin: 13px 0 0;
}

.branch-details div {
  background: rgb(255 255 255 / 38%);
  border: 1px solid rgb(18 60 91 / 12%);
  border-radius: 12px;
  padding: 18px;
}

.branch-details b,
.branch-details span {
  display: block;
}

.branch-details b {
  font-size: 13px;
  margin-bottom: 8px;
}

.branch-details span {
  color: #315d78;
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .feature-grid,
  .branch-details {
    grid-template-columns: 1fr;
  }

  .branch-details {
    margin-top: 32px;
  }

  .hero-phone,
  .channel-phone {
    transform: none;
  }

  .order-phones {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* WS Pharmacy brand refresh — derived from the blue used in the logo. */
:root {
  --ink: #3e9fea;
  --paper: #f7fcff;
  --lime: #e5f6ff;
  --coral: #3e9fea;
  --blue: #a9ddfb;
  --muted: #5e7b90;
}

body,
nav a,
.text-link,
.brand {
  color: #173a52;
}

.glow-one { background: #c7edff; }
.glow-two { background: #e4f6ff; }
em { color: #3e9fea; }
.nav-cta,
.primary,
.light { background: #3e9fea; }
.hero-panel,
.feature-card.dark,
.operations { background: #3e9fea; }
.hero-panel { box-shadow: 16px 18px 0 #bfe8ff; }
.operations h2 em { color: #e5f6ff; }
.feature-card.lime { background: #dff4ff; }
.feature-card.sand { background: #eef9ff; }
.feature-card.dark { color: #fff; }
.flow-icon { background: rgb(255 255 255 / 20%); }
.flow-line { background: rgb(255 255 255 / 42%); }
.flow-step p { color: #e7f7ff; }
.contact { background: #d9f2ff; }
.spotlight li span { color: #3e9fea; }

.phone-showcase {
  width: min(270px, 100%);
  padding: 6px;
  border: 4px solid #17232c;
  border-radius: 40px;
  background: #17232c;
  box-shadow: 0 22px 42px rgb(20 74 108 / 22%), 9px 10px 0 #b5e4fc;
}

.phone-showcase::before,
.phone-showcase::after {
  content: "";
  position: absolute;
  background: #17232c;
}

.phone-showcase::before {
  right: -7px;
  top: 126px;
  width: 3px;
  height: 52px;
  border-radius: 0 3px 3px 0;
}

.phone-showcase::after {
  left: -7px;
  top: 104px;
  width: 3px;
  height: 28px;
  border-radius: 3px 0 0 3px;
}

.phone-showcase img {
  border-radius: 31px;
}

.phone-speaker {
  top: 11px;
  width: 62px;
  height: 7px;
  border-radius: 99px;
  background: #17232c;
}

.channel-phone {
  width: min(250px, 100%);
  box-shadow: 0 22px 42px rgb(20 74 108 / 22%), -9px 10px 0 #b5e4fc;
}

/* Improve readability for Myanmar copy and compact UI labels. */
nav a,
.button,
.text-link {
  font-size: 14px;
}

.hero-copy,
.intro-layout p {
  font-size: 17px;
}

.feature-card p,
.flow-step p,
.security-list small {
  font-size: 13px;
}

.feature-card h3,
.flow-step h3,
.security-list b {
  font-size: 18px;
}

.order-note {
  font-size: 15px;
}

.order-phones a {
  font-size: 13px;
}

.hotline-note,
.branch-details span {
  font-size: 13px;
}

.branch-details b {
  font-size: 14px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgb(23 58 82 / 14%);
  border-radius: 99px;
  background: rgb(255 255 255 / 52%);
  color: #173a52;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.social-links a:hover {
  background: #fff;
  transform: translateY(-2px);
}

.social-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #3e9fea;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.social-spotlight {
  background: #e9f8ff;
  padding: 105px 0;
}

.social-spotlight-inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
  align-items: center;
}

.social-spotlight h2 {
  margin: 16px 0;
  color: #173a52;
  font-size: clamp(38px, 4vw, 54px);
  letter-spacing: -.065em;
  line-height: 1.1;
}

.social-spotlight p:not(.section-kicker) {
  max-width: 430px;
  color: #5e7b90;
  font-size: 15px;
  line-height: 1.8;
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.social-grid a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 100px;
  padding: 17px;
  border: 1px solid #c9e8f8;
  border-radius: 14px;
  background: #fff;
  color: #173a52;
  text-decoration: none;
  box-shadow: 0 7px 18px rgb(35 112 157 / 7%);
  transition: transform .2s ease, box-shadow .2s ease;
}

.social-grid a:hover {
  box-shadow: 0 13px 25px rgb(35 112 157 / 16%);
  transform: translateY(-3px);
}

.social-grid a > span:nth-child(2) { min-width: 0; }
.social-grid b,
.social-grid small { display: block; }
.social-grid b { font-size: 15px; }
.social-grid small { overflow: hidden; color: #698397; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-grid i { margin-left: auto; color: #3e9fea; font-size: 17px; font-style: normal; }

.social-brand {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: #3e9fea;
  color: #fff;
  font-weight: 800;
}

.social-brand.tiktok { background: #17232c; font-size: 9px; }
.social-brand.telegram { background: #2fa4e7; font-size: 23px; }
.social-brand.viber { background: #7665c9; font-size: 21px; }
.social-brand.youtube { background: #ef4f4f; font-size: 19px; }

.social-brand svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.flow-icon {
  background: #fff;
  color: #3e9fea;
}

.flow-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (max-width: 760px) {
  .social-spotlight { padding: 72px 0; }
  .social-spotlight-inner { grid-template-columns: 1fr; gap: 34px; }
  .social-grid { grid-template-columns: 1fr; }
}