/* hero */
.hero { padding-top:clamp(40px,7vw,88px); padding-bottom:clamp(40px,6vw,72px); }
.hero__name { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(52px,12.5vw,220px); line-height:.86; letter-spacing:.005em; margin:18px 0 clamp(28px,4vw,52px); white-space:nowrap; }
.hero__name span { display:inline-block; }
.hero__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:start; }
.hero__copy { display:grid; gap:26px; }
.flow { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 22px 20px; }
.flow__cap { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.flow ol { counter-reset:step; }
.flow li { display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:baseline; padding:9px 0; border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:14.5px; }
.flow li:first-child { border-top:0; padding-top:0; }
.flow li::before { counter-increment:step; content:counter(step); color:var(--accent); font-weight:500; }
.flow li small { display:block; font-family:var(--font-body); font-size:14px; color:var(--muted); margin-top:1px; }
.flow__foot { margin-top:14px; font-size:14px; color:var(--muted); } .flow__foot a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* logo marquee under hero */
.marquee { margin-top:clamp(36px,5vw,64px); overflow:hidden; border-block:1px solid var(--line); padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:18px; width:max-content; }
.marquee__item { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13.5px; color:var(--muted); }
.marquee__item .logo { width:40px; height:40px; border-radius:11px; }

/* about */
.about { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,6vw,88px); }
.about__lead { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,5vw,62px); line-height:1; margin:14px 0 24px; text-wrap:balance; }
.about__body { display:grid; gap:16px; max-width:60ch; }
.facts { display:grid; align-content:start; }
.facts div { display:grid; grid-template-columns:112px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.facts div:last-child { border-bottom:1px solid var(--line); }
.facts dt { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:3px; }

/* skills */
.skills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,5vw,72px); }
.skill { padding:22px 0 26px; border-top:1px solid var(--line); }
.skill h3 { font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:16px 10px; }
.tile { display:grid; justify-items:center; gap:8px; text-align:center; font-family:var(--font-mono); font-size:12px; line-height:1.25; }
.tile .logo { transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
.tile:hover .logo { transform:translateY(-6px) rotate(-6deg) scale(1.1); box-shadow:0 10px 18px rgba(0,0,0,.25); }
.skill--now .tile span { color:var(--accent); }
.skill--now .logo--mono { border-color:var(--accent); color:var(--accent); }

/* projects */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filters button { font:inherit; font-size:15px; font-weight:600; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.filters button:hover { border-color:var(--fg); }
.filters button[aria-pressed="true"] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.filters button span { font-family:var(--font-mono); font-weight:400; font-size:13px; opacity:.7; margin-left:6px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:18px; grid-auto-flow:dense; }
.card { --bg:var(--pc-bg); --fg:var(--pc-fg); --muted:var(--pc-muted); --line:var(--pc-line); --accent:var(--pc-accent); --accent-ink:var(--pc-accent-ink);
  background:var(--bg); color:var(--fg); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:14px; min-width:0; transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.28); }
.card[hidden] { display:none; }
.card__top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card__tag { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.badge { font-family:var(--font-mono); font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.badge--live { border-color:var(--accent); color:var(--accent); display:inline-flex; align-items:center; gap:7px; }
.badge--live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.card__title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,3.2vw,38px); line-height:1; text-wrap:balance; }
.card__text { color:var(--fg); font-size:15.5px; line-height:1.55; opacity:.92; }
.card--wide { grid-column:span 2; }
.card__stats { display:flex; flex-wrap:wrap; gap:10px 26px; padding:12px 0; border-block:1px dashed var(--line); margin-top:auto; }
.card__stats div { display:grid; gap:2px; min-width:0; }
.card__stats dd { font-family:var(--font-display); font-weight:800; font-size:32px; line-height:1; color:var(--accent); order:1; }
.card__stats dt { font-family:var(--font-mono); font-size:11.5px; line-height:1.3; color:var(--muted); order:2; max-width:19ch; }
.card__facts { display:grid; gap:8px; }
.card__facts div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; font-size:14.5px; line-height:1.45; }
.card__facts dt { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.card__facts dd { color:var(--fg); opacity:.88; }
.card--wide .card__facts { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px 28px; }
.card--wide .card__facts div { grid-template-columns:1fr; gap:2px; }
.chips--card li { font-size:12.5px; padding:4px 10px; }
.card__links { display:flex; flex-wrap:wrap; gap:8px; }
.card .btn { padding:9px 16px; font-size:14px; }

/* ai tools */
.ai { display:grid; gap:clamp(24px,4vw,40px); }
.ai__group h3 { font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.ai__row { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:12px; }
.ai__item { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:18px; transition:transform .25s,border-color .25s,background .25s; }
.ai__item:hover { transform:translateY(-4px); border-color:var(--fg); background:var(--card); }
.ai__item b { display:block; font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1; text-transform:uppercase; }
.ai__item small { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.ai__item .logo { width:52px; height:52px; }

/* journey */
.path { counter-reset:p; display:grid; }
.path li { display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:18px 0; border-top:1px solid var(--line); position:relative; }
.path li:last-child { border-bottom:1px solid var(--line); }
.path li::before { counter-increment:p; content:counter(p,decimal-leading-zero); font-family:var(--font-mono); font-size:14px; color:var(--accent); padding-top:5px; }
.path li::after { content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--accent); }
.path h3 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,3vw,34px); line-height:1.05; }
.path p { color:var(--muted); font-size:15.5px; margin-top:4px; }
.path .state { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-left:10px; vertical-align:middle; }

/* certificates */
.certs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; }
.cert { font:inherit; color:inherit; text-align:left; cursor:zoom-in; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px 12px 18px; display:grid; gap:14px; transition:transform .25s, border-color .25s, box-shadow .25s; }
.cert:hover { transform:translateY(-5px) rotate(-.6deg); border-color:var(--fg); box-shadow:0 14px 26px rgba(0,0,0,.2); }
.cert__img { aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#fff; }
.cert__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cert:hover .cert__img img { transform:scale(1.05); }
.cert b { display:block; font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1.05; text-transform:uppercase; padding-inline:6px; }
.cert span { display:block; color:var(--muted); font-size:14.5px; padding-inline:6px; margin-top:-8px; }
.cert em { font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--accent); padding-inline:6px; margin-top:-6px; }

/* lightbox */
.lb { border:0; padding:0; background:transparent; max-width:min(1100px,94vw); width:100%; color:#EDE9DD; overflow:visible; }
.lb::backdrop { background:rgba(8,9,11,.86); backdrop-filter:blur(4px); }
.lb__box { display:grid; gap:12px; }
.lb__img { background:#fff; border-radius:12px; overflow:hidden; max-height:78vh; display:grid; place-items:center; }
.lb__img img { max-height:78vh; width:auto; max-width:100%; object-fit:contain; }
.lb__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:15px; }
.lb__bar b { font-family:var(--font-display); font-weight:800; font-size:24px; text-transform:uppercase; margin-right:8px; }
.lb__bar span { color:#A8A59A; }
.lb__ctl { display:flex; gap:8px; }
.lb__ctl button,.lb__ctl a { font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; border:1.5px solid rgba(237,233,221,.3); background:transparent; color:#EDE9DD; cursor:pointer; }
.lb__ctl button:hover,.lb__ctl a:hover { border-color:#EDE9DD; }
.lb__ctl .lb__x { background:#FFD43B; color:#121316; border-color:#FFD43B; }

/* contact */
.contact { display:grid; gap:30px; }
.mail { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.mail code { font-family:var(--font-display); font-weight:800; font-size:clamp(30px,6.4vw,78px); line-height:1; letter-spacing:.005em; overflow-wrap:anywhere; user-select:all; }
.copy { font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; } .copy:hover { border-color:var(--fg); }
.avail { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:14px; width:fit-content; padding:8px 16px; border:1px solid var(--accent); color:var(--accent); border-radius:999px; }
.avail::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.chans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); border-top:1px solid var(--line); }
.chan { display:grid; align-content:start; gap:6px; padding:22px 22px 24px 0; border-bottom:1px solid var(--line); }
.chan .logo { width:46px; height:46px; margin-bottom:6px; transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.chan .logos { display:flex; gap:8px; }
.chan:hover .logo { transform:translateY(-4px) rotate(-6deg); }
.chan small { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.chan b { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,34px); line-height:1.05; overflow-wrap:anywhere; }
.chan > span { font-size:14.5px; color:var(--accent); }
.chan__acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chan__acts .btn { padding:8px 16px; font-size:14px; }

@media (max-width:760px) { .card--wide { grid-column:auto; } }
@media (max-width:860px) {
  .hero__grid,.about,.skills { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px) {
  .facts div { grid-template-columns:1fr; gap:4px; }
  .path li { grid-template-columns:40px minmax(0,1fr); gap:10px; }
  .card { padding:22px; }
}