:root{
  --home-shell-width: 1180px;
  --home-shell-gutter: 16px;

  --home-bg-panel: linear-gradient(180deg, #12161d, #0d1117);
  --home-bg-card: linear-gradient(180deg, #11161f, #0e141c);
  --home-bg-soft: rgba(7, 10, 15, 0.58);

  --home-border: var(--border-0, #1a2433);
  --home-text: #e6f2ff;
  --home-muted: var(--muted-0, #9fb2c3);
  --home-pink: var(--pink-0, #ff2ba6);
  --home-cyan: var(--cyan-0, #11f1ff);

  --home-radius-lg: 16px;
  --home-radius-md: 12px;
  --home-shadow:
    0 10px 30px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.homepage{
  overflow-x: hidden;
}

/* ------------------------------ */
/* Hero */
/* ------------------------------ */

.home-hero{
  position: relative;
  min-height: min(84vh, 900px);
  padding: 72px 18px 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.home-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,6,12,.38) 0%, rgba(2,6,12,.18) 18%, rgba(2,6,12,.18) 80%, rgba(2,6,12,.5) 100%),
    radial-gradient(120% 90% at 50% 8%, transparent 0%, rgba(0,0,0,.42) 70%),
    url('/images/KillSyncHeadshot.png') center center / cover no-repeat;
  transform: scale(1.02);
  z-index: -2;
}

.home-hero__backdrop{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 28%, rgba(0,0,0,.38) 100%);
  z-index: -1;
}

.home-hero__inner{
  width: min(980px, calc(100% - 24px));
  margin: 0 auto;
}

.home-hero__plate{
  padding: 16px 20px 18px;
  border-radius: 14px;
  background: rgba(8, 12, 18, .44);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
}

.home-hero__plate h1{
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 2vw + 1rem, 3rem);
  line-height: 1.12;
  color: #fff;
}

.home-hero__plate p{
  margin: 6px 0;
  color: #d6e6ff;
  font-size: clamp(1rem, .45vw + .95rem, 1.15rem);
  line-height: 1.55;
}

.home-hero__stats{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

.home-hero__actions{
  justify-content: center;
  margin-top: 14px;
}

/* ------------------------------ */
/* Main framing */
/* ------------------------------ */

.home-main{
  position: relative;
  padding: 28px 0 34px;
}

.home-shell{
  width: min(var(--home-shell-width), calc(100% - (var(--home-shell-gutter) * 2)));
  margin: 0 auto;
}

.home-shell > * + *{
  margin-top: 18px;
}

.home-section-head{
  padding: 0 2px;
}

.home-section-head__eyebrow,
.home-card__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .55rem;
  padding: .28rem .68rem;
  border-radius: 999px;
  border: 1px solid rgba(17,241,255,.22);
  background: rgba(8,18,24,.45);
  color: #9fefff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.home-section-head h2,
.home-panel__head h2{
  margin: 0 0 .38rem;
  color: var(--home-pink);
  text-shadow: 0 0 8px rgba(255,43,166,.35);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.9rem);
  line-height: 1.15;
}

.home-section-head p,
.home-panel__head p{
  margin: 0;
  color: var(--home-muted);
  max-width: 880px;
  line-height: 1.62;
}

.home-panel{
  padding: 18px;
  background: var(--home-bg-panel);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius-lg);
  box-shadow: var(--home-shadow);
}

.home-panel__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.home-panel__head--stack{
  margin-bottom: .85rem;
}

.home-panel__actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.home-card{
  background: var(--home-bg-soft);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius-md);
  padding: 1rem;
}

.home-card h3{
  margin: 0 0 .7rem;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.25;
}

.home-card p{
  margin: 0;
  color: var(--home-muted);
  line-height: 1.6;
}

.home-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .95rem;
}

.home-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.home-chip{
  display: inline-flex;
  align-items: center;
  padding: .28rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--home-border);
  background: rgba(17,241,255,.07);
  color: #cfe9ff;
  font-size: .78rem;
  line-height: 1;
}

.home-note{
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--home-border);
  border-radius: 10px;
  background: rgba(8,12,18,.45);
  color: var(--home-muted);
  line-height: 1.58;
}

.home-list{
  margin: .2rem 0 0 1.1rem;
  padding: 0;
}

.home-list li{
  margin: .45rem 0;
  color: var(--home-muted);
  line-height: 1.58;
}

.home-list strong{
  color: #fff;
}

.home-prose p{
  margin: 0 0 .95rem;
  color: var(--home-muted);
  line-height: 1.72;
  max-width: 960px;
}

.home-prose p:last-child{
  margin-bottom: 0;
}

/* ------------------------------ */
/* Modules */
/* ------------------------------ */

.home-module-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-card--module{
  min-height: 100%;
  background: var(--home-bg-card);
}

.home-card--module h3{
  color: var(--home-cyan);
}

.home-card--module p{
  min-height: 72px;
}

.home-card--featured{
  margin-top: 16px;
  background:
    radial-gradient(circle at right center, rgba(17,241,255,.08) 0%, rgba(17,241,255,0) 32%),
    linear-gradient(180deg, rgba(17,22,31,.96), rgba(11,16,24,.98));
}

.home-card--featured__copy p + p{
  margin-top: .7rem;
}

/* ------------------------------ */
/* Update layout */
/* ------------------------------ */

.home-split-grid{
  display: grid;
  grid-template-columns: 1.2fr .95fr;
  gap: 1rem;
}

.home-mini-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.home-mini-card{
  display: flex;
  flex-direction: column;
  gap: .32rem;
  padding: .85rem .9rem;
  border: 1px solid var(--home-border);
  border-radius: 10px;
  background: rgba(8,12,18,.4);
}

.home-mini-card strong{
  color: #fff;
  font-size: .95rem;
}

.home-mini-card span{
  color: var(--home-muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* ------------------------------ */
/* Gallery */
/* ------------------------------ */

.feature-gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.feature-shot{
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: var(--home-bg-card);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-shot:hover,
.feature-shot:focus-visible{
  transform: translateY(-2px);
  border-color: var(--home-cyan);
  box-shadow: 0 14px 30px rgba(0,0,0,.38), inset 0 0 0 1px rgba(17,241,255,.18);
  outline: none;
}

.feature-shot img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #090c10;
  border-bottom: 1px solid #172131;
}

.feature-shot-meta{
  display: block;
  padding: .85rem .9rem .95rem;
}

.feature-shot-meta strong{
  display: block;
  color: #fff;
  font-size: .98rem;
  margin-bottom: .3rem;
}

.feature-shot-meta span{
  display: block;
  color: var(--home-muted);
  font-size: .86rem;
  line-height: 1.4;
}

/* ------------------------------ */
/* FAQ cards */
/* ------------------------------ */

.home-faq-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-card--faq{
  display: flex;
  flex-direction: column;
  gap: .8rem;
  justify-content: space-between;
}

.home-card--faq h3{
  color: var(--home-pink);
}

.home-card--faq p{
  margin: 0;
}

/* ------------------------------ */
/* Ticker */
/* ------------------------------ */

.home-ticker__viewport{
  position: relative;
  overflow: hidden;
  padding: .4rem 0;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

.home-ticker__track{
  display: inline-flex;
  will-change: transform;
  transition: transform .6s ease-out;
}

.ht-tile{
  display: block;
  width: 240px;
  flex: 0 0 auto;
  margin-right: .75rem;
  padding: .6rem .65rem .55rem;
  border: 1px solid #2a2a2a;
  border-left: 4px solid #e74c3c;
  border-radius: 6px;
  background: #1b1b1b;
  color: #ccc;
  text-decoration: none;
  outline: none;
  transform: translateZ(0);
}

.ht-tile:hover{
  border-color: #3a3a3a;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  translate: 0 -1px;
}

.ht-tile:focus-visible{
  box-shadow: 0 0 0 2px #0ff, 0 0 0 6px rgba(0,255,255,.2);
}

.ht-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: .5rem;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: inset 0 0 12px rgba(0,0,0,.45);
}

.ht-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ht-head{
  margin: 0 0 .35rem;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ht-row{
  margin: .22rem 0;
  font-size: .82rem;
  color: #ddd;
}

.ht-muted{
  color: #a8a8a8;
  font-size: .72rem;
}

.ht-sec{
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

.ht-sec.high{ background:#052d1a; color:#18e0a0; }
.ht-sec.low{ background:#2f2a07; color:#e7c35a; }
.ht-sec.null{ background:#3a0a0a; color:#ff5a5a; }
.ht-sec.unknown{ background:#222; color:#aaa; }

/* ------------------------------ */
/* Lightbox */
/* ------------------------------ */

.ks-lightbox[hidden]{
  display: none !important;
}

.ks-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.ks-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
}

.ks-lightbox-dialog{
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: linear-gradient(180deg, #10151c, #0b1016);
  border: 1px solid #1d2a3d;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}

.ks-lightbox-figure{
  margin: 0;
}

.ks-lightbox-caption{
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid #172131;
  background: linear-gradient(180deg, rgba(14,20,28,.96), rgba(10,15,22,.96));
}

.ks-lightbox-caption h4{
  margin: 0 0 .35rem;
  color: #fff;
  font-size: 1.05rem;
}

.ks-lightbox-caption p{
  margin: 0;
  color: #9fb2c3;
  line-height: 1.45;
}

.ks-lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #2c3a4d;
  background: rgba(8,12,18,.78);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.ks-lightbox-close:hover,
.ks-lightbox-close:focus-visible{
  border-color: var(--home-cyan);
  box-shadow: 0 0 0 1px rgba(17,241,255,.2) inset;
  outline: none;
}

.ks-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  border: 1px solid #2c3a4d;
  background: rgba(8,12,18,.75);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.ks-lightbox-nav.prev{
  left: 10px;
  border-radius: 12px;
}

.ks-lightbox-nav.next{
  right: 10px;
  border-radius: 12px;
}

.ks-lightbox-nav:hover,
.ks-lightbox-nav:focus-visible{
  border-color: var(--home-cyan);
  outline: none;
}

body.ks-lightbox-open{
  overflow: hidden;
}

.ks-lightbox-toolbar{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100% - 80px);
}

.ks-lightbox-tool{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #2c3a4d;
  background: rgba(8,12,18,.78);
  color: #dcecff;
  text-decoration: none;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ks-lightbox-tool:hover,
.ks-lightbox-tool:focus-visible{
  border-color: var(--home-cyan);
  box-shadow: 0 0 0 1px rgba(17,241,255,.2) inset;
  transform: translateY(-1px);
  outline: none;
}

.ks-lightbox-stage{
  position: relative;
  width: 100%;
  height: min(74vh, 900px);
  overflow: hidden;
  background: #05080c;
  cursor: zoom-in;
  touch-action: none;
}

.ks-lightbox-stage.is-zoomed{
  cursor: grab;
}

.ks-lightbox-stage.is-dragging{
  cursor: grabbing;
}

.ks-lightbox-stage img{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  cursor: inherit;
  pointer-events: auto;
}

/* ------------------------------ */
/* Responsive */
/* ------------------------------ */

@media (max-width: 1080px){
  .home-module-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-split-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .home-main{
    padding-top: 22px;
  }

  .home-shell{
    width: min(var(--home-shell-width), calc(100% - 20px));
  }

  .home-panel{
    padding: 14px;
    border-radius: 14px;
  }

  .home-panel__head{
    margin-bottom: .9rem;
  }

  .home-module-grid,
  .home-mini-grid,
  .home-faq-row,
  .feature-gallery-grid{
    grid-template-columns: 1fr;
  }

  .home-card--module p{
    min-height: 0;
  }

  .home-hero{
    min-height: 72vh;
    padding: 54px 14px 34px;
  }

  .home-hero__plate{
    padding: 14px;
  }

  .home-hero__stats{
    gap: .45rem;
  }

  .ks-lightbox-dialog{
    width: min(100vw - 16px, 1100px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }

  .ks-lightbox-stage{
    height: min(62vh, 680px);
  }

  .ks-lightbox-nav{
    width: 42px;
    height: 48px;
  }

  .ks-lightbox-toolbar{
    gap: 6px;
    max-width: calc(100% - 64px);
  }

  .ks-lightbox-tool{
    height: 34px;
    padding: 0 10px;
    font-size: .84rem;
  }
}