:root{
    --lab:#0F2A2A;
    --lab-2:#153734;
    --panel:#1B3E3A;
    --paper:#F6F2E7;
    --paper-dim:#E7E1D0;
    --ink:#1C2420;
    --teal:#2EC4B6;
    --amber:#F4A340;
    --line: rgba(246,242,231,0.14);

    --f-display:'Space Grotesk', sans-serif;
    --f-body:'Literata', serif;
    --f-mono:'IBM Plex Mono', monospace;

    --edge:clamp(1.25rem, 5vw, 5rem);
    --gap:clamp(1.25rem, 3vw, 2.5rem);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  body{
    background:var(--lab);
    color:var(--paper);
    font-family:var(--f-body);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  ::selection{background:var(--amber); color:var(--ink);}
  :focus-visible{outline:3px solid var(--teal); outline-offset:3px;}

  .container{max-width:1280px; margin-inline:auto; padding-inline:var(--edge);}

  .eyebrow{
    font-family:var(--f-mono);
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--teal);
    display:flex; align-items:center; gap:0.6rem;
  }
  .eyebrow::before{content:"§"; color:var(--amber); font-size:1rem;}

  h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.1; color:var(--paper);}

  /* Graph-paper texture, used sparingly on light sections */
  .graph-paper{
    background-color:var(--paper);
    background-image:
      linear-gradient(rgba(28,36,32,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(28,36,32,0.06) 1px, transparent 1px);
    background-size:28px 28px;
    color:var(--ink);
  }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(15,42,42,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem;}
  .logo{
    font-family:var(--f-display); font-weight:700; font-size:1.15rem;
    display:flex; align-items:center; gap:0.6rem;
  }
  .logo .tile{
    width:34px; height:34px;
    border:1.5px solid var(--teal);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:var(--f-mono); line-height:1;
  }
  .logo .tile .sym{font-size:0.95rem; font-weight:700; color:var(--teal);}
  .logo .tile .num{font-size:0.5rem; color:var(--amber);}

  nav.links{display:flex; gap:2rem; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.04em;}
  nav.links a{color:rgba(246,242,231,0.7); transition:color 0.2s ease; position:relative;}
  nav.links a:hover, nav.links a:focus-visible{color:var(--paper);}

  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.05em;
    padding:0.8rem 1.5rem; border:1px solid var(--teal);
    transition:all 0.2s ease;
  }
  .btn-solid{background:var(--teal); color:var(--lab); font-weight:600; border-color:var(--teal);}
  .btn-solid:hover{background:var(--amber); border-color:var(--amber);}
  .btn-outline{border-color:rgba(246,242,231,0.4);}
  .btn-outline:hover{border-color:var(--paper);}

  .burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;}
  .burger span{width:24px; height:2px; background:var(--paper);}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100dvh;
    display:flex; align-items:center;
    padding-top:80px;
    position:relative;
    background:
      radial-gradient(circle at 85% 20%, rgba(46,196,182,0.14), transparent 45%),
      radial-gradient(circle at 8% 85%, rgba(244,163,64,0.10), transparent 40%),
      var(--lab);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:var(--gap);
    align-items:center;
  }
  .hero-copy .eyebrow{margin-bottom:1.5rem;}
  .hero-copy h1{
    font-size:clamp(2.6rem, 6.5vw, 4.6rem);
    margin-bottom:1.25rem;
  }
  .hero-copy h1 em{font-style:normal; color:var(--teal);}
  .hero-copy p.lede{
    font-size:clamp(1rem,1.3vw,1.15rem);
    color:rgba(246,242,231,0.78);
    max-width:48ch;
    margin-bottom:2.25rem;
    font-family:var(--f-body);
  }
  .hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

  /* Orbit signature element */
  .orbit-wrap{
    position:relative;
    aspect-ratio:1/1;
    max-width:420px;
    margin-inline:auto;
    display:flex; align-items:center; justify-content:center;
  }
  .orbit-core{
    width:34%; height:34%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #3ADFCF, var(--teal) 60%, #17827A);
    box-shadow:0 0 60px rgba(46,196,182,0.45);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-display); font-weight:700; font-size:2.2rem; color:var(--lab);
    z-index:3;
  }
  .ring{
    position:absolute;
    border:1px solid rgba(246,242,231,0.25);
    border-radius:50%;
  }
  .ring1{width:60%; height:60%; animation:spin 14s linear infinite;}
  .ring2{width:82%; height:82%; animation:spin 22s linear infinite reverse;}
  .ring3{width:100%; height:100%; animation:spin 30s linear infinite;}
  @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  .electron{
    position:absolute; top:-6px; left:50%;
    width:12px; height:12px; margin-left:-6px;
    border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 12px rgba(244,163,64,0.8);
  }

  /* ---------- Section shell ---------- */
  section{padding-block:clamp(4rem,9vw,7.5rem);}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
    margin-bottom:clamp(2.5rem,5vw,4rem); flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(2rem,4vw,3.1rem);}
  .section-head .desc{max-width:40ch; color:rgba(246,242,231,0.65); font-size:0.95rem;}
  .graph-paper .section-head .desc{color:rgba(28,36,32,0.65);}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in{opacity:1; transform:none;}

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  }
  .about-photo{
    aspect-ratio:4/5;
    background:linear-gradient(150deg,#22443F,#0F2A2A);
    border:1px solid var(--line);
    position:relative;
  }
  .about-photo::after{
    content:"Fig. 1 — Lab, Room 204";
    position:absolute; bottom:0; left:0; right:0;
    padding:0.9rem 1rem;
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.08em;
    background:rgba(15,42,42,0.7);
    border-top:1px solid var(--line);
  }
  .about-text p{color:rgba(246,242,231,0.78); margin-bottom:1.1rem; max-width:58ch;}
  .about-text p:first-of-type{color:var(--paper); font-size:1.08rem;}
  .about-text h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:1.4rem; font-family:var(--f-body); font-weight:600;}

  .field-notes{
    margin-top:1.75rem;
    display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem;
    font-family:var(--f-mono); font-size:0.8rem;
  }
  .field-notes li{padding:0.85rem 1rem; border-left:2px solid var(--teal); background:var(--panel);}

  /* ---------- Subjects — periodic table tiles (signature element) ---------- */
  .periodic-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
  }
  .elem-tile{
    aspect-ratio:1/1.05;
    background:var(--panel);
    border:1px solid var(--line);
    padding:1rem;
    display:flex; flex-direction:column;
    justify-content:space-between;
    position:relative;
    transition:transform 0.25s ease, border-color 0.25s ease;
  }
  .elem-tile:hover{transform:translateY(-6px); border-color:var(--teal);}
  .elem-tile .top-row{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:0.7rem; color:var(--amber);}
  .elem-tile .symbol{font-family:var(--f-display); font-size:2.4rem; font-weight:700; color:var(--paper); line-height:1;}
  .elem-tile .name{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.04em; color:rgba(246,242,231,0.7);}

  /* ---------- Experience ---------- */
  .experience{background:var(--lab-2);}
  .timeline-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);}
  .timeline-col h3{
    font-family:var(--f-mono); text-transform:uppercase; font-size:0.85rem; letter-spacing:0.1em;
    color:var(--amber); padding-bottom:0.9rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem;
  }
  .tl-item{padding:1.15rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:1.3rem;}
  .tl-item:last-child{border-bottom:none;}
  .tl-date{font-family:var(--f-mono); font-size:0.76rem; color:rgba(246,242,231,0.6); white-space:nowrap; padding-top:0.15rem;}
  .tl-role{font-weight:600; margin-bottom:0.2rem; font-family:var(--f-display);}
  .tl-org{color:rgba(246,242,231,0.65); font-size:0.9rem;}

  /* ---------- Achievements ---------- */
  .stat-strip{
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(28,36,32,0.15); border-bottom:1px solid rgba(28,36,32,0.15);
  }
  .stat-cell{padding:2.5rem 1.5rem; text-align:center; border-right:1px solid rgba(28,36,32,0.15);}
  .stat-cell:last-child{border-right:none;}
  .stat-num{font-family:var(--f-display); font-size:clamp(2.3rem,4.5vw,3.4rem); font-weight:700; color:#146B62;}
  .stat-label{font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(28,36,32,0.65); margin-top:0.6rem;}

  /* ---------- Testimonials ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;}
  .testi-card{background:var(--panel); border:1px solid var(--line); padding:2.1rem; position:relative;}
  .testi-card::before{content:"“"; position:absolute; top:0.5rem; right:1.2rem; font-family:var(--f-body); font-size:3rem; color:rgba(46,196,182,0.25);}
  .testi-quote{font-size:1.02rem; color:var(--paper); margin-bottom:1.4rem;}
  .testi-who{display:flex; align-items:center; gap:0.9rem; font-family:var(--f-mono); font-size:0.78rem; color:rgba(246,242,231,0.7);}
  .testi-avatar{width:40px; height:40px; border-radius:50%; background:var(--lab); border:1px solid var(--teal); display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:var(--f-display);}

  /* ---------- Blog ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
  .blog-card{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform 0.25s ease;}
  .blog-card:hover{transform:translateY(-6px);}
  .blog-thumb{aspect-ratio:16/10; background:linear-gradient(150deg,#204640,#0F2A2A); position:relative;}
  .blog-thumb .tag{position:absolute; top:1rem; left:1rem; background:var(--amber); color:var(--ink); font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.3rem 0.65rem;}
  .blog-body{padding:1.4rem; display:flex; flex-direction:column; gap:0.7rem; flex:1;}
  .blog-meta{font-family:var(--f-mono); font-size:0.7rem; color:rgba(246,242,231,0.55);}
  .blog-body h3{font-family:var(--f-body); font-weight:600; font-size:1.08rem; line-height:1.35;}
  .blog-read{margin-top:auto; font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.05em; color:var(--teal);}

  /* ---------- Contact ---------- */
  .contact{background:linear-gradient(165deg,#123734,#0A1F1F); position:relative;}
  .contact-inner{text-align:center; max-width:700px; margin-inline:auto;}
  .contact h2{font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:1.1rem;}
  .contact p{color:rgba(246,242,231,0.75); margin-bottom:2.2rem;}
  .contact-form{display:grid; grid-template-columns:1fr 1fr; gap:1rem; text-align:left;}
  .contact-form .full{grid-column:1/-1;}
  .contact-form label{display:block; font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.4rem; color:rgba(246,242,231,0.6);}
  .contact-form input, .contact-form textarea{
    width:100%; background:rgba(15,42,42,0.5); border:1px solid var(--line); color:var(--paper);
    padding:0.85rem 1rem; font-family:var(--f-body); font-size:0.95rem;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(246,242,231,0.4);}
  .contact-form textarea{min-height:120px; resize:vertical;}
  .contact-form button{
    grid-column:1/-1; justify-self:start; margin-top:0.4rem;
    background:var(--teal); color:var(--lab); border:none; font-family:var(--f-mono); font-weight:700;
    font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; padding:1rem 2.2rem; cursor:pointer;
    transition:background 0.2s ease;
  }
  .contact-form button:hover{background:var(--amber);}

  /* ---------- Footer ---------- */
  footer{padding-block:2.3rem; background:var(--lab); border-top:1px solid var(--line);}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-family:var(--f-mono); font-size:0.76rem; color:rgba(246,242,231,0.6);}
  .footer-social{display:flex; gap:1.2rem;}

  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;}
    .orbit-wrap{max-width:280px;}
    .about-grid{grid-template-columns:1fr;}
    .about-photo{max-width:360px;}
    .periodic-grid{grid-template-columns:repeat(3,1fr);}
    .stat-strip{grid-template-columns:repeat(2,1fr);}
    .stat-cell:nth-child(2){border-right:none;}
    .stat-cell{border-bottom:1px solid rgba(28,36,32,0.15);}
    .testi-grid{grid-template-columns:1fr;}
    .blog-grid{grid-template-columns:1fr;}
  }
  @media (max-width:860px){
    nav.links{display:none;}
    .burger{display:flex;}
    .timeline-cols{grid-template-columns:1fr;}
    .contact-form{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .periodic-grid{grid-template-columns:repeat(2,1fr);}
    .stat-strip{grid-template-columns:1fr;}
    .stat-cell{border-right:none;}
  }

  .mobile-drawer{
    position:fixed; top:0; right:-100%; height:100dvh; width:min(80vw,340px);
    background:var(--lab-2); border-left:1px solid var(--line);
    z-index:200; transition:right 0.3s ease; padding:5.5rem 2rem 2rem;
    display:flex; flex-direction:column; gap:1.75rem;
  }
  .mobile-drawer.open{right:0;}
  .mobile-drawer a{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:0.06em; font-size:1rem;}

/* Laravel contact form helpers */
.contact-form-wrap{margin-top:1.5rem;text-align:left}
.contact-form .form_group{margin-bottom:0}
.contact-form .text-danger{color:var(--amber);font-family:var(--f-mono);font-size:0.72rem;margin-top:0.35rem}
.about-photo{overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.about-photo.has-img::after{content:attr(data-caption)}
.stat-num[data-count]{display:inline-block}