/* ============================================================
   BlackRock, Lda -- Website
   Consumes the design system tokens only (assets/styles.css).
   No raw hex here; everything resolves to a token.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--color-page);
  color:var(--color-body);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--color-link);text-decoration:none;}
a:hover{color:var(--color-link-hover);}
img{max-width:100%;}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);}
@media(min-width:820px){.wrap{padding:0 var(--gutter-lg);}}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--clay-700);font-weight:var(--fw-medium);margin-bottom:var(--space-4);
}
.eyebrow.on-dark{color:var(--clay-500);}

h1,h2,h3.serif{font-family:var(--font-serif);font-weight:var(--fw-semibold);}

.display{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(2.25rem,5.4vw,3.75rem);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);color:var(--white);
}
.h2{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);color:var(--ink-900);max-width:19em;
}
.lede{
  font-size:var(--text-md);line-height:var(--lh-snug);
  color:var(--ink-600);max-width:42em;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--fw-semibold);
  border-radius:var(--radius-md);padding:14px 26px;cursor:pointer;display:inline-flex;
  align-items:center;gap:var(--space-2);border:none;
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.btn-accent{background:var(--color-accent);color:var(--white);}
.btn-accent:hover{background:var(--color-accent-hover);color:var(--white);}
.btn-ink{background:var(--color-primary);color:var(--white);}
.btn-ink:hover{background:var(--color-primary-hover);color:var(--white);}
.btn-outline-inverse{
  background:transparent;color:var(--white);
  border:1.5px solid var(--color-border-inverse);padding:13px 26px;
}
.btn-outline-inverse:hover{background:rgba(255,255,255,.06);color:var(--white);}
.btn-outline{
  background:transparent;color:var(--ink-900);
  border:1.5px solid var(--color-border-strong);padding:13px 26px;
}
.btn-outline:hover{background:var(--stone-100);color:var(--ink-900);}
:focus-visible{outline:none;box-shadow:var(--shadow-ring);border-radius:var(--radius-sm);}

/* ---------- header ---------- */
.site-head{background:var(--navy-900);}
.head-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding:var(--space-5) var(--gutter);max-width:var(--container-max);margin:0 auto;
  border-bottom:1px solid var(--color-border-inverse);
}
@media(min-width:820px){.head-inner{padding:22px var(--gutter-lg);}}
.head-inner .brand img{height:18px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:var(--space-6);}
.nav a{
  font-size:var(--text-sm);color:var(--color-on-inverse);
  font-weight:var(--fw-medium);white-space:nowrap;
}
.nav a:hover{color:var(--white);}
.nav .lang{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-label);
  border:1px solid var(--color-border-inverse);border-radius:var(--radius-sm);
  padding:6px 10px;color:var(--color-on-inverse-muted);
}
.nav .lang:hover{border-color:var(--clay-500);color:var(--white);}
.nav-toggle{
  display:none;background:transparent;color:var(--color-on-inverse);
  border:1px solid var(--color-border-inverse);border-radius:var(--radius-sm);
  padding:8px 12px;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;
}

/* ---------- hero ---------- */
.hero{background:var(--navy-900);color:var(--white);}
.hero-inner{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-8) var(--gutter) var(--space-9);
}
@media(min-width:820px){.hero-inner{padding:96px var(--gutter-lg) 104px;}}
.hero .display{max-width:15em;}
.hero .device{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);}
.hero .device img{width:64px;height:21px;display:block;}
.hero .device span{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--clay-500);
}
.hero .lede{color:var(--color-on-inverse);opacity:.9;max-width:34em;margin-top:var(--space-5);}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7);}
/* ordered barrier list inside a gap card */
.card ol{list-style:none;counter-reset:bar;margin-top:var(--space-4);}
.card ol li{
  counter-increment:bar;font-size:var(--text-sm);line-height:var(--lh-body);
  color:var(--ink-600);padding-left:var(--space-6);position:relative;
  margin-bottom:var(--space-2);
}
.card ol li::before{
  content:counter(bar,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--clay-600);
  font-weight:var(--fw-medium);letter-spacing:var(--ls-label);
  background:none;width:auto;height:auto;border-radius:0;
}

/* ---------- sections ---------- */
.section{padding:var(--space-9) 0;}
.section.surface{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.section .lede{margin-top:var(--space-4);}

/* ---------- gap cards ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-7);}
.card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-6);
  transition:box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover{box-shadow:var(--shadow-md);}
.card.on-alt{background:var(--stone-50);}
.card h3{
  font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--fw-bold);
  color:var(--ink-900);margin-bottom:var(--space-3);line-height:var(--lh-heading);
}
.card p{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--ink-600);}
.card ul{list-style:none;margin-top:var(--space-4);}
.card li{
  font-size:var(--text-sm);line-height:var(--lh-body);color:var(--ink-500);
  padding-left:var(--space-4);position:relative;margin-bottom:var(--space-2);
}
.card li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--clay-600);border-radius:var(--radius-full);
}
.card .tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  background:var(--clay-100);color:var(--clay-800);
  padding:5px 10px;border-radius:var(--radius-sm);margin-bottom:var(--space-4);
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);}
.card-head .num{font-family:var(--font-serif);font-size:2.5rem;color:var(--stone-300);line-height:1;}
.card-head .ic{color:var(--navy-600);font-family:var(--font-mono);font-size:var(--text-sm);
  letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-medium);}

/* ---------- statement band ---------- */
.band{background:var(--navy-900);color:var(--white);padding:var(--space-9) 0;}
.band .h2{color:var(--white);}
.band p{
  margin-top:var(--space-5);font-size:var(--text-md);line-height:var(--lh-body);
  color:var(--color-on-inverse);opacity:.94;max-width:44em;
}
.band p b{color:var(--clay-500);font-weight:var(--fw-semibold);}
.band .device{width:120px;height:40px;margin-bottom:var(--space-5);display:block;}

/* ---------- contact ---------- */
.contact-line{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
  margin-top:var(--space-6);padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
}
.contact-line .label{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--clay-700);font-weight:var(--fw-medium);
  flex-shrink:0;
}
.contact-line a{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(1.5rem,3vw,2.25rem);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);color:var(--ink-900);
  transition:color var(--duration-base) var(--ease-standard);
}
.contact-line a:hover{color:var(--color-accent);}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-900);color:var(--color-on-inverse-muted);padding:var(--space-7) 0;}
.foot-inner{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);
  font-size:var(--text-sm);line-height:var(--lh-snug);
}
.foot-inner img{height:16px;width:auto;display:block;margin-bottom:var(--space-3);}
.foot-inner .r{text-align:right;font-family:var(--font-serif);color:var(--color-on-inverse);}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    background:var(--navy-800);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--space-2) var(--gutter) var(--space-4);
  }
  .nav.open{display:flex;}
  .nav a{padding:12px 0;border-bottom:1px solid var(--color-border-inverse);}
  .nav .lang{margin-top:var(--space-3);text-align:center;}
  .nav-toggle{display:block;}
  .site-head{position:relative;}
  .duo{grid-template-columns:1fr;}
  .section{padding:var(--space-8) 0;}
  .foot-inner{flex-direction:column;align-items:flex-start;}
  .foot-inner .r{text-align:left;}
}