/* =========================================================
   عمر عصفر · Omar Osfur — personal site
   Fonts are self-hosted (no outside requests) so the site
   loads fast and reliably everywhere, including Syria.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-ar-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-ar-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-la-800.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-ar-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-ar-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-la-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-la-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-la-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Anton";src:url(../fonts/anton-la-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-la-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-la-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-la-800.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jbmono-la-500.woff2) format("woff2");font-weight:400 500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#111013;          /* coach page background */
  --bg-2:#141317;
  --card:#19181d;
  --card-2:#1f1d24;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --text:#f6f4f8;
  --muted:#aaa5b3;
  --dim:#8f8a98;

  --red:#F93D3E;          /* coach — offers */
  --pink:#EB377D;         /* coach — education series */
  --blue:#1E90FF;         /* engineer — Spark Code */
  --navy:#0047AB;

  --grad-coach:linear-gradient(135deg,#F93D3E 0%,#EB377D 100%);
  --grad-code:linear-gradient(135deg,#1E90FF 0%,#0047AB 100%);
  --grad-both:linear-gradient(90deg,#F93D3E 0%,#EB377D 40%,#1E90FF 100%);

  --radius:22px;
  --maxw:1200px;
  --accent:var(--red);

  --f-display:"Alexandria","Tajawal",system-ui,sans-serif;
  --f-body:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-latin:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[lang="en"]{
  --f-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
html[lang="en"] body{font-size:17px;line-height:1.65}
img,svg{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}
p{margin:0}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.wrap{width:min(var(--maxw),calc(100% - 40px));margin-inline:auto}
.ltr{direction:ltr;unicode-bidi:isolate}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:100;background:#fff;color:#111;padding:10px 18px;border-radius:10px;font-weight:700}
.skip:focus{top:14px}

/* icons (inline sprite) */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .i-flip{transform:scaleX(-1)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(17,16,19,.55);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease}
.site-header.scrolled{background:rgba(17,16,19,.86);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;font-family:var(--f-latin);font-size:21px;line-height:1;letter-spacing:.09em;direction:ltr;color:#fff}
.brand::after{content:"";display:block;height:3px;width:100%;border-radius:3px;background:var(--grad-coach)}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-size:16px;font-weight:500;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-end{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:52px;padding-inline:14px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-latin);font-size:14px;letter-spacing:.12em;color:#fff;transition:border-color .2s,background-color .2s}
.lang:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.lang.ar{font-family:"Alexandria","Tajawal",sans-serif;font-weight:800;letter-spacing:0;font-size:14px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:16px;border-radius:999px;background:var(--grad-coach);font-weight:700;font-size:14.5px;color:#fff;box-shadow:0 8px 24px -10px rgba(249,61,62,.8)}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:420px){.nav-cta{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(36px,7vh,88px) clamp(56px,9vh,96px)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.glow{position:absolute;border-radius:50%;will-change:transform}
.glow-red{width:64vmax;height:64vmax;inset-inline-start:-14vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(249,61,62,.40),rgba(235,55,125,.16) 48%,transparent 72%);animation:drift 19s ease-in-out infinite alternate}
.glow-blue{width:60vmax;height:60vmax;inset-inline-end:-22vmax;bottom:-34vmax;background:radial-gradient(closest-side,rgba(30,144,255,.34),rgba(0,71,171,.16) 48%,transparent 72%);animation:drift 23s ease-in-out infinite alternate-reverse}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 38%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 75% 65% at 50% 38%,#000 15%,transparent 72%)}
.noise{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vmax,3vmax,0) scale(1.1)}}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.86fr);align-items:center;gap:clamp(36px,6vw,84px)}
.eyebrow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.tag{display:inline-flex;align-items:center;gap:9px;height:36px;padding-inline:15px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);font-size:15px;font-weight:500;color:#e9e6ee}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-red{background:var(--red);box-shadow:0 0 0 4px rgba(249,61,62,.16),0 0 14px rgba(249,61,62,.9)}
.dot-blue{background:var(--blue);box-shadow:0 0 0 4px rgba(30,144,255,.16),0 0 14px rgba(30,144,255,.9)}

.name{margin:0;white-space:nowrap;font-family:var(--f-display);font-weight:900;font-size:clamp(54px,8.6vw,132px);line-height:1.25;letter-spacing:0;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.45)}
html[lang="en"] .name{font-family:var(--f-latin);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(64px,9.3vw,140px);line-height:.98}
html[lang="en"] .name-alt{text-align:left}
.name-bar{display:block;height:6px;width:min(340px,58%);margin-top:20px;border-radius:6px;background:var(--grad-both)}
.name-alt{margin-top:16px;font-family:"Alexandria","Tajawal",sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.4;color:#d8d3df}
.tagline{margin-top:26px;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.5vw,33px);line-height:1.5;color:#fff}
html[lang="en"] .tagline{letter-spacing:-.02em;line-height:1.25}
.t-code{color:var(--blue)}
.t-coach{color:var(--red);white-space:nowrap}
.lead{margin-top:16px;max-width:58ch;color:var(--muted);font-size:clamp(17px,1.35vw,19px)}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding-inline:28px;border-radius:999px;font-weight:700;font-size:17px;line-height:1.2;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.btn .i{width:19px;height:19px;transition:transform .25s ease}
.btn:hover .i{transform:translateX(4px)}
[dir="rtl"] .btn:hover .i-flip{transform:scaleX(-1) translateX(4px)}
.btn-red{background:var(--grad-coach);color:#fff;box-shadow:0 14px 34px -14px rgba(249,61,62,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(249,61,62,1),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-blue{background:rgba(30,144,255,.08);border:1px solid rgba(30,144,255,.6);color:#fff}
.btn-blue:hover{transform:translateY(-2px);background:rgba(30,144,255,.18);border-color:var(--blue)}

.socials{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;margin:34px 0 0;padding:0;font-size:15.5px}
.socials a{display:inline-flex;align-items:center;gap:8px;color:#e4e0ea;padding-block:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.socials a:hover{color:#fff;border-bottom-color:var(--line-2)}
.socials .i{width:15px;height:15px;color:var(--dim)}
.handle{font-family:var(--f-mono);font-size:13px;color:var(--dim);direction:ltr;unicode-bidi:isolate}

/* portrait card */
.portrait{position:relative;margin:0;justify-self:center;width:min(100%,430px)}
.portrait-card{position:relative;aspect-ratio:4/5;border-radius:30px;overflow:hidden;display:grid;place-items:center;align-content:center;background:radial-gradient(120% 75% at 50% 0%,#26232c 0%,#161519 58%,#121115 100%);box-shadow:0 50px 90px -40px rgba(0,0,0,.95)}
.portrait-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(155deg,rgba(249,61,62,.95),rgba(235,55,125,.25) 34%,rgba(30,144,255,.25) 66%,rgba(30,144,255,.95));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:2}
.portrait-card::after{content:"";position:absolute;inset:0;pointer-events:none}
.portrait-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;direction:ltr;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.chip-red{top:26px;inset-inline-end:-16px;background:rgba(26,14,17,.8);border:1px solid rgba(249,61,62,.75);color:#ffd9da}
.chip-blue{bottom:30px;inset-inline-start:-16px;background:rgba(12,18,32,.8);border:1px solid rgba(30,144,255,.75);color:#d8ebff}
.portrait.has-img .chip-blue{bottom:104px}


/* portrait with a real photo */
.portrait-card.has-photo{display:block;background:#141317}
.portrait-card.has-photo img{object-fit:cover;object-position:var(--pos,50% 30%);transform:scale(1.001)}
.portrait-card.has-photo::after{z-index:1;background:linear-gradient(180deg,transparent 52%,rgba(17,16,19,.55) 74%,rgba(17,16,19,.94) 100%)}
.portrait-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 20px 26px;direction:ltr}
.portrait-cap b{font-family:var(--f-latin);font-weight:400;font-size:24px;letter-spacing:.2em;line-height:1;color:#fff}
.portrait-cap span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.24em;color:#c9c4d1}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(52px,8vh,88px);border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);list-style:none;padding:0}
.stat{display:flex;flex-direction:column;gap:6px;padding:24px 28px}
.stat+.stat{border-inline-start:1px solid var(--line)}
.stat b{font-family:var(--f-latin);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1.1;letter-spacing:.02em;color:#fff;direction:ltr;unicode-bidi:isolate}
.stat b.ar{font-family:"Alexandria","Tajawal",sans-serif;font-weight:800;letter-spacing:0;line-height:1.3;font-size:clamp(26px,2.6vw,36px)}
.stat span{font-size:15px;line-height:1.5;color:var(--muted)}
.stat:nth-child(1) b{color:#fff}
.stat:nth-child(2) b{background:var(--grad-coach);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:2px}
.stat:nth-child(3) b{background:var(--grad-code);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:2px}

/* ---------- Sections ---------- */
.section{position:relative;padding-block:clamp(80px,12vh,140px);border-top:1px solid var(--line)}
.coach{--accent:var(--red)}
.engineer,.spark{--accent:var(--blue)}
.section::before{content:"";position:absolute;inset-inline:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55}
.sec-head{max-width:900px}
.sec-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-num{font-family:var(--f-latin);font-size:16px;letter-spacing:.16em;color:var(--dim);direction:ltr}
.sec-num b{font-weight:400;color:var(--accent)}
.kicker{display:inline-flex;align-items:center;height:32px;padding-inline:14px;border-radius:999px;font-weight:700;font-size:15px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,4.5vw,60px);line-height:1.35;letter-spacing:0}
html[lang="en"] h2{line-height:1.08;letter-spacing:-.03em}
h2 .accent{color:var(--accent)}
h2,.tagline,.sec-lead,.lead,.contact-title{text-wrap:balance}
.sec-lead{margin-top:22px;max-width:62ch;color:var(--muted);font-size:clamp(17px,1.35vw,19px)}
.sec-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px}
.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:#fff;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .2s,color .2s}
.link-more:hover{color:var(--accent);border-color:var(--accent)}
.link-more .i{width:16px;height:16px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.card{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;padding:30px 28px 32px;border-radius:var(--radius);background:radial-gradient(520px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 11%,transparent),transparent 42%),var(--card);border:1px solid var(--line);transition:border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:24px;border-radius:15px;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.ico .i{width:25px;height:25px}
.card h3{margin:0 0 10px;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.45}
html[lang="en"] .card h3{letter-spacing:-.015em;line-height:1.3}
.card p{color:var(--muted);font-size:16.5px;line-height:1.75}
html[lang="en"] .card p{line-height:1.6}
.card .link-more{margin-top:auto;padding-top:22px;border-bottom:0;align-self:flex-start}
.card .link-more span{border-bottom:1px solid var(--line-2);padding-bottom:3px}
.card .link-more:hover span{border-color:var(--accent)}

/* coach gallery */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.shot{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);background:linear-gradient(180deg,transparent 70%,rgba(17,16,19,.35));pointer-events:none}

/* engineer */
.eng-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:60px}
.timeline{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--line-2)}
.timeline li{position:relative;padding:0 30px 30px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;inset-inline-start:-6px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 5px rgba(30,144,255,.12)}
.timeline li.key::before{background:var(--blue);box-shadow:0 0 0 5px rgba(30,144,255,.18),0 0 18px rgba(30,144,255,.9)}
.timeline h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.6}
html[lang="en"] .timeline h3{letter-spacing:-.01em;line-height:1.45}
.timeline p{margin-top:4px;color:var(--muted);font-size:16.5px;line-height:1.75}
.code-card{position:sticky;top:104px;border-radius:var(--radius);overflow:hidden;background:#0c0b0f;border:1px solid var(--line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(30,144,255,.06),0 0 80px -30px rgba(30,144,255,.35)}
.code-top{display:flex;align-items:center;gap:8px;padding:15px 18px;border-bottom:1px solid var(--line);direction:ltr}
.code-top i{width:11px;height:11px;border-radius:50%}
.code-top i:nth-child(1){background:#F93D3E}
.code-top i:nth-child(2){background:#EB377D;opacity:.65}
.code-top i:nth-child(3){background:#1E90FF}
.code-top span{margin-inline-start:10px;font-family:var(--f-mono);font-size:12.5px;color:var(--dim)}
.code{margin:0;padding:24px 24px 28px;direction:ltr;text-align:left;font-family:var(--f-mono);font-size:14.5px;line-height:1.95;color:#d9d6e0;overflow-x:auto;white-space:pre;tab-size:2}
.code .k{color:#ff6b9a}
.code .s{color:#7cc4ff}
.code .p{color:#f4f1f8}
.code .f{color:#ffffff;font-weight:500}
.code .c{color:#6f6a7a}
.code .n{color:#ff9d6b}

/* featured project */
.project{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(24px,4vw,56px);margin-top:56px;padding:clamp(18px,2.4vw,28px);border-radius:28px;border:1px solid var(--line-2);background:radial-gradient(120% 120% at 0% 0%,rgba(249,61,62,.12),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(30,144,255,.14),transparent 55%),var(--card)}
.project-media{margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0c0b0f}
.project-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.project-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-inline-end:clamp(0px,2vw,24px)}
.project-body h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1.3}
html[lang="en"] .project-body h3{letter-spacing:-.03em;line-height:1.1}
.project-body p{color:var(--muted);font-size:clamp(16.5px,1.3vw,18.5px);max-width:52ch}
.project .kicker{--accent:var(--red)}
.project .link-more{margin-top:6px}

/* spark */
.spark-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-latin);letter-spacing:.06em;font-size:15px;color:#cfe5ff;direction:ltr}

/* ---------- Contact ---------- */
.contact{--accent:var(--pink);overflow:hidden}
.contact-title{font-family:var(--f-display);font-weight:900;font-size:clamp(56px,9vw,128px);line-height:1.1}
html[lang="en"] .contact-title{font-family:var(--f-latin);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:0}
.contact-title .dot-end{color:var(--red)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:48px}
.tile{--mx:50%;--my:0%;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:230px;padding:34px 34px 30px;border-radius:28px;border:1px solid var(--line-2);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.95;transition:opacity .3s}
.tile-red::before{background:radial-gradient(600px circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 45%),linear-gradient(140deg,rgba(249,61,62,.30),rgba(235,55,125,.10) 60%,rgba(17,16,19,.4))}
.tile-blue::before{background:radial-gradient(600px circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 45%),linear-gradient(140deg,rgba(30,144,255,.30),rgba(0,71,171,.12) 60%,rgba(17,16,19,.4))}
.tile{isolation:isolate}
.tile:hover{transform:translateY(-5px)}
.tile-red:hover{border-color:rgba(249,61,62,.7);box-shadow:0 30px 60px -30px rgba(249,61,62,.7)}
.tile-blue:hover{border-color:rgba(30,144,255,.7);box-shadow:0 30px 60px -30px rgba(30,144,255,.7)}
.tile-kicker{font-weight:700;font-size:15px;color:#fff;opacity:.85}
.tile-title{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.35;color:#fff}
html[lang="en"] .tile-title{letter-spacing:-.025em;line-height:1.15}
.tile-handle{margin-top:auto;font-family:var(--f-mono);font-size:14px;color:rgba(255,255,255,.75);direction:ltr;unicode-bidi:isolate;align-self:flex-start}
.tile-arrow{position:absolute;inset-inline-end:28px;bottom:26px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s}
.tile-arrow .i{width:22px;height:22px;color:#fff}
.tile:hover .tile-arrow{transform:rotate(-45deg);background:rgba(255,255,255,.2)}
[dir="rtl"] .tile:hover .tile-arrow{transform:rotate(45deg)}

.profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:28px 0 0;padding:0}
.profiles a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);transition:border-color .2s,background-color .2s}
.profiles a:hover{border-color:var(--line-2);background:var(--card-2)}
.profiles .pl{display:flex;flex-direction:column;line-height:1.4}
.profiles .pl b{font-weight:700;font-size:16px}
.profiles .i{width:17px;height:17px;color:var(--dim)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:34px 40px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.foot p{color:var(--dim);font-size:15px}

/* ---------- Reveal ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .name{font-size:clamp(54px,14vw,120px)}
  html[lang="en"] .name{font-size:clamp(62px,16.5vw,140px)}
  .portrait{width:min(100%,340px);margin-top:8px}
    .eng-grid{grid-template-columns:1fr}
  .code-card{position:relative;top:auto}
  .portrait.has-img{order:-1;width:min(100%,320px)}
  .project{grid-template-columns:1fr}
  .project-media{max-width:420px}
  .cards{grid-template-columns:1fr}
  .profiles{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:20px 20px}
  .stat:nth-child(3){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .tiles{grid-template-columns:1fr}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .shot{flex:0 0 76%;scroll-snap-align:center}
  .tile{min-height:200px;padding:28px 26px 26px}
  .btn{flex:1 1 auto}
  .chip-red{inset-inline-end:-6px}
  .chip-blue{inset-inline-start:-6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .glow{animation:none}
  .btn,.card,.tile,.tile-arrow,.shot img{transition:none}
}