/* =========================================================
   ADDUHAA TECH — PORTFOLIO PAGE
   Tokens
   color:    --ink #0A1628, --navy-deep #0B1F3A, --blue-electric #1E6FE8,
             --cyan-glow #3FD0E8, --canvas #F6F8FC, --slate #64748B
   type:     display = Space Grotesk, body/UI = Inter
   ========================================================= */

:root{
  --ink:#0A1628;
  --navy-deep:#0B1F3A;
  --navy-mid:#123262;
  --blue-electric:#1E6FE8;
  --cyan-glow:#3FD0E8;
  --canvas:#F6F8FC;
  --canvas-card:#FFFFFF;
  --slate:#64748B;
  --slate-light:#9AA7BD;
  --border-soft:#E6EBF3;
  --success:#1FA971;
  --danger:#E0455A;
  --warning:#F5A524;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
}

*{box-sizing:border-box;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--canvas);
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   HERO BANNER
   ========================================================= */
.hero-banner{
  position:relative;
  background:
    radial-gradient(circle at 18% 30%, rgba(63,208,232,0.18), transparent 45%),
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy-mid) 48%, var(--blue-electric) 100%);
  padding:86px 0 78px;
  overflow:hidden;
  isolation:isolate;
}

.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
  z-index:0;
}

.hero-nodes{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-nodes svg{width:100%;height:100%;display:block;}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 4vw, 46px);
  letter-spacing:0.5px;
  color:#fff;
}
.brand-bracket{ color:var(--cyan-glow); font-weight:500; opacity:0.85; }
.brand-name{ }
.brand-accent{ color:var(--cyan-glow); }

.hero-tagline{
  margin:14px auto 0;
  max-width:560px;
  color:rgba(255,255,255,0.78);
  font-size:16px;
  font-weight:400;
}

.hero-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:40px;
  flex-wrap:wrap;
}
.hero-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stat-num{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  color:#fff;
  line-height:1.1;
}
.stat-label{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-top:4px;
}
.hero-stat-divider{
  width:1px;
  height:34px;
  background:rgba(255,255,255,0.18);
}

/* =========================================================
   PORTFOLIO SECTION
   ========================================================= */
.portfolio-section{
  padding:64px 0 30px;
}

.section-heading{
  text-align:center;
  margin-bottom:34px;
}
.section-eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--blue-electric);
  letter-spacing:0.04em;
  margin-bottom:10px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 3.4vw, 40px);
  color:var(--ink);
  margin:0;
}
.section-sub{
  color:var(--slate);
  margin-top:10px;
  font-size:15px;
}

/* Filter chips */
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:42px;
}
.chip{
  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--slate);
  font-size:13.5px;
  font-weight:500;
  padding:9px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:all 0.18s ease;
  font-family:var(--font-body);
}
.chip:hover{
  border-color:var(--blue-electric);
  color:var(--blue-electric);
  transform:translateY(-1px);
}
.chip-active, .chip-active:hover{
  background:var(--blue-electric);
  border-color:var(--blue-electric);
  color:#fff;
}

/* Portfolio grid (self-contained, does not rely on Bootstrap's grid) */
#portfolioGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
@media (max-width:991px){
  #portfolioGrid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  #portfolioGrid{ grid-template-columns:1fr; }
}

/* Grid items / animation */
.grid-item{
  transition:opacity 0.25s ease, transform 0.25s ease;
  width:100%;
}
.grid-item.hidden{
  display:none;
}

/* Portfolio card */
.port-card{
  background:var(--canvas-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.port-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px -16px rgba(11,31,58,0.22);
}

.port-thumb{
  position:relative;
  overflow:hidden;
}
.port-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 35%, transparent 70%, rgba(0,0,0,0.12) 100%);
  pointer-events:none;
  z-index:3;
}
.thumb-topbar{
  display:flex;
  gap:6px;
  padding:9px 12px;
  background:rgba(255,255,255,0.06);
  position:relative;
  z-index:2;
}
.thumb-topbar span{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.35);
}
.thumb-topbar span:nth-child(1){background:#E0455A;}
.thumb-topbar span:nth-child(2){background:#F5A524;}
.thumb-topbar span:nth-child(3){background:#1FA971;}

.thumb-body{
  position:absolute;
  inset:34px 0 0 0;
  padding:16px;
}
.thumb-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(10,22,40,0);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  opacity:0;
  transition:opacity 0.2s ease, background 0.2s ease;
  z-index:4;
}
.thumb-overlay i{
  font-size:20px;
}
.port-thumb:hover .thumb-overlay{
  opacity:1;
  background:rgba(10,22,40,0.45);
}

.port-meta{
  padding:18px 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.port-tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  color:var(--blue-electric);
  background:rgba(30,111,232,0.08);
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:0.03em;
  margin-bottom:9px;
}
.port-meta h5{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  margin:0 0 6px;
  color:var(--ink);
}
.port-meta p{
  font-size:13.5px;
  color:var(--slate);
  margin:0;
  line-height:1.5;
  flex:1;
}
.demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:var(--canvas);
  border:1px solid var(--border-soft);
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.18s ease;
}
.demo-btn i{
  font-size:11px;
  color:var(--blue-electric);
  transition:transform 0.18s ease;
}
.demo-btn:hover{
  background:var(--blue-electric);
  border-color:var(--blue-electric);
  color:#fff;
}
.demo-btn:hover i{
  color:#fff;
  transform:translate(2px,-2px);
}

/* ---------- category-specific thumb art ---------- */

.thumb-badge{
  display:inline-block;
  background:linear-gradient(90deg,#E0455A,#F5A524);
  color:#fff;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:5px;margin-bottom:10px;
}
.thumb-badge.orange{ background:linear-gradient(90deg,#F5A524,#E0455A); }
.thumb-row{ display:flex; gap:8px; margin-bottom:10px; }
.thumb-block{ height:34px; border-radius:6px; background:rgba(255,255,255,0.15); }
.w-60{width:60%;} .w-40{width:40%;} .w-30{width:30%;}
.thumb-block.pink{ background:linear-gradient(135deg,#E0457E,#f97ab3); }
.thumb-block.purple{ background:linear-gradient(135deg,#6a3df0,#9d7bf5); }
.thumb-products{ display:flex; gap:8px; }
.thumb-prod{ flex:1; height:46px; border-radius:6px; background:rgba(255,255,255,0.12); }

.thumb-ecommerce-2{ background:linear-gradient(135deg,#0d2438,#1a4a73); }
.thumb-banner-mini{ height:60px; border-radius:8px; background:linear-gradient(120deg,#3FD0E8,#1E6FE8); margin-top:6px; }

.thumb-ecommerce-3{ background:linear-gradient(135deg,#1c1208,#5c3208); }
.thumb-grid-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:8px; }
.thumb-grid-mini div{ height:34px; border-radius:6px; background:rgba(255,255,255,0.13); }

.thumb-webapp{ background:linear-gradient(135deg,#0c1f3d,#16356b); }
.thumb-sidebar{ position:absolute; left:0; top:34px; bottom:0; width:46px; background:rgba(255,255,255,0.06); z-index:1; }
.thumb-body.offset{ left:46px; inset:34px 0 0 46px; }
.thumb-cards{ display:flex; gap:8px; margin-bottom:10px; }
.mini-card{ flex:1; height:38px; border-radius:6px; background:rgba(63,208,232,0.18); border:1px solid rgba(63,208,232,0.3); }
.thumb-chart{
  height:64px; border-radius:8px;
  background:linear-gradient(to top, rgba(63,208,232,0.25), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 19px);
}

.thumb-accounting{ background:linear-gradient(135deg,#0a1f1a,#123c2e); }
.ledger-row{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.7); padding:7px 0; border-bottom:1px dashed rgba(255,255,255,0.12); }
.ledger-row span:first-child{ width:60%; height:9px; background:rgba(255,255,255,0.15); border-radius:3px; }
.ledger-row .green{ color:#5FE3A6; font-weight:600; }
.ledger-row .red{ color:#F39CA8; font-weight:600; }
.ledger-total{ margin-top:12px; font-size:13px; font-weight:700; color:#fff; }

.thumb-pos{ background:linear-gradient(135deg,#1a1106,#3b2308); }
.pos-split{ display:flex; gap:10px; }
.pos-keys{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex:1.3; }
.pos-keys div{ height:24px; border-radius:5px; background:rgba(245,165,36,0.22); }
.pos-receipt{ flex:1; background:rgba(255,255,255,0.08); border-radius:6px; }

.thumb-hrm{ background:linear-gradient(135deg,#160c2c,#3a1f63); }
.org-row{ display:flex; gap:10px; margin-bottom:14px; }
.avatar-chip{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#9d7bf5,#3FD0E8); }
.attendance-bar{ height:8px; border-radius:99px; background:rgba(255,255,255,0.12); overflow:hidden; }
.attendance-bar span{ display:block; height:100%; background:linear-gradient(90deg,#3FD0E8,#1E6FE8); }
.attendance-label{ margin-top:8px; font-size:11px; color:rgba(255,255,255,0.65); }

.thumb-newspaper{ background:linear-gradient(135deg,#1a1a1a,#3a3a3a); }
.headline-block{ height:16px; width:80%; background:rgba(255,255,255,0.85); border-radius:2px; margin-bottom:10px; }
.column-rule{ height:1px; background:rgba(255,255,255,0.25); margin-bottom:10px; }
.news-cols{ display:flex; gap:8px; }
.news-col{ flex:1; height:54px; background:rgba(255,255,255,0.1); }

.thumb-school{ background:linear-gradient(135deg,#0a1c33,#1f4d80); }
.report-card{ background:rgba(255,255,255,0.08); border-radius:8px; padding:10px; }
.report-row{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.75); padding:5px 0; }
.report-row .grade{ color:#5FE3A6; font-weight:700; }

.thumb-erp{ background:linear-gradient(135deg,#0c1730,#1d3a73); }
.erp-modules{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.erp-mod{ aspect-ratio:1; border-radius:10px; background:rgba(63,208,232,0.14); border:1px solid rgba(63,208,232,0.28); display:flex; align-items:center; justify-content:center; color:#3FD0E8; font-size:16px; }

.thumb-realestate{ background:linear-gradient(135deg,#1c1306,#4d3308); }
.property-card{ background:rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; }
.property-img{ height:64px; background:linear-gradient(135deg,#F5A524,#E0455A); }
.property-price{ padding:8px 10px; font-size:13px; font-weight:700; color:#fff; }

.thumb-diagnostic{ background:linear-gradient(135deg,#1a0a14,#4d1530); }
.vitals-line{
  height:40px; margin-bottom:10px;
  background:
    repeating-linear-gradient(100deg,
      transparent 0 14px,
      rgba(224,69,90,0.5) 14px 16px,
      transparent 16px 30px);
  border-radius:6px;
  background-color:rgba(255,255,255,0.06);
}
.vitals-meta{ display:flex; gap:14px; font-size:11px; color:rgba(255,255,255,0.7); }
.vitals-meta i{ color:#E0455A; margin-right:4px; }

.thumb-restaurant{ background:linear-gradient(135deg,#1c0f06,#4d2808); }
.menu-row{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.75); padding:6px 0; border-bottom:1px dotted rgba(255,255,255,0.15); }
.menu-row span:first-child{ width:55%; height:8px; background:rgba(255,255,255,0.15); border-radius:3px; }
.menu-row .price{ color:#F5A524; font-weight:700; }

.thumb-tv{ background:linear-gradient(135deg,#0a0a1a,#241a4d); }
.play-circle{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:#fff; margin:6px auto 14px; font-size:16px; }
.channel-strip{ display:flex; gap:7px; }
.channel-strip div{ flex:1; height:30px; border-radius:5px; background:rgba(63,208,232,0.18); }

.thumb-ticket{ background:linear-gradient(135deg,#0c1730,#1d3a73); }
.seat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.seat-grid div{ aspect-ratio:1; border-radius:5px; background:rgba(63,208,232,0.2); }
.seat-grid div.taken{ background:rgba(224,69,90,0.55); }

.thumb-courier{ background:linear-gradient(135deg,#0a1f1a,#123c2e); }
.route-line{ position:absolute; left:24px; right:24px; top:55px; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 6px, transparent 6px 12px); }
.route-dot{ position:absolute; top:49px; width:14px; height:14px; border-radius:50%; }
.route-dot.start{ left:18px; background:#3FD0E8; }
.route-dot.end{ right:18px; background:#F5A524; }
.tracking-label{ position:absolute; bottom:16px; left:16px; right:16px; font-size:11px; color:rgba(255,255,255,0.7); }

.thumb-casino{ background:linear-gradient(135deg,#1a0a0a,#4d0f0f); }
.chip-stack{ display:flex; gap:-6px; justify-content:center; margin-top:24px; }
.chip-coin{ width:48px; height:48px; border-radius:50%; border:3px dashed rgba(255,255,255,0.5); margin-left:-14px; }
.chip-coin:first-child{ margin-left:0; }
.chip-coin.red{ background:#E0455A; }
.chip-coin.gold{ background:#F5A524; }
.chip-coin.black{ background:#2a2a2a; }

.thumb-education{ background:linear-gradient(135deg,#0c1730,#1d3a73); }
.course-progress{ height:10px; border-radius:99px; background:rgba(255,255,255,0.12); overflow:hidden; margin-top:20px; }
.course-progress span{ display:block; height:100%; background:linear-gradient(90deg,#3FD0E8,#1E6FE8); }
.course-label{ margin-top:10px; font-size:11px; color:rgba(255,255,255,0.65); }

.thumb-banking{ background:linear-gradient(135deg,#0c0c20,#1d1d52); }
.card-chip{ width:34px; height:24px; border-radius:5px; background:linear-gradient(135deg,#F5A524,#3FD0E8); margin-bottom:18px; }
.bank-balance{ font-family:var(--font-display); font-size:19px; font-weight:700; color:#fff; }
.bank-sub{ font-size:11px; color:rgba(255,255,255,0.6); margin-top:3px; }

/* =========================================================
   CTA STRIP
   ========================================================= */
.cta-strip{
  margin-top:54px;
  background:linear-gradient(120deg, var(--navy-deep), var(--blue-electric));
  border-radius:var(--radius-lg);
  padding:36px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cta-strip h4{
  font-family:var(--font-display);
  color:#fff;
  font-size:21px;
  margin:0 0 6px;
}
.cta-strip p{
  color:rgba(255,255,255,0.75);
  margin:0;
  font-size:14px;
}
.cta-btn{
  background:#fff;
  color:var(--navy-deep);
  font-weight:600;
  font-size:14px;
  padding:13px 24px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  white-space:nowrap;
}
.cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,0.35);
  color:var(--navy-deep);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  padding:26px 0 34px;
  text-align:center;
  color:var(--slate-light);
  font-size:13px;
}
.footer-dot{ margin:0 10px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:767px){
  .hero-banner{ padding:60px 0 54px; }
  .hero-stats{ gap:18px; }
  .hero-stat-divider{ display:none; }
  .cta-strip{ flex-direction:column; text-align:center; padding:30px 26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .port-card, .chip, .cta-btn, .grid-item{ transition:none !important; }
}

/* Keyboard focus visibility */
.chip:focus-visible, .cta-btn:focus-visible{
  outline:2px solid var(--cyan-glow);
  outline-offset:2px;
}