/* =========================================================================
   SECTIONS.CSS — landing-page building blocks (dark-green / lime theme)
   light-section scope, markets marquee, video frames, comparison, sticky bar
   ========================================================================= */

/* ---- light (mint) sections: re-scope tokens so existing cards just work ---- */
.section-light {
  background: var(--card-light);
  --white: #14211B; --ivory: #14211B;
  --muted-100: #3E4A43; --muted-300: #5E6B63; --muted-500: #6B756E;
  --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F3F6F3;
  --glass-fill: #FFFFFF;
  --border-subtle: rgba(14,27,20,.1); --border-strong: rgba(14,27,20,.18);
  --blue-300: #147A41; --blue-400: #147A41;
  color: #14211B;
}
.section-light .section-head h2 { color: #147A41; }
.section-light .eyebrow { color: #147A41; }
.section-light .t-card, .section-light .faq-item {
  background: #fff; border: 1px solid rgba(14,27,20,.1); border-radius: 16px;
  box-shadow: 0 14px 34px -24px rgba(8,22,15,.32);
}
.section-light .t-stars { color: var(--gold-500); }

/* ---- markets marquee ---- */
.mkt-marquee { background: #000; padding: 30px 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mkt-marquee-label { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.mkt-track { display: flex; width: max-content; animation: mktScroll 40s linear infinite; }
.mkt-marquee:hover .mkt-track { animation-play-state: paused; }
.mkt-chip { margin-right: 40px; min-width: 170px; height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(147,223,19,.22); border-radius: 12px; color: rgba(255,255,255,.8); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.mkt-chip i { color: var(--lime); }
@keyframes mktScroll { to { transform: translateX(-50%); } }

/* ---- video frames with travelling glow border ---- */
@property --vb { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes vbSpin { to { --vb: 360deg; } }
.vframe { position: relative; aspect-ratio: 16 / 9; max-width: 860px; margin: 0 auto; border-radius: 16px; background: linear-gradient(135deg, #17352A, #08130D);
  box-shadow: 0 0 34px rgba(147,223,19,.28); display: grid; place-items: center; }
.vframe.vertical { aspect-ratio: 9 / 16; max-width: none; width: 100%; }
.vframe::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(147,223,19,.32); pointer-events: none; }
.vframe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 4px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--vb), transparent 0 275deg, rgba(255,255,255,.2) 304deg, #fff 334deg, #E3C57E 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 8px rgba(147,223,19,.95)); animation: vbSpin 3.4s linear infinite; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; z-index: 2; }
.vplay { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; padding-left: 5px; font-size: 26px;
  background: linear-gradient(180deg, #A9EE34, #93DF13); color: var(--on-lime); box-shadow: 0 0 30px rgba(147,223,19,.5); }
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vcenter { text-align: center; margin-top: var(--sp-7); }
.vcenter .btn { min-height: 58px; padding: 0 34px; font-size: 16px; }

/* ---- old way vs this platform ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 920px; margin: 0 auto; }
.cmp-panel { border-radius: 22px; padding: 30px 28px; }
.cmp-old { background: #F7F7F5; border: 2px solid #C0432F; color: #14211B; }
.cmp-new { background: linear-gradient(160deg, #10382A, #06120C); border: 1px solid rgba(147,223,19,.3); color: #fff; }
.cmp-tag { display: inline-block; padding: 6px 14px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.cmp-old .cmp-tag { background: #C0432F; color: #fff; } .cmp-new .cmp-tag { background: var(--lime); color: var(--on-lime); }
.cmp-panel h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px; color: inherit; }
.cmp-panel li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 600; }
.cmp-panel li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; }
.cmp-old li i { background: #C0432F; color: #fff; } .cmp-new li i { background: #CDEEDB; color: #147A41; }

/* ---- sticky register bar ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; transform: translateY(110%); transition: transform var(--transition-base);
  background: linear-gradient(180deg, #0E241A, #081410); border-top: 1px solid rgba(198,160,82,.3); box-shadow: 0 -14px 40px -20px rgba(0,0,0,.6); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sticky-cta.show { transform: none; }
.sticky-cta-in { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.sticky-cta b { font-size: 1.05rem; } .sticky-cta b em { color: var(--lime); font-style: normal; font-weight: 800; }
.sticky-cta small { display: block; color: rgba(255,255,255,.62); font-size: .82rem; }

@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } .sticky-cta small { display: none; } .sticky-cta-in { padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .vframe::after, .mkt-track { animation: none; } }

/* ---- hero + shared accents (template look) ---- */
.hero-copy h1 { font-weight: 700; letter-spacing: -.02em; }
.hero-copy h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: #93DF14; }
.hero-copy .eyebrow { padding: 8px 18px; border-radius: 999px; background: rgba(147,223,19,.08); border: 1px solid rgba(147,223,19,.28); color: #9FE870; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.hero-copy .lede { color: rgba(255,255,255,.79); }
.hero-trust .trust-item i { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; background: rgba(147,223,19,.12); border: 1px solid rgba(147,223,19,.34); color: var(--lime); }
.hero-panel, .plan-card, .product-card, .converter-tool { border-color: rgba(147,223,19,.18); }
.product-card:hover, .plan-card:hover { border-color: rgba(147,223,19,.45); }
.product-icon { color: var(--on-lime); }
.final-cta { background: radial-gradient(circle, #0E1B14 48%, #000 100%); }
.text-gold { color: #93DF14; }
.section-light .text-gold { color: #147A41; }
.site-footer { background: #000; border-top: 1px solid rgba(198,160,82,.3); }
.footer-cta .btn-gold, .footer-cta button { background: var(--gradient-blue); color: var(--on-lime); }

/* ---- hero photo, founder card, featured-in strip ---- */
.hero { background: var(--hero-img, none) right center / cover no-repeat, var(--gradient-hero); }
.hero-inner { position: relative; z-index: 1; }
.founder { display: grid; grid-template-columns: .82fr 1.18fr; max-width: 1040px; margin: 0 auto; border: 1px solid rgba(198,160,82,.22); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px -40px #000; }
.founder-photo { min-height: 380px; background: #0A1812 center top / cover no-repeat; }
.founder-body { background: linear-gradient(165deg, #0E2C20, #0A1B13); padding: 44px 42px; color: rgba(255,255,255,.8); line-height: 1.7; }
.founder-body h2 { color: #fff; font-size: 2rem; margin: 6px 0 4px; } .founder-body .role { color: var(--gold-400); font-weight: 600; margin-bottom: 18px; }
.founder-body p { margin: 0 0 14px; }
.press-row { background: #000; padding: 34px 0; text-align: center; }
.press-row .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.press-row img { height: 34px; width: auto; opacity: .8; }
.page-hero { background: var(--hero-img, none) right center / cover no-repeat, var(--gradient-hero); }
.pull { border-left: 3px solid var(--lime); padding: 6px 0 6px 20px; font-size: 1.25rem; font-weight: 600; line-height: 1.5; color: #fff; margin: 28px 0; }
.compare-img { max-width: 760px; margin: 0 auto; border-radius: 22px; box-shadow: 0 30px 70px -40px rgba(8,22,15,.5); }
@media (max-width: 800px) { .founder { grid-template-columns: 1fr; } .founder-photo { min-height: 320px; } .founder-body { padding: 30px 22px; } }
.lm{color:#93DF14}

/* ---- inner-page banners (contact, markets, legal) ---- */
.innerhero { background: linear-gradient(180deg, rgba(12,32,23,.55), rgba(0,0,0,.85)), var(--hero-img, none) center / cover no-repeat, var(--gradient-hero); }

/* =========================================================================
   v3 — traditional headings, hero slider, motion, new sections
   ========================================================================= */
.eyebrow { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.eyebrow i { display: none; }
.section-head h2::after { content: ""; display: block; width: 64px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, #C6A052, transparent); }
.section-head.left h2::after { margin-left: 0; background: #C6A052; }
.section-light .section-head h2::after { background: linear-gradient(90deg, transparent, #147A41, transparent); }
.final-cta h2::after, .compare + h2::after { display: none; }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ringpulse { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes breathe { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
@keyframes flicker { 0%,100% { opacity: 1; } 8% { opacity: .55; } 10% { opacity: 1; } 52% { opacity: .85; } 54% { opacity: 1; } 78% { opacity: .6; } 80% { opacity: 1; } }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-24px); } }

/* generic drawing strokes */
.draw { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.gold, .gold { stroke: #E3C57E; } .gold-fill { fill: #E3C57E; } .gold { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.draw.d2 { animation-delay: .5s !important; } .draw.d3 { animation-delay: 1.1s !important; }

/* hero: drifting glow + highlighted phrase underline */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(147,223,19,.14), transparent 65%); animation: drift 14s ease-in-out infinite; pointer-events: none; }
.hero-copy h1 .hl { position: relative; display: inline-block; }
.hero-copy h1 .hl svg { position: absolute; left: 0; bottom: -8px; width: 100%; height: 12px; overflow: visible; }
.hero-copy h1 .hl .draw { stroke: #E3C57E; stroke-width: 3; animation: draw 1.4s .6s ease forwards; }
.live-dot, .pre i { animation: flicker 3.2s infinite; }

/* hero slider */
.hslider { position: relative; padding: 26px 24px 18px; min-height: 410px; display: flex; flex-direction: column; overflow: hidden; }
.hs-track { position: relative; flex: 1; min-height: 300px; }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .6s ease, transform .6s ease, visibility .6s; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; }
.hs-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.hs-slide h3 { font-size: 1.35rem; font-weight: 700; margin: 18px 0 8px; color: #fff; }
.hs-slide p { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 330px; margin: 0 auto; }
.hs-art { width: 128px; height: 128px; overflow: visible; } .hs-art.wide { width: 250px; height: 125px; }
.hs-art path, .hs-art circle, .hs-art rect, .hs-art ellipse { fill: none; }
.hs-art .gold-fill, .hs-art .coin { fill: #E3C57E; stroke: none; } .hs-art .area { fill: url(#hsfill); stroke: none; opacity: 0; }
.hs-art .grid { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.hs-slide.is-active .draw { animation: draw 2s ease forwards; }
.hs-slide.is-active .area { animation: fadein 1.2s 1.4s ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.hs-art .pulse-ring { stroke: rgba(147,223,19,.5); stroke-width: 2; transform-origin: 60px 60px; animation: ringpulse 2.4s ease-out infinite; }
.hs-art .pulse-dot, .calc-svg .pulse-dot { fill: #E3C57E; stroke: rgba(227,197,126,.5); stroke-width: 8; animation: flicker 2.2s infinite; }
.hs-art .ticks { stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-dasharray: 1.5 7.5; transform-origin: 60px 60px; animation: spin360 24s linear infinite; }
.hs-art .dial { transform-origin: 60px 60px; animation: spin360 10s cubic-bezier(.5,0,.5,1) infinite; } .hs-art .dial path { stroke: #E3C57E; }
.hs-art .orbit { transform-origin: 60px 60px; animation: spin360 8s linear infinite; }
.hs-art .m1 { transform-origin: 60px 60px; animation: breathe 5s ease-in-out infinite alternate, draw 2s ease forwards; }
.hs-art .coin { transform-origin: 60px 42px; animation: floaty 3s ease-in-out infinite; }
.hs-photo { padding: 0; margin: -26px -24px -18px; border-radius: 18px; background: linear-gradient(180deg, rgba(8,20,13,.1) 30%, rgba(8,20,13,.92)), var(--hs-img) center top / cover no-repeat; justify-content: flex-end; }
.hs-photo-cap { padding: 28px 26px 56px; }
.hs-photo-cap h3 { margin-top: 0; } .hs-photo-cap p { margin-bottom: 16px; }
.hs-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; position: relative; z-index: 3; }
.hs-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font-size: .75rem; transition: background .2s, border-color .2s; }
.hs-arrow:hover { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.hs-dots { display: flex; gap: 8px; } .hs-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.25); cursor: pointer; transition: width .3s, background .3s; }
.hs-dots button.on { width: 24px; background: var(--lime); }
.hs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); } .hs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), #E3C57E); }

/* livelier cards */
.product-icon { animation: floaty 5s ease-in-out infinite; }
.product-card:nth-child(2n) .product-icon { animation-delay: -1.5s; } .product-card:nth-child(3n) .product-icon { animation-delay: -3s; }
.product-card:hover .product-icon { animation: none; transform: scale(1.12) rotate(-6deg); transition: transform .3s; }
.step-num { animation: flicker 5s infinite; }
.stat-num { text-shadow: 0 0 18px rgba(147,223,19,.25); }
.final-cta { position: relative; overflow: hidden; } .final-cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px; border-radius: 50%; border: 1px solid rgba(147,223,19,.12); box-shadow: 0 0 0 80px rgba(147,223,19,.03), 0 0 0 160px rgba(147,223,19,.02); animation: ringpulse 6s ease-out infinite; pointer-events: none; }
.final-cta > * { position: relative; }

/* growth calculator */
.calc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; max-width: 1040px; margin: 0 auto; padding: 30px; border: 1px solid rgba(147,223,19,.18); border-radius: 24px; background: linear-gradient(165deg, rgba(18,49,37,.55), rgba(8,20,13,.6)); }
.calc-inputs label { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: .86rem; font-weight: 600; color: var(--muted-100); } .calc-inputs label:first-child { margin-top: 0; }
.calc-inputs output { color: var(--lime); font-weight: 700; }
.calc input[type=range] { width: 100%; accent-color: #93DF13; }
.calc-plans { display: flex; gap: 8px; flex-wrap: wrap; } .calc-plans button { flex: 1; min-width: 92px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; font: 600 .85rem var(--font-body); cursor: pointer; transition: .2s; }
.calc-plans button.on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.calc-total small { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-300); } .calc-total strong { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; letter-spacing: -.02em; }
.calc-svg { width: 100%; height: auto; margin-top: 8px; overflow: visible; } .calc-svg .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; fill: none; }
.cline { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(147,223,19,.5)); }
.calc-split { display: flex; justify-content: space-between; margin-top: 10px; font-size: .9rem; color: var(--muted-100); } .calc-split b { color: #fff; }
.calc-note { margin: 12px 0 0; font-size: .74rem; color: var(--muted-500); }

/* why members stay + insights */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why { background: #fff; border: 1px solid rgba(14,27,20,.1); border-radius: 16px; padding: 28px; box-shadow: 0 14px 34px -24px rgba(8,22,15,.32); transition: transform .25s, box-shadow .25s; }
.why:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(8,22,15,.4); }
.why-ico { width: 52px; height: 52px; margin-bottom: 14px; } .why-ico .draw { stroke: #147A41; }
.why-ico.drawn .draw { animation: draw 1.6s ease forwards; }
.why h4 { margin: 0 0 6px; color: #14211B; font-size: 1.08rem; } .why p { margin: 0; color: #4C5A52; line-height: 1.6; font-size: .94rem; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ins { display: block; padding: 28px; border: 1px solid rgba(198,160,82,.25); border-radius: 16px; background: rgba(255,255,255,.03); color: inherit; transition: transform .25s, border-color .25s, background .25s; }
.ins:hover { transform: translateY(-4px); border-color: #C6A052; background: rgba(198,160,82,.06); }
.ins-n { font-size: 2rem; font-weight: 800; color: rgba(198,160,82,.55); letter-spacing: -.02em; }
.ins h4 { margin: 10px 0 8px; font-size: 1.15rem; line-height: 1.3; } .ins p { color: var(--muted-100); line-height: 1.6; font-size: .94rem; margin: 0 0 14px; }
.ins-more { color: var(--lime); font-weight: 600; font-size: .88rem; } .ins:hover .ins-more i { transform: translateX(4px); } .ins-more i { transition: transform .2s; }
.compare.drawn .cmp-panel { animation: fadein .8s ease both; }

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; padding: 22px; } .why-grid, .ins-grid { grid-template-columns: 1fr; } .hslider { min-height: 440px; } }
@media (prefers-reduced-motion: reduce) { .hs-slide { transition: none; } .draw { stroke-dashoffset: 0 !important; animation: none !important; } .hs-art *, .product-icon, .live-dot, .step-num, .final-cta::before, .hero::after { animation: none !important; } }

/* seven service cards: keep the last one centred instead of orphaned left */
@media (min-width: 901px) { .products-grid .product-card:last-child:nth-child(3n+1) { grid-column: 2; } }