/* Cartesi: full cyan ground, centered hero, one black small-radius uppercase
   button. Their heading face, Plus Jakarta Sans, is on Google Fonts, so this
   one matches exactly. */

body{
  background:#00F6FF; color:#1B1A1E;
  font-family:"Inter", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

/* their nav is a white pill floating on the cyan, not a bar across it */
.navbar{ padding:14px 0 0; }
.nav{
  background:#fff; border-radius:9999px; height:52px;
  padding:0 10px 0 24px; gap:22px;
  box-shadow:0 1px 2px rgba(27,26,30,.06);
}
.nav-co{
  font-family:"Plus Jakarta Sans", sans-serif; color:#1B1A1E;
  font-size:20px; font-weight:500; letter-spacing:-.01em;
}
.nav-links{ margin:0 auto; gap:26px; }
.nav-links a{ color:#1B1A1E; font-size:13.5px; font-weight:500; }
.nav-links a:hover{ opacity:.6; }
.nav-r{ margin-left:0; }
.nav-r .pill{
  background:#1B1A1E; color:#F9FAFB; border-radius:9999px; padding:9px 18px;
  font-size:11.5px; font-weight:500; letter-spacing:.35px; text-transform:uppercase;
}
@media (max-width:900px){
  .nav{ padding:0 10px 0 18px; }
  .nav-links{ margin:0; }
}

.hero{ padding:72px 0 80px; text-align:center; }
.scene{ width:100%; height:auto; display:block; margin-bottom:-1px; }
.eyebrow{ color:#1B1A1E; opacity:.78; margin-bottom:18px; }
h1{
  font-family:"Plus Jakarta Sans", sans-serif; color:#1B1A1E;
  font-size:clamp(32px,4.6vw,58px); font-weight:500; line-height:1.1;
  letter-spacing:-.02em; margin:0 auto 20px; max-width:16ch;
}
.sub{ color:#1B1A1E; opacity:.75; font-size:17px; max-width:50ch; margin:0 auto 12px; }
.meta{ color:#1B1A1E; opacity:.78; font-size:13px; margin-bottom:30px; }
.btn{
  background:#1B1A1E; color:#F9FAFB; border-radius:4px; padding:13px 26px;
  font-size:12px; font-weight:500; letter-spacing:.35px; text-transform:uppercase;
}
.btn:hover{ background:#000; }

/* their white band under the scene: statement left, two features right */
.about{ background:#F9FAFB; padding:72px 0 64px; }
.about-in{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.about h2{
  font-family:"Plus Jakarta Sans", sans-serif; color:#1B1A1E;
  font-size:clamp(22px,2.4vw,30px); font-weight:500; line-height:1.22;
  letter-spacing:-.02em; margin-bottom:22px; max-width:22ch;
}
.feats{ display:flex; flex-direction:column; gap:26px; }
.feat{ display:flex; gap:14px; align-items:flex-start; }
.f-ico{ flex:none; width:26px; height:26px; }
.f-ico svg{ width:26px; height:26px; }
.feat b{ display:block; color:#1B1A1E; font-size:14.5px; font-weight:600; margin-bottom:5px; }
.feat p{ color:#5A5960; font-size:13.5px; line-height:1.6; }
@media (max-width:820px){ .about-in{ grid-template-columns:1fr; gap:32px; } }

.numbers{ background:#fff; padding:56px 0; border-top:1px solid #E4E5E7; }
.statrow{ grid-template-columns:repeat(3,1fr); }
.stat{ border-top:2px solid #1B1A1E; padding:18px 0 0; }
.stat b{
  font-family:"Plus Jakarta Sans", sans-serif; color:#1B1A1E;
  font-size:32px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px;
}
.stat span{ color:#6B6A70; font-size:13px; line-height:1.45; }

.fine{ background:#fff; color:#6B6A70; padding:0 0 56px; }
.fine a{ color:#1B1A1E; }