/* Custom utilities & components on top of Tailwind */
:root {
  --ring: 0 0% 0%;
  --text-shadow-strong: 0 2px 4px rgba(0,0,0,0.25);
  --text-shadow-soft: 0 1px 2px rgba(0,0,0,0.25);
  --box-shadow-strong: 0 18px 30px rgba(43, 52, 93, .75);
  --box-shadow-soft: 0 8px 16px rgba(43, 52, 93, .75);
}

/* Plain site background (removed global image) */
body {
  background-color: #ffffff;
}

.section { padding: 4rem 0; }
.section.alt { background: #f8fafc; }
.section-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.section-title { font-size: 1.875rem; font-weight: 800; color: #0f172a; }
.section-sub { color: #475569; margin-top: .5rem; }

.card { border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; background: #ffffff; box-shadow: var(--box-shadow-soft); }
.card-title { font-weight: 700; color: #0f172a; }
.card-text { color: #475569; margin-top: .25rem; }

.placeholder-card { height: 10rem; border: 1px dashed #cbd5e1; border-radius: .75rem; background: linear-gradient(135deg,#f1f5f9,#fff); box-shadow: var(--box-shadow-soft); }

.btn-primary { display:inline-block; background:#5b6bff; color:#fff; padding:.625rem 1rem; border-radius:.5rem; font-weight:600; box-shadow: var(--box-shadow-soft); }
.btn-primary:hover { background:#4451e6; box-shadow: var(--box-shadow-strong); }
.btn-secondary { display:inline-block; background:#e2e8f0; color:#0f172a; padding:.625rem 1rem; border-radius:.5rem; font-weight:600; box-shadow: var(--box-shadow-soft); }
.btn-secondary:hover { background:#cbd5e1; box-shadow: var(--box-shadow-strong); }

/* Instagram link text shadow */
#contact_ig { text-shadow: var(--text-shadow-strong); }
#contact_ig:hover { text-shadow: 0 3px 6px rgba(0,0,0,0.35); }

/* Portfolio thumbnails: 90% shadow */
#portfolio .card img { box-shadow: 0 12px 24px rgba(43, 52, 93, .90); }

/* Portfolio inner containers: 75% shadow */
.thumb-box { box-shadow: 0 16px 28px rgba(43, 52, 93, .75); }

.counter-reset-steps { counter-reset: step; }
.step { border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; background: #ffffff; position: relative; box-shadow: var(--box-shadow-soft); }
.step-title { font-weight:700; padding-left: 2.25rem; }
.step-title::before { counter-increment: step; content: counter(step); position:absolute; left:.75rem; top:.75rem; width:1.5rem; height:1.5rem; border-radius:.375rem; background:#e2e8f0; color:#0f172a; display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:700; }
.step-text { color:#475569; margin-top:.25rem; padding-left:2.25rem; }

/* Simple focus styling */
:focus-visible { outline: 2px solid #5b6bff; outline-offset: 2px; }

/* Global text shadows (25% opacity) for headings and readable text */
h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .step-title {
  text-shadow: var(--text-shadow-strong);
}

p, li, .section-sub, .card-text, .step-text {
  text-shadow: var(--text-shadow-soft);
}

/* Header items: brand, nav links, language toggles */
header #t_brand,
header nav a,
#mobileNav a,
header #langToggle,
#langToggleMobile {
  text-shadow: var(--text-shadow-strong);
}

/* 3D effect for hero logo */
.hero-3d { perspective: 1000px; box-shadow: 0 16px 32px rgba(43, 52, 93, .75); }
.hero-3d .three-d {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform .3s ease, filter .3s ease;
}

/* 3D tilt for portfolio cards */
.tilt { perspective: 1000px; }
.tilt .tilt-inner {
  transform-style: preserve-3d;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.tilt:hover .tilt-inner { will-change: transform; }
 /* Apply static hover 3D only when tilt JS is not used */
 .hero-3d:not(.tilt):hover .three-d { transform: rotateX(6deg) rotateY(-8deg) translateZ(8px); }
.hero-3d .three-d img {
  border-radius: .75rem;
  box-shadow: 0 18px 30px rgba(43, 52, 93, .75), 0 8px 14px rgba(43, 52, 93, .75);
}
@media (prefers-reduced-motion: reduce) {
  .hero-3d .three-d { transition: none; transform: none; }
}