/* ==========================================================================
   VIBE89 — 2026 site-wide design pass
   Dark futuristic base + PANTONE 11-4201 "Cloud Dancer" (#F0EEE9) as a
   luminous accent layered over the existing navy/blue/cyan/purple system.
   Loaded on every real vibe89.com page (not on /demos/, which are meant to
   look like generic industry templates, not vibe89's own brand). Additive
   on top of css/styles.css — everything here targets classes/ids the rest
   of the site already uses, so it never breaks a page that lacks a given
   element; it just does nothing there.
   The homepage (#what-we-do / #whats-included / #testimonials) has a few
   section-specific overrides near the bottom that only ever match on
   index.html — harmless no-ops everywhere else.
   ========================================================================== */

:root{
  --cloud: #F0EEE9;
  --cloud-rgb: 240,238,233;
  --cloud-soft: rgba(var(--cloud-rgb),.06);
  --cloud-mid: rgba(var(--cloud-rgb),.14);
  --cloud-strong: rgba(var(--cloud-rgb),.30);
  --cloud-line: rgba(var(--cloud-rgb),.5);
  --cloud-glow: 0 0 1px var(--cloud), 0 0 60px rgba(var(--cloud-rgb),.16), 0 0 160px rgba(var(--cloud-rgb),.08);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

/* Typography: css/taste-preview.css already swapped headlines to Outfit
   and is marked "approved and live" — not duplicating that here. */

/* ---------------------------------------------------------------------- */
/* Scroll progress + grain                                                */
/* ---------------------------------------------------------------------- */

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:2000;
  background:linear-gradient(90deg, var(--cloud), var(--accent) 55%, var(--accent-purple));
  box-shadow:0 0 16px rgba(var(--cloud-rgb),.55);
  pointer-events:none;
}

/* Grain: css/taste-preview.css already applies a body::after noise
   overlay ("approved and live") — not adding a second one here. */

/* ---------------------------------------------------------------------- */
/* Testimonial / proof thumbnails — real client-site screenshots instead   */
/* of an emoji icon, wherever a matching screenshot asset exists.          */
/* ---------------------------------------------------------------------- */

.testimonial__icon--photo{
  padding:0; background:var(--bg-card); overflow:hidden;
}
.testimonial__icon--photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:inherit; display:block;
}

/* Google review logo with white circular background */
.testimonial__icon--google{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--white);
  padding:0;
}
.testimonial__icon--google svg{
  width:28px; height:28px; flex-shrink:0;
}

/* Larger testimonial quote text */
.testimonial__text{
  font-size:1.25rem !important; line-height:1.6 !important;
}

/* ---------------------------------------------------------------------- */
/* "Real example" client-proof card — a linked screenshot thumbnail used   */
/* on industry/location pages where a matching real client exists.         */
/* ---------------------------------------------------------------------- */

.real-example{
  display:flex; align-items:center; gap:20px; margin-top:28px;
  padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--bg-card); text-decoration:none; color:inherit;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  max-width:560px;
}
.real-example:hover{
  transform:translateY(-3px); border-color:var(--cloud-line); box-shadow:var(--shadow-lg); color:inherit;
}
.real-example__img{
  width:120px; height:75px; flex-shrink:0; border-radius:var(--radius-md); overflow:hidden;
}
.real-example__img img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.real-example__label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.real-example__cta{ display:block; margin-top:4px; font-size:.88rem; color:var(--accent); }

/* ---------------------------------------------------------------------- */
/* Nav — quiet glass, Cloud Dancer hairline instead of flat border        */
/* ---------------------------------------------------------------------- */

.site-header__bar{
  border-bottom-color:transparent;
  box-shadow:inset 0 -1px 0 rgba(var(--cloud-rgb),.08);
}
.site-header.is-scrolled .site-header__bar{
  box-shadow:inset 0 -1px 0 rgba(var(--cloud-rgb),.14), 0 20px 40px -20px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------- */
/* Hero — aurora mesh + kinetic line reveal                                */
/* ---------------------------------------------------------------------- */

.hero__aurora{
  position:absolute; inset:-10% -10% -30% -10%; z-index:1;
  pointer-events:none; mix-blend-mode:screen; opacity:.9;
  background:
    radial-gradient(38% 46% at 18% 20%, rgba(var(--cloud-rgb),.16), transparent 70%),
    radial-gradient(46% 50% at 82% 12%, rgba(6,182,212,.16), transparent 70%),
    radial-gradient(50% 60% at 55% 85%, rgba(124,58,237,.14), transparent 70%);
  animation:aurora-drift 22s ease-in-out infinite alternate;
  will-change:transform, opacity;
}
@keyframes aurora-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-2%,3%,0) scale(1.08); }
}

.hero__line{
  display:inline-block;
  will-change:transform, opacity;
}

.hero__badge--sale{
  border-color:var(--cloud-line);
  background:linear-gradient(90deg, rgba(var(--cloud-rgb),.12), rgba(37,99,235,.1));
  box-shadow:0 0 0 1px rgba(var(--cloud-rgb),.06) inset;
}

.hero__stat{
  position:relative; padding-left:16px;
}
.hero__stat::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.35em; width:2px;
  background:linear-gradient(var(--cloud), transparent);
  opacity:.55;
}

/* ---------------------------------------------------------------------- */
/* Spotlight surfaces — cursor-tracked Cloud Dancer glow                  */
/* JS sets --mx / --my (percent) on hover via pointermove.                */
/* ---------------------------------------------------------------------- */

.card, .work-card, .ind-hub-card, .step, .f89-card, .llms-hook{
  position:relative;
  --mx:50%; --my:50%;
}

.card::after, .work-card::after, .ind-hub-card::after, .step::after{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--cloud-rgb),.10), transparent 60%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.card:hover::after, .work-card:hover::after, .ind-hub-card:hover::after, .step:hover::after{ opacity:1; }
.card > *, .step > *{ position:relative; z-index:1; }

.card:hover, .step:hover{
  border-color:var(--cloud-line);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--cloud-rgb),.08) inset;
}

/* ---------------------------------------------------------------------- */
/* Section rhythm — subtle top hairline of light between sections         */
/* ---------------------------------------------------------------------- */

.section--dark{
  position:relative;
}
.section--dark::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(70%, 720px); height:1px;
  background:linear-gradient(90deg, transparent, var(--cloud-line), transparent);
}

/* ---------------------------------------------------------------------- */
/* Work carousel — Cloud Dancer edge light on the active card              */
/* ---------------------------------------------------------------------- */

.work-card{
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.work-card:hover{
  border-color:var(--cloud-line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--cloud-rgb),.1) inset;
  transform:translateY(-6px);
}

/* ---------------------------------------------------------------------- */
/* CTA section — magnetic button glow                                     */
/* ---------------------------------------------------------------------- */

.cta-section::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(700px circle at 50% 30%, rgba(var(--cloud-rgb),.08), transparent 65%);
}
.cta-section__content{ position:relative; z-index:1; }

.btn--primary{ position:relative; isolation:isolate; }
.btn--primary::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg, rgba(var(--cloud-rgb),.5), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.btn--primary:hover::before{ opacity:1; }

/* ---------------------------------------------------------------------- */
/* Break the grid — the same "3 equal cards" rhythm on every section is    */
/* the single most obvious template tell. These three sections get real   */
/* layouts instead; every other section on the page stays as-is so the    */
/* rhythm still varies section to section.                                */
/* ---------------------------------------------------------------------- */

/* "What We Do" — asymmetric bento instead of a plain 2x2 */
section:has(#what-we-do) .section__header{
  text-align:left; margin-left:0; max-width:560px;
}
section:has(#what-we-do) .grid--2{
  grid-template-columns:1.15fr 1fr 1fr;
  grid-template-rows:auto auto;
}
section:has(#what-we-do) .grid--2 > *:nth-child(1){ grid-column:1; grid-row:1 / 3; }
section:has(#what-we-do) .grid--2 > *:nth-child(2){ grid-column:2; grid-row:1; }
section:has(#what-we-do) .grid--2 > *:nth-child(3){ grid-column:3; grid-row:1; }
section:has(#what-we-do) .grid--2 > *:nth-child(4){ grid-column:2 / 4; grid-row:2; }
section:has(#what-we-do) .grid--2 > *:nth-child(1){ display:flex; flex-direction:column; justify-content:center; }

/* "What Every Project Includes" — left-aligned header, staggered cards   */
section:has(#whats-included) .section__header{
  text-align:left; margin-left:0; max-width:560px;
}
section:has(#whats-included) .grid--3 > *:nth-child(3n+2){ transform:translateY(28px); }
section:has(#whats-included) .grid--3 > *:nth-child(3n+3){ transform:translateY(14px); }

/* "What Makes Us Different" — de-boxed cards: no border/shadow, a hairline
   accent instead, so not every card on the page is the same bordered tile */
section:has(#testimonials) .card{
  background:transparent; border-color:transparent; padding:24px 0 24px 20px;
  border-left:2px solid var(--cloud-line);
  border-radius:0;
}
section:has(#testimonials) .card:hover{
  border-left-color:var(--accent); box-shadow:none; transform:translateX(4px);
  background:transparent;
}
section:has(#testimonials) .card::after{ display:none; }

@media (max-width: 780px){
  section:has(#what-we-do) .grid--2,
  section:has(#what-we-do) .grid--2 > *{
    grid-column:auto !important; grid-row:auto !important;
  }
  section:has(#what-we-do) .grid--2{ grid-template-columns:1fr; }
  section:has(#what-we-do) .grid--2 > *:nth-child(1){ display:block; }
  section:has(#whats-included) .grid--3 > *{ transform:none !important; }
  section:has(#what-we-do) .section__header,
  section:has(#whats-included) .section__header{
    text-align:center; margin-left:auto; margin-right:auto; max-width:700px;
  }
}

.hero--legal{ min-height:320px; padding:112px 0 50px; }

@media (max-width: 640px){
  .hero__aurora{ opacity:.6; }
  .hero--legal{ min-height:260px; padding:88px 0 24px; }
  .legal-section{ padding:8px 0 0; margin-top:0; }
  .legal-prose{ padding:0 16px; }
  .legal-prose h2:first-of-type{ margin-top:0; margin-bottom:12px; }
  .legal-prose h2{ margin:20px 0 10px; }
}

/* ---------------------------------------------------------------------- */
/* Cross-document view transitions — pages crossfade into each other and  */
/* the fixed nav stays put while the content underneath swaps. One rule,  */
/* progressive (Chromium and Safari today; other browsers navigate as     */
/* normal). Only pages that load this file take part, so demos are out.   */
/* ---------------------------------------------------------------------- */
@view-transition{ navigation: auto; }
.site-header{ view-transition-name: site-nav; }
::view-transition-old(root){ animation: 160ms ease-out both vt-out; }
::view-transition-new(root){ animation: 260ms cubic-bezier(.22,1,.36,1) both vt-in; }
::view-transition-group(site-nav){ animation-duration: 0s; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* ---------------------------------------------------------------------- */
/* Case study testimonial (work/*.html)                                    */
/* ---------------------------------------------------------------------- */
.case-work__quote{ margin:36px 0 8px; }
.case-quote{
  margin:0; padding:30px 28px 26px; border-radius:var(--radius-xl); position:relative;
  background:linear-gradient(145deg, rgba(37,99,235,.10), var(--bg-card) 55%);
  border:1px solid rgba(var(--cloud-rgb),.16);
}
.case-quote::before{
  content:'\201C'; position:absolute; top:6px; left:22px; font-size:4rem; line-height:1; font-weight:900;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.4;
}
.case-quote__text{ margin:0 0 20px; padding:18px 0 0 34px; border:0; }
.case-quote__text p{ margin:0; font-size:1.12rem; line-height:1.75; color:var(--gray-200); font-style:italic; max-width:60ch; }
.case-quote__by{ display:flex; align-items:center; gap:14px; padding-left:34px; }
.case-quote__by img{ width:48px; height:48px; border-radius:12px; object-fit:cover; object-position:top center; background:var(--bg-card); }
.case-quote__by > span{ display:grid; gap:2px; }
.case-quote__by b{ color:var(--white); font-size:1rem; }
.case-quote__by span span{ font-size:.85rem; color:var(--gray-400); }
@media (max-width: 600px){ .case-quote{ padding:24px 18px 22px; } .case-quote__text, .case-quote__by{ padding-left:22px; } }