/* ═════════════════════════════════════════════
   ZOPTCHAIN · RFQ MANAGER PRO
   100% REDESIGN v3
   Fonts: Outfit + Sora + Fira Code
   Style: Alternating light/dark/accent bands
   ═════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────── */
:root {
   /* Surface palette */
   --white: #ffffff;
   --cream: #f8f7ff;
   --gray-50: #f3f1fa;
   --gray-100: #ebe8f4;
   --gray-200: #d8d3e8;
   --dark: #14102b;
   --dark-2: #1d1840;
   --dark-card: rgba(255, 255, 255, 0.06);

   /* Text */
   --ink: #120e28;
   --ink-2: #4a4566;
   --ink-3: #8a84a3;
   --ink-inv: #f4f0ff;
   --ink-inv-2: rgba(244, 240, 255, 0.7);

   /* Accents */
   --violet: #8b5cf6;
   --pink: #ec4899;
   --blue: #3b82f6;
   --cyan: #22d3ee;
   --green: #10b981;
   --amber: #f59e0b;
   --red: #ef4444;

   --grad-1: linear-gradient(135deg, #8b5cf6, #ec4899);
   --grad-2: linear-gradient(135deg, #3b82f6, #8b5cf6);

   /* Type */
   --heading: 'Outfit', sans-serif;
   --body: 'Sora', sans-serif;
   --mono: 'Fira Code', monospace;

   /* Layout */
   --max-w: 1180px;
   --section-y: clamp(80px, 10vw, 120px);
   --radius: 16px;
   --radius-sm: 10px;
   --radius-xs: 6px;
}

/* ── RESET ────────────────────────────── */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--body);
   background: var(--white);
   color: var(--ink);
   font-size: 16px;
   line-height: 1.7;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

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

ul {
   list-style: none
}

img {
   max-width: 100%;
   display: block
}

.container {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 28px
}

/* ── ANIMATIONS ──────────────────────── */
.reveal {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1)
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

@media (max-width: 768px) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }
}

@keyframes float {

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

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

@keyframes spin-slow {
   from {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(360deg)
   }
}

@keyframes ticker-move {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(-50%)
   }
}

@keyframes orb-float {
   0% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }

   50% {
      transform: translate3d(20px, -30px, 0) scale3d(1.1, 0.95, 1);
   }

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

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(139, 92, 246, .4)
   }

   50% {
      box-shadow: 0 0 0 8px transparent
   }
}

/* ── BUTTONS ─────────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 32px;
   border: none;
   border-radius: var(--radius-sm);
   font-family: var(--body);
   font-weight: 600;
   font-size: .92rem;
   cursor: pointer;
   transition: all .35s;
   text-decoration: none;
}

.btn--primary {
   background: var(--grad-1);
   color: #fff;
   box-shadow: 0 4px 20px rgba(139, 92, 246, .2);
}

.btn--primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 36px rgba(139, 92, 246, .3)
}

.btn--ghost {
   background: transparent;
   color: var(--ink);
   border: 1.5px solid var(--gray-200);
}

.btn--ghost:hover {
   border-color: var(--violet);
   color: var(--violet)
}

.btn--outline {
   background: transparent;
   color: var(--ink);
   border: 1.5px solid var(--gray-200);
   width: 100%;
   justify-content: center;
}

.btn--outline:hover {
   border-color: var(--violet);
   color: var(--violet);
   background: rgba(139, 92, 246, .04)
}

.btn--lg {
   padding: 16px 38px;
   font-size: 1rem
}

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

.btn--full:disabled {
   opacity: .35;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important
}


/* ═══════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 14px 0;
   transition: all .4s;
}

.nav.scrolled {
   padding: 8px 0
}

.nav__inner {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 28px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   background: rgba(255, 255, 255, .85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius);
}

.nav.scrolled .nav__inner {
   box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}

.nav__brand {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-right: auto
}

.nav__logo {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: var(--grad-1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: .85rem;
   color: #fff;
   flex-shrink: 0;
}

.nav__name {
   font-family: var(--heading);
   font-weight: 700;
   font-size: .95rem
}

.nav__name span {
   display: block;
   font-weight: 400;
   font-size: .65rem;
   color: var(--ink-3)
}

.nav__links {
   display: flex;
   gap: 4px
}

.nav__links a {
   padding: 8px 16px;
   font-size: .85rem;
   font-weight: 500;
   color: var(--ink-2);
   border-radius: 8px;
   transition: all .25s;
}

.nav__links a:hover,
.nav__links a.active {
   color: var(--ink);
   background: var(--gray-50)
}

.nav__login {
   color: var(--ink-3) !important
}

.nav__actions {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-left: 12px
}

.nav__cta {
   padding: 9px 22px;
   background: var(--grad-1);
   color: #fff;
   border-radius: 10px;
   font-weight: 600;
   font-size: .82rem;
   transition: transform .3s, box-shadow .3s;
}

.nav__cta:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(139, 92, 246, .25)
}

.lang-bar {
   display: flex;
   gap: 2px
}

.lang-btn {
   background: none;
   border: 1px solid transparent;
   color: var(--ink-3);
   font-size: .7rem;
   padding: 4px 7px;
   border-radius: 6px;
   cursor: pointer;
   transition: all .25s;
   font-family: var(--body);
}

.lang-btn.active,
.lang-btn:hover {
   color: var(--ink);
   border-color: var(--gray-200)
}

/* ── BURGER ── */

.nav__burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
}

.nav__burger span {
   width: 20px;
   height: 2px;
   background: var(--ink);
   border-radius: 2px;
   transition: all .3s
}

.nav__burger.active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.nav__burger.active span:nth-child(2) {
   opacity: 0
}

.nav__burger.active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}


/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 140px 28px 0;
   text-align: center;
   overflow: hidden;
   background: var(--white);
}

.hero__orb {
   position: absolute;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   opacity: .45;
   animation: orb-float 12s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
   will-change: transform;
   transform: translate3d(0, 0, 0);
}

.hero__orb {
   background: radial-gradient(circle, var(--violet) 0%, transparent 65%);
   top: -100px;
   right: -100px
}

.hero__orb--2 {
   background: radial-gradient(circle, var(--pink) 0%, transparent 65%);
   bottom: -150px;
   left: -100px;
   animation-delay: -6s
}

.hero__content {
   position: relative;
   z-index: 1;
   max-width: 760px
}

.hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 20px;
   background: rgba(139, 92, 246, .08);
   border: 1px solid rgba(139, 92, 246, .15);
   border-radius: 100px;
   font-family: var(--mono);
   font-size: .72rem;
   font-weight: 500;
   color: var(--violet);
   letter-spacing: .04em;
   margin-bottom: 28px;
}

.pulse {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--green);
   animation: pulse 2s ease-in-out infinite;
}

.hero__title {
   font-family: var(--heading);
   font-size: clamp(2.4rem, 5.5vw, 4rem);
   font-weight: 800;
   line-height: 1.12;
   margin-bottom: 22px;
   letter-spacing: -.02em;
}

.hero__title em {
   font-style: normal;
   font-weight: 800;
   background: var(--grad-1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.hero__lead {
   font-size: 1.1rem;
   color: var(--ink-2);
   line-height: 1.8;
   max-width: 620px;
   margin: 0 auto 36px;
}

.hero__btns {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap
}

/* Stats strip */
.stats-strip {
   display: flex;
   gap: 0;
   margin-top: 72px;
   position: relative;
   z-index: 1;
   background: var(--dark);
   border-radius: var(--radius);
   overflow: hidden;
   width: 100%;
   max-width: var(--max-w);
}

.stat {
   flex: 1;
   padding: 28px 20px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .06);
   display: flex;
   flex-direction: column;
   align-items: center;
}

.stat:last-child {
   border-right: none
}

.stat__num {
   font-family: var(--heading);
   font-weight: 800;
   font-size: 2.4rem;
   color: #fff;
   line-height: 1;
}

.stat__pct {
   font-family: var(--heading);
   font-weight: 700;
   font-size: 1.2rem;
   color: var(--violet)
}

.stat__label {
   font-size: .75rem;
   color: rgba(255, 255, 255, .5);
   margin-top: 6px
}


/* ═══════════════════════════════════════
   TICKER
   ═══════════════════════════════════════ */
.ticker {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 16px 0;
   border-top: 1px solid var(--gray-100);
   border-bottom: 1px solid var(--gray-100);
   background: var(--cream);
   overflow: hidden;
}

.ticker__label {
   font-family: var(--mono);
   font-size: .65rem;
   font-weight: 500;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink-3);
   padding-left: 24px;
   flex-shrink: 0;
}

.ticker__track {
   overflow: hidden;
   flex: 1
}

.ticker__scroll {
   display: flex;
   gap: 12px;
   animation: ticker-move 30s linear infinite
}

.ticker__scroll span {
   font-size: .78rem;
   font-weight: 500;
   color: var(--ink-3);
   padding: 5px 14px;
   border: 1px solid var(--gray-200);
   border-radius: 8px;
   white-space: nowrap;
   flex-shrink: 0;
}


/* ═══════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════ */
.section {
   padding: var(--section-y) 0
}

.section--light {
   background: var(--white)
}

.section--dark {
   background: var(--dark);
   color: var(--ink-inv)
}

.section--accent {
   background: linear-gradient(135deg, #1e1260 0%, #3b1a7c 50%, #5b21b6 100%);
   color: #fff;
}

.section--cta {
   background: var(--cream)
}

.section__head {
   text-align: center;
   margin-bottom: 56px
}

.section__head h2 {
   font-family: var(--heading);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.01em;
}

.white {
   color: #fff
}

.kicker {
   font-family: var(--mono);
   font-size: .72rem;
   font-weight: 500;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--violet);
   display: block;
   margin-bottom: 14px;
}

.kicker--light {
   color: rgba(255, 255, 255, .6)
}

.section__sub {
   font-size: 1rem;
   color: var(--ink-2);
   max-width: 560px;
   margin: 14px auto 0
}

.section__sub--light {
   color: rgba(255, 255, 255, .6)
}

[data-theme="dark"] .section--dark {
   background: var(--dark)
}

[data-theme="dark"] .section--cta {
   background: var(--cream)
}


.ba-headline {
   font-family: var(--heading);
   font-size: clamp(2rem, 4.5vw, 3rem);
   font-weight: 800;
   letter-spacing: -.01em;
   background: var(--grad-1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ═══════════════════════════════════════
   CYCLE COUNTER (animated 14 → 3)
   ═══════════════════════════════════════ */
.cycle-counter {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   margin-bottom: 48px;
   padding: 28px;
   background: var(--dark);
   border-radius: var(--radius);
   position: relative;
   overflow: hidden;
}

.cycle-counter__from,
.cycle-counter__to {
   display: flex;
   align-items: baseline;
   gap: 6px;
}

.cycle-counter__num {
   font-family: var(--heading);
   font-weight: 800;
   font-size: 3.6rem;
   line-height: 1;
}

.cycle-counter__num--bad {
   color: var(--red);
}

.cycle-counter__num--good {
   color: var(--green);
}

.cycle-counter__unit {
   font-size: 1rem;
   font-weight: 600;
   color: rgba(255, 255, 255, .5);
}

.cycle-counter__arrow {
   display: flex;
   align-items: center;
   animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {

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

   50% {
      opacity: 1;
      transform: translateX(4px);
   }
}

.cycle-counter__label {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--mono);
   font-size: .62rem;
   color: rgba(255, 255, 255, .35);
   letter-spacing: .1em;
   text-transform: uppercase;
   white-space: nowrap;
}

/* ═══════════════════════════════════════
   COMPARE (Before / After)
   ═══════════════════════════════════════ */
.compare {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   align-items: stretch;
}

.compare__col {
   padding: 0;
   border-radius: var(--radius);
   background: var(--white);
   border: 1px solid var(--gray-100);
   transition: all .4s;
   overflow: hidden;
}

.compare__col:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}

.compare__header {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 18px 28px;
   font-family: var(--heading);
}

.compare__header--bad {
   background: rgba(239, 68, 68, .06);
   border-bottom: 2px solid var(--red);
   color: var(--red);
}

.compare__header--good {
   background: rgba(16, 185, 129, .06);
   border-bottom: 2px solid var(--green);
   color: var(--green);
}

.compare__header h4 {
   font-family: var(--heading);
   font-size: 1rem;
   font-weight: 700;
   margin: 0;
   flex: 1;
}

.compare__header--bad h4 {
   color: var(--red);
}

.compare__header--good h4 {
   color: var(--green);
}

.compare__tag {
   font-family: var(--mono);
   font-size: .6rem;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 3px 10px;
   border-radius: 100px;
}

.compare__tag--bad {
   background: rgba(239, 68, 68, .1);
   color: var(--red);
}

.compare__tag--good {
   background: rgba(16, 185, 129, .1);
   color: var(--green);
}

.compare__col ul {
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: 20px 28px;
}

.compare__col li {
   font-size: .85rem;
   color: var(--ink-2);
   padding: 9px 0 9px 24px;
   position: relative;
   line-height: 1.55;
   border-bottom: 1px solid var(--gray-50);
}

.compare__col li:last-child {
   border-bottom: none;
}

.compare__col--bad li::before {
   content: '✗';
   position: absolute;
   left: 0;
   color: var(--red);
   font-weight: 700;
   font-size: .8rem;
}

.compare__col--good li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--green);
   font-weight: 700;
   font-size: .8rem;
}


/* ═══════════════════════════════════════
   WORKFLOW ANIMATED TABS
   ═══════════════════════════════════════ */
.wf-tabs {
   max-width: 960px;
   margin: 0 auto;
}

/* ── Tab navigation bar ── */
.wf-tabs__nav {
   display: flex;
   gap: 0;
   flex-wrap: nowrap;
   background: rgba(17, 17, 17, .6);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   padding: 5px;
   border-radius: 14px;
   position: relative;
   margin-bottom: 6px;
}

.wf-tabs__btn {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 1;
   padding: 12px 16px;
   border: none;
   background: none;
   color: rgba(255, 255, 255, .4);
   font-family: var(--body);
   font-size: .82rem;
   font-weight: 500;
   cursor: pointer;
   border-radius: 10px;
   transition: color .3s, background .3s;
   z-index: 1;
   white-space: nowrap;
}

.wf-tabs__btn:hover {
   color: rgba(255, 255, 255, .9);
   background: rgba(255, 255, 255, .04);
}

.wf-tabs__btn.active {
   color: #fff;
}

.wf-tabs__num {
   font-family: var(--heading);
   font-weight: 800;
   font-size: .72rem;
   color: var(--accent, var(--violet));
   opacity: .45;
   transition: opacity .3s;
}

.wf-tabs__btn:hover .wf-tabs__num {
   opacity: .8;
}

.wf-tabs__btn.active .wf-tabs__num {
   opacity: 1;
}

/* Animated sliding indicator */
.wf-tabs__indicator {
   position: absolute;
   top: 5px;
   left: 5px;
   height: calc(100% - 10px);
   background: rgba(17, 17, 17, .82);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, .2);
   border-top: 2px solid var(--violet);
   transition: transform .4s cubic-bezier(.4, 0, .2, 1), width .4s cubic-bezier(.4, 0, .2, 1);
   z-index: 0;
   pointer-events: none;
}

/* ── Tab panels ── */
.wf-tabs__panels {
   background: rgba(17, 17, 17, .6);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, .06);
   box-shadow: 0 0 20px rgba(0, 0, 0, .2);
   padding: 28px;
   min-height: 280px;
   position: relative;
   overflow: hidden;
}

.wf-tabs__panel {
   display: none;
   animation: wfTabIn .5s cubic-bezier(.4, 0, .2, 1) both;
}

.wf-tabs__panel.active {
   display: block;
}

@keyframes wfTabIn {
   from {
      opacity: 0;
      transform: translateX(-10px) scale(.97);
      filter: blur(8px);
   }

   to {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0);
   }
}

/* ── Panel content grid (image + text) ── */
.wf-tabs__panel-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   align-items: start;
}

.wf-tabs__img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   border-radius: var(--radius-sm);
   box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

.wf-tabs__content h3 {
   font-family: var(--heading);
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--ink-inv);
   margin-bottom: 10px;
}

.wf-tabs__content p {
   font-size: .88rem;
   color: var(--ink-inv-2);
   line-height: 1.65;
   margin-bottom: 16px;
}

.step__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.step__tags span {
   font-size: .68rem;
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 6px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .5);
   font-family: var(--mono);
}

/* ── Award panel (tab 5) ── */
.wf-tabs__award-desc {
   font-size: .92rem;
   color: var(--ink-inv-2);
   line-height: 1.65;
   margin-bottom: 20px;
}

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

.award__branch {
   padding: 22px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(255, 255, 255, .06);
}

.award__branch h4 {
   font-family: var(--heading);
   font-size: .9rem;
   font-weight: 700;
   margin-bottom: 12px
}

.award__branch--green h4 {
   color: var(--green)
}

.award__branch--blue h4 {
   color: var(--cyan)
}

.award__branch--red h4 {
   color: var(--red)
}

.award__branch li {
   font-size: .8rem;
   color: var(--ink-inv-2);
   padding: 3px 0 3px 14px;
   position: relative;
}

.award__branch li::before {
   content: '›';
   position: absolute;
   left: 0;
   color: rgba(255, 255, 255, .3);
   font-weight: 700
}


/* ═══════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════ */
.features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 28px
}

.fcard {
   padding: 36px 28px;
   border-radius: var(--radius);
   background: var(--white);
   border: 1px solid var(--gray-100);
   transition: all .5s;
   position: relative;
   overflow: hidden;
}

.fcard:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.fcard__icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: rgba(139, 92, 246, .08);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px;
   transition: all .4s;
}

.fcard:hover .fcard__icon {
   background: rgba(139, 92, 246, .14);
   transform: scale(1.05);
}

.fcard h3 {
   font-family: var(--heading);
   font-size: 1.15rem;
   font-weight: 700;
   margin-bottom: 10px
}

.fcard p {
   font-size: .88rem;
   color: var(--ink-2);
   line-height: 1.7
}

.modules {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 10px
}

.mod-pill {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 18px;
   border-radius: var(--radius-sm);
   border: 1px solid var(--gray-100);
   background: var(--cream);
   font-size: .88rem;
   font-weight: 600;
   transition: all .3s;
}

.mod-pill__icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

.mod-pill:hover {
   border-color: var(--violet);
   transform: translateY(-2px)
}


/* ═══════════════════════════════════════
   PRICING
   ═══════════════════════════════════════ */
.pricing-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   align-items: start
}

.pricing-grid--equal {
   align-items: stretch;
}

.pricing-grid--equal .pcard {
   display: flex;
   flex-direction: column;
}

.pricing-grid--equal .pcard__list {
   flex: 1;
}

.pcard {
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(255, 255, 255, .08);
   overflow: hidden;
   transition: all .4s;
   position: relative;
}

.pcard:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, .12)
}

.pcard--pop {
   transform: scale(1.04)
}

.pcard--pop:hover {
   transform: scale(1.04) translateY(-4px)
}

.pcard__badge {
   position: absolute;
   top: 14px;
   right: 14px;
   padding: 5px 14px;
   background: var(--grad-1);
   color: #fff;
   font-size: .65rem;
   font-weight: 700;
   border-radius: 100px;
   letter-spacing: .06em;
   text-transform: uppercase;
   font-family: var(--mono);
}

.pcard__header {
   padding: 28px 24px 20px;
   border-bottom: 3px solid var(--stripe, var(--violet));
}

.pcard__header h3 {
   font-family: var(--heading);
   font-size: 1.3rem;
   font-weight: 800;
   letter-spacing: .08em;
   margin-bottom: 6px;
   background: var(--grad-1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.pcard__header p {
   font-size: .85rem;
   color: var(--ink-2)
}

.pcard__meta {
   padding: 12px 24px;
   font-size: .78rem;
   color: var(--ink-3);
   border-bottom: 1px solid var(--gray-100);
}

.pcard__list {
   padding: 20px 24px;
   margin-bottom: 0
}

.pcard__list li {
   font-size: .85rem;
   color: var(--ink-2);
   padding: 5px 0
}

.pcard__inherit {
   font-weight: 600;
   color: var(--ink) !important
}

.pcard .btn {
   margin: 0 24px 24px;
   width: calc(100% - 48px)
}


/* ═══════════════════════════════════════
   CTA
   ═══════════════════════════════════════ */
.cta-block {
   text-align: center;
   max-width: 680px;
   margin: 0 auto
}

.cta-block h2 {
   font-family: var(--heading);
   font-size: clamp(1.8rem, 4vw, 2.6rem);
   font-weight: 800;
   margin-bottom: 12px;
}

.cta-block h2 em {
   font-style: normal;
   font-weight: 800;
   background: var(--grad-1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}


/* ═══════════════════════════════════════
   MODAL
   ═══════════════════════════════════════ */
.modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(18, 14, 40, .75);
   align-items: center;
   justify-content: center;
   padding: 24px;
}

.modal.open {
   display: flex
}

.modal__card {
   background: var(--white);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius);
   padding: 40px;
   max-width: 540px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   position: relative;
}

.modal__close {
   position: absolute;
   top: 14px;
   right: 14px;
   background: none;
   border: none;
   color: var(--ink-3);
   font-size: 1.8rem;
   cursor: pointer;
   line-height: 1;
}

.modal__close:hover {
   color: var(--ink)
}

.modal__card h3 {
   font-family: var(--heading);
   font-size: 1.3rem;
   font-weight: 700;
   margin-bottom: 6px
}

.modal__sub {
   font-size: .88rem;
   color: var(--ink-2);
   margin-bottom: 24px
}

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

.field {
   margin-bottom: 14px
}

.field label {
   display: block;
   font-size: .78rem;
   font-weight: 600;
   color: var(--ink-2);
   margin-bottom: 5px
}

.field input,
.field select,
.field textarea {
   width: 100%;
   padding: 11px 14px;
   background: var(--cream);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-xs);
   color: var(--ink);
   font-family: var(--body);
   font-size: .88rem;
   outline: none;
   transition: border-color .3s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   border-color: var(--violet);
   box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
}

.gdpr {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: .78rem;
   color: var(--ink-3);
   cursor: pointer;
   margin-bottom: 16px
}

.gdpr input {
   width: 18px;
   height: 18px;
   margin-top: 1px;
   flex-shrink: 0;
   accent-color: var(--violet)
}

.success-icon {
   font-size: 3.5rem;
   margin-bottom: 16px
}


/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer {
   padding-top: 56px;
   border-top: 1px solid var(--gray-100);
   background: var(--cream)
}

.footer__grid {
   display: flex;
   justify-content: space-between;
   gap: 40px;
   padding-bottom: 44px
}

.footer__brand {
   max-width: 340px
}

.footer__brand p {
   font-size: .85rem;
   color: var(--ink-3);
   margin-top: 14px;
   line-height: 1.6
}

.footer__col {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.footer__col strong {
   font-family: var(--mono);
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 4px;
}

.footer__col a {
   font-size: .85rem;
   color: var(--ink-2);
   transition: color .3s
}

.footer__col a:hover {
   color: var(--ink)
}

.footer__bar {
   padding: 18px 0;
   border-top: 1px solid var(--gray-100);
   display: flex;
   justify-content: space-between;
   font-size: .75rem;
   color: var(--ink-3);
}

.footer__bar a {
   color: var(--violet);
   font-weight: 600
}


/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1024px) {
   .compare {
      grid-template-columns: 1fr
   }

   .cycle-counter {
      gap: 20px;
      padding: 22px;
   }

   .cycle-counter__num {
      font-size: 2.8rem;
   }

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

   .pricing-grid {
      grid-template-columns: 1fr;
      max-width: 420px;
      margin: 0 auto
   }

   .pcard--pop {
      transform: none
   }

   .pcard--pop:hover {
      transform: translateY(-4px)
   }

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

   .stats-strip {
      flex-wrap: wrap
   }

   .stat {
      min-width: 50%
   }
}

@media(max-width:768px) {

   .nav__links,
   .nav__actions {
      display: none
   }

   .nav__burger {
      display: flex
   }

   .nav__links.open,
   .nav__actions.open {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-top: 12px;
      order: 10;
   }

   .nav__inner {
      flex-wrap: wrap
   }

   .nav__links.open a {
      padding: 12px;
      font-size: 1rem
   }

   .hero {
      padding: 100px 20px 0;
      min-height: auto
   }

   .hero__orb {
      width: 300px;
      height: 300px
   }

   .stats-strip {
      border-radius: var(--radius-sm)
   }

   .wf-tabs__nav {
      flex-wrap: wrap;
   }

   .wf-tabs__btn {
      padding: 8px 10px;
      font-size: .72rem;
      flex: 0 1 auto;
   }

   .wf-tabs__btn span:not(.wf-tabs__num) {
      display: none;
   }

   .wf-tabs__panel-grid {
      grid-template-columns: 1fr;
   }

   .wf-tabs__img {
      height: 180px;
   }

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

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

   .footer__grid {
      flex-direction: column
   }

   .footer__bar {
      flex-direction: column;
      gap: 6px;
      text-align: center
   }
}

@media(max-width:480px) {
   .hero__btns {
      flex-direction: column;
      align-items: stretch
   }

   .stat {
      min-width: 100%
   }

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