:root{
    --blue:#0D2B4E;
    --blue-2:#123863;
    --panel:#173F6E;
    --grid-line: rgba(76,201,240,0.14);
    --cyan:#4CC9F0;
    --coral:#FF6B6B;
    --paper:#EAF2FA;
    --steel:#8FAAC9;

    --f-display:'Sora', sans-serif;
    --f-mono:'JetBrains 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(--blue);
    color:var(--paper);
    font-family:var(--f-display);
    line-height:1.65;
    -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(--coral); color:var(--blue);}
  :focus-visible{outline:3px solid var(--cyan); outline-offset:3px;}

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

  /* Blueprint grid background, used on dark sections */
  .grid-bg{
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:44px 44px;
  }

  .eyebrow{
    font-family:var(--f-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex; align-items:center; gap:0.6rem;
  }

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

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(13,43,78,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--grid-line);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem;}
  .logo{font-family:var(--f-mono); font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:0.6rem;}
  .logo .fx{color:var(--cyan);}
  nav.links{display:flex; gap:2rem; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.03em;}
  nav.links a{color:var(--steel); transition:color 0.2s ease;}
  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.03em;
    padding:0.8rem 1.5rem; border:1px solid var(--cyan);
    transition:all 0.2s ease;
  }
  .btn-solid{background:var(--coral); color:var(--blue); font-weight:700; border-color:var(--coral);}
  .btn-solid:hover{background:var(--cyan); border-color:var(--cyan);}
  .btn-outline{border-color:rgba(234,242,250,0.35);}
  .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;
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; 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 .fn{color:var(--cyan); font-family:var(--f-mono); font-weight:600;}
  .hero-copy p.lede{
    font-size:clamp(1rem,1.3vw,1.15rem);
    color:var(--steel);
    max-width:46ch;
    margin-bottom:2.25rem;
  }
  .hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

  /* Graph plot signature element */
  .plot-card{
    background:var(--panel);
    border:1px solid var(--grid-line);
    position:relative;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .plot-card .axis-label{
    position:absolute;
    font-family:var(--f-mono); font-size:0.7rem; color:var(--steel);
  }
  .plot-card .label-y{top:1rem; left:1rem;}
  .plot-card .label-x{bottom:1rem; right:1rem;}
  .curve-path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    animation:draw 2.6s ease forwards 0.4s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .plot-point{
    opacity:0;
    animation:popIn 0.4s ease forwards 2.8s;
  }
  @keyframes popIn{ to{opacity:1;} }

  /* ---------- 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:38ch; color:var(--steel); font-size:0.95rem;}
  .coord{font-family:var(--f-mono); color:var(--coral); font-size:0.85rem;}

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

  /* ---------- About ---------- */
  .about{background:var(--blue-2);}
  .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,#1B4A80,#0D2B4E);
    border:1px solid var(--grid-line);
    position:relative;
    overflow:hidden;
  }
  .about-photo::after{
    content:attr(data-caption);
    position:absolute; bottom:0; left:0; right:0;
    padding:0.9rem 1rem;
    font-family:var(--f-mono); font-size:0.7rem;
    background:rgba(13,43,78,0.7);
    border-top:1px solid var(--grid-line);
  }
  .about-photo:not([data-caption])::after{display:none;}
  .about-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
  .about-text p{color:var(--steel); 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;}

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

  /* ---------- Subjects (services) ---------- */
  .subject-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
  .subject-card{
    background:var(--panel);
    border:1px solid var(--grid-line);
    padding:2rem 1.5rem;
    display:flex; flex-direction:column; gap:0.9rem;
    min-height:230px;
    transition:transform 0.25s ease, border-color 0.25s ease;
  }
  .subject-card:hover{transform:translateY(-6px); border-color:var(--cyan);}
  .subject-card .sfn{font-family:var(--f-mono); font-size:0.78rem; color:var(--coral);}
  .subject-card h3{font-size:1.2rem;}
  .subject-card p{color:var(--steel); font-size:0.88rem; flex:1;}
  .subject-card .link{font-family:var(--f-mono); font-size:0.75rem; color:var(--cyan); letter-spacing:0.03em;}

  /* ---------- Experience ---------- */
  .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.08em;
    color:var(--cyan); padding-bottom:0.9rem; border-bottom:1px solid var(--grid-line); margin-bottom:1.4rem;
  }
  .tl-item{padding:1.15rem 0; border-bottom:1px solid var(--grid-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:var(--steel); white-space:nowrap; padding-top:0.15rem;}
  .tl-role{font-weight:600; margin-bottom:0.2rem;}
  .tl-org{color:var(--steel); font-size:0.9rem;}

  /* ---------- Achievements ---------- */
  .achievements{background:var(--blue-2);}
  .stat-strip{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--grid-line);}
  .stat-cell{padding:2.5rem 1.5rem; text-align:center; border-right:1px solid var(--grid-line);}
  .stat-cell:last-child{border-right:none;}
  .stat-num{font-family:var(--f-mono); font-size:clamp(2.3rem,4.5vw,3.4rem); font-weight:700; color:var(--cyan);}
  .stat-label{font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel); 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(--grid-line); padding:2.1rem; position:relative;}
  .testi-card::before{content:""; position:absolute; top:0; left:0; width:4px; height:36px; background:var(--coral);}
  .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:var(--steel);}
  .testi-avatar{width:40px; height:40px; background:var(--blue); border:1px solid var(--cyan); display:flex; align-items:center; justify-content:center; color:var(--cyan); font-family:var(--f-mono); font-weight:600;}

  /* ---------- Blog ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
  .blog-card{background:var(--panel); border:1px solid var(--grid-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,#1B4A80,#0D2B4E); position:relative;}
  .blog-thumb .tag{position:absolute; top:1rem; left:1rem; background:var(--coral); color:var(--blue); font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.04em; 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:var(--steel);}
  .blog-body h3{font-size:1.08rem; line-height:1.35;}
  .blog-read{margin-top:auto; font-family:var(--f-mono); font-size:0.74rem; color:var(--cyan);}

  /* ---------- Contact ---------- */
  .contact{background:linear-gradient(165deg,#123863,#0A1F3A); 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:var(--steel); 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.06em; text-transform:uppercase; margin-bottom:0.4rem; color:var(--steel);}
  .contact-form input, .contact-form textarea{
    width:100%; background:rgba(13,43,78,0.5); border:1px solid var(--grid-line); color:var(--paper);
    padding:0.85rem 1rem; font-family:var(--f-display); font-size:0.95rem;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(234,242,250,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(--coral); color:var(--blue); border:none; font-family:var(--f-mono); font-weight:700;
    font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; padding:1rem 2.2rem; cursor:pointer;
    transition:background 0.2s ease;
  }
  .contact-form button:hover{background:var(--cyan);}

  /* ---------- Footer ---------- */
  footer{padding-block:2.3rem; background:var(--blue); border-top:1px solid var(--grid-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:var(--steel);}
  .footer-social{display:flex; gap:1.2rem;}

  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;}
    .plot-card{max-width:380px; margin-inline:auto;}
    .about-grid{grid-template-columns:1fr;}
    .about-photo{max-width:360px;}
    .subject-grid{grid-template-columns:repeat(2,1fr);}
    .stat-strip{grid-template-columns:repeat(2,1fr);}
    .stat-cell:nth-child(2){border-right:none;}
    .stat-cell{border-bottom:1px solid var(--grid-line);}
    .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){
    .subject-grid{grid-template-columns: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(--blue-2); border-left:1px solid var(--grid-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.04em; font-size:1rem;}

/* Laravel contact form helpers */
.contact-form-wrap{margin-top:1.5rem;text-align:left}
.contact-form .form_group{display:contents}
.contact-form .form_group:nth-child(n){}
.contact-form .text-danger{color:var(--coral);font-family:var(--f-mono);font-size:0.72rem;margin-top:0.35rem;display:block}
.about-photo img{width:100%;height:100%;object-fit:cover}
.hire-panel{background:var(--panel);border:1px solid var(--grid-line);padding:2rem;margin-top:2rem;text-align:left}
.hire-panel .jrow{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0.85rem 0;border-bottom:1px solid var(--grid-line);font-size:0.92rem}
.hire-panel .jrow:last-child{border-bottom:none}
.hire-panel .jrow span{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel)}
.hire-panel .jrow b{color:var(--paper);font-weight:600}