/* ===================================================
   RXF GROWTH PARTNERS — design tokens
=================================================== */
:root{
  --navy-deep:   #080e1f;
  --navy-mid:    #0c1830;
  --navy-panel:  #10203f;
  --navy-panel-2:#152a4f;
  --line:        rgba(212,175,55,0.16);
  --line-soft:   rgba(255,255,255,0.08);

  --gold:        #d4af37;
  --gold-light:  #f0d78c;
  --gold-deep:   #a8842e;
  --gold-grad:   linear-gradient(120deg, #a8842e 0%, #d4af37 45%, #f0d78c 100%);

  --white:       #f5f4f0;
  --slate:       #a9b2c6;
  --slate-dim:   #6f7891;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--navy-deep);
  color: var(--white);
  font-family: var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:700; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; }

.gold-text{
  background: var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:0.72rem;
  font-weight:700;
  color: var(--gold-light);
  margin:0 0 14px;
}

/* ===================================================
   BUTTONS
=================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:6px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-gold{
  background: var(--gold-grad);
  color: #16131a;
  box-shadow: 0 8px 24px -8px rgba(212,175,55,0.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow: 0 12px 28px -8px rgba(212,175,55,0.7); }
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color: var(--line-soft);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); }
.btn-outline-gold{
  background:transparent;
  color: var(--gold-light);
  border-color: var(--gold-deep);
  width:100%;
  justify-content:center;
}
.btn-outline-gold:hover{ background:rgba(212,175,55,0.1); }
.btn-lg{ padding:18px 36px; font-size:1.05rem; }
.wa-icon{ width:18px; height:18px; }

/* ===================================================
   NAV
=================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(8,14,31,0.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width: var(--container);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.4rem;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:0.02em;
}
.brand-full{
  font-size:0.68rem;
  letter-spacing:0.22em;
  color:var(--slate);
  font-weight:600;
}
.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:0.9rem; font-weight:500; color:var(--slate);
  transition:color .15s;
}
.nav-links a:hover{ color:var(--gold-light); }
.nav-cta{
  background:var(--gold-grad);
  color:#16131a;
  font-weight:700;
  font-size:0.85rem;
  padding:10px 18px;
  border-radius:5px;
}

/* ===================================================
   HERO + GLOBE
=================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:120px 24px 80px;
  background:
    radial-gradient(ellipse 80% 60% at 75% 30%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, #0a132a 100%);
}
#globe{
  position:absolute;
  top:50%; right:-6%;
  transform:translateY(-50%);
  width:min(62vw, 780px);
  height:min(62vw, 780px);
  opacity:0.9;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width: var(--container);
  margin:0 auto;
  width:100%;
}
.hero-title{
  font-size:clamp(2.6rem, 6.2vw, 5.2rem);
  line-height:1.03;
  font-weight:700;
  max-width:11ch;
}
.hero-title em{
  font-style:italic;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin-top:26px;
  max-width:520px;
  color:var(--slate);
  font-size:1.05rem;
}
.hero-actions{
  margin-top:40px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--line-soft); border-radius:14px;
  z-index:2;
}
.scroll-hint span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:var(--gold-light);
  animation: scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:24px; }
  100%{ opacity:0; top:24px; }
}

/* ===================================================
   ABOUT STRIP
=================================================== */
.about{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--navy-mid);
}
.about-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:64px 24px;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:50px;
  align-items:center;
}
.about-lede{
  font-size:1.3rem;
  font-family:var(--font-display);
  font-weight:500;
  color:var(--white);
  line-height:1.5;
}
.about-stats{
  display:flex;
  gap:32px;
}
.stat{ display:flex; flex-direction:column; }
.stat-num{
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:700;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{
  font-size:0.78rem;
  color:var(--slate-dim);
  letter-spacing:0.04em;
  margin-top:4px;
}

/* ===================================================
   SECTION HEAD (shared)
=================================================== */
.section-head{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  text-align:center;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
}
.section-sub{
  margin-top:14px;
  color:var(--slate);
  max-width:560px;
  margin-left:auto; margin-right:auto;
}

/* ===================================================
   SERVICES
=================================================== */
.services{ padding:110px 0 100px; }
.services-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:20px;
}
.service-card{
  background:var(--navy-panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px 26px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-deep);
  background:var(--navy-panel-2);
}
.service-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(212,175,55,0.1);
  border:1px solid var(--line);
  color:var(--gold-light);
  font-size:1.2rem;
  margin-bottom:18px;
}
.service-card h3{
  font-size:1.08rem;
  margin-bottom:14px;
  line-height:1.3;
}
.service-card ul li{
  font-size:0.88rem;
  color:var(--slate);
  padding:5px 0;
  padding-left:16px;
  position:relative;
}
.service-card ul li::before{
  content:'';
  position:absolute;
  left:0; top:13px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
}

/* ===================================================
   PACKAGES
=================================================== */
.packages{
  padding:100px 0 90px;
  background:var(--navy-mid);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.packages-grid{
  max-width:900px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.package-card{
  position:relative;
  background:var(--navy-panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:38px 32px;
  display:flex;
  flex-direction:column;
}
.package-card--featured{
  border-color:var(--gold);
  background:linear-gradient(180deg, var(--navy-panel-2), var(--navy-panel));
  box-shadow:0 20px 50px -20px rgba(212,175,55,0.35);
}
.package-badge{
  position:absolute; top:-14px; left:32px;
  background:var(--gold-grad);
  color:#16131a;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
}
.package-top h3{ font-size:1.4rem; }
.package-tag{
  color:var(--slate-dim);
  font-size:0.85rem;
  margin-top:6px;
}
.package-price{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:700;
  color:var(--gold-light);
  margin:22px 0 26px;
}
.package-price .currency{
  font-size:1.4rem;
  vertical-align:top;
  margin-right:2px;
  color:var(--slate);
}
.package-features{
  flex:1;
  margin-bottom:28px;
}
.package-features li{
  font-size:0.92rem;
  color:var(--slate);
  padding:9px 0;
  padding-left:24px;
  position:relative;
  border-top:1px solid var(--line-soft);
}
.package-features li:first-child{ border-top:none; }
.package-features li::before{
  content:'✓';
  position:absolute; left:0; top:9px;
  color:var(--gold);
  font-weight:700;
  font-size:0.85rem;
}
.package-note{
  text-align:center;
  color:var(--slate-dim);
  font-size:0.85rem;
  max-width:600px;
  margin:36px auto 0;
  padding:0 24px;
}

/* ===================================================
   CTA BAND
=================================================== */
.cta-band{
  padding:110px 24px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(212,175,55,0.12), transparent 60%),
    var(--navy-deep);
}
.cta-band h2{
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom:40px;
  line-height:1.25;
}

/* ===================================================
   FOOTER
=================================================== */
.footer{
  border-top:1px solid var(--line-soft);
  background:#060b18;
}
.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:64px 24px 40px;
  display:grid;
  grid-template-columns:1fr 1.3fr auto;
  gap:40px;
  align-items:start;
}
.footer-brand{ display:flex; flex-direction:column; gap:2px; }
.footer-brand .brand-full{ margin-top:2px; }
.footer-tagline{
  margin-top:14px;
  color:var(--slate-dim);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.footer-info{ display:flex; flex-direction:column; gap:14px; }
.footer-row{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--slate);
  font-size:0.94rem;
}
.footer-row:is(a):hover{ color:var(--gold-light); }
.footer-ico{
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light);
  flex-shrink:0;
  font-size:0.85rem;
}
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding:22px 24px;
  text-align:center;
  color:var(--slate-dim);
  font-size:0.8rem;
}

/* ===================================================
   FLOATING WHATSAPP BUTTON
=================================================== */
.wa-float{
  position:fixed;
  bottom:24px; right:24px;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--gold-grad);
  display:flex; align-items:center; justify-content:center;
  color:#16131a;
  box-shadow:0 10px 30px -8px rgba(212,175,55,0.6);
  z-index:200;
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width:900px){
  .nav-links{ display:none; }
  .about-inner{ grid-template-columns:1fr; gap:32px; }
  .about-stats{ gap:24px; }
  #globe{ opacity:0.35; width:100vw; height:100vw; right:50%; transform:translate(50%,-50%); }
  .hero{ padding-top:130px; text-align:left; }
  .packages-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:520px){
  .hero-title{ font-size:2.4rem; }
  .btn-lg{ width:100%; justify-content:center; }
  .cta-band .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-hint span{ animation:none; }
}