:root{
  --bg:#030509;
  --bg-2:#060a14;
  --surface:#0b1120;
  --surface-2:#0f172c;
  --border:rgba(120,160,255,.22);
  --text:#eef2fb;
  --text-dim:#8d97b3;
  --accent-soft:rgba(79,125,255,.16);
  --mono:'JetBrains Mono',monospace;
  --maxw:1180px;
  --font-en:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-en-body:'Inter',system-ui,sans-serif;
  --font-ar:'Tajawal','Inter',system-ui,sans-serif;
  --nav-h:70px;

  --portrait-w:min(
    max(
      160px,
      61.2vw - 129.5px,
      68vw - 257px
    ),
    calc(100vw - 2*var(--side-w) - 2*var(--hero-gap-x) - 32px)
  );

  --portrait-render:min(
    var(--portrait-w),
    calc((100vh - var(--nav-h) - 6px) * 0.79)
  );

  --side-w:clamp(230px, 13.5vw + 100px, 360px);
  --hero-gap-x:clamp(13px, 2.1vw - 8px, 28px);

  --edge:clamp(12px, 3.3vw, 56px);
  --switch-glow:#2196F3;
}

html[data-mode="dev"][data-theme="light"]{ --switch-glow:#0D47A1; }
html[data-mode="design"][data-theme="dark"]{ --switch-glow:#66BB6A; }
html[data-mode="design"][data-theme="light"]{ --switch-glow:#1B5E20; }

html[data-theme="light"]
  {
    --bg:#f4f6fb;
    --bg-2:#eef1fa;
    --surface:#ffffff;
    --surface-2:#f3f5fc;
    --border:rgba(40,60,140,.16);
    --text:#0b0f1e;
    --text-dim:#57607a;
    --accent-soft:rgba(79,125,255,.10);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html[dir="rtl"] body{font-family:var(--font-ar);}
html[dir="ltr"] body{font-family:var(--font-en-body);}

body
  {
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    transition:background .5s ease, color .5s ease;
    cursor:default;
  }

img
  {
    max-width:100%;
    display:block;
  }

a
  {
    color:inherit;
    text-decoration:none;
  }

button
  {
    font:inherit;
    color:inherit;
    background:none;
    border:none;
    cursor:pointer;
  }

ul
  {
    list-style:none;
  }

section
  {
    position:relative;
    z-index:1;
  }

.wrap
  {
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 28px;
  }

.topnav
  {
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0;

    direction:ltr;

    transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    will-change:transform, opacity;
}

.topnav.is-hidden{ transform:translateY(calc(-100% - 12px)); opacity:0; }

@media (prefers-reduced-motion: reduce){

  .topnav{ transition:none; }
}
.nav-inner
  {
    width:100%;
    margin:0;
    max-width:none;

    display:grid;
    grid-template-columns:1fr var(--portrait-render) 1fr;
    column-gap:0;
    align-items:center;
    justify-items:center;
  }

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

.nav-slot:first-child{
  width:var(--side-w); justify-content:flex-start;
  justify-self:start; margin-inline-start:var(--edge);
}
.nav-slot:last-child {
  width:var(--side-w); justify-content:flex-end;
  justify-self:end; margin-inline-end:var(--edge);
}

@property --gradient-angle{
  syntax:"<angle>"; initial-value:0deg; inherits:false;
}
.lang-switch, .mode-switch, .theme-switch
  {
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    border-radius:999px;
    padding:2px;
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1.5px solid transparent;

    background:
      linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
      conic-gradient(from var(--gradient-angle),
        transparent, var(--switch-glow) 7%, transparent 15%
      ) border-box;

    box-shadow:0 0 0 1px var(--border) inset;
    animation:gradient-angle 6s linear infinite;
  }
@keyframes gradient-angle{ to{ --gradient-angle:360deg; } }

.lang-switch button, .mode-switch button, .theme-switch button
  {
    position:relative;
    z-index:2;
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
  }

.switch-thumb{
  position:absolute; top:2px; z-index:1;
  height:38px; border-radius:50%;
  background:transparent;
  border:2px solid var(--switch-glow);
  transition:left .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}

.nav-icon
  {
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:50%;
    object-fit:cover;
  }

.hero
  {

    height:100vh;
    min-height:100vh;
    padding-top:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;

    background: radial-gradient(120% 90% at 50% 58%, #101419 0%, #050608 64%);
  }

html[data-theme="light"] .hero
  {

    background: radial-gradient(120% 90% at 50% 58%, #f6f8fc 0%, #eef1f7 64%);
  }

.hero .bp{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
  will-change:transform;
}
html[data-theme="light"] .hero .bp{
  background-image:
    linear-gradient(rgba(10,15,30,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,15,30,.08) 1px, transparent 1px);
}
html[data-mode="design"] .hero .bp{ display:none; }

.hero .gr
  {
    position:absolute; inset:-10%; z-index:0; pointer-events:none;
    display:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
    will-change:transform;
  }
.hero .gr svg{ width:100%; height:100%; stroke:rgba(255,255,255,.1); }
html[data-theme="light"] .hero .gr svg{ stroke:rgba(10,15,30,.12); }
html[data-mode="design"] .hero .gr{ display:block; }

#skills{ position:relative; overflow:hidden; }
.skills-particles{

  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

#skills .wrap{ position:relative; z-index:1; }

.hero-grid{
   position:relative; z-index:2;
   display:grid;

   grid-template-columns:1fr var(--portrait-render) 1fr;

   grid-template-rows:1fr auto 1fr;

   column-gap:0; row-gap:28px; width:100%;

   max-width:none;
   margin:0 auto;

   padding:0; height:100%; box-sizing:border-box;
}

.hero-side{

  display:flex; flex-direction:column; gap:10px; min-width:0; width:var(--side-w);
  align-items:center; text-align:center;

  grid-row:2; align-self:start;
}

.hero-side{ position:relative; }
.hero-side.left{ grid-column:1; justify-self:center; }
.hero-side.right{ grid-column:3; justify-self:center; }
.hero-role, .hero-name{flex-wrap:wrap; min-width:0;}
.hero-role span[data-typing], .hero-name span{overflow-wrap:break-word; min-width:0;}

.hero-role span[data-typing]{ position:relative; }

.hero-greet
  {

    font-size:clamp(14px, 0.223vw + 11.72px, 30px);
    color:var(--text-dim);

    line-height:1.3;
    display:flex;
    align-items:center;
    gap:8px;
  }

.hero-name
  {
    font-family:var(--font-en);
    font-size:clamp(16px, 1.1vw + 5px, 30px);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.01em;
    display:flex;
    align-items:center;
    gap:10px;
  }

html[dir="rtl"] .hero-name{font-family:var(--font-ar);}

.hero-role-label
  {

    font-size:clamp(14px, 0.223vw + 11.72px, 30px);
    line-height:1.3;
    color:var(--text-dim);
  }

.hero-role
  {
    font-family:var(--font-en);
    font-size:clamp(16px, 1.1vw + 5px, 28px);
    font-weight:700;
    line-height:1.3;
    display:flex; align-items:center;

    min-height:1.35em;

    position:relative;
  }

html[dir="rtl"] .hero-role{font-family:var(--font-ar);}

.role-icon{
  position:absolute; inset-inline-end:100%; margin-inline-end:8px;
  top:50%; transform:translateY(-50%);

  width:20px; height:20px; max-width:none; opacity:.9; flex-shrink:0;
}

.type-cursor{
  position:absolute; inset-inline-end:-4px; top:50%; transform:translateY(-50%);
  width:2px; height:1em; background:currentColor;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}

.hero-portrait
  {
    position:relative;

    grid-column:2; grid-row:1 / -1;
    margin-top:var(--nav-h);
    justify-self:center;
    align-self:end;

    aspect-ratio:1728 / 2034;
    height:auto;
    max-height:calc(100vh - var(--nav-h) - 6px);

    width:var(--portrait-render);

    opacity:0; transform:translateY(28px);
    animation:heroFade 1.1s .15s cubic-bezier(.2,.8,.2,1) forwards;
  }

@keyframes heroFade{to{opacity:1; transform:translateY(0);}}
.hero-portrait img
  {
    width:100%; height:100%; position:relative; z-index:2;

    object-fit:cover;

    object-position:center bottom;
  }

.hero-portrait .portrait-glow
  {
    position:absolute; inset:auto 8% 0 8%; height:70%; z-index:1;
    background:radial-gradient(circle,var(--accent-soft),transparent 70%);
    filter:blur(50px); opacity:.2;
  }

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-dim);
}
.mouse-icon{
  width:22px; height:34px; border:2px solid currentColor; border-radius:12px; position:relative;
}

.mouse-icon::after{
  content:''; position:absolute; top:16px; left:50%; width:3px; height:7px;
  background:var(--switch-glow); border-radius:2px; transform:translateX(-50%);
  animation:scrollDot 1.8s ease infinite;
}

@keyframes scrollDot{0%{opacity:1; top:16px;} 70%{opacity:0; top:6px;} 100%{opacity:0; top:16px;}}

.section-pad{
  min-height:100vh;
  padding:120px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.section-pad > .wrap{ width:100%; }

.cf{
  position:relative; margin:0 auto;

  width:100%;

  max-width:min(1040px, 92vw);

  --cf-gap:24px;
  padding:var(--cf-gap) 0 var(--cf-gap);
  border-radius:28px;
  border:1px solid var(--border);

  background:color-mix(in srgb, var(--surface) 38%, transparent);

  box-shadow:0 30px 80px -40px #000;
  backdrop-filter:blur(34px) saturate(150%);
  -webkit-backdrop-filter:blur(34px) saturate(150%);
}

.cf__head{ text-align:center; padding:0 24px calc(var(--cf-gap) - 8px); }
.cf__title{
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(26px, 3.4vw, 40px);
  line-height:1.15; margin:0;
}
html[dir="rtl"] .cf__title{ font-family:var(--font-ar); }

.cf__rule{
  display:block; width:58px; height:2px; border-radius:999px;
  margin:12px auto 0;
  background:var(--switch-glow);
}

.cf__viewport{ position:relative; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cf{ background:var(--surface); }
}

.cf__stage{

  position:relative; height:340px;
  perspective:1400px; perspective-origin:50% 50%;
  overflow:hidden;
  touch-action:pan-y;
}
.cf__card{
  position:absolute; left:50%; top:50%;
  width:clamp(230px, 25vw, 290px);

  --off:0; --adist:0;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--off) * var(--dir, 1) * 62%))
    rotateY(calc(var(--off) * var(--dir, 1) * -34deg))
    scale(calc(1 - var(--adist) * 0.13));
  opacity:calc(1 - var(--adist) * 0.34);
  z-index:calc(100 - var(--adist) * 10);
  transition:transform .55s cubic-bezier(.22,.7,.2,1), opacity .55s ease;
  transform-style:preserve-3d;
  will-change:transform;
  cursor:pointer;
  border-radius:20px; overflow:hidden;

  border:1px solid var(--border);
  background:var(--surface-2, var(--surface));
}

.cf__card[data-hidden="true"]{ opacity:0; pointer-events:none; }
.cf__card[data-active="true"]{
  cursor:default;
  border-color:color-mix(in srgb, var(--switch-glow) 55%, var(--border));

  box-shadow:0 10px 26px -18px color-mix(in srgb, var(--switch-glow) 34%, transparent);
}
.cf__card:not([data-active="true"]):hover{ opacity:1; }
.cf__card:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:3px; }

.cf__media{
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--switch-glow) 22%, transparent), transparent 70%),
    var(--surface);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.cf__media img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;

  opacity:0; transition:opacity .4s ease;
}
.cf__media[data-has-media="true"] img{ opacity:1; }

.cf__media[data-fit="contain"] img{ object-fit:contain; padding:8% 0; }

.cf__glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:color-mix(in srgb, var(--switch-glow) 85%, var(--text));
}
.cf__glyph svg{ width:34%; height:34%; opacity:.9; }

.cf__media[data-has-media="true"] .cf__glyph{ display:none; }

.cf__body{ padding:16px 18px 18px; text-align:start; }
.cf__body h3{
  font-family:var(--font-en); font-size:16px; font-weight:700; margin:0 0 10px;
}
html[dir="rtl"] .cf__body h3{ font-family:var(--font-ar); }
.cf__body ul{ display:flex; flex-direction:column; gap:6px; }
.cf__body li{
  font-size:13px; color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.cf__body li::before{
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--switch-glow); flex-shrink:0;
}

.cf__nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:200;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--text);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cf__nav:hover{
  border-color:var(--switch-glow);
  box-shadow:0 0 18px -6px var(--switch-glow);
}
.cf__nav:active{ transform:translateY(-50%) scale(.94); }
.cf__nav:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:3px; }
.cf__nav svg{ width:20px; height:20px; }

.cf__nav--prev{ inset-inline-start:clamp(6px, 1.6vw, 18px); }
.cf__nav--next{ inset-inline-end:clamp(6px, 1.6vw, 18px); }

.cf__nav--next svg{ transform:scaleX(-1); }
html[dir="rtl"] .cf__nav--next svg{ transform:none; }
html[dir="rtl"] .cf__nav--prev svg{ transform:scaleX(-1); }

.cf__dots{
  display:flex; justify-content:center; gap:10px;
  margin-top:calc(var(--cf-gap) - 8px);
}
.cf__dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  border:1px solid color-mix(in srgb, var(--text-dim) 60%, transparent);
  background:transparent; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, width .25s ease;
}
.cf__dot[aria-selected="true"]{
  width:24px; border-radius:999px;
  background:var(--switch-glow); border-color:var(--switch-glow);
}
.cf__dot:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:3px; }

@media (max-width:640px){
  .cf{ --cf-gap:18px; border-radius:22px; }

  .cf__card{
    width:min(68vw, 258px);
    border-radius:16px;
  }

  .cf__media{ aspect-ratio:16 / 9; }

  .cf__body{ padding:13px 15px 15px; }
  .cf__body h3{ font-size:15px; margin:0 0 8px; }
  .cf__body ul{ gap:5px; }
  .cf__body li{ font-size:12.5px; }

  .cf__card{ transform:
    translate(-50%, -50%)
    translateX(calc(var(--off) * var(--dir, 1) * 96%))
    rotateY(calc(var(--off) * var(--dir, 1) * -22deg))
    scale(calc(1 - var(--adist) * 0.18)); }

  .cf__card{ opacity:calc(1 - var(--adist) * 0.55); }
  .cf__card[data-active="true"]{ opacity:1; }

  .cf__nav{ width:38px; height:38px; }
}

@media (prefers-reduced-motion: reduce){
  .cf__card{ transition:none; }
  .cf__nav{ transition:none; }
}

.cta-footer{

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.cta-footer > .wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;

  width:100%;

  padding:72px 28px 0;
}

.cta-footer > .wrap::before{ content:""; flex:1; }

.cf-cta{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding:clamp(24px, 3vh, 40px) 0;
}

.em-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.63em;

  padding:.95em 1.58em; cursor:pointer; text-decoration:none; color:var(--text);
  font-weight:600; line-height:1; letter-spacing:.005em;

  font-size:clamp(13px, 1.1vw + 8.5px, .95rem);
  border-radius:999px;
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    conic-gradient(from var(--gradient-angle),
      transparent, var(--switch-glow) 7%, transparent 15%
    ) border-box;
  box-shadow:0 0 0 1px var(--border) inset;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  animation:gradient-angle 6s linear infinite;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s;
}

.em-ico{ width:1.75em; height:1.75em; flex:none; align-self:center;
  filter:url(#social-tint); transition:filter .25s ease; }
.tint-ink{ flood-color:var(--bg-2); }

html[dir="rtl"] .em-btn span{ transform:translateY(.085em); }

.em-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:var(--switch-glow); opacity:0; transition:opacity .25s ease;
}
.em-btn > *{ position:relative; z-index:1; }
.em-btn:hover, .em-btn:focus-visible{ transform:translateY(-2px); color:var(--bg-2); }
.em-btn:hover::before, .em-btn:focus-visible::before{ opacity:1; }
.em-btn:hover .em-ico, .em-btn:focus-visible .em-ico{ filter:url(#ink-tint); }
.em-btn:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:3px; }

@media (max-width:360px){
  .em-btn{ padding-inline:1.1em; gap:.5em; }
}

@media (prefers-reduced-motion: reduce){
  .em-btn, .em-btn::before, .em-ico{ transition:none; animation:none; }
}

footer{
  padding:16px 0 14px; border-top:1px solid var(--border);

  --f-name:clamp(14px, 1vw, 16px);
  --f-role:clamp(11.5px, .8vw, 12.5px);
  --f-copy:clamp(10.5px, .72vw, 11.5px);
  --f-lh:1.25;
  --f-gap:4px;
}

footer > .wrap{
  max-width:none;
  padding-inline:clamp(28px, 6vw, 120px);
}

.footer-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(14px, 2.2vw, 30px);
  padding-top:0;

  direction:ltr;
}
html[dir="rtl"] .footer-id{ direction:rtl; }

.footer-logo,
.footer-id,
.social-row{ justify-self:center; }

.footer-logo{
  width:50px; height:50px;
  border-radius:10px;
  overflow:hidden; flex-shrink:0;
}

.footer-logo img{ width:100%; height:100%; object-fit:cover; display:block; }

.footer-div{
  width:1px; flex-shrink:0;
  align-self:center;
  height:50px;
  background:var(--switch-glow);
  opacity:.62;
}

.footer-id{
  display:flex; flex-direction:column; gap:var(--f-gap);
  text-align:center; min-width:0;
}

.footer-id strong{
  font-size:var(--f-name); line-height:var(--f-lh);
}
.footer-id small{
  color:var(--text-dim);
  font-size:var(--f-role); line-height:var(--f-lh);
}

.footer-copy{
  margin:0;
  font-size:var(--f-copy); line-height:var(--f-lh);
  color:var(--text-dim); opacity:.72;
}

.social-row{ display:flex; gap:clamp(8px, .8vw, 12px); }

.social-row a{
  width:clamp(32px, 2.6vw, 38px); height:clamp(32px, 2.6vw, 38px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, transform .25s ease;
}
.social-ico{
  width:100%; height:100%; display:block;
  filter:url(#social-tint);
}
.social-row a:hover{ background:color-mix(in srgb, var(--switch-glow) 14%, transparent); transform:translateY(-2px); }
.social-row a:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:3px; }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.tint-flood{ flood-color:var(--switch-glow); }

@media (min-width:1024px) and (max-height:818px){
  :root{
    --portrait-w:min(
      max(160px, 63.6vw + 81.58vh - 822.6px),
    calc(100vw - 2*var(--side-w) - 2*var(--hero-gap-x) - 32px)
    );
  }
}

@media (max-width:1023px), (max-aspect-ratio: 5/4){

  html:not(.is-panel) .topnav{ padding:0; }
  html:not(.is-panel) .nav-inner{ display:flex; justify-content:space-between; }

  html:not(.is-panel) .nav-slot:first-child, html:not(.is-panel) .nav-slot:last-child{ width:auto; }

  html:not(.is-panel) .hero{
    overflow:clip; justify-content:flex-start; height:100dvh; min-height:100dvh;

    --hero-gap:clamp(14px, 30.9dvh - 194px, 22px);
  }

  html:not(.is-panel) .hero-grid{
    display:grid; grid-template-columns:1fr;

    grid-template-rows:var(--hero-gap) auto auto var(--hero-gap) minmax(0,1fr);

    flex:1; min-height:0; height:100%;

    row-gap:0;
    text-align:center; padding-top:var(--nav-h); padding-bottom:0;

    padding-inline:10px;
  }

  html:not(.is-panel) .hero-side.left, html:not(.is-panel) .hero-side.right{

    top:0;
    align-items:center; text-align:center; align-self:center; justify-self:center;
    width:100%; max-width:clamp(360px, 42dvh, 660px); margin:0 auto; grid-column:1;
  }
  html:not(.is-panel) .hero-side.left{ grid-row:2; }

  html:not(.is-panel) .hero-side.right{ grid-row:3; margin-top:16px; }

  html:not(.is-panel) .hero-greet, html:not(.is-panel) .hero-role-label{ font-size:clamp(14px, 1.5dvh, 22px); }
  html:not(.is-panel) .hero-name{ font-size:clamp(20px, 2.4dvh, 36px); }
  html:not(.is-panel) .hero-role{ font-size:clamp(20px, 2.4dvh, 36px); }

  html:not(.is-panel) .role-icon{ width:1em; height:1em; }

  html:not(.is-panel) .hero-portrait{
    grid-column:1; grid-row:5; justify-self:center;

    width:auto; height:100%; aspect-ratio:1728 / 2034;

    max-width:none; margin-top:0;

    max-height:117.7vw;

    align-self:end;

    min-height:0; min-width:0;
  }

  html:not(.is-panel) .hero-portrait img{
    position:relative; bottom:auto;
    width:100%; height:100%;
    object-fit:cover; object-position:center bottom;
  }
}

@media (max-width:700px){

  html:not(.is-panel) .hero-grid{
    grid-template-rows:minmax(var(--hero-gap), 1fr) auto auto minmax(var(--hero-gap), 1fr) auto;
  }
  html:not(.is-panel) .hero-portrait{
    height:117.7vw;

    max-height:calc(100dvh - var(--nav-h) - clamp(155px, 16dvh + 59px, 188px));
    align-self:end;
  }
}

@media (max-width:600px){

  html:not(.is-panel) .topnav{padding:0;}

  html:not(.is-panel) .lang-switch,
  html:not(.is-panel) .mode-switch,
  html:not(.is-panel) .theme-switch{ gap:6px; }

  html:not(.is-panel) .lang-switch button,
  html:not(.is-panel) .mode-switch button,
  html:not(.is-panel) .theme-switch button{ width:30px; height:30px; }

  html:not(.is-panel) .switch-thumb{ height:30px; }

  html:not(.is-panel) .nav-icon{ width:16px; height:16px; }
  .wrap{padding:0 18px;}
  footer > .wrap{ padding-inline:18px; }

  footer{ padding:13px 0 11px; }

  .footer-inner{
    grid-template-columns:auto auto minmax(0, 1fr);
    gap:10px;
  }

  .footer-inner{
    direction:inherit;

    max-width:min(100%, 330px);
    margin-inline:auto;
  }

  .footer-id{ text-align:start; justify-self:stretch; }

  .footer-logo{ justify-self:start; }

  .footer-div:last-of-type{ display:none; }

  .social-row{
    grid-column:1 / -1;
    justify-self:stretch;
    justify-content:space-between;
    direction:ltr;
  }
}

html.is-booting, html.is-booting body{ overflow:hidden; }

html.is-booting .hero-portrait{ animation-play-state:paused; }

.boot{

  --boot-bg:#050705;
  --boot-bg-2:#0a0f0a;
  --boot-green:#22b32d;
  --boot-green-dim:#1e6b24;

  position:fixed; inset:0;

  z-index:9999;

  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
  background:radial-gradient(ellipse at 50% 30%, var(--boot-bg-2), var(--boot-bg) 75%);

  font-family:var(--mono);
  color:var(--boot-green);
  transition:opacity .5s ease;
}

.boot.is-done{ opacity:0; pointer-events:none; }

.boot-crt{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.boot-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 20vw rgba(0,0,0,.85);
}

.boot-screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 48px);
  animation:bootFlicker 6s infinite;
}
@keyframes bootFlicker{
  0%,96%,100%{ filter:brightness(1); }
  97%{ filter:brightness(.93); }
  98%{ filter:brightness(1.03); }
}

.boot-stack{
  width:100%; max-width:760px;
  display:flex; flex-direction:column; align-items:center;
}

.boot-log{
  font-size:clamp(9px, 1.3vw, 12px);
  color:var(--boot-green-dim);
  line-height:1.6; margin-bottom:14px;
  text-align:left; align-self:flex-start;
  min-height:3.4em;
}
.boot-log .boot-k{ color:var(--boot-green); opacity:.85; }
.boot-log .boot-line{ opacity:0; white-space:pre; }
.boot-log .boot-line.show{ opacity:1; }

.boot-art-wrap{
  width:100%; margin-bottom:8px;
  display:flex; justify-content:center;
  overflow-x:auto; scrollbar-width:none;
}
.boot-art-wrap::-webkit-scrollbar{ display:none; }
.boot-art{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:flex-start;
}

#bootAscii2{
  transform:scaleX(1.105263157894737);
  transform-origin:left top;
  margin-top:2px;
}
.boot-ascii{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(4.2px, 1.85vw, 15px);
  line-height:1.05; letter-spacing:0; white-space:pre;
  color:var(--boot-green);
  opacity:0; transition:opacity 180ms ease;
}
.boot-ascii.show{ opacity:1; }

.boot-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 1.5px,
    transparent 1.5px, transparent 4px);
  mix-blend-mode:multiply;
  opacity:0; transition:opacity 180ms ease;
}
.boot-art.show::after{ opacity:1; }

.boot-subtitle{
  font-size:clamp(9px, 1.5vw, 13px);
  color:var(--boot-green-dim);
  letter-spacing:.14em; text-align:center;
  margin:14px 0 30px;
  opacity:0; transition:opacity 400ms ease;
}
.boot-subtitle.show{ opacity:1; }

.boot-tasklog{
  width:100%; text-align:left;
  font-size:clamp(9px, 1.5vw, 13px);
  line-height:1.9;
  min-height:12em;
  color:var(--boot-green-dim);
}
.boot-tasklog .boot-row{
  opacity:0; transform:translateY(2px);
  transition:opacity 180ms ease, transform 180ms ease;
}
.boot-tasklog .boot-row.show{ opacity:1; transform:translateY(0); }
.boot-tasklog .boot-t,
.boot-tasklog .boot-ok{ color:var(--boot-green); }
.boot-tasklog .boot-task{ color:var(--boot-green-dim); }

.boot-bar-wrap{ width:100%; display:flex; justify-content:center; margin-top:18px; }

.boot-bar{
  font-family:var(--mono);
  font-size:clamp(4.2px, 1.85vw, 15px);
  line-height:1.05; letter-spacing:0; white-space:pre;
}
.boot-bar .boot-b,
.boot-bar .boot-fill,
.boot-bar .boot-pct{ color:var(--boot-green); }
.boot-bar .boot-empty{ color:var(--boot-green-dim); opacity:.5; }

.boot-prompt{
  width:100%; margin-top:16px; text-align:left;
  font-size:clamp(9px, 1.5vw, 13px);
  color:var(--boot-green);
}
.boot-cursor{
  display:inline-block; width:.55em; height:1em; margin-left:6px;
  background:var(--boot-green); vertical-align:-.15em;
  animation:bootBlink 1s steps(1) infinite;
}
@keyframes bootBlink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .boot-screen{ animation:none; }
  .boot-cursor{ animation:none; }
  .boot-ascii, .boot-subtitle, .boot-art::after,
  .boot-tasklog .boot-row{ transition:none; }
}

.dotnav{
  --dot-size:9px;
  position:fixed;
  inset-inline-end:14px;
  top:50%; transform:translateY(-50%);
  z-index:45;
  width:31px; height:85px;
  padding:0; margin:0;
}

html[dir="rtl"] .dotnav{ transform:translateY(-50%) scaleX(-1); }

.dotnav-arc{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}

.dotnav-arc path{ fill:none; stroke-linecap:round; }
.dotnav-arc-track{ stroke-width:1.25; }
.dotnav-arc-fill{ stroke-width:2; }
.dotnav-arc-track{ stroke:color-mix(in srgb, var(--text-dim) 26%, transparent); }

.dotnav-head{ fill:var(--switch-glow); stroke:none; }
.dotnav-head-ring{
  fill:none; stroke:var(--switch-glow); stroke-width:1.25;
  opacity:.55;
}

.dotnav-pulse{
  fill:none; stroke:var(--switch-glow); stroke-width:1.25;
  opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.dotnav-pulse{ animation:dotnavPulse 2.2s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes dotnavPulse{

  0%  { transform:scale(.55); opacity:.6; }
  65% { transform:scale(2.2); opacity:0; }
  100%{ transform:scale(2.2); opacity:0; }
}

.dotnav-arc-fill{
  stroke:var(--switch-glow);
  stroke-dasharray:var(--arc-len, 0);
  stroke-dashoffset:var(--arc-offset, 0);
  transition:stroke-dashoffset .18s linear;
}

.dotnav-dot{
  position:absolute;
  width:var(--dot-size); height:var(--dot-size);
  padding:0; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--text-dim) 55%, transparent);
  background:transparent; cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease;
}
.dotnav-dot:nth-of-type(1){ left:22px;  top:0; }
.dotnav-dot:nth-of-type(2){ left:2.7px; top:23px; }
.dotnav-dot:nth-of-type(3){ left:2.7px; top:53px; }
.dotnav-dot:nth-of-type(4){ left:22px;  top:76px; }

.dotnav-dot[data-passed="true"], .dotnav-dot[aria-current="true"]{
  background:var(--switch-glow); border-color:var(--switch-glow);
}
.dotnav-dot:hover{ border-color:var(--switch-glow); }
.dotnav-dot:focus-visible{ outline:2px solid var(--switch-glow); outline-offset:4px; }

.dotnav-label{
  position:absolute; top:50%; right:calc(100% + 10px);
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap; font-size:11.5px; line-height:1; color:var(--text);
  padding:6px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid var(--border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

html[dir="rtl"] .dotnav-label{
  transform:translateY(-50%) translateX(6px) scaleX(-1);
  font-family:var(--font-ar);
}

.dotnav-dot:hover .dotnav-label,
.dotnav-dot.is-hover .dotnav-label,
.dotnav-dot:focus-visible .dotnav-label{
  opacity:1; transform:translateY(-50%) translateX(0);
}
html[dir="rtl"] .dotnav-dot:hover .dotnav-label,
html[dir="rtl"] .dotnav-dot.is-hover .dotnav-label,
html[dir="rtl"] .dotnav-dot:focus-visible .dotnav-label{
  opacity:1; transform:translateY(-50%) translateX(0) scaleX(-1);
}

@media (max-width:899px){ .dotnav{ display:none; } }
@media (min-width:900px) and (max-width:1399px){
  .dotnav{
    inset-inline-end:6px;
    transform:translateY(-50%) scale(.7);
    transform-origin:center var(--dot-origin, right);
  }
  html[dir="rtl"] .dotnav{ transform:translateY(-50%) scaleX(-1) scale(.7); transform-origin:center right; }

  .dotnav-label{ display:none; }
}
html.is-booting .dotnav{ opacity:0; pointer-events:none; }

.dotnav{ transition:opacity .45s ease; }
.dotnav.is-idle{ opacity:0; pointer-events:none; }

.dotnav.is-kbd-focus{ opacity:1 !important; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .dotnav, .dotnav-dot, .dotnav-label, .dotnav-arc-fill, .dotnav-head, .dotnav-head-ring{ transition:none; }

  .dotnav-pulse{ animation:none; opacity:0; }
}

html.is-panel, html.is-panel body{ overflow:hidden; height:100%; }
html.is-panel .dotnav,
html.is-panel #build,
html.is-panel #skills,
html.is-panel #cta,
html.is-panel .scroll-cue,
html.is-panel #bootScreen{ display:none !important; }

html.is-panel *{ pointer-events:none !important; }

html.is-panel{
  --portrait-w:clamp(380px, 60.2vw - 220px, 850px);

  --side-w:clamp(230px, 13.5vw + 100px, 360px);
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    @keyframes scrollFadeOut{ from{ opacity:1; } to{ opacity:0; } }
    @keyframes scrollFadeIn { from{ opacity:0; } to{ opacity:1; } }
    @keyframes scrollCrossFade{
      0%{ opacity:0; }  28%{ opacity:1; }
      65%{ opacity:1; } 82%{ opacity:0; }
      100%{ opacity:0; }
    }

    html:not(.is-panel) header.hero{
      animation:scrollFadeOut linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 65%;
    }

    html:not(.is-panel) #build{
      animation:scrollFadeOut linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 65%;
    }

    html:not(.is-panel) #skills{
      animation:scrollCrossFade linear both;
      animation-timeline:view();
      animation-range:cover;
    }

    html:not(.is-panel) #cta{
      animation:scrollFadeIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
  }
}