/*
Theme Name: Safarelite-Child
Theme URI: https://safarelite.com
Description: Premium Luxury Affiliate Theme for Safarelite.com
Author: Safarelite
Author URI: https://safarelite.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: safarelite
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500;600&display=swap');

:root {
  --black: #0a0a0a;
  --black-card: #1a1a1a;
  --black-hover: #222222;
  --gold: #c9a84c;
  --gold-light: #e2c27d;
  --pearl: #f9f6f0;
  --white: #ffffff;
  --grey-soft: #888888;
  --grey-mid: #555555;
  --grey-border: #2a2a2a;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', sans-serif;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--pearl);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--black); }
a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--white); }
p { font-size: .93rem; color: var(--grey-soft); }

#cur { width:10px; height:10px; background:var(--gold); border-radius:50%; position:fixed; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:transform .15s; }
#cur-ring { width:34px; height:34px; border:1px solid rgba(201,168,76,.4); border-radius:50%; position:fixed; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition:width .3s,height .3s; }

#hdr { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 4vw; height:70px; display:flex; align-items:center; justify-content:space-between; transition:background var(--transition),border-bottom var(--transition); border-bottom:1px solid transparent; }
#hdr.scrolled { background:rgba(10,10,10,.96); backdrop-filter:blur(20px); border-bottom-color:rgba(201,168,76,.15); }
.logo { text-decoration:none; }
.logo-n { font-family:var(--font-display); font-size:1.6rem; font-weight:500; letter-spacing:.12em; color:var(--white); text-transform:uppercase; display:block; }
.logo-n span { color:var(--gold); }
.logo-s { font-size:.52rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; display:block; margin-top:-5px; }
nav { display:flex; align-items:center; gap:2rem; }
nav a { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-soft); position:relative; padding-bottom:4px; }
nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:width var(--transition); }
nav a:hover { color:var(--gold); }
nav a:hover::after { width:100%; }
.langs { display:flex; gap:.2rem; margin-left:1.5rem; padding-left:1.5rem; border-left:1px solid var(--grey-border); }
.langs button { background:none; border:none; font-family:var(--font-body); font-size:.62rem; letter-spacing:.15em; color:var(--grey-soft); padding:4px 5px; border-radius:3px; transition:all var(--transition); }
.langs button:hover, .langs button.active { color:var(--gold); background:rgba(201,168,76,.08); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.hamburger span { display:block; width:22px; height:1px; background:var(--gold); transition:all var(--transition); }

#hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(201,168,76,.06),transparent 70%),radial-gradient(ellipse 40% 40% at 80% 20%,rgba(201,168,76,.04),transparent 60%); }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px); background-size:80px 80px; }
.hero-c { position:relative; z-index:2; text-align:center; padding:0 4vw; max-width:920px; }
.eyebrow { font-size:.64rem; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:2rem; opacity:0; animation:fu .8s .2s forwards; }
.hero-t { font-size:clamp(3.2rem,8vw,7rem); font-weight:300; margin-bottom:1.5rem; opacity:0; animation:fu .9s .4s forwards; }
.hero-t em { font-style:italic; color:var(--gold); }
.hero-sub { font-size:clamp(.85rem,1.4vw,.95rem); font-weight:300; color:var(--grey-soft); max-width:520px; margin:0 auto 3rem; opacity:0; animation:fu .9s .6s forwards; }
.cta-g { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:fu .9s .8s forwards; }
.btn-g { display:inline-flex; align-items:center; gap:8px; padding:13px 36px; background:var(--gold); color:var(--black); font-family:var(--font-body); font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; border:none; position:relative; overflow:hidden; transition:transform var(--transition),box-shadow var(--transition); }
.btn-g::before { content:''; position:absolute; inset:0; background:var(--gold-light); transform:translateX(-100%); transition:transform var(--transition); }
.btn-g:hover { color:var(--black); transform:translateY(-2px); box-shadow:0 12px 36px rgba(201,168,76,.3); }
.btn-g:hover::before { transform:translateX(0); }
.btn-g > * { position:relative; z-index:1; }
.btn-o { display:inline-flex; align-items:center; gap:8px; padding:12px 36px; background:transparent; color:var(--pearl); font-family:var(--font-body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; border:1px solid rgba(201,168,76,.4); transition:all var(--transition); }
.btn-o:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,.05); transform:translateY(-2px); }
.hero-stats { position:absolute; bottom:4rem; left:4vw; right:4vw; display:flex; justify-content:space-around; opacity:0; animation:fu 1s 1s forwards; }
.sn { font-family:var(--font-display); font-size:2rem; font-weight:500; color:var(--gold); display:block; }
.sl { font-size:.6rem; letter-spacing:.2em; color:var(--grey-mid); text-transform:uppercase; display:block; margin-top:3px; }
.scroll-i { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fu 1s 1.2s forwards; }
.scroll-i span { font-size:.56rem; letter-spacing:.3em; color:var(--grey-mid); text-transform:uppercase; }
.scroll-l { width:1px; height:46px; background:linear-gradient(to bottom,var(--gold),transparent); animation:sp 2s ease-in-out infinite; }

.marquee { background:var(--gold); padding:12px 0; overflow:hidden; white-space:nowrap; }
.mtrack { display:inline-flex; animation:mq 28s linear infinite; }
.mi { display:inline-flex; align-items:center; gap:1.5rem; padding:0 2rem; font-size:.64rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase; color:var(--black); }
.md { width:4px; height:4px; background:rgba(0,0,0,.3); border-radius:50%; display:inline-block; }

section { padding:7rem 4vw; }
.eyebrow-s { font-size:.62rem; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:.9rem; }
.s-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.4rem); font-weight:300; margin-bottom:.4rem; }
.s-title em { font-style:italic; color:var(--gold); }
.s-desc { font-size:.9rem; color:var(--grey-soft); line-height:1.8; max-width:520px; }
.divider { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:1.5rem auto; }
.divider-l { margin:1.5rem 0; }
.center { text-align:center; }
.center .s-desc { margin:0 auto; }

#cats-sec { background:#0f0f0f; position:relative; }
#cats-sec::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; background:var(--grey-border); border:1.5px solid var(--grey-border); }
.cat-card { position:relative; background:var(--black-card); padding:2.5rem 2rem; display:flex; flex-direction:column; gap:1rem; overflow:hidden; transition:background var(--transition); text-decoration:none; }
.cat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,.06),transparent 60%); opacity:0; transition:opacity var(--transition); }
.cat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.cat-card:hover { background:var(--black-hover); }
.cat-card:hover::before { opacity:1; }
.cat-card:hover::after { transform:scaleX(1); }
.cat-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,168,76,.25); border-radius:4px; transition:all var(--transition); }
.cat-card:hover .cat-ico { border-color:var(--gold); background:rgba(201,168,76,.08); }
.cat-ico svg { width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.5; }
.cat-nm { font-family:var(--font-display); font-size:1.2rem; color:var(--white); transition:color var(--transition); }
.cat-card:hover .cat-nm { color:var(--gold); }
.cat-cnt { font-size:.63rem; letter-spacing:.2em; color:var(--grey-mid); text-transform:uppercase; }
.cat-arr { position:absolute; top:2.5rem; right:2rem; opacity:0; transform:translate(-8px,8px); transition:all var(--transition); }
.cat-card:hover .cat-arr { opacity:1; transform:translate(0,0); }
.cat-arr svg { width:13px; height:13px; stroke:var(--gold); fill:none; }

#feat { background:var(--black); }
.l-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.l-card { background:var(--black-card); border:1px solid var(--grey-border); overflow:hidden; transition:all var(--transition); text-decoration:none; display:block; }
.l-card:hover { border-color:rgba(201,168,76,.4); transform:translateY(-6px); box-shadow:0 16px 60px rgba(0,0,0,.8); }
.l-img { position:relative; height:210px; background:#161616; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.l-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.l-card:hover .l-img img { transform:scale(1.06); }
.l-bdg { position:absolute; top:1rem; left:1rem; padding:4px 11px; background:var(--gold); color:var(--black); font-size:.58rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.l-cat { position:absolute; top:1rem; right:1rem; padding:4px 11px; background:rgba(10,10,10,.85); color:var(--gold); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; border:1px solid rgba(201,168,76,.3); }
.l-body { padding:1.5rem; }
.l-title { font-family:var(--font-display); font-size:1.2rem; color:var(--white); margin-bottom:.5rem; transition:color var(--transition); }
.l-card:hover .l-title { color:var(--gold); }
.l-loc { font-size:.7rem; color:var(--grey-mid); letter-spacing:.1em; margin-bottom:1rem; display:flex; align-items:center; gap:5px; }
.l-loc svg { width:11px; height:11px; stroke:var(--gold); }
.l-price { font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--gold); }
.l-foot { padding:1rem 1.5rem; border-top:1px solid var(--grey-border); display:flex; align-items:center; justify-content:space-between; }
.l-cta { font-size:.64rem; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:6px; transition:gap var(--transition); }
.l-card:hover .l-cta { gap:10px; }
.l-cta svg { width:11px; height:11px; stroke:var(--gold); }

#why { background:#161616; }
.why-g { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.why-vis { position:relative; }
.why-box { aspect-ratio:4/5; background:var(--black-card); border:1px solid var(--grey-border); display:flex; align-items:center; justify-content:center; }
.why-badge { position:absolute; bottom:-1.5rem; right:-1.5rem; width:128px; height:128px; background:var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3px; }
.why-badge strong { font-family:var(--font-display); font-size:2.2rem; font-weight:600; color:var(--black); line-height:1; }
.why-badge span { font-size:.55rem; letter-spacing:.15em; color:rgba(0,0,0,.65); text-transform:uppercase; }
.why-feats { display:flex; flex-direction:column; gap:2rem; margin-top:2.5rem; }
.wf { display:flex; gap:1.5rem; align-items:flex-start; }
.wf-ico { width:42px; height:42px; flex-shrink:0; border:1px solid rgba(201,168,76,.3); display:flex; align-items:center; justify-content:center; }
.wf-ico svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.5; }
.wf-t { font-family:var(--font-display); font-size:1.08rem; color:var(--white); margin-bottom:.25rem; }
.wf-d { font-size:.82rem; color:var(--grey-soft); line-height:1.7; }

#cta-s { background:linear-gradient(135deg,var(--black-card),var(--black)); border-top:1px solid rgba(201,168,76,.15); border-bottom:1px solid rgba(201,168,76,.15); text-align:center; padding:5rem 4vw; }
.cta-t { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:300; margin-bottom:.8rem; }
.cta-t em { color:var(--gold); font-style:italic; }
.cta-sub { font-size:.87rem; color:var(--grey-soft); max-width:400px; margin:0 auto 2.5rem; }
.nl-f { display:flex; max-width:440px; margin:0 auto; }
.nl-f input { flex:1; padding:13px 18px; background:#161616; border:1px solid var(--grey-border); border-right:none; color:var(--pearl); font-family:var(--font-body); font-size:.84rem; outline:none; transition:border-color var(--transition); }
.nl-f input:focus { border-color:rgba(201,168,76,.5); }
.nl-f input::placeholder { color:var(--grey-mid); }
.nl-f button { padding:13px 24px; background:var(--gold); color:var(--black); border:none; font-family:var(--font-body); font-size:.67rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; transition:background var(--transition); }
.nl-f button:hover { background:var(--gold-light); }

footer { background:#0f0f0f; border-top:1px solid var(--grey-border); padding:5rem 4vw 2.5rem; }
.ft { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; margin-bottom:4rem; }
.f-logo { font-family:var(--font-display); font-size:1.6rem; font-weight:500; letter-spacing:.1em; color:var(--white); text-transform:uppercase; }
.f-logo span { color:var(--gold); }
.f-tag { font-size:.82rem; color:var(--grey-soft); line-height:1.8; margin-top:.8rem; max-width:280px; }
.f-social { display:flex; gap:.6rem; margin-top:1.4rem; }
.f-social a { width:33px; height:33px; border:1px solid var(--grey-border); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.f-social a:hover { border-color:var(--gold); background:rgba(201,168,76,.08); }
.f-social svg { width:12px; height:12px; stroke:var(--grey-soft); fill:none; stroke-width:1.5; transition:stroke var(--transition); }
.f-social a:hover svg { stroke:var(--gold); }
.f-h { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1.3rem; font-weight:500; }
.f-ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.f-ul a { font-size:.82rem; color:var(--grey-soft); transition:color var(--transition); }
.f-ul a:hover { color:var(--gold); }
.fb { border-top:1px solid var(--grey-border); padding-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.fc, .fl a { font-size:.7rem; color:var(--grey-mid); letter-spacing:.04em; }
.fl { display:flex; gap:1.5rem; }
.fl a:hover { color:var(--gold); }

@keyframes fu { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes sp { 0%,100% { opacity:.3; transform:scaleY(.6); } 50% { opacity:1; transform:scaleY(1); } }
@keyframes mq { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.reveal { opacity:1; transform:translateY(0); transition:opacity .8s, transform .8s; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:1024px) {
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .l-grid { grid-template-columns:repeat(2,1fr); }
  .ft { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .why-g { grid-template-columns:1fr; gap:3rem; }
}
@media(max-width:768px) {
  nav { display:none; }
  nav.open { display:flex; flex-direction:column; position:fixed; top:70px; left:0; right:0; background:rgba(10,10,10,.98); padding:2rem; gap:1.5rem; border-top:1px solid var(--grey-border); z-index:999; }
  .hamburger { display:flex; }
  .hero-stats { display:none; }
  .cat-grid { grid-template-columns:1fr; }
  .l-grid { grid-template-columns:1fr; }
  .ft { grid-template-columns:1fr; }
  .fb { flex-direction:column; text-align:center; }
  .nl-f { flex-direction:column; }
  .nl-f input { border-right:1px solid var(--grey-border); border-bottom:none; }
  section { padding:4rem 5vw; }
}
.logo-n em { color: var(--gold); font-style: normal; }