/* =====================================================
   Lotte Mart Case Study — Modern CSS
   Based on Fuel Sensor style system
===================================================== */

/* Tokens */
:root {
  --bg:#0b0c0f;
  --surface:#12141a;
  --surface-2:#0f1116;
  --text:#e8eaed;
  --muted:#a6afbd;
  --accent:#ffffff;   /* White for heading highlight */
  --accent-2:#FEBF34; /* Secondary */
  --border:rgba(255,255,255,.08);
  --radius-xl:20px; --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --container:964px;
}

/* Base */
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.7;
}
.container { max-width:var(--container); margin:0 auto; padding:32px 20px 32px; }
h1,h2,h3,h4,h5,h6 { margin:0 0 12px; }
p { color:var(--muted); margin:16px 0; }

/* Heading */
.heading {
  font-size:clamp(28px,3.8vw,44px);
  font-weight:800;
  color:var(--accent);
}
.subheading {
  color:var(--muted);
  font-size:clamp(16px,2vw,18px);
  margin-bottom:20px;
}

/* Tag */
.tag {
  display:inline-flex;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  margin-bottom:14px;
}
.tag h5 { margin:0; font-size:13px; text-transform:uppercase; }

/* Sections */
.context, .our-team, .outcomes, .end {
  margin-top:32px;
}
.context h2, .our-team h2, .outcomes h2 {
  font-size:clamp(22px,2.6vw,30px);
  color:var(--text);
  margin-bottom:12px;
}
.context p, .our-team p, .outcomes p, .end p {
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

/* End / disclaimer */
.end {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-top: 32px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: var(--radius-lg);
}

.screens-strip {
  width: 100vw;
  background: #0b0c0f;
  padding: 60px 0;
  overflow: hidden; /* 🚫 no manual scroll */
}

.screens-row {
  display: flex;
  gap: 28px;
  animation: scroll-left 60s linear infinite; /* 🎬 auto-move */
}

.screens-row img {
  height: 560px;
  border-radius: 18px;
  background: #12141a;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  flex-shrink: 0;
}

/* Keyframes for smooth infinite scroll */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .screens-strip {
    padding: 20px 0;
  }
  .screens-row {
    gap: 12px;
  }
  .screens-row img {
    height: 240px;
    border-radius: 12px;
  }