/* CR8R LABS — V47 MOBILE HOMEPAGE HEADLINE COLOUR PARITY LAYER
   Mobile homepage only. Desktop and all internal pages are intentionally untouched.
   Purpose: restore the richer visual language, add depth, interaction and scroll reveals,
   while preserving V45's resolved section rhythm and V42 type scale.
*/
@media (max-width:900px){
  .home-v08 .organic-home-main{
    position:relative;
    isolation:isolate;
    background:#02040a;
    color:#f3eedc;
  }

  /* Continuous visual atmosphere — every section gets its own subtle colour field. */
  .home-v08 .organic-home-main .oh-section,
  .home-v08 .organic-home-main .oh-close{
    position:relative!important;
    isolation:isolate;
    overflow:clip!important;
  }
  .home-v08 .organic-home-main .oh-section::before,
  .home-v08 .organic-home-main .oh-close::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.98;
  }
  .home-v08 .organic-home-main .oh-section::after,
  .home-v08 .organic-home-main .oh-close::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:44%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(2,4,10,.42));
  }
  .home-v08 .oh-intro::before{
    background:
      radial-gradient(ellipse 90% 70% at 88% 12%,rgba(25,126,255,.20),transparent 58%),
      radial-gradient(ellipse 75% 65% at 5% 82%,rgba(255,44,180,.10),transparent 58%),
      linear-gradient(135deg,#02050d 0%,#050a18 52%,#04040d 100%);
  }
  .home-v08 .oh-difference::before{
    background:
      radial-gradient(ellipse 82% 72% at 96% 16%,rgba(128,70,255,.19),transparent 58%),
      radial-gradient(ellipse 70% 55% at 0% 72%,rgba(0,204,255,.08),transparent 58%),
      linear-gradient(135deg,#05030d 0%,#080817 54%,#03050c 100%);
  }
  .home-v08 .oh-build::before{
    background:
      radial-gradient(ellipse 90% 75% at 12% 8%,rgba(0,210,255,.12),transparent 58%),
      radial-gradient(ellipse 75% 65% at 94% 78%,rgba(46,91,255,.16),transparent 58%),
      linear-gradient(135deg,#02070d 0%,#06101d 52%,#03050c 100%);
  }
  .home-v08 .oh-ai::before{
    background:
      radial-gradient(ellipse 82% 72% at 82% 18%,rgba(25,217,255,.20),transparent 54%),
      radial-gradient(ellipse 72% 68% at 12% 88%,rgba(255,45,180,.16),transparent 58%),
      linear-gradient(135deg,#03050c 0%,#050c18 48%,#08040f 100%);
  }
  .home-v08 .oh-loop::before{
    background:
      radial-gradient(ellipse 86% 72% at 14% 18%,rgba(0,205,255,.13),transparent 56%),
      radial-gradient(ellipse 72% 64% at 92% 86%,rgba(126,66,255,.14),transparent 56%),
      linear-gradient(135deg,#02060b 0%,#07101a 50%,#04040b 100%);
  }
  .home-v08 .oh-value::before{
    background:
      radial-gradient(ellipse 88% 70% at 84% 14%,rgba(125,75,255,.21),transparent 56%),
      radial-gradient(ellipse 72% 64% at 10% 84%,rgba(255,46,174,.10),transparent 58%),
      linear-gradient(135deg,#05040c 0%,#090817 52%,#03040a 100%);
  }
  .home-v08 .oh-close::before{
    background:
      radial-gradient(ellipse 100% 90% at 50% 45%,rgba(20,139,255,.23),transparent 56%),
      radial-gradient(ellipse 72% 60% at 100% 88%,rgba(255,45,174,.14),transparent 56%),
      linear-gradient(135deg,#03050b 0%,#07111d 50%,#09040e 100%);
  }

  /* Visual section header: technical rail + soft glow instead of newspaper-style rule only. */
  .home-v08 .oh-section-head{
    position:relative!important;
    padding:10px 12px 15px 14px!important;
    margin-bottom:28px!important;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:linear-gradient(105deg,rgba(255,255,255,.045),rgba(25,126,255,.025) 58%,transparent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 40px rgba(0,0,0,.14);
  }
  .home-v08 .oh-section-head::after{
    left:14px!important;right:14px!important;bottom:7px!important;
    background:linear-gradient(90deg,rgba(25,217,255,.55),rgba(126,75,255,.35) 48%,rgba(255,45,174,.20) 72%,transparent)!important;
  }
  .home-v08 .oh-section-head::before{
    left:14px!important;bottom:5px!important;width:32px!important;height:3px!important;
    background:linear-gradient(90deg,var(--cyan),var(--pink))!important;
    box-shadow:0 0 18px rgba(25,217,255,.35);
  }
  .home-v08 .oh-index{color:#f3eedc!important}
  .home-v08 .oh-side-note{color:rgba(243,238,220,.78)!important}

  /* Card treatment gives information hierarchy without turning the page into a card grid. */
  .home-v08 .oh-do-point,
  .home-v08 .oh-row,
  .home-v08 .oh-build-item,
  .home-v08 .oh-loop-steps>div{
    position:relative!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 32px rgba(0,0,0,.16);
    transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
  }
  .home-v08 .oh-do-point{margin-bottom:9px!important;padding:16px 14px!important}
  .home-v08 .oh-row{margin-bottom:9px!important;padding:18px 14px 19px!important}
  .home-v08 .oh-build-item{margin-bottom:9px!important;padding:18px 14px 19px!important}
  .home-v08 .oh-loop-steps>div{margin-bottom:9px!important;padding:17px 13px!important}
  .home-v08 .oh-do-point:last-child,
  .home-v08 .oh-row:last-child,
  .home-v08 .oh-build-item:last-child,
  .home-v08 .oh-loop-steps>div:last-child{margin-bottom:0!important}

  .home-v08 .oh-do-point::before,
  .home-v08 .oh-row::before,
  .home-v08 .oh-build-item::before,
  .home-v08 .oh-loop-steps>div::before{
    content:"";
    position:absolute;
    left:0;top:13px;bottom:13px;width:2px;
    border-radius:2px;
    background:linear-gradient(180deg,var(--cyan),var(--blue),var(--pink));
    opacity:.72;
    box-shadow:0 0 14px rgba(25,217,255,.20);
  }
  .home-v08 .oh-do-point.is-active,
  .home-v08 .oh-row.is-active,
  .home-v08 .oh-build-item.is-active,
  .home-v08 .oh-loop-steps>div.is-active{
    transform:translateY(-2px);
    border-color:rgba(25,217,255,.32)!important;
    background:linear-gradient(135deg,rgba(25,217,255,.095),rgba(126,75,255,.045) 62%,rgba(255,45,174,.035))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 42px rgba(0,0,0,.24),0 0 30px rgba(25,126,255,.06);
  }
  .home-v08 .oh-do-point{cursor:pointer}
  .home-v08 .oh-row,.home-v08 .oh-build-item,.home-v08 .oh-loop-steps>div{cursor:pointer}

  /* Make AI and loop feel like interactive product systems rather than static text. */
  .home-v08 .oh-ai-flow{
    position:relative!important;
    padding:12px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,rgba(9,22,38,.82),rgba(20,8,29,.68))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 50px rgba(0,0,0,.22);
  }
  .home-v08 .oh-ai-flow>div{
    border:1px solid rgba(255,255,255,.075)!important;
    border-radius:13px!important;
    padding:14px 12px!important;
    background:rgba(255,255,255,.035)!important;
    transition:.28s ease;
  }
  .home-v08 .oh-ai-flow>div.is-active{border-color:rgba(25,217,255,.34)!important;background:rgba(25,126,255,.10)!important;transform:translateX(3px)}
  .home-v08 .oh-ai-flow i{font-size:1rem!important;opacity:.75;filter:drop-shadow(0 0 8px rgba(25,217,255,.35))}

  .home-v08 .oh-value-strip{
    padding:14px 16px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,rgba(25,126,255,.09),rgba(126,75,255,.08),rgba(255,45,174,.07))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 36px rgba(0,0,0,.16);
  }
  .home-v08 .oh-value-strip i{opacity:.8!important}

  /* CTA becomes a deliberate visual destination. */
  .home-v08 .oh-close .oh-actions .oh-link-primary{
    box-shadow:0 10px 32px rgba(25,126,255,.20),0 0 28px rgba(255,45,174,.08);
  }
  .home-v08 .oh-close .oh-actions .oh-link-primary:active,
  .home-v08 .oh-close .oh-actions .oh-link-primary:hover{transform:translateY(-2px) scale(1.01)!important}

  /* Scroll reveal: CSS stays visible if JS is unavailable. */
  .home-v08.mobile-reveal-ready .mobile-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .72s cubic-bezier(.2,.75,.2,1),transform .72s cubic-bezier(.2,.75,.2,1);
  }
  .home-v08.mobile-reveal-ready .mobile-reveal.is-visible{opacity:1;transform:none}
  .home-v08.mobile-reveal-ready .mobile-stagger > *{transition-delay:var(--reveal-delay,0ms)}

  /* Slightly richer hero atmosphere while preserving the V45 composition. */
  .home-v08 .oh-hero{
    background:
      radial-gradient(ellipse 85% 60% at 82% 14%,rgba(25,126,255,.22),transparent 55%),
      radial-gradient(ellipse 70% 50% at 15% 78%,rgba(255,45,174,.11),transparent 58%),
      linear-gradient(135deg,#02040a 0%,#050a17 55%,#07030d 100%)!important;
  }

  /* Restore the CR8R LABS headline colour system on mobile: the same gradient emphasis used by the desktop homepage and the supplied Capabilities reference. */
  .home-v08 .oh-hero h1 em,
  .home-v08 .oh-section h2 em,
  .home-v08 .oh-difference-lead h2 em,
  .home-v08 .oh-build-intro h2 em,
  .home-v08 .oh-ai h2 em,
  .home-v08 .oh-loop-lead h2 em,
  .home-v08 .oh-value-content h2 em,
  .home-v08 .oh-close h2 em{
    font-style:normal!important;
    background:linear-gradient(100deg,var(--cyan),#6d80ff 38%,var(--pink) 70%,var(--orange))!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
  }

  /* Keep floating actions tactile. */}

@media (max-width:560px){
  .home-v08 .oh-section-head{padding-left:12px!important;padding-right:12px!important;border-radius:13px!important}
  .home-v08 .oh-do-point,.home-v08 .oh-row,.home-v08 .oh-build-item{border-radius:15px!important}
  .home-v08 .oh-loop-steps>div{border-radius:15px!important}
  .home-v08 .oh-ai-flow{border-radius:17px!important;padding:9px!important}
  .home-v08 .oh-value-strip{border-radius:18px!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px 9px!important}
}

@media (prefers-reduced-motion:reduce){
  .home-v08.mobile-reveal-ready .mobile-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .home-v08 .oh-do-point,.home-v08 .oh-row,.home-v08 .oh-build-item,.home-v08 .oh-loop-steps>div,.home-v08 .oh-ai-flow>div{transition:none!important}
}