@font-face{
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  src: url("https://integritee.network/_nuxt/Inter-Regular.C0Zwm1B_.woff2") format("woff2"),
       url("https://integritee.network/_nuxt/Inter-Regular.MSxhATxw.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  src: url("https://integritee.network/_nuxt/Inter-Medium.Dew2lSEp.woff2") format("woff2"),
       url("https://integritee.network/_nuxt/Inter-Medium.CpfEZCte.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: WhyteInktrap;
  font-style: normal;
  font-weight: 500;
  src: url("https://integritee.network/_nuxt/WhyteInktrap-Medium.TLFD13XH.woff2") format("woff2"),
       url("https://integritee.network/_nuxt/WhyteInktrap-Medium.DWWa64NS.woff") format("woff");
  font-display: swap;
}
:root{
  --bg:#0f1720; --card:#0b1220; --muted:#9aa4b2; --accent:#49a6ff; --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:#e6eef6}
p{line-height:1.6;font-size:18px;color:#dfe7f2;margin:0 0 14px}
body{
  /* layered background to mimic integritee.network style */
  background-color: #051025;
  background-image:
    radial-gradient(800px 400px at 10% 10%, rgba(86,140,255,0.08), transparent 20%),
    radial-gradient(600px 300px at 85% 80%, rgba(158,32,254,0.06), transparent 20%),
    linear-gradient(180deg,#061021 0%, #071426 60%, #04060a 100%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.container{max-width:960px;margin:0 auto;padding:24px}
.top-lines, .bottom-lines{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:-1}
.top-lines{top:-220px;width:1200px;opacity:0.9}
.bottom-lines{bottom:-600px;width:1200px;opacity:0.9}
.top-lines img, .bottom-lines img{width:100%;height:auto;display:block}
.site-header{padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.site-title a{color:inherit;text-decoration:none}
.nav a{color:var(--muted);margin-left:16px;text-decoration:none}
.nav a.btn, .nav a.btn_gradient, .nav a.btn_sponsor { color: #fff; }
.sponsor{background:linear-gradient(90deg,#ffd37b 0%, #ff9b49 100%);color:#2b1300;padding:8px 12px;border-radius:999px;font-weight:700;box-shadow:0 6px 18px rgba(255,155,73,0.12)}
.sponsor:hover{box-shadow:0 10px 30px rgba(255,155,73,0.16);opacity:0.98}
.hero, .example{text-align:center;margin:24px 0}
.hero-title{font-size:46px;line-height:1.05;margin:0 0 12px;font-family:WhyteInktrap,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:0.01em}
.hero-subtitle{font-size:38px}
.gradient-text{background:linear-gradient(90deg,#30daff -12.5%,#b000fd 41%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}
.example pre{max-width:720px;margin:0 auto}
.site-header h1{margin:0;font-size:28px}
.site-logo{height:auto;max-height:120px;width:auto;vertical-align:middle;margin-right:10px;display:inline-block}
.hero h2, .features h3, .context h3, .roadmap h3, .site-header h1{font-family:WhyteInktrap,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:0.02em}
h3{font-size:32px;font-weight:500;line-height:1.2;margin:0 0 16px}
.site-header{background-color:#1a1045;border-bottom:1px solid rgba(255,255,255,0.04)}
.site-name{vertical-align:middle}
.tagline{color:var(--muted);margin:6px 0 12px}
.nav a{color:var(--muted);margin-right:16px;text-decoration:none;transition:color .3s ease}
.nav a:hover{color:#5b92ff}
a.text-link{color:inherit;text-decoration:none;transition:color .3s ease}
a.text-link:hover{color:#5b92ff}
.nav-link-github{color:var(--muted)!important}
.hero{background:var(--glass);padding:24px;border-radius:10px;margin:24px 0}
.hero p{max-width:840px}
.hero-media{margin:20px auto 0;max-width:860px;width:100%}
.hero-media img{width:100%;max-width:100%;height:auto;border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,0.24);border:1px solid rgba(255,255,255,0.06);display:block}
.btn{display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,opacity .12s ease;border:none}
.btn:active{transform:translateY(1px)}
.btn_gradient{
  background: linear-gradient(84.58deg, #559cff 0%, #9e20fe 100%);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.28), 0 2px 6px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn_gradient::after{
  content: "";
  position: absolute;
  left: -30%;
  top: -60%;
  width: 160%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%);
  transform: rotate(-20deg);
  pointer-events: none;
  opacity: 0.9;
}
.btn_gradient:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(16,24,40,0.34)}
.btn_gradient:active{transform:translateY(0)}
.btn_gradient:focus{outline:3px solid rgba(158,32,254,0.14);outline-offset:2px}
.btn_sponsor{
  /* use same gradient/look as primary gradient button */
  background: linear-gradient(84.58deg, #559cff 0%, #9e20fe 100%);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  box-shadow: 0 8px 24px rgba(16,24,40,0.28), 0 2px 6px rgba(0,0,0,0.18);
}
.btn_sponsor:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(16,24,40,0.34)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.features article{background:rgba(255,255,255,0.02);padding:16px;border-radius:8px}
.features p{font-size:16px;line-height:1.5;color:#cdd6e2}
pre{background:#051323;padding:12px;border-radius:8px;overflow:auto}
.site-footer{padding:20px 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)}
.context{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:32px 0}
.context ul{padding-left:18px;margin:10px 0 0}
.context .muted{color:var(--muted)}
.roadmap{margin:32px 0;background:rgba(255,255,255,0.02);padding:20px;border-radius:10px}
.roadmap ul{margin:10px 0 0;padding-left:18px}