/* RushSocial homepage: catalog, process and conversion sections.
   This file intentionally leaves the header and hero untouched. */

.category-bar {
  border-block: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(90deg,rgba(16,11,27,.72),rgba(173,99,245,.075) 52%,rgba(16,11,27,.72));
  box-shadow: 0 12px 35px rgba(0,0,0,.12);
}
.category-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(173,99,245,.55) 50%,transparent);
}
.category-bar .container { min-height: 58px; color: rgba(255,255,255,.7); }
.category-bar i { color: #AD63F5; text-shadow: 0 0 12px rgba(173,99,245,.35); }

.services-section,.process-section,.use-section,.faq-section { position: relative; isolation: isolate; }
.services-section,.process-section,.faq-section { scroll-margin-top: 110px; }
.services-section { padding-top: clamp(84px,8vw,120px); padding-bottom: 110px; }
.services-section::before,.process-section::after,.use-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.services-section::before {
  inset: 0;
  background: radial-gradient(ellipse 46% 42% at 8% 14%,rgba(173,99,245,.14),transparent 75%),
              radial-gradient(ellipse 35% 45% at 95% 87%,rgba(173,99,245,.085),transparent 75%);
}
.services-section .section-heading,.process-section .section-heading,.use-section .section-heading { margin-bottom: 44px; }
.services-section .section-kicker,.process-section .section-kicker,.use-section .section-kicker,.faq-section .section-kicker {
  gap: 12px;
  color: #AD63F5;
  font-size: 11px;
  letter-spacing: .21em;
}
.services-section .section-kicker i,.process-section .section-kicker i,.use-section .section-kicker i,.faq-section .section-kicker i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg,#AD63F5,transparent);
}
.services-section .section-heading h2,.process-section .section-heading h2,.use-section .section-heading h2,.faq-section h2 {
  margin-top: 20px;
  color: #fff;
  font-size: clamp(38px,4.1vw,62px);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.services-section .section-heading h2 em,.process-section .section-heading h2 em,.use-section .section-heading h2 em,.faq-section h2 em {
  color: #AD63F5;
  font-style: normal;
}
.services-section .section-heading>p,.process-section .section-heading>p,.use-section .section-heading>p {
  max-width: 350px;
  padding-left: 20px;
  border-left: 1px solid rgba(173,99,245,.55);
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.75;
}

/* Four distinct product cards, using only the brand palette. */
.product-grid { gap: 16px; }
.product-card {
  min-height: 480px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 23px;
  background: radial-gradient(ellipse 90% 48% at 0 0,rgba(173,99,245,.14),transparent 78%),
              linear-gradient(155deg,rgba(255,255,255,.12),rgba(16,11,27,.46) 45%,rgba(16,11,27,.72));
  box-shadow: 0 22px 52px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.24);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.product-card::before {
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg,rgba(173,99,245,.9),rgba(173,99,245,.22) 58%,transparent);
  box-shadow: 0 0 14px rgba(173,99,245,.22);
}
.product-card:nth-child(2) { background: radial-gradient(ellipse 100% 65% at 100% 0,rgba(173,99,245,.16),transparent 70%),linear-gradient(155deg,rgba(255,255,255,.11),rgba(16,11,27,.48) 48%,rgba(16,11,27,.72)); }
.product-card:nth-child(3) { background: radial-gradient(ellipse 80% 60% at 20% 100%,rgba(173,99,245,.12),transparent 72%),linear-gradient(155deg,rgba(255,255,255,.11),rgba(16,11,27,.48) 48%,rgba(16,11,27,.72)); }
.product-card:nth-child(4) { background: radial-gradient(ellipse 90% 55% at 100% 95%,rgba(173,99,245,.14),transparent 74%),linear-gradient(155deg,rgba(255,255,255,.11),rgba(16,11,27,.48) 48%,rgba(16,11,27,.72)); }
.product-card:hover,.product-card:focus-within {
  border-color: rgba(173,99,245,.75);
  box-shadow: 0 28px 55px rgba(0,0,0,.3),0 0 30px rgba(173,99,245,.14),inset 0 1px rgba(255,255,255,.27);
}
.product-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(173,99,245,.4);
  border-radius: 17px;
  background: linear-gradient(145deg,rgba(173,99,245,.22),rgba(173,99,245,.07));
  color: #AD63F5;
  font-size: 32px;
  box-shadow: inset 0 1px rgba(255,255,255,.16);
}
.product-index { color: rgba(255,255,255,.48); font-size: 10px; }
.product-type { margin-top: 28px; color: #AD63F5; font-size: 10px; }
.product-card h3 { margin-top: 10px; font-size: clamp(23px,2vw,29px); line-height: 1.08; }
.product-card>p { min-height: 63px; color: rgba(255,255,255,.71); font-size: 13px; line-height: 1.6; }
.product-card ul { gap: 11px; margin-bottom: 27px; }
.product-card li { color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.45; }
.product-card li::before { color: #AD63F5; }
.product-bottom { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.product-bottom small { color: rgba(255,255,255,.5); font-size: 9px; }
.product-bottom strong { margin-top: 5px; font-size: 21px; }
.product-bottom a {
  min-height: 44px;
  margin-top: 17px;
  padding-inline: 15px;
  border: 1px solid #AD63F5;
  border-radius: 11px;
  background: #AD63F5;
  box-shadow: 0 10px 24px rgba(173,99,245,.2);
  color: #100B1B;
  font-size: 12px;
}
.product-bottom a:hover,.product-bottom a:focus-visible { background: #fff; border-color: #fff; color: #100B1B; }
.product-bottom a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Compact metrics bridge the catalog and interactive process. */
.platform-band { gap: 14px; margin-top: -36px; margin-bottom: 46px; }
.platform-band>div {
  min-height: 82px;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: linear-gradient(125deg,rgba(255,255,255,.12),rgba(16,11,27,.58) 42%,rgba(16,11,27,.74));
  box-shadow: 0 17px 36px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.2);
}
.platform-band span { width: 41px; height: 41px; border-radius: 12px; }
.platform-band strong { font-size: 28px; }
.platform-band small { color: rgba(255,255,255,.66); font-size: 11px; }

.process-section { padding-top: 70px; padding-bottom: 115px; }
.process-section::after {
  inset: 0;
  background: radial-gradient(ellipse 50% 55% at 80% 45%,rgba(173,99,245,.11),transparent 80%);
}
.process-section .process-heading { margin-bottom: 35px; }
.process-grid { gap: clamp(35px,6vw,86px); }
.process-grid::before { border-color: rgba(173,99,245,.18); box-shadow: 0 0 0 53px rgba(173,99,245,.035),0 0 80px rgba(173,99,245,.08); }
.process-copy .steps { gap: 12px; }
.process-step {
  position: relative;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(16,11,27,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .25s,background .25s,transform .25s,box-shadow .25s;
}
.process-step:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.process-step:hover,.process-step.active {
  padding-left: 19px;
  border-color: rgba(173,99,245,.48);
  background: linear-gradient(100deg,rgba(173,99,245,.15),rgba(16,11,27,.4));
  box-shadow: 0 10px 26px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.09);
}
.process-step.active::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 5px;
  background: #AD63F5;
  box-shadow: 0 0 12px rgba(173,99,245,.45);
}
.process-step>span:first-child {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(173,99,245,.38);
  border-radius: 12px;
  background: rgba(173,99,245,.11);
  color: #AD63F5;
  font-size: 12px;
}
.process-step.active>span:first-child { background: #AD63F5; color: #100B1B; }
.process-step strong { font-size: 18px; line-height: 1.3; }
.process-step small { margin-top: 7px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.6; }
.process-step:focus-visible { outline: 2px solid #AD63F5; outline-offset: 3px; }
.process-visual {
  border-color: #100B1B;
  background: radial-gradient(circle at 50% 4%,rgba(173,99,245,.22),rgba(16,11,27,.93) 52%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.48),0 28px 65px rgba(0,0,0,.42),0 0 80px rgba(173,99,245,.12);
}
.process-visual .visual-head,.process-visual .visual-footer { color: rgba(255,255,255,.6); }
.process-visual .visual-choice,.process-visual .visual-form,.process-visual .visual-order {
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.055);
}
.process-visual .visual-form>div { background: #AD63F5; }
.process-visual .visual-lines i { background: rgba(173,99,245,.55); }

.use-section { padding-block: clamp(78px,8vw,115px); border-block: 1px solid rgba(255,255,255,.07); }
.use-section::before {
  inset: 0;
  background: radial-gradient(ellipse 36% 58% at 95% 15%,rgba(173,99,245,.1),transparent 80%);
}
.use-grid { gap: 16px; }
.use-grid>div {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 21px;
  background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(16,11,27,.5) 55%,rgba(16,11,27,.67));
  box-shadow: 0 19px 43px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.17);
}
.use-grid>div::before {
  position: absolute;
  top: 23px;
  right: 25px;
  color: rgba(255,255,255,.13);
  font: 800 41px/1 Outfit,sans-serif;
  letter-spacing: -.08em;
}
.use-grid>div:first-child::before { content: "01"; }
.use-grid>div:nth-child(2)::before { content: "02"; }
.use-grid>div:nth-child(3)::before { content: "03"; }
.use-grid>div>span { width: 50px; height: 50px; border: 1px solid rgba(173,99,245,.44); border-radius: 14px; background: rgba(173,99,245,.16); color: #AD63F5; font-size: 27px; }
.use-grid h3 { margin-top: 27px; font-size: 24px; }
.use-grid p { max-width: 310px; color: rgba(255,255,255,.69); font-size: 13px; line-height: 1.65; }
.use-grid>div:hover { border-color: rgba(173,99,245,.58); box-shadow: 0 24px 45px rgba(0,0,0,.25),0 0 30px rgba(173,99,245,.12); }

.faq-section { padding-block: clamp(78px,8vw,115px); }
.faq-grid { gap: clamp(45px,7vw,110px); }
.faq-grid>div>p { margin-top: 20px; color: rgba(255,255,255,.65); font-size: 14px; }
.faq-list {
  padding: 8px 29px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(16,11,27,.47) 52%,rgba(16,11,27,.66));
  box-shadow: 0 22px 50px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.16);
}
.faq-list details { border-bottom: 1px solid rgba(255,255,255,.14); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { min-height: 70px; padding: 18px 2px; color: #fff; font-size: 16px; line-height: 1.35; transition: color .2s; }
.faq-list summary:hover,.faq-list details[open] summary { color: #AD63F5; }
.faq-list summary::after { flex: none; width: 31px; height: 31px; border-color: rgba(173,99,245,.45); background: rgba(173,99,245,.1); color: #AD63F5; }
.faq-list summary:focus-visible { outline: 2px solid #AD63F5; outline-offset: 3px; border-radius: 6px; }
.faq-list details p { margin: -3px 42px 23px 2px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.7; }

.final-cta { padding: 0 0 95px; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.final-cta-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 270px;
  padding: clamp(32px,4.5vw,62px);
  border: 1px solid rgba(173,99,245,.45);
  border-radius: 28px;
  background: radial-gradient(ellipse 46% 85% at 94% 105%,rgba(173,99,245,.28),transparent 78%),
              linear-gradient(125deg,rgba(255,255,255,.11),rgba(16,11,27,.46) 38%,rgba(16,11,27,.75));
  box-shadow: 0 24px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}
.final-cta-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -95px;
  top: -145px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(173,99,245,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(173,99,245,.04),0 0 0 115px rgba(173,99,245,.025);
  pointer-events: none;
}
.final-cta-inner>div>span { color: #AD63F5; font-size: 11px; letter-spacing: .22em; }
.final-cta h2 { margin-top: 16px; font-size: clamp(35px,3.9vw,58px); line-height: 1.06; }
.final-cta h2 em { color: #AD63F5; font-style: normal; }
.final-cta .button { flex: none; min-height: 55px; padding-inline: 22px; background: #AD63F5; color: #100B1B; }
.final-cta .button:hover { background: #fff; box-shadow: 0 12px 30px rgba(255,255,255,.15); }
.final-cta .button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-card { min-height: 410px; }
  .product-card>p { min-height: 0; }
}
@media (max-width: 820px) {
  .services-section .section-heading>p,.process-section .section-heading>p,.use-section .section-heading>p { max-width: 580px; margin-top: 22px; }
  .process-section { padding-top: 80px; }
  .process-grid { gap: 40px; }
  .process-visual { order: -1; }
  .faq-grid { gap: 30px; }
}
@media (max-width: 620px) {
  .category-bar .container { min-height: 50px; }
  .services-section { padding-top: 75px; padding-bottom: 75px; }
  .services-section .section-heading,.process-section .section-heading,.use-section .section-heading { margin-bottom: 30px; }
  .services-section .section-heading h2,.process-section .section-heading h2,.use-section .section-heading h2,.faq-section h2 { font-size: clamp(33px,9vw,43px); }
  .services-section .section-heading>p,.process-section .section-heading>p,.use-section .section-heading>p { padding-left: 14px; font-size: 13px; }
  .product-grid,.use-grid { grid-template-columns: 1fr; gap: 13px; }
  .product-card { min-height: 0; padding: 24px 22px 21px; }
  .product-type { margin-top: 22px; }
  .product-card>p { margin-bottom: 18px; }
  .platform-band { margin-top: -18px; margin-bottom: 0; }
  .platform-band>div { min-height: 65px; }
  .process-section { padding-top: 85px; padding-bottom: 75px; }
  .process-grid { gap: 34px; }
  .process-copy .steps { gap: 10px; }
  .process-step { padding: 15px; grid-template-columns: 35px 1fr; gap: 13px; }
  .process-step:hover,.process-step.active { padding-left: 15px; }
  .process-step>span:first-child { width: 34px; height: 34px; }
  .process-step strong { font-size: 16px; }
  .process-step small { font-size: 11px; }
  .use-section,.faq-section { padding-block: 75px; }
  .use-grid>div { min-height: 214px; padding: 24px; }
  .use-grid h3 { margin-top: 22px; }
  .faq-list { padding: 4px 17px; }
  .faq-list summary { min-height: 66px; font-size: 14px; }
  .faq-list details p { margin-right: 26px; font-size: 12px; }
  .final-cta { padding-bottom: 68px; }
  .final-cta-inner { min-height: 0; padding: 29px 25px; border-radius: 22px; }
  .final-cta h2 { font-size: clamp(32px,8.4vw,43px); }
  .final-cta .button { margin-top: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
  .product-card,.use-grid>div,.platform-band>div { transition: transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s; }
  .product-card:hover,.product-card:focus-within,.use-grid>div:hover,.platform-band>div:hover { transform: translateY(-5px); }
  .process-step:hover { transform: translateX(3px); }
  .final-cta-inner::before { animation: cta-breathe 9s ease-in-out infinite alternate; }
  @keyframes cta-breathe { to { transform: translate(-16px,12px) scale(1.07); opacity: .75; } }
}
@media (prefers-reduced-motion: reduce) {
  .product-card,.use-grid>div,.platform-band>div,.process-step,.final-cta .button { transition: none; }
  .final-cta-inner::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .product-card,.platform-band>div,.process-step,.use-grid>div,.faq-list,.final-cta-inner { background: #100B1B; backdrop-filter: none; -webkit-backdrop-filter: none; }
}