/* ===== Clean CSS (single file) ===== */
:root{
  --bg:#0f1420;
  --card:#161c2c;
  --soft:#1f263a;
  --text:#ffffff;
  --muted:#d7e2ff;
  --accent:#ff7a00;
  --radius:18px;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1020,#0f1420 20%,#0f1420);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{max-width:1120px;margin:auto;padding:24px}
.card{background:var(--card);border:1px solid #232b43;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Header */
.header{display:flex;align-items:center;gap:16px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ffbc64);display:grid;place-items:center;font-weight:800;color:#191919}
.brand-name{margin:0;font-size:18px}
.topline{display:flex;align-items:center;gap:12px;margin-left:auto}
.topline-mobile{display:none;gap:10px;margin-top:10px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:8px 12px;border-radius:999px;color:var(--text);font-size:12px;white-space:nowrap}
.pill-wide{max-width:520px;overflow:hidden;text-overflow:ellipsis}
.lang select{background:var(--soft);border:1px solid #28314e;border-radius:10px;color:#fff;padding:8px 10px}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:20px}
.hero .left{padding:28px}
.hero h2{font-size:36px;line-height:1.2;margin:0 0 12px;color:#fff}
.hero p{color:var(--muted);margin:0 0 14px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px}
.badge{background:var(--soft);border:1px solid #28314e;color:#fff;padding:8px 12px;border-radius:10px;font-size:13px;display:inline-flex;gap:8px;align-items:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--accent),#ff9f3a);color:#111}
.secure{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:8px}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.tbadge{display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:1px solid #28314e;border-radius:10px;padding:8px 10px;font-size:13px;color:#fff}

/* Slider */
.slider{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);width:100%;aspect-ratio:16/9;min-height:260px;background:#0b1020}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.7);border:0;cursor:pointer}
.dot.active{background:#fff}

/* Stats/blocks */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.stat{background:var(--soft);border:1px solid #28314e;border-radius:12px;padding:14px;text-align:center;color:#fff}
.note{padding:18px}

/* Sections */
.section{margin:28px 0}
.section h3{margin:0 0 8px;font-size:24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.feature{padding:18px}
.feature h4{margin:0 0 6px;color:#fff}
.faq details{background:var(--card);border:1px solid #232b43;border-radius:12px;margin:10px 0;padding:12px}
.faq summary{cursor:pointer;font-weight:700;color:#fff}
.footer{margin:18px 0 26px;color:var(--muted);font-size:12px}

/* Safety guards */
.card,.hero .left,.badge,.btn,.pill,.tbadge{opacity:1 !important;filter:none !important}

/* Responsive */
@media (max-width:960px){
  .container{padding:16px}
  .topline{display:none}
  .topline-mobile{display:flex}
  .header{flex-direction:column;align-items:stretch}
  .hero{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .hero .left{padding:20px}
  .btn{width:100%}
  .statgrid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .hero h2{font-size:28px}
}

/* === HARD MOBILE FIX v2: stop any horizontal clipping === */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

.header, .topline, .topline-mobile, .hero, .hero > *, .card, .badges, .cta-row,
.trust-badges, .statgrid, .grid, .grid-4 { min-width: 0; }

/* Wrap text safely */
h1, h2, h3, h4, p, .secure, .note, .pill, .badge, .tbadge { 
  overflow-wrap: anywhere; word-break: normal;
}

/* Images never overflow */
img { max-width: 100%; height: auto; display: block; }

@media (max-width: 960px){
  .container{ width: 100%; padding-left:16px; padding-right:16px; }

  /* 18+ + Language on one row (>=360px), else wrap */
  .topline-mobile{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .topline-mobile .pill{ flex:1 1 auto; max-width:calc(50% - 10px); }
  @media (max-width: 360px){
    .topline-mobile .pill{ flex:1 1 100%; max-width:100%; }
  }

  /* Cards & controls fill viewport without spilling */
  .card, .hero .left, .hero .right, .cta-row, .secure, .trust-badges { 
    width: 100%; box-sizing: border-box; 
  }

  .btn{ display:block; width:100%; box-sizing:border-box; }
  .slider{ width:100%; max-width:100%; }

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

  .hero .left{ padding:18px; }
}