html {
     scroll-behavior: smooth
 }

 body {
     background: var(--dark);
     color: var(--text);
     font-family: 'DM Sans', sans-serif;
     font-size: 16px;
     line-height: 1.7;
     overflow-x: hidden;
     cursor: none
 }

 #cursor {
     width: 10px;
     height: 10px;
     background: var(--theme-light);
     border-radius: 50%;
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9999;
     transition: transform .1s;
     mix-blend-mode: screen
 }

 #cursor-ring {
     width: 36px;
     height: 36px;
     border: 1px solid var(--theme-light);
     border-radius: 50%;
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9998;
     transition: all .18s cubic-bezier(.25, .46, .45, .94);
     opacity: .5
 }

 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     opacity: .025;
     pointer-events: none;
     z-index: 9990
 }

 ::-webkit-scrollbar {
     width: 3px
 }

 ::-webkit-scrollbar-track {
     background: var(--dark)
 }

 ::-webkit-scrollbar-thumb {
     background: var(--theme)
 }

 /* ══ NAV ══ */
 #navbar nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     padding: 0 5vw;
     height: 72px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid transparent;
     transition: all .4s;
     backdrop-filter: blur(0px)
 }

 #navbar nav.scrolled {
     background: rgba(8, 6, 16, .9);
     border-color: var(--border);
     backdrop-filter: blur(20px)
 }


 
 .nav-links {
     display: flex;
     gap: 2.5rem;
     list-style: none
 }

 .nav-links a {
     color: var(--text-dim);
     text-decoration: none;
     font-size: .82rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     position: relative;
     padding-bottom: 3px;
     transition: color .3s
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--theme-light);
     transition: width .35s cubic-bezier(.25, .46, .45, .94)
 }

 .nav-links a:hover {
     color: var(--text)
 }

 .nav-links a:hover::after {
     width: 100%
 }

 .nav-links .nav-cta {
     background: var(--theme);
     color: var(--text) !important;
      padding: 13px 25px !important;
  border-radius: 8px; 
  font-size: .8em !important;
     transition: background .3s, box-shadow .3s !important
 }

 .nav-links .nav-cta::after {
     display: none !important
 }

 .nav-links .nav-cta:hover {
     background: var(--theme-light) !important;
     box-shadow: 0 0 24px var(--theme-glow)
 }

 .float-btns {
     position: fixed;
     right: 1.6rem;
     bottom: 2rem;
     display: flex;
     flex-direction: column;
     gap: .85rem;
     z-index: 2000
 }

 .float-btn {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: none;
     border: none;
     transition: transform .3s, box-shadow .3s, opacity .3s, background .3s
 }

 .float-wa {
     background: #25D366;
     box-shadow: 0 4px 18px rgba(37, 211, 102, .3);
     text-decoration: none
 }

 .float-wa:hover {
     transform: scale(1.12);
     box-shadow: 0 6px 28px rgba(37, 211, 102, .5)
 }

 .float-top {
     background: var(--surface);
     border: 1px solid var(--border);
     box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
     opacity: 0;
     pointer-events: none
 }

 .float-top.visible {
     opacity: 1;
     pointer-events: auto
 }

 .float-top:hover {
     background: var(--theme);
     border-color: var(--theme-light);
     box-shadow: 0 0 22px var(--theme-glow)
 }

 .float-top.bounce {
     animation: arrowBounce .5s cubic-bezier(.34, 1.56, .64, 1)
 }

 @keyframes arrowBounce {
     0% {
         transform: translateY(0)
     }

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

     60% {
         transform: translateY(4px)
     }

     80% {
         transform: translateY(-5px)
     }

     100% {
         transform: translateY(0)
     }
 }

 #particles-canvas {
     position: absolute;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     width: 100%;
     height: 100%
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(139, 34, 82, .18) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(139, 34, 82, .1) 0%, transparent 60%), linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%);
     z-index: 0
 }

 .hero-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(139, 34, 82, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 34, 82, .06) 1px, transparent 1px);
     background-size: 80px 80px;
     mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 0%, transparent 70%);
     z-index: 0
 }

 .hero-geo {
     position: absolute;
     right: 10vw;
     top: 40%;
     transform: translateY(-50%);
     z-index: 0;
     opacity: .2;
     pointer-events: none;
     animation: geoSpin 80s linear infinite
 }

 @keyframes geoSpin {
     from {
         transform: translateY(-50%) rotate(0)
     }

     to {
         transform: translateY(-50%) rotate(360deg)
     }
 }

 .orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     pointer-events: none;
     z-index: 0;
     animation: orbFloat linear infinite
 }

 .orb-1 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(139, 34, 82, .22) 0%, transparent 70%);
     top: -100px;
     right: -100px;
     animation-duration: 20s
 }

 .orb-2 {
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(212, 168, 83, .12) 0%, transparent 70%);
     bottom: 10%;
     left: 5%;
     animation-duration: 25s;
     animation-delay: -10s
 }

 @keyframes orbFloat {

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

     33% {
         transform: translate(30px, -20px) scale(1.05)
     }

     66% {
         transform: translate(-20px, 15px) scale(.95)
     }
 }

 /* ── PAGE HERO ── */
 .page-hero {
     min-height: 60vh;
     display: flex;
     align-items: center;
     padding: 100px 10% 2% 10%;
     position: relative;
     overflow: hidden
 }

 .page-hero-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 55% 70% at 80% 50%, rgba(139, 34, 82, .16) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 10% 80%, rgba(139, 34, 82, .08) 0%, transparent 60%), linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%);
     z-index: 0
 }

 .page-hero-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(139, 34, 82, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 34, 82, .05) 1px, transparent 1px);
     background-size: 80px 80px;
     mask-image: radial-gradient(ellipse 80% 80% at 70% 40%, black, transparent 70%);
     z-index: 0
 }

 .hero-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     pointer-events: none;
     z-index: 0;
     animation: orbFloat linear infinite
 }

 .hero-orb-1 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(139, 34, 82, .2) 0%, transparent 70%);
     top: -100px;
     right: -100px;
     animation-duration: 22s
 }

 .hero-orb-2 {
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, rgba(212, 168, 83, .1) 0%, transparent 70%);
     bottom: 0;
     left: 5%;
     animation-duration: 28s;
     animation-delay: -12s
 }

 @keyframes orbFloat {

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

     33% {
         transform: translate(25px, -18px) scale(1.04)
     }

     66% {
         transform: translate(-18px, 12px) scale(.96)
     }
 }

 .page-hero-geo {
     position: absolute;
     right: 5vw;
     top: 50%;
     transform: translateY(-50%);
     opacity: .12;
     pointer-events: none;
     animation: geoSpin 90s linear infinite
 }

 @keyframes geoSpin {
     from {
         transform: translateY(-50%) rotate(0)
     }

     to {
         transform: translateY(-50%) rotate(360deg)
     }
 }

 .page-hero-content {
     position: relative;
     z-index: 1;
     max-width: 1300px
 }

 .breadcrumb {
     font-size: .9em;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--text-faint);
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 0em;
     opacity: 0;
     animation: fadeUp .7s ease .1s forwards
 }

 .breadcrumb a {
     color: var(--theme-light);
     text-decoration: none;
     transition: color .3s
 }

 .breadcrumb a:hover {
     color: var(--text)
 }

 .breadcrumb span {
     color: var(--text-faint)
 }

 .page-hero h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(3rem, 7vw, 5.5rem);
     font-weight: 900;
     line-height: 1;
     letter-spacing: -.02em;
     opacity: 0;
     animation: fadeUp .9s ease .2s forwards
 }

 .page-hero h1 em {
     font-style: italic;
     color: var(--theme-light)
 }

 .page-hero h1 .stroke {
     -webkit-text-stroke: 1px var(--text-dim);
     color: transparent
 }

 .page-hero-sub {
     font-size: 1.05rem;
     color: var(--text-dim);
     max-width: 560px;
     margin-top: 1.8rem;
     font-weight: 300;
     line-height: 1.85;
     opacity: 0;
     animation: fadeUp .9s ease .4s forwards
 }

 .page-hero-pills {
     display: flex;
     gap: .8rem;
     flex-wrap: wrap;
     margin-top: 2rem;
     opacity: 0;
     animation: fadeUp .9s ease .6s forwards
 }

 .hero-pill {
     font-size: .9em;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 7px 16px;
     border: 1px solid var(--border);
     border-radius: 20px;
     color: var(--text-dim);
     background: var(--theme-faint)
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(28px)
     }

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

 /* ── SECTION BASE ── */
 

 /* MARQUEE */
 .marquee-section {
     padding: 2em 0;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     background: var(--dark3);
     overflow: hidden
 }

 .marquee-track {
     display: flex;
     gap: 4rem;
     animation: marqueeScroll 25s linear infinite;
     white-space: nowrap
 }

 .marquee-track:hover {
     animation-play-state: paused
 }

 @keyframes marqueeScroll {
     from {
         transform: translateX(0)
     }

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

 .marquee-item {
     font-size: 2em;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--text-faint);
     display: flex;
     align-items: center;
     gap: 1.5rem;
     flex-shrink: 0
 }

 .mdot {
     color: var(--theme-light)
 }