@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root{
  --bg:#0b0b0d;
  --panel:#121216;
  --panel-2:#17171c;
  --line:#2a2a33;
  --text:#eaeaf0;
  --muted:#b9b9c6;
  --red:#c1121f;          /* dark red accent */
  --red-2:#8f0e18;
  --glow: 0 0 0 rgba(193,18,31,0.5);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(193,18,31,0.12), transparent 60%),
              radial-gradient(800px 500px at 100% 0%, rgba(193,18,31,0.12), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1200px,92%); margin-inline:auto; padding: 20px 10px;}
.section{padding:64px 0}
.center{text-align:center}
.row{display:flex; align-items:center; gap:18px}
.space{justify-content:space-between}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.two-col{display:grid; grid-template-columns:1.2fr 1fr; gap:20px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(10,10,12,0.6);
  border-bottom:1px solid #16161b;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:500;
  font-family: "Courier Prime", monospace;
}
.brand-icon{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff; border-radius:12px; padding:6px 8px; font-size:20px;
  box-shadow:0 6px 30px rgba(193,18,31,0.35);
}
.nav a{
  color:var(--muted); text-decoration:none; margin:0 10px; font-weight:500;
}
.nav a:hover,.nav a.active{color:#fff}
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); transition:transform .15s ease, box-shadow .2s ease, background .2s;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px)}
.btn-fill{border-color:transparent; background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; box-shadow:0 12px 40px rgba(193,18,31,.35)}
.btn-outline{color:#fff}
.btn-ghost{background:transparent; color:#fff; border-color:#292933}
.menu-btn{display:none; background:transparent; color:#fff; border:0; font-size:22px; cursor:pointer}

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:60px 0 auto 0; background:#0c0c10; border-top:1px solid #17171d;
  transform:translateY(-120%); transition:transform .25s ease; z-index:9;
}
.mobile-drawer.open{transform:translateY(0)}
.mobile-nav{display:flex; flex-direction:column; gap:16px; padding:20px}
.mobile-nav a{color:#fff; text-decoration:none}

/* Hero */
.hero{
  position:relative; overflow:hidden; min-height:64vh; display:flex; align-items:center;
  border-bottom:1px solid #14141a;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(500px 200px at 20% 20%, rgba(193,18,31,0.18), transparent 60%),
    radial-gradient(600px 200px at 80% 80%, rgba(193,18,31,0.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; padding:80px 0}
.hero h1{font-size:clamp(32px,5vw,48px); margin:0 0 10px}
.hero h1 .accent{color:#fff; background:linear-gradient(135deg,var(--red),var(--red-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{max-width:760px; color:var(--muted)}
.hero-ctas{margin-top:18px; display:flex; gap:12px}
.hero-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity:.35; pointer-events:none;
}

/* Bullet list */
.bullet{padding-left:18px; margin:16px 0}
.bullet li{margin:8px 0}

/* Code card */
.code-card pre{
  margin:0; padding:18px; border-radius:14px; background:#0e0e13; border:1px dashed #2a2a35; color:#ffced2;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Monaco,Consolas,monospace; font-size:13.5px; line-height:1.7;
}

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.stat{
  text-align:center; padding:26px; border-radius:var(--radius);
  background:linear-gradient(180deg,#0e0e12,#121218); border:1px solid #1c1c25;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
}
.stat .num{font-size:36px; font-weight:800; letter-spacing:.5px}
.stat .plus,.stat .percent{margin-left:6px; color:var(--red); font-weight:800}

/* Icon cards */
.icon-card .ico{
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red-2)); box-shadow:0 10px 40px rgba(193,18,31,.35);
  margin-bottom:12px; font-size:22px;
}
.icon-card h3{margin:.2rem 0 .2rem}

/* Timeline */
.timeline{
  position:relative; padding-left:24px; border-left:2px dashed #2a2a33; margin-top:18px;
}
.t-item{position:relative; margin:18px 0; padding-left:8px}
.t-dot{
  position:absolute; left:-10px; top:8px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-2)); box-shadow:0 0 0 3px rgba(193,18,31,.18);
}

/* Trust bar */
.trust-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  border:1px solid #1b1b22; border-radius:var(--radius); padding:14px 18px; background:#0f0f13;
}
.trust-bar span{color:var(--muted)}
.logos{display:flex; gap:8px; flex-wrap:wrap}
.logo-pill{
  padding:8px 12px; border-radius:999px; border:1px solid #262633; background:#12121a; color:#ddd; font-weight:600; font-size:14px;
}

/* Accordion */
.accordion{display:grid; gap:12px; margin-top:16px}
.a-item{border:1px solid #1b1b22; border-radius:14px; background:#101015}
.a-header{
  width:100%; text-align:left; background:transparent; color:#fff; border:0; padding:16px 18px; cursor:pointer;
  font-weight:600; display:flex; align-items:center; justify-content:space-between;
}
.a-header:hover{background:#12121a}
.a-panel{
  max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease;
  padding:0 18px;
}
.a-item.open .a-panel{max-height:220px; padding:0 18px 16px}

/* CTA */
.cta-card{
  text-align:center; border:1px solid #2a2a33;
  background:linear-gradient(180deg,#15151b,#101016);
}

/* Footer */
.footer {
  margin-top: 40px;
  border-top: 1px solid #15151c;
  background: #0a0a0d;
  padding: 10px 0;
  color: #bdbdd1;
  text-align: center;   /* center text inside */
  
}




/* .mini-links a{color:#bdbdd1; text-decoration:none; margin-left:12px}
.mini-links a:hover{color:#fff} */

/* Reveal animation */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
[data-reveal].show{opacity:1; transform:none}

/* Responsive */
@media (max-width:980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .menu-btn{display:block}
}
@media (max-width:520px){
  .grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero-ctas{flex-direction:column}
}

/* Focus styles for accessibility */
:focus-visible{outline:2px dashed var(--red); outline-offset:2px}



/* ========== MOBILE FIX PATCH (paste at end) ========== */

/* Guard rails: stop sideways scroll & scale media */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.container { width: min(1200px, 94%); margin-inline: auto; }

/* --- 980px: tablets & small laptops --- */
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .stats { grid-template-columns: 1fr 1fr !important; gap: 14px; }

  /* Nav: hide desktop, show menu button */
  .nav { display: none !important; }
  .menu-btn { display: block !important; }

  /* Drawer sits just under header */
  .mobile-drawer { inset: 56px 0 auto 0; }

  .topbar .container { gap: 10px; }
  .brand { font-size: 15px; }
  .brand-icon { font-size: 16px; }
  .section { padding: 56px 0; }
  .card { padding: 20px; }
  .hero { min-height: 60svh; } /* uses dynamic viewport on mobile */
  .hero-content { padding: 64px 0; }
  .hero h1 { font-size: clamp(30px, 5.5vw, 38px); }
  .hero p { font-size: 15px; }
}

/* --- 768px: large phones --- */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .hero-content { text-align: center; }
  .hero-ctas { flex-direction: column; align-items: center; gap: 10px; }
  .btn { width: 100%; text-align: center; }

  .trust-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .logos { justify-content: flex-start; flex-wrap: wrap; }

  .timeline { padding-left: 18px; border-left-width: 2px; }
  .t-item { margin: 14px 0; }
  .t-dot { left: -10px; }

  .accordion { gap: 10px; }
  .a-panel { padding: 0 16px; }
  .a-item.open .a-panel { max-height: 480px; } /* ensure full content shows */
}

/* --- 560px: small phones --- */
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr !important; }
  .section { padding: 44px 0; }
  .card { padding: 18px; }
  .hero { min-height: 54svh; }
  .hero h1 { font-size: clamp(26px, 7.2vw, 32px); line-height: 1.25; }
  .hero p { font-size: 14px; }
  .logo-pill { padding: 6px 10px; font-size: 12.5px; }
  .timeline { padding-left: 14px; }
}

/* --- 375px: extra-small phones (SE/mini) --- */
@media (max-width: 375px) {
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 13px; }
  .stat .num { font-size: 26px; }
  .btn { padding: 10px 14px; }
  .card { padding: 16px; }
}