/* =====================================================
   JTSX INDEX – FINAL, FIXED, ISOLATED
===================================================== */

/* ---------- PAGE ISOLATION ---------- */
.jtsx-page,
.jtsx-page * {
  box-sizing: border-box;
}

.jtsx-page {
  width: 100%;
  overflow-x: hidden;
}

/* ---------- CONTAINER ---------- */
.jtsx-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =====================================================
   HERO
===================================================== */
.jtsx-hero {
  padding: 30px 0 100px;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.22), transparent 45%),
    radial-gradient(circle at bottom left, rgba(56,189,248,.18), transparent 45%);
}

/* HERO SURFACE (KEY FIX) */
.jtsx-hero-surface {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
  );
  border-radius: 28px;
  padding: 70px 60px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 40px 120px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* GRID */
.jtsx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 70px;
  align-items: center;
}

/* ---------- HERO TEXT ---------- */
.jtsx-badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(34,197,94,.18);
  color: #22c55e;
  font-size: 13px;
  font-weight: 700;
}

.jtsx-title {
  font-size: clamp(36px, 3.0vw, 54px);
  font-weight: 900;
  line-height: 1.15;
  margin: 18px 0;
  letter-spacing: -0.5px;
}

.jtsx-subtitle {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.75;
  color: #cbd5e1;
}

/* ---------- ACTIONS ---------- */
.jtsx-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.jtsx-btn-primary {
  padding: 15px 38px;
  border-radius: 14px;
  background: linear-gradient(135deg,#22c55e,#4ade80);
  color: #022c22;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 18px 60px rgba(34,197,94,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jtsx-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(34,197,94,.65);
  color:white;
}

.jtsx-btn-secondary {
  padding: 15px 30px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  color: #e5e7eb;
  text-decoration: none;
  transition: background .25s ease;
}

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

/* ---------- TRUST ---------- */
.jtsx-trust {
  margin-top: 26px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  font-size: 13px;
  color: #e5e7eb;
  opacity: .9;
}

/* ---------- HERO IMAGE ---------- */
.jtsx-hero-image {
  display: flex;
  justify-content: center;
}

.jtsx-hero-image img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 24px;
  filter: drop-shadow(0 35px 100px rgba(0,0,0,.65));
  animation: jtsx-float 7s ease-in-out infinite;
}

@keyframes jtsx-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =====================================================
   SECTIONS
===================================================== */
.jtsx-section {
  padding: 100px 0;
}

.jtsx-dark {
  background: rgba(255,255,255,.03);
}

.jtsx-section-title {
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 60px;
  letter-spacing: -0.4px;
}

/* ---------- GRIDS ---------- */
.jtsx-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}

.jtsx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 36px;
}

/* ---------- CARDS ---------- */
.jtsx-card,
.jtsx-step {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.02)
  );
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 36px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.jtsx-card:hover,
.jtsx-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.jtsx-icon,
.jtsx-step-icon {
  font-size: 38px;
  margin-bottom: 14px;
}

.jtsx-card h3,
.jtsx-step h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.jtsx-card p,
.jtsx-step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #cbd5e1;
}

/* =====================================================
   CTA
===================================================== */
.jtsx-cta {
  padding: 120px 0;
  background:
    radial-gradient(circle at center, rgba(34,197,94,.28), transparent 55%);
}

.jtsx-cta-inner {
  max-width: 720px;
  margin: auto;
  text-align: center;
}

.jtsx-cta-icon {
  font-size: 56px;
  margin-bottom: 14px;
}

.jtsx-cta-inner h2 {
  font-size: 40px;
  font-weight: 900;
}

.jtsx-cta-inner p {
  margin: 14px auto 30px;
  font-size: 16px;
  color: #cbd5e1;
  max-width: 560px;
  line-height: 24px;
}

.jtsx-cta-btn {
  margin-top: 10px;
}

.jtsx-cta-trust {
  margin-top: 28px;
  font-size: 13px;
  opacity: .85;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1024px) {

  .jtsx-hero-surface {
    padding: 60px 40px;
  }

  .jtsx-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .jtsx-subtitle {
    margin: 0 auto;
    font-size: 12px;
  }

  .jtsx-actions {
    justify-content: center;
  }

  .jtsx-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .jtsx-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .jtsx-hero {
    padding: 20px 0 80px;
  }

  .jtsx-hero-surface {
    padding: 44px 26px;
  }

  .jtsx-title {
    font-size: 18px;
  }

  .jtsx-section {
    padding: 70px 0;
  }

  .jtsx-grid-4 {
    grid-template-columns: 1fr;
  }

  .jtsx-cta-inner h2 {
    font-size: 28px;
  }
}
/* =====================================
   SMART KEYWORD ANIMATION (ADVANCED)
===================================== */

.jtsx-smart-title {
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 700px;
}

/* BASE WORD */
.smart-word {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font-weight: 900;
  color: #ffffff;
}

/* UNDERLINE SYSTEM */
.smart-word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  border-radius: 6px;
  animation: underlineGrow 1.2s ease forwards;
}

/* WHATSAPP – DATA GREEN */
.smart-word.wa::after {
  background: linear-gradient(
    90deg,
    #22c55e,
    #4ade80,
    #22c55e
  );
  animation-delay: .3s;
}

/* TELEGRAM – SIGNAL BLUE */
.smart-word.tg::after {
  background: linear-gradient(
    90deg,
    #38bdf8,
    #60a5fa,
    #38bdf8
  );
  animation-delay: .55s;
}

/* FAKE JOB – WARNING AMBER */
.smart-word.fake::after {
  background: linear-gradient(
    90deg,
    #fb923c,
    #facc15,
    #fb923c
  );
  animation-delay: .8s;
}

/* AMPERSAND */
.amp {
  margin: 0 6px;
  opacity: .7;
}

/* KEYFRAME */
@keyframes underlineGrow {
  from {
    width: 0%;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}
.smart-word::after {
  box-shadow: 0 0 12px rgba(255,255,255,.15);
}
/* =====================================================
   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;
  height: auto;
  margin-bottom:16px;
}

.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;
  }
}

/* ======================================================
   JTSX FAQ – RESPONSIVE, FOLDABLE, SEO-SAFE
====================================================== */

/* FAQ Wrapper */
.jtsx-faq{
  max-width:1000px;
  margin:0 auto;
}

/* FAQ Item */
.jtsx-faq-item{
  margin-bottom:18px;
  border-radius:18px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.03)
  );
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}

/* Hover (desktop only feel) */
.jtsx-faq-item:hover{
  border-color:rgba(34,197,94,.45);
  box-shadow:0 20px 60px rgba(34,197,94,.15);
}

/* Question */
.jtsx-faq-item h3{
  margin:0;
  padding:20px 22px;
  font-size:16px;
  font-weight:800;
  line-height:1.4;
  cursor:pointer;
  position:relative;
  color:#f8fafc;
}

/* Plus / Minus Icon */
.jtsx-faq-item h3::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  font-weight:900;
  color:#22c55e;
  transition:transform .3s ease;
}

/* Answer */
.jtsx-faq-item p{
  max-height:0;
  overflow:hidden;
  margin:0;
  padding:0 22px;
  font-size:14.5px;
  line-height:1.7;
  color:#cbd5e1;
  transition:
    max-height .45s ease,
    padding .35s ease,
    opacity .3s ease;
  opacity:0;
}

/* OPEN STATE */
.jtsx-faq-item.open h3::after{
  content:"−";
  transform:translateY(-50%) rotate(180deg);
}

.jtsx-faq-item.open p{
  max-height:500px;
  padding:0 22px 22px;
  opacity:1;
}

/* ------------------------------------------------------
   SMOOTH ENTRANCE ANIMATION
------------------------------------------------------ */
@keyframes faqFadeUp{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.jtsx-faq-item{
  animation:faqFadeUp .6s ease both;
}

/* ------------------------------------------------------
   MOBILE OPTIMIZATION
------------------------------------------------------ */
@media(max-width:768px){
  .jtsx-faq-item h3{
    font-size:15px;
    padding:18px 18px;
  }

  .jtsx-faq-item h3::after{
    right:18px;
  }

  .jtsx-faq-item p{
    font-size:14px;
  }
}

/* ------------------------------------------------------
   ACCESSIBILITY / REDUCED MOTION
------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .jtsx-faq-item,
  .jtsx-faq-item p{
    animation:none !important;
    transition:none !important;
  }
}