:root{
  --bg:#000;
  --panel:#191919;
  --card:#fff;
  --ink:#fff;
  --ink-dark:#000;
  --muted:#b8b8b8;
  --radius:24px;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:900px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#000;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;
  padding:16px 34px;border-radius:999px;
  transition:transform .18s ease,opacity .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);opacity:.88}
.btn--sm{font-size:11px;padding:13px 24px}
.btn--block{display:flex;width:100%}

/* ---------- nav ---------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  max-width:var(--wrap);margin:0 auto;padding:22px 24px;
}
.nav__logo img{width:58px;height:auto}

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:150px 24px 90px;
  overflow:hidden;
}
.hero__copy{max-width:900px;position:relative;z-index:2}
.hero h1{
  margin:0 0 20px;
  font-size:clamp(32px,5.2vw,62px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.hero p{
  margin:0;
  font-size:clamp(16px,1.6vw,21px);
  font-weight:300;
  color:#e6e6e6;
  max-width:620px;margin-inline:auto;
}
.hero__art{
  width:100vw;max-width:1600px;
  margin:34px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.hero__art img{width:100%;height:auto}
.hero__cta{position:relative;z-index:2;margin-top:6px}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section--tight{padding:56px 0}
.section__title{
  margin:0 0 14px;text-align:center;
  font-size:clamp(26px,3.4vw,38px);font-weight:800;
  letter-spacing:-.01em;text-transform:uppercase;
}
.section__sub{
  margin:0 auto;max-width:640px;text-align:center;
  font-size:15px;font-weight:300;color:var(--muted);
}

/* ---------- panel (cases / ecosystem) ---------- */
.panel{
  background:var(--panel);
  border-radius:var(--radius);
  padding:56px 40px;
  text-align:center;
}
.panel__title{
  margin:0 0 12px;
  font-size:clamp(24px,3vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
}
.panel__sub{
  margin:0 auto 40px;max-width:520px;
  font-size:15px;font-weight:300;color:var(--muted);
}
.panel__title + .logos{margin-top:40px}
.panel__cta{margin-top:44px}

.logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:44px 32px;align-items:center;
}
.logos li{display:flex;align-items:center;justify-content:center}
.logos img{max-height:42px;width:auto;object-fit:contain}

/* ---------- tiers ---------- */
.tiers{
  margin-top:52px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.tier{
  position:relative;
  background:var(--card);color:var(--ink-dark);
  border-radius:20px;
  padding:44px 26px 26px;
  text-align:center;
  display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.tier__tag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:#fff;color:#000;
  border:1px solid #000;border-radius:999px;
  padding:7px 18px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.tier h3{
  margin:6px 0 14px;
  font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
}
.tier p{
  margin:0 0 28px;flex:1;
  font-size:15px;font-weight:400;color:#2b2b2b;
}
.tier .btn{background:#000;color:#fff}

/* ---------- faq ---------- */
.faq{border-top:1px solid #2a2a2a}
.faq__item{border-bottom:1px solid #2a2a2a}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 4px;
  font-size:16px;font-weight:600;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;
  width:26px;height:26px;border-radius:50%;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><rect x='5.5' y='11' width='13' height='2' fill='white'/><rect x='11' y='5.5' width='2' height='13' fill='white'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><rect x='5.5' y='11' width='13' height='2' fill='white'/><rect x='11' y='5.5' width='2' height='13' fill='white'/></svg>") center/contain no-repeat;
  transition:transform .22s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__body{padding:0 4px 26px}
.faq__body p{margin:0;font-size:15px;font-weight:300;color:var(--muted);max-width:760px}
.faq__body a{color:#fff;text-decoration:underline}

/* ---------- footer ---------- */
.footer{padding:60px 0 70px;border-top:1px solid #171717}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer__logo img{width:52px}
.footer__mail{margin:0;font-size:15px}
.footer__mail a{text-decoration:none}
.footer__mail a:hover{text-decoration:underline}
.footer__copy{margin:0;font-size:12px;color:#6d6d6d}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .tiers{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .logos{gap:36px 24px}
}
@media (max-width:640px){
  .nav{padding:16px}
  .nav__logo img{width:46px}
  .hero{padding:120px 20px 70px}
  .section{padding:64px 0}
  .section--tight{padding:40px 0}
  .panel{padding:44px 20px;border-radius:18px}
  .tiers{grid-template-columns:1fr;gap:40px}
  .logos{grid-template-columns:repeat(2,1fr)}
  .logos img{max-height:34px}
  .btn{padding:15px 26px}
}