:root {
  --navy-950: #030b14;
  --navy-900: #061321;
  --navy-850: #081a2a;
  --navy-800: #0b2235;
  --navy-700: #12324b;
  --cyan: #36d5df;
  --cyan-2: #1ba9c5;
  --blue: #2689ff;
  --amber: #d7934b;
  --ivory: #f4efe7;
  --paper: #fbf8f3;
  --muted: #9bb0bf;
  --line: rgba(184, 225, 236, .17);
  --line-strong: rgba(184, 225, 236, .32);
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --radius: 22px;
  --max: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-950);
  color: #f8fbfd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 5%, rgba(37, 168, 199, .13), transparent 28%),
    radial-gradient(circle at 12% 45%, rgba(36, 105, 185, .08), transparent 32%),
    linear-gradient(180deg, transparent 0 80%, rgba(0,0,0,.22));
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }
.section-tight { padding: 76px 0; }
.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 800;
}
.display {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.028em;
  line-height: 1.03;
  font-weight: 500;
}
.title-xl { font-size: clamp(3rem, 5.8vw, 6rem); margin: 0; }
.title-lg { font-size: clamp(2.25rem, 4.2vw, 4.35rem); margin: 0; }
.title-md { font-size: clamp(2rem, 3.3vw, 3.35rem); margin: 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #c4d0d8; max-width: 680px; }
.muted { color: var(--muted); }
.kicker-line { width: 72px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); margin: 18px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: 0 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--cyan-2), var(--blue)); color: white; box-shadow: 0 12px 32px rgba(25, 139, 220, .25); }
.btn-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.045); }
.btn-quiet { color: var(--cyan); padding-inline: 0; }
.btn-amber { background: var(--amber); color: #111820; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.prepared-access { display:inline-block; margin-top:14px; color:#9fb4c0; font-size:.82rem; text-decoration:underline; text-decoration-color:rgba(54,213,223,.45); text-underline-offset:4px; }
.prepared-access:hover { color:white; }
.prepared-access.centered { margin-top:16px; }
.mobile-panel .access-link { margin-top:8px; color:#94aab6; font-size:.83rem; }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 78px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(3,11,20,.95), rgba(3,11,20,.76));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-copy { line-height: .92; }
.brand-copy strong { display: block; font-size: 1.12rem; letter-spacing: .08em; }
.brand-copy span { display: block; margin-top: 5px; color: var(--cyan); font-size: .68rem; letter-spacing: .29em; }
.nav { display: flex; align-items: center; gap: 25px; color: #d9e5ea; font-size: .88rem; }
.nav a { opacity: .82; }
.nav a:hover, .nav a[aria-current="page"] { color: white; opacity: 1; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.mobile-toggle { display: none; width: 46px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.045); color: white; }
.mobile-panel { display: none; }

/* Hero */
.hero {
  min-height: 100svh;
  padding-top: 120px;
  padding-bottom: 70px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 35%, rgba(39, 154, 192, .18), transparent 30%),
    radial-gradient(circle at 58% 72%, rgba(216, 141, 68, .08), transparent 24%),
    linear-gradient(180deg, #030a12, #071624 72%, #030c15);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.58));
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .77fr 1.35fr; gap: 46px; align-items: center; }
.hero-copy { padding-top: 18px; }
.hero-copy .title-xl { max-width: 610px; font-size:clamp(3.15rem,4.5vw,4.8rem); line-height:1.01; letter-spacing:-.03em; }
.hero-copy .accent { color: var(--cyan); }
.hero-copy .lead { max-width: 560px; }
.hero-price { display: inline-flex; align-items: baseline; gap: 9px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hero-price strong { font-size: 2.4rem; line-height: 1; }
.hero-price span { color: var(--cyan); font-weight: 800; }
.showroom-stage { position: relative; min-width: 0; }
.showroom-stage::before {
  content: "";
  position: absolute;
  width: 78%; height: 100px;
  left: 11%; bottom: -42px;
  background: radial-gradient(ellipse, rgba(57, 201, 219, .22), transparent 68%);
  filter: blur(16px);
}
.compare-shell {
  --compare: 36%;
  position: relative;
  width:100%;
  aspect-ratio:16 / 10;
  height:auto;
  max-height:560px;
  min-height:430px;
  border: 1px solid rgba(196, 231, 239, .28);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 38px 100px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.03);
  background: #0b1520;
  isolation: isolate;
}
.compare-shell::before { content:""; position:absolute; inset:0; z-index:8; pointer-events:none; box-shadow: inset 0 0 60px rgba(0,0,0,.34); }
.site-screen { position: absolute; inset: 0; overflow: hidden; background: white; color: #111; }
.site-before { clip-path: inset(0 0 0 var(--compare)); z-index: 3; }
.site-after { z-index: 1; }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--compare); width: 2px; background: white; z-index: 6; box-shadow: 0 0 24px rgba(255,255,255,.45); }
.compare-handle { position:absolute; z-index:7; left:var(--compare); top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border:0; border-radius:50%; color:#061321; font-size:1.15rem; font-weight:900; background:white; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.compare-label { position:absolute; z-index:7; top:18px; padding:8px 12px; border-radius:999px; background:rgba(2,10,17,.78); color:white; border:1px solid rgba(255,255,255,.18); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.compare-label.after { left:18px; }
.compare-label.before { right:18px; }
.drag-cue { position:absolute; z-index:7; left:50%; bottom:14px; transform:translateX(-50%); color:white; background:rgba(2,10,17,.72); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 12px; font-size:.72rem; letter-spacing:.06em; }

/* Embedded demo websites */
.demo-site { width:100%; height:100%; background:#fff; display:flex; flex-direction:column; overflow:hidden; }
.demo-topbar { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:12px; }
.demo-logo { display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.06em; }
.demo-logo-badge { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-weight:900; }
.new-top { background:#f8fafc; color:#0b2235; border-bottom:1px solid #dae1e5; }
.new-top .demo-logo-badge { background:#0a2942; color:#34d0de; }
.demo-nav { display:flex; gap:16px; align-items:center; font-weight:800; font-size:10px; }
.demo-nav button { border:0; background:#187aca; color:#fff; padding:8px 12px; border-radius:5px; }
.demo-hero-new { height:48%; position:relative; display:grid; grid-template-columns:55% 45%; background:#e9f0f2; }
.demo-hero-copy { background:linear-gradient(135deg, #0b2943, #0c4361); padding:42px 34px; color:white; display:flex; flex-direction:column; justify-content:center; }
.demo-hero-copy h3 { margin:0; font-size:clamp(23px,3.2vw,50px); line-height:.98; letter-spacing:-.04em; }
.demo-hero-copy p { margin:14px 0 20px; color:#c6d9e2; font-size:clamp(10px,1vw,15px); max-width:340px; }
.demo-hero-copy .mini-actions { display:flex; gap:8px; }
.demo-hero-copy .mini-actions span { font-size:10px; font-weight:900; padding:9px 12px; border-radius:5px; background:#2ac2d1; color:#08202f; }
.demo-hero-copy .mini-actions span:last-child { background:transparent; color:white; border:1px solid rgba(255,255,255,.32); }
.demo-photo { background-size:cover; background-position:center; position:relative; }
.demo-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,41,67,.35), transparent 40%); }
.demo-trust { height:56px; display:grid; grid-template-columns:repeat(4,1fr); background:#071d31; color:white; font-size:9px; font-weight:800; }
.demo-trust span { display:grid; place-items:center; border-right:1px solid rgba(255,255,255,.12); padding:0 6px; text-align:center; }
.demo-services { flex:1; padding:20px 22px 16px; background:#f7fafb; }
.demo-services h4 { margin:0 0 12px; font-size:13px; color:#0c2940; text-transform:uppercase; letter-spacing:.08em; }
.demo-service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.demo-service { background:white; border:1px solid #dbe3e7; padding:12px 10px; border-radius:7px; min-height:76px; }
.demo-service strong { color:#0a2d48; font-size:10px; display:block; }
.demo-service small { color:#5b6870; font-size:8px; line-height:1.25; display:block; margin-top:6px; }
.demo-proof { display:grid; grid-template-columns:1.4fr 1fr; gap:9px; margin-top:10px; }
.demo-proof > div { background:#eef3f4; border-radius:7px; padding:10px; color:#0c2940; font-size:8px; }
.demo-proof strong { display:block; font-size:10px; }

.old-top { background:linear-gradient(#f3f3f3,#d8d8d8); border-bottom:4px solid #0a4e88; color:#18232c; height:56px; }
.old-top .demo-logo-badge { border-radius:0; background:#f1e3c4; color:#183e5f; border:1px solid #8b8579; }
.old-top .demo-nav { gap:3px; }
.old-top .demo-nav span { padding:6px 8px; background:#0e4d81; color:white; border-right:1px solid #fff; }
.old-banner { background:#eee5d3; color:#1a2c3a; padding:8px 16px; font-family:Arial, sans-serif; font-size:10px; border-bottom:1px solid #a99f8e; }
.old-body { flex:1; display:grid; grid-template-columns:32% 68%; background:#e9e2d3; font-family:Arial, sans-serif; }
.old-sidebar { padding:16px 12px; border-right:2px solid #b0a58d; background:#ddd3bd; }
.old-sidebar h4 { margin:0 0 8px; font-size:14px; color:#1a4a73; }
.old-sidebar ul { margin:0; padding-left:18px; font-size:10px; line-height:1.85; }
.old-main { padding:14px; }
.old-main h3 { margin:0 0 8px; font-size:21px; color:#174c77; font-family:Georgia, serif; }
.old-main p { font-size:10px; color:#333; }
.old-photo { height:36%; background-size:cover; background-position:center; border:5px ridge #d8d0bf; filter:saturate(.72) contrast(.88); }
.old-boxes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.old-box { background:#f3eee4; border:1px solid #948b79; padding:10px; font-size:9px; color:#333; }
.old-coupon { float:right; width:38%; border:3px dashed #a33; padding:8px; text-align:center; color:#a33; background:#fff9e7; font-weight:900; margin:0 0 8px 10px; }

/* Trust band */
.trust-band { position:relative; z-index:5; border-block:1px solid var(--line); background:rgba(8,28,44,.7); }
.trust-grid { min-height:88px; display:grid; grid-template-columns:repeat(5,1fr); }
.trust-item { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; border-right:1px solid var(--line); text-align:center; font-weight:800; font-size:.9rem; }
.trust-item:last-child { border-right:0; }
.trust-dot { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }

/* Showcases */
.showcase-head { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:46px; }
.showcase-head p { max-width:520px; margin:0; }
.feature-stage { display:grid; grid-template-columns:.76fr 1.4fr; gap:38px; align-items:center; }
.feature-copy { padding:16px 0; }
.check-list { display:grid; gap:10px; margin:25px 0; padding:0; list-style:none; }
.check-list li { display:flex; align-items:flex-start; gap:10px; color:#dbe6eb; }
.check-list li::before { content:"✓"; width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center; background:rgba(44,202,216,.12); color:var(--cyan); font-weight:900; }
.browser-large { border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; background:#f4f8f9; box-shadow:var(--shadow); transform:perspective(1200px) rotateY(-2deg); }
.browser-chrome { height:38px; background:#102335; display:flex; align-items:center; gap:7px; padding:0 14px; }
.browser-chrome i { width:9px; height:9px; border-radius:50%; background:#486071; }
.full-site-demo { background:#fff; color:#0c1f2e; }
.full-site-hero { min-height:340px; display:grid; grid-template-columns:1fr 1fr; background:#0b2e4c; color:white; }
.full-site-hero .copy { padding:52px 42px; display:flex; flex-direction:column; justify-content:center; }
.full-site-hero h3 { margin:0; font-size:clamp(2rem,3.7vw,4rem); line-height:.95; letter-spacing:-.045em; }
.full-site-hero p { color:#c8d7df; max-width:430px; }
.full-site-hero .photo { background-size:cover; background-position:center; }
.full-site-nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #d8e0e3; background:white; }
.full-site-nav .mini-logo { font-weight:900; color:#0b3150; letter-spacing:.07em; }
.full-site-nav .mini-links { display:flex; gap:18px; font-size:10px; font-weight:800; }
.full-site-nav .mini-cta { background:#147dbf; color:white; padding:9px 12px; border-radius:5px; }
.full-site-strip { display:grid; grid-template-columns:repeat(4,1fr); background:#09243a; color:white; }
.full-site-strip div { padding:16px 12px; text-align:center; font-size:10px; border-right:1px solid rgba(255,255,255,.12); }
.full-site-content { padding:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; background:#f6f7f6; }
.full-site-content article { background:white; padding:16px; border:1px solid #d9e0e3; border-radius:7px; min-height:118px; }
.full-site-content article strong { display:block; color:#0b2d48; }
.full-site-content article small { color:#65737b; display:block; margin-top:8px; }
.full-site-proof { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding:0 28px 28px; background:#f6f7f6; }
.full-site-proof > div { background:#e9f1f3; padding:16px; border-radius:7px; font-size:11px; color:#1a3547; }
.phone-mock { position:absolute; right:-18px; bottom:-28px; width:170px; border:8px solid #07121c; background:white; border-radius:28px; overflow:hidden; box-shadow:0 24px 65px rgba(0,0,0,.52); }
.phone-notch { height:18px; background:#07121c; width:42%; margin:auto; border-radius:0 0 12px 12px; }
.phone-screen { color:#0a2438; }
.phone-screen .p-hero { height:130px; background-size:cover; background-position:center; position:relative; }
.phone-screen .p-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,27,43,.2),rgba(5,27,43,.8)); }
.phone-screen .p-copy { padding:14px; position:absolute; inset:auto 0 0; color:white; z-index:2; }
.phone-screen .p-copy strong { display:block; line-height:1; font-size:18px; }
.phone-screen .p-service { padding:11px 13px; border-bottom:1px solid #d8e0e3; font-size:10px; }
.device-wrap { position:relative; padding-right:52px; padding-bottom:30px; }

/* Portfolio */
.portfolio { background:linear-gradient(180deg,#061321,#030b14); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card { position:relative; min-height:600px; border-radius:22px; overflow:hidden; border:1px solid var(--line-strong); background:#0b1c2b; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.project-photo { height:42%; background-size:cover; background-position:center; position:relative; }
.project-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,#091827); }
.project-meta { padding:0 24px 22px; margin-top:-18px; position:relative; z-index:2; }
.project-meta h3 { margin:0; font-size:2.1rem; line-height:1; letter-spacing:-.04em; }
.project-meta p { color:#a9bbc7; }
.mini-web { margin:16px 18px 0; border-radius:13px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:white; color:#142331; box-shadow:0 14px 35px rgba(0,0,0,.3); }
.mini-web-head { padding:9px 12px; display:flex; justify-content:space-between; align-items:center; font-size:8px; font-weight:900; background:#fff; }
.mini-web-hero { min-height:135px; display:flex; align-items:end; padding:18px; color:white; background-size:cover; background-position:center; position:relative; }
.mini-web-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,17,29,.88),rgba(2,17,29,.18)); }
.mini-web-hero div { position:relative; z-index:1; max-width:70%; }
.mini-web-hero strong { display:block; font-size:20px; line-height:1; }
.mini-web-hero small { display:block; margin-top:7px; color:#dbe8ed; }
.mini-web-services { display:grid; grid-template-columns:repeat(4,1fr); padding:10px; gap:6px; background:#f7f8f8; }
.mini-web-services span { min-height:52px; display:grid; place-items:center; text-align:center; background:white; border:1px solid #d9e1e4; font-size:8px; padding:4px; }
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.project-tags span { padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid var(--line); color:#c4d2d9; font-size:.7rem; }

/* Distinct portfolio website directions */
.mini-web-hvac { background:#f8fafb; }
.mini-hvac-hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:132px; background:#0c2d49; color:white; }
.mini-hvac-copy { padding:17px; display:flex; flex-direction:column; justify-content:center; }
.mini-hvac-copy small { color:#73dbe2; font-size:7px; letter-spacing:.12em; font-weight:900; }
.mini-hvac-copy strong { display:block; font-size:20px; line-height:1.02; margin:6px 0; }
.mini-hvac-copy span { color:#d6e3e8; font-size:8px; }
.mini-hvac-photo { background-size:cover; background-position:center; }
.mini-hvac-trust { display:grid; grid-template-columns:repeat(3,1fr); background:#0a2237; color:white; font-size:7px; }
.mini-hvac-trust span { padding:8px 6px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.mini-hvac-services { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:8px; }
.mini-hvac-services span { padding:8px 4px; text-align:center; border:1px solid #d8e1e5; background:white; font-size:7px; }

.mini-web-roof { background:#f4efe5; border-radius:5px; }
.mini-roof-head { padding:10px 12px; display:flex; justify-content:space-between; background:#171c21; color:#f2e8d7; font-size:8px; font-weight:900; }
.mini-roof-head span:last-child { color:#e2b561; }
.mini-roof-hero { min-height:145px; padding:18px; display:flex; align-items:end; background-size:cover; background-position:center; color:white; position:relative; }
.mini-roof-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,22,23,.92),rgba(20,22,23,.15)); }
.mini-roof-hero div { position:relative; z-index:1; max-width:72%; }
.mini-roof-hero small { color:#e4b764; font-size:7px; letter-spacing:.1em; font-weight:900; }
.mini-roof-hero strong { display:block; font-family:Georgia,serif; font-size:22px; line-height:1; margin:5px 0; }
.mini-roof-hero span { font-size:8px; color:#f0ece5; }
.mini-roof-proof { display:grid; grid-template-columns:.7fr 1fr 1fr; background:#d3a34f; color:#1a2024; font-size:7px; }
.mini-roof-proof > * { padding:8px; text-align:center; border-right:1px solid rgba(20,20,20,.15); }
.mini-roof-services { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:9px; }
.mini-roof-services span { padding:9px 5px; text-align:center; background:#fffaf1; border:1px solid #dacbb4; font-size:7px; }

.mini-web-plumbing { background:#f5f8fa; }
.mini-plumb-alert { padding:6px 10px; background:#dd4d3d; color:white; text-align:center; font-size:7px; font-weight:900; letter-spacing:.08em; }
.mini-plumb-head { padding:9px 11px; display:flex; justify-content:space-between; background:#0b2941; color:white; font-size:8px; font-weight:900; }
.mini-plumb-head span:last-child { color:#55dbe1; }
.mini-plumb-body { display:grid; grid-template-columns:1.1fr .9fr; min-height:145px; }
.mini-plumb-copy { padding:15px; display:flex; flex-direction:column; justify-content:center; background:#0d3654; color:white; }
.mini-plumb-copy strong { font-size:20px; line-height:1.02; }
.mini-plumb-copy > span { margin-top:7px; color:#c9dce5; font-size:8px; }
.mini-plumb-photo { background-size:cover; background-position:center; }
.mini-plumb-services { display:grid; gap:3px; margin-top:9px; }
.mini-plumb-services span { padding:4px 6px; background:rgba(255,255,255,.08); font-size:7px; }
.mini-plumb-review { display:grid; grid-template-columns:.45fr 1.55fr; gap:7px; align-items:center; padding:9px 11px; background:white; color:#183044; font-size:7px; }
.mini-plumb-review strong { color:#d58d2d; }

/* Process */
.process-shell { display:grid; grid-template-columns:.65fr 1.35fr; gap:44px; align-items:start; }
.process-list { display:grid; gap:8px; }
.process-step { width:100%; border:1px solid transparent; background:transparent; color:#91a6b4; text-align:left; padding:18px 18px; border-radius:14px; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; }
.process-step strong { color:white; display:block; font-size:1.06rem; }
.process-step small { display:block; margin-top:4px; }
.process-step span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); color:var(--cyan); font-weight:900; }
.process-step.active { background:rgba(255,255,255,.055); border-color:var(--line); color:#c7d3da; }
.process-display { min-height:560px; position:sticky; top:110px; border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; background:linear-gradient(145deg,#0a1c2b,#06111c); box-shadow:var(--shadow); }
.process-top { height:48px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 18px; color:#9fb2bd; font-size:.76rem; }
.process-visual { padding:30px; min-height:510px; display:grid; place-items:center; position:relative; }
.audit-screen { width:min(100%,760px); border-radius:14px; overflow:hidden; background:#f0eadf; color:#1f2b32; border:1px solid #858077; position:relative; }
.audit-screen .audit-nav { height:42px; background:#164c75; color:white; display:flex; align-items:center; padding:0 14px; justify-content:space-between; font-size:9px; }
.audit-screen .audit-main { display:grid; grid-template-columns:30% 70%; min-height:360px; }
.audit-screen .audit-side { background:#d9ceb9; padding:18px; font-size:10px; }
.audit-screen .audit-content { padding:20px; background:#eee8dd; }
.audit-marker { position:absolute; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#e3503c; color:white; font-weight:900; box-shadow:0 0 0 6px rgba(227,80,60,.2); }
.audit-marker.m1 { left:26%; top:20%; }.audit-marker.m2 { right:14%; top:38%; }.audit-marker.m3 { left:52%; bottom:20%; }
.process-new-screen { width:min(100%,760px); border-radius:14px; overflow:hidden; border:1px solid #cbd6db; background:white; color:#102639; box-shadow:0 25px 60px rgba(0,0,0,.3); }
.process-new-hero { min-height:250px; background-size:cover; background-position:center; position:relative; display:flex; align-items:end; padding:28px; color:white; }
.process-new-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,27,46,.9),rgba(4,27,46,.1)); }
.process-new-hero div { position:relative; z-index:1; }
.process-new-hero strong { font-size:34px; display:block; line-height:1; max-width:360px; }
.process-new-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px; }
.process-new-grid span { background:#f3f6f7; border:1px solid #dbe2e5; min-height:84px; padding:12px; font-size:10px; }
.review-scene { display:grid; grid-template-columns:1fr .62fr; gap:18px; width:100%; align-items:center; }
.review-panel { background:#f7fafb; color:#183044; border-radius:14px; min-height:420px; padding:24px; }
.review-comments { display:grid; gap:10px; }
.review-comments div { padding:13px; border:1px solid #d8e1e5; background:white; border-radius:10px; font-size:11px; }
.review-comments strong { display:block; margin-bottom:4px; }
.launch-scene { text-align:center; }
.launch-ring { width:190px; height:190px; border-radius:50%; display:grid; place-items:center; margin:0 auto 24px; background:radial-gradient(circle,rgba(42,210,220,.25),rgba(42,210,220,.04) 50%,transparent 70%); border:1px solid rgba(42,210,220,.38); box-shadow:0 0 80px rgba(42,210,220,.16); }
.launch-ring span { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; background:var(--cyan); color:#062131; font-size:2.6rem; font-weight:900; }

/* Pricing */
.pricing-band { background:linear-gradient(180deg,#071624,#081d2d); border-block:1px solid var(--line); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.price-card { position:relative; min-height:460px; border:1px solid var(--line); border-radius:20px; padding:28px; background:rgba(255,255,255,.035); overflow:hidden; }
.price-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 35%); }
.price-card.featured { border-color:rgba(52,207,220,.65); background:linear-gradient(180deg,rgba(31,138,177,.18),rgba(255,255,255,.035)); box-shadow:0 20px 70px rgba(19,137,179,.16); }
.price-card .badge { display:inline-flex; padding:6px 9px; border-radius:999px; background:var(--cyan); color:#052130; font-size:.67rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.price-card h3 { margin:20px 0 6px; font-size:1.35rem; }
.price { font-size:3.2rem; line-height:1; letter-spacing:-.05em; font-weight:900; }
.price small { font-size:.88rem; color:#a9bdc8; letter-spacing:0; }
.price-card ul { margin:24px 0; padding:0; list-style:none; display:grid; gap:10px; color:#c7d4db; font-size:.9rem; }
.price-card li { padding-left:22px; position:relative; }
.price-card li::before { content:"✓"; color:var(--cyan); position:absolute; left:0; font-weight:900; }
.compare-table-wrap { margin-top:34px; overflow:auto; border:1px solid var(--line); border-radius:18px; }
.compare-table { width:100%; border-collapse:collapse; min-width:820px; background:rgba(255,255,255,.025); }
.compare-table th,.compare-table td { padding:15px 16px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:left; font-size:.88rem; }
.compare-table th { color:white; background:rgba(255,255,255,.04); }
.compare-table td { color:#b9c9d1; }
.compare-table td:not(:first-child),.compare-table th:not(:first-child) { text-align:center; }
.compare-table tr:last-child td { border-bottom:0; }

/* Services */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.service-card { border-top:1px solid var(--line-strong); padding:24px 4px 12px; }
.service-card .service-number { color:var(--cyan); font-size:.72rem; letter-spacing:.15em; font-weight:900; }
.service-card h3 { margin:10px 0 8px; font-size:1.25rem; }
.service-card p { color:#9fb2bd; margin:0; }

/* Hosting */
.hosting-section { background:linear-gradient(180deg,#061321,#081a2a); color:#f8fbfd; border-block:1px solid var(--line); }
.hosting-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:50px; align-items:center; }
.hosting-section .lead,.hosting-section .muted { color:#c4d0d8; }
.hosting-vault { min-height:470px; border-radius:24px; background:linear-gradient(145deg,#0a1c2c,#07121d); color:white; border:1px solid rgba(32,69,94,.35); padding:26px; position:relative; overflow:hidden; box-shadow:0 28px 70px rgba(33,31,27,.24); }
.hosting-vault::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-90px; top:-110px; background:radial-gradient(circle,rgba(44,207,219,.28),transparent 68%); }
.domain-card { position:relative; z-index:2; background:#f7f3eb; color:#172634; border-radius:15px; padding:22px; margin-top:22px; box-shadow:0 16px 42px rgba(0,0,0,.3); }
.domain-card .domain { font-size:1.22rem; font-weight:900; }
.domain-card .owner { color:#4c5b66; margin-top:5px; }
.cloud-pipeline { margin-top:22px; display:grid; grid-template-columns:1fr 54px 1fr 54px 1fr; align-items:center; gap:7px; position:relative; z-index:2; }
.cloud-node { min-height:112px; border:1px solid rgba(255,255,255,.16); border-radius:13px; display:grid; place-items:center; text-align:center; padding:12px; background:rgba(255,255,255,.045); }
.cloud-node strong { display:block; color:white; }
.cloud-node small { color:#9fb0bb; }
.cloud-arrow { color:var(--cyan); font-size:1.6rem; text-align:center; }
.hosting-features { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; position:relative; z-index:2; }
.hosting-features div { padding:12px; background:rgba(255,255,255,.045); border-radius:10px; font-size:.8rem; color:#c4d0d7; }

/* Dashboard */
.dashboard-section { background:linear-gradient(180deg,#07131f,#030b14); }
.dashboard-shell { margin-top:38px; border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; background:#f5f7f8; color:#172a3a; box-shadow:var(--shadow); }
.dashboard-top { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:#0b2134; color:white; }
.dashboard-body { display:grid; grid-template-columns:190px 1fr; min-height:560px; }
.dashboard-nav { background:#102b43; color:#c8d8e0; padding:18px 12px; }
.dashboard-nav strong { display:block; color:white; margin:0 8px 16px; }
.dashboard-nav a { display:block; padding:10px 12px; border-radius:8px; font-size:.82rem; margin-bottom:3px; }
.dashboard-nav a.active { background:#17649a; color:white; }
.dashboard-main { padding:22px; background:#eef2f4; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card { background:white; border:1px solid #d8e0e4; border-radius:10px; padding:15px; }
.stat-card small { color:#667681; }.stat-card strong { display:block; font-size:1.7rem; margin-top:4px; }
.dashboard-grid { display:grid; grid-template-columns:1.45fr .75fr; gap:14px; margin-top:14px; }
.panel { background:white; border:1px solid #d8e0e4; border-radius:11px; padding:16px; }
.pipeline { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pipeline-col { background:#f0f4f5; border-radius:8px; padding:10px; min-height:250px; }
.pipeline-col strong { font-size:.76rem; }
.lead-card { background:white; border:1px solid #d8e0e4; border-radius:6px; padding:8px; margin-top:8px; font-size:.68rem; }
.calendar-list { display:grid; gap:8px; margin-top:12px; }
.calendar-list div { border-left:4px solid #1c92c8; background:#edf5f8; padding:9px; font-size:.72rem; }
.integration-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px; }
.integration-strip div { background:#0b2941; color:white; min-height:82px; border-radius:9px; display:grid; place-items:center; text-align:center; padding:8px; font-size:.72rem; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:52px; align-items:start; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%; border:0; background:transparent; color:white; padding:20px 0; display:flex; align-items:center; justify-content:space-between; text-align:left; font-weight:800; }
.faq-answer { max-height:0; overflow:hidden; color:#9fb2bd; transition:max-height .28s ease; }
.faq-answer p { margin:0 0 20px; }
.faq-item.open .faq-answer { max-height:240px; }
.faq-item.open .faq-question span { transform:rotate(45deg); }
.faq-question span { color:var(--cyan); font-size:1.4rem; transition:transform .2s ease; }

/* CTA and footer */
.final-cta { min-height:480px; display:grid; place-items:center; text-align:center; background:
  radial-gradient(circle at center,rgba(28,160,194,.2),transparent 36%),
  linear-gradient(180deg,#06111c,#02070c); border-top:1px solid var(--line); position:relative; overflow:hidden; }
.final-cta::before { content:""; position:absolute; width:70%; height:180px; bottom:-80px; background:radial-gradient(ellipse,rgba(39,202,217,.24),transparent 68%); filter:blur(20px); }
.final-cta .container { position:relative; z-index:2; }
.site-footer { padding:58px 0 28px; background:#02070c; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px; }
.footer-brand img { width:180px; margin-bottom:18px; }
.footer-brand p { color:#8095a2; max-width:310px; }
.footer-col strong { display:block; margin-bottom:14px; }
.footer-col a { display:block; color:#8fa2ad; margin:8px 0; font-size:.88rem; }
.footer-bottom { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; color:#6f838f; font-size:.76rem; }


.showcase-head h2 { max-width:820px; }
.faq-grid .title-lg { font-size:clamp(2.2rem,3.75vw,3.9rem); line-height:1.05; letter-spacing:-.024em; }
.final-cta .title-lg { line-height:1.04; letter-spacing:-.026em; }

/* Internal pages */
.page-hero { padding:150px 0 82px; background:
  radial-gradient(circle at 75% 20%,rgba(45,183,207,.14),transparent 30%),
  linear-gradient(180deg,#030a12,#071624); border-bottom:1px solid var(--line); }
.page-hero-grid { display:grid; grid-template-columns:1fr .8fr; gap:44px; align-items:end; }
.page-hero-note { border-left:1px solid var(--line-strong); padding-left:28px; color:#9fb2bd; }
.paper-section { background:var(--paper); color:#132635; }
.paper-section .muted,.paper-section .lead { color:#5d6d78; }
.paper-section .eyebrow { color:#087fa2; }
.form-shell { display:grid; grid-template-columns:.75fr 1.25fr; gap:44px; align-items:start; }
.form-card { background:white; color:#162a39; border-radius:20px; padding:30px; box-shadow:0 22px 70px rgba(12,25,35,.16); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:.8rem; font-weight:800; }
.field input,.field textarea,.field select { width:100%; border:1px solid #cad5da; border-radius:9px; padding:12px 13px; background:#f9fbfb; color:#132635; }
.field textarea { min-height:130px; resize:vertical; }
.form-note { color:#687984; font-size:.8rem; margin-top:12px; }
.success-toast { display:none; margin-top:14px; padding:12px; background:#dff6e9; color:#145f36; border-radius:9px; }
.success-toast.show { display:block; }
.form-honeypot { position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.turnstile-wrap { min-height:65px; margin:2px 0 10px; overflow:auto; }
.privacy-note { color:#687984; font-size:.78rem; line-height:1.55; margin:0 0 13px; }
.privacy-note a { color:#087fa2; text-decoration:underline; text-underline-offset:2px; }
.form-status { margin-top:14px; padding:12px 14px; border-radius:9px; font-size:.84rem; line-height:1.5; }
.form-status:empty { display:none; }
.form-status.is-error { background:#fde8e7; color:#8b231d; border:1px solid #efb8b4; }
.form-status.is-success { background:#dff6e9; color:#145f36; border:1px solid #a7dfbd; }
.form-card .btn:disabled { cursor:wait; opacity:.72; transform:none; }
.access-card { width:min(100%,580px); margin:auto; background:linear-gradient(145deg,#0c2234,#07131f); border:1px solid var(--line-strong); border-radius:22px; padding:34px; box-shadow:var(--shadow); }
.access-card .field input { background:rgba(255,255,255,.06); border-color:var(--line-strong); color:white; }
.info-rail { display:grid; gap:12px; margin-top:24px; }
.info-rail div { padding:14px; border:1px solid var(--line); border-radius:11px; color:#aebfc8; }

@media (max-width: 1050px) {
  .nav { display:none; }
  .header-actions .btn-secondary { display:none; }
  .mobile-toggle { display:block; }
  .mobile-panel { position:fixed; top:78px; left:0; right:0; background:#061321; border-bottom:1px solid var(--line); padding:18px 20px 24px; z-index:999; }
  .mobile-panel.open { display:grid; gap:4px; }
  .mobile-panel a { padding:12px; border-bottom:1px solid rgba(255,255,255,.06); }
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  .hero { padding-top:130px; }
  .hero-copy { max-width:780px; }
  .compare-shell { aspect-ratio:16 / 10; height:auto; min-height:500px; max-height:none; }
  .feature-stage,.hosting-grid,.process-shell,.faq-grid,.form-shell { grid-template-columns:1fr; }
  .process-display { position:relative; top:auto; }
  .portfolio-grid { grid-template-columns:1fr; }
  .project-card { min-height:560px; }
  .pricing-grid { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero-grid { grid-template-columns:1fr; }
  .page-hero-note { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; }
}
@media (max-width: 760px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .section { padding:78px 0; }
  .site-header { height:70px; }
  .mobile-panel { top:70px; }
  .brand { min-width:auto; }
  .brand-copy strong { font-size:.96rem; }
  .brand-copy span { font-size:.58rem; letter-spacing:.2em; }
  .brand img { width:34px; height:34px; }
  .header-actions .btn-primary { display:none; }
  .hero { min-height:auto; padding-top:112px; padding-bottom:52px; }
  .hero-grid { gap:32px; }
  .title-xl { font-size:clamp(2.9rem,12vw,4.4rem); }
  .hero-copy .title-xl { font-size:clamp(3rem,12.5vw,4.55rem); }
  .hero-copy .lead { font-size:1rem; }
  .button-row { display:grid; }
  .button-row .btn { width:100%; }
  .compare-shell { min-height:480px; height:78vh; max-height:590px; border-radius:18px; }
  .demo-topbar { padding:0 10px; height:38px; }
  .demo-nav span { display:none; }.demo-nav button { display:block; }
  .demo-hero-new { grid-template-columns:1fr; height:52%; }
  .demo-photo { display:none; }
  .demo-hero-copy { padding:30px 22px; }
  .demo-trust { grid-template-columns:1fr 1fr; height:82px; }
  .demo-services { padding:14px; }
  .demo-service-grid { grid-template-columns:1fr 1fr; }
  .demo-proof { display:none; }
  .old-body { grid-template-columns:1fr; }
  .old-sidebar { display:none; }
  .old-photo { height:38%; }
  .compare-label { top:10px; font-size:.58rem; }
  .drag-cue { bottom:9px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item { min-height:68px; border-bottom:1px solid var(--line); }
  .trust-item:nth-child(2n) { border-right:0; }
  .trust-item:last-child { grid-column:1 / -1; }
  .showcase-head { display:block; }.showcase-head p { margin-top:18px; }
  .feature-stage { gap:26px; }
  .device-wrap { padding-right:0; }
  .browser-large { transform:none; }
  .full-site-nav .mini-links { display:none; }
  .full-site-hero { grid-template-columns:1fr; }
  .full-site-hero .photo { min-height:220px; order:-1; }
  .full-site-strip { grid-template-columns:1fr 1fr; }
  .full-site-content { grid-template-columns:1fr 1fr; }
  .full-site-proof { grid-template-columns:1fr; }
  .phone-mock { position:relative; right:auto; bottom:auto; width:190px; margin:-30px 18px 0 auto; }
  .project-card { min-height:540px; }
  .process-list { grid-template-columns:1fr 1fr; }
  .process-step { grid-template-columns:35px 1fr; padding:12px; }
  .process-step span { width:32px; height:32px; }
  .process-step small { display:none; }
  .process-display { min-height:490px; }
  .process-visual { padding:16px; min-height:440px; }
  .review-scene { grid-template-columns:1fr; }
  .review-panel:last-child { display:none; }
  .price-card { min-height:auto; }
  .service-grid { grid-template-columns:1fr; }
  .cloud-pipeline { grid-template-columns:1fr; }
  .cloud-arrow { transform:rotate(90deg); }
  .hosting-features { grid-template-columns:1fr; }
  .dashboard-body { grid-template-columns:1fr; }
  .dashboard-nav { display:none; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .pipeline { grid-template-columns:1fr 1fr; }
  .integration-strip { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-bottom { display:grid; gap:8px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}
@media (max-width: 460px) {
  .trust-grid { grid-template-columns:1fr; }
  .trust-item { border-right:0; }
  .trust-item:last-child { grid-column:auto; }
  .process-list { grid-template-columns:1fr; }
  .stats-row,.pipeline,.integration-strip,.footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .full-site-content { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Locked-site consistency and Reputation Management page */
.brand { min-width:224px; gap:12px; }
.brand img { width:44px; height:44px; }
.brand-copy strong { font-size:1.2rem; }
.brand-copy span { font-size:.72rem; }
.nav { gap:20px; }
.internal-dark-section { background:linear-gradient(180deg,var(--navy-850),var(--navy-900)); color:#f8fbfd; border-block:1px solid var(--line); }
.internal-dark-section .lead,.internal-dark-section .muted { color:#b5c5ce; }
.internal-dark-section .service-card { background:linear-gradient(145deg,#0c2234,#07131f); color:#f8fbfd; }
.internal-dark-section .form-card { background:#0b2235; color:#f8fbfd; border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.internal-dark-section .field input,.internal-dark-section .field textarea,.internal-dark-section .field select { background:#071724; color:#f8fbfd; border-color:var(--line-strong); }
.internal-dark-section .info-rail div { background:rgba(255,255,255,.025); }
.service-link { display:block; color:inherit; }
.service-link .card-link { display:block; margin-top:18px; color:var(--cyan); font-size:.78rem; font-weight:800; }
.service-link:hover { transform:translateY(-3px); border-color:rgba(54,213,223,.5); }

.reputation-hero { padding-bottom:100px; }
.reputation-hero-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.reputation-hero-grid .title-xl { font-size:clamp(3rem,5vw,5.4rem); max-width:720px; }
.reputation-hero-panel { padding:24px; border:1px solid var(--line-strong); border-radius:22px; background:linear-gradient(145deg,#0d263a,#07131f); box-shadow:var(--shadow); }
.rep-metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.rep-metric-grid div { padding:16px; min-height:92px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); }
.rep-metric-grid small,.rep-kpis small,.report-kpis small { display:block; color:#8fa4b0; font-size:.72rem; }
.rep-metric-grid strong { display:block; margin-top:7px; font-size:1.2rem; }
.rep-activity { display:grid; grid-template-columns:105px 1fr; align-items:center; gap:13px; padding:12px 0; border-top:1px solid var(--line); }
.rep-activity strong { font-size:.87rem; }
.rep-status { display:inline-flex; justify-content:center; padding:6px 9px; border-radius:999px; font-size:.67rem; font-weight:900; }
.rep-status.positive { color:#7ce4a4; background:rgba(56,190,110,.12); border:1px solid rgba(76,213,133,.35); }
.rep-status.issue { color:#ffad7e; background:rgba(239,107,67,.1); border:1px solid rgba(239,107,67,.35); }
.rep-status.neutral { color:#b5c7d1; background:rgba(181,199,209,.08); border:1px solid rgba(181,199,209,.2); }
.rep-problem { border-bottom:1px solid var(--line); background:rgba(8,26,42,.58); }
.rep-problem-grid { display:grid; grid-template-columns:.45fr 1.05fr .8fr; gap:35px; align-items:start; }
.rep-problem-grid .lead { margin:0; font-size:1rem; }
.rep-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rep-option-card { padding:30px; border:1px solid var(--line-strong); border-radius:22px; background:linear-gradient(145deg,#0c2234,#07131f); box-shadow:0 22px 65px rgba(0,0,0,.24); }
.rep-option-card.managed { border-color:rgba(54,213,223,.48); }
.rep-option-top { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.rep-option-top h3 { margin:0; font-size:1.45rem; line-height:1.1; }
.rep-price { margin-top:11px; font-size:2.1rem; font-weight:900; color:#fff; }
.rep-price small { font-size:.75rem; color:#9eb1bc; }
.rep-price-text { max-width:330px; font-size:1.15rem; color:var(--cyan); }
.rep-customer-journey { background:linear-gradient(180deg,#061321,#081a2a); border-block:1px solid var(--line); }
.journey-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1.7fr; gap:18px; align-items:stretch; }
.journey-step,.journey-split > div { padding:24px; border:1px solid var(--line-strong); border-radius:18px; background:rgba(255,255,255,.035); }
.journey-step span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--cyan-2),var(--blue)); font-weight:900; margin-bottom:18px; }
.journey-step strong,.journey-split strong { display:block; font-size:1rem; margin-bottom:7px; }
.journey-step small,.journey-split small { color:#9fb2bd; }
.journey-arrow { display:grid; place-items:center; color:var(--cyan); font-size:1.6rem; }
.journey-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.journey-split b { display:inline-block; margin-bottom:12px; padding:5px 8px; border-radius:999px; font-size:.68rem; background:#123a2a; color:#7ce4a4; }
.journey-split div:last-child b { background:#46231d; color:#ffad7e; }
.workflow-art { padding:18px; border:1px solid var(--line-strong); border-radius:24px; background:#061321; box-shadow:var(--shadow); }
.workflow-art img { width:100%; border-radius:17px; }
.rep-dashboard { display:grid; grid-template-columns:190px 1fr; border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; background:#071522; box-shadow:var(--shadow); }
.rep-dashboard aside { padding:22px 14px; background:#06111c; border-right:1px solid var(--line); display:grid; align-content:start; gap:6px; }
.rep-dashboard aside strong { padding:10px; margin-bottom:9px; }
.rep-dashboard aside a { padding:10px; border-radius:8px; color:#91a7b4; font-size:.8rem; }
.rep-dashboard aside a.active { color:white; background:#103454; }
.rep-dashboard-main { padding:20px; }
.rep-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rep-kpis > div { padding:16px; border:1px solid var(--line); border-radius:12px; background:#0d2233; }
.rep-kpis strong { display:block; font-size:1.8rem; }
.rep-kpis span { color:#8098a5; font-size:.65rem; }
.rep-dashboard-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; margin-top:12px; }
.rep-chart,.rep-recent { padding:18px; border:1px solid var(--line); border-radius:12px; background:#0d2233; }
.bar-chart { height:190px; display:flex; align-items:end; gap:15px; padding:25px 10px 0; border-bottom:1px solid #294359; }
.bar-chart i { flex:1; display:block; min-width:22px; background:linear-gradient(180deg,var(--cyan),var(--blue)); border-radius:5px 5px 0 0; opacity:.88; }
.chart-labels { display:grid; grid-template-columns:repeat(6,1fr); text-align:center; color:#78909d; font-size:.65rem; padding-top:8px; }
.rep-recent > div { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.rep-recent > div:last-child { border-bottom:0; }
.rep-recent b { font-size:.75rem; }
.rep-recent small { color:#78909d; font-size:.62rem; }
.dot { width:9px; height:9px; border-radius:50%; }.dot.green{background:#51d184}.dot.orange{background:#ef8a4a}.dot.blue{background:#2689ff}.dot.gray{background:#8da1ad}
.automation-state { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:12px 15px; border:1px solid var(--line); border-radius:10px; background:#0b1e2d; font-size:.77rem; }
.status-light { display:inline-block; width:8px; height:8px; border-radius:50%; background:#54d488; margin-right:7px; box-shadow:0 0 12px #54d488; }
.automation-state button { border:1px solid var(--line); color:#c8d5dc; background:transparent; border-radius:7px; padding:7px 12px; }
.monthly-report { background:#f7fafb; color:#142737; border-radius:22px; padding:28px; box-shadow:var(--shadow); }
.report-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #d6e0e4; padding-bottom:18px; }
.report-head strong { display:block; font-size:1.3rem; }.report-head span { color:#647783; }.report-brand { color:#0b5f9f; font-weight:900; letter-spacing:.12em; }
.report-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:20px 0; }
.report-kpis > div { padding:15px; border:1px solid #d6e0e4; border-radius:10px; background:white; }
.report-kpis strong { display:block; font-size:1.55rem; }
.report-body { display:grid; grid-template-columns:1.4fr .6fr; gap:18px; }
.report-body > div { padding:20px; border:1px solid #d6e0e4; border-radius:12px; background:white; }
.report-line { height:150px; display:flex; align-items:end; gap:18px; padding:20px 10px 0; border-bottom:1px solid #d3dde1; }
.report-line span { flex:1; height:var(--h,50%); background:linear-gradient(180deg,#36d5df,#2689ff); border-radius:5px 5px 0 0; }
.report-line span:nth-child(1){height:22%}.report-line span:nth-child(2){height:34%}.report-line span:nth-child(3){height:48%}.report-line span:nth-child(4){height:61%}.report-line span:nth-child(5){height:74%}
.report-body ul { color:#526773; line-height:1.9; }
.rep-comparison th:nth-child(2),.rep-comparison td:nth-child(2),.rep-comparison th:nth-child(3),.rep-comparison td:nth-child(3) { text-align:center; }

@media (max-width:1050px) {
  .reputation-hero-grid,.rep-problem-grid,.rep-option-grid { grid-template-columns:1fr; }
  .journey-flow { grid-template-columns:1fr; }.journey-arrow { transform:rotate(90deg); }
  .rep-dashboard-grid { grid-template-columns:1fr; }
  .report-kpis { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .brand img { width:38px; height:38px; }.brand-copy strong{font-size:1rem}.brand-copy span{font-size:.6rem}
  .reputation-hero { padding-top:112px; }
  .rep-metric-grid,.journey-split,.rep-kpis,.report-kpis,.report-body { grid-template-columns:1fr; }
  .rep-dashboard { grid-template-columns:1fr; }.rep-dashboard aside { display:none; }
  .rep-dashboard-main { padding:12px; }.bar-chart { height:145px; gap:8px; }
  .workflow-art { padding:7px; overflow-x:auto; }.workflow-art img { min-width:900px; }
}
.feedback-preview-grid { display:grid; grid-template-columns:.75fr 1.1fr 1fr; gap:20px; margin-top:34px; }
.feedback-phone,.feedback-form-preview,.message-preview { border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; background:#091a29; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.feedback-phone { max-width:330px; justify-self:center; width:100%; border:8px solid #030b14; border-radius:30px; }
.feedback-phone-head { padding:16px; display:flex; justify-content:space-between; align-items:center; background:#0b2b46; font-size:.68rem; font-weight:900; }
.feedback-phone-head small { color:#8fa7b3; }
.feedback-phone-body { padding:30px 22px; text-align:center; background:#f8fafb; color:#132635; min-height:360px; }
.feedback-check { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,var(--cyan-2),var(--blue)); color:white; font-weight:900; }
.feedback-phone-body h3 { font-size:1.4rem; margin:0 0 8px; }.feedback-phone-body p { color:#60717b; }
.rating-stars { display:flex; justify-content:center; gap:10px; font-size:2rem; color:#e5a13b; margin:25px 0; }
.feedback-phone button,.feedback-form-preview button { border:0; border-radius:9px; background:linear-gradient(135deg,var(--cyan-2),var(--blue)); color:white; padding:12px 18px; font-weight:900; }
.feedback-form-preview,.message-preview { padding:26px; }
.feedback-form-preview h3 { font-size:1.7rem; margin:7px 0; }.feedback-form-preview p { color:#9eb1bc; }
.feedback-form-preview label { display:block; margin:22px 0 8px; font-size:.78rem; font-weight:800; }
.fake-textarea,.fake-fields span { border:1px solid var(--line); border-radius:9px; background:#061421; color:#9eb1bc; padding:12px; font-size:.76rem; }
.fake-textarea { min-height:92px; }.fake-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 18px; }
.feedback-form-preview a { display:block; margin-top:15px; color:var(--cyan); font-size:.72rem; text-decoration:underline; text-underline-offset:3px; }
.message-preview { display:grid; align-content:start; gap:16px; }
.message-top { display:flex; justify-content:space-between; align-items:center; }.message-top span { color:#8fa7b3; font-size:.7rem; }
.qr-block { display:grid; grid-template-columns:76px 1fr; gap:15px; align-items:center; border:1px solid var(--line); border-radius:13px; padding:14px; background:#061421; }
.qr-pattern { width:76px; height:76px; display:grid; place-items:center; background:white; color:#071624; font-size:3.5rem; }.qr-block small { display:block; color:#8fa7b3; margin-top:5px; }
.sms-bubble { margin-left:30px; padding:16px; border-radius:16px 16px 4px 16px; background:#153653; color:#dfe9ee; font-size:.78rem; }.sms-bubble b { color:#64dae2; }
.email-mini { border:1px solid var(--line); border-radius:13px; padding:16px; background:#0d2233; }.email-mini p { color:#92a7b3; font-size:.75rem; margin-bottom:0; }
@media(max-width:1050px){.feedback-preview-grid{grid-template-columns:1fr 1fr}.message-preview{grid-column:1/-1}}
@media(max-width:760px){.feedback-preview-grid,.fake-fields{grid-template-columns:1fr}.message-preview{grid-column:auto}}


/* Reputation page targeted revision */
.rep-option-top { grid-template-columns:1fr; }
.rep-option-card p { max-width: 62ch; }
.feedback-panel,.feedback-form-preview,.message-preview { border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; background:#091a29; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.feedback-panel-head { padding:16px 18px; display:flex; justify-content:space-between; align-items:center; background:#0b2b46; font-size:.72rem; font-weight:900; }
.feedback-panel-head small { color:#8fa7b3; }
.feedback-panel-body { padding:28px 24px; text-align:center; background:#f8fafb; color:#132635; min-height:360px; }
.feedback-panel-body h3 { font-size:1.4rem; margin:0 0 8px; }
.feedback-panel-body p { color:#60717b; }
.rating-actions { display:grid; gap:10px; margin-top:18px; }
.rating-actions button { border:0; border-radius:9px; font-weight:900; padding:12px 14px; }
.rating-actions .rate-primary { background:linear-gradient(135deg,var(--cyan-2),var(--blue)); color:white; }
.rating-actions .rate-secondary { background:#223446; color:#f4f7f8; }
.workflow-shell { display:grid; grid-template-columns:240px 1fr 250px; gap:18px; padding:18px; border:1px solid var(--line-strong); border-radius:24px; background:#061321; box-shadow:var(--shadow); }
.workflow-side { padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,#0b2030,#091724); }
.workflow-side p { color:#8fa4b0; font-size:.84rem; margin:14px 0 0; }
.workflow-channel-list { display:grid; gap:12px; margin-top:14px; }
.workflow-channel-list div { padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); }
.workflow-channel-list strong { display:block; font-size:1rem; color:#fff; }
.workflow-channel-list small { color:#95a9b5; display:block; margin-top:4px; }
.workflow-main { display:grid; gap:18px; }
.workflow-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:center; }
.w-step { min-height:102px; padding:16px; border:1px solid var(--line-strong); border-radius:16px; background:#0d2233; }
.w-step b { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--cyan-2),var(--blue)); color:#fff; margin-bottom:10px; }
.w-step strong { display:block; color:#fff; font-size:.96rem; }
.w-step small { display:block; color:#90a6b2; margin-top:4px; line-height:1.35; }
.w-arrow { display:none; }
.workflow-branches { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.w-branch { padding-top:6px; }
.branch-label { display:inline-block; margin-bottom:12px; padding:7px 12px; border-radius:999px; font-size:.72rem; font-weight:900; background:#123a2a; color:#7ce4a4; border:1px solid rgba(76,213,133,.35); }
.branch-label.neutral { background:rgba(181,199,209,.08); color:#b5c7d1; border-color:rgba(181,199,209,.2); }
.w-branch.issue .branch-label { background:#46231d; color:#ffad7e; border-color:rgba(239,107,67,.35); }
.w-card { padding:16px; margin-bottom:12px; border-radius:16px; border:1px solid var(--line-strong); background:#0d2233; min-height:104px; }
.w-card strong { display:block; color:#fff; font-size:1rem; margin-bottom:6px; }
.w-card small { color:#93a7b3; line-height:1.4; display:block; }
.workflow-report { padding:18px; border-radius:18px; border:1px solid rgba(38,137,255,.45); background:linear-gradient(180deg,#0d2233,#0b1b29); text-align:center; }
.workflow-report strong { display:block; color:#fff; font-size:1.1rem; margin-bottom:4px; }
.workflow-report small { display:block; color:#95aab5; max-width:620px; margin:0 auto; }
.rep-comparison { min-width:980px; table-layout:fixed; }
.rep-comparison th:first-child,.rep-comparison td:first-child { width:46%; text-align:left; }
.rep-comparison th:nth-child(2),.rep-comparison td:nth-child(2),.rep-comparison th:nth-child(3),.rep-comparison td:nth-child(3) { width:27%; }
.rep-comparison th,.rep-comparison td { padding:18px 22px; line-height:1.45; }
@media (max-width:1180px) {
  .workflow-shell { grid-template-columns:1fr; }
  .workflow-side-right { order:3; }
}
@media (max-width:980px) {
  .workflow-rail,.workflow-branches { grid-template-columns:1fr 1fr; }
  .feedback-preview-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .workflow-rail,.workflow-branches,.feedback-preview-grid { grid-template-columns:1fr; }
  .feedback-panel-body { min-height: auto; }
  .rep-comparison { min-width:900px; }
}


/* Logo consistency, footer details, and privacy page */
.brand { min-width: 228px; }
.brand .brand-logo-horizontal { width: 194px; height: auto; display:block; object-fit:contain; }
.footer-brand img { width: 224px; height:auto; display:block; }
.footer-col span { color:#8095a2; line-height:1.55; font-size:.88rem; }
.legal-hero .title-xl { max-width:780px; }
.legal-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start; }
.legal-nav { position:sticky; top:110px; display:grid; gap:9px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#091a29; }
.legal-nav strong { color:#fff; margin-bottom:6px; }
.legal-nav a { color:#91a7b4; font-size:.86rem; padding:5px 0; }
.legal-nav a:hover { color:var(--cyan); }
.legal-content { max-width:860px; }
.legal-content section { padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--line); scroll-margin-top:120px; }
.legal-content section:last-child { border-bottom:0; }
.legal-content h2 { margin:0 0 13px; color:#fff; font-size:1.55rem; letter-spacing:-.015em; }
.legal-content p { color:#9fb2bd; line-height:1.75; }
.legal-content a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1050px){ .brand { min-width:auto; } .brand .brand-logo-horizontal { width:174px; } .legal-layout { grid-template-columns:1fr; } .legal-nav { position:static; } }
@media(max-width:760px){ .brand .brand-logo-horizontal { width:154px; } .footer-brand img { width:205px; } }