:root { --bg:#131929; --surface:#18223a; --text:#f3f6fc; --muted:#aab8d1; --line:#2b3d61; --accent:#9dbdff; --accent-soft:#1e3e6c; --radius:7px; --maxw:1120px; }
* { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { color:var(--text); background:var(--bg); font-family:Inter,system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand { font-family:"Space Grotesk",Inter,sans-serif; letter-spacing:-.045em; line-height:1.02; } a { color:inherit; text-decoration:none; } a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }.skip-link { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-180%); padding:10px 14px; color:#0d1011; background:var(--accent); font-size:.85rem; font-weight:700; }.skip-link:focus { transform:translateY(0); }.reveal { opacity:1; transform:none; }.bg-orbs,.card-glow { display:none; }
/* Navigation */
.nav-wrap { position:sticky; z-index:50; top:0; border-bottom:1px solid var(--line); background:rgba(13,16,17,.96); }.nav { display:flex; align-items:center; max-width:var(--maxw); min-height:74px; margin:0 auto; padding:0 24px; }.glass { background:var(--surface); border:1px solid var(--line); }.brand { display:inline-flex; align-items:center; gap:9px; font-size:1rem; font-weight:700; }.brand-mark { width:16px; height:16px; border-radius:50%; background:var(--accent); }.nav-links { display:flex; gap:27px; margin-left:auto; list-style:none; color:var(--muted); font-size:.87rem; font-weight:600; }.nav-links a:hover { color:var(--accent); }.btn { display:inline-flex; align-items:center; justify-content:center; min-height:43px; padding:0 17px; border:1px solid #6f7974; border-radius:5px; font-size:.88rem; font-weight:700; transition:background .18s ease,color .18s ease,transform .18s ease; }.btn:hover { transform:translateY(-1px); }.btn-primary { color:#101410; background:var(--accent); border-color:var(--accent); }.btn-primary:hover { background:#d0e58f; border-color:#d0e58f; }.btn-ghost { color:var(--text); background:transparent; }.btn-ghost:hover { color:#101410; background:var(--text); border-color:var(--text); }.nav-cta { min-height:37px; margin-left:24px; }.menu-toggle { display:none; width:40px; height:38px; padding:0; border:1px solid var(--line); background:var(--surface); cursor:pointer; }.menu-toggle span { display:block; width:17px; height:1px; margin:5px auto; background:var(--text); }
/* Hero */
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:48px; align-items:end; max-width:var(--maxw); min-height:610px; margin:0 auto; padding:122px 24px 85px; border-bottom:1px solid var(--line); }.hero::after { content:""; position:absolute; right:24px; bottom:0; left:24px; height:1px; background:var(--accent); opacity:.7; }.hero-inner { max-width:850px; }.hero-portrait { width:240px; margin:0; align-self:end; }.hero-portrait img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 32%; border:1px solid #49534f; border-radius:var(--radius); filter:saturate(.9) contrast(1.03); }.pill { display:inline-flex; align-items:center; gap:8px; margin-bottom:24px; color:var(--muted); background:transparent; border:0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.79rem; font-weight:600; letter-spacing:.02em; }.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }.hero-title { font-size:clamp(4rem,10vw,8.8rem); font-weight:700; }.grad-text { color:var(--accent); }.hero-role { margin-top:26px; color:#d7ddd7; font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(1.15rem,2.1vw,1.75rem); font-weight:500; letter-spacing:-.025em; }.hero-sub { max-width:600px; margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.75; }.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
/* Shared sections */
.section { max-width:var(--maxw); margin:0 auto; padding:95px 24px; border-bottom:1px solid var(--line); }.stats-bar-wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--text); border-bottom:1px solid var(--line); background:transparent; }.stat { padding:25px 20px 25px 0; }.stat:nth-of-type(3),.stat:nth-of-type(5),.stat:nth-of-type(7) { padding-left:22px; border-left:1px solid var(--line); }.stat strong { display:block; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.5rem; letter-spacing:-.05em; }.stat span { display:block; margin-top:5px; color:var(--muted); font-size:.79rem; }.stat-divider { display:none; }.section-head { max-width:625px; margin:0 0 42px; text-align:left; }.eyebrow { display:block; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.section-title { max-width:720px; margin-top:12px; font-size:clamp(2.25rem,5vw,4.25rem); }.section-sub { max-width:570px; margin-top:16px; color:var(--muted); font-size:.97rem; line-height:1.7; }
/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.skill-card { min-height:210px; padding:28px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; }.skill-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:32px; color:var(--accent); }.skill-icon svg { width:23px; height:23px; }.skill-card h3 { font-size:1.25rem; }.tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }.tag { padding:4px 0; margin-right:12px; color:var(--muted); font-size:.82rem; }.tag::before { content:"•"; margin-right:6px; color:var(--accent); }
/* Experience */
.experience-list { border-top:1px solid var(--line); }.experience-item { display:grid; grid-template-columns:180px minmax(190px,.8fr) minmax(0,1.2fr); gap:28px; padding:27px 0; border-bottom:1px solid var(--line); }.experience-date { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; font-weight:700; letter-spacing:.04em; }.experience-item h3 { font-size:1.18rem; }.experience-company { margin-top:4px; color:var(--muted); font-size:.84rem; }.experience-item > p:last-child { max-width:490px; color:var(--muted); font-size:.9rem; line-height:1.65; }
@media (max-width:760px) { .experience-item { grid-template-columns:1fr; gap:9px; padding:23px 0; }.experience-item > p:last-child { margin-top:5px; } }

/* Projects */
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.card { overflow:hidden; border-radius:var(--radius); transition:transform .18s ease,border-color .18s ease; }.card:hover { border-color:#68736e; transform:translateY(-4px); }.project-card { display:flex; flex-direction:column; padding:0; }.project-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--line); filter:saturate(.92) contrast(1.04); }.project-card-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:25px; }.project-meta { display:flex; gap:8px; margin-bottom:13px; }.project-meta span { color:var(--accent); font-family:"Space Grotesk",Inter,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.project-meta span + span::before { content:" / "; margin-right:8px; color:#738079; }.card h3 { font-size:1.5rem; }.card p { max-width:470px; margin-top:10px; color:var(--muted); font-size:.91rem; line-height:1.65; }.card-link { display:inline-flex; gap:7px; margin-top:24px; color:var(--accent); border-bottom:1px solid currentColor; font-size:.84rem; font-weight:700; }.card-link:hover { color:var(--text); }.arrow { transition:transform .18s ease; }.card-link:hover .arrow { transform:translateX(3px); }
/* Unity notes */
.note-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.note-card { display:flex; flex-direction:column; min-height:300px; padding:28px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; transition:background .18s ease; }.note-card:hover { background:rgba(30,62,108,.28); }.note-type { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.7rem; font-weight:700; letter-spacing:.07em; }.note-card h3 { margin-top:22px; font-size:1.45rem; line-height:1.08; }.note-card > p:not(.note-type) { margin-top:14px; color:var(--muted); font-size:.89rem; line-height:1.7; }.note-card .card-link { align-self:flex-start; margin-top:auto; padding-top:26px; }
/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }.testimonial { display:flex; flex-direction:column; justify-content:space-between; min-height:280px; margin:0; padding:26px; border-radius:var(--radius); background:var(--surface); }.testimonial blockquote { color:#dce1da; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.04rem; line-height:1.62; }.testimonial figcaption { display:flex; flex-direction:column; gap:3px; padding-top:28px; color:var(--muted); font-size:.8rem; }.testimonial figcaption strong { color:var(--accent); font-size:.84rem; }
/* Contact and footer */
.connect { padding:6px 0 0; border:0; background:transparent; }.connect .section-head { margin-bottom:32px; }.social-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); }.social-btn { display:flex; align-items:center; gap:13px; min-height:92px; padding:18px; background:var(--surface); transition:background .18s ease; }.social-btn:hover { background:var(--accent-soft); }.social-icon { display:grid; flex:0 0 auto; place-items:center; width:32px; height:32px; color:var(--accent); }.social-icon svg { width:19px; height:19px; }.social-meta { display:flex; flex-direction:column; min-width:0; gap:2px; }.social-name { font-family:"Space Grotesk",Inter,sans-serif; font-size:.93rem; font-weight:700; }.social-handle { overflow:hidden; color:var(--muted); font-size:.77rem; text-overflow:ellipsis; white-space:nowrap; }.social-arrow { margin-left:auto; color:var(--accent); }.footer { border-top:1px solid var(--line); padding:28px 24px; }.footer-inner { display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; gap:20px; }.footer-note { color:var(--muted); font-size:.8rem; }.footer-links { display:flex; gap:18px; list-style:none; color:var(--muted); font-size:.82rem; }.footer-links a:hover { color:var(--accent); }
@media (max-width:760px) { .nav { min-height:64px; padding:0 18px; }.nav-links { display:none; position:absolute; top:64px; right:18px; left:18px; gap:0; border:1px solid var(--line); background:var(--surface); flex-direction:column; }.nav-links.is-open { display:flex; }.nav-links li + li { border-top:1px solid var(--line); }.nav-links a { display:block; padding:14px; }.menu-toggle { display:block; margin-left:auto; margin-right:9px; }.nav-cta { min-height:36px; padding:0 11px; margin-left:0; font-size:.78rem; }.hero { grid-template-columns:1fr; min-height:0; padding:90px 18px 64px; }.hero::after { right:18px; left:18px; }.hero-portrait { width:146px; margin-top:36px; }.hero-title { font-size:clamp(3.35rem,18vw,5.3rem); }.hero-role { font-size:1.15rem; }.hero-sub { font-size:.93rem; }.section,.stats-bar-wrap { padding-left:18px; padding-right:18px; }.section { padding-top:70px; padding-bottom:70px; }.stats-bar { grid-template-columns:repeat(2,1fr); }.stat { padding:18px 12px 18px 0; }.stat:nth-of-type(5),.stat:nth-of-type(7) { border-top:1px solid var(--line); border-left:0; }.skills-grid,.card-grid,.testimonial-grid,.social-links { grid-template-columns:1fr; }.skill-card { min-height:0; padding:24px; }.skill-icon { margin-bottom:23px; }.section-title { font-size:2.5rem; }.testimonial { min-height:0; }.footer-inner { align-items:flex-start; flex-direction:column; }.footer-links { order:3; } }