/* ============================================================
   SILWATECH CASE STUDIES — stylesheet
   Brand: navy #09446C  ·  teal #05B3AA
   ============================================================ */

:root {
  --navy: #09446C;
  --navy-deep: #05294a;
  --navy-ink: #041c33;
  --teal: #05B3AA;
  --teal-bright: #0adfd2;
  --teal-soft: rgba(5, 179, 170, 0.12);
  --bg: #f3f8fa;
  --surface: #ffffff;
  --text: #13293d;
  --muted: #5b7285;
  --border: #dfeaf0;
  --grad: linear-gradient(120deg, var(--navy) 0%, var(--teal) 100%);
  --shadow-sm: 0 2px 10px rgba(9, 68, 108, 0.07);
  --shadow-md: 0 12px 34px rgba(9, 68, 108, 0.13);
  --shadow-lg: 0 24px 60px rgba(4, 28, 51, 0.22);
  --radius: 18px;
  --font-head: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; }
img { max-width: 100%; display: block; }
a { color: var(--teal); }
button { font-family: inherit; }

::selection { background: var(--teal); color: #fff; }

/* ============ NAVBAR ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 0;
  background: rgba(4, 22, 40, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
/* solidifies and shrinks a touch once you scroll past the top */
.nav.scrolled {
  padding: 8px 0;
  background: rgba(4, 19, 34, 0.92);
  box-shadow: 0 12px 40px rgba(2, 12, 24, 0.42);
}

/* nav content sits in the same width as the page content below it */
.nav-inner {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* thin teal light-line under the nav */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, rgba(5, 179, 170, 0.6) 50%, transparent 94%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* On the homepage the bar overlays the hero (fixed), so at the very top it is
   invisibly part of the hero, then fades into the frosted glass bar on scroll.
   The hero's generous top padding keeps content clear of the bar. */
body.home .nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
body.home .nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.home .nav:not(.scrolled)::after { opacity: 0; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.logo-img {
  height: 40px;
  width: auto;
  display: block;
  transition: height 0.35s ease;
}
.nav.scrolled .logo-img { height: 33px; }

/* slim divider + portal label after the logo */
.nav-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.nav-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.nav-tag {
  background: rgba(5, 179, 170, 0.14);
  border: 1px solid rgba(5, 179, 170, 0.45);
  color: var(--teal-bright);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 99px;
}

.nav-links { display: flex; align-items: center; gap: 8px; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.nav-link svg {
  width: 13px;
  height: 13px;
  opacity: 0.55;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-link:hover svg { opacity: 1; transform: translate(2px, -2px); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(120deg, var(--teal), #08cabf);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 99px;
  font-weight: 600 !important;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(5, 179, 170, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta svg { width: 15px; height: 15px; transition: transform 0.2s; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(5, 179, 170, 0.5); }
.nav-cta:hover svg { transform: translateX(3px); }

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% -10%, #0a5580 0%, var(--navy-deep) 45%, var(--navy-ink) 100%);
  color: #fff;
  padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 56px) clamp(200px, 19vw, 250px);
  text-align: center;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 35%), rgba(5, 179, 170, 0.14), transparent 70%);
}

/* the hero's last pixels settle to one flat colour, so the section
   below can pick it up with zero visible seam */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(180deg, rgba(4, 28, 51, 0), #041c33);
  pointer-events: none;
  z-index: 1;
}
.hero-inner { z-index: 2; }
.hero-marquee { z-index: 2; }

/* slow rotating light sweep behind everything */
.hero-aurora {
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(5, 179, 170, 0.13) 55deg,
    transparent 120deg,
    rgba(14, 116, 180, 0.12) 200deg,
    transparent 262deg,
    rgba(10, 223, 210, 0.09) 320deg,
    transparent 360deg);
  animation: aurora 30s linear infinite;
}
@keyframes aurora { to { transform: rotate(360deg); } }

/* staggered entrance for hero content */
.hero-inner > * {
  animation: riseIn 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.16s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.27s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.38s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.5s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(5, 179, 170, 0.55), transparent 65%);
  top: -140px; right: -80px;
  animation: drift 16s ease-in-out infinite;
}
.blob-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(14, 116, 180, 0.6), transparent 65%);
  bottom: -160px; left: -100px;
  animation: drift 20s ease-in-out infinite reverse;
}
.blob-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(10, 223, 210, 0.35), transparent 65%);
  top: 30%; left: 18%;
  animation: drift 13s ease-in-out infinite 2s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(0.95); }
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}

.hero-inner { position: relative; max-width: 900px; margin: 0 auto; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 179, 170, 0.14);
  border: 1px solid rgba(5, 179, 170, 0.4);
  color: var(--teal-bright);
  padding: 7px 18px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero-kicker .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 223, 210, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(10, 223, 210, 0); }
}

.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.hero h1 .grad-text {
  background: linear-gradient(90deg, var(--teal-bright), #6de8ff, var(--teal-bright));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* typewriter line inside the hero headline */
.type-line {
  display: block;
  min-height: 1.32em;
}
.caret {
  display: inline-block;
  width: 4px;
  height: 0.92em;
  background: var(--teal-bright);
  border-radius: 2px;
  margin-left: 7px;
  vertical-align: -0.1em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* results ticker along the bottom edge of the hero */
.hero-marquee {
  position: absolute;
  bottom: 92px; /* clear of the filter bar that overlaps the hero's bottom edge */
  left: 0;
  right: 0;
  padding: 14px 0;
  background: rgba(4, 28, 51, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 14px;
  white-space: nowrap;
  padding-right: 14px;
  will-change: transform;
  animation: marquee 44s linear infinite;
}
.hero-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.83rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.m-chip:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-2px);
}
.m-chip svg { width: 15px; height: 15px; color: var(--teal-bright); flex-shrink: 0; }
.m-chip:hover svg { color: #fff; }
.m-chip strong { color: #fff; font-weight: 700; }

.hero p.sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.hero-cta .btn-primary {
  font-size: 0.97rem;
  padding: 13px 30px;
  animation: ctaGlow 3.4s ease-in-out infinite;
}
.hero-cta .btn-primary:hover { animation-play-state: paused; }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(9, 68, 108, 0.3); }
  50% { box-shadow: 0 10px 32px rgba(5, 179, 170, 0.55); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 99px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s;
}
.btn-ghost:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
  background: rgba(5, 179, 170, 0.08);
  transform: translateY(-2px);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  flex-wrap: wrap;
}
.hero-stat {
  text-align: center;
  min-width: 150px;
  padding: 16px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.hero-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(5, 179, 170, 0.55);
  background: rgba(5, 179, 170, 0.09);
}
.hero-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--teal-bright);
}
.hero-stat span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.4px;
}

.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* ============ DARK → LIGHT TRANSITION ============ */
/* The filter console sits on SOLID navy (seamless with the hero bottom), so
   there is no lighter band beside the box. The dark→light fade then happens in
   one clean full-width strip BELOW the console (.section-fade). */
.transition-zone {
  position: relative;
  background: #041c33;
  padding-bottom: 12px;
}
.transition-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  pointer-events: none;
}

/* full-width smooth fade from the navy section into the light cards section */
.section-fade {
  height: 130px;
  margin-top: -1px;
  background: linear-gradient(180deg,
    #041c33 0%,
    #072339 14%,
    #0e2f49 28%,
    #1c435f 42%,
    #345f7b 56%,
    #5a839c 70%,
    #8fb0c1 82%,
    #c2d6df 92%,
    #f3f8fa 100%);
}

/* ============ FILTER CONSOLE (dark glass) ============ */
.filter-shell {
  position: relative;
  max-width: 1220px;
  margin: -64px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  z-index: 5;
  scroll-margin-top: 80px;
}

.filter-bar {
  position: relative;
  background: linear-gradient(165deg, rgba(10, 44, 70, 0.95), rgba(4, 28, 51, 0.98));
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(4, 28, 51, 0.4), 0 4px 24px rgba(5, 179, 170, 0.08);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* animated gradient border */
.filter-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg,
    rgba(5, 179, 170, 0.65),
    rgba(255, 255, 255, 0.1) 30%,
    rgba(5, 179, 170, 0.2) 60%,
    rgba(109, 232, 255, 0.5));
  background-size: 220% 220%;
  animation: borderFlow 9s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes borderFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.filter-head h2 {
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.3px;
}
.filter-head h2 em { font-style: normal; color: var(--teal-bright); }
.filter-head p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  margin-top: 3px;
}
.filter-row-top {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 230px;
}
.search-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: color 0.2s;
}
.search-wrap:focus-within svg { color: var(--teal-bright); }
.search-wrap input {
  width: 100%;
  padding: 13px 42px 13px 46px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.search-wrap input::placeholder { color: rgba(255, 255, 255, 0.4); }
.search-wrap input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(5, 179, 170, 0.18);
  background: rgba(255, 255, 255, 0.09);
}
.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  display: none;
}
.search-wrap.has-value .search-clear { display: block; }

/* segmented AI / Non-AI control */
.seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 4px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 9px 18px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seg button:hover { color: #fff; }
.seg button svg { width: 14px; height: 14px; }
.seg button.active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 14px rgba(5, 179, 170, 0.4);
}

.filter-groups { display: grid; gap: 14px; }

.filter-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-group .fg-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  min-width: 76px;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.4px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  background-clip: padding-box;
  color: rgba(255, 255, 255, 0.82);
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.pill svg { width: 14px; height: 14px; color: var(--teal-bright); flex-shrink: 0; }
.pill:hover {
  border-color: var(--teal);
  color: #fff;
  background: rgba(5, 179, 170, 0.1);
  transform: translateY(-1px);
}
.pill.active {
  /* padding-box clip + a crisp teal border keeps the gradient fill from
     bleeding past the rounded corners */
  background: var(--grad);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(5, 179, 170, 0.28);
}
.pill.active svg { color: #fff; }

/* only appears (with its divider) when there is a filter to clear */
.filter-meta {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.13);
}
.filter-meta:has(.clear-all.show) { display: flex; }

.clear-all {
  border: 0;
  background: none;
  color: var(--teal-bright);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
}
.clear-all.show { display: inline-flex; }
.clear-all:hover { text-decoration: underline; }

/* ============ CARD GRID ============ */
.grid-section {
  max-width: 1220px;
  margin: 0 auto;
  padding: 4px clamp(16px, 4vw, 40px) 90px;
}

.grid-head {
  text-align: center;
  margin-bottom: 22px;
}
.grid-head .gh-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--teal);
}
.grid-head h2 {
  color: var(--navy);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.5px;
  margin-top: 6px;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
}

.cs-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.32s, border-color 0.32s;
  animation: cardIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--stagger, 0) * 60ms);
}

/* soft teal glow that follows the cursor across the card */
.cs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%), rgba(5, 179, 170, 0.13), transparent 65%);
}
.cs-card:hover::before { opacity: 1; }
.cs-card:hover { border-color: rgba(5, 179, 170, 0.45); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-card:hover, .cs-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  outline: none;
}
.cs-card:focus-visible { box-shadow: 0 0 0 3px var(--teal), var(--shadow-md); }

.cs-card-cover {
  position: relative;
  height: 190px;
  background: linear-gradient(130deg, var(--acc-1, #09446C), var(--acc-2, #05B3AA));
  overflow: hidden;
  color: #fff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
}

.cover-orb {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
  right: -70px;
  bottom: -110px;
  transition: transform 0.5s ease;
}
.cs-card:hover .cover-orb { transform: scale(1.35); }

.cover-icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 74px;
  height: 74px;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.cs-card:hover .cover-icon { transform: translateY(-5px) rotate(-4deg) scale(1.06); }

/* shine sweep on hover */
.cs-card-cover::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.cs-card:hover .cs-card-cover::after { left: 130%; }

.cover-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cover-year {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 11px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}
.badge svg { width: 12px; height: 12px; }
.badge-ai {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
}
.badge-std {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cover-metric { position: relative; max-width: 65%; }
.cover-metric strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cover-metric span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }

.cs-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.cs-card-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  background: #eef4f7;
  padding: 4px 11px;
  border-radius: 99px;
}
.tag-industry { background: var(--teal-soft); color: #067a74; }

.cs-card-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.cs-card-body p {
  font-size: 0.9rem;
  color: var(--muted);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cs-card-foot .client {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}
.read-more svg { width: 15px; height: 15px; transition: transform 0.25s; }
.cs-card:hover .read-more svg { transform: translateX(4px); }

/* pagination (only rendered when results span more than one page) */
.pagination {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination.show { display: flex; }
.pagination button {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--navy);
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, border-color 0.18s, color 0.18s, background 0.18s;
}
.pagination button svg { width: 18px; height: 18px; }
.pagination button:hover:not(:disabled):not(.active) {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}
.pagination button.active {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(9, 68, 108, 0.28);
  cursor: default;
}
.pagination button:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.pagination .pg-ellipsis {
  color: var(--muted);
  padding: 0 2px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* empty state */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  display: none;
}
.empty-state.show { display: block; }
.empty-state .es-icon {
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: var(--teal-soft);
  display: grid;
  place-items: center;
  color: var(--teal);
}
.empty-state .es-icon svg { width: 40px; height: 40px; }
.empty-state h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin-bottom: 22px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad);
  color: #fff;
  border: 0;
  padding: 12px 26px;
  border-radius: 99px;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(9, 68, 108, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(9, 68, 108, 0.4); }

/* ============ CTA BAND ============ */
.cta-band {
  position: relative;
  overflow: hidden;
  /* solid navy so the fade above ends seamlessly and the band flows straight
     into the footer; the glow blob inside keeps it alive */
  background: #041c33;
  color: #fff;
  text-align: center;
  padding: clamp(96px, 11vw, 140px) 20px clamp(56px, 7vw, 90px);
}

/* smooth full-width blend from the light cards section into the dark band */
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg,
    #f3f8fa 0%,
    #e2ebf0 20%,
    #bcd0da 40%,
    #85a5b7 58%,
    #4d7288 74%,
    #204359 88%,
    #041c33 100%);
  pointer-events: none;
}
/* glow sits low-centre, clear of the top fade, and behind the text */
.cta-band .hero-blob {
  top: auto;
  bottom: -200px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 680px;
  height: 500px;
  opacity: 0.55;
}
.cta-band h2, .cta-band p, .cta-band .btn-primary { position: relative; z-index: 2; }

.cta-band h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  position: relative;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
  margin: 0 auto 30px;
  position: relative;
}
.cta-band .btn-primary { position: relative; font-size: 1rem; padding: 14px 34px; }

/* ============ FOOTER ============ */
.footer {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.55);
  padding: 30px clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer a:hover { color: var(--teal-bright); }

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   DETAIL PAGE (case-study.html)
   ============================================================ */

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--grad);
  z-index: 200;
}

.cs-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% -20%, color-mix(in srgb, var(--acc-2, #05B3AA) 45%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 120%, color-mix(in srgb, var(--acc-1, #09446C) 70%, #000) 0%, transparent 60%),
    var(--navy-ink);
  color: #fff;
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 56px) clamp(56px, 8vw, 100px);
}

.cs-hero-inner { max-width: 1050px; margin: 0 auto; position: relative; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 34px;
  transition: color 0.2s;
}
.back-link:hover { color: #fff; }
.back-link svg { width: 16px; height: 16px; }

.cs-hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.cs-hero-tags .tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  text-decoration: none;
  transition: background 0.2s;
}
.cs-hero-tags .tag:hover { background: rgba(255, 255, 255, 0.2); }
.cs-hero-tags .tag.hl { background: var(--teal); border-color: var(--teal); color: #fff; }

.cs-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  letter-spacing: -0.8px;
  max-width: 860px;
  margin-bottom: 18px;
}

.cs-hero .cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
}
.cs-meta strong { color: #fff; font-weight: 600; }

.cs-hero .cover-icon {
  position: absolute;
  right: 0;
  top: 10px;
  width: 120px;
  height: 120px;
  color: rgba(255, 255, 255, 0.12);
}

/* metric band */
.metric-band {
  max-width: 1050px;
  margin: -34px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  position: relative;
  z-index: 5;
}
.metric-band-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
}
.metric-cell {
  padding: 26px 20px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.metric-cell:last-child { border-right: 0; }
.metric-cell strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-cell span { font-size: 0.82rem; color: var(--muted); }

/* article layout */
.cs-body {
  max-width: 1050px;
  margin: 0 auto;
  padding: 56px clamp(16px, 4vw, 40px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

.cs-sections { display: grid; gap: 44px; }

.cs-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.45rem;
  color: var(--navy);
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.cs-section h2 .num {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cs-section p { color: #33506a; margin-bottom: 13px; font-size: 0.98rem; }
.cs-section p:last-child { margin-bottom: 0; }

.highlight-list { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.highlight-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 16px;
  font-size: 0.93rem;
  color: #33506a;
  box-shadow: var(--shadow-sm);
}
.highlight-list li svg {
  width: 19px; height: 19px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.cs-quote {
  border-left: 4px solid var(--teal);
  background: var(--surface);
  border-radius: 0 16px 16px 0;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}
.cs-quote p {
  font-family: var(--font-head);
  font-size: 1.08rem;
  color: var(--navy);
  font-style: italic;
  margin-bottom: 12px;
}
.cs-quote cite {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
}

/* sidebar */
.cs-sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 20px;
}
.side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.side-card h3 {
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.fact { margin-bottom: 14px; }
.fact:last-child { margin-bottom: 0; }
.fact .f-label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.fact .f-value { font-size: 0.94rem; font-weight: 600; color: var(--navy); }

.chipset { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  background: #eef4f7;
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 8px;
}

.side-cta {
  background: var(--grad);
  color: #fff;
  border: 0;
  text-align: center;
}
.side-cta h3 { color: rgba(255, 255, 255, 0.85); }
.side-cta p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 18px; }
.side-cta .btn-invert {
  display: block;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px;
  border-radius: 12px;
  transition: transform 0.2s;
}
.side-cta .btn-invert:hover { transform: translateY(-2px); }

/* figma + gallery */
.cs-media {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) 30px;
  display: grid;
  gap: 40px;
}
.media-block h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.45rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.media-block .media-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }

.figma-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  background: #f0f4f7;
}

.figma-logo {
  width: 22px; height: 22px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.gallery-grid img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform 0.25s;
}
.gallery-grid img:hover { transform: scale(1.02); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 28, 51, 0.92);
  display: none;
  place-items: center;
  z-index: 300;
  padding: 4vw;
  cursor: zoom-out;
}
.lightbox.open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* related + prev/next */
.related-section {
  max-width: 1050px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 40px) 70px;
}
.related-section > h2 {
  font-size: 1.45rem;
  color: var(--navy);
  margin-bottom: 22px;
  letter-spacing: -0.4px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.pager {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pager a {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s, box-shadow 0.22s;
}
.pager a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pager a.next { text-align: right; align-items: flex-end; }
.pager .p-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
}
.pager .p-title { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.pager a.disabled { opacity: 0.45; pointer-events: none; }

/* ============ FIGMA MAKE MODE (inner page IS the design) ============ */

/* Make mode mirrors the HOMEPAGE header exactly: the design fills the whole
   viewport and the nav is a fixed bar overlaying it — fully transparent at
   the top, then solidifying + shrinking on scroll. (The scroll position is
   read from inside the iframe in case-study.js, since the design scrolls
   there rather than on the outer window.) */
body.make-mode {
  height: 100vh;
  overflow: hidden;
  background: #f0f4f7;
}
.make-mode #cs-root { height: 100vh; }
.make-frame {
  display: block;
  width: 100%;
  height: 100vh;
  border: 0;
  background: #f0f4f7;
}

/* same overlay treatment body.home .nav uses over the hero */
.make-mode .nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.make-mode .nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.make-mode .nav:not(.scrolled)::after { opacity: 0; }

/* the design IS the page — the generic CTA band and footer don't belong
   in the full-screen view */
.make-mode .cta-band,
.make-mode .footer { display: none; }

/* not-found state */
.not-found {
  text-align: center;
  padding: 110px 20px;
}
.not-found h1 { color: var(--navy); font-size: 1.8rem; margin-bottom: 12px; }
.not-found p { color: var(--muted); margin-bottom: 26px; }

/* ============================================================
   ADD-CASE-STUDY BUILDER PAGE
   ============================================================ */
.builder-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 40px) 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.builder-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 20px;
}

.builder-form h2 { color: var(--navy); font-size: 1.3rem; }
.builder-form .form-sub { color: var(--muted); font-size: 0.9rem; margin-top: -12px; }

.f-row { display: grid; gap: 6px; }
.f-row label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.f-row .hint { font-size: 0.76rem; color: var(--muted); font-weight: 400; }
.f-row input, .f-row textarea, .f-row select {
  border: 1.6px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text);
  background: #f8fbfc;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.f-row input:focus, .f-row textarea:focus, .f-row select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
  background: #fff;
}
.f-row textarea { resize: vertical; min-height: 84px; }

.f-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-cols-3 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }

.metric-rows { display: grid; gap: 10px; }

.builder-out {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 20px;
}

.out-card {
  background: var(--navy-ink);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.out-card .out-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.out-card h3 { color: #fff; font-size: 1rem; }
.copy-btn {
  background: var(--teal);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.copy-btn:hover { transform: translateY(-1px); }
.copy-btn.copied { background: #12a150; }

.out-card pre {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
  max-height: 420px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: #9fe8e2;
}

.preview-note {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
#card-preview .cs-card { animation: none; cursor: default; }

.builder-steps {
  background: var(--teal-soft);
  border: 1px solid rgba(5, 179, 170, 0.3);
  border-radius: 16px;
  padding: 18px 22px;
  font-size: 0.88rem;
  color: #0b5a54;
}
.builder-steps strong { color: var(--navy); }
.builder-steps ol { margin: 8px 0 0 18px; display: grid; gap: 5px; }
.builder-steps code {
  background: rgba(9, 68, 108, 0.1);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--navy);
}

/* ---------- publish card + admin controls ---------- */
.publish-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.publish-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.publish-head h3 { color: var(--navy); font-size: 1.05rem; }

.admin-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  background: #eef4f7;
  color: var(--muted);
}
.admin-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b8c7d1;
}
.admin-dot.on { background: #e7f8ef; color: #116b3d; }
.admin-dot.on::before { background: #16b364; box-shadow: 0 0 0 3px rgba(22, 179, 100, 0.2); }
.admin-dot.off { background: #fdf1e7; color: #9a5b1b; }
.admin-dot.off::before { background: #eb9137; }

.publish-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 17px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(9, 68, 108, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.publish-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(9, 68, 108, 0.45); }
.publish-btn:disabled { opacity: 0.55; transform: none; cursor: wait; }

.publish-status {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  border-radius: 12px;
  padding: 12px 15px;
  display: none;
}
.publish-status.ok { display: block; background: #e7f8ef; color: #116b3d; border: 1px solid #bfe8d0; }
.publish-status.err { display: block; background: #fdeeee; color: #a13030; border: 1px solid #f2c9c9; }
.publish-status.warn { display: block; background: #fff7e6; color: #8a5b00; border: 1px solid #f1dfae; }
.publish-status a { color: inherit; font-weight: 700; }

.publish-hint { margin-top: 12px; font-size: 0.8rem; color: var(--muted); text-align: center; }

.edit-row { display: flex; gap: 10px; }
.edit-row select { flex: 1; }
.edit-row input[type="file"] { flex: 1; min-width: 0; }
.edit-row .import-btn { white-space: nowrap; }
.danger-btn {
  border: 1.6px solid #f2c9c9;
  background: #fdf3f3;
  color: #a13030;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.danger-btn:hover { background: #fbe3e3; }

.f-row input[type="file"] {
  padding: 10px;
  background: #fff;
  cursor: pointer;
}
.f-row input[type="file"]::file-selector-button {
  border: 0;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 8px 16px;
  border-radius: 9px;
  margin-right: 12px;
  cursor: pointer;
}

/* client link generator */
.linkgen { text-align: left; }
.linkgen h3 { margin-bottom: 8px !important; }
.linkgen > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; }
.linkgen .lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.linkgen select, .linkgen input[type="text"], .linkgen input[type="url"] {
  width: 100%;
  border: 1.6px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 0.87rem;
  font-family: inherit;
  color: var(--text);
  background: #f8fbfc;
}
.linkgen select:focus, .linkgen input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}
.linkgen .lg-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}
.lg-out { display: flex; gap: 8px; margin-top: 12px; }
.lg-out input {
  flex: 1;
  background: var(--teal-soft) !important;
  border-color: rgba(5, 179, 170, 0.35) !important;
  color: #067a74 !important;
  font-weight: 600;
}
.lg-out button {
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0 20px;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.lg-out button:hover { transform: translateY(-1px); }
.lg-out button.copied { background: #12a150; }

/* clickable service chips in the builder form */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.svc-chip {
  border: 1.4px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
}
.svc-chip:hover { border-color: var(--teal); color: var(--navy); }
.svc-chip.on {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: #067a74;
  font-weight: 600;
}

/* manage-lists card */
.listmgr textarea {
  width: 100%;
  border: 1.6px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 0.87rem;
  font-family: inherit;
  color: var(--text);
  background: #f8fbfc;
  resize: vertical;
  margin-bottom: 4px;
}
.listmgr textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}
.listmgr .cfg-save {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 0.9rem;
}
.listmgr .publish-status { margin-top: 10px; }

/* advanced (raw code) collapsible */
details.adv summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 4px;
  list-style-position: inside;
}
details.adv summary:hover { color: var(--navy); }
details.adv .out-card { margin-top: 10px; }

/* page-head for internal pages */
.page-head {
  background: radial-gradient(ellipse at 30% -30%, #0a5580 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
  color: #fff;
  text-align: center;
  padding: clamp(46px, 6vw, 70px) 20px;
}
.page-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.6px; margin-bottom: 10px; }
.page-head p { color: rgba(255, 255, 255, 0.68); max-width: 560px; margin: 0 auto; font-size: 0.98rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .cs-body { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; }
  .builder-wrap { grid-template-columns: 1fr; }
  .builder-out { position: static; }
  .cs-hero .cover-icon { display: none; }
}

@media (max-width: 640px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-divider, .nav-label { display: none; }
  .nav-cta { padding: 9px 16px; }
  .filter-group .fg-label { min-width: 100%; }
  .pager { grid-template-columns: 1fr; }
  .f-cols-2 { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}