/*
  OrionSoft Plans — Central Stylesheet
  All plan-page CSS is consolidated here.
  Pages using this stylesheet:
  SEO Plans, PPC Plans, Ecommerce SEO, Local Maps SEO, Social Media Plans.
*/


/* ===== SOURCE: css/ecommerce-seo.css ===== */
:root {
  --blue: #168fe8;
  --blue2: #075f9e;
  --ink: #0b0d10;
  --muted: #566474;
  --line: #e2e8ed;
  --soft: #f5faff;
  --green: #35b34a;
  --yellow: #ffbd1b;
  --orange: #ff8a16;
  --purple: #a866ee;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background: #fff;
  overflow-x: hidden
}

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

.container {
  width: min(1460px, calc(100% - 48px));
  margin: auto
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 3px 20px #0000000c
}

.topbar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 max(24px, calc((100vw - 1460px)/2));
  font-size: 14px;
  color: #4d4d4d
}

.topbar a:hover {
  color: var(--blue)
}

.navbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  width: 260px;
  flex: 0 0 260px
}

.brand img {
  width: 250px;
  height: auto;
  display: block
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 42px;
  flex: 1
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none
}

.nav-links a {
  font-weight: 700;
  font-size: 17px;
  padding: 28px 0;
  display: block
}

.nav-links a span {
  font-size: 17px;
  color: #444;
  margin-left: 5px
}

.nav-links li.active a,
.nav-links a:hover {
  color: var(--blue)
}

.proposal-btn {
  background: var(--green);
  color: #fff;
  padding: 15px 24px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap
}

.menu-toggle {
  display: none;
  background: none;
  border: 0
}

.hero {
  min-height: 580px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 25px;
  align-items: center;
  padding-top: 136px;
  padding-bottom: 60px
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #536173;
  font-size: 16px;
  margin-bottom: 20px
}

.breadcrumbs a:hover {
  color: var(--blue)
}

.hero-copy h1 {
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  max-width: 760px
}

.hero-copy h1 span {
  display: block;
  color: var(--blue)
}

.hero-copy h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 25px 0;
  color: #16212d
}

.hero-copy p {
  font-size: 19px;
  color: #26313d;
  max-width: 730px;
  margin: 0 0 20px
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 25px;
  font-weight: 800;
  border-radius: 5px;
  transition: .2s
}

.btn:hover {
  transform: translateY(-2px)
}

.btn.primary {
  background: var(--blue);
  color: #fff
}

.btn.secondary {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: #fff
}

.hero-visual {
  width: 100%;
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: #eaf7ff
}

.orb-a {
  width: 410px;
  height: 410px;
  right: 0;
  top: 20px
}

.orb-b {
  width: 190px;
  height: 190px;
  left: 20px;
  bottom: 0;
  background: #f3f9ff
}

.shopping-scene {
  width: 570px;
  height: 430px;
  position: relative;
  z-index: 2
}

.screen {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 72%;
  height: 67%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 55px #0b5f9c22;
  border: 9px solid #f4f9fc;
  overflow: hidden
}

.screen-bar {
  height: 42px;
  background: #f4f8fb;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px
}

.screen-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b7c6d0
}

.screen-bar b {
  font-size: 10px;
  margin-left: auto;
  color: #557082
}

.analytics-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.metric {
  background: #f7fbfe;
  border-radius: 10px;
  padding: 13px
}

.metric small,
.chart small {
  display: block;
  color: #748494;
  font-size: 10px
}

.metric strong {
  font-size: 23px;
  display: block
}

.metric i {
  display: block;
  height: 4px;
  width: 60%;
  margin-top: 8px;
  background: #5bc77b;
  border-radius: 10px
}

.metric:nth-child(2) i {
  background: #5eacf0;
  width: 76%
}

.chart {
  grid-column: 1/-1;
  background: #f7fbfe;
  border-radius: 10px;
  padding: 13px
}

.bars {
  height: 105px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 12px
}

.bars b {
  display: block;
  width: 9%;
  background: #61aef0;
  border-radius: 5px 5px 0 0
}

.bars b:nth-child(1) {
  height: 35%
}

.bars b:nth-child(2) {
  height: 47%
}

.bars b:nth-child(3) {
  height: 41%
}

.bars b:nth-child(4) {
  height: 63%
}

.bars b:nth-child(5) {
  height: 58%
}

.bars b:nth-child(6) {
  height: 77%
}

.bars b:nth-child(7) {
  height: 92%
}

.bars b:nth-child(8) {
  height: 100%;
  background: #54c878
}

.product-card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 255px;
  background: #fff;
  border-radius: 17px;
  padding: 14px;
  box-shadow: 0 18px 45px #0b2b401c;
  display: flex;
  gap: 12px;
  align-items: center
}

.product-image {
  width: 65px;
  height: 65px;
  border-radius: 12px;
  background: #e9f6ff;
  display: grid;
  place-items: center;
  font-size: 31px
}

.product-card b {
  display: block;
  font-size: 9px;
  color: var(--blue)
}

.product-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.25
}

.product-card small {
  font-size: 9px;
  color: #7c8792
}

.search-card {
  position: absolute;
  left: 0;
  bottom: 38px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 15px 35px #0b2b401b;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px
}

.search-card span {
  font-size: 21px;
  color: var(--blue)
}

.search-card em {
  background: #e9f7ed;
  color: #24913c;
  font-style: normal;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 7px
}

.featured {
  padding: 30px 0 55px;
  border-bottom: 1px solid var(--line)
}

.featured h2 {
  font-size: 31px;
  text-align: center;
  margin-bottom: 36px
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-items: center
}

.logo-row span {
  text-align: center;
  font-weight: 800;
  color: #337eb2;
  font-size: 16px
}

.intro {
  padding: 85px 0;
  background: #f7fbfe
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}

.eyebrow {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue)
}

.center {
  text-align: center
}

.section-title {
  font-size: 42px;
  line-height: 1.15;
  margin: 10px 0 25px;
  font-weight: 800;
  letter-spacing: -1px
}

.section-title.left {
  text-align: left
}

.intro p,
.case-study p {
  font-size: 17px;
  color: #40505f;
  margin-bottom: 16px
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.stat-grid>div {
  background: #fff;
  padding: 27px;
  border-radius: 18px;
  border: 1px solid #e9f0f5;
  box-shadow: 0 12px 30px #15324b0b
}

.stat-grid strong {
  font-size: 33px;
  color: #d9e8f4
}

.stat-grid h3 {
  font-size: 20px;
  margin: 0 0 5px
}

.stat-grid p {
  font-size: 14px;
  margin: 0
}

.featured-work {
  padding: 85px 0
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 42px
}

.feature-grid article {
  background: #fff;
  border: 1px solid #e6edf2;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 35px #102c4010
}

.icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px
}

.feature-grid h3 {
  font-size: 21px
}

.feature-grid p {
  color: #586776;
  margin-top: 8px
}

.results-cta {
  padding: 42px 30px;
  background: linear-gradient(135deg, #075d9d, #0f7bc8);
  color: #fff;
  text-align: center
}

.results-cta h2 {
  font-size: 31px
}

.results-cta p {
  max-width: 900px;
  margin: 6px auto 25px
}

.results-cta>div>div,
.final-cta>div>div {
  display: flex;
  justify-content: center;
  gap: 16px
}

.call-btn,
.free-btn {
  display: inline-flex;
  padding: 15px 26px;
  border-radius: 4px;
  font-weight: 800
}

.call-btn {
  border: 2px solid var(--yellow)
}

.free-btn {
  background: var(--yellow);
  color: #111
}

.case-study {
  padding: 85px 0;
  background: #fafcfd
}

.tick-list {
  list-style: none;
  margin-top: 24px
}

.tick-list li {
  margin: 13px 0;
  padding-left: 33px;
  position: relative
}

.tick-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px
}

.dashboard {
  background: #fff;
  border: 1px solid #e3e9ee;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 18px 50px #14324b10
}

.dash-head {
  display: flex;
  justify-content: space-between;
  color: #647484;
  font-size: 12px
}

.big-number {
  font-size: 48px;
  font-weight: 800;
  margin: 20px 0;
  color: var(--blue)
}

.big-number small {
  font-size: 12px;
  color: #667686;
  font-weight: 600
}

.dash-chart {
  height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid #e4ebf0
}

.dash-chart i {
  display: block;
  flex: 1;
  background: #63aee9;
  border-radius: 8px 8px 0 0
}

.dash-chart i:nth-child(1) {
  height: 35%
}

.dash-chart i:nth-child(2) {
  height: 43%
}

.dash-chart i:nth-child(3) {
  height: 50%
}

.dash-chart i:nth-child(4) {
  height: 48%
}

.dash-chart i:nth-child(5) {
  height: 66%
}

.dash-chart i:nth-child(6) {
  height: 78%
}

.dash-chart i:nth-child(7) {
  height: 94%;
  background: #50c978
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px
}

.dash-stats span {
  font-size: 11px;
  color: #687888
}

.dash-stats b {
  display: block;
  font-size: 20px;
  color: #17212b
}

.benefits {
  padding: 85px 0
}

.section-lead {
  max-width: 900px;
  margin: 0 auto 45px;
  text-align: center;
  color: #566474;
  font-size: 17px
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.benefit-grid article {
  min-height: 260px;
  padding: 35px 30px;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e7edf2;
  box-shadow: 0 12px 35px #102c400c
}

.benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800
}

.blue {
  background: #e9f7ff;
  color: #21aeca
}

.purple {
  background: #f5eaff;
  color: #a866ee
}

.green {
  background: #e9fff0;
  color: #42d96c
}

.yellow {
  background: #fffde0;
  color: #c7ad00
}

.navy {
  background: #eaf1ff;
  color: #1764d1
}

.orange {
  background: #fff1e4;
  color: #ed8112
}

.benefit-grid h3 {
  font-size: 20px;
  margin-bottom: 13px
}

.benefit-grid p {
  color: #5b6976
}

.platforms {
  padding: 85px 0;
  background: #f8fbfd
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px
}

.platform-grid span {
  min-height: 95px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e3eaf0;
  border-radius: 15px;
  font-weight: 800;
  font-size: 20px;
  color: #365b73;
  box-shadow: 0 8px 24px #102c4008
}

.tools {
  padding: 70px 0
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 38px
}

.tool-grid span {
  padding: 24px 10px;
  text-align: center;
  border: 1px solid #e5ebef;
  border-radius: 12px;
  font-weight: 700;
  color: #486174;
  background: #fff
}

.process {
  padding: 85px 0;
  background: #fff
}

.process-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px
}

.process-row article {
  padding: 28px;
  background: #f6fbfe;
  border-radius: 16px;
  border: 1px solid #e2edf4
}

.process-row span {
  font-size: 28px;
  color: #c9d7e2;
  font-weight: 800
}

.process-row h3 {
  font-size: 20px;
  margin: 6px 0
}

.process-row p {
  font-size: 14px;
  color: #596a79
}

.service-details {
  padding: 80px 0;
  background: #fff
}

.detail-row {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px;
  align-items: center;
  padding: 38px 5%;
  background: #f5faff;
  margin-top: 24px;
  min-height: 270px
}

.detail-row.reverse {
  grid-template-columns: 1fr 330px
}

.detail-row.reverse .detail-image {
  grid-column: 2
}

.detail-row.reverse>div:last-child {
  grid-column: 1;
  grid-row: 1
}

.detail-row h3 {
  font-size: 27px;
  color: #3d91ce;
  line-height: 1.2;
  margin-bottom: 12px
}

.detail-row p {
  font-size: 17px;
  color: #34424e
}

.detail-image {
  height: 225px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 15px 35px #15324b14
}

.blue-bg {
  background: #dff4ff
}

.green-bg {
  background: #e7faec
}

.purple-bg {
  background: #f3e9ff
}

.orange-bg {
  background: #fff0e2
}

.yellow-bg {
  background: #fffbe1
}

.teal-bg {
  background: #e1f8fa
}

.navy-bg {
  background: #eaf1ff
}

.abstract-chart {
  font-size: 74px;
  color: var(--blue);
  text-align: center
}

.abstract-chart strong {
  display: block;
  font-size: 20px
}

.speed-gauge {
  font-size: 65px;
  color: #2ab45d;
  text-align: center
}

.speed-gauge strong {
  display: block;
  font-size: 18px;
  color: #27724a
}

.product-ui {
  background: #fff;
  border-radius: 15px;
  padding: 25px 42px;
  font-size: 18px;
  color: #a866ee;
  box-shadow: 0 15px 30px #0000000d
}

.product-ui b {
  color: #2bbd64
}

.code-ui {
  font-family: monospace;
  font-size: 42px;
  color: #ef8416;
  text-align: center
}

.code-ui b {
  display: block;
  font-size: 18px
}

.schema-ui {
  font-family: monospace;
  font-size: 48px;
  color: #c4a800;
  text-align: center
}

.schema-ui strong {
  display: block;
  font-size: 18px
}

.snippet-ui {
  background: #fff;
  border-radius: 15px;
  padding: 28px 45px;
  color: #14a6ad;
  font-size: 28px;
  box-shadow: 0 15px 30px #0000000d
}

.snippet-ui b {
  display: block;
  font-size: 14px;
  color: #356c71
}

.brand-ui {
  font-size: 25px;
  color: #1c63c7;
  text-align: center
}

.brand-ui strong {
  font-size: 34px
}

.plans {
  padding: 85px 0;
  background: #fff
}

.center-note {
  text-align: center;
  color: #4c5965;
  margin-bottom: 38px
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #dce4ea
}

.plan-card {
  padding: 34px 32px;
  min-height: 470px;
  border-right: 1px solid #dce4ea;
  position: relative;
  background: #fff
}

.plan-card:last-child {
  border-right: 0
}

.plan-card.popular {
  border: 2px solid var(--orange);
  margin: -14px 0
}

.plan-card .badge {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--orange);
  color: #fff;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800
}

.plan-card h3 {
  font-size: 26px;
  color: var(--blue);
  margin-bottom: 5px
}

.plan-card>strong {
  font-size: 17px
}

.plan-card>p {
  font-size: 14px;
  color: #637280;
  /* min-height: 58px; */
  margin: 12px 0 16px
}

.plan-card ul {
  list-style: none;
  border-top: 1px solid #e6ebef;
  padding-top: 15px
}

.plan-card li {
  font-size: 14px;
  margin: 10px 0;
  padding-left: 24px;
  position: relative
}

.plan-card li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #f3b727;
  font-weight: 900
}

.plan-card>a {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px
}

.comparison {
  padding: 0 0 75px
}

.comparison-toggle {
  width: 100%;
  border: 0;
  background: #168fe8;
  color: #fff;
  padding: 20px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  gap: 12px
}

.comparison-table {
  display: none;
  border: 1px solid #dce4ea;
  border-top: 0
}

.comparison-table.show {
  display: block
}

.table-row {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  border-bottom: 1px solid #e3e9ed
}

.table-row:last-child {
  border-bottom: 0
}

.table-row span {
  padding: 14px 18px
}

.table-row span:not(:first-child) {
  text-align: center
}

.table-row.head {
  font-weight: 800;
  background: #f2f8fc;
  color: #176fae
}

.faq {
  padding: 85px 0;
  background: #f8fbfd
}

.faq-list {
  max-width: 1000px;
  margin: 40px auto 0
}

.faq-item {
  background: #fff;
  border-bottom: 1px solid #dfe7ed
}

.faq-item button {
  width: 100%;
  padding: 22px 20px;
  border: 0;
  background: #fff;
  text-align: left;
  font: inherit;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  cursor: pointer
}

.faq-answer {
  display: none;
  padding: 0 20px 20px;
  color: #5a6875;
  font-size: 15px
}

.faq-item.open .faq-answer {
  display: block
}

.final-cta {
  padding: 48px 30px;
  background: linear-gradient(135deg, #075d9d, #0f7bc8);
  color: #fff;
  text-align: center
}

.final-cta h2 {
  font-size: 31px
}

.final-cta p {
  max-width: 900px;
  margin: 5px auto 25px
}

.final-cta>div>div {
  display: flex;
  justify-content: center;
  gap: 16px
}

.final-cta .call-btn,
.final-cta .free-btn {
  display: inline-flex;
  padding: 15px 26px;
  border-radius: 4px;
  font-weight: 800
}

.final-cta .call-btn {
  border: 2px solid var(--yellow)
}

.final-cta .free-btn {
  background: var(--yellow);
  color: #111
}

.footer {
  background: #071827;
  color: #dbe6ef;
  padding-top: 55px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 45px;
  padding-bottom: 40px
}

.footer-logo {
  width: 220px;
  background: #fff;
  border-radius: 4px;
  padding: 7px;
  margin-bottom: 14px
}

.footer p {
  color: #aebdca;
  max-width: 450px
}

.footer h4 {
  color: #fff;
  margin-bottom: 14px
}

.footer a {
  display: block;
  color: #b8c7d3;
  margin: 8px 0
}

.footer a:hover {
  color: #fff
}

.footer-bottom {
  border-top: 1px solid #203543;
  text-align: center;
  padding: 17px;
  color: #9cafbd;
  font-size: 13px
}

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;
  color: #fff;
  padding: 20px 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  z-index: 1200
}

.cookie button {
  background: #ffcc00;
  border: 0;
  padding: 14px 20px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer
}

.cookie.hide {
  display: none
}

.top-btn {
  position: fixed;
  right: 24px;
  bottom: 105px;
  width: 54px;
  height: 110px;
  border: 2px solid #a9b2ba;
  border-radius: 28px;
  background: #fff;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px
}

.top-btn small {
  font-size: 10px;
  font-weight: 800
}

.chat-btn {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #168fe8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 25px;
  z-index: 1100;
  box-shadow: 0 10px 30px #0b5f9c33
}

@media(max-width:1050px) {
  .nav-links {
    gap: 18px
  }

  .nav-links a {
    font-size: 14px
  }

  .nav-wrap {
    gap: 18px
  }

  .brand {
    width: 220px;
    flex-basis: 220px
  }

  .brand img {
    width: 215px
  }

  .hero {
    grid-template-columns: 1fr
  }

  .hero-copy {
    padding-top: 15px
  }

  .hero-visual {
    min-height: 430px
  }

  .two-col {
    grid-template-columns: 1fr
  }

  .feature-grid,
  .benefit-grid,
  .process-row {
    grid-template-columns: 1fr 1fr
  }

  .platform-grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .detail-row,
  .detail-row.reverse {
    grid-template-columns: 250px 1fr
  }

  .detail-row.reverse .detail-image {
    grid-column: 2
  }

  .detail-row.reverse>div:last-child {
    grid-column: 1
  }
}

@media(max-width:760px) {
  .container {
    width: min(100% - 28px, 1460px)
  }

  .topbar {
    display: none
  }

  .navbar {
    min-height: 72px
  }

  .brand {
    width: 190px;
    flex-basis: 190px
  }

  .brand img {
    width: 185px
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
    flex-direction: column;
    gap: 5px
  }

  .menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #111
  }

  .nav-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    box-shadow: 0 18px 35px #00000012
  }

  .nav-wrap.open {
    display: flex
  }

  .nav-links {
    flex-direction: column;
    gap: 0
  }

  .nav-links a {
    padding: 10px 0
  }

  .proposal-btn {
    text-align: center
  }

  .hero {
    padding-top: 25px
  }

  .hero-copy h1 {
    font-size: 38px
  }

  .hero-copy h2 {
    font-size: 22px
  }

  .hero-copy p {
    font-size: 16px
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-visual {
    height: 390px
  }

  .shopping-scene {
    width: 100%;
    transform: scale(.84)
  }

  .logo-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .featured h2 {
    font-size: 23px
  }

  .section-title {
    font-size: 30px
  }

  .stat-grid,
  .feature-grid,
  .benefit-grid,
  .process-row {
    grid-template-columns: 1fr
  }

  .results-cta h2,
  .final-cta h2 {
    font-size: 24px
  }

  .results-cta>div>div,
  .final-cta>div>div {
    flex-direction: column
  }

  .platform-grid {
    grid-template-columns: 1fr
  }

  .tool-grid {
    grid-template-columns: 1fr 1fr
  }

  .detail-row,
  .detail-row.reverse {
    grid-template-columns: 1fr;
    padding: 25px
  }

  .detail-row.reverse .detail-image,
  .detail-row.reverse>div:last-child {
    grid-column: auto;
    grid-row: auto
  }

  .detail-image {
    height: 190px
  }

  .plan-grid {
    grid-template-columns: 1fr;
    border: 0;
    gap: 18px
  }

  .plan-card,
  .plan-card.popular {
    border: 1px solid #dce4ea;
    margin: 0;
    min-height: auto
  }

  .table-row {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    font-size: 12px
  }

  .table-row span {
    padding: 10px 6px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }

  .cookie {
    padding: 14px;
    gap: 12px;
    font-size: 12px
  }

  .cookie button {
    padding: 10px
  }

  .top-btn {
    display: none
  }
}


/* OrionSoft standalone plan-page overrides */
:root {
  --orion-blue: #168fe6;
  --orion-orange: #ff7a00
}

/* Plan cards: blue border in normal state, orange only on hover */
.plan-card {
  border: 1.5px solid var(--orion-blue) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.plan-card:hover {
  border-color: var(--orion-orange) !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: var(--orion-blue) !important
}

.plan-card.popular:hover {
  border-color: var(--orion-orange) !important
}

/* For grid layouts where cards use divider borders */
.plans-grid {
  border-color: var(--orion-blue) !important
}

/* Standalone pages are inserted inside an existing WordPress header/footer */
.site-header,
.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

/* Quote modal */
.orion-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 32, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999
}

.orion-modal.open {
  display: flex
}

.orion-modal-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border-radius: 2px;
  position: relative
}

.orion-modal-info {
  background: #075d8f;
  color: #fff;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.orion-modal-info h2 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff
}

.orion-modal-info p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
  color: #eaf7ff
}

.orion-modal-info .modal-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: #bfe9ff;
  margin-bottom: 7px
}

.orion-modal-info .modal-phone {
  font-size: 31px;
  font-weight: 800;
  color: var(--orion-orange);
  margin-bottom: 25px;
  white-space: nowrap
}

.orion-modal-info ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.orion-modal-info li {
  margin: 11px 0;
  font-size: 15px
}

.orion-modal-info li:before {
  content: '✓';
  color: #fff;
  font-weight: 800;
  margin-right: 10px
}

.orion-modal-form {
  padding: 36px 38px 32px;
  background: #fff
}

.orion-modal-form h3 {
  font-size: 25px;
  margin: 0 0 5px;
  color: #075d8f
}

.orion-modal-form .form-note {
  margin: 0 0 20px;
  color: #64727d;
  font-size: 13px
}

.orion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.orion-form-grid .full {
  grid-column: 1/-1
}

.orion-modal-form label,
.orion-modal-form legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2934;
  margin-bottom: 6px
}

.orion-modal-form label span {
  color: var(--orion-orange)
}

.orion-modal-form input,
.orion-modal-form select,
.orion-modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd7df;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border-radius: 1px
}

.orion-modal-form input:focus,
.orion-modal-form select:focus,
.orion-modal-form textarea:focus {
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 2px rgba(22, 143, 230, .1)
}

.orion-modal-form textarea {
  height: 80px;
  resize: vertical
}

.orion-modal-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.orion-modal-form legend {
  margin-bottom: 8px
}

.orion-modal-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 2px
}

.orion-modal-form .checks label {
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.orion-modal-form .checks input {
  width: auto
}

.orion-submit {
  width: 100%;
  border: 0;
  background: var(--orion-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 4px
}

.orion-submit:hover {
  background: #e96e00
}

.orion-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d2d39;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  z-index: 2
}

.orion-modal-phone-link {
  color: #fff;
  text-decoration: none
}

.orion-modal-phone-link:hover {
  color: #fff
}

@media(max-width:760px) {
  .orion-modal {
    padding: 10px
  }

  .orion-modal-box {
    grid-template-columns: 1fr;
    max-height: 96vh
  }

  .orion-modal-info {
    padding: 28px 24px
  }

  .orion-modal-info h2 {
    font-size: 25px
  }

  .orion-modal-info .modal-phone {
    font-size: 25px;
    margin-bottom: 10px
  }

  .orion-modal-info ul {
    display: none
  }

  .orion-modal-form {
    padding: 25px 20px
  }

  .orion-form-grid {
    grid-template-columns: 1fr
  }

  .orion-form-grid .full {
    grid-column: auto
  }
}


/* ===== OrionSoft final layout corrections ===== */
.site-header,
.footer,
header.site-header,
footer.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

main {
  display: block
}

section {
  scroll-margin-top: 20px
}

.plans-grid,
.plan-grid {
  align-items: stretch !important
}

.plan-card {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #168fe6 !important;
  transition: border-color .22s ease, box-shadow .22s ease !important
}

.plan-card:hover,
.plan-card.popular:hover {
  border-color: #ff7a00 !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: #168fe6 !important
}

.plan-head,
.plan-top {
  flex-shrink: 0
}

.plan-card .checks,
.plan-card>ul {
  flex: 1 1 auto
}

.plan-card .quote,
.plan-card .plan-head>a,
.plan-card>a {
  margin-top: auto
}

.faq-answer {
  display: none !important
}

.faq-item.open .faq-answer {
  display: block !important
}

img {
  max-width: 100%
}

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

.orion-modal {
  z-index: 99999 !important
}

@media(max-width:1100px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:800px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: 1fr !important
  }

  .plan-card {
    min-height: auto !important
  }
}

/* exact desktop pricing columns */
@media(min-width:1101px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }
}


/* ===== SOURCE: css/local-map-seo.css ===== */
:root {
  --blue: #1594f4;
  --blue2: #075d9d;
  --navy: #071827;
  --ink: #101820;
  --muted: #566474;
  --line: #e4ebf1;
  --soft: #f3f9fd;
  --yellow: #ffbf19
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.65
}

.container {
  width: min(92%, 1460px);
  margin: auto
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 5px 24px #102c4010
}

.topbar {
  text-align: right;
  padding: 10px 7%;
  font-size: 15px;
  color: #4d5660
}

.topbar a {
  font-weight: 700
}

.topbar span {
  margin: 0 8px
}

.navbar {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 30px
}

.brand {
  width: 260px;
  display: flex;
  align-items: center
}

.brand img {
  width: 250px;
  height: auto
}

.nav-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 35px
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0
}

.nav-links a {
  font-weight: 700
}

.nav-links a span {
  font-size: 18px;
  margin-left: 3px
}

.proposal-btn {
  background: #35b34a;
  color: #fff;
  padding: 15px 24px;
  border-radius: 4px;
  font-weight: 800
}

.menu-toggle {
  display: none;
  border: 0;
  background: none
}

.hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 40px;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 70px
}

.breadcrumbs {
  font-size: 15px;
  color: #6b7884;
  margin-bottom: 18px
}

.breadcrumbs span {
  padding: 0 9px
}

.breadcrumbs strong {
  color: #536170
}

.hero-copy h1 {
  font-size: 58px;
  line-height: 1.08;
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -2px
}

.hero-copy h1 span {
  color: var(--blue)
}

.hero-copy h2 {
  font-size: 27px;
  line-height: 1.3;
  margin: 0 0 25px
}

.hero-copy p {
  font-size: 18px;
  color: #35424f;
  max-width: 760px
}

.hero-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px
}

.btn {
  padding: 16px 24px;
  border-radius: 4px;
  font-weight: 800;
  display: inline-flex;
  justify-content: center
}

.primary {
  background: var(--blue);
  color: #fff
}

.secondary {
  border: 2px solid var(--blue);
  color: var(--blue)
}

.hero-visual {
  min-height: 500px;
  position: relative;
  display: grid;
  place-items: center
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: #eaf6ff
}

.shape-a {
  width: 450px;
  height: 450px;
  right: 3%;
  top: 10%
}

.shape-b {
  width: 190px;
  height: 190px;
  left: 0;
  bottom: 0
}

.map-card {
  width: min(520px, 92%);
  height: 390px;
  background: #fff;
  border-radius: 35px;
  box-shadow: 0 25px 70px #0b5f9c20;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 10px solid #fff
}

.map-top {
  height: 60px;
  background: #f4f8fb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-weight: 800
}

.map-top b {
  font-size: 12px;
  color: var(--blue)
}

.map-art {
  height: calc(100% - 60px);
  position: relative;
  background: linear-gradient(140deg, #e8f7ff, #f8fbf6)
}

.road {
  position: absolute;
  height: 22px;
  background: #fff;
  border: 1px solid #dbe5eb;
  transform: rotate(-22deg);
  border-radius: 20px
}

.r1 {
  width: 520px;
  left: -60px;
  top: 75px
}

.r2 {
  width: 450px;
  left: 50px;
  top: 180px;
  transform: rotate(25deg)
}

.r3 {
  width: 420px;
  left: 90px;
  top: 95px;
  transform: rotate(68deg)
}

.pin {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50% 50% 50% 0;
  background: #f34f3d;
  color: #fff;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  font-size: 17px;
  box-shadow: 0 8px 18px #f34f3d35
}

.pin::first-letter {
  transform: rotate(45deg)
}

.pin1 {
  left: 52%;
  top: 34%
}

.pin2 {
  left: 28%;
  top: 56%;
  background: #1594f4
}

.pin3 {
  left: 70%;
  top: 64%;
  background: #34b85a
}

.you {
  position: absolute;
  left: 44%;
  top: 46%;
  background: #071827;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800
}

.rank-card {
  position: absolute;
  right: 2%;
  bottom: 8%;
  z-index: 4;
  background: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 15px 40px #0c314a20
}

.rank-card small,
.rank-card span {
  display: block;
  color: #687686;
  font-size: 11px;
  font-weight: 700
}

.rank-card strong {
  display: block;
  font-size: 38px;
  color: var(--blue);
  line-height: 1.1
}

.featured {
  padding: 45px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.featured h2 {
  text-align: center;
  font-size: 26px
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 35px
}

.logo-row span {
  text-align: center;
  font-weight: 800;
  color: #2773ad;
  font-size: 18px
}

.intro {
  padding: 90px 0;
  background: #f7fbfe
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}

.eyebrow {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue)
}

.center {
  text-align: center
}

.section-title {
  font-size: 42px;
  line-height: 1.15;
  margin: 10px 0 25px;
  font-weight: 800
}

.section-title.left {
  text-align: left
}

.intro p {
  font-size: 17px;
  color: #40505f
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.stat-grid>div {
  background: #fff;
  padding: 27px;
  border-radius: 18px;
  border: 1px solid #e9f0f5;
  box-shadow: 0 12px 30px #15324b0b
}

.stat-grid strong {
  font-size: 33px;
  color: #d9e8f4
}

.stat-grid h3 {
  font-size: 21px;
  margin: 0 0 5px
}

.stat-grid p {
  font-size: 14px;
  margin: 0
}

.benefits {
  padding: 85px 0
}

.section-lead {
  max-width: 900px;
  margin: 0 auto 45px;
  text-align: center;
  color: #566474;
  font-size: 17px
}

.why-box {
  background: #eef8ff;
  padding: 45px 55px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 55px;
  margin-top: 40px
}

.why-tabs button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 20px;
  background: #fff;
  border: 0;
  border-left: 4px solid var(--blue);
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 20px #12364d0a
}

.why-tabs button.active {
  background: #4c9ad5;
  color: #fff
}

.why-content {
  padding-top: 5px
}

.why-panel {
  display: none
}

.why-panel.active {
  display: block
}

.why-panel h3 {
  font-size: 29px;
  margin: 0 0 14px
}

.why-panel p {
  font-size: 17px;
  max-width: 800px
}

.process {
  padding: 85px 0;
  background: #fff
}

.process-list {
  margin-top: 45px
}

.process-item {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px;
  align-items: center;
  background: #f3f9fd;
  padding: 0 55px 0 0;
  min-height: 235px;
  margin-bottom: 24px;
  border-radius: 0 20px 20px 0;
  overflow: hidden
}

.process-item.reverse {
  grid-template-columns: 1fr 330px;
  padding: 0 0 0 55px;
  border-radius: 20px 0 0 20px
}

.process-img {
  height: 235px
}

.process-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.process-item h3 {
  color: #4797d3;
  font-size: 27px;
  margin: 4px 0 8px
}

.process-item p {
  font-size: 16px
}

.step {
  display: inline-flex;
  background: #e1f2ff;
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 12px
}

.plans-section {
  padding: 90px 0;
  background: #f7fbfe
}

.center-note {
  text-align: center;
  color: #687686;
  font-weight: 700;
  letter-spacing: .5px
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 45px
}

.plan-card {
  background: #fff;
  border: 1px solid #e4e9ed;
  border-radius: 14px;
  padding: 30px 25px;
  position: relative;
  box-shadow: 0 10px 30px #102e450b;
  display: flex;
  flex-direction: column
}

.plan-card.popular {
  border: 2px solid var(--blue);
  transform: translateY(-8px);
  box-shadow: 0 18px 45px #1594f42b
}

.popular-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--blue);
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800
}

.plan-top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 15px
}

.plan-top span {
  display: block;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 1px
}

.plan-top strong {
  font-size: 21px
}

.plan-desc {
  font-size: 14px;
  color: #667482;
  /* min-height: 68px */
}

.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 5px 0 25px;
  flex: 1
}

.plan-card li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 14px
}

.plan-card li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e5f5ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800
}

.quote {
  display: block;
  text-align: center;
  border: 2px solid var(--blue);
  color: var(--blue);
  padding: 12px;
  border-radius: 5px;
  font-weight: 800
}

.quote.gold {
  background: var(--blue);
  color: #fff
}

.comparison {
  padding: 65px 0
}

.comparison-toggle {
  display: block;
  margin: auto;
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 16px 24px;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer
}

.comparison-table-wrap {
  display: none;
  overflow: auto;
  margin-top: 25px
}

.comparison-table-wrap.show {
  display: block
}

.comparison table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px
}

.comparison th,
.comparison td {
  border: 1px solid var(--line);
  padding: 15px;
  text-align: center
}

.comparison th:first-child {
  text-align: left
}

.comparison thead {
  background: #eef7ff
}

.why-orion {
  padding: 80px 0;
  background: #f7fbfe
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px
}

.feature-grid>div {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #e6edf3
}

.feature-grid span {
  color: var(--blue);
  font-size: 30px;
  font-weight: 800
}

.feature-grid h3 {
  font-size: 20px;
  margin: 5px 0
}

.feature-grid p {
  color: #536271;
  font-size: 14px
}

.faq {
  padding: 85px 0
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 45px
}

.faq-item {
  border-radius: 8px;
  box-shadow: 0 5px 22px #14283b13;
  background: #fff
}

.faq-item button {
  width: 100%;
  padding: 22px;
  text-align: left;
  background: none;
  border: 0;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  cursor: pointer
}

.faq-answer {
  display: none;
  padding: 0 22px 22px;
  color: #4b5662
}

.faq-item.open .faq-answer {
  display: block
}

.final-cta {
  padding: 60px 0;
  background: linear-gradient(135deg, #075d9d, #096bb7);
  color: #fff
}

.final-cta .container {
  text-align: center
}

.final-cta h2 {
  font-size: 34px
}

.final-cta p {
  font-size: 17px
}

.cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-top: 25px
}

.call-btn,
.free-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 4px;
  font-weight: 800
}

.call-btn {
  border: 2px solid var(--yellow)
}

.free-btn {
  background: #ffbf19;
  color: #080808
}

.footer {
  background: #0b1520;
  color: #d8e1e9;
  padding-top: 60px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 45px
}

.footer-logo {
  width: 220px;
  background: #fff;
  padding: 7px;
  border-radius: 5px;
  margin-bottom: 18px
}

.footer p {
  max-width: 420px;
  color: #9fb0c0
}

.footer h4 {
  color: #fff;
  margin-bottom: 14px
}

.footer a {
  display: block;
  margin: 8px 0;
  color: #c4d0da
}

.footer-bottom {
  border-top: 1px solid #ffffff1c;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: #8fa0b0
}

.cookie {
  position: fixed;
  z-index: 2000;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;
  color: #fff;
  padding: 20px 9%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 14px
}

.cookie button {
  background: #ffca05;
  border: 0;
  padding: 14px 22px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap
}

.cookie.hide {
  display: none
}

.top-btn {
  position: fixed;
  right: 24px;
  bottom: 110px;
  width: 55px;
  height: 120px;
  border: 2px solid #aaa;
  border-radius: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 100
}

.top-btn small {
  font-size: 12px;
  font-weight: 800;
  writing-mode: vertical-rl
}

.chat-btn {
  position: fixed;
  right: 24px;
  bottom: 25px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 0;
  background: #258de4;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 10px 30px #0003;
  z-index: 100
}

@media(max-width:1100px) {
  .brand {
    width: 220px
  }

  .brand img {
    width: 210px
  }

  .nav-links {
    gap: 18px
  }

  .nav-links a {
    font-size: 14px
  }

  .proposal-btn {
    padding: 12px 16px
  }

  .hero-copy h1 {
    font-size: 48px
  }

  .plans-grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

@media(max-width:800px) {
  .topbar {
    display: none
  }

  .navbar {
    min-height: 72px;
    padding: 0 24px
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto
  }

  .menu-toggle span {
    width: 27px;
    height: 2px;
    background: #111
  }

  .nav-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    padding: 15px 24px 25px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 20px 30px #0001;
    gap: 15px
  }

  .nav-wrap.open {
    display: flex
  }

  .nav-links {
    flex-direction: column;
    gap: 0
  }

  .nav-links a {
    display: block;
    padding: 12px 0
  }

  .proposal-btn {
    text-align: center
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 25px
  }

  .hero-visual {
    min-height: 390px;
    order: -1
  }

  .hero-copy h1 {
    font-size: 42px
  }

  .two-col {
    grid-template-columns: 1fr
  }

  .why-box {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 20px
  }

  .process-item,
  .process-item.reverse {
    grid-template-columns: 1fr;
    padding: 0 0 25px;
    border-radius: 16px
  }

  .process-item.reverse .process-img {
    order: -1
  }

  .process-item>div:not(.process-img) {
    padding: 0 25px
  }

  .process-item h3 {
    padding-top: 0
  }

  .plans-grid {
    grid-template-columns: 1fr
  }

  .plan-card.popular {
    transform: none
  }

  .faq-grid {
    grid-template-columns: 1fr
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cookie {
    padding: 18px 24px;
    font-size: 13px
  }
}

@media(max-width:560px) {
  .container {
    width: min(100% - 28px, 1460px)
  }

  .brand,
  .brand img {
    width: 185px
  }

  .hero-copy h1 {
    font-size: 34px;
    letter-spacing: -1px
  }

  .hero-copy h2 {
    font-size: 21px
  }

  .hero-actions {
    flex-direction: column
  }

  .btn {
    width: 100%
  }

  .hero-visual {
    min-height: 320px
  }

  .map-card {
    height: 285px;
    border-width: 7px
  }

  .shape-a {
    width: 280px;
    height: 280px
  }

  .rank-card {
    right: 0;
    bottom: 0
  }

  .featured h2 {
    font-size: 23px
  }

  .logo-row {
    grid-template-columns: 1fr 1fr
  }

  .stat-grid {
    grid-template-columns: 1fr
  }

  .section-title {
    font-size: 30px
  }

  .feature-grid {
    grid-template-columns: 1fr
  }

  .cta-actions {
    flex-direction: column;
    gap: 12px
  }

  .cta-actions span {
    display: none
  }

  .call-btn,
  .free-btn {
    width: 100%
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .cookie {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 18px
  }

  .cookie button {
    width: 100%
  }

  .top-btn {
    display: none
  }
}


/* OrionSoft standalone plan-page overrides */
:root {
  --orion-blue: #168fe6;
  --orion-orange: #ff7a00
}

/* Plan cards: blue border in normal state, orange only on hover */
.plan-card {
  border: 1.5px solid var(--orion-blue) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.plan-card:hover {
  border-color: var(--orion-orange) !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: var(--orion-blue) !important
}

.plan-card.popular:hover {
  border-color: var(--orion-orange) !important
}

/* For grid layouts where cards use divider borders */
.plans-grid {
  border-color: var(--orion-blue) !important
}

/* Standalone pages are inserted inside an existing WordPress header/footer */
.site-header,
.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

/* Quote modal */
.orion-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 32, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999
}

.orion-modal.open {
  display: flex
}

.orion-modal-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border-radius: 2px;
  position: relative
}

.orion-modal-info {
  background: #075d8f;
  color: #fff;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.orion-modal-info h2 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff
}

.orion-modal-info p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
  color: #eaf7ff
}

.orion-modal-info .modal-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: #bfe9ff;
  margin-bottom: 7px
}

.orion-modal-info .modal-phone {
  font-size: 31px;
  font-weight: 800;
  color: var(--orion-orange);
  margin-bottom: 25px;
  white-space: nowrap
}

.orion-modal-info ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.orion-modal-info li {
  margin: 11px 0;
  font-size: 15px
}

.orion-modal-info li:before {
  content: '✓';
  color: #fff;
  font-weight: 800;
  margin-right: 10px
}

.orion-modal-form {
  padding: 36px 38px 32px;
  background: #fff
}

.orion-modal-form h3 {
  font-size: 25px;
  margin: 0 0 5px;
  color: #075d8f
}

.orion-modal-form .form-note {
  margin: 0 0 20px;
  color: #64727d;
  font-size: 13px
}

.orion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.orion-form-grid .full {
  grid-column: 1/-1
}

.orion-modal-form label,
.orion-modal-form legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2934;
  margin-bottom: 6px
}

.orion-modal-form label span {
  color: var(--orion-orange)
}

.orion-modal-form input,
.orion-modal-form select,
.orion-modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd7df;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border-radius: 1px
}

.orion-modal-form input:focus,
.orion-modal-form select:focus,
.orion-modal-form textarea:focus {
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 2px rgba(22, 143, 230, .1)
}

.orion-modal-form textarea {
  min-height: 105px;
  resize: vertical
}

.orion-modal-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.orion-modal-form legend {
  margin-bottom: 8px
}

.orion-modal-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 2px
}

.orion-modal-form .checks label {
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.orion-modal-form .checks input {
  width: auto
}

.orion-submit {
  width: 100%;
  border: 0;
  background: var(--orion-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 4px
}

.orion-submit:hover {
  background: #e96e00
}

.orion-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d2d39;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  z-index: 2
}

.orion-modal-phone-link {
  color: #fff;
  text-decoration: none
}

.orion-modal-phone-link:hover {
  color: #fff
}

@media(max-width:760px) {
  .orion-modal {
    padding: 10px
  }

  .orion-modal-box {
    grid-template-columns: 1fr;
    max-height: 96vh
  }

  .orion-modal-info {
    padding: 28px 24px
  }

  .orion-modal-info h2 {
    font-size: 25px
  }

  .orion-modal-info .modal-phone {
    font-size: 25px;
    margin-bottom: 10px
  }

  .orion-modal-info ul {
    display: none
  }

  .orion-modal-form {
    padding: 25px 20px
  }

  .orion-form-grid {
    grid-template-columns: 1fr
  }

  .orion-form-grid .full {
    grid-column: auto
  }
}


/* ===== OrionSoft final layout corrections ===== */
.site-header,
.footer,
header.site-header,
footer.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

main {
  display: block
}

section {
  scroll-margin-top: 20px
}

.plans-grid,
.plan-grid {
  align-items: stretch !important
}

.plan-card {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #168fe6 !important;
  transition: border-color .22s ease, box-shadow .22s ease !important
}

.plan-card:hover,
.plan-card.popular:hover {
  border-color: #ff7a00 !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: #168fe6 !important
}

.plan-head,
.plan-top {
  flex-shrink: 0
}

.plan-card .checks,
.plan-card>ul {
  flex: 1 1 auto
}

.plan-card .quote,
.plan-card .plan-head>a,
.plan-card>a {
  margin-top: auto
}

.faq-answer {
  display: none !important
}

.faq-item.open .faq-answer {
  display: block !important
}

img {
  max-width: 100%
}

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

.orion-modal {
  z-index: 99999 !important
}

@media(max-width:1100px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:800px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: 1fr !important
  }

  .plan-card {
    min-height: auto !important
  }
}

/* exact desktop pricing columns */
@media(min-width:1101px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }
}


/* ===== SOURCE: css/ppc-plans.css ===== */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #10151c;
  background: #fff;
  line-height: 1.75
}

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

.container {
  width: min(1340px, calc(100% - 56px));
  margin: auto
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .08)
}

.topbar {
  text-align: right;
  padding: 9px 7%;
  font-size: 14px;
  color: #444
}

.topbar a {
  color: #333
}

.topbar span {
  margin: 0 8px
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px
}

.brand img {
  width: 205px;
  max-height: 58px;
  object-fit: contain
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 34px
}

.nav-links {
  display: flex;
  gap: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700
}

.nav-links a:hover,
.nav-links .active a {
  color: #118de6
}

.proposal-btn,
.btn.primary {
  background: #1395e5;
  color: #fff;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 800
}

.menu-toggle {
  display: none;
  background: none;
  border: 0
}

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 55px;
  align-items: center;
  padding: 58px 20px 70px
}

.breadcrumbs {
  font-size: 15px;
  margin-bottom: 22px;
  color: #555
}

.breadcrumbs span {
  margin: 0 10px
}

.breadcrumbs a {
  color: #145f9d
}

.hero h1 {
  font-size: 52px;
  line-height: 1.18;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -1.5px
}

.hero h1 span {
  display: block
}

.hero h2 {
  font-size: 27px;
  margin: 0 0 25px
}

.hero p {
  font-size: 18px;
  max-width: 700px
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 28px
}

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 4px;
  font-weight: 800
}

.btn.secondary {
  border: 1px solid #1596e8;
  color: #1596e8
}

.hero-visual {
  min-height: 470px;
  position: relative;
  display: grid;
  place-items: center
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: #e5f4fc
}

.orb-a {
  width: 390px;
  height: 390px;
  right: 5%;
  top: 10%
}

.orb-b {
  width: 180px;
  height: 180px;
  left: 2%;
  bottom: 7%
}

.ads-scene {
  position: relative;
  width: 90%;
  z-index: 2
}

.monitor {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(16, 75, 110, .18);
  padding: 17px;
  transform: rotate(-2deg)
}

.bar {
  height: 34px;
  background: #eef6fb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px
}

.bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9bd4f2
}

.bar b {
  margin-left: 10px;
  font-size: 11px;
  color: #1979b5
}

.dash {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 22px;
  padding: 30px
}

.adbox {
  border: 1px solid #dcecf5;
  border-radius: 16px;
  padding: 22px
}

.adbox span {
  display: inline-block;
  background: #1395e5;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 800
}

.adbox strong,
.adbox small {
  display: block
}

.chart {
  height: 160px;
  display: flex;
  align-items: end;
  gap: 10px
}

.chart b {
  flex: 1;
  background: #1395e5;
  border-radius: 7px 7px 0 0
}

.chart b:nth-child(1) {
  height: 28%
}

.chart b:nth-child(2) {
  height: 38%
}

.chart b:nth-child(3) {
  height: 46%
}

.chart b:nth-child(4) {
  height: 58%
}

.chart b:nth-child(5) {
  height: 67%
}

.chart b:nth-child(6) {
  height: 82%
}

.chart b:nth-child(7) {
  height: 94%
}

.float-card {
  position: absolute;
  right: -30px;
  top: 35px;
  background: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .13)
}

.float-card span,
.float-card strong,
.float-card small {
  display: block
}

.float-card strong {
  font-size: 28px;
  color: #1194e5
}

.search-pill {
  position: absolute;
  left: -20px;
  bottom: 20px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 30px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  font-size: 14px
}

.search-pill em {
  margin-left: 15px;
  color: #118fdd;
  font-style: normal;
  font-weight: 800
}

.platform-strip {
  padding: 28px 0;
  background: #fff
}

.platform-strip .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  padding: 25px 35px;
  border-radius: 15px;
  font-size: 20px;
  font-weight: 800;
  color: #1678ad;
  flex-wrap: wrap;
}

.intro {
  padding: 90px 0;
  background: #f7fbfe
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}

.eyebrow {
  color: #118fdf;
  font-weight: 800;
  letter-spacing: 1.4px;
  font-size: 15px
}

.section-title {
  font-size: 42px;
  line-height: 1.2;
  margin: 12px 0 22px;
  font-weight: 800
}

.section-title.left {
  text-align: left
}

.section-title.center,
.center {
  text-align: center
}

.section-lead {
  max-width: 900px;
  margin: 0 auto 45px;
  text-align: center;
  font-size: 18px
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}

.stats div {
  background: #fff;
  padding: 28px 18px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
  text-align: center
}

.stats strong {
  font-size: 34px;
  color: #118fdc;
  display: block
}

.stats span {
  font-size: 13px
}

.clients {
  padding: 75px 0
}

.client-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px
}

.client-logos span {
  padding: 22px 12px;
  text-align: center;
  border: 1px solid #e5e8eb;
  border-radius: 10px;
  font-weight: 800;
  color: #5c6770
}

.why {
  padding: 90px 0;
  background: #fff
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.why-grid article,
.include-grid article {
  padding: 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 9px 30px rgba(0, 0, 0, .07)
}

.icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: 25px;
  background: #e6f5ff;
  color: #1596e5
}

.pink {
  background: #ffe8e8;
  color: #ff5757
}

.purple {
  background: #f1e9ff;
  color: #8854e8
}

.green {
  background: #e7faef;
  color: #21a866
}

.yellow {
  background: #fff6d9;
  color: #e3a900
}

.violet {
  background: #f5e7ff;
  color: #9b48d7
}

.partner {
  padding: 90px 0;
  background: #effaff
}

.ticks {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.ticks li:before {
  content: '✓';
  color: #1194e5;
  font-weight: 900;
  margin-right: 10px
}

.specialized {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .08)
}

.specialized>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  text-align: center
}

.specialized span {
  font-size: 34px;
  color: #1596e5
}

.specialized b {
  display: block;
  font-size: 14px;
  color: #222
}

.audit {
  padding: 28px 0;
  background: #0762a0;
  color: #fff;
  text-align: center
}

.audit h2 {
  font-size: 30px
}

.audit-points {
  display: flex;
  justify-content: space-around;
  margin: 20px 0 28px;
  font-size: 18px
}

.call-btn,
.free-btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 4px;
  font-weight: 800;
  margin: 0 8px
}

.call-btn {
  border: 2px solid #ffc400
}

.free-btn {
  background: #ffc21a;
  color: #111
}

.or {
  font-weight: 800
}

.include {
  padding: 90px 0;
  background: #eefaff
}

.include-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.include-grid article {
  min-height: 230px
}

.service-icon {
  font-size: 32px;
  color: #1596e5
}

.services {
  padding: 90px 0
}

.service-rows {
  display: grid;
  gap: 55px
}

.service-rows article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center
}

.service-rows h3 {
  font-size: 24px;
  margin: 0 0 15px
}

.service-rows a {
  display: inline-block;
  margin-top: 15px;
  background: #1596e5;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 800
}

.service-art {
  min-height: 300px;
  border-radius: 24px;
  background: #f0f8fc;
  display: grid;
  place-items: center;
  font-size: 110px;
  font-weight: 800;
  color: #1395e5
}

.service-art span {
  font-size: 30px
}

.facebook {
  color: #1877f2
}

.instagram {
  color: #d62976
}

.linkedin {
  color: #0a66c2
}

.bing {
  color: #0a9b83
}

.plans-section {
  padding: 95px 0;
  background: #eefaff
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.plan-card {
  background: #fff;
  border-radius: 18px;
  padding: 32px 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
  position: relative
}

.plan-card.popular {
  border: 3px solid #1395e5;
  transform: translateY(-10px)
}

.badge {
  position: absolute;
  top: -16px;
  right: 20px;
  background: #1395e5;
  color: #fff;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800
}

.plan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 10px;
}

.plan-top span {
  font-size: 27px;
  font-weight: 800;
  color: #118fdf
}

.plan-top b {
  font-size: 12px
}

.plan-card h3 {
  font-size: 24px
}

.plan-card ul {
  padding-left: 10px
}

.plan-card li {
  margin: 7px 0
}

.plan-card>a {
  display: block;
  text-align: center;
  background: #1395e5;
  color: #fff;
  padding: 13px;
  border-radius: 4px;
  font-weight: 800;
  margin-top: 25px
}

.gst-note {
  text-align: center;
  margin-top: 25px;
  font-size: 13px
}

.comparison {
  padding: 85px 0
}

.table-wrap {
  overflow: auto
}

.comparison table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

.comparison th,
.comparison td {
  padding: 16px;
  border: 1px solid #e5eaee;
  text-align: center
}

.comparison th:first-child {
  text-align: left
}

.comparison thead th {
  background: #0d6ca5;
  color: #fff
}

.cta-band {
  padding: 55px 0;
  background: #075b96;
  color: #fff;
  text-align: center
}

.cta-band h2 {
  font-size: 35px
}

.faq {
  padding: 90px 0;
  background: #f7fbfd
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.faq details {
  background: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 7px 25px rgba(0, 0, 0, .06)
}

summary {
  font-weight: 800;
  cursor: pointer
}

footer {
  padding: 30px 0;
  background: #081e2b;
  color: #fff
}

footer .container {
  display: flex;
  justify-content: space-between
}

footer span {
  color: #94b3c4
}

@media(max-width:1000px) {
  .nav-wrap {
    display: none
  }

  .nav-wrap.open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    padding: 20px
  }

  .nav-links {
    flex-direction: column
  }

  .menu-toggle {
    display: block
  }

  .hero,
  .two-col {
    grid-template-columns: 1fr
  }

  .hero-visual {
    min-height: 390px
  }

  .why-grid {
    grid-template-columns: 1fr 1fr
  }

  .include-grid,
  .plans-grid,
  .faq-grid {
    grid-template-columns: 1fr
  }

  .plan-card.popular {
    transform: none
  }

  .client-logos {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:650px) {
  .container {
    width: min(100% - 28px, 1340px)
  }

  .topbar {
    font-size: 11px
  }

  .brand img {
    width: 160px
  }

  .hero h1 {
    font-size: 38px
  }

  .section-title {
    font-size: 30px
  }

  .hero p {
    font-size: 16px
  }

  .hero-actions,
  .audit-points {
    flex-direction: column
  }

  .audit-points {
    gap: 10px
  }

  .stats {
    grid-template-columns: 1fr
  }

  .why-grid {
    grid-template-columns: 1fr
  }

  .service-rows article {
    grid-template-columns: 1fr;
    gap: 25px
  }

  .service-rows article>div:first-child {
    order: 0
  }

  .service-art {
    min-height: 220px;
    font-size: 80px
  }

  .ticks {
    grid-template-columns: 1fr
  }

  .client-logos {
    grid-template-columns: 1fr 1fr
  }

  .specialized>div {
    grid-template-columns: 1fr 1fr
  }

  .call-btn,
  .free-btn {
    margin: 6px 0
  }

  footer .container {
    flex-direction: column;
    gap: 8px
  }
}


/* OrionSoft standalone plan-page overrides */
:root {
  --orion-blue: #168fe6;
  --orion-orange: #ff7a00
}

/* Plan cards: blue border in normal state, orange only on hover */
.plan-card {
  border: 1.5px solid var(--orion-blue) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.plan-card:hover {
  border-color: var(--orion-orange) !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: var(--orion-blue) !important
}

.plan-card.popular:hover {
  border-color: var(--orion-orange) !important
}

/* For grid layouts where cards use divider borders */
.plans-grid {
  border-color: var(--orion-blue) !important
}

/* Standalone pages are inserted inside an existing WordPress header/footer */
.site-header,
.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

/* Quote modal */
.orion-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 32, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999
}

.orion-modal.open {
  display: flex
}

.orion-modal-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border-radius: 2px;
  position: relative
}

.orion-modal-info {
  background: #075d8f;
  color: #fff;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.orion-modal-info h2 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff
}

.orion-modal-info p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
  color: #eaf7ff
}

.orion-modal-info .modal-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: #bfe9ff;
  margin-bottom: 7px
}

.orion-modal-info .modal-phone {
  font-size: 31px;
  font-weight: 800;
  color: var(--orion-orange);
  margin-bottom: 25px;
  white-space: nowrap
}

.orion-modal-info ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.orion-modal-info li {
  margin: 11px 0;
  font-size: 15px
}

.orion-modal-info li:before {
  content: '✓';
  color: #fff;
  font-weight: 800;
  margin-right: 10px
}

.orion-modal-form {
  padding: 36px 38px 32px;
  background: #fff
}

.orion-modal-form h3 {
  font-size: 25px;
  margin: 0 0 5px;
  color: #075d8f
}

.orion-modal-form .form-note {
  margin: 0 0 20px;
  color: #64727d;
  font-size: 13px
}

.orion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.orion-form-grid .full {
  grid-column: 1/-1
}

.orion-modal-form label,
.orion-modal-form legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2934;
  margin-bottom: 6px
}

.orion-modal-form label span {
  color: var(--orion-orange)
}

.orion-modal-form input,
.orion-modal-form select,
.orion-modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd7df;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border-radius: 1px
}

.orion-modal-form input:focus,
.orion-modal-form select:focus,
.orion-modal-form textarea:focus {
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 2px rgba(22, 143, 230, .1)
}

.orion-modal-form textarea {
  min-height: 105px;
  resize: vertical
}

.orion-modal-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.orion-modal-form legend {
  margin-bottom: 8px
}

.orion-modal-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 2px
}

.orion-modal-form .checks label {
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.orion-modal-form .checks input {
  width: auto
}

.orion-submit {
  width: 100%;
  border: 0;
  background: var(--orion-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 4px
}

.orion-submit:hover {
  background: #e96e00
}

.orion-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d2d39;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  z-index: 2
}

.orion-modal-phone-link {
  color: #fff;
  text-decoration: none
}

.orion-modal-phone-link:hover {
  color: #fff
}

@media(max-width:760px) {
  .orion-modal {
    padding: 10px
  }

  .orion-modal-box {
    grid-template-columns: 1fr;
    max-height: 96vh
  }

  .orion-modal-info {
    padding: 28px 24px
  }

  .orion-modal-info h2 {
    font-size: 25px
  }

  .orion-modal-info .modal-phone {
    font-size: 25px;
    margin-bottom: 10px
  }

  .orion-modal-info ul {
    display: none
  }

  .orion-modal-form {
    padding: 25px 20px
  }

  .orion-form-grid {
    grid-template-columns: 1fr
  }

  .orion-form-grid .full {
    grid-column: auto
  }
}


/* ===== OrionSoft final layout corrections ===== */
.site-header,
.footer,
header.site-header,
footer.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

main {
  display: block
}

section {
  scroll-margin-top: 20px
}

.plans-grid,
.plan-grid {
  align-items: stretch !important
}

.plan-card {
  gap: 20px;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #168fe6 !important;
  transition: border-color .22s ease, box-shadow .22s ease !important
}

.plan-card:hover,
.plan-card.popular:hover {
  border-color: #ff7a00 !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: #168fe6 !important
}

.plan-head,
.plan-top {
  flex-shrink: 0
}

.plan-card .checks,
.plan-card>ul {
  flex: 1 1 auto
}

.plan-card .quote,
.plan-card .plan-head>a,
.plan-card>a {
  margin-top: auto
}

.faq-answer {
  display: none !important
}

.faq-item.open .faq-answer {
  display: block !important
}

img {
  max-width: 100%
}

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

.orion-modal {
  z-index: 99999 !important
}

@media(max-width:1100px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:800px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: 1fr !important
  }

  .plan-card {
    min-height: auto !important
  }
}

/* exact desktop pricing columns */
@media(min-width:1101px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }
}


/* ===== SOURCE: css/seo-plans.css ===== */
:root {
  --blue: #1689e8;
  --blue2: #0866b9;
  --ink: #0b0d10;
  --muted: #4d5968;
  --line: #e3e7eb;
  --soft: #f3f9fd;
  --orange: #ff8a16;
  --yellow: #ffbd1b;
  --green: #35b34a
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background: #fff;
  overflow-x: hidden
}

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

.container {
  width: min(1460px, calc(100% - 48px));
  margin: auto
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 3px 20px #0000000c
}

.topbar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 max(24px, calc((100vw - 1460px)/2));
  font-size: 14px;
  color: #4d4d4d
}

.topbar a:hover {
  color: var(--blue)
}

.navbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  width: 260px;
  flex: 0 0 260px
}

.brand img {
  width: 250px;
  height: auto;
  display: block
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 42px;
  flex: 1
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none
}

.nav-links a {
  font-weight: 700;
  font-size: 17px;
  padding: 28px 0;
  display: block
}

.nav-links a span {
  font-size: 17px;
  color: #444;
  margin-left: 5px
}

.nav-links li.active a,
.nav-links a:hover {
  color: var(--blue)
}

.proposal-btn {
  background: var(--green);
  color: #fff;
  padding: 15px 24px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap
}

.proposal-btn:hover {
  filter: brightness(.93)
}

.menu-toggle {
  display: none;
  background: none;
  border: 0
}

.hero {
  min-height: 580px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 25px;
  align-items: center;
  padding-top: 136px;
  padding-bottom: 60px
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #536173;
  font-size: 17px;
  margin-bottom: 20px
}

.breadcrumbs a:hover {
  color: var(--blue)
}

.hero-copy h1 {
  font-size: 54px;
  line-height: 1.12;
  letter-spacing: -1.8px;
  max-width: 760px
}

.hero-copy h1 span {
  display: block
}

.hero-copy h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 26px 0;
  color: #16212d
}

.hero-copy p {
  font-size: 19px;
  color: #26313d;
  max-width: 730px;
  margin: 0 0 24px
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 25px;
  font-weight: 800;
  border-radius: 5px
}

.btn.primary {
  background: var(--blue);
  color: #fff
}

.btn.secondary {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: #fff
}

.btn:hover {
  transform: translateY(-2px)
}

.hero-visual {
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.hero-image {
  width: 72%;
  height: 82%;
  border-radius: 52% 48% 45% 55%;
  overflow: hidden;
  border: 14px solid #dceffc;
  position: relative;
  z-index: 2;
  box-shadow: 0 18px 45px #135a7d20
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: #eef8ff
}

.shape-a {
  width: 300px;
  height: 300px;
  left: 20px;
  bottom: 5px
}

.shape-b {
  width: 220px;
  height: 220px;
  right: 15px;
  top: 20px;
  background: #f4f9ff
}

.mini-chart {
  position: absolute;
  right: 4%;
  bottom: 3%;
  z-index: 3;
  background: #fff;
  width: 270px;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 50px #0b2b401c
}

.chart-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px
}

.chart-top span {
  color: #86bf4b
}

.chart-lines {
  height: 80px;
  position: relative;
  margin: 10px 0
}

.chart-lines:before,
.chart-lines:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid #b7dc7b;
  top: 48%;
  transform: rotate(11deg)
}

.chart-lines:after {
  border-color: #ff9b2f;
  transform: rotate(-14deg)
}

.chart-lines i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8a16;
  left: 52%;
  top: 47%;
  z-index: 2
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #8994a0
}

.featured {
  padding: 28px 0 55px
}

.featured h2,
.clients h2 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 38px
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  align-items: center;
  text-align: center;
  color: #222
}

.logo-row span {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  opacity: .88
}

.logo-row span:nth-child(2) {
  font-size: 18px;
  color: #6b8f87
}

.logo-row span:nth-child(4) {
  font-family: Arial, sans-serif
}

.logo-row span:nth-child(5) {
  color: #b72e2e
}

.logo-row span:nth-child(6) {
  font-family: Arial, sans-serif;
  font-size: 21px
}

.plans-section {
  padding: 70px 0 55px;
  background: #fff
}

.eyebrow {
  font-size: 24px;
  color: var(--blue);
  text-align: center;
  font-weight: 600
}

.section-title {
  font-size: 38px;
  line-height: 1.18;
  text-align: center;
  margin: 12px 0 16px;
  letter-spacing: -1px
}

.section-title.left {
  text-align: left
}

.center-note {
  text-align: center;
  font-size: 18px;
  margin-bottom: 38px
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #d9dee3
}

.plan-card {
  min-width: 0;
  background: #fff;
  border-right: 1px solid #d9dee3;
  position: relative
}

.plan-card:last-child {
  border-right: 0
}

.plan-card.popular {
  border: 2px solid var(--orange);
  margin: -42px 0 -1px
}

.popular-badge {
  position: absolute;
  right: 24px;
  top: 22px;
  background: var(--orange);
  color: #fff;
  padding: 9px 15px;
  border-radius: 7px;
  font-weight: 700
}

.plan-head {
  /* padding: 55px 45px 34px; */
  /* min-height: 270px */
}

.plan-name {
  display: block;
  font-size: 23px;
  color: #59626d;
  font-weight: 800;
  margin-bottom: 16px
}

.plan-head strong {
  display: block;
  font-size: 31px;
  line-height: 1.15
}

.quote {
  display: inline-flex;
  margin-top: 30px;
  background: #0b6fe1;
  color: #fff;
  padding: 13px 28px;
  border-radius: 4px;
  font-weight: 800
}

.quote.gold {
  background: var(--orange)
}

.plan-highlight {
  /* margin: 0 18px 24px; */
  background: #3c7fc8;
  color: #fff;
  padding: 22px;
  font-size: 17px;
  min-height: 110px
}

.checks {
  padding: 0 40px 35px;
  list-style: none
}

.checks li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 15px
}

.checks li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border: 2px solid #1594f4;
  border-radius: 50%;
  color: #1594f4;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800
}

.checks li.muted {
  text-decoration: line-through;
  color: #555
}

.gst-note {
  text-align: center;
  margin-top: 25px;
  font-size: 14px;
  color: #66717d
}

.comparison {
  padding: 30px 0 85px
}

.comparison-toggle {
  display: block;
  margin: 0 auto;
  background: #0872d9;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 17px 32px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .1px
}

.comparison-toggle:hover {
  background: #ff8a00
}

.comparison-table-wrap {
  display: none;
  margin-top: 34px;
  background: #fff;
  border: 1px solid #d9dee3;
  box-shadow: 0 12px 35px rgba(16, 32, 48, .08);
  overflow-x: auto
}

.comparison-table-wrap.show {
  display: block
}

.comparison-title-row,
.comparison-row,
.comparison-category,
.comparison-bottom {
  display: grid;
  grid-template-columns: 2.2fr repeat(4, minmax(150px, 1fr));
  min-width: 1000px
}

.comparison-title-row {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #d9dee3;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .06)
}

.comparison-feature-title {
  display: flex;
  align-items: center;
  padding: 28px 22px;
  font-size: 20px;
  font-weight: 800;
  background: #f7f9fb
}

.comparison-plan-head {
  position: relative;
  padding: 24px 16px 22px;
  text-align: center;
  border-left: 1px solid #d9dee3;
  background: #fff
}

.comparison-plan-head span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #59626d;
  margin-bottom: 15px
}

.comparison-plan-head strong {
  display: block;
  font-size: 20px;
  color: #101820;
  margin-bottom: 20px
}

.comparison-plan-head a,
.comparison-bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0872d9;
  color: #fff;
  border-radius: 4px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 800
}

.comparison-plan-head a:hover,
.comparison-bottom a:hover {
  background: #ff8a00
}

.comparison-plan-head.comparison-popular {
  border-top: 3px solid #ff8a00
}

.comparison-plan-head.comparison-popular b {
  position: absolute;
  right: 14px;
  top: 8px;
  background: #ff8a00;
  color: #fff;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 9px
}

.comparison-detail-table {
  min-width: 1000px
}

.comparison-category {
  background: #f4f6f8;
  border-top: 1px solid #d9dee3;
  border-bottom: 1px solid #d9dee3
}

.comparison-category>div {
  padding: 18px 12px;
  font-weight: 800
}

.comparison-category>div:first-child {
  font-size: 16px
}

.comparison-row {
  min-height: 72px;
  border-bottom: 1px solid #e2e6ea
}

.comparison-row>div {
  padding: 20px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e2e6ea;
  text-align: center;
  font-size: 15px
}

.comparison-row>div:first-child {
  justify-content: flex-start;
  text-align: left;
  border-left: 0;
  font-size: 16px;
  color: #101820
}

.comparison-row>div:not(:first-child) {
  color: #6bbf3b;
  font-weight: 800
}

.comparison-row>div:nth-child(2):not(:first-child),
.comparison-row>div:nth-child(3):not(:first-child),
.comparison-row>div:nth-child(4):not(:first-child),
.comparison-row>div:nth-child(5):not(:first-child) {
  color: #101820
}

.info-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 50%;
  background: #c9efff;
  color: #1677b8;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto
}

.comparison-bottom {
  background: #5b5c68;
  color: #fff
}

.comparison-bottom>div {
  padding: 24px 14px;
  font-size: 17px;
  font-style: italic;
  line-height: 1.7
}

.comparison-bottom>a {
  margin: 20px auto;
  height: 44px
}

.cta-band,
.final-cta {
  padding: 32px 0;
  background: linear-gradient(135deg, #075d9d, #096bb7);
  color: #fff
}

.cta-band .container,
.final-cta .container {
  text-align: center
}

.cta-band h2,
.final-cta h2 {
  font-size: 31px
}

.cta-band p,
.final-cta p {
  font-size: 17px;
  margin: 5px auto 24px;
  max-width: 950px
}

.cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px
}

.call-btn,
.free-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 4px;
  font-weight: 800
}

.call-btn {
  border: 2px solid var(--yellow);
  color: #fff
}

.free-btn {
  background: #ffb719;
  color: #080808
}

.importance {
  padding: 85px 0
}

.two-col {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 70px;
  align-items: center
}

.photo-card {
  height: 470px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px #15324b18
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.importance .eyebrow {
  text-align: left
}

.importance p {
  font-size: 17px;
  color: #303a45;
  margin: 15px 0
}

.reason-list {
  list-style: none;
  margin: 25px 0
}

.reason-list li {
  font-size: 17px;
  padding: 9px 0 9px 35px;
  position: relative
}

.reason-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  background: #1798f1;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-weight: 800
}

.benefits {
  padding: 75px 0;
  background: #fff
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px
}

.benefit {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px #172a3a10;
  border: 1px solid #eef0f2
}

.benefit .icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #e4f8ff;
  color: #22b8cf;
  display: grid;
  place-items: center;
  font-size: 30px
}

.benefit .purple {
  background: #f4e9ff;
  color: #a35de2
}

.benefit .green {
  background: #e9fff1;
  color: #38d66c
}

.benefit .yellow {
  background: #fff7df;
  color: #ffb51a
}

.benefit .blue {
  background: #e8f1ff;
  color: #3982e5
}

.benefit .mint {
  background: #e9fff7;
  color: #51d4a1
}

.benefit h3 {
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  gap: 15px
}

.benefit h3 em {
  font-style: italic;
  color: #cdd0d4;
  font-size: 29px
}

.benefit p {
  margin-top: 12px;
  color: #303840;
  font-size: 16px
}

.clients {
  padding: 80px 0
}

.client-logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 25px;
  align-items: center;
  margin-top: 45px
}

.client-logos span {
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  color: #175ea8
}

.client-logos span:nth-child(3) {
  color: #174a8a
}

.client-logos span:nth-child(4) {
  color: #684e8c
}

.client-logos span:nth-child(5) {
  color: #ba3243;
  font-family: Georgia, serif
}

.client-logos span:nth-child(6) {
  color: #4e83a9
}

.client-logos span:nth-child(7) {
  color: #0d73c8
}

.why {
  padding: 75px 0;
  background: #fff
}

.why .section-title {
  max-width: 1000px;
  margin: 10px auto 45px;
  font-size: 25px;
  font-weight: 500
}

.why .center {
  text-align: center
}

.why-box {
  background: #eef8ff;
  padding: 45px 70px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px
}

.why-tabs button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 17px 20px;
  background: none;
  border: 0;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer
}

.why-tabs button.active {
  background: #4c9ad5;
  color: #fff;
  border-radius: 9px
}

.why-content {
  padding-top: 5px
}

.why-panel {
  display: none
}

.why-panel.active {
  display: block
}

.why-panel h3 {
  font-size: 28px;
  margin-bottom: 15px
}

.why-panel p {
  font-size: 17px;
  max-width: 780px
}

.case-study {
  padding: 80px 0
}

.case-intro {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 50px;
  font-size: 18px
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 50px;
  align-items: center
}

.case-grid h3 {
  font-size: 20px
}

.case-visual {
  height: 310px;
  background: linear-gradient(135deg, #f7fbff, #eaf5ff);
  border-radius: 18px;
  position: relative;
  overflow: hidden
}

.bars {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 35px;
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 16px
}

.bars i {
  display: block;
  flex: 1;
  background: #8bc34a;
  border-radius: 7px 7px 0 0
}

.bars i:nth-child(1) {
  height: 40%
}

.bars i:nth-child(2) {
  height: 55%
}

.bars i:nth-child(3) {
  height: 72%
}

.bars i:nth-child(4) {
  height: 84%
}

.bars i:nth-child(5) {
  height: 100%
}

.case-card {
  position: absolute;
  top: 28px;
  right: 30px;
  background: #fff;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 12px 30px #17344d15
}

.case-card b,
.case-card span {
  display: block;
  font-size: 12px;
  color: #71808e
}

.case-card strong {
  display: block;
  font-size: 34px;
  color: #1594f4
}

.process {
  padding: 80px 0
}

.process-list {
  margin-top: 45px
}

.process-item {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px;
  align-items: center;
  background: #f3f9fd;
  padding: 0 55px 0 0;
  min-height: 220px;
  margin-bottom: 22px
}

.process-item.reverse {
  grid-template-columns: 1fr 330px;
  padding: 0 0 0 55px
}

.process-item img {
  width: 100%;
  height: 220px;
  object-fit: cover
}

.process-item h3 {
  color: #4797d3;
  font-size: 27px;
  margin-bottom: 8px
}

.process-item p {
  font-size: 16px
}

.faq {
  padding: 80px 0
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 45px
}

.faq-item {
  border-radius: 8px;
  box-shadow: 0 5px 22px #14283b13;
  background: #fff
}

.faq-item button {
  width: 100%;
  padding: 22px;
  text-align: left;
  background: none;
  border: 0;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  cursor: pointer
}

.faq-answer {
  display: none;
  padding: 0 22px 22px;
  color: #4b5662
}

.faq-item.open .faq-answer {
  display: block
}

.faq-item.open button b {
  transform: rotate(180deg)
}

.final-cta {
  margin-top: 10px;
  padding: 60px 0
}

.final-cta .call-btn {
  margin: 12px
}

.final-cta .free-btn {
  margin: 12px
}

.footer {
  background: #0b1520;
  color: #d8e1e9;
  padding-top: 60px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 45px
}

.footer-logo {
  width: 220px;
  background: #fff;
  padding: 7px;
  border-radius: 5px;
  margin-bottom: 18px
}

.footer p {
  max-width: 420px;
  color: #9fb0c0
}

.footer h4 {
  color: #fff;
  margin-bottom: 14px
}

.footer a {
  display: block;
  margin: 8px 0;
  color: #c4d0da
}

.footer a:hover {
  color: #fff
}

.footer-bottom {
  border-top: 1px solid #ffffff1c;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: #8fa0b0
}

.cookie {
  position: fixed;
  z-index: 2000;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;
  color: #fff;
  padding: 24px 9%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 15px
}

.cookie button {
  background: #ffca05;
  border: 0;
  padding: 15px 22px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap
}

.cookie.hide {
  display: none
}

.top-btn {
  position: fixed;
  right: 24px;
  bottom: 170px;
  width: 55px;
  height: 120px;
  border: 2px solid #aaa;
  border-radius: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 100
}

.top-btn small {
  font-size: 12px;
  font-weight: 800;
  writing-mode: vertical-rl
}

.chat-btn {
  position: fixed;
  right: 24px;
  bottom: 25px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #258de4;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 10px 30px #0003;
  z-index: 100
}

.chat-btn:hover {
  transform: scale(1.05)
}

@media(max-width:1100px) {
  .navbar {
    padding: 0 24px
  }

  .brand {
    width: 220px;
    flex-basis: 220px
  }

  .brand img {
    width: 210px
  }

  .nav-links {
    gap: 18px
  }

  .nav-links a {
    font-size: 14px
  }

  .proposal-btn {
    padding: 12px 16px
  }

  .hero-copy h1 {
    font-size: 46px
  }

  .plans-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .plan-card:nth-child(2) {
    border-right: 0
  }

  .plan-card:nth-child(3) {
    border-top: 1px solid #d9dee3
  }

  .plan-card:nth-child(4) {
    border-top: 1px solid #d9dee3
  }

  .plan-card.popular {
    margin: 0
  }

  .client-logos {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:800px) {
  .topbar {
    display: none
  }

  .navbar {
    min-height: 72px
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto
  }

  .menu-toggle span {
    width: 27px;
    height: 2px;
    background: #111
  }

  .nav-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    padding: 15px 24px 25px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 20px 30px #0001;
    gap: 15px
  }

  .nav-wrap.open {
    display: flex
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .nav-links a {
    padding: 12px 0
  }

  .proposal-btn {
    text-align: center
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 35px
  }

  .hero-visual {
    height: 390px;
    order: -1
  }

  .hero-image {
    width: 62%;
    height: 82%
  }

  .mini-chart {
    right: 4%;
    bottom: 0
  }

  .hero-copy h1 {
    font-size: 42px
  }

  .hero-copy h2 {
    font-size: 23px
  }

  .hero-copy p {
    font-size: 16px
  }

  .logo-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .benefit-grid,
  .faq-grid,
  .case-grid,
  .two-col {
    grid-template-columns: 1fr
  }

  .photo-card {
    height: 340px
  }

  .why-box {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 20px
  }

  .why-tabs button {
    font-size: 15px
  }

  .process-item,
  .process-item.reverse {
    grid-template-columns: 1fr;
    padding: 0 0 25px
  }

  .process-item img {
    height: 220px
  }

  .process-item div {
    padding: 0 25px
  }

  .process-item h3 {
    padding-top: 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cookie {
    padding: 18px 24px;
    font-size: 13px
  }

  .top-btn {
    display: none
  }
}

@media(max-width:560px) {
  .container {
    width: min(100% - 28px, 1460px)
  }

  .brand,
  .brand img {
    width: 185px
  }

  .hero {
    padding-bottom: 40px
  }

  .hero-visual {
    height: 320px
  }

  .hero-image {
    width: 70%;
    border-width: 8px
  }

  .mini-chart {
    width: 205px;
    padding: 12px
  }

  .shape-a {
    width: 190px;
    height: 190px
  }

  .shape-b {
    width: 140px;
    height: 140px
  }

  .hero-copy h1 {
    font-size: 34px;
    letter-spacing: -1px
  }

  .hero-copy h2 {
    font-size: 20px
  }

  .hero-actions {
    flex-direction: column
  }

  .btn {
    width: 100%
  }

  .featured h2,
  .clients h2 {
    font-size: 26px
  }

  .logo-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .plans-grid {
    grid-template-columns: 1fr
  }

  .plan-card {
    border-right: 0 !important;
    border-top: 1px solid #d9dee3
  }

  .plan-card:first-child {
    border-top: 0
  }

  .plan-head {
    /* padding: 40px 25px 25px */
  }

  .plan-head strong {
    font-size: 28px
  }

  .plan-highlight {
    /* margin: 0 12px 20px */
  }

  .checks {
    padding: 0 25px 30px
  }

  .section-title {
    font-size: 29px
  }

  .benefit {
    grid-template-columns: 1fr
  }

  .benefit h3 {
    font-size: 19px
  }

  .benefit h3 em {
    font-size: 23px
  }

  .client-logos {
    grid-template-columns: repeat(2, 1fr)
  }

  .case-visual {
    height: 250px
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .cta-actions {
    flex-direction: column;
    gap: 12px
  }

  .cta-actions span {
    display: none
  }

  .call-btn,
  .free-btn {
    width: 100%
  }

  .cookie {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 18px
  }

  .cookie button {
    width: 100%
  }
}


/* OrionSoft standalone plan-page overrides */
:root {
  --orion-blue: #168fe6;
  --orion-orange: #ff7a00
}

/* Plan cards: blue border in normal state, orange only on hover */
.plan-card {
  border: 1.5px solid var(--orion-blue) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.plan-card:hover {
  border-color: var(--orion-orange) !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: var(--orion-blue) !important
}

.plan-card.popular:hover {
  border-color: var(--orion-orange) !important
}

/* For grid layouts where cards use divider borders */
.plans-grid {
  border-color: var(--orion-blue) !important
}

/* Standalone pages are inserted inside an existing WordPress header/footer */
.site-header,
.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

/* Quote modal */
.orion-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 32, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999
}

.orion-modal.open {
  display: flex
}

.orion-modal-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border-radius: 2px;
  position: relative
}

.orion-modal-info {
  background: #075d8f;
  color: #fff;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.orion-modal-info h2 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff
}

.orion-modal-info p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
  color: #eaf7ff
}

.orion-modal-info .modal-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: #bfe9ff;
  margin-bottom: 7px
}

.orion-modal-info .modal-phone {
  font-size: 31px;
  font-weight: 800;
  color: var(--orion-orange);
  margin-bottom: 25px;
  white-space: nowrap
}

.orion-modal-info ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.orion-modal-info li {
  margin: 11px 0;
  font-size: 15px
}

.orion-modal-info li:before {
  content: '✓';
  color: #fff;
  font-weight: 800;
  margin-right: 10px
}

.orion-modal-form {
  padding: 36px 38px 32px;
  background: #fff
}

.orion-modal-form h3 {
  font-size: 25px;
  margin: 0 0 5px;
  color: #075d8f
}

.orion-modal-form .form-note {
  margin: 0 0 20px;
  color: #64727d;
  font-size: 13px
}

.orion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.orion-form-grid .full {
  grid-column: 1/-1
}

.orion-modal-form label,
.orion-modal-form legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2934;
  margin-bottom: 6px
}

.orion-modal-form label span {
  color: var(--orion-orange)
}

.orion-modal-form input,
.orion-modal-form select,
.orion-modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd7df;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border-radius: 1px
}

.orion-modal-form input:focus,
.orion-modal-form select:focus,
.orion-modal-form textarea:focus {
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 2px rgba(22, 143, 230, .1)
}

.orion-modal-form textarea {
  min-height: 105px;
  resize: vertical
}

.orion-modal-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.orion-modal-form legend {
  margin-bottom: 8px
}

.orion-modal-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 2px
}

.orion-modal-form .checks label {
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.orion-modal-form .checks input {
  width: auto
}

.orion-submit {
  width: 100%;
  border: 0;
  background: var(--orion-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 4px
}

.orion-submit:hover {
  background: #e96e00
}

.orion-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d2d39;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  z-index: 2
}

.orion-modal-phone-link {
  color: #fff;
  text-decoration: none
}

.orion-modal-phone-link:hover {
  color: #fff
}

@media(max-width:760px) {
  .orion-modal {
    padding: 10px
  }

  .orion-modal-box {
    grid-template-columns: 1fr;
    max-height: 96vh
  }

  .orion-modal-info {
    padding: 28px 24px
  }

  .orion-modal-info h2 {
    font-size: 25px
  }

  .orion-modal-info .modal-phone {
    font-size: 25px;
    margin-bottom: 10px
  }

  .orion-modal-info ul {
    display: none
  }

  .orion-modal-form {
    padding: 25px 20px
  }

  .orion-form-grid {
    grid-template-columns: 1fr
  }

  .orion-form-grid .full {
    grid-column: auto
  }
}


/* ===== OrionSoft final layout corrections ===== */
.site-header,
.footer,
header.site-header,
footer.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

main {
  display: block
}

section {
  scroll-margin-top: 20px
}

.plans-grid,
.plan-grid {
  align-items: stretch !important
}

.plan-card {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #168fe6 !important;
  transition: border-color .22s ease, box-shadow .22s ease !important
}

.plan-card:hover,
.plan-card.popular:hover {
  border-color: #ff7a00 !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: #168fe6 !important
}

.plan-head,
.plan-top {
  flex-shrink: 0
}

.plan-card .checks,
.plan-card>ul {
  flex: 1 1 auto
}

.plan-card .quote,
.plan-card .plan-head>a,
.plan-card>a {
  margin-top: auto
}

.faq-answer {
  display: none !important
}

.faq-item.open .faq-answer {
  display: block !important
}

img {
  max-width: 100%
}

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

.orion-modal {
  z-index: 99999 !important
}

@media(max-width:1100px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:800px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: 1fr !important
  }

  .plan-card {
    min-height: auto !important
  }
}

/* exact desktop pricing columns */
@media(min-width:1101px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }
}

@media(max-width:900px) {
  .comparison-table-wrap {
    margin-left: -12px;
    margin-right: -12px
  }

  .comparison-title-row {
    position: relative
  }

  .comparison-feature-title {
    padding: 20px 14px;
    font-size: 16px
  }

  .comparison-plan-head {
    padding: 20px 10px
  }

  .comparison-plan-head span {
    font-size: 18px
  }

  .comparison-plan-head strong {
    font-size: 16px
  }

  .comparison-plan-head a {
    padding: 9px 13px;
    font-size: 12px
  }

  .comparison-row>div {
    padding: 15px 10px;
    font-size: 13px
  }

  .comparison-row>div:first-child {
    font-size: 14px
  }

  .comparison-category>div {
    padding: 14px 10px
  }

  .comparison-bottom>div {
    font-size: 14px;
    padding: 18px 10px
  }

  .comparison-bottom>a {
    margin: 14px auto;
    padding: 9px 12px;
    font-size: 12px
  }
}


/* ===== SOURCE: css/social-media-plans.css ===== */
:root {
  --blue: #1689e8;
  --blue2: #0866b9;
  --ink: #0b0d10;
  --muted: #4d5968;
  --line: #e3e7eb;
  --soft: #f3f9fd;
  --orange: #ff8a16;
  --yellow: #ffbd1b;
  --green: #35b34a
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background: #fff;
  overflow-x: hidden
}

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

.container {
  width: min(1460px, calc(100% - 48px));
  margin: auto
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 3px 20px #0000000c
}

.topbar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 max(24px, calc((100vw - 1460px)/2));
  font-size: 14px;
  color: #4d4d4d
}

.topbar a:hover {
  color: var(--blue)
}

.navbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  width: 260px;
  flex: 0 0 260px
}

.brand img {
  width: 250px;
  height: auto;
  display: block
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 42px;
  flex: 1
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none
}

.nav-links a {
  font-weight: 700;
  font-size: 17px;
  padding: 28px 0;
  display: block
}

.nav-links a span {
  font-size: 17px;
  color: #444;
  margin-left: 5px
}

.nav-links li.active a,
.nav-links a:hover {
  color: var(--blue)
}

.proposal-btn {
  background: var(--green);
  color: #fff;
  padding: 15px 24px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap
}

.proposal-btn:hover {
  filter: brightness(.93)
}

.menu-toggle {
  display: none;
  background: none;
  border: 0
}

.hero {
  min-height: 580px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 25px;
  align-items: center;
  padding-top: 45px;
  padding-bottom: 60px
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #536173;
  font-size: 17px;
  margin-bottom: 20px
}

.breadcrumbs a:hover {
  color: var(--blue)
}

.hero-copy h1 {
  font-size: 54px;
  line-height: 1.12;
  letter-spacing: -1.8px;
  max-width: 760px
}

.hero-copy h1 span {
  display: block
}

.hero-copy h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 26px 0;
  color: #16212d
}

.hero-copy p {
  font-size: 19px;
  color: #26313d;
  max-width: 730px;
  margin: 0 0 24px
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 25px;
  font-weight: 800;
  border-radius: 5px
}

.btn.primary {
  background: var(--blue);
  color: #fff
}

.btn.secondary {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: #fff
}

.btn:hover {
  transform: translateY(-2px)
}

.hero-visual {
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.hero-image {
    max-width: 500px;
    width: 100%;
    height: 100%;
    border-radius: 52% 48% 45% 55%;
    overflow: hidden;
    border: 14px solid #dceffc;
    position: relative;
    z-index: 2;
    box-shadow: 0 18px 45px #135a7d20;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: #eef8ff
}

.shape-a {
  width: 300px;
  height: 300px;
  left: 20px;
  bottom: 5px
}

.shape-b {
  width: 220px;
  height: 220px;
  right: 15px;
  top: 20px;
  background: #f4f9ff
}

.mini-chart {
  position: absolute;
  right: 4%;
  bottom: 3%;
  z-index: 3;
  background: #fff;
  width: 270px;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 50px #0b2b401c
}

.chart-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px
}

.chart-top span {
  color: #86bf4b
}

.chart-lines {
  height: 80px;
  position: relative;
  margin: 10px 0
}

.chart-lines:before,
.chart-lines:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid #b7dc7b;
  top: 48%;
  transform: rotate(11deg)
}

.chart-lines:after {
  border-color: #ff9b2f;
  transform: rotate(-14deg)
}

.chart-lines i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8a16;
  left: 52%;
  top: 47%;
  z-index: 2
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #8994a0
}

.featured {
  padding: 28px 0 55px
}

.featured h2,
.clients h2 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 38px
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  align-items: center;
  text-align: center;
  color: #222
}

.logo-row span {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  opacity: .88
}

.logo-row span:nth-child(2) {
  font-size: 18px;
  color: #6b8f87
}

.logo-row span:nth-child(4) {
  font-family: Arial, sans-serif
}

.logo-row span:nth-child(5) {
  color: #b72e2e
}

.logo-row span:nth-child(6) {
  font-family: Arial, sans-serif;
  font-size: 21px
}

.plans-section {
  padding: 70px 0 55px;
  background: #fff
}

.eyebrow {
  font-size: 24px;
  color: var(--blue);
  text-align: center;
  font-weight: 600;
  line-height: normal;
  
}

.section-title {
  font-size: 38px;
  line-height: 1.18;
  text-align: center;
  margin: 12px 0 16px;
  letter-spacing: -1px
}

.section-title.left {
  text-align: left
}

.center-note {
  text-align: center;
  font-size: 18px;
  margin-bottom: 38px
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #d9dee3
}

.plan-card {
  min-width: 0;
  background: #fff;
  border-right: 1px solid #d9dee3;
  position: relative
}

.plan-card:last-child {
  border-right: 0
}

.plan-card.popular {
  border: 2px solid var(--orange);
  margin: -42px 0 -1px
}

.popular-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--orange);
    color: #fff;
    padding: 5px 10px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 8px;
}

.plan-head {
  /* padding: 55px 45px 34px; */
  /* min-height: 270px */
}

.plan-name {
  display: block;
  font-size: 23px;
  color: #59626d;
  font-weight: 800;
  margin-bottom: 16px
}

.plan-head strong {
  display: block;
  font-size: 31px;
  line-height: 1.15
}

.quote {
  display: inline-flex;
  margin-top: 30px;
  background: #0b6fe1;
  color: #fff;
  padding: 13px 28px;
  border-radius: 4px;
  font-weight: 800
}

.quote.gold {
  background: var(--orange)
}

.plan-highlight {
  /* margin: 0 18px 24px; */
  background: #3c7fc8;
  color: #fff;
  padding: 22px;
  font-size: 17px;
  min-height: 110px
}

.checks {
  padding: 0 40px 35px;
  list-style: none
}

.checks li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 15px
}

.checks li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border: 2px solid #1594f4;
  border-radius: 50%;
  color: #1594f4;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800
}

.checks li.muted {
  text-decoration: line-through;
  color: #555
}

.gst-note {
  text-align: center;
  margin-top: 25px;
  font-size: 14px;
  color: #66717d
}

.comparison {
  padding: 30px 0 85px
}

.comparison-toggle {
  display: block;
  margin: auto;
  background: #0872d9;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 800
}

.comparison-table-wrap {
  display: none;
  overflow: auto;
  margin-top: 25px
}

.comparison-table-wrap.show {
  display: block
}

.comparison table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

.comparison th,
.comparison td {
  border: 1px solid var(--line);
  padding: 15px;
  text-align: center
}

.comparison th:first-child {
  text-align: left
}

.comparison thead {
  background: #eef7ff
}

.cta-band,
.final-cta {
  padding: 32px 0;
  background: linear-gradient(135deg, #075d9d, #096bb7);
  color: #fff
}

.cta-band .container,
.final-cta .container {
  text-align: center
}

.cta-band h2,
.final-cta h2 {
  font-size: 31px
}

.cta-band p,
.final-cta p {
  font-size: 17px;
  margin: 5px auto 24px;
  max-width: 950px
}

.cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px
}

.call-btn,
.free-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 4px;
  font-weight: 800
}

.call-btn {
  border: 2px solid var(--yellow);
  color: #fff
}

.free-btn {
  background: #ffb719;
  color: #080808
}

.importance {
  padding: 85px 0
}

.two-col {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 70px;
  align-items: center
}

.photo-card {
  height: 470px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px #15324b18
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.importance .eyebrow {
  text-align: left
}

.importance p {
  font-size: 17px;
  color: #303a45;
  margin: 15px 0
}

.reason-list {
  list-style: none;
  margin: 25px 0
}

.reason-list li {
  font-size: 17px;
  padding: 9px 0 9px 35px;
  position: relative
}

.reason-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  background: #1798f1;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-weight: 800
}

.benefits {
  padding: 75px 0;
  background: #fff
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px
}

.benefit {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px #172a3a10;
  border: 1px solid #eef0f2
}

.benefit .icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #e4f8ff;
  color: #22b8cf;
  display: grid;
  place-items: center;
  font-size: 30px
}

.benefit .purple {
  background: #f4e9ff;
  color: #a35de2
}

.benefit .green {
  background: #e9fff1;
  color: #38d66c
}

.benefit .yellow {
  background: #fff7df;
  color: #ffb51a
}

.benefit .blue {
  background: #e8f1ff;
  color: #3982e5
}

.benefit .mint {
  background: #e9fff7;
  color: #51d4a1
}

.benefit h3 {
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  gap: 15px
}

.benefit h3 em {
  font-style: italic;
  color: #cdd0d4;
  font-size: 29px
}

.benefit p {
  margin-top: 12px;
  color: #303840;
  font-size: 16px
}

.clients {
  padding: 80px 0
}

.client-logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 25px;
  align-items: center;
  margin-top: 45px
}

.client-logos span {
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  color: #175ea8
}

.client-logos span:nth-child(3) {
  color: #174a8a
}

.client-logos span:nth-child(4) {
  color: #684e8c
}

.client-logos span:nth-child(5) {
  color: #ba3243;
  font-family: Georgia, serif
}

.client-logos span:nth-child(6) {
  color: #4e83a9
}

.client-logos span:nth-child(7) {
  color: #0d73c8
}

.why {
  padding: 75px 0;
  background: #fff
}

.why .section-title {
  max-width: 1000px;
  margin: 10px auto 45px;
  font-size: 25px;
  font-weight: 500
}

.why .center {
  text-align: center
}

.why-box {
  background: #eef8ff;
  padding: 45px 70px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px
}

.why-tabs button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 17px 20px;
  background: none;
  border: 0;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer
}

.why-tabs button.active {
  background: #4c9ad5;
  color: #fff;
  border-radius: 9px
}

.why-content {
  padding-top: 5px
}

.why-panel {
  display: none
}

.why-panel.active {
  display: block
}

.why-panel h3 {
  font-size: 28px;
  margin-bottom: 15px
}

.why-panel p {
  font-size: 17px;
  max-width: 780px
}

.case-study {
  padding: 80px 0
}

.case-intro {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 50px;
  font-size: 18px
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 50px;
  align-items: center
}

.case-grid h3 {
  font-size: 20px
}

.case-visual {
  height: 310px;
  background: linear-gradient(135deg, #f7fbff, #eaf5ff);
  border-radius: 18px;
  position: relative;
  overflow: hidden
}

.bars {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 35px;
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 16px
}

.bars i {
  display: block;
  flex: 1;
  background: #8bc34a;
  border-radius: 7px 7px 0 0
}

.bars i:nth-child(1) {
  height: 40%
}

.bars i:nth-child(2) {
  height: 55%
}

.bars i:nth-child(3) {
  height: 72%
}

.bars i:nth-child(4) {
  height: 84%
}

.bars i:nth-child(5) {
  height: 100%
}

.case-card {
  position: absolute;
  top: 28px;
  right: 30px;
  background: #fff;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 12px 30px #17344d15
}

.case-card b,
.case-card span {
  display: block;
  font-size: 12px;
  color: #71808e
}

.case-card strong {
  display: block;
  font-size: 34px;
  color: #1594f4
}

.process {
  padding: 80px 0
}

.process-list {
  margin-top: 45px
}

.process-item {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 55px;
  align-items: center;
  background: #f3f9fd;
  padding: 0 55px 0 0;
  min-height: 220px;
  margin-bottom: 22px
}

.process-item.reverse {
  grid-template-columns: 1fr 330px;
  padding: 0 0 0 55px
}

.process-item img {
  width: 100%;
  height: 220px;
  object-fit: cover
}

.process-item h3 {
  color: #4797d3;
  font-size: 27px;
  margin-bottom: 8px
}

.process-item p {
  font-size: 16px
}

.faq {
  padding: 80px 0
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 45px
}

.faq-item {
  border-radius: 8px;
  box-shadow: 0 5px 22px #14283b13;
  background: #fff
}

.faq-item button {
  width: 100%;
  padding: 22px;
  text-align: left;
  background: none;
  border: 0;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  cursor: pointer
}

.faq-answer {
  display: none;
  padding: 0 22px 22px;
  color: #4b5662
}

.faq-item.open .faq-answer {
  display: block
}

.faq-item.open button b {
  transform: rotate(180deg)
}

.final-cta {
  margin-top: 10px;
  padding: 60px 0
}

.final-cta .call-btn {
  margin: 12px
}

.final-cta .free-btn {
  margin: 12px
}

.footer {
  background: #0b1520;
  color: #d8e1e9;
  padding-top: 60px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 45px
}

.footer-logo {
  width: 220px;
  background: #fff;
  padding: 7px;
  border-radius: 5px;
  margin-bottom: 18px
}

.footer p {
  max-width: 420px;
  color: #9fb0c0
}

.footer h4 {
  color: #fff;
  margin-bottom: 14px
}

.footer a {
  display: block;
  margin: 8px 0;
  color: #c4d0da
}

.footer a:hover {
  color: #fff
}

.footer-bottom {
  border-top: 1px solid #ffffff1c;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: #8fa0b0
}

.cookie {
  position: fixed;
  z-index: 2000;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;
  color: #fff;
  padding: 24px 9%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 15px
}

.cookie button {
  background: #ffca05;
  border: 0;
  padding: 15px 22px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap
}

.cookie.hide {
  display: none
}

.top-btn {
  position: fixed;
  right: 24px;
  bottom: 170px;
  width: 55px;
  height: 120px;
  border: 2px solid #aaa;
  border-radius: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 100
}

.top-btn small {
  font-size: 12px;
  font-weight: 800;
  writing-mode: vertical-rl
}

.chat-btn {
  position: fixed;
  right: 24px;
  bottom: 25px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #258de4;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 10px 30px #0003;
  z-index: 100
}

.chat-btn:hover {
  transform: scale(1.05)
}

@media(max-width:1100px) {
  .navbar {
    padding: 0 24px
  }

  .brand {
    width: 220px;
    flex-basis: 220px
  }

  .brand img {
    width: 210px
  }

  .nav-links {
    gap: 18px
  }

  .nav-links a {
    font-size: 14px
  }

  .proposal-btn {
    padding: 12px 16px
  }

  .hero-copy h1 {
    font-size: 46px
  }

  .plans-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .plan-card:nth-child(2) {
    border-right: 0
  }

  .plan-card:nth-child(3) {
    border-top: 1px solid #d9dee3
  }

  .plan-card:nth-child(4) {
    border-top: 1px solid #d9dee3
  }

  .plan-card.popular {
    margin: 0
  }

  .client-logos {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:800px) {
  .topbar {
    display: none
  }

  .navbar {
    min-height: 72px
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto
  }

  .menu-toggle span {
    width: 27px;
    height: 2px;
    background: #111
  }

  .nav-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    padding: 15px 24px 25px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 20px 30px #0001;
    gap: 15px
  }

  .nav-wrap.open {
    display: flex
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .nav-links a {
    padding: 12px 0
  }

  .proposal-btn {
    text-align: center
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 35px
  }

  .hero-visual {
    /* height: 390px; */
    order: -1
  }

  .mini-chart {
    right: 4%;
    bottom: 0
  }

  .hero-copy h1 {
    font-size: 42px
  }

  .hero-copy h2 {
    font-size: 23px
  }

  .hero-copy p {
    font-size: 16px
  }

  .logo-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .benefit-grid,
  .faq-grid,
  .case-grid,
  .two-col {
    grid-template-columns: 1fr
  }

  .photo-card {
    height: 340px
  }

  .why-box {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 20px
  }

  .why-tabs button {
    font-size: 15px
  }

  .process-item,
  .process-item.reverse {
    grid-template-columns: 1fr;
    padding: 0 0 25px
  }

  .process-item img {
    height: 220px
  }

  .process-item div {
    padding: 0 25px
  }

  .process-item h3 {
    padding-top: 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cookie {
    padding: 18px 24px;
    font-size: 13px
  }

  .top-btn {
    display: none
  }
}

@media(max-width:560px) {
  .container {
    width: min(100% - 28px, 1460px)
  }

  .brand,
  .brand img {
    width: 185px
  }

  .hero {
    padding-bottom: 40px
  }

  .hero-visual {
    height: 320px
  }

  .hero-image {
    width: 70%;
    border-width: 8px
  }

  .mini-chart {
    width: 205px;
    padding: 12px
  }

  .shape-a {
    width: 190px;
    height: 190px
  }

  .shape-b {
    width: 140px;
    height: 140px
  }

  .hero-copy h1 {
    font-size: 34px;
    letter-spacing: -1px
  }

  .hero-copy h2 {
    font-size: 20px
  }

  .hero-actions {
    flex-direction: column
  }

  .btn {
    width: 100%
  }

  .featured h2,
  .clients h2 {
    font-size: 26px
  }

  .logo-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .plans-grid {
    grid-template-columns: 1fr
  }

  .plan-card {
    border-right: 0 !important;
    border-top: 1px solid #d9dee3
  }

  .plan-card:first-child {
    border-top: 0
  }

  .plan-head {
    /* padding: 40px 25px 25px */
  }

  .plan-head strong {
    font-size: 28px
  }

  .plan-highlight {
    /* margin: 0 12px 20px */
  }

  .checks {
    padding: 0 25px 30px
  }

  .section-title {
    font-size: 29px
  }

  .benefit {
    grid-template-columns: 1fr
  }

  .benefit h3 {
    font-size: 19px
  }

  .benefit h3 em {
    font-size: 23px
  }

  .client-logos {
    grid-template-columns: repeat(2, 1fr)
  }

  .case-visual {
    height: 250px
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .cta-actions {
    flex-direction: column;
    gap: 12px
  }

  .cta-actions span {
    display: none
  }

  .call-btn,
  .free-btn {
    width: 100%
  }

  .cookie {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 18px
  }

  .cookie button {
    width: 100%
  }
}

/* Social Media Marketing Plans */
.social-platforms {
  padding: 34px 0 48px;
  background: #fff
}

.platform-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: center;
  text-align: center
}

.platform {
  padding: 20px 14px;
  border: 1px solid #e7edf2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px #0b2b4010;
  font-weight: 800;
  font-size: 18px
}

.platform span {
  display: block;
  font-size: 30px;
  margin-bottom: 5px
}

.story {
  padding: 80px 0;
  background: #fff
}

.social-visual {
  min-height: 430px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f5fbff, #e9f4ff);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center
}

.phone {
  width: 220px;
  height: 390px;
  border: 9px solid #111;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 25px 60px #0b2b4030;
  position: relative;
  z-index: 2;
  overflow: hidden
}

.phone-top {
  height: 42px;
  background: #f5f6f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 800
}

.post-image {
  height: 180px;
  background: linear-gradient(135deg, #1594f4, #7b61ff);
  margin: 0 12px;
  border-radius: 13px
}

.post-lines {
  padding: 12px
}

.post-lines i {
  display: block;
  height: 8px;
  background: #e8edf2;
  border-radius: 5px;
  margin: 8px 0
}

.social-bubble {
  position: absolute;
  background: #fff;
  padding: 14px 18px;
  border-radius: 15px;
  box-shadow: 0 14px 35px #0b2b4020;
  font-weight: 800
}

.social-bubble.one {
  left: 7%;
  top: 18%
}

.social-bubble.two {
  right: 7%;
  bottom: 18%
}

.social-bubble.three {
  right: 10%;
  top: 15%;
  background: #1594f4;
  color: #fff
}

.social-importance {
  padding: 85px 0;
  background: #f4f9fd
}

.social-services {
  padding: 80px 0;
  background: #fff
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px
}

.service-card {
  padding: 30px;
  border: 1px solid #e6ebef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px #102b3d0d
}

.service-card h3 {
  font-size: 22px;
  margin-bottom: 10px
}

.service-card p {
  color: #4b5662
}

.service-card .service-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #e8f5ff;
  color: #1689e8;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 18px
}

.social-plans .plan-highlight {
  background: linear-gradient(135deg, #1689e8, #0866b9)
}

.social-plans .plan-head strong {
  font-size: 27px
}

.social-plans .checks li:before {
  border-color: #1689e8;
  color: #1689e8
}

.social-plans .plan-card.popular {
  border-color: #1689e8
}

.social-plans .popular-badge {
  background: #1689e8
}

.platform-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef7ff;
  color: #0866b9;
  font-size: 12px;
  font-weight: 800;
  margin: 4px 4px 0 0
}

.social-comparison td.yes {
  color: #1689e8;
  font-weight: 900
}

.social-comparison td.no {
  color: #e33;
  font-weight: 900
}

.social-process {
  padding: 80px 0;
  background: #f7fbfe
}

.social-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 42px
}

.social-step {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #e5edf4
}

.social-step b {
  display: block;
  font-size: 35px;
  color: #1689e8;
  margin-bottom: 12px
}

.social-step h3 {
  font-size: 19px;
  margin-bottom: 8px
}

.social-step p {
  font-size: 15px;
  color: #4d5968
}

.social-faq {
  padding: 80px 0
}

.social-faq .faq-grid {
  grid-template-columns: 1fr 1fr
}

.social-final {
  padding: 65px 0;
  background: linear-gradient(135deg, #075d9d, #096bb7);
  color: #fff
}

.social-final .container {
  text-align: center
}

.social-final h2 {
  font-size: 34px
}

.social-final p {
  max-width: 850px;
  margin: 8px auto 25px;
  font-size: 17px
}

.social-final .call-btn {
  margin: 8px
}

.social-final .free-btn {
  margin: 8px
}

@media(max-width:1100px) {
  .platform-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .social-process-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:800px) {

  .platform-row,
  .service-grid,
  .social-faq .faq-grid {
    grid-template-columns: 1fr 1fr
  }

  .social-process-grid {
    grid-template-columns: 1fr 1fr
  }

  .social-visual {
    min-height: 380px
  }
}

@media(max-width:560px) {

  .platform-row,
  .service-grid,
  .social-process-grid,
  .social-faq .faq-grid {
    grid-template-columns: 1fr
  }

  .social-visual {
    min-height: 330px
  }

  .phone {
    transform: scale(.82)
  }

  .social-bubble {
    font-size: 12px;
    padding: 10px 12px
  }

  .social-final h2 {
    font-size: 28px
  }
}


/* OrionSoft standalone plan-page overrides */
:root {
  --orion-blue: #168fe6;
  --orion-orange: #ff7a00
}

/* Plan cards: blue border in normal state, orange only on hover */
.plan-card {
  border: 1.5px solid var(--orion-blue) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.plan-card:hover {
  border-color: var(--orion-orange) !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: var(--orion-blue) !important
}

.plan-card.popular:hover {
  border-color: var(--orion-orange) !important
}

/* For grid layouts where cards use divider borders */
.plans-grid {
  border-color: var(--orion-blue) !important
}

/* Standalone pages are inserted inside an existing WordPress header/footer */
.site-header,
.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

/* Quote modal */
.orion-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 32, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999
}

.orion-modal.open {
  display: flex
}

.orion-modal-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border-radius: 2px;
  position: relative
}

.orion-modal-info {
  background: #075d8f;
  color: #fff;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.orion-modal-info h2 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff
}

.orion-modal-info p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
  color: #eaf7ff
}

.orion-modal-info .modal-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: #bfe9ff;
  margin-bottom: 7px
}

.orion-modal-info .modal-phone {
  font-size: 31px;
  font-weight: 800;
  color: var(--orion-orange);
  margin-bottom: 25px;
  white-space: nowrap
}

.orion-modal-info ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.orion-modal-info li {
  margin: 11px 0;
  font-size: 15px
}

.orion-modal-info li:before {
  content: '✓';
  color: #fff;
  font-weight: 800;
  margin-right: 10px
}

.orion-modal-form {
  padding: 36px 38px 32px;
  background: #fff
}

.orion-modal-form h3 {
  font-size: 25px;
  margin: 0 0 5px;
  color: #075d8f
}

.orion-modal-form .form-note {
  margin: 0 0 20px;
  color: #64727d;
  font-size: 13px
}

.orion-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.orion-form-grid .full {
  grid-column: 1/-1
}

.orion-modal-form label,
.orion-modal-form legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2934;
  margin-bottom: 6px
}

.orion-modal-form label span {
  color: var(--orion-orange)
}

.orion-modal-form input,
.orion-modal-form select,
.orion-modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd7df;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border-radius: 1px
}

.orion-modal-form input:focus,
.orion-modal-form select:focus,
.orion-modal-form textarea:focus {
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 2px rgba(22, 143, 230, .1)
}

.orion-modal-form textarea {
  min-height: 105px;
  resize: vertical
}

.orion-modal-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.orion-modal-form legend {
  margin-bottom: 8px
}

.orion-modal-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 2px
}

.orion-modal-form .checks label {
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.orion-modal-form .checks input {
  width: auto
}

.orion-submit {
  width: 100%;
  border: 0;
  background: var(--orion-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 4px
}

.orion-submit:hover {
  background: #e96e00
}

.orion-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d2d39;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  z-index: 2
}

.orion-modal-phone-link {
  color: #fff;
  text-decoration: none
}

.orion-modal-phone-link:hover {
  color: #fff
}

@media(max-width:760px) {
  .orion-modal {
    padding: 10px
  }

  .orion-modal-box {
    grid-template-columns: 1fr;
    max-height: 96vh
  }

  .orion-modal-info {
    padding: 28px 24px
  }

  .orion-modal-info h2 {
    font-size: 25px
  }

  .orion-modal-info .modal-phone {
    font-size: 25px;
    margin-bottom: 10px
  }

  .orion-modal-info ul {
    display: none
  }

  .orion-modal-form {
    padding: 25px 20px
  }

  .orion-form-grid {
    grid-template-columns: 1fr
  }

  .orion-form-grid .full {
    grid-column: auto
  }
}


/* ===== OrionSoft final layout corrections ===== */
.site-header,
.footer,
header.site-header,
footer.footer {
  display: none !important
}

body {
  padding-top: 0 !important
}

main {
  display: block
}

section {
  scroll-margin-top: 20px
}

.plans-grid,
.plan-grid {
  align-items: stretch !important
}

.plan-card {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #168fe6 !important;
  transition: border-color .22s ease, box-shadow .22s ease !important
}

.plan-card:hover,
.plan-card.popular:hover {
  border-color: #ff7a00 !important;
  box-shadow: 0 18px 45px rgba(255, 122, 0, .14) !important;
  z-index: 3
}

.plan-card.popular {
  border-color: #168fe6 !important
}

.plan-head,
.plan-top {
  flex-shrink: 0
}

.plan-card .checks,
.plan-card>ul {
  flex: 1 1 auto
}

.plan-card .quote,
.plan-card .plan-head>a,
.plan-card>a {
  margin-top: auto
}

.faq-answer {
  display: none !important
}

.faq-item.open .faq-answer {
  display: block !important
}

img {
  max-width: 100%
}

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

.orion-modal {
  z-index: 99999 !important
}

@media(max-width:1100px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:800px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: 1fr !important
  }

  .plan-card {
    min-height: auto !important
  }
}

/* exact desktop pricing columns */
@media(min-width:1101px) {

  .plans-grid,
  .plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
  }
}

.plan-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 50px;
}

/* Social Media: exactly three plans and no empty fourth column */
.social-plans .plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1.5px solid #168fe6 !important;
  align-items: stretch !important
}

.social-plans .plan-card {
  border-right: 1.5px solid #168fe6 !important;
  border-radius: 0 !important
}

.social-plans .plan-card:last-child {
  border-right: 0 !important
}

.social-plans .plan-card.popular {
  margin: 0 !important;
  transform: none !important
}

.social-plans .plan-head {
  /* min-height: 245px !important; */
  display: flex !important;
  flex-direction: column !important
}

.social-plans .plan-head>a {
  align-self: flex-start
}

.social-plans .plan-highlight {
  min-height: 112px !important
}

.social-plans .checks {
  flex: 1 1 auto !important
}

@media(max-width:1100px) {
  .social-plans .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:700px) {
  .social-plans .plans-grid {
    grid-template-columns: 1fr !important
  }

  .social-plans .plan-card {
    border-right: 0 !important;
    border-bottom: 1.5px solid #168fe6 !important
  }

  .social-plans .plan-card:last-child {
    border-bottom: 0 !important
  }

  .plan-container {
    padding: 0 20px;
  }
}

.plan-card .quote, .plan-card .plan-head>a, .plan-card>a {
    margin-top: 20px;
}

.plans-grid {
    border: 0;
}