.guide-hub {
  background:
    radial-gradient(circle at 12% 18%, rgba(79, 107, 255, .08), transparent 28rem),
    radial-gradient(circle at 88% 34%, rgba(255, 79, 198, .08), transparent 30rem),
    #fff;
}

.guide-hub .guides-hero {
  position: relative;
  overflow: hidden;
  padding: 184px 0 74px;
}

.guide-hub .guides-hero::before {
  display: none;
}

.guides-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.guides-hero-copy {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.guides-hero h1 {
  max-width: 850px;
  margin: 0 auto 24px;
  font-size: clamp(2.45rem, 5.2vw, 4.85rem);
  line-height: .99;
  letter-spacing: -.055em;
}

.guides-hero-lead {
  max-width: 690px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.guides-visual {
  display: none;
}

.guides-record {
  position: relative;
  width: min(26vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, rgba(255,255,255,.07) 11px 12px),
    conic-gradient(from 35deg, #1a1029, #4f6bff, #171020, #ff4fc6, #181025, #9b5cf6, #1a1029);
  box-shadow: 0 34px 70px -26px rgba(71, 34, 117, .55);
  transform: rotate(-8deg);
}

.guides-record::before {
  content: "";
  position: absolute;
  inset: 34%;
  border: 12px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 1px rgba(33, 20, 48, .1);
}

.guides-record::after {
  content: "";
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: #fff;
}

.guides-count {
  position: absolute;
  right: -6px;
  bottom: 28px;
  z-index: 1;
  min-width: 154px;
  padding: 16px 18px;
  border: 1px solid rgba(155, 92, 246, .22);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 45px -22px rgba(37, 23, 54, .42);
  backdrop-filter: blur(12px);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.guides-count strong {
  display: block;
  margin-bottom: 2px;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}

.guide-hub .guides-catalog {
  padding: 24px 0 110px;
}

.guide-hub .guides-content {
  max-width: none;
}

.guide-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.guide-grid li {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
}

.guide-card {
  position: relative;
  min-height: 286px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 45px -36px rgba(33, 20, 48, .52);
  color: var(--text) !important;
  text-decoration: none !important;
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.guide-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -110px;
  bottom: -115px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .13;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}

.guide-card:hover,
.guide-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(155, 92, 246, .36);
  box-shadow: 0 28px 64px -38px rgba(86, 42, 143, .58);
}

.guide-card:hover::after,
.guide-card:focus-visible::after {
  transform: scale(1.28);
  opacity: .22;
}

.guide-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #9d2b91;
}

.guide-number::after {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
}

.guide-card h2 {
  margin: 0 0 14px !important;
  max-width: 560px;
  font-size: clamp(1.22rem, 2vw, 1.55rem) !important;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.guide-card p {
  margin: 0 0 28px !important;
  max-width: 590px;
  color: var(--text-muted) !important;
  font-size: .96rem;
  line-height: 1.65;
}

.guide-card-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  color: var(--violet);
}

.guide-card-action span {
  font-size: 1.2rem;
  line-height: 1;
  transition: transform .25s var(--ease);
}

.guide-card:hover .guide-card-action span,
.guide-card:focus-visible .guide-card-action span {
  transform: translateX(4px);
}

.guide-hub .guides-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin: 28px 0 0;
  padding: clamp(30px, 5vw, 54px);
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: #171022;
  box-shadow: 0 28px 70px -42px rgba(33, 20, 48, .72);
}

.guide-hub .guides-cta::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -150px;
  top: -215px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .55;
  filter: blur(3px);
}

.guides-cta-copy {
  position: relative;
  z-index: 1;
  max-width: 730px;
}

.guide-hub .guides-cta h2 {
  margin: 0 0 12px !important;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
}

.guide-hub .guides-cta p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
}

.guide-hub .guides-cta .btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  color: #fff !important;
  text-decoration: none !important;
}

.guide-hub .guides-cta .btn:hover,
.guide-hub .guides-cta .btn:focus-visible {
  color: #fff !important;
}

/* Article template */
.guide-article {
  background:
    radial-gradient(circle at 8% 32%, rgba(79,107,255,.07), transparent 30rem),
    radial-gradient(circle at 94% 58%, rgba(255,79,198,.07), transparent 32rem),
    #fff;
}

.guide-article .hero {
  min-height: 480px;
  padding: 188px 0 118px !important;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,79,198,.14), transparent 25rem),
    radial-gradient(circle at 28% 4%, rgba(79,107,255,.15), transparent 29rem),
    linear-gradient(145deg, #fff 20%, #f8f5ff 100%);
}

.guide-article .hero::before {
  display: none;
}

.guide-article .hero::after {
  display: none;
}

.guide-article .hero-inner {
  max-width: 960px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.guide-article .hero h1 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(2.45rem, 5vw, 4.4rem) !important;
  line-height: 1.02;
  letter-spacing: -.052em;
}

.guide-article .section {
  z-index: 2;
  margin-top: -62px;
  padding: 0 0 110px !important;
}

.guide-article .article-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 68px);
  border: 1px solid rgba(39,25,62,.09);
  border-radius: 32px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 35px 90px -58px rgba(39,25,62,.52);
}

.guide-article .article-content > p {
  margin: 0 0 1.35em;
  color: #5d5868;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.82;
}

.guide-article .article-content > p:first-child {
  margin-bottom: 2.3em;
  color: var(--text);
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  line-height: 1.72;
}

.guide-article .article-content > h2 {
  position: relative;
  margin: 2.25em 0 .72em !important;
  padding-top: 18px;
  color: var(--text);
  font-size: clamp(1.42rem, 2.5vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.guide-article .article-content > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: var(--gradient);
}

.guide-article .article-content > ul,
.guide-article .article-content > ol {
  margin: 1.4em 0 2.2em !important;
  padding: 24px 28px 24px 52px !important;
  border: 1px solid rgba(155,92,246,.14);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(79,107,255,.055), rgba(255,79,198,.055));
}

.guide-article .article-content > ul { list-style: disc; }
.guide-article .article-content > ol { list-style: decimal; }

.guide-article .article-content > ul li,
.guide-article .article-content > ol li {
  padding-left: 5px;
  color: #554f61;
  font-size: 1rem;
  line-height: 1.72;
}

.guide-article .article-content > ul li + li,
.guide-article .article-content > ol li + li {
  margin-top: 12px;
}

.guide-article .article-content > ul li::marker,
.guide-article .article-content > ol li::marker {
  color: var(--violet);
  font-weight: 800;
}

.guide-article .article-content a:not(.btn) {
  color: #7a3ff0;
  text-decoration-color: rgba(122,63,240,.38);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.guide-article .article-content a:not(.btn):hover,
.guide-article .article-content a:not(.btn):focus-visible {
  color: #b3289e;
  text-decoration-color: currentColor;
}

.guide-article .article-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 3.2em 0 0;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #171022;
  box-shadow: 0 28px 65px -42px rgba(39,25,62,.75);
}

.guide-article .article-cta::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  top: -145px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .62;
}

.guide-article .article-cta p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.65;
}

.guide-article .article-cta p strong {
  color: #fff;
}

.guide-article .article-cta .btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.guide-article .article-cta .btn:hover,
.guide-article .article-cta .btn:focus-visible {
  color: #fff !important;
}

.guide-article .article-related {
  margin-top: 54px;
  padding-top: 0;
  border-top: 0;
}

.guide-article .article-related h2 {
  margin: 0 0 20px !important;
  padding: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.guide-article .article-related h2::before { display: none; }

.guide-article .article-related ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article .article-related li {
  margin: 0;
}

.guide-article .article-related a {
  position: relative;
  min-height: 128px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none !important;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.guide-article .article-related a::after {
  content: "→";
  color: var(--violet);
  font-size: 1.15rem;
}

.guide-article .article-related a:hover,
.guide-article .article-related a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(155,92,246,.34);
  box-shadow: 0 18px 36px -28px rgba(61,30,101,.52);
}

@media (max-width: 860px) {
  .guide-hub .guides-hero { padding: 155px 0 60px; }
  .guides-hero-grid { grid-template-columns: 1fr; }
  .guides-visual { min-height: 245px; }
  .guides-record { width: 220px; }
  .guides-count { right: calc(50% - 165px); bottom: 0; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 0; }
  .guide-hub .guides-cta { grid-template-columns: 1fr; }
  .guide-hub .guides-cta .btn { justify-self: start; }
  .guide-article .hero::before,
  .guide-article .hero::after { display: none; }
  .guide-article .hero { min-height: 0; padding: 154px 0 104px !important; }
  .guide-article .hero-inner { max-width: 850px !important; }
  .guide-article .article-related ul { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .guide-hub .guides-hero { padding: 128px 0 48px; }
  .guides-hero h1 { font-size: clamp(2.2rem, 12vw, 3.35rem); }
  .guides-hero-lead { font-size: 1rem; }
  .guides-visual { min-height: 215px; }
  .guides-record { width: 190px; }
  .guides-count { right: calc(50% - 145px); padding: 13px 15px; }
  .guide-hub .guides-catalog { padding: 12px 0 82px; }
  .guide-card { padding: 26px 24px; border-radius: 22px; }
  .guide-number { margin-bottom: 22px; }
  .guide-hub .guides-cta { border-radius: 22px; }
  .guide-hub .guides-cta .btn { width: 100%; white-space: normal; text-align: center; }
  .guide-article .hero { padding: 132px 0 88px !important; }
  .guide-article .hero h1 { font-size: clamp(2.15rem, 11vw, 3.2rem) !important; }
  .guide-article .section { margin-top: -42px; padding-bottom: 82px !important; }
  .guide-article .article-content { padding: 32px 22px; border-radius: 24px; }
  .guide-article .article-content > h2 { margin-top: 2em !important; }
  .guide-article .article-content > ul,
  .guide-article .article-content > ol { padding: 20px 20px 20px 42px !important; }
  .guide-article .article-cta { grid-template-columns: 1fr; border-radius: 20px; }
  .guide-article .article-cta .btn { width: 100%; white-space: normal; text-align: center; }
  .guide-article .article-related a { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card,
  .guide-card::after,
  .guide-card-action span { transition: none; }
}