@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root { --ink:#111217; --muted:#707078; --paper:#f5f5f2; --line:#d9d9d4; --accent:#7462dc; --pink:#f1b5c3; --surface:#fff; --soft:#ecece7; --copy:#4c4c52; --section-copy:#5e5e63; --button-bg:#111217; --button-text:#fff; }
:root[data-theme="dark"] { --ink:#f4f3ef; --muted:#aaa9b0; --paper:#16171c; --line:#35363d; --accent:#a99bff; --pink:#8d596d; --surface:#202127; --soft:#202127; --copy:#d0cfd5; --section-copy:#c0bec8; --button-bg:#a99bff; --button-text:#111217; }
:root[data-theme="dark"] body { background:#0c0d10; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#deded9; color:var(--ink); font-family:Inter, sans-serif; transition:background .25s ease, color .25s ease; }
.js-ready .reveal-item { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); }
.js-ready .reveal-item.is-visible { opacity:1; transform:none; }
.js-ready .reveal-item.reveal-from-left { transform:translateX(-32px); }
.js-ready .reveal-item.reveal-project { transform:translateY(32px) scale(.98); }
.js-ready .reveal-item.reveal-from-left.is-visible,
.js-ready .reveal-item.reveal-project.is-visible { opacity:1; transform:none; }
.app { max-width:1440px; margin:auto; background:var(--paper); overflow:hidden; position:relative; transition:background .25s ease, color .25s ease; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 14px; background:var(--ink); color:var(--paper); font:12px 'DM Mono',monospace; text-decoration:none; transform:translateY(-150%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.theme-toggle { position:absolute; top:26px; right:clamp(24px,5vw,75px); z-index:20; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; font-size:15px; transition:background .2s, color .2s, transform .2s; }
.theme-toggle:hover { transform:translateY(-2px); background:var(--accent); color:#fff; }
.theme-toggle:focus-visible, .nav-item:focus-visible, .cv-button:focus-visible, .social-links a:focus-visible, .project-card a:focus-visible, .project-links a:focus-visible, .more-projects-toggle:focus-visible, .more-project-button:focus-visible, .modal-close:focus-visible, .contact-link:focus-visible, .contact-form button:focus-visible, .site-footer a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.status-bar { display:none; }
.hero { min-height:calc(100vh - 80px); padding:clamp(32px,6vw,90px) clamp(24px,8vw,120px) 65px; display:grid; grid-template-columns:minmax(300px, .9fr) minmax(390px,1.1fr); grid-template-rows:auto auto auto 1fr; column-gap:clamp(50px,8vw,140px); align-items:center; position:relative; }
.hero-logo { position:absolute; top:28px; left:clamp(24px,5vw,75px); width:76px; height:50px; display:block; z-index:2; }
.hero-logo img { width:100%; height:100%; object-fit:contain; }
.profile-wrapper { width:min(31vw,395px); aspect-ratio:1; position:relative; grid-row:1 / span 3; justify-self:center; }
.profile-bg { position:absolute; inset:4%; background:var(--pink); border-radius:50%; }
.profile-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%; mix-blend-mode:multiply; }
:root[data-theme="dark"] .profile-image { mix-blend-mode:normal; }
.hero h1 { font-size:clamp(42px,6vw,86px); line-height:.98; max-width:700px; letter-spacing:-3px; font-weight:900; margin-bottom:22px; }
.hero h2 { font-size:clamp(17px,2vw,24px); font-weight:500; margin-bottom:16px; }
.hero-stack { color:var(--accent); font-size:.7em; }
.hero-copy-stack { display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:590px; }
.intro { max-width:470px; color:var(--copy); line-height:1.7; font-size:15px; }
.social-links { display:flex; align-items:center; gap:22px; margin:27px 0 25px; }
.social-links a { color:var(--ink); font-size:22px; transition:transform .2s, color .2s; }
.social-links a:hover { color:var(--accent); transform:translateY(-3px); }
.hero-traits { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px; max-width:590px; color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; }
.hero-traits span:nth-child(even) { color:var(--accent); }
.cv-button { display:inline-flex; gap:12px; align-items:center; background:var(--button-bg); color:var(--button-text); padding:14px 21px; border-radius:2px; font-size:12px; font-weight:600; text-decoration:none; transition:background .2s, color .2s, transform .2s; }
.cv-button:hover { background:var(--accent); color:#111217; transform:translateY(-2px); }
.rating-section { margin-top:32px; display:flex; align-items:center; gap:14px; }
.review-avatars { display:flex; }
.review-avatars img { width:34px; height:34px; object-fit:cover; border-radius:50%; border:2px solid var(--paper); margin-left:-9px; }
.review-avatars img:first-child { margin-left:0; }
.rating-section p { font:11px 'DM Mono', monospace; color:var(--muted); }
.rating-section strong { color:var(--ink); font-weight:500; }
.developer-section { min-height:190px; background:var(--ink); color:var(--paper); display:flex; align-items:center; position:relative; overflow:hidden; }
.marquee { width:100%; overflow:hidden; }
.marquee-track { width:max-content; display:flex; align-items:center; transform:translate3d(0, 0, 0); will-change:transform; }
.marquee-track span { flex:none; padding-right:clamp(40px,6vw,100px); font-size:clamp(68px,12vw,170px); line-height:.9; letter-spacing:-6px; font-weight:900; text-transform:uppercase; white-space:nowrap; }
.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; }
.content-section { padding:clamp(70px,10vw,145px) clamp(24px,10vw,150px); border-bottom:1px solid var(--line); }
.section-label { margin-bottom:27px; color:var(--accent); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:1px; }
.content-section h2 { font-size:clamp(34px,5vw,70px); line-height:1.02; letter-spacing:-2px; margin-bottom:24px; }
.content-section h2 em { color:var(--accent); font-style:normal; }
.content-section > p { max-width:590px; color:var(--section-copy); line-height:1.8; font-size:15px; }
.about-stats { display:flex; gap:clamp(35px,7vw,100px); margin-top:55px; }
.about-stats div { display:flex; flex-direction:column; gap:7px; }
.about-stats strong { font-size:30px; }
.about-stats span { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.capabilities-section { background:var(--soft); padding-bottom:clamp(35px,5vw,72px); }
.technology-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:55px; border:1px solid var(--line); }
.technology-group { background:var(--paper); min-height:220px; padding:24px; }
.technology-group { transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.technology-group:hover { transform:translateY(-6px); box-shadow:0 14px 30px #11121716; background:var(--surface); }
.technology-group > span, .experience-item > div > span, .education-row span { color:var(--accent); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.technology-icons { display:flex; align-items:center; gap:9px; min-height:48px; margin-top:25px; }
.technology-icons img { width:36px; height:36px; object-fit:contain; }
.technology-group h3 { margin-top:20px; font-size:clamp(16px,1.5vw,20px); line-height:1.45; font-weight:600; }
.experience-section { background:var(--surface); padding-top:clamp(35px,5vw,72px); padding-bottom:clamp(35px,5vw,72px); }
.experience-item { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding:31px 0; border-top:1px solid var(--line); transition:padding-left .25s ease, border-color .25s ease; }
.experience-item:hover { padding-left:12px; border-color:var(--accent); }
.experience-item h3 { margin-top:13px; font-size:24px; }
.experience-item p { color:var(--muted); font-size:13px; line-height:1.7; }
.experience-item > p { max-width:480px; }
.education-row { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding-top:31px; margin-top:10px; border-top:1px solid var(--line); }
.education-row { transition:padding-left .25s ease, border-color .25s ease; }
.education-row:hover { padding-left:12px; border-color:var(--accent); }
.education-row strong { display:block; margin-top:14px; font-size:18px; }
.education-row p { color:var(--muted); font-size:13px; line-height:1.7; }
.education-row p b { color:var(--ink); font-weight:600; }
.education-row small { display:inline-block; max-width:480px; margin-top:5px; font-size:12px; line-height:1.6; }
.projects-section { background:var(--surface); }
.projects-section > h2 { color:var(--accent); }
.projects-heading-word { color:var(--ink); }
.project-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; max-width:1120px; }
.project-card { background:var(--paper); overflow:hidden; position:relative; transition:transform .3s ease, box-shadow .3s ease; }
.project-card:hover { transform:translateY(-7px); box-shadow:0 18px 36px #11121718; }
.js-ready .project-card.reveal-item.is-visible:hover { transform:translateY(-7px); box-shadow:0 18px 36px #11121718; }
.project-card img { width:100%; height:clamp(180px,20vw,300px); aspect-ratio:auto; display:block; object-fit:contain; background:var(--soft); transition:transform .45s; }
.project-card:hover img { transform:none; filter:saturate(1.08) contrast(1.03); }
.project-card > div:not(.project-visual) { padding:23px 24px 25px; position:relative; }
.project-card > div:not(.project-visual) > span, .more-projects-grid article > span { color:var(--accent); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.project-card h3 { margin:10px 0 7px; font-size:25px; }
.project-card h4 { margin-bottom:11px; color:var(--copy); font-size:12px; font-weight:600; }
.project-card p { color:var(--muted); font-size:13px; line-height:1.6; max-width:440px; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:17px; padding:0 !important; }
.project-tags span { padding:5px 8px; border:1px solid var(--line); color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }
.project-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:20px; padding:0 !important; }
.project-links a, .private-repository { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font:10px 'DM Mono',monospace; text-decoration:none; text-transform:uppercase; }
.project-links a:hover { color:var(--accent); }
.private-repository { color:var(--muted); }
.project-visual { width:100%; height:clamp(180px,20vw,300px); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:15px; padding:28px; overflow:hidden; background:linear-gradient(135deg,#6b5bdd,#a89cff); color:#fff; }
.project-visual i { font-size:42px; }
.project-visual span { max-width:270px; font-size:20px; font-weight:700; line-height:1.15; }
.project-visual-warm { background:linear-gradient(135deg,#e8a166,#f0c9a2); color:#29180d; }
.project-visual-dark { background:linear-gradient(135deg,#171820,#51477f); }
.featured-project { grid-column:span 2; display:grid; grid-template-columns:1.35fr 1fr; }
.featured-project img { height:clamp(180px,20vw,300px); aspect-ratio:auto; align-self:start; }
.more-projects { margin-top:75px; }
.more-projects-toggle { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; padding:18px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font:600 18px Inter,sans-serif; text-align:center; }
.more-projects-toggle span { grid-column:2; }
.more-projects-toggle i { color:var(--accent); font-size:14px; }
.more-projects-toggle:hover span { color:var(--accent); }
.more-projects-toggle { transition:color .2s ease, border-color .2s ease; }
.more-projects-toggle:hover { border-color:var(--accent); }
.more-projects-content { padding-top:28px; }
.more-projects-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line); }
.more-projects-grid article, .more-project-button { min-height:210px; padding:28px 55px 28px 0; border:0; border-bottom:1px solid var(--line); position:relative; background:transparent; color:var(--ink); text-align:left; font:inherit; }
.more-projects-grid article { transition:background .3s ease, padding-left .3s ease, border-color .3s ease; }
.more-projects-grid article:hover { background:var(--soft); padding-left:12px; border-color:var(--accent); }
.more-projects-grid article:hover h3 { color:var(--accent); }
.more-projects-grid article:nth-child(odd), .more-project-button:nth-child(odd) { padding-right:45px; border-right:1px solid var(--line); }
.more-projects-grid article:nth-child(even), .more-project-button:nth-child(even) { padding-left:45px; }
.more-projects-grid h3 { margin:12px 0 10px; font-size:23px; }
.more-projects-grid p { color:var(--muted); font-size:13px; line-height:1.6; }
.more-project-button { width:100%; cursor:pointer; transition:background .25s ease, padding-left .25s ease; }
.more-project-button:hover { background:var(--soft); padding-left:12px; }
.more-project-button:hover h3 { color:var(--accent); }
.more-project-button > span { color:var(--accent); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.more-projects-grid a { position:absolute; top:30px; right:18px; color:var(--ink); }
.more-project-button > i { position:absolute; top:30px; right:18px; color:var(--accent); opacity:0; transition:opacity .2s, transform .2s; }
.more-project-button:hover > i, .more-project-button:focus-visible > i { opacity:1; transform:translate(2px,-2px); }
.projects-modal { width:min(920px, calc(100% - 32px)); max-height:min(820px, calc(100vh - 40px)); padding:clamp(22px,4vw,42px); border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); box-shadow:0 24px 90px #0008; }
.projects-modal::backdrop { background:#090a0dcc; backdrop-filter:blur(5px); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.modal-header .section-label { display:block; margin-bottom:12px; }
.modal-header h2 { font-size:clamp(30px,5vw,55px); letter-spacing:-2px; }
.modal-close { width:38px; height:38px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:50%; cursor:pointer; font-size:16px; }
.modal-close { transition:transform .2s ease, background .2s ease, color .2s ease; }
.modal-close:hover { transform:rotate(90deg); background:var(--accent); color:#fff; }
.modal-project { background:var(--surface); overflow:hidden; }
.modal-project img { width:100%; height:clamp(180px,28vw,360px); display:block; object-fit:contain; background:var(--soft); }
.modal-project > div { padding:18px; }
.modal-project > div > span { color:var(--accent); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.modal-project h3 { margin:9px 0 0; font-size:20px; }
.modal-project p { color:var(--muted); font-size:12px; line-height:1.6; }
.modal-project a { display:inline-flex; gap:9px; margin-top:15px; color:var(--ink); font:11px 'DM Mono',monospace; text-decoration:none; }
.experiments-callout { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:70px; padding:40px; background:var(--ink); color:var(--paper); }
.experiments-callout span { color:var(--accent); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.experiments-callout h3 { margin-top:13px; font-size:clamp(25px,3vw,39px); line-height:1.05; }
.experiments-callout p { color:var(--muted); font-size:13px; line-height:1.7; }
.experiments-callout a { display:inline-flex; align-items:center; gap:9px; margin-top:20px; color:var(--paper); font:10px 'DM Mono',monospace; text-decoration:none; text-transform:uppercase; }
.modal-project h4 { margin:9px 0 11px; color:var(--copy); font-size:12px; }
.modal-project .project-tags { margin-top:17px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px clamp(24px,10vw,150px) 100px; background:var(--surface); color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.site-footer a { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; }
.contact-section { background:var(--accent); color:#fff; border:0; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(400px,1.2fr); align-items:start; gap:clamp(50px,8vw,120px); }
.contact-section .section-label, .contact-copy > p { color:#e1dcff; }
.contact-copy > p { max-width:470px; line-height:1.8; font-size:15px; }
.contact-form { width:100%; max-width:760px; margin-top:38px; }
.form-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.contact-form label { display:block; margin-bottom:18px; }
.contact-form label span { display:block; margin-bottom:8px; color:#e1dcff; font:10px 'DM Mono',monospace; text-transform:uppercase; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #d3ccff; border-radius:2px; padding:13px 14px; background:#ffffff14; color:#fff; font:13px Inter,sans-serif; outline:none; resize:vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#e1dcff99; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#fff; box-shadow:0 0 0 3px #fff3; }
.form-footer { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-submit { display:inline-flex; align-items:center; gap:12px; border:0; border-radius:2px; padding:14px 21px; background:#fff; color:var(--accent); font:600 12px Inter,sans-serif; cursor:pointer; transition:transform .2s, background .2s; }
.form-submit:hover { background:#e9e5ff; transform:translateY(-2px); }
.contact-form input, .contact-form textarea { transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.contact-form input:hover, .contact-form textarea:hover { background:#ffffff20; }
.form-status { color:#e1dcff; font:11px 'DM Mono',monospace; }
.contact-link { color:#fff; display:inline-flex; align-items:center; gap:13px; margin-top:33px; padding-bottom:8px; border-bottom:1px solid #d3ccff; font:14px 'DM Mono',monospace; text-decoration:none; }
.bottom-nav { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); width:min(370px, calc(100% - 32px)); height:55px; padding:5px 8px; background:#050506; border-radius:30px; display:flex; align-items:center; justify-content:space-between; z-index:10; box-shadow:0 10px 30px #0003; }
.nav-item { border:0; width:39px; height:39px; border-radius:50%; background:transparent; color:#fff; cursor:pointer; font-size:15px; transition:transform .2s; }
.nav-item.active { background:var(--accent); }
.nav-item:hover { transform:scale(1.08); }
.site-footer a { transition:color .2s ease, transform .2s ease; }
.site-footer a:hover { color:var(--accent); transform:translateY(-2px); }
@media (max-width:700px) {
  body { background:var(--paper); }
  .app { max-width:430px; margin:auto; }
  .status-bar { height:55px; padding:0 25px; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; }
  .status-icons { display:flex; gap:7px; font-size:11px; }
  .hero { min-height:auto; display:block; text-align:center; padding:78px 20px 38px; }
  .theme-toggle { top:72px; right:18px; width:36px; height:36px; font-size:13px; }
  .hero-logo { top:18px; left:20px; width:66px; height:44px; }
  .profile-wrapper { width:174px; margin:0 auto 20px; }
  .hero h1 { font-size:28px; letter-spacing:-1px; margin-bottom:15px; }
  .hero h2 { font-size:15px; margin-bottom:7px; }
  .intro { font-size:13px; line-height:1.45; margin:auto; max-width:330px; }
  .social-links { justify-content:center; gap:24px; margin:24px 0 0; }
  .hero-traits { justify-content:center; gap:8px; }
  .cv-button { padding:11px 19px; }
  .rating-section { justify-content:center; margin-top:19px; }
  .developer-section { min-height:115px; }
  .marquee-track span { font-size:45px; letter-spacing:-3px; padding-right:35px; }
  .content-section { padding:62px 25px; }
  .content-section h2 { font-size:clamp(32px,9vw,36px); letter-spacing:-1px; }
  .about-stats { gap:22px; margin-top:38px; }
  .about-stats strong { font-size:25px; }
  .about-stats span { font-size:9px; }
  .technology-grid { grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:38px; }
  .capabilities-section { padding-bottom:31px; }
  .technology-group { min-height:175px; padding:17px; }
  .technology-icons { gap:6px; margin-top:18px; }
  .technology-icons img { width:29px; height:29px; }
  .technology-group h3 { margin-top:15px; font-size:16px; }
  .experience-item, .education-row { display:block; padding:25px 0; }
  .experience-section { padding-top:31px; padding-bottom:31px; }
  .experience-item > p { margin-top:18px; }
  .education-row strong, .education-row p { display:block; margin-top:11px; }
  .project-grid { display:block; }
  .project-card { margin-top:17px; }
  .featured-project { display:block; grid-column:auto; }
  .featured-project img { height:180px; aspect-ratio:auto; }
  .project-card > div { padding:19px; }
  .project-card img, .project-visual { height:180px; }
  .more-projects { margin-top:55px; }
  .more-projects-grid { grid-template-columns:1fr; }
  .more-projects-grid article, .more-project-button, .more-projects-grid article:nth-child(odd), .more-project-button:nth-child(odd), .more-projects-grid article:nth-child(even), .more-project-button:nth-child(even) { min-height:0; padding:24px 42px 24px 0; border-right:0; }
  .more-projects-grid article:hover { padding-left:12px; }
  .experiments-callout { grid-template-columns:1fr; gap:25px; margin-top:55px; padding:28px; }
  .contact-section { padding-bottom:115px; }
  .site-footer { padding:25px 25px 100px; }
  .contact-section { display:block; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .contact-form { margin-top:30px; }
  .form-footer { align-items:flex-start; flex-direction:column; gap:12px; }
  .bottom-nav { width:min(350px, calc(100% - 24px)); }
}
@media (min-width:701px) { .bottom-nav { bottom:35px; } }
@media (min-width:701px) {
  .hero .profile-wrapper { grid-column:1; grid-row:1 / span 3; }
  .hero h1 { grid-column:2; grid-row:1; justify-self:start; transform:translateX(-90px); }
  .hero h2 { grid-column:2; grid-row:2; justify-self:start; transform:translateX(-90px); margin-bottom:0; }
  .hero .hero-copy-stack { grid-column:2; grid-row:3 / span 2; justify-self:start; transform:translateX(-90px); }
  .hero .intro { transform:translateY(-30px); }
  .hero .social-links { grid-column:1; grid-row:4; justify-self:center; align-self:start; margin:24px 0 0; }
}

/* Intermediate phones and small tablets: keep the compact composition, but use the available width. */
@media (min-width:431px) and (max-width:700px) {
  .app { max-width:600px; }
  .hero { padding-left:42px; padding-right:42px; }
  .content-section { padding-left:42px; padding-right:42px; }
  .technology-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .project-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .project-card { margin-top:0; }
  .featured-project { display:block; grid-column:span 2; }
  .featured-project img { height:180px; aspect-ratio:auto; }
  .bottom-nav { width:min(350px, calc(100% - 48px)); }
}

/* Tablet portrait and compact landscape: avoid desktop minimum tracks and desktop offsets. */
@media (min-width:701px) and (max-width:1023px) {
  .hero { min-height:clamp(620px, calc(100vh - 40px), 760px); padding:52px 40px 48px; grid-template-columns:minmax(230px, .85fr) minmax(0, 1.15fr); grid-template-rows:auto auto auto 1fr; column-gap:32px; }
  .hero-logo { top:24px; left:40px; }
  .theme-toggle { top:24px; right:40px; }
  .profile-wrapper { width:min(28vw, 280px); }
  .hero h1 { font-size:clamp(42px, 6vw, 60px); letter-spacing:-2px; transform:none; }
  .hero h2 { font-size:18px; transform:none; }
  .hero .hero-copy-stack { max-width:100%; transform:none; }
  .hero .intro { max-width:100%; transform:none; }
  .hero .hero-traits { max-width:100%; }
  .hero .social-links { margin-top:18px; }
  .developer-section { min-height:150px; }
  .marquee-track span { font-size:clamp(58px, 9vw, 100px); letter-spacing:-4px; }
  .content-section { padding:72px 40px; }
  .experience-section { padding-top:36px; padding-bottom:36px; }
  .technology-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:40px; }
  .capabilities-section { padding-bottom:36px; }
  .technology-group { min-height:195px; }
  .project-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .featured-project { grid-column:span 2; }
  .experience-item, .education-row { gap:30px; }
  .bottom-nav { width:280px; }
  .contact-section { display:block; }
  .contact-form { max-width:680px; }
}

@media (min-width:1024px) {
  .hero > *, .content-section > * { min-width:0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js-ready .reveal-item, .js-ready .reveal-item.is-visible { opacity:1; transform:none; transition:none; }
  .project-card:hover, .js-ready .project-card.reveal-item.is-visible:hover, .technology-group:hover, .more-project-button:hover, .modal-close:hover, .site-footer a:hover { transform:none; }
}