@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'GT Eesti Pro Display';src:url('assets/fonts/gteestiprodisplay_ultrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --red:#F42B02;
  --red-deep:#D82301;
  --ink:#0D0D0F;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'GT Eesti Pro Display',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}

.eyebrow{margin:0 0 20px;font-size:12px;font-weight:500;letter-spacing:0.32em;color:var(--red)}
.tabular{font-variant-numeric:tabular-nums}

@keyframes decPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.8)}}
@keyframes decPing{0%,100%{opacity:0.14}8%{opacity:1}26%{opacity:0.14}}

.page{min-width:320px}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 64px;border-bottom:1px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:14px}
.brand img.mark{width:44px;height:44px;border-radius:10px}
.brand img.wordmark{height:26px;width:auto}

.site-nav{display:flex;align-items:center;gap:36px}
.site-nav a{font-size:15px;font-weight:500;transition:color 120ms var(--ease,ease)}
.site-nav a:hover{color:var(--red)}
.btn-login{
  padding:10px 22px;border:1.5px solid var(--ink);border-radius:999px;
  transition:background 120ms ease,color 120ms ease;
}
.btn-login:hover{background:var(--ink);color:var(--white)}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr 380px;align-items:stretch;
  border-bottom:1px solid var(--ink);
}
.hero-copy{padding:96px 64px 88px}
.hero-copy h1{
  margin:0 0 32px;font-size:88px;line-height:0.98;font-weight:800;
  letter-spacing:-0.02em;max-width:13ch;text-wrap:pretty;
}
.hero-copy p{margin:0 0 44px;font-size:21px;line-height:1.5;max-width:56ch}
.hero-cta{display:flex;align-items:center;gap:20px}
.hero-tagline{font-size:14px;letter-spacing:0.32em;font-weight:500}

.hero-pattern{
  border-left:1px solid var(--ink);
  background:url('assets/img/pattern-red.png') top left/340px auto repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 45%);
  mask-image:linear-gradient(to right,transparent 0%,black 45%);
}

.btn{
  display:inline-block;padding:16px 34px;border-radius:999px;
  font-size:17px;font-weight:500;transition:background 120ms ease,color 120ms ease;
}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-deep);color:var(--white)}
.btn-white{background:var(--white);color:var(--red)}
.btn-white:hover{background:var(--ink);color:var(--white)}

/* ---------- what we do ---------- */
.section-border{border-bottom:1px solid var(--ink)}
.what-intro{padding:72px 64px 0}
.what-intro p{margin:0 0 64px;font-size:30px;line-height:1.35;font-weight:400;max-width:44ch;text-wrap:pretty}

.activities{display:grid;grid-template-columns:repeat(4,1fr)}
.activity{
  display:flex;flex-direction:column;padding:44px 40px 48px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
}
.activity .index{margin:0 0 18px;font-size:15px;font-weight:500;color:var(--red);flex:none}
.activity h3{margin:0 0 16px;font-size:30px;font-weight:800;letter-spacing:-0.01em}
.activity p{margin:0 0 32px;font-size:16px;line-height:1.55;flex:1}
.ledger{display:flex;flex-direction:column;font-size:12px}
.ledger-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--ink);
}
.ledger-row.total{border-top:2px solid var(--ink)}
.ledger-row .label{font-weight:500}
.ledger-row .k{font-size:10px;letter-spacing:0.18em;font-weight:500}
.ledger-row .k.bold{font-weight:800}
.ledger-row.accent{color:var(--red)}

.reg-status{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:0.18em;font-weight:500;color:var(--red);transition:opacity 450ms ease,color 450ms ease}
.reg-status .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);transition:background 450ms ease}
.reg-status.pending{color:rgba(13,13,15,0.45)}
.reg-status.pending .dot{background:rgba(13,13,15,0.45)}
.reg-title{transition:opacity 450ms ease}
.ledger-row.fading .reg-title,.ledger-row.fading .reg-status{opacity:0}

.collect-source{width:58px;font-size:10px;letter-spacing:0.18em;font-weight:500}
.collect-bar-track{flex:1}
.collect-bar-fill{display:block;height:8px;border-radius:999px;background:var(--red);transition:width 700ms cubic-bezier(.22,1,.36,1)}

#card3Collected,#card3Claimed{transition:opacity 400ms ease}

.acct-row{transition:opacity 800ms cubic-bezier(.22,1,.36,1),transform 800ms cubic-bezier(.22,1,.36,1)}
.acct-row.hidden{opacity:0;transform:translateY(6px)}

/* ---------- check & claim ---------- */
.check-claim{
  display:grid;grid-template-columns:240px minmax(480px,1fr) 400px;
  border-bottom:1px solid var(--ink);
}
.check-pattern{
  border-right:1px solid var(--ink);
  background:url('assets/img/pattern-red.png') top left/340px auto repeat;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,black 55%);
  mask-image:linear-gradient(to left,transparent 0%,black 55%);
}
.check-copy{padding:88px 64px}
.check-copy h2{margin:0 0 28px;font-size:52px;line-height:1.05;font-weight:800;letter-spacing:-0.015em;max-width:20ch;text-wrap:pretty}
.check-copy p{margin:0 0 20px;font-size:19px;line-height:1.55;max-width:58ch}
.check-copy p:last-child{margin:0}

.check-panel{
  border-left:1px solid var(--ink);padding:64px 56px;
  display:flex;flex-direction:column;justify-content:center;gap:36px;
}
.monitoring{display:flex;align-items:center;gap:10px}
.monitoring .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);
  animation:decPulse 1.6s ease-in-out infinite;
}
.monitoring .label{font-size:11px;letter-spacing:0.32em;font-weight:500;color:var(--red)}

.usage-grid{display:grid;grid-template-columns:repeat(10,1fr);justify-items:center;row-gap:18px}
.usage-grid span{
  width:9px;height:9px;border-radius:50%;background:var(--ink);
  animation:decPing 3.2s linear infinite;
}

.claim-ledger{display:flex;flex-direction:column;font-size:14px}
.claim-ledger .ledger-row{padding:12px 0}
.claim-ledger .k{font-size:11px;letter-spacing:0.22em}
.claim-total{display:flex;flex-direction:column;gap:10px;padding:12px 0 0;border-top:2px solid var(--ink);color:var(--red)}
.claim-total .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.claim-total .k{font-size:11px;letter-spacing:0.22em;font-weight:500}
.claim-total .v{font-size:18px;font-weight:800}
.claim-bar-track{height:8px;background:rgba(244,43,2,0.15);border-radius:999px;overflow:hidden}
.claim-bar-fill{height:100%;width:0%;background:var(--red);border-radius:999px}

/* ---------- pros strip ---------- */
.pros{padding:56px 64px;border-bottom:1px solid var(--ink)}
.pros-eyebrow{margin:0 0 32px;font-size:12px;font-weight:500;letter-spacing:0.32em;color:var(--red)}
.pros-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px}
.pros-logos img{opacity:0.9}
.pros-note{margin:28px 0 0;font-size:16px}

/* ---------- who it's for ---------- */
.audiences{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}
.audience{padding:56px 48px 64px;border-right:1px solid var(--ink)}
.audience-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.audience-mark{
  display:inline-block;width:34px;height:34px;flex-shrink:0;background:var(--red);
  -webkit-mask:url('assets/img/logo-mark-black.png') center/contain no-repeat;
  mask:url('assets/img/logo-mark-black.png') center/contain no-repeat;
}
.audience h3{margin:0;font-size:26px;font-weight:800}
.audience p{margin:0;font-size:16px;line-height:1.55}

/* ---------- contact ---------- */
.contact{position:relative;background:var(--red);overflow:hidden}
.contact-pattern{
  position:absolute;inset:0;
  background:url('assets/img/pattern-red.png') top left/300px auto repeat;
  filter:brightness(0) invert(1);opacity:0.16;
  -webkit-mask-image:radial-gradient(85% 85% at 50% 50%,black 30%,transparent 85%);
  mask-image:radial-gradient(85% 85% at 50% 50%,black 30%,transparent 85%);
}
.contact-inner{position:relative;padding:110px 64px;text-align:center}
.contact-inner h2{margin:0 0 20px;font-size:64px;line-height:1;font-weight:800;letter-spacing:-0.015em;color:var(--white)}
.contact-inner p{margin:0 auto 44px;font-size:32px;line-height:1.5;max-width:52ch;color:var(--white)}
.contact-inner .btn{font-size:18px;padding:18px 40px}

/* ---------- footer ---------- */
.site-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 64px;background:var(--ink);color:var(--white);
}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-mark{
  display:inline-block;width:26px;height:26px;background:var(--red);
  -webkit-mask:url('assets/img/logo-mark-black.png') center/contain no-repeat;
  mask:url('assets/img/logo-mark-black.png') center/contain no-repeat;
}
.footer-name{font-size:18px;font-weight:800;color:var(--white)}
.footer-tagline{margin-left:10px;font-size:12px;letter-spacing:0.32em;font-weight:500;color:var(--white)}
.footer-links{display:flex;align-items:center;gap:32px}
.footer-links a{font-size:14px;color:var(--white);transition:color 120ms ease}
.footer-links a:hover{color:var(--red)}
.footer-copy{font-size:14px;color:var(--white);opacity:0.55}

@media (prefers-reduced-motion: reduce){
  .monitoring .dot,.usage-grid span{animation:none}
}

/* ============ responsive ============ */

@media (max-width:1024px){
  .site-header{padding:22px 32px}
  .site-nav{gap:20px}
  .site-nav a:not(.btn-login){font-size:14px}

  .hero-copy{padding:64px 32px 56px}
  .hero-copy h1{font-size:56px}
  .hero-copy p{font-size:18px;margin-bottom:32px}

  .what-intro{padding:56px 32px 0}
  .what-intro p{font-size:24px;margin-bottom:40px}
  .activities{grid-template-columns:repeat(2,1fr)}
  .activity{padding:32px 28px 36px}
  .activity h3{font-size:26px}

  .check-claim{grid-template-columns:1fr}
  .check-pattern{display:none}
  .check-copy{padding:56px 32px}
  .check-copy h2{font-size:38px}
  .check-copy p{font-size:17px}
  .check-panel{border-left:none;border-top:1px solid var(--ink);padding:48px 32px}

  .pros{padding:40px 32px}
  .pros-logos{justify-content:flex-start}

  .audiences{grid-template-columns:repeat(2,1fr)}

  .contact-inner{padding:72px 32px}
  .contact-inner h2{font-size:44px}
  .contact-inner p{font-size:22px}

  .site-footer{padding:24px 32px}
}

@media (max-width:640px){
  .site-header{flex-wrap:wrap;gap:16px;padding:18px 20px}
  .site-nav{width:100%;flex-wrap:wrap;gap:12px 20px}

  .hero{grid-template-columns:1fr}
  .hero-copy{padding:48px 20px 40px}
  .hero-copy h1{font-size:38px;max-width:none}
  .hero-copy p{font-size:16px;margin-bottom:28px}
  .hero-cta{flex-wrap:wrap;gap:14px}
  .hero-pattern{height:160px;border-left:none;border-top:1px solid var(--ink)}

  .what-intro{padding:40px 20px 0}
  .what-intro p{font-size:20px;margin-bottom:28px}
  .activities{grid-template-columns:1fr}
  .activity{border-right:none;padding:28px 20px 32px}

  .check-copy{padding:40px 20px}
  .check-copy h2{font-size:30px}
  .check-copy p{font-size:16px}
  .check-panel{padding:36px 20px}

  .pros{padding:32px 20px}
  .pros-logos{gap:20px 24px}

  .audiences{grid-template-columns:1fr}
  .audience{border-right:none;border-top:1px solid var(--ink);padding:36px 20px 40px}
  .audience:first-child{border-top:none}
  .audience:last-child{border-right:none}

  .contact-inner{padding:56px 20px}
  .contact-inner h2{font-size:34px}
  .contact-inner p{font-size:18px;margin-bottom:32px}
  .contact-inner .btn{font-size:16px;padding:15px 30px}

  .site-footer{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-tagline{display:none}
  .footer-links{flex-wrap:wrap;gap:16px 24px}
}