/* =====================================================
   JURAGAN404OFFICIAL — Global CSS
   Theme: Cyber-Glassmorphism | Dark Gold
   Copyright: JURAGAN404OFFICIAL X SEO-MIGRAIN
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ===== CSS Variables ===== */
:root {
  --bg-base:        #06080F;
  --bg-card:        rgba(255,255,255,0.03);
  --bg-card-hover:  rgba(255,255,255,0.065);
  --border-gold:    rgba(255,215,0,0.2);
  --border-glow:    rgba(255,215,0,0.5);
  --gold:           #FFD700;
  --gold-dim:       #C8A800;
  --gold-light:     #FFF0A0;
  --neon-green:     #39FF14;
  --neon-red:       #FF4444;
  --neon-yellow:    #FFCC00;
  --text-primary:   #F0E6C8;
  --text-secondary: rgba(240,230,200,0.55);
  --text-muted:     rgba(240,230,200,0.35);
  --font-main:      'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --radius-sm:      10px;
  --radius-md:      18px;
  --radius-lg:      28px;
  --shadow-gold:    0 0 28px rgba(255,215,0,0.12);
  --shadow-glow:    0 0 60px rgba(255,215,0,0.07);
  --transition:     0.25s cubic-bezier(.4,0,.2,1);
}

/* ===== Reset & Base ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family: var(--font-main);
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.65;
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius:3px; }

/* ===== Background Radial Glow ===== */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 35% at 15% 10%, rgba(255,215,0,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 85%, rgba(57,255,20,0.04) 0%, transparent 60%);
}

/* ===== Navbar ===== */
.j4-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(6,8,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-gold);
}

.j4-navbar .container { max-width:1280px; }

.j4-brand {
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none;
}
.j4-brand-logo { height:42px; width:auto; }
.j4-brand-name {
  font-size:1rem; font-weight:800; letter-spacing:.5px;
  background: linear-gradient(135deg, #FFD700, #FFF0A0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.j4-nav-link {
  color: var(--text-secondary) !important;
  font-size:.82rem; font-weight:600; letter-spacing:.3px;
  padding:.45rem .9rem !important;
  border-radius:var(--radius-sm);
  transition: var(--transition);
  text-transform:uppercase;
  white-space:nowrap;
}
.j4-nav-link:hover, .j4-nav-link.active {
  color: var(--gold) !important;
  background: rgba(255,215,0,0.08);
}

.j4-btn-login {
  background: rgba(255,215,0,0.08);
  border: 1px solid var(--border-gold);
  color: var(--gold) !important;
  border-radius:60px;
  padding:.4rem 1.25rem !important;
  font-size:.82rem; font-weight:700;
  transition: var(--transition);
}
.j4-btn-login:hover {
  background: rgba(255,215,0,0.18);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255,215,0,0.25);
}

.j4-btn-daftar {
  background: linear-gradient(135deg, #C8A800, #FFD700);
  color: #06080F !important;
  border-radius:60px;
  padding:.4rem 1.4rem !important;
  font-size:.82rem; font-weight:800;
  transition: var(--transition);
  border:none;
}
.j4-btn-daftar:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,215,0,0.4);
  color:#06080F !important;
}

/* ===== Glass Card ===== */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  transition: var(--transition);
  position:relative;
  overflow:hidden;
}
.glass-card::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,215,0,0.03) 0%, transparent 60%);
  pointer-events:none;
}
.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255,215,0,0.4);
  box-shadow: var(--shadow-gold);
  transform:translateY(-3px);
}

/* ===== Section ===== */
.j4-section { padding:5rem 0; position:relative; z-index:1; }
.j4-section-sm { padding:3rem 0; position:relative; z-index:1; }
.j4-section-title {
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.2;
  margin-bottom:.5rem;
}
.j4-section-subtitle {
  color: var(--text-secondary);
  font-size:.95rem;
  max-width:560px;
}
.j4-gold-text {
  background:linear-gradient(135deg,#FFD700,#FFF0A0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Section Divider */
.j4-divider {
  border:none; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-gold),transparent);
  margin:0;
}

/* ===== Hero Section ===== */
.j4-hero {
  min-height: 92vh;
  display:flex; align-items:center;
  position:relative; overflow:hidden; z-index:1;
  padding:5rem 0;
}
.j4-hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,215,0,0.08); border:1px solid var(--border-gold);
  border-radius:60px; padding:.3rem 1rem;
  font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.5rem;
}
.j4-hero-title {
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:900; line-height:1.1; letter-spacing:-1px;
  margin-bottom:1.25rem;
}
.j4-hero-desc {
  font-size:1.05rem; color:var(--text-secondary);
  max-width:540px; margin-bottom:2rem;
}
.j4-hero-img-wrap {
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-gold);
  box-shadow: var(--shadow-gold), 0 0 0 1px rgba(255,215,0,0.05);
  position:relative;
  width:100%;
}
.j4-hero-img-wrap img {
  width:100%;
  height:auto;
  display:block;
}
.j4-hero-img-wrap.compact {
  border-radius:var(--radius-lg);
}
.j4-hero-img-wrap.compact img {
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:991.98px) {
  .j4-hero-img-wrap img,
  .j4-hero-img-wrap.compact img { width:100%; height:auto; }
}

/* ===== Buttons (Global) ===== */
.btn-gold {
  background:linear-gradient(135deg,#C8A800,#FFD700);
  color:#06080F; font-weight:800; border:none;
  border-radius:60px; padding:.75rem 2rem;
  font-size:.9rem; letter-spacing:.5px; text-transform:uppercase;
  transition:var(--transition); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,215,0,0.4); color:#06080F; }

.btn-outline-gold {
  background:transparent;
  color:var(--gold); border:1.5px solid var(--border-gold);
  border-radius:60px; padding:.75rem 2rem;
  font-size:.9rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  transition:var(--transition); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-outline-gold:hover { background:rgba(255,215,0,0.1); border-color:var(--gold); color:var(--gold); }

/* ===== Quick Nav Grid ===== */
.quick-nav-card {
  text-decoration:none; display:flex; flex-direction:column; align-items:center;
  gap:.75rem; padding:1.5rem 1rem; border-radius:var(--radius-md);
  background:var(--bg-card); border:1px solid var(--border-gold);
  transition:var(--transition); text-align:center;
}
.quick-nav-card:hover {
  background:var(--bg-card-hover); border-color:rgba(255,215,0,.5);
  box-shadow:var(--shadow-gold); transform:translateY(-4px);
}
.quick-nav-icon {
  width:52px; height:52px; border-radius:16px;
  background:rgba(255,215,0,0.1); border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.quick-nav-label { font-size:.82rem; font-weight:700; color:var(--text-primary); letter-spacing:.3px; }

/* ===== Tools Card / Generator ===== */
.tool-card {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  padding:2rem;
}
.tool-card-header {
  border-bottom:1px solid var(--border-gold);
  padding-bottom:1.25rem; margin-bottom:1.5rem;
}
.tool-label {
  display:inline-block; font-size:.7rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); background:rgba(255,215,0,0.1);
  border:1px solid var(--border-gold); border-radius:4px;
  padding:.2rem .6rem; margin-bottom:.75rem;
}
.tool-title { font-size:1.4rem; font-weight:800; }
.tool-desc { color:var(--text-secondary); font-size:.88rem; margin-top:.4rem; }

/* Form Controls (Custom) */
.j4-select, .j4-input {
  background:rgba(255,255,255,0.04); border:1px solid var(--border-gold);
  color:var(--text-primary); border-radius:var(--radius-sm);
  padding:.65rem 1rem; width:100%; font-family:var(--font-main);
  font-size:.9rem; transition:var(--transition); outline:none; appearance:none;
}
.j4-select:focus, .j4-input:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,215,0,0.15);
}
.j4-select option { background:#0e1120; color:var(--text-primary); }
.j4-label { font-size:.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; display:block; letter-spacing:.3px; }

/* ===== Generator Output Box ===== */
.gen-output {
  background:rgba(0,0,0,0.35); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1.5rem;
  font-family:var(--font-mono); min-height:120px;
  position:relative; overflow:hidden;
}
.gen-output-placeholder { color:var(--text-muted); font-size:.85rem; text-align:center; margin-top:1rem; }

/* Angka Togel output */
.togel-set {
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; align-items:center;
}
.togel-digit {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:rgba(255,215,0,0.1); border:1.5px solid var(--gold);
  font-size:1.3rem; font-weight:700; font-family:var(--font-mono); color:var(--gold);
  animation: pop-in .35s ease backwards;
}
@keyframes pop-in { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
.togel-set-label { font-size:.7rem; color:var(--text-muted); font-weight:600; letter-spacing:1px; width:100%; }

/* Slot pola output */
.slot-step {
  display:flex; align-items:flex-start; gap:1rem;
  padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:rgba(255,215,0,0.04); border:1px solid rgba(255,215,0,.1);
  margin-bottom:.6rem; animation:pop-in .3s ease backwards;
}
.slot-step-num {
  min-width:28px; height:28px; border-radius:8px;
  background:var(--gold); color:#06080F; font-weight:800; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.slot-step-text { font-size:.88rem; color:var(--text-primary); line-height:1.5; }
.slot-step-badge {
  font-size:.68rem; font-weight:700; padding:.1rem .45rem; border-radius:4px;
  margin-left:.3rem; vertical-align:middle;
}
.badge-spin { background:rgba(57,255,20,.15); color:var(--neon-green); border:1px solid rgba(57,255,20,.3); }
.badge-raise { background:rgba(255,100,0,.15); color:#FF6400; border:1px solid rgba(255,100,0,.3); }
.badge-buy  { background:rgba(255,215,0,.15); color:var(--gold); border:1px solid var(--border-gold); }
.badge-turbo{ background:rgba(100,100,255,.15); color:#8888FF; border:1px solid rgba(100,100,255,.3); }

/* ===== RTP Badge / Card ===== */
.rtp-card {
  background:var(--bg-card); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1.25rem; position:relative;
  transition:var(--transition); overflow:hidden;
}
.rtp-card:hover { border-color:rgba(255,215,0,.45); box-shadow:var(--shadow-gold); }
.rtp-game-name { font-size:.88rem; font-weight:700; margin-bottom:.25rem; }
.rtp-provider { font-size:.72rem; color:var(--text-muted); margin-bottom:.75rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.rtp-bar-wrap { background:rgba(255,255,255,0.07); border-radius:60px; height:8px; overflow:hidden; margin-bottom:.5rem; }
.rtp-bar { height:100%; border-radius:60px; transition:width 1.2s ease; }
.rtp-bar.high   { background:linear-gradient(90deg,#39FF14,#20C404); }
.rtp-bar.medium { background:linear-gradient(90deg,#FFCC00,#FF8800); }
.rtp-bar.low    { background:linear-gradient(90deg,#FF4444,#CC0000); }
.rtp-pct {
  font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
  transition:color .5s;
}
.rtp-pct.high   { color:var(--neon-green); }
.rtp-pct.medium { color:var(--neon-yellow); }
.rtp-pct.low    { color:var(--neon-red); }
.rtp-badge-pill {
  position:absolute; top:.75rem; right:.75rem;
  font-size:.62rem; font-weight:700; padding:.15rem .5rem; border-radius:60px;
  letter-spacing:.5px; text-transform:uppercase;
}
.rtp-badge-pill.high   { background:rgba(57,255,20,.15); color:var(--neon-green); border:1px solid rgba(57,255,20,.3); }
.rtp-badge-pill.medium { background:rgba(255,204,0,.15); color:var(--neon-yellow); border:1px solid rgba(255,204,0,.3); }
.rtp-badge-pill.low    { background:rgba(255,68,68,.15); color:var(--neon-red); border:1px solid rgba(255,68,68,.3); }
.rtp-updated { font-size:.68rem; color:var(--text-muted); margin-top:.35rem; }

/* ===== Payment Method Cards ===== */
.payment-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-card); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1rem 1.25rem;
  transition:var(--transition);
}
.payment-card:hover { border-color:rgba(255,215,0,.4); box-shadow:var(--shadow-gold); }
.payment-icon-wrap {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:rgba(255,215,0,0.08); border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.payment-name { font-size:.9rem; font-weight:700; }
.payment-speed {
  font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:60px; display:inline-block; margin-top:.2rem;
}
.speed-instant { background:rgba(57,255,20,.12); color:var(--neon-green); border:1px solid rgba(57,255,20,.25); }
.speed-fast    { background:rgba(255,215,0,.12); color:var(--gold); border:1px solid var(--border-gold); }

/* ===== Winner Feed Ticker ===== */
.j4-ticker-wrap {
  background:rgba(0,0,0,.5); border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold); overflow:hidden; padding:.4rem 0; position:relative;
}
.j4-ticker-label {
  position:absolute; left:0; top:0; bottom:0; z-index:2;
  background:var(--gold); color:#06080F; font-size:.7rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; padding:0 1rem; white-space:nowrap;
}
.j4-ticker-track {
  display:flex; gap:0; white-space:nowrap; padding-left:110px;
  animation:ticker-move 30s linear infinite;
}
.j4-ticker-item {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.8rem; padding:0 1.5rem;
  color:var(--text-secondary); border-right:1px solid var(--border-gold);
}
.j4-ticker-item span { color:var(--gold); font-weight:700; }
@keyframes ticker-move { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== Breadcrumb ===== */
.j4-breadcrumb {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--text-muted); padding:.75rem 0;
  list-style:none;
}
.j4-breadcrumb a { color:var(--text-secondary); text-decoration:none; transition:var(--transition); }
.j4-breadcrumb a:hover { color:var(--gold); }
.j4-breadcrumb .sep { color:var(--text-muted); }
.j4-breadcrumb .current { color:var(--gold); font-weight:600; }

/* ===== Anti-Phishing / Link Resmi ===== */
.verified-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.25);
  color:var(--neon-green); border-radius:60px;
  padding:.35rem 1rem; font-size:.75rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.domain-card {
  background:rgba(0,0,0,.3); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1.25rem 1.5rem;
}
.domain-url {
  font-family:var(--font-mono); font-size:1rem; font-weight:700;
  color:var(--gold); word-break:break-all;
}
.domain-status { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; font-size:.8rem; }
.dot-green { width:8px; height:8px; background:var(--neon-green); border-radius:50%; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(57,255,20,.4)} 50%{opacity:.8;box-shadow:0 0 0 6px rgba(57,255,20,0)} }
.danger-domain { border-color:rgba(255,68,68,.3); background:rgba(255,68,68,.04); }
.danger-domain .domain-url { color:var(--neon-red); }
.dot-red { width:8px; height:8px; background:var(--neon-red); border-radius:50%; }

/* ===== Game Grid Cards ===== */
.game-card {
  background:var(--bg-card); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); overflow:hidden;
  transition:var(--transition); text-decoration:none;
}
.game-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-gold); border-color:rgba(255,215,0,.45); }
.game-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:rgba(255,255,255,.03); }
.game-card-body { padding:1rem; }
.game-card-name { font-size:.88rem; font-weight:700; margin-bottom:.25rem; }
.game-card-provider { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.game-card-rtp { font-family:var(--font-mono); font-size:.8rem; color:var(--neon-green); font-weight:700; }

/* ===== Stats Bar ===== */
.stat-pill {
  background:var(--bg-card); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1.25rem 1.5rem; text-align:center;
}
.stat-pill-value {
  font-family:var(--font-mono); font-size:1.6rem; font-weight:800;
  background:linear-gradient(135deg,#FFD700,#FFF0A0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; line-height:1;
}
.stat-pill-label { font-size:.72rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-top:.4rem; display:block; }

/* ===== Deposit Simulator ===== */
.sim-method-btn {
  background:rgba(255,255,255,.03); border:1px solid var(--border-gold);
  border-radius:var(--radius-sm); padding:.6rem 1rem; cursor:pointer;
  font-size:.82rem; font-weight:600; color:var(--text-secondary);
  transition:var(--transition); display:flex; align-items:center; gap:.5rem;
  width:100%;
}
.sim-method-btn:hover, .sim-method-btn.active {
  background:rgba(255,215,0,0.1); border-color:var(--gold); color:var(--gold);
}
.sim-result {
  background:rgba(0,0,0,.4); border:1px solid var(--border-gold);
  border-radius:var(--radius-md); padding:1.75rem; text-align:center;
  min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.sim-speed-label { font-size:2rem; font-weight:900; font-family:var(--font-mono); margin-bottom:.4rem; }
.sim-speed-desc { font-size:.85rem; color:var(--text-secondary); }
.sim-bar { height:6px; border-radius:60px; margin-top:1rem; width:0; transition:width 1.5s ease; }

/* ===== Footer ===== */
.j4-footer {
  background:rgba(0,0,0,.5); border-top:1px solid var(--border-gold);
  padding:3rem 0 1.5rem; position:relative; z-index:1;
}
.j4-footer-brand { font-size:1.1rem; font-weight:900; letter-spacing:.5px; margin-bottom:.5rem; }
.j4-footer-tagline { font-size:.8rem; color:var(--text-muted); }
.j4-footer-nav-title { font-size:.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.j4-footer-nav-link {
  display:block; font-size:.82rem; color:var(--text-secondary);
  text-decoration:none; padding:.2rem 0; transition:var(--transition);
}
.j4-footer-nav-link:hover { color:var(--gold); }
.j4-footer-bottom {
  border-top:1px solid var(--border-gold); margin-top:2rem; padding-top:1.25rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
}
.j4-copyright { font-size:.75rem; color:var(--text-muted); }
.j4-copyright strong { color:var(--gold); }

/* ===== Alert / Info Box ===== */
.j4-alert {
  background:rgba(255,215,0,0.06); border:1px solid var(--border-gold);
  border-left:4px solid var(--gold); border-radius:var(--radius-sm);
  padding:1rem 1.25rem; font-size:.88rem; color:var(--text-secondary);
}
.j4-alert-danger {
  background:rgba(255,68,68,0.06); border-color:rgba(255,68,68,.4);
  border-left-color:var(--neon-red); color:var(--text-secondary);
}
.j4-alert strong { color:var(--gold); }
.j4-alert-danger strong { color:var(--neon-red); }

/* ===== FAQ Accordion (custom) ===== */
.j4-faq-item { border-bottom:1px solid var(--border-gold); }
.j4-faq-question {
  width:100%; background:none; border:none; color:var(--text-primary);
  font-size:.95rem; font-weight:700; padding:1.1rem 0;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  transition:var(--transition); text-align:left;
}
.j4-faq-question:hover { color:var(--gold); }
.j4-faq-icon { font-size:1.2rem; transition:transform .3s; flex-shrink:0; margin-left:1rem; }
.j4-faq-item.open .j4-faq-icon { transform:rotate(45deg); }
.j4-faq-answer { font-size:.88rem; color:var(--text-secondary); padding-bottom:1.1rem; display:none; line-height:1.7; }
.j4-faq-item.open .j4-faq-answer { display:block; }

/* ===== TOC / Sticky Nav ===== */
.j4-toc {
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.5rem;
  border-bottom:1px solid var(--border-gold); padding-bottom:1rem;
}
.j4-toc a {
  font-size:.8rem; font-weight:600; color:var(--text-secondary); text-decoration:none;
  padding:.35rem .85rem; border-radius:60px; border:1px solid transparent;
  transition:var(--transition);
}
.j4-toc a:hover, .j4-toc a.active { color:var(--gold); border-color:var(--border-gold); background:rgba(255,215,0,.07); }

/* ===== Responsive ===== */
@media (max-width:991.98px) {
  .j4-hero { min-height:auto; padding:4rem 0; }
  .j4-section { padding:3.5rem 0; }
}
@media (max-width:767.98px) {
  .j4-hero-title { font-size:2rem; }
  .tool-card { padding:1.25rem; }
  .gen-output { padding:1rem; }
  .j4-footer-bottom { flex-direction:column; text-align:center; }
}