/* ==========================================================================
   SealQuote — Landing Page (blue / white)
   ========================================================================== */

:root {
   --black: #061627;
   --black-soft: #0a1e33;
   --black-panel: #0d243d;
   --ink: #0c1a2e;
   --text: #3d5166;
   --text-soft: #5c7388;
   --red: #0077B6;
   --red-dark: #0256A3;
   --red-deep: #03045E;
   --red-soft: #E6F5FC;
   --color-secondary: #081727;
   --bg: #ffffff;
   --bg-soft: #f4f8fb;
   --border: #d8e4ee;
   --white: #ffffff;
   --radius: 16px;
   --radius-sm: 10px;
   --shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.06), 0 4px 12px rgba(11, 11, 13, 0.05);
   --shadow-md: 0 4px 10px rgba(11, 11, 13, 0.06), 0 16px 40px rgba(11, 11, 13, 0.1);
   --shadow-lg: 0 12px 30px rgba(11, 11, 13, 0.16), 0 30px 70px rgba(11, 11, 13, 0.2);
   --font-head: "Plus Jakarta Sans", "Segoe UI", sans-serif;
   --font-body: "Inter", "Segoe UI", sans-serif;
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px;
}

body {
   margin: 0;
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.65;
   color: var(--text);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

img,
svg {
   display: inline-block;
   vertical-align: middle;
}

a {
   color: inherit;
   text-decoration: none;
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

h1, h2, h3, h4 {
   font-family: var(--font-head);
   color: var(--ink);
   line-height: 1.15;
   margin: 0 0 16px;
   font-weight: 700;
   letter-spacing: -0.02em;
}

h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
h3 { font-size: 20px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.container {
   width: 100%;
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 24px;
}

.section {
   padding: 96px 0;
}

/* ---------- Buttons ---------- */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 15px;
   line-height: 1;
   padding: 14px 24px;
   border-radius: 999px;
   border: 2px solid transparent;
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   white-space: nowrap;
}

.btn-lg {
   padding: 17px 30px;
   font-size: 16px;
}

.btn-primary {
   background: var(--red);
   color: #fff;
   box-shadow: 0 8px 20px rgba(0, 119, 182, 0.35);
}

.btn-primary:hover {
   background: var(--red-dark);
   transform: translateY(-2px);
   box-shadow: 0 12px 26px rgba(0, 119, 182, 0.42);
   color: #fff;
}

.btn-ghost {
   background: transparent;
   color: var(--ink);
   border-color: var(--border);
}

.btn-ghost:hover {
   border-color: var(--ink);
   transform: translateY(-2px);
}

.btn-outline {
   background: transparent;
   color: var(--ink);
   border-color: var(--border);
}

.btn-outline:hover {
   border-color: var(--red);
   color: var(--red);
}

.btn-block {
   width: 100%;
}

/* ---------- Eyebrow / section heads ---------- */

/* Minimal kicker: pulsing dot, letterspaced text, trailing hairline.
   No box, no capsule. */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-head);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: var(--red);
   margin-bottom: 10px;
}

.eyebrow::after {
   content: "";
   width: 36px;
   height: 1px;
   background: linear-gradient(90deg, rgba(0, 119, 182, 0.6), transparent);
}

/* Centered section heads get a symmetric leading line */
.eyebrow-center::before {
   content: "";
   width: 36px;
   height: 1px;
   background: linear-gradient(270deg, rgba(0, 119, 182, 0.6), transparent);
}

/* Pulsing signal dot */
.eyebrow-dot {
   position: relative;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--red);
   flex-shrink: 0;
}

.eyebrow-dot::after {
   content: "";
   position: absolute;
   inset: -3px;
   border-radius: 50%;
   border: 1px solid var(--red);
   animation: eyebrow-ping 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

@keyframes eyebrow-ping {
   0%   { transform: scale(0.6); opacity: 0.9; }
   70%  { transform: scale(1.9); opacity: 0; }
   100% { transform: scale(1.9); opacity: 0; }
}

/* Dark-section variant */
.eyebrow-light {
   color: #90E0EF;
}

.eyebrow-light::after,
.eyebrow-light.eyebrow-center::before {
   background: linear-gradient(90deg, rgba(144, 224, 239, 0.6), transparent);
}

.eyebrow-light.eyebrow-center::before {
   background: linear-gradient(270deg, rgba(144, 224, 239, 0.6), transparent);
}

.eyebrow-light .eyebrow-dot {
   background: #48CAE4;
}

.eyebrow-light .eyebrow-dot::after {
   border-color: #48CAE4;
}

.section-head {
   max-width: 640px;
   margin: 0 auto 56px;
   text-align: center;
}

.section-head .eyebrow-center {
   margin-left: auto;
   margin-right: auto;
}

.section-head p {
   font-size: 17px;
   color: var(--text-soft);
}

/* ---------- Tick lists ---------- */

.tick-list li {
   position: relative;
   padding-left: 30px;
   margin-bottom: 12px;
   color: var(--text);
}

.tick-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 3px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: var(--red-soft);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077B6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
   background-size: 11px;
   background-position: center;
   background-repeat: no-repeat;
}

.tick-list-light li {
   color: rgba(255, 255, 255, 0.88);
}

.tick-list-light li::before {
   background-color: rgba(255, 255, 255, 0.14);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
   position: fixed;
   top: var(--wp-admin--admin-bar--height, 0px);
   left: 0;
   right: 0;
   z-index: 100;
   padding: 14px 0;
   background: var(--black);
   transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

.site-header.scrolled {
   background: rgba(255, 255, 255, 0.94);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(11, 11, 13, 0.06);
   padding: 10px 0;
}

.site-header .site-logo,
.brand .site-logo {
   height: 48px;
   width: auto;
   display: block;
   border-radius: 12px;
}

.site-header.scrolled .site-logo .path-invert {
   fill: #081727;
}

.site-header:not(.scrolled) .site-logo .path-invert {
   fill: white;
}

.site-header:not(.scrolled) .btn-ghost {
   color: white;
}

.site-header:not(.scrolled) .btn-ghost:hover {
   border-color: white !important;
}

.site-header:not(.scrolled) .btn-ghost {
   border-color: rgb(255 255 255 / 60%) !important;
}


.navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0;
}

.brand-mark {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: var(--red);
   color: #fff;
   box-shadow: 0 6px 16px rgba(0, 119, 182, 0.35);
}

.brand-name {
   font-family: var(--font-head);
   font-size: 19px;
   font-weight: 800;
   color: var(--ink);
   letter-spacing: -0.01em;
}

.brand-name em {
   font-style: normal;
   color: var(--red);
}

.brand-lockup {
   display: inline-flex;
   align-items: center;
   gap: 12px;
}

.brand-lockup .brand-name {
   font-size: 20px;
}

/* Header sits on the dark hero until scrolled */
.site-header:not(.scrolled) .brand-name {
   color: #fff;
}

.site-header:not(.scrolled) .brand-name em,
.brand-light .brand-name em {
   color: #90E0EF;
}

.site-header:not(.scrolled) .main-nav > ul a {
   color: rgba(255, 255, 255, 0.92);
}

.site-header:not(.scrolled) .main-nav > ul a:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
}

.brand-light .brand-name {
   color: #fff;
}

.main-nav ul {
   display: flex;
   align-items: center;
   gap: 6px;
}

.main-nav a {
   font-family: var(--font-head);
   font-size: 15px;
   font-weight: 600;
   color: var(--ink);
   padding: 9px 14px;
   border-radius: 999px;
   white-space: nowrap;
   transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover {
   background: var(--red-soft);
   color: var(--red);
}

.nav-right {
   display: flex;
   align-items: center;
   gap: 12px;
}

.nav-cta-mobile {
   display: none;
}

.nav-close,
.nav-backdrop,
.nav-drawer-head,
.nav-drawer-kicker,
.nav-drawer-foot,
.nav-cta-mobile-alt {
   display: none;
}

.menu-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   padding: 10px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 10px;
   cursor: pointer;
}

.menu-toggle span {
   display: block;
   height: 2px;
   width: 100%;
   background: var(--ink);
   border-radius: 2px;
   transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero (dark)
   ========================================================================== */

.hero {
   position: relative;
   padding: 170px 0 110px;
   overflow: hidden;
   background: var(--black);
   /* Keeps the shader's blend mode from reaching past the section */
   isolation: isolate;
}

/* Full-bleed blue field — navy to cyan, no red overlay */
.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background:
      radial-gradient(900px 520px at 88% 8%, rgba(0, 180, 216, 0.28), transparent 58%),
      radial-gradient(720px 420px at 8% 92%, rgba(3, 4, 94, 0.55), transparent 52%),
      linear-gradient(135deg, #03045E 0%, #023E8A 48%, #0077B6 100%);
}

.hero-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(8, 23, 39, 0.55), rgba(8, 23, 39, 0.12));
}

/* WebGPU shader; sits between the photo overlay and the content.
   `screen` blending means it only ever adds light, so the roof photo
   stays visible through it. Transparent until the shader boots, so
   browsers without WebGPU just keep the static background. */
.hero-shader {
   position: absolute;
   inset: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   mix-blend-mode: screen;
   opacity: 0;
   transition: opacity 1.6s ease;
}

.hero-shader.is-live {
   opacity: 0.3;
}

.hero .container {
   position: relative;
   z-index: 1;
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 60px;
   align-items: center;
}

.hero h1 {
   color: #fff;
}

.hero .eyebrow {
   color: #90E0EF;
}

.hero .eyebrow::after {
   background: linear-gradient(90deg, rgba(144, 224, 239, 0.6), transparent);
}

.hero .eyebrow-dot {
   background: #48CAE4;
}

.hero .eyebrow-dot::after {
   border-color: #48CAE4;
}

.hero-sub {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.72);
   max-width: 520px;
   margin-bottom: 32px;
}

.hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 32px;
}

.hero .btn-ghost {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.28);
}

.hero .btn-ghost:hover {
   border-color: #fff;
}

.accent {
   color: var(--red);
}

.hero-ticks {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 26px;
}

.hero-ticks li {
   position: relative;
   padding-left: 26px;
   font-size: 14.5px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
}

.hero-ticks li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background-color: rgba(0, 119, 182, 0.25);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390E0EF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
   background-size: 10px;
   background-position: center;
   background-repeat: no-repeat;
}

/* --- Hero visual: widget mockup card --- */

.hero-visual {
   position: relative;
   display: flex;
   justify-content: center;
}

.mock-widget {
   width: min(400px, 100%);
   background: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 22px;
   box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, 0.05);
   padding: 22px;
   position: relative;
   z-index: 1;
}

.mock-widget-head {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 15px;
   color: var(--ink);
   margin-bottom: 16px;
}

.mock-logo-dot {
   width: 12px;
   height: 12px;
   border-radius: 4px;
   background: var(--red);
   flex-shrink: 0;
}

.mock-badge {
   margin-left: auto;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--red);
   background: var(--red-soft);
   padding: 5px 10px;
   border-radius: 999px;
}

.mock-map {
   position: relative;
   height: 170px;
   border-radius: 14px;
   overflow: hidden;
   margin-bottom: 14px;
   background-image: url("../images/mock-map.jpg?v=3");
   background-size: cover;
   background-position: center;
}

/* Subtle vignette + blue wash so the satellite photo matches the palette */
.mock-map::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(180deg, rgba(0, 119, 182, 0.18), transparent 45%),
      radial-gradient(ellipse at center, transparent 55%, rgba(8, 23, 39, 0.35) 100%);
}

.mock-field {
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-sm);
   padding: 13px 14px;
   font-size: 14px;
   color: var(--text-soft);
   margin-bottom: 14px;
   background: var(--bg-soft);
}

.mock-estimate {
   border: 1.5px solid rgba(0, 119, 182, 0.35);
   background: linear-gradient(180deg, #F0FAFE, #fff);
   border-radius: 14px;
   padding: 16px;
}

.mock-estimate-label {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   color: var(--text-soft);
   margin-bottom: 4px;
}

.mock-estimate-price {
   font-family: var(--font-head);
   font-size: 27px;
   font-weight: 800;
   color: var(--red);
   letter-spacing: -0.02em;
}

.mock-estimate-meta {
   font-size: 13px;
   color: var(--text-soft);
   margin-top: 4px;
}

.mock-cta {
   background: var(--red);
   color: #fff;
   text-align: center;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 15px;
   padding: 14px;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(0, 119, 182, 0.35);
}

/* --- Floating cards --- */

.float-card {
   position: absolute;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 12px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 14px;
   box-shadow: var(--shadow-md);
   padding: 12px 16px;
   animation: floaty 5s ease-in-out infinite;
}

.float-card strong {
   display: block;
   font-family: var(--font-head);
   font-size: 13.5px;
   color: var(--ink);
   line-height: 1.3;
}

.float-card span {
   display: block;
   font-size: 12.5px;
   color: var(--text-soft);
   line-height: 1.3;
}

.float-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 11px;
   background: var(--red-soft);
   color: var(--red);
   flex-shrink: 0;
}

.float-icon-dark {
   background: var(--black-soft);
   color: #fff;
}

.float-lead {
   top: 6%;
   left: -4%;
   animation-delay: 0.8s;
}

.float-measure {
   bottom: -5%;
   right: -3%;
}

@keyframes floaty {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-9px); }
}

/* ==========================================================================
   Stat strip (red band under the hero)
   ========================================================================== */

.stat-strip {
   background:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px),
      linear-gradient(120deg, var(--red-dark) 0%, var(--red) 55%, #00B4D8 100%);
   padding: 0;
}

.stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.stat {
   padding: 34px 24px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.stat:last-child {
   border-right: none;
}

.stat-value {
   font-family: var(--font-head);
   font-size: 32px;
   font-weight: 800;
   color: #fff;
   letter-spacing: -0.02em;
}

.stat-value::after {
   content: "";
   display: block;
   width: 28px;
   height: 3px;
   background: var(--color-secondary);
   border-radius: 2px;
   margin: 8px auto 10px;
}

.stat-label {
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how-it-works {
   background:
      radial-gradient(rgba(11, 11, 13, 0.06) 1.2px, transparent 1.2px);
   background-size: 26px 26px;
}

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

.step-card {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-top: 4px solid var(--red);
   border-radius: var(--radius);
   padding: 30px 28px;
   box-shadow: var(--shadow-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

.step-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 54px;
   height: 54px;
   border-radius: 15px;
   background: var(--black-soft);
   color: #fff;
   margin-bottom: 18px;
}

.step-card h3 {
   font-size: 19px;
   margin-bottom: 10px;
}

.step-card p {
   font-size: 15px;
   color: var(--text-soft);
}

/* ==========================================================================
   Widget flow showcase (black)
   ========================================================================== */

.flow-section {
   background-color: var(--color-secondary);
}

.flow-section h2 {
   color: #fff;
}

.flow-section .section-head p {
   color: rgba(255, 255, 255, 0.7);
}

.flow-grid {
   display: grid;
   grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
   gap: 56px;
   align-items: center;
   max-width: 1060px;
   margin: 0 auto;
}

.flow-steps {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   counter-reset: flow;
}

.flow-item {
   counter-increment: flow;
}

.flow-btn {
   display: block;
   width: 100%;
   text-align: left;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 14px;
   padding: 15px 18px 15px 48px;
   position: relative;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease;
}

.flow-btn::before {
   content: counter(flow);
   position: absolute;
   left: 16px;
   top: 17px;
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.35);
   transition: color 0.2s ease;
}

.flow-item.is-active .flow-btn {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.14);
}

.flow-item.is-active .flow-btn::before {
   color: var(--red);
}

.flow-btn:hover {
   background: rgba(255, 255, 255, 0.04);
}

.flow-btn strong {
   display: block;
   font-family: var(--font-head);
   font-size: 16.5px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.6);
   transition: color 0.2s ease;
}

.flow-item.is-active .flow-btn strong {
   color: #fff;
}

.flow-btn span {
   display: none;
   margin-top: 5px;
   font-size: 14px;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.62);
}

.flow-item.is-active .flow-btn span {
   display: block;
}

.flow-screen {
   position: relative;
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
   height: clamp(430px, 44vw, 560px);
   overflow: hidden;
}

.flow-screen img {
   position: absolute;
   inset: 20px;
   width: calc(100% - 40px);
   height: calc(100% - 40px);
   object-fit: contain;
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.35s ease, transform 0.35s ease;
}

.flow-screen img.is-active,
.flow-screen .flow-mock.is-active {
   opacity: 1;
   transform: translateY(0);
}

.flow-mock {
   position: absolute;
   inset: 20px;
   width: calc(100% - 40px);
   height: calc(100% - 40px);
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.35s ease, transform 0.35s ease;
   background: #f4f8fb;
   border-radius: 14px;
   padding: 22px 24px;
   display: flex;
   flex-direction: column;
   pointer-events: none;
}

.flow-mock-kicker {
   font-family: var(--font-head);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 8px;
}

.flow-mock h4 {
   font-size: 20px;
   margin-bottom: 10px;
}

.flow-mock p {
   font-size: 14px;
   color: var(--text-soft);
   margin-bottom: 16px;
}

.flow-mock-bar {
   height: 44px;
   border: 1.5px solid var(--border);
   border-radius: 10px;
   background: #fff;
   display: flex;
   align-items: center;
   padding: 0 14px;
   color: var(--text-soft);
   font-size: 14px;
   margin-bottom: 14px;
}

.flow-mock-map {
   flex: 1;
   min-height: 140px;
   border-radius: 12px;
   background:
      linear-gradient(180deg, rgba(0, 119, 182, 0.08), transparent 40%),
      repeating-linear-gradient(0deg, rgba(8, 23, 39, 0.04) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(8, 23, 39, 0.04) 0 1px, transparent 1px 28px),
      #e8f4fa;
   position: relative;
   overflow: hidden;
}

.flow-mock-map::after {
   content: "";
   position: absolute;
   left: 22%;
   top: 28%;
   width: 56%;
   height: 42%;
   border: 2px solid var(--red);
   border-radius: 8px;
   background: rgba(0, 119, 182, 0.12);
}

.flow-mock-chips {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 8px;
}

.flow-mock-chip {
   border: 1.5px solid var(--border);
   background: #fff;
   border-radius: 12px;
   padding: 12px 16px;
   font-family: var(--font-head);
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
}

.flow-mock-chip.is-on {
   border-color: var(--red);
   background: var(--red-soft);
   color: var(--red-dark);
}

.flow-mock-price {
   margin-top: auto;
   border: 1.5px solid rgba(0, 119, 182, 0.35);
   background: linear-gradient(180deg, #F0FAFE, #fff);
   border-radius: 14px;
   padding: 16px;
}

.flow-mock-price strong {
   display: block;
   font-family: var(--font-head);
   font-size: 26px;
   font-weight: 800;
   color: var(--red);
}

@media (max-width: 900px) {
   .flow-grid {
      grid-template-columns: 1fr;
      gap: 26px;
   }

   /* Screenshot first, step list below */
   .flow-screen {
      order: -1;
      height: clamp(380px, 92vw, 460px);
   }

   .flow-btn {
      padding: 13px 14px 13px 42px;
   }

   .flow-btn::before {
      left: 14px;
      top: 15px;
   }

   .flow-btn strong {
      font-size: 15px;
   }
}

/* ==========================================================================
   Live demo
   ========================================================================== */

/* Blueprint-style graph paper, echoing the satellite measurement theme */
.live-demo {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

/* Demo-first: tighter header, less dead space, wider frame */
.live-demo.section {
   padding: 64px 0 72px;
}

.live-demo .demo-head {
   margin-bottom: 30px;
}

.live-demo .demo-head p {
   font-size: 16px;
}

.demo-frame {
   max-width: 1040px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--border);
   border-top: 4px solid var(--red);
   border-radius: 22px;
   box-shadow: var(--shadow-md);
   padding: clamp(14px, 2.5vw, 28px);
}

snap-roof-quote,
seal-quoter {
   display: block;
   width: 100%;
}

/* ==========================================================================
   Embed section (black)
   ========================================================================== */

.embed-section {
   background-color: var(--color-secondary);
}

.embed-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

/* Grid items refuse to shrink below their content width by default,
   which lets the wide code block blow out the page on small screens */
.embed-grid > *,
.hero-grid > *,
.cta-panel > * {
   min-width: 0;
}

.embed-copy h2 {
   color: #fff;
}

.embed-copy p {
   color: rgba(255, 255, 255, 0.72);
   font-size: 17px;
   margin-bottom: 26px;
}

.code-card {
   background: #101014;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   max-width: 100%;
}

.code-card-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   background: rgba(255, 255, 255, 0.04);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-dots {
   display: inline-flex;
   gap: 6px;
}

.code-dots i {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.18);
}

.code-dots i:first-child { background: #ff5f57; }
.code-dots i:nth-child(2) { background: #febc2e; }
.code-dots i:nth-child(3) { background: #28c840; }

.code-title {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   font-family: "Consolas", "Menlo", monospace;
}

.code-copy {
   margin-left: auto;
   background: var(--red);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-family: var(--font-head);
   font-size: 12.5px;
   font-weight: 700;
   padding: 7px 16px;
   cursor: pointer;
   transition: background 0.15s ease;
}

.code-copy:hover {
   background: var(--red-dark);
}

.code-card pre {
   margin: 0;
   padding: 22px 20px;
   /* Wrap long lines instead of showing a horizontal scrollbar */
   white-space: pre-wrap;
   overflow-wrap: break-word;
   font-family: "Consolas", "Menlo", monospace;
   font-size: 13.5px;
   line-height: 1.7;
   color: #d4d4dc;
}

.tok-str {
   color: #90E0EF;
}

.code-note {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55);
   margin-top: 14px;
   text-align: center;
}

/* Hosted mini site callout for roofers without a website */
.no-site-card {
   margin-top: 22px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-left: 3px solid var(--red);
   border-radius: 14px;
   padding: 18px 20px;
}

.no-site-icon {
   flex: 0 0 auto;
   color: var(--red);
   margin-top: 2px;
}

.no-site-card strong {
   display: block;
   font-family: var(--font-head);
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px;
}

.no-site-card p {
   margin: 0;
   font-size: 14.5px;
   line-height: 1.55;
   color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Features
   ========================================================================== */

.features {
   background:
      linear-gradient(rgba(11, 11, 13, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(11, 11, 13, 0.04) 1px, transparent 1px),
      var(--bg-soft);
   background-size: 34px 34px, 34px 34px, auto;
}

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

.feature-card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 30px 26px;
   box-shadow: var(--shadow-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover .feature-icon {
   scale: 1.2 !important;
   
}

.feature-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 14px;
   background: var(--red-soft);
   color: var(--red);
   margin-bottom: 18px;
   transition: all 0.3s ease;
}

.feature-card h3 {
   font-size: 18px;
   margin-bottom: 10px;
}

.feature-card p {
   font-size: 14.5px;
   color: var(--text-soft);
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing {
   background:
      radial-gradient(rgba(11, 11, 13, 0.05) 1.2px, transparent 1.2px),
      var(--bg-soft);
   background-size: 24px 24px, auto;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

.pricing-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   align-items: stretch;
}

/* Single-plan layout: one wide horizontal card, price left, features right */
.pricing.section {
   padding: 72px 0;
}

.pricing .section-head {
   margin-bottom: 38px;
}

.pricing-grid.pricing-single {
   grid-template-columns: minmax(0, 900px);
   justify-content: center;
}

.pricing-single .price-card-featured {
   transform: none;
   display: grid;
   grid-template-columns: 250px 1fr;
   grid-template-areas:
      "head list"
      "btn  list";
   column-gap: 38px;
   row-gap: 22px;
   align-items: center;
   padding: 36px 40px;
}

.pricing-single .price-head {
   grid-area: head;
   text-align: left;
   border-bottom: none;
   margin: 0;
   padding: 0;
}

.pricing-single .price-card .tick-list {
   grid-area: list;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px 24px;
   margin: 0;
   border-left: 1px dashed rgba(255, 255, 255, 0.16);
   padding-left: 38px;
}

.pricing-single .price-card .tick-list li {
   margin: 0;
}

.pricing-single .price-card .btn {
   grid-area: btn;
}

@media (max-width: 900px) {
   /* Stack the card back up on smaller screens */
   .pricing-single .price-card-featured {
      display: flex;
      flex-direction: column;
      padding: 34px 30px;
   }

   .pricing-single .price-head {
      text-align: center;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
      padding-bottom: 22px;
      margin-bottom: 22px;
      width: 100%;
   }

   .pricing-single .price-card .tick-list {
      grid-template-columns: 1fr;
      border-left: none;
      padding-left: 0;
      width: 100%;
      margin-bottom: 26px;
   }

   .pricing-single .price-card .btn {
      width: 100%;
   }
}

.price-card {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 34px 30px;
   box-shadow: var(--shadow-sm);
}

.price-card-featured {
   background: var(--color-secondary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: var(--shadow-lg);
   transform: scale(1.03);
}

.price-flag {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--red);
   color: #fff;
   font-family: var(--font-head);
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   padding: 6px 18px;
   border-radius: 999px;
   box-shadow: 0 6px 14px rgba(0, 119, 182, 0.45);
}

.price-head {
   text-align: center;
   padding-bottom: 22px;
   border-bottom: 1px dashed var(--border);
   margin-bottom: 22px;
}

.price-card-featured .price-head {
   border-bottom-color: rgba(255, 255, 255, 0.16);
}

.price-head h3 {
   font-size: 17px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-soft);
   margin-bottom: 8px;
}

.price-amount {
   font-family: var(--font-head);
   font-size: 48px;
   font-weight: 800;
   color: var(--ink);
   letter-spacing: -0.03em;
   line-height: 1;
   margin-bottom: 10px;
}

.price-amount span {
   font-size: 17px;
   font-weight: 600;
   color: var(--text-soft);
   letter-spacing: 0;
}

.price-head p {
   font-size: 14px;
   color: var(--text-soft);
}

.price-card-featured .price-head h3 {
   color: rgba(255, 255, 255, 0.6);
}

.price-card-featured .price-amount {
   color: #fff;
}

.price-card-featured .price-amount span,
.price-card-featured .price-head p {
   color: rgba(255, 255, 255, 0.65);
}

.price-card .tick-list {
   flex: 1;
   margin-bottom: 26px;
}

.price-card .tick-list li {
   font-size: 14.5px;
}

.price-card-featured .tick-list li {
   color: rgba(255, 255, 255, 0.88);
}

.price-card-featured .tick-list li::before {
   background-color: rgba(0, 119, 182, 0.3);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390E0EF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faqs.section {
   padding: 72px 0;
}

.faqs .section-head {
   margin-bottom: 38px;
}

/* Two columns keep six questions from becoming one long strip */
.faq {
   max-width: 1000px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px;
   align-items: start;
}

.faq-item {
   background: #fff;
   border: 2px solid color-mix(in srgb, var(--border), transparent 30%);
   border-radius: 14px;
   overflow: hidden;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.faq-item.active {
   border-color: rgba(0, 119, 182, 0.45);
   box-shadow: var(--shadow-sm);
}

.faq-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   background: none;
   border: none;
   text-align: left;
   font-family: var(--font-head);
   font-size: 16.5px;
   font-weight: 700;
   color: var(--ink);
   padding: 20px 24px;
   cursor: pointer;
}

.faq-icon {
   position: relative;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--red-soft);
   flex-shrink: 0;
   transition: background 0.2s ease;
}

.faq-icon::before,
.faq-icon::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   background: var(--red);
   border-radius: 2px;
   transition: transform 0.25s ease, background 0.2s ease;
}

.faq-icon::before {
   width: 12px;
   height: 2.5px;
   transform: translate(-50%, -50%);
}

.faq-icon::after {
   width: 2.5px;
   height: 12px;
   transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon {
   background: var(--red);
}

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after {
   background: #fff;
}

.faq-item.active .faq-icon::after {
   transform: translate(-50%, -50%) rotate(90deg);
}

.faq-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.faq-content p {
   padding: 0 24px 22px;
   font-size: 15px;
   color: var(--text-soft);
}

/* ==========================================================================
   Final CTA / contact (red panel)
   ========================================================================== */

.final-cta {
   margin-bottom:-75px;
   padding-bottom: 0;
   z-index: 10;
}

.cta-panel {
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center;
   background:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 18px),
      radial-gradient(600px 380px at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
      radial-gradient(520px 360px at 0% 100%, rgba(11, 11, 13, 0.35), transparent 60%),
      linear-gradient(120deg, var(--red-deep) 0%, var(--red-dark) 45%, var(--red) 100%);
   border-radius: 26px;
   padding: clamp(32px, 5vw, 60px);
   box-shadow: var(--shadow-lg);
}

/* WebGPU ember smoke inside the CTA panel; content stacks above it */
.cta-shader {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   opacity: 0;
   transition: opacity 1.4s ease;
}

.cta-shader.is-live {
   opacity: 1;
}

.cta-panel > .cta-copy,
.cta-panel > .cta-form {
   position: relative;
   z-index: 1;
}

.cta-copy h2 {
   color: #fff;
}

.cta-copy p {
   color: rgba(255, 255, 255, 0.85);
   font-size: 17px;
   margin-bottom: 26px;
}

.cta-form {
   background: #fff;
   border-radius: 20px;
   padding: clamp(24px, 3vw, 36px);
   box-shadow: var(--shadow-md);
}

.cta-form h3 {
   font-size: 22px;
   margin-bottom: 18px;
}

/* Gravity Forms styling inside the CTA card (GF theme CSS is disabled in functions.php) */

.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"],
.cta-form input[type="number"],
.cta-form select,
.cta-form textarea {
   width: 100%;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-sm);
   padding: 13px 15px;
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--ink);
   background: var(--bg-soft);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   box-sizing: border-box;
}

.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
   outline: none;
   border-color: var(--red);
   box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.15);
   background: #fff;
}

.cta-form ::placeholder {
   color: var(--text-soft);
   opacity: 1;
}

.cta-form textarea {
   height: 120px;
   min-height: 120px;
   resize: vertical;
   display: block;
}

/* Hide GF chrome we don't want */
.cta-form .gform_heading,
.cta-form .gform-field-label--type-sub,
.cta-form .gfield_required_text {
   display: none;
}

/* Labels (and the legend GF uses for complex fields like Name) */
.cta-form .gfield_label,
.cta-form legend.gfield_label {
   display: block;
   font-family: var(--font-head);
   font-size: 13.5px;
   font-weight: 700;
   color: var(--ink);
   margin: 0 0 6px;
   padding: 0;
}

.cta-form .gfield_required::after {
   content: "*";
   color: var(--red);
   margin-left: 3px;
}

/* Field layout: half-width fields share a row */
.cta-form .gform_fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.cta-form .gform_fields > * {
   grid-column: 1 / -1;
}

.cta-form .gfield--width-half {
   grid-column: span 1;
}

/* Reset GF fieldset/complex containers */
.cta-form fieldset.gfield {
   border: 0;
   margin: 0;
   padding: 0;
   min-width: 0;
}

.cta-form .ginput_complex,
.cta-form .ginput_complex span {
   display: block;
   width: 100%;
}

.cta-form .ginput_container {
   margin: 0;
}

.cta-form .gform_footer {
   margin-top: 18px;
   padding: 0;
}

/* Validation states */
.cta-form .gform_validation_errors {
   background: var(--red-soft);
   border: 1px solid rgba(0, 119, 182, 0.35);
   border-radius: var(--radius-sm);
   padding: 12px 16px;
   margin-bottom: 16px;
}

.cta-form .gform_validation_errors h2 {
   font-size: 14.5px;
   color: var(--red-dark);
   margin: 0;
}

.cta-form .gfield_validation_message,
.cta-form .validation_message {
   font-size: 13px;
   color: var(--red-dark);
   margin-top: 5px;
}

.cta-form .gfield_error input,
.cta-form .gfield_error textarea {
   border-color: var(--red);
}

.cta-form .gform_confirmation_message {
   font-family: var(--font-head);
   font-size: 17px;
   font-weight: 700;
   color: var(--ink);
   background: var(--red-soft);
   border-left: 4px solid var(--red);
   border-radius: var(--radius-sm);
   padding: 18px 20px;
}

/* Hide GF's ajax spinner default look */
.cta-form .gform_ajax_spinner {
   margin-left: 12px;
}

.cta-form input[type="submit"],
.cta-form .gform_button,
.cta-form button[type="submit"] {
   width: 100%;
   background: var(--red);
   color: #fff;
   border: none;
   border-radius: 999px;
   font-family: var(--font-head);
   font-size: 16px;
   font-weight: 700;
   padding: 15px 24px;
   cursor: pointer;
   box-shadow: 0 8px 20px rgba(0, 119, 182, 0.35);
   transition: background 0.15s ease, transform 0.15s ease;
   margin-top: 6px;
}

.cta-form input[type="submit"]:hover,
.cta-form .gform_button:hover,
.cta-form button[type="submit"]:hover {
   background: var(--red-dark);
   transform: translateY(-2px);
}

/* ==========================================================================
   Footer (black)
   ========================================================================== */

/* Faint shingle-chevron pattern */
.site-footer {
   background-color: var(--black);
   color: rgba(255, 255, 255, 0.7);
   padding-top: 150px;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 0.7fr 0.7fr 1fr;
   gap: 44px;
   padding-bottom: 54px;
}

.footer-brand p {
   font-size: 14.5px;
   margin-top: 18px;
   max-width: 320px;
}

.site-footer h4 {
   color: #fff;
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   margin-bottom: 18px;
}

.footer-links li {
   margin-bottom: 11px;
}

.footer-links a {
   font-size: 14.5px;
   color: rgba(255, 255, 255, 0.7);
   transition: color 0.15s ease;
}

.footer-links a:hover {
   color: #90E0EF;
}

.brand-lockup {
   display: inline-flex;
   align-items: center;
   gap: 12px;
}

.brand-lockup .brand-name {
   font-size: 20px;
}

.footer-contact p {
   font-size: 14.5px;
   margin-bottom: 18px;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding: 22px 0;
}

.footer-bottom p {
   margin: 0;
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Thank-you page
   ========================================================================== */

.email-coniguration {
   padding: 180px 0 120px;
   text-align: center;
}

.email-coniguration-inner h2 {
   margin-top: 20px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* 0.001 (not 0): Chrome ignores opacity-0 paints when picking the LCP
   element and never re-checks after the fade-in, so a 0 start makes
   Lighthouse report NO_LCP for the whole page */
.reveal {
   opacity: 0.001;
   transform: translateY(24px);
   transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
   opacity: 1;
   transform: translateY(0);
}

.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }

/* When GSAP is driving (html.gsap-anim), neutralize the CSS reveal so the
   two systems don't fight over opacity/transform */
html.gsap-anim .reveal {
   opacity: 1;
   transform: none;
   transition: none;
}

/* Word spans created by animations.js for the h1 stagger */
.hero-word {
   display: inline-block;
   will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }
   .float-card {
      animation: none;
   }
   .eyebrow-dot::after {
      animation: none;
      opacity: 0;
   }
   html {
      scroll-behavior: auto;
   }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
   .hero-grid {
      gap: 40px;
   }

   .float-lead { left: 0; }
   .float-measure { right: 0; bottom: 4%; }
}

/* Collapse the header before multi-word links wrap */
@media (max-width: 1180px) {
   .menu-toggle {
      display: flex;
   }

   .nav-cta {
      display: none;
   }

   .nav-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 85;
      background: rgba(6, 22, 39, 0.48);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
   }

   .nav-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
   }

   .main-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(360px, 88vw);
      display: flex;
      flex-direction: column;
      background:
         linear-gradient(180deg, #fff 0%, #f4f8fb 100%);
      box-shadow: -18px 0 50px rgba(8, 23, 39, 0.22);
      padding: 0;
      transform: translateX(105%);
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 90;
      overflow: auto;
   }

   .main-nav::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #0077B6, #48CAE4);
   }

   .main-nav.open {
      transform: translateX(0);
   }

   .nav-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 22px 22px 26px;
      background: linear-gradient(135deg, #03045E 0%, #023E8A 58%, #0077B6 100%);
   }

   .nav-drawer-head .site-logo {
      height: 40px;
      border-radius: 10px;
   }

   .nav-drawer-head .brand-name {
      color: #fff;
      font-size: 18px;
   }

   .nav-drawer-head .brand-name em {
      color: #90E0EF;
   }

   .nav-close {
      display: flex;
      position: relative;
      top: auto;
      right: auto;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
   }

   .nav-close:hover {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.4);
   }

   .nav-close span {
      position: absolute;
      width: 16px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
   }

   .nav-close span:first-child {
      transform: rotate(45deg);
   }

   .nav-close span:last-child {
      transform: rotate(-45deg);
   }

   .nav-drawer-kicker {
      display: block;
      margin: 22px 26px 8px;
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--red);
   }

   .main-nav ul {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      margin: 0 16px 12px;
      padding: 0;
   }

   .main-nav a,
   .site-header:not(.scrolled) .main-nav > ul a {
      display: flex;
      align-items: center;
      font-size: 17px;
      font-weight: 700;
      padding: 13px 14px;
      color: var(--ink);
      border-radius: 12px;
   }

   .main-nav ul a::after {
      content: "";
      width: 7px;
      height: 7px;
      margin-left: auto;
      border-right: 2px solid var(--border);
      border-top: 2px solid var(--border);
      transform: rotate(45deg);
      transition: border-color 0.15s ease, transform 0.15s ease;
   }

   .main-nav a:hover,
   .site-header:not(.scrolled) .main-nav > ul a:hover {
      background: var(--red-soft);
      color: var(--red-dark);
   }

   .main-nav ul a:hover::after {
      border-color: var(--red);
      transform: rotate(45deg) translate(2px, -2px);
   }

   .nav-drawer-foot {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
      padding: 22px 22px 28px;
      border-top: 1px solid var(--border);
      background: #fff;
   }

   .nav-cta-mobile,
   .nav-cta-mobile-alt {
      display: inline-flex;
      width: 100%;
   }

   .nav-drawer-foot p {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--text-soft);
      text-align: center;
   }
}

@media (max-width: 900px) {
   .section {
      padding: 72px 0;
   }

   .hero {
      padding: 140px 0 80px;
   }

   /* Content spans the full width once stacked, so darken the
      photo overlay evenly instead of left-to-right */
   .hero-bg::after {
      background:
         radial-gradient(600px 400px at 90% 0%, rgba(0, 180, 216, 0.2), transparent 60%),
         linear-gradient(180deg, rgba(6, 22, 39, 0.72) 0%, rgba(6, 22, 39, 0.5) 55%, rgba(6, 22, 39, 0.7) 100%);
   }

   .hero-grid,
   .embed-grid,
   .cta-panel {
      grid-template-columns: 1fr;
   }

   .section-head {
      margin-bottom: 44px;
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
   }

   .hero-visual {
      margin-top: 20px;
   }

   .steps-grid,
   .feature-grid,
   .pricing-grid {
      grid-template-columns: 1fr 1fr;
   }

   .price-card-featured {
      transform: none;
   }

   .stat-grid {
      grid-template-columns: 1fr 1fr;
   }

   .stat:nth-child(2) {
      border-right: none;
   }

   .stat:nth-child(-n+2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
   }
}

@media (max-width: 600px) {
   h1 {
      font-size: 33px;
   }

   .section {
      padding: 60px 0;
   }

   .container {
      padding: 0 18px;
   }

   .hero {
      padding: 120px 0 64px;
   }

   .hero-sub {
      font-size: 16.5px;
   }

   .steps-grid,
   .feature-grid,
   .pricing-grid {
      grid-template-columns: 1fr;
   }

   .hero-ctas .btn {
      width: 100%;
   }

   .float-card {
      display: none;
   }

   .brand-name {
      font-size: 16px;
   }

   .brand-mark {
      width: 36px;
      height: 36px;
   }

   .brand-mark svg {
      width: 24px;
      height: 24px;
   }

   /* Keep the stat band 2x2 on phones so it stays compact */
   .stat {
      padding: 20px 14px;
   }

   .stat-value {
      font-size: 24px;
   }

   .stat-label {
      font-size: 12.5px;
   }

   .mock-widget {
      padding: 16px;
   }

   .mock-map {
      height: 140px;
   }

   .mock-estimate-price {
      font-size: 23px;
   }

   .demo-frame {
      border-radius: 16px;
   }

   .code-card pre {
      font-size: 12px;
      padding: 16px 14px;
   }

   .price-amount {
      font-size: 40px;
   }

   .faq-header {
      font-size: 15px;
      padding: 16px 18px;
   }

   .faq-content p {
      padding: 0 18px 18px;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-bottom: 40px;
   }

   .footer-bottom p {
      text-align: center;
   }

   .cta-form .gfield--width-half {
      grid-column: 1 / -1;
   }

   /* 16px+ prevents iOS Safari from zooming in on focus */
   .cta-form input[type="text"],
   .cta-form input[type="email"],
   .cta-form input[type="tel"],
   .cta-form input[type="number"],
   .cta-form select,
   .cta-form textarea {
      font-size: 16px;
   }
}

/* Lock page scroll while the mobile menu is open */
body.nav-open {
   overflow: hidden;
}