/* Missing Tailwind utilities added for static HTML */
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:gap-4 { gap: 1rem; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .sm\:gap-3 { gap: 0.75rem; }
}
.gap-2 { gap: 0.5rem; }
.soc-link { transition: all 0.2s; }
.soc-link:hover { background: var(--background); color: var(--foreground); }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.w-12 { width: 3rem; }
.link-underline.filter-on:after { transform-origin: 0; transform: scaleX(1); }
#portfolio .flex-wrap button { cursor: pointer; }
#gallery-grid button { cursor: pointer; }
#portfolio .mt-14.grid { transition: opacity 0.35s ease; }
.hero-content { padding-top: 26vh; text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5); }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.hero-slide-img.active { opacity: 1; }
.hero-text-line { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hero-text-line.show { opacity: 1; transform: translateY(0); }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.5); cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0; }
.hero-dot.active { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); transform: scale(1.2); }
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.why-card { transition: background-color 0.5s ease; }
.why-card:hover { background-color: rgba(255,255,255,0.06); }
.t-text { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.t-text.show { opacity: 1; transform: translateY(0); }
.t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0; }
.t-dot.active { background: var(--foreground); transform: scale(1.3); }
.t-dot:hover { background: var(--muted-foreground); }
header.scrolled { background-color: rgba(250,250,248,0.85) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
#duk button[aria-expanded] { cursor: pointer; }
#duk button[aria-expanded]:hover span { color: var(--foreground); }