/* =========================================================
   Sabawoon Akhunzada — AM Digital
   Design v2 — dark hero / light content, orange + navy accents
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@500;600;700&display=swap');

:root{
  --navy-950:#080D17;
  --navy-900:#0B1220;
  --navy-800:#111A2E;
  --navy-700:#1B2740;
  --orange-500:#F7931E;
  --orange-400:#FBA83E;
  --orange-600:#DD7A08;
  --cyan-400:#22D3EE;
  --ink-900:#0F172A;
  --ink-600:#475569;
  --ink-400:#94A3B8;
  --paper-0:#FFFFFF;
  --paper-50:#F8FAFC;
  --paper-100:#F1F5F9;
  --border:#E2E8F0;
  --radius-lg:22px;
  --radius-md:14px;
  --shadow-soft:0 20px 50px -20px rgba(15,23,42,.25);
  --font-head:'Poppins', 'Noto Sans Arabic', sans-serif;
  --font-body:'Inter', 'Noto Sans Arabic', sans-serif;
}

:root[data-theme="dark"]{
  --paper-0:#0B1220;
  --paper-50:#0F172A;
  --paper-100:#131F35;
  --border:#233047;
  --ink-900:#F1F5F9;
  --ink-600:#B6C2D9;
  --ink-400:#7C8CA8;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.15; color:var(--ink-900);}
button{font-family:inherit; cursor:pointer;}

.container{width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px;}
.section{padding:96px 0;}
.section-dark{background:var(--navy-900); color:#E2E8F0;}
.section-dark h2, .section-dark h3{color:#fff;}

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--orange-500); margin-bottom:14px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--orange-500); display:inline-block;}

.section-title{font-size:clamp(28px,4vw,42px); font-weight:700; max-width:640px;}
.section-head{margin-bottom:52px;}
.section-head.center{text-align:center; margin-inline:auto;}
.section-head.center .section-title{margin-inline:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--orange-500); color:#fff; box-shadow:0 12px 28px -10px rgba(247,147,30,.55);}
.btn-primary:hover{background:var(--orange-600);}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.25); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--ink-900);}
.btn-outline:hover{border-color:var(--orange-500); color:var(--orange-500);}
.btn-block{width:100%;}

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; inset-inline:0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(8,13,23,.72); border-bottom:1px solid rgba(255,255,255,.08);
}
.navbar .container{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; color:#fff; font-size:17px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px;
}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{color:#CBD5E1; font-size:14.5px; font-weight:500; transition:color .15s;}
.nav-links a:hover{color:#fff;}
.nav-actions{display:flex; align-items:center; gap:10px;}

.icon-btn{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.1); flex:none;
}
.icon-btn:hover{background:rgba(255,255,255,.16);}

.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:11px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.1); font-size:13.5px; font-weight:600;
}
.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:160px;
  background:var(--navy-800); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:6px;
  box-shadow:var(--shadow-soft); display:none; flex-direction:column; gap:2px; z-index:50;
}
.lang-switch.open .lang-menu{display:flex;}
.lang-menu a{
  padding:10px 12px; border-radius:8px; font-size:14px; color:#E2E8F0; display:flex; justify-content:space-between;
}
.lang-menu a:hover{background:rgba(255,255,255,.08);}
.lang-menu a.active{color:var(--orange-400); font-weight:700;}

.nav-toggle{display:none; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); align-items:center; justify-content:center; color:#fff;}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:170px 0 120px; background:var(--navy-950); color:#fff; overflow:hidden;
}
.hero::before, .hero::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(110px); opacity:.35; z-index:0;
}
.hero::before{background:var(--orange-500); top:-160px; inset-inline-end:-140px;}
.hero::after{background:var(--cyan-400); bottom:-200px; inset-inline-start:-160px; opacity:.18;}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(247,147,30,.12); border:1px solid rgba(247,147,30,.35); color:var(--orange-400);
  font-size:13.5px; font-weight:600; margin-bottom:22px;
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--orange-500); box-shadow:0 0 0 4px rgba(247,147,30,.25);}
.hero h1{font-size:clamp(32px,4.6vw,54px); font-weight:800; letter-spacing:-.02em; margin-bottom:22px; color:#fff;}
.hero h1 .hl{color:var(--orange-500);}
.hero p.lead{font-size:17.5px; color:#B6C2D9; max-width:560px; margin-bottom:34px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

.hero-photo-wrap{position:relative; display:flex; justify-content:center; min-height:380px;}
.hero-photo-shape{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  width:340px; height:340px; z-index:0;
  background:linear-gradient(135deg, var(--orange-500), var(--orange-600));
  border-radius:48% 52% 62% 38% / 44% 40% 60% 56%;
  animation:blobMove 9s ease-in-out infinite;
}
@keyframes blobMove{
  0%,100%{ border-radius:48% 52% 62% 38% / 44% 40% 60% 56%; }
  50%{ border-radius:62% 38% 45% 55% / 55% 60% 40% 45%; }
}
.hero-photo-ring{
  position:absolute; z-index:1; bottom:40px; left:50%; transform:translateX(-50%);
  width:300px; height:300px; border-radius:50%;
  border:6px solid rgba(255,255,255,.12); box-shadow:var(--shadow-soft); background:var(--navy-800);
}
.hero-photo{
  position:absolute; z-index:2; bottom:40px; left:50%; transform:translateX(-50%);
  width:300px; height:auto; max-width:none;
}
/* Body layer: clipped to the same circle as .hero-photo-shape, so the torso
   sits neatly inside the ring — matches the circle exactly (center at
   H - C/2 in the image's own box, radius C/2, where H = rendered photo
   height and C = circle diameter). */
/* Both layers below share identical arc vertices along their common edge
   (polygon, not circle()) so the two clip-paths rasterize in lockstep with
   no anti-aliasing seam between them. */
.hero-photo-body{ clip-path:polygon(0px 199.9px, 10px 168.3px, 20px 149.3px, 30px 135.1px, 40px 123.7px, 50px 114.2px, 60px 106.3px, 70px 99.6px, 80px 94px, 90px 89.3px, 100px 85.4px, 110px 82.3px, 120px 80px, 130px 78.3px, 140px 77.3px, 150px 77px, 160px 77.3px, 170px 78.3px, 180px 80px, 190px 82.3px, 200px 85.4px, 210px 89.3px, 220px 94px, 230px 99.6px, 240px 106.3px, 250px 114.2px, 260px 123.7px, 270px 135.1px, 280px 149.3px, 290px 168.3px, 300px 199.9px, 300px 260.1px, 290px 291.7px, 280px 310.7px, 270px 324.9px, 260px 336.3px, 250px 345.8px, 240px 353.7px, 230px 360.4px, 220px 366px, 210px 370.7px, 200px 374.6px, 190px 377.7px, 180px 380px, 170px 381.7px, 160px 382.7px, 150px 383px, 140px 382.7px, 130px 381.7px, 120px 380px, 110px 377.7px, 100px 374.6px, 90px 370.7px, 80px 366px, 70px 360.4px, 60px 353.7px, 50px 345.8px, 40px 336.3px, 30px 324.9px, 20px 310.7px, 10px 291.7px, 0px 260.1px); }
/* Head layer: the same image again, clipped to reveal only the portion
   above the circle's curve (the head/hair breaking out of the frame).
   A polygon tracing the circle's own arc is used instead of a flat cut,
   so the two layers meet exactly along the circle boundary with no seam. */
.hero-photo-head{
  clip-path:polygon(0px 0px, 300px 0px, 300px 230px, 290px 176.1px, 280px 155.2px, 270px 140px, 260px 128px, 250px 118.2px, 240px 110px, 230px 103.1px, 220px 97.3px, 210px 92.5px, 200px 88.6px, 190px 85.4px, 180px 83px, 170px 81.3px, 160px 80.3px, 150px 80px, 140px 80.3px, 130px 81.3px, 120px 83px, 110px 85.4px, 100px 88.6px, 90px 92.5px, 80px 97.3px, 70px 103.1px, 60px 110px, 50px 118.2px, 40px 128px, 30px 140px, 20px 155.2px, 10px 176.1px, 0px 230px);
}
.hero-photo-placeholder{ clip-path:circle(150px at 150px 150px); }
.hero-photo-badge{
  position:absolute; z-index:3; bottom:10px; inset-inline-start:calc(50% - 170px);
  background:var(--navy-800); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  padding:14px 18px; box-shadow:var(--shadow-soft); text-align:center; min-width:104px;
}
.hero-photo-badge b{display:block; font-family:var(--font-head); font-size:24px; color:var(--orange-400);}
.hero-photo-badge span{font-size:11.5px; color:#94A3B8;}

.hero-stat-row{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px;}
.hero-stat{background:var(--navy-800); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:18px; text-align:center;}
.hero-stat b{display:block; font-size:26px; font-family:var(--font-head); color:#fff;}
.hero-stat span{font-size:12px; color:#94A3B8;}

/* ---------- Services grid ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}

.service-card{
  background:var(--paper-50); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:transparent;}
.service-icon{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(247,147,30,.16), rgba(34,211,238,.14)); color:var(--orange-500);
  margin-bottom:18px;
}
.service-card h3{font-size:19px; margin-bottom:10px;}
.service-card p{color:var(--ink-600); font-size:14.5px;}

/* ---------- Products ---------- */
.product-card{
  background:var(--navy-800); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:14px; transition:transform .2s ease, border-color .2s ease;
}
.product-card:hover{transform:translateY(-4px); border-color:rgba(247,147,30,.4);}
.tag-pill{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; background:rgba(34,211,238,.12); color:var(--cyan-400);
}
.product-card h3{color:#fff; font-size:20px;}
.product-card p{color:#94A3B8; font-size:14.5px; flex:1;}
.product-link{display:inline-flex; align-items:center; gap:8px; color:var(--orange-400); font-weight:600; font-size:14.5px;}
.product-link .arrow{transition:transform .15s;}
.product-card:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .product-card:hover .arrow{transform:translateX(-4px);}

/* ---------- Timeline ---------- */
.timeline{position:relative; max-width:780px; margin-inline:auto;}
.timeline::before{content:""; position:absolute; inset-inline-start:19px; top:6px; bottom:6px; width:2px; background:var(--border);}
.timeline-item{position:relative; padding-inline-start:56px; padding-bottom:40px;}
[dir="rtl"] .timeline-item{padding-inline-start:0; padding-inline-end:56px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; inset-inline-start:10px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--paper-0); border:3px solid var(--orange-500);
}
[dir="rtl"] .timeline-dot{inset-inline-start:auto; inset-inline-end:10px;}
.timeline-tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--orange-500);}
.timeline-item h3{font-size:19px; margin:6px 0 8px;}
.timeline-item p{color:var(--ink-600); font-size:14.5px;}

/* ---------- Experience tabs ---------- */
.tab-switch{display:inline-flex; background:var(--paper-100); border-radius:999px; padding:5px; margin-bottom:36px;}
.tab-switch button{
  border:none; background:transparent; padding:10px 24px; border-radius:999px; font-weight:600; font-size:14.5px; color:var(--ink-600);
}
.tab-switch button.active{background:var(--paper-0); color:var(--ink-900); box-shadow:0 4px 14px rgba(15,23,42,.08);}
.resume-list{display:none; flex-direction:column; gap:18px;}
.resume-list.active{display:flex;}
.resume-item{
  display:flex; justify-content:space-between; gap:20px; padding:22px 24px; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--paper-50);
}
.resume-item .ri-main h3{font-size:17px; margin-bottom:4px;}
.resume-item .ri-org{color:var(--orange-500); font-weight:600; font-size:14px; margin-bottom:8px;}
.resume-item p{color:var(--ink-600); font-size:14px;}
.resume-item .ri-period{font-size:13px; font-weight:600; color:var(--ink-400); white-space:nowrap;}

/* ---------- Skills + Experience split ---------- */
.skills-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start;}
.skill-bar{margin-bottom:22px;}
.skill-bar-head{display:flex; justify-content:space-between; font-size:14.5px; font-weight:600; margin-bottom:8px;}
.skill-bar-head span.pct{color:var(--orange-500);}
.skill-track{height:9px; border-radius:999px; background:var(--paper-100); overflow:hidden;}
.skill-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--orange-500), var(--cyan-400)); width:0%; transition:width 1.1s cubic-bezier(.22,1,.36,1);}
.skill-fill.filled{width:var(--pct);}

/* ---------- Tech stack grid (replaces skill progress bars) ---------- */
.tech-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.tech-badge{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:20px 12px; border-radius:var(--radius-md); background:var(--paper-50);
  border:1px solid var(--border); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tech-badge:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:transparent;}
.tech-badge i{font-size:34px; line-height:1;}
.tech-badge span{font-size:13px; font-weight:600; color:var(--ink-900);}

/* ---------- Portfolio filter ---------- */
.portfolio-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
.portfolio-filters button{
  padding:9px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:transparent;
  color:#CBD5E1; font-size:13.5px; font-weight:600;
}
.portfolio-filters button.active{background:var(--orange-500); border-color:var(--orange-500); color:#fff;}

/* ---------- About ---------- */
.about-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.about-wrap p{color:var(--ink-600); font-size:16px; margin-bottom:28px;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.stat-box{padding:20px; border-radius:var(--radius-md); background:var(--paper-50); border:1px solid var(--border); text-align:center;}
.stat-box b{display:block; font-family:var(--font-head); font-size:28px; color:var(--orange-500);}
.stat-box span{font-size:12.5px; color:var(--ink-600);}
.about-card{
  background:linear-gradient(160deg, var(--navy-900), var(--navy-800)); border-radius:var(--radius-lg);
  padding:40px; color:#fff; position:relative; overflow:hidden;
}
.about-card::after{content:""; position:absolute; width:260px; height:260px; background:var(--orange-500); opacity:.18; filter:blur(80px); border-radius:50%; bottom:-80px; inset-inline-end:-60px;}
.about-card .brand-mark{width:56px; height:56px; font-size:20px; margin-bottom:20px;}
.about-card h3{color:#fff; font-size:20px; margin-bottom:10px;}
.about-card p{color:#B6C2D9; font-size:14.5px; position:relative; z-index:1;}

/* ---------- Contact ---------- */
.contact-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px;}
.contact-info{display:flex; flex-direction:column; gap:18px;}
.contact-info-item{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.contact-info-item .icon-btn{background:rgba(247,147,30,.15); border-color:rgba(247,147,30,.3); color:var(--orange-400);}
.contact-info-item b{display:block; color:#fff; font-size:14.5px;}
.contact-info-item span{color:#94A3B8; font-size:13.5px;}

.contact-map{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,.08); margin-top:18px; height:220px;
  filter:grayscale(.3) invert(.92) contrast(.9);
}
.contact-map iframe{width:100%; height:100%; border:0; display:block;}

.contact-form{background:var(--navy-800); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:34px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13.5px; font-weight:600; color:#CBD5E1; margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; font-family:inherit; font-size:14.5px;
}
.field textarea{resize:vertical; min-height:110px;}
.field input::placeholder, .field textarea::placeholder{color:#64748B;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--orange-500);}
.form-note{font-size:13px; margin-top:14px; min-height:18px;}
.form-note.ok{color:#4ADE80;}
.form-note.err{color:#F87171;}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950); color:#94A3B8; padding:56px 0 28px; border-top:1px solid rgba(255,255,255,.06);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; margin-bottom:36px;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{color:#94A3B8; font-size:14px;}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06); padding-top:22px; font-size:13px;
}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; background:var(--navy-950); z-index:99; display:none; flex-direction:column;
  padding:100px 28px 40px; gap:6px; overflow-y:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:16px 6px; font-size:18px; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); font-weight:500;}
.mobile-menu .btn{margin-top:20px;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .hero .container{grid-template-columns:1fr;}
  .hero-photo-wrap{order:-1; min-height:300px;}
  .grid-3, .grid-2{grid-template-columns:repeat(2,1fr);}
  .about-wrap{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .skills-split{grid-template-columns:1fr; gap:36px;}
}
@media (max-width: 640px){
  .section{padding:64px 0;}
  .hero{padding:150px 0 80px;}
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .hero-stat-row{grid-template-columns:repeat(3,1fr); gap:8px;}
  .hero-stat b{font-size:19px;}
  .form-row{grid-template-columns:1fr;}
  .resume-item{flex-direction:column; gap:8px;}
  .footer-top{flex-direction:column;}
  .stat-row{grid-template-columns:1fr; gap:10px;}
  .hero-photo-shape{width:238px; height:238px; bottom:14px;}
  .hero-photo-ring{width:210px; height:210px; bottom:28px;}
  .hero-photo{width:210px; height:auto; bottom:28px;}
  .hero-photo-body{ clip-path:polygon(0px 140.4px, 7px 118px, 14px 104.7px, 21px 94.7px, 28px 86.7px, 35px 80.1px, 42px 74.5px, 49px 69.8px, 56px 65.9px, 63px 62.6px, 70px 59.9px, 77px 57.7px, 84px 56.1px, 91px 54.9px, 98px 54.2px, 105px 54px, 112px 54.2px, 119px 54.9px, 126px 56.1px, 133px 57.7px, 140px 59.9px, 147px 62.6px, 154px 65.9px, 161px 69.8px, 168px 74.5px, 175px 80.1px, 182px 86.7px, 189px 94.7px, 196px 104.7px, 203px 118px, 210px 140.4px, 210px 181.6px, 203px 204px, 196px 217.3px, 189px 227.3px, 182px 235.3px, 175px 241.9px, 168px 247.5px, 161px 252.2px, 154px 256.1px, 147px 259.4px, 140px 262.1px, 133px 264.3px, 126px 265.9px, 119px 267.1px, 112px 267.8px, 105px 268px, 98px 267.8px, 91px 267.1px, 84px 265.9px, 77px 264.3px, 70px 262.1px, 63px 259.4px, 56px 256.1px, 49px 252.2px, 42px 247.5px, 35px 241.9px, 28px 235.3px, 21px 227.3px, 14px 217.3px, 7px 204px, 0px 181.6px); }
  .hero-photo-head{ clip-path:polygon(0px 0px, 210px 0px, 210px 161px, 203px 123.3px, 196px 108.6px, 189px 98px, 182px 89.6px, 175px 82.7px, 168px 77px, 161px 72.2px, 154px 68.1px, 147px 64.8px, 140px 62px, 133px 59.8px, 126px 58.1px, 119px 56.9px, 112px 56.2px, 105px 56px, 98px 56.2px, 91px 56.9px, 84px 58.1px, 77px 59.8px, 70px 62px, 63px 64.8px, 56px 68.1px, 49px 72.2px, 42px 77px, 35px 82.7px, 28px 89.6px, 21px 98px, 14px 108.6px, 7px 123.3px, 0px 161px); }
  .hero-photo-placeholder{ clip-path:circle(105px at 105px 105px); }
  .hero-photo-wrap{min-height:270px;}
  .hero-photo-badge{font-size:12px; padding:10px 14px; inset-inline-start:calc(50% - 120px);}
  .tech-grid{grid-template-columns:repeat(3,1fr); gap:10px;}
  .tech-badge{padding:14px 8px;}
  .tech-badge i{font-size:28px;}
  .tech-badge span{font-size:11.5px;}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- RTL tweaks (Pashto / Dari) ---------- */
[dir="rtl"] body{font-family:'Noto Sans Arabic', var(--font-body);}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:'Noto Sans Arabic', var(--font-head);}
[dir="rtl"] .kicker::before{order:2;}
[dir="rtl"] .hero-cta, [dir="rtl"] .nav-links, [dir="rtl"] .footer-links{flex-direction:row-reverse;}