:root{
  --flame-1:#ffd36b;
  --flame-2:#ff8a1e;
  --flame-3:#dd5800;
  --flame-4:#c5302e;
  --royal:#566fdd;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- THEMES ---------- */
html[data-theme="dark"]{
  --bg:#0a0e1a;
  --bg-grad-1:#141d36;
  --bg-grad-2:#0c1124;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);
  --text:#eef1fb;
  --text-strong:#ffffff;
  --muted:#8b93b4;
  --glow-strength:1;
  --ring-bg:#0b1020;
}
html[data-theme="light"]{
  --bg:#f3f1ec;
  --bg-grad-1:#fbe9d6;
  --bg-grad-2:#f3f1ec;
  --surface:rgba(20,24,40,.025);
  --surface-2:rgba(20,24,40,.05);
  --border:rgba(20,24,40,.12);
  --text:#1b1e27;
  --text-strong:#0c0e14;
  --muted:#5d6378;
  --glow-strength:.45;
  --ring-bg:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, var(--bg-grad-1) 0%, transparent 58%),
    radial-gradient(820px 560px at 108% 112%, var(--bg-grad-2) 0%, transparent 60%);
  opacity:.9;transition:background .5s var(--ease);
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,52px);
}
.brand{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;
}
.brand .spark{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,var(--flame-1),var(--flame-3));
  box-shadow:0 0 10px var(--flame-2),0 0 22px var(--flame-3);
}
.controls{display:flex;align-items:center;gap:10px}
.ctrl{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;cursor:pointer;display:flex;align-items:center;
  transition:border-color .25s,background .25s,transform .15s;
  backdrop-filter:blur(8px);
}
.ctrl:hover{border-color:var(--flame-3);transform:translateY(-1px)}
.lang{padding:0;overflow:hidden}
.lang button{
  font-family:inherit;font-size:12px;letter-spacing:.06em;
  background:none;border:none;color:var(--muted);cursor:pointer;
  padding:9px 13px;transition:color .2s,background .2s;
}
.lang button.active{color:#0a0e1a;background:linear-gradient(120deg,var(--flame-1),var(--flame-3));font-weight:600}
html[data-theme="light"] .lang button.active{color:#fff}
.theme-btn{padding:9px 14px;gap:8px}
.theme-btn svg{width:15px;height:15px;display:block}

/* ---------- HERO ---------- */
main{position:relative;z-index:2}
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:118px 24px 84px;gap:22px;
}
.hero>*{flex-shrink:0}
.portrait-wrap{position:relative;width:180px;height:180px}
.ring{
  position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--flame-4),var(--flame-3),var(--flame-2),var(--flame-1),var(--royal),var(--flame-4));
  animation:spin 7s linear infinite;
  filter:drop-shadow(0 0 18px rgba(221,88,0,calc(.55*var(--glow-strength))));
}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ring-bg);transition:background .5s var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait{
  position:absolute;inset:4px;border-radius:50%;overflow:hidden;z-index:2;
  border:2px solid rgba(255,255,255,.08);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--flame-2);
  text-shadow:0 0 14px rgba(255,138,30,calc(.6*var(--glow-strength)));
}
.name{
  font-size:clamp(34px,6.5vw,66px);font-weight:700;line-height:1.05;color:var(--text-strong);
  letter-spacing:-.02em;margin:0;
}
.name .last{
  background:linear-gradient(110deg,var(--flame-1),var(--flame-2) 38%,var(--flame-3) 70%,var(--flame-4));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.role{font-size:clamp(16px,2.4vw,21px);color:var(--muted);font-weight:400;letter-spacing:.01em}
.scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:14px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);
}
.scroll-cue .bar{width:1px;height:42px;background:linear-gradient(var(--flame-3),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--flame-1);box-shadow:0 0 8px var(--flame-2);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{top:-50%}70%,100%{top:120%}}

/* ---------- LINKS SECTION ---------- */
.links-sec{padding:40px clamp(20px,5vw,52px) 60px;max-width:1080px;margin:0 auto}
.sec-label{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:38px;
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.sec-label::before,.sec-label::after{content:"";height:1px;width:46px;background:var(--border)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:680px){.cards{grid-template-columns:1fr}}

.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:34px 32px;overflow:hidden;isolation:isolate;
  transition:transform .8s var(--ease),opacity .8s var(--ease),border-color .35s,background .35s;
}
body.reveal-ready .reveal:not(.in){opacity:0;transform:translateY(38px)}
.card:nth-child(2){transition-delay:.12s}
/* flame trail border */
.card::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--angle,0deg),transparent 0deg,transparent 230deg,var(--flame-4) 270deg,var(--flame-3) 300deg,var(--flame-2) 325deg,var(--flame-1) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s var(--ease);
}
.card.in::before{opacity:calc(.9*var(--glow-strength) + .1);animation:trail 4.5s linear infinite}
.card:hover::before{opacity:1;animation-duration:1.8s}
@keyframes trail{to{--angle:360deg}}
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.card::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:18px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(221,88,0,.14),transparent 55%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover{transform:translateY(-6px);background:var(--surface-2);border-color:transparent}
.card:hover::after{opacity:var(--glow-strength)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:46px}
.card-icon{
  width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);transition:.35s;
}
.card:hover .card-icon{border-color:var(--flame-3);box-shadow:0 0 24px rgba(221,88,0,calc(.5*var(--glow-strength)))}
.card-icon svg{width:26px;height:26px;fill:var(--text)}
.card-arrow{color:var(--muted);transition:transform .35s var(--ease),color .35s}
.card:hover .card-arrow{transform:translate(4px,-4px);color:var(--flame-2)}
.card-kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.card-title{font-size:25px;font-weight:600;color:var(--text-strong);letter-spacing:-.01em}
.card-handle{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--flame-2);margin-top:9px;word-break:break-all}

/* ---------- CV CARD (full-width, above the connect cards) ---------- */
.cv-card{display:flex;align-items:center;gap:20px;padding:24px 30px;margin-bottom:22px}
.cv-card .cv-text{flex:1;min-width:0}
.cv-card .card-kicker{margin-bottom:5px}
.cv-card .card-title{font-size:21px}
.cv-card .cv-sub{margin-top:5px}
.cv-card:hover .card-icon{border-color:var(--flame-3);box-shadow:0 0 24px rgba(221,88,0,calc(.5*var(--glow-strength)))}
.cv-card:hover .card-arrow{transform:translate(4px,-4px);color:var(--flame-2)}
@media(max-width:680px){.cv-card{padding:22px 22px;gap:16px}.cv-card .card-title{font-size:19px}}

/* ---------- CONTACT ---------- */
.contact{
  padding:70px clamp(20px,5vw,52px) 90px;max-width:1080px;margin:0 auto;text-align:center;
  transition:transform .8s var(--ease),opacity .8s var(--ease);
}
.contact-card{
  position:relative;border:1px solid var(--border);border-radius:22px;background:var(--surface);
  padding:clamp(38px,6vw,64px) 28px;overflow:hidden;
}
.contact-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% -10%,rgba(255,138,30,calc(.16*var(--glow-strength))),transparent 60%);
  pointer-events:none;
}
.contact h2{font-size:clamp(26px,4.5vw,42px);font-weight:700;color:var(--text-strong);letter-spacing:-.02em;position:relative}
.contact p{color:var(--muted);margin-top:12px;font-size:15px;position:relative}
.mail-btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;margin-top:28px;
  font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.04em;
  border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  text-decoration:none;color:#0a0e1a;font-weight:600;
  background:linear-gradient(120deg,var(--flame-1),var(--flame-2) 50%,var(--flame-3));
  padding:15px 26px;border-radius:999px;
  box-shadow:0 8px 30px rgba(221,88,0,calc(.4*var(--glow-strength)));
  transition:transform .2s var(--ease),box-shadow .3s;
}
.mail-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(221,88,0,calc(.6*var(--glow-strength)))}
.mail-btn svg{width:17px;height:17px;fill:#0a0e1a}
.footer{text-align:center;padding:0 24px 44px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;
  background:radial-gradient(900px 600px at 50% 40%,#141d36 0%,#0a0e1a 70%);
  transition:opacity .7s var(--ease),visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
.flame{width:96px;height:120px;position:relative}
.flame svg{width:100%;height:100%;overflow:visible}
.flame .core{transform-origin:50% 90%;animation:flick 1.4s var(--ease) infinite}
@keyframes flick{0%,100%{transform:scaleY(1) scaleX(1)}45%{transform:scaleY(1.08) scaleX(.94)}70%{transform:scaleY(.96) scaleX(1.04)}}
.load-text{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:#ffb24a;text-shadow:0 0 14px #dd5800}
.load-track{width:210px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.load-fill{height:100%;width:0;background:linear-gradient(90deg,var(--flame-4),var(--flame-3),var(--flame-2),var(--flame-1));box-shadow:0 0 12px var(--flame-2);transition:width .2s linear}
.load-pct{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.3em;color:#8b93b4}

@media(prefers-reduced-motion:reduce){
  .ring,.card.in::before,.scroll-cue .bar::after,.flame .core{animation:none}
  .card,.contact{transition:opacity .4s}
}

/* ---------- CONTACT MODAL ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,6,14,.72);backdrop-filter:blur(8px)}
html[data-theme="light"] .modal-backdrop{background:rgba(40,30,20,.38)}
.modal-panel{position:relative;width:min(540px,100%);max-height:90vh;overflow:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:20px;
  padding:38px clamp(22px,4vw,40px) 34px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(18px) scale(.98);transition:transform .4s var(--ease);isolation:isolate}
.modal.open .modal-panel{transform:none}
.modal-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,var(--flame-4),var(--flame-3),var(--flame-2),var(--flame-1));
  box-shadow:0 0 18px rgba(221,88,0,calc(.7*var(--glow-strength)))}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.modal-close:hover{color:var(--flame-2);border-color:var(--flame-3)}
.modal-head{margin-bottom:22px}
.modal-head .kick{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--flame-2);margin-bottom:8px}
.modal-head h3{font-size:24px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em}
#contactForm{display:flex;flex-direction:column;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font-family:"Space Grotesk",sans-serif;font-size:15px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:11px;
  padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s;resize:vertical;width:100%}
.field textarea{min-height:118px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.6}
.field input:focus,.field textarea:focus{border-color:var(--flame-3);box-shadow:0 0 0 3px rgba(221,88,0,.14)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit-btn{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.04em;font-weight:600;
  color:#0a0e1a;border:none;cursor:pointer;border-radius:999px;padding:15px 24px;
  background:linear-gradient(120deg,var(--flame-1),var(--flame-2) 50%,var(--flame-3));
  box-shadow:0 8px 30px rgba(221,88,0,calc(.4*var(--glow-strength)));
  transition:transform .2s var(--ease),box-shadow .3s,opacity .2s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(221,88,0,calc(.6*var(--glow-strength)))}
.submit-btn:disabled{opacity:.6;cursor:default;transform:none}
.form-note{display:none;align-items:center;gap:9px;font-size:13.5px;margin-top:2px;position:relative;
  font-family:"JetBrains Mono",monospace;letter-spacing:.01em;line-height:1.4}
.form-note.show{display:flex}
.form-note.success{color:#3ddc84}
.form-note.error{color:#ff6b5e}
.form-note svg{width:18px;height:18px;flex:0 0 auto}
@property --burn{syntax:"<percentage>";initial-value:0%;inherits:false}
.form-note.burning{
  --burn:0%;pointer-events:none;
  color:#fff3d6;
  text-shadow:0 0 6px #ffd36b,0 0 16px var(--flame-2),0 0 30px var(--flame-3),0 0 46px var(--flame-4);
  -webkit-mask-image:linear-gradient(115deg, transparent var(--burn), rgba(0,0,0,.35) calc(var(--burn) + 4%), #000 calc(var(--burn) + 13%));
  mask-image:linear-gradient(115deg, transparent var(--burn), rgba(0,0,0,.35) calc(var(--burn) + 4%), #000 calc(var(--burn) + 13%));
  animation:burnAway 1.5s ease-in forwards;
}
.form-note.burning svg{color:#fff3d6}
.form-note.burning::after{
  content:"";position:absolute;inset:-7px -12px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg, transparent, #ffe7a6, #ff8a1e, #dd5800, #c5302e);
  -webkit-mask-image:linear-gradient(115deg, transparent var(--burn), #000 calc(var(--burn) + 2%), #000 calc(var(--burn) + 8%), transparent calc(var(--burn) + 13%));
  mask-image:linear-gradient(115deg, transparent var(--burn), #000 calc(var(--burn) + 2%), #000 calc(var(--burn) + 8%), transparent calc(var(--burn) + 13%));
  filter:blur(2.5px) brightness(1.5);mix-blend-mode:screen;
}
@keyframes burnAway{
  0%{--burn:0%;opacity:1;transform:translateX(0);filter:blur(0)}
  16%{opacity:1}
  100%{--burn:122%;opacity:0;transform:translateX(9px) scale(.99);filter:blur(1.6px)}
}
@media(prefers-reduced-motion:reduce){
  .form-note.burning{animation:none;mask-image:none;-webkit-mask-image:none;opacity:0;transition:opacity .45s ease}
  .form-note.burning::after{display:none}
}