:root{
  --bg:#f7f6f3;
  --text:#1c1f23;
  --muted:#5c6670;
  --tile:122px;
  --tile-tech:142px;
  --accent:#2b7cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Full-screen hero centered */
.hero{
  min-height:100svh;
  display:grid;
  place-content:center;
  text-align:center;
  padding:24px 16px;
  position:relative;
}
.hero-title{
  font-family:"Canela Text","Times New Roman",serif;
  font-weight:600; letter-spacing:.2px;
  margin:0 0 8px;
  font-size:clamp(3rem,8vw,5.6rem);
  line-height:1.02;
}
.hero-tag{
  margin:0; color:var(--muted);
  font-size:clamp(1.05rem,2.5vw,1.6rem);
}
.scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-size:.8rem; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase;
}

/* Content wrapper */
.wrap{max-width:1600px;margin:0 auto;padding:0 14px 72px}

/* Titles */
.stack-title{
  font-family:"Canela Text", serif;
  font-weight:600;
  text-align:center;
  margin:28px 0 10px;
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:.2px;
}
.stack{display:grid;gap:34px}
.row{display:grid;gap:12px}
.section-title{
  font-size:.95rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;margin:0 auto 4px;text-align:center
}

/* Grids */
.grid-dev{
  display:grid;
  grid-template-columns:repeat(4, var(--tile-tech));
  grid-auto-rows:var(--tile-tech);
  justify-content:center;
  gap:14px;
  perspective:900px;
}
@media (max-width: 980px){ .grid-dev{ grid-template-columns:repeat(3, var(--tile-tech)); } }
@media (max-width: 680px){ .grid-dev{ grid-template-columns:repeat(2, var(--tile-tech)); } }

.grid-design{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:0 6px;
  perspective:900px;
}

/* Invisible tiles */
.tech{
  position:relative;
  width:var(--tile);height:var(--tile);
  display:grid;place-items:center;
  background:transparent;border:none;border-radius:0;box-shadow:none;
  text-decoration:none;transform-style:preserve-3d;will-change:transform;
}
.grid-dev .tech{ width:var(--tile-tech); height:var(--tile-tech); }

.tech img{
  width:72px;height:72px;object-fit:contain;display:block;
  filter:grayscale(1) contrast(1.06) saturate(0);
  transition:filter .25s ease;
}
.grid-dev .tech img{ width:84px; height:84px; }

.tech:hover img{ filter:none; }

.label{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-size:13px;color:var(--muted);letter-spacing:.2px
}

@media (prefers-reduced-motion: reduce){
  .tech img{transition:none}
}
/* Default: desktop/tablet shows dynamic, hides static */
.stack-dynamic { display: block; }
.stack-static  { display: none; }

/* Mobile: hide dynamic, show static */
@media (max-width: 640px){
  .stack-dynamic { display: none; }
  .stack-static  { display: block; }
}

/* Static grid styling (mobile only but safe globally) */
.stack-static .stack-grid{
  list-style: none;
  margin: 16px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
@media (min-width: 420px){
  .stack-static .stack-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.stack-static .stack-grid a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.stack-static .stack-grid img{
  width: 32px; height: 32px; object-fit: contain; display: block;
}

.stack-static .stack-grid span{
  font-size: 0.95rem;
  color: var(--muted, #6b7280);
}

/* ---- Mobile Tech Stack: show the static block & its headings ---- */

/* Ensure we really hide the dynamic version on phones */
@media (max-width: 640px){
  .stack-dynamic { display: none !important; }
  .stack-static  { display: block !important; }
}

/* Force the titles inside the static section to be visible and styled */
#stack-static .stack-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center;
  font-family: "Canela Text", serif;
  font-weight: 600;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.1;
  margin: 8px 0 14px;
  color: #111;
}

#stack-static .section-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin: 12px 0 8px;
}

/* Keep your existing static grid styles */
#stack-static .stack-grid{
  list-style: none;
  margin: 16px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
@media (min-width: 420px){
  #stack-static .stack-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
#stack-static .stack-grid a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none;
  background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
#stack-static .stack-grid img{ width: 32px; height: 32px; object-fit: contain; display: block; }
#stack-static .stack-grid span{ font-size: 0.95rem; color: var(--muted, #6b7280); }
/* Ensure we really use the static stack on phones */
@media (max-width: 640px){
  .stack-dynamic { display: none !important; }
  .stack-static  { display: block !important; }
}

/* Mobile-static headings (use unique classes to avoid any conflicts) */
@media (max-width: 640px){
  #stack-static .mstack-title{
    display: block !important;
    text-align: center;
    font-family: "Canela Text", serif;
    font-weight: 600;
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.1;
    margin: 10px 0 14px;
    color: #111;
  }
  #stack-static .mstack-kicker{
    display: block !important;
    text-align: center;
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
    margin: 12px 0 8px;
  }
}

@media (max-width: 640px){
  #stack-static h2.mstack-kicker{
    font-family: "Canela Text", "Canela", Georgia, serif !important;
    font-weight: 600;
    font-size: clamp(32px, 6.5vw, 48px);
    line-height: 1.1;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 10px 0 14px;
    color: #111;
  }
}