/* ==========================================================
   Konceptualni prikazi web stranica (portfolio i hero)
   Jedinica 1em je vezana uz širinu zaslona uređaja (cqw),
   pa se cijeli prikaz proporcionalno skalira.
   ========================================================== */

.ms {
  height: 100%;
  overflow: hidden;
  font-size: 1.25cqw;
  line-height: 1.4;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  user-select: none;
  pointer-events: none;
}
.ms i { font-style: normal; }
.ms b { font-weight: 600; }

/* --- Zajednički elementi mobilnog prikaza --- */
.ms--m { font-size: 4cqw; display: flex; flex-direction: column; }
.m-status {
  flex: none;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4em 2em 0;
  font-size: 0.8em;
  font-weight: 600;
}
.m-icons { width: 2.1em; height: 0.95em; border: 0.12em solid currentColor; border-radius: 0.3em; opacity: 0.8; position: relative; }
.m-icons::after { content: ""; position: absolute; inset: 0.12em 35% 0.12em 0.12em; background: currentColor; border-radius: 0.1em; }
.m-burger { margin-left: auto; display: flex; flex-direction: column; gap: 0.35em; }
.m-burger i { display: block; width: 1.45em; height: 0.13em; background: currentColor; border-radius: 1em; }

/* ---------------- TORQUE — autoservis ---------------- */
.t { background: #111214; color: #f2f2f2; }
.t-nav {
  display: flex;
  align-items: center;
  gap: 3em;
  height: 5em;
  padding: 0 4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.t-logo { display: flex; align-items: center; gap: 0.35em; font-weight: 700; letter-spacing: 0.1em; font-size: 1.2em; }
.t-logo b { width: 0.45em; height: 0.45em; background: #ff5a1f; border-radius: 50%; }
.t-links { margin-left: auto; display: flex; gap: 2.2em; color: #9a9aa2; font-size: 0.95em; }
.t-btn {
  background: #ff5a1f;
  color: #111214;
  font-weight: 700;
  font-size: 0.9em;
  padding: 0.85em 1.4em;
  border-radius: 0.35em;
  white-space: nowrap;
}
.t-btn--block { display: block; text-align: center; padding: 1em; }
.t-ghost { border: 1px solid rgba(255, 255, 255, 0.22); padding: 0.85em 1.4em; border-radius: 0.35em; font-size: 0.9em; font-weight: 600; }
.t-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: center;
  padding: 3.5em 4em 3em;
}
.t-kicker { font-size: 0.8em; letter-spacing: 0.2em; text-transform: uppercase; color: #ff5a1f; font-weight: 700; }
.t-title {
  margin-top: 0.9em;
  font-size: 4em;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.t-title span { color: #ff5a1f; }
.t-text { margin-top: 1.4em; color: #9a9aa2; line-height: 1.5; max-width: 30em; }
.t-ctas { margin-top: 2em; display: flex; gap: 1em; }
.t-visual { position: relative; aspect-ratio: 1.3; display: grid; place-items: center; }
.t-ring {
  position: absolute;
  inset: 4% 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 90, 31, 0.45);
  background: radial-gradient(closest-side, rgba(255, 90, 31, 0.16), transparent);
}
.t-car { position: relative; width: 100%; }
.t-car__body { stroke: #f2f2f2; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.t-car__win { stroke: #ff5a1f; stroke-width: 2.5; fill: rgba(255, 90, 31, 0.1); stroke-linejoin: round; }
.t-car__line { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }
.t-car__wheel { stroke: #f2f2f2; stroke-width: 3; fill: #111214; }
.t-car__hub { fill: #ff5a1f; }
.t-car__ground { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; stroke-dasharray: 6 6; }
.t-stamp {
  position: absolute;
  right: 0; top: 4%;
  padding: 0.8em 1em;
  font-size: 0.85em;
  line-height: 1.3;
  color: #9a9aa2;
  background: #1b1c1f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5em;
}
.t-stamp b { color: #f2f2f2; }
.t-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 0 4em; }
.t-card {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 1.3em;
  background: #18191c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.6em;
}
.t-card span { font-size: 0.8em; font-weight: 700; color: #ff5a1f; }
.t-card b { font-size: 1.1em; }
.t-card i { font-size: 0.85em; color: #8a8a93; }

.tm .t-nav { padding: 0 1.4em; height: 3.6em; gap: 0; }
.tm-hero { padding: 1.8em 1.4em 1.2em; }
.tm .t-title { font-size: 2.55em; margin-top: 0.55em; }
.tm-visual { margin: 1.3em -0.4em 1.2em; }
.tm-list { padding: 0 1.4em; display: grid; gap: 0.6em; }
.tm .t-card { flex-direction: row; align-items: center; gap: 0.9em; padding: 1em; }

/* ---------------- ATELIER MIRA — salon ljepote ---------------- */
.mi { background: #f3ece4; color: #2a1f1b; }
.mi-nav { display: flex; align-items: center; gap: 3em; height: 5em; padding: 0 4em; }
.mi-logo { font-family: var(--font-serif); font-size: 1.6em; letter-spacing: -0.01em; white-space: nowrap; }
.mi-logo i { font-style: italic; color: #b07a63; }
.mi-links { margin-left: auto; display: flex; gap: 2.2em; font-size: 0.9em; color: #6f5d55; }
.mi-btn {
  background: #2a1f1b;
  color: #f3ece4;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.mi-btn--block { display: block; text-align: center; padding: 1em; }
.mi-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; align-items: center; padding: 2.5em 4em 2.5em; }
.mi-kicker { font-size: 0.78em; letter-spacing: 0.22em; text-transform: uppercase; color: #a06a54; font-weight: 600; }
.mi-title { margin-top: 0.3em; font-family: var(--font-serif); font-size: 5em; line-height: 1.02; letter-spacing: -0.02em; }
.mi-title i { font-style: italic; color: #b07a63; }
.mi-text { margin-top: 1.2em; color: #6f5d55; line-height: 1.55; max-width: 28em; }
.mi-ctas { margin-top: 2em; display: flex; align-items: center; gap: 1.6em; }
.mi-link { font-size: 0.9em; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 0.15em; }
.mi-art { position: relative; height: 27em; }
.mi-arch {
  position: absolute;
  inset: 0 8% 0 14%;
  overflow: hidden;
  border-radius: 999em 999em 0.8em 0.8em;
  background: linear-gradient(180deg, #ead3c4, #d6a891 72%, #c48f77);
}
.mi-sun { position: absolute; left: 30%; top: 20%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #f7e6da; }
.mi-leaf { position: absolute; width: 58%; height: 62%; bottom: -12%; border-radius: 0 100% 0 100%; }
.mi-leaf--1 { left: -14%; background: #8f5f4c; transform: rotate(8deg); }
.mi-leaf--2 { right: -20%; bottom: -22%; background: #a9725b; transform: scaleX(-1) rotate(8deg); }
.mi-note {
  position: absolute;
  left: 0; bottom: 12%;
  padding: 0.9em 1.2em;
  font-size: 0.85em;
  background: #fffaf5;
  border-radius: 0.7em;
  box-shadow: 0 1em 2em -1em rgba(42, 31, 27, 0.3);
}
.mi-note b { color: #a06a54; margin-right: 0.4em; }
.mi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3em; margin: 0 4em; border-top: 1px solid rgba(42, 31, 27, 0.15); }
.mi-row div { display: flex; justify-content: space-between; align-items: baseline; padding: 1.3em 0; }
.mi-row b, .mim-list b { font-family: var(--font-serif); font-weight: 400; font-size: 1.45em; }
.mi-row i, .mim-list i { font-size: 0.85em; color: #8a766c; }

.mim > :not(.m-status) { margin-inline: 1.4em; }
.mim .mi-nav { padding: 0; height: 3.4em; gap: 0; }
.mim .mi-logo { font-size: 1.35em; }
.mim-art { position: relative; flex: none; height: 17em; margin-top: 0.4em; }
.mim .mi-arch { inset: 0; }
.mim .mi-kicker { margin-top: 1.5em; }
.mim .mi-title { font-size: 2.85em; }
.mim .mi-btn--block { margin-top: 1.3em; }
.mim-list { margin-top: 1.3em; }
.mim-list div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.8em 0; border-top: 1px solid rgba(42, 31, 27, 0.15); }
.mim-list b { font-size: 1.25em; }

/* ---------------- DRVO & ZANAT — stolarija ---------------- */
.dz { background: #f1ebe1; color: #1f3a2c; }
.dz-nav { display: flex; align-items: center; gap: 3em; height: 5em; padding: 0 4em; border-bottom: 1px solid rgba(31, 58, 44, 0.12); }
.dz-logo { display: flex; align-items: center; gap: 0.6em; font-weight: 700; font-size: 1.1em; white-space: nowrap; }
.dz-logo b { width: 1.4em; height: 1.4em; border-radius: 0.3em; background: #1f3a2c; box-shadow: inset 0 -0.45em 0 #b9814a; }
.dz-links { margin-left: auto; display: flex; gap: 2.2em; font-size: 0.9em; color: #4d6357; }
.dz-btn {
  background: #1f3a2c;
  color: #f1ebe1;
  padding: 0.85em 1.4em;
  border-radius: 0.3em;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.dz-btn--block { display: block; text-align: center; padding: 1em; }
.dz-ghost { border: 1px solid rgba(31, 58, 44, 0.35); padding: 0.85em 1.4em; border-radius: 0.3em; font-size: 0.85em; font-weight: 600; }
.dz-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3em; align-items: center; padding: 3.25em 4em 2.75em; }
.dz-kicker { font-size: 0.78em; letter-spacing: 0.22em; text-transform: uppercase; color: #a26d3a; font-weight: 700; }
.dz-title { margin-top: 0.35em; font-family: var(--font-serif); font-size: 4.1em; line-height: 1; letter-spacing: -0.015em; }
.dz-title i { font-style: italic; color: #a26d3a; }
.dz-text { margin-top: 1.2em; color: #4d6357; line-height: 1.55; max-width: 30em; }
.dz-ctas { margin-top: 2em; display: flex; gap: 1em; }
.dz-art { position: relative; height: 25em; }
.dz-wood {
  position: absolute;
  inset: 0 18% 14% 0;
  border-radius: 0.6em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(100deg, #b9814a 0 0.55em, #a8723f 0.55em 0.8em, #c48f58 0.8em 1.7em, #ad7743 1.7em 1.95em, #bd8650 1.95em 2.9em);
}
.dz-wood--2 {
  inset: 34% 0 0 46%;
  border: 0.45em solid #f1ebe1;
  border-radius: 0.8em;
  background: repeating-linear-gradient(90deg, #1f3a2c 0 2.4em, #2a4a38 2.4em 2.55em);
}
.dz-badge {
  position: absolute;
  left: -1.6em; bottom: 6%;
  width: 6em; height: 6em;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: #f1ebe1;
  border: 1px solid #1f3a2c;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.05;
}
.dz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; margin: 0 4em; }
.dz-steps div { display: flex; align-items: baseline; gap: 0.8em; padding-top: 1em; border-top: 2px solid #1f3a2c; }
.dz-steps span { font-size: 0.8em; font-weight: 700; color: #a26d3a; }

.dzm > :not(.m-status) { margin-inline: 1.4em; }
.dzm .dz-nav { padding: 0; height: 3.4em; gap: 0; }
.dzm .dz-logo { font-size: 0.95em; }
.dzm .dz-kicker { margin-top: 1.7em; }
.dzm .dz-title { font-size: 2.55em; }
.dzm-art { position: relative; flex: none; height: 14em; margin-top: 1.4em; }
.dzm .dz-wood { inset: 0; }
.dzm .dz-btn--block { margin-top: 1.3em; }
.dzm .dz-steps { margin-top: 1.4em; grid-template-columns: 1fr; gap: 0.9em; }