/* Fresco Cleaning — site-specific additions on top of the Francisco Labs system.
   Everything in this file is Fresco-only (bottom action bar, form, service
   badges, gallery lightbox, small utilities). All global look-and-feel lives
   in tokens.css + base.css + nav.css + home.css + inner-pages.css + footer.css
   inherited directly from Francisco Labs. Permanent dark mode. */

/* ==================================================================
   Global hardening — never allow a light background anywhere.
   ================================================================== */
html, body{ background: var(--color-bg) !important; color: var(--color-text); }
input, textarea, select, button{ color-scheme: dark; }
::selection{ background: rgba(47,107,255,0.35); color: #fff; }

/* Kill any lingering FL "light theme" references defensively. */
[data-theme=light]{
  --color-bg:#070708 !important;
  --color-surface:#0A0D12 !important;
  --color-surface-2:#0E131B !important;
  --color-surface-3:#111722 !important;
  --color-text:#F5F7FA !important;
  --color-text-muted:#8E96A3 !important;
  --color-text-faint:#5F6875 !important;
}

/* ==================================================================
   Blue gradient text — used for the second line of the hero headline.
   ================================================================== */
.hero__heading-gradient{
  background: linear-gradient(120deg, #4D8DFF 0%, #2F6BFF 45%, #6D5CFF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ==================================================================
   Trust chips beneath the hero CTAs.
   ================================================================== */
.hero-trust{
  display:flex; flex-wrap:wrap; gap: 10px 18px;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hero-trust__item{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust__dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
}

/* ==================================================================
   Fresco dashboard hero panels — adapted from FL .hw-* classes.
   These override / complement the FL classes for cleaning-service labels.
   ================================================================== */
.hw-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.02);
  color: var(--color-text-muted);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.hw-tag--ready{ color:#7dd3fc; border-color: rgba(125,211,252,0.25); background: rgba(47,107,255,0.08); }
.hw-tag--licensed{ color: var(--color-success); border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.06); }

.hw-coverage-list{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.hw-coverage-item{
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  text-align: center;
}
.hw-coverage-item__label{
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--color-text-muted); text-transform: uppercase;
  font-weight: 600;
}
.hw-coverage-item__value{
  color: var(--color-text); font-weight: 600;
  font-size: 13px; margin-top: 2px;
}

/* Little inside/outside side-by-side sub-panels */
.hw-svc-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.hw-svc-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 12px;
}
.hw-svc-row__label{ color: var(--color-text-muted); }
.hw-svc-row__value{ color: var(--color-primary-bright); font-weight: 600; font-size: 11px; }

/* ==================================================================
   Solutions grid — reuse FL .sol-card but override for cleaning services.
   FL already provides most of it; this file only adjusts the icon color
   and adds our featured-card treatment for the flagship service.
   ================================================================== */
.sol-card__icon{
  color: var(--color-primary-bright);
  background: rgba(47,107,255,0.10);
  border: 1px solid rgba(47,107,255,0.20);
}
.sol-card__label{ color: var(--color-primary-bright); }

/* ==================================================================
   Reviews — dark cards with gold stars and Angi label.
   ================================================================== */
.reviews-section{ padding-block: clamp(4rem, 8vw, 7rem); }
.reviews-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.review-card{
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; gap: var(--space-3);
  transition: border-color .2s, background .2s;
}
.review-card:hover{
  border-color: var(--color-border-strong);
  background: var(--color-surface-3);
}
.review-stars{ color: var(--color-gold); font-size: 15px; letter-spacing: 2px; line-height: 1; }
.review-quote{ color: var(--color-text); font-size: var(--text-base); line-height: 1.55; }
.review-attribution{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.review-attribution__name{ color: var(--color-text-muted); }
.review-source{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--color-primary-bright);
  font-weight: 600; font-size: 12px; letter-spacing: 0.02em;
}

/* ==================================================================
   Service area — dark chips.
   ================================================================== */
.area-section{ padding-block: clamp(3rem, 6vw, 5rem); }
.area-chips{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-top: var(--space-6);
}
.area-chip{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.02);
  color: var(--color-text-muted);
  font-size: 13px; font-weight: 500;
  transition: border-color .2s, color .2s, background .2s;
}
.area-chip:hover{
  border-color: var(--color-primary);
  color: var(--color-text);
  background: rgba(47,107,255,0.06);
}

/* ==================================================================
   FAQ — dark, blue plus icon.
   ================================================================== */
.faq-section{ padding-block: clamp(3rem, 6vw, 6rem); }
.faq-list{ margin-top: var(--space-8); max-width: 780px; margin-inline: auto; }
.faq-item{
  border-top: 1px solid var(--color-divider);
  padding: var(--space-5) 0;
}
.faq-item:last-child{ border-bottom: 1px solid var(--color-divider); }
.faq-item__question{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
  width:100%;
  background:none; border:0; cursor:pointer;
  padding: 0; text-align: left;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
}
.faq-item__plus{
  flex-shrink: 0;
  width: 28px; height: 28px;
  display:inline-grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,0.35);
  color: var(--color-primary-bright);
  background: rgba(47,107,255,0.08);
  transition: transform .25s var(--ease-out);
  font-size: 18px; line-height: 1;
}
.faq-item.is-open .faq-item__plus{ transform: rotate(45deg); }
.faq-item__answer{
  max-height: 0; overflow: hidden;
  transition: max-height .32s var(--ease-out);
  color: var(--color-text-muted);
  font-size: var(--text-base); line-height: 1.65;
}
.faq-item.is-open .faq-item__answer{ max-height: 480px; padding-top: var(--space-4); }

/* ==================================================================
   Estimate form — dark inputs, blue focus, dark selects.
   ================================================================== */
.estimate-form{
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.form-grid{ display:grid; gap: var(--space-4); }
.form-grid--2{ grid-template-columns: 1fr 1fr; }
@media (max-width:640px){ .form-grid--2{ grid-template-columns: 1fr; } }
.form-field{ display:flex; flex-direction:column; gap: 6px; }
.form-field__label{
  color: var(--color-text);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.form-field__hint{ color: var(--color-text-faint); font-size: 12px; }
.form-input, .form-textarea, .form-select{
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .18s, background .18s, box-shadow .18s;
  color-scheme: dark;
}
.form-input::placeholder, .form-textarea::placeholder{ color: var(--color-text-faint); }
.form-input:focus, .form-textarea:focus, .form-select:focus{
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface-strong);
  box-shadow: 0 0 0 3px rgba(47,107,255,0.18);
}
.form-textarea{ min-height: 130px; resize: vertical; }
.form-select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E96A3' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-select option{ background: #0E131B; color: var(--color-text); }
.form-honeypot{ position:absolute !important; left:-9999px !important; opacity:0 !important; }
.form-status{
  margin-top: var(--space-4); font-size: 13px;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.form-status:empty{ display:none; }
.form-status.is-loading{ color: var(--color-text-muted); border-color: var(--color-border); background: rgba(255,255,255,0.02); }
.form-status.is-success{ color: #86efac; border-color: rgba(34,197,94,0.32); background: rgba(34,197,94,0.08); }
.form-status.is-error{ color: #fca5a5; border-color: rgba(239,68,68,0.32); background: rgba(239,68,68,0.08); }

/* ==================================================================
   Mobile bottom action bar (Fresco-specific — not in FL).
   ================================================================== */
.action-bar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-floating);
  display: none;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(7,7,8,0.90);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--color-border);
}
.action-bar__grid{
  display:grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
  max-width: 640px; margin: 0 auto;
}
.action-bar__btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface-2);
  min-height: 46px;
}
.action-bar__btn:hover{ border-color: var(--color-border-strong); }
.action-bar__btn--primary{
  border-color: var(--color-primary);
  background: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(47,107,255,0.35);
}
.action-bar__btn svg{ width:16px; height:16px; }
@media (max-width: 900px){ .action-bar{ display:block; } body{ padding-bottom: 78px; } }

/* ==================================================================
   Gallery grid — dark framed project cards.
   ================================================================== */
.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.gallery-item{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  aspect-ratio: 4 / 3;
  transition: transform .28s var(--ease-out), border-color .28s;
}
.gallery-item:hover{ transform: translateY(-2px); border-color: var(--color-border-strong); }
.gallery-item img{
  width:100%; height:100%; object-fit: cover;
  display:block;
  transition: transform .5s var(--ease-out);
}
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item__overlay{
  position: absolute; inset: auto 0 0 0;
  padding: 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(7,7,8,0.9) 100%);
  color: var(--color-text);
  font-size: 13px; font-weight: 600;
}
.gallery-item__cat{
  display:inline-block;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary-bright);
  margin-bottom: 4px;
}

/* ==================================================================
   Related services (service pages) — dark cards.
   ================================================================== */
.related-services{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.related-card{
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  display:flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
  text-decoration: none;
}
.related-card:hover{
  border-color: var(--color-primary);
  background: var(--color-surface-3);
  transform: translateY(-2px);
}
.related-card__cat{
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary-bright); font-weight: 600;
}
.related-card__title{
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
}
.related-card__desc{ color: var(--color-text-muted); font-size: var(--text-sm); }
.related-card__cta{ color: var(--color-primary-bright); font-size: 13px; font-weight: 600; margin-top: 4px; }

/* ==================================================================
   Service inclusion checklist (service pages).
   ================================================================== */
.checklist{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 20px;
  list-style: none; padding: 0; margin: var(--space-6) 0 0;
}
.checklist li{
  padding-left: 26px; position: relative;
  color: var(--color-text); font-size: var(--text-base); line-height: 1.55;
}
.checklist li::before{
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px;
  background: rgba(47,107,255,0.15);
  border: 1px solid rgba(47,107,255,0.4);
  border-radius: 4px;
}
.checklist li::after{
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--color-primary-bright);
  border-bottom: 2px solid var(--color-primary-bright);
  transform: rotate(-45deg);
}

/* ==================================================================
   Section labels & headings — small tweaks.
   ================================================================== */
.section-label{ color: var(--color-primary-bright); }
.section-label--dash::before{
  content:""; display:inline-block; width:24px; height:1px;
  background: currentColor; margin-right:10px; vertical-align: middle;
}

/* ==================================================================
   Utility.
   ================================================================== */
.text-center{ text-align:center; }
.container{ width:100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.container--narrow{ max-width: var(--content-narrow); }

img{ max-width:100%; height:auto; display:block; }

/* ==================================================================
   Reveal-on-scroll fallback: force visibility for animation classes
   whose JS observers (from FL's ecosystem.js) aren't loaded here.
   ================================================================== */
.eco-reveal,
.timeline-step,
.outcome-card{
  opacity: 1 !important;
  transform: none !important;
}

/* Small phone hero refinements — keep from ever going white */
@media (max-width: 640px){
  .hero{ padding-top: 90px; }
  .hero__heading{ font-size: clamp(2.5rem, 11vw, 3.4rem) !important; line-height: 1.02; }
  .hero__dashboard{ transform: none; }
}

/* ==================================================================
   PREMIUM POLISH PASS — 20260901d
   Real logo integration, hero polish, tighter spacing,
   merged sections, mobile services carousel, cinematic photos.
   ================================================================== */

/* -------- Nav: bigger logo lockup (see css/nav.css for sizes) -------- */
.nav__logo{ display:flex; align-items:center; text-decoration:none; }
.nav__brand-lockup{
  display:block;
  width:auto;
  object-fit:contain;
  border-radius:0;
}
.nav__logo:hover .nav__brand-lockup{ filter:drop-shadow(0 0 12px rgba(96,165,250,0.35)); transition:filter .25s ease; }

/* Footer brand: real logo replaces text mark */
.footer__brand-logo{ display:inline-flex; align-items:center; text-decoration:none; color:transparent; font-size:0; line-height:0; }
.footer__brand-logo img{ opacity:0.92; transition:opacity .2s ease; }
.footer__brand-logo:hover img{ opacity:1; }

/* Drawer logo: mobile logo image only, no text */
.drawer__logo{ display:inline-flex; align-items:center; text-decoration:none; }
.drawer__logo span{ display:none; }

/* -------- Section rhythm (per spec) -------- */
.section{ position:relative; padding-block: var(--section-y); }
.section--tight{ padding-block: var(--section-y-tight); }
.section__header{ margin-bottom: var(--section-header-gap); }

.solutions-section,
.projects-section,
.why-plus-process,
.reviews-plus-area,
.faq-section,
.final-cta,
.ecosystem-section{
  position:relative;
  padding-block: var(--section-y);
}
@media (max-width: 720px){
  .solutions-section, .projects-section, .why-plus-process, .reviews-plus-area,
  .faq-section, .final-cta, .ecosystem-section{
    padding-block: clamp(2rem, 8vw, 2.75rem);
  }
}
/* Thin gradient dividers between sections */
.solutions-section + .why-plus-process::before,
.why-plus-process + .projects-section::before,
.projects-section + .reviews-plus-area::before,
.reviews-plus-area + .faq-section::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.22), transparent);
  pointer-events:none;
}

.section-header{ margin-bottom: var(--section-header-gap); }
@media (max-width: 720px){ .section-header{ margin-bottom: clamp(1rem, 3vw, 1.5rem); } }
.section-header--center{ text-align:center; margin-inline:auto; }

/* -------- HERO POLISH: deeper glow, animated status, grid texture -------- */
.hero__glow{
  filter: blur(60px);
  opacity: 0.85;
}
/* Second, larger, cooler glow layer */
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height: 80%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(47,107,255,0.20), transparent 70%),
              radial-gradient(45% 55% at 80% 20%, rgba(109,92,255,0.14), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
  z-index: 0;
}
/* Fine technical grid overlay behind hero content */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 60% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 50%, #000 40%, transparent 100%);
  pointer-events:none;
  z-index: 0;
}
.hero > *{ position:relative; z-index:1; }

/* Hero-panel refinements: stronger glass depth + subtle border sheen */
.hw-card{
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  background: linear-gradient(180deg, rgba(20,26,38,0.72), rgba(12,15,22,0.68));
  border: 1px solid rgba(96,165,250,0.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(96,165,250,0.06);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.hw-card:hover{
  transform: translateY(-3px);
  border-color: rgba(96,165,250,0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -25px rgba(0,0,0,0.7),
    0 0 40px -10px rgba(96,165,250,0.25);
}
/* Animated status pulse dots — replace static bullets */
@keyframes hw-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(96,165,250,0.55); }
  50%   { box-shadow: 0 0 0 6px rgba(96,165,250,0); }
}
.hw-icon{ position:relative; }
.hw-icon--blue::after{
  content:""; position:absolute; right:-2px; top:-2px;
  width:6px; height:6px; border-radius:50%;
  background:#22d3ee;
  animation: hw-pulse 2.4s ease-out infinite;
}

/* -------- SERVICES: mobile carousel (scroll-snap) -------- */
.solutions-cta{ display:flex; justify-content:center; margin-top: 40px; }
@media (max-width: 720px){
  .solutions-grid.solutions-grid--carousel{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    gap: 14px;
    padding: 4px 20px 24px;
    margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .solutions-grid.solutions-grid--carousel::-webkit-scrollbar{ display:none; }
  .solutions-grid.solutions-grid--carousel > .sol-card{
    flex: 0 0 84%;
    min-width: 84%;
    scroll-snap-align: start;
    margin: 0;
  }
  .solutions-cta{ margin-top: 24px; }
}

/* -------- WHY + PROCESS merged section -------- */
.why-plus-process{ position:relative; overflow:hidden; }
.why-plus-process__glow{
  position:absolute; inset:auto -10% -30% -10%; height:60%;
  background: radial-gradient(50% 60% at 30% 20%, rgba(47,107,255,0.18), transparent 70%),
              radial-gradient(50% 50% at 80% 30%, rgba(109,92,255,0.12), transparent 70%);
  filter: blur(80px);
  pointer-events:none;
}
.why-plus-process__grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 50%, transparent 100%);
  pointer-events:none;
}
.why-plus-process .container{ position:relative; z-index:1; }
.why-pillars-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1080px){ .why-pillars-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; } }
@media (max-width: 640px){  .why-pillars-grid{ grid-template-columns: 1fr; gap:14px; margin-top:28px; } }
.why-pillar{
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, rgba(20,26,38,0.68), rgba(12,15,22,0.65));
  border: 1px solid rgba(96,165,250,0.12);
  border-radius: 16px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  backdrop-filter: blur(14px);
}
.why-pillar:hover{
  transform: translateY(-3px);
  border-color: rgba(96,165,250,0.28);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5), 0 0 30px -10px rgba(96,165,250,0.18);
}
.why-pillar__icon{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(109,92,255,0.14));
  color:#93c5fd;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(96,165,250,0.24);
  margin-bottom: 14px;
}
.why-pillar__icon svg{ width:20px; height:20px; }
.why-pillar__title{
  font-family: var(--font-heading, "Cabinet Grotesk", sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text, #f5f7fa);
  margin-bottom: 6px;
  line-height: 1.25;
}
.why-pillar__desc{
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(220,225,235,0.72);
  margin: 0;
}

/* Embedded process block within Why section */
.why-process-block{
  margin-top: 64px;
  padding: 32px 32px 24px;
  background: linear-gradient(180deg, rgba(14,19,28,0.65), rgba(10,13,20,0.55));
  border: 1px solid rgba(96,165,250,0.10);
  border-radius: 20px;
}
@media (max-width: 720px){
  .why-process-block{ margin-top:40px; padding: 22px 18px 18px; border-radius:16px; }
}
.why-process-block__header{ margin-bottom: 24px; }
.why-process-block__title{
  font-family: var(--font-heading, "Cabinet Grotesk", sans-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 700;
  color: var(--color-text, #f5f7fa);
  margin: 8px 0 0;
  line-height: 1.2;
}
/* Mobile process: switch to vertical stack */
@media (max-width: 720px){
  .why-process-block .ecosystem__timeline-track{
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }
  .why-process-block .timeline-step{
    flex-direction: row !important;
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }
  .why-process-block .timeline-step__connector{ display:none !important; }
}

/* -------- REVIEWS + AREA merged (two-col desktop, stack mobile) -------- */
.reviews-plus-area{ position:relative; }
.reviews-plus-area__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1080px){
  .reviews-plus-area__grid{ grid-template-columns: 1fr; gap: 40px; }
}
.reviews-grid.reviews-grid--compact{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
.reviews-grid.reviews-grid--compact .review-card{
  padding: 20px 22px;
}
.reviews-plus-area__area{
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(20,26,38,0.55), rgba(12,15,22,0.5));
  border: 1px solid rgba(96,165,250,0.10);
  border-radius: 20px;
}
.reviews-plus-area__area .area-chips{ margin-top: 20px; }

/* -------- Compact FAQ (only 3 questions) -------- */
.faq-section--compact .faq-list{ max-width: 780px; margin-inline: auto; margin-top: 24px; }
.faq-more{ display:flex; justify-content:center; margin-top: 28px; }

/* -------- CINEMATIC PHOTO TREATMENT -------- */
.proj-card{
  overflow: hidden;
  border: 1px solid rgba(96,165,250,0.10);
  border-radius: 18px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
  background: rgba(12,15,22,0.55);
}
.proj-card:hover{
  transform: translateY(-4px);
  border-color: rgba(96,165,250,0.32);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), 0 0 40px -10px rgba(96,165,250,0.20);
}
.proj-card__visual{ position:relative; overflow:hidden; }
.proj-card__visual::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(6,8,12,0.55) 100%);
  pointer-events:none;
  z-index: 1;
}
.proj-card__visual img,
.proj-card__visual picture{
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  filter: saturate(0.92) contrast(1.05) brightness(0.95);
}
.proj-card:hover .proj-card__visual img,
.proj-card:hover .proj-card__visual picture img{
  transform: scale(1.04);
  filter: saturate(1.02) contrast(1.08) brightness(1);
}

/* -------- MOBILE tightening: extra bottom padding for action-bar,
   no horizontal overflow, larger tap targets -------- */
@media (max-width: 720px){
  html, body{ overflow-x: hidden; }
  main{ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .action-bar{ padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .btn, .action-bar__btn, .scroll-nav__chip{ min-height: 44px; }
  /* Kill any residual white flash on load */
  html{ background: var(--color-bg, #070708); }
  /* Faq items easier to tap */
  .faq-item__question{ min-height: 56px; }
}

/* -------- Reveal fades: gentle stagger for slide-up/fade-in via IntersectionObserver -------- */
@media (prefers-reduced-motion: no-preference){
  .fade-in{ opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .fade-in.is-visible{ opacity: 1; transform: none; }
  .slide-up{ opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .slide-up.is-visible{ opacity: 1; transform: none; }
}

/* -------- Interior page shortening helpers -------- */
.inner-collapse{ margin-top: 20px; }
.inner-collapse details{
  border: 1px solid rgba(96,165,250,0.10);
  border-radius: 12px;
  padding: 14px 18px;
  background: rgba(14,19,28,0.55);
  margin-bottom: 10px;
}
.inner-collapse details[open]{ border-color: rgba(96,165,250,0.24); }
.inner-collapse summary{
  cursor: pointer; font-weight: 600;
  color: var(--color-text, #f5f7fa);
  list-style: none; display:flex; justify-content:space-between; align-items:center;
  font-size: 1rem;
}
.inner-collapse summary::-webkit-details-marker{ display:none; }
.inner-collapse summary::after{ content: "+"; font-size: 1.4rem; color: rgba(96,165,250,0.7); transition: transform .2s; }
.inner-collapse details[open] summary::after{ transform: rotate(45deg); }
.inner-collapse details > *:not(summary){ margin-top: 12px; font-size: .95rem; color: rgba(220,225,235,0.78); }

/* Guarantee reveal-classes never leave content invisible even without JS */
.eco-reveal, .fade-in, .slide-up, .timeline-step, .outcome-card, .why-pillar{
  opacity: 1;
  transform: none;
}
/* When IntersectionObserver is loaded, it toggles .is-visible; the above ensures no invisible content */


/* ============================================================
   HERO LAYOUT FIX — headline needs room, dashboard tighter
   ============================================================ */
.hero__content{ max-width: 780px; }
.hero__heading{ font-size: clamp(2.75rem, 5.2vw, 5rem); line-height: 1.02; letter-spacing: -.035em; }
.hero__inner{ grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 4vw, 4rem); }
@media (max-width:1180px){
  .hero__inner{ grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3vw, 2.5rem); }
  .hero__heading{ font-size: clamp(2.5rem, 4.6vw, 4rem); }
}
@media (max-width:900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__heading{ font-size: clamp(2.4rem, 8vw, 3.4rem); }
}

/* Mobile hero: keep glow decorative — don't push content down */
@media (max-width:768px){
  .hero__glow, .hero__glow--1, .hero__glow--2{ position: absolute !important; }
  .hero__grid{ position: absolute !important; inset: 0 !important; }
  .hero__vignette{ position: absolute !important; inset: 0 !important; }
}

/* Hero final polish */
.hero__eyebrow{ white-space: nowrap; }
@media (min-width:901px){
  .hero__heading{ font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
}
.hero__proof{ flex-wrap: nowrap; }
@media (max-width:1180px){
  .hero__proof{ flex-wrap: wrap; }
}

/* ==================================================================
   PREMIUM PASS v2 — 20260902a
   Exact hero spec, mobile services carousel, dividers.
   ================================================================== */

/* Hero sizing per spec */
.hero{
  min-height: clamp(620px, 82svh, 740px);
  padding: calc(64px + 2rem) 0 2.75rem;
}
@media (max-width: 768px){
  .hero{
    min-height: auto;
    padding: calc(60px + 1.25rem) 0 1.5rem;
  }
}

/* Blue edge highlight on hero art (dashboard glass already has one; ensure hero__bg-img has it too if used) */
.hero__bg-img{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(96,165,250,0.18),
              0 30px 80px rgba(0,0,0,0.6),
              0 0 60px rgba(37,99,235,0.15);
}

/* Solutions grid: 3×2 bento on desktop; mobile horizontal scroll-snap ~1.1 cards */
@media (min-width: 900px){
  .solutions-grid,
  .solutions-grid--carousel{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
  /* Featured card = spans 2 columns on first row */
  .solutions-grid .sol-card--featured{ grid-column: span 2; }
}
@media (max-width: 899px){
  .solutions-grid,
  .solutions-grid--carousel{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 4px;
  }
  .solutions-grid::-webkit-scrollbar,
  .solutions-grid--carousel::-webkit-scrollbar{ display:none; }
  .solutions-grid .sol-card,
  .solutions-grid--carousel .sol-card{
    flex: 0 0 82vw;
    max-width: 340px;
    scroll-snap-align: start;
  }
  .solutions-grid .sol-card--featured{ flex: 0 0 82vw; }
}

/* Card sizing per spec */
.sol-card{ padding: clamp(20px, 3vw, 24px); }

/* Merged reviews + area layout */
.reviews-plus-area__grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px){
  .reviews-plus-area__grid{ grid-template-columns: 1fr; gap: 2rem; }
}
.reviews-grid--compact{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 20px;
}
@media (min-width: 720px){
  .reviews-grid--compact{ grid-template-columns: 1fr 1fr; }
}

/* Why-plus-process merged section: pillars grid + process timeline block */
.why-plus-process{ background: var(--color-surface); }
.why-plus-process__glow{
  position:absolute; inset:0;
  background: radial-gradient(600px 320px at 15% 10%, rgba(37,99,235,0.10), transparent 70%),
              radial-gradient(500px 300px at 85% 90%, rgba(129,140,248,0.06), transparent 70%);
  pointer-events:none;
}
.why-plus-process__grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 50% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 50% at 50% 40%, #000 30%, transparent 100%);
  pointer-events:none;
}
.why-plus-process .container{ position:relative; z-index:1; }
.why-pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--section-header-gap);
}
@media (max-width: 900px){ .why-pillars-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .why-pillars-grid{ grid-template-columns: 1fr; } }
.why-pillar{
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 22px);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.why-pillar:hover{
  border-color: rgba(96,165,250,0.28);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.why-pillar__icon{
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--color-primary-glow);
  border: 1px solid rgba(96,165,250,0.20);
  color: var(--color-primary-bright);
  display: flex; align-items: center; justify-content: center;
}
.why-pillar__title{
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.01em; color: var(--color-text);
}
.why-pillar__desc{ font-size: .9rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; }

.why-process-block{
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, var(--color-surface-2) 60%);
}
.why-process-block__header{ margin-bottom: 1rem; }
.why-process-block__title{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.02em; color: var(--color-text); margin: .35rem 0 0;
}

/* FAQ compact (homepage — 3 items) */
.faq-section--compact .faq-list{ max-width: 720px; margin-inline: auto; }
.faq-more{ display:flex; justify-content:center; margin-top: 1.5rem; }

/* Kill any legacy light theme rules just in case */
[data-theme="light"],
.section--light,
.surface-light{ background: var(--color-bg) !important; color: var(--color-text) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==================================================================
   RESPONSIVE ALIGNMENT FIX (2026-09-02c)
   - Break hero from 2-col to 1-col at 1024px (was 900px), fixing the
     810–1024 range that left an empty left column and shoved content
     right.
   - Unify container padding across all sections + footer.
   - Center hero content block, keep text left-aligned inside.
   - Move dashboard beneath copy on tablet/mobile, clamp to 680px.
   ================================================================== */

/* Uniform container padding — 40px desktop, 24px tablet, 18px phone. */
.container{
  width:100%;
  max-width: var(--content-wide);
  margin-inline:auto;
  padding-inline: clamp(18px, 4vw, 40px);
}
@media (max-width:1024px){
  .container{ padding-inline: 24px; }
}
@media (max-width:480px){
  .container{ padding-inline: 18px; }
}

/* HERO: collapse to a single centered column at ≤1024px */
@media (max-width:1024px){
  .hero{
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    padding-top: clamp(72px, 9vw, 96px) !important;
    padding-bottom: clamp(28px, 4vw, 48px) !important;
  }
  .hero__inner{
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: clamp(24px, 3vw, 32px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    padding-block: 0 !important;
  }
  .hero__content{
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 720px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    transform: none !important;
    position: static !important;
    text-align: left; /* internally left-aligned copy */
  }
  .hero__dashboard{
    grid-column: auto !important;
    grid-row: auto !important;
    width: min(100%, 680px) !important;
    margin-inline: auto !important;
    transform: none !important;
    position: static !important;
    order: 2;
  }
  .hero__heading{
    font-size: clamp(2.4rem, 6vw, 3.6rem) !important;
    line-height: 1.05 !important;
  }
}

/* Below 768: allow dashboard to hide or shrink further per prior rules */
@media (max-width:768px){
  .hero{
    padding-top: 68px !important;
    padding-bottom: 8px !important;
  }
  .hero__content{ max-width: 100% !important; }
  .hero__dashboard{ display: none !important; }
}

/* SECTIONS: guarantee every homepage band uses the same container edges. */
.hero > .container,
.solutions-section > .container,
.why-section > .container,
.why-plus-process > .container,
.projects-section > .container,
.reviews-plus-area > .container,
.home-cta-section > .container,
.site-footer .container,
.site-footer > .container{
  padding-inline: clamp(18px, 4vw, 40px);
}
@media (max-width:1024px){
  .hero > .container,
  .solutions-section > .container,
  .why-section > .container,
  .why-plus-process > .container,
  .projects-section > .container,
  .reviews-plus-area > .container,
  .home-cta-section > .container,
  .site-footer .container,
  .site-footer > .container{ padding-inline: 24px; }
}
@media (max-width:480px){
  .hero > .container,
  .solutions-section > .container,
  .why-section > .container,
  .why-plus-process > .container,
  .projects-section > .container,
  .reviews-plus-area > .container,
  .home-cta-section > .container,
  .site-footer .container,
  .site-footer > .container{ padding-inline: 18px; }
}

/* Trim excess vertical space at tablet width. */
@media (max-width:1024px){
  .solutions-section,
  .why-section,
  .why-plus-process,
  .projects-section,
  .reviews-plus-area,
  .home-cta-section{
    padding-block: clamp(2.5rem, 5vw, 3.75rem) !important;
  }
}

/* Prevent any lingering horizontal overflow from decorative layers. */
html, body{ overflow-x: hidden; }
.hero__glow, .hero__glow--1, .hero__glow--2, .hero__grid, .hero__vignette{
  position: absolute !important;
  max-width: 100vw;
  pointer-events: none;
}
.hero__grid, .hero__vignette{ inset: 0 !important; }
.hero{ position: relative; overflow: hidden; }