/* ============================================================
   SADDAM PORTFOLIO v7 — PREMIUM LIGHT
   Fonts: Sora (headings) + Inter (body) + JetBrains Mono (code)
   Palette: #F8F7F4 warm white · #0F0F0F ink · #1B4FD8 blue accent
   ============================================================ */
:root {
  /* Backgrounds */
  --bg:          #F8F7F4;
  --bg-1:        #F1F0EC;
  --bg-2:        #E8E6E0;
  --bg-card:     #FFFFFF;
  --bg-dark:     #0F0F0F;
  --bg-dark-2:   #1A1A1A;
  --bg-soft:     #F1F0EC;

  /* Borders */
  --border:      rgba(15,15,15,.1);
  --border-h:    rgba(15,15,15,.18);
  --border-card: rgba(15,15,15,.08);

  /* Text */
  --text-heading: #0F0F0F;
  --text-body:    #3D3D3D;
  --text-muted:   #6E6E6E;
  --text-light:   #A0A0A0;
  --text-inv:     #FFFFFF;

  /* Accent — Professional Blue */
  --accent:        #1B4FD8;
  --accent-h:      #1540B8;
  --accent-light:  rgba(27,79,216,.07);
  --accent-border: rgba(27,79,216,.18);
  --accent-glow:   rgba(27,79,216,.18);

  /* Green */
  --green:     #0A7C5C;
  --green-bg:  rgba(10,124,92,.07);
  --green-bdr: rgba(10,124,92,.2);

  /* Fonts */
  --f-display: 'Instrument Serif', Georgia, serif;
  --f-head:    'Sora', 'DM Sans', sans-serif;
  --f-body:    'Inter', 'DM Sans', sans-serif;
  --f-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --wrap:    1200px;
  --wrap-sm: 800px;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;

  /* Shadows */
  --s-xs:   0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --s-sm:   0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  --s-md:   0 8px 32px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.05);
  --s-lg:   0 24px 64px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  --s-card: 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);

  --ease:   cubic-bezier(.22,.68,0,1.2);
  --ease-o: cubic-bezier(.25,.46,.45,.94);
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body {
  font-family:var(--f-body);
  font-size:1rem; line-height:1.7;
  color:var(--text-body); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,video { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none; transition:color .2s }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.skip-link { position:absolute; top:-60px; left:1rem; z-index:9999; padding:.6rem 1.25rem; background:var(--accent); color:#fff; font-weight:600; border-radius:var(--r-sm); transition:top .2s }
.skip-link:focus { top:1rem }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--f-head); font-weight:700;
  line-height:1.2; color:var(--text-heading);
  letter-spacing:-.03em;
}
h1 { font-size:clamp(2.25rem,5vw,3.75rem); font-weight:800; letter-spacing:-.04em }
h2 { font-size:clamp(1.75rem,3.5vw,2.5rem); letter-spacing:-.035em }
h3 { font-size:clamp(1.0625rem,2vw,1.25rem); font-weight:600 }
h4 { font-size:.9375rem; font-weight:600 }
p  { color:var(--text-muted); line-height:1.8 }

.eyebrow, .label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem;
}
.eyebrow::before,.label::before {
  content:''; width:20px; height:1.5px; background:var(--accent); flex-shrink:0;
}
.lead { font-size:clamp(1rem,2vw,1.125rem); color:var(--text-muted); line-height:1.85 }

/* ── LAYOUT ── */
.container    { max-width:var(--wrap);    margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem) }
.container-sm { max-width:var(--wrap-sm); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem) }
.section    { padding:clamp(5rem,9vw,8rem) 0 }
.section-sm { padding:clamp(3.5rem,6vw,5.5rem) 0 }
.section-alt { background:var(--bg-1) }

.sec-h { margin-bottom:clamp(2.5rem,5vw,4rem) }
.sec-h h2 { margin-bottom:.75rem }
.sec-h p  { max-width:520px; font-size:1.0625rem }
.sec-h.c  { text-align:center }
.sec-h.c p { margin:0 auto }
.sec-h.c .label,.sec-h.c .eyebrow { justify-content:center }
.sec-hd { margin-bottom:clamp(2rem,4vw,3rem) }
.sec-hd h2 { margin-bottom:.5rem }
.tc { text-align:center }
.mt-2 { margin-top:1.5rem }
.mt-3 { margin-top:2.5rem }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8125rem 1.75rem;
  font-family:var(--f-body); font-size:.9375rem; font-weight:600;
  border-radius:var(--r-md); border:none; cursor:pointer;
  transition:all .2s var(--ease-o);
  white-space:nowrap; text-decoration:none; letter-spacing:-.01em;
}
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { background:var(--accent-h); color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px var(--accent-glow) }
.btn-ghost, .btn-outline {
  background:transparent; color:var(--text-heading);
  border:1.5px solid var(--border-h);
}
.btn-ghost:hover, .btn-outline:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-light); transform:translateY(-2px);
}
.btn-sm  { padding:.5rem 1rem; font-size:.875rem }
.btn-lg  { padding:1rem 2.25rem; font-size:1rem }
.btn-group { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center }

/* ── TAGS ── */
.tag,.badge {
  display:inline-flex; align-items:center;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.04em;
  color:var(--text-muted); background:var(--bg-2);
  border:1px solid var(--border); border-radius:var(--r-xs);
  padding:.2rem .6rem; white-space:nowrap;
}
.tag-a { color:var(--accent); background:var(--accent-light); border-color:var(--accent-border) }
.tag-g { color:var(--green);  background:var(--green-bg);    border-color:var(--green-bdr) }
.blog-cat,.post-cat {
  display:inline-block; font-family:var(--f-mono); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-light);
  border:1px solid var(--accent-border);
  padding:.2rem .6rem; border-radius:var(--r-xs); margin-bottom:.75rem;
}
.read-more {
  font-size:.875rem; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:.375rem; margin-top:.75rem;
}
.read-more:hover { color:var(--accent-h) }

/* ── ADMIN BAR ── */
.admin-bar .site-header { top:32px }
@media screen and (max-width:782px) { .admin-bar .site-header { top:46px } }

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(248,247,244,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled {
  background:rgba(248,247,244,.97);
  border-bottom-color:var(--border);
  box-shadow:0 1px 20px rgba(0,0,0,.06);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}

/* Logo */
.site-branding a { display:flex; align-items:center; gap:.875rem; text-decoration:none }
.logo-mark {
  width:36px; height:36px;
  background:var(--text-heading); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-name {
  display:flex; flex-direction:column;
  font-family:var(--f-head); font-weight:700; font-size:.9375rem;
  color:var(--text-heading); line-height:1.25; letter-spacing:-.02em;
}
.logo-name span {
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase;
}

/* Nav */
.main-navigation { display:flex; align-items:center }
.main-navigation ul {
  display:flex; list-style:none; align-items:center;
  gap:0; margin:0; padding:0;
}
.main-navigation a {
  display:block; padding:.5rem .875rem;
  font-family:var(--f-body); font-size:.875rem; font-weight:500;
  color:var(--text-muted); border-radius:var(--r-sm);
  transition:color .15s, background .15s; white-space:nowrap;
}
.main-navigation a:hover { color:var(--text-heading) }
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a { color:var(--accent); font-weight:600 }
.nav-hire > a {
  background:var(--text-heading)!important;
  color:var(--text-inv)!important;
  padding:.5rem 1.125rem!important;
  border-radius:var(--r-md)!important;
  font-weight:600!important;
  margin-left:.625rem;
  font-size:.875rem!important;
}
.nav-hire > a:hover { background:var(--accent)!important; transform:none }

.menu-toggle {
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1.5px solid var(--border-h); background:transparent;
  border-radius:var(--r-sm); cursor:pointer;
  color:var(--text-heading); font-size:.9375rem;
  transition:all .2s; flex-shrink:0;
}
.menu-toggle:hover { border-color:var(--accent); color:var(--accent) }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  padding:calc(68px + 5.5rem) 0 5rem;
  background:var(--bg);
  position:relative; overflow:hidden;
}
/* Dot grid texture */
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(15,15,15,.055) 1px,transparent 1px);
  background-size:30px 30px; pointer-events:none;
}
/* Soft blue haze top-right */
.hero::after {
  content:''; position:absolute; top:-200px; right:-100px;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(27,79,216,.07) 0%, transparent 65%);
  pointer-events:none;
}
.hero-inner {
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}

/* Availability pill */
.hero-pill {
  display:inline-flex; align-items:center; gap:.625rem;
  padding:.375rem .875rem;
  background:var(--green-bg); border:1px solid var(--green-bdr);
  border-radius:99px; font-size:.8125rem; font-weight:500; color:var(--green);
  margin-bottom:1.75rem; font-family:var(--f-body);
}
.hero-dot {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  animation:pulse 2.4s ease-in-out infinite; flex-shrink:0;
}
@keyframes pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(10,124,92,.4) }
  50% { opacity:.7; box-shadow:0 0 0 5px rgba(10,124,92,0) }
}

.hero-h1 { margin-bottom:1.25rem }
.hero-h1 .accent-word { color:var(--accent) }

.hero-sub {
  font-size:1.0625rem; color:var(--text-muted);
  line-height:1.8; max-width:480px; margin-bottom:2rem;
}
.hero-ctas { margin-bottom:2.75rem }

/* Proof stats under hero */
.hero-proof {
  display:flex; gap:2.5rem; flex-wrap:wrap;
  padding-top:1.75rem; border-top:1px solid var(--border);
}
.hp-val {
  display:block; font-family:var(--f-head); font-size:1.5rem; font-weight:800;
  color:var(--text-heading); letter-spacing:-.04em;
}
.hp-val em { font-style:normal; color:var(--accent); font-size:1.125rem }
.hp-lbl { font-size:.8125rem; color:var(--text-muted); margin-top:.125rem; font-weight:500 }

/* ── HERO RIGHT: Profile Card ── */
.hero-card {
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:var(--r-2xl);
  box-shadow:var(--s-lg);
  overflow:hidden;
}
.hero-card-top {
  background:var(--bg-dark);
  padding:2rem 2rem 1.5rem;
  position:relative;
}
.hero-card-top::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 0%, rgba(27,79,216,.3) 0%, transparent 60%);
  pointer-events:none;
}
.hero-avatar {
  width:64px; height:64px;
  background:linear-gradient(135deg, #1B4FD8 0%, #60A5FA 100%);
  border-radius:var(--r-xl);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-size:1.5rem; font-weight:800;
  color:#fff; margin-bottom:1rem;
  position:relative; z-index:1;
  flex-shrink:0;
}
.hero-card-name {
  position:relative; z-index:1;
}
.hero-card-name h3 {
  font-size:1.125rem; color:#fff; margin-bottom:.25rem; letter-spacing:-.02em;
}
.hero-card-name p {
  font-family:var(--f-mono); font-size:.75rem;
  color:rgba(255,255,255,.5); margin:0; letter-spacing:.06em;
}
.hero-card-badges {
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-top:1.25rem; position:relative; z-index:1;
}
.hcb {
  display:inline-flex; align-items:center; gap:.375rem;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.06em; padding:.3rem .7rem;
  border-radius:99px; white-space:nowrap;
}
.hcb-green { background:rgba(10,124,92,.2); color:#4ADE80; border:1px solid rgba(74,222,128,.2) }
.hcb-blue  { background:rgba(27,79,216,.25); color:#93C5FD; border:1px solid rgba(147,197,253,.2) }

/* Stats grid inside card */
.hero-card-stats {
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border);
}
.hcs-item {
  padding:1.25rem 1.5rem;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.hcs-item:nth-child(2n) { border-right:none }
.hcs-item:nth-child(3),.hcs-item:nth-child(4) { border-bottom:none }
.hcs-val {
  font-family:var(--f-head); font-size:1.5rem; font-weight:800;
  color:var(--text-heading); letter-spacing:-.04em;
  display:block; margin-bottom:.125rem;
}
.hcs-val em { font-style:normal; color:var(--accent); font-size:1.125rem }
.hcs-lbl { font-size:.8rem; color:var(--text-muted); font-weight:500 }
.hcs-sub { font-family:var(--f-mono); font-size:.7rem; color:var(--text-light); margin-top:.125rem }

/* Stack chips inside card */
.hero-card-stack {
  padding:1.25rem 1.5rem;
  border-top:1px solid var(--border);
}
.hero-card-stack p {
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.75rem;
}
.stack-chips { display:flex; flex-wrap:wrap; gap:.375rem }
.stack-chip {
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  color:var(--text-body); background:var(--bg-1);
  border:1px solid var(--border);
  padding:.25rem .625rem; border-radius:99px;
  transition:all .2s;
}
.stack-chip:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent-border) }

/* ══════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════ */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--bg-card); box-shadow:var(--s-xs);
  overflow:hidden; margin:3.5rem 0;
}
.stat-cell {
  padding:1.75rem 1.5rem;
  border-right:1px solid var(--border);
  transition:background .2s;
}
.stat-cell:last-child { border-right:none }
.stat-cell:hover { background:var(--bg-1) }
.sc-val {
  display:block; font-family:var(--f-head); font-size:1.875rem; font-weight:800;
  color:var(--text-heading); letter-spacing:-.05em; margin-bottom:.25rem;
}
.sc-val em { font-style:normal; color:var(--accent); font-size:1.25rem }
.sc-lbl { font-weight:600; font-size:.9375rem; color:var(--text-heading); margin-bottom:.125rem }
.sc-sub { font-family:var(--f-mono); font-size:.7rem; color:var(--text-muted); letter-spacing:.04em }

/* ══════════════════════════════════════════════
   SERVICES — numbered grid
══════════════════════════════════════════════ */
.svc-hero {
  padding:calc(68px + 5rem) 0 4rem;
  background:var(--bg); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.svc-hero::before,.page-title-section::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(15,15,15,.04) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.svc-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden;
}
.svc-cell {
  padding:2rem 1.875rem;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-decoration:none;
  transition:background .25s;
  display:flex; flex-direction:column;
  position:relative;
}
.svc-cell:nth-child(3n)   { border-right:none }
.svc-cell:nth-child(4),
.svc-cell:nth-child(5),
.svc-cell:nth-child(6)    { border-bottom:none }
.svc-cell:hover            { background:var(--accent-light) }
.svc-n {
  font-family:var(--f-mono); font-size:.6875rem;
  color:var(--text-light); letter-spacing:.1em; margin-bottom:1rem;
}
.svc-ico {
  width:42px; height:42px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1rem; margin-bottom:1.125rem;
  transition:background .2s, border-color .2s;
}
.svc-cell:hover .svc-ico { background:var(--accent); color:#fff; border-color:var(--accent) }
.svc-cell h3 { font-size:1rem; margin-bottom:.5rem; color:var(--text-heading) }
.svc-cell p  { font-size:.875rem; color:var(--text-muted); line-height:1.75; flex:1 }
.svc-arrow {
  margin-top:1.25rem; font-size:.8125rem; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:.375rem;
  opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s;
  font-family:var(--f-body);
}
.svc-cell:hover .svc-arrow { opacity:1; transform:translateX(0) }

/* Process */
.process-stack { display:flex; flex-direction:column }
.ps-item {
  display:flex; gap:1.5rem; align-items:flex-start;
  padding:1.5rem 0; border-bottom:1px solid var(--border);
}
.ps-item:last-child { border-bottom:none }
.ps-num {
  width:38px; height:38px; flex-shrink:0;
  background:var(--text-heading); color:#fff;
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.8rem; font-weight:600; letter-spacing:.04em;
}
.ps-item h4 { font-size:.9375rem; margin-bottom:.3125rem; color:var(--text-heading) }
.ps-item p  { font-size:.875rem; color:var(--text-muted); margin:0 }

/* ══════════════════════════════════════════════
   PORTFOLIO
══════════════════════════════════════════════ */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.5rem }
.f-btn {
  padding:.4375rem 1rem; border-radius:var(--r-md);
  font-size:.875rem; font-weight:500; color:var(--text-muted);
  background:var(--bg-card); border:1.5px solid var(--border);
  cursor:pointer; transition:all .2s;
}
.f-btn.active,.f-btn:hover { background:var(--text-heading); color:#fff; border-color:var(--text-heading) }

.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem }
.proj-card {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-lg); box-shadow:var(--s-xs);
  overflow:hidden; transition:box-shadow .25s,transform .25s;
  display:flex; flex-direction:column;
}
.proj-card:hover { box-shadow:var(--s-md); transform:translateY(-3px) }
.proj-thumb {
  aspect-ratio:16/9; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.proj-thumb img { width:100%; height:100%; object-fit:cover }
.proj-thumb-ph  { font-size:2rem; color:var(--text-light) }
.proj-body { padding:1.375rem; flex:1; display:flex; flex-direction:column }
.proj-tags { display:flex; gap:.375rem; flex-wrap:wrap; margin-bottom:.75rem }
.proj-card h3 { font-size:1rem; margin-bottom:.375rem; color:var(--text-heading) }
.proj-card p  { font-size:.875rem; color:var(--text-muted); line-height:1.7; flex:1 }
.proj-link {
  margin-top:1.25rem; font-size:.875rem; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:.375rem;
}
.proj-link:hover { color:var(--accent-h) }

/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem }
.testi-card {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-lg); box-shadow:var(--s-xs);
  padding:1.75rem; display:flex; flex-direction:column;
}
.testi-stars { color:#E8A020; font-size:.875rem; margin-bottom:.875rem; letter-spacing:.06em }
.testi-q { font-size:.9375rem; color:var(--text-body); line-height:1.75; flex:1 }
.testi-author { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border) }
.testi-name { font-weight:700; font-size:.9375rem; color:var(--text-heading) }
.testi-role { font-family:var(--f-mono); font-size:.7rem; color:var(--text-muted); margin-top:.125rem }

/* ══════════════════════════════════════════════
   BLOG
══════════════════════════════════════════════ */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem }
.blog-card {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-lg); box-shadow:var(--s-xs);
  overflow:hidden; transition:box-shadow .25s,transform .25s;
  display:flex; flex-direction:column;
}
.blog-card:hover { box-shadow:var(--s-md); transform:translateY(-3px) }
.blog-thumb { aspect-ratio:16/9; background:var(--bg-2); overflow:hidden }
.blog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.blog-card:hover .blog-thumb img { transform:scale(1.04) }
.blog-body { padding:1.375rem; flex:1; display:flex; flex-direction:column }
.blog-meta {
  font-family:var(--f-mono); font-size:.7rem; color:var(--text-muted);
  margin-bottom:.75rem; letter-spacing:.04em; display:flex; gap:1rem; flex-wrap:wrap;
}
.blog-card h2,.blog-card h3 { font-size:1rem; margin-bottom:.375rem; color:var(--text-heading) }
.blog-card p  { font-size:.875rem; color:var(--text-muted); line-height:1.75; flex:1 }
.blog-card .read-more { margin-top:auto; padding-top:1rem }

/* post-card alias */
.post-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-lg); box-shadow:var(--s-xs); overflow:hidden; transition:box-shadow .25s,transform .25s; display:flex; flex-direction:column }
.post-card:hover { box-shadow:var(--s-md); transform:translateY(-3px) }
.post-thumb { aspect-ratio:16/9; background:var(--bg-2); overflow:hidden }
.post-thumb img { width:100%; height:100%; object-fit:cover }
.post-ph { aspect-ratio:16/9; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--text-light) }
.post-body { padding:1.375rem; flex:1; display:flex; flex-direction:column }
.post-meta { font-family:var(--f-mono); font-size:.7rem; color:var(--text-muted); display:flex; gap:.75rem; margin-bottom:.5rem }
.post-card h3 a { color:var(--text-heading) }
.post-card h3 a:hover { color:var(--accent) }
.post-exc { font-size:.875rem; color:var(--text-muted); line-height:1.7; margin-top:.375rem }

/* ══════════════════════════════════════════════
   PAGE TITLE SECTION (shared hero for inner pages)
══════════════════════════════════════════════ */
.page-title-section {
  padding:calc(68px + 4.5rem) 0 3.5rem;
  background:var(--bg); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-title-section .container,
.page-title-section .container-sm { position:relative; z-index:1 }
.page-title-section h1 { margin:.75rem 0 1rem }
.page-title-section p  { font-size:1.0625rem; max-width:560px; line-height:1.85 }

/* ══════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════ */
.about-grid {
  display:grid; grid-template-columns:3fr 2fr; gap:5rem; align-items:start;
}
.about-text p { margin-bottom:1rem }
.skill-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem }
.skill-item {
  display:flex; align-items:center; gap:.625rem;
  font-size:.875rem; font-weight:500; color:var(--text-body);
  padding:.625rem .875rem;
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-sm); transition:border-color .2s, color .2s;
}
.skill-item:hover { border-color:var(--accent-border); color:var(--accent) }
.skill-item i { color:var(--accent); font-size:.875rem; width:16px; text-align:center; flex-shrink:0 }
.skill-chips { display:flex; flex-wrap:wrap; gap:.5rem }
.skill-chip {
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:.8125rem; font-weight:500;
  padding:.375rem .75rem; background:var(--bg-2);
  border:1px solid var(--border); border-radius:99px; color:var(--text-body);
  transition:all .2s;
}
.skill-chip:hover { background:var(--accent-light); border-color:var(--accent-border); color:var(--accent) }
.skill-chip i { font-size:.8rem; color:var(--accent) }

/* Timeline */
.timeline { position:relative; display:flex; flex-direction:column }
.timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--border);
}
.tl-item {
  padding:1.75rem 0 1.75rem 2.25rem;
  border-bottom:1px solid var(--border); position:relative;
}
.tl-item:last-child { border-bottom:none }
.tl-item::before {
  content:''; position:absolute; left:-5px; top:2rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg-card); border:2.5px solid var(--accent);
}
.tl-date { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:var(--accent); margin-bottom:.375rem; text-transform:uppercase }
.tl-item h3 { font-size:1rem; margin-bottom:.25rem; color:var(--text-heading) }
.tl-co  { font-size:.875rem; color:var(--text-muted); margin-bottom:.5rem; font-weight:500 }
.tl-desc { font-size:.875rem; color:var(--text-muted); line-height:1.75; margin:0 }

/* ══════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════ */
.contact-layout {
  display:grid; grid-template-columns:1fr 1.25fr; gap:5rem; align-items:start;
}
.contact-methods { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem }
.c-method {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem;
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-lg);
  transition:border-color .2s, box-shadow .2s, transform .2s; text-decoration:none;
}
.c-method:hover { border-color:var(--accent-border); box-shadow:0 4px 16px rgba(27,79,216,.08); transform:translateY(-2px) }
.c-icon {
  width:42px; height:42px; flex-shrink:0;
  background:var(--accent-light); border:1px solid var(--accent-border);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1rem;
}
.c-text h4 { font-size:.9375rem; font-weight:600; color:var(--text-heading); margin-bottom:.125rem }
.c-text p  { font-size:.8375rem; color:var(--text-muted); margin:0 }

.contact-form-box,.form-box {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--r-xl); box-shadow:var(--s-sm); padding:2.25rem;
}
.contact-form-box h3 { margin-bottom:1.5rem; font-size:1.25rem }

/* Form */
.fg { display:flex; flex-direction:column; gap:.4375rem; margin-bottom:1.125rem }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.125rem }
.fg-row .fg { margin-bottom:0 }
.fg label { font-size:.875rem; font-weight:600; color:var(--text-heading) }
.fg input,.fg select,.fg textarea {
  width:100%; padding:.75rem 1rem;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-family:var(--f-body); font-size:.9375rem; color:var(--text-heading);
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(27,79,216,.1);
}
.fg textarea { resize:vertical; min-height:140px }

/* ══════════════════════════════════════════════
   SINGLE POST / PAGE
══════════════════════════════════════════════ */
.post-content { max-width:680px; margin:0 auto; padding:4rem clamp(1.25rem,4vw,2.5rem) }
.post-content p { margin-bottom:1.25rem; font-size:1.0625rem }
.post-content h2 { margin:2.5rem 0 1rem }
.post-content h3 { margin:2rem 0 .75rem }
.post-content ul,.post-content ol { margin:1rem 0 1.25rem; padding-left:1.5rem; color:var(--text-muted) }
.post-content li { margin-bottom:.5rem }
.post-content pre { background:var(--bg-dark); color:#D4D4D4; padding:1.5rem; border-radius:var(--r-lg); overflow-x:auto; font-size:.875rem; margin:1.5rem 0 }
.post-content code { font-family:var(--f-mono); font-size:.9em; background:var(--bg-2); padding:.125rem .375rem; border-radius:var(--r-xs) }
.post-content pre code { background:transparent; padding:0 }
.post-content blockquote { border-left:3px solid var(--accent); padding:.75rem 1.5rem; background:var(--accent-light); border-radius:0 var(--r-md) var(--r-md) 0; margin:1.5rem 0 }
.post-nav { display:flex; gap:1.5rem; margin-top:4rem; padding-top:2rem; border-top:1px solid var(--border) }
.post-nav-link { flex:1; padding:1.25rem; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-lg); transition:border-color .2s }
.post-nav-link:hover { border-color:var(--accent-border) }
.pnl-dir   { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--text-muted); margin-bottom:.375rem; text-transform:uppercase }
.pnl-title { font-weight:700; font-size:.9375rem; color:var(--text-heading) }

/* ══════════════════════════════════════════════
   SINGLE SERVICE
══════════════════════════════════════════════ */
.svc-single-hero { padding:calc(68px + 4.5rem) 0 3.5rem; background:var(--bg); border-bottom:1px solid var(--border) }
.svc-deliverables { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.svc-deliverable-item { display:flex; gap:.75rem; align-items:flex-start; padding:1rem 1.125rem; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-md) }
.svc-deliverable-item i { color:var(--green); flex-shrink:0; margin-top:.125rem }
.svc-single-layout { display:grid; grid-template-columns:1fr 300px; gap:4rem; align-items:start }
.svc-sidebar { position:sticky; top:calc(68px + 2rem); background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-xl); box-shadow:var(--s-sm); padding:1.75rem }
.svc-sidebar h4 { margin-bottom:1rem }
.svc-sidebar ul { list-style:none; display:flex; flex-direction:column; gap:.375rem }
.svc-sidebar li a { display:block; padding:.625rem .875rem; font-size:.875rem; border-radius:var(--r-sm); color:var(--text-body); transition:all .2s }
.svc-sidebar li a:hover { background:var(--accent-light); color:var(--accent) }
.svc-sidebar li.active a { background:var(--accent); color:#fff }

/* ══════════════════════════════════════════════
   ARCHIVE / 404
══════════════════════════════════════════════ */
.archive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem }
.error404-wrap { min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6rem clamp(1.25rem,4vw,2.5rem) }
.error404-code { font-size:clamp(6rem,18vw,11rem); font-weight:900; color:var(--bg-2); letter-spacing:-.08em; line-height:1; margin-bottom:.5rem; font-family:var(--f-head) }

/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.cta-section { background:var(--bg-dark); padding:5.5rem 0 }
.cta-in { text-align:center; max-width:580px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem) }
.cta-section h2 { color:#fff; margin-bottom:.875rem }
.cta-section .label,.cta-section .eyebrow { color:rgba(255,255,255,.4) }
.cta-section .label::before,.cta-section .eyebrow::before { background:rgba(255,255,255,.25) }
.cta-section p { color:rgba(255,255,255,.55); margin-bottom:2rem }
.cta-section .btn-primary { background:#fff; color:var(--accent) }
.cta-section .btn-primary:hover { background:var(--bg-1); color:var(--accent-h) }
.cta-section .btn-ghost { border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.75) }
.cta-section .btn-ghost:hover { border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.07) }
.cta-email { margin-top:1.25rem; font-size:.875rem; color:rgba(255,255,255,.4) }
.cta-email a { color:rgba(255,255,255,.65); text-decoration:underline; text-underline-offset:3px }
.cta-email a:hover { color:#fff }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer {
  background:var(--bg-dark); color:rgba(255,255,255,.65);
  padding:4rem 0 2.25rem;
}
.footer-wrap { display:flex; gap:4rem; margin-bottom:3rem; align-items:flex-start }
.footer-brand { flex:0 0 240px }
.footer-logo { display:flex; align-items:center; gap:.875rem; margin-bottom:1rem }
.footer-logo .logo-mark { background:#fff; flex-shrink:0 }
.footer-logo .logo-mark svg path,.footer-logo .logo-mark svg circle { stroke:var(--bg-dark) }
.footer-logo .logo-name { color:#fff }
.footer-logo .logo-name span { color:rgba(255,255,255,.45) }
.footer-brand > p { font-size:.875rem; color:rgba(255,255,255,.4); line-height:1.75 }
.f-social { display:flex; gap:.5rem; margin-top:1.25rem }
.soc-btn {
  width:36px; height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45); font-size:.875rem;
  transition:all .2s;
}
.soc-btn:hover { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.07) }
.footer-cols { display:flex; gap:3.5rem; flex:1; flex-wrap:wrap }
.f-col h4,.footer-col h4 {
  font-family:var(--f-mono); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:#fff; margin-bottom:1rem;
}
.f-col ul,.footer-col ul { list-style:none }
.f-col li,.footer-col li { margin-bottom:.5rem }
.f-col a,.footer-col a { font-size:.875rem; color:rgba(255,255,255,.4); transition:color .2s }
.f-col a:hover,.footer-col a:hover { color:rgba(255,255,255,.85) }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:.75rem;
}
.footer-bottom a { color:rgba(255,255,255,.3); transition:color .2s }
.footer-bottom a:hover { color:rgba(255,255,255,.7) }

/* Scroll top */
#scroll-top {
  position:fixed; bottom:1.75rem; right:1.75rem;
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--text-heading); color:#fff;
  border:none; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:var(--s-md); transition:all .2s; z-index:500;
}
#scroll-top.show { display:flex }
#scroll-top:hover { background:var(--accent); transform:translateY(-3px) }
#scroll-top svg { width:18px; height:18px }

/* ══════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-o),transform .6s var(--ease-o) }
.reveal.d2 { transition-delay:.1s }
.reveal.d3 { transition-delay:.2s }
.reveal.d4 { transition-delay:.3s }
.reveal.in { opacity:1; transform:none }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-inner  { grid-template-columns:1fr; gap:3rem }
  .hero::after { display:none }
  .about-grid  { grid-template-columns:1fr; gap:3rem }
  .contact-layout { grid-template-columns:1fr; gap:3rem }
  .svc-single-layout { grid-template-columns:1fr; gap:2rem }
  .svc-sidebar { position:relative; top:auto }
  .footer-wrap { flex-wrap:wrap; gap:2.5rem }
  .footer-brand { flex:0 0 100% }
  .footer-cols { gap:2.5rem }
}

@media (max-width:768px) {
  .menu-toggle { display:flex }
  .main-navigation ul {
    display:none;
    position:fixed; top:68px; left:0; right:0; bottom:0;
    background:rgba(248,247,244,.98);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    flex-direction:column; align-items:stretch;
    padding:1.25rem 1rem; gap:0;
    overflow-y:auto; z-index:999;
    border-top:1px solid var(--border);
  }
  .main-navigation ul.open { display:flex }
  .main-navigation li { border-bottom:1px solid var(--border) }
  .main-navigation a { padding:.9375rem .875rem; font-size:.9375rem; color:var(--text-heading); border-radius:0 }
  .main-navigation a:hover { background:var(--bg-1) }
  .nav-hire { margin-top:.75rem; border-bottom:none!important }
  .nav-hire > a {
    display:block!important; text-align:center!important;
    padding:1rem!important; border-radius:var(--r-md)!important; margin-left:0!important;
  }
  .admin-bar .main-navigation ul { top:calc(68px + 46px) }
  /* Services grid */
  .svc-grid { grid-template-columns:1fr 1fr }
  .svc-cell:nth-child(3n)   { border-right:1px solid var(--border) }
  .svc-cell:nth-child(2n)   { border-right:none }
  .svc-cell:nth-child(4),.svc-cell:nth-child(5),.svc-cell:nth-child(6) { border-bottom:1px solid var(--border) }
  .svc-cell:last-child { border-bottom:none }
  /* Stats */
  .stats-bar { grid-template-columns:1fr 1fr }
  .stat-cell { border-right:none; border-bottom:1px solid var(--border) }
  .stat-cell:nth-child(odd) { border-right:1px solid var(--border) }
  .stat-cell:last-child { border-bottom:none }
  /* Grids */
  .testi-grid,.blog-grid,.proj-grid,.archive-grid { grid-template-columns:1fr }
  .footer-cols { flex-direction:column; gap:2rem }
  .footer-bottom { flex-direction:column; align-items:flex-start }
  .fg-row { grid-template-columns:1fr }
  .post-nav { flex-direction:column }
  .skill-grid { grid-template-columns:1fr 1fr }
  .svc-deliverables { grid-template-columns:1fr }
  .hero-card-stats { grid-template-columns:1fr 1fr }
}

@media (max-width:480px) {
  .btn-group { flex-direction:column }
  .btn { width:100%; justify-content:center }
  .contact-form-box,.form-box { padding:1.5rem }
  .stats-bar { grid-template-columns:1fr }
  .stat-cell { border-right:none!important; border-bottom:1px solid var(--border) }
  .stat-cell:last-child { border-bottom:none }
  .svc-grid { grid-template-columns:1fr }
  .svc-cell { border-right:none!important; border-bottom:1px solid var(--border)!important }
  .skill-grid { grid-template-columns:1fr }
  .hero-card-stats { grid-template-columns:1fr 1fr }
}