@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');
@font-face{font-family:"Venus";src:url("assets/venus-rising.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}

:root{
  --char:#302e2f;
  --char-2:#242324;
  --char-3:#1a191a;
  --line:#4a4849;
  --red:#ce171e;
  --red-2:#a51117;
  --white:#ffffff;
  --muted:#b9b6b7;
  --display:"Venus","Arial Black",sans-serif;
  --body:"Roboto",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--char);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.display{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.wrap{width:min(1280px,100% - 48px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 26px;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;border:2px solid transparent;transition:.2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--char)}
.checker{background-image:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);background-size:14px 14px}

/* review bar shown on every mockup */
.review-bar{position:fixed;right:16px;bottom:16px;z-index:999;display:flex;gap:8px;align-items:center;background:#000c;backdrop-filter:blur(8px);border:1px solid #fff3;padding:8px 12px;border-radius:999px;font:500 13px/1 var(--body)}
.review-bar a{padding:6px 10px;border-radius:999px}
.review-bar a.on{background:var(--red)}
.review-bar span{opacity:.6;padding-right:4px}

/* ---------- ARC design tokens (proposal 30 Oct — type & spacing system; see sistema.html) ---------- */
:root{
  /* type scale */
  --fs-hero:  clamp(56px, 9vw, 170px);     /* page header A title (fitA still shrinks it to its column) */
  --fs-h2-xl: clamp(46px, 6.5vw, 120px);   /* CTA / "wow" statement titles */
  --fs-h2:    clamp(38px, 4.6vw, 80px);    /* section title */
  --fs-h3:    clamp(24px, 2.2vw, 36px);    /* card / sub-section title (Venus) */
  --fs-h4:    clamp(18px, 1.4vw, 22px);    /* small title, list item name (Venus) */
  --fs-num:   clamp(44px, 5vw, 84px);      /* statistics / big numbers */
  --fs-lead:  clamp(18px, 1.35vw, 21px);   /* intro paragraph */
  --fs-body:  17px;                        /* running text */
  --fs-small: 15px;                        /* card text, secondary */
  --fs-label: 12px;                        /* kicker / eyebrow (uppercase, tracked) */
  --fs-micro: 11px;                        /* meta, captions, notes */
  /* line heights (one per style) */
  --lh-hero: .88; --lh-h2-xl: .92; --lh-h2: .95; --lh-num: 1; --lh-h3: 1.05; --lh-h4: 1.15;
  --lh-lead: 1.55; --lh-body: 1.65; --lh-small: 1.6; --lh-label: 1.3; --lh-micro: 1.4;
  /* weights — Venus Rising only exists in 700 italic; Roboto: 400 text · 500 micro · 700 labels/buttons · 900 Venus fallbacks (vfix) */
  --fw-display: 700; --fw-text: 400; --fw-micro: 500; --fw-label: 700; --fw-strong: 700;
  /* tracking */
  --ls-label: .3em; --ls-micro: .14em; --ls-btn: .12em;
  /* spacing */
  --sp-section: clamp(110px, 16vh, 190px); /* vertical padding of a section */
  --sp-gutter:  32px;                      /* side padding (20px on mobile) */
  --sp-title:   clamp(32px, 4.5vh, 56px);  /* space under a section title */
  --sp-block:   clamp(48px, 7vh, 96px);    /* between blocks inside a section */
  --sp-gap:     24px;                      /* grid gap */
  --measure:    62ch;                      /* max width of running text */
}
@media (max-width:760px){:root{--sp-gutter:20px;--fs-body:16px;--fs-small:14.5px}}