:root{
    --ease: cubic-bezier(.16,1,.3,1);
  }

  html[data-theme="dark"]{
    --bg: #050709;
    --bg-2: #090C11;
    --surface: #11151D;
    --surface-2: #171C26;
    --text: #FFFFFF;
    --text-muted: #9AA1B2;
    --text-dim: #666D7E;
    --accent: #FFB020;
    --accent-2: #FF8A3D;
    --accent-soft: rgba(255,176,32,0.12);
    --border: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.22);
    --grid-line: rgba(255,255,255,0.04);
    --shadow: 0 30px 90px rgba(0,0,0,0.6);
  }

  html[data-theme="light"]{
    --bg: #F6F3EC;
    --bg-2: #F1EDE3;
    --surface: #FFFFFF;
    --surface-2: #ECE7DA;
    --text: #14161B;
    --text-muted: #5C6270;
    --text-dim: #8B8F98;
    --accent: #B5720A;
    --accent-2: #935A08;
    --accent-soft: rgba(181,114,10,0.10);
    --border: rgba(20,22,27,0.09);
    --border-strong: rgba(20,22,27,0.18);
    --grid-line: rgba(20,22,27,0.045);
    --shadow: 0 30px 80px rgba(20,16,8,0.12);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:auto; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
    transition: background .5s var(--ease), color .5s var(--ease);
  }
  ::selection{ background: var(--accent); color: #0A0D14; }

  .font-display{ font-family:'Space Grotesk', sans-serif; }
  .font-mono{ font-family:'JetBrains Mono', monospace; }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
  @media(max-width:768px){ .wrap{ padding:0 24px; } }

  /* background grid texture */
  .bg-grid{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:center;
    padding-top:20px;
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    width:min(1160px, calc(100% - 48px));
    padding:12px 12px 12px 22px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border:1px solid var(--border);
    border-radius:100px;
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow);
    transition: background .4s var(--ease), border-color .4s var(--ease);
  }
  .logo{
    font-family:'JetBrains Mono', monospace;
    font-size:14px; font-weight:500; letter-spacing:.02em;
    display:flex; align-items:center; gap:8px;
  }
  .logo .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

  .nav-links{ display:flex; gap:32px; font-size:14px; color:var(--text-muted); }
  .nav-links a{ position:relative; padding:4px 0; transition:color .3s; }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background:var(--accent); transition:width .35s var(--ease);
  }
  .nav-links a:hover::after{ width:100%; }

  .nav-actions{ display:flex; align-items:center; gap:10px; }

  .theme-toggle{
    width:42px; height:24px; border-radius:100px; border:1px solid var(--border-strong);
    background:var(--surface-2); position:relative; flex-shrink:0;
  }
  .theme-toggle .knob{
    position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:var(--accent); transition: transform .4s var(--ease);
    display:flex; align-items:center; justify-content:center; font-size:9px;
  }
  html[data-theme="light"] .theme-toggle .knob{ transform:translateX(18px); }

  .btn-resume{
    font-family:'JetBrains Mono', monospace; font-size:12px;
    padding:9px 16px; border-radius:100px; background:var(--text); color:var(--bg);
    display:flex; align-items:center; gap:6px; white-space:nowrap;
    transition: transform .3s var(--ease), opacity .3s;
  }
  .btn-resume:hover{ transform:translateY(-2px); opacity:.88; }

  .nav-burger{ display:none; width:36px; height:36px; align-items:center; justify-content:center; }
  .nav-burger span, .nav-burger::before, .nav-burger::after{ display:none; }

  @media(max-width:860px){
    .nav-links{ display:none; }
  }

  /* ---------- HERO ---------- */
  /* Base: relative, so touch/mobile devices scroll it away normally —
     sticky elements on touch browsers repaint late, which is what
     caused the photo to flicker/glimpse through the next section on
     fast mobile scrolling.
     On desktop (mouse/trackpad, fine pointer) we restore `sticky` below:
     that's what produces the "floating pages" lift effect — the hero
     stays pinned while About/Projects/Contact (opaque, rising z-index)
     scroll up and stack over it like floors passing a fixed camera. */
  section.hero{
    position:relative; height:100svh; display:flex; align-items:center;
    padding-top:120px; padding-bottom:60px; z-index:1; background:var(--bg);
    overflow:hidden;
  }
  @media (hover:hover) and (pointer:fine){
    section.hero{ position:sticky; top:0; }
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;
  }
  @media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.08em;
    color:var(--accent); text-transform:uppercase; display:flex; align-items:center; gap:10px;
    margin-bottom:22px;
  }
  .eyebrow .line{ width:28px; height:1px; background:var(--accent); }

  h1.hero-title{
    font-family:'Space Grotesk', sans-serif; font-weight:700;
    font-size: clamp(46px, 6.6vw, 92px);
    line-height:.96; letter-spacing:-.025em;
    margin-bottom:24px;
  }
  h1.hero-title .rule{ display:block; color:var(--text-muted); font-size:.4em; font-weight:600; margin-top:14px; letter-spacing:-.005em; font-family:'Inter'; }

  .hero-desc{
    max-width:480px; color:var(--text-muted); font-size:16.5px; line-height:1.7; margin-bottom:34px;
  }

  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; }
  .tag{
    font-family:'JetBrains Mono', monospace; font-size:11.5px; padding:6px 12px;
    border:1px solid var(--border-strong); border-radius:100px; color:var(--text-muted);
  }

  .hero-cta{ display:flex; gap:14px; align-items:center; }
  .btn-primary{
    font-family:'Space Grotesk'; font-weight:500; font-size:15px;
    padding:14px 26px; border-radius:100px; background:var(--accent); color:#0A0D14;
    display:inline-flex; align-items:center; gap:8px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px var(--accent-soft); }
  .btn-ghost{
    font-family:'Space Grotesk'; font-size:15px; padding:14px 22px; border-radius:100px;
    border:1px solid var(--border-strong); display:inline-flex; align-items:center; gap:8px;
    transition: border-color .3s, transform .3s var(--ease);
  }
  .btn-ghost:hover{ border-color:var(--accent); transform:translateY(-3px); }

  /* photo frame — clean, bold, no gimmicks */
  .hero-photo-wrap{ position:relative; display:flex; justify-content:center; }
  .photo-frame{
    position:relative; width:min(360px, 82vw); aspect-ratio: 3/4;
    animation: photoFloat 6s ease-in-out infinite;
  }
  .photo-frame::before{
    content:''; position:absolute; inset:-30px; z-index:-1; border-radius:50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%);
    filter: blur(30px); opacity:.8;
    animation: glowPulse 4s ease-in-out infinite;
  }
  .photo-frame img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    border-radius:16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px var(--border-strong);
  }
  .photo-frame .img-fallback{
    position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    color:var(--text-dim); font-family:'JetBrains Mono'; font-size:12px; text-align:center; padding:20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px var(--border-strong);
  }
  @keyframes photoFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
  }
  @keyframes glowPulse{
    0%,100%{ opacity:.6; transform: scale(1); }
    50%{ opacity:1; transform: scale(1.08); }
  }

  /* ---------- SIGNATURE ANIMATION: object-detection scan ----------
     A CV-flavored treatment for the hero photo: four corner brackets
     draw themselves in on load (like a bounding box locking on),
     a scan-line sweeps down once, and a small "PERSON / conf 0.98"
     readout ticks up — a nod to the YOLO detection work below,
     applied to the person doing the detecting. Idle state is quiet:
     brackets stay, tag glows softly, scan re-sweeps rarely. */
  .detect-corners{
    position:absolute; inset:0; width:100%; height:100%; z-index:3;
    pointer-events:none; overflow:visible;
  }
  .detect-corners .corner{
    fill:none; stroke:var(--accent); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 26; stroke-dashoffset: 26;
    filter: drop-shadow(0 0 4px var(--accent-soft));
    animation: cornerDraw .7s var(--ease) forwards;
  }
  .corner-tl{ animation-delay: .55s; }
  .corner-tr{ animation-delay: .68s; }
  .corner-bl{ animation-delay: .81s; }
  .corner-br{ animation-delay: .94s; }
  @keyframes cornerDraw{ to{ stroke-dashoffset:0; } }

  .detect-scanline{
    position:absolute; left:6%; right:6%; height:2px; top:0; z-index:3;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    box-shadow: 0 0 12px 2px var(--accent-soft);
    opacity:0; border-radius:2px;
    animation: scanSweep 3.6s cubic-bezier(.65,0,.35,1) 1.1s infinite;
  }
  @keyframes scanSweep{
    0%{ top:6%; opacity:0; }
    4%{ opacity:1; }
    46%{ top:94%; opacity:1; }
    52%{ opacity:0; }
    100%{ top:94%; opacity:0; }
  }

  .detect-tag{
    position:absolute; z-index:4;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.05em;
    color:var(--accent); background: color-mix(in srgb, var(--bg) 72%, transparent);
    border:1px solid var(--border-strong); border-radius:5px;
    padding:4px 9px; display:flex; align-items:center; gap:6px;
    backdrop-filter: blur(6px);
    opacity:0; transform:translateY(-4px);
    animation: tagIn .5s var(--ease) forwards;
  }
  .detect-tag-top{ top:14px; left:14px; animation-delay:1.15s; }
  .detect-tag-bottom{ bottom:14px; right:14px; animation-delay:1.3s; }
  @keyframes tagIn{ to{ opacity:1; transform:translateY(0); } }

  .dot-live{
    width:5px; height:5px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 2px var(--accent-soft);
    animation: pulse 1.8s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce){
    .photo-frame{ animation:none; }
    .photo-frame::before{ animation:none; }
    .detect-corners .corner{ animation:none; stroke-dashoffset:0; }
    .detect-scanline{ animation:none; opacity:0; }
    .detect-tag{ animation:none; opacity:1; transform:none; }
  }

  .hero-stats{
    display:flex; gap:0; margin-top:26px; width:min(360px,82vw);
    border-top:1px solid var(--border);
  }
  .hero-stats div{ flex:1; padding-top:14px; border-right:1px solid var(--border); }
  .hero-stats div:last-child{ border-right:none; }
  .hero-stats b{ font-family:'Space Grotesk'; font-size:22px; display:block; }
  .hero-stats span{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }

  /* Hero is now a fixed 100svh (see section.hero, overflow:hidden) so it
     shows completely before the next section slides over it — on short
     viewports (small laptops, landscape phones) the content is scaled
     down here so nothing gets clipped by that fixed height. */
  @media (max-height:820px){
    section.hero{ padding-top:100px; padding-bottom:36px; }
    .photo-frame{ width:min(260px, 62vw); }
    .hero-stats{ margin-top:16px; }
    .hero-stats div{ padding-top:10px; }
    .scroll-cue{ display:none; }
  }
  @media (max-height:680px){
    section.hero{ padding-top:90px; padding-bottom:24px; }
    h1.hero-title{ font-size: clamp(34px, 5.4vw, 60px); margin-bottom:14px; }
    .tag-row{ margin-bottom:20px; }
    .photo-frame{ width:min(200px, 50vw); }
  }

  .scroll-cue{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-dim);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    letter-spacing:.1em; text-transform:uppercase;
  }
  .scroll-cue .stick{ width:1px; height:34px; background:linear-gradient(var(--text-dim), transparent); position:relative; overflow:hidden; }
  .scroll-cue .stick i{ position:absolute; top:-20px; left:0; width:100%; height:20px; background:var(--accent); animation:drip 1.8s ease-in-out infinite; }
  @keyframes drip{ 0%{ top:-20px; } 100%{ top:34px; } }

  /* ---------- SECTION LABELS ---------- */
  /* NOTE: previously min-height:100svh + align-items:center, which forced
     every section to occupy a full screen and vertically center its
     content. When a section's actual content (e.g. the contact panel)
     was shorter than the viewport, that created dead space below it —
     and pushed the top of the content above the fold once scrolled to
     the bottom, so the message form looked cut off. Sections now size
     to their own content; padding alone controls the rhythm. */
  .section{
    position:relative;
    padding:120px 0; background:var(--bg);
  }
  #about{ z-index:2; }
  #projects{ z-index:3; }
  #contact{ z-index:4; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; gap:30px; flex-wrap:wrap; }
  .section-idx{ font-family:'JetBrains Mono'; font-size:12px; color:var(--accent); margin-bottom:14px; display:block; }
  h2.section-title{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(30px,4vw,48px); letter-spacing:-.01em; }
  .section-note{ max-width:320px; color:var(--text-muted); font-size:14.5px; line-height:1.65; }

  hr.divider{ display:none; }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:70px; }
  @media(max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-photo{
    position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border-strong);
    background:var(--surface); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    aspect-ratio:3/4;
  }
  .about-photo img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; }
  .about-photo .img-fallback{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    color:var(--text-dim); font-family:'JetBrains Mono'; font-size:12px; text-align:center; padding:20px;
  }

  .about-body p{ color:var(--text-muted); font-size:16px; line-height:1.85; margin-bottom:20px; max-width:560px; }
  .about-body p strong{ color:var(--text); font-weight:500; }

  .skill-cloud{ margin-top:36px; display:flex; flex-wrap:wrap; gap:9px; }
  .skill-chip{
    font-family:'JetBrains Mono'; font-size:12px; padding:8px 14px; border-radius:8px;
    background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
    transition: border-color .3s, color .3s, transform .3s var(--ease);
  }
  .skill-chip:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-3px); }

  /* ---------- PROJECTS ----------
     Each card carries its own accent (--card-c), the way a detection
     system assigns each object class its own bounding-box color — so
     the grid reads at a glance as "five distinct systems," not five
     copies of one template. Icons are real inline illustrations, not
     placeholder text, and most of their motion only fires on hover so
     the grid stays calm until you engage with it. */
  .proj-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;
  }
  @media(max-width:760px){ .proj-grid{ grid-template-columns:1fr; } }

  .proj-card{
    position:relative; display:flex; flex-direction:column; gap:16px;
    padding:30px; border-radius:20px; border:1px solid var(--border);
    background:var(--surface); overflow:hidden; isolation:isolate;
    text-decoration:none; color:inherit; cursor:pointer;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  }
  .proj-card:hover{
    transform:translateY(-7px);
    border-color: color-mix(in srgb, var(--card-c) 55%, var(--border-strong));
    box-shadow: 0 24px 54px -14px color-mix(in srgb, var(--card-c) 40%, transparent);
  }
  .proj-card::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(460px 240px at 12% -10%, color-mix(in srgb, var(--card-c) 18%, transparent), transparent 70%);
    opacity:0; transition:opacity .5s var(--ease);
  }
  .proj-card:hover::before{ opacity:1; }

  /* diagonal light sweep across the card on hover — the same "scan" idea
     as the hero photo, just applied to a project instead of a person */
  .proj-sweep{
    position:absolute; top:0; left:-45%; width:35%; height:100%; z-index:0;
    background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--card-c) 20%, transparent), transparent);
    transform:skewX(-14deg); pointer-events:none;
    transition: left .8s var(--ease);
  }
  .proj-card:hover .proj-sweep{ left:130%; }

  .proj-card-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }

  .proj-icon{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--card-c) 14%, var(--surface-2));
    color: var(--card-c);
    border:1px solid color-mix(in srgb, var(--card-c) 32%, var(--border));
    transition: transform .45s var(--ease), background .45s var(--ease);
  }
  .proj-icon svg{ width:28px; height:28px; }
  .proj-card:hover .proj-icon{
    transform:scale(1.1) rotate(-5deg);
    background: color-mix(in srgb, var(--card-c) 26%, var(--surface-2));
  }

  .proj-badge{
    font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
    color: var(--card-c); background: color-mix(in srgb, var(--card-c) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--card-c) 38%, transparent);
    padding:5px 10px; border-radius:100px; white-space:nowrap;
    display:flex; align-items:center; gap:6px;
  }
  .proj-badge .dot-live{ background:var(--card-c); box-shadow:0 0 0 2px color-mix(in srgb, var(--card-c) 30%, transparent); }

  .proj-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:21px; position:relative; z-index:1; }
  .proj-card p{ color:var(--text-muted); font-size:14.5px; line-height:1.6; position:relative; z-index:1; }

  .proj-stack{ display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:1; }
  .proj-stack span{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-dim); border:1px solid var(--border); padding:4px 9px; border-radius:5px; }

  .proj-cta{
    margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px;
    font-family:'Space Grotesk'; font-weight:600; font-size:14px; color:var(--text-muted);
    position:relative; z-index:1;
    transition: color .35s var(--ease), gap .35s var(--ease);
  }
  .proj-card:hover .proj-cta{ color:var(--card-c); gap:13px; }
  .proj-cta-arrow{ transition: transform .4s var(--ease); }
  .proj-card:hover .proj-cta-arrow{ transform: translateX(4px); }
  .proj-cta-muted{ color:var(--text-dim); font-weight:500; font-size:13px; }
  .proj-card:hover .proj-cta-muted{ color:var(--text-dim); }

  /* ---- per-icon micro-animations ---- */
  .icon-shelf .shelf-missing{ animation: shelfBlink 1.8s ease-in-out infinite; }
  @keyframes shelfBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

  .icon-vision .vision-scan{ animation: visionScan 2.2s ease-in-out infinite; transform-origin:center; }
  .icon-vision .vision-dot{ animation: pulse 1.6s ease-in-out infinite; }
  @keyframes visionScan{ 0%,100%{ transform:translateY(-7px); opacity:.35; } 50%{ transform:translateY(7px); opacity:1; } }

  .rag-lens, .extract-arrow, .booking-check{ transition: transform .45s var(--ease); transform-origin:center; }
  .proj-card:hover .rag-lens{ transform:scale(1.14); }
  .proj-card:hover .extract-arrow{ transform:translateX(3px); }
  .proj-card:hover .booking-check{ transform:scale(1.18); }

  @media (prefers-reduced-motion: reduce){
    .icon-shelf .shelf-missing, .icon-vision .vision-scan, .icon-vision .vision-dot{ animation:none; }
    .proj-card, .proj-icon, .proj-sweep, .proj-cta, .proj-cta-arrow, .rag-lens, .extract-arrow, .booking-check{ transition:none; }
  }

  /* ---------- CONTACT ---------- */
  .contact-panel{
    border:1px solid var(--border); border-radius:24px; padding:70px 60px;
    background: radial-gradient(600px 300px at 20% 0%, var(--accent-soft), transparent 70%), var(--surface);
    position:relative; overflow:hidden;
  }
  @media(max-width:768px){ .contact-panel{ padding:44px 26px; } }
  .contact-panel h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(30px,4.6vw,52px); max-width:640px; letter-spacing:-.01em; margin-bottom:20px; }
  .contact-panel > p{ color:var(--text-muted); max-width:460px; margin-bottom:44px; }

  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:640px; }
  .contact-form .full{ grid-column:1/-1; }
  @media(max-width:600px){ .contact-form{ grid-template-columns:1fr; } }
  .field{ position:relative; }
  .field label{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--border-strong);
    color:var(--text); font-family:'Inter'; font-size:15px; padding:8px 2px; outline:none;
    transition:border-color .3s;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--accent); }
  .field textarea{ resize:none; min-height:70px; }

  .contact-submit{ margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

  .social-row{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }
  .social-row a{
    font-family:'JetBrains Mono'; font-size:12.5px; color:var(--text-muted);
    display:flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--border); border-radius:100px;
    transition: .3s var(--ease);
  }
  .social-row a:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-2px); }

  /* ---------- FOOTER ---------- */
  footer{ padding:50px 0 40px; position:relative; z-index:5; background:var(--bg); }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-inner p{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--text-dim); }

  /* reveal utility */
  .reveal{ opacity:0; transform:translateY(36px); }

  /* mobile nav simplification */
  @media(max-width:860px){
    .nav-inner{ padding:10px 10px 10px 18px; }
  }