/* HERO */
.hero{
  padding-top: clamp(32px, 5vw, 58px);
}
.hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px;
  align-items:stretch;
}

.hero__left{
  padding: clamp(18px, 3.6vw, 34px);
  display:flex; flex-direction:column; gap: 14px;
  min-width:0;
}

.kicker{
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--muted2));
}
.kicker .slash{
  color: color-mix(in srgb, var(--accent2) 80%, var(--muted2));
}

.headline{
  margin:0;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.headline .grad{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--accent) 20%, transparent));
}

.lead{
  margin:0;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 70ch;
}

.meta{
  display:flex; flex-wrap:wrap;
  gap: 10px;
  margin-top: 4px;
}

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  font-family: var(--mono);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--txt) 86%, transparent);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.chip i{ color: var(--muted2); }
.chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

/* Right panel with “terminal” */
.hero__right{
  padding: 0;
  display:flex; flex-direction:column;
  min-width:0;
}
.terminal{
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  padding: 16px 16px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--txt) 86%, transparent);
  line-height: 1.65;
  overflow-wrap:anywhere;
}
.t-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card2) 70%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}
.dots{ display:flex; gap:8px; align-items:center; }
.dot{ width:10px; height:10px; border-radius:999px; opacity:.9; }
.dot.r{ background: rgba(255,120,120,.9); }
.dot.y{ background: rgba(255,211,107,.92); }
.dot.g{ background: rgba(182,255,107,.85); }

.cmd{ color: color-mix(in srgb, var(--accent2) 80%, var(--txt)); }
.out{ color: color-mix(in srgb, var(--txt) 78%, transparent); }
.hint{ color: color-mix(in srgb, var(--accent) 85%, var(--txt)); }

/* Mini cards */
.mini-card{
  padding: 16px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow2);
  transform-style:preserve-3d;
  transition: transform var(--t), border-color var(--t), background var(--t);
  position:relative;
  overflow:hidden;
  min-width:0;
}
.mini-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.mini-card .icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card2) 90%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: translateZ(20px);
}
.mini-card .icon i{ font-size: 18px; color: color-mix(in srgb, var(--accent) 80%, var(--txt)); }

.mini-card h3{
  margin: 12px 0 6px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.mini-card p{
  margin:0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Projects cards with 3D tilt */
.project{
  padding: 0;
}
.project__top{
  padding: 16px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card2) 70%, transparent);
}
.project__name{
  margin:0;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.project__stack{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 52ch;
}
.project__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: color-mix(in srgb, var(--txt) 85%, transparent);
  flex:0 0 auto;
}
.project__body{
  padding: 16px;
  display:flex; flex-direction:column; gap: 10px;
}
.project__desc{
  margin:0;
  color: var(--muted);
  font-size: 13.8px;
  line-height: 1.65;
}
.project__actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 2px;
}

/* Model viewer section */
.modelWrap{
  padding: 0;
}
.modelHead{
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card2) 70%, transparent);
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  flex-wrap:wrap;
}
.modelTitle{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.modelTitle h3{ margin:0; font-size: 15.5px; letter-spacing:-.01em; }
.modelTitle .sub{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 60ch;
}
.modelBody{
  padding: 16px;
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  align-items:stretch;
}
model-viewer{
  width: 100%;
  height: 420px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.modelSide{
  display:flex; flex-direction:column; gap: 12px;
  min-width:0;
}
.kv{
  padding: 14px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow2);
}
.kv .k{ font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing:.12em; text-transform:uppercase; }
.kv .v{ margin-top: 8px; color: var(--muted); font-size: 13.8px; line-height: 1.6; }

.fileRow{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
  margin-top: 10px;
}
.file{
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card2) 70%, transparent);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--txt);
  width: min(360px, 100%);
}

/* Contact */
.contactBox{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.contactItem{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: 14px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow2);
  min-width:0;
}
.contactLeft{
  min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.contactLabel{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.contactValue{
  font-family: var(--mono);
  font-size: 13.5px;
  color: color-mix(in srgb, var(--txt) 86%, transparent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* =========================
   RESPONSIVE FIXES (critical)
   These MUST be in home.css because it loads after styles.css.
   ========================= */

/* Hero MUST stack */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .hero__left{
    padding: 18px !important;
  }

  .hero__cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hero__cta .btn{
    width: 100% !important;
    justify-content: center !important;
  }

  .modelBody{
    grid-template-columns: 1fr !important;
  }
  model-viewer{
    height: 360px !important;
  }
}

/* Small phones */
@media (max-width: 720px){
  .headline{
    font-size: clamp(24px, 7vw, 40px) !important;
  }
  .lead{
    font-size: 14.5px !important;
  }

  .t-head{
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .contactBox{
    grid-template-columns: 1fr !important;
  }
  .contactItem{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .contactItem .btn,
  .contactItem a.btn{
    width: 100% !important;
    justify-content: center !important;
  }
  .contactValue{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap:anywhere !important;
  }
}

/* Ultra small */
@media (max-width: 420px){
  model-viewer{
    height: 320px !important;
  }
}

/* =========================
   HOME mobile responsiveness
   Paste at END of home.css
   ========================= */

/* If home.css loads after styles.css, it overrides your responsive rules.
   So we re-apply them HERE (last wins). */

@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr;
  }

  .hero__left{
    padding: 18px;
  }

  .headline{
    font-size: clamp(24px, 7vw, 40px);
  }

  .hero__cta{
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .btn{
    width: 100%;
    justify-content: center;
  }

  /* model section also needs to stack */
  .modelBody{
    grid-template-columns: 1fr;
  }

  model-viewer{
    height: 380px;
  }
}

@media (max-width: 720px){
  /* contact grid to 1 column */
  .contactBox{
    grid-template-columns: 1fr;
  }

  .contactItem{
    flex-direction: column;
    align-items: flex-start;
  }

  .contactItem .btn,
  .contactItem a.btn{
    width: 100%;
    justify-content: center;
  }

  .contactValue{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px){
  model-viewer{
    height: 320px;
  }
}

/* =========================
   FIX: Reveal visibility (DB content was rendering but staying invisible)
   Put this at the VERY END of home.css
   ========================= */

/* Default hidden state (only if your styles.css uses reveal animations) */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
  }

  /* Support all common “visible” class names */
  .reveal.is-in,
  .reveal.in,
  .reveal.show{
    opacity: 1;
    transform: none;
  }
}

/* If animations are reduced, always show */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================
   FIX: remove blur from reveal animations (styles.css likely has filter: blur())
   ========================= */
.reveal {
  filter: none;
}

.reveal.is-in,
.reveal.in,
.reveal.show {
  filter: none !important;
}