:root {
 --primary-color: #7338A0;
 --secondary-color: #0f0529;
 --background-color: #ecf0f1;
 --text-color: #2c3e50;
 --hover-color: #8e44ad;
 --white: #fff;
 --primary: #7338A0;
 --secondary: #0f0529;
 --accent: #c084fc;
 --gold: #e9b84a;
 --glass: rgba(115, 56, 160, .30);
 --glass-bg: rgba(255, 255, 255, 0.8);
 --glass-border: rgba(115, 56, 160, .24);
 --text-hi: #ffffff;
 --text-mid: #000;
 --mid: rgba(255, 255, 255, .65);
 --text-lo: rgba(255, 255, 255, .28);
 --ease: cubic-bezier(.4, 0, .2, 1);
 --ease-back: cubic-bezier(.34, 1.56, .64, 1);
 --card-h: 260px;
 /* all cards same height */
}


* {
 box-sizing: border-box;
}


body {
 font-family: 'DM Sans', sans-serif;
 background: var(--secondary-color);
 overflow-x: hidden;
}

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

p {
 margin: 0 !important;
 padding: 0 !important;
}


#top-nav {
 background-color: var(--secondary-color);
 color: white;
 padding: 1rem 0;
}

@media screen and (max-width: 991px) {
 #top-nav {
  display: none;
 }

 .steps-section::before {
  display: none;
 }
}


.navbar-brand img {
 width: 250px;
}


.primary-button {
 --color: var(--primary-color);
 font-family: inherit;
 display: inline-block;
 padding: 0px 50px;
 line-height: 2.5em;
 background: var(--primary-color);
 position: relative;
 cursor: pointer;
 overflow: hidden;
 border: 2px solid var(--color);
 transition: color 0.5s;
 z-index: 1;
 font-size: 17px;
 border-radius: 30px;
 font-weight: 500;
 color: var(--background-color);
 margin: 0 10px;
}

.primary-button::before {
 content: "";
 position: absolute;
 z-index: -1;
 background: var(--secondary-color);
 height: 150px;
 width: 200px;
 border-radius: 50%;
 top: 100%;
 left: 100%;
 transition: all 0.7s;
}

.primary-button:hover {
 color: #fff;
}

.primary-button:hover::before {
 top: -30px;
 left: -30px;
}

.primary-button:active::before {
 background: #3a0ca3;
 transition: background 0s;
}


.outline-button {
 --color: var(--secondary);
 font-family: inherit;
 display: inline-block;
 padding: 0px 50px;
 line-height: 2.5em;
 position: relative;
 cursor: pointer;
 overflow: hidden;
 border: 2px solid var(--color);
 transition: color 0.5s;
 z-index: 1;
 font-size: 17px;
 border-radius: 30px;
 font-weight: 500;
 color: var(--color);
}

.outline-button::before {
 content: "";
 position: absolute;
 z-index: -1;
 background: var(--primary);
 height: 150px;
 width: 200px;
 border-radius: 50%;
 top: 100%;
 left: 100%;
 transition: all 0.7s;
}

.outline-button:hover {
 color: #fff;
}

.outline-button:hover::before {
 top: -30px;
 left: -30px;
}

.outline-button:active::before {
 background: #3a0ca3;
 transition: background 0s;
}


/* ── HERO ── */
.hero {
 position: relative;
 min-height: 100vh;
 display: flex;
 align-items: center;
 overflow: hidden;
}

.hero-video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
 opacity: 0.22;
}

/* Gradient overlay */
/* .hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
  linear-gradient(135deg, rgba(15, 5, 41, 0.97) 0%, rgba(115, 56, 160, 0.55) 60%, rgba(15, 5, 41, 0.9) 100%);
 z-index: 1;
} */

/* Decorative radial glow */
.hero::after {
 content: '';
 position: absolute;
 top: -120px;
 left: -120px;
 width: 600px;
 height: 600px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, 0.35) 0%, transparent 70%);
 z-index: 1;
 pointer-events: none;
}

.hero-content {
 position: relative;
 z-index: 2;
}

/* ── COPY ── */
.eyebrow {
 display: inline-block;
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--white);
 border: 1px solid rgba(233, 184, 74, 0.35);
 padding: 4px 14px;
 border-radius: 2px;
 margin-bottom: 1.1rem;
}

h1 {
 font-family: 'Playfair Display', serif;
 font-size: clamp(2.2rem, 5vw, 3.8rem);
 font-weight: 900;
 line-height: 1.12;
 color: #fff;
}

h1 span {
 color: var(--accent);
}

.subline {
 font-size: 1.05rem;
 color: rgba(255, 255, 255, 0.72);
 font-weight: 300;
 margin: 1rem 0 1.8rem;
 letter-spacing: 0.01em;
}

/* ── STATS ── */
.stat-list {
 list-style: none;
 padding: 0;
 display: flex;
 /* flex-direction: column; */
 gap: 0.65rem;
 margin-top: 20px;
}

.stat-list li {
 display: flex;
 align-items: center;
 gap: 0.7rem;
 font-size: 0.95rem;
 color: rgba(255, 255, 255, 0.85);
}

.stat-list li::before {
 content: '';
 display: block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--gold);
 flex-shrink: 0;
 box-shadow: 0 0 8px rgba(233, 184, 74, 0.7);
}

.stat-value {
 font-family: 'Playfair Display', serif;
 font-weight: 700;
 font-size: 1.15rem;
 color: var(--gold);
 margin-right: 2px;
}

/* ── DISCOUNT BADGE ── */
.badge-50 {
 position: absolute;
 top: -70px;
 right: -10px;

 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;

 width: 88px;
 height: 88px;

 background: var(--gold);
 color: var(--white);

 font-family: 'Playfair Display', serif;
 font-weight: 900;
 line-height: 1;
 text-align: center;

 /* Remove circle */
 border-radius: 0;

 /* Polygon shape */
 clip-path: polygon(50% 0%,
   83% 12%,
   100% 43%,
   94% 78%,
   68% 100%,
   32% 100%,
   6% 78%,
   0% 43%,
   17% 12%);

 animation: pulse-badge 2.4s ease-in-out infinite;
}

/* Border layer */
.badge-50::before {
 content: "";
 position: absolute;
 inset: -4px;
 /* border thickness */
 background: var(--primary);
 /* border color */
 clip-path: polygon(50% 0%,
   83% 12%,
   100% 43%,
   94% 78%,
   68% 100%,
   32% 100%,
   6% 78%,
   0% 43%,
   17% 12%);
 z-index: -1;
}

.badge-50 .pct {
 font-size: 14px;
}

.badge-50 .off {
 font-size: 0.7rem;
 letter-spacing: 0.1em;
 font-family: 'DM Sans', sans-serif;
}

@keyframes pulse-badge {

 0%,
 100% {
  transform: scale(1);
 }

 50% {
  transform: scale(1.06);
 }
}

/* ── RIGHT CARD PANEL ── */
.side-panel {
 background: rgba(15, 5, 41, 0.82);
 border: 1px solid rgba(115, 56, 160, 0.45);
 border-radius: 16px;
 backdrop-filter: blur(18px);
 padding: 2rem 1.8rem;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 position: relative;
}



/* ── CLOCK ── */
.clock-wrapper {
 display: none;
 justify-content: center;
 gap: 0.5rem;
 margin-bottom: 1.6rem;
 padding-bottom: 1.4rem;
 border-bottom: 1px solid rgba(115, 56, 160, 0.3);
}

.clock-unit {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.clock-digit {
 font-family: 'Playfair Display', serif;
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
 background: rgba(115, 56, 160, 0.3);
 border: 1px solid rgba(115, 56, 160, 0.5);
 border-radius: 8px;
 width: 62px;
 height: 62px;
 display: flex;
 align-items: center;
 justify-content: center;
 letter-spacing: 0.04em;
 position: relative;
 overflow: hidden;
}

.clock-digit::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 height: 1px;
 background: rgba(0, 0, 0, 0.35);
}

.clock-label {
 font-size: 0.6rem;
 text-transform: uppercase;
 letter-spacing: 0.15em;
 color: rgba(255, 255, 255, 0.45);
 margin-top: 5px;
}

.clock-sep {
 font-family: 'Playfair Display', serif;
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--accent);
 align-self: flex-start;
 margin-top: 10px;
 animation: blink-sep 1s step-end infinite;
}

@keyframes blink-sep {

 0%,
 100% {
  opacity: 1
 }

 50% {
  opacity: 0.15
 }
}

/* ── FORM ── */
.form-title {
 font-family: 'Playfair Display', serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 1rem;
 background-color: var(--gold);
 text-align: center;
 padding: 20px 0;
}

.form-control,
.form-control:focus {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(115, 56, 160, 0.4);
 color: #fff;
 border-radius: 8px;
 font-family: 'DM Sans', sans-serif;
 font-size: 0.88rem;
 padding: 0.6rem 0.9rem;
 box-shadow: none;
 transition: border-color 0.25s;
}

.form-control::placeholder {
 color: rgba(255, 255, 255, 0.3);
}

.form-control:focus {
 border-color: var(--primary-color);
 background: rgba(115, 56, 160, 0.1);
 color: #fff;
}

textarea.form-control {
 resize: none;
}

.btn-submit {
 width: 100%;
 background: linear-gradient(135deg, var(--primary-color), #5a1fa0);
 border: none;
 border-radius: 8px;
 color: #fff;
 font-family: 'DM Sans', sans-serif;
 font-weight: 500;
 font-size: 0.92rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 0.72rem;
 margin-top: 0.5rem;
 cursor: pointer;
 transition: transform 0.18s, box-shadow 0.18s;
 box-shadow: 0 6px 20px rgba(115, 56, 160, 0.45);
}

.btn-submit:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 28px rgba(115, 56, 160, 0.65);
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
 from {
  opacity: 0;
  transform: translateY(30px);
 }

 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.anim-1 {
 animation: fadeUp 0.7s ease both 0.1s;
}

.anim-2 {
 animation: fadeUp 0.7s ease both 0.25s;
}

.anim-3 {
 animation: fadeUp 0.7s ease both 0.4s;
}

.anim-4 {
 animation: fadeUp 0.7s ease both 0.55s;
}

.anim-5 {
 animation: fadeUp 0.7s ease both 0.7s;
}

/* Noise grain overlay */
.noise {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 opacity: 0.03;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
 background-size: 200px;
}

@media (max-width: 767px) {
 .side-panel {
  margin-top: 2.5rem;
 }
}


/* ════════════════════════════════
   SECTION WRAPPER
════════════════════════════════ */
.steps-section {
 position: relative;
 overflow: hidden;
 padding: 110px 0 130px;
 background: var(--background-color);
}


.steps-section::before {
 content: '';
 position: absolute;
 width: 250px;
 height: 800px;
 left: 0;
 background: url(img/feather.webp);
}

.steps-section .section-title {
 color: var(--text-mid);
}

/* ── decorative blobs ── */
.steps-section::before,
.steps-section::after {
 content: '';
 position: absolute;
 pointer-events: none;
}

.steps-section::before {
 width: 700px;
 height: 1200px;
 /* top: -220px; */
 left: -150px;
 background: url(img/feather.webp) center center / contain no-repeat;
 animation: floatA 7s ease-in-out infinite, fadeIn .8s ease .3s forwards;

}

.steps-section::after {
 width: 500px;
 height: 500px;
 bottom: -160px;
 right: -140px;
 background: radial-gradient(circle, rgba(192, 132, 252, .18) 0%, transparent 70%);
}

/* additional accent orb */
.orb-mid {
 position: absolute;
 width: 360px;
 height: 360px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, .12) 0%, transparent 65%);
 pointer-events: none;
}

/* thin grid lines overlay */
.grid-lines {
 position: absolute;
 inset: 0;
 background-image:
  linear-gradient(rgba(115, 56, 160, .06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(115, 56, 160, .06) 1px, transparent 1px);
 background-size: 60px 60px;
 pointer-events: none;
}

/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.section-head {
 text-align: center;
 max-width: 720px;
 margin: 0 auto 80px;
 position: relative;
 z-index: 2;

 /* scroll-triggered reveal */
 opacity: 0;
 transform: translateY(36px);
 transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.section-head.visible {
 opacity: 1;
 transform: none;
}

.eyebrow {
 display: inline-block;
 font-size: .7rem;
 font-weight: 600;
 letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--gold);
 border: 1px solid rgba(233, 184, 74, .3);
 border-radius: 2px;
 padding: 4px 14px;
 margin-bottom: 1.2rem;
}

.section-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 4.5vw, 3.2rem);
 font-weight: 700;
 line-height: 1.15;
 color: var(--text-hi);
}

.section-title em {
 font-style: normal;
 color: var(--accent);
}

.section-sub {
 font-size: .95rem;
 color: var(--text-mid);
 line-height: 1.75;
 margin-top: 1rem;
 font-weight: 400;
}

/* ════════════════════════════════
   CONNECTOR LINE (desktop)
════════════════════════════════ */
.steps-track {
 position: relative;
 z-index: 2;
 max-width: 1160px;
 margin: 0 auto;
 padding: 0 20px;
}

/* vertical spine visible only on ≥ lg */
.steps-track::before {
 content: '';
 position: absolute;
 left: 50%;
 top: 48px;
 bottom: 48px;
 width: 1px;
 transform: translateX(-50%);
 background: linear-gradient(to bottom,
   transparent,
   var(--glass-border) 8%,
   var(--glass-border) 92%,
   transparent);
}

/* ════════════════════════════════
   STEP ROW
════════════════════════════════ */
.step-row {
 display: grid;
 grid-template-columns: 1fr 80px 1fr;
 align-items: center;
 gap: 0;
 margin-bottom: 48px;

 opacity: 0;
 transform: translateY(40px);
 transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.step-row.visible {
 opacity: 1;
 transform: none;
}

/* alternate sides */
.step-row:nth-child(even) .step-card {
 grid-column: 3;
}

.step-row:nth-child(even) .step-node {
 grid-column: 2;
}

.step-row:nth-child(even) .step-spacer {
 grid-column: 1;
}

.step-row:nth-child(odd) .step-card {
 grid-column: 1;
}

.step-row:nth-child(odd) .step-node {
 grid-column: 2;
}

.step-row:nth-child(odd) .step-spacer {
 grid-column: 3;
}

/* reorder for even rows */
.step-row:nth-child(even) {
 grid-template-areas: "spacer node card";
}

.step-row:nth-child(odd) {
 grid-template-areas: "card node spacer";
}

.step-card {
 grid-area: card;
}

.step-node {
 grid-area: node;
}

.step-spacer {
 grid-area: spacer;
}

/* ════════════════════════════════
   NODE (center bubble)
════════════════════════════════ */
.step-node {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 z-index: 3;
}

.node-inner {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 border: 2px solid rgba(192, 132, 252, .45);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: #fff;
 box-shadow: 0 0 0 6px rgba(115, 56, 160, .15), 0 6px 24px rgba(115, 56, 160, .45);
 transition: transform .35s var(--ease), box-shadow .35s var(--ease);
 position: relative;
}

/* pulse ring */
.node-inner::after {
 content: '';
 position: absolute;
 inset: -8px;
 border-radius: 50%;
 border: 1px solid rgba(192, 132, 252, .25);
 animation: node-ping 2.6s ease-in-out infinite;
}

@keyframes node-ping {
 0% {
  transform: scale(1);
  opacity: .6;
 }

 70% {
  transform: scale(1.45);
  opacity: 0;
 }

 100% {
  transform: scale(1.45);
  opacity: 0;
 }
}

/* ════════════════════════════════
   STEP CARD
════════════════════════════════ */
.step-card {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 border-radius: 18px;
 padding: 28px 30px;
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 position: relative;
 overflow: hidden;
 transition:
  transform .35s var(--ease),
  box-shadow .35s var(--ease),
  border-color .35s var(--ease);
 cursor: default;
}

/* card inner glow on hover */
.step-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(115, 56, 160, .18), transparent 60%);
 opacity: 0;
 transition: opacity .35s var(--ease);
}

/* step label (top-right corner) */
.step-label {
 position: absolute;
 top: 20px;
 right: 20px;
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .18em;
 text-transform: uppercase;
 color: var(--text-lo);
}

.step-number {
 font-family: 'Cormorant Garamond', serif;
 font-size: 3.2rem;
 font-weight: 700;
 line-height: 1;
 color: rgba(115, 56, 160, .18);
 position: absolute;
 bottom: 16px;
 right: 22px;
 pointer-events: none;
 transition: color .35s var(--ease);
}

.step-icon {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(115, 56, 160, .5), rgba(75, 20, 128, .5));
 border: 1px solid rgba(192, 132, 252, .3);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 16px;
 font-size: 1.25rem;
 transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.step-card h3 {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.3rem;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 10px;
 line-height: 1.25;
}

.step-card p {
 font-size: .875rem;
 color: var(--secondary);
 line-height: 1.75;
 font-weight: 400;
}

/* ── hover states ── */
.step-card:hover {
 transform: translateY(-6px) scale(1.012);
 box-shadow:
  0 24px 48px rgba(0, 0, 0, .45),
  0 0 0 1px rgba(192, 132, 252, .4),
  0 0 32px rgba(115, 56, 160, .25);
 border-color: rgba(192, 132, 252, .5);
}

.step-card:hover::before {
 opacity: 1;
}

.step-card:hover .step-number {
 color: rgba(115, 56, 160, .35);
}

.step-card:hover .step-icon {
 transform: rotate(-6deg) scale(1.1);
 box-shadow: 0 8px 20px rgba(115, 56, 160, .5);
}

.step-node:hover .node-inner {
 transform: scale(1.12);
 box-shadow: 0 0 0 8px rgba(115, 56, 160, .2), 0 8px 30px rgba(115, 56, 160, .6);
}

/* ════════════════════════════════
   CTA
════════════════════════════════ */
.cta-wrap {
 text-align: center;
 margin-top: 72px;
 position: relative;
 z-index: 2;

 opacity: 0;
 transform: translateY(28px);
 transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s;
}

.cta-wrap.visible {
 opacity: 1;
 transform: none;
}

.btn-cta {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: linear-gradient(135deg, var(--primary) 0%, #4b1480 100%);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 16px 38px;
 font-family: 'Syne', sans-serif;
 font-size: .9rem;
 font-weight: 600;
 letter-spacing: .08em;
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 8px 28px rgba(115, 56, 160, .5);
 transition:
  transform .3s var(--ease),
  box-shadow .3s var(--ease),
  background .3s var(--ease);
 position: relative;
 overflow: hidden;
}

/* shimmer sweep */
.btn-cta::after {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 60%;
 height: 100%;
 background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
 transition: left .55s var(--ease);
}

.btn-cta:hover::after {
 left: 160%;
}

.btn-cta:hover {
 transform: translateY(-3px) scale(1.035);
 box-shadow: 0 16px 40px rgba(115, 56, 160, .65), 0 0 0 4px rgba(192, 132, 252, .25);
}

.btn-cta:active {
 transform: translateY(0) scale(.99);
}

.btn-arrow {
 display: inline-flex;
 width: 26px;
 height: 26px;
 background: rgba(255, 255, 255, .15);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .85rem;
 transition: transform .3s var(--ease);
}

.btn-cta:hover .btn-arrow {
 transform: translateX(4px);
}

/* secondary note */
.cta-note {
 margin-top: 14px;
 font-size: .78rem;
 color: var(--text-lo);
 letter-spacing: .04em;
}

.cta-note span {
 color: var(--gold);
 font-weight: 500;
}

/* ════════════════════════════════
   RESPONSIVE  ≤ 900px
════════════════════════════════ */
@media (max-width: 900px) {
 .steps-track::before {
  display: none;
 }

 .step-row,
 .step-row:nth-child(even),
 .step-row:nth-child(odd) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  grid-template-areas: none;
  margin-bottom: 32px;
 }

 .step-spacer {
  display: none;
 }

 .step-node {
  order: -1;
 }

 .step-card {
  width: 100%;
  max-width: 520px;
 }
}


/* ═══════════════════════════════════════
   SECTION
═══════════════════════════════════════ */
.experts-section {
 position: relative;
 overflow: hidden;
 padding: 110px 20px 130px;
}

/* ── static bg glow blobs ── */
.blob {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 filter: blur(2px);
}

.blob-1 {
 width: 560px;
 height: 560px;
 top: -160px;
 right: -160px;
 background: radial-gradient(circle, rgba(115, 56, 160, .28) 0%, transparent 68%);
}

.blob-2 {
 width: 420px;
 height: 420px;
 bottom: -100px;
 left: -100px;
 background: radial-gradient(circle, rgba(192, 132, 252, .16) 0%, transparent 65%);
}

.blob-3 {
 width: 300px;
 height: 300px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: radial-gradient(circle, rgba(115, 56, 160, .1) 0%, transparent 65%);
}

/* dot grid */
.dot-grid {
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(115, 56, 160, .15) 1px, transparent 1px);
 background-size: 38px 38px;
 pointer-events: none;
}

/* ═══════════════════════════════════════
   FLOATING PUBLISHING ELEMENTS
   Each element animates with unique
   float + rotate keyframes
═══════════════════════════════════════ */
.pub-el {
 position: absolute;
 pointer-events: none;
 z-index: 1;
 opacity: 0;
 /* revealed after load */
 animation-fill-mode: both;
 user-select: none;
}

/* SVG / emoji wrapper */
.pub-el svg {
 display: block;
}

/* individual placements */
.el-book1 {
 top: 8%;
 left: 3%;
 font-size: 3.2rem;
 animation: floatA 7s ease-in-out infinite, fadeIn .8s ease .3s forwards;
}

.el-book2 {
 top: 72%;
 left: 6%;
 font-size: 2.4rem;
 animation: floatB 9s ease-in-out infinite, fadeIn .8s ease .6s forwards;
}

.el-book3 {
 top: 18%;
 right: 4%;
 font-size: 2.8rem;
 animation: floatC 8s ease-in-out infinite, fadeIn .8s ease .4s forwards;
}

.el-book4 {
 top: 80%;
 right: 5%;
 font-size: 2rem;
 animation: floatA 6.5s ease-in-out infinite 1s, fadeIn .8s ease .9s forwards;
}

.el-pen1 {
 top: 38%;
 left: 1%;
 font-size: 2.6rem;
 transform-origin: center;
 animation: floatPen 8s ease-in-out infinite, fadeIn .8s ease .5s forwards;
}

.el-pen2 {
 top: 55%;
 right: 2%;
 font-size: 2.2rem;
 animation: floatPen 7s ease-in-out infinite 1.2s, fadeIn .8s ease .7s forwards;
}

.el-quill {
 top: 5%;
 left: 46%;
 font-size: 2.8rem;
 animation: floatB 10s ease-in-out infinite .5s, fadeIn .8s ease .4s forwards;
}

.el-star1 {
 top: 28%;
 left: 11%;
 font-size: 1.4rem;
 animation: twinkle 3s ease-in-out infinite, fadeIn .6s ease .3s forwards;
}

.el-star2 {
 top: 65%;
 right: 12%;
 font-size: 1.2rem;
 animation: twinkle 4s ease-in-out infinite .8s, fadeIn .6s ease .5s forwards;
}

.el-star3 {
 top: 90%;
 left: 45%;
 font-size: 1rem;
 animation: twinkle 3.5s ease-in-out infinite 1s, fadeIn .6s ease .6s forwards;
}

.el-ink {
 top: 46%;
 right: 1%;
 font-size: 2.4rem;
 animation: floatC 9s ease-in-out infinite .4s, fadeIn .8s ease .8s forwards;
}

.el-scroll {
 top: 85%;
 left: 30%;
 font-size: 2rem;
 animation: floatA 8.5s ease-in-out infinite .7s, fadeIn .8s ease 1s forwards;
}

.el-magnify {
 top: 12%;
 right: 15%;
 font-size: 2rem;
 animation: floatB 7.5s ease-in-out infinite .3s, fadeIn .8s ease .5s forwards;
}

.el-sparkle1 {
 top: 60%;
 left: 48%;
 font-size: 1.2rem;
 animation: twinkle 2.8s ease-in-out infinite .5s, fadeIn .5s ease .4s forwards;
}

.el-lines {
 top: 42%;
 left: 8%;
 opacity: 0;
 animation: floatC 11s ease-in-out infinite, fadeIn .8s ease .9s forwards;
}

/* ── keyframes ── */
@keyframes floatA {

 0%,
 100% {
  transform: translateY(0px) rotate(0deg);
 }

 33% {
  transform: translateY(-14px) rotate(4deg);
 }

 66% {
  transform: translateY(-6px) rotate(-3deg);
 }
}

@keyframes floatB {

 0%,
 100% {
  transform: translateY(0px) rotate(0deg);
 }

 40% {
  transform: translateY(-18px) rotate(-5deg);
 }

 70% {
  transform: translateY(-8px) rotate(3deg);
 }
}

@keyframes floatC {

 0%,
 100% {
  transform: translateY(0px) scale(1);
 }

 50% {
  transform: translateY(-12px) scale(1.07);
 }
}

@keyframes floatPen {

 0%,
 100% {
  transform: translateY(0) rotate(-35deg);
 }

 50% {
  transform: translateY(-16px) rotate(-28deg);
 }
}

@keyframes twinkle {

 0%,
 100% {
  transform: scale(1);
  opacity: .7;
 }

 50% {
  transform: scale(1.35);
  opacity: 1;
 }
}

@keyframes fadeIn {
 to {
  opacity: 1;
 }
}

/* SVG lines element */
.el-lines svg {
 width: 60px;
 height: 60px;
 stroke: rgba(192, 132, 252, .25);
 fill: none;
 stroke-width: 1.5;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.experts-head {
 text-align: center;
 max-width: 680px;
 margin: 0 auto 64px;
 position: relative;
 z-index: 3;
 opacity: 0;
 transform: translateY(32px);
 transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.experts-head.visible {
 opacity: 1;
 transform: none;
}

.eyebrow {
 display: inline-block;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--gold);
 border: 1px solid rgba(233, 184, 74, .28);
 border-radius: 2px;
 padding: 4px 14px;
 margin-bottom: 1.1rem;
}

.section-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 4.2vw, 3.1rem);
 font-weight: 700;
 line-height: 1.18;
 color: var(--white);
}



.section-title em {
 font-style: italic;
 color: var(--accent);
}

.title-line {
 display: block;
 width: 56px;
 height: 2px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 margin: 16px auto 0;
 border-radius: 2px;
}

/* ═══════════════════════════════════════
   EQUAL CARDS GRID
   7 cards — all same height
═══════════════════════════════════════ */
.cards-grid {
 position: relative;
 z-index: 3;
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 /* 4 cols row-1, then row-2 centred with 3 */
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: var(--card-h) var(--card-h);
 gap: 22px;
}

/* cards 5-7 centred: push them with auto col */
/* We use a 12-col trick via subgrid emulation */
/* Simpler: use a separate row wrapper */

/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.service-card {
 position: relative;
 height: var(--card-h);
 /* ← fixed equal height */
 background: var(--glass);
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 padding: 28px 26px 24px;
 overflow: hidden;
 cursor: pointer;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 gap: 10px;

 /* reveal */
 opacity: 0;
 transform: translateY(36px);
 transition:
  opacity .55s var(--ease),
  transform .55s var(--ease),
  box-shadow .35s var(--ease),
  border-color .35s var(--ease);
}

.service-card.visible {
 opacity: 1;
 transform: none;
}

/* inner glow */
.service-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(115, 56, 160, .22), transparent 55%);
 opacity: 0;
 transition: opacity .35s var(--ease);
}

/* corner orb */
.service-card::after {
 content: '';
 position: absolute;
 top: -28px;
 right: -28px;
 width: 90px;
 height: 90px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(192, 132, 252, .14) 0%, transparent 70%);
 transition: transform .45s var(--ease);
}

/* hover */
.service-card:hover {
 border-color: rgba(192, 132, 252, .5);
 box-shadow:
  0 22px 52px rgba(0, 0, 0, .5),
  0 0 0 1px rgba(192, 132, 252, .32),
  0 0 32px rgba(115, 56, 160, .24);
 transform: translateY(-7px) scale(1.018) !important;
}

.service-card:hover::before {
 opacity: 1;
}

.service-card:hover::after {
 transform: scale(1.7) translate(8px, -8px);
}

/* icon */
.card-icon {
 width: 48px;
 height: 48px;
 border-radius: 13px;
 background: linear-gradient(135deg, rgba(115, 56, 160, .55), rgba(75, 20, 128, .55));
 border: 1px solid rgba(192, 132, 252, .28);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.3rem;
 flex-shrink: 0;
 position: relative;
 z-index: 1;
 transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.service-card:hover .card-icon {
 transform: rotate(-8deg) scale(1.12);
 box-shadow: 0 8px 22px rgba(115, 56, 160, .55);
}

/* title */
.card-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--text-hi);
 line-height: 1.2;
 position: relative;
 z-index: 1;
}

/* desc — clamp so it never overflows */
.card-desc {
 font-size: .8rem;
 color: var(--mid);
 line-height: 1.65;
 position: relative;
 z-index: 1;
 flex: 1;
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

/* link */
.card-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: .72rem;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--accent);
 text-decoration: none;
 position: relative;
 z-index: 1;
 margin-top: auto;
 width: fit-content;
 transition: gap .3s var(--ease), color .3s var(--ease);
}

.card-link::after {
 content: '→';
 transition: transform .3s var(--ease);
}

.service-card:hover .card-link {
 gap: 10px;
 color: #fff;
}

.service-card:hover .card-link::after {
 transform: translateX(4px);
}

/* watermark number */
.card-num {
 position: absolute;
 bottom: 12px;
 right: 18px;
 font-family: 'Cormorant Garamond', serif;
 font-size: 3.4rem;
 font-weight: 700;
 color: rgba(115, 56, 160, .11);
 line-height: 1;
 pointer-events: none;
 z-index: 0;
 transition: color .35s var(--ease);
}

.service-card:hover .card-num {
 color: rgba(115, 56, 160, .26);
}

/* ── Row 2: 3 cards centred in 4-col grid ──
   card 5 → col 1-2 centred = start at col 1
   actually: push with a half-col trick using subgrid or column offset */
/* Use a wrapper row for bottom 3 */
.row-bottom {
 position: relative;
 z-index: 3;
 max-width: 1200px;
 margin: 22px auto 0;
 display: grid;
 /* 6 equal cols; cards span 2 each → 3 cards perfectly centred */
 grid-template-columns: repeat(6, 1fr);
 gap: 22px;
}

.row-bottom .service-card {
 grid-column: span 2;
}

/* ═══════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════ */
.cta-row {
 position: relative;
 z-index: 3;
 max-width: 1200px;
 margin: 32px auto 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 background: var(--glass);
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 padding: 24px 36px;
 opacity: 0;
 transform: translateY(28px);
 transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s;
}

.cta-row.visible {
 opacity: 1;
 transform: none;
}

/* shimmer on strip */
.cta-row::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(90deg, transparent 0%, rgba(115, 56, 160, .08) 50%, transparent 100%);
 background-size: 200% 100%;
 animation: stripShimmer 4s linear infinite;
}

@keyframes stripShimmer {
 0% {
  background-position: -200% 0;
 }

 100% {
  background-position: 200% 0;
 }
}

.cta-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.4rem;
 font-weight: 600;
 line-height: 1.3;
 position: relative;
 z-index: 1;
 color: var(--white);
}

.cta-text span {
 color: var(--accent);
 font-style: italic;
}

.btn-explore {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 10px;
 white-space: nowrap;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 14px 30px;
 font-family: 'Syne', sans-serif;
 font-size: .8rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 8px 26px rgba(115, 56, 160, .45);
 overflow: hidden;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn-explore::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .2), transparent);
 transition: left .5s var(--ease);
}

.btn-explore:hover::after {
 left: 160%;
}

.btn-explore:hover {
 transform: translateY(-3px) scale(1.04);
 box-shadow: 0 14px 36px rgba(115, 56, 160, .6), 0 0 0 3px rgba(192, 132, 252, .25);
}

.btn-arrow {
 display: inline-flex;
 width: 22px;
 height: 22px;
 background: rgba(255, 255, 255, .15);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .78rem;
 transition: transform .3s var(--ease);
}

.btn-explore:hover .btn-arrow {
 transform: translateX(4px);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1024px) {
 .cards-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
 }

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

 .row-bottom .service-card {
  grid-column: span 1;
 }
}

@media (max-width: 700px) {
 :root {
  --card-h: auto;
 }

 .cards-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
 }

 .row-bottom {
  grid-template-columns: 1fr 1fr;
 }

 .row-bottom .service-card {
  grid-column: span 1;
 }

 .service-card {
  height: auto;
  min-height: 200px;
 }

 .cta-row {
  flex-direction: column;
  text-align: center;
 }

 /* hide some floating elements on mobile for perf */
 .el-lines,
 .el-magnify,
 .el-sparkle1 {
  display: none;
 }
}

@media (max-width: 440px) {

 .cards-grid,
 .row-bottom {
  grid-template-columns: 1fr;
 }

 .row-bottom .service-card {
  grid-column: span 1;
 }
}


/* ═══════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════ */
.portfolio-section {
 position: relative;
 min-height: 100vh;
 padding: 100px 0 120px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 background: var(--white);
}

/* Background radial glow */
.portfolio-section::before {
 content: '';
 position: absolute;
 width: 900px;
 height: 900px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, .22) 0%, transparent 65%);
 pointer-events: none;
 z-index: 0;
}

/* Dot texture */
.portfolio-section::after {
 content: '';
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(115, 56, 160, .12) 1px, transparent 1px);
 background-size: 40px 40px;
 pointer-events: none;
 z-index: 0;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.port-header {
 position: relative;
 z-index: 2;
 text-align: center;
 margin-bottom: 70px;
 padding: 0 20px;
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .25em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 1rem;
}

.eyebrow::before,
.eyebrow::after {
 content: '';
 display: block;
 width: 28px;
 height: 1px;
 background: var(--gold);
 opacity: .5;
}

.port-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2.4rem, 5vw, 4rem);
 font-weight: 700;
 line-height: 1.1;
 color: var(--text-mid);
}

.port-title em {
 font-style: italic;
 color: var(--accent);
}

.port-sub {
 margin-top: .9rem;
 font-size: .9rem;
 color: var(--text-mid);
 font-weight: 400;
 letter-spacing: .03em;
}

/* ═══════════════════════════════════════════
   SLIDER STAGE
═══════════════════════════════════════════ */
.slider-stage {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: 1300px;
 padding: 0 80px;
}

/* Track + overflow */
.slider-overflow {
 overflow: hidden;
 border-radius: 24px;
}

.slides-track {
 display: flex;
 transition: transform .65s var(--ease);
 will-change: transform;
}

/* ═══════════════════════════════════════════
   SLIDE
═══════════════════════════════════════════ */
.slide {
 flex: 0 0 calc(33.333% - 16px);
 margin-right: 24px;
 position: relative;
 border-radius: 20px;
 overflow: hidden;
 cursor: pointer;
 aspect-ratio: 3/4;
 background: #1a0840;

 /* entry state */
 opacity: .45;
 transform: scale(.94);
 transition:
  opacity .5s var(--ease),
  transform .5s var(--ease),
  box-shadow .4s var(--ease);
}

.slide.active {
 opacity: 1;
 transform: scale(1);
 box-shadow:
  0 32px 80px rgba(0, 0, 0, .7),
  0 0 0 1px rgba(192, 132, 252, .35),
  0 0 60px rgba(115, 56, 160, .3);
}

/* image */
.slide-img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .7s var(--ease);
 filter: brightness(.82) saturate(1.1);
}

.slide:hover .slide-img {
 transform: scale(1.06);
}

/* colour overlay */
.slide-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top,
   rgba(15, 5, 41, .96) 0%,
   rgba(15, 5, 41, .45) 40%,
   rgba(115, 56, 160, .1) 100%);
 transition: opacity .4s var(--ease);
 display: none;
}

.slide:hover .slide-overlay {
 opacity: .85;
}

/* category badge */
.slide-cat {
 position: absolute;
 top: 18px;
 left: 18px;
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .18em;
 text-transform: uppercase;
 color: var(--gold);
 background: rgba(15, 5, 41, .7);
 border: 1px solid rgba(233, 184, 74, .3);
 border-radius: 50px;
 padding: 4px 12px;
 backdrop-filter: blur(8px);
 z-index: 2;
 display: none;
}

/* number */
.slide-num {
 position: absolute;
 top: 18px;
 right: 18px;
 font-family: 'Cormorant Garamond', serif;
 font-size: 1rem;
 font-weight: 600;
 color: rgba(255, 255, 255, .35);
 z-index: 2;
 letter-spacing: .05em;
}

/* bottom info panel */
.slide-info {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 28px 24px 26px;
 z-index: 3;
 transform: translateY(8px);
 transition: transform .4s var(--ease);
 display: none;
}

.slide:hover .slide-info {
 transform: translateY(0);
}

.slide-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.35rem;
 font-weight: 700;
 line-height: 1.2;
 color: #fff;
 margin-bottom: 6px;
}

.slide-desc {
 font-size: .78rem;
 color: rgba(255, 255, 255, .6);
 line-height: 1.6;
 max-height: 0;
 overflow: hidden;
 transition: max-height .45s var(--ease), opacity .4s var(--ease);
 opacity: 0;
}

.slide:hover .slide-desc {
 max-height: 60px;
 opacity: 1;
}

/* view link */
.slide-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: .7rem;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--accent);
 text-decoration: none;
 margin-top: 10px;
 opacity: 0;
 transform: translateY(6px);
 transition: opacity .4s var(--ease) .05s, transform .4s var(--ease) .05s, gap .3s var(--ease);
}

.slide:hover .slide-link {
 opacity: 1;
 transform: translateY(0);
}

.slide-link::after {
 content: '→';
 transition: transform .3s;
}

.slide-link:hover::after {
 transform: translateX(4px);
}

/* bottom border glow on active */
.slide.active::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 20%;
 right: 20%;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--accent), transparent);
 border-radius: 2px;
 animation: glowLine 2s ease-in-out infinite;
}

@keyframes glowLine {

 0%,
 100% {
  opacity: .5;
  transform: scaleX(.7);
 }

 50% {
  opacity: 1;
  transform: scaleX(1);
 }
}

/* ═══════════════════════════════════════════
   NAV ARROWS
═══════════════════════════════════════════ */
.slider-arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: rgba(15, 5, 41, .75);
 border: 1px solid rgba(115, 56, 160, .45);
 backdrop-filter: blur(12px);
 color: #fff;
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition:
  background .3s var(--ease),
  border-color .3s var(--ease),
  transform .3s var(--ease),
  box-shadow .3s var(--ease);
 user-select: none;
 flex-shrink: 0;
}

.slider-arrow:hover {
 background: var(--primary);
 border-color: var(--accent);
 box-shadow: 0 8px 28px rgba(115, 56, 160, .55);
 transform: translateY(-50%) scale(1.08);
}

.slider-arrow:active {
 transform: translateY(-50%) scale(.96);
}

.arrow-prev {
 left: 8px;
}

.arrow-next {
 right: 8px;
}

.arrow-prev svg {
 transform: rotate(180deg);
}

/* disabled */
.slider-arrow.disabled {
 opacity: .3;
 pointer-events: none;
}

/* ═══════════════════════════════════════════
   DOTS + COUNTER
═══════════════════════════════════════════ */
.slider-footer {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 28px;
 margin-top: 40px;
 position: relative;
 z-index: 2;
}

.slider-counter {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--text-mid);
 min-width: 60px;
 text-align: center;
}

.slider-counter span {
 color: var(--text-mid);
 font-size: 1.25rem;
}

.dots {
 display: flex;
 gap: 8px;
 align-items: center;
}

.dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--text-mid);
 cursor: pointer;
 transition: background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
 border: none;
 outline: none;
}

.dot.active {
 background: var(--accent);
 width: 24px;
 border-radius: 4px;
 box-shadow: 0 0 10px rgba(192, 132, 252, .6);
}

/* ═══════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════ */
.progress-bar {
 width: 200px;
 height: 2px;
 background: var(--text-mid);
 border-radius: 2px;
 overflow: hidden;
}

.progress-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 border-radius: 2px;
 transition: width .65s var(--ease);
}

/* ═══════════════════════════════════════════
   BOTTOM CTA
═══════════════════════════════════════════ */
.port-cta {
 display: none;
 position: relative;
 z-index: 2;
 margin-top: 56px;
 text-align: center;
}

.btn-port {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 15px 36px;
 font-family: 'Syne', sans-serif;
 font-size: .82rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 8px 28px rgba(115, 56, 160, .5);
 overflow: hidden;
 position: relative;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn-port::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .2), transparent);
 transition: left .5s var(--ease);
}

.btn-port:hover::after {
 left: 160%;
}

.btn-port:hover {
 transform: translateY(-3px) scale(1.04);
 box-shadow: 0 14px 36px rgba(115, 56, 160, .65), 0 0 0 3px rgba(192, 132, 252, .25);
}

.btn-port-arrow {
 display: inline-flex;
 width: 24px;
 height: 24px;
 background: rgba(255, 255, 255, .15);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .8rem;
 transition: transform .3s var(--ease);
}

.btn-port:hover .btn-port-arrow {
 transform: translateX(4px);
}

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
.lightbox {
 position: fixed;
 inset: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 opacity: 0;
 pointer-events: none;
 transition: opacity .4s var(--ease);
}

.lightbox.open {
 opacity: 1;
 pointer-events: all;
}

.lb-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(10, 2, 30, .92);
 backdrop-filter: blur(16px);
 cursor: pointer;
}

.lb-inner {
 position: relative;
 z-index: 1;
 max-width: 860px;
 width: 100%;
 border-radius: 24px;
 overflow: hidden;
 box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 0 1px rgba(192, 132, 252, .3);
 transform: scale(.9) translateY(20px);
 transition: transform .45s var(--ease-back);
}

.lightbox.open .lb-inner {
 transform: scale(1) translateY(0);
}

.lb-img {
 width: 100%;
 display: block;
 aspect-ratio: 16/9;
 object-fit: cover;
}

.lb-info {
 padding: 24px 30px;
 background: rgba(15, 5, 41, .95);
 border-top: 1px solid rgba(115, 56, 160, .25);
}

.lb-cat {
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .2em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 6px;
}

.lb-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.6rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 6px;
}

.lb-desc {
 font-size: .85rem;
 color: rgba(255, 255, 255, .6);
 line-height: 1.7;
}

.lb-close {
 position: absolute;
 top: 16px;
 right: 16px;
 z-index: 2;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: rgba(15, 5, 41, .8);
 border: 1px solid rgba(115, 56, 160, .4);
 color: #fff;
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: background .3s, transform .3s var(--ease-back);
 backdrop-filter: blur(8px);
}

.lb-close:hover {
 background: var(--primary);
 transform: rotate(90deg) scale(1.1);
}

/* ═══════════════════════════════════════════
   AUTOPLAY RING
═══════════════════════════════════════════ */
.autoplay-ring {
 position: relative;
 width: 44px;
 height: 44px;
 cursor: pointer;
 flex-shrink: 0;
}

.autoplay-ring svg {
 position: absolute;
 inset: 0;
 transform: rotate(-90deg);
}

.ring-track {
 stroke: rgba(255, 255, 255, .12);
}

.ring-fill {
 stroke: var(--accent);
 stroke-dasharray: 113;
 stroke-dashoffset: 113;
 transition: stroke-dashoffset .15s linear;
}

.autoplay-icon {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .75rem;
 color: var(--text-mid);
 transition: color .3s;
}

.autoplay-ring:hover .autoplay-icon {
 color: #fff;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
 .slider-stage {
  padding: 0 64px;
 }

 .slide {
  flex: 0 0 calc(50% - 12px);
 }
}

@media (max-width: 640px) {
 .slider-stage {
  padding: 0 50px;
 }

 .slide {
  flex: 0 0 calc(100% - 0px);
  margin-right: 24px;
 }

 .progress-bar {
  width: 100px;
 }
}




/* ═══════════════════════════════════════
   ①  PUBLISHING — TEXT LEFT / IMAGE RIGHT
═══════════════════════════════════════ */
.publish-section {
 position: relative;
 overflow: hidden;
 padding: 120px 20px;
 background: var(--white);
}

/* bg blob */
.publish-section::before {
 content: '';
 position: absolute;
 width: 700px;
 height: 700px;
 top: -200px;
 left: -200px;
 border-radius: 50%;
 background: radial-gradient(circle, rgb(115 56 160 / 8%) 0%, transparent 68%);
 pointer-events: none;
}

.publish-section::after {
 content: '';
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(115, 56, 160, .1) 1px, transparent 1px);
 background-size: 40px 40px;
 pointer-events: none;
}



.publish-section.top-pub-sec .pub-img-outer {
 box-shadow: unset;
}

.publish-section.top-pub-sec .pub-img-outer::after {
 background: unset
}

.publish-inner {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 gap: 80px;
}

/* ── LEFT copy ── */
.pub-copy {}

.pub-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 4vw, 3.2rem);
 font-weight: 700;
 line-height: 1.12;
 margin-bottom: 1.2rem;
 color: var(--text-mid);
}

.pub-title em {
 font-style: italic;
 color: var(--accent)
}

.pub-desc {
 font-size: .92rem;
 color: var(--text-mid);
 line-height: 1.85;
 margin-bottom: 1.4rem;
 font-weight: 400;
}

/* stat pills */
.pub-stats {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin-bottom: 2rem;
}

.stat-pill {
 display: flex;
 align-items: center;
 gap: 10px;
 background: var(--glass);
 border: 1px solid var(--gborder);
 border-radius: 50px;
 padding: 10px 18px;
 backdrop-filter: blur(8px);
 transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.stat-pill:hover {
 border-color: rgba(192, 132, 252, .45);
 box-shadow: 0 6px 20px rgba(115, 56, 160, .3);
}

.stat-pill-val {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--primary);
 line-height: 1;
}

.stat-pill-label {
 font-size: .72rem;
 font-weight: 500;
 letter-spacing: .06em;
 color: var(--text-mid);
 line-height: 1.3;
}

/* feature list */
.pub-features {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 2.4rem;
}

.pub-features li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: .88rem;
 color: var(--text-mid);
 line-height: 1.6;
}

.pub-features li::before {
 content: '';
 display: block;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--accent);
 flex-shrink: 0;
 margin-top: 6px;
 box-shadow: 0 0 7px rgba(192, 132, 252, .7);
}

/* CTA group */
.cta-group {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap
}

.btn-primary {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 15px 34px;
 font-family: 'Syne', sans-serif;
 font-size: .82rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 8px 28px rgba(115, 56, 160, .5);
 overflow: hidden;
 position: relative;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn-primary::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .2), transparent);
 transition: left .5s var(--ease);
}

.btn-primary:hover::after {
 left: 160%
}

.btn-primary:hover {
 transform: translateY(-3px) scale(1.04);
 box-shadow: 0 14px 36px rgba(115, 56, 160, .65), 0 0 0 3px rgba(192, 132, 252, .25);
}

.btn-arrow {
 display: inline-flex;
 width: 22px;
 height: 22px;
 background: rgba(255, 255, 255, .15);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .78rem;
 transition: transform .3s var(--ease);
}

.btn-primary:hover .btn-arrow {
 transform: translateX(4px)
}

.btn-ghost {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--accent);
 font-size: .82rem;
 font-weight: 600;
 letter-spacing: .08em;
 text-transform: uppercase;
 text-decoration: none;
 transition: gap .3s var(--ease), color .3s var(--ease);
}

.btn-ghost::after {
 content: '→';
 transition: transform .3s var(--ease)
}

.btn-ghost:hover {
 gap: 12px;
 color: #fff
}

.btn-ghost:hover::after {
 transform: translateX(4px)
}

/* ── RIGHT image ── */
.pub-image-wrap {
 position: relative;
}

.pub-img-outer {
 position: relative;
 border-radius: 24px;
 overflow: hidden;
 box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(115, 56, 160, .3);
}

.pub-img-outer img {
 width: 100%;
 display: block;
 aspect-ratio: 4/5;
 object-fit: cover;
 transition: transform .7s var(--ease);
 filter: brightness(.85) saturate(1.1);
}

.pub-img-outer:hover img {
 transform: scale(1.04)
}

/* overlay gradient on image */
.pub-img-outer::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(115, 56, 160, .25) 0%, transparent 60%);
 pointer-events: none;
}

/* floating badge */
.pub-badge {
 position: absolute;
 bottom: -20px;
 left: -24px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 border: 1px solid rgba(192, 132, 252, .4);
 border-radius: 18px;
 padding: 18px 22px;
 box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
 backdrop-filter: blur(10px);
 min-width: 160px;
 z-index: 3;
 animation: badgeFloat 4s ease-in-out infinite;
}

@keyframes badgeFloat {

 0%,
 100% {
  transform: translateY(0)
 }

 50% {
  transform: translateY(-8px)
 }
}

.pub-badge-val {
 font-family: 'Cormorant Garamond', serif;
 font-size: 2rem;
 font-weight: 700;
 color: var(--gold);
 line-height: 1;
}

.pub-badge-label {
 font-size: .7rem;
 font-weight: 500;
 letter-spacing: .08em;
 color: rgba(255, 255, 255, .7);
 margin-top: 4px;
}

/* small accent orb behind image */
.pub-orb {
 position: absolute;
 width: 300px;
 height: 300px;
 top: -40px;
 right: -60px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(192, 132, 252, .18) 0%, transparent 70%);
 pointer-events: none;
 z-index: 0;
}

/* decorative dots pattern block */
.pub-dots-deco {
 position: absolute;
 right: -30px;
 bottom: 40px;
 width: 120px;
 height: 120px;
 background-image: radial-gradient(rgba(192, 132, 252, .3) 1.5px, transparent 1.5px);
 background-size: 14px 14px;
 pointer-events: none;
 z-index: 0;
 opacity: .6;
}

/* ═══════════════════════════════════════
   ②  TESTIMONIALS
═══════════════════════════════════════ */
.testi-section {
 display: none;
 position: relative;
 overflow: hidden;
 padding: 120px 20px;
 background: var(--background-color);
}

.testi-section::before {
 content: '';
 position: absolute;
 width: 600px;
 height: 600px;
 bottom: -150px;
 right: -150px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, .2) 0%, transparent 68%);
 pointer-events: none;
}

/* big quote mark decor */
.testi-section::after {
 content: '\201C';
 position: absolute;
 top: 40px;
 left: 50%;
 transform: translateX(-50%);
 font-family: 'Cormorant Garamond', serif;
 font-size: 18rem;
 font-weight: 700;
 line-height: 1;
 color: rgba(115, 56, 160, .06);
 pointer-events: none;
 user-select: none;
 z-index: 0;
}

.testi-inner {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
}

/* header */
.testi-head {
 text-align: center;
 max-width: 620px;
 margin: 0 auto 72px;
}

.testi-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 700;
 line-height: 1.15;
}

.testi-title em {
 font-style: italic;
 color: var(--accent)
}

.testi-sub {
 margin-top: .9rem;
 font-size: .9rem;
 color: var(--text-mid);
 line-height: 1.7;
}

.title-rule {
 display: block;
 width: 56px;
 height: 2px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 margin: 16px auto 0;
 border-radius: 2px;
}

/* ── TESTIMONIAL GRID ── */
.testi-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 align-items: start;
}

/* featured card (col-span 2, row 1 col 1–2) */
.testi-card {
 background: var(--secondary);
 border: 1px solid var(--gborder);
 border-radius: 22px;
 padding: 32px 30px 28px;
 position: relative;
 overflow: hidden;
 transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.testi-card:hover {
 transform: translateY(-6px);
 border-color: rgba(192, 132, 252, .45);
 box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(192, 132, 252, .3), 0 0 30px rgba(115, 56, 160, .2);
}

/* inner glow */
.testi-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: var(--secondary-color);
 opacity: 0;
 transition: opacity .35s var(--ease);
}

.testi-card:hover::before {
 opacity: 1
}

/* featured style */
.testi-card.featured {
 grid-column: span 2;
 background: var(--secondary-color);
 border-color: rgba(192, 132, 252, .3);
}

/* quote mark */
.testi-quote-icon {
 font-family: 'Cormorant Garamond', serif;
 font-size: 3.5rem;
 font-weight: 700;
 color: var(--accent);
 line-height: .8;
 margin-bottom: 12px;
 display: block;
 opacity: .7;
}

/* stars */
.testi-stars {
 display: flex;
 gap: 3px;
 margin-bottom: 14px;
}

.testi-stars span {
 font-size: .85rem;
 color: var(--gold);
 text-shadow: 0 0 8px rgba(233, 184, 74, .5);
}

/* text */
.testi-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.1rem;
 font-style: italic;
 line-height: 1.75;
 color: var(--mid);
 margin-bottom: 22px;
 position: relative;
 z-index: 1;
}

.testi-card.featured .testi-text {
 font-size: 1.25rem
}

/* author */
.testi-author {
 display: none;
 align-items: center;
 gap: 14px;
 position: relative;
 z-index: 1;
}

.testi-avatar {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
 border: 2px solid rgba(192, 132, 252, .35);
 box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
 transition: border-color .3s, box-shadow .3s;
}

.testi-card:hover .testi-avatar {
 border-color: rgba(192, 132, 252, .7);
 box-shadow: 0 4px 20px rgba(115, 56, 160, .5);
}

.testi-avatar.featured-av {
 width: 56px;
 height: 56px
}

.author-info {}

.author-name {
 font-size: .9rem;
 font-weight: 700;
 color: var(--hi);
 line-height: 1.2;
}

.author-role {
 font-size: .72rem;
 color: var(--mid);
 font-weight: 400;
 letter-spacing: .05em;
 margin-top: 2px;
}

/* genre tag */
.testi-tag {
 position: absolute;
 top: 22px;
 right: 22px;
 font-size: .58rem;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--gold);
 background: rgba(233, 184, 74, .1);
 border: 1px solid rgba(233, 184, 74, .25);
 border-radius: 50px;
 padding: 3px 10px;
 z-index: 1;
}

/* verified badge */
.testi-verified {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: .65rem;
 font-weight: 600;
 letter-spacing: .08em;
 color: rgba(192, 132, 252, .8);
 margin-top: 8px;
}

.testi-verified::before {
 content: '✓';
 font-size: .7rem;
 color: var(--accent)
}

/* ── trust bar ── */
.trust-bar {
 margin-top: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 48px;
 flex-wrap: wrap;
 padding: 28px 36px;
 background: var(--glass);
 border: 1px solid var(--gborder);
 border-radius: 20px;
 position: relative;
 z-index: 2;
}

.trust-bar::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(90deg, transparent, rgba(115, 56, 160, .08), transparent);
 background-size: 200% 100%;
 animation: trustShimmer 4s linear infinite;
}

@keyframes trustShimmer {
 0% {
  background-position: -200% 0
 }

 100% {
  background-position: 200% 0
 }
}

.trust-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 position: relative;
 z-index: 1;
}

.trust-val {
 font-family: 'Cormorant Garamond', serif;
 font-size: 2rem;
 font-weight: 700;
 color: var(--hi);
 line-height: 1;
}

.trust-val span {
 color: var(--gold)
}

.trust-label {
 font-size: .68rem;
 font-weight: 500;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--text-mid);
}

.trust-sep {
 width: 1px;
 height: 40px;
 background: linear-gradient(to bottom, transparent, rgba(115, 56, 160, .4), transparent);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:960px) {
 .publish-inner {
  grid-template-columns: 1fr;
  gap: 50px
 }

 .pub-badge {
  bottom: 20px;
  left: 20px
 }

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

 .testi-card.featured {
  grid-column: span 2
 }

 .trust-sep {
  display: none
 }
}

@media(max-width:640px) {

 .publish-section,
 .testi-section {
  padding: 80px 20px
 }

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

 .testi-card.featured {
  grid-column: span 1
 }

 .pub-stats {
  gap: 10px
 }

 .trust-bar {
  gap: 24px;
  padding: 22px 24px
 }
}


/* trigger btn demo */
.demo-trigger-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 60px 20px;
 background: linear-gradient(180deg, var(--secondary), rgba(20, 5, 50, .8));
}

/* ═══════════════════════════════════════
   ①  POPUP FORM
═══════════════════════════════════════ */
.popup-overlay {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 opacity: 0;
 pointer-events: none;
 transition: opacity .4s var(--ease);
}

.popup-overlay.open {
 opacity: 1;
 pointer-events: all
}

/* backdrop */
.popup-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(8, 2, 25, .88);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 cursor: pointer;
}

/* modal box */
.popup-box {
 position: relative;
 z-index: 1;
 width: 100%;
 max-width: 900px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow:
  0 40px 100px rgba(0, 0, 0, .8),
  0 0 0 1px rgba(192, 132, 252, .25),
  0 0 60px rgba(115, 56, 160, .2);
 display: grid;
 grid-template-columns: 1fr 1fr;
 transform: scale(.88) translateY(28px);
 transition: transform .5s var(--ease-back);
}

.popup-overlay.open .popup-box {
 transform: scale(1) translateY(0)
}

/* ── RIGHT: image panel ── */
.popup-img-panel {
 position: relative;
 overflow: hidden;
 min-height: 580px;
}

.popup-img-panel img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(.75) saturate(1.1);
 transition: transform .8s var(--ease);
}

.popup-overlay.open .popup-img-panel img {
 transform: scale(1.04)
}

.popup-img-panel::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg,
   rgba(115, 56, 160, .35) 0%,
   rgba(15, 5, 41, .55) 100%);
}

/* image text overlay */
.popup-img-copy {
 position: absolute;
 bottom: 32px;
 left: 28px;
 right: 28px;
 z-index: 2;
}

.popup-img-copy h3 {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.7rem;
 font-weight: 700;
 line-height: 1.2;
 color: #fff;
 margin-bottom: 8px;
}

.popup-img-copy p {
 font-size: .8rem;
 color: rgba(255, 255, 255, .7);
 line-height: 1.6;
}

.popup-offer-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: var(--gold);
 color: var(--secondary);
 font-family: 'Syne', sans-serif;
 font-size: .65rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 border-radius: 50px;
 padding: 5px 14px;
 margin-bottom: 12px;
 box-shadow: 0 4px 16px rgba(233, 184, 74, .4);
}

/* ── LEFT: form panel ── */
.popup-form-panel {
 background: linear-gradient(160deg, rgba(15, 5, 41, .98), rgba(20, 8, 48, .98));
 border-left: 1px solid rgba(115, 56, 160, .2);
 padding: 40px 36px 36px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.popup-close {
 position: absolute;
 top: 18px;
 right: 18px;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 background: rgba(15, 5, 41, .8);
 border: 1px solid rgba(115, 56, 160, .35);
 color: #fff;
 font-size: 1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 10;
 transition: background .3s, transform .35s var(--ease-back), border-color .3s;
 backdrop-filter: blur(8px);
}

.popup-close:hover {
 background: var(--primary);
 border-color: var(--accent);
 transform: rotate(90deg) scale(1.1);
}

.popup-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: .63rem;
 font-weight: 700;
 letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: .9rem;
}

.popup-eyebrow::before {
 content: '';
 width: 20px;
 height: 1px;
 background: var(--gold);
 opacity: .55;
}

.popup-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.75rem;
 font-weight: 700;
 line-height: 1.18;
 margin-bottom: .5rem;
 color: var(--white);
}

.popup-title em {
 font-style: italic;
 color: var(--accent)
}

.popup-sub {
 font-size: .78rem;
 color: var(--mid);
 line-height: 1.65;
 margin-bottom: 1.6rem;
}

/* form fields */
.form-group {
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-bottom: 12px;
}

.form-label {
 font-size: .65rem;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--white);
}

.form-input,
.form-textarea {
 background: rgba(255, 255, 255, .04);
 border: 1px solid rgba(115, 56, 160, .28);
 border-radius: 10px;
 color: var(--hi);
 font-family: 'Syne', sans-serif;
 font-size: .85rem;
 padding: 12px 16px;
 outline: none;
 transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
 width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
 color: rgba(255, 255, 255, .22);
 font-size: .82rem;
}

.form-input:focus,
.form-textarea:focus {
 border-color: var(--primary);
 background: rgba(115, 56, 160, .1);
 box-shadow: 0 0 0 3px rgba(115, 56, 160, .2);
}

.form-textarea {
 resize: none;
 height: 88px
}

/* two col row */
.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px
}

.btn-submit {
 width: 100%;
 margin-top: 6px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 14px 28px;
 font-family: 'Syne', sans-serif;
 font-size: .82rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 cursor: pointer;
 box-shadow: 0 8px 28px rgba(115, 56, 160, .5);
 overflow: hidden;
 position: relative;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
}

.btn-submit::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .2), transparent);
 transition: left .5s var(--ease);
}

.btn-submit:hover::after {
 left: 160%
}

.btn-submit:hover {
 transform: translateY(-2px) scale(1.02);
 box-shadow: 0 14px 36px rgba(115, 56, 160, .65), 0 0 0 3px rgba(192, 132, 252, .25);
}

.btn-submit:active {
 transform: scale(.98)
}

.form-privacy {
 font-size: .65rem;
 color: var(--white);
 text-align: center;
 margin-top: 10px;
 line-height: 1.55;
}

.form-privacy a {
 color: var(--accent);
 text-decoration: none
}

.form-privacy a:hover {
 text-decoration: underline
}

/* ── success state ── */
.form-success {
 display: none;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 20px;
 flex: 1;
}

.success-icon {
 font-size: 3rem;
 margin-bottom: 16px;
 animation: successPop .5s var(--ease-back) both;
}

@keyframes successPop {
 from {
  transform: scale(0);
  opacity: 0
 }

 to {
  transform: scale(1);
  opacity: 1
 }
}

.success-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.6rem;
 font-weight: 700;
 margin-bottom: 8px;
}

.success-desc {
 font-size: .85rem;
 color: var(--mid);
 line-height: 1.7
}


/* ═══════════════════════════════════════
   ②  FOOTER
═══════════════════════════════════════ */
footer {
 position: relative;
 overflow: hidden;
 background: rgba(8, 2, 22, .95);
 border-top: 1px solid rgba(115, 56, 160, .2);
}

/* top glow line */
footer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 10%;
 right: 10%;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--primary), transparent);
 opacity: .6;
}

/* bg texture */
footer::after {
 content: '';
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(115, 56, 160, .07) 1px, transparent 1px);
 background-size: 38px 38px;
 pointer-events: none;
}

/* ── newsletter strip ── */
.footer-newsletter {
 position: relative;
 z-index: 2;
 border-bottom: 1px solid rgba(115, 56, 160, .15);
 padding: 56px 20px;
 display: none;
}

.newsletter-inner {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 gap: 48px;
}

.nl-copy h3 {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.8rem;
 font-weight: 700;
 line-height: 1.2;
 margin-bottom: .6rem;
}

.nl-copy h3 em {
 font-style: italic;
 color: var(--accent)
}

.nl-copy p {
 font-size: .85rem;
 color: var(--mid);
 line-height: 1.7
}

.nl-form {
 display: flex;
 gap: 12px;
}

.nl-input {
 flex: 1;
 background: rgba(255, 255, 255, .05);
 border: 1px solid rgba(115, 56, 160, .3);
 border-radius: 50px;
 color: var(--hi);
 font-family: 'Syne', sans-serif;
 font-size: .85rem;
 padding: 13px 22px;
 outline: none;
 transition: border-color .3s, box-shadow .3s;
}

.nl-input::placeholder {
 color: rgba(255, 255, 255, .25)
}

.nl-input:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(115, 56, 160, .18);
}

.nl-btn {
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 13px 26px;
 font-family: 'Syne', sans-serif;
 font-size: .78rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 cursor: pointer;
 white-space: nowrap;
 box-shadow: 0 6px 20px rgba(115, 56, 160, .4);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
 overflow: hidden;
 position: relative;
}

.nl-btn::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .2), transparent);
 transition: left .45s var(--ease);
}

.nl-btn:hover::after {
 left: 160%
}

.nl-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 28px rgba(115, 56, 160, .55);
}

/* ── main footer grid ── */
.footer-main {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 padding: 64px 20px 48px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 /* grid-template-columns: 1fr ; */
 gap: 48px;
}

/* brand col */

.footer-logo {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 18px;
 text-decoration: none;
}

.footer-logo img {
 width: 240px;
}

.logo-icon {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 border: 1px solid rgba(192, 132, 252, .3);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.3rem;
 box-shadow: 0 6px 20px rgba(115, 56, 160, .4);
 flex-shrink: 0;
}

.logo-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.3rem;
 font-weight: 700;
 color: var(--hi);
 line-height: 1.1;
}

.logo-text span {
 color: var(--accent);
 font-style: italic
}

.brand-desc {
 font-size: .82rem;
 color: var(--mid);
 line-height: 1.8;
 margin-bottom: 22px;
 max-width: 280px;
}

/* socials */
.social-links {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 flex-wrap: wrap;
}

.social-btn {
 width: 38px;
 height: 38px;
 border-radius: 10px;
 background: var(--glass);
 border: 1px solid var(--gborder);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .95rem;
 text-decoration: none;
 color: var(--mid);
 transition: background .3s, border-color .3s, transform .3s var(--ease-back), color .3s;
}

.social-btn:hover {
 background: var(--primary);
 border-color: rgba(192, 132, 252, .45);
 color: #fff;
 transform: translateY(-3px) scale(1.08);
}

/* link cols */
.footer-col {
 display: flex;
 gap: 50px;
}

.footer-col h4 {
 font-size: .7rem;
 font-weight: 700;
 letter-spacing: .2em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 18px;
}

.footer-links {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.footer-links a {
 font-size: .83rem;
 color: var(--mid);
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: color .3s var(--ease), gap .3s var(--ease);
}

.footer-links a::before {
 content: '';
 width: 0;
 height: 1px;
 background: var(--accent);
 transition: width .3s var(--ease);
 flex-shrink: 0;
}

.footer-links a:hover {
 color: var(--hi);
 gap: 10px
}

.footer-links a:hover::before {
 width: 12px
}

/* contact col items */
.contact-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-bottom: 12px;
}

.contact-icon {
 width: 32px;
 height: 32px;
 border-radius: 8px;
 background: var(--glass);
 border: 1px solid var(--gborder);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .85rem;
 flex-shrink: 0;
 transition: background .3s, border-color .3s;
}

.contact-item:hover .contact-icon {
 background: rgba(115, 56, 160, .3);
 border-color: rgba(192, 132, 252, .4);
}

.contact-text {
 font-size: .8rem;
 color: var(--mid);
 line-height: 1.55;
}

.contact-text strong {
 display: block;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--mid);
 margin-bottom: 2px
}

/* ── divider ── */
.footer-divider {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(115, 56, 160, .25), rgba(192, 132, 252, .15), rgba(115, 56, 160, .25), transparent);
}

/* ── bottom bar ── */
.footer-bottom {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 padding: 24px 20px;
 display: flex;
 align-items: end;
 justify-content: flex-end;
 flex-wrap: wrap;
 gap: 14px;
}

.footer-copy {
 font-size: .75rem;
 color: var(--mid);
 line-height: 1.6;
}

.footer-copy a {
 color: var(--accent);
 text-decoration: none
}

.footer-copy a:hover {
 text-decoration: underline
}

.footer-legal {
 display: flex;
 gap: 20px;
 flex-wrap: wrap;
}

.footer-legal a {
 font-size: .72rem;
 color: var(--mid);
 text-decoration: none;
 transition: color .3s;
}

.footer-legal a:hover {
 color: var(--mid)
}

/* back-to-top */
.back-top {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: .72rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--mid);
 cursor: pointer;
 border: none;
 background: none;
 transition: color .3s var(--ease);
 text-decoration: none;
}

.back-top:hover {
 color: var(--accent)
}

.back-top-icon {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--glass);
 border: 1px solid var(--gborder);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .8rem;
 transition: background .3s, transform .3s var(--ease-back);
}

.back-top:hover .back-top-icon {
 background: var(--primary);
 transform: translateY(-3px);
}

/* ── trigger button ── */
.demo-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 15px 36px;
 font-family: 'Syne', sans-serif;
 font-size: .85rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 cursor: pointer;
 box-shadow: 0 8px 28px rgba(115, 56, 160, .5);
 overflow: hidden;
 position: relative;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.demo-btn::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .22), transparent);
 transition: left .5s var(--ease);
}

.demo-btn:hover::after {
 left: 160%
}

.demo-btn:hover {
 transform: translateY(-3px) scale(1.04);
 box-shadow: 0 14px 36px rgba(115, 56, 160, .65), 0 0 0 3px rgba(192, 132, 252, .25);
}

.demo-btn-arrow {
 display: inline-flex;
 width: 24px;
 height: 24px;
 background: rgba(255, 255, 255, .15);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .82rem;
 transition: transform .3s var(--ease);
}

.demo-btn:hover .demo-btn-arrow {
 transform: translateX(4px)
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
 .footer-main {
  grid-template-columns: 1fr 1fr;
  gap: 36px
 }
}

@media(max-width:768px) {
 .newsletter-inner {
  grid-template-columns: 1fr
 }

 .nl-form {
  flex-direction: column
 }

 .popup-box {
  grid-template-columns: 1fr
 }

 .popup-img-panel {
  display: none
 }

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

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

@media(max-width:560px) {
 .footer-main {
  grid-template-columns: 1fr
 }

 .footer-bottom {
  flex-direction: column;
  text-align: center
 }

 .popup-form-panel {
  padding: 30px 22px
 }
}




/* ═══════════════════════════
   SECTION
═══════════════════════════ */
.pricing-section {
 position: relative;
 overflow: hidden;
 padding: 110px 20px 130px;
}

/* bg blobs */
.pricing-section::before {
 content: '';
 position: absolute;
 width: 700px;
 height: 700px;
 top: -200px;
 left: -180px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, .24) 0%, transparent 68%);
 pointer-events: none;
}

.pricing-section::after {
 content: '';
 position: absolute;
 width: 550px;
 height: 550px;
 bottom: -150px;
 right: -140px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(192, 132, 252, .15) 0%, transparent 65%);
 pointer-events: none;
}

/* dot grid */
.dot-grid {
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(115, 56, 160, .11) 1px, transparent 1px);
 background-size: 38px 38px;
 pointer-events: none;
 z-index: 0;
}

/* centre glow */
.centre-orb {
 position: absolute;
 width: 400px;
 height: 400px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background: radial-gradient(circle, rgba(115, 56, 160, .1) 0%, transparent 68%);
 pointer-events: none;
 z-index: 0;
}

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.pricing-head {
 position: relative;
 z-index: 2;
 text-align: center;
 max-width: 680px;
 margin: 0 auto 72px;
 opacity: 0;
 transform: translateY(32px);
 transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.pricing-head.visible {
 opacity: 1;
 transform: none
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 1rem;
}

.eyebrow::before,
.eyebrow::after {
 content: '';
 display: block;
 width: 24px;
 height: 1px;
 background: var(--gold);
 opacity: .5;
}

.pricing-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 4.2vw, 3.2rem);
 font-weight: 700;
 line-height: 1.13;
 color: var(--mid);
}

.pricing-title em {
 font-style: italic;
 color: var(--accent)
}

.pricing-sub {
 margin-top: .9rem;
 font-size: .9rem;
 color: var(--mid);
 line-height: 1.72;
}

.title-rule {
 display: block;
 width: 56px;
 height: 2px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 margin: 16px auto 0;
 border-radius: 2px;
}

/* ═══════════════════════════
   CARDS GRID
═══════════════════════════ */
.price-cards {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 28px;
 align-items: start;
}

/* ═══════════════════════════
   BASE CARD
═══════════════════════════ */
.price-card {
 position: relative;
 background: var(--glass);
 border: 1px solid var(--gborder);
 border-radius: 24px;
 padding: 38px 32px 34px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 gap: 0;

 opacity: 0;
 transform: translateY(40px);
 transition:
  opacity .6s var(--ease),
  transform .6s var(--ease),
  box-shadow .4s var(--ease),
  border-color .4s var(--ease);
}

.price-card.visible {
 opacity: 1;
 transform: none
}

/* inner glow layer */
.price-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(115, 56, 160, .18), transparent 55%);
 opacity: 0;
 transition: opacity .4s var(--ease);
}

.price-card:hover {
 border-color: rgba(192, 132, 252, .45);
 box-shadow:
  0 28px 70px rgba(0, 0, 0, .5),
  0 0 0 1px rgba(192, 132, 252, .28),
  0 0 40px rgba(115, 56, 160, .22);
 transform: translateY(-8px) !important;
}

.price-card:hover::before {
 opacity: 1
}

/* ── CORNER GLOW ── */
.price-card::after {
 content: '';
 position: absolute;
 top: -50px;
 right: -50px;
 width: 160px;
 height: 160px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(192, 132, 252, .1) 0%, transparent 70%);
 transition: transform .5s var(--ease);
}

.price-card:hover::after {
 transform: scale(1.6) translate(6px, -6px)
}

/* ═══════════════════════════
   FEATURED CARD
═══════════════════════════ */
.price-card.featured {
 background: linear-gradient(160deg, rgba(115, 56, 160, .22), rgba(75, 20, 128, .18));
 border-color: rgba(192, 132, 252, .35);
 box-shadow:
  0 20px 60px rgba(0, 0, 0, .45),
  0 0 0 1px rgba(192, 132, 252, .25),
  0 0 50px rgba(115, 56, 160, .2);
 /* slightly taller feel */
 padding-top: 48px;
}

.price-card.featured:hover {
 transform: translateY(-10px) !important;
 box-shadow:
  0 36px 90px rgba(0, 0, 0, .6),
  0 0 0 1px rgba(192, 132, 252, .55),
  0 0 60px rgba(115, 56, 160, .35);
}

/* featured top ribbon */
.featured-ribbon {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 background: linear-gradient(90deg, var(--primary), var(--accent));
 color: #fff;
 font-size: .6rem;
 font-weight: 700;
 letter-spacing: .2em;
 text-transform: uppercase;
 padding: 5px 22px;
 border-radius: 0 0 12px 12px;
 white-space: nowrap;
 box-shadow: 0 4px 16px rgba(115, 56, 160, .5);
}

/* ═══════════════════════════
   PACKAGE NAME
═══════════════════════════ */
.package-name {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.4rem;
 font-weight: 700;
 line-height: 1.2;
 color: var(--mid);
 margin-bottom: 22px;
 position: relative;
 z-index: 1;
}

.package-name em {
 color: var(--gold);
}

.package-name em::before {
 content: '(';
}

.package-name em::after {
 content: ')';
}

.featured .package-name {
 font-size: 1.55rem;
 color: #fff;
}

/* decorative line under name */
.package-name::after {
 content: '';
 display: block;
 width: 36px;
 height: 2px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 border-radius: 2px;
 margin-top: 10px;
 transition: width .4s var(--ease);
}

.price-card:hover .package-name::after {
 width: 60px
}

.featured .package-name::after {
 background: linear-gradient(90deg, var(--accent), #fff);
 width: 48px;
}

/* ═══════════════════════════
   FEATURE LISTS
═══════════════════════════ */
.price-features,
.featured-price-features {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 32px;
 position: relative;
 z-index: 1;
 flex: 1;
}

.price-features li,
.featured-price-features li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: .83rem;
 color: var(--mid);
 line-height: 1.55;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(115, 56, 160, .12);
 transition: color .3s var(--ease);
}

.price-card:hover .price-features li,
.price-card:hover .featured-price-features li {
 color: rgba(255, 255, 255, .78);
}

/* bullet icon */
.price-features li::before,
.featured-price-features li::before {
 content: '';
 display: block;
 flex-shrink: 0;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 margin-top: 5px;
 background: var(--accent);
 box-shadow: 0 0 7px rgba(192, 132, 252, .6);
 transition: transform .3s var(--ease-back);
}

.price-card:hover .price-features li::before,
.price-card:hover .featured-price-features li::before {
 transform: scale(1.25);
}

/* featured bullet gold */
.featured .featured-price-features li::before {
 background: var(--gold);
 box-shadow: 0 0 8px rgba(233, 184, 74, .55);
}

/* last item no border */
.price-features li:last-child,
.featured-price-features li:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

/* ═══════════════════════════
   CTA BUTTON
═══════════════════════════ */
.submit-form {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 background: linear-gradient(135deg, var(--primary), #4b1480);
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 14px 28px;
 font-family: 'Syne', sans-serif;
 font-size: .75rem;
 font-weight: 700;
 letter-spacing: .13em;
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 8px 24px rgba(115, 56, 160, .45);
 overflow: hidden;
 position: relative;
 z-index: 1;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
 margin-top: auto;
}

.submit-form::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .22), transparent);
 transition: left .5s var(--ease);
}

.submit-form:hover::after {
 left: 160%
}

.submit-form:hover {
 transform: translateY(-3px) scale(1.03);
 box-shadow: 0 14px 34px rgba(115, 56, 160, .65), 0 0 0 3px rgba(192, 132, 252, .22);
}

.submit-form:active {
 transform: scale(.98)
}

/* featured CTA gold */
.featured .submit-form {
 background: linear-gradient(135deg, var(--gold), #c8942a);
 color: var(--secondary);
 box-shadow: 0 8px 24px rgba(233, 184, 74, .4);
 font-weight: 800;
}

.featured .submit-form:hover {
 box-shadow: 0 14px 34px rgba(233, 184, 74, .55), 0 0 0 3px rgba(233, 184, 74, .22);
}

.btn-arrow {
 display: inline-flex;
 width: 20px;
 height: 20px;
 background: rgba(255, 255, 255, .2);
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 font-size: .7rem;
 transition: transform .3s var(--ease);
}

.submit-form:hover .btn-arrow {
 transform: translateX(4px)
}

.featured .submit-form .btn-arrow {
 background: rgba(15, 5, 41, .15)
}

/* ═══════════════════════════
   BOTTOM NOTE
═══════════════════════════ */
.pricing-note {
 position: relative;
 z-index: 2;
 text-align: center;
 margin-top: 48px;
 font-size: .78rem;
 color: var(--mid);
 line-height: 1.7;
}

.pricing-note a {
 color: var(--accent);
 text-decoration: none
}

.pricing-note a:hover {
 text-decoration: underline
}

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media(max-width:1024px) {
 .price-cards {
  grid-template-columns: 1fr 1fr;
  gap: 22px
 }

 .price-card:nth-child(2) {
  grid-column: span 2
 }
}

@media(max-width:680px) {
 .price-cards {
  grid-template-columns: 1fr
 }

 .price-card:nth-child(2) {
  grid-column: span 1
 }
}


.chat-b {
 border-color: var(--accent);
 color: var(--primary);
}

.chat-w {
 border-color: var(--white);
 color: var(--white);
}

.step-cta-group{
 justify-content: center;
}