/* ======================================================
   RESET + BASE
====================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI;
  background:
    radial-gradient(900px 500px at 20% -10%, #1e293b 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #0f766e 0%, transparent 55%),
    #020617;
  color: #e5e7eb;
  overflow-x: hidden;
}

/* ======================================================
   APP LAYOUT
====================================================== */
.app {
  display:block;
  min-height: 100vh;
  width: 100%;
}

/* ======================================================
   SIDEBAR / HEADER
====================================================== */
.sidebar {
  width: 240px;
  padding: 20px;
  background: rgba(2,6,23,.78);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { max-width: 150px; }

/* ======================================================
   NAVIGATION
====================================================== */
.nav-wrapper { position: relative; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.nav-item {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  color: #c7d2fe;
  transition: background .25s ease, transform .2s ease;
}

.nav-item:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}

.nav-item.active {
  background: rgba(56,189,248,.18);
  color: #e0f2fe;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  font-weight: 700;
  cursor: pointer;
}

/* ======================================================
   MAIN CONTENT
====================================================== */
.content {
  flex: 1;
  max-width: 1200px;
  margin: auto;
  padding: 36px;


}

/* ======================================================
   TITLE
====================================================== */
.title {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -.4px;
}

/* ======================================================
   TEXTAREA
====================================================== */
/* ======================================================
   HERO TEXT – PROFESSIONAL SECURITY UI
====================================================== */

.title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: #f8fafc;
}

/* Description */
.explain {
  max-width: 780px;
  font-size: 16.2px;
  line-height: 1.85;
  color: #cbd5e1;
  margin-bottom: 28px;

  /* subtle separation from background */
  padding-left: 2px;
}

/* Highlighted ending phrase */
.highlight-text {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  color: #e7fdf1;
  position: relative;
}

/* Professional underline (not flashy) */
.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.9),
    rgba(74,222,128,.9)
  );
  opacity: 0.65;
}

/* Soft entrance animation (Discover-safe) */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title,
.explain {
  animation: heroFadeIn .6s ease-out both;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .title {
    font-size: 26px;
    line-height: 1.25;
  }

  .explain {
    font-size: 14.6px;
    line-height: 1.75;
  }

  .highlight-text::after {
    bottom: -4px;
  }
}


/* ======================================================
   FILE UPLOAD
====================================================== */
.glass-upload { margin-top: 16px; }

.upload-ui {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.upload-ui:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(56,189,248,.25);
}

.upload-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(56,189,248,.15);
  color: #38bdf8;
}

/* ======================================================
   ANALYZE BUTTON
====================================================== */
.scanBtn {
  margin-top: 22px;
  width: 100%;
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.scanBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(56,189,248,.25);
}

/* ======================================================
   HERO SLIDER (FIXED & CLEAN)
====================================================== */
.hero-visual {
  position: absolute;
left:65%;
  top: 100px !important;
  width: 300px;
  height: 380px;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
  z-index: 2;
}
.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #020617, #052e2b);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* fade edges */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #020617 30%, transparent);
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #052e2b 30%, transparent);
}

.marquee {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
}

.marquee span {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  color: #e5e7eb;
  padding-right: 60px;
  letter-spacing: 0.2px;
}

.marquee b {
  color: #22c55e;
  font-weight: 600;
}

/* pause on hover */
.marquee-wrapper:hover .marquee {
  animation-play-state: paused;
}

/* animation */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* mobile */
@media (max-width: 768px) {
  .marquee span {
    font-size: 14px;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.4,1.2,.6,1);
}

.hero-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-visual.hide {
  opacity: 0;
  transform: translateY(20px) scale(.95);
}

/* ======================================================
   RESULT PANEL
====================================================== */
.result {
  margin-top: 28px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.65));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  animation: fadeUp .6s ease;
}
.jobtrust-hero {
  min-height: 45vh;
  display: flex;
  align-items: center;
  padding: 0px 6%;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.12), transparent 40%),
    linear-gradient(180deg, #020617, #020617);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* subtle security grid */
.jobtrust-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 28%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  max-width: 860px;
  position: relative;
  z-index: 2;
}

/* badge */
.hero-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(34,197,94,0.14);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.35);
  margin-bottom: 22px;
  letter-spacing: 0.3px;
}

/* heading */
.jobtrust-hero h1 {
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
}

/* text */
.jobtrust-hero p {
  font-size: 18px;
  line-height: 1.75;
  color: #d1d5db;
  max-width: 740px;
}

.jobtrust-hero strong {
  color: #22c55e;
  font-weight: 600;
}

/* actions */
.hero-actions {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
}




/* mobile */
@media (max-width: 768px) {
  .jobtrust-hero {
    padding: 70px 20px;
    min-height: auto;
  }

  .jobtrust-hero p {
    font-size: 16px;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none; }

/* ======================================================
   RESULT LAYOUT
====================================================== */
.resultLayout {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 26px;
}

.resultLeft {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.resultRight {
  display: flex;
  justify-content: center;
}

/* ======================================================
   RESULT CARDS
====================================================== */
.resCard {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border-radius: 18px;
  padding: 22px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
}

.resCard h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
}

/* ======================================================
   SCORE METER
====================================================== */
.bigCard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge {
  width: 260px;
  margin: 20px auto 26px;
  position: relative;
}

.gauge-body {
  width: 100%;
  height: 140px;
  background: rgba(2,6,23,.95);
  border-radius: 140px 140px 0 0;
  overflow: hidden;
  position: relative;
}

.gauge-fill {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  transform: rotate(-90deg);
  transition: transform 1s cubic-bezier(.4,1.3,.6,1);
}

.gauge-fill.legit {
  background: linear-gradient(180deg,#22c55e,#16a34a);
}

.gauge-fill.suspicious {
  background: linear-gradient(180deg,#facc15,#f59e0b);
}

.gauge-fill.scam {
  background: linear-gradient(180deg,#ef4444,#b91c1c);
  animation: scamPulse 1.4s infinite;
}

@keyframes scamPulse {
  50% { box-shadow: 0 0 45px rgba(239,68,68,.7); }
}

.gauge-cover {
  position: absolute;
  left: 50%;
  bottom: 0;                /* ✅ NOT negative */
  transform: translateX(-50%) translateY(50%);

  width: 120px;
  height: 120px;

  background: rgba(2,6,23,.96);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5;
  border: 1px solid rgba(255,255,255,.12);
}

/* ======================================================
   TRUST BADGE (ANIMATED & PREMIUM)
====================================================== */
#badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 130px;
  padding: 12px 22px;

  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;

  border-radius: 999px;
  position: relative;
  overflow: hidden;

  margin-top: 12px;
  text-align: center;

  backdrop-filter: blur(12px);
  border: 2px solid transparent;
}

/* ===== Animated border ===== */
#badge::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
  );
  animation: badgeBorder 2.8s linear infinite;
}

#badge::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

/* Border animation */
@keyframes badgeBorder {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ======================================================
   BADGE STATES
====================================================== */

/* ✅ LEGIT */
#badge.legit {
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #ecfdf5;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.35),
    0 10px 35px rgba(34,197,94,.45);
}

/* ⚠️ SUSPICIOUS */
#badge.suspicious {
  background: linear-gradient(135deg,#facc15,#f59e0b);
  color: #1f2937;
  box-shadow:
    0 0 0 1px rgba(250,204,21,.35),
    0 10px 35px rgba(250,204,21,.45);
}

/* ❌ SCAM */
#badge.scam {
  background: linear-gradient(135deg,#ef4444,#b91c1c);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(239,68,68,.35),
    0 10px 40px rgba(239,68,68,.55);
  animation: scamPulse 1.6s infinite;
}
/* Base score number (always visible) */
/* FIX: ensure score number is ALWAYS visible */
#gaugeValue {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;          /* 🔑 prevents vertical text shift */
  margin-top: -26px;         /* tiny optical correction */
  z-index: 10;
}

.gauge-fill {
  z-index: 1;
}


/* Trust score number */
#gaugeValue {
  transition: color .4s ease, transform .3s ease;
}

.score-legit { color: #22c55e; }
.score-suspicious { color: #f59e0b; }
.score-scam { color: #ef4444; }

/* Extra pulse for scam */
@keyframes scamPulse {
  0% { box-shadow: 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 45px rgba(239,68,68,.8); }
  100% { box-shadow: 0 0 0 rgba(239,68,68,.4); }
}


/* ======================================================
   AVATAR CARD
====================================================== */
.job-avatar-card {
  max-width: 260px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
  );
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
  height:280px;
}

#jobAvatar {
  width: 120px;
  margin: 10px auto;
}

.avatar-speech {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #c7d2fe;
  background: rgba(56,189,248,.12);
  padding: 10px 12px;
  border-radius: 12px;
}
/* ================= FAQ ================= */
.jts-faq-section {
  max-width: 980px;
  margin: 80px auto;
  padding: 0 20px;
}

.jts-faq-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
}

.jts-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jts-faq-item {
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  transition: all 0.3s ease;
}

.jts-faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.jts-faq-icon {
  font-size: 22px;
  color: #22c55e;
}

.jts-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 26px;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.7;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.jts-faq-item.active .jts-faq-answer {
  max-height: 500px;
  padding: 0 26px 22px;
}

.jts-faq-item.active {
  border-color: rgba(34,197,94,0.6);
}
/* ===============================
   EXPLORE TOOLS SECTION
================================ */
.jts-explore-tools {
  margin: 80px auto;
  padding: 0 20px;
}

.jts-explore-wrap {
  max-width: 1200px;
  margin: auto;
  padding: 40px 32px;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
}

.jts-explore-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===============================
   GRID
================================ */
.jts-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ===============================
   CARD
================================ */
.jts-tool-card {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}

.jts-tool-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* ===============================
   ICON
================================ */
.jts-tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.jts-tool-icon.whatsapp {
  background: rgba(34,197,94,0.18);
  color: #22c55e;
}

.jts-tool-icon.telegram {
  background: rgba(59,130,246,0.18);
  color: #3b82f6;
}

.jts-tool-icon.file {
  background: rgba(168,85,247,0.18);
  color: #a855f7;
}

/* ===============================
   CONTENT
================================ */
.jts-tool-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.jts-tool-content p {
  font-size: 14px;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 900px) {
  .jts-tool-grid {
    grid-template-columns: 1fr;
  }

  .jts-explore-title {
    font-size: 24px;
  }
}

/* ======================================================
   HIGHLIGHTS
====================================================== */
.scam-highlight {
  background: rgba(239,68,68,.15);
  border-left: 4px solid #ef4444;
  padding: 12px 14px;
  border-radius: 12px;
}

.safe-highlight {
  background: rgba(34,197,94,.15);
  border-left: 4px solid #22c55e;
  padding: 12px 14px;
  border-radius: 12px;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 900px) {

  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    border-right: none;
    display: flex;
    z-index: auto;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .nav-toggle { display: block;
    position: absolute;
     z-index: 100000;  
    right:20px;
   }
.bis_skin_checked{
  z-index: 9999;
}
 .nav {
  position: fixed;                 /* 🔑 KEY FIX */
  top: 64px;
  right: 16px;

  width: 220px;
  padding: 12px;

  background: rgba(2,6,23,.98);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);

  display: none;
  flex-direction: column;
  gap: 8px;

  z-index: 99999;                  /* 🔥 ABOVE EVERYTHING */
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
}

  .nav.open { display: flex; }

  .content {
    padding: 18px;
   
  }

  .hero-visual {
    top: 20px !important;

 

    left: 90% !important;
    position: relative;
    transform: translateX(-50%);
    width: 250px;
    height: auto;
  }
.hero-visual img{
  display: block;
  width:60%;
}
  .resultLayout {
    grid-template-columns: 1fr;
  }

  .job-avatar-card {
    margin-top: 18px;
    width:100%;
  }

  .gauge { width: 220px; }
}
/* 🔵 Info */
.info-highlight {
  background: rgba(56,189,248,.12);
  border-left: 4px solid #38bdf8;
  padding: 14px;
  border-radius: 14px;
}

/* 🟠 Warning */
.warn-highlight {
  background: rgba(245,158,11,.15);
  border-left: 4px solid #f59e0b;
  padding: 14px;
  border-radius: 14px;
}

/* 🔴 Scam */
.scam-highlight {
  background: rgba(239,68,68,.18);
  border-left: 4px solid #ef4444;
  padding: 14px;
  border-radius: 14px;
}

.explain {
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;
}
/* ================= JTS HEADER ================= */

.jts-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(2,6,23,.65);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.jts-header-inner{
  max-width:1400px;
  margin:auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.jts-header-brand{
  display:flex;
  align-items:center;
}

.jts-header-logo{
  height:42px;
  width:auto;
  object-fit:contain;
}

/* NAV */
.jts-header-nav{
  display:flex;
  gap:30px;
}

.jts-header-nav a{
  font-size:14px;
  font-weight:600;
  color:#9ca3af;
  text-decoration:none;
  position:relative;
}

.jts-header-nav a:hover,
.jts-nav-active{
  color:#38bdf8;
}

.jts-nav-active::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:2px;
  background:#38bdf8;
  border-radius:6px;
}

/* TOGGLE */
.jts-header-toggle{
  display:none;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:900px){
  .jts-header-nav{
    position:absolute;
    top:64px;
    right:22px;
    background:rgba(2,6,23,.95);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    flex-direction:column;
    gap:18px;
    display:none;
    min-width:160px;
  }

  .jts-header-nav.jts-open{
    display:flex;
  }

  .jts-header-toggle{
    display:block;
  }
}

/* ================= JTS FOOTER ================= */

.jts-footer{
  margin-top:40px;
  padding:40px 20px;
  background:rgba(2,6,23,.7);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
}

.jts-footer-inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
}

.jts-footer-brand img{
  height:40px;
}

.jts-footer-brand p{
  margin-top:10px;
  font-size:13px;
  color:#9ca3af;
  max-width:360px;
}

.jts-footer-links{
  display:flex;
  gap:20px;
}

.jts-footer-links a{
  font-size:13px;
  color:#9ca3af;
  text-decoration:none;
}

.jts-footer-links a:hover{
  color:#38bdf8;
}

.jts-footer-copy{
  margin-top:30px;
  text-align:center;
  font-size:12px;
  color:#6b7280;
}

@media(max-width:768px){
  .jts-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  .jts-footer-links{
    justify-content:center;
  }
}
/* =====================================================
   INDEX PAGE – GLASSMORPHISM + GRADIENT
===================================================== */

/* ---------- HERO SECTION ---------- */
.jts-home-hero{
  position:relative;
  padding:110px 20px 90px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.25), transparent 40%),
    radial-gradient(circle at bottom left, rgba(56,189,248,.18), transparent 45%);
}

.jts-home-hero-content{
  max-width:1100px;
  margin:auto;
  padding:70px;
  border-radius:26px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}

/* badge */
.jts-hero-badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:rgba(56,189,248,.18);
  color:#38bdf8;
  margin-bottom:18px;
}

/* title */
.jts-hero-title{
  font-size:48px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.15;
}

/* description */
.jts-hero-description{
  margin-top:18px;
  max-width:760px;
  font-size:17px;
  line-height:1.6;
  color:#cbd5e1;
}

/* actions */
.jts-hero-actions{
  margin-top:34px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* ---------- TRUST STRIP ---------- */
.jts-trust-strip{
  margin-top:40px;
  padding:22px 20px;
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* ================= HERO IMAGE ================= */

.jts-hero-visual{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:30px;
  position:relative;
}

.jts-hero-visual img{
  max-width:480px;
  width:100%;
  height:auto;
  border-radius:22px;
  filter:drop-shadow(0 40px 120px rgba(0,0,0,.65));
  animation:jtsHeroFloat 6s ease-in-out infinite;
}

/* subtle floating animation */
@keyframes jtsHeroFloat{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-10px); }
  100%{ transform:translateY(0px); }
}

/* Mobile optimization */
@media(max-width:768px){
  .jts-hero-visual img{
    max-width:92%;
  }
}

.jts-trust-item{
  font-size:13px;
  font-weight:600;
  color:#e5e7eb;
  opacity:.9;
}

/* ---------- SECTIONS ---------- */
.jts-section-title{
  font-size:34px;
  font-weight:900;
  text-align:center;
  margin-bottom:14px;
}

.jts-section-subtitle{
  max-width:700px;
  margin:0 auto 60px;
  text-align:center;
  font-size:15px;
  color:#9ca3af;
}

/* ---------- FEATURES ---------- */
.jts-features{
  padding:100px 20px;
}

.jts-features-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.jts-feature-card{
  padding:34px 30px;
  border-radius:22px;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03)
  );
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 80px rgba(0,0,0,.45);
  transition:.35s ease;
}

.jts-feature-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 35px 120px rgba(0,0,0,.65);
}

.jts-feature-card h3{
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
}

.jts-feature-card p{
  font-size:14px;
  line-height:1.6;
  color:#cbd5e1;
}

/* ---------- HOW IT WORKS ---------- */
.jts-how{
  padding:100px 20px;
  background:
    radial-gradient(circle at left, rgba(14,165,233,.18), transparent 45%);
}

.jts-how-steps{
  max-width:1100px;
  margin:60px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.jts-how-step{
  padding:34px 30px;
  border-radius:22px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.03)
  );
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.jts-how-step span{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  color:#22c55e;
  margin-bottom:8px;
}

/* ---------- FAQ ---------- */
.jts-faq{
  padding:90px 20px;
  max-width:1000px;
  margin:auto;
}

.jts-faq-item{
  padding:26px 28px;
  border-radius:18px;
  margin-bottom:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
}

.jts-faq-item h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.jts-faq-item p{
  font-size:14px;
  color:#cbd5e1;
}

/* ---------- FINAL CTA ---------- */
.jts-final-cta{
  padding:110px 20px;
  text-align:center;
  background:
    radial-gradient(circle at center, rgba(34,197,94,.22), transparent 50%);
}

.jts-final-cta h2{
  font-size:40px;
  font-weight:900;
}

.jts-final-cta p{
  margin:14px 0 30px;
  font-size:16px;
  color:#cbd5e1;
}

/* ---------- BUTTONS ---------- */
.jts-btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:14px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:.3s ease;
}

.jts-btn-primary{
  background:linear-gradient(135deg,#22c55e,#4ade80);
  color:#022c22;
  box-shadow:0 18px 60px rgba(34,197,94,.45);
}

.jts-btn-primary:hover{
  transform:translateY(-3px) scale(1.04);
}

.jts-btn-secondary{
  border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
}

.jts-btn-secondary:hover{
  background:rgba(255,255,255,.06);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .jts-home-hero-content{
    padding:40px 26px;
  }
  .jts-hero-title{
    font-size:34px;
  }
  .jts-final-cta h2{
    font-size:30px;
  }
}


/* ---------- whatsapp page ---------- */
/* =====================================================
   WHATSAPP JOB SCAM PAGE – FINAL PREMIUM SAAS UI
   Advanced • Responsive • Discover-safe
===================================================== */

/* ---------- ROOT VARIABLES ---------- */
:root{
  --green:#22c55e;
  --green-soft:#4ade80;
  --green-dark:#16a34a;
  --danger:#ef4444;

  --text-main:#ffffff;
  --text-muted:#cbd5e1;

  --glass-border:rgba(255,255,255,.16);
  --glass-light:rgba(255,255,255,.08);
  --glass-dark:rgba(255,255,255,.02);

  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
}

/* ---------- GLOBAL BASE ---------- */
*{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  color:var(--text-main);
}

/* ---------- LINK SYSTEM ---------- */
a{
  color:var(--green);
  text-decoration:none;
  font-weight:600;
  transition:color .2s ease;
}

a:hover{ color:var(--green-soft); }
a:active{ color:var(--green-dark); }

a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:6px;
}

.jts-inline-link{
  position:relative;
}

.jts-inline-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--green),var(--green-soft));
  opacity:.6;
}

/* =====================================================
   HERO
===================================================== */

.jts-page-hero{
  max-width:1200px;
  margin:100px auto 90px;
  padding:76px 64px;
  text-align:center;

  background:
    radial-gradient(circle at top right, rgba(34,197,94,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));

  backdrop-filter:blur(26px);
  border-radius:var(--radius-xl);
  border:1px solid var(--glass-border);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);

  animation:fadeUpSoft .8s ease both;
}

.jts-page-hero h1{
  font-size:clamp(36px,4.5vw,54px);
  font-weight:900;
  letter-spacing:-.5px;
  margin:18px 0 14px;
}

.jts-page-subtitle{
  max-width:720px;
  margin:0 auto 32px;
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- HERO IMAGE ---------- */
.jts-hero-image{
  max-width:520px;
  width:100%;
  margin:30px auto 36px;
  display:block;
  border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:floatHero 9s ease-in-out infinite;
}

@keyframes floatHero{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.jts-hero-trust{
  margin-top:14px;
  font-size:13px;
  color:var(--green-soft);
  opacity:.9;
}

/* =====================================================
   CONTENT STRUCTURE
===================================================== */

.jts-content-section{
  max-width:1200px;
  margin:0 auto 90px;
  padding:0 22px;
  animation:fadeUpSoft .8s ease both;
}

/* ---------- GLASS CARD ---------- */
.jts-glass{
  background:linear-gradient(180deg,var(--glass-light),var(--glass-dark));
  backdrop-filter:blur(22px);

  border-radius:var(--radius-lg);
  padding:46px;
  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition:transform .25s ease, box-shadow .25s ease;
}

.jts-glass:hover{
  transform:translateY(-3px);
  box-shadow:0 36px 100px rgba(0,0,0,.65);
}

/* ---------- HEADINGS ---------- */
.jts-content-section h2{
  font-size:32px;
  font-weight:900;
  margin-bottom:16px;
  letter-spacing:-.35px;
}

.jts-content-section h3{
  font-size:18px;
  font-weight:800;
  margin-top:28px;
}

/* ---------- TEXT ---------- */
.jts-content-section p{
  font-size:15.6px;
  line-height:1.75;
  color:var(--text-muted);
  max-width:900px;
}

/* =====================================================
   BULLET / ICON SYSTEM
===================================================== */

.jts-list{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  list-style:none;
  padding:0;
}

.jts-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;

  padding:18px 20px;
  border-radius:var(--radius-md);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.10);
  transition:.25s ease;
}

.jts-list li:hover{
  transform:translateY(-4px);
  border-color:rgba(34,197,94,.5);
  box-shadow:0 18px 50px rgba(34,197,94,.18);
}

/* icon */
.jts-bullet-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;

  font-size:18px;
  font-weight:900;

  background:linear-gradient(135deg,var(--green),var(--green-soft));
  color:#022c22;

  box-shadow:0 8px 22px rgba(34,197,94,.45);
  flex-shrink:0;
}

/* =====================================================
   SCAM MESSAGE CARDS
===================================================== */

.jts-example-box{
  background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.08));
  border-left:4px solid var(--danger);

  padding:20px 22px;
  border-radius:var(--radius-md);
  margin-bottom:16px;

  font-size:14.8px;
  box-shadow:0 14px 40px rgba(239,68,68,.25);
  transition:.25s ease;
}

.jts-example-box:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 65px rgba(239,68,68,.38);
}

/* =====================================================
   FINAL CTA
===================================================== */

.jts-final-cta{
  margin-top:120px;
  padding:110px 20px;
  text-align:center;

  background:
    radial-gradient(circle at center, rgba(34,197,94,.22), transparent 58%);

  animation:fadeUpSoft .9s ease both;
}

.jts-final-cta h2{
  font-size:40px;
  font-weight:900;
}

.jts-final-cta p{
  margin:14px 0 30px;
  font-size:15.5px;
  color:var(--text-muted);
}

/* CTA pulse – subtle */
@keyframes ctaPulse{
  0%{ box-shadow:0 0 0 rgba(34,197,94,.35); }
  50%{ box-shadow:0 0 32px rgba(34,197,94,.75); }
  100%{ box-shadow:0 0 0 rgba(34,197,94,.35); }
}

.jts-final-cta .jts-btn-primary{
  animation:ctaPulse 3s infinite;
}

/* =====================================================
   ANIMATIONS (SAFE)
===================================================== */

@keyframes fadeUpSoft{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

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

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1024px){
  .jts-page-hero{
    padding:64px 46px;
  }

  .jts-glass{
    padding:38px;
  }

  .jts-content-section h2{
    font-size:28px;
  }
}

/* =====================================================
   MOBILE (SMALL & CLEAN)
===================================================== */

@media(max-width:768px){
  .jts-page-hero{
    margin-top:70px;
    padding:46px 24px;
  }

  .jts-page-hero h1{
    font-size:28px;
  }

  .jts-page-subtitle{
    font-size:14.8px;
    margin-bottom:26px;
  }

  .jts-hero-image{
    max-width:320px;
    margin:22px auto 26px;
  }

  .jts-content-section{
    margin-bottom:60px;
  }

  .jts-glass{
    padding:28px;
  }

  .jts-content-section h2{
    font-size:24px;
  }

  .jts-content-section p{
    font-size:14.5px;
  }

  .jts-list{
    grid-template-columns:1fr;
  }

  .jts-bullet-icon{
    width:36px;
    height:36px;
    font-size:16px;
  }

  .jts-example-box{
    font-size:14px;
  }

  .jts-final-cta{
    padding:70px 20px;
  }

  .jts-final-cta h2{
    font-size:26px;
  }
}
/* ======================================================
   RESET + BASE
====================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI;
  background:
    radial-gradient(900px 500px at 20% -10%, #1e293b 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #0f766e 0%, transparent 55%),
    #020617;
  color: #e5e7eb;
  overflow-x: hidden;
}

/* ======================================================
   APP LAYOUT
====================================================== */


/* ======================================================
   SIDEBAR / HEADER
====================================================== */
.sidebar {
  width: 240px;
  padding: 20px;
  background: rgba(2,6,23,.78);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { max-width: 150px; }

/* ======================================================
   NAVIGATION
====================================================== */
.nav-wrapper { position: relative; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.nav-item {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  color: #c7d2fe;
  transition: background .25s ease, transform .2s ease;
}

.nav-item:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}

.nav-item.active {
  background: rgba(56,189,248,.18);
  color: #e0f2fe;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  font-weight: 700;
  cursor: pointer;
}

/* ======================================================
   MAIN CONTENT
====================================================== */
.content {
  flex: 1;
  max-width: 1200px;
  margin: auto;
  padding: 36px;


}

/* ======================================================
   TITLE
====================================================== */
.title {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -.4px;
}

/* ======================================================
   TEXTAREA
====================================================== */
textarea {
  width: 100%;
  min-height: 170px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(2,6,23,.65);
  border: 1px solid rgba(255,255,255,.12);
  color: #f8fafc;
  font-size: 14.5px;
  line-height: 1.6;
  resize: none;
}

textarea:focus {
  outline: none;
  border-color: rgba(56,189,248,.6);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}

/* ======================================================
   FILE UPLOAD
====================================================== */
.glass-upload { margin-top: 16px; }

.upload-ui {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.upload-ui:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(56,189,248,.25);
}

.upload-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(56,189,248,.15);
  color: #38bdf8;
}

/* ======================================================
   ANALYZE BUTTON
====================================================== */
.scanBtn {
  margin-top: 22px;
  width: 100%;
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.scanBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(56,189,248,.25);
}

/* ======================================================
   HERO SLIDER (FIXED & CLEAN)
====================================================== */
.hero-visual {
  position: absolute;
  right: 0px;
  top: 90px;
  width: 300px;
  height: 380px;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
  z-index: 2;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.4,1.2,.6,1);
}

.hero-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-visual.hide {
  opacity: 0;
  transform: translateY(20px) scale(.95);
}

/* ======================================================
   RESULT PANEL
====================================================== */
.result {
  margin-top: 28px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.65));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  animation: fadeUp .6s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none; }

/* ======================================================
   RESULT LAYOUT
====================================================== */
.resultLayout {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 26px;
}

.resultLeft {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.resultRight {
  display: flex;
  justify-content: center;
}

/* ======================================================
   RESULT CARDS
====================================================== */
.resCard {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border-radius: 18px;
  padding: 22px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
}

.resCard h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
}

/* ======================================================
   SCORE METER
====================================================== */
.bigCard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge {
  width: 260px;
  margin: 20px auto 26px;
  position: relative;
}

.gauge-body {
  width: 100%;
  height: 140px;
  background: rgba(2,6,23,.95);
  border-radius: 140px 140px 0 0;
  overflow: hidden;
  position: relative;
}

.gauge-fill {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  transform: rotate(-90deg);
  transition: transform 1s cubic-bezier(.4,1.3,.6,1);
}

.gauge-fill.legit {
  background: linear-gradient(180deg,#22c55e,#16a34a);
}

.gauge-fill.suspicious {
  background: linear-gradient(180deg,#facc15,#f59e0b);
}

.gauge-fill.scam {
  background: linear-gradient(180deg,#ef4444,#b91c1c);
  animation: scamPulse 1.4s infinite;
}

@keyframes scamPulse {
  50% { box-shadow: 0 0 45px rgba(239,68,68,.7); }
}

.gauge-cover {
  position: absolute;
  left: 50%;
  bottom: 0;                /* ✅ NOT negative */
  transform: translateX(-50%) translateY(50%);

  width: 120px;
  height: 120px;

  background: rgba(2,6,23,.96);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5;
  border: 1px solid rgba(255,255,255,.12);
}

/* ======================================================
   TRUST BADGE (ANIMATED & PREMIUM)
====================================================== */
#badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 130px;
  padding: 12px 22px;

  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;

  border-radius: 999px;
  position: relative;
  overflow: hidden;

  margin-top: 12px;
  text-align: center;

  backdrop-filter: blur(12px);
  border: 2px solid transparent;
}

/* ===== Animated border ===== */
#badge::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
  );
  animation: badgeBorder 2.8s linear infinite;
}

#badge::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

/* Border animation */
@keyframes badgeBorder {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ======================================================
   BADGE STATES
====================================================== */

/* ✅ LEGIT */
#badge.legit {
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #ecfdf5;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.35),
    0 10px 35px rgba(34,197,94,.45);
}

/* ⚠️ SUSPICIOUS */
#badge.suspicious {
  background: linear-gradient(135deg,#facc15,#f59e0b);
  color: #1f2937;
  box-shadow:
    0 0 0 1px rgba(250,204,21,.35),
    0 10px 35px rgba(250,204,21,.45);
}

/* ❌ SCAM */
#badge.scam {
  background: linear-gradient(135deg,#ef4444,#b91c1c);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(239,68,68,.35),
    0 10px 40px rgba(239,68,68,.55);
  animation: scamPulse 1.6s infinite;
}
/* Base score number (always visible) */
/* FIX: ensure score number is ALWAYS visible */
#gaugeValue {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;          /* 🔑 prevents vertical text shift */
  margin-top: -26px;         /* tiny optical correction */
  z-index: 10;
}

.gauge-fill {
  z-index: 1;
}


/* Trust score number */
#gaugeValue {
  transition: color .4s ease, transform .3s ease;
}

.score-legit { color: #22c55e; }
.score-suspicious { color: #f59e0b; }
.score-scam { color: #ef4444; }

/* Extra pulse for scam */
@keyframes scamPulse {
  0% { box-shadow: 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 45px rgba(239,68,68,.8); }
  100% { box-shadow: 0 0 0 rgba(239,68,68,.4); }
}


/* ======================================================
   AVATAR CARD
====================================================== */
.job-avatar-card {
  max-width: 260px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
  );
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
  height:280px;
}

#jobAvatar {
  width: 120px;
  margin: 10px auto;
}

.avatar-speech {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #c7d2fe;
  background: rgba(56,189,248,.12);
  padding: 10px 12px;
  border-radius: 12px;
}

/* ======================================================
   HIGHLIGHTS
====================================================== */
.scam-highlight {
  background: rgba(239,68,68,.15);
  border-left: 4px solid #ef4444;
  padding: 12px 14px;
  border-radius: 12px;
}

.safe-highlight {
  background: rgba(34,197,94,.15);
  border-left: 4px solid #22c55e;
  padding: 12px 14px;
  border-radius: 12px;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 900px) {

  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    border-right: none;
    display: flex;
    z-index: auto;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .nav-toggle { display: block;
    position: absolute;
     z-index: 100000;  
    right:20px;
   }
.bis_skin_checked{
  z-index: 9999;
}
 .nav {
  position: fixed;                 /* 🔑 KEY FIX */
  top: 64px;
  right: 16px;

  width: 220px;
  padding: 12px;

  background: rgba(2,6,23,.98);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);

  display: none;
  flex-direction: column;
  gap: 8px;

  z-index: 99999;                  /* 🔥 ABOVE EVERYTHING */
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
}

  .nav.open { display: flex; }

  .content {
    padding: 18px;
   
  }

  .hero-visual {
    top: 550px;
    right: auto;

    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 250px;
    height: auto;
  }

  .resultLayout {
    grid-template-columns: 1fr;
  }

  .job-avatar-card {
    margin-top: 18px;
    width:100%;
  }

  .gauge { width: 220px; }
}
/* 🔵 Info */
.info-highlight {
  background: rgba(56,189,248,.12);
  border-left: 4px solid #38bdf8;
  padding: 14px;
  border-radius: 14px;
}

/* 🟠 Warning */
.warn-highlight {
  background: rgba(245,158,11,.15);
  border-left: 4px solid #f59e0b;
  padding: 14px;
  border-radius: 14px;
}

/* 🔴 Scam */
.scam-highlight {
  background: rgba(239,68,68,.18);
  border-left: 4px solid #ef4444;
  padding: 14px;
  border-radius: 14px;
}

.explain {
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;
}
/* ================= JTS HEADER ================= */

.jts-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(2,6,23,.65);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.jts-header-inner{
  max-width:1400px;
  margin:auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.jts-header-brand{
  display:flex;
  align-items:center;
}

.jts-header-logo{
  height:42px;
  width:auto;
  object-fit:contain;
}

/* NAV */
.jts-header-nav{
  display:flex;
  gap:30px;
}

.jts-header-nav a{
  font-size:14px;
  font-weight:600;
  color:#9ca3af;
  text-decoration:none;
  position:relative;
}

.jts-header-nav a:hover,
.jts-nav-active{
  color:#38bdf8;
}

.jts-nav-active::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:2px;
  background:#38bdf8;
  border-radius:6px;
}

/* TOGGLE */
.jts-header-toggle{
  display:none;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:900px){
  .jts-header-nav{
    position:absolute;
    top:64px;
    right:22px;
    background:rgba(2,6,23,.95);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    flex-direction:column;
    gap:18px;
    display:none;
    min-width:160px;
  }

  .jts-header-nav.jts-open{
    display:flex;
  }

  .jts-header-toggle{
    display:block;
  }
}

/* ================= JTS FOOTER ================= */

/* =====================================================
   INDEX PAGE – GLASSMORPHISM + GRADIENT
===================================================== */

/* ---------- HERO SECTION ---------- */
.jts-home-hero{
  position:relative;
  padding:110px 20px 90px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.25), transparent 40%),
    radial-gradient(circle at bottom left, rgba(56,189,248,.18), transparent 45%);
}

.jts-home-hero-content{
  max-width:1100px;
  margin:auto;
  padding:70px;
  border-radius:26px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}

/* badge */
.jts-hero-badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:rgba(56,189,248,.18);
  color:#38bdf8;
  margin-bottom:18px;
}

/* title */
.jts-hero-title{
  font-size:48px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.15;
}

/* description */
.jts-hero-description{
  margin-top:18px;
  max-width:760px;
  font-size:17px;
  line-height:1.6;
  color:#cbd5e1;
}

/* actions */
.jts-hero-actions{
  margin-top:34px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* ---------- TRUST STRIP ---------- */
.jts-trust-strip{
  margin-top:40px;
  padding:22px 20px;
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* ================= HERO IMAGE ================= */

.jts-hero-visual{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:30px;
  position:relative;
}

.jts-hero-visual img{
  max-width:480px;
  width:100%;
  height:auto;
  border-radius:22px;
  filter:drop-shadow(0 40px 120px rgba(0,0,0,.65));
  animation:jtsHeroFloat 6s ease-in-out infinite;
}

/* subtle floating animation */
@keyframes jtsHeroFloat{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-10px); }
  100%{ transform:translateY(0px); }
}

/* Mobile optimization */
@media(max-width:768px){
  .jts-hero-visual img{
    max-width:92%;
  }
}

.jts-trust-item{
  font-size:13px;
  font-weight:600;
  color:#e5e7eb;
  opacity:.9;
}

/* ---------- SECTIONS ---------- */
.jts-section-title{
  font-size:34px;
  font-weight:900;
  text-align:center;
  margin-bottom:14px;
}

.jts-section-subtitle{
  max-width:700px;
  margin:0 auto 60px;
  text-align:center;
  font-size:15px;
  color:#9ca3af;
}

/* ---------- FEATURES ---------- */
.jts-features{
  padding:100px 20px;
}

.jts-features-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.jts-feature-card{
  padding:34px 30px;
  border-radius:22px;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03)
  );
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 80px rgba(0,0,0,.45);
  transition:.35s ease;
}

.jts-feature-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 35px 120px rgba(0,0,0,.65);
}

.jts-feature-card h3{
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
}

.jts-feature-card p{
  font-size:14px;
  line-height:1.6;
  color:#cbd5e1;
}

/* ---------- HOW IT WORKS ---------- */
.jts-how{
  padding:100px 20px;
  background:
    radial-gradient(circle at left, rgba(14,165,233,.18), transparent 45%);
}

.jts-how-steps{
  max-width:1100px;
  margin:60px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.jts-how-step{
  padding:34px 30px;
  border-radius:22px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.03)
  );
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.jts-how-step span{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  color:#22c55e;
  margin-bottom:8px;
}

/* ---------- FAQ ---------- */
.jts-faq{
  padding:90px 20px;
  max-width:1000px;
  margin:auto;
}

.jts-faq-item{
  padding:26px 28px;
  border-radius:18px;
  margin-bottom:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
}

.jts-faq-item h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.jts-faq-item p{
  font-size:14px;
  color:#cbd5e1;
}

/* ---------- FINAL CTA ---------- */
.jts-final-cta{
  padding:110px 20px;
  text-align:center;
  background:
    radial-gradient(circle at center, rgba(34,197,94,.22), transparent 50%);
}

.jts-final-cta h2{
  font-size:40px;
  font-weight:900;
}

.jts-final-cta p{
  margin:14px 0 30px;
  font-size:16px;
  color:#cbd5e1;
}

/* ---------- BUTTONS ---------- */
.jts-btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:14px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:.3s ease;
}

.jts-btn-primary{
  background:linear-gradient(135deg,#22c55e,#4ade80);
  color:#022c22;
  box-shadow:0 18px 60px rgba(34,197,94,.45);
}

.jts-btn-primary:hover{
  transform:translateY(-3px) scale(1.04);
}

.jts-btn-secondary{
  border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
}

.jts-btn-secondary:hover{
  background:rgba(255,255,255,.06);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .jts-home-hero-content{
    padding:40px 26px;
  }
  .jts-hero-title{
    font-size:34px;
  }
  .jts-final-cta h2{
    font-size:30px;
  }
}


/* ---------- whatsapp page ---------- */
/* =====================================================
   WHATSAPP JOB SCAM PAGE – FINAL PREMIUM SAAS UI
   Advanced • Responsive • Discover-safe
===================================================== */

/* ---------- ROOT VARIABLES ---------- */
:root{
  --green:#22c55e;
  --green-soft:#4ade80;
  --green-dark:#16a34a;
  --danger:#ef4444;

  --text-main:#ffffff;
  --text-muted:#cbd5e1;

  --glass-border:rgba(255,255,255,.16);
  --glass-light:rgba(255,255,255,.08);
  --glass-dark:rgba(255,255,255,.02);

  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
}

/* ---------- GLOBAL BASE ---------- */
*{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  color:var(--text-main);
}

/* ---------- LINK SYSTEM ---------- */
a{
  color:var(--green);
  text-decoration:none;
  font-weight:600;
  transition:color .2s ease;
}

a:hover{ color:var(--green-soft); }
a:active{ color:var(--green-dark); }

a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:6px;
}

.jts-inline-link{
  position:relative;
}

.jts-inline-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--green),var(--green-soft));
  opacity:.6;
}

/* =====================================================
   HERO
===================================================== */

.jts-page-hero{
  max-width:1200px;
  margin:100px auto 90px;
  padding:76px 64px;
  text-align:center;

  background:
    radial-gradient(circle at top right, rgba(34,197,94,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));

  backdrop-filter:blur(26px);
  border-radius:var(--radius-xl);
  border:1px solid var(--glass-border);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);

  animation:fadeUpSoft .8s ease both;
}

.jts-page-hero h1{
  font-size:clamp(36px,4.5vw,54px);
  font-weight:900;
  letter-spacing:-.5px;
  margin:18px 0 14px;
}

.jts-page-subtitle{
  max-width:720px;
  margin:0 auto 32px;
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- HERO IMAGE ---------- */
.jts-hero-image{
  max-width:520px;
  width:100%;
  margin:30px auto 36px;
  display:block;
  border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:floatHero 9s ease-in-out infinite;
}

@keyframes floatHero{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.jts-hero-trust{
  margin-top:14px;
  font-size:13px;
  color:var(--green-soft);
  opacity:.9;
}

/* =====================================================
   CONTENT STRUCTURE
===================================================== */

.jts-content-section{
  max-width:1200px;
  margin:0 auto 90px;
  padding:0 22px;
  animation:fadeUpSoft .8s ease both;
}

/* ---------- GLASS CARD ---------- */
.jts-glass{
  background:linear-gradient(180deg,var(--glass-light),var(--glass-dark));
  backdrop-filter:blur(22px);

  border-radius:var(--radius-lg);
  padding:46px;
  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition:transform .25s ease, box-shadow .25s ease;
}

.jts-glass:hover{
  transform:translateY(-3px);
  box-shadow:0 36px 100px rgba(0,0,0,.65);
}

/* ---------- HEADINGS ---------- */
.jts-content-section h2{
  font-size:32px;
  font-weight:900;
  margin-bottom:16px;
  letter-spacing:-.35px;
}

.jts-content-section h3{
  font-size:18px;
  font-weight:800;
  margin-top:28px;
}

/* ---------- TEXT ---------- */
.jts-content-section p{
  font-size:15.6px;
  line-height:1.75;
  color:var(--text-muted);
  max-width:900px;
}

/* =====================================================
   BULLET / ICON SYSTEM
===================================================== */

.jts-list{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  list-style:none;
  padding:0;
}

.jts-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;

  padding:18px 20px;
  border-radius:var(--radius-md);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.10);
  transition:.25s ease;
}

.jts-list li:hover{
  transform:translateY(-4px);
  border-color:rgba(34,197,94,.5);
  box-shadow:0 18px 50px rgba(34,197,94,.18);
}

/* icon */
.jts-bullet-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;

  font-size:18px;
  font-weight:900;

  background:linear-gradient(135deg,var(--green),var(--green-soft));
  color:#022c22;

  box-shadow:0 8px 22px rgba(34,197,94,.45);
  flex-shrink:0;
}

/* =====================================================
   SCAM MESSAGE CARDS
===================================================== */

.jts-example-box{
  background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.08));
  border-left:4px solid var(--danger);

  padding:20px 22px;
  border-radius:var(--radius-md);
  margin-bottom:16px;

  font-size:14.8px;
  box-shadow:0 14px 40px rgba(239,68,68,.25);
  transition:.25s ease;
}

.jts-example-box:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 65px rgba(239,68,68,.38);
}

/* =====================================================
   FINAL CTA
===================================================== */

.jts-final-cta{
  margin-top:120px;
  padding:110px 20px;
  text-align:center;

  background:
    radial-gradient(circle at center, rgba(34,197,94,.22), transparent 58%);

  animation:fadeUpSoft .9s ease both;
}

.jts-final-cta h2{
  font-size:40px;
  font-weight:900;
}

.jts-final-cta p{
  margin:14px 0 30px;
  font-size:15.5px;
  color:var(--text-muted);
}

/* CTA pulse – subtle */
@keyframes ctaPulse{
  0%{ box-shadow:0 0 0 rgba(34,197,94,.35); }
  50%{ box-shadow:0 0 32px rgba(34,197,94,.75); }
  100%{ box-shadow:0 0 0 rgba(34,197,94,.35); }
}

.jts-final-cta .jts-btn-primary{
  animation:ctaPulse 3s infinite;
}

/* =====================================================
   ANIMATIONS (SAFE)
===================================================== */

@keyframes fadeUpSoft{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

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

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1024px){
  .jts-page-hero{
    padding:64px 46px;
  }

  .jts-glass{
    padding:38px;
  }

  .jts-content-section h2{
    font-size:28px;
  }
}

/* =====================================================
   MOBILE (SMALL & CLEAN)
===================================================== */

@media(max-width:768px){
  .jts-page-hero{
    margin-top:70px;
    padding:46px 24px;
  }

  .jts-page-hero h1{
    font-size:28px;
  }

  .jts-page-subtitle{
    font-size:14.8px;
    margin-bottom:26px;
  }

  .jts-hero-image{
    max-width:320px;
    margin:22px auto 26px;
  }

  .jts-content-section{
    margin-bottom:60px;
  }

  .jts-glass{
    padding:28px;
  }

  .jts-content-section h2{
    font-size:24px;
  }

  .jts-content-section p{
    font-size:14.5px;
  }

  .jts-list{
    grid-template-columns:1fr;
  }

  .jts-bullet-icon{
    width:36px;
    height:36px;
    font-size:16px;
  }

  .jts-example-box{
    font-size:14px;
  }

  .jts-final-cta{
    padding:70px 20px;
  }

  .jts-final-cta h2{
    font-size:26px;
  }
}
/* ======================================================
   TEXTAREA – NATURAL TEXT + ANIMATION FEEL
====================================================== */

textarea {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: 0.15px;

  caret-color: #38bdf8;               /* visible typing cursor */
  color: #f8fafc;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

/* placeholder looks human, not system-default */
textarea::placeholder {
  color: rgba(203, 213, 225, 0.55);
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* focus = gentle lift + glow */
textarea:focus {
  background: rgba(2, 6, 23, 0.85);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow:
    0 0 0 3px rgba(56,189,248,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transform: translateY(-1px);
}

/* subtle typing pulse (very light, safe) */
@keyframes typingGlow {
  0% { box-shadow: inset 0 0 0 rgba(56,189,248,.0); }
  50% { box-shadow: inset 0 0 18px rgba(56,189,248,.08); }
  100% { box-shadow: inset 0 0 0 rgba(56,189,248,.0); }
}

/* apply only while typing */
textarea.is-typing {
  animation: typingGlow 1.8s ease infinite;
}
/* =====================================================
   FOOTER – DESKTOP FIX, NO OVERLAP, NO SPLIT
===================================================== */

/* =====================================================
   FOOTER – CLEAN, NON-OVERLAPPING, RESPONSIVE
===================================================== */
/* =====================================================
   FOOTER – VISUALLY DISTINCT & CLEAN
===================================================== */

.jts-footer{
  position:relative;
  margin-top:140px;

  /* subtle gradient difference */
  background:
    linear-gradient(
      180deg,
      rgba(8,16,32,0.85),
      rgba(5,10,22,1)
    );

  border-top:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}

/* TOP GLOW DIVIDER (KEY FIX) */
.jts-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(34,197,94,0.6),
    rgba(56,189,248,0.6),
    transparent
  );
}

/* MAIN FOOTER CONTENT */
.jts-footer-container{
  max-width:1200px;
  margin:0 auto;
  padding:70px 20px 50px;

  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  align-items:flex-start;
}

/* BRAND */
.jts-footer-brand img{
  width:170px;
  margin-bottom:16px;
  height: auto;
}

.jts-footer-brand p{
  max-width:420px;
  font-size:15px;
  line-height:1.7;
  color:#cbd5e1;
  opacity:.95;
}

/* NAV LINKS */
.jts-footer-nav{
  display:flex;
  gap:26px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.jts-footer-nav a{
  color:#e5e7eb;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  position:relative;
}

.jts-footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,#22c55e,#38bdf8);
  transition:width .3s ease;
}

.jts-footer-nav a:hover::after{
  width:100%;
}

/* COPYRIGHT BAR */
.jts-footer-bottom{
  text-align:center;
  padding:22px 16px;
  margin-top:30px;

  border-top:1px solid rgba(255,255,255,0.08);
  font-size:14px;
  color:#94a3b8;
  opacity:.9;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1024px){
  .jts-footer-container{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
  }

  .jts-footer-nav{
    justify-content:center;
  }

  .jts-footer-brand p{
    margin:0 auto;
  }
}

@media(max-width:480px){
  .jts-footer{
    margin-top:100px;
  }

  .jts-footer-container{
    padding:50px 18px 40px;
  }

  .jts-footer-nav{
    gap:18px;
  }
}