body {
  font-family: 'Poppins', sans-serif;
}

nav {
  padding: 1.5rem 2rem;  
  background: linear-gradient(to right, #ffffff, #f7f9fc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  position: relative;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2rem;
}

.nav-left,
.nav-right {
  flex: 1;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.logo {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 1.10rem;
  transition: color 0.2s ease;
}

.nav-center a:hover {
  color: #0077ff;
}

.nav-left a:hover {
  color: #000000;
}

.logo {
  font-weight: bold;
  font-size: 2.25rem;
  color: #0077ff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.logo:hover .highlight-logo {
  color: black;
}

.eye-wrapper {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle; /* aligns with text baseline */
  position: relative;
  transform: translateY(-2.5px); 
}

.recording-dot {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  animation: blink 1.5s infinite;
  z-index: 2;
}

@keyframes blink {
  0%, 49% {
    visibility: hidden;
  }
  50%, 100% {
    visibility: visible;
  }
}

.eye-icon {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.eyelid {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.2s ease-in-out;
}

.logo:hover .eyelid {
  transform: scaleY(1);
}

/* Dropdown wrapper */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content (initially hidden) */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  border-radius: 4px;
  min-width: 90px;

  /* Fade + slide-down setup */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* slide up by default */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Dropdown links */
.dropdown-content a {
  width: 100%;               /* ✅ Force it to fill parent */
  box-sizing: border-box;    /* ✅ Ensure padding doesn't overflow width */
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  margin: 0;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}

/* On hover: fade in and slide down */
.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* slide down into position */
}


.slogan-section {
  text-align: left;
  padding: 4rem 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  max-width: 820px;  
  margin: 2rem;     /* Centers the block horizontally */
}

.slogan-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0a1e40;
  margin-bottom: 0.75rem;
  line-height: 1;          /* Tighter line spacing */
}

.slogan-title.second-line {
  margin-top: -0.25rem; /* pull it upward */
}

.slogan-sub {
  font-size: 1.25rem;
  font-weight: 400;
  color: #444;
}

.highlight-you {
  color: #0077ff;
  font-weight: 800;
}

.highlight-logo {
  color: #004799;
}

.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.2;
  background: linear-gradient(to right, #0059ff, #71afff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1;
  margin-top:1rem;

  /* transition for movement and hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pseudo-element for reverse gradient */
.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #0059ff, #71afff); /* reversed gradient */
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
}

/* On hover: fade gradient & move button up */
.cta-button:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.cta-button:hover::before {
  opacity: 1;
}

.site-footer {
  background-color: #eaf2fa;
  padding: 3rem 2rem 1rem;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1;
  min-width: 220px;
}

.footer-column h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.footer-column p,
.footer-column a {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  text-decoration: none;
}

.footer-logo {
  width: 220px;
  max-width: 100%;
  margin-bottom: 1rem;
}

.footer-badge {
  width: 90px;
  margin: 0.5rem 0.5rem 0 0;
}

.footer-bottom {
  border-top: 1px solid #ccc;
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

.social-icons {
  margin-top: 0.5rem;
}

.social-icons i {
  margin: 0 0.5rem;
  font-size: 1.2rem;
  color: #1a1a1a;
  transition: color 0.2s;
}

.social-icons i:hover {
  color: #0077ff;
}

.slogan-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 2rem;
  gap: 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  flex-wrap: wrap;
}

.slogan-section {
  max-width: 600px;
  flex: 1;
}

.slogan-image {
  flex: 1;
  max-width: 500px;
}

.slogan-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.slogan-hero {
  margin-top: 1px; 
  padding: 4rem 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
}

.hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

.hero-text {
  flex: 1;
  min-width: 300px;
}

.hero-images {
  position: relative;
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: flex-end;
}

.main-img {
  width: 100%;
  border-radius: 10px;
}

.home-parallax-banner {
  position: relative;
  min-height: clamp(24rem, 70vh, 42rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  background-image:
    linear-gradient(115deg, rgba(10, 30, 64, 0.82), rgba(10, 30, 64, 0.42)),
    url("../images/bg-prallax-1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

.home-cube-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 70% 12%, rgba(82, 181, 255, 0.42), transparent 26rem),
    linear-gradient(145deg, #030817 0%, #061936 55%, #0b4f93 100%);
  pointer-events: none;
}

.home-cube-world canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.home-parallax-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at top right, rgba(0, 119, 255, 0.28), transparent 32%),
    linear-gradient(to top, rgba(4, 11, 24, 0.35), transparent 40%);
  pointer-events: none;
}

.home-parallax-banner__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1120px);
  color: #fff;
  text-align: left;
}

.home-parallax-banner__inner--contact {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 320px);
  gap: 2rem;
  align-items: center;
}

.home-parallax-banner__content {
  min-width: 0;
}

.home-parallax-banner__eyebrow {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #bcdcff;
}

.home-parallax-banner__title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  font-weight: 800;
  opacity: 0;
  transform: translateY(0.45em);
  clip-path: inset(0 0 100% 0);
  animation: parallax-title-reveal 850ms cubic-bezier(.16,.84,.24,1) 220ms forwards;
}

@keyframes parallax-title-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.45em);
    clip-path: inset(0 0 100% 0);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

.home-parallax-banner__copy {
  margin: 1.5rem 0 0;
  max-width: 40rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.home-parallax-banner__actions {
  margin-top: 2rem;
}

.home-parallax-banner__actions .cta-button {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  border-radius: 999px;
}

.home-page .cta-button {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  border-radius: 999px;
}

.home-page {
  background:
    radial-gradient(circle at top left, rgba(0, 119, 255, 0.08), transparent 28rem),
    linear-gradient(180deg, #f5f9ff 0%, #ffffff 42%, #eef6ff 100%);
}

.home-page .cta-button {
  box-shadow: 0 16px 32px rgba(0, 89, 255, 0.22);
}

.home-parallax-banner--home {
  min-height: clamp(34rem, 78vh, 48rem);
  padding: clamp(4rem, 8vw, 7rem) 2rem;
  background-image: none;
  background-color: #061936;
}

.home-parallax-banner--inner-page {
  min-height: clamp(34rem, 78vh, 48rem);
  padding: clamp(4rem, 8vw, 7rem) 2rem;
  background-image: none;
  background-color: #061936;
}

.home-parallax-banner--home .home-parallax-banner__overlay,
.home-parallax-banner--inner-page .home-parallax-banner__overlay {
  background:
    linear-gradient(90deg, rgba(2, 8, 22, 0.88) 0%, rgba(2, 8, 22, 0.58) 45%, rgba(0, 64, 139, 0.12) 100%),
    radial-gradient(circle at 76% 24%, rgba(114, 203, 255, 0.2), transparent 34%),
    linear-gradient(to top, rgba(4, 11, 24, 0.52), transparent 46%);
}

.quote-hero .home-parallax-banner__overlay,
.auth-section--login-parallax .home-parallax-banner__overlay,
.auth-section--cube-bg .home-parallax-banner__overlay {
  background:
    linear-gradient(90deg, rgba(2, 8, 22, 0.88) 0%, rgba(2, 8, 22, 0.58) 45%, rgba(0, 64, 139, 0.12) 100%),
    radial-gradient(circle at 76% 24%, rgba(114, 203, 255, 0.2), transparent 34%),
    linear-gradient(to top, rgba(4, 11, 24, 0.52), transparent 46%);
}

.home-parallax-banner__inner--home {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 420px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.home-parallax-banner__inner--home .home-parallax-banner__title {
  max-width: 8.5ch;
  font-size: clamp(3.5rem, 8vw, 6.8rem);
  letter-spacing: -0.07em;
}

.home-parallax-banner__inner--home .home-parallax-banner__copy {
  max-width: 43rem;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

.home-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, background 0.25s ease;
}

.home-secondary-link:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.18);
}

.home-hero-panel {
  padding: 1.35rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.home-hero-panel__label {
  margin: 0 0 1rem;
  color: #bcdcff;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.home-hero-panel__grid {
  display: grid;
  gap: 0.8rem;
}

.home-hero-panel__grid div {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
}

.home-hero-panel__grid strong,
.home-hero-panel__grid span {
  display: block;
}

.home-hero-panel__grid strong {
  color: #fff;
  font-size: 1.5rem;
}

.home-hero-panel__grid span {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.78);
}

.home-intro,
.home-section,
.home-final-cta {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.home-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: -3.2rem;
}

.home-intro__card,
.home-proof-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(10, 30, 64, 0.1);
}

.home-intro__card {
  padding: 1.4rem;
}

.home-intro__card span,
.home-proof-card span,
.home-kicker {
  color: #0077ff;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.home-intro__card strong {
  display: block;
  margin-top: 0.7rem;
  color: #0a1e40;
  font-size: 1.1rem;
}

.home-intro__card p,
.home-proof-card p,
.home-section__content p,
.home-section__heading p,
.home-final-cta p {
  color: #46556b;
  line-height: 1.7;
}

.home-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.home-section--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.home-section--reverse {
  grid-template-columns: minmax(280px, 1fr) minmax(0, 0.95fr);
}

.home-section__content h2,
.home-section__heading h2,
.home-final-cta h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-section__content p,
.home-section__heading p,
.home-final-cta p {
  font-size: 1.05rem;
}

.home-feature-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.home-feature-list li {
  position: relative;
  padding-left: 1.7rem;
  color: #0a1e40;
  font-weight: 600;
}

.home-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0077ff, #71afff);
  box-shadow: 0 0 0 0.25rem rgba(0, 119, 255, 0.12);
}

.home-image-frame {
  position: relative;
  padding: 0.75rem;
  background: linear-gradient(135deg, #ffffff, #e7f1ff);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(10, 30, 64, 0.16);
}

.home-image-frame::before {
  content: "";
  position: absolute;
  inset: auto 10% -1rem 10%;
  height: 3rem;
  background: rgba(0, 119, 255, 0.18);
  border-radius: 999px;
  filter: blur(18px);
}

.home-image-frame img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
}

.home-image-frame--floating {
  transform: rotate(1.5deg);
}

.home-section--cards {
  padding-top: 2rem;
}

.home-section__heading {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

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

.home-proof-card {
  padding: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-section--cards .home-proof-card {
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.28), transparent 22rem),
    linear-gradient(135deg, #06162f, #0a1e40);
  border-color: rgba(188, 220, 255, 0.16);
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.22);
}

.home-proof-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 58px rgba(10, 30, 64, 0.14);
}

.home-section--cards .home-proof-card:hover {
  box-shadow: 0 28px 78px rgba(10, 30, 64, 0.28);
}

.home-proof-card h3 {
  margin: 0.75rem 0 0.65rem;
  color: #0a1e40;
  font-size: 1.35rem;
  line-height: 1.15;
}

.home-section--cards .home-proof-card span {
  color: #bcdcff;
}

.home-section--cards .home-proof-card h3 {
  color: #fff;
}

.home-section--cards .home-proof-card p {
  color: rgba(255, 255, 255, 0.82);
}

.about-page .about-value-card,
.about-page .about-service-list div,
.install-page .install-service-card,
.install-page .install-camera-types,
.install-page .install-type-list div {
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.28), transparent 22rem),
    linear-gradient(135deg, #06162f, #0a1e40);
  border-color: rgba(188, 220, 255, 0.16);
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.22);
}

.about-page .about-value-card:hover,
.install-page .install-service-card:hover {
  box-shadow: 0 28px 78px rgba(10, 30, 64, 0.28);
}

.about-page .about-value-card span,
.about-page .about-service-list span,
.install-page .install-service-card span,
.install-page .install-type-list span {
  color: #bcdcff;
}

.about-page .about-value-card h3,
.install-page .install-service-card h3,
.install-page .install-camera-types h3 {
  color: #fff;
}

.about-page .about-value-card p,
.about-page .about-service-list p,
.install-page .install-service-card p,
.install-page .install-type-list p {
  color: rgba(255, 255, 255, 0.82);
}

.home-testimonials {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.home-testimonials__heading {
  max-width: 680px;
  margin: 0 auto 1.35rem;
  text-align: center;
}

.home-testimonials__heading h2 {
  margin: 0.45rem 0 0.65rem;
  color: #0a1e40;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.home-testimonials__heading p {
  max-width: 34rem;
  margin: 0 auto;
  color: #46556b;
  font-size: 0.98rem;
  line-height: 1.65;
}

.home-testimonial-carousel {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.86)),
    rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 30, 64, 0.07);
  border-radius: 26px;
  box-shadow: 0 18px 52px rgba(10, 30, 64, 0.1);
  overflow: hidden;
}

.home-testimonial-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-testimonial-track {
  position: relative;
  min-height: 13rem;
}

.home-testimonial-card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 1.15rem;
  padding: clamp(1.35rem, 4vw, 2.2rem);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.home-testimonial-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.home-testimonial-card::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: clamp(1.35rem, 4vw, 2.2rem);
  width: 2.6rem;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #0077ff, rgba(0, 119, 255, 0.18));
}

.home-testimonial-card p {
  position: relative;
  max-width: 760px;
  margin: 1rem auto 0;
  color: #0a1e40;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.42;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-align: center;
}

.home-testimonial-card div {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.home-testimonial-card strong {
  color: #0a1e40;
  font-size: 0.95rem;
}

.home-testimonial-card span {
  color: #0077ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-testimonial-controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 1rem 0.8rem;
}

.home-testimonial-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 30, 64, 0.16);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.home-testimonial-dot.is-active {
  width: 1.8rem;
  background: #0077ff;
}

.home-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin-bottom: 5rem;
  padding: clamp(2rem, 5vw, 3rem);
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.28), transparent 22rem),
    linear-gradient(135deg, #06162f, #0a1e40);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.22);
}

.home-final-cta h2,
.home-final-cta p {
  color: #fff;
}

.home-final-cta .home-kicker {
  color: #bcdcff;
}

.home-final-cta p {
  max-width: 48rem;
  color: rgba(255, 255, 255, 0.82);
}

.home-final-cta__side {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.home-final-cta__side img {
  width: 6rem;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.22));
}

.home-parallax-banner--inner-page {
  min-height: clamp(34rem, 78vh, 48rem);
}

.home-parallax-banner__contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.home-parallax-banner__contact-card {
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.home-parallax-banner__contact-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bcdcff;
}

.home-parallax-banner__contact-value {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
}

.home-parallax-banner__logo-panel {
  display: flex;
  justify-content: center;
}

.home-parallax-banner__logo {
  width: min(100%, 280px);
  height: auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.about-page {
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 119, 255, 0.08), transparent 24rem),
    linear-gradient(180deg, #f5f9ff 0%, #ffffff 48%, #eef6ff 100%);
}

.about-hero {
  min-height: clamp(34rem, 78vh, 48rem);
  background-image: none;
  background-color: #061936;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: end;
}

.about-hero__inner .home-parallax-banner__title {
  max-width: 11ch;
  font-size: clamp(3rem, 6vw, 5.6rem);
  letter-spacing: -0.06em;
}

.about-hero-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.about-hero-card span {
  display: block;
  margin-bottom: 0.8rem;
  color: #bcdcff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-hero-card strong {
  display: block;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.contact-terminal {
  position: relative;
  isolation: isolate;
  width: min(100%, 27rem);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(0, 119, 255, 0.3), transparent 12rem),
    linear-gradient(135deg, rgba(4, 19, 46, 0.9), rgba(0, 54, 120, 0.54));
  border: 1px solid rgba(188, 220, 255, 0.24);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
  animation: contact-terminal-in 720ms cubic-bezier(.16,.84,.24,1) 160ms forwards;
}

.contact-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(188, 220, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(188, 220, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent);
}

.contact-terminal::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0, 119, 255, 0.16);
}

.contact-terminal__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 16, 40, 0.48);
  border-bottom: 1px solid rgba(188, 220, 255, 0.16);
}

.contact-terminal__bar span {
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #71afff;
  box-shadow: 0 0 14px rgba(113, 175, 255, 0.38);
}

.contact-terminal__bar span:nth-child(2) {
  background: #39e58c;
}

.contact-terminal__bar span:nth-child(3) {
  background: #ffcf5a;
}

.contact-terminal__bar strong {
  margin-left: 0.55rem;
  color: #bcdcff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-terminal__screen {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem;
  font-family: "Courier New", Courier, monospace;
}

.contact-terminal__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  margin: 0;
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.45;
}

.contact-terminal__line {
  padding: 0.72rem 0.85rem;
  background: rgba(3, 16, 38, 0.42);
  border: 1px solid rgba(188, 220, 255, 0.12);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.contact-terminal__line:hover {
  transform: translateY(-2px);
  border-color: rgba(188, 220, 255, 0.4);
  background: rgba(6, 27, 62, 0.58);
}

.contact-terminal__prompt {
  color: #71afff;
  font-weight: 700;
}

.contact-terminal__typed {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #eaf4ff;
  border-right: 2px solid transparent;
  animation-name: contact-terminal-type, contact-terminal-caret;
  animation-timing-function: steps(var(--chars)), step-end;
  animation-duration: var(--duration), var(--duration);
  animation-delay: var(--delay), var(--delay);
  animation-fill-mode: forwards, forwards;
}

.contact-terminal__typed--phone {
  --chars: 17;
  --duration: 0.9s;
  --delay: 0.65s;
}

.contact-terminal__typed--email {
  --chars: 18;
  --duration: 0.95s;
  --delay: 1.5s;
}

.contact-terminal__typed--hours {
  --chars: 29;
  --duration: 1.2s;
  --delay: 2.35s;
}

@keyframes contact-terminal-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes contact-terminal-type {
  to {
    max-width: calc(var(--chars) * 1ch);
  }
}

@keyframes contact-terminal-caret {
  0%, 99% {
    border-right-color: #71afff;
  }
  100% {
    border-right-color: transparent;
  }
}


.about-story,
.about-values,
.about-services,
.about-final-cta {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.about-story__content h2,
.about-values__heading h2,
.about-services__content h2,
.about-final-cta h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-story__content p,
.about-values__heading p,
.about-value-card p,
.about-services__content p,
.about-service-list p,
.about-final-cta p {
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.about-story__image {
  transform: rotate(-1.5deg);
}

.about-values {
  padding: 0 0 clamp(4rem, 7vw, 6rem);
}

.about-values__heading {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.about-value-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(10, 30, 64, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 58px rgba(10, 30, 64, 0.14);
}

.about-value-card span,
.about-service-list span {
  color: #0077ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-value-card h3 {
  margin: 0.75rem 0 0.65rem;
  color: #0a1e40;
  font-size: 1.3rem;
  line-height: 1.15;
}

.about-services {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem);
  background: #fff;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.12);
}

.about-service-list {
  display: grid;
  gap: 0.9rem;
}

.about-service-list div {
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, #f5f9ff, #eef6ff);
  border: 1px solid rgba(0, 119, 255, 0.1);
  border-radius: 20px;
}

.about-service-list p {
  margin: 0.45rem 0 0;
}

.about-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: 5rem;
  padding: clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.28), transparent 22rem),
    linear-gradient(135deg, #06162f, #0a1e40);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.22);
}

.about-final-cta h2,
.about-final-cta p {
  color: #fff;
}

.about-final-cta .home-kicker {
  color: #bcdcff;
}

.about-final-cta p {
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.82);
}

.install-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 119, 255, 0.08), transparent 24rem),
    linear-gradient(180deg, #f5f9ff 0%, #ffffff 48%, #eef6ff 100%);
}

.install-hero {
  min-height: clamp(34rem, 78vh, 48rem);
  background-image: none;
  background-color: #061936;
}

.install-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: end;
}

.install-hero__inner .home-parallax-banner__title {
  max-width: 13ch;
  font-size: clamp(3rem, 6vw, 5.8rem);
  letter-spacing: 0;
}

.install-hero__panel {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.install-hero__panel span,
.install-step-card span,
.install-service-card span,
.install-type-list span {
  color: #0077ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.install-hero__panel span {
  display: block;
  margin-bottom: 0.8rem;
  color: #bcdcff;
}

.install-hero__panel strong {
  display: block;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.15;
}

.install-steps,
.install-section,
.install-service-grid,
.install-support-panel,
.install-final-cta {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.install-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: -3.2rem;
}

.install-step-card,
.install-service-card,
.install-home-types,
.install-camera-types {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(10, 30, 64, 0.1);
}

.install-step-card {
  padding: 1.35rem;
}

.install-step-card h3,
.install-service-card h3 {
  margin: 0.65rem 0;
  color: #0a1e40;
  font-size: 1.25rem;
  line-height: 1.15;
}

.install-step-card p,
.install-section__content p,
.install-service-grid__heading p,
.install-service-card p,
.install-support-panel__content p,
.install-type-list p,
.install-final-cta p {
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.install-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.install-section--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.install-section__content h2,
.install-service-grid__heading h2,
.install-support-panel__content h2,
.install-final-cta h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.install-image-frame {
  transform: rotate(1.5deg);
}

.install-plan-section {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  display: block;
  padding: clamp(2rem, 5vw, 3rem);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.install-plan-section__heading {
  max-width: 820px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.install-plan-section__content h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.install-plan-section__heading h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.install-plan-section__content p {
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.install-plan-section__heading p {
  max-width: 44rem;
  margin: 0 auto;
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.install-plan-stage {
  --mascot-x: 18%;
  --mascot-y: 18%;
  position: relative;
  min-height: clamp(28rem, 56vw, 46rem);
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
}

.install-house-map {
  position: absolute;
  inset: clamp(1rem, 3vw, 1.5rem);
  z-index: 1;
}

.install-house-map__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  pointer-events: none;
}

.install-house-hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(5.2rem, 11vw, 8.5rem);
  height: var(--hotspot-height, auto);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.install-house-hotspot:focus-visible {
  outline: 3px solid rgba(0, 119, 255, 0.8);
  outline-offset: 4px;
}

.install-house-hotspot--door {
  left: 33.45%;
  top: 53.56%;
  width: clamp(4.6rem, 8vw, 6.8rem);
  --hotspot-height: clamp(7rem, 13vw, 9.6rem);
  border-radius: 1.25rem;
}

.install-house-hotspot--window {
  left: 48.44%;
  top: 53.85%;
  width: clamp(3rem, 4.5vw, 4.4rem);
  --hotspot-height: clamp(4rem, 7vw, 5.8rem);
  border-radius: 1.25rem;
}

.install-house-hotspot--garage {
  left: 63.45%;
  top: 55.92%;
  width: clamp(7.4rem, 21vw, 11.5rem);
  --hotspot-height: clamp(8.2rem, 25vw, 13rem);
  border-radius: 1.75rem;
}

.install-layout-mascot {
  position: absolute;
  left: var(--mascot-x);
  top: var(--mascot-y);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(21rem, calc(100% - 2rem));
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.72s cubic-bezier(.2,.8,.2,1), top 0.72s cubic-bezier(.2,.8,.2,1);
}

.install-layout-mascot__eye {
  position: relative;
  flex: 0 0 4.25rem;
  width: 4.25rem;
  height: 4.25rem;
  filter: none;
}

.install-layout-mascot__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.install-layout-mascot__dot {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 16%;
  height: 16%;
  border-radius: 999px;
  background: #ff2b2b;
  box-shadow: none;
  animation: mascot-blink 1.5s infinite;
}

.install-layout-mascot__bubble {
  position: relative;
  max-width: 17rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 8px;
  background: #fff;
  color: #0a1e40;
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.install-layout-mascot__bubble::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 1.3rem;
  width: 0.9rem;
  height: 0.9rem;
  background: #fff;
  border-left: 1px solid rgba(10, 30, 64, 0.08);
  border-bottom: 1px solid rgba(10, 30, 64, 0.08);
  transform: rotate(45deg);
}

.install-layout-mascot.is-active .install-layout-mascot__bubble {
  box-shadow: none;
  transform: translateY(-2px);
}

.install-service-grid {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.install-service-grid__heading {
  max-width: 780px;
  margin-bottom: 1.5rem;
}

.install-service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.install-service-card {
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.install-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 58px rgba(10, 30, 64, 0.14);
}

.install-service-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.install-service-card div {
  padding: 1.35rem;
}

.install-service-card .home-secondary-link {
  margin-top: 1rem;
}

.install-home-types {
  padding: clamp(1.35rem, 3vw, 1.8rem);
}

.install-home-types > span,
.install-home-type-grid strong {
  color: #0077ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.install-home-types h3 {
  margin: 0.65rem 0 0.85rem;
  color: #0a1e40;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.install-home-types p {
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.install-home-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.install-home-type-grid div {
  min-height: 7.2rem;
  padding: 1rem;
  border: 1px solid rgba(0, 119, 255, 0.11);
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

.install-home-type-grid strong {
  display: block;
}

.install-home-type-grid small {
  display: block;
  margin-top: 0.45rem;
  color: #46556b;
  font-size: 0.92rem;
  line-height: 1.45;
}

.coverage-section,
.coverage-seo-list {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.coverage-section {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.coverage-section__intro h2 {
  margin: 0.65rem 0 1rem;
  color: #0a1e40;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0;
}

.coverage-section__intro p,
.coverage-seo-list p {
  color: #46556b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.coverage-map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.12);
}

.coverage-map--interactive {
  min-height: clamp(28rem, 52vw, 38rem);
}

.coverage-leaflet-map {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(28rem, 52vw, 38rem);
  background: #eef6ff;
}

.coverage-leaflet-map .leaflet-control-attribution {
  font-family: Poppins, sans-serif;
  font-size: 0.7rem;
}

.coverage-leaflet-map .leaflet-popup-content-wrapper {
  border-radius: 8px;
  color: #0a1e40;
  font-family: Poppins, sans-serif;
  font-weight: 700;
}

.coverage-map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #0a1e40;
  font-weight: 800;
  text-align: center;
}

.coverage-map__panel {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 450;
  display: grid;
  gap: 0.25rem;
  width: min(20rem, calc(100% - 2rem));
  padding: 1rem;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #46556b;
  box-shadow: 0 18px 45px rgba(10, 30, 64, 0.16);
  backdrop-filter: blur(12px);
}

.coverage-map__panel strong {
  color: #0a1e40;
  font-size: 1rem;
  line-height: 1.2;
}

.coverage-map__panel span {
  font-size: 0.86rem;
  line-height: 1.45;
}

.coverage-map__art {
  display: block;
  width: 100%;
  height: auto;
}

.coverage-map__ring {
  fill: rgba(0, 119, 255, 0.13);
  stroke: rgba(0, 119, 255, 0.52);
  stroke-width: 3;
  stroke-dasharray: 10 10;
}

.coverage-map__ring--inner {
  fill: rgba(0, 119, 255, 0.18);
  stroke: rgba(10, 30, 64, 0.48);
}

.coverage-map__pins circle {
  fill: #0077ff;
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 8px 12px rgba(10, 30, 64, 0.28));
}

.coverage-map__pins text {
  fill: #0a1e40;
  font: 800 22px/1 Poppins, sans-serif;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 6px;
  stroke-linejoin: round;
}

.coverage-map__legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 450;
  display: flex;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #0a1e40;
  box-shadow: 0 14px 34px rgba(10, 30, 64, 0.14);
  backdrop-filter: blur(12px);
}

.coverage-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  line-height: 1;
}

.coverage-map__legend i {
  display: inline-block;
  width: 1.3rem;
  height: 0.85rem;
  border: 2px solid #163fd8;
  border-radius: 999px;
  background: rgba(0, 119, 255, 0.22);
}

.coverage-map__legend strong {
  font-weight: 800;
}

.coverage-seo-list {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.install-area-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.install-area-list span {
  display: grid;
  min-height: 3.4rem;
  place-items: center;
  padding: 0.85rem;
  border: 1px solid rgba(0, 119, 255, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #0a1e40;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 35px rgba(10, 30, 64, 0.08);
}

.install-support-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem);
  background: #fff;
  border: 1px solid rgba(10, 30, 64, 0.08);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.12);
}

.install-note {
  padding: 1rem 1.1rem;
  background: #eef6ff;
  border: 1px solid rgba(0, 119, 255, 0.12);
  border-radius: 18px;
}

.install-camera-types {
  padding: 1.35rem;
}

.install-camera-types h3 {
  margin: 0 0 1rem;
  color: #0a1e40;
  font-size: 1.45rem;
}

.install-type-list {
  display: grid;
  gap: 0.85rem;
}

.install-type-list div {
  padding: 1rem;
  background: linear-gradient(135deg, #f5f9ff, #eef6ff);
  border: 1px solid rgba(0, 119, 255, 0.1);
  border-radius: 18px;
}

.install-type-list p {
  margin: 0.35rem 0 0;
}

.install-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: 5rem;
  padding: clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.28), transparent 22rem),
    linear-gradient(135deg, #06162f, #0a1e40);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(10, 30, 64, 0.22);
}

.install-final-cta h2,
.install-final-cta p {
  color: #fff;
}

.install-final-cta .home-kicker {
  color: #bcdcff;
}

.install-final-cta p {
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.82);
}

.overlay-img {
  position: absolute;
  bottom: -30px;
  left: -60px;
  width: 70%;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Initial hidden state */
.animate-on-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

/* Final visible state */
.animate-on-load.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-section {
  padding: 2rem 2rem;
  background-color: #f9fbfd;
  text-align: center;
  width:100%;
  margin: 1px auto;
  padding-top: 5rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a1e40;
  margin-bottom: 2rem;
}

.section-text {
  font-size: 1.2rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.offerings-grid,
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 70%;
}

.offering,
.pillar {
  background: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.offering-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
  color: #0077ff;
}

.offering:hover,
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.about-section-button {
    margin-top: 3rem;
}


.contact-hero {
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  padding: 6rem 2rem;
  width: 100%;
}

.contact-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-info--centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.contact-slogan {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a1e40;
  margin-bottom: 2rem;
}

.contact-details p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 1rem;
}

.contact-image {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.contact-image img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 10px;
}

.contact-button {
  margin-top: 20px;
}


.quote-hero {
  position: relative;
  isolation: isolate;
  background-image: none;
  background-color: #061936;
  padding: clamp(3rem, 7vw, 5.5rem) 2rem;
  overflow: hidden;
}

.quote-hero::before {
  content: none;
}

.quote-container {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

.quote-slogan {
  text-align: center;
  font-size: 2.75rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 3rem;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
}

.quote-form {
  background-color: rgba(255, 255, 255, 0.94);
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  max-width: 100%;
  box-sizing: border-box;
}

.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.form-group {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-group.form-full {
  flex: 1 1 100%;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.checkbox-group label,
.radio-group label {
  font-weight: 400;
  font-size: 1rem;
  color: #333;
}

.required-label::after {
  content: " *";
  color: #0077ff;
  font-weight: 700;
}

.form-group select {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

/* Initial state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.animate-on-scroll.from-left {
  transform: translateX(-60px);
}

.animate-on-scroll.from-right {
  transform: translateX(60px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.contact-map {
  margin-top: 1rem;
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}

.logo-and-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.securo-logo {
  width: min(100%, 320px);
  height: auto;
}

.contact-map {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}

.camera-hero {  
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  padding: 4rem 2rem;
}

.camera-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

.camera-text {
  flex: 1;
  min-width: 300px;
}

.camera-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0a1e40;
  margin-bottom: 1rem;
}

.camera-sub {
  font-size: 1.15rem;
  color: #444;
  margin-bottom: 1.5rem;
}

.camera-features {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
}

.camera-features li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #333;
}

.camera-image {
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.camera-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.camera-image img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.camera-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.no-margin-bottom {
  margin-bottom: 0;
}
/* Scroll animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.camera-table-section {
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  text-align: center;
  margin: auto;
  padding: 20px;
}

.camera-table-container {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 1rem;
}

.camera-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1rem;
}

.camera-table th,
.camera-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.camera-table th {
  font-weight: 600;
}

.camera-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.camera-table tr:hover {
  background-color: #eef6ff;
}

/* Fade-in animation */
.animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Star hover shimmer */
.camera-table td:hover {
  background-color: #eaf4ff;
  transition: background-color 0.3s ease;
}

.signup-form {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.signup-form .form-group {
  margin-bottom: 20px;
}

.signup-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.signup-form input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border 0.2s ease;
}

.signup-form input:focus {
  border-color: #007bff;
  outline: none;
}

.signup-form .cta-button {
  background-color: #0c2340;
  color: #fff;
  padding: 0.95rem 1.6rem;
  border: none;
  font-size: 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.signup-form .cta-button:hover {
  background-color: #163f75;
}

.nav-center a {
  position: relative;
  overflow: hidden;
}

.nav-center a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #0077ff;
  transition: width 0.3s ease;
}

.nav-center a:hover::after {
  width: 100%;
}

/* ===== Floating Mascot (position slightly higher) ===== */
.mascot {
  position: fixed;
  right: 22px;
  top: 75%;                 /* moved up from 32vh; tweak 22–28vh to taste */
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  transform: translateY(10px);
  opacity: 0;
  animation: mascot-in 400ms cubic-bezier(.2,.8,.2,1) forwards 800ms; /* gentler delay */
}

@keyframes mascot-in { to { transform: translateY(0); opacity: 1; } }

/* Eye (camera) */
.mascot-eye-link {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
  transition: transform .2s ease;
  order: 0;                  /* bubble is left via order:-1 */
}
.mascot-eye-link:hover { transform: scale(1.04); }

.mascot-eye-icon { width: 100%; height: 100%; display: block; }

/* Recording dot (RIGHT side of lens) */
.mascot-recording-dot {
  position: absolute;
  top: 12%;
  right: 12%;
  left: auto;
  width: 16%;
  height: 16%;
  background: #ff2b2b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,43,43,.15);
  animation: mascot-blink 1.5s infinite;
  z-index: 2;
}
@keyframes mascot-blink { 0%,49%{opacity:0} 50%,100%{opacity:1} }

/* Bubble (LEFT of the eye) */
.mascot-bubble {
  position: relative;
  order: -1;
  max-width: 320px;
  padding: 14px 16px;
  background: #fff;
  color: #0a1e40;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  line-height: 1.35;
  font-size: .98rem;
  transition: box-shadow .2s ease, opacity .25s ease, transform .25s ease;
  overflow: visible;
}
.mascot-bubble:hover { box-shadow: 0 12px 28px rgba(0,0,0,.14); }

/* Rounded cartoon tail pointing RIGHT */
.mascot-bubble::after {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  z-index: 1;
}
.mascot-bubble::before {
  background: rgba(0,0,0,.06);
  filter: blur(6px);
  right: -16px;
  z-index: 0;
}

/* Close (X) */
.mascot-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  border: none; border-radius: 999px;
  background: #ffffff; color: #0a1e40;
  font-size: 16px; line-height: 24px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
  z-index: 1;
}
.mascot-close:hover { transform: scale(1.05); background: #f4f7fb; }

/* Hidden whole mascot (kept for quote page) */
.mascot.is-hidden { display: none !important; }

/* --- Collapsed state: bubble hidden, eye stays --- */
.mascot.is-collapsed .mascot-bubble {
  opacity: 0;
  transform: translateX(6px) scale(.98);
  pointer-events: none;
}

/* Mobile positioning */
@media (max-width: 640px) {
  .mascot { top: auto; bottom: 16px; right: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none; opacity: 1; transform: none; }
  .mascot-eye-link { transition: none; }
}

/* Right side layout */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Phone pill */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f2f6ff;
  color: #0a1e40;
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: background .2s ease, transform .08s ease;
}
.nav-pill:hover { background: #e8f1ff; }
.nav-pill:active { transform: translateY(0.5px); }

/* Primary CTA */
.btn-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  background: linear-gradient(90deg, #0a5bff, #5aa8ff);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(10,91,255,0.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-quote:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,91,255,0.32);
}
.btn-quote:active { transform: translateY(0); filter: brightness(.96); }

/* Trust pill */
.nav-trust { display: flex; align-items: center; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #2a3b57;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.06);
  line-height: 1;
}

/* Small SVG icons inherit text color */
.icon { width: 16px; height: 16px; fill: currentColor; }

/* Responsive tweaks */
.hide-sm { }
@media (max-width: 900px) {
  .hide-sm { display: none; }       /* hide long text and trust pill on small screens */
  .nav-pill { padding: 8px; }       /* icon-only phone button */
}

/* Optional: slightly tighter nav on scroll */
nav.nav-compact .btn-quote { padding: 8px 12px; border-radius: 8px; }


/* Make the right region a centered flex cell */
.nav-right {
  flex: 1;                                  /* ensure it has space like .nav-left */
  display: flex;
  align-items: center;
  justify-content: center;                   /* center the actions in the right area */
  gap: 0;                                    /* outer gap not needed */
}

/* Actions: small gap so they sit snugly together */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;                                  /* tighten spacing between phone & CTA */
}

/* Optional: keep them from drifting too far inward on very wide screens */
@media (min-width: 1400px) {
  .nav-right { padding-right: 24px; }        /* slight bias toward the edge on huge screens */
}

/* Slightly tighter paddings (same as Option A if you want them) */
.nav-pill  { padding: 8px 10px; }
.btn-quote { padding: 9px 12px; }
.nav-pill.nav-phone {
  margin-right: 16px; /* or however much spacing you want */
}


.tooltip-icon {
  display: inline-block;
  background-color: #0077ff;
  color: white;
  font-size: 0.8rem;
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  cursor: help;
  margin-left: 8px;
  position: relative;
}

.tooltip-icon:hover .tooltip-text,
.tooltip-icon:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.3s ease;
  font-size: 0.85rem;
  width: max-content;
  max-width: 250px;
  white-space: normal;     /* allow multi-line */
  word-wrap: break-word;
  max-width: 250px;
}

.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.form-group {
  position: relative; /* needed for tooltip positioning */
  overflow: visible;  /* allow tooltips to break out */
}

.form-grid {
  overflow: visible;
}

.login-footer {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.login-footer a {
  color: #0077ff;
  font-weight: 600;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}
/* ========== Base + Reset ========== */
*, *::before, *::after {
  box-sizing: border-box;       /* 100% widths include padding + border */
}

:root {
  --brand: #0077ff;
  --bg: #f5f9ff;
  --card: #ffffff;
  --text: #0a1c3d;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

/* ========== Section + Container ========== */
.auth-section {
  display: flex;
  justify-content: center;      /* center the card horizontally */
  padding: 60px 20px;
}

.auth-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;               /* belt-and-suspenders centering */
  background: var(--card);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.1);
}

.auth-section--cube-bg {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 110px);
  align-items: center;
  padding: clamp(4rem, 8vw, 6rem) 1.25rem;
  background-color: #061936;
  overflow: hidden;
}

.auth-section--cube-bg .auth-container {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.auth-section--login-parallax {
  position: relative;
  min-height: calc(100vh - 110px);
  align-items: center;
  padding: clamp(4rem, 8vw, 6rem) 1.25rem;
  background-image: none;
  background-color: #061936;
  overflow: hidden;
}

.auth-section--login-parallax::before,
.auth-section--login-parallax::after {
  content: none;
}

.auth-section--login-parallax::before {
  width: 26rem;
  height: 26rem;
  right: -9rem;
  top: 12%;
  background: rgba(0, 119, 255, 0.2);
  filter: blur(18px);
}

.auth-section--login-parallax::after {
  width: 18rem;
  height: 18rem;
  left: -7rem;
  bottom: -5rem;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(10px);
}

.auth-container--login {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

/* ========== Header Text ========== */
.auth-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin: 0 0 10px 0;
}

.auth-subtitle {
  font-size: 1rem;
  color: #666;
  text-align: center;
  margin: 0 0 30px 0;
}

/* ========== Form Layout ========== */
.auth-form {
  display: flex;
  flex-direction: column;
}

/* Django {{ form.as_p }} wraps each field in a <p> */
.auth-form p {
  margin: 0 0 20px 0;           /* reset any side margins */
  text-indent: 0;               /* safety reset */
}

/* Labels */
.auth-form label {
  display: block;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px 0;
  text-align: left;
}

/* Inputs / selects / textareas */
.auth-form input,
.auth-form select,
.auth-form textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

/* Focus state for accessibility + consistent outline */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
}

/* Validation / error list from Django */
.auth-form .errorlist {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
  color: #b00020;
  font-size: 0.875rem;
}

/* ========== Buttons ========== */
.auth-form .cta-button {
  display: inline-flex;
  width: 100%;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  background: linear-gradient(to right, var(--brand), #3e84ff);
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

.cta-button:hover {
  filter: brightness(0.95);
}

/* ========== Footer ========== */
.auth-footer {
  text-align: center;
  margin-top: 20px;
}

.auth-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ========== Small Screens ========== */
@media (max-width: 480px) {
  .auth-container { padding: 28px; }
  .auth-title { font-size: 1.75rem; }
}

@media (max-width: 700px) {
  .auth-section--login-parallax {
    min-height: auto;
    padding: 3.5rem 1rem;
    background-attachment: scroll;
    background-position: 58% center;
  }

  .auth-container--login {
    border-radius: 24px;
  }
}







/* -------- Container & grid -------- */
.profile-container {
  max-width: 1120px;
  margin: 40px auto;
  padding: 0 20px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}

/* -------- Cards -------- */
.profile-card,
.quotes-card,
.quote-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.08);
}

.profile-card { padding: 24px; }
.quotes-card  { padding: 24px; }

.quote-card {
  padding: 18px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 123, 255, 0.12);
}

/* -------- Profile header -------- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.avatar {
  width: 64px; height: 64px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #0077ff), #3e84ff);
  color: #fff; font-weight: 800; font-size: 1.5rem;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0, 119, 255, 0.3);
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #0a1c3d;
}

.profile-tagline {
  margin: 2px 0 0 0;
  color: #6b7280;
  font-size: .95rem;
}

/* -------- Contact rows -------- */
.profile-contact { margin-top: 14px; }
.contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid #eef3ff; border-radius: 12px;
  background: #f8fbff; margin-bottom: 10px;
}
.contact-label { color: #475569; font-weight: 600; }
.contact-value { color: #0a1c3d; text-decoration: none; }
.contact-value:hover { text-decoration: underline; }

/* -------- Actions & buttons -------- */
.profile-actions { display: flex; gap: 12px; margin-top: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 12px; font-weight: 600;
  border: 0; cursor: pointer; text-decoration: none;
  transition: filter .15s ease;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--brand, #0077ff), #3e84ff);
  box-shadow: 0 6px 16px rgba(0, 119, 255, 0.25);
}
.btn-outline {
  background: #fff;
  color: var(--brand, #0077ff);
  border: 1px solid rgba(0, 119, 255, 0.25);
}
.btn-link {
  background: transparent; color: var(--brand, #0077ff);
  padding: 0; border-radius: 8px;
}
.btn:hover { filter: brightness(.96); }

/* -------- Stats -------- */
.profile-stats {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat {
  background: #f5f9ff; border-radius: 12px; padding: 12px; text-align: center;
}
.stat-number { font-weight: 800; font-size: 1.1rem; color: #0a1c3d; }
.stat-label  { font-size: .8rem; color: #64748b; }

/* -------- Quotes list -------- */
.quotes-header h2 {
  margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 800; color: #0a1c3d;
}
.quote-list { display: grid; gap: 12px; }

.quote-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.date { color: #65758b; font-size: .9rem; }

.quote-excerpt {
  margin: 0 0 10px 0; color: #334155; line-height: 1.5;
}

/* Status chips (map your statuses to these slug classes) */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: .75rem;
  background: #f1f5ff; color: #0a1c3d; border: 1px solid rgba(0,119,255,.15);
}
.status--new,
.status--open,
.status--submitted { background: #eef6ff; color: #0b63ce; }

.status--in-review,
.status--reviewing { background: #fff7ed; color: #b45309; }

.status--scheduled,
.status--in-progress { background: #f0fdf4; color: #15803d; }

.status--completed,
.status--approved { background: #ecfdf5; color: #047857; }

.status--declined,
.status--rejected { background: #fef2f2; color: #b91c1c; }

/* -------- Empty state -------- */
.empty-state {
  text-align: center; padding: 40px 12px; border: 2px dashed #e5efff;
  border-radius: 16px; background: #fbfdff;
}
.empty-state h3 { margin: 0 0 6px 0; font-weight: 800; color: #0a1c3d; }
.empty-state p { margin: 0 0 16px 0; color: #6b7280; }

/* -------- Responsive -------- */
@media (max-width: 960px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-actions { flex-direction: column; }
}


/* replace your current .contact-row and value rules */
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;                 /* always keep space between label/value */
  padding: 10px 12px;
  border: 1px solid #eef3ff;
  border-radius: 12px;
  background: #f8fbff;
}

/* Label stays as-is */
.contact-label { 
  color: #475569; 
  font-weight: 600; 
  white-space: nowrap;
}

/* Value is allowed to shrink and ellipsize on one line */
.contact-value {
  margin-left: auto;         /* push to the right */
  min-width: 0;              /* IMPORTANT: allow shrinking inside flex */
  text-align: right;
  white-space: nowrap;       /* keep one line */
  overflow: hidden;          /* clip overflow */
  text-overflow: ellipsis;   /* show … when too long */
}


/* Keep status + cancel button on one row with spacing */
.status-and-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Inline form so the button sits beside the chip */
.inline-cancel-form { display: inline; }

/* Ghost/outline cancel button that matches your aesthetic */
.btn-ghost.btn-cancel {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  background: #fff;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn-ghost.btn-pay {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  background: #fff;   
  color: #0062d1;
  border: 1px solid rgba(0, 45, 143, 0.25);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn-ghost.btn-pay:hover {
  background: #fff5f5;
  border-color: rgba(0, 148, 247, 0.45);
}
.btn-ghost.btn-cancel:hover {
  background: #fff5f5;
  border-color: rgba(185, 28, 28, 0.45);
}

/* Add a red style for the new status chip */
.status--cancelled {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, .2);
}


/* ===== Modal ===== */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 28, 61, 0.55);
  backdrop-filter: blur(1px);
}

.modal__content {
  position: relative;
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}
.modal.is-open .modal__content { transform: translateY(0) scale(1); }

.modal__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff5f5;
  margin-bottom: 12px;
}

#cancel-modal-title {
  margin: 0 0 6px 0;
  font-weight: 800; color: #0a1c3d;
}

.modal__text { margin: 0 0 16px 0; color: #475569; }

.modal__actions {
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Button additions to match your system */
.btn-danger {
  color: #fff;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border: 0;
  box-shadow: 0 6px 16px rgba(220, 38, 38, .2);
}
.btn-danger:hover { filter: brightness(.96); }  

.btn-ghost.btn-cancel {
  padding: 6px 10px; border-radius: 10px; font-weight: 700;
  background: #fff; color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
}
.btn-ghost.btn-cancel:hover {
  background: #fff5f5; border-color: rgba(185, 28, 28, 0.45);
}

/* Keep status + cancel tight */
.status-and-actions { display: inline-flex; align-items: center; gap: 10px; }


/* ===== Panels carousel ===== */
.panel-carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden; /* hide overflow so arrows sit on edges cleanly */
}

.panels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;      /* each panel fills the viewport */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;          /* avoid scrollbar overlap */
}

/* hide scrollbars (keeps keyboard/scroll functional) */
.panels::-webkit-scrollbar { display: none; }
.panels { scrollbar-width: none; }

/* Each card is a snap point */
.panel-card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.08);
  padding: 24px;
}

/* ===== Arrows ===== */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: linear-gradient(135deg, var(--brand, #0077ff), #3e84ff);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 16px rgba(0, 119, 255, .25);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  z-index: 2;
}

.carousel-arrow.right { right: -14px; }  /* sits hugging the card edge */
.carousel-arrow.left  { left: -14px; }

.carousel-arrow:hover { filter: brightness(.95); transform: translateY(-50%) scale(1.03); }
.carousel-arrow:disabled {
  opacity: .35; cursor: default; filter: none;
  background: #eef3ff; color: #8aa3d1;
  box-shadow: none;
}

/* Responsive: pull arrows inside on small screens */
@media (max-width: 720px) {
  .carousel-arrow.right { right: 8px; }
  .carousel-arrow.left  { left: 8px; }
}

.carousel-viewport {
  transition: height .25s ease; /* optional but looks nicer */
}

/* Don't make every panel the height of the tallest one */
.panels { 
  align-items: start;               /* <-- important */
}

/* (Optional) ensure each card follows its own content height */
.panel-card { 
  align-self: start;                /* belt-and-suspenders */
}

/* Smooth height change when we adjust it in JS */
.carousel-viewport {
  overflow: hidden;
  transition: height .25s ease;
}


/* smoother resize of the right pane */
.carousel-viewport {
  overflow: hidden;
  transition: height .38s cubic-bezier(.22,.61,.36,1); /* gentler ease */
}

/* make arrow appearance/disappearance animated */
.carousel-arrow {
  will-change: transform, opacity;            /* keeps motion crisp */
  transition: opacity .28s ease, transform .28s ease, filter .12s ease;
}

/* when an arrow is "off" (at the start/end) fade/scale it out */
.carousel-arrow.is-off {
  opacity: 0;
  transform: translateY(-50%) scale(.9);
  pointer-events: none;                        /* not clickable */
  box-shadow: none;
}

/* optional: less abrupt snapping between panels */
.panels { scroll-snap-type: x proximity; }     /* instead of "mandatory" */


/* Container positions */
.flash-container{
  position: fixed;
  z-index: 1100;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
  left: 0; right: 0; margin-left: auto; margin-right: auto;
}
.flash-container.top-center{    top: max(16px, env(safe-area-inset-top)); }
.flash-container.center-screen{ top: 50%; transform: translateY(-50%); }
.flash-container.bottom-center{ bottom: max(16px, env(safe-area-inset-bottom)); }

/* Toast card */
.flash{
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #eef3ff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,123,255,.12);

  /* ENTER + LEAVE */
  animation: flash-in .35s cubic-bezier(.22,.61,.36,1) both;
  opacity: 1; 
  transform: translate3d(0,0,0) scale(1);
  will-change: opacity, transform;
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1),
              transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.flash-success{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.flash-error  { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.flash-info   { background:#f0f7ff; border-color:#d7e8ff; color:#0a1c3d; }
.flash-warning{ background:#fff7ed; border-color:#fed7aa; color:#92400e; }

@keyframes flash-in{
  from{ opacity:0; transform: translate3d(0,8px,0) scale(.98); }
  to  { opacity:1; transform: translate3d(0,0,0)  scale(1); }
}

/* LEAVE target state — JS adds .is-leaving after 4s */
.flash.is-leaving{
  opacity: 0;
  transform: translate3d(0,-8px,0) scale(.98);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .flash, .flash.is-leaving{ animation:none; transition:none; }
}



/* Layout the three nav regions on one row */
.nav-container{
  width: 100%;        /* adjust to your page width */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left and right keep natural width */
.nav-left,
.nav-right{
  flex: 0 0 auto;
}

/* Center takes the remaining space and must not wrap items */
.nav-center{
  flex: 1 1 auto;           /* grow to fill space between left/right */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);   /* responsive spacing */
  flex-wrap: nowrap;        /* keep items on one row */
  min-width: 0;             /* allow flexbox to shrink if needed */
}

/* Prevent link text itself from breaking to two lines */
.nav-center a,
.nav-center .dropdown > a{
  white-space: nowrap;      /* "OUR SERVICES" stays on one line */
  display: inline-flex;     /* nice baseline alignment */
  align-items: center;
}

/* (Optional) If you set a large letter-spacing somewhere, reduce it here */
/* .nav-center a { letter-spacing: 0; } */

/* If your dropdown wrapper was forcing a line break, ensure it's inline-level */
.nav-center .dropdown{
  position: relative;
  display: inline-flex;     /* avoid starting a new row */
  align-items: center;
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:.28rem .6rem;border-radius:999px;font-weight:800;font-size:.78rem;
  border:1px solid transparent;
}

.badge-success{background:#e9f8ef;border-color:#b8efd2;color:#0c6d4a;}
.badge-warning{background:#fff6e6;border-color:#ffe3b8;color:#8a5a00;}
.badge-danger{background:#fdecea;border-color:#f7c6c5;color:#b42318;}
.badge-muted{background:#eef2f7;border-color:#e1e7ef;color:#5b6b7f;}
.badge-info{background:#e7f0ff;border-color:#bfd7ff;color:#0a49a3;}

/* NAV BAR LAYOUT (already present) */
.nav-actions{
    display:flex;
    align-items:center;   /* vertically centre children */
}

/* NEW RULES */
.flag-ca{
    height:50px;          /* ≈ your nav font-size + a bit */
    width:auto;           /* keep aspect ratio */
    display:block;        /* removes the little baseline gap */
}

.flag-link{              /* clears old button look if you reused <a> */
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    margin-left:1rem;     /* spacing after the phone pill */
}


/* Base tweaks */
.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  width: 100%;
  padding: 0 2rem;
  gap: 1rem;
}

/* Use a <ul> for links */
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a,
.logo {
  color: #000;
  text-decoration: none;
  font-size: 1.10rem;
  transition: color .2s ease;
}
.nav-links a:hover { color: #0077ff; }

/* Dropdown: support hover on desktop and click on mobile */
.dropdown { position: relative; }
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.dropdown-content { /* your existing styles kept */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  z-index: 1000;
  border-radius: 4px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.dropdown-content a {
  display: block;
  padding: .75rem 1rem;
  color: #000;
  white-space: nowrap;
}
.dropdown:hover .dropdown-content {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  appearance: none;
  background: #f2f6ff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: .5rem .6rem;
  line-height: 0;
}
.nav-toggle .icon { width: 20px; height: 20px; }

/* Right side layout (desktop) — your existing kept */
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

/* Mobile drawer base (hidden by default) */
#primary-nav {
  position: relative;
}

/* Mobile quick actions inside drawer */
.nav-mobile-actions { display: none; gap: 8px; margin-top: .75rem; }

/* ------- Mobile mode ------- */
@media (max-width: 900px) {
  .nav-container {
    grid-template-columns: minmax(0, 1fr) auto; /* logo | right controls */
  }

  /* Show hamburger, hide desktop right actions text */
  .nav-toggle { display: inline-flex; }
  .nav-right .nav-pill .hide-sm { display: none; }

  .nav-left {
    min-width: 0;
    overflow: hidden;
  }

  .nav-left .logo {
    font-size: clamp(1.05rem, 5vw, 1.45rem);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .nav-right,
  .nav-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  .nav-right {
    justify-self: end;
    gap: 6px;
  }

  .nav-phone,
  .flag-link,
  .nav-toggle {
    flex: 0 0 auto;
  }

  .nav-phone {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }

  .flag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: .35rem;
  }

  .flag-ca {
    height: 22px;
  }

  /* Turn center into a slide-down panel */
  #primary-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
    padding: .75rem 1rem;
  }

  /* When open */
  nav.is-open #primary-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Links stack vertically with bigger tap zones */
  .nav-links {
    flex-direction: column;
    gap: .25rem;
  }
  .nav-links a,
  .dropdown-trigger {
    padding: .5rem 0;
    font-size: 1rem;
  }

  /* Dropdown works on tap (when parent has .is-open) */
  .dropdown:hover .dropdown-content { /* disable hover open on mobile */
    opacity: 0; visibility: hidden; transform: translateY(-10px);
  }
  .dropdown.is-open .dropdown-content {
    position: static; /* flow inside drawer */
    box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
  }

  .nav-mobile-actions { display: flex; }

  /* Optional: tone down wave on mobile to prevent overlap */
  #nav-wave { height: 10px; }
}

@media (max-width: 480px) {
  .nav-container {
    gap: .5rem;
    padding: 0 .75rem;
  }

  .nav-left .logo {
    font-size: 1rem;
  }

  .flag-link {
    display: none;
  }
}

/* Underline hover effect only on desktop */
@media (min-width: 901px) {
  .nav-links a { position: relative; overflow: hidden; }
  .nav-links a::after {
    content:"";
    position:absolute; bottom:-2px; left:0; width:0%; height:2px;
    background:#0077ff; transition: width .3s ease;
  }
  .nav-links a:hover::after { width:100%; }
}



/* ---------- Mobile safety net (add at END of file) ---------- */

/* Media should never overflow */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Stop horizontal scrolling from 100vw/offsets */
html, body { overflow-x: hidden; }

/* Navbar: shrink paddings/flag on mobile */
@media (max-width: 600px) {
  nav { padding: 1rem 1rem; }
  .nav-container { padding: 0 1rem; }
  .flag-ca { height: 28px; }
  .nav-pill { padding: 8px; }            /* icon-only phone pill */
  .logo { font-size: 1.6rem; }           /* was 2.25rem */
}

/* CTA button was huge due to 2.5rem x 8rem padding */
@media (max-width: 600px) {
  .cta-button {
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    width: auto;
    max-width: 100%;
  }
}

/* Hero/slogan typography + spacing */
@media (max-width: 600px) {
  .slogan-title { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; }
  .slogan-sub   { font-size: 1rem; }
  .slogan-hero,
  .slogan-wrapper { padding: 2rem 1rem; }
}

/* The overlay image’s negative left offset causes overflow on phones */
@media (max-width: 700px) {
  .hero-content { flex-direction: column; align-items: center; gap: 1.25rem; }
  .hero-images { max-width: 100%; justify-content: center; }
  .overlay-img {
    left: 0; bottom: -14px;
    width: 60%;
  }
}

/* Grids that were constrained or too tight */
@media (max-width: 800px) {
  .offerings-grid, .pillars-grid { max-width: 100%; gap: 1rem; }
  .form-grid { gap: 1rem; }
  .form-group { flex: 1 1 100%; }
}

/* Contact + camera sections had large paddings/fonts */
@media (max-width: 700px) {
  .contact-hero, .camera-hero, .quote-hero { padding: 1.5rem 1rem; }
  .quote-form { padding: 1.25rem; }
  .contact-slogan, .camera-title, .quote-slogan {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  }
  .camera-sub { font-size: 1rem; }
}

@media (max-width: 900px) {
  .home-parallax-banner {
    min-height: 26rem;
    padding: 4rem 1.5rem;
    background-attachment: scroll;
    background-position: center center;
  }

  .home-parallax-banner__inner {
    text-align: center;
  }

  .home-parallax-banner__title,
  .home-parallax-banner__copy {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .home-parallax-banner__actions {
    justify-content: center;
    text-align: center;
  }

  .home-parallax-banner__inner--contact {
    grid-template-columns: 1fr;
  }

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

  .home-parallax-banner__inner--home {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .home-parallax-banner__inner--home .home-parallax-banner__title {
    max-width: 100%;
    letter-spacing: -0.05em;
  }

  .home-hero-panel {
    width: min(100%, 30rem);
    margin: 0 auto;
  }

  .home-intro,
  .home-section,
  .home-testimonials,
  .home-final-cta {
    width: min(100% - 1.5rem, 42rem);
  }

  .home-intro,
  .home-card-grid,
  .home-section--split,
  .home-section--reverse,
  .home-final-cta {
    grid-template-columns: 1fr;
  }

  .home-intro {
    margin-top: -2rem;
  }

  .home-section {
    padding: 3.5rem 0;
  }

  .home-section__heading {
    text-align: center;
  }

  .home-section__content,
  .home-testimonials__heading,
  .home-final-cta {
    text-align: center;
  }

  .home-feature-list {
    text-align: left;
  }

  .home-final-cta__side {
    justify-items: center;
  }

  .about-hero__inner,
  .about-story,
  .about-services,
  .about-final-cta,
  .install-hero__inner,
  .install-section--split,
  .install-plan-section,
  .coverage-section,
  .install-support-panel,
  .install-final-cta {
    grid-template-columns: 1fr;
  }

  .about-hero__inner,
  .install-hero__inner {
    text-align: center;
  }

  .about-hero-card,
  .install-hero__panel {
    width: min(100%, 30rem);
    margin: 0 auto;
  }

  .contact-terminal {
    width: min(100%, 30rem);
    margin: 0 auto;
  }

  .about-story,
  .about-values,
  .about-services,
  .about-final-cta,
  .install-steps,
  .install-section,
  .install-service-grid,
  .coverage-section,
  .coverage-seo-list,
  .install-support-panel,
  .install-final-cta {
    width: min(100% - 1.5rem, 42rem);
  }

  .about-story,
  .about-values__heading,
  .about-services__content,
  .about-final-cta,
  .install-section__content,
  .install-plan-section__heading,
  .install-plan-section__content,
  .install-service-grid__heading,
  .coverage-section__intro,
  .install-support-panel__content,
  .install-final-cta {
    text-align: center;
  }

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

  .install-steps,
  .install-service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-area-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .install-steps {
    margin-top: -2rem;
  }

  .install-section {
    padding: 3.5rem 0;
  }

  .install-plan-section {
    padding: 1.25rem;
  }

  .install-plan-stage {
    min-height: 30rem;
  }
}

@media (max-width: 600px) {
  .home-parallax-banner {
    min-height: 22rem;
    padding: 3.5rem 1rem;
    background-position: 58% center;
  }

  .home-parallax-banner__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  .home-parallax-banner__title {
    line-height: 1.02;
  }

  .home-parallax-banner__copy {
    margin-top: 1rem;
    line-height: 1.55;
  }

  .home-parallax-banner__actions .cta-button {
    width: 100%;
    max-width: 18rem;
  }

  .home-parallax-banner--home {
    min-height: auto;
    padding: 4rem 1rem 5.25rem;
    background-position: 60% center;
  }

  .home-parallax-banner__actions {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
  }

  .home-secondary-link {
    width: 100%;
    max-width: 18rem;
    justify-content: center;
  }

  .home-hero-panel {
    padding: 1rem;
    border-radius: 22px;
  }

  .home-intro__card,
  .home-proof-card,
  .home-testimonial-carousel {
    border-radius: 20px;
  }

  .home-testimonials {
    padding: 2.25rem 0 3.25rem;
  }

  .home-testimonial-track {
    min-height: 16.5rem;
  }

  .home-testimonial-controls {
    justify-content: center;
    padding-bottom: 0.85rem;
  }

  .home-image-frame {
    border-radius: 24px;
  }

  .home-image-frame img {
    border-radius: 18px;
  }

  .home-final-cta {
    margin-bottom: 3rem;
    border-radius: 24px;
  }

  .about-hero,
  .install-hero {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .about-hero-card,
  .install-hero__panel,
  .install-plan-section,
  .install-plan-stage,
  .install-step-card,
  .install-service-card,
  .install-home-types,
  .install-home-type-grid div,
  .install-support-panel,
  .install-camera-types,
  .install-type-list div,
  .install-final-cta,
  .contact-terminal,
  .contact-terminal__line,
  .about-value-card,
  .about-service-list div {
    border-radius: 20px;
  }

  .contact-terminal {
    text-align: left;
  }

  .contact-terminal__screen {
    padding: 1rem;
  }

  .contact-terminal__line {
    gap: 0.4rem;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }

  .install-steps,
  .install-service-cards,
  .install-home-type-grid,
  .install-area-list {
    grid-template-columns: 1fr;
  }

  .install-plan-section {
    width: min(100% - 1.5rem, 42rem);
  }

  .install-plan-stage {
    min-height: auto;
  }

  .install-house-map {
    position: relative;
    inset: auto;
    min-height: 19rem;
  }

  .install-house-hotspot {
    width: clamp(4.5rem, 21vw, 6rem);
  }

  .install-house-hotspot--door {
    width: clamp(3.8rem, 16vw, 5rem);
    --hotspot-height: clamp(5.2rem, 24vw, 7rem);
  }

  .install-house-hotspot--window {
    width: clamp(2.4rem, 10vw, 3.4rem);
    --hotspot-height: clamp(3.4rem, 16vw, 4.8rem);
  }

  .install-house-hotspot--garage {
    width: clamp(6.2rem, 28vw, 8rem);
    --hotspot-height: clamp(6.8rem, 32vw, 9rem);
  }

  .install-layout-mascot {
    left: 50%;
    top: 0.75rem;
    width: min(20rem, calc(100% - 1.5rem));
    transform: translate(-50%, 0);
  }

  .install-layout-mascot__eye {
    flex-basis: 3.4rem;
    width: 3.4rem;
    height: 3.4rem;
  }

  .install-layout-mascot__bubble {
    font-size: 0.84rem;
  }

  .coverage-map__panel {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 0.85rem;
  }

  .coverage-map__legend {
    left: 0.85rem;
    bottom: 0.85rem;
  }

  .about-services,
  .about-final-cta,
  .install-support-panel,
  .install-final-cta {
    border-radius: 24px;
  }

  .about-final-cta,
  .install-final-cta {
    margin-bottom: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-parallax-banner__title {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }

  .home-testimonial-card,
  .home-testimonial-dot {
    transition: none;
  }

  .contact-terminal,
  .contact-terminal__typed {
    animation: none;
  }

  .contact-terminal {
    opacity: 1;
    transform: none;
  }

  .contact-terminal__typed {
    max-width: none;
    border-right-color: transparent;
  }
}

/* Tables: allow horizontal scroll instead of breaking layout */
.camera-table-container { overflow-x: auto; }
.camera-table { width: 100%; }

/* Footer: relax layout */
@media (max-width: 700px) {
  .footer-container { gap: 1rem; padding: 0 1rem; }
  .footer-badge { width: 70px; }
}

/* Profile/CRM bits: ensure cards don’t force width */
@media (max-width: 600px) {
  .profile-container { padding: 0 12px; margin: 24px auto; }
  .panel-card, .quotes-card, .profile-card { padding: 16px; }
}

/* OPTIONAL: mild global downscale to ease tight pages */
@media (max-width: 480px) {
  html { font-size: 15px; } /* defaults are ~16px; this is subtle */
}

@media (min-width: 901px) {
  .nav-container {
    display: flex;                /* ensure desktop flex centering */
    align-items: center;
    justify-content: space-between;
  }
}



.profile-container,
.profile-grid,
.profile-card,
.quotes-card,
.quote-card { max-width: 100%; }

/* On phones, make the grid a single column and tighten spacing */
@media (max-width: 960px) {
  .profile-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* CAROUSEL: keep arrows inside; never use negative offsets */
.carousel-arrow.right { right: 8px; }
.carousel-arrow.left  { left: 8px; }

/* Also reduce gap so 100% panels + gap don’t “feel” wider */
@media (max-width: 720px) {
  .panels { gap: 12px; }
}

/* Ensure the viewport is the scroll container (not the page) */
.carousel-viewport { overflow: hidden; }

/* Safety: prevent any panel content from forcing width */
.panel-card { max-width: 100%; overflow-wrap: anywhere; }

/* Tables and long strings won’t blow out the width */
.camera-table-container,
.table-wrap { overflow-x: auto; }

/* Base icon look */
.nav-toggle .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Hidden on desktop */
.nav-toggle { display: none; }

/* ===== Mobile / Tablet (<= 900px) ===== */
@media (max-width: 900px) {
  /* Right side spacing + hamburger button */
  .nav-right { gap: 8px; }
  .nav-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: #f2f6ff;
    color: #0a1e40;
    border: 1px solid rgba(0,0,0,.08);
  }
  .icon-close { display: none; }
  nav.is-open .icon-hamburger { display: none; }
  nav.is-open .icon-close { display: block; }

  /* Drawer content: left aligned, full width list */
  #primary-nav { text-align: left; }
  #primary-nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #primary-nav .nav-links > li { width: 100%; }

  /* Dropdown trigger row */
  #primary-nav .dropdown-trigger,
  #primary-nav .nav-links .dropdown > a {
    display: flex;
    align-items: center;             /* (fix for earlier 'left') */
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: .5rem 0;
    background: none;
    border: 0;
  }

  /* Submenu: hidden by default (no gap), in-flow when shown */
  #primary-nav .dropdown .dropdown-content {
    display: none !important;        /* closed state */
    position: static;
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* Show ONLY when this dropdown is opened */
  nav.is-open #primary-nav .dropdown.is-open .dropdown-content,
  nav.is-open #primary-nav .dropdown .dropdown-trigger[aria-expanded="true"] + .dropdown-content {
    display: block !important;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
  }

  /* Disable hover-open on touch for CLOSED items */
  #primary-nav .dropdown:not(.is-open):hover .dropdown-content {
    display: none !important;
  }
}

/* Stack the trigger and submenu vertically in the mobile drawer */
@media (max-width: 900px) {
  /* make the wrapper a block/column container */
  #primary-nav .nav-links .dropdown {
    display: block;                  /* overrides desktop inline-flex */
    /* OR: display:flex; flex-direction:column; align-items:stretch; */
  }

  /* keep the trigger full width */
  #primary-nav .dropdown-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .5rem 0;
  }

  /* submenu takes the full width UNDER the trigger */
  #primary-nav .dropdown .dropdown-content {
    display: none;                    /* closed by default */
    position: static;
    width: 100%;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: none;
  }
  nav.is-open #primary-nav .dropdown.is-open .dropdown-content {
    display: block;                   /* shown when opened */
  }
}

/* Logo size (desktop) */
.nav-left .logo{
  font-size: 2.25rem;          /* bigger wordmark */
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.nav-left .logo{
  --eye-size: .90em;
}

/* make the eye follow the font size */
.nav-left .logo .eye-wrapper{
  width: var(--eye-size);
  height: var(--eye-size);
  transform: translateY(1px);
  display: inline-block;
  margin-left: -0.22em;   
}

/* optional: scale a bit more on large desktops */
@media (min-width: 1200px){
  .nav-left .logo{ font-size: 2.6rem; }
}

/* mobile can stay smaller if you want */
@media (max-width: 900px){
  .nav-left .logo{ font-size: 1.6rem; }
}

/* Desktop: make the OUR SERVICES trigger look like a link */
@media (min-width: 901px) {
  .nav-links > .dropdown > .dropdown-trigger {
    font: inherit;              /* inherit family + size */
    font-size: 1.10rem;         /* match your link size */
    font-weight: 600;           /* match link weight */
    color: #000;
    background: none;
    border: 0;
    padding: 0;                 /* remove button padding */
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;           /* for underline effect */
  }

  /* caret size + alignment */
  .nav-links > .dropdown > .dropdown-trigger .icon {
    width: 12px;
    height: 12px;
    margin-left: .4rem;
    transform: translateY(1px);
  }

  /* same hover underline as links */
  .nav-links > .dropdown > .dropdown-trigger::after {
    content: "";
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #0077ff;
    transition: width .3s ease;
  }
  .nav-links > .dropdown > .dropdown-trigger:hover::after {
    width: 100%;
  }
}


:root{
  --blue-dark: #004799;   /* SEC + TECH */
  --blue-light: #0E78FF;  /* UR + the O (text color if needed) */
}

/* Base logo colors */
.logo .sec,
.logo .tech { color: var(--blue-dark); }
.logo .ur     { color: var(--blue-light); }

/* Keep kerning + alignment tidy */
.logo{ display:inline-block; position:relative; isolation:isolate; }
.logo .word{
  display:inline-flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.logo .brand-prefix{
  margin-right: 0.22em;
}
.logo .brand-s{
  margin-right: 0.25em;
}
.logo .brand-rest{
  margin-left: 0.03em;
}
.logo .eye-wrapper{
  display:inline-block;
  width:.92em; height:.92em;        /* scale the camera slightly */
  margin-left:0;
  vertical-align:-0.06em;
}
.logo .eye-wrapper svg{ display:block; }  /* remove inline gap */

/* Hover sweep (subtle sheen across the word) */
.logo::after{
  content: none;
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 10%,
      rgba(255,255,255,.35) 32%,
      rgba(255,255,255,0) 56%);
  mix-blend-mode:screen;            /* brightens colors under the sweep */
  transform:translateX(-120%);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.logo:hover::after,
.logo:focus-visible::after{
  transform:translateX(120%);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo::after{ transition:none; transform:none; opacity:0; }
}


/* ===== Regular site navbar: bold link style (matches CRM) ===== */
:root{
  --nav-link: #0a1c3d;         /* text color */
  --nav-link-hover: #0077ff;   /* hover/underline color */
}

/* Base link normalization */
nav .nav-center .nav-links a,
nav .nav-center .dropdown > a,
nav .nav-center .dropdown-trigger{
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 600;            /* bolder look */
}

/* Prevent purple visited links */
nav .nav-center .nav-links a:visited,
nav .nav-center .dropdown > a:visited{
  color: var(--nav-link);
}

/* Hover color (no underline yet) */
nav .nav-center .nav-links a:hover,
nav .nav-center .dropdown > a:hover,
nav .nav-center .dropdown-trigger:hover{
  color: var(--nav-link-hover);
}

/* Desktop: underline sweep on hover */
@media (min-width: 901px){
  nav .nav-center .nav-links a,
  nav .nav-center .dropdown-trigger{
    position: relative;
    overflow: hidden;
  }
  nav .nav-center .nav-links a::after,
  nav .nav-center .dropdown-trigger::after{
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--nav-link-hover);
    transition: width .3s ease;
  }
  nav .nav-center .nav-links a:hover::after,
  nav .nav-center .dropdown-trigger:hover::after{
    width: 100%;
  }
}

/* Mobile drawer: keep bold, bigger tap targets, no underline anim */
@media (max-width: 900px){
  nav .nav-center .nav-links a,
  nav .nav-center .dropdown-trigger{
    font-weight: 600;
    padding: .6rem 0;
  }
  nav .nav-center .nav-links a::after,
  nav .nav-center .dropdown-trigger::after{
    display: none;
  }
}

/* keep status chips on one line */
.badge{
  white-space: nowrap;   /* <- stops "Paid" splitting */
  line-height: 1;        /* tidy vertical alignment */
}

/* keep the badge (and Pay button) from being squished */
.status-and-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;            /* don't shrink */
  min-width: max-content;    /* size to content */
}

/* let the header wrap instead of squeezing items */
.quote-card-header{
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;           /* drop to next line on small screens */
}

.quote-card-header .date{
  flex: 1 1 160px;           /* dates can wrap/flow */
  min-width: 0;
}


.inline-edit { display:flex; align-items:center; gap:.5rem; }
.contact-input {
  background:transparent; border:0; padding:0; width:100%;
  font:inherit; color:inherit; pointer-events:auto;   /* IMPORTANT */
}
.contact-input[readonly] { cursor:default; }
.icon-btn { background:transparent; border:0; cursor:pointer; padding:.25rem; border-radius:8px; }
.icon-btn:hover { background:rgba(0,0,0,.06); }
.hidden { display:none; }

/* --- Register page form styling (scoped under .auth-container.reg) --- */
.auth-container.reg .auth-form {
  max-width: 560px;
  margin: 0 auto;
}
.auth-container.reg .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.auth-container.reg label {
  font-weight: 600;
}
.auth-container.reg input[type="text"],
.auth-container.reg input[type="email"],
.auth-container.reg input[type="tel"],
.auth-container.reg input[type="password"] {
  padding: 11px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  background: #fff;
}
.auth-container.reg input:focus {
  border-color: #0077ff;
  box-shadow: 0 0 0 3px rgba(0,119,255,.12);
}
.auth-container.reg .has-error input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}
.auth-container.reg .error-text {
  color: #dc2626;
  font-size: .92rem;
}
.auth-container.reg .form-errors { margin-bottom: 10px; }
.auth-container.reg .help-text,
.auth-container.reg .helptext { /* Django renders help as .helptext */
  color: #475569;
  font-size: .9rem;
}
.auth-container.reg .help-text ul,
.auth-container.reg .helptext ul {
  margin: 6px 0 0 18px;
}
/* Optional: make the long default Django password help a little softer */
.auth-container.reg .helptext {
  background: rgba(0,0,0,.03);
  border: 1px dashed #cfd8e3;
  padding: 10px 12px;
  border-radius: 10px;
}

/* Row container stays a 2-column grid: label | form */
.contact-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:10px;
  background:#f7f9fc;
  border-radius:14px;
  padding:10px 12px;
  align-items:start;
}
.contact-label{ font-weight:600; color:#64748b; }

/* The form becomes a 2x2 grid:
   row1: [ input ...... ][ ✎ ]
   row2: [ Save ]        [ Cancel ]
*/
.inline-edit{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:8px;
  row-gap:8px;
  min-width:0; /* allow input to fill */
}

/* Positions */
.contact-input{ grid-column:1; grid-row:1; flex:1 1 auto; min-width:0; padding:8px 10px;
  border-radius:10px; border:1px solid transparent; background:transparent; outline:none; }
.edit{ grid-column:2; grid-row:1; justify-self:end; }
.save{ grid-column:1; grid-row:2; justify-self:start; }
.cancel{ grid-column:2; grid-row:2; justify-self:start; }

/* View vs edit visuals */
.contact-input[readonly]{ padding:0; border:0; background:transparent; }
.inline-edit.is-editing .contact-input{
  background:#fff; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.2);
}

/* Buttons */
.icon-btn{ background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px; }
.icon-btn:hover{ background:rgba(0,0,0,.06); }
.btn.btn-ghost{ padding:6px 10px; font-size:.88rem; border-radius:10px; background:#eef2ff; border:1px solid #e2e8f0; }
.hidden{ display:none; }

/* Mobile: label on its own row for max input width */
@media (max-width:480px){
  .contact-row{ grid-template-columns: 1fr; }
  .contact-label{ grid-column:1; }
  .inline-edit{ grid-column:1; }
}

/* 1) Global safety: never allow horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Let flex/grid children actually shrink on narrow screens */
.profile-container, .profile-grid,
.panel-carousel, .carousel-viewport, .panels,
.panel-card, .quote-list, .profile-contact,
.contact-row, .inline-edit { min-width: 0; }

/* 3) Carousel: keep the horizontal scroll INSIDE the viewport */
.panel-carousel .carousel-viewport {
  overflow: hidden;                 /* prevents page from widening */
  width: 100%;
}
.panel-carousel .panels {
  display: flex;
  overflow-x: auto;                 /* scroll inside here */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.panel-carousel .panel-card {
  flex: 0 0 100%;                   /* each panel = full viewport width */
  scroll-snap-align: start;
}

/* 4) Stats: use a responsive grid instead of fixed widths */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .profile-stats { grid-template-columns: repeat(4, 1fr); }
}

/* 5) Inline edit block: keep email/phone on-screen and wrap long text */
.contact-row { grid-template-columns: 90px 1fr; } /* label | form (you already have this) */
.inline-edit { min-width: 0; }                    /* allow shrinking */
.contact-input {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-row, .contact-input {
  overflow-wrap: anywhere;                        /* long emails won't force overflow */
}

/* 6) Buttons under the field (from earlier), keep them wrapping nicely */
.inline-edit { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 8px; }
.inline-edit .contact-input { grid-column: 1; grid-row: 1; }
.inline-edit .edit         { grid-column: 2; grid-row: 1; justify-self: end; }
.inline-edit .save         { grid-column: 1; grid-row: 2; justify-self: start; }
.inline-edit .cancel       { grid-column: 2; grid-row: 2; justify-self: start; }

/* 7) Small screens: give everything full width */
@media (max-width: 480px) {
  .contact-row { grid-template-columns: 1fr; }
  .profile-card, .panel-carousel { width: 100%; }
}

.profile-contact { display: grid; gap: 12px; }

/* 3 columns: label | value (fills) | optional icon */
.contact-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

/* Keeps the label compact and readable */
.contact-label {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
}

/* The value cell must be allowed to shrink */
.contact-value {
  min-width: 0;              /* critical so ellipsis can work in grid/flex */
  display: block;
}

/* One-line ellipsis on larger screens */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs in the phone row should fill the middle column */
.inline-edit {
  display: grid;
  grid-template-columns: 1fr auto auto auto; /* input + edit + save + cancel */
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inline-edit .contact-input {
  width: 100%;
  min-width: 0;
}

/* Small screens: stack label above, let the value wrap safely */
@media (max-width: 480px) {
  .contact-row {
    grid-template-columns: 1fr auto;  /* value + optional icon */
    grid-auto-flow: row;
  }
  .contact-label {
    grid-column: 1 / -1;              /* label becomes its own row */
    margin-bottom: 2px;
  }
  .text-ellipsis {
    white-space: normal;               /* allow wrapping on mobile */
    overflow-wrap: anywhere;           /* break long emails mid-word if needed */
  }
}


/* Profile contact rows */
.profile-card .profile-contact { display: grid; gap: 12px; }

/* Row = label | value | (optional icon) */
.profile-card .contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;                 /* critical for ellipsis in flex */
}

/* Make all direct children shrinkable */
.profile-card .contact-row > * { min-width: 0; }

/* Label pill */
.profile-card .contact-label {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
}

/* Value takes remaining width and truncates on one line */
.profile-card .contact-value {
  flex: 1 1 auto;
  display: block;               /* anchors are inline by default */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
}

/* Phone inline edit should also not push the row wider */
.profile-card .inline-edit {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-card .inline-edit .contact-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Mobile: stack label above value and allow wrapping instead of ellipsis */
@media (max-width: 520px) {
  .profile-card .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-card .contact-label { margin-bottom: 2px; }
  .profile-card .contact-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;     /* break really long emails */
    word-break: break-word;
  }
}

/* Keep label + value inline on mobile, with safe truncation */
@media (max-width: 520px) {
  .profile-card .contact-row {
    flex-direction: row;         /* override earlier "column" */
    align-items: center;
  }
  .profile-card .contact-label { margin-bottom: 0; }

  /* email/phone value: single line + ellipsis */
  .profile-card .contact-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;                /* critical for flex truncation */
    max-width: 100%;
    display: block;
  }
}

/* Prevent Save/Cancel from getting squeezed or breaking text */
.profile-card .inline-edit {
  display: flex;
  flex-wrap: wrap;               /* allow buttons to drop below input if needed */
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.profile-card .inline-edit .contact-input {
  flex: 1 1 160px;               /* input grows, but won’t crush buttons */
  min-width: 0;
  width: 100%;
}
.profile-card .inline-edit .btn,
.profile-card .inline-edit .icon-btn {
  flex: 0 0 auto;                /* don’t shrink to tiny width */
  white-space: nowrap;           /* keep "Save" / "Cancel" on one line */
}
@media (max-width: 520px) {
  .profile-card .inline-edit .btn,
  .profile-card .inline-edit .icon-btn {
    margin-top: 6px;             /* if they wrap below the input, add a little spacing */
  }
}

/* Mobile: show input row, and when editing move Save/Cancel under it */
@media (max-width: 520px) {
  /* Email/Phone rows remain one line */
  .profile-card .contact-row {
    flex-direction: row;
    align-items: center;
  }

  /* Inline edit layout uses CSS Grid on small screens */
  .profile-card .inline-edit {
    display: grid;
    grid-template-columns: 1fr auto;   /* input | edit icon */
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .profile-card .inline-edit .contact-input {
    grid-column: 1;                    /* input on the left */
    min-width: 0;
    width: 100%;
  }
  .profile-card .inline-edit .edit {
    grid-column: 2;                    /* pencil to the right of input */
  }

  /* When in edit mode, make input full width on row 1,
     then place Save + Cancel on row 2 side-by-side */
  .profile-card .inline-edit.is-editing {
    grid-template-columns: 1fr auto auto; /* input spans all three on row 1 */
  }
  .profile-card .inline-edit.is-editing .contact-input {
    grid-column: 1 / -1;               /* full width row 1 */
  }
  .profile-card .inline-edit.is-editing .save {
    grid-column: 2;                     /* row 2, col 2 */
    justify-self: start;
    margin-top: 4px;
    white-space: nowrap;
  }
  .profile-card .inline-edit.is-editing .cancel {
    grid-column: 3;                     /* row 2, col 3 */
    justify-self: start;
    margin-top: 4px;
    white-space: nowrap;
  }
}

/* Desktop / tablet: keep the edit icon on the same line */
@media (min-width: 521px) {
  .profile-card .inline-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;          /* <— prevent wrapping on desktop */
  }
  .profile-card .inline-edit .contact-input {
    flex: 1 1 260px;            /* grows, but leaves room for the icon */
    min-width: 0;
    width: 100%;
  }
  .profile-card .inline-edit .icon-btn,
  .profile-card .inline-edit .btn {
    flex: 0 0 auto;
    white-space: nowrap;        /* never split button text */
  }
}

/* Mobile: keep your grid layout so Save/Cancel go underneath */
@media (max-width: 520px) {
  .profile-card .inline-edit {
    display: grid;
    grid-template-columns: 1fr auto;  /* input | pencil */
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .profile-card .inline-edit.is-editing {
    grid-template-columns: 1fr auto auto;  /* row 1: input full width; row 2: buttons */
  }
  .profile-card .inline-edit.is-editing .contact-input { grid-column: 1 / -1; }
  .profile-card .inline-edit.is-editing .save   { grid-column: 2; margin-top: 4px; }
  .profile-card .inline-edit.is-editing .cancel { grid-column: 3; margin-top: 4px; }
}

/* Inline phone editor: grid with areas so buttons sit UNDER the input */
.profile-card .inline-edit {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0;

  /* Row 1: input | edit (pencil) */
  grid-template-columns: 1fr auto;
  grid-template-areas: "input edit";
}

.profile-card .inline-edit .contact-input {
  grid-area: input;
  min-width: 0;
  width: 100%;
}

.profile-card .inline-edit .edit {        /* the pencil */
  grid-area: edit;
}

/* When editing: Row 1 = input full width; Row 2 = Save | Cancel */
.profile-card .inline-edit.is-editing {
  align-items: start;
  grid-template-columns: auto auto;       /* buttons side-by-side */
  grid-template-areas:
    "input input"
    "save  cancel";
}

/* Map buttons into their grid cells (JS already shows/hides them) */
.profile-card .inline-edit .save   { grid-area: save;   justify-self: start; }
.profile-card .inline-edit .cancel { grid-area: cancel; justify-self: start; }

/* Make sure long locales/zoom don’t break buttons */
.profile-card .inline-edit .btn,
.profile-card .inline-edit .icon-btn {
  white-space: nowrap;
  min-width: 0;
}
/* Shared layout */
.slogan-hero .hero-content,
.camera-hero .camera-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Desktop/tablet: keep your DOM order (alternates naturally) */
.slogan-hero .hero-content,
.camera-hero .camera-content {
  flex-direction: row;
}

/* Mobile: stack and force text above image everywhere */
@media (max-width: 900px) {
  .slogan-hero .hero-content,
  .camera-hero .camera-content {
    flex-direction: column;
  }
  .hero-text, .camera-text { order: 1; }
  .hero-images, .camera-hero .hero-images { order: 2; }
}

/* Niceties */
.hero-images img,
.camera-hero .hero-images img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Final site nav theme */
nav#site-nav {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 119, 255, 0.18), transparent 18rem),
    radial-gradient(circle at 78% 20%, rgba(113, 175, 255, 0.09), transparent 20rem),
    linear-gradient(105deg, #020816 0%, #061126 45%, #0a1e40 100%);
  border-bottom: 1px solid rgba(113, 175, 255, 0.24);
  box-shadow: 0 16px 38px rgba(2, 8, 22, 0.42);
}

nav#site-nav .nav-container {
  color: #eaf3ff;
}

nav#site-nav .logo .sec,
nav#site-nav .logo .tech,
nav#site-nav .logo .brand-prefix,
nav#site-nav .logo .brand-s,
nav#site-nav .logo .brand-rest {
  color: #f6fbff;
}

nav#site-nav .logo .highlight-you {
  color: #71afff;
}

nav#site-nav .nav-center .nav-links a,
nav#site-nav .nav-center .dropdown > a,
nav#site-nav .nav-center .dropdown-trigger {
  color: rgba(246, 251, 255, 0.88);
}

nav#site-nav .nav-center .nav-links a:visited,
nav#site-nav .nav-center .dropdown > a:visited {
  color: rgba(246, 251, 255, 0.88);
}

nav#site-nav .nav-center .nav-links a:hover,
nav#site-nav .nav-center .dropdown > a:hover,
nav#site-nav .nav-center .dropdown-trigger:hover,
nav#site-nav .nav-center .dropdown-trigger[aria-expanded="true"] {
  color: #71afff;
}

@media (min-width: 901px) {
  nav#site-nav .nav-center .nav-links a::after,
  nav#site-nav .nav-center .dropdown-trigger::after {
    background: #71afff;
  }
}

nav#site-nav .dropdown-content {
  background: rgba(8, 24, 50, 0.98);
  border: 1px solid rgba(113, 175, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

nav#site-nav .dropdown-content a {
  color: rgba(246, 251, 255, 0.88);
}

nav#site-nav .dropdown-content a:hover {
  color: #ffffff;
  background: rgba(113, 175, 255, 0.14);
}

nav#site-nav .nav-pill {
  background: rgba(113, 175, 255, 0.12);
  color: #f6fbff;
  border-color: rgba(113, 175, 255, 0.25);
}

nav#site-nav .nav-pill:hover {
  background: rgba(113, 175, 255, 0.22);
}

nav#site-nav .nav-pill .icon,
nav#site-nav .dropdown-trigger .icon {
  stroke: currentColor;
}

nav#site-nav .flag-link {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.2));
}

nav#site-nav #nav-wave .wave-stroke {
  stroke: rgba(113, 175, 255, 0.85);
}

nav#site-nav #nav-wave .wave-fill {
  fill: rgba(113, 175, 255, 0.12);
}

body {
  background:
    radial-gradient(circle at 10% 8%, rgba(113, 175, 255, 0.13), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(0, 119, 255, 0.08), transparent 26rem),
    linear-gradient(180deg, #0b2447 0%, #123760 46%, #1a4a78 100%);
  color: #0a1e40;
}

main {
  background: transparent;
}

.home-page,
.about-page,
.install-page {
  background:
    linear-gradient(180deg, #07162f 0, #07162f 52rem, #0b2447 70rem, #123760 100rem, #1a4a78 100%),
    radial-gradient(circle at 12% 8%, rgba(113, 175, 255, 0.12), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(0, 119, 255, 0.08), transparent 26rem);
}

.contact-hero {
  background:
    radial-gradient(circle at 14% 10%, rgba(113, 175, 255, 0.12), transparent 24rem),
    linear-gradient(135deg, #0b2447, #123760 54%, #1a4a78);
}

.home-parallax-banner--home,
.home-parallax-banner--inner-page,
.about-hero,
.install-hero {
  position: relative;
  overflow: hidden;
}

.home-parallax-banner--home::after,
.home-parallax-banner--inner-page::after,
.about-hero::after,
.install-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3rem;
  z-index: 3;
  height: clamp(16rem, 30vw, 26rem);
  background: linear-gradient(180deg, rgba(7, 22, 47, 0) 0%, rgba(7, 22, 47, 0.72) 48%, #07162f 86%, #07162f 100%);
  pointer-events: none;
}

.home-parallax-banner--home .home-parallax-banner__inner,
.home-parallax-banner--inner-page .home-parallax-banner__inner,
.about-hero .home-parallax-banner__inner,
.install-hero .home-parallax-banner__inner {
  z-index: 4;
}

@media (max-width: 900px) {
  nav#site-nav.is-open #primary-nav {
    background: rgba(8, 24, 50, 0.98);
    border-color: rgba(113, 175, 255, 0.16);
  }

  nav#site-nav.is-open #primary-nav .dropdown-content {
    border-color: rgba(113, 175, 255, 0.16);
  }
}

/* Final public page text contrast */
.home-page,
.about-page,
.install-page,
.contact-hero,
.contact-content {
  color: rgba(255, 255, 255, 0.9);
}

.home-page h1,
.home-page h2,
.home-page h3,
.about-page h1,
.about-page h2,
.about-page h3,
.install-page h1,
.install-page h2,
.install-page h3,
.contact-hero h1,
.contact-hero h2,
.contact-hero h3,
.contact-content h1,
.contact-content h2,
.contact-content h3 {
  color: #ffffff;
}

.home-page p,
.home-page li,
.about-page p,
.about-page li,
.install-page p,
.install-page li,
.contact-hero p,
.contact-hero li,
.contact-content p,
.contact-content li {
  color: rgba(255, 255, 255, 0.84);
}

.home-page .home-kicker,
.about-page .home-kicker,
.install-page .home-kicker,
.contact-hero .home-kicker,
.contact-content .home-kicker {
  color: #bcdcff;
}

.home-page .home-feature-list li,
.about-page .home-feature-list li,
.install-page .home-feature-list li {
  color: rgba(255, 255, 255, 0.88);
}

.home-intro__card,
.home-proof-card,
.home-testimonial-card,
.about-value-card,
.about-service-list div,
.install-service-card,
.install-home-types,
.install-camera-types,
.install-type-list div,
.install-plan-section,
.install-layout-mascot__bubble,
.install-support-panel,
.coverage-map,
.contact-terminal {
  color: #0a1e40;
}

.home-intro__card h1,
.home-intro__card h2,
.home-intro__card h3,
.home-proof-card h1,
.home-proof-card h2,
.home-proof-card h3,
.home-testimonial-card h1,
.home-testimonial-card h2,
.home-testimonial-card h3,
.about-value-card h1,
.about-value-card h2,
.about-value-card h3,
.about-service-list div h1,
.about-service-list div h2,
.about-service-list div h3,
.install-service-card h1,
.install-service-card h2,
.install-service-card h3,
.install-home-types h1,
.install-home-types h2,
.install-home-types h3,
.install-camera-types h1,
.install-camera-types h2,
.install-camera-types h3,
.install-type-list div h1,
.install-type-list div h2,
.install-type-list div h3,
.install-plan-section h1,
.install-plan-section h2,
.install-plan-section h3,
.install-support-panel h1,
.install-support-panel h2,
.install-support-panel h3,
.coverage-map h1,
.coverage-map h2,
.coverage-map h3,
.contact-terminal h1,
.contact-terminal h2,
.contact-terminal h3 {
  color: #0a1e40;
}

.home-intro__card p,
.home-intro__card li,
.home-proof-card p,
.home-proof-card li,
.home-testimonial-card p,
.home-testimonial-card li,
.about-value-card p,
.about-value-card li,
.about-service-list div p,
.about-service-list div li,
.install-service-card p,
.install-service-card li,
.install-home-types p,
.install-home-types li,
.install-home-type-grid small,
.install-camera-types p,
.install-camera-types li,
.install-type-list div p,
.install-type-list div li,
.install-plan-section p,
.install-plan-section li,
.install-support-panel p,
.install-support-panel li,
.coverage-map p,
.coverage-map li,
.contact-terminal p,
.contact-terminal li {
  color: #46556b;
}

.install-page .install-plan-section,
.install-page .install-plan-stage {
  background: transparent;
}

.install-page .install-plan-section__heading h2 {
  color: #ffffff;
}

.install-page .install-plan-section__heading p {
  color: rgba(255, 255, 255, 0.84);
}

.install-page .install-house-map__image {
  mix-blend-mode: normal;
  filter: none;
}

.site-footer {
  background:
    radial-gradient(circle at 14% 0%, rgba(113, 175, 255, 0.12), transparent 22rem),
    linear-gradient(135deg, #061126 0%, #0a1e40 56%, #0b2447 100%);
  border-top: 1px solid rgba(113, 175, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
}

.site-footer .footer-column h3 {
  color: #ffffff;
}

.site-footer .footer-column p,
.site-footer .footer-column a,
.site-footer .footer-bottom {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer .footer-column a:hover,
.site-footer .social-icons i:hover {
  color: #bcdcff;
}

.site-footer .footer-bottom {
  border-top-color: rgba(113, 175, 255, 0.16);
}

.site-footer .social-icons i {
  color: rgba(255, 255, 255, 0.75);
}

/* Refined dark-blue photo frames */
.home-image-frame,
.install-image-frame,
.about-story__image,
.contact-image,
.camera-image,
.hero-images,
.slogan-image {
  border: 1px solid rgba(113, 175, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(113, 175, 255, 0.14), rgba(6, 17, 38, 0.58));
  box-shadow:
    0 24px 58px rgba(2, 8, 22, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.home-image-frame {
  padding: 0.5rem;
}

.home-image-frame::before {
  content: none;
}

.home-image-frame img,
.install-service-card img,
.home-final-cta__side img,
.about-story__image img,
.contact-image img,
.camera-image img,
.hero-images img,
.slogan-image img,
.main-img,
.overlay-img {
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(188, 220, 255, 0.16);
}

.install-service-card img {
  box-shadow: inset 0 -1px 0 rgba(113, 175, 255, 0.16);
}

/* Keep photo presentation level and readable */
.home-image-frame--floating,
.install-image-frame,
.about-story__image {
  transform: none;
}

.about-page .about-services__content,
.install-page .install-support-panel,
.install-page .install-support-panel__content,
.install-page .install-camera-types,
.install-page .install-type-list div,
.install-page .install-note {
  color: #0a1e40;
}

.about-page .about-services__content h2,
.install-page .install-support-panel__content h2,
.install-page .install-camera-types h3,
.install-page .install-note strong {
  color: #0a1e40;
}

.about-page .about-services__content p,
.install-page .install-support-panel__content p,
.install-page .install-camera-types p,
.install-page .install-type-list p,
.install-page .install-note {
  color: #334158;
}

.install-page .install-support-panel__content .home-kicker {
  color: #005ec9;
}

.about-page .about-services {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.about-page .about-services__content,
.about-page .about-services__content h2 {
  color: #ffffff;
}

.about-page .about-services__content .home-kicker {
  color: #bcdcff;
}

.about-page .about-services__content p {
  color: rgba(255, 255, 255, 0.84);
}

.install-page .install-support-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.install-page .install-support-panel__content,
.install-page .install-support-panel__content h2 {
  color: #ffffff;
}

.install-page .install-support-panel__content .home-kicker {
  color: #bcdcff;
}

.install-page .install-support-panel__content p {
  color: rgba(255, 255, 255, 0.84);
}

.install-page .install-note {
  background: rgba(113, 175, 255, 0.10);
  border-color: rgba(113, 175, 255, 0.24);
  color: rgba(255, 255, 255, 0.86);
}

.install-page .install-note strong {
  color: #ffffff;
}

.install-page .install-camera-types {
  background:
    radial-gradient(circle at top right, rgba(113, 175, 255, 0.16), transparent 18rem),
    linear-gradient(135deg, rgba(6, 17, 38, 0.98), rgba(10, 30, 64, 0.94));
  border-color: rgba(113, 175, 255, 0.18);
  box-shadow: 0 24px 58px rgba(2, 8, 22, 0.28);
  color: #ffffff;
}

.install-page .install-camera-types h3 {
  color: #ffffff;
}

.install-page .install-type-list div {
  background: rgba(113, 175, 255, 0.10);
  border-color: rgba(113, 175, 255, 0.18);
  color: #ffffff;
}

.install-page .install-type-list span {
  color: #d7ecff;
}

.install-page .install-type-list p {
  color: rgba(255, 255, 255, 0.72);
}