/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --color-ink:        #11142A;   /* fixed dark navy — used for buttons/bands/footer, does NOT flip with theme */
  --color-text:        #11142A;   /* heading/body-adjacent text — flips with theme */
  --color-card:        #FFFFFF;   /* card/surface background — flips with theme */
  --color-ink-soft:    #1B1E36;
  --color-body:        #5B6072;  /* paragraph gray */
  --color-muted:       #8A8FA3;
  --color-accent:      #5B5FEF;  /* indigo accent */
  --color-accent-soft: #EEF0FD;  /* light indigo chip bg */
  --color-bg:          #FFFFFF;
  --color-bg-alt:      #F7F8FB;  /* about / footer-adjacent panels */
  --color-border:      #ECEDF2;
  --color-white:       #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(17,20,42,0.04);
  --shadow-card-hover: 0 16px 32px rgba(17,20,42,0.10);
  --shadow-cta: 0 20px 40px rgba(91,95,239,0.18);

  --container: 1180px;
  --header-h: 84px;

  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){ /* keep light brand intentionally; mockup is light */ }

/* =========================================================
   RESET
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body,h1,h2,h3,h4,p,ul,figure{margin:0;}
ul{padding:0;list-style:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--color-ink); color:#fff; padding:10px 16px; z-index:200;
}
.skip-link:focus{left:8px; top:8px;}

:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3{
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--color-text);
}
h1{font-size:clamp(2.2rem,4.4vw,3.1rem); line-height:1.08;}
h2{font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.18;}
h3{font-size:1.05rem; line-height:1.3;}

p{color:var(--color-body); font-size:1rem;}

.eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--color-accent);
  text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow.center{text-align:center;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:0.95rem;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn .arrow{display:inline-block; transition:transform .25s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-pill{border-radius:var(--radius-pill);}

.btn-dark{
  background:var(--color-ink);
  color:#fff;
}
.btn-dark:hover{
  background:var(--color-accent);
  box-shadow:var(--shadow-cta);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  color:var(--color-text);
  border:1.5px solid var(--color-border);
}
.btn-outline:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
  transform:translateY(-2px);
}

.btn-light{
  background:#fff;
  color:var(--color-ink);
}
.btn-light:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-2px);
}

.icon-download{display:inline-block; transform:rotate(0deg);}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  min-height:var(--header-h);
  padding:14px 0;
  display:flex;
  align-items:center;
  background:var(--color-header-bg);
  backdrop-filter:saturate(180%) blur(14px);
  z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .2s var(--ease);
}
/* header height can vary (long subtitle wraps, icons stack on very
   small screens) — JS measures the real rendered height on load/
   resize and writes it into --header-h, so padding below always
   matches instead of trusting a hardcoded number and overlapping. */
.site-header.scrolled{
  border-bottom-color:var(--color-border);
  box-shadow:0 6px 24px rgba(17,20,42,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.logo{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--color-text);
}
.logo.light{color:#fff; font-size:1.6rem;}

.main-nav ul{
  display:flex;
  align-items:center;
  gap:32px;
}
.nav-link{
  position:relative;
  font-size:0.94rem;
  font-weight:500;
  color:var(--color-body);
  padding:8px 0;
  transition:color .2s var(--ease);
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-10px; left:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--color-accent);
  opacity:0;
  transform:translate(-50%,6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-link:hover{color:var(--color-text);}
.nav-link.active{color:var(--color-text);}
.nav-link.active::after{opacity:1; transform:translate(-50%,0);}

.nav-cta{padding:11px 22px; font-size:0.9rem;}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px;
}
.menu-toggle span{
  width:22px; height:2px; background:var(--color-text);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed; top:var(--header-h); right:0;
  width:78%; max-width:320px; height:calc(100vh - var(--header-h));
  background:var(--color-card); z-index:99;
  padding:32px 28px;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  box-shadow:-12px 0 30px rgba(17,20,42,0.08);
  display:flex; flex-direction:column;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav li{margin-bottom:8px;}
.mobile-nav a{
  display:block; padding:12px 4px; font-size:1.05rem; font-weight:600; color:var(--color-text);
  border-bottom:1px solid var(--color-border);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  padding:calc(var(--header-h) + 64px) 0 80px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  align-items:center;
  gap:48px;
}
.hero-sub{
  max-width:480px;
  margin:22px 0 32px;
  font-size:1.02rem;
}
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-bottom:48px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:32px;
}
.stat{display:flex; align-items:flex-start; gap:10px;}
.stat-icon{font-size:1.1rem; opacity:.8; margin-top:2px;}
.stat strong{font-size:1.4rem; font-weight:800; color:var(--color-text);}
.stat .plus{font-size:1.1rem; font-weight:800; color:var(--color-accent);}
.stat p{font-size:0.82rem; color:var(--color-muted); margin-top:2px;}

.hero-image-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  isolation:isolate;
}
.hero-image-bg{
  position:absolute;
  width:88%; height:92%;
  right:0; top:4%;
  background:var(--color-accent-soft);
  border-radius:var(--radius-lg);
  z-index:-2;
}
.hero-dots{
  position:absolute;
  left:0; bottom:18%;
  width:90px; height:90px;
  background-image:radial-gradient(var(--color-accent) 1.6px, transparent 1.6px);
  background-size:12px 12px;
  opacity:.35;
  z-index:-1;
}
.hero-portrait{
  width:100%;
  max-width:460px;
  border-radius:var(--radius-lg);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion: reduce){ .hero-portrait{animation:none;} }

/* =========================================================
   ABOUT
========================================================= */
.about{
  background:var(--color-bg-alt);
  padding:96px 0;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.about-copy{margin:18px 0 28px; max-width:460px;}

.about-list li{
  display:flex; gap:18px;
  padding-bottom:28px;
  margin-bottom:28px;
  border-bottom:1px solid var(--color-border);
}
.about-list li:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.about-icon{
  flex:0 0 48px;
  width:48px; height:48px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.about-list h3{margin-bottom:6px;}
.about-list p{font-size:0.94rem;}

/* =========================================================
   SERVICES
========================================================= */
.services{padding:96px 0;}
.section-head{margin-bottom:48px;}
.services-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.service-card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:28px 24px;
  position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
  border-color:transparent;
}
.service-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  color:var(--color-accent);
  font-weight:700; font-size:0.95rem;
  margin-bottom:20px;
}
.service-card h3{margin-bottom:10px; min-height:48px;}
.service-card p{font-size:0.88rem; margin-bottom:22px;}
.card-arrow{
  display:inline-flex; color:var(--color-accent); font-weight:700;
  transition:transform .25s var(--ease);
}
.service-card:hover .card-arrow{transform:translateX(6px);}

/* =========================================================
   TECH MARQUEE
========================================================= */
.tech-stack{padding:64px 0 96px; text-align:center;}
.tech-track-wrap{
  overflow:hidden;
  margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tech-track{
  display:flex;
  gap:48px;
  width:max-content;
  animation:scrollTech 28s linear infinite;
}
@keyframes scrollTech{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.tech-track-wrap:hover .tech-track{animation-play-state:paused;}
.tech-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  min-width:72px;
}
.tech-logo{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem;
}
.tech-item span:last-child{font-size:0.78rem; color:var(--color-muted); font-weight:500;}

/* =========================================================
   CTA BAND
========================================================= */
.cta-band{
  background:var(--color-ink);
  border-radius:var(--radius-lg);
  margin:0 24px;
  max-width:calc(var(--container) - 0px);
  margin-inline:auto;
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:40px 48px;
  flex-wrap:wrap;
}
.cta-left{display:flex; align-items:center; gap:20px;}
.cta-icon{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.cta-left h3{color:#fff; margin-bottom:4px;}
.cta-left p{color:#A7ABC4; font-size:0.92rem;}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  background:var(--color-ink);
  color:#A7ABC4;
  margin-top:96px;
  padding-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
}
.footer-brand p{
  color:#8C90A8;
  font-size:0.88rem;
  margin-top:16px;
  max-width:280px;
}
.footer-col h4{
  color:#fff; font-size:0.92rem; font-weight:700; margin-bottom:18px;
}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{
  font-size:0.88rem; color:#A7ABC4; transition:color .2s var(--ease);
}
.footer-col a:hover{color:var(--color-accent);}
.footer-contact li{display:flex; align-items:center; gap:10px;}
.footer-contact span{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem;
}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);}
.footer-bottom-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px;
  font-size:0.82rem;
  color:#787C95;
}
#backToTop{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
#backToTop:hover{background:var(--color-accent); transform:translateY(-2px);}

/* =========================================================
   SCROLL REVEAL
========================================================= */
[data-animate]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-animate="fade-in"]{transform:none;}
[data-animate].in-view{opacity:1; transform:none;}

/* =========================================================
   BREADCRUMB
========================================================= */
.breadcrumb-bar{
  padding:calc(var(--header-h) + 28px) 0 0;
}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:0.86rem; color:var(--color-muted);
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--color-muted); transition:color .2s var(--ease);}
.breadcrumb a:hover{color:var(--color-accent);}
.breadcrumb .sep{color:var(--color-border);}
.breadcrumb .current{color:var(--color-accent); font-weight:600;}

/* =========================================================
   PAGE / SERVICE HERO
========================================================= */
.page-hero{padding:32px 0 80px;}
.page-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  color:var(--color-accent);
  font-weight:700; font-size:1.1rem;
  margin-bottom:20px;
}
.page-hero h1{margin-bottom:18px;}
.page-hero-desc{max-width:480px; margin-bottom:24px;}

.checklist{display:flex; flex-direction:column; gap:12px;}
.checklist li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.95rem; font-weight:500; color:var(--color-text);
}
.checklist li::before{
  content:'✓';
  flex:0 0 20px; width:20px; height:20px;
  border-radius:50%;
  background:var(--color-accent-soft);
  color:var(--color-accent);
  font-size:0.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}

/* device + photo mockups (placeholders built from CSS, swap for real screenshots/photos) */
.hero-visual{position:relative;}
.hero-visual .hero-dots{position:absolute; right:0; top:-10%; left:auto; bottom:auto; opacity:.4;}
.device-mock{
  position:relative;
  background:var(--color-accent-soft);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
}
.laptop{
  width:78%;
  background:#1B1E36;
  border-radius:10px 10px 0 0;
  padding:10px 10px 0;
  box-shadow:0 20px 40px rgba(17,20,42,0.12);
}
.laptop-screen{
  background:#fff;
  border-radius:6px 6px 0 0;
  padding:14px;
  min-height:170px;
}
.laptop-bar{height:8px; border-radius:4px; background:var(--color-border); margin-bottom:8px;}
.laptop-bar.w60{width:60%;}
.laptop-bar.w40{width:40%;}
.laptop-bar.w80{width:80%;}
.laptop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
.laptop-chip{background:var(--color-accent-soft); border-radius:6px; height:38px;}
.laptop-base{height:8px; background:#2A2E4D; border-radius:0 0 8px 8px;}
.phone-mock{
  position:absolute; right:6%; bottom:14%;
  width:78px; height:150px;
  background:#1B1E36;
  border-radius:14px;
  padding:6px;
  box-shadow:0 14px 28px rgba(17,20,42,0.16);
}
.phone-screen{background:#fff; border-radius:9px; height:100%; padding:8px 6px;}
.phone-bar{height:5px; border-radius:3px; background:var(--color-border); margin-bottom:5px;}

.photo-mock{
  position:relative;
  border-radius:var(--radius-lg);
  min-height:340px;
  background:linear-gradient(135deg,#191D34,#0E1024);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#6C72A8;
  text-align:center;
  overflow:hidden;
}
.photo-mock::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(91,95,239,0.18), transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(91,95,239,0.12), transparent 45%);
}
.photo-mock .photo-icon{font-size:2.4rem; margin-bottom:10px; position:relative;}
.photo-mock .photo-label{font-size:0.85rem; font-weight:600; position:relative; max-width:240px;}

/* small floating info card (used on About + Services pages) */
.float-card{
  position:absolute;
  bottom:-28px; left:-24px;
  background:var(--color-card);
  border-radius:var(--radius-md);
  padding:18px 20px;
  box-shadow:var(--shadow-card-hover);
  display:flex; gap:14px; align-items:flex-start;
  max-width:280px;
  border-left:3px solid var(--color-accent);
}
.float-card .about-icon{flex:0 0 40px; width:40px; height:40px;}
.float-card h4{font-size:0.92rem; margin-bottom:4px;}
.float-card p{font-size:0.84rem; margin:0;}

/* =========================================================
   "WHAT I DO" GRID (service detail pages)
========================================================= */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.detail-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.detail-card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:26px 24px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.detail-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card-hover); border-color:transparent;}
.detail-card .about-icon{margin-bottom:16px;}
.detail-card h3{margin-bottom:8px;}
.detail-card p{font-size:0.88rem;}

/* =========================================================
   APPROACH TIMELINE (vertical numbered steps)
========================================================= */
.approach-steps{position:relative;}
.approach-steps li{
  position:relative;
  display:flex; gap:18px;
  padding-bottom:30px;
}
.approach-steps li:last-child{padding-bottom:0;}
.approach-steps li::before{
  content:'';
  position:absolute; left:18px; top:38px; bottom:0;
  width:1px;
  background:var(--color-border);
}
.approach-steps li:last-child::before{display:none;}
.step-num{
  flex:0 0 36px; width:36px; height:36px;
  border-radius:50%;
  background:var(--color-accent-soft);
  color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem;
  position:relative; z-index:1;
}
.approach-steps h4{font-size:0.98rem; margin-bottom:4px;}
.approach-steps p{font-size:0.88rem;}

/* horizontal approach (used on service/project pages bottom) */
.approach-horizontal{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  text-align:center;
  position:relative;
}
.approach-horizontal::before{
  content:'';
  position:absolute; top:24px; left:8%; right:8%;
  height:1px; background:var(--color-border); z-index:0;
}
.approach-horizontal .step{position:relative; z-index:1; padding:0 6px;}
.approach-horizontal .step-num{margin:0 auto 16px;}
.approach-horizontal h4{font-size:0.92rem; margin-bottom:6px;}
.approach-horizontal p{font-size:0.8rem;}

/* =========================================================
   TAG PILLS (modules / areas of expertise)
========================================================= */
.tag-pills{display:flex; flex-wrap:wrap; gap:12px;}
.tag-pill{
  padding:12px 18px;
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:0.88rem; font-weight:600; color:var(--color-text);
  text-align:center;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tag-pill:hover{background:var(--color-accent-soft); color:var(--color-accent); border-color:transparent;}

.callout-box{
  background:var(--color-bg-alt);
  border-radius:var(--radius-md);
  padding:24px;
  margin-top:24px;
  display:flex; gap:16px;
}
.callout-box .about-icon{flex:0 0 44px; width:44px; height:44px;}
.callout-box h4{margin-bottom:10px;}
.callout-list{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.callout-list li{
  font-size:0.86rem; color:var(--color-body);
  display:flex; gap:8px; align-items:flex-start;
}
.callout-list li::before{content:'✓'; color:var(--color-accent); font-weight:700;}

/* =========================================================
   TECH GRID (logo cards, used on service detail pages)
========================================================= */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.tech-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.tech-card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:18px 12px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:0.84rem; font-weight:600; color:var(--color-text);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tech-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.tech-card .glyph{
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.8rem;
}

/* =========================================================
   GENERIC SECTION SPACING HELPERS
========================================================= */
.section{padding:80px 0;}
.section.alt{background:var(--color-bg-alt);}
.section-intro{max-width:560px; margin-bottom:40px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.two-col.gap-lg{gap:64px;}

/* =========================================================
   EXPERIENCE TIMELINE
========================================================= */
.exp-overview{
  background:var(--color-bg-alt);
  border-radius:var(--radius-lg);
  padding:32px;
}
.exp-overview-item{
  display:flex; gap:14px;
  padding-bottom:22px; margin-bottom:22px;
  position:relative;
}
.exp-overview-item::before{
  content:'';
  position:absolute; left:18px; top:42px; bottom:-22px;
  width:1px; background:var(--color-border);
}
.exp-overview-item:last-child{padding-bottom:0; margin-bottom:0;}
.exp-overview-item:last-child::before{display:none;}
.exp-overview-item .icon-circle{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  background:var(--color-card); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; position:relative; z-index:1;
  box-shadow:0 2px 6px rgba(17,20,42,0.06);
}
.exp-overview-item h4{font-size:0.94rem; margin-bottom:4px;}
.exp-overview-item p{font-size:0.84rem;}

.timeline{position:relative;}
.timeline-item{
  display:grid;
  grid-template-columns:110px 32px 1fr;
  gap:24px;
  margin-bottom:36px;
  align-items:start;
}
.timeline-item:last-child{margin-bottom:0;}
.timeline-date{font-weight:700; color:var(--color-accent); font-size:0.92rem;}
.timeline-date span{display:block; font-weight:500; color:var(--color-muted); font-size:0.8rem; margin-top:2px;}
.timeline-dot-col{display:flex; justify-content:center; position:relative;}
.timeline-dot-col::before{
  content:''; position:absolute; top:20px; bottom:-36px; width:1px; background:var(--color-border);
}
.timeline-item:last-child .timeline-dot-col::before{display:none;}
.timeline-dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--color-accent);
  border:3px solid var(--color-accent-soft);
  margin-top:6px; position:relative; z-index:1;
}
.timeline-card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:24px 28px;
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:20px;
  align-items:start;
}
.timeline-icon{
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--color-accent-soft); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.timeline-card h3{margin-bottom:2px;}
.timeline-card .company{color:var(--color-accent); font-size:0.88rem; font-weight:600; margin-bottom:10px; display:block;}
.timeline-card .desc{font-size:0.88rem; margin-bottom:0;}
.timeline-card .check-list{display:flex; flex-direction:column; gap:8px;}
.timeline-card .check-list li{font-size:0.84rem; color:var(--color-body); display:flex; gap:6px;}
.timeline-card .check-list li::before{content:'✓'; color:var(--color-accent); font-weight:700;}

/* stat-grid (achievements / overview numbers) */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.stat-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.stat-card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:22px;
  text-align:center;
}
.stat-card .stat-icon-circle{
  width:42px; height:42px; border-radius:50%;
  background:var(--color-accent-soft); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; font-size:1rem;
}
.stat-card strong{display:block; font-size:1.5rem; font-weight:800;}
.stat-card p{font-size:0.8rem; margin-top:4px;}

/* =========================================================
   ABOUT PAGE specific
========================================================= */
.about-hero-grid{display:grid; grid-template-columns:1fr 0.9fr; gap:48px; align-items:center;}
.about-hero-image{position:relative;}
.about-hero-image img{border-radius:var(--radius-lg);}
.role-tags{font-size:0.95rem; color:var(--color-accent); font-weight:600; margin-bottom:16px;}
.role-tags span{color:var(--color-muted); margin:0 6px;}
.journey-track{display:flex; justify-content:space-between; position:relative; margin:0 0 0;}
.journey-track::before{
  content:''; position:absolute; top:30px; left:30px; right:30px; height:1px; background:var(--color-border); z-index:0;
}
.journey-item{flex:1; text-align:center; position:relative; z-index:1; padding:0 8px;}
.journey-icon{
  width:60px; height:60px; border-radius:50%;
  background:var(--color-card); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-size:1.1rem; color:var(--color-accent);
  box-shadow:0 2px 8px rgba(17,20,42,0.04);
}
.journey-item .year{font-size:0.82rem; color:var(--color-accent); font-weight:700; margin-bottom:6px;}
.journey-item h4{font-size:0.92rem; margin-bottom:6px;}
.journey-item p{font-size:0.8rem;}

.philosophy-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.philosophy-cards .detail-card{text-align:left;}

.industry-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; text-align:center;}
.industry-item{display:flex; flex-direction:column; align-items:center; gap:10px;}
.industry-icon{
  width:50px; height:50px; border-radius:var(--radius-sm);
  background:var(--color-accent-soft); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.industry-item span{font-size:0.82rem; font-weight:600; color:var(--color-body);}

/* =========================================================
   SKILLS PAGE specific
========================================================= */
.skill-stats{display:grid; grid-template-columns:repeat(4,auto); gap:32px; margin-top:28px;}
.skill-stats .stat strong{font-size:1.3rem;}
.skill-stats .stat p{margin-top:4px;}

.competency-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.competency-card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:22px;
}
.competency-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.competency-head .left{display:flex; align-items:center; gap:10px;}
.competency-head h3{font-size:0.96rem;}
.competency-head .badge{
  font-size:0.72rem; font-weight:700; color:var(--color-accent);
  background:var(--color-accent-soft); padding:3px 10px; border-radius:var(--radius-pill);
}
.bar-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row .label{font-size:0.8rem; color:var(--color-body); flex:0 0 110px;}
.bar-track{flex:1; height:5px; background:var(--color-border); border-radius:3px; overflow:hidden;}
.bar-fill{height:100%; background:var(--color-accent); border-radius:3px; width:0; transition:width 1.1s var(--ease);}
.bar-row .pct{font-size:0.78rem; color:var(--color-muted); flex:0 0 32px; text-align:right;}

.soft-skill-list li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--color-border);}
.soft-skill-list li:last-child{border-bottom:none; padding-bottom:0;}
.soft-skill-list .about-icon{flex:0 0 40px; width:40px; height:40px;}
.soft-skill-list h4{font-size:0.92rem; margin-bottom:3px;}
.soft-skill-list p{font-size:0.82rem;}

.quote-block{
  background:var(--color-bg-alt); border-radius:var(--radius-md);
  padding:24px 28px; margin-top:24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.quote-block p{font-style:italic; color:var(--color-text); font-size:0.98rem; max-width:560px;}
.quote-block .sig{font-weight:800; color:var(--color-accent); font-size:1.1rem;}

/* =========================================================
   PROJECTS PAGE specific
========================================================= */
.filter-tabs{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px;}
.filter-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  font-size:0.88rem; font-weight:600; color:var(--color-body);
  background:var(--color-card);
  transition:all .2s var(--ease);
}
.filter-tab:hover{border-color:var(--color-accent); color:var(--color-accent);}
.filter-tab.active{background:var(--color-ink); color:#fff; border-color:var(--color-text);}

.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.project-card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card-hover);}
.project-thumb{
  position:relative; height:170px;
  display:flex; align-items:center; justify-content:center;
  color:#6C72A8; font-size:1.8rem;
  background:linear-gradient(135deg,#191D34,#0E1024);
}
.project-thumb.light{background:linear-gradient(135deg,#EEF0FD,#E3E6FB); color:var(--color-accent);}
.project-tag{
  position:absolute; top:14px; left:14px;
  font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.92); color:var(--color-ink);
}
.project-body{padding:22px;}
.project-body h3{margin-bottom:8px; font-size:1rem;}
.project-body p{font-size:0.86rem; margin-bottom:16px;}
.project-stack{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.stack-chip{
  font-size:0.74rem; font-weight:600; color:var(--color-body);
  background:var(--color-bg-alt); padding:5px 10px; border-radius:var(--radius-sm);
}
.project-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.86rem; font-weight:700; color:var(--color-accent);
  transition:gap .2s var(--ease);
}
.project-link:hover{gap:10px;}

.case-study{
  background:var(--color-bg-alt); border-radius:var(--radius-lg);
  padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.case-stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0 0;}
.case-stats-row .stat strong{font-size:1.3rem;}
.case-panels{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.case-panel{background:var(--color-card); border-radius:var(--radius-sm); padding:16px; border:1px solid var(--color-border);}
.case-panel .label{font-size:0.78rem; color:var(--color-muted); margin-bottom:6px;}
.case-panel .value{font-size:1.2rem; font-weight:800;}
.case-panel .delta{font-size:0.76rem; color:#18A957; font-weight:700;}
.case-chart-panel{grid-column:1/3; background:var(--color-card); border-radius:var(--radius-sm); padding:16px; border:1px solid var(--color-border); min-height:120px;}
.case-donut-panel{background:var(--color-card); border-radius:var(--radius-sm); padding:16px; border:1px solid var(--color-border);}

/* =========================================================
   RESPONSIVE — inner pages
========================================================= */
@media (max-width:1080px){
  .detail-grid{grid-template-columns:repeat(2,1fr);}
  .competency-grid{grid-template-columns:repeat(2,1fr);}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(3,1fr);}
  .tech-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .page-hero-grid,.about-hero-grid,.two-col,.case-study{grid-template-columns:1fr;}
  .about-hero-image{order:-1;}
  .philosophy-cards{grid-template-columns:1fr;}
  .journey-track{flex-direction:column; gap:24px;}
  .journey-track::before{display:none;}
  .timeline-item{grid-template-columns:24px 1fr; }
  .timeline-date{grid-column:1/3; display:flex; gap:8px; align-items:baseline;}
  .timeline-card{grid-template-columns:1fr;}
  .stat-grid,.stat-grid.cols-5{grid-template-columns:repeat(2,1fr);}
  .case-stats-row{grid-template-columns:repeat(2,1fr);}
  .approach-horizontal{grid-template-columns:1fr; text-align:left;}
  .approach-horizontal::before{display:none;}
}
@media (max-width:600px){
  .detail-grid,.competency-grid,.project-grid,.tech-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .float-card{position:static; margin-top:16px;}
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .main-nav, .nav-cta{display:none;}
  .menu-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr; text-align:left;}
  .hero-image-wrap{order:-1; margin-bottom:24px;}
  .about-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-inner{padding:32px 24px;}
  .hero{padding:calc(var(--header-h) + 40px) 0 56px;}
}

/* =========================================================
   HEADER-BG TOKEN (translucent blur, flips with theme)
========================================================= */
:root{ --color-header-bg: rgba(255,255,255,0.85); }

/* =========================================================
   DARK MODE — token overrides
   Toggled via [data-theme="dark"] on <html>. Everything above
   this line reads these tokens, so most of the site re-themes
   automatically; a handful of "always white" / "always dark
   navy" elements (buttons, footer, CTA bands, thumbnail tag
   pills) are intentionally excluded above so they stay
   constant across both themes, matching the source designs.
========================================================= */
[data-theme="dark"]{
  --color-text:      #F3F4FA;
  --color-body:       #AEB2C9;
  --color-muted:      #7D82A0;
  --color-bg:         #0A0C1B;
  --color-bg-alt:     #12142A;
  --color-border:     #262A45;
  --color-card:       #151833;
  --color-header-bg:  rgba(10,12,27,0.85);
  --color-accent-soft: rgba(91,95,239,0.16);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.28);
  --shadow-card-hover: 0 16px 32px rgba(0,0,0,0.4);
}
[data-theme="dark"] body{ background:var(--color-bg); }
[data-theme="dark"] .site-header{ background:var(--color-header-bg); border-bottom-color:var(--color-border); }
[data-theme="dark"] .site-header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,0.3); }
[data-theme="dark"] .mobile-nav{ background:var(--color-card); box-shadow:-12px 0 30px rgba(0,0,0,0.4); }
[data-theme="dark"] .mobile-nav a{ color:var(--color-text); border-bottom-color:var(--color-border); }
[data-theme="dark"] .hero-image-bg{ background:var(--color-accent-soft); }
[data-theme="dark"] .laptop-screen,
[data-theme="dark"] .phone-screen{ background:#EDEEF7; } /* device mockups stay light "screens" for realism */
[data-theme="dark"] .device-mock{ background:var(--color-accent-soft); }
[data-theme="dark"] img.tone-for-light{ filter:brightness(0.9); }
[data-theme="dark"] .stack-chip{ background:var(--color-bg-alt); }
[data-theme="dark"] .callout-list li{ color:var(--color-body); }

/* =========================================================
   THEME TOGGLE BUTTON
========================================================= */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--color-border);
  background:transparent;
  color:var(--color-text);
  flex:0 0 auto;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
.header-actions{ display:flex; align-items:center; gap:12px; }

/* =========================================================
   HEADER LOGO LOCKUP (mark + wordmark + subtitle)
========================================================= */
.logo-lockup{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:34px; height:34px; flex:0 0 34px; object-fit:contain; }
.logo-mark.for-dark{ display:none; }
[data-theme="dark"] .logo-mark.for-light{ display:none; }
[data-theme="dark"] .logo-mark.for-dark{ display:block; }
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text .logo-name{ font-size:1.12rem; font-weight:800; letter-spacing:-0.02em; color:var(--color-text); }
.logo-text .logo-sub{ font-size:0.66rem; font-weight:600; letter-spacing:0.03em; color:var(--color-muted); text-transform:uppercase; }
.footer-brand .logo-lockup{ margin-bottom:4px; }
.footer-brand .logo-text .logo-name{ color:#fff; font-size:1.3rem; }
.footer-brand .logo-text .logo-sub{ color:#8C90A8; }

/* =========================================================
   NAV "MORE" DROPDOWN
========================================================= */
.nav-more{ position:relative; }
.nav-more-trigger{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.94rem; font-weight:500; color:var(--color-body);
  padding:8px 0; cursor:pointer;
}
.nav-more-trigger:hover, .nav-more.open .nav-more-trigger{ color:var(--color-text); }
.nav-more-trigger .chev{ transition:transform .2s var(--ease); }
.nav-more.open .nav-more-trigger .chev{ transform:rotate(180deg); }
.nav-more-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card-hover);
  min-width:190px; padding:8px; z-index:50;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.nav-more.open .nav-more-menu{ opacity:1; pointer-events:auto; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-more-menu a{
  display:block; padding:9px 12px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--color-body);
}
.nav-more-menu a:hover{ background:var(--color-bg-alt); color:var(--color-text); }
.mobile-nav .more-group{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--color-border); }
.mobile-nav .more-label{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; color:var(--color-muted); text-transform:uppercase; padding:8px 4px 4px; }

/* =========================================================
   GENERIC ICON / IMAGE PLACEHOLDERS
   (used in place of unicode/emoji glyphs everywhere)
========================================================= */
.icon-ph{
  width:1em; height:1em; display:inline-block; vertical-align:-0.15em;
  color:currentColor;
}
.about-icon.icon-ph-wrap, .service-icon.icon-ph-wrap, .icon-badge.icon-ph-wrap,
.step-num.icon-ph-wrap, .icon-circle.icon-ph-wrap, .stat-icon-circle.icon-ph-wrap{
  color:var(--color-accent);
}
.stat-icon.icon-ph-wrap{ color:var(--color-muted); }
.img-ph{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--color-bg-alt),var(--color-border));
  color:var(--color-muted);
  border-radius:var(--radius-md);
}
.img-ph .img-ph-label{ font-size:0.78rem; font-weight:600; text-align:center; padding:0 16px; max-width:260px; }
.img-ph.img-ph-dark{ background:linear-gradient(135deg,#191D34,#0E1024); color:#6C72A8; }
.img-ph.square{ aspect-ratio:1/1; }
.img-ph.wide{ aspect-ratio:16/9; }
img.real-photo{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* Third-party brand/logo placeholder — swap the <span> for an <img> once
   you have the real logo asset. Deliberately neutral/dashed so it reads
   as "drop an image here", unlike the colored functional icon badges. */
.logo-ph{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  background:var(--color-bg-alt);
  border:1.5px dashed var(--color-border);
  border-radius:10px;
  color:var(--color-muted);
}
.logo-ph svg{ opacity:0.55; }

/* =========================================================
   BLOG
========================================================= */
.blog-hero-search{
  display:flex; align-items:center; gap:10px;
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-pill);
  padding:14px 20px; max-width:520px; margin:24px 0 28px;
}
.blog-hero-search input{ border:none; outline:none; background:transparent; flex:1; font:inherit; color:var(--color-text); }
.blog-topics{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.blog-layout{ display:grid; grid-template-columns:2.2fr 1fr; gap:32px; align-items:start; }
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.blog-card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); }
.blog-card-thumb{ position:relative; height:150px; }
.blog-card-cat{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:0.68rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius-pill); background:var(--color-accent); color:#fff;
}
.blog-card-body{ padding:20px; }
.blog-card-meta{ display:flex; gap:10px; font-size:0.76rem; color:var(--color-muted); margin-bottom:10px; }
.blog-card h3{ font-size:0.98rem; margin-bottom:8px; }
.blog-card p{ font-size:0.85rem; margin-bottom:14px; }
.blog-card-author{ display:flex; align-items:center; justify-content:space-between; }
.blog-card-author .who{ display:flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:600; color:var(--color-text); }
.avatar-ph{ width:26px; height:26px; border-radius:50%; background:var(--color-bg-alt); flex:0 0 26px; }
.blog-sidebar-card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:22px; margin-bottom:20px;
}
.blog-sidebar-card h4{ margin-bottom:16px; }
.popular-post{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-border); }
.popular-post:last-child{ border-bottom:none; }
.popular-post .thumb{ width:52px; height:52px; border-radius:8px; flex:0 0 52px; background:var(--color-bg-alt); }
.popular-post .num{ font-weight:800; color:var(--color-muted); font-size:0.8rem; }
.popular-post h5{ font-size:0.82rem; font-weight:600; margin-bottom:2px; }
.popular-post span{ font-size:0.74rem; color:var(--color-muted); }
.cat-list li{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:0.86rem; color:var(--color-body); }
.cat-list li span.count{ background:var(--color-bg-alt); color:var(--color-muted); font-size:0.72rem; font-weight:700; padding:2px 9px; border-radius:var(--radius-pill); }
.newsletter-form{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.newsletter-form input{ padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); font:inherit; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:36px; }
.pagination a, .pagination span{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:0.86rem; font-weight:600; color:var(--color-body); }
.pagination a.active{ background:var(--color-ink); color:#fff; }
.pagination a:hover{ background:var(--color-bg-alt); }

/* Article page */
.article-header{ max-width:760px; }
.article-cat{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill); background:var(--color-accent-soft); color:var(--color-accent); margin-bottom:16px;
}
.article-meta{ display:flex; gap:18px; font-size:0.86rem; color:var(--color-muted); margin:18px 0 28px; flex-wrap:wrap; }
.article-author-row{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.article-author-row .avatar-ph{ width:44px; height:44px; flex:0 0 44px; }
.article-author-row h4{ font-size:0.92rem; }
.article-author-row p{ font-size:0.8rem; }
.article-layout{ display:grid; grid-template-columns:2.2fr 1fr; gap:40px; align-items:start; }
.article-body{ max-width:720px; }
.article-body h2{ margin:34px 0 14px; font-size:1.35rem; }
.article-body p{ margin-bottom:16px; }
.article-body ul{ margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.article-body ul li{ font-size:0.95rem; color:var(--color-body); display:flex; gap:8px; }
.article-body ul li::before{ content:'✓'; color:var(--color-accent); font-weight:700; }
.code-block{
  background:var(--color-ink); color:#D7DAF0; border-radius:var(--radius-md); padding:18px 20px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.82rem; overflow-x:auto; margin-bottom:20px; line-height:1.7;
}
.code-block .cm{ color:#7D82A0; }
.toc-card ol{ list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:10px; }
.toc-card li{ counter-increment:toc; font-size:0.86rem; color:var(--color-body); display:flex; gap:8px; }
.toc-card li::before{ content:counter(toc); color:var(--color-accent); font-weight:700; }
.toc-card li.active{ color:var(--color-accent); font-weight:700; }
.related-article{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--color-border); }
.related-article:last-child{ border-bottom:none; }
.related-article .thumb{ width:52px; height:52px; border-radius:8px; flex:0 0 52px; background:var(--color-bg-alt); }
.tag-pill.sm{ padding:7px 13px; font-size:0.78rem; }
.share-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.share-icons{ display:flex; gap:8px; }
.share-icons a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-body); }
.share-icons a:hover{ border-color:var(--color-accent); color:var(--color-accent); }

/* =========================================================
   HOMELAB / dashboard-style stat & panel components
========================================================= */
.dash-badges{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.dash-badge{ display:flex; align-items:center; gap:10px; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:12px 16px; }
.dash-badge h5{ font-size:0.82rem; }
.dash-badge p{ font-size:0.74rem; }
.dash-panel{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px; margin-bottom:22px;
}
.dash-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dash-panel-head h3{ font-size:1rem; }
.dash-panel-head a{ font-size:0.82rem; font-weight:700; color:var(--color-accent); }
.dash-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.topo-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topo-node{ display:flex; align-items:center; gap:10px; background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 14px; font-size:0.82rem; font-weight:600; }
.topo-arrow{ color:var(--color-muted); }
.kv-list li{ display:flex; justify-content:space-between; font-size:0.84rem; padding:8px 0; border-bottom:1px solid var(--color-border); color:var(--color-body); }
.kv-list li:last-child{ border-bottom:none; }
.kv-list li span:last-child{ color:var(--color-text); font-weight:600; }
.progress-row{ margin-bottom:14px; }
.progress-row .top{ display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:6px; color:var(--color-body); }
.progress-track{ height:6px; background:var(--color-bg-alt); border-radius:3px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--color-accent); border-radius:3px; }
.container-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--color-border); font-size:0.84rem; }
.container-row:last-child{ border-bottom:none; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:#18A957; display:inline-block; margin-right:6px; }

/* =========================================================
   ARCHITECTURE GALLERY
========================================================= */
.arch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.arch-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.arch-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); }
.arch-thumb{ position:relative; height:130px; }
.arch-cat{ position:absolute; top:10px; left:10px; font-size:0.66rem; font-weight:700; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); background:var(--color-accent); color:#fff; }
.arch-card-body{ padding:16px; }
.arch-card h3{ font-size:0.9rem; margin-bottom:6px; }
.arch-card p{ font-size:0.78rem; margin-bottom:10px; }
.search-input{
  display:flex; align-items:center; gap:8px; background:var(--color-card); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); padding:11px 16px; font-size:0.85rem; color:var(--color-muted);
}

/* =========================================================
   TECHNOLOGY STACK
========================================================= */
.techstack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.techstack-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:22px; }
.techstack-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tech-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
.tech-row .left{ display:flex; align-items:center; gap:10px; font-size:0.86rem; font-weight:600; color:var(--color-text); }
.tech-row .years{ font-size:0.76rem; color:var(--color-muted); }
.dot-level{ display:flex; gap:3px; }
.dot-level span{ width:6px; height:6px; border-radius:50%; background:var(--color-border); }
.dot-level span.on{ background:var(--color-accent); }

/* =========================================================
   CONTACT (secondary layout)
========================================================= */
.contact-hero{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--color-bg-alt); }
.contact-hero-left{ padding:48px; }
.contact-hero-left h1 span{ color:var(--color-accent); }
.contact-hero-map{ position:relative; padding:48px; display:flex; align-items:center; justify-content:center; }
.contact-info-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-info-row .icon-circle{ width:40px; height:40px; border-radius:50%; background:var(--color-card); display:flex; align-items:center; justify-content:center; flex:0 0 40px; color:var(--color-accent); }
.contact-info-row h4{ font-size:0.88rem; }
.contact-info-row p{ font-size:0.84rem; }
.contact-form-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:32px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field label{ display:block; font-size:0.82rem; font-weight:600; color:var(--color-text); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:var(--color-bg); color:var(--color-text); font:inherit;
}
.form-field textarea{ resize:vertical; min-height:110px; }
.contact-meta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:56px 0; text-align:center; }
.contact-meta-grid .item h4{ font-size:0.92rem; margin:12px 0 6px; }
.contact-meta-grid .item p{ font-size:0.82rem; }
.faq-item{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; }
.faq-item-q{
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:0.92rem; font-weight:600; color:var(--color-text); cursor:pointer;
}
.faq-item-q .chev{ flex:0 0 auto; color:var(--color-muted); transition:transform .2s var(--ease); }
.faq-item.open .faq-item-q .chev{ transform:rotate(180deg); color:var(--color-accent); }
.faq-item-a{
  max-height:0; overflow:hidden; transition:max-height .25s var(--ease);
}
.faq-item-a p{ padding:0 20px 18px; font-size:0.87rem; }
.faq-item.open .faq-item-a{ max-height:220px; }

/* =========================================================
   COOKIE CONSENT BANNER
========================================================= */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width:920px; margin:0 auto;
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card-hover);
  padding:20px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  transform:translateY(140%); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease);
  pointer-events:none;
}
.cookie-banner.visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookie-banner-text{ flex:1 1 320px; }
.cookie-banner-text h4{ font-size:0.94rem; margin-bottom:4px; }
.cookie-banner-text p{ font-size:0.82rem; margin:0; }
.cookie-banner-text a{ color:var(--color-accent); font-weight:600; }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner-actions .btn{ padding:10px 18px; font-size:0.84rem; white-space:nowrap; }

/* =========================================================
   404 PAGE
========================================================= */
.error-page{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(var(--header-h) + 90px) 0 110px; }
.error-code{ font-size:clamp(4rem,14vw,7rem); font-weight:800; color:var(--color-accent); line-height:1; letter-spacing:-0.04em; }
.error-page h1{ margin:10px 0 14px; }
.error-page p{ max-width:440px; margin-bottom:32px; }
.error-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* =========================================================
   LEGAL PAGES (Privacy Policy)
========================================================= */
.legal-body{ max-width:760px; }
.legal-body h2{ font-size:1.2rem; margin:32px 0 12px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin-bottom:14px; }
.legal-body ul{ margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.legal-body ul li{ font-size:0.95rem; color:var(--color-body); display:flex; gap:8px; }
.legal-body ul li::before{ content:'•'; color:var(--color-accent); font-weight:700; }
.legal-updated{ font-size:0.82rem; color:var(--color-muted); margin-bottom:28px; }


/* =========================================================
   RESPONSIVE — new components
========================================================= */
@media (max-width:1080px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-layout{ grid-template-columns:1fr; }
  .arch-grid{ grid-template-columns:repeat(2,1fr); }
  .techstack-grid{ grid-template-columns:1fr 1fr; }
  .article-layout{ grid-template-columns:1fr; }
  .dash-grid-2{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .contact-hero{ grid-template-columns:1fr; }
  .contact-meta-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .header-actions .theme-toggle{ order:2; }
  .skill-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .dash-badges{ gap:10px; }
  .dash-badge{ flex:1 1 45%; }
}
@media (max-width:768px){
  /* header: give up on fitting the full subtitle before it can wrap
     and blow past the header's box — this was the root cause of the
     header overlapping page content on phones. */
  .logo-text .logo-sub{ display:none; }
  .logo-mark{ width:28px; height:28px; flex:0 0 28px; }
  .logo-text .logo-name{ font-size:1rem; }
  .header-actions{ gap:8px; }
  .theme-toggle{ width:36px; height:36px; }
  .theme-toggle svg{ width:16px; height:16px; }
  .nav-cta{ display:none; }
}
@media (max-width:600px){
  .arch-grid{ grid-template-columns:1fr; }
  .techstack-grid{ grid-template-columns:1fr; }
  .contact-meta-grid{ grid-template-columns:1fr; }
  .contact-form-card{ padding:22px; }
  .faq-item{ padding:14px 16px; font-size:0.86rem; }
  .cookie-banner{ flex-direction:column; align-items:stretch; padding:18px; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; justify-content:center; }
}

/* =========================================================
   GLOBAL MOBILE-OVERFLOW SAFETY NET
   Several composite widgets (dashboards, code blocks, marquees)
   are wider than a phone viewport by design; this guarantees a
   stray element can never push the whole page into horizontal
   scroll / leave dead whitespace on the right.
========================================================= */
html, body{ max-width:100%; overflow-x:hidden; }
.container{ max-width:100%; }
img, svg{ max-width:100%; }
.code-block, .kv-list, table{ max-width:100%; }