:root {
  --bg:  #FFFFFF;
  --bg2: #F6F7F9;
  --bg3: #EDEEF2;
  --bg4: #E2E4EA;
  --or:  #D85A1A;
  --or2: #E96B2A;
  --yw:  #c89a2b;
  --cr:  #0D0D0D;
  --cr2: #3A3A3A;
  --cr3: #7A7A7A;
  --tl:  #1f6a63;
  --bd:  rgba(0, 0, 0, 0.08);
  --bd2: rgba(0, 0, 0, 0.14);
  --fd: "Bebas Neue", sans-serif;
  --fh: "Syne", sans-serif;
  --fb: "DM Sans", sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  display: block !important;
  background: var(--bg);
  color: var(--cr);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
    
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* CURSOR */
.cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
}
.cur-d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr);
  transform: translate(-50%, -50%);
}
.cur-r {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(34, 28, 23, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    width 0.3s,
    height 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.cur-r.h {
  width: 56px;
  height: 56px;
  background: rgba(232, 73, 12, 0.1);
  border-color: var(--or);
}

/* LOADER */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition:
    opacity 0.8s,
    visibility 0.8s;
}
#loader.out {
  opacity: 0;
  visibility: hidden;
}
.ld-logo {
  font-family: var(--fd);
  font-size: 80px;
  letter-spacing: 8px;
  color: var(--cr);
}
.ld-logo span {
  color: var(--or);
}
.ld-bar {
  width: 220px;
  height: 1px;
  background: var(--bd2);
  overflow: hidden;
}
.ld-fill {
  height: 100%;
  background: var(--or);
  animation: ldFill 1.8s ease forwards;
}
@keyframes ldFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s,
    border-color 0.4s;
}
nav.sc {
  background: rgba(247, 241, 232, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--bd);
}
.nlogo {
  font-family: var(--fd);
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--cr);
  text-decoration: none;
}
.nlogo em {
  color: var(--or);
  font-style: normal;
}
.nlinks {
  display: flex;
  align-items: center;
  gap: 0;
}
.ndd {
  position: relative;
}
.ndd > a,
.nl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr3);
  text-decoration: none;
  padding: 28px 16px;
  display: block;
  cursor: none;
  position: relative;
  transition: color 0.2s;
}
.ndd > a::after,
.nl::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.ndd > a:hover,
.nl:hover {
  color: var(--cr);
}
.ndd > a:hover::after,
.nl:hover::after {
  transform: scaleX(1);
}
.ndd:hover > a {
  color: var(--cr);
}
.ndd:hover > a::after {
  transform: scaleX(1);
}
.ndrop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 6px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ndd:hover .ndrop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ndrop a {
  display: block;
  padding: 9px 16px;
  font-size: 12px;
  color: var(--cr3);
  text-decoration: none;
  transition:
    color 0.2s,
    background 0.2s;
  cursor: none;
  white-space: nowrap;
}
.ndrop a:hover {
  color: var(--cr);
  background: var(--bg3);
}

/* ── MEGA MENU ──────────────────────────────────────── */
.ndd-mega {
  position: relative;
}
/* invisible hover bridge */
.ndd-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}
.mega-drop {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 12px) !important;
  width: 560px !important;
  min-width: unset !important;
  border-radius: 8px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: auto 1fr auto !important;
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.12) !important;
  border: 1px solid var(--bd) !important;
  border-top: 2px solid var(--or) !important;
  overflow: hidden !important;
}
.mega-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px 9px;
  border-bottom: 1px solid var(--bd);
}
.mega-header-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.mega-header-sub {
  font-size: 10px;
  color: var(--cr3);
}
.mega-col {
  padding: 20px 16px 16px;
  border-right: 1px solid var(--bd);
}
.mega-col:last-child { border-right: none; }
.mega-col-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}
.mega-item {
  display: block !important;
  padding: 6px 8px !important;
  margin: 0 -8px;
  border-radius: 4px;
  white-space: normal !important;
  background: transparent;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s !important;
}
.mega-item:hover {
  background: var(--bg3) !important;
  border-left-color: var(--or) !important;
}
.mega-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cr);
  line-height: 1.2;
  margin-bottom: 1px;
}
.mega-desc {
  display: block;
  font-size: 10.5px;
  color: var(--cr3);
  line-height: 1.3;
}
.mega-item:hover .mega-name { color: var(--or); }
.mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 9px 16px;
  border-top: 1px solid var(--bd);
  background: var(--bg3);
}
.mega-footer span {
  font-size: 10.5px;
  color: var(--cr3);
}
.mega-footer a {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--or);
  text-decoration: none;
  transition: opacity 0.15s;
  cursor: none;
}
.mega-footer a:hover { opacity: 0.7; }
.nbtn {
  background: var(--or);
  color: #fff;
  padding: 10px 22px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition:
    background 0.2s,
    transform 0.15s;
  cursor: none;
}
.nbtn:hover {
  background: var(--or2);
  transform: translateY(-1px);
}

.mnav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cr);
  transition: opacity 0.2s ease;
  padding: 0;
  position: relative;
}

.mnav-toggle span {
  position: absolute;
  width: 20px;
  height: 1.75px;
  border-radius: 999px;
  background: var(--cr);
  transition: transform 0.24s ease, opacity 0.18s ease;
}

.mnav-toggle span:nth-child(1) {
  transform: translateY(-6px);
}

.mnav-toggle span:nth-child(3) {
  transform: translateY(6px);
}

.mnav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 820;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transform: translateY(-102%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s ease, opacity 0.24s ease;
}

.mnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 810;
  border: 0;
  background: rgba(13, 13, 13, 0.3);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.mnav-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.mnav-title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cr);
}

.mnav-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--bd2);
  border-radius: 8px;
  background: #fff;
  color: var(--cr2);
  font-size: 18px;
  line-height: 1;
}

.mnav-body {
  padding: 10px 12px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mnav-acc {
  border-bottom: 1px solid var(--bd);
}

.mnav-acc-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--cr2);
  padding: 12px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mnav-acc-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--cr3);
  border-bottom: 1.5px solid var(--cr3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.mnav-acc.open .mnav-acc-toggle {
  color: var(--cr);
  background: transparent;
}

.mnav-acc.open .mnav-acc-toggle::after {
  transform: rotate(-135deg);
}

.mnav-acc-panel {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0 8px;
  border-top: 0;
  background: transparent;
}

.mnav-acc.open .mnav-acc-panel {
  display: flex;
}

.mnav-link {
  display: block;
  padding: 10px 4px 10px 10px;
  border: 0;
  border-radius: 0;
  border-left: 2px solid transparent;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cr2);
  background: transparent;
}

.mnav-link:hover {
  border-left-color: rgba(216, 90, 26, 0.48);
  color: var(--cr);
}

.mnav-link.mnav-cta {
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 8px;
  border-left: 0;
  background: var(--or);
  color: #fff;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.07em;
}

body.mnav-open .mnav-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.mnav-open .mnav-panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.mnav-open .mnav-toggle {
  opacity: 0.86;
}

body.mnav-open .mnav-toggle span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

body.mnav-open .mnav-toggle span:nth-child(2) {
  opacity: 0;
}

body.mnav-open .mnav-toggle span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* PAGE SYSTEM */
.page {
  display: none;
}
.page.on {
  display: block;
  animation: pgIn 0.45s ease both;
}
@keyframes pgIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HERO */
.ph {
  min-height: 50vh;
  padding: 120px 5% 70px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid var(--bd);
}
.ph-orb {
  position: absolute;
  top: 8%;
  right: 4%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  opacity: 0.13;
  filter: blur(70px);
  pointer-events: none;
  animation: orb 9s ease-in-out infinite;
}
@keyframes orb {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-24px);
  }
}
.ph-bg {
  position: absolute;
  bottom: -30px;
  left: -1%;
  font-family: var(--fd);
  font-size: clamp(100px, 16vw, 230px);
  letter-spacing: -3px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(34, 28, 23, 0.08);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.ph-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.ph-tag::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--or);
}
.ph-h {
  font-family: var(--fd);
  font-size: clamp(56px, 8vw, 110px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -1px;
  color: var(--cr);
  margin-bottom: 22px;
}
.ph-h em {
  color: var(--or);
  font-style: normal;
}
.ph-sub {
  font-size: 18px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
  max-width: 580px;
  margin-bottom: 36px;
}
.ph-acts {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ph-stats {
  display: flex;
  gap: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--bd);
  flex-wrap: wrap;
}
.ph-sn {
  font-family: var(--fd);
  font-size: 44px;
  letter-spacing: -2px;
  color: var(--cr);
  line-height: 1;
}
.ph-sn em {
  color: var(--or);
  font-style: normal;
}
.ph-sl {
  font-size: 12px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.works-for {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.wf-label {
  font-size: 11px;
  color: var(--cr3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wf-pill {
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid var(--bd2);
  border-radius: 100px;
  color: var(--cr3);
}

/* HOME */
.home-hero {
  min-height: 70vh;
  padding: 80px 5% 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid var(--bd);
}
.home-hero-orb {
  position: absolute;
  top: 12%;
  right: 5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    #ff6330,
    #e8490c 45%,
    transparent 72%
  );
  opacity: 0.14;
  filter: blur(65px);
  pointer-events: none;
  animation: orb 9s ease-in-out infinite;
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 70px;
}
.home-hero-mid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
  margin-bottom: 0;
}
.home-hero-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 14px;
}
.home-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr);
  border: 1.5px solid var(--bd2);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.home-hero-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
  animation: blink 2s infinite;
}
.home-hero-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--cr);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-hero-title {
  font-family: var(--fd);
  font-size: clamp(68px, 11vw, 158px);
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--cr);
  margin-bottom: 0;
}
.home-hero-title-line {
  display: block;
}
.home-hero-title .home-hero-title-line:nth-child(1) {
  font-size: 0.76em;
  letter-spacing: -0.3px;
  opacity: 0.82;
}
.home-hero-title .home-hero-title-line:nth-child(2) {
  font-size: 0.9em;
  letter-spacing: -0.5px;
  opacity: 0.93;
}
.home-hero-title .home-hero-title-line:nth-child(3) {
  font-size: 1em;
  letter-spacing: -1px;
  color: var(--or);
}
.home-hero-title-line-offset {
  display: block;
  padding-left: 14%;
}
.home-hero-title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.home-hero-title-accent {
  color: var(--or);
}
.home-hero-title-outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(40, 31, 27, 0.9);
}
.home-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--bd);
  flex-wrap: wrap;
  gap: 28px;
}
.home-hero-copy-main {
  font-size: 18px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
  max-width: 460px;
  margin-bottom: 14px;
}
.home-hero-copy-note {
  font-size: 15px;
  font-weight: 600;
  color: var(--or);
  line-height: 1.75;
  margin-bottom: 28px;
}
.home-hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}
.who-panel {
  padding: 48px 44px;
}
.who-panel-primary {
  background: var(--bg2);
}
.who-panel-secondary {
  background: var(--bg3);
}
.slbl-tight {
  margin-bottom: 14px;
}
.body-copy {
  font-size: 16px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
}
.pill-row {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 20px;
}
.section-head-copy {
  max-width: 340px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.service-card {
  cursor: none;
}
.service-card-action {
  margin-top: 16px;
}

.btn-light {
  background: #fff;
  color: var(--or);
}

.home-process-link-wrap {
  margin-top: 24px;
}

.home-process-link {
  display: inline-flex;
}

.home-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.home-results-grid .res-item {
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.testimonial-card .val-d {
  margin-bottom: 18px;
}

.testimonial-meta {
  font-size: 12px;
  color: var(--cr3);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* FOOTER TEMPLATE */
footer .fl {
  color: #f3e8d8;
}
footer p,
footer a {
  font-weight: 400 !important;
  line-height: 1.75 !important;
}
footer .fd,
footer .fct,
footer .fcp {
  color: rgba(240, 230, 208, 0.66);
}
footer .fc2 a {
  color: rgba(240, 230, 208, 0.72);
}
footer .fc2 a:hover,
footer .fls a:hover,
footer .fs:hover {
  color: #fff;
}
footer .fls a {
  color: rgba(240, 230, 208, 0.52);
}
footer .fs {
  color: rgba(240, 230, 208, 0.72);
  border-color: rgba(240, 230, 208, 0.18);
}
.ft-brand-accent {
  color: var(--or);
}

/* MOBILE BAR */
.mob-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--cr3);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mob-link-accent {
  color: var(--or);
  font-weight: 600;
}

/* BLOG PAGINATION */
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--bd2);
  border-radius: 3px;
  text-decoration: none;
  color: var(--cr2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: all 0.2s;
}

.nav-links a.page-numbers:hover {
  color: var(--cr);
  border-color: var(--or);
}

.nav-links .page-numbers.current {
  background: var(--or);
  color: #fff;
  border-color: var(--or);
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--or);
  color: #fff;
  padding: 15px 30px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s;
  letter-spacing: 0.03em;
  cursor: none;
  border: none;
}
.btn:hover {
  background: var(--or2);
  transform: translateY(-2px);
}
.btn-o {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--bd2);
  color: var(--cr2);
  padding: 14px 28px;
  border-radius: 3px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: none;
}
.btn-o:hover {
  border-color: var(--cr2);
  color: var(--cr);
}
.btn-g {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cr2);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
  cursor: none;
  letter-spacing: 0.03em;
}
.btn-g::after {
  content: "↗";
}
.btn-g:hover {
  color: var(--cr);
}

/* SECTIONS */
.sec {
  padding: 100px 5%;
}
.sec2 {
  padding: 100px 5%;
  background: var(--bg2);
}
.slbl {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.slbl::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--or);
}
.sh {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -1.5px;
  line-height: 1.04;
  color: var(--cr);
  margin-bottom: 14px;
}
.sh em {
  font-style: italic;
  font-weight: 400;
  color: var(--cr2);
}
.ssub {
  font-size: 17px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
  max-width: 540px;
}

/* CARDS */
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.g2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fc {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 36px 32px;
  transition:
    border-color 0.3s,
    background 0.3s;
  position: relative;
  overflow: hidden;
}
.fc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  transform: scaleX(0);
  transition: transform 0.5s;
}
.fc:hover {
  border-color: var(--bd2);
  background: var(--bg4);
}
.fc:hover::before {
  transform: scaleX(1);
}
.fc-ln {
  width: 28px;
  height: 2px;
  background: var(--or);
  border-radius: 1px;
  margin-bottom: 20px;
}
.fc-ic {
  margin-bottom: 18px;
  display: block;
  line-height: 0;
  color: var(--or);
}
.fc-ic svg {
  display: block;
}
.fc-t {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.fc-d {
  font-size: 15px;
  color: var(--cr3);
  line-height: 1.7;
  font-weight: 400;
}
.fc-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.tag {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border: 1px solid var(--bd2);
  border-radius: 100px;
  color: var(--cr3);
  transition: all 0.2s;
}
.fc:hover .tag {
  color: var(--cr2);
  border-color: rgba(240, 230, 208, 0.2);
}

/* RESULT BAR */
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}
.res-item {
  background: var(--bg2);
  padding: 40px 32px;
  text-align: center;
}
.res-n {
  font-family: var(--fd);
  font-size: 56px;
  letter-spacing: -2px;
  color: var(--or);
  line-height: 1;
}
.res-l {
  font-size: 12px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 8px;
}
.res-d {
  font-size: 15px;
  color: var(--cr2);
  margin-top: 6px;
  font-weight: 400;
  line-height: 1.5;
}

/* SPLIT */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ABOUT: WHO WE ARE PRO LAYOUT */
.who-pro {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
  align-items: stretch;
}
.who-pro-main {
  background: linear-gradient(145deg, var(--bg2), #f2e8da 58%, var(--bg3));
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
}
.who-pro-main::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(216, 90, 26, 0.22), transparent 70%);
  pointer-events: none;
}
.who-pro-copy {
  font-size: 15px;
  color: var(--cr2);
  line-height: 1.78;
  font-weight: 300;
  margin-bottom: 16px;
  max-width: 62ch;
}
.who-pro-copy-muted {
  margin-bottom: 0;
  color: var(--cr3);
}
.who-pro-side {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 26px 24px;
  box-shadow: 0 12px 28px rgba(34, 28, 23, 0.05);
}
.who-pro-kicker {
  font-size: 11px;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 16px;
}
.who-pro-list {
  display: grid;
  gap: 12px;
}
.who-pro-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #f7f2e9);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.who-pro-item:hover {
  border-color: var(--bd2);
  transform: translateY(-2px);
}
.who-pro-no {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--or);
  line-height: 1;
  margin-top: 1px;
}
.who-pro-title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--cr);
  line-height: 1.32;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.who-pro-desc {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.67;
  font-weight: 300;
}

/* ABOUT: WHAT DRIVES US */
.drive-pro {
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  padding: 34px;
}
.drive-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.drive-pro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}
.drive-card {
  border-radius: 10px;
  border: 1px solid var(--bd);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.drive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}
.drive-card:hover::after {
  transform: translateX(120%);
}
.drive-card-mission {
  background: linear-gradient(145deg, #f8efe2, #f0e4d3);
}
.drive-card-vision {
  background: linear-gradient(145deg, #fff9f0, #f7ecda);
}
.drive-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--bd2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 12px;
}
.drive-title {
  font-family: var(--fh);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--cr);
  margin-bottom: 12px;
}
.drive-copy {
  font-size: 14px;
  line-height: 1.72;
  color: var(--cr2);
  font-weight: 300;
  max-width: 56ch;
}
.drive-copy-sub {
  margin-top: 10px;
  color: var(--cr3);
}
.drive-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--or);
  background: rgba(216, 90, 26, 0.08);
  color: var(--cr2);
  font-size: 13px;
  line-height: 1.65;
}

/* ABOUT: COMMITMENTS */
.commit-pro {
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: linear-gradient(140deg, #f7efe3 0%, var(--bg) 55%, #f2e8d9 100%);
  padding: 34px;
}
.commit-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.commit-pro-intro {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cr3);
  font-weight: 300;
  padding: 12px 14px;
  border-left: 3px solid var(--or);
  background: rgba(216, 90, 26, 0.07);
}
.commit-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.commit-item {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 24px rgba(34, 28, 23, 0.04);
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.commit-item:hover {
  transform: translateY(-3px);
  border-color: var(--bd2);
  box-shadow: 0 14px 30px rgba(34, 28, 23, 0.08);
}
.commit-item-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--bg2);
  color: var(--or);
  font-family: var(--fd);
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.commit-item-title {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--cr);
  margin-bottom: 10px;
}
.commit-item-copy {
  font-size: 13px;
  line-height: 1.72;
  color: var(--cr3);
  font-weight: 300;
}

/* ABOUT: TEAM + PROCESS */
.team-process-pro {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 16px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(140deg, #fbf7ef 0%, #f4eadb 62%, #efe2cf 100%);
}
.team-pro-panel,
.process-pro-panel {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 28px;
}
.team-pro-copy {
  font-size: 15px;
  color: var(--cr2);
  line-height: 1.78;
  font-weight: 300;
  margin-bottom: 14px;
}
.team-pro-copy-muted {
  color: var(--cr3);
  margin-bottom: 18px;
}
.team-pro-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.team-pro-tags span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr3);
  padding: 6px 10px;
  border: 1px solid var(--bd2);
  border-radius: 100px;
  background: #fff;
}
.process-pro-title {
  font-size: 30px;
  margin-bottom: 16px;
}
.process-pro-tl {
  padding-left: 26px;
  margin-top: 6px;
}
.process-pro-tl::before {
  background: rgba(34, 28, 23, 0.16);
}
.process-pro-step {
  margin-bottom: 18px;
}
.process-pro-step:last-child {
  margin-bottom: 0;
}
.process-pro-step .tl-dot {
  left: -30px;
  background: var(--or);
  border-color: #fff;
}

/* ABOUT: WHY TIYAN */
.why-pro {
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: linear-gradient(140deg, #fbf6ee 0%, #f5ebde 58%, #efe2d0 100%);
  padding: 36px;
  box-shadow: 0 16px 34px rgba(34, 28, 23, 0.05);
}
.why-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 26px;
}
.why-pro-sub {
  max-width: 430px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--cr3);
  font-weight: 400;
}
.why-pro-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: start;
}
.why-key {
  background: linear-gradient(145deg, #ffffff, #f8f1e5);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.why-key::after {
  content: "";
  position: absolute;
  right: -84px;
  top: -84px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 90, 26, 0.15), transparent 72%);
  pointer-events: none;
}
.why-key-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.why-key-kicker,
.why-key-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--bd2);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cr2);
}
.why-key-badge {
  color: var(--or);
  border-color: rgba(216, 90, 26, 0.35);
  background: rgba(216, 90, 26, 0.08);
}
.why-key-title {
  font-family: var(--fh);
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: -0.7px;
  color: var(--cr);
  margin-bottom: 12px;
}
.why-key-copy {
  font-size: 15px;
  line-height: 1.8;
  color: var(--cr2);
  font-weight: 400;
}
.why-key-tags {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.why-key-tags span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--bd2);
  border-radius: 100px;
  color: var(--cr3);
}
.why-stack {
  display: grid;
  gap: 12px;
}
.why-stack-item {
  background: linear-gradient(145deg, #fff, #f9f3e8);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.why-stack-item:hover {
  transform: translateY(-2px);
  border-color: var(--bd2);
  box-shadow: 0 10px 22px rgba(34, 28, 23, 0.07);
}
.why-stack-no {
  display: inline-block;
  font-family: var(--fd);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--or);
  margin-bottom: 8px;
}
.why-stack-title {
  font-family: var(--fh);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.35px;
  color: var(--cr);
  margin-bottom: 7px;
}
.why-stack-copy {
  font-size: 13px;
  line-height: 1.67;
  color: var(--cr3);
  font-weight: 300;
}

/* CONTACT PAGE */
.contact-orb {
  background: radial-gradient(
    circle at 40% 35%,
    #e5783f,
    #d85a1a 44%,
    transparent 72%
  );
}
.contact-sub {
  max-width: 620px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 28px;
  align-items: start;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 24px 22px;
}
.contact-card-k {
  font-size: 11px;
  color: var(--cr3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-card-v {
  font-family: var(--fh);
  font-size: 20px;
  line-height: 1.25;
  color: var(--cr);
  margin-bottom: 8px;
}
.contact-card-d {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cr3);
  font-weight: 400;
  margin-bottom: 12px;
}
.contact-card-a {
  font-size: 13px;
  color: var(--or);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.contact-card-a:hover {
  color: var(--or2);
}
.contact-hours-wrap {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
}
.contact-hours-wrap .ctbl {
  margin-top: 0;
}
.contact-form-wrap {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 12px 28px rgba(34, 28, 23, 0.06);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.contact-field,
.contact-area,
.contact-select {
  width: 100%;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--cr);
  background: #fff;
  border: 1px solid var(--bd2);
  border-radius: 6px;
  padding: 13px 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.contact-area {
  min-height: 140px;
  resize: vertical;
}
.contact-field::placeholder,
.contact-area::placeholder {
  color: color-mix(in srgb, var(--cr3) 78%, #fff 22%);
}
.contact-field:focus,
.contact-area:focus,
.contact-select:focus {
  border-color: color-mix(in srgb, var(--or) 70%, #fff 30%);
  box-shadow: 0 0 0 3px rgba(216, 90, 26, 0.14);
}
.contact-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--cr3);
  line-height: 1.6;
}
.contact-faq-title {
  margin-bottom: 22px;
}

@media (max-width: 768px) {
  #pg-contact .contact-layout {
    gap: 16px;
  }

  #pg-contact .contact-cards {
    gap: 12px;
    margin-bottom: 12px;
  }

  #pg-contact .contact-hours-wrap {
    padding: 12px;
  }

  #pg-contact .contact-form-wrap {
    padding: 18px;
    box-shadow: none;
  }

  #pg-contact .contact-form-wrap .sh {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.12;
    margin-bottom: 8px;
  }

  #pg-contact .contact-form {
    margin-top: 14px;
    gap: 10px;
  }

  #pg-contact .contact-field,
  #pg-contact .contact-area,
  #pg-contact .contact-select {
    font-size: 16px;
    padding: 12px 13px;
  }

  #pg-contact .contact-area {
    min-height: 120px;
  }

  #pg-contact .contact-form .btn {
    width: 100%;
    justify-content: center;
  }

  #pg-contact .contact-note {
    font-size: 11px;
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  #pg-contact .contact-form-wrap {
    padding: 16px;
  }

  #pg-contact .contact-card,
  #pg-contact .contact-hours-wrap {
    padding: 14px;
  }

  #pg-contact .contact-card-v {
    font-size: 18px;
  }
}

/* STEPS */
.proc-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--bd);
  border-radius: 10px;
  overflow: hidden;
}
.proc-step {
  position: relative;
  padding: 36px 28px 32px;
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg);
  transition: background 0.22s;
}
.proc-step:last-child {
  border-right: none;
}
.proc-step:hover {
  background: var(--bg2);
}
.proc-num {
  font-family: var(--fd);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--or);
  font-weight: 400;
  margin-bottom: 20px;
}
.proc-connector {
  position: absolute;
  top: 52px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid var(--bd);
  z-index: 2;
}
.proc-connector--last {
  display: none;
}
.proc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proc-t {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--cr);
  letter-spacing: -0.2px;
}
.proc-d {
  font-size: 13.5px;
  color: var(--cr3);
  line-height: 1.7;
  font-weight: 400;
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}
.faq-i {
  border-bottom: 1px solid var(--bd);
}
.faq-i:last-child {
  border-bottom: none;
}
.faq-q {
  padding: 20px 26px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  color: var(--cr);
  cursor: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background 0.2s;
}
.faq-q:hover {
  background: var(--bg3);
}
.faq-ic {
  font-size: 20px;
  color: var(--or);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq-i.op .faq-ic {
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 26px 20px;
  font-size: 15px;
  color: var(--cr3);
  line-height: 1.8;
  font-weight: 400;
  display: none;
}
.faq-i.op .faq-a {
  display: block;
}

/* MINI CTA */
.mcta {
  background: var(--or);
  padding: 80px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mcta-bg {
  position: absolute;
  bottom: -20px;
  right: -1%;
  font-family: var(--fd);
  font-size: clamp(80px, 14vw, 200px);
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  user-select: none;
}
.mcta-h {
  font-family: var(--fd);
  font-size: clamp(40px, 5.5vw, 76px);
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.mcta-s {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* NEWSLETTER */
.newsletter {
  background: #fff;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  padding: 60px 5%;
}
.newsletter-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-tag {
  font-size: 11px;
  color: var(--or);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.newsletter-h {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.newsletter-sub {
  font-size: 14px;
  color: var(--cr3);
  margin-bottom: 28px;
  line-height: 1.7;
  font-weight: 300;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.newsletter-input {
  flex: 1;
  padding: 13px 14px;
  border: 1px solid var(--bd2);
  border-radius: 6px;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--cr);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.newsletter-input::placeholder {
  color: color-mix(in srgb, var(--cr3) 70%, #fff 30%);
}
.newsletter-input:focus {
  border-color: color-mix(in srgb, var(--or) 70%, #fff 30%);
  box-shadow: 0 0 0 3px rgba(216, 90, 26, 0.14);
}
.newsletter-btn {
  padding: 13px 26px;
  background: var(--or);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: none;
  transition:
    background 0.2s,
    transform 0.15s;
  white-space: nowrap;
}
.newsletter-btn:hover {
  background: var(--or2);
  transform: translateY(-1px);
}
.newsletter-note {
  font-size: 11px;
  color: var(--cr3);
  line-height: 1.6;
}

/* TICKER */
.tick {
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  padding: 13px 0;
  overflow: hidden;
  background: var(--bg2);
}
.tick-t {
  display: flex;
  animation: tickR 30s linear infinite;
  width: max-content;
}
.tick-i {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 32px;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr3);
}
.tick-s {
  color: var(--or);
  font-size: 13px;
}
@keyframes tickR {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* PROCESS TIMELINE */
.proc-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proc-ph {
  margin-bottom: 0;
}
.proc-phase-card {
  background: linear-gradient(135deg, rgba(232, 95, 55, 0.03) 0%, rgba(200, 154, 43, 0.02) 100%);
  border: 1px solid rgba(34, 28, 23, 0.08);
  border-radius: 12px;
  padding: 40px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(10px);
}
.proc-phase-card:hover {
  border-color: rgba(216, 90, 26, 0.2);
  box-shadow: 0 12px 36px rgba(34, 28, 23, 0.08);
  transform: translateY(-2px);
}
.proc-hd {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 36px;
}
.proc-hd-content {
  flex: 1;
}
.proc-num {
  font-family: var(--fd);
  font-size: 64px;
  letter-spacing: -3px;
  color: var(--or);
  opacity: 0.15;
  line-height: 1;
  min-width: 80px;
  text-align: center;
  font-weight: 900;
}
.proc-ti {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 700;
  color: var(--cr);
  letter-spacing: -0.6px;
  margin-bottom: 6px;
}
.proc-su {
  font-size: 14px;
  color: var(--cr3);
  font-weight: 400;
  letter-spacing: 0.3px;
}
.proc-tasks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ptask {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(34, 28, 23, 0.06);
  border-radius: 10px;
  padding: 26px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(8px);
}
.ptask:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(216, 90, 26, 0.15);
  box-shadow: 0 8px 24px rgba(34, 28, 23, 0.06);
  transform: translateY(-3px);
}
.ptask-ic {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ptask-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ptask-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--cr);
  letter-spacing: -0.3px;
}
.ptask-d {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.2px;
}

@media (max-width: 1024px) {
  .proc-tasks {
    grid-template-columns: repeat(2, 1fr);
  }
  .proc-phase-card {
    padding: 32px;
  }
  .proc-num {
    font-size: 56px;
  }
}

@media (max-width: 640px) {
  .proc-tasks {
    grid-template-columns: 1fr;
  }
  .proc-hd {
    flex-direction: column;
    gap: 16px;
  }
  .proc-phase-card {
    padding: 24px;
  }
  .proc-ti {
    font-size: 24px;
  }
}

/* PRICING CARDS */
.pkg {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 40px 34px;
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.pkg:hover {
  border-color: var(--bd2);
  transform: translateY(-4px);
}
.pkg.ft {
  border-color: var(--or);
  background: linear-gradient(160deg, rgba(232, 73, 12, 0.08), var(--bg3) 60%);
}
.pkg-badge {
  display: inline-block;
  background: var(--or);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.pkg-nm {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr3);
  margin-bottom: 14px;
}
.pkg-pr {
  font-family: var(--fd);
  font-size: 62px;
  letter-spacing: -3px;
  color: var(--cr);
  line-height: 1;
  margin-bottom: 4px;
}
.pkg-pr em {
  font-size: 20px;
  vertical-align: top;
  line-height: 1.6;
  font-style: normal;
  color: var(--cr2);
}
.pkg-pd {
  font-size: 13px;
  color: var(--cr3);
  margin-bottom: 22px;
}
.pkg-desc {
  font-size: 14px;
  color: var(--cr3);
  line-height: 1.65;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--bd);
  font-weight: 300;
}
.pkg-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 30px;
}
.pkg-list li {
  font-size: 13px;
  color: var(--cr2);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 300;
}
.pkg-list li::before {
  content: "✓";
  color: var(--or);
  flex-shrink: 0;
  font-size: 12px;
}
.pkg-list li.dim {
  color: var(--cr3);
}
.pkg-list li.dim::before {
  content: "—";
  color: var(--bd2);
}

/* STATS BAR */
.sbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--bd);
}
.sbi {
  padding: 50px 5%;
  border-right: 1px solid var(--bd);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.sbi:last-child {
  border-right: none;
}
.sbi:hover {
  background: var(--bg2);
}
.sbi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.sbi:hover::after {
  transform: scaleX(1);
}
.sbi-n {
  font-family: var(--fd);
  font-size: 68px;
  letter-spacing: -2px;
  color: var(--cr);
  line-height: 1;
}
.sbi-n em {
  color: var(--or);
  font-style: normal;
}
.sbi-l {
  font-size: 12px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* BLOG */
.blog-page {
  background:
    radial-gradient(1100px 520px at 92% -12%, rgba(216, 90, 26, 0.14), transparent 60%),
    radial-gradient(920px 420px at -10% 24%, rgba(31, 106, 99, 0.1), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #faf8f4 48%, #f5f2ea 100%);
}

.blog-page .ph {
  min-height: 62vh;
  border-bottom-color: rgba(34, 28, 23, 0.14);
}

.blog-page .ph-orb {
  background: radial-gradient(circle, rgba(216, 90, 26, 0.34), rgba(216, 90, 26, 0));
}

#pg-blog .ph-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 56px;
  align-items: center;
}

#pg-blog .blog-signal {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 390px;
  margin: 0 auto;
}

#pg-blog .bs-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#pg-blog .bs-path {
  fill: none;
  stroke: rgba(216, 90, 26, 0.2);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  opacity: 0.45;
  transition:
    opacity 0.25s ease,
    stroke 0.25s ease;
}

#pg-blog .bs-path.is-active {
  opacity: 1;
  stroke: rgba(216, 90, 26, 0.48);
}

#pg-blog .bs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  z-index: 4;
}

#pg-blog .bs-core {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e46a2e 0%, #d85a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(216, 90, 26, 0.35);
  position: relative;
  z-index: 2;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

#pg-blog .bs-core.is-active {
  transform: scale(1.06);
  box-shadow: 0 10px 34px rgba(216, 90, 26, 0.46);
}

#pg-blog .bs-core-mark {
  color: #fff;
  font-family: var(--fd);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.04em;
}

#pg-blog .bs-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bsRing 3.2s ease-in-out infinite;
}

#pg-blog .bs-ring-1 {
  width: 116px;
  height: 116px;
  border: 1.5px solid rgba(216, 90, 26, 0.25);
}

#pg-blog .bs-ring-2 {
  width: 146px;
  height: 146px;
  border: 1px solid rgba(216, 90, 26, 0.14);
  animation-delay: 0.9s;
}

@keyframes bsRing {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.07);
    opacity: 0.42;
  }
}

#pg-blog .bs-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 4;
}

#pg-blog .bs-chip {
  appearance: none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cr2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

#pg-blog .bs-chip:hover,
#pg-blog .bs-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(216, 90, 26, 0.45);
  box-shadow: 0 6px 16px rgba(216, 90, 26, 0.15);
}

#pg-blog .bs-chip.is-active {
  background: rgba(216, 90, 26, 0.1);
  border-color: rgba(216, 90, 26, 0.5);
  color: #b94910;
  box-shadow: 0 7px 20px rgba(216, 90, 26, 0.2);
}

#pg-blog .bs-node-1 {
  animation: bsFloat 4.2s ease-in-out 0s infinite;
}

#pg-blog .bs-node-2 {
  animation: bsFloat 4.2s ease-in-out 0.9s infinite;
}

#pg-blog .bs-node-3 {
  animation: bsFloat 4.2s ease-in-out 1.8s infinite;
}

@keyframes bsFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-6px);
  }
}

#pg-blog .bs-badge {
  position: absolute;
  left: 50%;
  top: calc(50% + 58px);
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 40px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  z-index: 4;
}

#pg-blog .bs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: bsGreen 1.4s ease-in-out infinite;
}

@keyframes bsGreen {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

#pg-blog .bs-badge-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cr2);
  text-transform: uppercase;
}

#pg-blog .bs-note {
  position: absolute;
  top: calc(50% + 108px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  z-index: 4;
}

#pg-blog .bs-note-k {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr3);
  margin-bottom: 4px;
}

#pg-blog .bs-note-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 4px;
}

#pg-blog .bs-note-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr2);
}

.blog-main-sec {
  padding-top: 84px;
}

.blog-featured-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 44px;
}

.blog-featured-post {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff, #f6f2e9 72%);
  box-shadow: 0 26px 46px rgba(34, 28, 23, 0.08);
}

.blog-featured-visual {
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(138deg, #1a3a5c 4%, #164d52 46%, #d85a1a 100%);
}

.blog-featured-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.45;
}

.blog-featured-visual-growth {
  background: linear-gradient(138deg, #1d2f56 2%, #0f4e3b 48%, #2f7f3d 100%);
}

.blog-featured-shine {
  position: absolute;
  inset: -120% -40% auto;
  height: 180%;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.3), transparent 64%);
  transform: rotate(7deg);
  animation: blogShine 7.4s linear infinite;
}

@keyframes blogShine {
  0% {
    transform: translateX(-50%) rotate(7deg);
  }
  100% {
    transform: translateX(52%) rotate(7deg);
  }
}

.blog-featured-word {
  position: relative;
  z-index: 1;
  font-family: var(--fd);
  font-size: clamp(60px, 6vw, 94px);
  letter-spacing: 0.09em;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.16);
}

.blog-featured-content {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured-title {
  font-family: var(--fh);
  font-size: clamp(27px, 3vw, 34px);
  letter-spacing: -0.05em;
  line-height: 1.16;
  color: var(--cr);
  margin-bottom: 15px;
}

.blog-featured-excerpt {
  font-size: 15px;
  color: var(--cr2);
  line-height: 1.8;
  margin-bottom: 24px;
  max-width: 50ch;
}

.blog-featured-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--cr3);
}

.blog-featured-link {
  font-size: 13px;
  font-weight: 600;
}

.blog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.blog-c {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(245, 241, 232, 0.9));
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
  cursor: none;
}
.blog-c:hover {
  border-color: rgba(216, 90, 26, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 18px 30px rgba(34, 28, 23, 0.12);
}
.blog-th {
  height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-th-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
}

.blog-th::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.22));
}

.blog-th-seo {
  background: linear-gradient(135deg, #0f3a2a, #1a5a3a);
}

.blog-th-app {
  background: linear-gradient(135deg, #3a0f1a, #5a1a2a);
}

.blog-th-brand {
  background: linear-gradient(135deg, #1a1a3a, #2a2a5c);
}

.blog-th-web {
  background: linear-gradient(135deg, #1a3a2a, #2a5a3a);
}

.blog-th-social {
  background: linear-gradient(135deg, #2a1a3a, #3a2a5c);
}

.blog-th-email {
  background: linear-gradient(135deg, #2a2a1a, #4a3a1a);
}

.blog-k {
  position: relative;
  z-index: 1;
  font-family: var(--fd);
  font-size: clamp(48px, 5.2vw, 60px);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.1);
}

.blog-m {
  padding: 25px 24px 24px;
}
.blog-cat {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 11px;
  font-weight: 600;
}
.blog-ti {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 10px;
  line-height: 1.34;
  letter-spacing: -0.025em;
}
.blog-ex {
  font-size: 14px;
  color: var(--cr2);
  line-height: 1.78;
  font-weight: 400;
  margin-bottom: 20px;
}
.blog-ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--cr3) 84%, #fff 16%);
}
.blog-rd {
  color: var(--or);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.blog-newsletter-sec {
  text-align: center;
  background:
    radial-gradient(760px 340px at 88% 10%, rgba(216, 90, 26, 0.12), transparent 64%),
    radial-gradient(680px 320px at 10% 80%, rgba(31, 106, 99, 0.09), transparent 60%),
    var(--bg2);
}

.blog-newsletter-label {
  justify-content: center;
}

.blog-newsletter-title {
  margin-bottom: 14px;
}

.blog-newsletter-sub {
  margin: 0 auto 32px;
  max-width: 620px;
}

.blog-subscribe {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 32px;
}

.blog-subscribe-input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--bd2);
  border-radius: 6px;
  color: var(--cr);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.blog-subscribe-input::placeholder {
  color: color-mix(in srgb, var(--cr3) 76%, #fff 24%);
}

.blog-subscribe-input:focus {
  border-color: color-mix(in srgb, var(--or) 68%, #fff 32%);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 90, 26, 0.14);
}

@media (max-width: 980px) {
  #pg-blog .ph-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  #pg-blog .blog-signal {
    display: none;
  }
}

@media (max-width: 1024px) {
  .blog-featured-row {
    grid-template-columns: 1fr;
  }

  .blog-featured-content {
    padding: 32px 28px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-featured-foot {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .blog-main-sec {
    padding-top: 60px;
  }

  .blog-featured-post {
    border-radius: 11px;
    margin-bottom: 0;
  }

  .blog-featured-visual {
    min-height: 200px;
  }

  .blog-featured-content {
    padding: 24px 18px 22px;
  }

  .blog-featured-title {
    letter-spacing: -0.03em;
  }

  .blog-featured-excerpt {
    font-size: 14px;
    line-height: 1.72;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .blog-c {
    border-radius: 10px;
  }

  .blog-m {
    padding: 18px 16px;
  }

  .blog-ti {
    font-size: 17px;
  }

  .blog-subscribe {
    flex-direction: column;
    margin-bottom: 22px;
  }

  .blog-subscribe .btn {
    width: 100%;
    justify-content: center;
  }
}

/* WORK */
.wk-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.wk-c {
  border-radius: 6px;
  overflow: hidden;
  cursor: none;
  position: relative;
}
.wk-i {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}
.wk-ib {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wk-c:hover .wk-ib {
  transform: scale(1.05);
}
.wk-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 28, 23, 0.78) 0%,
    rgba(34, 28, 23, 0.2) 55%,
    transparent 100%
  );
}
.wk-cnt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}
.wk-cat {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 5px;
  font-weight: 500;
}
.wk-nm {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.wk-yr {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.76);
}
.wk-hv {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--or);
  color: #fff;
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 11px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.wk-c:hover .wk-hv {
  opacity: 1;
  transform: translateY(0);
}
.w1 {
  background: linear-gradient(135deg, #1a3a5c, #0f2238, #1c4a3a);
}
.w2 {
  background: linear-gradient(135deg, #3a1a10, #5c2a18, #8a3a20);
}
.w3 {
  background: linear-gradient(135deg, #1a2a1a, #2a4a28, #1a3a50);
}
.w4 {
  background: linear-gradient(135deg, #2a1a3a, #3a2a5c, #4a1a3a);
}
.w5 {
  background: linear-gradient(135deg, #3a3010, #5c4a18, #3a2810);
}
.w6 {
  background: linear-gradient(135deg, #1a2a3a, #0f1a2a, #2a1a1a);
}
.w7 {
  background: linear-gradient(135deg, #0f3a2a, #1a5a3a, #0f2a3a);
}
.w8 {
  background: linear-gradient(135deg, #3a0f1a, #5a1a2a, #3a1a10);
}
.w9 {
  background: linear-gradient(135deg, #1a1a3a, #2a2a5c, #1a2a3a);
}
.wk-mk {
  font-family: var(--fd);
  color: rgba(255, 255, 255, 0.07);
  letter-spacing: 2px;
  font-size: 48px;
}

/* TEAM */
.team-c {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  transition: border-color 0.3s;
}
.team-c:hover {
  border-color: var(--bd2);
}
.team-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 auto 18px;
}
.team-nm {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 3px;
}
.team-rl {
  font-size: 12px;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.team-bio {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.6;
  font-weight: 300;
}

/* TIMELINE */
.tl {
  position: relative;
  padding-left: 36px;
}
.tl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bd2);
}
.tl-i {
  position: relative;
  margin-bottom: 36px;
}
.tl-dot {
  position: absolute;
  left: -40px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--or);
  border: 2px solid var(--bg);
}
.tl-yr {
  font-family: var(--fd);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--or);
  margin-bottom: 5px;
}
.tl-t {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 5px;
}
.tl-d {
  font-size: 14px;
  color: var(--cr3);
  line-height: 1.75;
  font-weight: 400;
}

/* FOOTER */
footer {
  background: #2b241d;
  padding: 76px 5% 32px;
  border-top: 1px solid var(--bd);
}
.ft {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  padding-top: 64px;
  border-top: 1px solid var(--bd);
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.ft-brand-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fl {
  font-family: var(--fd);
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--cr);
  margin-bottom: 14px;
}
.fl em {
  color: var(--or);
  font-style: normal;
}
.fd {
  font-size: 15px;
  color: var(--cr3);
  line-height: 1.75;
  max-width: 280px;
  font-weight: 500;
  margin-bottom: 20px;
}
.fc2 {
  margin-bottom: 20px;
}
.fc2 a {
  display: block;
  font-size: 14px;
  color: var(--cr3);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 0.2s;
  font-weight: 500;
}
.fc2 a:hover {
  color: var(--or);
}
.fct {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}
.fls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fls-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  column-gap: 20px;
}
.fls a {
  font-size: 14px;
  color: var(--cr3);
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 500;
  cursor: none;
  position: relative;
  display: inline-block;
}
.fls a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.fls a:hover {
  color: var(--or);
}
.fls a:hover::after {
  transform: scaleX(1);
}
.fb2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 32px;
  border-top: 1px solid var(--bd);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
}
.fcp {
  font-size: 13px;
  color: var(--cr3);
  font-weight: 500;
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
.fcp em {
  color: var(--or);
  font-style: normal;
}
.fsoc {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.fb2 .fsoc {
  grid-column: 3;
  justify-self: end;
  margin-top: 0;
}
.fs {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cr3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.22s, border-color 0.22s, background 0.22s, transform 0.22s;
  cursor: none;
}
.fs:hover {
  transform: translateY(-3px);
}
.fs-linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #fff;
}
.fs-instagram:hover {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
  border-color: transparent;
  color: #fff;
}
.fs-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}
.fs-x:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* REVEAL */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.rv.on {
  opacity: 1;
  transform: translateY(0);
}
.rv1 {
  transition-delay: 0.1s;
}
.rv2 {
  transition-delay: 0.2s;
}
.rv3 {
  transition-delay: 0.3s;
}

/* VALUE CARDS */
.val-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.val-c {
  padding: 30px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  transition: border-color 0.3s;
}
.val-c:hover {
  border-color: var(--bd2);
}
.val-n {
  font-family: var(--fd);
  font-size: 44px;
  color: var(--or);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 10px;
}
.val-t {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 9px;
}
.val-d {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.7;
  font-weight: 300;
}

/* COMPARE TABLE */
.ctbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}
.ctbl th {
  padding: 14px 18px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr3);
  border-bottom: 1px solid var(--bd);
  font-weight: 500;
  background: var(--bg3);
}
.ctbl td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--cr3);
  border-bottom: 1px solid var(--bd);
  font-weight: 400;
}
.ctbl tr:last-child td {
  border-bottom: none;
}
.ctbl tr:hover td {
  background: var(--bg3);
  color: var(--cr2);
}
.ctbl .fn {
  color: var(--cr2);
  font-weight: 400;
}
.ctbl .ck {
  color: var(--or);
}
.ctbl .cx {
  color: var(--bd2);
}

/* CONTACT FORM */
.cf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ci {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: #fff;
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.ci::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.ci:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

/* PLATFORMS PAGE */
.platforms-page {
  background:
    radial-gradient(1200px 520px at 90% -10%, rgba(216, 90, 26, 0.08), transparent 60%),
    radial-gradient(900px 420px at -10% 25%, rgba(31, 106, 99, 0.08), transparent 55%),
    var(--bg);
}
.platforms-page .ph {
  min-height: 58vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0)),
    transparent;
}
.platforms-page .ph-sub {
  max-width: 780px;
  font-size: 16px;
}

/* WORDPRESS DETAIL PAGE */
.wordpress-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(33, 117, 155, 0.12), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(232, 73, 12, 0.1), transparent 56%),
    var(--bg);
}
.wordpress-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.wordpress-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(33, 117, 155, 0.18), rgba(33, 117, 155, 0));
}
.wordpress-page .ph-sub {
  max-width: 920px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.wordpress-page .ph-tag {
  color: #1a6c91;
}
.wordpress-page .ph-tag::before {
  background: #1a6c91;
}
.wp-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wp-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wp-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.wp-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.wordpress-page .wp-position,
.wordpress-page .wp-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.wordpress-page .wp-position .ssub {
  border-left: 3px solid rgba(26, 108, 145, 0.58);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.wordpress-page .wp-expertise .plat-grid {
  margin-top: 24px;
}
.wordpress-page .wp-expertise .plat-card {
  border-radius: 16px;
}
.wordpress-page .wp-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
}
.wordpress-page .wp-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.wordpress-page .wp-fit .fc:hover {
  border-color: rgba(232, 73, 12, 0.44);
}
.wordpress-page .wp-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.wordpress-page .wp-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.wordpress-page .wp-process .tl-i:last-child {
  border-bottom: none;
}
.wordpress-page .wp-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.wordpress-page .mcta {
  margin-top: 20px;
}

/* SHOPIFY DETAIL PAGE */
.shopify-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(108, 178, 82, 0.14), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(23, 124, 85, 0.1), transparent 56%),
    var(--bg);
}
.shopify-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.shopify-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(84, 162, 76, 0.2), rgba(84, 162, 76, 0));
}
.shopify-page .ph-sub {
  max-width: 920px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.shopify-page .ph-tag {
  color: #2a7f3d;
}
.shopify-page .ph-tag::before {
  background: #2a7f3d;
}
.sp-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sp-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.sp-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.shopify-page .sp-position,
.shopify-page .sp-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.shopify-page .sp-position .ssub {
  border-left: 3px solid rgba(45, 124, 67, 0.52);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.shopify-page .sp-expertise .plat-grid {
  margin-top: 24px;
}
.shopify-page .sp-expertise .plat-card {
  border-radius: 16px;
}
.shopify-page .sp-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(45, 124, 67, 0.32);
}
.shopify-page .sp-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.shopify-page .sp-fit .fc:hover {
  border-color: rgba(76, 152, 85, 0.5);
}
.shopify-page .sp-process .tl {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 24px;
  padding-left: 28px;
}
.shopify-page .sp-process .tl::before {
  left: 10px;
  background: linear-gradient(to bottom, rgba(45, 124, 67, 0.48), rgba(45, 124, 67, 0.1));
}
.shopify-page .sp-process .tl-i {
  margin-bottom: 12px;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.74));
  box-shadow: 0 8px 18px rgba(34, 28, 23, 0.05);
}
.shopify-page .sp-process .tl-i:last-child {
  margin-bottom: 0;
}
.shopify-page .sp-process .tl-dot {
  left: -22px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-width: 2px;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 124, 67, 0.12);
}
.shopify-page .sp-process .tl-t {
  font-family: var(--fh);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--cr);
  margin-bottom: 6px;
}
.shopify-page .sp-process .tl-d {
  color: rgba(34, 28, 23, 0.76);
  line-height: 1.65;
}
.shopify-page .mcta {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .shopify-page .sp-process .tl {
    margin-top: 18px;
    padding-left: 0;
  }

  .shopify-page .sp-process .tl::before {
    display: none;
  }

  .shopify-page .sp-process .tl-i {
    padding: 14px 14px 14px 36px !important;
  }

  .shopify-page .sp-process .tl-dot {
    left: 13px;
    top: 18px;
  }
}

@media (max-width: 560px) {
  .shopify-page .sp-process .tl-i {
    padding: 12px 12px 12px 32px !important;
    border-radius: 10px;
  }

  .shopify-page .sp-process .tl-t {
    font-size: 15px;
  }

  .shopify-page .sp-process .tl-d {
    font-size: 13px;
    line-height: 1.58;
  }

  .shopify-page .sp-process .tl-dot {
    left: 11px;
    top: 15px;
    width: 9px;
    height: 9px;
  }
}

/* WOOCOMMERCE DETAIL PAGE */
.woocommerce-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(150, 88, 138, 0.16), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(89, 67, 149, 0.1), transparent 56%),
    var(--bg);
}
.woocommerce-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.woocommerce-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(122, 81, 178, 0.22), rgba(122, 81, 178, 0));
}
.woocommerce-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.woocommerce-page .ph-tag {
  color: #7c4ea1;
}
.woocommerce-page .ph-tag::before {
  background: #7c4ea1;
}
.wc-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wc-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wc-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.wc-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.woocommerce-page .wc-position,
.woocommerce-page .wc-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.woocommerce-page .wc-position .ssub {
  border-left: 3px solid rgba(124, 78, 161, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.woocommerce-page .wc-expertise .plat-grid {
  margin-top: 24px;
}
.woocommerce-page .wc-expertise .plat-card {
  border-radius: 16px;
}
.woocommerce-page .wc-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(124, 78, 161, 0.34);
}
.woocommerce-page .wc-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.woocommerce-page .wc-fit .fc:hover {
  border-color: rgba(124, 78, 161, 0.5);
}
.woocommerce-page .wc-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.woocommerce-page .wc-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.woocommerce-page .wc-process .tl-i:last-child {
  border-bottom: none;
}
.woocommerce-page .wc-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.woocommerce-page .mcta {
  margin-top: 20px;
}

/* WEBFLOW DETAIL PAGE */
.webflow-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(45, 91, 255, 0.16), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(13, 57, 223, 0.1), transparent 56%),
    var(--bg);
}
.webflow-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.webflow-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 91, 255, 0.22), rgba(45, 91, 255, 0));
}
.webflow-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.webflow-page .ph-tag {
  color: #295cf4;
}
.webflow-page .ph-tag::before {
  background: #295cf4;
}
.wf-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wf-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.wf-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.webflow-page .wf-position,
.webflow-page .wf-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.webflow-page .wf-position .ssub {
  border-left: 3px solid rgba(41, 92, 244, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.webflow-page .wf-expertise .plat-grid {
  margin-top: 24px;
}
.webflow-page .wf-expertise .plat-card {
  border-radius: 16px;
}
.webflow-page .wf-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(41, 92, 244, 0.34);
}
.webflow-page .wf-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.webflow-page .wf-fit .fc:hover {
  border-color: rgba(41, 92, 244, 0.5);
}
.webflow-page .wf-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.webflow-page .wf-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.webflow-page .wf-process .tl-i:last-child {
  border-bottom: none;
}
.webflow-page .wf-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.webflow-page .mcta {
  margin-top: 20px;
}

/* REACT NATIVE DETAIL PAGE */
.react-native-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(33, 212, 253, 0.16), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(31, 140, 255, 0.1), transparent 56%),
    var(--bg);
}
.react-native-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.react-native-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(31, 140, 255, 0.22), rgba(31, 140, 255, 0));
}
.react-native-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.react-native-page .ph-tag {
  color: #1f88d8;
}
.react-native-page .ph-tag::before {
  background: #1f88d8;
}
.rn-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.rn-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rn-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.rn-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.react-native-page .rn-position,
.react-native-page .rn-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.react-native-page .rn-position .ssub {
  border-left: 3px solid rgba(31, 136, 216, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.react-native-page .rn-expertise .plat-grid {
  margin-top: 24px;
}
.react-native-page .rn-expertise .plat-card {
  border-radius: 16px;
}
.react-native-page .rn-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(31, 136, 216, 0.34);
}
.react-native-page .rn-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.react-native-page .rn-fit .fc:hover {
  border-color: rgba(31, 136, 216, 0.5);
}
.react-native-page .rn-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.react-native-page .rn-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.react-native-page .rn-process .tl-i:last-child {
  border-bottom: none;
}
.react-native-page .rn-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.react-native-page .mcta {
  margin-top: 20px;
}

/* FLUTTER DETAIL PAGE */
.flutter-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(69, 196, 255, 0.17), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(31, 114, 255, 0.12), transparent 56%),
    var(--bg);
}
.flutter-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.flutter-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(31, 114, 255, 0.24), rgba(31, 114, 255, 0));
}
.flutter-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.flutter-page .ph-tag {
  color: #2f7be6;
}
.flutter-page .ph-tag::before {
  background: #2f7be6;
}
.fl-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fl-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fl-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.fl-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.flutter-page .fl-position,
.flutter-page .fl-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.flutter-page .fl-position .ssub {
  border-left: 3px solid rgba(47, 123, 230, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.flutter-page .fl-expertise .plat-grid {
  margin-top: 24px;
}
.flutter-page .fl-expertise .plat-card {
  border-radius: 16px;
}
.flutter-page .fl-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(47, 123, 230, 0.34);
}
.flutter-page .fl-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.flutter-page .fl-fit .fc:hover {
  border-color: rgba(47, 123, 230, 0.5);
}
.flutter-page .fl-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.flutter-page .fl-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.flutter-page .fl-process .tl-i:last-child {
  border-bottom: none;
}
.flutter-page .fl-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.flutter-page .mcta {
  margin-top: 20px;
}

/* SWIFT DETAIL PAGE */
.swift-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(255, 123, 58, 0.18), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(235, 79, 0, 0.12), transparent 56%),
    var(--bg);
}
.swift-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.swift-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(235, 79, 0, 0.24), rgba(235, 79, 0, 0));
}
.swift-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.swift-page .ph-tag {
  color: #d85c1f;
}
.swift-page .ph-tag::before {
  background: #d85c1f;
}
.sw-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sw-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sw-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.sw-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.swift-page .sw-position,
.swift-page .sw-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.swift-page .sw-position .ssub {
  border-left: 3px solid rgba(216, 92, 31, 0.52);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.swift-page .sw-expertise .plat-grid {
  margin-top: 24px;
}
.swift-page .sw-expertise .plat-card {
  border-radius: 16px;
}
.swift-page .sw-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(216, 92, 31, 0.34);
}
.swift-page .sw-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.swift-page .sw-fit .fc:hover {
  border-color: rgba(216, 92, 31, 0.5);
}
.swift-page .sw-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.swift-page .sw-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.swift-page .sw-process .tl-i:last-child {
  border-bottom: none;
}
.swift-page .sw-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.swift-page .mcta {
  margin-top: 20px;
}

/* KOTLIN DETAIL PAGE */
.kotlin-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(127, 82, 255, 0.19), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(240, 109, 212, 0.12), transparent 56%),
    var(--bg);
}
.kotlin-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.kotlin-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(127, 82, 255, 0.25), rgba(127, 82, 255, 0));
}
.kotlin-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.kotlin-page .ph-tag {
  color: #7b52d8;
}
.kotlin-page .ph-tag::before {
  background: #7b52d8;
}
.kt-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.kt-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kt-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.kt-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.kotlin-page .kt-position,
.kotlin-page .kt-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.kotlin-page .kt-position .ssub {
  border-left: 3px solid rgba(123, 82, 216, 0.52);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.kotlin-page .kt-expertise .plat-grid {
  margin-top: 24px;
}
.kotlin-page .kt-expertise .plat-card {
  border-radius: 16px;
}
.kotlin-page .kt-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(123, 82, 216, 0.34);
}
.kotlin-page .kt-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.kotlin-page .kt-fit .fc:hover {
  border-color: rgba(123, 82, 216, 0.5);
}
.kotlin-page .kt-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.kotlin-page .kt-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.kotlin-page .kt-process .tl-i:last-child {
  border-bottom: none;
}
.kotlin-page .kt-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.kotlin-page .mcta {
  margin-top: 20px;
}

/* FIGMA DETAIL PAGE */
.figma-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(162, 89, 255, 0.2), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(242, 78, 30, 0.12), transparent 56%),
    var(--bg);
}
.figma-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.figma-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(162, 89, 255, 0.24), rgba(162, 89, 255, 0));
}
.figma-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.figma-page .ph-tag {
  color: #a259ff;
}
.figma-page .ph-tag::before {
  background: #a259ff;
}
.fg-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fg-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fg-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.fg-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.figma-page .fg-position,
.figma-page .fg-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.figma-page .fg-position .ssub {
  border-left: 3px solid rgba(162, 89, 255, 0.52);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.figma-page .fg-expertise .plat-grid {
  margin-top: 24px;
}
.figma-page .fg-expertise .plat-card {
  border-radius: 16px;
}
.figma-page .fg-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(162, 89, 255, 0.34);
}
.figma-page .fg-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.figma-page .fg-fit .fc:hover {
  border-color: rgba(162, 89, 255, 0.5);
}
.figma-page .fg-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.figma-page .fg-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.figma-page .fg-process .tl-i:last-child {
  border-bottom: none;
}
.figma-page .fg-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.figma-page .mcta {
  margin-top: 20px;
}

/* META ADS DETAIL PAGE */
.meta-ads-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(24, 119, 242, 0.2), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(9, 88, 201, 0.12), transparent 56%),
    var(--bg);
}
.meta-ads-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.meta-ads-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(24, 119, 242, 0.24), rgba(24, 119, 242, 0));
}
.meta-ads-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.meta-ads-page .ph-tag {
  color: #1768d6;
}
.meta-ads-page .ph-tag::before {
  background: #1768d6;
}
.mt-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mt-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.mt-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.meta-ads-page .mt-position,
.meta-ads-page .mt-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.meta-ads-page .mt-position .ssub {
  border-left: 3px solid rgba(23, 104, 214, 0.52);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.meta-ads-page .mt-expertise .plat-grid {
  margin-top: 24px;
}
.meta-ads-page .mt-expertise .plat-card {
  border-radius: 16px;
}
.meta-ads-page .mt-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(23, 104, 214, 0.34);
}
.meta-ads-page .mt-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.meta-ads-page .mt-fit .fc:hover {
  border-color: rgba(23, 104, 214, 0.5);
}
.meta-ads-page .mt-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.meta-ads-page .mt-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.meta-ads-page .mt-process .tl-i:last-child {
  border-bottom: none;
}
.meta-ads-page .mt-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.meta-ads-page .mcta {
  margin-top: 20px;
}

/* GOOGLE ADS DETAIL PAGE */
.google-ads-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(52, 168, 83, 0.18), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(66, 133, 244, 0.13), transparent 56%),
    var(--bg);
}
.google-ads-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.google-ads-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(52, 168, 83, 0.22), rgba(52, 168, 83, 0));
}
.google-ads-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.google-ads-page .ph-tag {
  color: #1f8f4e;
}
.google-ads-page .ph-tag::before {
  background: #1f8f4e;
}
.ga-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ga-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ga-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.ga-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.google-ads-page .ga-position,
.google-ads-page .ga-fit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.google-ads-page .ga-position .ssub {
  border-left: 3px solid rgba(52, 168, 83, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.google-ads-page .ga-expertise .plat-grid {
  margin-top: 24px;
}
.google-ads-page .ga-expertise .plat-card {
  border-radius: 16px;
}
.google-ads-page .ga-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(52, 168, 83, 0.34);
}
.google-ads-page .ga-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.google-ads-page .ga-fit .fc:hover {
  border-color: rgba(52, 168, 83, 0.48);
}
.google-ads-page .ga-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.google-ads-page .ga-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.google-ads-page .ga-process .tl-i:last-child {
  border-bottom: none;
}
.google-ads-page .ga-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.google-ads-page .mcta {
  margin-top: 20px;
}

/* MAILCHIMP / KLAVIYO DETAIL PAGE */
.mailchimp-klaviyo-page {
  background:
    radial-gradient(1000px 460px at 86% -8%, rgba(245, 185, 66, 0.2), transparent 62%),
    radial-gradient(860px 440px at -8% 26%, rgba(17, 24, 39, 0.1), transparent 56%),
    var(--bg);
}
.mailchimp-klaviyo-page .ph {
  min-height: 64vh;
  border-bottom-color: rgba(34, 28, 23, 0.12);
}
.mailchimp-klaviyo-page .ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(245, 185, 66, 0.23), rgba(245, 185, 66, 0));
}
.mailchimp-klaviyo-page .ph-sub {
  max-width: 940px;
  color: rgba(34, 28, 23, 0.82);
  font-size: 17px;
}
.mailchimp-klaviyo-page .ph-tag {
  color: #b67300;
}
.mailchimp-klaviyo-page .ph-tag::before {
  background: #b67300;
}
.mk-proof {
  margin-top: 26px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mk-proof-item {
  border: 1px solid rgba(34, 28, 23, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-proof-item strong {
  font-family: var(--fh);
  font-size: 22px;
  line-height: 1;
  color: var(--cr);
}
.mk-proof-item span {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mailchimp-klaviyo-page .mk-position,
.mailchimp-klaviyo-page .mk-expertise {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18));
}
.mailchimp-klaviyo-page .mk-position .ssub {
  border-left: 3px solid rgba(182, 115, 0, 0.5);
  padding-left: 16px;
  color: rgba(34, 28, 23, 0.78);
}
.mailchimp-klaviyo-page .mk-expertise .plat-grid {
  margin-top: 24px;
}
.mailchimp-klaviyo-page .mk-expertise .plat-card {
  border-radius: 16px;
}
.mailchimp-klaviyo-page .mk-expertise .plat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 44px rgba(34, 28, 23, 0.12),
    0 6px 16px rgba(34, 28, 23, 0.06);
  border-color: rgba(182, 115, 0, 0.36);
}
.mailchimp-klaviyo-page .mk-platforms .fc,
.mailchimp-klaviyo-page .mk-fit .fc {
  border-radius: 12px;
  border-color: rgba(34, 28, 23, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
}
.mailchimp-klaviyo-page .mk-platforms .fc:hover,
.mailchimp-klaviyo-page .mk-fit .fc:hover {
  border-color: rgba(182, 115, 0, 0.48);
}
.mailchimp-klaviyo-page .mk-process .tl {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 14px;
  padding: 12px 16px;
}
.mailchimp-klaviyo-page .mk-process .tl-i {
  border-bottom: 1px dashed rgba(34, 28, 23, 0.12);
  padding: 16px 4px;
}
.mailchimp-klaviyo-page .mk-process .tl-i:last-child {
  border-bottom: none;
}
.mailchimp-klaviyo-page .mk-process .tl-t {
  font-family: var(--fh);
  letter-spacing: -0.02em;
  color: var(--cr);
}
.mailchimp-klaviyo-page .mcta {
  margin-top: 20px;
}

/* UNIFIED PLATFORM PROCESS TIMELINE */
.wordpress-page {
  --plat-tl-accent: 33, 117, 155;
}
.shopify-page {
  --plat-tl-accent: 45, 124, 67;
}
.woocommerce-page {
  --plat-tl-accent: 122, 81, 178;
}
.webflow-page {
  --plat-tl-accent: 45, 91, 255;
}
.react-native-page {
  --plat-tl-accent: 33, 212, 253;
}
.flutter-page {
  --plat-tl-accent: 43, 116, 255;
}
.swift-page {
  --plat-tl-accent: 235, 79, 0;
}
.kotlin-page {
  --plat-tl-accent: 127, 82, 255;
}
.figma-page {
  --plat-tl-accent: 162, 89, 255;
}
.meta-ads-page {
  --plat-tl-accent: 24, 119, 242;
}
.google-ads-page {
  --plat-tl-accent: 52, 168, 83;
}
.mailchimp-klaviyo-page {
  --plat-tl-accent: 182, 115, 0;
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 24px;
  padding-left: 28px;
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl::before {
  left: 10px;
  background: linear-gradient(
    to bottom,
    rgba(var(--plat-tl-accent, 216, 90, 26), 0.48),
    rgba(var(--plat-tl-accent, 216, 90, 26), 0.1)
  );
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-i {
  margin-bottom: 12px;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(34, 28, 23, 0.11);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.74));
  box-shadow: 0 8px 18px rgba(34, 28, 23, 0.05);
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-i:last-child {
  margin-bottom: 0;
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-dot {
  left: -22px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-width: 2px;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--plat-tl-accent, 216, 90, 26), 0.12);
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-t {
  font-family: var(--fh);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--cr);
  margin-bottom: 6px;
}

.platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-d {
  color: rgba(34, 28, 23, 0.76);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl {
    margin-top: 18px;
    padding-left: 0;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl::before {
    display: none;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-i {
    padding: 14px 14px 14px 36px !important;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-dot {
    left: 13px;
    top: 18px;
  }
}

@media (max-width: 560px) {
  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-i {
    padding: 12px 12px 12px 32px !important;
    border-radius: 10px;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-t {
    font-size: 15px;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-d {
    font-size: 13px;
    line-height: 1.58;
  }

  .platforms-page :is(.wp-process, .sp-process, .wc-process, .wf-process, .rn-process, .fl-process, .sw-process, .kt-process, .fg-process, .mt-process, .ga-process, .mk-process) .tl-dot {
    left: 11px;
    top: 15px;
    width: 9px;
    height: 9px;
  }
}

.plat-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
}
.plat-kpi {
  border: 1px solid rgba(34, 28, 23, 0.12);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plat-kpi strong {
  font-family: var(--fh);
  font-size: 18px;
  color: var(--cr);
  line-height: 1.1;
}
.plat-kpi span {
  font-size: 12px;
  color: var(--cr3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.platforms-page .sec,
.platforms-page .sec2 {
  position: relative;
}
.platforms-page .sec2 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.12));
}
.plat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.plat-readmore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 9px 20px;
  background: transparent;
  border: 1.5px solid var(--or);
  border-radius: 40px;
  color: var(--or);
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .22s ease, color .22s ease, transform .2s ease, box-shadow .2s ease;
}
.plat-readmore span {
  display: inline-block;
  transition: transform .2s ease;
}
.plat-readmore:hover {
  background: var(--or);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(208, 100, 30, .28);
}
.plat-readmore:hover span {
  transform: translateX(4px);
}
.plat-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(34, 28, 23, 0.1);
  border-radius: 14px;
  padding: 24px;
  box-shadow:
    0 16px 30px rgba(34, 28, 23, 0.05),
    0 2px 10px rgba(34, 28, 23, 0.03);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}
.plat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, rgba(216, 90, 26, 0.9), rgba(200, 154, 43, 0.86), rgba(31, 106, 99, 0.86));
  opacity: 0.84;
}
.plat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.plat-logo {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(34, 28, 23, 0.2);
}
.plat-logo svg {
  width: 31px;
  height: 31px;
  display: block;
}
.plat-name {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--cr);
}
.plat-desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.75;
  margin-bottom: 14px;
}
.plat-sub {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr3);
  margin-bottom: 8px;
  font-weight: 600;
}
.plat-list {
  list-style: none;
  margin-left: 0;
  margin-bottom: 12px;
}
.plat-list li {
  position: relative;
  padding-left: 18px;
    font-size: 14px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.7;
  margin-bottom: 5px;
}
.plat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or), var(--yw));
}
.plat-best {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed rgba(34, 28, 23, 0.18);
  border-radius: 8px;
  background: rgba(239, 230, 216, 0.42);
  font-size: 13px;
  line-height: 1.7;
  color: var(--cr3);
  font-weight: 500;
}

.platforms-page .rv {
  animation: platRise 0.6s ease both;
}

@keyframes platRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lg-wp { background: linear-gradient(145deg, #21759b, #135e83); }
.lg-shop { background: linear-gradient(145deg, #96bf48, #5e8e3e); }
.lg-woo { background: linear-gradient(145deg, #96588a, #7f4a73); }
.lg-webflow { background: linear-gradient(145deg, #2d5bff, #0b39df); }
.lg-rn { background: linear-gradient(145deg, #21d4fd, #1f8cff); }
.lg-flutter { background: linear-gradient(145deg, #45c4ff, #1f72ff); }
.lg-swift { background: linear-gradient(145deg, #ff7b3a, #eb4f00); }
.lg-kotlin { background: linear-gradient(145deg, #7f52ff, #f06dd4); }
.lg-figma { background: linear-gradient(145deg, #f24e1e, #a259ff); }
.lg-adobe { background: linear-gradient(145deg, #ff3333, #c90000); }
.lg-ga { background: linear-gradient(145deg, #f6a400, #d67500); }
.lg-gads { background: linear-gradient(145deg, #34a853, #2c7f44); }
.lg-meta { background: linear-gradient(145deg, #1877f2, #0958c9); }
.lg-mailchimp { background: linear-gradient(145deg, #f5b942, #d98d00); }
.lg-klaviyo { background: linear-gradient(145deg, #0f172a, #111827); }
.lg-gsc { background: linear-gradient(145deg, #4285f4, #2d5fc8); }
.lg-notion { background: linear-gradient(145deg, #191919, #000); }
.lg-linear { background: linear-gradient(145deg, #5e6ad2, #3e4fb4); }
.lg-slack { background: linear-gradient(145deg, #4a154b, #350f35); }
.lg-zoom { background: linear-gradient(145deg, #2d8cff, #1768d6); }

/* FILTER */
.fbtn {
  padding: 7px 18px;
  border: 1px solid var(--bd2);
  border-radius: 100px;
  background: transparent;
  color: var(--cr3);
  font-size: 12px;
  cursor: none;
  transition: all 0.2s;
  letter-spacing: 0.04em;
}
.fbtn:hover,
.fbtn.on {
  background: var(--or);
  border-color: var(--or);
  color: #fff;
}

/* MOBILE STICKY */
.mob-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: var(--bg2);
  border-top: 1px solid var(--bd);
  padding: 12px 5%;
  gap: 0;
}

@media (max-width: 1100px) {
  nav {
    height: 78px;
    padding-left: 3.5%;
    padding-right: 3.5%;
  }

  .nlogo {
    font-size: 26px;
    letter-spacing: 2.4px;
  }

  .nlinks,
  .nbtn {
    display: none;
  }

  .mnav-toggle {
    display: inline-flex;
  }

  .g3,
  .g4,
  .val-g,
  .proc-tasks {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .wk-g {
    grid-template-columns: repeat(2, 1fr);
  }
  .sbar {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .who-pro {
    grid-template-columns: 1fr;
  }

  .drive-pro-grid {
    grid-template-columns: 1fr;
  }

  .commit-pro-grid {
    grid-template-columns: 1fr;
  }

  .why-pro-layout {
    grid-template-columns: 1fr;
  }

  .team-process-pro {
    grid-template-columns: 1fr;
  }

  .plat-grid {
    grid-template-columns: 1fr;
  }

  .wp-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .sp-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .wc-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .wf-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .rn-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .fl-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .sw-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .kt-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .fg-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .mt-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .ga-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .mk-proof {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .plat-kpis {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}
@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .nlinks,
  .nbtn {
    display: none;
  }

  .mnav-toggle {
    display: inline-flex;
    position: relative;
  }

  body.mnav-open {
    overflow: hidden;
  }
  .g3,
  .g4,
  .g2,
  .val-g,
  .proc-tasks,
  .res-grid,
  .home-results-grid,
  .wk-g,
  .who-grid,
  .service-grid,
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .ph-h {
    font-size: clamp(48px, 13vw, 80px);
  }
  .sbar {
    grid-template-columns: 1fr 1fr;
  }
  .ft {
    grid-template-columns: 1fr;
  }
  .mob-bar {
    display: flex;
    justify-content: space-around;
  }
  body {
    cursor: auto;
  }
  .cur,
  .cur-r {
    display: none;
  }

  .who-pro-main,
  .who-pro-side {
    padding: 24px 20px;
  }

  .drive-pro {
    padding: 24px 20px;
  }

  .commit-pro {
    padding: 24px 20px;
  }

  .why-pro {
    padding: 24px 20px;
  }

  .team-process-pro {
    padding: 12px;
  }

  .team-pro-panel,
  .process-pro-panel {
    padding: 22px 18px;
  }

  .drive-card {
    padding: 20px;
  }

  .commit-item {
    padding: 18px;
  }

  .drive-title {
    font-size: 22px;
  }

  .why-key-title {
    font-size: 24px;
  }

  .who-pro-item {
    grid-template-columns: 38px 1fr;
    padding: 12px;
  }

  .why-stack-item {
    padding: 12px;
  }
}

/* GLOBAL RESPONSIVE HARDENING */
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .mob-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .sec,
  .sec2,
  .mcta,
  .newsletter,
  footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ph,
  .home-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ph,
  .home-hero,
  .platforms-page .ph,
  .wordpress-page .ph {
    min-height: auto;
    padding-top: 104px;
    padding-bottom: 48px;
  }

  .home-hero-title-line-offset {
    padding-left: 0;
  }

  .home-hero-bottom,
  .section-head,
  .drive-pro-head,
  .commit-pro-head,
  .why-pro-head,
  .blog-ft,
  .fb2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .proc-track {
    grid-template-columns: 1fr;
  }
  .proc-step {
    border-right: none;
    border-bottom: 1px solid var(--bd);
    padding: 24px 20px;
  }
  .proc-step:last-child {
    border-bottom: none;
  }
  .proc-connector {
    display: none;
  }

  .faq-q,
  .faq-a {
    padding-left: 18px;
    padding-right: 18px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-btn {
    width: 100%;
    justify-content: center;
  }

  .ctbl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .ctbl th,
  .ctbl td {
    min-width: 160px;
  }

  .proc-phase-card,
  .pkg,
  .fc,
  .res-item,
  .contact-form-wrap,
  .contact-card,
  .team-c,
  .val-c {
    padding: 20px;
  }

  .sbi {
    padding: 30px 20px;
  }

  .sbi-n,
  .pkg-pr,
  .res-n,
  .ph-sn {
    font-size: clamp(34px, 10vw, 52px);
    letter-spacing: -1px;
  }

  .platforms-page .tl {
    padding-left: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .platforms-page .tl::before {
    display: none;
  }

  .platforms-page .tl-i {
    margin-bottom: 12px;
    padding: 14px 14px 14px 38px !important;
    border: 1px solid var(--bd) !important;
    border-radius: 12px;
    background: #fff;
  }

  .platforms-page .tl-i:last-child {
    margin-bottom: 0;
  }

  .platforms-page .tl-dot {
    left: 14px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-width: 2px;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(216, 90, 26, 0.12);
  }

  .platforms-page .tl-t {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .platforms-page .tl-d {
    font-size: 13px;
    line-height: 1.62;
  }
}

@media (max-width: 560px) {
  nav {
    height: 72px;
  }

  .nlogo {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .btn,
  .btn-o,
  .btn-g {
    width: 100%;
    justify-content: center;
  }

  .ph-acts,
  .home-hero-actions {
    width: 100%;
  }

  .ph-sub,
  .home-hero-copy-main,
  .home-hero-copy-note,
  .ssub {
    font-size: 15px;
    line-height: 1.65;
  }

  .platforms-page .tl-i {
    padding: 12px 12px 12px 34px !important;
    border-radius: 10px;
  }

  .platforms-page .tl-dot {
    left: 12px;
    top: 16px;
    width: 9px;
    height: 9px;
  }

  .sh,
  .mcta-h,
  .newsletter-h,
  .drive-title,
  .process-pro-title,
  .why-key-title,
  .contact-card-v {
    line-height: 1.12;
  }

  .who-panel,
  .who-pro-main,
  .who-pro-side,
  .drive-pro,
  .commit-pro,
  .why-pro,
  .team-pro-panel,
  .process-pro-panel {
    padding: 18px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  nav,
  .n {
    height: 82px;
  }

  .sec,
  .sec2,
  .mcta,
  .newsletter,
  footer,
  .ph,
  .home-hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .ph,
  .home-hero,
  .platforms-page .ph,
  .wordpress-page .ph {
    min-height: auto;
    padding-top: 118px;
    padding-bottom: 58px;
  }

  .ph-h {
    font-size: clamp(56px, 8vw, 90px);
    line-height: 0.96;
  }

  .sh,
  .mcta-h,
  .newsletter-h {
    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.04;
  }

  .ssub,
  .ph-sub,
  .home-hero-copy-main,
  .home-hero-copy-note {
    max-width: 68ch;
  }

  .split {
    gap: 36px;
  }

  .g2,
  .g3,
  .g4,
  .wk-g,
  .who-grid,
  .service-grid,
  .val-g,
  .proc-tasks,
  .res-grid,
  .sbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ft {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .proc-step {
    padding: 20px;
  }

  .contact-layout {
    gap: 20px;
  }

  .contact-form-wrap,
  .contact-card,
  .contact-hours-wrap,
  .proc-phase-card,
  .pkg,
  .fc,
  .res-item,
  .team-c,
  .val-c {
    padding: 22px;
  }

  .platforms-page .tl-i {
    padding: 18px 18px 18px 44px;
  }

  .platforms-page .tl-dot {
    left: 16px;
    top: 21px;
  }
}

@media (max-width: 768px) {
  /* Override recurring inline grid/flex patterns used across page templates. */
  [style*="grid-template-columns:2.5fr 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 36px !important;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  [style*="display:flex"][style*="max-width:420px"] {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  footer > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 36px !important;
  }

  footer > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  footer > div:first-child > div:nth-child(2) > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* CONTACT FINAL MOBILE FIT FIX */
@media (max-width: 768px) {
  #pg-contact .sec,
  #pg-contact .sec2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #pg-contact .contact-layout,
  #pg-contact .contact-layout > div,
  #pg-contact .contact-layout > aside {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  #pg-contact .contact-form-wrap {
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 10px;
  }

  #pg-contact .contact-form-wrap .sh {
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1.16;
    letter-spacing: -0.6px;
    overflow-wrap: anywhere;
  }

  #pg-contact .contact-card-v {
    font-size: clamp(17px, 5vw, 19px);
    overflow-wrap: anywhere;
  }

  #pg-contact .contact-field,
  #pg-contact .contact-area,
  #pg-contact .contact-select {
    max-width: 100%;
    width: 100%;
    font-size: 16px;
    line-height: 1.35;
  }

  #pg-contact .contact-form .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  #pg-contact .contact-hours-wrap {
    padding: 10px !important;
  }
}

@media (max-width: 420px) {
  #pg-contact .contact-form-wrap {
    padding: 14px !important;
  }

  #pg-contact .contact-form-wrap .sh {
    font-size: 23px !important;
  }

  #pg-contact .contact-form {
    gap: 9px;
  }
}

/* ============================================================
   SINGLE BLOG POST PAGE
   ============================================================ */

.post-page {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f4 60%, #f5f2ea 100%);
}

/* ── HERO ─────────────────────────────────────────────────── */
.post-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bd);
}

/* Top visual band */
.post-hero-visual {
  position: relative;
  height: 300px;
  padding-top: 80px; /* offset fixed nav */
  background: linear-gradient(138deg, #0e2236 0%, #1b3a52 32%, #2b1610 66%, #d85a1a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
}

.post-hero-visual-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.post-hero-visual-orb1 {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -80px;
  background: radial-gradient(circle, rgba(216, 90, 26, 0.32), transparent 68%);
  filter: blur(30px);
}

.post-hero-visual-orb2 {
  width: 360px;
  height: 360px;
  bottom: -120px;
  right: 8%;
  background: radial-gradient(circle, rgba(26, 58, 92, 0.6), transparent 70%);
  filter: blur(24px);
}

/* Subtle dot-grid overlay */
.post-hero-visual-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.post-hero-visual-word {
  position: relative;
  z-index: 1;
  font-family: var(--fd);
  font-size: clamp(130px, 18vw, 260px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  user-select: none;
  pointer-events: none;
  padding-right: 5%;
}

.post-hero-visual-no {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 24px;
  font-family: var(--fd);
  font-size: 96px;
  letter-spacing: -4px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  user-select: none;
}

/* Content area below visual */
.post-hero-body {
  padding: 44px 5% 52px;
  max-width: 1180px;
  margin: 0 auto;
}

.post-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.post-bc-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--cr3);
  text-decoration: none;
  transition: color 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-bc-link:hover {
  color: var(--or);
}

.post-bc-dot {
  display: none;
}

.post-bc-sep {
  font-size: 12px;
  color: var(--cr3);
  flex-shrink: 0;
  user-select: none;
}

.post-bc-cur {
  font-size: 12px;
  font-weight: 500;
  color: var(--cr2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.post-bc-arrow {
  display: none;
}

.post-hero-top-div {
  display: none;
}

.post-hero-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.post-breadcrumb-link,
.post-breadcrumb-home,
.post-breadcrumb-sep,
.post-breadcrumb-cur {
  display: none;
}

.post-hero-top-div {
  display: none;
}

.post-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-hero-badge-cat {
  background: rgba(216, 90, 26, 0.1);
  color: var(--or);
  border: 1px solid rgba(216, 90, 26, 0.24);
}

.post-hero-badge-feat {
  background: var(--or);
  color: #fff;
}

.post-hero-badge-time {
  background: var(--bg2);
  color: var(--cr3);
  border: 1px solid var(--bd);
}

.post-title {
  font-family: var(--fd);
  font-size: clamp(54px, 7.5vw, 108px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -1px;
  color: var(--cr);
  margin-bottom: 22px;
}

.post-title em {
  color: var(--or);
  font-style: normal;
}

.post-lead {
  font-size: 19px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.76;
  max-width: 680px;
  margin-bottom: 36px;
}

/* Stat strip */
.post-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(160deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: visible;
  margin-bottom: 36px;
  position: relative;
  box-shadow: 0 2px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}

.post-hero-stats-4 {
  grid-template-columns: repeat(4, 1fr);
}

.post-hero-stats::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--or-rgb, 216,90,26),.06) 0%, transparent 60%);
  pointer-events: none;
}

.post-hero-stats-label {
  position: absolute;
  top: -11px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  background: var(--bg);
  padding: 3px 12px 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--bd);
  line-height: 1;
  z-index: 1;
}

.post-hero-stats-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or);
  display: block;
  flex-shrink: 0;
}

.post-hero-stat {
  padding: 32px 24px 26px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.post-hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--bd) 30%, var(--bd) 70%, transparent);
}

.post-hero-stat-icon {
  font-size: 11px;
  font-weight: 700;
  color: var(--or);
  background: rgba(216,90,26,.12);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-bottom: 2px;
}

.post-hero-stat-n {
  font-family: var(--fd);
  font-size: 48px;
  letter-spacing: -2px;
  color: var(--or);
  line-height: 1;
  text-shadow: 0 0 32px rgba(216,90,26,.25);
}

.post-hero-stat-n span {
  font-size: 24px;
  letter-spacing: 0;
  opacity: .85;
}

.post-hero-stat-div {
  display: none;
}

.post-hero-stat-l {
  font-size: 11px;
  color: var(--cr3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.5;
  max-width: 120px;
  opacity: .8;
}

/* Author bar */
.post-hero-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--bd);
}

.post-meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-meta-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3a5c, #d85a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 14px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.post-meta-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cr);
  line-height: 1.2;
}

.post-meta-date {
  font-size: 12px;
  color: var(--cr3);
  margin-top: 2px;
}

.post-hero-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-hero-share-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr3);
  font-weight: 500;
  margin-right: 4px;
}

/* THREE-COLUMN LAYOUT: TOC | Article | Sidebar */
.post-layout {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 40px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px 5% 80px;
  align-items: start;
}

/* ── TABLE OF CONTENTS ───────────────────────────────────── */
.post-toc {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.post-toc-inner {
  background: linear-gradient(160deg, #ffffff, #f6f2ea 80%);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 22px 20px;
  overflow: hidden;
}

.post-toc-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr3);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.post-toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: toc-counter;
}

.post-toc-item {
  counter-increment: toc-counter;
}

.post-toc-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px 7px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cr3);
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1.4;
  border-left: 2px solid transparent;
}

.post-toc-link::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--fd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bd2);
  flex-shrink: 0;
  transition: color 0.2s;
}

.post-toc-link:hover {
  color: var(--cr);
  background: var(--bg3);
  border-left-color: var(--bd2);
}

.post-toc-link.active {
  color: var(--or);
  background: rgba(216, 90, 26, 0.07);
  border-left-color: var(--or);
  font-weight: 600;
}

.post-toc-link.active::before {
  color: var(--or);
}

.post-toc-cta {
  display: block;
  text-align: center;
  padding: 10px 14px;
  background: var(--or);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.15s;
  cursor: none;
}

.post-toc-cta:hover {
  background: var(--or2);
  transform: translateY(-1px);
}

/* ARTICLE CONTENT */
.post-content {
  min-width: 0;
}

.post-intro {
  font-size: 18px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bd);
}

.post-content > p:first-child {
  font-size: 18px;
  font-weight: 400;
  color: var(--cr2);
  line-height: 1.8;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bd);
}

.post-content p {
  font-size: 16px;
  color: var(--cr2);
  line-height: 1.85;
  margin-bottom: 22px;
  font-weight: 400;
}

.post-h2 {
  font-family: var(--fh);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--cr);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 44px 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.post-content h2 {
  font-family: var(--fh);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--cr);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 44px 0 16px;
}

.post-content h3 {
  font-family: var(--fh);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: var(--cr);
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 32px 0 14px;
}

.post-sign-no {
  font-family: var(--fd);
  font-size: 28px;
  color: var(--or);
  opacity: 0.55;
  letter-spacing: -1px;
  line-height: 1.12;
  flex-shrink: 0;
  margin-top: 2px;
}

.post-callout {
  display: flex;
  gap: 16px;
  background: linear-gradient(135deg, rgba(216, 90, 26, 0.07), rgba(216, 90, 26, 0.03));
  border: 1px solid rgba(216, 90, 26, 0.22);
  border-left: 3px solid var(--or);
  border-radius: 0 8px 8px 0;
  padding: 20px 22px;
  margin: 28px 0;
  align-items: flex-start;
}

.post-callout-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

.post-callout-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 7px;
}

.post-callout-text {
  font-size: 14px !important;
  color: var(--cr2) !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

.post-pullquote {
  margin: 32px 0;
  padding: 28px 32px;
  border-left: 3px solid var(--or);
  background: linear-gradient(135deg, var(--bg2), var(--bg3) 80%);
  border-radius: 0 10px 10px 0;
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  color: var(--cr);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.post-pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  color: var(--cr3);
  letter-spacing: 0;
}

.post-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 0;
}

.post-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--cr2);
  line-height: 1.75;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.post-list li::before {
  content: "→";
  color: var(--or);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 600;
}

.post-list li strong {
  color: var(--cr);
}

.post-content ul,
.post-content ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}

.post-content ul li,
.post-content ol li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--cr2);
  line-height: 1.75;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.post-content ul li::before,
.post-content ol li::before {
  content: "→";
  color: var(--or);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 600;
}

.post-content blockquote {
  margin: 32px 0;
  padding: 28px 32px;
  border-left: 3px solid var(--or);
  background: linear-gradient(135deg, var(--bg2), var(--bg3) 80%);
  border-radius: 0 10px 10px 0;
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  color: var(--cr);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.post-content blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  color: var(--cr3);
}

.post-content figure {
  margin: 28px 0;
}

.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.post-content a {
  color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.post-checklist {
  background: linear-gradient(145deg, #ffffff, #f6f2ea);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 24px 26px;
  margin: 24px 0 28px;
}

.post-checklist-title {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--cr);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.post-checklist-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 0;
}

.post-checklist-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--cr2);
  line-height: 1.65;
}

.post-check {
  color: var(--or);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* SHARE */
.post-share {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 44px 0 24px;
  padding: 22px 24px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.post-share-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr3);
  flex-shrink: 0;
}

.post-share-links {
  display: flex;
  gap: 8px;
}

.post-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--bd2);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cr2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  cursor: none;
}

.post-share-btn:hover {
  border-color: var(--or);
  color: var(--or);
  transform: translateY(-2px);
}

.post-share-copy {
  font-size: 14px;
}

/* TAGS */
.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* SIDEBAR */
.post-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.post-sidebar-cta {
  background: linear-gradient(145deg, var(--or), var(--or2));
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}

.post-sidebar-cta::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

.post-sidebar-cta-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.post-sidebar-cta-title {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.post-sidebar-cta-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 20px;
}

.post-sidebar-cta .btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.post-sidebar-cta .btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.post-sidebar-author {
  background: linear-gradient(145deg, #ffffff, #f6f2ea);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 22px;
}

.post-sidebar-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3a5c, #d85a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 16px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.post-sidebar-author-name {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 2px;
}

.post-sidebar-author-role {
  font-size: 11px;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 13px;
}

.post-sidebar-author-bio {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.7;
  margin-bottom: 14px;
}

.post-sidebar-author-link {
  font-size: 13px;
}

.post-sidebar-newsletter {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 22px;
}

.post-sidebar-newsletter-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
}

.post-sidebar-newsletter-title {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  color: var(--cr);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.post-sidebar-newsletter-copy {
  font-size: 13px;
  color: var(--cr3);
  line-height: 1.65;
  margin-bottom: 14px;
}

.post-sidebar-newsletter-input {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--bd2);
  border-radius: 6px;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--cr);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-sidebar-newsletter-input::placeholder {
  color: color-mix(in srgb, var(--cr3) 72%, #fff 28%);
}

.post-sidebar-newsletter-input:focus {
  border-color: color-mix(in srgb, var(--or) 68%, #fff 32%);
  box-shadow: 0 0 0 3px rgba(216, 90, 26, 0.12);
}

.post-sidebar-related {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 22px;
}

.post-sidebar-related-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr3);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.post-sidebar-related-item {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
  text-decoration: none;
  transition: opacity 0.2s;
  cursor: none;
}

.post-sidebar-related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-sidebar-related-item:hover {
  opacity: 0.72;
}

.post-sidebar-related-cat {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 4px;
}

.post-sidebar-related-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--cr);
  line-height: 1.45;
}

/* RELATED SECTION */
.post-related {
  background: var(--bg2);
  border-top: 1px solid var(--bd);
}

.post-related-inner {
  padding: 80px 5%;
}

.post-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* PROGRESS BAR */
.post-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(34, 28, 23, 0.08);
  z-index: 9999;
  pointer-events: none;
}

.post-progress-fill {
  height: 100%;
  background: var(--or);
  width: 0%;
  transition: width 0.1s linear;
}

/* POST PAGE RESPONSIVE */

/* 1280px: tighten the right sidebar */
@media (max-width: 1280px) {
  .post-layout {
    grid-template-columns: 200px 1fr 290px;
    gap: 32px;
  }
}

/* 1100px: hide right sidebar into stacked below TOC */
@media (max-width: 1100px) {
  .post-layout {
    grid-template-columns: 200px 1fr;
    gap: 32px;
  }

  .post-sidebar {
    display: none; /* hidden on mid screens to keep reading clean */
  }
}

/* 860px: collapse to single column, show inline TOC above article */
@media (max-width: 860px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .post-toc {
    position: static;
  }

  .post-toc-inner {
    background: var(--bg2);
  }

  .post-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    position: static;
  }

  .post-sidebar-cta {
    grid-column: 1 / -1;
  }

  .post-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .post-hero-visual {
    height: 220px;
  }

  .post-hero-body {
    padding: 34px 5% 40px;
  }
}

/* 640px: mobile single column */
@media (max-width: 640px) {
  .post-hero-visual {
    height: 180px;
  }

  .post-hero-body {
    padding: 28px 5% 36px;
  }

  .post-hero-top {
    flex-wrap: wrap;
    gap: 10px;
  }

  .post-hero-badges {
    margin-left: 0;
  }

  .post-title {
    font-size: clamp(46px, 12vw, 80px);
  }

  .post-lead {
    font-size: 16px;
    line-height: 1.7;
  }

  .post-hero-stats {
    grid-template-columns: 1fr;
  }

  .post-hero-stat + .post-hero-stat {
    border-left: none;
    border-top: 1px solid var(--bd);
  }

  .post-hero-author {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .post-h2 {
    flex-direction: column;
    gap: 4px;
  }

  .post-sign-no {
    font-size: 22px;
  }

  .post-pullquote {
    padding: 18px 20px;
    font-size: 17px;
  }

  .post-sidebar {
    grid-template-columns: 1fr;
  }

  .post-related-grid {
    grid-template-columns: 1fr !important;
  }

  .post-share {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Home Hero Service Ticker ──────────────────────────── */
.home-hero-right {
  position: relative;
}
.hsvc-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--cr3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hsvc-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
}
.hsvc-left-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.hsvc-right-col {
  min-width: 0;
}
.hsvc-stage {
  display: grid;
  position: relative;
  min-height: 130px;
}
.hsvc-card {
  grid-area: 1 / 1;
  background: #fff;
  border: 1.5px solid var(--bd2);
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.hsvc-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hsvc-card.leave {
  opacity: 0;
  transform: translateY(-18px);
}
.hsvc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hsvc-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: #fff;
  background: var(--or);
  border-radius: 999px;
  padding: 3px 10px;
}
.hsvc-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--cr3);
  font-variant-numeric: tabular-nums;
}
.hsvc-icon {
  display: none;
}
.hsvc-text {
  flex: 1;
  min-width: 0;
}
.hsvc-name {
  font-family: var(--fd);
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--cr);
  margin-bottom: 10px;
}
.hsvc-out {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cr3);
}
.hsvc-progress {
  margin-top: 14px;
}
.hsvc-bar {
  height: 3px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}
.hsvc-fill {
  height: 100%;
  width: 0%;
  background: var(--or);
  border-radius: 3px;
  transition: width linear;
}
@media (max-width: 860px) {
  .home-hero-right {
    display: none;
  }
}
@media (max-width: 1100px) {
  .home-hero-mid {
    grid-template-columns: 1fr 360px;
    gap: 44px;
  }
}
@media (max-width: 900px) {
  .home-hero-mid {
    grid-template-columns: 1fr;
  }
  .home-hero-right {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   SHARED SERVICE PAGE COMPONENTS
   Replaces inline styles previously scattered across
   service page HTML files.
   ════════════════════════════════════════════════════ */

/* ── FAQ LEFT PANEL ── */
.faq-lhs .sh { margin-bottom: 18px; }
.faq-lhs-sub {
  font-size: 14px;
  color: var(--cr3);
  line-height: 1.75;
  font-weight: 300;
  max-width: 210px;
}

/* ── MCTA BUTTON (white on orange bg sections) ── */
.mcta .btn {
  background: #fff;
  color: var(--or);
}
.mcta .btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* ── FOOTER: SERVICE PAGE TEMPLATE ── */
/* Reuses .ft .fl .fd .fc2 .fct .fsoc .fs from the global footer.
   Only new classes are added below. */
.ft-nav-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  column-gap: 20px;
}
.ft-nav-1col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-nav-2col a,
.ft-nav-1col a {
  font-size: 13px;
  color: rgba(240, 230, 208, 0.42);
  text-decoration: none;
  cursor: none;
  font-weight: 300;
  transition: color 0.2s;
}
.ft-nav-2col a:hover,
.ft-nav-1col a:hover {
  color: var(--cr3);
}
.ft-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--bd);
  flex-wrap: wrap;
  gap: 14px;
}
.ft-bot-copy {
  font-size: 12px;
  color: var(--cr3);
}
.ft-bot-copy .ft-brand-accent {
  color: var(--or);
}

/* ── MOB BAR LINKS ── */
.mob-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--cr3);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mob-bar a.cta {
  color: var(--or);
  font-weight: 600;
}

@media (max-width: 768px) {
  .ft-nav-2col {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   PAGE-SPECIFIC STYLES
   ===================================================== */

/* === web-design-development === */
/* =====================================================
   WEB DESIGN & DEV - DARK PREMIUM EDITION
   ===================================================== */

/* ── PALETTE: Clean Professional Light ── */
#pg-web {
  --bg:  #FFFFFF;
  --bg2: #F6F7F9;
  --bg3: #EDEEF2;
  --bg4: #E2E4EA;
  --or:  #D85A1A;
  --or2: #E96B2A;
  --cr:  #0D0D0D;
  --cr2: #3A3A3A;
  --cr3: #7A7A7A;
  --bd:  rgba(0, 0, 0, 0.08);
  --bd2: rgba(0, 0, 0, 0.14);
  background: var(--bg);
}

/* ── SECTIONS ── */
#pg-web .sec  { background: var(--bg);  }
#pg-web .sec2 { background: var(--bg2); }

/* ── HERO ── */
#pg-web .ph {
  min-height: unset;
  padding: 130px 5% 84px;
  background: var(--bg);
  border-bottom-color: var(--bd);
}
#pg-web .ph-orb {
  opacity: 0.11;
  width: 580px;
  height: 580px;
  top: 0;
  right: 0;
}
#pg-web .ph-bg {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
}
#pg-web .ph-tag  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-web .ph-h    {
  font-size: clamp(68px, 9.5vw, 132px);
  letter-spacing: -3px;
  line-height: 0.92;
  margin-bottom: 28px;
  color: var(--cr);
}
#pg-web .ph-h em { color: var(--or); font-style: normal; }
#pg-web .ph-sub  {
  font-size: 19px;
  max-width: 520px;
  line-height: 1.82;
  font-weight: 300;
  color: var(--cr2);
  margin-bottom: 38px;
}
#pg-web .wf-label { color: var(--cr3); }
#pg-web .wf-pill  {
  background: rgba(216, 90, 26, 0.07);
  border-color: rgba(216, 90, 26, 0.18);
  color: var(--cr2);
  padding: 5px 14px;
  font-size: 12px;
}
#pg-web .ph-stats { gap: 0; padding-top: 28px; border-top-color: var(--bd); flex-wrap: nowrap; align-items: flex-start; }
#pg-web .ph-stats > div {
  flex: 1;
  padding: 0 20px 0 0;
  border-right: 1px solid var(--bd);
  margin-right: 20px;
  min-width: 0;
}
#pg-web .ph-stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
#pg-web .ph-sn    { font-size: 36px; letter-spacing: -1px; color: var(--cr); }
#pg-web .ph-sn em { color: var(--or); }
#pg-web .ph-sl    { font-size: 11px; letter-spacing: 0.13em; margin-top: 5px; color: var(--cr3); }

/* ── TYPOGRAPHY ── */
#pg-web .sh    { font-size: clamp(42px, 5.2vw, 62px); letter-spacing: -2px; line-height: 1.02; color: var(--cr); }
#pg-web .sh em { color: var(--or); font-style: italic; font-weight: 400; }
#pg-web .ssub  { font-size: 18.5px; line-height: 1.84; color: var(--cr2); }
#pg-web .slbl  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-web .slbl::before { background: var(--or); }

/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-web .g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: 4px;
  overflow: hidden;
  counter-reset: service-card;
}
#pg-web .g3 .fc {
  counter-increment: service-card;
  padding: 44px 36px 40px;
  background: var(--bg2);
  border: none;
  border-radius: 0;
  transition: background 0.28s ease;
}
#pg-web .g3 .fc:hover {
  background: var(--bg3);
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
#pg-web .g3 .fc::before { display: none; }
#pg-web .fc-ln { display: none; }
#pg-web .fc-ic {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(216, 90, 26, 0.08);
  border: 1px solid rgba(216, 90, 26, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  color: var(--or);
  flex-shrink: 0;
}
#pg-web .fc-ic svg {
  display: block;
  flex-shrink: 0;
}
#pg-web .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-web .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-web .fc-tags .tag {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 2px;
  border-color: var(--bd2);
  color: var(--cr3);
}

/* ── PROCESS STEPS (vertical timeline) ── */
#pg-web .steps {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  gap: 0;
}
#pg-web .steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05));
  pointer-events: none;
}
#pg-web .step            { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-web .step:last-child { padding-bottom: 0; }
#pg-web .step-n {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--or);
  opacity: 1;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: background 0.22s, border-color 0.22s;
}
#pg-web .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-web .step > div:last-child { padding-top: 7px; }
#pg-web .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-web .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }

/* ── RESULTS (left-aligned, dramatic numbers) ── */
#pg-web .res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bd);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}
#pg-web .res-item {
  padding: 60px 44px;
  background: var(--bg2);
  border-right: 1px solid var(--bd);
  text-align: left;
}
#pg-web .res-item:last-child { border-right: none; }
#pg-web .res-n { font-size: 92px; letter-spacing: -5px; color: var(--or); line-height: 1; }
#pg-web .res-l { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 14px; font-weight: 600; color: var(--cr); }
#pg-web .res-d { font-size: 15px; line-height: 1.65; margin-top: 8px; color: var(--cr3); }

/* ── FAQ ── */
#pg-web .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-web .faq-lhs .slbl { margin-bottom: 14px; }
#pg-web .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-web .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-web .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-web .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-web .faq-q:hover { background: transparent; color: var(--or); }
#pg-web .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-web .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-web .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-web .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }

/* ── CTA (very dark, high contrast) ── */
#pg-web .mcta {
  background: var(--or);
  padding: 80px 5%;
}
#pg-web .mcta-bg { color: rgba(0,0,0,.1); }
#pg-web .mcta-s { color: rgba(255,255,255,.72); }

/* ── NEWSLETTER ── */
#pg-web .newsletter {
  background: var(--bg2) !important;
  padding: 90px 5%;
  border-top: 1px solid var(--bd);
  border-bottom: none;
}
#pg-web .newsletter-tag  { font-size: 10px; letter-spacing: 0.22em; margin-bottom: 16px; color: var(--or); }
#pg-web .newsletter-h    { font-size: 40px; letter-spacing: -1.5px; margin-bottom: 10px; color: var(--cr); }
#pg-web .newsletter-sub  { font-size: 15px; margin-bottom: 32px; font-weight: 300; color: var(--cr2); }
#pg-web .newsletter-input {
  background: #ffffff !important;
  color: var(--cr) !important;
  border-color: var(--bd2) !important;
  border-radius: 2px;
  padding: 14px 18px;
  font-size: 14.5px;
}
#pg-web .newsletter-input::placeholder { color: var(--cr3) !important; }
#pg-web .newsletter-input:focus { box-shadow: 0 0 0 3px rgba(216,90,26,.18) !important; border-color: rgba(216,90,26,.4) !important; }
#pg-web .newsletter-btn  { padding: 14px 32px; border-radius: 2px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
#pg-web .newsletter-note { font-size: 11px; letter-spacing: 0.04em; color: var(--cr3); }

/* ── RESPONSIVE FIXES ── */
@media (max-width: 1024px) {
  #pg-web .ph {
    padding-top: 116px;
    padding-bottom: 62px;
  }

  #pg-web .ph-orb {
    width: 420px;
    height: 420px;
    opacity: 0.09;
  }

  #pg-web .ph-h {
    font-size: clamp(54px, 9vw, 96px);
    letter-spacing: -2px;
  }

  #pg-web .g3,
  #pg-web .res-grid {
    grid-template-columns: 1fr 1fr;
  }

  #pg-web .res-item {
    border-right: none;
    border-bottom: 1px solid var(--bd);
  }

  #pg-web .res-item:last-child {
    border-bottom: none;
  }

  #pg-web .res-n {
    font-size: 72px;
    letter-spacing: -3px;
  }
}

@media (max-width: 768px) {
  #pg-web .ph {
    padding-top: 104px;
    padding-bottom: 48px;
  }

  #pg-web .ph-orb,
  #pg-web .ph-bg {
    display: none;
  }

  #pg-web .ph-sub,
  #pg-web .ssub {
    font-size: 15px;
    line-height: 1.7;
  }

  #pg-web .g3,
  #pg-web .res-grid {
    grid-template-columns: 1fr;
  }

  #pg-web .g3 .fc,
  #pg-web .res-item {
    padding: 22px 20px;
  }

  #pg-web .ph-stats {
    gap: 14px;
  }

  #pg-web .ph-stats > div {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bd);
  }

  #pg-web .ph-stats > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  #pg-web .step {
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
  }

  #pg-web .step:last-child {
    margin-bottom: 0;
  }

  #pg-web .steps {
    padding-left: 0;
  }

  #pg-web .steps::before {
    display: none;
  }

  #pg-web .step-n {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 14px;
    border-radius: 8px;
    background: rgba(216, 90, 26, 0.08);
    border-color: rgba(216, 90, 26, 0.28);
  }

  #pg-web .step > div:last-child {
    padding-top: 0;
  }

  #pg-web .step-t {
    font-size: 16px;
    margin-bottom: 5px;
  }

  #pg-web .step-d {
    font-size: 14px;
    line-height: 1.62;
  }

  #pg-web .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-web .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-web .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }

  #pg-web .mcta {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  #pg-web .mcta-h {
    font-size: clamp(36px, 12vw, 58px);
    letter-spacing: -2px;
  }

  #pg-web .newsletter {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  #pg-web .newsletter-h {
    font-size: 30px;
    line-height: 1.15;
  }

  #pg-web .newsletter-form {
    flex-direction: column;
  }

  #pg-web .newsletter-btn {
    width: 100%;
  }

  #pg-web [style*="padding:48px 52px"] {
    padding: 22px 20px !important;
  }
}

@media (max-width: 560px) {
  #pg-web .ph-h {
    font-size: clamp(42px, 13vw, 62px);
    letter-spacing: -1px;
    line-height: 0.98;
  }

  #pg-web .ph-sn {
    font-size: clamp(34px, 11vw, 48px);
  }

  #pg-web .res-n {
    font-size: clamp(42px, 14vw, 60px);
    letter-spacing: -2px;
  }

  #pg-web .mcta .btn {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  #pg-web .step {
    padding: 14px;
    gap: 10px;
  }

  #pg-web .step-t {
    font-size: 15px;
  }

  #pg-web .step-d {
    font-size: 13px;
    line-height: 1.58;
  }
}
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-web .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-web .ph-mockup { display:flex; }

/* ── HERO STORYBOARD (Client Journey) ───────────────── */
#pg-web .wd-story {
  width: 100%;
  max-width: 450px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
  padding: 0;
}
#pg-web .wd-flow {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
}
#pg-web .wd-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--bd2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--cr3);
  flex-shrink: 0;
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}
#pg-web .wd-node.wd-active {
  background: var(--or);
  border-color: var(--or);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(216,90,26,.15);
}
#pg-web .wd-node.wd-done {
  background: rgba(216,90,26,.1);
  border-color: rgba(216,90,26,.45);
  color: var(--or);
}
#pg-web .wd-link {
  flex: 1;
  height: 2px;
  background: var(--bg3);
  border-radius: 2px;
  position: relative;
}
#pg-web .wd-link-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--or);
  border-radius: 2px;
  transition: width .65s ease;
}
#pg-web .wd-link-fill.filled {
  width: 100%;
}
#pg-web .wd-top-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--cr);
  margin-bottom: 10px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#pg-web .wd-top-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
}
#pg-web .wd-stage {
  position: relative;
  min-height: 286px;
  background: transparent;
}
#pg-web .wd-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  padding: 0;
}
#pg-web .wd-scene.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#pg-web .wd-card {
  background: #fff;
  border: 1.5px solid var(--bd2);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
#pg-web .wd-kicker {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cr3);
  font-weight: 700;
  margin-bottom: 8px;
}
#pg-web .wd-headline {
  font-size: 14px;
  color: var(--cr);
  font-weight: 700;
  line-height: 1.35;
}

#pg-web .wd-client-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
#pg-web .wd-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f5f6fa, #e9ebf1);
  border: 1.5px solid var(--bd2);
  position: relative;
}
#pg-web .wd-avatar::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9ced9;
  top: 7px;
  left: 11px;
}
#pg-web .wd-avatar::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 10px;
  border-radius: 10px 10px 4px 4px;
  background: #c9ced9;
  bottom: 5px;
  left: 8px;
}
#pg-web .wd-note {
  flex: 1;
  border: 1.5px solid var(--bd);
  background: #f8f9fc;
  border-radius: 10px;
  padding: 8px 9px;
  font-size: 11px;
  color: #4a4f59;
}
#pg-web .wd-bad-site,
#pg-web .wd-good-site {
  margin-top: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--bd2);
  overflow: hidden;
}
#pg-web .wd-bad-site { background: #f7f7f9; }
#pg-web .wd-good-site { background: #ffffff; box-shadow: 0 10px 28px rgba(0,0,0,.08); }
#pg-web .wd-site-head {
  height: 30px;
  background: #eceef4;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 7px;
}
#pg-web .wd-site-head i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9bfcb;
}
#pg-web .wd-bad-body { padding: 10px; }
#pg-web .wd-bad-body .line { height: 7px; background: #d7dbe5; border-radius: 3px; margin-bottom: 7px; }
#pg-web .wd-bad-body .cta { height: 24px; width: 44%; background: #d66a6a; border-radius: 6px; }
#pg-web .wd-loss {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(220,38,38,.2);
  background: rgba(220,38,38,.06);
  color: #b91c1c;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
}

#pg-web .wd-wire {
  margin-top: 12px;
  border-radius: 12px;
  border: 1.5px dashed #b8bfcc;
  background: repeating-linear-gradient(0deg, #fff, #fff 10px, #fafbfe 10px, #fafbfe 20px);
  padding: 12px;
}
#pg-web .wd-wire-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
#pg-web .wd-wire-chip {
  font-size: 9px;
  color: #4a5568;
  border: 1px solid #c8cfdb;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
}
#pg-web .wd-wire-lines { display: grid; gap: 6px; }
#pg-web .wd-wire-lines span {
  height: 6px;
  border-radius: 3px;
  background: #cad1dd;
}
/* wireframe layout skeleton */
#pg-web .wd-wire-nav {
  height: 22px;
  background: #eceef4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  margin-bottom: 8px;
}
#pg-web .wd-wire-nav-logo {
  width: 32px;
  height: 7px;
  border-radius: 3px;
  background: #b8bfcc;
  margin-right: auto;
}
#pg-web .wd-wire-nav-link {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: #cad1dd;
}
#pg-web .wd-wire-nav-btn {
  width: 28px;
  height: 13px;
  border-radius: 4px;
  background: rgba(216,90,26,.28);
  margin-left: 4px;
}
#pg-web .wd-wire-hero {
  background: #f0f2f6;
  border-radius: 6px;
  padding: 9px 10px;
  margin-bottom: 8px;
}
#pg-web .wd-wire-hero-h {
  width: 62%;
  height: 9px;
  border-radius: 3px;
  background: #b0b8c8;
  margin-bottom: 6px;
}
#pg-web .wd-wire-hero-sub {
  width: 80%;
  height: 6px;
  border-radius: 3px;
  background: #cad1dd;
  margin-bottom: 4px;
}
#pg-web .wd-wire-hero-sub2 {
  width: 52%;
  height: 6px;
  border-radius: 3px;
  background: #cad1dd;
  margin-bottom: 8px;
}
#pg-web .wd-wire-hero-cta {
  display: inline-block;
  width: 54px;
  height: 16px;
  border-radius: 5px;
  background: rgba(216,90,26,.35);
}
#pg-web .wd-wire-cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 7px;
}
#pg-web .wd-wire-col {
  background: #eceef4;
  border-radius: 6px;
  padding: 8px;
}
#pg-web .wd-wire-col span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #cad1dd;
  margin-bottom: 5px;
}
#pg-web .wd-wire-col span:last-child { margin-bottom: 0; }
#pg-web .wd-agree {
  margin-top: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(22,163,74,.22);
  background: rgba(22,163,74,.07);
  color: #166534;
  font-size: 10.5px;
  font-weight: 700;
  padding: 7px 10px;
}

#pg-web .wd-good-wrap {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 8px;
}
#pg-web .wd-good-body { padding: 10px; }
#pg-web .wd-good-body .line { height: 6px; background: #d5dae5; border-radius: 3px; margin-bottom: 6px; }
#pg-web .wd-good-body .line.or { background: rgba(216,90,26,.5); }
#pg-web .wd-good-body .cta { height: 24px; width: 48%; background: var(--or); border-radius: 6px; margin-top: 8px; }
#pg-web .wd-mobile {
  border-radius: 11px;
  border: 1.5px solid var(--bd2);
  background: #fff;
  padding: 7px;
}
#pg-web .wd-mobile-screen {
  border-radius: 8px;
  background: #f6f7fa;
  border: 1px solid var(--bd);
  height: 128px;
  padding: 7px;
}
#pg-web .wd-mobile-screen span { display: block; height: 5px; background: #cfd5e0; border-radius: 3px; margin-bottom: 5px; }
#pg-web .wd-mobile-screen span.or { background: rgba(216,90,26,.55); }
#pg-web .wd-win {
  margin-top: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(22,163,74,.24);
  background: rgba(22,163,74,.08);
  color: #166534;
  font-size: 10.5px;
  font-weight: 700;
  padding: 7px 10px;
}
@media (max-width:900px) {
  #pg-web .ph-hero-grid { grid-template-columns:1fr; }
  #pg-web .ph-mockup { display:none !important; }
}

/* === ui-ux-design === */
/* =====================================================
   UI/UX DESIGN - CLEAN PROFESSIONAL LIGHT EDITION
   ===================================================== */

/* ── PALETTE ── */
#pg-ux {
  --bg:  #FFFFFF;
  --bg2: #F6F7F9;
  --bg3: #EDEEF2;
  --bg4: #E2E4EA;
  --or:  #D85A1A;
  --or2: #E96B2A;
  --cr:  #0D0D0D;
  --cr2: #3A3A3A;
  --cr3: #7A7A7A;
  --bd:  rgba(0, 0, 0, 0.08);
  --bd2: rgba(0, 0, 0, 0.14);
  background: var(--bg);
}

/* ── SECTIONS ── */
#pg-ux .sec  { background: var(--bg);  }
#pg-ux .sec2 { background: var(--bg2); }

/* ── HERO ── */
#pg-ux .ph {
  min-height: unset;
  padding: 130px 5% 84px;
  background: var(--bg);
  border-bottom-color: var(--bd);
}
#pg-ux .ph-orb {
  opacity: 0.11;
  width: 580px;
  height: 580px;
  top: 0;
  right: 0;
}
#pg-ux .ph-bg {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
}
#pg-ux .ph-tag  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-ux .ph-h    {
  font-size: clamp(68px, 9.5vw, 132px);
  letter-spacing: -3px;
  line-height: 0.92;
  margin-bottom: 28px;
  color: var(--cr);
}
#pg-ux .ph-h em { color: var(--or); font-style: italic; font-weight: 400; }
#pg-ux .ph-sub  {
  font-size: 19px;
  max-width: 520px;
  line-height: 1.82;
  font-weight: 300;
  color: var(--cr2);
  margin-bottom: 38px;
}
#pg-ux .wf-label { color: var(--cr3); }
#pg-ux .wf-pill  {
  background: rgba(216, 90, 26, 0.07);
  border-color: rgba(216, 90, 26, 0.18);
  color: var(--cr2);
  padding: 5px 14px;
  font-size: 12px;
}
#pg-ux .ph-stats { gap: 0; padding-top: 28px; border-top-color: var(--bd); flex-wrap: nowrap; align-items: flex-start; }
#pg-ux .ph-stats > div {
  flex: 1;
  padding: 0 20px 0 0;
  border-right: 1px solid var(--bd);
  margin-right: 20px;
  min-width: 0;
}
#pg-ux .ph-stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
#pg-ux .ph-sn    { font-size: 36px; letter-spacing: -1px; color: var(--cr); }
#pg-ux .ph-sn em { color: var(--or); }
#pg-ux .ph-sl    { font-size: 11px; letter-spacing: 0.13em; margin-top: 5px; color: var(--cr3); }

/* ── TYPOGRAPHY ── */
#pg-ux .sh    { font-size: clamp(42px, 5.2vw, 62px); letter-spacing: -2px; line-height: 1.02; color: var(--cr); }
#pg-ux .sh em { color: var(--or); font-style: italic; font-weight: 400; }
#pg-ux .ssub  { font-size: 18.5px; line-height: 1.84; color: var(--cr2); }
#pg-ux .slbl  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-ux .slbl::before { background: var(--or); }

/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-ux .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-ux .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-ux .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-ux .g3 .fc::before { display: none; }
#pg-ux .fc-ln { display: none; }
#pg-ux .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-ux .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-ux .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-ux .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* ── RESULTS ── */
#pg-ux .res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bd);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}
#pg-ux .res-item {
  padding: 60px 44px;
  background: var(--bg2);
  border-right: 1px solid var(--bd);
  text-align: left;
}
#pg-ux .res-item:last-child { border-right: none; }
#pg-ux .res-n { font-size: 92px; letter-spacing: -5px; color: var(--or); line-height: 1; }
#pg-ux .res-l { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 14px; font-weight: 600; color: var(--cr); }
#pg-ux .res-d { font-size: 15px; line-height: 1.65; margin-top: 8px; color: var(--cr3); }

/* ── PROCESS STEPS ── */
#pg-ux .steps {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  gap: 0;
}
#pg-ux .steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05));
  pointer-events: none;
}
#pg-ux .step            { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-ux .step:last-child { padding-bottom: 0; }
#pg-ux .step-n {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--or);
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: background 0.22s, border-color 0.22s;
}
#pg-ux .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-ux .step > div:last-child { padding-top: 7px; }
#pg-ux .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-ux .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }

/* ── FAQ ── */
#pg-ux .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-ux .faq-lhs .slbl { margin-bottom: 14px; }
#pg-ux .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-ux .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-ux .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-ux .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-ux .faq-q:hover { background: transparent; color: var(--or); }
#pg-ux .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-ux .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-ux .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-ux .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }

/* ── CTA ── */
#pg-ux .mcta {
  background: var(--or);
  padding: 80px 5%;
}
#pg-ux .mcta-bg { color: rgba(0,0,0,.1); }
#pg-ux .mcta-s { color: rgba(255,255,255,.72); }

/* ── HERO GRID / MOCKUP ── */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-ux .ph-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
#pg-ux .ph-mockup { display: flex; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  #pg-ux .ph { padding-top: 116px; padding-bottom: 62px; }
  #pg-ux .ph-orb { width: 420px; height: 420px; opacity: 0.09; }
  #pg-ux .ph-h { font-size: clamp(54px, 9vw, 96px); letter-spacing: -2px; }
  #pg-ux .g3, #pg-ux .res-grid { grid-template-columns: 1fr 1fr; }
  #pg-ux .res-item { border-right: none; border-bottom: 1px solid var(--bd); }
  #pg-ux .res-item:last-child { border-bottom: none; }
  #pg-ux .res-n { font-size: 72px; letter-spacing: -3px; }
}
@media (max-width: 900px) {
  #pg-ux .ph-hero-grid { grid-template-columns: 1fr; }
  #pg-ux .ph-mockup { display: none !important; }
  #pg-ux .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-ux .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-ux .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
@media (max-width: 768px) {
  #pg-ux .ph { padding-top: 104px; padding-bottom: 48px; }
  #pg-ux .ph-orb, #pg-ux .ph-bg { display: none; }
  #pg-ux .ph-sub, #pg-ux .ssub { font-size: 15px; line-height: 1.7; }
  #pg-ux .g3, #pg-ux .res-grid { grid-template-columns: 1fr; }
  #pg-ux .g3 .fc, #pg-ux .res-item { padding: 22px 20px; }
  #pg-ux .ph-stats { gap: 14px; }
  #pg-ux .ph-stats > div { border-right: none; margin-right: 0; padding-right: 0; width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--bd); }
  #pg-ux .ph-stats > div:last-child { border-bottom: none; padding-bottom: 0; }
  #pg-ux .step { gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.04); }
  #pg-ux .step:last-child { margin-bottom: 0; }
  #pg-ux .steps { padding-left: 0; }
  #pg-ux .steps::before { display: none; }
  #pg-ux .step-n { width: 34px; height: 34px; min-width: 34px; font-size: 13px; border-radius: 8px; background: rgba(216,90,26,.08); border-color: rgba(216,90,26,.28); }
  #pg-ux .step > div:last-child { padding-top: 0; }
  #pg-ux .step-t { font-size: 16px; margin-bottom: 5px; }
  #pg-ux .step-d { font-size: 14px; line-height: 1.62; }
  #pg-ux .mcta { padding-top: 72px; padding-bottom: 72px; }
  #pg-ux .mcta-h { font-size: clamp(36px, 12vw, 58px); letter-spacing: -2px; }
}
@media (max-width: 560px) {
  #pg-ux .ph-h { font-size: clamp(42px, 13vw, 62px); letter-spacing: -1px; line-height: 0.98; }
  #pg-ux .ph-sn { font-size: clamp(34px, 11vw, 48px); }
  #pg-ux .res-n { font-size: clamp(42px, 14vw, 60px); letter-spacing: -2px; }
  #pg-ux .mcta .btn { width: 100%; padding-left: 18px; padding-right: 18px; }
  #pg-ux .step { padding: 14px; gap: 10px; }
  #pg-ux .step-t { font-size: 15px; }
  #pg-ux .step-d { font-size: 13px; line-height: 1.58; }
}

/* === mobile-app-design-development === */
/* =====================================================
   MOBILE APP - CLEAN PROFESSIONAL LIGHT EDITION
   ===================================================== */

/* ── PALETTE ── */
#pg-app {
  --bg:  #FFFFFF;
  --bg2: #F6F7F9;
  --bg3: #EDEEF2;
  --bg4: #E2E4EA;
  --or:  #D85A1A;
  --or2: #E96B2A;
  --cr:  #0D0D0D;
  --cr2: #3A3A3A;
  --cr3: #7A7A7A;
  --bd:  rgba(0, 0, 0, 0.08);
  --bd2: rgba(0, 0, 0, 0.14);
  background: var(--bg);
}

/* ── SECTIONS ── */
#pg-app .sec  { background: var(--bg);  }
#pg-app .sec2 { background: var(--bg2); }

/* ── HERO ── */
#pg-app .ph {
  min-height: unset;
  padding: 130px 5% 84px;
  background: var(--bg);
  border-bottom-color: var(--bd);
}
#pg-app .ph-orb {
  opacity: 0.11;
  width: 580px;
  height: 580px;
  top: 0;
  right: 0;
}
#pg-app .ph-bg {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
}
#pg-app .ph-tag  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-app .ph-h    {
  font-size: clamp(68px, 9.5vw, 132px);
  letter-spacing: -3px;
  line-height: 0.92;
  margin-bottom: 28px;
  color: var(--cr);
}
#pg-app .ph-h em { color: var(--or); font-style: normal; }
#pg-app .ph-sub  {
  font-size: 19px;
  max-width: 520px;
  line-height: 1.82;
  font-weight: 300;
  color: var(--cr2);
  margin-bottom: 38px;
}
#pg-app .wf-label { color: var(--cr3); }
#pg-app .wf-pill  {
  background: rgba(216, 90, 26, 0.07);
  border-color: rgba(216, 90, 26, 0.18);
  color: var(--cr2);
  padding: 5px 14px;
  font-size: 12px;
}
#pg-app .ph-stats { gap: 0; padding-top: 28px; border-top-color: var(--bd); flex-wrap: nowrap; align-items: flex-start; }
#pg-app .ph-stats > div {
  flex: 1;
  padding: 0 20px 0 0;
  border-right: 1px solid var(--bd);
  margin-right: 20px;
  min-width: 0;
}
#pg-app .ph-stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
#pg-app .ph-sn    { font-size: 36px; letter-spacing: -1px; color: var(--cr); }
#pg-app .ph-sn em { color: var(--or); }
#pg-app .ph-sl    { font-size: 11px; letter-spacing: 0.13em; margin-top: 5px; color: var(--cr3); }

/* ── TYPOGRAPHY ── */
#pg-app .sh    { font-size: clamp(42px, 5.2vw, 62px); letter-spacing: -2px; line-height: 1.02; color: var(--cr); }
#pg-app .sh em { color: var(--or); font-style: italic; font-weight: 400; }
#pg-app .ssub  { font-size: 18.5px; line-height: 1.84; color: var(--cr2); }
#pg-app .slbl  { font-size: 11px; letter-spacing: 0.24em; color: var(--or); }
#pg-app .slbl::before { background: var(--or); }

/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-app .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-app .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-app .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-app .g3 .fc::before { display: none; }
#pg-app .fc-ln { display: none; }
#pg-app .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-app .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-app .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-app .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* ── PROCESS STEPS ── */
#pg-app .steps {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  gap: 0;
}
#pg-app .steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05));
  pointer-events: none;
}
#pg-app .step            { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-app .step:last-child { padding-bottom: 0; }
#pg-app .step-n {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--or);
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: background 0.22s, border-color 0.22s;
}
#pg-app .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-app .step > div:last-child { padding-top: 7px; }
#pg-app .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-app .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }

/* ── RESULTS ── */
#pg-app .res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bd);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}
#pg-app .res-item {
  padding: 60px 44px;
  background: var(--bg2);
  border-right: 1px solid var(--bd);
  text-align: left;
}
#pg-app .res-item:last-child { border-right: none; }
#pg-app .res-n { font-size: 92px; letter-spacing: -5px; color: var(--or); line-height: 1; }
#pg-app .res-l { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 14px; font-weight: 600; color: var(--cr); }
#pg-app .res-d { font-size: 15px; line-height: 1.65; margin-top: 8px; color: var(--cr3); }

/* ── FAQ ── */
#pg-app .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-app .faq-lhs .slbl { margin-bottom: 14px; }
#pg-app .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-app .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-app .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-app .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-app .faq-q:hover { background: transparent; color: var(--or); }
#pg-app .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-app .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-app .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-app .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }

/* ── CTA ── */
#pg-app .mcta {
  background: var(--or);
  padding: 80px 5%;
}
#pg-app .mcta-bg { color: rgba(0,0,0,.1); }
#pg-app .mcta-s { color: rgba(255,255,255,.72); }

/* ── HERO GRID / MOCKUP ── */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-app .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-app .ph-mockup { display:flex; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  #pg-app .ph { padding-top: 116px; padding-bottom: 62px; }
  #pg-app .ph-orb { width: 420px; height: 420px; opacity: 0.09; }
  #pg-app .ph-h { font-size: clamp(54px, 9vw, 96px); letter-spacing: -2px; }
  #pg-app .g3, #pg-app .res-grid { grid-template-columns: 1fr 1fr; }
  #pg-app .res-item { border-right: none; border-bottom: 1px solid var(--bd); }
  #pg-app .res-item:last-child { border-bottom: none; }
  #pg-app .res-n { font-size: 72px; letter-spacing: -3px; }
}
@media (max-width: 900px) {
  #pg-app .ph-hero-grid { grid-template-columns: 1fr; }
  #pg-app .ph-mockup { display: none !important; }
  #pg-app .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-app .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-app .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
@media (max-width: 768px) {
  #pg-app .ph { padding-top: 104px; padding-bottom: 48px; }
  #pg-app .ph-orb, #pg-app .ph-bg { display: none; }
  #pg-app .ph-sub, #pg-app .ssub { font-size: 15px; line-height: 1.7; }
  #pg-app .g3, #pg-app .res-grid { grid-template-columns: 1fr; }
  #pg-app .g3 .fc, #pg-app .res-item { padding: 22px 20px; }
  #pg-app .ph-stats { gap: 14px; }
  #pg-app .ph-stats > div { border-right: none; margin-right: 0; padding-right: 0; width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--bd); }
  #pg-app .ph-stats > div:last-child { border-bottom: none; padding-bottom: 0; }
  #pg-app .step { gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.04); }
  #pg-app .step:last-child { margin-bottom: 0; }
  #pg-app .steps { padding-left: 0; }
  #pg-app .steps::before { display: none; }
  #pg-app .step-n { width: 34px; height: 34px; min-width: 34px; font-size: 13px; border-radius: 8px; background: rgba(216,90,26,.08); border-color: rgba(216,90,26,.28); }
  #pg-app .step > div:last-child { padding-top: 0; }
  #pg-app .step-t { font-size: 16px; margin-bottom: 5px; }
  #pg-app .step-d { font-size: 14px; line-height: 1.62; }
  #pg-app .mcta { padding-top: 72px; padding-bottom: 72px; }
  #pg-app .mcta-h { font-size: clamp(36px, 12vw, 58px); letter-spacing: -2px; }
}
@media (max-width: 560px) {
  #pg-app .ph-h { font-size: clamp(42px, 13vw, 62px); letter-spacing: -1px; line-height: 0.98; }
  #pg-app .ph-sn { font-size: clamp(34px, 11vw, 48px); }
  #pg-app .res-n { font-size: clamp(42px, 14vw, 60px); letter-spacing: -2px; }
  #pg-app .mcta .btn { width: 100%; padding-left: 18px; padding-right: 18px; }
  #pg-app .step { padding: 14px; gap: 10px; }
  #pg-app .step-t { font-size: 15px; }
  #pg-app .step-d { font-size: 13px; line-height: 1.58; }
}

/* === e-commerce === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-ecom .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-ecom .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-ecom .ph-hero-grid { grid-template-columns:1fr; }
  #pg-ecom .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-ecom .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-ecom .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-ecom .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-ecom .step:last-child { padding-bottom: 0; }
#pg-ecom .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-ecom .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-ecom .step > div:last-child { padding-top: 7px; }
#pg-ecom .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-ecom .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-ecom .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-ecom .faq-lhs .slbl { margin-bottom: 14px; }
#pg-ecom .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-ecom .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-ecom .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-ecom .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-ecom .faq-q:hover { background: transparent; color: var(--or); }
#pg-ecom .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-ecom .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-ecom .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-ecom .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-ecom .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-ecom .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-ecom .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-ecom .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-ecom .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-ecom .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-ecom .g3 .fc::before { display: none; }
#pg-ecom .fc-ln { display: none; }
#pg-ecom .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-ecom .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-ecom .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-ecom .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === hosting-domains === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-host .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-host .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-host .ph-hero-grid { grid-template-columns:1fr; }
  #pg-host .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-host .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-host .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-host .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-host .step:last-child { padding-bottom: 0; }
#pg-host .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-host .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-host .step > div:last-child { padding-top: 7px; }
#pg-host .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-host .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-host .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-host .faq-lhs .slbl { margin-bottom: 14px; }
#pg-host .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-host .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-host .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-host .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-host .faq-q:hover { background: transparent; color: var(--or); }
#pg-host .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-host .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-host .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-host .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-host .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-host .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-host .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-host .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-host .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-host .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-host .g3 .fc::before { display: none; }
#pg-host .fc-ln { display: none; }
#pg-host .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-host .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-host .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-host .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === branding-visual-identity === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-brand .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-brand .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-brand .ph-hero-grid { grid-template-columns:1fr; }
  #pg-brand .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-brand .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-brand .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-brand .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-brand .step:last-child { padding-bottom: 0; }
#pg-brand .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-brand .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-brand .step > div:last-child { padding-top: 7px; }
#pg-brand .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-brand .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-brand .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-brand .faq-lhs .slbl { margin-bottom: 14px; }
#pg-brand .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-brand .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-brand .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-brand .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-brand .faq-q:hover { background: transparent; color: var(--or); }
#pg-brand .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-brand .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-brand .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-brand .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-brand .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-brand .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-brand .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-brand .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-brand .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-brand .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-brand .g3 .fc::before { display: none; }
#pg-brand .fc-ln { display: none; }
#pg-brand .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-brand .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-brand .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-brand .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === seo-digital-marketing === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-seo .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-seo .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-seo .ph-hero-grid { grid-template-columns:1fr; }
  #pg-seo .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-seo .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-seo .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-seo .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-seo .step:last-child { padding-bottom: 0; }
#pg-seo .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-seo .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-seo .step > div:last-child { padding-top: 7px; }
#pg-seo .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-seo .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-seo .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-seo .faq-lhs .slbl { margin-bottom: 14px; }
#pg-seo .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-seo .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-seo .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-seo .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-seo .faq-q:hover { background: transparent; color: var(--or); }
#pg-seo .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-seo .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-seo .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-seo .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-seo .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-seo .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-seo .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-seo .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-seo .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-seo .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-seo .g3 .fc::before { display: none; }
#pg-seo .fc-ln { display: none; }
#pg-seo .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-seo .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-seo .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-seo .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === social-media-management === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-social .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-social .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-social .ph-hero-grid { grid-template-columns:1fr; }
  #pg-social .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-social .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-social .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-social .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-social .step:last-child { padding-bottom: 0; }
#pg-social .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-social .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-social .step > div:last-child { padding-top: 7px; }
#pg-social .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-social .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-social .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-social .faq-lhs .slbl { margin-bottom: 14px; }
#pg-social .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-social .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-social .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-social .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-social .faq-q:hover { background: transparent; color: var(--or); }
#pg-social .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-social .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-social .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-social .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-social .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-social .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-social .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-social .sec2 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-social .sec2 .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-social .sec2 .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-social .sec2 .g3 .fc::before { display: none; }
#pg-social .sec2 .fc-ln { display: none; }
#pg-social .sec2 .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-social .sec2 .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-social .sec2 .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-social .sec2 .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === technical-it-support === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-it .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-it .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-it .ph-hero-grid { grid-template-columns:1fr; }
  #pg-it .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-it .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-it .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-it .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-it .step:last-child { padding-bottom: 0; }
#pg-it .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-it .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-it .step > div:last-child { padding-top: 7px; }
#pg-it .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-it .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-it .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-it .faq-lhs .slbl { margin-bottom: 14px; }
#pg-it .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-it .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-it .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-it .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-it .faq-q:hover { background: transparent; color: var(--or); }
#pg-it .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-it .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-it .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-it .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-it .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-it .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-it .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-it .sec2 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-it .sec2 .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-it .sec2 .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-it .sec2 .g3 .fc::before { display: none; }
#pg-it .sec2 .fc-ln { display: none; }
#pg-it .sec2 .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-it .sec2 .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-it .sec2 .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-it .sec2 .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === content-copywriting === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-copy .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-copy .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-copy .ph-hero-grid { grid-template-columns:1fr; }
  #pg-copy .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-copy .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-copy .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-copy .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-copy .step:last-child { padding-bottom: 0; }
#pg-copy .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-copy .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-copy .step > div:last-child { padding-top: 7px; }
#pg-copy .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-copy .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-copy .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-copy .faq-lhs .slbl { margin-bottom: 14px; }
#pg-copy .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-copy .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-copy .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-copy .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-copy .faq-q:hover { background: transparent; color: var(--or); }
#pg-copy .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-copy .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-copy .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-copy .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-copy .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-copy .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-copy .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-copy .sec2 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-copy .sec2 .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-copy .sec2 .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-copy .sec2 .g3 .fc::before { display: none; }
#pg-copy .sec2 .fc-ln { display: none; }
#pg-copy .sec2 .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-copy .sec2 .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-copy .sec2 .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-copy .sec2 .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === email-marketing === */
@keyframes mockFloat {
  0%,100% { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}
#pg-email .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-email .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-email .ph-hero-grid { grid-template-columns:1fr; }
  #pg-email .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-email .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-email .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-email .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-email .step:last-child { padding-bottom: 0; }
#pg-email .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-email .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-email .step > div:last-child { padding-top: 7px; }
#pg-email .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-email .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-email .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-email .faq-lhs .slbl { margin-bottom: 14px; }
#pg-email .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-email .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-email .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-email .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-email .faq-q:hover { background: transparent; color: var(--or); }
#pg-email .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-email .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-email .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-email .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-email .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-email .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-email .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-email .sec2 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-email .sec2 .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-email .sec2 .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-email .sec2 .g3 .fc::before { display: none; }
#pg-email .sec2 .fc-ln { display: none; }
#pg-email .sec2 .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-email .sec2 .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-email .sec2 .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-email .sec2 .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === video-motion-graphics === */
#pg-video .ph-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#pg-video .ph-mockup { display:flex; }
@media (max-width:900px) {
  #pg-video .ph-hero-grid { grid-template-columns:1fr; }
  #pg-video .ph-mockup { display:none !important; }
}
/* ── PROCESS STEPS ── */
#pg-video .steps { display: flex; flex-direction: column; border: none; border-radius: 0; background: transparent; overflow: visible; position: relative; gap: 0; }
#pg-video .steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 24px; width: 1px; background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05)); pointer-events: none; }
#pg-video .step { display: flex; padding: 0 0 30px; border-bottom: none; gap: 24px; align-items: flex-start; background: transparent; }
#pg-video .step:last-child { padding-bottom: 0; }
#pg-video .step-n { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 0; color: var(--or); flex-shrink: 0; line-height: 1; position: relative; z-index: 1; transition: background 0.22s, border-color 0.22s; }
#pg-video .step:hover .step-n { background: rgba(216,90,26,.13); border-color: rgba(216,90,26,.35); }
#pg-video .step > div:last-child { padding-top: 7px; }
#pg-video .step-t { font-size: 17px; letter-spacing: -0.2px; margin-bottom: 7px; color: var(--cr); }
#pg-video .step-d { font-size: 15px; line-height: 1.74; color: var(--cr3); }
/* ── FAQ ── */
#pg-video .faq-wrap { display: grid; grid-template-columns: 550px 1fr; gap: 80px; align-items: start; }
#pg-video .faq-lhs .slbl { margin-bottom: 14px; }
#pg-video .faq { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
#pg-video .faq-i { border-bottom: 1px solid var(--bd); background: transparent; }
#pg-video .faq-i:first-child { border-top: 1px solid var(--bd); }
#pg-video .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 15px; font-weight: 500; color: var(--cr); background: transparent; transition: color .2s; }
#pg-video .faq-q:hover { background: transparent; color: var(--or); }
#pg-video .faq-i.op .faq-q { background: transparent; color: var(--or); }
#pg-video .faq-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bd); font-size: 17px; line-height: 1; color: var(--or); transition: transform .3s, border-color .3s; }
#pg-video .faq-i.op .faq-ic { transform: rotate(45deg); border-color: var(--or); }
#pg-video .faq-a { padding: 0 0 24px 18px; font-size: 14.5px; line-height: 1.85; color: var(--cr3); background: transparent; border-left: 2px solid var(--or); }
@media (max-width:900px) {
  #pg-video .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  #pg-video .faq-q { padding: 18px 0; font-size: 14.5px; }
  #pg-video .faq-a { padding: 0 0 18px 14px; font-size: 14px; line-height: 1.7; }
}
/* ── SERVICE CARDS (editorial grid with hairline separators) ── */
#pg-video .sec2 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; }
#pg-video .sec2 .g3 .fc { padding: 44px 36px 40px; background: var(--bg2); border: none; border-radius: 0; transition: background 0.28s ease; }
#pg-video .sec2 .g3 .fc:hover { background: var(--bg3); transform: none; box-shadow: none; border-color: transparent; }
#pg-video .sec2 .g3 .fc::before { display: none; }
#pg-video .sec2 .fc-ln { display: none; }
#pg-video .sec2 .fc-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(216,90,26,.08); border: 1px solid rgba(216,90,26,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: .06em; flex-shrink: 0; }
#pg-video .sec2 .fc-t { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 13px; line-height: 1.2; color: var(--cr); }
#pg-video .sec2 .fc-d { font-size: 15px; line-height: 1.78; color: var(--cr3); }
#pg-video .sec2 .fc-tags .tag { font-size: 11px; padding: 4px 12px; border-radius: 2px; border-color: var(--bd2); color: var(--cr3); }

/* === ABOUT PAGE === */
/* ── ABOUT HERO 2-COL ───────────────────────────────── */
#pg-about .ph-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media(max-width:860px) {
  #pg-about .ph-hero-grid { grid-template-columns: 1fr; }
  #pg-about .ph-right { display: none !important; }
}

/* ── TEAM GRID ──────────────────────────────────────── */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tm-card {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 16px;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  animation: tmIn .5s ease forwards;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .2s, border-color .2s;
}
.tm-card:hover {
  box-shadow: 0 4px 20px rgba(216,90,26,.12);
  border-color: rgba(216,90,26,.3);
}
@keyframes tmIn {
  to { opacity: 1; transform: translateY(0); }
}
.tm-card:nth-child(1) { animation-delay: .05s; }
.tm-card:nth-child(2) { animation-delay: .12s; }
.tm-card:nth-child(3) { animation-delay: .19s; }
.tm-card:nth-child(4) { animation-delay: .26s; }
.tm-card:nth-child(5) { animation-delay: .33s; }
.tm-card:nth-child(6) { animation-delay: .40s; }
.tm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.tm-name {
  font-size: 11px;
  font-weight: 700;
  color: #0D0D0D;
  text-align: center;
  line-height: 1.3;
}
.tm-role {
  font-size: 9.5px;
  color: #7A7A7A;
  text-align: center;
  line-height: 1.4;
}
.tm-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 4px rgba(34,197,94,.4); }
  50%     { box-shadow: 0 0 10px rgba(34,197,94,.75); }
}
.tm-footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.tm-footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D85A1A;
  flex-shrink: 0;
}
.tm-footer-text {
  font-size: 10.5px;
  color: #3A3A3A;
  font-weight: 500;
}
.tm-footer-text strong {
  color: #0D0D0D;
  font-weight: 700;
}

/* ── STEPS STYLING ──────────────────────────────────── */
#pg-about .steps {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  gap: 0;
}
#pg-about .steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(216,90,26,.65), rgba(216,90,26,.05));
  pointer-events: none;
}
#pg-about .step {
  display: flex;
  padding: 0 0 30px;
  border-bottom: none;
  gap: 24px;
  align-items: flex-start;
  background: transparent;
}
#pg-about .step:last-child {
  padding-bottom: 0;
}
#pg-about .step-n {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14);
  background: #EDEEF2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 0;
  color: #D85A1A;
  opacity: 1;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: background 0.22s, border-color 0.22s;
}
#pg-about .step:hover .step-n {
  background: rgba(216,90,26,.13);
  border-color: rgba(216,90,26,.35);
}
#pg-about .step > div:last-child {
  padding-top: 7px;
}
#pg-about .step-t {
  font-size: 17px;
  letter-spacing: -0.2px;
  margin-bottom: 7px;
  color: #0D0D0D;
  font-weight: 600;
}
#pg-about .step-d {
  font-size: 15px;
  line-height: 1.74;
  color: #7A7A7A;
}

/* Contact Form Response Messages */
.contact-response {
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	border: 1.5px solid;
	margin-bottom: 20px;
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-response--ok {
	background: rgba(34, 197, 94, 0.08);
	border-color: rgba(34, 197, 94, 0.3);
	color: #16a34a;
}

.contact-response--err {
	background: rgba(220, 38, 38, 0.08);
	border-color: rgba(220, 38, 38, 0.3);
	color: #b91c1c;
}