/* about: pen.dev "Page / About" */
.ab-hero .sub{max-width:720px}
.ab-hero .trust{margin-top:-4px}
/* showcase (export: studio photo, 1200x600) — real project shots, tilted, no people */
/* no box: the three cards float on the page background */
/* SSM trust panel */
.sec.ab-trust{padding:0 0 100px}
.ab-panel{display:flex;align-items:center;gap:56px;padding:56px;border-radius:32px;background:var(--ink);box-shadow:0 24px 60px #15123A33;color:#fff}
.ab-tx{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.ab-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#16A34A26;color:#4ADE80;font:600 12px "JetBrains Mono",monospace;letter-spacing:1.5px}
.ab-badge svg{width:18px;height:18px}
.ab-tx h2{font-size:48px;line-height:50px;letter-spacing:-2px}
.ab-tx p{font-size:18px;line-height:27px;color:#C9C6E8}
.ab-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.ab-facts span{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#FFFFFF0F;outline:1px solid #FFFFFF1A;outline-offset:-.5px;font-size:15px;font-weight:600}
.ab-facts b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#8B5CF640;color:#C4B5FD}
.ab-facts svg{width:20px;height:20px}
/* SSM card styled as a certificate: logo + stamp, the number as the hero, details as tiles */
.ab-cert{position:relative;flex:none;width:440px;display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 20px 50px #00000059;overflow:hidden}
.ab-cert::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--p),#C084FC)}
.ab-cert .hd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ab-cert .hd img{display:block;width:auto;height:36px}
.ab-cert .stamp{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#16A34A14;outline:1.5px solid var(--ok);outline-offset:-1.5px;color:var(--ok);font:700 11px "JetBrains Mono",monospace;letter-spacing:1.5px}
.ab-cert .stamp svg{width:15px;height:15px}
.ab-cert .ssm{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;background:linear-gradient(135deg,#F5F3FF,#EDE9FE);outline:1px dashed #C4B5FD;outline-offset:-1px}
.ab-cert .lb{font:600 11px "JetBrains Mono",monospace;letter-spacing:2px;color:var(--p)}
.ab-cert .ssm b{font:700 32px "JetBrains Mono",monospace;letter-spacing:-1px;line-height:1.1}
.ab-cert .ssm small{font:500 13px "JetBrains Mono",monospace;color:var(--mut)}
.ab-cert dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.ab-cert dl div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;outline:1px solid var(--line);outline-offset:-1px}
.ab-cert dt{font:400 12px "JetBrains Mono",monospace;color:var(--mut)}
.ab-cert dd{margin:0;font-size:15px;font-weight:700}
.ab-cert .vf{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;transition:background .25s}
.ab-cert .vf:hover{background:#231E57}
.ab-cert .vf svg{width:16px;height:16px}
/* story */
.sec.ab-story{padding:0 0 100px}
.ab-row{display:flex;align-items:center;gap:56px}
.ab-ba{flex:none;width:680px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab-ba .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-ba .k{font:600 12px "JetBrains Mono",monospace;letter-spacing:2px;color:var(--mut)}
.ab-ba .k.a{color:var(--p)}
.ab-ba small{font:400 12px "JetBrains Mono",monospace;color:var(--mut)}
.ab-ba .fr{position:relative;height:420px;border-radius:20px;overflow:hidden}
.ab-ba .fr img{width:100%;height:100%;object-fit:cover;object-position:top}
.ab-score{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ok);font:700 12px Inter,sans-serif;box-shadow:0 8px 20px #15123A26}
.ab-score svg{width:14px;height:14px}
/* "before" is a drawn illustration, not a real client's site */
.ab-before{background:#F1F0F7}
.ab-before .bar{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-bottom:1px solid var(--line)}
.ab-before .dots i{width:8px;height:8px;outline:0}
.ab-before .u{flex:1;height:14px;border-radius:7px;background:#15123A0D}
.ab-before .sk{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 16px;filter:grayscale(1)}
.ab-before .l{height:12px;border-radius:6px;background:#15123A14}
.ab-before .w1{width:70%}.ab-before .w2{width:45%}.ab-before .w3{width:60%}
.ab-before .bl{height:120px;border-radius:10px;background:#15123A0F}
.ab-before .spin{position:absolute;left:50%;top:66px;width:40px;height:40px;margin-left:-20px;border-radius:50%;border:4px solid #15123A1A;border-top-color:#9CA3AF;animation:abspin 1.1s linear infinite}
@keyframes abspin{to{rotate:360deg}}
.ab-before .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ab-before .tags em{padding:5px 9px;border-radius:999px;background:#fff;outline:1px solid #15123A1A;font:600 11px "JetBrains Mono",monospace;font-style:normal;color:var(--mut)}
.ab-st{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ab-st h2{font-size:44px;line-height:46px;letter-spacing:-1.8px}
.ab-st p{font-size:17px;line-height:26px;color:var(--mut)}
/* values */
.sec.ab-vals{padding:0 0 100px}
.ab-vals .sh h2{font-size:52px;letter-spacing:-2px}
.ab-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ab-tile{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:24px}
.ab-tile .top{display:flex;align-items:center;gap:12px}
.ab-tile .ib{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#8B5CF61F;color:var(--p)}
.ab-tile .ib svg{width:20px;height:20px}
.ab-tile h3{flex:1;font-size:19px;font-weight:700;letter-spacing:-.4px}
.ab-tile em{font:700 14px "JetBrains Mono",monospace;font-style:normal;color:var(--p)}
.ab-tile p{font-size:15px;line-height:22px;color:var(--mut)}

@media (max-width:1180px){
  .ab-panel{flex-direction:column;align-items:stretch}.ab-cert{width:auto}
  .ab-row{flex-direction:column;align-items:stretch}.ab-ba{width:auto}
}
@media (max-width:1024px){
  .ab-tiles{grid-template-columns:1fr}
  .ab-vals .sh h2{font-size:40px}
}
@media (max-width:640px){
  .sec.ab-trust{padding:40px 0 64px}
  .ab-panel{padding:28px 20px;gap:28px;border-radius:24px}
  .ab-tx h2{font-size:32px;line-height:36px;letter-spacing:-1.2px}
  .ab-tx p{font-size:16px;line-height:24px}
  .ab-facts{grid-template-columns:1fr}
  .ab-cert{padding:20px}
  .ab-cert .ssm b{font-size:24px}.ab-cert .hd img{height:30px}
  .sec.ab-story,.sec.ab-vals{padding:0 0 64px}
  .ab-ba .fr{height:280px}
  .ab-ba{gap:10px}
  .ab-before .tags em{font-size:10px}
  .ab-st h2{font-size:32px;line-height:36px;letter-spacing:-1.2px}
  .ab-vals .sh h2{font-size:32px;letter-spacing:-1.2px}
}

/* SSM card revamp: icon + domain header, copyable number, faded icon watermark */
.ab-cert{background:radial-gradient(#8B5CF614 1px,transparent 1px) 0 0/14px 14px,#fff}
.ab-cert>*{position:relative;z-index:1}
.ab-cert .hd img{height:auto}
.ab-cert .id{display:flex;align-items:center;gap:12px}
.ab-cert .id img{width:38px;height:auto}
.ab-cert .id b{display:block;font:800 17px/1.1 Manrope,sans-serif;letter-spacing:-.3px}
.ab-cert .id small{font:500 12px "JetBrains Mono",monospace;color:var(--p)}
.ab-cert .no{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ab-cert .cp{display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:9px;background:#fff;color:var(--p);font:700 12px Inter,sans-serif;cursor:pointer;box-shadow:0 2px 8px #8B5CF61F;transition:background .25s}
.ab-cert .cp:hover{background:#F5F3FF}
.ab-cert .cp svg{width:14px;height:14px}
.ab-cert .wm{position:absolute;z-index:0;right:-34px;bottom:-30px;width:170px;height:auto;opacity:.05;rotate:-12deg;pointer-events:none}

/* after: desktop browser frame, scrolls like the other previews */
.ab-after{display:flex;flex-direction:column;background:#fff}
.ab-after .bar{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-bottom:1px solid var(--line);flex:none}
.ab-after .dots i{width:8px;height:8px;outline:0}
.ab-after .u{flex:1;display:flex;align-items:center;gap:5px;min-width:0;height:22px;padding:0 8px;border-radius:7px;background:#15123A0A;font:500 10px "JetBrains Mono",monospace;color:var(--mut);white-space:nowrap;overflow:hidden}
.ab-after .u svg{width:10px;height:10px;flex:none}
.ab-after .sc{flex:1;overflow-y:auto;scrollbar-width:none}
.ab-after .sc::-webkit-scrollbar{display:none}
.ab-ba .ab-after .sc img{width:100%;height:auto;object-fit:initial}
@media (max-width:760px){
  .ab-cert .id b{white-space:nowrap}
  .ab-cert .stamp{gap:0;padding:7px;font-size:0;letter-spacing:0} /* phone: badge shows only the shield */
}
.ab-tx p{text-wrap:pretty}

/* founded 2015 cell stands out from the SSM date */
.ab-cert dl div.hl{background:#8B5CF612;outline-color:#8B5CF666}.ab-cert dl div.hl dd{color:#6D28D9}

/* ===== founder (25 Oct) ===== */
.ab-founder{padding:0 0 100px}
.ab-fd{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:center}
.ab-fd-ph{position:relative;margin:0;border-radius:28px;overflow:hidden;box-shadow:var(--sh2);aspect-ratio:1;background:#0b0b0b}
.ab-fd-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ab-fd-ph:hover img{transform:scale(1.04)}
.ab-fd-ph figcaption{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;background:#FFFFFFE6;backdrop-filter:blur(10px);color:var(--ink)}
.ab-fd-ph figcaption b{font-size:16px}
.ab-fd-ph figcaption span{font:500 12px "JetBrains Mono",monospace;letter-spacing:1px;color:var(--p)}
.ab-fd-tx{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ab-fd-tx h2{font-size:44px;line-height:46px;letter-spacing:-1.8px}
.ab-fd-tx p{font-size:17px;line-height:26px;color:var(--mut);text-wrap:pretty}
.ab-fd-li{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-fd-li li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.ab-fd-li b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#8B5CF61A;color:var(--p)}
.ab-fd-li svg{width:18px;height:18px}
.ab-fd-tx .btn svg{width:18px;height:18px}
@media (max-width:760px){
  .ab-founder{padding:0 0 64px}
  .ab-fd{grid-template-columns:1fr;gap:28px}
  .ab-fd-ph{max-width:420px;width:100%}
  .ab-fd-tx h2{font-size:32px;line-height:36px;letter-spacing:-1.2px}
  .ab-fd-tx p{font-size:16px;line-height:24px}
}
/* founder on a black panel; the photo's black background melts into it */
.ab-fd{background:#0A0A0C;color:#fff;border-radius:32px;padding:48px;box-shadow:var(--sh2)}
.ab-fd-ph{box-shadow:none;border-radius:22px}
.ab-fd-tx p{color:#B4B3C4}
.ab-fd-tx .eyebrow{background:#8B5CF62E;outline-color:#FFFFFF1F;color:#C4B5FD}
.ab-fd-li li{color:#EDEDF5}
.ab-fd-li b{background:#8B5CF633;color:#C4B5FD}
@media (max-width:760px){.ab-fd{padding:20px 20px 28px;border-radius:24px}}
/* SSM card + founder merged into one black panel (25 Oct) */
.ab-merge{background:#0A0A0C;border-radius:32px;box-shadow:0 24px 60px #15123A33;overflow:hidden}
.ab-merge .ab-panel{background:none;box-shadow:none;border-radius:0}
.ab-merge .ab-fd{background:none;box-shadow:none;border-radius:0;padding:56px;border-top:1px solid #FFFFFF14}
.ab-merge .ab-facts span{background:#FFFFFF0A}
@media (max-width:760px){.ab-merge{border-radius:24px}.ab-merge .ab-fd{padding:28px 20px}}
/* full-width black band; content stays in the centred wrap */
.sec.ab-trust{background:#0A0A0C;padding:96px 0}
.ab-merge{background:none;border-radius:0;box-shadow:none;overflow:visible}
.ab-merge .ab-panel{padding:0 0 56px}
.ab-merge .ab-fd{padding:56px 0 0}
.ab-trust+.ab-vals{padding-top:100px}
@media (max-width:760px){.sec.ab-trust{padding:56px 0}.ab-merge .ab-panel{padding:0 0 36px}.ab-merge .ab-fd{padding:36px 0 0}.ab-trust+.ab-vals{padding-top:64px}}
.ab-merge .ab-fd{border-top:0}
/* founder text matches the SSM intro text */
.ab-merge .ab-fd-tx p{font-size:18px;line-height:27px;color:#C9C6E8}
@media (max-width:640px){.ab-merge .ab-fd-tx p{font-size:16px;line-height:24px}}