/* Signalpath Systems (fictional): low voltage & security. Dark-mode tech, #0b1220 + cyan #22d3ee, Space Grotesk + Inter. */
:root {
  --bg: #ffffff; --surface: #f2f5fa; --surface-2: #e6ebf3; --ink: #0b1220; --muted: #4a5568; --line: rgba(11, 18, 32, .1);
  --accent: #22d3ee; --accent-ink: #04212a; --accent-text: #0e7490;
  --dark: #0b1220; --dark-2: #111b2e; --on-dark: #e8eef7; --on-dark-muted: rgba(203, 213, 225, .74);
  --cyan-soft: #67e8f9; --indigo: #818cf8;
  --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --h-weight: 600; --h-case: none; --h-track: -.035em; --h-leading: 1.03;
  --radius: 14px; --radius-sm: 10px; --radius-btn: 10px;
}

h2 { font-size: clamp(34px, 4.4vw, 58px); }
h3 { letter-spacing: -.02em; }
.sp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.k-btn svg, .k-chips svg, .k-callbar svg { fill: none; }
.k-btn:not(.k-btn--ghost):hover { box-shadow: 0 14px 34px -12px rgba(34, 211, 238, .7); }
.k-dark .k-btn--ghost, .sp-hero .k-btn--ghost { color: var(--on-dark); }
.k-card:hover { translate: 0 -4px; }
.k-card { transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
@keyframes sp-blink { 50% { opacity: .25; } }

/* ---------- floating pill nav ---------- */
.k-nav { background: transparent; border-bottom: 0; backdrop-filter: none; color: var(--on-dark); }
.k-nav.is-scrolled { box-shadow: none; }
.k-nav .k-wrap { min-height: 62px; margin-top: 10px; padding: 0 10px 0 16px; gap: 22px; border-radius: 16px; background: rgba(11, 18, 32, .84);
  backdrop-filter: saturate(1.4) blur(14px); border: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
.k-logo { font-size: 21px; letter-spacing: -.03em; }
.k-logo svg { width: 36px; height: 36px; }
.k-logo small { color: var(--on-dark-muted); letter-spacing: .1em; font-size: 10px; }
.k-links { gap: 22px; }
.k-links a { color: var(--on-dark-muted); font-size: 14.5px; }
.k-links a:hover { color: #fff; }
.k-burger { border-color: rgba(148, 163, 184, .3); color: var(--on-dark); }
@media (max-width: 1080px) { .k-links { gap: 16px; } .k-links a { font-size: 14px; } }
@media (max-width: 960px) {
  .k-links { left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); border-radius: 16px; background: #0b1220; border: 1px solid rgba(148, 163, 184, .2); padding: 6px 18px 12px; }
  .k-links a { border-bottom-color: rgba(148, 163, 184, .14); font-size: 16px; }
}
@media (max-width: 640px) { .sp-hide-sm, .sp-tb-area { display: none; } .k-topbar { font-size: 13px; } .k-topbar a { white-space: nowrap; } .k-logo small { display: none; } }
@media (max-width: 420px) { .k-tabs button { font-size: 13.5px; padding-inline: 4px; } }

/* ---------- hero ---------- */
.sp-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark);
  margin-top: -72px; padding: calc(72px + clamp(44px, 6vw, 84px)) 0 clamp(44px, 5vw, 72px); }
.sp-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(148, 163, 184, .2) 1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 62% 38%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 85% 70% at 62% 38%, #000 25%, transparent 75%); }
.sp-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 78% 34%, rgba(34, 211, 238, .2), transparent 70%), radial-gradient(35% 45% at 12% 90%, rgba(129, 140, 248, .16), transparent 70%); }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.sp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 11px; border-radius: 999px; background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .26);
  color: #a5f3fc; font: 500 13px/1.2 var(--font-body); margin: 0 0 26px; }
.sp-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(34, 211, 238, .2); animation: sp-blink 2s infinite; flex: none; }
.sp-hero h1 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.04; margin-bottom: .36em; }
.sp-detect { position: relative; display: inline-block; padding: 0 .12em; margin: 0 -.02em; color: #fff; }
.sp-detect::before { content: ""; position: absolute; inset: .02em -.02em -.06em; pointer-events: none; --c: var(--accent);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px no-repeat,
              linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px no-repeat,
              linear-gradient(var(--c), var(--c)) 0 100% / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 16px no-repeat,
              linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px no-repeat,
              rgba(34, 211, 238, .07);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6)); animation: sp-lock .7s 1.15s var(--ease) both; }
.sp-detect > i { position: absolute; left: -.02em; top: .02em; transform: translateY(-100%); font: 700 11px/1 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); padding: 4px 7px 3px; border-radius: 4px 4px 0 0; animation: sp-lock-tag .4s 1.6s var(--ease) both; white-space: nowrap; }
@keyframes sp-lock { from { opacity: 0; transform: scale(1.25); } }
@keyframes sp-lock-tag { from { opacity: 0; } }
.sp-hero .k-lead { color: var(--on-dark-muted); }
.sp-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.sp-hero .k-rating { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .2); }
.sp-hero .k-chips li { background: rgba(148, 163, 184, .06); border-color: rgba(148, 163, 184, .2); color: var(--on-dark); }
.k-chips svg { color: var(--accent); }

/* camera wall */
.sp-monitor-wrap { position: relative; padding: 34px 0 52px; }
.sp-monitor { position: relative; border-radius: 18px; padding: 10px; background: linear-gradient(180deg, #131e33, #0c1426); border: 1px solid rgba(148, 163, 184, .2);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .02), 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 120px -30px rgba(34, 211, 238, .4);
  transform: perspective(1800px) rotateY(-7deg) rotateX(2deg); transform-origin: 60% 50%; }
.sp-mon-bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; font-size: 12.5px; color: var(--on-dark-muted); }
.sp-dots { display: inline-flex; gap: 5px; }
.sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(148, 163, 184, .3); }
.sp-mon-title { flex: 1; font-weight: 600; color: var(--on-dark); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-live { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fca5a5; }
.sp-live i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: sp-blink 1.2s infinite; }
.sp-cams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sp-cam { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #000; transition: box-shadow .3s; }
.sp-cam img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.15) brightness(.8); transform: scale(1.04); }
.sp-cam::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .6)); }
.sp-cam::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(103, 232, 249, .07), transparent); animation: sp-scan 6s linear infinite; }
.sp-cam:nth-child(2)::after { animation-delay: -1.5s; } .sp-cam:nth-child(3)::after { animation-delay: -3s; } .sp-cam:nth-child(4)::after { animation-delay: -4.5s; }
@keyframes sp-scan { to { top: 100%; } }
.sp-rec { position: absolute; z-index: 2; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 var(--font-display); letter-spacing: .12em; color: #fff;
  background: rgba(0, 0, 0, .5); padding: 4px 6px; border-radius: 4px; }
.sp-rec i { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: sp-blink 1s steps(2) infinite; }
.sp-ts { position: absolute; z-index: 2; top: 8px; right: 8px; font: 500 10.5px/1 var(--font-display); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px #000; }
.sp-cam-name { position: absolute; z-index: 2; left: 8px; bottom: 7px; font: 600 10.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; }
.sp-box { position: absolute; z-index: 2; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); border: 1.5px solid var(--accent); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px rgba(34, 211, 238, .5), inset 0 0 20px rgba(34, 211, 238, .16); opacity: 0; transform: scale(1.15); transition: opacity .3s, transform .45s var(--ease); }
.sp-box em { position: absolute; left: -1.5px; top: 0; transform: translateY(-100%); font: 700 9px/1 var(--font-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 3px 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }
.sp-cam.motion { box-shadow: 0 0 0 2px rgba(34, 211, 238, .75); }
.sp-cam.motion .sp-box { opacity: 1; transform: none; }
.sp-mon-foot { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 12px 6px 4px; font-size: 12px; color: var(--on-dark-muted); }
.sp-mon-foot b { color: #fff; font-family: var(--font-display); }
.sp-notify { position: absolute; z-index: 3; left: -30px; bottom: -10px; display: flex; align-items: center; gap: 12px; min-width: 252px; max-width: 300px; padding: 12px 16px 12px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 26px 50px -16px rgba(0, 0, 0, .65); }
.sp-notify.show { animation: sp-pop .55s var(--ease); }
@keyframes sp-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.sp-notify-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--dark); color: var(--accent); display: grid; place-items: center; flex: none; }
.sp-notify-ic svg { width: 20px; height: 20px; }
.sp-notify b { display: block; font: 600 13.5px/1.3 var(--font-display); }
.sp-notify small { display: block; font-size: 12.5px; color: var(--muted); }
.sp-wifi-chip { position: absolute; z-index: 3; right: -22px; top: -16px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--on-dark);
  background: rgba(17, 27, 46, .92); backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, .35); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); animation: sp-float 6s ease-in-out infinite; }
.sp-wifi-chip svg { width: 24px; height: 24px; color: var(--accent); flex: none; }
.sp-wifi-chip b { display: block; font: 600 13px/1.25 var(--font-display); }
.sp-wifi-chip small { display: block; font-size: 11.5px; color: var(--on-dark-muted); }
@keyframes sp-float { 50% { transform: translateY(-6px); } }
@media (max-width: 1020px) {
  .sp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-monitor { transform: none; }
  .sp-notify { left: 8px; bottom: 0; min-width: 0; }
  .sp-wifi-chip { right: 8px; top: 0; }
}
@media (max-width: 520px) {
  .sp-ts { font-size: 8.5px; top: 6px; right: 6px; } .sp-cam-name { font-size: 9px; } .sp-rec { font-size: 8.5px; padding: 3px 4px; } .sp-box em { font-size: 7.5px; }
  .sp-mon-foot span:last-child { display: none; }
  .sp-notify { padding: 10px 12px 10px 10px; } .sp-notify-ic { width: 32px; height: 32px; }
}

/* stats in the hero */
.sp-stats-wrap { margin-top: clamp(48px, 6vw, 84px); }
.sp-stats { background: rgba(148, 163, 184, .16); border-color: rgba(148, 163, 184, .16); border-radius: 18px; }
.sp-stats > div { background: rgba(13, 21, 38, .96); padding: clamp(20px, 2.4vw, 30px); }
.sp-stats b { font-weight: 600; letter-spacing: -.04em; background: linear-gradient(90deg, #fff 30%, var(--cyan-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-stats span { color: var(--on-dark-muted); }

/* ---------- section heads ---------- */
.sp-head-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.sp-head-row .k-head { margin-bottom: 0; } .sp-head-row .k-lead { margin: 0; }
@media (max-width: 860px) { .sp-head-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- services bento ---------- */
.sp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(236px, auto); gap: 16px; }
.sp-bento > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.sp-bento > :nth-child(6) { grid-column: span 2; }
.sp-svc { display: flex !important; flex-direction: column; border-radius: 18px; }
.sp-svc .k-more { margin-top: auto; padding-top: 14px; }
.sp-svc h3 { font-size: 19px; margin-bottom: 8px; }
.sp-svc p { font-size: 15px; }
.sp-svc--photo { overflow: hidden; color: #fff; padding: 0; border: 0; justify-content: flex-end; isolation: isolate; min-height: 280px; background: var(--dark) !important; }
.sp-svc--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.sp-svc--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 18, 32, .05) 10%, rgba(11, 18, 32, .6) 45%, rgba(11, 18, 32, .94) 85%); }
.sp-svc--photo:hover img { transform: scale(1.05); }
.sp-svc-body { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; }
.sp-svc--photo p { color: rgba(255, 255, 255, .84); }
.sp-svc--photo .k-more, .sp-svc--wifi .k-more { color: var(--cyan-soft); }
.sp-bento > :nth-child(1) h3 { font-size: clamp(26px, 2.6vw, 34px); }
.sp-bento > :nth-child(1) p { font-size: 16.5px; max-width: 46ch; }
.sp-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; }
.sp-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; }
.sp-mini li { font-size: 13px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.sp-svc--wifi { background: var(--dark) !important; color: var(--on-dark); border-color: transparent !important; overflow: hidden; }
.sp-svc--wifi p { color: var(--on-dark-muted); }
.sp-svc--wifi .k-icon { background: rgba(34, 211, 238, .14); color: var(--accent); }
.sp-rings { position: absolute; right: -50px; top: -50px; width: 210px; height: 210px; pointer-events: none; }
.sp-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(34, 211, 238, .45); animation: sp-ring 3.6s ease-out infinite; }
.sp-rings i:nth-child(2) { animation-delay: 1.2s; } .sp-rings i:nth-child(3) { animation-delay: 2.4s; }
@keyframes sp-ring { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@media (max-width: 960px) { .sp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-bento > :nth-child(1) { grid-row: span 1; min-height: 400px; } }
@media (max-width: 560px) { .sp-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .sp-bento > :nth-child(1), .sp-bento > :nth-child(6) { grid-column: auto; } .sp-bento > :nth-child(1) { min-height: 420px; } }

/* ---------- camera planner (signature) ---------- */
.sp-planner { background: radial-gradient(50% 60% at 70% 50%, rgba(34, 211, 238, .08), transparent 70%), var(--dark); overflow: hidden; }
.sp-plan-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sp-plan-ctrl { background: linear-gradient(180deg, #111b2e, #0d1627); border: 1px solid rgba(148, 163, 184, .16); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.sp-range { display: block; margin-bottom: 24px; }
.sp-range > span { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: 12px; font-size: 15px; }
.sp-range output { font: 600 24px/1 var(--font-display); color: var(--accent); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.sp-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 30%), rgba(148, 163, 184, .22) var(--p, 30%)); }
.sp-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid var(--accent); box-shadow: 0 0 0 6px rgba(34, 211, 238, .18), 0 4px 12px rgba(0, 0, 0, .45); }
.sp-range input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 6px solid var(--accent); box-shadow: 0 0 0 6px rgba(34, 211, 238, .18); }
.sp-range input:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.sp-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.sp-toggles label { position: relative; }
.sp-toggles input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sp-toggles span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .26); font-size: 14px; font-weight: 600; color: var(--on-dark-muted); transition: all .2s; }
.sp-toggles span::before { content: ""; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(148, 163, 184, .55); transition: all .2s; }
.sp-toggles input:checked + span { border-color: var(--accent); color: #fff; background: rgba(34, 211, 238, .1); }
.sp-toggles input:checked + span::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #0f192b; }
.sp-toggles input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-result { border-top: 1px solid rgba(148, 163, 184, .16); padding-top: 22px; display: grid; gap: 14px; }
.sp-result-n { display: flex; align-items: center; gap: 16px; }
.sp-result-n b { font: 600 clamp(66px, 7vw, 92px)/.88 var(--font-display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff, var(--cyan-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; min-width: 1.1ch; }
.sp-result-n b.bump { animation: sp-bump .45s var(--ease); }
@keyframes sp-bump { 40% { transform: scale(1.14); } }
.sp-result-n span { font-size: 13px; line-height: 1.3; color: var(--on-dark-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
#e-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; color: var(--on-dark-muted); }
#e-list b { color: var(--accent); font-family: var(--font-display); margin-right: 4px; }
.sp-result-rec { font-size: 14px; color: var(--on-dark); background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .22); border-radius: 10px; padding: 10px 14px; margin: 0; }
.sp-plan-send { width: 100%; margin-top: 22px; }
.sp-fine { font-size: 13px; color: var(--on-dark-muted); margin: 12px 0 0; text-align: center; }
.sp-plan-art { position: relative; border-radius: 24px; padding: clamp(14px, 2vw, 26px); background: radial-gradient(60% 60% at 50% 45%, rgba(34, 211, 238, .08), transparent 70%), #0a111f;
  border: 1px solid rgba(148, 163, 184, .16); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.sp-plan-art svg { width: 100%; height: auto; }
.pl-house { fill: rgba(148, 163, 184, .08); stroke: rgba(226, 232, 240, .8); stroke-width: 3; stroke-linejoin: round; }
.pl-wall { fill: none; stroke: rgba(226, 232, 240, .24); stroke-width: 1.5; }
.pl-zone rect { fill: rgba(148, 163, 184, .05); stroke: rgba(148, 163, 184, .22); stroke-dasharray: 4 4; transition: fill .3s, stroke .3s; }
.pl-zone .pool { fill: rgba(56, 189, 248, .14); stroke: rgba(56, 189, 248, .3); stroke-dasharray: none; }
.pl-zone text { font: 600 9px var(--font-body); letter-spacing: .16em; fill: rgba(148, 163, 184, .6); }
.pl-zone.on rect:not(.pool) { fill: rgba(34, 211, 238, .08); stroke: rgba(34, 211, 238, .6); }
.pl-win rect { fill: #a5f3fc; }
.pl-cam > circle { fill: var(--accent); stroke: #0a111f; stroke-width: 2.5; }
.pl-cam .pl-lens { fill: #0a111f; stroke: none; }
.pl-cone { animation: sp-cone .55s var(--ease) both; }
@keyframes sp-cone { from { opacity: 0; transform: scale(.3); } }
.sp-legend { display: flex; gap: 18px; justify-content: center; margin-top: 10px; font-size: 12.5px; color: var(--on-dark-muted); }
.sp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sp-legend i { display: inline-block; }
.lg-cam { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(34, 211, 238, .2); }
.lg-win { width: 14px; height: 4px; border-radius: 2px; background: #a5f3fc; }
@media (max-width: 960px) { .sp-plan-grid { grid-template-columns: minmax(0, 1fr); } .sp-plan-art { order: -1; } }

/* ---------- packages (signature) ---------- */
.sp-pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding-top: 14px; }
.sp-pk { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 2.8vw, 34px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 50px -34px rgba(11, 18, 32, .35); transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
.sp-pk:hover { translate: 0 -6px; box-shadow: 0 34px 64px -32px rgba(11, 18, 32, .45); }
.sp-pk-ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #0b1220, #1e293b); color: var(--accent); margin-bottom: 22px; }
.sp-pk-ic svg { width: 26px; height: 26px; }
.sp-pk h3 { font-size: 26px; margin-bottom: 6px; }
.sp-pk-for { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.sp-pk-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; font-size: 15px; line-height: 1.45; }
.sp-pk-list li { display: flex; gap: 10px; align-items: flex-start; }
.sp-pk-list svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); margin-top: 2px; }
.sp-pk-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px dashed var(--line); }
.sp-pk-foot span { font-size: 14px; color: var(--muted); }
.sp-pk-foot b { color: var(--ink); }
.sp-pk--pop { background: var(--dark); color: var(--on-dark); border-color: transparent; margin-block: -14px;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .45), 0 40px 80px -30px rgba(11, 18, 32, .7), 0 0 90px -24px rgba(34, 211, 238, .45); }
.sp-pk--pop .sp-pk-for, .sp-pk--pop .sp-pk-foot span { color: var(--on-dark-muted); }
.sp-pk--pop .sp-pk-list svg { color: var(--accent); }
.sp-pk--pop .sp-pk-foot { border-top-color: rgba(148, 163, 184, .2); }
.sp-pk--pop .sp-pk-foot b { color: #fff; }
.sp-pk--pop .sp-pk-ic { background: rgba(34, 211, 238, .12); }
.sp-pk-ribbon { position: absolute; top: -13px; left: 50%; translate: -50% 0; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(34, 211, 238, .7); white-space: nowrap; }
@media (max-width: 980px) { .sp-pk-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 30px; } .sp-pk--pop { margin-block: 0; } }

/* ---------- work ---------- */
.sp-work-wrap { position: relative; }
.sp-work .k-gallery { grid-auto-rows: clamp(180px, 19vw, 236px); }
.sp-work .k-gallery button { border-radius: 14px; background: var(--dark-2); }
.sp-work .k-gallery button:nth-child(4) { grid-row: auto; grid-column: span 2; }
.sp-work .k-gallery button:first-child span { bottom: auto; top: 14px; left: 14px; }
.sp-work .k-gallery span { background: rgba(11, 18, 32, .72); backdrop-filter: blur(6px); font-weight: 600; }
.sp-case { position: absolute; left: 22px; bottom: 22px; width: min(380px, calc(50% - 44px)); padding: 22px; border-radius: 16px; color: var(--on-dark);
  background: rgba(11, 18, 32, .88); backdrop-filter: blur(14px); border: 1px solid rgba(34, 211, 238, .3); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75); }
.sp-case-k { font: 600 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.sp-case h3 { font-size: 20px; margin-bottom: 14px; }
.sp-case dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.sp-case dl div { background: rgba(148, 163, 184, .1); border-radius: 8px; padding: 8px 9px; }
.sp-case dt { font-size: 10px; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: .08em; line-height: 1.2; }
.sp-case dd { margin: 3px 0 0; font: 600 16px/1.1 var(--font-display); color: #fff; }
.sp-case > p:last-child { font-size: 14px; color: var(--on-dark-muted); margin: 0; }
@media (max-width: 1100px) { .sp-case dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sp-case { position: static; width: auto; margin-top: 14px; }
  .sp-case dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-work .k-gallery button:first-child span { top: auto; bottom: 12px; }
}
@media (max-width: 420px) { .sp-case dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sp-work .k-gallery span { font-size: 11.5px; left: 8px; bottom: 8px; max-width: calc(100% - 16px); } }

/* ---------- process ---------- */
.sp-process .k-steps { gap: 18px; }
.sp-process .k-steps li { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 82px 22px 24px; box-shadow: 0 18px 40px -34px rgba(11, 18, 32, .4); }
.sp-process .k-steps li::before { top: 24px; left: 22px; font-size: 40px; font-weight: 600; letter-spacing: -.04em; color: var(--accent-text); }
.sp-process .k-steps li::after { top: 44px; left: 100%; right: auto; width: 18px; height: 2px; opacity: 1; background: var(--accent); }
.sp-process .k-steps h3 { font-size: 18px; margin-bottom: 8px; }
.sp-process .k-steps p { font-size: 15px; margin: 0; }
@media (max-width: 860px) { .sp-process .k-steps li { padding: 22px 22px 22px 84px; } .sp-process .k-steps li::before { top: 20px; } }

/* ---------- about ---------- */
.sp-about-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .sp-about-grid { grid-template-columns: minmax(0, 1fr); } .sp-about-media { max-width: 540px; } }
.sp-about-media { position: relative; padding-bottom: 70px; }
.sp-about-photo { aspect-ratio: 5 / 4; border-radius: 22px; }
.sp-about-photo img { filter: saturate(.7) brightness(.85); }
.sp-about-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(200deg, transparent 40%, rgba(11, 18, 32, .65)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sp-badge { position: absolute; right: 22px; bottom: 0; width: 232px; padding: 26px 18px 16px; border-radius: 18px; background: #f8fafc; color: var(--ink); transform: rotate(-3deg);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5); }
.sp-badge::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 7px; border-radius: 99px; background: #cbd5e1; translate: -50% 0; }
.sp-badge-top { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-display); letter-spacing: .02em; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.sp-badge-top svg { width: 22px; height: 22px; }
.sp-badge-av { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 12px; font: 600 26px/1 var(--font-display); letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, var(--accent-text), #4f46e5); }
.sp-badge > b { display: block; font: 600 20px/1.15 var(--font-display); letter-spacing: -.02em; }
.sp-badge-role { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.sp-badge dl { margin: 0; display: grid; gap: 6px; font-size: 12.5px; }
.sp-badge dl div { display: flex; justify-content: space-between; }
.sp-badge dt { color: var(--muted); }
.sp-badge dd { margin: 0; font-weight: 600; }
.sp-badge-code { display: block; height: 26px; margin-top: 14px; border-radius: 2px; opacity: .85;
  background: repeating-linear-gradient(90deg, #0b1220 0 2px, transparent 2px 4px, #0b1220 4px 5px, transparent 5px 8px, #0b1220 8px 11px, transparent 11px 12px, #0b1220 12px 13px, transparent 13px 17px); }
.sp-about-copy > p { color: var(--on-dark-muted); }
.sp-quote { position: relative; margin: 30px 0; padding: 26px 26px 22px; border-radius: 16px; background: rgba(34, 211, 238, .06); border: 1px solid rgba(34, 211, 238, .22); }
.sp-quote::before { content: "\201C"; position: absolute; top: -28px; left: 18px; font: 700 80px/1 var(--font-display); color: var(--accent); }
.sp-quote p { font-size: clamp(18px, 1.7vw, 21px); color: #fff; line-height: 1.5; margin-bottom: 12px; }
.sp-quote cite { font-style: normal; font-size: 14px; color: var(--cyan-soft); font-weight: 600; }
.sp-creds { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sp-creds li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(148, 163, 184, .08); border: 1px solid rgba(148, 163, 184, .2); font-size: 14px; font-weight: 600; }
.sp-creds svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- reviews ---------- */
.sp-rev-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.sp-sample-note { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px dashed rgba(11, 18, 32, .2); }
.sp-reviews .k-review { border-radius: 16px; box-shadow: 0 14px 30px -26px rgba(11, 18, 32, .45); }
.sp-reviews .k-who i { background: linear-gradient(135deg, var(--accent), var(--indigo)); color: #fff; }
.k-stars svg.dim { opacity: .25; }

/* ---------- area ---------- */
.sp-area-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .sp-area-grid { grid-template-columns: minmax(0, 1fr); } .sp-map-wrap { order: 2; } }
.sp-area .k-map { border-radius: 22px; border-color: rgba(148, 163, 184, .2); aspect-ratio: 5 / 4; box-shadow: 0 0 0 8px rgba(148, 163, 184, .04), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.sp-area .k-map iframe { filter: invert(.92) hue-rotate(180deg) saturate(.75) contrast(.92); }
.sp-area-list li { display: inline-flex; align-items: center; gap: 8px; background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .2); color: var(--on-dark); }
.sp-area-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.sp-area-note { margin: 22px 0 0; color: var(--on-dark-muted); font-size: 15px; }
.sp-area-note a { color: var(--cyan-soft); font-weight: 600; }

/* ---------- FAQ ---------- */
.sp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .sp-faq-grid { grid-template-columns: minmax(0, 1fr); } }
.sp-faq .k-faq details { border-radius: 14px; }
.sp-faq .k-faq details[open] { box-shadow: 0 18px 40px -30px rgba(11, 18, 32, .5); }
.sp-faq .k-faq summary::after { color: var(--accent-text); }

/* ---------- booking ---------- */
.sp-book { background: radial-gradient(50% 60% at 20% 50%, rgba(34, 211, 238, .1), transparent 70%), var(--dark); overflow: hidden; }
.sp-book-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 960px) { .sp-book-grid { grid-template-columns: minmax(0, 1fr); } .sp-book-copy { order: -1; } }
.sp-book-widget { border: 0; border-radius: 20px; box-shadow: 0 0 0 1px rgba(34, 211, 238, .28), 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 100px -30px rgba(34, 211, 238, .4); }
.sp-book-steps { list-style: none; counter-reset: s; padding: 0; margin: 26px 0 32px; display: grid; gap: 16px; }
.sp-book-steps li { counter-increment: s; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; color: var(--on-dark-muted); font-size: 15px; }
.sp-book-steps li::before { content: counter(s); grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font: 600 16px/1 var(--font-display);
  color: var(--accent); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); }
.sp-book-steps b { display: block; color: #fff; font-family: var(--font-display); font-weight: 600; }
.sp-bigphone { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; }
.sp-bigphone svg { width: 54px; height: 54px; padding: 14px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); flex: none; fill: none; transition: transform .3s var(--ease); }
.sp-bigphone:hover svg { transform: rotate(-12deg); }
.sp-bigphone small { display: block; font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 6px; }
.sp-bigphone span { font: 600 clamp(28px, 3vw, 38px)/1.05 var(--font-display); letter-spacing: -.03em; }

/* ---------- CTA ---------- */
.sp-cta-sec { padding: var(--sec) 0; }
.sp-cta { background: linear-gradient(120deg, #22d3ee 0%, #38bdf8 50%, #818cf8 100%); }
.sp-cta-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(4, 33, 42, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 33, 42, .09) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000); mask-image: linear-gradient(90deg, transparent 25%, #000); }
.sp-cta h2 { max-width: 14em; }
.sp-cta p { max-width: 50ch; font-size: 18px; margin-bottom: 26px; }

/* ---------- footer ---------- */
.k-footer { background: #070c17; }
.sp-foot-logo { display: inline-flex; color: var(--on-dark); margin-bottom: 18px; }
.sp-foot-logo small { color: var(--on-dark-muted); }
.sp-foot-lic { font-size: 13.5px; color: var(--on-dark); }