/* Certificates (payout / stage pass) — dark plate with BRIGHT accents:
   glowing electric-blue frame, brand logo, large amount, footer with the
   date, certificate number and a QR code for verification.

   Deliberately WITHOUT the MT5 account number — this document goes external.

   Sizes scale with CONTAINER units (cqw), not the viewport: the card is
   capped at 620 px, so `vw` would grow with the window and content would
   overflow the card on wide screens. */

:root{
  /* Fallback dla kroju podpisu — MUSI byc zdefiniowany wszedzie, gdzie dziala
     cert.css: niezdefiniowany var() uniewaznia cala deklaracje font-family
     i podpis renderowal sie zwyklym fontem na landingu. */
  --script:'Snell Roundhand','Segoe Script','Brush Script MT','Bradley Hand',cursive;
  --k-tlo:#050914;
  --k-tekst:#f2f6ff;
  --k-cichy:#93a3c9;
  --k-blekit:#2b8bff;
  --k-jasny:#67d2ff;
  --k-linia:rgba(120,170,255,.22);
}

.cert-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:24px 16px;
  background:radial-gradient(70% 55% at 50% 0%,#0d1a3a 0%,var(--k-tlo) 72%);
}

/* Frame: a bright glowing edge — it is what reads "premium" on the dark bg */
.cert-card{
  container-type:inline-size;
  position:relative;width:min(620px,100%);
  padding:clamp(3px,.7cqw,6px);border-radius:20px;
  background:linear-gradient(150deg,#67d2ff 0%,#2b8bff 38%,#1b4bd8 68%,#67d2ff 100%);
  box-shadow:0 0 44px rgba(43,139,255,.42),0 30px 80px -40px #000;
}
.cert-inner{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;
  padding:clamp(18px,4cqw,36px);border-radius:15px;text-align:center;
  color:var(--k-tekst);
  background:
    radial-gradient(62% 44% at 50% 4%, rgba(43,139,255,.24) 0%, rgba(43,139,255,0) 64%),
    url('/static/img/cert-motif.svg') center bottom/102% auto no-repeat,
    linear-gradient(168deg,#0b142c 0%,#070d1e 52%,#050914 100%);
}
/* watermark: our logo behind the content */
.cert-inner::before{
  content:"";position:absolute;z-index:-2;left:50%;top:48%;translate:-50% -50%;
  width:74%;aspect-ratio:1/1;
  background:url('/static/img/logo.png') center/contain no-repeat;
  opacity:.055;
}
/* guilloche — subtle engraving so the plate does not look empty */
.cert-inner::after{
  content:"";position:absolute;z-index:-1;inset:-8%;
  background:url('/static/img/guilloche.svg') center/contain no-repeat;
  opacity:.16;mix-blend-mode:screen;pointer-events:none;
}

/* --- brand ---
   Do NOT name this `.cert-brand` — that class already exists in site.css (the
   landing-page certificate) and was repainting the wordmark purple. */
.cert-logo{display:flex;align-items:center;gap:.45em;font-size:clamp(16px,3.6cqw,32px)}
.cert-logo img{width:1.4em;height:1.4em}
.cert-logo span{font-family:var(--display);font-weight:700;letter-spacing:-.015em}

/* --- headings --- */
.cert-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.7cqw,16px);
  margin-top:clamp(10px,2.4cqw,22px);width:min(72%,430px);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.3em;font-size:clamp(8.5px,1.75cqw,14px);color:var(--k-jasny);
}
.cert-eyebrow s{flex:1;height:1px;text-decoration:none;
  background:linear-gradient(90deg,transparent,var(--k-linia),transparent)}
.cert-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(20px,5.1cqw,45px);line-height:1;
  margin:clamp(3px,.8cqw,7px) 0 0;
}

.cert-amountlabel{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.19em;font-size:clamp(8px,1.7cqw,13px);color:var(--k-cichy);
  margin-top:clamp(7px,1.7cqw,15px);
}
.cert-amount{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(36px,11.2cqw,96px);line-height:1;margin-top:clamp(2px,.5cqw,5px);
  text-shadow:0 0 38px rgba(103,210,255,.45),0 0 90px rgba(43,139,255,.3);
}

.cert-presented{
  font-size:clamp(9px,1.85cqw,14.5px);color:var(--k-cichy);
  margin-top:clamp(6px,1.4cqw,12px);
}
.cert-person{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(19px,4.6cqw,40px);line-height:1.12;margin-top:clamp(1px,.4cqw,4px);
  text-wrap:balance;
  /* cieple zloto jak logo marki — niuans z certyfikatow FTMO */
  color:#e8c47c;text-shadow:0 0 22px rgba(232,196,124,.22);
}
.cert-blurb{
  font-size:clamp(8.5px,1.7cqw,13.5px);line-height:1.65;color:var(--k-cichy);
  max-width:62ch;margin:clamp(7px,1.6cqw,14px) auto 0;
}
.cert-note{font-size:clamp(8.5px,1.6cqw,13px);color:var(--k-jasny);margin-top:clamp(4px,1cqw,9px)}

/* --- metrics right below the amount: date and account size --- */
.cert-meta{
  display:flex;justify-content:center;gap:clamp(18px,4.6cqw,52px);
  margin-top:clamp(8px,1.9cqw,17px);
}
.cert-meta div{display:flex;flex-direction:column;align-items:center;gap:.22em}
.cert-meta b{
  font-family:var(--mono);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(13px,2.9cqw,26px);
}
.cert-meta span{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(7px,1.35cqw,10.5px);color:var(--k-cichy);
}

/* wariant payout: kwota i motyw w zieleni (wyplacony zysk) */
.cert-variant-payout .cert-amount{
  color:#57e6b6;
  text-shadow:0 0 38px rgba(95,240,192,.4),0 0 90px rgba(15,157,108,.3);
}
.cert-variant-payout .cert-inner{
  background:
    radial-gradient(62% 44% at 50% 4%, rgba(43,139,255,.24) 0%, rgba(43,139,255,0) 64%),
    url('/static/img/cert-motif-payout.svg') center bottom/102% auto no-repeat,
    linear-gradient(168deg,#0b142c 0%,#070d1e 52%,#050914 100%);
}

/* --- footer: signature + QR with the certificate number --- */
.cert-foot{
  margin-top:auto;width:100%;display:grid;
  grid-template-columns:1fr auto;align-items:end;
  gap:clamp(10px,2.4cqw,24px);
  /* wyraźny oddech od krawędzi karty — podpis i QR nie mogą jej dotykać */
  padding:clamp(9px,2cqw,18px) clamp(64px,16cqw,160px) 0;
  border-top:1px solid var(--k-linia);
}
.cert-signblock{
  /* kolumna wycentrowana wzgledem srodka podpisu: bazgrol siedzi NA cienkiej
     linii, a tytul CEO stoi pod nia, w osi podpisu */
  display:flex;flex-direction:column;align-items:center;gap:0;
  justify-self:start;text-align:center;min-width:0;
  /* linia podpisu ma wypadac ~w polowie wysokosci kodu QR (odrobine nizej) */
  margin-bottom:clamp(26px,7.1cqw,64px);
}
.cert-signblock .sig-line{
  align-self:stretch;height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,163,201,.7) 18%,rgba(147,163,201,.7) 82%,transparent);
}
/* CEO signature — Mr De Haviland: a thin, hurried, barely-legible pen stroke
   (deliberately NOT neat calligraphy). Shipped with the site, so it looks the
   same on every OS and in print. Slight tilt sells the "signed by hand" feel. */
@font-face{
  font-family:'SignatureScript';
  src:url('/static/fonts/signature.woff2') format('woff2');
  /* block: never paint the fallback script font first — pages preload this file,
     so the real signature is ready by first paint instead of swapping in late */
  font-weight:400;font-style:normal;font-display:block;
}
.cert-signblock .sig{
  font-family:'SignatureScript',var(--script);font-weight:400;
  font-size:clamp(28px,6.4cqw,58px);line-height:.85;letter-spacing:-.01em;
  color:#e8edff;display:inline-block;transform:rotate(-4deg) skewX(-3deg);
  text-shadow:0 0 1px rgba(232,237,255,.3);
  /* ogonki liter maja przecinac linie — jak realny podpis zlozony na linii */
  margin-bottom:-.22em;padding:0 .4em .02em;
}
.cert-signblock span{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(6.5px,1.3cqw,10px);color:var(--k-cichy);
  margin-top:.6em;
}

.cert-qr{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(3px,.7cqw,6px);
}
/* White tile with a quiet-zone margin — this is how a QR scans best.
   Dark modules on white, not the other way round: readers expect that. */
.cert-qr .qr-box{
  background:#fff;border-radius:10px;padding:clamp(6px,1.2cqw,11px);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 26px -12px rgba(0,0,0,.8);
  line-height:0;
}
.cert-qr svg{width:clamp(72px,13.4cqw,118px);height:auto;display:block}
.cert-qr b{
  font-family:var(--mono);font-weight:600;font-size:clamp(7.5px,1.5cqw,11.5px);
  letter-spacing:.02em;max-width:100%;overflow-wrap:anywhere;text-align:center;
}
.cert-qr span{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(5.5px,1.1cqw,8.5px);color:var(--k-cichy);
}

/* Verification address — one step larger than the old fine print
   and clearly lower, right under the edge of the document. */
.cert-verify{
  font-size:clamp(7px,1.35cqw,11px);color:var(--k-cichy);line-height:1.5;
  margin-top:clamp(10px,2.4cqw,22px);text-align:center;overflow-wrap:anywhere;
}

/* --- bar below the card (excluded from print) --- */
.cert-actions{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--k-cichy)}
.cert-actions a{color:var(--k-jasny);text-decoration:none;font-weight:600}
.cert-actions a:hover{text-decoration:underline}

/* On narrow screens the square gets too tight and content overflowed the card. */
@media (max-width:520px){
  .cert-inner{aspect-ratio:auto;padding-top:22px;padding-bottom:22px}
  .cert-foot{grid-template-columns:1fr;justify-items:center;gap:16px;
    padding-left:16px;padding-right:16px}   /* the 64px/side floor ate 42-55% of the card */
  .cert-signblock{align-items:center;text-align:center;justify-self:center;margin-bottom:0}
  .cert-signblock .sig{font-size:clamp(24px,8.5cqw,58px);white-space:nowrap}  /* one line at 320px */
  .cert-meta{gap:22px}
  .cert-actions{flex-wrap:wrap;justify-content:center}
  .cert-actions a{padding:10px 6px}
}

@media print{
  html{background:#fff!important}   /* beats the inline dark bg on <html> */
  .cert-page{background:#fff;padding:0;min-height:auto}
  .noprint{display:none!important}
  .cert-card{box-shadow:none;width:100%;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* --- landing-page preview (light section) ---
   The same card as the real document, only without the full-screen page
   background and a bit looser: the landing column is narrower than the card. */
.cert-demo{margin:0}
.cert-demo .cert-inner{padding:clamp(16px,3.6cqw,30px)}
.cert-demo .cert-blurb{max-width:44ch}
@media (max-width:900px){
  .cert-demo .cert-inner{aspect-ratio:auto;padding-top:24px;padding-bottom:24px}
  .cert-demo .cert-foot{grid-template-columns:1fr;justify-items:center;
    padding-left:16px;padding-right:16px}
  .cert-demo .cert-signblock{align-items:center;text-align:center;justify-self:center;margin-bottom:0}
  .cert-demo .cert-signblock .sig{font-size:clamp(24px,8.5cqw,58px);white-space:nowrap}
}