:root{
  --bg:#070c1c;
  --surface:#0a1331;
  --panel:#0b173d;
  --ink:#e8eeff;
  --ink-dim:#a8b3e9;
  --accent:#25D366;
  --accent-soft:rgba(37,211,102,.33);
  --cta:#ff6a3d;
  --ring:0 0 0 8px var(--accent-soft);
  --radius:18px;
  --hover-bg: rgba(37, 211, 102, 0.5); /* New hover effect for better visual feedback */
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 400px at 90% -10%, #2442b233, transparent 60%),
    radial-gradient(900px 420px at 5% 110%, #2f6aa433, transparent 60%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
}

.container{
  width:100%; max-width:100%; padding:20px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}

.brandline{display:flex; align-items:center; gap:10px}

.emblem{
  width:36px;height:36px;border-radius:10px;
  background:conic-gradient(from 180deg at 50% 50%, #3fb4ff, #7c4dff, #25D366, #3fb4ff);
  filter:saturate(1.2);
}

.brandname{letter-spacing:.3px}

.sep{opacity:.6}

.langhint{opacity:.7}

.langswitch{display:flex; gap:8px}

.tab{
  appearance:none;border:1px solid #2b3662;background:#0d1841;color:#e5e9ff;
  padding:8px 12px;border-radius:12px;cursor:pointer;font-size:14px;opacity:.9
}

.tab.is-active{border-color:#7aa8ff;background:#0f2152;opacity:1}

.heroCard{
  display:grid; grid-template-columns:1.15fr .85fr; gap:22px;
  background:linear-gradient(160deg,#0e1638 0%,#0a1028 100%);
  border:1px solid #1c295d;border-radius:24px;padding:26px; box-shadow:0 10px 40px #0008;
}

@media (max-width:920px){ .heroCard{ grid-template-columns:1fr } }

.copyzone .headline{
  font-size:clamp(24px,3.8vw,36px);line-height:1.1;margin:.1rem 0 .35rem
}

.subcopy{font-size:clamp(14px,2.1vw,16px);opacity:.9}

.ctaRow{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center
}

.btnPrimary{
  background:var(--accent); color:#0b2b12; border:none; border-radius:999px; padding:14px 22px;
  font-weight:700; font-size:16px; cursor:pointer; transition:transform .05s ease, box-shadow .2s ease;
}

.btnPrimary:active{transform:translateY(1px)}

.btnPrimary:hover{
  box-shadow:var(--ring);
  background-color: var(--hover-bg); /* Added hover effect */
}

.chips{display:flex; gap:10px; flex-wrap:wrap}

.chip{
  background:#0f1c49; border:1px solid #22306b; color:#cfe0ff;
  padding:8px 12px; border-radius:999px; font-size:13px;
}

.fineprint{margin-top:10px; font-size:12px; color:#b6c6ff99}

.trustPanel{display:grid; gap:12px}

.fact{
  display:flex; gap:12px; align-items:center; background:#0e1533; border:1px solid #22306b;
  padding:14px; border-radius:14px;
}

.ico{width:34px;height:34px;border-radius:10px;background:#13205e;display:flex;align-items:center;justify-content:center}

.muted{opacity:.8}

.stickyBar{
  position:sticky; bottom:10px; margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(90deg,#10214c,#0f1838);
  border:1px solid #24306b; border-radius:14px; padding:10px 12px; box-shadow:0 6px 28px #0009;
}

.mini{font-size:14px}

.dim{opacity:.9}

.btnGhost{
  background:var(--cta); color:#1a0e0b; border:none; border-radius:10px; padding:10px 14px;
  font-weight:700; cursor:pointer;
}

.disclaimer{margin-top:10px; font-size:12px; color:#9fb0ff88}

/* Media Query for Mobile Devices */
@media (max-width:600px) {
  .container {
    padding: 10px;
  }

  .heroCard {
    grid-template-columns: 1fr;
    padding: 4vw;
  }

  .copyzone .headline {
    font-size: 4vw;
  }

  .subcopy {
    font-size: 14px;
  }

  .btnPrimary {
    font-size: 14px;
  }

  .chip {
    font-size: 12px;
  }

  .fineprint, .disclaimer {
    font-size: 10px;
  }
}

/* Performance & Loading Optimization */

/* Ensure images are optimized */
img {
  max-width: 100%;
  height: auto;
  display: block;
  loading: lazy; /* Lazy load images */
}

/* Use responsive images */
.picture img {
  width: 100%;
  height: auto;
}

/* Font and CSS optimization */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Use system fonts until custom fonts load */
}

/* Javascript Defer and Async loading */
<script src="your-script.js" defer></script> <!-- Defer JavaScript execution -->