/* =========================================================
   CRYPTOBIT — dark navy / gold crypto landing page
   ========================================================= */

:root{
  --navy: #12121c;
  --navy-2: #171724;
  --black: #0c0c14;
  --black-2: #141420;
  --gold: #f6b93b;
  --gold-2: #ffcd57;
  --text-muted: #a8a8bb;
  --light-bg: #f7f7fb;
  --radius: 14px;
  --ff-heading: 'Rubik', sans-serif;
  --ff-body: 'Poppins', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--ff-body);
  color:#e9e9f2;
  background:var(--black);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--ff-heading); }
a{text-decoration:none;}
p{color:var(--text-muted); line-height:1.8;}

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

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.hide{ opacity:0; visibility:hidden; }
.loader-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.loader-logo{
  width:80px; height:auto;
  animation: pulseLogo 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(246,185,59,.4));
}
@keyframes pulseLogo{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.08); opacity:.75;} }
.coin-loader{
  width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(246,185,59,.2);
  border-top-color:var(--gold);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------- Buttons ---------- */
.btn-accent{
  background: linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#161616;
  font-weight:600;
  border:none;
  padding:.75rem 1.7rem;
  border-radius:8px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 20px -8px rgba(246,185,59,.6);
}
.btn-accent:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(246,185,59,.75);
  color:#161616;
}

/* ---------- Eyebrow labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold); text-transform:uppercase; letter-spacing:2px;
  font-size:.8rem; font-weight:600; margin-bottom:.6rem;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(246,185,59,.2);
}
.section-title{
  font-weight:700; font-size:clamp(1.7rem,3vw,2.5rem);
  margin-bottom:1rem; color:#fff;
}
.section-desc{ max-width:600px; }

/* ---------- Layout sections ---------- */
.section{ padding:5.5rem 0; position:relative; }
.section-light{ background:var(--light-bg); color:#161622; }
.section-light p{ color:#5c5c70; }
.section-light .section-title{ color:#161622; }
.section-navy{ background: radial-gradient(circle at 20% 20%, var(--navy-2), var(--navy) 70%); }
.section-black{ background:var(--black); }
.section-black-alt{ background:var(--black-2); }

/* ---------- Navbar ---------- */
#header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.6rem 0;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
#header.scrolled{
  background: rgba(12,12,20,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  padding:.2rem 0;
}
.navbar-brand{
  display:flex; align-items:center; gap:.6rem;
  color:#fff !important; font-weight:700; font-size:1.4rem;
}
.logo-coin{
  width:36px;height:36px;border-radius:50%;
  background: linear-gradient(135deg,var(--gold),var(--gold-2));
  display:flex;align-items:center;justify-content:center;color:#161616;font-size:1.2rem;
}
.brand-logo{
  height:46px; width:auto; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(246,185,59,.35));
}
.brand-logo-footer{ height:64px; }
.brand-text{
  font-family: var(--ff-heading);
  font-weight:800; letter-spacing:.5px; font-size:1.25rem;
  color:#fff;
}
.footer .brand-text{ font-size:1.4rem; }
.nav-link{
  color:#dcdce6 !important; font-weight:500; padding:.5rem 1rem !important;
  position:relative;
}
.nav-link.active, .nav-link:hover{ color:var(--gold) !important; }
.btn-search{
  width:38px;height:38px;border-radius:8px;
  background:var(--gold); color:#161616 !important;
  display:flex;align-items:center;justify-content:center;
  margin-left:.5rem;
}
.navbar-toggler{ border:none; color:#fff; font-size:1.8rem; background:transparent; }
.navbar-toggler:focus{ box-shadow:none; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding-top:9rem; padding-bottom:5rem;
  background:
    radial-gradient(circle at 85% 20%, rgba(246,185,59,.12), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(246,185,59,.08), transparent 40%),
    linear-gradient(160deg,var(--navy) 0%, var(--black) 100%);
  overflow:hidden;
}
.min-vh-90{ min-height:80vh; }
.eyebrow{}
.hero-title{ color:#fff; line-height:1.15; }
.hero-sub{ margin:.2rem 0 1.2rem; }
.outline-text{
  font-family: var(--ff-heading);
  font-weight:800; font-size:clamp(2rem,4vw,3rem);
  color:transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  position:relative;
}
.outline-text::after{
  content:"";
  position:absolute; left:0; bottom:-8px; width:70%; height:2px;
  background:var(--gold); opacity:.6;
}
.hero-desc{ max-width:460px; }

.hero-art{ position:relative; height:460px; }
.coin-glow{
  position:absolute; width:320px;height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,185,59,.35), transparent 70%);
  top:40px; right:20px; filter:blur(10px);
}
.crypto-coin{
  position:absolute; right:60px; top:70px; width:190px;height:190px;
}
.coin-face{
  width:100%;height:100%;border-radius:50%;
  background: conic-gradient(from 180deg, #d99a1e, #ffe9a8, #d99a1e, #ffcd57, #d99a1e);
  display:flex;align-items:center;justify-content:center;
  font-size:4.5rem; color:#8a5c05;
  box-shadow: 0 25px 50px -15px rgba(0,0,0,.6), inset 0 0 25px rgba(255,255,255,.35);
  border: 6px solid #e6b23c;
}
.coin-ring{
  position:absolute; inset:-14px; border-radius:50%;
  border:2px dashed rgba(246,185,59,.4);
  animation: spin 14s linear infinite;
}
.coin-coin{
  position:absolute; border-radius:50%;
  background:linear-gradient(135deg,#e6b23c,#8a5c05);
  box-shadow:0 15px 30px -10px rgba(0,0,0,.6);
}
.coin-2{ width:70px;height:70px; right:230px; top:250px; }
.coin-3{ width:46px;height:46px; right:40px; top:270px; }

.phone-mock{
  position:absolute; left:0; bottom:0; width:190px; height:340px;
  background:#1a1a28; border-radius:26px; padding:16px 12px;
  border:6px solid #262638;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.phone-notch{
  width:50px;height:6px;border-radius:4px; background:#33334a; margin:0 auto 14px;
}
.phone-screen{
  background: linear-gradient(160deg,#22223a,#191926);
  border-radius:14px; padding:14px; height:calc(100% - 26px);
}
.ps-label{ font-size:.7rem; color:#9c9cb5; margin-bottom:.2rem;}
.ps-amount{ color:#fff; font-size:1.3rem; font-weight:700; }
.ps-amount span{ font-size:.75rem; color:var(--gold); }
.ps-chart svg{ width:100%; height:60px; margin-top:1rem; }
.ps-chart polyline{ fill:none; stroke:var(--gold); stroke-width:2; }
.btn-mini{
  display:inline-block; background:var(--gold); color:#161616;
  font-size:.72rem; font-weight:600; padding:.35rem .8rem; border-radius:6px; margin-top:.6rem;
}
.pair-row{ display:flex; justify-content:space-between; font-size:.78rem; color:#c7c7db; }
.pair-row .grn{ color:#5ddc9a; }

.badge-float{
  position:absolute; background:#1c1c2c; color:#fff; font-size:.7rem; font-weight:600;
  padding:.5rem .9rem; border-radius:30px; display:flex; align-items:center; gap:.4rem;
  border:1px solid rgba(246,185,59,.3); box-shadow:0 10px 20px -8px rgba(0,0,0,.6);
}
.badge-locked{ top:60px; left:0; color:var(--gold); }
.badge-guaranteed{ top:150px; right:0; color:#5ddc9a; }
.spark{ position:absolute; color:var(--gold); font-size:1.1rem; opacity:.8; }
.spark-1{ top:20px; left:40%; animation: twinkle 2.4s ease-in-out infinite; }
.spark-2{ bottom:60px; right:120px; animation: twinkle 3s ease-in-out infinite .5s; }

@keyframes twinkle{ 0%,100%{opacity:.2; transform:scale(.8);} 50%{opacity:1; transform:scale(1.2);} }
.float-anim{ animation: floaty 4s ease-in-out infinite; }
.float-anim-slow{ animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }

/* ---------- FEATURES ---------- */
.feature-card{
  background:#fff; border-radius:var(--radius); padding:2.4rem 1.6rem;
  box-shadow: 0 15px 35px -12px rgba(20,20,40,.12);
  transition: transform .3s ease, box-shadow .3s ease;
  height:100%;
}
.feature-card:hover{ transform: translateY(-8px); box-shadow: 0 25px 45px -14px rgba(20,20,40,.2); }
.feature-icon{
  width:64px;height:64px;border-radius:50%;
  background: linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#161616; font-size:1.7rem;
  display:flex;align-items:center;justify-content:center; margin:0 auto 1.2rem;
}
.feature-card h5{ font-weight:700; margin-bottom:.5rem; }
.know-more{ color:#5c5c70; }
.know-more a{ color:var(--gold); font-weight:600; }

/* ---------- TRANSACTIONS ---------- */
.tx-art{ position:relative; height:380px; }
.tx-ring{
  position:absolute; inset:0; margin:auto; width:260px;height:260px;border-radius:50%;
  border:2px dashed rgba(246,185,59,.35); animation: spin 20s linear infinite;
}
.tx-coin{
  position:absolute; border-radius:50%; display:flex;align-items:center;justify-content:center;
  background: conic-gradient(from 180deg,#d99a1e,#ffe9a8,#d99a1e);
  box-shadow: 0 25px 45px -15px rgba(0,0,0,.6);
  color:#8a5c05;
}
.tx-coin-1{ width:190px;height:190px; font-size:4rem; top:60px; left:60px; animation: floaty 5s ease-in-out infinite; }
.tx-coin-2{ width:110px;height:110px; font-size:2.4rem; bottom:20px; right:40px; animation: floaty 6s ease-in-out infinite .4s; }
.tx-stat{
  position:absolute; left:10px; bottom:0; background:var(--gold); color:#161616;
  padding:1rem 1.4rem; border-radius:10px; box-shadow:0 15px 30px -10px rgba(0,0,0,.5);
}
.tx-stat h3{ font-weight:800; margin:0; }
.tx-stat p{ margin:0; color:#3a2c05; font-size:.8rem; }

.tx-list-item{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:.9rem 1.1rem; color:#e9e9f2; font-weight:500;
  display:flex; align-items:center; gap:.6rem; transition:.25s;
}
.tx-list-item:hover{ border-color:var(--gold); color:var(--gold); transform:translateX(4px); }
.tx-list-item i{ color:var(--gold); font-size:1.2rem; }

/* ---------- ABOUT ---------- */
.about-card{
  background: linear-gradient(160deg,#1c1c2c,#131320);
  border:1px solid rgba(246,185,59,.15);
  border-radius:var(--radius); padding:2.6rem;
}
.about-card h3{ color:#fff; font-weight:700; margin-bottom:1rem; }
.about-art{ position:relative; height:400px; }
.about-phone{ margin:0 auto; position:relative; left:20%; }
.about-coin{ position:absolute; border-radius:50%; background:linear-gradient(135deg,#e6b23c,#8a5c05); }
.about-coin.coin-1{ width:80px;height:80px; left:0; top:40px; }
.about-coin.coin-2{ width:50px;height:50px; right:20px; bottom:40px; }
.about-spark{ position:absolute; color:var(--gold); font-size:1.4rem; opacity:.7; }
.about-spark.s1{ top:10px; right:60px; animation: twinkle 3s infinite; }
.about-spark.s2{ bottom:10px; left:30px; animation: twinkle 3.4s infinite .3s; }

/* ---------- PROCESS ---------- */
.process-row{ position:relative; }
.process-card{
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:2rem 1.2rem; height:100%;
  transition: transform .3s, border-color .3s;
  position:relative;
}
.process-card:hover{ transform:translateY(-8px); border-color:var(--gold); }
.process-num{
  position:absolute; top:14px; right:18px; color:rgba(246,185,59,.3);
  font-size:1.6rem; font-weight:800;
}
.process-icon{
  width:64px;height:64px;border-radius:16px; margin:0 auto 1rem;
  background: linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#161616; display:flex;align-items:center;justify-content:center; font-size:1.7rem;
}
.process-card h6{ color:#fff; font-weight:700; margin-bottom:.4rem; }
.process-card p{ font-size:.85rem; margin:0; }

/* ---------- TESTIMONIALS ---------- */
.stat-box{
  background: linear-gradient(160deg,#1c1c2c,#131320);
  border:1px solid rgba(246,185,59,.15);
  border-radius:var(--radius); padding:2.2rem; text-align:center;
}
.stat-box h3{ display:inline; color:var(--gold); font-size:2.6rem; font-weight:800; }
.stat-box>span{ color:var(--gold); font-size:2.6rem; font-weight:800; }
.stat-box p{ margin-top:.6rem; }

.testi-slider{ position:relative; min-height:170px; }
.testi-card{
  display:none; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:1.8rem;
}
.testi-card.active{ display:block; animation: fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.testi-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; }
.testi-head img{ width:52px;height:52px;border-radius:50%; border:2px solid var(--gold); }
.testi-head h6{ margin:0; color:#fff; font-weight:700; }
.stars{ color:var(--gold); font-size:.8rem; margin-left:.4rem; }
.testi-dots{ display:flex; gap:.5rem; margin-top:1rem; }
.testi-dots span{
  width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer; transition:.25s;
}
.testi-dots span.active{ background:var(--gold); width:22px; border-radius:6px; }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item{
  background:transparent; border:1px solid rgba(255,255,255,.08); border-radius:10px !important;
  margin-bottom:.8rem; overflow:hidden;
}
.faq-accordion .accordion-button{
  background:rgba(255,255,255,.03); color:#fff; font-weight:600;
  box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){
  background: var(--gold); color:#161616;
}
.faq-accordion .accordion-button::after{ filter: invert(1); }
.faq-accordion .accordion-button:not(.collapsed)::after{ filter:none; }
.faq-accordion .accordion-body{ background:rgba(255,255,255,.02); color:var(--text-muted); }

.faq-art{ position:relative; height:340px; display:flex; align-items:center; justify-content:center; }
.faq-mark{
  font-size:11rem; font-weight:800; color:transparent;
  -webkit-text-stroke: 2px var(--gold);
  animation: floaty 5s ease-in-out infinite;
}
.faq-spark{ position:absolute; font-size:1.8rem; color:var(--gold); opacity:.75; }
.faq-spark.s1{ top:20px; left:30px; animation: floaty 4s infinite; }
.faq-spark.s2{ bottom:30px; left:60px; animation: floaty 5s infinite .4s; }
.faq-spark.s3{ top:40px; right:30px; animation: floaty 4.5s infinite .2s; }
.faq-spark.s4{ bottom:20px; right:70px; animation: floaty 5.5s infinite .6s; }

/* ---------- SUBSCRIBE ---------- */
.subscribe-section{
  background:
    radial-gradient(circle at 50% 0%, rgba(246,185,59,.12), transparent 60%),
    linear-gradient(160deg,var(--navy-2),var(--navy));
}
.subscribe-form{
  display:flex; max-width:480px; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
.subscribe-form input{
  flex:1; min-width:240px; padding:.85rem 1.2rem; border-radius:8px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05); color:#fff;
}
.subscribe-form input::placeholder{ color:#a8a8bb; }
.subscribe-form input:focus{ outline:none; border-color:var(--gold); }

/* ---------- CONTACT FORM ---------- */
.contact-form{ max-width:900px; margin:0 auto; }
.contact-form .form-control{
  background:#fff; border:1px solid #e3e3ee; border-radius:8px; padding:.85rem 1.1rem;
}
.contact-form .form-control:focus{ box-shadow:0 0 0 3px rgba(246,185,59,.25); border-color:var(--gold); }

/* ---------- FOOTER ---------- */
.footer{ background:#08080e; padding:4.5rem 0 0; }
.footer p{ color:#8f8fa5; }
.footer h6{ color:#fff; font-weight:700; margin-bottom:1.1rem; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.6rem; }
.footer ul a{ color:#8f8fa5; transition:.2s; }
.footer ul a:hover{ color:var(--gold); }
.footer-address li{ display:flex; gap:.6rem; color:#8f8fa5; align-items:flex-start; }
.footer-address i{ color:var(--gold); margin-top:.2rem; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{
  width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center; color:#fff; transition:.25s;
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:#161616; }
.footer hr{ border-color:rgba(255,255,255,.08); margin-top:2.5rem; }
.footer .row.py-3 p, .footer .row.py-3 a{ color:#8f8fa5; font-size:.88rem; }
.footer .row.py-3 a:hover{ color:var(--gold); }

/* ---------- BACK TO TOP ---------- */
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:46px;height:46px; border-radius:50%;
  background:var(--gold); color:#161616; display:flex;align-items:center;justify-content:center;
  font-size:1.4rem; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:.3s; z-index:900; box-shadow:0 10px 25px -8px rgba(0,0,0,.5);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .hero{ padding-top:7rem; }
  .hero-art{ height:380px; margin-top:2rem; }
  .about-phone{ left:15%; }
  #navMenu{ background:var(--navy); margin-top:1rem; border-radius:10px; padding:1rem; }
}
@media (max-width: 767px){
  .hero-art{ height:340px; transform:scale(.85); }
  .tx-art{ height:300px; }
  .section{ padding:3.5rem 0; }
  .faq-mark{ font-size:7rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}