:root{
    --bg:#0A0F1A;
    --bg-elev:#0F1726;
    --bg-card:#111B2D;
    --line:#1C2739;
    --line-strong:#2A3A55;
    --ink:#E9EFF8;
    --muted:#8C9DB6;
    --brand:#407098;
    --accent:#5B9BDF;
    --accent-ink:#0A0F1A;
    --signal:#3DDC97;
    --cut:10px;
    --max:1140px;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:"Space Grotesk",system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:700;}
  p{margin:0;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
  .mono{font-family:var(--mono);}
  .chamfer{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));}

  /* ---------- Buttons ---------- */
  .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0;transition:transform .15s,background .2s,color .2s;
    clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));}
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible{outline:none;filter:brightness(1.18);}
  .btn-out:focus-visible{background:var(--accent);}
  .btn svg{width:18px;height:18px;flex:none;}
  .btn>span,.btn>svg{position:relative;z-index:1;}
  .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{background:#7DB2EA;}
  .btn-out{background:var(--line-strong);color:var(--ink);}
  .btn-out::before{content:"";position:absolute;inset:1px;background:var(--bg);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:background .2s;}
  .btn-out:hover{background:var(--accent);}
  .btn-out:hover::before{background:var(--bg-elev);}
  .btn-sm{min-height:42px;padding:0 18px;font-size:.82rem;}

  /* ---------- Header ---------- */
  .site-header{position:sticky;top:0;z-index:80;background:rgba(10,15,26,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;}
  .brand .mark{height:30px;width:auto;}
  .nav{display:flex;align-items:center;gap:26px;}
  .nav a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .2s;}
  .nav a:hover{color:var(--ink);}
  .nav .btn-primary,.nav .btn-primary:hover{color:var(--accent-ink);}
  .nav .idx{font-family:var(--mono);color:var(--accent);font-size:.75rem;margin-right:6px;}
  .burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;}
  .burger svg{width:22px;height:22px;}
  .burger .x{display:none;}
  .site-header.open .burger .bars{display:none;}
  .site-header.open .burger .x{display:block;}

  /* ---------- Hero ---------- */
  .hero{position:relative;overflow:hidden;padding:56px 0 64px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%231B2740'/%3E%3C/svg%3E");}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
  .status{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em;border:1px solid var(--line-strong);padding:8px 12px;background:var(--bg-elev);}
  .status .dot{width:8px;height:8px;background:var(--signal);box-shadow:0 0 0 3px rgba(61,220,151,.15);}
  .hero h1{font-size:clamp(3rem,13vw,6.2rem);line-height:.95;margin:22px 0 14px;letter-spacing:-.04em;}
  .role{font-family:var(--mono);color:var(--accent);font-size:clamp(.82rem,3.4vw,1rem);letter-spacing:.02em;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px 0;}
  .role .gt{color:var(--muted);margin-right:8px;}
  .cursor{display:inline-block;width:.55em;height:1em;background:var(--accent);margin-left:.2em;vertical-align:-.12em;animation:blink 1.1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}
  .lede{color:var(--muted);font-size:1.05rem;max-width:46ch;margin-bottom:30px;}
  .hero-actions{display:flex;flex-direction:column;gap:12px;}
  .socials{display:flex;gap:10px;margin-top:28px;}
  .socials a{width:44px;height:44px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s;background:var(--bg-elev);}
  .socials a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .socials svg{width:19px;height:19px;}

  .hero-photo{position:relative;justify-self:center;width:min(300px,74vw);}
  .hero-photo .dia{position:absolute;width:118%;aspect-ratio:1;border:1px solid var(--line-strong);transform:translate(-50%,-50%) rotate(45deg);left:50%;top:50%;pointer-events:none;}
  .hero-photo .dia.in{width:92%;border-color:var(--line);}
  .frame{position:relative;z-index:1;aspect-ratio:4/5;background:var(--bg-elev);}
  .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
  .frame::before,.frame::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--accent);z-index:2;}
  .frame::before{top:-9px;left:-9px;border-right:0;border-bottom:0;}
  .frame::after{bottom:-9px;right:-9px;border-left:0;border-top:0;}
  .tag-cta{position:absolute;z-index:3;right:-6px;bottom:22px;background:var(--bg);border:1px solid var(--line-strong);font-family:var(--mono);font-size:.72rem;color:var(--ink);padding:8px 10px;line-height:1.35;}
  .tag-cta b{color:var(--accent);display:block;font-weight:500;}

  /* ---------- Strip ---------- */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-elev);}
  .strip-inner{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:14px 20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
  .strip i{color:var(--accent);font-style:normal;}

  /* ---------- Sections ---------- */
  section{scroll-margin-top:72px;}
  .band{padding:72px 0;}
  .band.alt{background:var(--bg-elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .kicker{font-family:var(--mono);color:var(--accent);font-size:.78rem;letter-spacing:.08em;margin-bottom:14px;display:block;}
  .kicker .sl{color:var(--muted);}
  .h2{font-size:clamp(1.8rem,7vw,2.6rem);}
  .sub{color:var(--muted);font-size:1.02rem;max-width:58ch;margin-top:14px;}
  .sub em{font-style:normal;color:var(--accent);font-family:var(--mono);font-size:.82rem;}

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
  .about-photo{position:relative;}
  .about-photo .frame{aspect-ratio:4/3;}
  .about-photo .frame img{object-position:center;}
  .about-body p{color:var(--muted);font-size:1.02rem;margin-bottom:16px;}
  .details{margin-top:22px;border-top:1px solid var(--line);}
  .drow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem;}
  .drow .k{font-family:var(--mono);color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;}
  .drow .v{font-weight:600;text-align:right;}

  /* ---------- Skills ---------- */
  .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:36px;}
  .skill{background:var(--bg-card);border:1px solid var(--line);padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s,transform .15s;}
  .skill:hover{border-color:var(--accent);transform:translateY(-3px);}
  .skill img{width:34px;height:34px;}
  .skill span{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.02em;text-align:center;}

  /* ---------- Experience ---------- */
  .exp-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px;}
  .exp{background:var(--bg-card);border:1px solid var(--line);padding:26px 22px;position:relative;transition:border-color .2s;}
  .exp:hover{border-color:var(--accent);}
  .exp::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--accent);}
  .exp .num{font-family:var(--mono);font-size:.74rem;color:var(--accent);letter-spacing:.08em;margin-bottom:14px;display:block;}
  .exp h3{font-size:1.22rem;margin-bottom:10px;}
  .exp p{color:var(--muted);font-size:.98rem;margin-bottom:16px;}
  .chips{display:flex;flex-wrap:wrap;gap:6px;}
  .chip{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line-strong);padding:4px 8px;}
  .chip::before{content:"[";color:var(--accent);margin-right:2px;}
  .chip::after{content:"]";color:var(--accent);margin-left:2px;}

  /* ---------- Services (blueprint grid) ---------- */
  .bp{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px;}
  .cell{background:var(--bg);padding:28px 22px;transition:background .2s;}
  .cell:hover{background:var(--bg-card);}
  .cell .num{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:12px;}
  .cell h3{font-size:1.22rem;margin-bottom:10px;}
  .cell p{color:var(--muted);font-size:.98rem;}

  /* ---------- Contact ---------- */
  .contact{position:relative;border:1px solid var(--line-strong);background:var(--bg-elev);padding:48px 22px;text-align:center;}
  .contact::before,.contact::after{content:"";position:absolute;width:30px;height:30px;border:2px solid var(--accent);}
  .contact::before{top:-2px;left:-2px;border-right:0;border-bottom:0;}
  .contact::after{bottom:-2px;right:-2px;border-left:0;border-top:0;}
  .contact h2{font-size:clamp(1.9rem,7vw,2.8rem);margin:0 auto 14px;max-width:18ch;}
  .contact p{color:var(--muted);font-size:1.04rem;max-width:44ch;margin:0 auto 30px;}
  .contact .btn{width:100%;max-width:360px;}
  .alt{margin-top:24px;font-family:var(--mono);font-size:.8rem;color:var(--muted);}
  .alt a{color:var(--ink);border-bottom:1px solid var(--line-strong);}
  .alt a:hover{border-color:var(--accent);color:var(--accent);}

  /* ---------- Footer ---------- */
  .site-footer{border-top:1px solid var(--line);padding:48px 0 28px;background:var(--bg);}
  .fgrid{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--line);}
  .fbrand p{color:var(--muted);font-size:.95rem;margin:14px 0 18px;max-width:40ch;}
  .fcol h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
  .fcol a{display:block;color:var(--muted);font-size:.95rem;padding:6px 0;}
  .fcol a:hover{color:var(--ink);}
  .fbottom{padding-top:22px;font-family:var(--mono);font-size:.74rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;}

  /* ---------- Motion ---------- */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.cursor{animation:none;}html{scroll-behavior:auto;}}

  /* ---------- Mobile nav (< 860) ---------- */
  @media (max-width:859px){
    .burger{display:flex;}
    .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-elev);border-bottom:1px solid var(--line);padding:6px 20px 20px;}
    .site-header.open .nav{display:flex;}
    .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--ink);}
    .nav .btn{margin-top:16px;border-bottom:0;padding:0 22px;font-size:.9rem;justify-content:center;}
    .hero-photo{order:-1;}
  }

  /* ---------- Tablet+ (>= 640) ---------- */
  @media (min-width:640px){
    .wrap{padding:0 32px;}
    .hero-actions{flex-direction:row;flex-wrap:wrap;}
    .skills{grid-template-columns:repeat(4,1fr);gap:12px;}
    .skill img{width:40px;height:40px;}
    .exp-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
    .bp{grid-template-columns:repeat(2,1fr);}
    .cell{padding:32px 30px;}
    .contact{padding:64px 40px;}
    .fgrid{grid-template-columns:1.5fr 1fr 1fr;gap:40px;}
    .band{padding:96px 0;}
  }

  /* ---------- Desktop (>= 860) ---------- */
  @media (min-width:860px){
    .header-inner{height:72px;}
    .hero{padding:96px 0 110px;}
    .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px;}
    .hero h1{font-size:clamp(4rem,7.6vw,6.4rem);}
    .hero-photo{width:min(380px,36vw);}
    .about-grid{grid-template-columns:.9fr 1.1fr;gap:64px;}
    .skills{grid-template-columns:repeat(6,1fr);}
    .exp{padding:32px 30px;}
    .contact h2{margin-bottom:18px;}
  }