/* ==========================================================================
   Sebastian Muchui — glossy black, 3D, scroll-driven
   ========================================================================== */

:root {
    --bg: #000;
    --surface: rgba(255, 255, 255, 0.025);
    --surface-2: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.08);
    --border-2: rgba(255, 255, 255, 0.14);
    --text: #ededed;
    --muted: #a1a1a1;
    --dim: #8a8a8a;
    --accent: #e0234e;
    --accent-2: #ff5c7a;
    --green: #3ddc84;
    --sans: 'Geist', 'Inter', system-ui, sans-serif;
    --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
main, footer { position: relative; z-index: 2; }
main { overflow-x: clip; }

/* split text helpers (added by JS) */
.sw { display: inline-block; white-space: nowrap; }
.sc, .so { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- Fixed layers ------------------------------------------------------ */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.no-gl body {
    background:
        radial-gradient(ellipse 60% 50% at 75% 20%, rgba(224, 35, 78, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(120, 119, 198, 0.1), transparent 70%),
        #000;
    background-attachment: fixed;
}
.vignette {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
.noise {
    position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 101;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2));
    transform-origin: 0 50%; transform: scaleX(0);
}

/* --- Preloader --------------------------------------------------------- */
.preloader { position: fixed; inset: 0; z-index: 200; animation: pl-failsafe 0.6s ease 7s forwards; }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }
.pl-panel { position: absolute; left: 0; right: 0; height: 50.5%; background: #050505; }
.pl-a { top: 0; }
.pl-b { bottom: 0; }
.pl-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: clamp(20px, 4vw, 48px); }
.pl-log { font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.9; min-height: 120px; }
.pl-log .ok { color: var(--green); }
.pl-count { font-size: clamp(5rem, 20vw, 15rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.82; display: flex; align-items: flex-start; }
.pl-count small { font-size: 0.25em; color: var(--accent); margin-left: 8px; letter-spacing: 0; }
.pl-bar { height: 2px; background: var(--border); overflow: hidden; }
.pl-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #fff); transform-origin: left; transform: scaleX(0); }
.pl-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* --- Cursor ------------------------------------------------------------ */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 150; mix-blend-mode: difference; display: none; }
html.has-cursor .cursor { display: block; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; background: #fff; }
.cursor-ring {
    width: 38px; height: 38px; border: 1px solid #fff; display: grid; place-items: center;
    transition: width 0.4s var(--ease), height 0.4s var(--ease), background 0.3s;
}
.cursor-ring.hover { width: 64px; height: 64px; }
.cursor-ring.has-label { width: 92px; height: 92px; background: #fff; }
.cursor-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: #000; opacity: 0; transition: opacity 0.2s; }
.cursor-ring.has-label .cursor-label { opacity: 1; }

/* --- HUD --------------------------------------------------------------- */
.hud { position: fixed; left: 24px; right: 24px; bottom: 22px; z-index: 40; pointer-events: none; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.08em; }
.hud-l, .hud-r { display: flex; align-items: center; gap: 10px; }
.hud-l b, .hud-r b { color: #fff; font-weight: 500; }
.hud-line { width: 40px; height: 1px; background: var(--accent); }

/* --- Header ------------------------------------------------------------ */
.header {
    position: fixed; top: 16px; left: 50%; z-index: 50;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 1080px);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 10px 10px 20px;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    transition: background 0.3s, border-color 0.3s;
}
.header.scrolled { background: rgba(5, 5, 5, 0.85); border-color: var(--border-2); }
.logo { font-family: var(--mono); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.logo-mark {
    width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
    background: linear-gradient(135deg, #fff, #888); color: #000; font-size: 12px; font-weight: 700;
}
.logo .caret-blink { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { font-size: 13.5px; color: var(--muted); padding: 6px 12px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.nav a:hover, .nav a.active { color: #fff; background: var(--surface-2); }
.header-cta { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

.mobile-menu {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 32px;
    clip-path: circle(0% at calc(100% - 40px) 40px);
    transition: clip-path 0.7s var(--ease);
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 40px) 40px); }
.mobile-menu a.m-link {
    font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--muted);
    opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.2s;
}
.mobile-menu a.m-link span { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-right: 12px; vertical-align: middle; }
.mobile-menu.open a.m-link { opacity: 1; transform: none; }
.mobile-menu a.m-link:hover { color: #fff; }
.m-close { position: absolute; top: 24px; right: 24px; background: none; border: 1px solid var(--border-2); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.m-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; padding: 11px 20px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; overflow: hidden;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s;
}
.btn i { font-size: 12px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 8px 40px rgba(255, 255, 255, 0.2); }
.btn-ghost { background: rgba(10, 10, 10, 0.85); border-color: var(--border-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.3); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { box-shadow: 0 0 0 4px rgba(224, 35, 78, 0.2), 0 8px 40px rgba(224, 35, 78, 0.45); }
.btn-primary::after, .btn-accent::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg); transition: left 0.7s var(--ease);
}
.btn-primary:hover::after, .btn-accent:hover::after { left: 140%; }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Typing / commands -------------------------------------------------- */
.cmd { font-family: var(--mono); font-size: 13px; color: #fff; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmd .prompt { color: var(--green); }
.cmd .path { color: var(--accent-2); }
.type-ready .tc { visibility: hidden; }
.type-ready .tc.on { visibility: visible; }
.caret {
    display: inline-block; width: 0.55em; height: 1.05em; margin-left: 1px; vertical-align: -0.15em;
    background: var(--accent); animation: blink 0.9s steps(1) infinite;
}

/* --- Type -------------------------------------------------------------- */
.h2 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); font-weight: 650; line-height: 1; letter-spacing: -0.05em; }
.lead { color: var(--muted); font-size: 1.08rem; margin-top: 20px; max-width: 560px; }
.grad-text {
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.42));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.shine-text {
    background: linear-gradient(110deg, #8a8a8a 35%, #fff 50%, #8a8a8a 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: text-shine 5s linear infinite;
}
.sc.shine-text { background-size: 600% 100%; animation: text-shine 4.5s linear infinite; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes text-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.accent-dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }

.section { position: relative; padding: 150px 0; }
.section-head { margin-bottom: 72px; max-width: 760px; position: relative; }
.sec-num {
    position: absolute; right: 4vw; top: 60px; z-index: -1; pointer-events: none; user-select: none;
    font-size: clamp(8rem, 24vw, 22rem); font-weight: 800; letter-spacing: -0.08em; line-height: 0.8;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}

/* --- Cards (spotlight + gradient border) ------------------------------ */
.card {
    position: relative; border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.9), rgba(8, 8, 8, 0.9));
    border: 1px solid var(--border); overflow: hidden; isolation: isolate;
    transition: border-color 0.3s;
}
.card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 40%);
}
.card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 35, 78, 0.85), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card:hover { border-color: var(--border-2); }

.badge {
    font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border-2); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.badge.live { color: var(--green); border-color: rgba(61, 220, 132, 0.3); background: rgba(61, 220, 132, 0.06); }
.badge.gold { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.06); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip:hover { color: #fff; border-color: rgba(224, 35, 78, 0.5); background: rgba(224, 35, 78, 0.08); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 14px; transition: color 0.2s, gap 0.3s var(--ease); }
.text-link:hover { color: #fff; gap: 10px; }

/* --- Photos: grayscale until hover ------------------------------------ */
.photo { position: relative; overflow: hidden; }
.photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.1) brightness(0.85);
    transform: scale(1.02);
    transition: filter 0.8s var(--ease), transform 1.2s var(--ease);
}
.photo:hover img, .photo:focus-within img, .photo.lit img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.08); }

/* --- Hero -------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 120px; }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-pill {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
    font-size: 13px; color: var(--muted); border-radius: 999px;
    background: rgba(10, 10, 10, 0.85); border: 1px solid var(--border-2);
}
.pill-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(224, 35, 78, 0.15); color: var(--accent-2); font-size: 11px; border: 1px solid rgba(224, 35, 78, 0.35); }
.hero-pill .sep { color: var(--accent); font-size: 10px; }
.hero-name {
    font-size: clamp(3.6rem, 13vw, 12rem); font-weight: 750; line-height: 0.88;
    letter-spacing: -0.06em; margin: 26px 0 30px;
}
.hero-name .line { display: block; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 560px; }
.typer { font-family: var(--mono); color: #fff; border-right: 2px solid var(--accent); padding-right: 4px; animation: caret-border 0.9s steps(1) infinite; }
@keyframes caret-border { 50% { border-color: transparent; } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-bottom { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; }
.hero-bottom-inner { display: flex; justify-content: space-between; align-items: center; }
.socials { display: flex; gap: 10px; }
.social {
    width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    color: var(--muted); border: 1px solid var(--border); background: rgba(10, 10, 10, 0.6);
    transition: color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}
.social:hover { color: #fff; border-color: var(--border-2); transform: translateY(-3px); }
.scroll-cue { font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.mouse { width: 20px; height: 32px; border: 1.5px solid var(--dim); border-radius: 12px; position: relative; }
.mouse::after { content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 10px); } }

.term-out { position: absolute; right: max(24px, calc((100vw - var(--max)) / 2 + 24px)); bottom: 130px; z-index: 3; width: 340px; }
.term-bob { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px); } }
.term {
    background: rgba(12, 12, 12, 0.94); border: 1px solid var(--border-2); border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    font-family: var(--mono); font-size: 12px; transition: transform 0.5s var(--ease);
}
.term-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; }
.term-bar i:nth-child(1) { background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-body { padding: 12px 14px; min-height: 162px; color: var(--muted); line-height: 1.75; white-space: pre-wrap; }
.term-body .p { color: var(--accent-2); }
.term-body .ok { color: var(--green); }
.term-body .w { color: #fff; }

/* --- Tapes ------------------------------------------------------------- */
.tapes { position: relative; height: 260px; z-index: 3; }
.tape { position: absolute; left: -10%; width: 120%; top: 50%; padding: 18px 0; overflow: hidden; }
.tape-a { background: linear-gradient(180deg, #fff, #cfcfcf); color: #000; transform: translateY(-50%) rotate(-4deg); z-index: 2; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.tape-b { background: linear-gradient(180deg, #ff3d67, #a8133a); color: #fff; transform: translateY(-50%) rotate(3deg); }
.tape-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.tape-track span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-size: clamp(18px, 2.2vw, 26px); font-weight: 650; letter-spacing: -0.01em; text-transform: uppercase; }
.tape-track span::after { content: '✦'; font-size: 0.7em; opacity: 0.6; }

/* --- About ------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: start; }
.about-grid > * { min-width: 0; }
.bio { margin-top: 34px; }
.bio p { color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; letter-spacing: -0.01em; margin-bottom: 20px; }
.bio strong { color: var(--accent-2); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--border); }
.stat { padding: 28px 18px 0 0; }
.stat .num { font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; }
.stat .num sup { color: var(--accent); font-size: 0.5em; vertical-align: top; margin-left: 2px; }
.stat p { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.about-visual { position: relative; padding-top: 40px; }
.about-photo { border-radius: 24px; aspect-ratio: 4 / 5; border: 1px solid var(--border-2); box-shadow: 0 40px 120px -30px rgba(224, 35, 78, 0.35); }
.about-photo .tagline {
    position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2;
    display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px;
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    background: rgba(0, 0, 0, 0.75); border: 1px solid var(--border-2);
}
.corner { position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; z-index: 2; }
.corner.tl { top: -8px; left: -8px; border-width: 1px 0 0 1px; }
.corner.tr { top: -8px; right: -8px; border-width: 1px 1px 0 0; }
.corner.bl { bottom: -8px; left: -8px; border-width: 0 0 1px 1px; }
.corner.br { bottom: -8px; right: -8px; border-width: 0 1px 1px 0; }

/* --- Experience: stacked sticky cards --------------------------------- */
.xp-stack { position: relative; max-width: 980px; margin: 0 auto; }
.xp-card {
    position: sticky; top: calc(100px + var(--i) * 24px);
    margin-bottom: 16vh; padding: 38px 40px; min-height: 340px; border-radius: 26px;
    background: linear-gradient(160deg, #141414 0%, #080808 60%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -30px 80px rgba(0, 0, 0, 0.75);
    will-change: transform, filter;
}
.xp-card:last-child { margin-bottom: 0; }
.xp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.xp-idx { font-family: var(--mono); font-size: 12px; color: var(--accent-2); letter-spacing: 0.1em; }
.xp-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; }
.xp-main h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; }
.xp-org { color: var(--accent-2); margin-top: 12px; font-size: 1rem; }
.xp-date { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 6px; }
.xp-card ul { list-style: none; display: grid; gap: 10px; align-content: start; }
.xp-card li { color: var(--muted); font-size: 0.95rem; padding-left: 22px; position: relative; }
.xp-card li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); font-size: 12px; top: 3px; }
.xp-ghost { position: absolute; right: 28px; bottom: -30px; z-index: -1; font-size: 11rem; font-weight: 800; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); pointer-events: none; }

.xp-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 120px auto 0; }
.side-card { padding: 30px; }
.side-card h3 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.mini { padding: 16px 0; border-top: 1px solid var(--border); }
.mini:first-of-type { border-top: 0; padding-top: 0; }
.mini h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.mini p { font-size: 0.88rem; color: var(--muted); }
.tl-date { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.cert { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.cert .photo { width: 64px; height: 40px; border-radius: 6px; flex-shrink: 0; }

/* --- Stack: 3D ring (falls back to a grid) ---------------------------- */
.stack-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.stack-head .cmd { justify-content: center; }
.stack-head .lead { margin-left: auto; margin-right: auto; }
.ring-stage { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.ring { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ring-card { padding: 26px; min-height: 280px; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(26, 26, 26, 0.94), rgba(8, 8, 8, 0.94)); }
.rc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.rc-idx { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.skill-icon {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-2); color: #fff; font-size: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.ring-card h3 { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.03em; margin-bottom: 6px; }
.ring-card > p { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.ring-card .chips { margin-top: auto; }
.ring-readout { display: none; }

.stack.is-3d { height: 100vh; min-height: 640px; padding: 96px 0 40px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.stack.is-3d .stack-head { margin-bottom: 10px; }
.stack.is-3d .ring-stage { perspective: 1800px; height: min(520px, 58vh); display: flex; align-items: center; justify-content: center; }
.stack.is-3d .ring { display: block; position: relative; width: 300px; height: min(380px, 46vh); transform-style: preserve-3d; }
.stack.is-3d .ring-card { position: absolute; inset: 0; min-height: 0; }
.stack.is-3d .ring-card.front { border-color: rgba(224, 35, 78, 0.55); box-shadow: 0 0 60px rgba(224, 35, 78, 0.18); }
.stack.is-3d .ring-readout { display: flex; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 18px; }
.ring-readout b { color: #fff; font-weight: 500; }

/* --- Projects: horizontal 3D track (falls back to a grid) ------------- */
.projects { position: relative; padding: 150px 0; }
.proj-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.proj-track > * { min-width: 0; }
.proj-intro { grid-column: 1 / -1; margin-bottom: 40px; }
.proj-slot.wide { grid-column: span 2; }
.proj-slot > .proj { height: 100%; }
.proj-hint, .proj-counter, .proj-ghost { display: none; }
.proj { padding: 26px; display: flex; flex-direction: column; min-height: 260px; transition: transform 0.5s var(--ease), border-color 0.3s; }
.proj-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.proj-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 13px;
    color: var(--muted); border: 1px solid var(--border); background: var(--surface);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icon-btn:hover { color: #fff; border-color: var(--border-2); background: var(--surface-2); }
.proj h3 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.03em; margin-bottom: 10px; }
.proj p { color: var(--muted); font-size: 0.92rem; margin-bottom: 20px; }
.proj .chips { margin-top: auto; }
.proj-index { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.proj.split { padding: 0; display: grid; grid-template-columns: 1.25fr 0.75fr; }
.split-body { padding: 30px; display: flex; flex-direction: column; }
.split-body .links-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.split-photo { border-left: 1px solid var(--border); min-height: 220px; }
.proj-big { font-size: 5.5rem; font-weight: 800; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12); margin: auto 0 10px; }
.feature-body { padding: 34px; display: flex; flex-direction: column; height: 100%; }
.feature-body h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.045em; }
.feature-body p { font-size: 1rem; max-width: 560px; }
.arch {
    position: relative; margin: 4px 0 24px; border-radius: 14px; border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.55); padding: 20px; overflow: hidden;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 16px 16px;
}
.arch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.node { font-family: var(--mono); font-size: 12px; padding: 10px 12px; border-radius: 10px; text-align: center; background: #0b0b0b; border: 1px solid var(--border-2); color: #fff; min-width: 80px; }
.node small { display: block; color: var(--dim); font-size: 10.5px; margin-top: 2px; }
.node.hub { border-color: rgba(224, 35, 78, 0.6); box-shadow: 0 0 30px rgba(224, 35, 78, 0.3); }
.wire { flex: 1; height: 1px; background: var(--border-2); position: relative; overflow: hidden; min-width: 14px; }
.wire::after {
    content: ''; position: absolute; top: -1px; left: 0; width: 30%; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    transform: translateX(-100%); animation: packet 1.8s linear infinite; animation-delay: var(--delay, 0s);
}
@keyframes packet { to { transform: translateX(340%); } }
.arch-log { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); height: 60px; overflow: hidden; line-height: 20px; }
.arch-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: log-in 0.4s var(--ease); }
.arch-log .ok { color: var(--green); }
@keyframes log-in { from { opacity: 0; transform: translateY(10px); } }

.projects.is-h { height: 100vh; min-height: 600px; padding: 0; overflow: hidden; display: flex; align-items: center; }
.projects.is-h .proj-track { display: flex; align-items: center; gap: 28px; width: max-content; max-width: none; margin: 0; padding: 0 10vw 0 max(24px, calc((100vw - var(--max)) / 2 + 24px)); will-change: transform; }
.projects.is-h .proj-slot { flex: 0 0 auto; width: 380px; height: min(64vh, 520px); will-change: transform; }
.projects.is-h .proj-slot.wide { width: 700px; }
.projects.is-h .proj-intro { width: 600px; height: auto; margin: 0 60px 0 0; }
.projects.is-h .proj-hint { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 40px; text-transform: uppercase; letter-spacing: 0.1em; }
.proj-hint span { color: var(--accent); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.projects.is-h .proj-counter { display: block; position: absolute; left: max(24px, calc((100vw - var(--max)) / 2 + 24px)); bottom: 70px; font-family: var(--mono); font-size: 13px; color: var(--dim); z-index: 2; }
.proj-counter b { color: #fff; font-weight: 500; font-size: 28px; letter-spacing: -0.04em; margin-right: 6px; }
.projects.is-h .proj-ghost {
    display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; pointer-events: none; white-space: nowrap;
    font-size: 26vw; font-weight: 800; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
}

/* --- Lab: 3D fly-through (falls back to a grid) ----------------------- */
.lab { position: relative; padding: 150px 0; }
.lab-intro { margin-bottom: 64px; }
.tunnel { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 14px; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.t-item { border-radius: 16px; border: 1px solid var(--border-2); margin: 0; }
.t-item.tall { grid-row: span 2; }
.t-item.wide { grid-column: span 2; }
.t-item figcaption {
    position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--mono); font-size: 11.5px;
    padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.7); border: 1px solid var(--border-2); color: var(--muted);
}
.lab-hud, .lab-outro, .lab-frame { display: none; }

.lab.is-3d { height: 100vh; min-height: 600px; padding: 0; overflow: hidden; }
.lab.is-3d .lab-intro { position: absolute; left: 50%; top: 50%; width: min(760px, 90vw); margin: 0; text-align: center; z-index: 4; will-change: transform, opacity; }
.lab.is-3d .lab-intro .cmd { justify-content: center; }
.lab.is-3d .lab-intro .lead { margin-left: auto; margin-right: auto; }
.lab.is-3d .tunnel { position: absolute; inset: 0; display: block; perspective: 1000px; max-width: none; padding: 0; margin: 0; z-index: 2; }
.lab.is-3d .t-item { position: absolute; left: 50%; top: 50%; width: min(440px, 64vw); aspect-ratio: 4 / 3; will-change: transform, opacity; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); }
.lab.is-3d .t-item.tall { width: min(330px, 50vw); aspect-ratio: 3 / 4; }
.lab.is-3d .t-item.wide { width: min(560px, 76vw); aspect-ratio: 16 / 9; }
.lab.is-3d .lab-hud { display: flex; position: absolute; top: 100px; left: 24px; right: 24px; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 0.08em; z-index: 3; }
.lab-hud b { color: #fff; font-weight: 500; }
.lab.is-3d .lab-outro { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 14px; color: var(--muted); opacity: 0; z-index: 1; letter-spacing: 0.1em; white-space: nowrap; }
.lab.is-3d .lab-frame { display: block; position: absolute; inset: 80px 24px 70px; pointer-events: none; z-index: 3; }
.lab-frame .corner { width: 28px; height: 28px; border-color: rgba(255, 255, 255, 0.25); }

/* --- Writing ----------------------------------------------------------- */
.posts-list { border-top: 1px solid var(--border); }
.post-row {
    display: grid; grid-template-columns: 64px 1fr auto 48px; gap: 24px; align-items: center;
    padding: 30px 12px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; isolation: isolate;
}
.post-row::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--accent), #8f1230);
    transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease);
}
.post-row:hover::before { transform: scaleY(1); transform-origin: top; }
.pr-idx { font-family: var(--mono); font-size: 13px; color: var(--dim); transition: color 0.3s; }
.pr-title { display: block; font-size: clamp(1.3rem, 2.6vw, 2.1rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.15; transition: transform 0.55s var(--ease); }
.pr-desc { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 8px; max-width: 640px; transition: color 0.3s, transform 0.55s var(--ease); }
.pr-tags { font-family: var(--mono); font-size: 12px; color: var(--dim); transition: color 0.3s; }
.pr-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); display: grid; place-items: center; transition: transform 0.55s var(--ease), background 0.3s, color 0.3s; }
.post-row:hover .pr-title, .post-row:hover .pr-desc { transform: translateX(14px); }
.post-row:hover .pr-desc, .post-row:hover .pr-idx, .post-row:hover .pr-tags { color: rgba(255, 255, 255, 0.85); }
.post-row:hover .pr-arrow { transform: rotate(-45deg); background: #fff; color: #000; }
.more-row { margin-top: 36px; }

/* --- Contact ----------------------------------------------------------- */
.contact { text-align: center; }
.contact .cmd { justify-content: center; }
.mega-wrap { will-change: transform; }
.mega { font-size: clamp(3rem, 10vw, 9rem); font-weight: 750; line-height: 0.92; letter-spacing: -0.06em; }
.contact .lead { margin: 30px auto 40px; }
.contact-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.contact-meta { margin-top: 40px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.contact-meta a:hover { color: #fff; }
.sponsor { margin-top: 100px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; text-align: left; }
.sponsor h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.sponsor h3 i { color: #ec4899; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.sponsor p { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }

/* --- Footer ------------------------------------------------------------ */
.footer { padding: 60px 0 0; border-top: 1px solid var(--border); overflow: hidden; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.footer-row a:hover { color: #fff; }
.footer-big {
    font-size: clamp(4.5rem, 21vw, 19rem); font-weight: 800; letter-spacing: -0.07em; line-height: 0.78;
    text-align: center; margin-top: 50px; user-select: none; padding-bottom: 0.04em;
}
.fade-text {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 90%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
    .nav { display: none; }
    .header-cta .btn-ghost { display: none; }
    .menu-btn { display: block; }
}
@media (max-width: 900px) {
    .hud { display: none; }
    .hero { padding: 120px 0 60px; justify-content: flex-start; }
    .hero-bottom { position: static; margin-top: 36px; }
    .scroll-cue { display: none; }
    .term-out { position: relative; right: auto; bottom: auto; width: auto; margin: 36px 24px 0; }
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-visual { max-width: 480px; }
    .xp-body { grid-template-columns: 1fr; gap: 24px; }
    .xp-extra { grid-template-columns: 1fr; }
    .proj-track { grid-template-columns: 1fr 1fr; }
    .tunnel { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
    .post-row { grid-template-columns: 36px 1fr 40px; gap: 14px; }
    .pr-tags { display: none; }
    .pr-arrow { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
    .section, .projects, .lab { padding: 110px 0; }
    .container { padding: 0 16px; }
    .header { padding-left: 16px; }
    .header-cta .btn-primary { display: none; }
    .term-out { margin: 32px 16px 0; }
    .stat { padding-right: 8px; }
    .xp-card { padding: 26px 22px; top: calc(84px + var(--i) * 14px); }
    .xp-ghost { font-size: 7rem; }
    .proj-track { grid-template-columns: 1fr; padding: 0 16px; }
    .proj-slot.wide { grid-column: auto; }
    .proj.split { grid-template-columns: 1fr; }
    .split-photo { border-left: 0; border-top: 1px solid var(--border); height: 320px; }
    .feature-body { padding: 24px; }
    .arch { padding: 14px; }
    .node { min-width: 0; padding: 8px 6px; font-size: 11px; }
    .tunnel { padding: 0 16px; }
    .ring-stage { padding: 0 16px; }
    .sponsor { padding: 24px; }
    .lab.is-3d .lab-frame { inset: 80px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .preloader { display: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Icons: Font Awesome Free 5.15.4 (CC BY 4.0) as CSS masks, replaces the FA kit */
.fa,.fas,.far,.fab{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex-shrink:0}
.fa-arrow-right{width:0.875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E")}
.fa-broadcast-tower{width:1.25em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M150.94 192h33.73c11.01 0 18.61-10.83 14.86-21.18-4.93-13.58-7.55-27.98-7.55-42.82s2.62-29.24 7.55-42.82C203.29 74.83 195.68 64 184.67 64h-33.73c-7.01 0-13.46 4.49-15.41 11.23C130.64 92.21 128 109.88 128 128c0 18.12 2.64 35.79 7.54 52.76 1.94 6.74 8.39 11.24 15.4 11.24zM89.92 23.34C95.56 12.72 87.97 0 75.96 0H40.63c-6.27 0-12.14 3.59-14.74 9.31C9.4 45.54 0 85.65 0 128c0 24.75 3.12 68.33 26.69 118.86 2.62 5.63 8.42 9.14 14.61 9.14h34.84c12.02 0 19.61-12.74 13.95-23.37-49.78-93.32-16.71-178.15-.17-209.29zM614.06 9.29C611.46 3.58 605.6 0 599.33 0h-35.42c-11.98 0-19.66 12.66-14.02 23.25 18.27 34.29 48.42 119.42.28 209.23-5.72 10.68 1.8 23.52 13.91 23.52h35.23c6.27 0 12.13-3.58 14.73-9.29C630.57 210.48 640 170.36 640 128s-9.42-82.48-25.94-118.71zM489.06 64h-33.73c-11.01 0-18.61 10.83-14.86 21.18 4.93 13.58 7.55 27.98 7.55 42.82s-2.62 29.24-7.55 42.82c-3.76 10.35 3.85 21.18 14.86 21.18h33.73c7.02 0 13.46-4.49 15.41-11.24 4.9-16.97 7.53-34.64 7.53-52.76 0-18.12-2.64-35.79-7.54-52.76-1.94-6.75-8.39-11.24-15.4-11.24zm-116.3 100.12c7.05-10.29 11.2-22.71 11.2-36.12 0-35.35-28.63-64-63.96-64-35.32 0-63.96 28.65-63.96 64 0 13.41 4.15 25.83 11.2 36.12l-130.5 313.41c-3.4 8.15.46 17.52 8.61 20.92l29.51 12.31c8.15 3.4 17.52-.46 20.91-8.61L244.96 384h150.07l49.2 118.15c3.4 8.16 12.76 12.01 20.91 8.61l29.51-12.31c8.15-3.4 12-12.77 8.61-20.92l-130.5-313.41zM271.62 320L320 203.81 368.38 320h-96.76z'/%3E%3C/svg%3E")}
.fa-calendar{width:0.875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E")}
.fa-code{width:1.25em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z'/%3E%3C/svg%3E")}
.fa-database{width:0.875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z'/%3E%3C/svg%3E")}
.fa-dharmachakra{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495 225.06l-17.22 1.08c-5.27-39.49-20.79-75.64-43.86-105.84l12.95-11.43c6.92-6.11 7.25-16.79.73-23.31L426.44 64.4c-6.53-6.53-17.21-6.19-23.31.73L391.7 78.07c-30.2-23.06-66.35-38.58-105.83-43.86L286.94 17c.58-9.21-6.74-17-15.97-17h-29.94c-9.23 0-16.54 7.79-15.97 17l1.08 17.22c-39.49 5.27-75.64 20.79-105.83 43.86l-11.43-12.95c-6.11-6.92-16.79-7.25-23.31-.73L64.4 85.56c-6.53 6.53-6.19 17.21.73 23.31l12.95 11.43c-23.06 30.2-38.58 66.35-43.86 105.84L17 225.06c-9.21-.58-17 6.74-17 15.97v29.94c0 9.23 7.79 16.54 17 15.97l17.22-1.08c5.27 39.49 20.79 75.64 43.86 105.83l-12.95 11.43c-6.92 6.11-7.25 16.79-.73 23.31l21.17 21.17c6.53 6.53 17.21 6.19 23.31-.73l11.43-12.95c30.2 23.06 66.35 38.58 105.84 43.86L225.06 495c-.58 9.21 6.74 17 15.97 17h29.94c9.23 0 16.54-7.79 15.97-17l-1.08-17.22c39.49-5.27 75.64-20.79 105.84-43.86l11.43 12.95c6.11 6.92 16.79 7.25 23.31.73l21.17-21.17c6.53-6.53 6.19-17.21-.73-23.31l-12.95-11.43c23.06-30.2 38.58-66.35 43.86-105.83l17.22 1.08c9.21.58 17-6.74 17-15.97v-29.94c-.01-9.23-7.8-16.54-17.01-15.97zM281.84 98.61c24.81 4.07 47.63 13.66 67.23 27.78l-42.62 48.29c-8.73-5.44-18.32-9.54-28.62-11.95l4.01-64.12zm-51.68 0l4.01 64.12c-10.29 2.41-19.89 6.52-28.62 11.95l-42.62-48.29c19.6-14.12 42.42-23.71 67.23-27.78zm-103.77 64.33l48.3 42.61c-5.44 8.73-9.54 18.33-11.96 28.62l-64.12-4.01c4.07-24.81 13.66-47.62 27.78-67.22zm-27.78 118.9l64.12-4.01c2.41 10.29 6.52 19.89 11.95 28.62l-48.29 42.62c-14.12-19.6-23.71-42.42-27.78-67.23zm131.55 131.55c-24.81-4.07-47.63-13.66-67.23-27.78l42.61-48.3c8.73 5.44 18.33 9.54 28.62 11.96l-4 64.12zM256 288c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm25.84 125.39l-4.01-64.12c10.29-2.41 19.89-6.52 28.62-11.96l42.61 48.3c-19.6 14.12-42.41 23.71-67.22 27.78zm103.77-64.33l-48.29-42.62c5.44-8.73 9.54-18.32 11.95-28.62l64.12 4.01c-4.07 24.82-13.66 47.64-27.78 67.23zm-36.34-114.89c-2.41-10.29-6.52-19.89-11.96-28.62l48.3-42.61c14.12 19.6 23.71 42.42 27.78 67.23l-64.12 4z'/%3E%3C/svg%3E")}
.fa-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E")}
.fa-envelope{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z'/%3E%3C/svg%3E")}
.fa-external-link-alt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'/%3E%3C/svg%3E")}
.fa-github{width:0.9688em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'/%3E%3C/svg%3E")}
.fa-graduation-cap{width:1.25em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z'/%3E%3C/svg%3E")}
.fa-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E")}
.fa-layer-group{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z'/%3E%3C/svg%3E")}
.fa-linkedin{width:0.875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E")}
.fa-medium{width:0.875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 32v448h448V32H0zm372.2 106.1l-24 23c-2.1 1.6-3.1 4.2-2.7 6.7v169.3c-.4 2.6.6 5.2 2.7 6.7l23.5 23v5.1h-118V367l24.3-23.6c2.4-2.4 2.4-3.1 2.4-6.7V199.8l-67.6 171.6h-9.1L125 199.8v115c-.7 4.8 1 9.7 4.4 13.2l31.6 38.3v5.1H71.2v-5.1l31.6-38.3c3.4-3.5 4.9-8.4 4.1-13.2v-133c.4-3.7-1-7.3-3.8-9.8L75 138.1V133h87.3l67.4 148L289 133.1h83.2v5z'/%3E%3C/svg%3E")}
.fa-microchip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 48v416c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h224c26.51 0 48 21.49 48 48zm96 58v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42V88h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zM30 376h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6z'/%3E%3C/svg%3E")}
.fa-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E")}
.fa-times{width:0.6875em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E")}
.fa-trophy{width:1.125em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z'/%3E%3C/svg%3E")}
.fa-users{width:1.25em;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'/%3E%3C/svg%3E")}