/* Self-hosted fonts (SIL OFL 1.1, see assets/fonts/LICENSE-*.txt) */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/russo-one-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/sora-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/chakra-petch-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --red:#CC1920;          /* brand red: logo, Website button, Links outline + text, tagline handle */
  --red-accent:#FF2B34;   /* section-heading squares, focus ring */
  --line:#5A0D11;         /* separators, footer rule */
  --bg:#000000;
  --text:#ECE6DE;
  --name:#F4EFE8;
  --tagline:#CFC8C0;
  --muted:#8C8680;
  --tile:#1E1E1E;         /* More Links + quick icons */
  --tile-hover:#2C2C2C;
  --font-name:'Russo One',system-ui,sans-serif;
  --font-head:'Sora',system-ui,sans-serif;
  --font-ui:'Chakra Petch',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--font-ui);
  background:linear-gradient(180deg,#2A0406 0%,#0E0102 20%,#000 36%,#000 84%,#1A0204 100%) fixed,#000;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
svg.i{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square}

/* ---------- lightning video (screen-blended, black drops out) ---------- */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.9;pointer-events:none;z-index:0}
@media (prefers-reduced-motion: reduce){.bg-video{display:none}}

.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:4px;background:var(--red)}

/* ---------- layout: mobile first ---------- */
.layout{width:100%;max-width:480px;margin:0 auto;padding:36px 20px;display:flex;flex-direction:column;gap:30px}
.profile{display:flex;flex-direction:column;gap:30px}
.id{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.logo{width:156px;height:156px;padding:28px;background:#000}
.logo img{display:block;width:100%;height:100%}
.name{margin:0;font-family:var(--font-name);font-weight:400;font-size:58px;line-height:1;letter-spacing:.04em;color:var(--name)}
.tagline{margin:8px 0 0;font-family:var(--font-head);font-weight:500;font-size:15px;line-height:1.35;color:var(--tagline)}
.tagline b{color:var(--red);font-weight:600}

.quick{display:flex;justify-content:center;gap:10px}
.quick a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--tile);color:var(--text);transition:background .15s,color .15s}
.quick a:hover{background:var(--red);color:#000}
.quick svg.i{width:22px;height:22px}

.links{display:flex;flex-direction:column;gap:30px;min-width:0}
.sec{display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.sec-h::before{content:"";width:8px;height:8px;background:var(--red-accent);flex-shrink:0}
.sec-h::after{content:"";flex-grow:1;height:2px;background:var(--line)}
.sec-h h2{margin:0;font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid.more{gap:8px}

/* ---------- buttons ---------- */
.lk{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:12px 14px;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.lk .txt{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.lbl{font-weight:600;font-size:15px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.cap{font-family:var(--font-mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arw{display:flex;transition:transform .15s}
.lk:hover .arw{transform:translateX(4px)}
.lk:focus-visible,.quick a:focus-visible{outline:2px solid var(--red-accent);outline-offset:3px}

.lk.pri{gap:14px;padding:12px 16px;background:var(--red);border:2px solid var(--red);color:#000}
.lk.pri .lbl{font-size:17px}
.lk.pri .cap{font-weight:500}
.lk.pri:hover{background:#fff;border-color:#fff;color:#000}

.lk.main{background:rgba(0,0,0,.6);border:2px solid var(--red);color:var(--red)}
.lk.main .cap{color:var(--muted)}
.lk.main:hover{background:var(--red);color:#000}
.lk.main:hover .cap{color:#000}
.lk.main .cap,.lk.main .arw{display:none}      /* mobile: icon + label only */

.lk.more{background:var(--tile);border:0;color:var(--text)}
.lk.more:hover{background:var(--tile-hover)}
.lk.more:hover svg.i{color:#fff}

.footer{margin-top:auto;border-top:2px solid var(--line);background:rgba(0,0,0,.55)}
.footer p{margin:0;max-width:480px;margin:0 auto;padding:20px;font-size:13px;font-weight:500;letter-spacing:.18em;color:var(--muted)}

/* ---------- tablet + desktop sizing (stacked below 1360px so link buttons keep room) ---------- */
@media (min-width:1024px){
  body{background:linear-gradient(180deg,#2A0406 0%,#0E0102 28%,#000 50%,#000 78%,#1A0204 100%) fixed,#000}
  .topbar{height:5px}
  .layout{max-width:960px;gap:56px;padding:56px 64px 40px}
  .profile{gap:28px}
  .id{align-items:flex-start;text-align:left;gap:28px}
  .logo{width:232px;height:232px;padding:40px}
  .name{font-size:94px}
  .tagline{font-size:22px;letter-spacing:.02em;margin-top:12px}
  .quick{justify-content:flex-start;gap:12px}
  .quick a{width:56px;height:56px}
  .sec{gap:12px}
  .sec-h{gap:12px;margin-bottom:18px}
  .sec-h::before{width:9px;height:9px}
  .sec-h h2{font-size:15px}
  .grid{gap:12px}
  .grid.more{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  svg.i{width:22px;height:22px}
  .lk{gap:16px;padding:14px 20px}
  .lbl,.lk.pri .lbl{font-size:20px}
  .cap{font-size:13px}
  .lk:hover .arw{transform:translateX(6px)}
  .lk.main .cap{display:block}
  .lk.main .arw{display:flex}
  .lk.more{padding:16px 18px}
  .lk.more .lbl{font-size:16px}
  .lk.more svg.i{width:20px;height:20px}
  .footer p{max-width:960px;padding:20px 64px}
}

/* ---------- desktop: 2-column ---------- */
@media (min-width:1360px){
  .layout{max-width:1440px;display:grid;grid-template-columns:480px minmax(0,1fr);gap:80px;padding:56px 96px 40px}
  .footer p{max-width:1440px;padding:20px 96px}
}