/* INSAN-AI — shared styling for blog / webinars / certificate pages */
:root {
  --bg:#070a0e; --panel:#0d141b; --ink:#eaf7f9; --ink-soft:#86a4ab;
  --cyan:#22cdd9; --cyan-hot:#00ebf8; --mint:#37e0cf;
  --line:rgba(120,205,217,.16); --line-soft:rgba(120,205,217,.08);
  --glow:0 0 10px rgba(0,235,248,.5),0 0 34px rgba(0,235,248,.22);
  --disp:"Michroma",sans-serif; --body:"Chakra Petch",sans-serif; --mono:"IBM Plex Mono",monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100vh; }
.mono { font-family:var(--mono); }
a { color:var(--cyan); }
.pg-grid { position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(120,205,217,.045) 1px,transparent 1px) 0 0/100% 60px,
    linear-gradient(90deg,rgba(120,205,217,.045) 1px,transparent 1px) 0 0/60px 100%,
    radial-gradient(1000px 620px at 82% -8%,rgba(0,235,248,.10),transparent 60%),
    radial-gradient(820px 560px at -8% 108%,rgba(55,224,207,.08),transparent 60%),
    var(--bg); }

/* nav */
.pg-nav { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(16px,4vw,54px); height:64px; background:rgba(7,10,14,.8); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); }
.pg-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-family:var(--disp); letter-spacing:.12em; }
.pg-brand img { height:34px; filter:drop-shadow(0 0 8px rgba(0,235,248,.35)); }
.pg-brand em { color:var(--cyan); font-style:normal; }
.pg-links { display:flex; gap:clamp(14px,3vw,34px); }
.pg-links a { color:var(--ink-soft); text-decoration:none; font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:color .2s; }
.pg-links a:hover { color:var(--cyan); text-shadow:0 0 12px rgba(0,235,248,.4); }

.pg-main { max-width:1080px; margin:0 auto; padding:clamp(28px,5vw,60px) clamp(16px,4vw,40px) 80px; }

/* page hero */
.pg-hero { margin-bottom:44px; }
.pg-kicker { font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--cyan); text-transform:uppercase; margin-bottom:14px; }
.pg-title { font-family:var(--disp); font-size:clamp(30px,6vw,58px); line-height:1.05; letter-spacing:.01em; margin-bottom:16px; }
.pg-lede { color:var(--ink-soft); max-width:620px; font-size:clamp(15px,2vw,18px); }

/* section titles */
.pg-sec { font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--cyan); text-transform:uppercase; margin:44px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }

/* card grid */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.card {
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:var(--glow); }
.card__cover { aspect-ratio:16/9; background:#0a1016 center/cover no-repeat; border-bottom:1px solid var(--line-soft); }
.card__body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__meta { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--cyan); text-transform:uppercase; }
.card__title { font-family:var(--disp); font-size:16px; line-height:1.3; }
.card__excerpt { color:var(--ink-soft); font-size:14px; }
.card__foot { margin-top:auto; padding-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--mint); }
.badge { display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.14em; padding:3px 8px; border:1px solid var(--cyan); color:var(--cyan); text-transform:uppercase; }
.badge--past { border-color:var(--ink-soft); color:var(--ink-soft); }

/* webinar detail block */
.wbin { background:var(--panel); border:1px solid var(--line); margin-bottom:26px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); scroll-margin-top:80px; }
.wbin__head { display:grid; grid-template-columns:1fr; gap:0; }
.wbin__cover { aspect-ratio:21/8; background:#0a1016 center/cover no-repeat; border-bottom:1px solid var(--line-soft); }
.wbin__pad { padding:22px clamp(18px,3vw,30px) 26px; }
.wbin__row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.wbin__title { font-family:var(--disp); font-size:clamp(20px,3vw,28px); margin:8px 0 12px; }
.wbin__meta { display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--cyan); margin-bottom:14px; }
.wbin__desc { color:var(--ink-soft); margin-bottom:18px; white-space:pre-line; }
.wbin__speaker { font-size:13px; color:var(--ink-soft); }
.wbin__speaker b { color:var(--ink); }

/* forms / buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-size:12px; letter-spacing:.16em;
  padding:13px 24px; text-decoration:none; text-transform:uppercase; cursor:pointer; border:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:.2s; }
.btn--primary { background:var(--cyan); color:#04211f; box-shadow:var(--glow); }
.btn--primary:hover { background:var(--cyan-hot); transform:translateY(-2px); }
.btn--ghost { border:1px solid var(--cyan); color:var(--cyan); background:none; }
.btn--ghost:hover { background:rgba(0,235,248,.1); }

.form { display:grid; gap:12px; max-width:520px; margin-top:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--cyan); margin-bottom:5px; text-transform:uppercase; }
.field input, .field textarea { width:100%; background:#0a1016; border:1px solid var(--line); color:var(--ink); padding:11px 13px; font:inherit; font-size:14px; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--cyan); }
.formmsg { font-family:var(--mono); font-size:12px; padding:10px 14px; margin-top:4px; }
.formmsg.ok { border:1px solid var(--mint); color:var(--mint); background:rgba(55,224,207,.06); }
.formmsg.err { border:1px solid #e0556b; color:#e0556b; background:rgba(224,85,107,.06); }

/* blog article */
.article { max-width:760px; margin:0 auto; }
.article__cover { width:100%; aspect-ratio:16/8; object-fit:cover; border:1px solid var(--line); margin:18px 0 28px; }
.article__body { font-size:17px; line-height:1.8; color:#cfe3e6; white-space:pre-line; }
.article__body p { margin-bottom:20px; }
.backlink { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan); text-decoration:none; }

.empty { color:var(--ink-soft); font-family:var(--mono); font-size:13px; letter-spacing:.06em; padding:30px 0; }

/* footer */
.pg-foot { border-top:1px solid var(--line-soft); padding:22px clamp(16px,4vw,54px); margin-top:40px; }
.pg-foot__row { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:10px; letter-spacing:.14em; color:var(--ink-soft); }
.pg-foot__soc { display:flex; gap:16px; }
.pg-foot__soc a { color:var(--ink-soft); text-decoration:none; }
.pg-foot__soc a:hover { color:var(--cyan); }

/* certificate */
.cert-wrap { max-width:900px; margin:0 auto; }
.cert {
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,235,248,.10), transparent 55%),
    linear-gradient(150deg,#0a1420,#0d141b 60%);
  border:2px solid var(--cyan);
  padding:clamp(28px,5vw,54px); margin:22px 0; box-shadow:var(--glow); text-align:center; overflow:hidden;
}
.cert::before { content:""; position:absolute; inset:10px; border:1px solid var(--line); pointer-events:none; z-index:1; }
/* holographic terrain — perspective wireframe receding to a horizon */
.cert__terrain {
  position:absolute; left:-25%; right:-25%; bottom:0; height:62%;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(0,235,248,.16) 40px, rgba(0,235,248,.16) 41px),
    repeating-linear-gradient(0deg, transparent 0, transparent 28px, rgba(0,235,248,.13) 28px, rgba(0,235,248,.13) 29px);
  transform:perspective(300px) rotateX(62deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 85%);
  mask-image:linear-gradient(to top, #000 5%, transparent 85%);
  opacity:.55; pointer-events:none; z-index:0;
}
.cert__terrain::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--cyan-hot); box-shadow:0 0 18px 3px rgba(0,235,248,.7);
}
.cert > :not(.cert__terrain):not(.cert__foot) { position:relative; z-index:2; }
.cert__foot { position:relative; z-index:2; }
.cert__logo { height:66px; margin-bottom:18px; }
.cert__kicker { font-family:var(--mono); letter-spacing:.4em; font-size:12px; color:var(--cyan); text-transform:uppercase; }
.cert__of { color:var(--ink-soft); margin:18px 0 6px; letter-spacing:.1em; font-size:13px; }
.cert__name { font-family:var(--disp); font-size:clamp(26px,5vw,44px); color:#fff; margin:6px 0 14px; }
.cert__line { color:var(--ink-soft); max-width:560px; margin:0 auto 6px; }
.cert__webinar { font-family:var(--disp); font-size:clamp(16px,2.4vw,22px); color:var(--cyan); margin:10px 0; }
.cert__foot { display:flex; justify-content:space-between; gap:20px; margin-top:34px; font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.08em; flex-wrap:wrap; }
.cert__code { color:var(--mint); }

@media (max-width:640px) {
  .form-grid { grid-template-columns:1fr; }
  .pg-links a:not(:first-child) { display:none; }
}
@page { size: A4 landscape; margin: 0; }
@media print {
  .pg-nav, .pg-foot, .pg-grid { display:none !important; }
  html, body { background:#070a0e !important; margin:0; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .pg-main { padding:0; max-width:none; margin:0; }
  /* center the certificate and let it fill the landscape page */
  .cert-wrap { max-width:none; width:100%; min-height:100vh; margin:0; padding:11mm;
    display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .cert-wrap > *:not(.cert) { display:none !important; }
  .cert { box-shadow:none; margin:0; width:100%; max-width:262mm; page-break-inside:avoid;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cert *, .cert__terrain, .cert__terrain::before { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* certificate verification QR */
.cert__foot { align-items: flex-end; }
.cert__sign { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cert__qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cert__qr img { width: 90px; height: 90px; padding: 6px; background: #fff; border-radius: 6px; display: block; }
.cert__qr span { font-size: 9px; letter-spacing: .18em; color: var(--cyan); }
@media (max-width: 640px) {
  .cert__foot { flex-direction: column-reverse; align-items: center; gap: 18px; }
  .cert__sign { text-align: center; align-items: center; }
}