/* ═══════════════════════════════════════════
   PEDRO GUTIÉRREZ — NEUMI PRO
   Premium Dark Funnel Stylesheet
   ═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
   --black: #050505;
   --bg: #080809;
   --bg-2: #0e0e0f;
   --bg-card: #121214;
   --border: rgba(255, 255, 255, 0.06);
   --border-h: rgba(255, 255, 255, 0.12);
   --gold: #F5C518;
   --gold-d: #D4A812;
   --gold-10: rgba(245, 197, 24, 0.10);
   --gold-20: rgba(245, 197, 24, 0.20);
   --white: #FFFFFF;
   --gray: #888892;
   --gray-l: #d1d1d6;
   --ff-d: 'Plus Jakarta Sans', sans-serif;
   --ff-b: 'Geist', sans-serif;
   --ease: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--ff-b);
   background: var(--bg);
   color: var(--white);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

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

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

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none;
   color: inherit
}

h1,
h2,
h3,
h4 {
   font-family: var(--ff-d);
   line-height: 1.05;
   letter-spacing: -0.03em
}

/* ── TEXTURE ── */
body::after {
   content: "";
   position: fixed;
   inset: 0;
   background-image: url("https://grainy-gradients.vercel.app/noise.svg");
   opacity: 0.04;
   z-index: 9999;
   pointer-events: none;
   mix-blend-mode: overlay;
}

/* ── UTILITIES ── */
.container {
   width: 90%;
   max-width: 1300px;
   margin: 0 auto
}

.gold-text {
   color: var(--gold)
}

.section {
   padding: 140px 0;
   position: relative
}

.section {
   padding: 140px 0;
   position: relative
}

/* ── REVEAL SYSTEM ── */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.reveal.reveal-d1 {
   transition-delay: .12s
}

.reveal.reveal-d2 {
   transition-delay: .24s
}

.reveal.reveal-d3 {
   transition-delay: .36s
}

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

/* ── SCARCITY BAR ── */
.scarcity-bar {
   background: var(--gold);
   color: #000;
   text-align: center;
   padding: 10px 20px;
   font-size: .82rem;
   font-weight: 600;
   letter-spacing: .5px;
   position: sticky;
   top: 0;
   z-index: 999;
   transition: transform .35s var(--ease)
}

.scarcity-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px
}

.flame {
   font-size: 1rem
}

/* ══════════════════════════════
   HERO
   ══════════════════════════════ */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   padding: 80px 0 60px
}

.hero-bg-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .7) 50%, rgba(5, 5, 5, .85) 100%);
   z-index: 1
}

.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url('assets/img/hero-bg.webp') center/cover no-repeat;
   z-index: 0
}

.hero-particles {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none
}

.particle {
   position: absolute;
   background: var(--gold);
   border-radius: 50%;
   opacity: 0;
   animation: particleFloat linear infinite
}

@keyframes particleFloat {
   0% {
      opacity: 0;
      transform: translateY(0) scale(0)
   }

   20% {
      opacity: .4
   }

   80% {
      opacity: .2
   }

   100% {
      opacity: 0;
      transform: translateY(-120px) scale(1.2)
   }
}

.hero-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center
}

/* Hero Content */
.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--gold-10);
   border: 1px solid var(--gold-20);
   padding: 6px 18px;
   border-radius: 50px;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 24px
}

.badge-dot {
   width: 6px;
   height: 6px;
   background: var(--gold);
   border-radius: 50%;
   animation: pulse 2s infinite
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .3
   }
}

.hero-title {
   font-size: clamp(2.5rem, 6vw, 4.8rem);
   font-weight: 800;
   margin-bottom: 28px;
   letter-spacing: -0.04em;
   max-width: 900px;
   line-height: 1.0
}

.hero-sub {
   font-size: 1.15rem;
   color: var(--gray-l);
   max-width: 560px;
   margin-bottom: 42px;
   line-height: 1.7
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 24px
}

/* Button Primary */
.btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--gold);
   color: #000;
   font-family: var(--ff-d);
   font-weight: 800;
   padding: 16px 32px;
   border-radius: 6px;
   font-size: .95rem;
   text-transform: uppercase;
   letter-spacing: .5px;
   transition: all .35s var(--ease);
   box-shadow: 0 4px 20px rgba(245, 197, 24, .15)
}

.btn-primary:hover {
   background: var(--gold-d);
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(245, 197, 24, .3)
}

.btn-lg {
   padding: 20px 40px;
   font-size: 1.05rem
}

/* Trust */
.hero-trust {
   display: flex;
   align-items: center;
   gap: 12px
}

.trust-avatars {
   display: flex
}

.avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid var(--bg);
   margin-left: -8px;
   background: var(--border)
}

.a1 {
   background: linear-gradient(135deg, #667eea, #764ba2)
}

.a2 {
   background: linear-gradient(135deg, #f093fb, #f5576c)
}

.a3 {
   background: linear-gradient(135deg, #4facfe, #00f2fe)
}

.trust-text {
   font-size: .8rem;
   color: var(--gray)
}

/* Hero Visual */
.hero-visual {
   position: relative;
   display: flex;
   justify-content: center
}

.hero-img-wrapper {
   position: relative;
   width: clamp(280px, 22vw, 420px);
   aspect-ratio: 1;
   border-radius: 50%;
   overflow: hidden
}

.hero-img-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-img-ring {
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 2px solid var(--gold-20);
   animation: ringRotate 12s linear infinite
}

@keyframes ringRotate {
   to {
      transform: rotate(360deg)
   }
}

/* Float Cards */
.hero-float-card {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(22, 22, 24, .85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--border);
   padding: 14px 20px;
   border-radius: 12px;
   animation: floatY 4s ease-in-out infinite
}

@keyframes floatY {

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

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

.fc1 {
   bottom: 10%;
   left: -10%;
   animation-delay: 0s
}

.fc2 {
   top: 10%;
   right: -5%;
   animation-delay: 2s
}

.fc-icon {
   font-size: 1.5rem
}

.hero-float-card strong {
   font-family: var(--ff-d);
   font-size: 1.3rem;
   display: block;
   line-height: 1
}

.hero-float-card small {
   font-size: .7rem;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: 1px
}

/* Scroll hint */
.hero-scroll-hint {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2
}

.scroll-line {
   width: 1px;
   height: 50px;
   background: linear-gradient(to bottom, var(--gold), transparent);
   animation: scrollPulse 2s infinite
}

@keyframes scrollPulse {
   0% {
      opacity: 1;
      transform: scaleY(1)
   }

   50% {
      opacity: .3;
      transform: scaleY(.5)
   }

   100% {
      opacity: 1;
      transform: scaleY(1)
   }
}

/* ══════════════════════════════
   SECTION HEADERS
   ══════════════════════════════ */
.section-header {
   text-align: center;
   margin-bottom: 64px
}

.section-tag {
   display: inline-block;
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: var(--gold);
   margin-bottom: 16px;
   position: relative;
   padding-left: 28px
}

.section-tag::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   width: 18px;
   height: 1px;
   background: var(--gold)
}

.section-title {
   font-size: clamp(2rem, 4vw, 3.2rem);
   font-weight: 900;
   margin-bottom: 16px
}

.section-title.left {
   text-align: left
}

.section-desc{color:var(--gray);font-size:1.05rem;max-width:700px;margin:0 auto;text-wrap: balance}
.gold-highlight{color:var(--gold);font-weight:900;display:block;margin-top:12px;font-size:1.15rem}

/* ══════════════════════════════
   PROBLEM SECTION
   ══════════════════════════════ */
.section-problem {
   background: var(--bg)
}

.problem-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px
}

.problem-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 40px 32px;
   position: relative;
   transition: all .4s var(--ease);
   overflow: hidden
}

.problem-card:hover {
   border-color: var(--gold-20);
   transform: translateY(-4px)
}

.problem-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--gold), transparent);
   opacity: 0;
   transition: opacity .4s
}

.problem-card:hover::after {
   opacity: 1
}

.pc-number {
   position: absolute;
   top: 24px;
   right: 24px;
   font-family: var(--ff-d);
   font-size: 3.5rem;
   font-weight: 900;
   color: rgba(255, 255, 255, .03);
   line-height: 1
}

.pc-icon {
   font-size: 2rem;
   margin-bottom: 20px
}

.problem-card h3 {
   font-size: 1.2rem;
   margin-bottom: 12px;
   font-weight: 800
}

.problem-card p {
   color: var(--gray);
   font-size: .95rem
}

/* ══════════════════════════════
   SOLUTION SECTION
   ══════════════════════════════ */
.section-solution {
   background: var(--bg-2)
}

.solution-layout {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 80px;
   align-items: center
}

.sol-img-container {
   position: relative;
   display: flex;
   justify-content: center
}

.sol-img-container img {
   max-height: 500px;
   width: auto;
   position: relative;
   z-index: 1
}

.sol-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 60%;
   height: 60%;
   background: radial-gradient(circle, var(--gold-10) 0%, transparent 70%);
   transform: translate(-50%, -50%);
   z-index: 0;
   filter: blur(40px)
}

.solution-lead {
   color: var(--gray-l);
   font-size: 1.1rem;
   margin-bottom: 32px;
   line-height: 1.75
}

.check-list {
   list-style: none;
   margin-bottom: 36px
}

.check-list li {
   display: flex;
   gap: 16px;
   margin-bottom: 24px;
   align-items: flex-start
}

.check-icon {
   font-size: 1.3rem;
   flex-shrink: 0;
   margin-top: 2px
}

.check-list li strong {
   display: block;
   font-size: 1rem;
   margin-bottom: 4px
}

.check-list li span {
   color: var(--gray);
   font-size: .9rem
}

/* ══════════════════════════════
   PRODUCTS SECTION
   ══════════════════════════════ */
.section-products {
   background: var(--bg)
}

.products-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 32px
}

.product-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 40px 24px;
   text-align: center;
   transition: all .4s var(--ease);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   overflow: hidden
}

.product-card:hover {
   border-color: var(--gold-20);
   transform: translateY(-6px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4)
}

.product-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--gold-20), transparent);
   opacity: 0;
   transition: opacity .4s
}

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

.product-img {
   width: 200px;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   position: relative
}

.product-img::after {
   content: '';
   position: absolute;
   width: 120px;
   height: 120px;
   background: var(--gold-10);
   border-radius: 50%;
   z-index: 0;
   filter: blur(30px)
}

.product-img img {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   position: relative;
   z-index: 1;
   filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
   transition: transform .5s var(--ease)
}

.product-card:hover .product-img img {
   transform: scale(1.08) translateY(-5px)
}

.product-card h3 {
   font-size: 1.4rem;
   font-weight: 800;
   margin-bottom: 12px;
   color: var(--white)
}

.product-card p {
   color: var(--gray-l);
   font-size: .95rem;
   line-height: 1.6
}

/* ══════════════════════════════
   AUTHORITY SECTION
   ══════════════════════════════ */
.section-authority {
   background: var(--bg)
}

.auth-layout {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: 80px;
   align-items: center
}

.auth-role {
   color: var(--gold);
   font-size: .9rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 20px
}

.auth-bio {
   color: var(--gray-l);
   font-size: 1.05rem;
   margin-bottom: 16px;
   line-height: 1.75
}

.auth-credentials {
   display: flex;
   gap: 32px;
   margin-top: 32px;
   padding-top: 32px;
   border-top: 1px solid var(--border)
}

.cred strong {
   font-family: var(--ff-d);
   font-size: 1.8rem;
   color: var(--gold);
   display: block;
   line-height: 1
}

.cred span {
   font-size: .75rem;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
   display: block
}

.auth-photo {
   position: relative;
   display: flex;
   justify-content: center
}

.auth-photo img {
   width: clamp(250px, 100%, 380px);
   border-radius: 16px;
   position: relative;
   z-index: 1
}

.auth-photo-border {
   position: absolute;
   inset: -8px;
   border-radius: 20px;
   border: 1px solid var(--gold-20);
   z-index: 0
}

/* ══════════════════════════════
   SYSTEM S.T.S SECTION
   ══════════════════════════════ */
.section-system {
   background: var(--bg-2)
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   position: relative
}

.step-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 48px 32px 40px;
   text-align: center;
   position: relative;
   transition: all .4s var(--ease)
}

.step-card:hover {
   border-color: var(--gold-20);
   transform: translateY(-4px)
}

.step-line {
   position: absolute;
   top: 0;
   left: 50%;
   width: 1px;
   height: 20px;
   background: var(--gold);
   transform: translateX(-50%);
   margin-top: -20px
}

.step-card:first-child .step-line {
   display: none
}

.step-num-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--gold-10);
   border: 1px solid var(--gold-20);
   font-family: var(--ff-d);
   font-weight: 900;
   font-size: 1rem;
   color: var(--gold);
   margin-bottom: 24px
}

.step-card h3 {
   font-size: 1.3rem;
   font-weight: 800;
   margin-bottom: 12px
}

.step-card p {
   color: var(--gray);
   font-size: .92rem
}

/* ══════════════════════════════
   BLOG PROMO SECTION
   ══════════════════════════════ */
.section-blog-promo {
   background: var(--bg-card);
   position: relative;
   overflow: hidden;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

.blog-promo-layout {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 60px;
   align-items: center;
}

.bp-desc {
   color: var(--gray-l);
   font-size: 1.1rem;
   margin-bottom: 32px;
   line-height: 1.75;
}

.bp-visual {
   display: flex;
   justify-content: center;
   position: relative;
}

.bp-img-wrapper {
   position: relative;
   width: 100%;
   max-width: 280px;
}

.bp-img-wrapper img {
   width: 100%;
   border-radius: 8px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
   position: relative;
   z-index: 2;
   transition: transform 0.5s var(--ease);
}

.bp-img-wrapper:hover img {
   transform: translateY(-8px);
}

.bp-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle, var(--gold-20) 0%, transparent 60%);
   transform: translate(-50%, -50%);
   z-index: 1;
   filter: blur(40px);
}

/* ══════════════════════════════
   PROOF / STATS SECTION
   ══════════════════════════════ */
.section-proof {
   background: var(--black);
   padding: 100px 0;
   overflow: hidden;
   position: relative
}

.proof-bg {
   position: absolute;
   inset: 0;
   opacity: .15
}

.proof-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.proof-grid {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 60px;
   position: relative;
   z-index: 1
}

.proof-stat {
   text-align: center
}

.proof-num {
   font-family: var(--ff-d);
   font-size: clamp(3rem, 6vw, 5rem);
   font-weight: 900;
   color: var(--gold);
   line-height: 1
}

.proof-label {
   font-size: .82rem;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-top: 8px;
   line-height: 1.5
}

.proof-divider {
   width: 1px;
   height: 60px;
   background: var(--border)
}

/* ══════════════════════════════
   CONVERSION / QUIZ
   ══════════════════════════════ */
.section-conversion {
   background: linear-gradient(180deg, var(--bg) 0%, var(--black) 100%);
   padding-bottom: 140px
}

.quiz-box {
   max-width: 580px;
   margin: 0 auto;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 48px 40px;
   position: relative;
   overflow: hidden
}

.quiz-box::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--gold-20), transparent)
}

.quiz-progress {
   height: 3px;
   background: var(--border);
   border-radius: 3px;
   margin-bottom: 36px;
   overflow: hidden
}

.quiz-progress-bar {
   height: 100%;
   width: 33.33%;
   background: var(--gold);
   border-radius: 3px;
   transition: width .5s var(--ease)
}

.quiz-step {
   display: none;
   animation: quizIn .45s var(--ease) forwards
}

.quiz-step.active {
   display: block
}

@keyframes quizIn {
   from {
      opacity: 0;
      transform: translateX(20px)
   }

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

.quiz-q {
   font-size: 1.35rem;
   font-weight: 800;
   margin-bottom: 28px;
   text-align: center
}

.quiz-opts {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.quiz-opt {
   display: flex;
   align-items: center;
   gap: 14px;
   background: transparent;
   border: 1px solid var(--border);
   padding: 18px 20px;
   border-radius: 8px;
   font-size: 1rem;
   text-align: left;
   transition: all .3s var(--ease);
   width: 100%
}

.quiz-opt:hover {
   border-color: var(--gold);
   background: var(--gold-05)
}

.qo-icon {
   font-size: 1.3rem;
   flex-shrink: 0
}

/* CTA Final */
.cta-final {
   text-align: center
}

.cta-check-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--gold);
   color: #000;
   font-size: 2rem;
   font-weight: 900;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   animation: scaleIn .5s var(--ease-spring)
}

@keyframes scaleIn {
   from {
      transform: scale(0)
   }

   to {
      transform: scale(1)
   }
}

.cta-desc {
   color: var(--gray-l);
   font-size: 1.05rem;
   margin-bottom: 32px;
   max-width: 420px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.7
}

.cta-scarcity {
   margin-top: 20px;
   font-size: .85rem;
   color: var(--gold);
   font-weight: 600
}

/* ══════════════════════════════
   PREMIUM EDITORIAL FOOTER
   ══════════════════════════════ */
.footer {
   background: var(--bg);
   padding: 100px 0 0 0;
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer .container {
   display: flex;
   flex-direction: column;
}

.footer-grid-top {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 80px;
   margin-bottom: 100px;
}

.footer-bio {
   color: var(--gray-light);
   font-size: 1.25rem;
   line-height: 1.6;
   max-width: 450px;
   margin-bottom: 30px;
   font-weight: 500;
}

.footer-email {
   font-family: var(--ff-heading);
   font-size: 1.5rem;
   color: var(--white);
   text-decoration: none;
   position: relative;
   display: inline-block;
   transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
}

.footer-email::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 0%;
   height: 2px;
   background: var(--gold);
   transition: width 0.5s cubic-bezier(0.32,0.72,0,1);
}

.footer-email:hover::after {
   width: 100%;
}

.footer-eyebrow {
   display: inline-block;
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--gray);
   margin-bottom: 25px;
   font-weight: 600;
}

.footer-col-links ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-col-links li {
   margin-bottom: 15px;
}

.footer-col-links a {
   color: var(--white);
   font-size: 1.05rem;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.4s cubic-bezier(0.32,0.72,0,1), transform 0.4s cubic-bezier(0.32,0.72,0,1);
   display: flex;
   align-items: center;
   gap: 10px;
   width: fit-content;
}

.footer-col-links a:hover {
   color: var(--gold);
   transform: translateX(5px);
}

.footer-bottom-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 40px;
}

.footer-legal, .footer-location {
   display: flex;
   gap: 30px;
   color: var(--gray);
   font-size: 0.85rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.footer-legal a {
   color: var(--gray);
   transition: color 0.3s ease;
}

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

.footer-huge-text {
   font-family: var(--ff-heading);
   font-size: clamp(3rem, 11vw, 12rem);
   font-weight: 900;
   color: rgba(255, 255, 255, 0.03);
   text-transform: uppercase;
   line-height: 0.8;
   margin: 0;
   text-align: center;
   letter-spacing: -0.04em;
   white-space: nowrap;
   user-select: none;
   transition: color 0.5s ease;
}

.footer-huge-text:hover {
   color: rgba(245, 197, 24, 0.08); /* slight gold glow on hover */
}

@media (max-width: 992px) {
   .footer-grid-top {
      grid-template-columns: 1fr;
      gap: 50px;
   }
   .footer-bottom-bar {
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
   }
   .footer-huge-text {
      font-size: clamp(2.5rem, 13vw, 8rem);
      margin-bottom: 20px;
   }
}

/* ══════════════════════════════
   WHATSAPP FAB
   ══════════════════════════════ */
.fab-wa {
   position: fixed;
   bottom: 28px;
   right: 28px;
   width: 58px;
   height: 58px;
   background: #25D366;
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 990;
   box-shadow: 0 6px 24px rgba(37, 211, 102, .35);
   transition: transform .35s var(--ease-spring)
}

.fab-wa:hover {
   transform: scale(1.12)
}

.fab-pulse {
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid #25D366;
   animation: fabPulse 2s infinite
}

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

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

/* ══════════════════════════════
   RESPONSIVE
   ══════════════════════════════ */
@media(max-width:960px) {
   .section {
      padding: 100px 0
   }

   .hero-grid {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 40px
   }

   .hero-content {
      order: 2;
      display: flex;
      flex-direction: column;
      align-items: center
   }

   .hero-visual {
      order: 1;
      margin-bottom: 20px
   }

   .hero-sub {
      margin-left: auto;
      margin-right: auto
   }

   .hero-cta {
      justify-content: center
   }

   .hero-float-card {
      display: none
   }

   .solution-layout {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 40px
   }

   .solution-media {
      order: 1
   }

   .solution-content {
      order: 2
   }

   .section-title.left {
      text-align: center
   }

   .section-tag {
      display: block;
      text-align: center;
      padding-left: 0
   }

   .section-tag::before {
      display: none
   }

   .check-list li {
      justify-content: center;
      text-align: left
   }

   .solution-content .btn-primary {
      margin: 0 auto
   }

   .auth-layout {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 40px
   }

   .auth-photo {
      order: -1;
      margin-bottom: 20px
   }

   .blog-promo-layout {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 40px;
   }

   .section-blog-promo .bp-visual {
      order: -1;
      margin-bottom: 20px;
   }

   .auth-credentials {
      justify-content: center
   }

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

   .step-line {
      display: none !important
   }

   .proof-grid {
      flex-direction: column;
      gap: 40px
   }

   .proof-divider {
      width: 40px;
      height: 1px
   }

   .footer-inner {
      flex-direction: column;
      gap: 12px;
      text-align: center
   }
}

@media(max-width:480px) {
   .section {
      padding: 80px 0
   }

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

   .hero-title {
      font-size: 2.2rem
   }

   .btn-primary {
      padding: 14px 24px;
      font-size: .88rem
   }

   .quiz-box {
      padding: 32px 20px
   }

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

   .bezel-outer {
      padding: 6px
   }
}