* { box-sizing: border-box; }
:root {
  --red: #e50914;
  --red2: #ff2730;
  --black: #000;
  --panel: #111114;
  --panel2: #17171a;
  --text: #fff;
  --muted: #bfc0c4;
  --border: rgba(255,255,255,.13);
}
html { scroll-behavior: smooth; }
body { margin:0; background:#000; color:var(--text); font-family: Arial, Helvetica, sans-serif; line-height:1.55; }
a { color:inherit; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(0,0,0,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav { max-width:1300px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.brand { text-decoration:none; display:flex; flex-direction:column; text-transform:uppercase; letter-spacing:.18em; font-weight:900; font-size:11px; }
.brand img { width:210px; display:block; }
.nav-links { display:flex; gap:25px; align-items:center; }
.nav-links a { text-decoration:none; text-transform:uppercase; font-weight:900; font-size:13px; color:#eee; }
.nav-links a:hover { color:var(--red2); }
.nav-cta { background:var(--red); padding:13px 18px; border-radius:6px; }
.nav-links .nav-cta:hover { color:#fff; background:var(--red2); }
.menu-btn { display:none; background:#080808; color:white; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:22px; }
.hero { min-height:780px; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.76), rgba(0,0,0,.24)), url('assets/gallery/spartan-work-01.jpg') center/cover; transform:scale(1.02); }
.hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 30%, rgba(229,9,20,.28), transparent 34%); }
.hero-content { position:relative; z-index:2; max-width:1300px; width:100%; margin:auto; padding:80px 24px; }
.eyebrow { margin:0 0 13px; color:var(--red2); text-transform:uppercase; letter-spacing:.16em; font-size:14px; font-weight:900; }
h1,h2,h3 { margin:0; line-height:1.02; }
h1 { font-size:clamp(44px,8vw,96px); max-width:900px; text-transform:uppercase; letter-spacing:-.06em; }
h1 span { color:var(--red); }
.lead { max-width:620px; font-size:22px; color:#efefef; margin:26px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--red); border:2px solid var(--red); border-radius:7px; padding:15px 22px; text-transform:uppercase; font-weight:900; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--red2); }
.btn.outline,.btn.ghost { background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.65); }
.btn.ghost { border-color:rgba(255,255,255,.23); }
.trust-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.trust-row span { border:1px solid var(--border); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,.06); font-weight:900; }
.section { max-width:1300px; margin:auto; padding:86px 24px; }
.section-heading { max-width:850px; margin-bottom:34px; }
.section-heading h2,.about h2,.contact h2 { font-size:clamp(32px,5vw,58px); text-transform:uppercase; letter-spacing:-.045em; }
.section-heading p,.about p,.contact p { color:var(--muted); font-size:18px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service { border:1px solid var(--border); border-radius:20px; padding:27px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); }
.service-icon { color:var(--red); font-size:42px; font-weight:900; margin-bottom:13px; }
.service h3 { font-size:23px; margin-bottom:12px; }
.service p { color:var(--muted); margin:0; }
.portfolio-section { border-top:1px solid var(--border); }
.portfolio-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.portfolio-card { overflow:hidden; border-radius:20px; border:1px solid var(--border); background:var(--panel); }
.photo-link { display:block; height:270px; overflow:hidden; }
.photo-link img { width:100%; height:100%; object-fit:cover; transition:.35s transform; }
.portfolio-card:hover img { transform:scale(1.06); }
.portfolio-info { padding:20px; }
.portfolio-info span { color:var(--red2); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.portfolio-info h3 { margin:8px 0 10px; font-size:21px; }
.portfolio-info p { margin:0; color:var(--muted); font-size:14px; }
.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.gallery-item { display:block; aspect-ratio:1/1; overflow:hidden; border-radius:13px; border:1px solid var(--border); background:#111; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:.25s transform; }
.gallery-item:hover img { transform:scale(1.06); }
.brand-section { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.brand-block { margin-top:26px; }
.brand-block h3 { font-size:23px; margin-bottom:12px; }
.brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.brand-grid span { min-height:74px; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; border-radius:13px; background:#f3f3f3; color:#111; font-weight:900; border:1px solid #ddd; }
.about { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:stretch; }
.about-card,.why-card,.form-card { border:1px solid var(--border); border-radius:24px; background:var(--panel); padding:32px; }
.about strong { color:#fff; }
.why-card { background:linear-gradient(180deg, rgba(229,9,20,.13), rgba(255,255,255,.04)); }
.why-card h3 { font-size:31px; text-transform:uppercase; margin-bottom:18px; }
.why-card ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.why-card li { color:#eee; font-weight:800; }
.why-card li::before { content:"✓"; color:var(--red2); margin-right:10px; }
.contact { max-width:1300px; margin:auto; padding:86px 24px; display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start; }
.contact-lines { display:grid; gap:13px; margin-top:25px; }
.contact-lines a,.contact-lines span { font-size:19px; text-decoration:none; font-weight:900; }
.form-card { background:#f7f7f7; color:#111; }
form { display:grid; gap:13px; }
.hidden { display:none; }
input,select,textarea { width:100%; border:1px solid #cfcfcf; border-radius:9px; padding:15px; font-size:16px; font-family:inherit; }
textarea { min-height:140px; resize:vertical; }
form .btn { width:100%; }
.form-success { display:none; color:#0b6b22 !important; background:#e7f7eb; border:1px solid #b9e2c3; padding:12px; border-radius:9px; font-weight:900; margin:0; }
.form-success.show { display:block; }
.mobile-actions { position:fixed; left:14px; right:14px; bottom:14px; z-index:70; display:none; grid-template-columns:1fr 1fr; gap:10px; }
.mobile-actions a { text-align:center; text-decoration:none; background:var(--red); color:white; font-weight:900; text-transform:uppercase; padding:14px; border-radius:999px; box-shadow:0 14px 35px rgba(0,0,0,.35); }
footer { text-align:center; color:var(--muted); padding:36px 24px 96px; border-top:1px solid var(--border); }
footer img { width:190px; }
footer a { color:#fff; text-decoration:none; }
.reveal { opacity:0; transform:translateY(18px); transition:.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@media (max-width:1100px) { .portfolio-grid { grid-template-columns:repeat(2,1fr); } .gallery-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:930px) {
  .menu-btn { display:block; }
  .nav { position:relative; }
  .nav-links { display:none; position:absolute; top:100%; left:24px; right:24px; background:#050505; border:1px solid var(--border); border-radius:16px; padding:18px; flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .hero { min-height:680px; }
  .services-grid,.about,.contact { grid-template-columns:1fr; }
  .brand-grid { grid-template-columns:repeat(2,1fr); }
  .mobile-actions { display:grid; }
}
@media (max-width:560px) {
  .brand img { width:165px; }
  .brand span { font-size:9px; }
  .hero-content,.section,.contact { padding-left:18px; padding-right:18px; }
  .hero-actions .btn { width:100%; }
  .portfolio-grid,.gallery-grid { grid-template-columns:1fr; }
  .photo-link { height:320px; }
}


.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(circle at top, rgba(229,9,20,.32), transparent 36%),
    #000;
}

.success-card {
  max-width: 650px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--panel);
  padding: 44px;
}

.success-card img {
  width: 230px;
  margin-bottom: 24px;
}

.success-card h1 {
  font-size: clamp(42px, 8vw, 72px);
  text-transform: uppercase;
  color: var(--red);
}

.success-card p {
  color: var(--muted);
  font-size: 20px;
  margin: 8px 0;
}

.success-card .btn {
  margin-top: 28px;
}

.social-section {
  border-top: 1px solid var(--border);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.social-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  padding: 32px;
  transition: transform .25s, border-color .25s;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.social-icon {
  font-size: 42px;
  margin-bottom: 14px;
}

.social-card h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.social-card p {
  color: var(--muted);
  margin: 0 0 16px;
}

.social-card span {
  color: var(--red2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}

.footer-social {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.footer-social a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255,255,255,.05);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

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

/* Version 3 upgrades */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.filter-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: 11px 16px;
  text-transform: uppercase;
  font-weight: 900;
  cursor: pointer;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.portfolio-card.hide {
  display: none;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.detail-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  padding: 28px;
}

.detail-card h3 {
  font-size: 25px;
  color: #fff;
  margin-bottom: 12px;
}

.detail-card p {
  color: var(--muted);
}

.detail-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 8px;
}

.detail-card li {
  font-weight: 800;
}

.detail-card li::before {
  content: "✓";
  color: var(--red2);
  margin-right: 9px;
}

.brand-note {
  margin: 18px 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.brand-grid span {
  background:
    linear-gradient(180deg, #202024, #111114) !important;
  color: #fff !important;
  border: 1px solid var(--border) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.brand-grid span::first-letter {
  color: var(--red2);
}

.comparison {
  position: relative;
  max-width: 980px;
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #111;
}

.comparison-img {
  position: absolute;
  inset: 0;
}

.comparison-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-img.after {
  clip-path: inset(0 45% 0 0);
}

.slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}

.comparison::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--divider-left, 55%);
  width: 4px;
  background: var(--red);
  z-index: 3;
  transform: translateX(-2px);
}

.comparison .label {
  position: absolute;
  z-index: 5;
  top: 18px;
  background: rgba(0,0,0,.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.label-before { left: 18px; }
.label-after { right: 18px; }

.area-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
}

.area-map {
  min-height: 420px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(229,9,20,.18), transparent 33%),
    linear-gradient(135deg, #17171a, #050505);
}

.area-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px);
}

.map-pin {
  position: absolute;
  z-index: 2;
  background: rgba(0,0,0,.75);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 900;
  font-size: 13px;
}

.map-pin::before {
  content: "●";
  color: var(--red2);
  margin-right: 7px;
}

.map-pin.main {
  left: 42%;
  top: 45%;
  background: var(--red);
  color: #fff;
}

.p1 { left: 36%; top: 54%; }
.p2 { left: 62%; top: 62%; }
.p3 { left: 54%; top: 72%; }
.p4 { left: 28%; top: 43%; }
.p5 { left: 16%; top: 22%; }
.p6 { left: 22%; top: 32%; }

.area-list {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  background: var(--panel);
}

.area-list h3 {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.area-list p {
  color: var(--muted);
  font-size: 18px;
}

@media (max-width: 930px) {
  .detail-grid,
  .area-layout {
    grid-template-columns: 1fr;
  }

  .comparison {
    height: 420px;
  }
}

@media (max-width: 560px) {
  .comparison {
    height: 330px;
  }
}

.admin-link {
  margin-top: 14px;
  font-size: 12px;
  opacity: .55;
}

.admin-link a {
  color: var(--muted);
  text-decoration: none;
}