/* ==========================================================================
   jaihoarcade-in.com
   Dark casino interface. Black page, #1E1E1E surfaces on a 1px white-8%
   hairline, a single bright green as the only call to action colour, yellow
   reserved for badges and red reserved for warnings and the age gate.
   ========================================================================== */

:root{
  --bg:#000000;
  --surface:#1E1E1E;
  --surface-2:#282828;
  --surface-3:#323232;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --green:#00DD70;
  --green-hi:#2BFF95;
  --green-dp:#00A854;
  --yellow:#FAD749;
  --yellow-dp:#C9A415;
  --red:#E8121F;
  --red-dp:#A50D16;

  --text:#FFFFFF;
  --text-2:#A8A8A8;
  --text-3:#6E6E6E;

  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",var(--sans);

  --r:8px;
  --r-lg:14px;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.62;padding-bottom:78px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{color:var(--text);font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

h1,h2,h3,h4{color:var(--text);margin:0;letter-spacing:-.018em;line-height:1.18;font-weight:800}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo img{display:block;width:auto;height:48px;max-width:160px;object-fit:contain}
.logo:hover{text-decoration:none}
.logo:hover{text-decoration:none}
.logo .chip{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--red);color:#fff;font-weight:800;font-size:17px;
  font-family:var(--display);font-style:italic;
}
.logo span:last-child{display:flex;flex-direction:column;line-height:1.05}
.logo b{color:var(--text);font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.logo i{
  font-style:normal;font-size:9.5px;font-weight:700;color:var(--text-3);
  letter-spacing:.2em;text-transform:uppercase;
}
.tnav{display:flex;gap:22px;margin-left:12px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.tnav::-webkit-scrollbar{display:none}
.tnav a{
  color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.tnav a:hover{color:var(--green);text-decoration:none}
.tnav a.on{color:var(--green);border-bottom-color:var(--green)}
.tbtn{
  flex:0 0 auto;background:var(--green);color:#000;font-weight:700;font-size:14.5px;
  padding:10px 22px;border-radius:6px;text-decoration:none;transition:.15s;
}
.tbtn:hover{background:var(--green-hi);text-decoration:none}

/* ---------- interior page hero ---------- */
.phero{
  position:relative;overflow:hidden;padding:38px 0 44px;
  background:
    radial-gradient(520px 220px at 14% -20%,rgba(0,221,112,.15),transparent 70%),
    radial-gradient(400px 190px at 92% 0%,rgba(232,18,31,.13),transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.crumb{font-size:13px;color:var(--text-3);padding-bottom:20px}
.crumb a{color:var(--text-2);text-decoration:none}
.crumb a:hover{color:var(--green);text-decoration:none}
.phero .kick{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:16px;
}
.phero .kick::before{content:"";width:16px;height:2px;background:var(--green);border-radius:2px}
.phero h1{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(38px,6.4vw,74px);font-weight:800;line-height:.95;letter-spacing:.005em;
  color:var(--text);max-width:16ch;margin:0 0 20px;
}
.phero h1 span{color:var(--green)}
.phero .stand{
  max-width:66ch;margin:0;font-size:17px;line-height:1.66;color:var(--text-2);
}
.phero .stand b{color:var(--text)}

/* ---------- body shell ---------- */
.shell{padding:8px 0 4px}
.col{max-width:none}
.col>section{padding:52px 0;border-bottom:1px solid var(--line)}
.col>section:last-child{border-bottom:0}

.num{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px;
}
.num::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(0,221,112,.16);
}
.col h2{font-size:clamp(25px,3.4vw,36px);margin:0 0 16px}
.col h3{font-size:19px;margin:26px 0 10px;color:var(--text)}
.col p{color:var(--text-2);margin:0 0 15px;max-width:78ch}
.col p:last-child{margin-bottom:0}
.lead{font-size:17.5px;color:var(--text-2);max-width:74ch;margin:0 0 26px}

/* ---------- two column split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.split>div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px 28px;
}
.split h3{margin-top:0}
.split h3:first-child{margin-top:0}

/* ---------- numbered run of steps ---------- */
.run{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:8px}
.run>div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 24px;position:relative;overflow:hidden;
}
.run>div::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--green),transparent 70%);
}
.run b{
  display:block;font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:20px;font-weight:800;color:var(--green);margin-bottom:8px;letter-spacing:.01em;
}
.run p{font-size:14.5px;margin:0}

/* ---------- game tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-top:10px}
.tile{border-radius:var(--r-lg);overflow:hidden}
.tile .in{
  height:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 20px 22px;transition:.18s;
  display:flex;flex-direction:column;
}
.tile .in:hover{border-color:var(--green);background:var(--surface-2);transform:translateY(-3px)}
.tile .hd{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.tile .ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  font-size:21px;background:var(--surface-3);color:var(--text);
}
.tile h3{margin:0;font-size:17px;letter-spacing:-.02em}
.tile .meta{font-size:12px;color:var(--text-3);font-weight:600;margin-top:2px}
.tile p{font-size:14.5px;margin:0 0 16px;flex:1 1 auto}
.tile .rt{
  align-self:flex-start;background:var(--yellow);color:#241E00;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
/* per-tile accent, so a grid of cards does not read as one grey block */
.tile.t1 .ic{background:rgba(0,221,112,.16);color:var(--green-hi)}
.tile.t2 .ic{background:rgba(232,18,31,.18);color:#FF6A72}
.tile.t3 .ic{background:rgba(250,215,73,.16);color:var(--yellow)}
.tile.t4 .ic{background:rgba(94,140,255,.18);color:#93B0FF}
.tile.t5 .ic{background:rgba(255,138,0,.18);color:#FFB25E}
.tile.t6 .ic{background:rgba(255,110,60,.18);color:#FFAE8A}
.tile.t7 .ic{background:rgba(190,110,255,.18);color:#D0A2FF}
.tile.t9 .ic{background:rgba(0,208,255,.16);color:#6FE2FF}

/* ---------- promo bar ---------- */
.bar{
  display:flex;flex-direction:column;gap:4px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--r-lg);padding:22px 26px;margin:4px 0 22px;
}
.bar b{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px);font-weight:800;color:var(--yellow);letter-spacing:.01em;
}
.bar span{font-size:14.5px;color:var(--text-2)}

/* ---------- pull quote ---------- */
.pull{
  font-size:clamp(19px,2.6vw,25px);font-weight:700;color:var(--text);line-height:1.4;
  letter-spacing:-.02em;border-left:4px solid var(--green);padding:6px 0 6px 22px;
  margin:26px 0;max-width:60ch;
}

/* ---------- note callout ---------- */
.note{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--yellow);
  border-radius:var(--r);padding:18px 22px;margin:24px 0 0;font-size:14.5px;color:var(--text-2);
}
.note b{color:var(--yellow)}

/* ---------- faq ---------- */
.faq{margin-top:8px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:16.5px;font-weight:700;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--green);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--green)}
.faq .in{padding:0 44px 21px 0}
.faq .in p{margin:0;font-size:15.5px;color:var(--text-2)}

/* ---------- responsible gaming ---------- */
.rg{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--r-lg);padding:22px 24px;margin:8px 0 0;
}
.rg .b18{
  flex:0 0 auto;background:var(--red);color:#fff;font-weight:800;font-size:12.5px;
  padding:6px 12px;border-radius:999px;letter-spacing:.04em;
}
.rg p{margin:0;font-size:14.5px;color:var(--text-2);max-width:none}
.rg b{color:var(--text)}

/* ---------- author ---------- */
.author{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--r-lg);padding:24px 26px;margin:18px 0 0;
}
.author b.n{display:block;font-size:16.5px;color:var(--text);font-weight:800;margin-bottom:3px}
.author .r{
  display:block;font-size:11px;color:var(--green);text-transform:uppercase;
  letter-spacing:.16em;font-weight:800;margin-bottom:13px;
}
.author p{font-size:14.5px;color:var(--text-2);margin:0 0 9px;max-width:none}
.author p:last-child{margin-bottom:0}

/* ---------- confirm marker ---------- */
.cf{
  display:inline-block;background:rgba(250,215,73,.1);border:1px dashed var(--yellow);
  color:var(--yellow);font-weight:800;font-size:11.5px;letter-spacing:.05em;
  padding:1px 8px;border-radius:5px;white-space:nowrap;vertical-align:middle;
}

/* ---------- related ---------- */
.related{background:var(--bg);border-top:1px solid var(--line);padding:52px 0}
.related h2{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:30px;font-weight:800;letter-spacing:.01em;margin:0 0 20px;
}
.rel-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.rel-g a{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:19px 21px;text-decoration:none;transition:.18s;
}
.rel-g a:hover{border-color:var(--green);background:var(--surface-2);transform:translateY(-3px);text-decoration:none}
.rel-g b{display:block;color:var(--text);font-size:15.5px;font-weight:700;margin-bottom:6px}
.rel-g a:hover b{color:var(--green)}
.rel-g span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.5}

/* ---------- closing cta ---------- */
.close{
  text-align:center;padding:74px 0;border-top:1px solid var(--line);
  background:
    radial-gradient(460px 200px at 50% 0%,rgba(0,221,112,.14),transparent 72%),
    var(--bg);
}
.close h2{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(32px,5.4vw,60px);font-weight:800;line-height:.98;letter-spacing:.01em;
  margin:0 auto 16px;max-width:18ch;
}
.close p{color:var(--text-2);max-width:56ch;margin:0 auto 28px;font-size:16.5px}
.btn{
  display:inline-block;background:var(--green);color:#000;font-weight:800;font-size:16px;
  padding:15px 40px;border-radius:8px;text-decoration:none;transition:.15s;
}
.btn:hover{background:var(--green-hi);text-decoration:none;transform:translateY(-1px)}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line);padding:52px 0 40px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.fh{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:13px;
}
.fg a{display:block;color:var(--text-2);font-size:14.5px;padding:5px 0;text-decoration:none}
.fg a:hover{color:var(--green);text-decoration:none}
.legal{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-3);line-height:1.7;
}
.legal b{color:var(--text-2)}
.age{
  display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:12px;
  padding:4px 11px;border-radius:999px;margin-right:11px;vertical-align:2px;
}

/* ---------- sticky bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
  border-top:1px solid var(--line-2);padding:11px 22px;
  display:flex;align-items:center;justify-content:center;gap:22px;
  box-shadow:0 -1px 0 rgba(255,255,255,.06);
}
.sticky .i{display:flex;flex-direction:column;line-height:1.28}
.sticky .i b{font-size:15px;color:var(--yellow);font-weight:800}
.sticky .i span{font-size:12.5px;color:var(--text-2)}
.sticky a{
  background:var(--green);color:#000;font-weight:800;font-size:14.5px;
  padding:11px 28px;border-radius:7px;text-decoration:none;transition:.15s;
}
.sticky a:hover{background:var(--green-hi);text-decoration:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .split{grid-template-columns:1fr}
}
@media(max-width:720px){
  .top .wrap{height:58px;gap:14px}
  .tnav{display:none}
  .phero{padding:28px 0 34px}
  .phero h1{max-width:none}
  .col>section{padding:40px 0}
  .rg{flex-direction:column;gap:12px}
  .sticky{gap:14px;padding:10px 16px}
  .sticky .i b{font-size:13.5px}
  .sticky .i span{font-size:11.5px}
  .sticky a{padding:10px 20px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- painel "why choose" (padrao KTO: 3 features + coluna de CTA) ---------- */
.why{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:32px 34px;margin-top:6px;display:grid;gap:30px;align-items:start;
  grid-template-columns:repeat(3,1fr) minmax(208px,.82fr);
}
.why-i{display:flex;gap:14px}
.why-i .ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:19px;background:var(--surface-3);color:var(--text);
}
.why-i b{display:block;color:var(--text);font-size:16px;font-weight:800;margin:0 0 7px;line-height:1.25}
.why-i p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.56}
.why-i.a .ic{background:rgba(0,221,112,.16);color:var(--green-hi)}
.why-i.b .ic{background:rgba(250,215,73,.16);color:var(--yellow)}
.why-i.c .ic{background:rgba(232,18,31,.18);color:#FF6A72}
.why-cta{display:flex;flex-direction:column;gap:11px}
.why-cta a{
  background:var(--green);color:#000;font-weight:800;font-size:15px;text-align:center;
  padding:14px 20px;border-radius:8px;text-decoration:none;transition:.15s;
}
.why-cta a:hover{background:var(--green-hi);text-decoration:none}
.why-cta span{font-size:12.5px;color:var(--text-2);text-align:center;line-height:1.5}
.why-cta span i{font-style:normal;color:var(--yellow)}
@media(max-width:980px){.why{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:640px){.why{grid-template-columns:1fr;padding:26px 24px;gap:22px}}