/* =====================================================
   RankForge – FULL 3D THEME  (v3d1)
   ===================================================== */
:root{
  --rf-bg:#070b1f;--rf-bg2:#0e1433;--rf-ink:#eaf0ff;--rf-mute:#93a0c8;
  --rf-blue:#5b8cff;--rf-cyan:#22e3c4;--rf-pink:#ff6b9a;--rf-line:rgba(255,255,255,.09);
  --rf-blue-deep:#3450c0;--rf-edge:#0a1030;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--rf-bg);color:var(--rf-ink);overflow-x:hidden}
h1,h2,h3,h4,.brand{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.02em}

/* ---------- 3D BACKGROUND: glow + moving perspective grid floor ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(60vw 50vw at 85% -10%,rgba(91,140,255,.28),transparent 60%),radial-gradient(50vw 40vw at -10% 30%,rgba(34,227,196,.14),transparent 60%),radial-gradient(40vw 40vw at 60% 100%,rgba(255,107,154,.12),transparent 60%)}
body::after{content:"";position:fixed;left:-50%;right:-50%;bottom:-25vh;height:75vh;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(91,140,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(91,140,255,.25) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%);
  animation:gridmove 9s linear infinite}
@keyframes gridmove{to{background-position:0 64px,0 0}}

/* ---------- NAVBAR ---------- */
.navbar{background:rgba(7,11,31,.78)!important;backdrop-filter:blur(14px);border-color:var(--rf-line)!important;box-shadow:0 10px 30px -12px #000,0 1px 0 rgba(255,255,255,.06) inset}
.brand{font-weight:800;font-size:1.35rem;color:var(--rf-ink)!important;text-shadow:0 2px 0 #1a2766,0 6px 14px rgba(91,140,255,.45)}
.logo3d{width:30px;height:30px;position:relative;display:inline-block;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(35deg);animation:spin3d 9s linear infinite}
@keyframes spin3d{to{transform:rotateX(-20deg) rotateY(395deg)}}
.logo3d i{position:absolute;inset:0;border:2px solid var(--rf-cyan);background:rgba(34,227,196,.15);border-radius:6px}
.logo3d i:nth-child(1){transform:translateZ(15px)}
.logo3d i:nth-child(2){transform:rotateY(90deg) translateZ(15px);border-color:var(--rf-blue)}
.logo3d i:nth-child(3){transform:rotateX(90deg) translateZ(15px);border-color:var(--rf-pink)}
.nav-link{color:var(--rf-mute)!important;transition:transform .2s,color .2s,text-shadow .2s}
.nav-link:hover{color:var(--rf-ink)!important;transform:translateY(-2px) translateZ(10px);text-shadow:0 6px 12px rgba(91,140,255,.6)}

/* ---------- 3D BUTTONS (pressable) ---------- */
.btn{letter-spacing:.01em;line-height:1.35}
.btn-primary-glow{background:linear-gradient(135deg,var(--rf-blue),#7a5bff);border:0;color:#fff;font-weight:600;border-radius:.875rem;padding:.7rem 1.35rem;
  box-shadow:0 6px 0 var(--rf-blue-deep),0 16px 26px -8px rgba(91,140,255,.8),inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(0);transition:transform .15s,box-shadow .15s}
.btn-primary-glow:hover{color:#fff;transform:translateY(-3px);box-shadow:0 9px 0 var(--rf-blue-deep),0 22px 34px -8px rgba(91,140,255,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary-glow:active{color:#fff;transform:translateY(5px);box-shadow:0 1px 0 var(--rf-blue-deep),0 4px 10px -4px rgba(91,140,255,.8),inset 0 1px 0 rgba(255,255,255,.3)}

.btn-glow{background:linear-gradient(135deg,var(--rf-blue),#7a5bff);border:0;color:#fff;font-weight:600;border-radius:.75rem;padding:.55rem 1.2rem;
  box-shadow:0 5px 0 var(--rf-blue-deep),0 12px 22px -8px rgba(91,140,255,.8),inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(0);transition:transform .15s,box-shadow .15s}
.btn-glow:hover,.btn-glow:focus{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 var(--rf-blue-deep),0 18px 28px -8px rgba(91,140,255,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-glow:active{color:#fff;transform:translateY(4px);box-shadow:0 1px 0 var(--rf-blue-deep),0 3px 8px -3px rgba(91,140,255,.7)}
a.btn-glow{display:inline-block;text-decoration:none}

.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--rf-line);color:var(--rf-ink);font-weight:500;border-radius:.75rem;
  box-shadow:0 4px 0 rgba(0,0,0,.45),0 10px 18px -10px #000,inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(0);transition:transform .15s,box-shadow .15s,background .2s}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.25);color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.45),0 14px 22px -10px #000}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}

/* hero quick buttons (btn-outline-light) */
.btn-outline-light{background:rgba(255,255,255,.05);box-shadow:0 4px 0 rgba(0,0,0,.5),0 10px 18px -10px #000;transition:transform .15s,box-shadow .15s,background .2s,color .2s}
.btn-outline-light:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.5),0 14px 22px -10px #000}
.btn-outline-light:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.5)}

/* ---------- HERO ---------- */
.hero{min-height:92vh;padding-top:5rem;perspective:1400px}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);text-shadow:0 1px 0 #2a3a86,0 2px 0 #243377,0 3px 0 #1e2a68,0 4px 0 #182159,0 5px 0 #121a4b,0 14px 24px rgba(0,0,0,.55)}
.hero .lead{max-width:36rem;color:var(--rf-mute)}
.hero .badge{box-shadow:0 4px 0 rgba(0,0,0,.5),0 10px 18px -8px #000}
.searchbox{max-width:36rem;border:1px solid var(--rf-line);border-radius:1rem;background:rgba(255,255,255,.06);
  box-shadow:0 6px 0 rgba(0,0,0,.45),0 24px 50px -20px #000,inset 0 2px 6px rgba(0,0,0,.35);transform:perspective(900px) rotateX(2deg)}
.searchbox .form-control{color:var(--rf-ink)}
.searchbox .form-control::placeholder{color:var(--rf-mute)}

.scene{height:440px;display:grid;place-items:center;perspective:1100px}
.stack{position:relative;width:300px;height:300px;transform-style:preserve-3d;transform:rotateX(var(--rx,58deg)) rotateZ(var(--rz,-32deg));transition:transform .15s ease-out}
.layer{position:absolute;inset:0;border-radius:26px;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3);animation:float 6s ease-in-out infinite;display:grid;place-items:center;font-size:3rem}
.layer:nth-child(1){transform:translateZ(0);background:linear-gradient(135deg,rgba(91,140,255,.55),rgba(91,140,255,.15))}
.layer:nth-child(2){transform:translateZ(70px);background:linear-gradient(135deg,rgba(34,227,196,.5),rgba(34,227,196,.12));animation-delay:-2s}
.layer:nth-child(3){transform:translateZ(140px);background:linear-gradient(135deg,rgba(255,107,154,.55),rgba(255,107,154,.12));animation-delay:-4s}
.layer::after{content:"";position:absolute;left:18px;right:18px;bottom:22px;height:10px;border-radius:6px;background:rgba(255,255,255,.35);box-shadow:0 -22px 0 -2px rgba(255,255,255,.2),0 -44px 0 -4px rgba(255,255,255,.15)}
@keyframes float{50%{margin-top:-14px}}

/* ---------- 3D STAT CARDS (homepage) ---------- */
.stat-card{border-color:var(--rf-line)!important;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:0 2px 0 #1a2350,0 4px 0 #141b45,0 6px 0 #0f1538,0 22px 30px -14px #000;
  transform-style:preserve-3d}
.stat-card.rv.in{transform:perspective(900px) rotateX(var(--x,0deg)) rotateY(var(--y,0deg))}
.stat-card.rv{transition:opacity .6s,transform .2s ease-out}
.stat-card b{font-family:Sora;font-size:2rem;display:block;transform:translateZ(26px);text-shadow:0 3px 0 rgba(0,0,0,.4)}
.stat-card span{color:var(--rf-mute);font-size:.9rem;display:block;transform:translateZ(14px)}

/* ---------- FILTER CHIPS ---------- */
.filter-chip{border:1px solid var(--rf-line);background:rgba(255,255,255,.05);color:var(--rf-mute);white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s,background .2s,color .2s}
.filter-chip:hover{color:#fff;border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.45)}
.filter-chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.filter-chip.active{background:var(--rf-blue);border-color:var(--rf-blue);color:#fff;box-shadow:0 4px 0 var(--rf-blue-deep),0 10px 22px -8px var(--rf-blue)}

/* ---------- 3D TOOL CARDS ---------- */
#grid,#grid2{perspective:1400px}
.tool-card{position:relative;overflow:visible;padding:1.4rem;border:1px solid var(--rf-line);border-radius:1.375rem;color:var(--rf-ink);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:0 2px 0 #1a2350,0 4px 0 #151c45,0 6px 0 #101639,0 24px 34px -16px #000;
  transform:perspective(900px) rotateX(var(--x,0deg)) rotateY(var(--y,0deg));
  transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .25s,border-color .25s}
.tool-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.18),transparent 60%);opacity:0;transition:.25s;pointer-events:none}
.tool-card:hover{color:var(--rf-ink);border-color:rgba(91,140,255,.65);
  transform:perspective(900px) rotateX(var(--x,0deg)) rotateY(var(--y,0deg)) translateZ(18px);
  box-shadow:0 3px 0 #2a3a8a,0 6px 0 #22307a,0 9px 0 #1a2562,0 34px 50px -18px rgba(91,140,255,.65)}
.tool-card:hover::before{opacity:1}
.tool-card>*{position:relative;z-index:1}
.tool-card .tool-icon{transform:translateZ(38px)}
.tool-card h3{transform:translateZ(22px);color:var(--rf-ink);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tool-card p{transform:translateZ(10px)}
.tool-card strong{color:var(--rf-ink);font-weight:600}
.tool-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 4px 0 rgba(0,0,0,.35),0 14px 22px -8px var(--g1),inset 0 1px 0 rgba(255,255,255,.45)}
.tool-soon{opacity:.55;filter:saturate(.5)}
.tool-soon:hover{opacity:.8}

/* ---------- CTA ---------- */
.cta-card{border-color:var(--rf-line)!important;background:linear-gradient(135deg,rgba(91,140,255,.25),rgba(255,107,154,.14));
  box-shadow:0 3px 0 #1d2866,0 7px 0 #151e52,0 11px 0 #0f1640,0 34px 50px -20px #000}
.cta-card.rv.in{transform:perspective(1000px) rotateX(var(--x,0deg)) rotateY(var(--y,0deg))}
.cta-card.rv{transition:opacity .6s,transform .2s ease-out}

footer{border-color:var(--rf-line)!important}
.empty{color:var(--rf-mute)}

/* ---------- 3D MODAL (tool popup) ---------- */
.modal{perspective:1400px}
.modal.fade .modal-dialog{transform:rotateX(-22deg) translateY(-60px) translateZ(-120px) scale(.94);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s}
.modal.show .modal-dialog{transform:none;opacity:1}
.tool-modal{background:var(--rf-bg2);border-color:var(--rf-line);box-shadow:0 4px 0 #1a2350,0 8px 0 #121a45,0 12px 0 #0c1233,0 50px 90px -20px #000}
.tool-modal .modal-title{letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.modal-backdrop{--bs-backdrop-opacity:.75}

/* modal form controls (inset 3D) */
.tool-modal .form-control,.tool-modal .form-select{background-color:rgba(255,255,255,.05);border-color:var(--rf-line);color:var(--rf-ink);box-shadow:inset 0 3px 8px rgba(0,0,0,.4)}
.tool-modal .form-control::placeholder{color:var(--rf-mute)}
.tool-modal .table{--bs-table-bg:transparent;--bs-table-color:var(--rf-ink)}
.tool-modal .form-label{color:var(--rf-mute);font-size:.85rem;margin-bottom:.35rem;letter-spacing:.01em}
.tool-modal textarea.form-control{resize:vertical}
.tool-modal .form-control:focus,.tool-modal .form-select:focus{background-color:rgba(255,255,255,.08);border-color:var(--rf-blue);box-shadow:inset 0 3px 8px rgba(0,0,0,.4),0 0 0 .2rem rgba(91,140,255,.25);color:var(--rf-ink)}
.tool-modal .form-select option{background:var(--rf-bg2);color:var(--rf-ink)}
.tool-modal .form-range{accent-color:var(--rf-blue)}
.tool-modal .form-check-input:checked{background-color:var(--rf-blue);border-color:var(--rf-blue)}
.tool-modal input[type=file]::file-selector-button{background:var(--rf-blue);color:#fff;border:0;border-radius:.5rem;padding:.35rem .8rem;margin-right:.8rem;cursor:pointer;box-shadow:0 3px 0 var(--rf-blue-deep)}

/* ---------- RESULT BOXES (FIX: number + label alag line, proper spacing) ---------- */
.rf-stat,.stat{
  height:100%;display:flex!important;flex-direction:column;gap:.25rem;
  padding:.85rem 1rem;border:1px solid var(--rf-line);border-radius:.9rem;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:0 4px 0 rgba(0,0,0,.4),0 14px 22px -14px #000,inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .2s,box-shadow .2s}
.rf-stat:hover,.stat:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(0,0,0,.4),0 18px 26px -14px #000,inset 0 1px 0 rgba(255,255,255,.12)}
.rf-stat>b,.stat>b{display:block!important;font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;line-height:1.15;letter-spacing:0;color:var(--rf-ink);word-break:break-word;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.rf-stat>span,.stat>span{display:block!important;font-size:.8rem;line-height:1.3;letter-spacing:.02em;color:var(--rf-mute)}

/* ---------- FAQ ACCORDION (3D) ---------- */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--rf-line);--bs-accordion-btn-bg:rgba(255,255,255,.04);--bs-accordion-active-bg:rgba(91,140,255,.15);--bs-accordion-active-color:var(--rf-ink);--bs-accordion-btn-color:var(--rf-ink);--bs-accordion-color:var(--rf-mute)}
.accordion-item{border-radius:1rem!important;overflow:hidden;margin-bottom:.8rem;box-shadow:0 4px 0 rgba(0,0,0,.45),0 14px 24px -14px #000;transition:transform .2s,box-shadow .2s}
.accordion-item:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.45),0 18px 28px -14px #000}
.accordion-button{letter-spacing:0}

/* ---------- REVEAL / MISC ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--rf-blue);outline-offset:3px}

/* ads grid full-width */
#grid>.container,#grid2>.container{flex:0 0 100%;width:100%;max-width:100%}
.ad-slot{overflow:hidden}

/* navbar */
section[id]{scroll-margin-top:90px}
.navbar .btn-primary-glow{white-space:nowrap;padding:.5rem 1rem}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
  .hero{padding-top:7rem}
  .scene{height:340px}
  .stack{width:220px;height:220px}
  .layer:nth-child(2){transform:translateZ(50px)}
  .layer:nth-child(3){transform:translateZ(100px)}
  .navbar-collapse{background:rgba(14,20,51,.96);border:1px solid var(--rf-line);border-radius:1rem;margin-top:.75rem;padding:1rem;box-shadow:0 6px 0 rgba(0,0,0,.4),0 20px 30px -12px #000}
  .navbar .btn-primary-glow{display:block;text-align:center;margin-top:.5rem}
}
@media(max-width:575px){
  .searchbox{flex-direction:column;transform:none}
  .searchbox .btn{width:100%}
  .hero h1{text-shadow:0 1px 0 #2a3a86,0 2px 0 #1e2a68,0 3px 0 #121a4b,0 10px 18px rgba(0,0,0,.5)}
  body::after{height:55vh}
}
/* touch devices: no tilt, keep depth */
@media(hover:none){
  .tool-card,.tool-card:hover{transform:none}
  .tool-card .tool-icon,.tool-card h3,.tool-card p{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .tool-card,.stat-card.rv.in,.cta-card.rv.in{transform:none!important}
  .modal.fade .modal-dialog{transform:none;opacity:1}
}