/* CR8R LABS — SECTION 05 / HOW WE USE AI
   Isolated entity: #ai only. Text-led futuristic redesign. */
#ai.oh-ai{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(700px 420px at 84% 18%,rgba(61,86,255,.10),transparent 68%),
    radial-gradient(620px 420px at 8% 84%,rgba(25,217,255,.045),transparent 70%),
    #02040a !important;
  padding:clamp(88px,9vw,140px) 0 clamp(96px,10vw,150px) !important;
}
#ai.oh-ai .oh-ai-glow{
  position:absolute;
  width:42vw;height:1px;right:-8vw;top:34%;
  background:linear-gradient(90deg,transparent,rgba(25,217,255,.30),rgba(240,34,185,.22),transparent);
  box-shadow:0 0 36px rgba(25,217,255,.10);
  transform:rotate(-14deg);
  opacity:.8;
  pointer-events:none;
}
#ai.oh-ai .oh-ai-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.86fr);
  gap:clamp(54px,8vw,130px);
  align-items:start;
  margin-top:clamp(54px,7vw,90px);
}
#ai.oh-ai .oh-ai-copy{position:relative;z-index:2;max-width:780px}
#ai.oh-ai .oh-ai-copy h2{
  margin:0;
  max-width:800px;
  font-size:clamp(4rem,7.4vw,8.8rem);
  line-height:.82;
  letter-spacing:-.095em;
  font-weight:500;
}
#ai.oh-ai .oh-ai-copy h2 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--cyan),#7580ff 42%,var(--pink) 76%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#ai.oh-ai .oh-ai-copy .desktop-copy,
#ai.oh-ai .oh-ai-copy .mobile-copy{max-width:650px}
#ai.oh-ai .oh-ai-copy p{
  margin:28px 0 0;
  color:#c7cfdb;
  font-size:1rem;
  line-height:1.72;
}
#ai.oh-ai .oh-ai-copy .oh-ai-note{
  display:flex;align-items:center;gap:12px;
  margin-top:34px;
  font-family:var(--mono);
  font-size:.52rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#7f8ba1;
}
#ai.oh-ai .oh-ai-note i{
  display:block;width:34px;height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  box-shadow:0 0 12px rgba(25,217,255,.28);
}

/* Text-led interactive system — intentionally no 3D / illustration. */
#ai.oh-ai .oh-ai-system{
  position:relative;
  max-width:760px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 28px 70px rgba(0,0,0,.22);
}
#ai.oh-ai .oh-ai-tabs{display:flex;flex-direction:column;gap:6px}
#ai.oh-ai .oh-ai-tab{
  position:relative;
  overflow:hidden;
  appearance:none;border:1px solid transparent;
  background:rgba(255,255,255,.018);color:#f0f3f8;
  text-align:left;cursor:pointer;
  display:grid;grid-template-columns:42px 1fr 24px;gap:14px;align-items:center;
  min-height:72px;padding:14px 17px;
  border-radius:24px;
  font:inherit;
  transition:transform .35s var(--cr8r-ease),background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
/* Interactive light bars — isolated to Section 05 tabs. */
#ai.oh-ai .oh-ai-tab::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}
#ai.oh-ai .oh-ai-tab::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:0;
  width:72px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),#7d7cff,var(--pink),var(--orange));
  box-shadow:0 0 14px rgba(25,217,255,.32),0 0 24px rgba(239,63,180,.16);
  transform:translateX(-110px);
  opacity:.35;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .35s ease,width .35s ease;
  pointer-events:none;
}
#ai.oh-ai .oh-ai-tab:hover::after,
#ai.oh-ai .oh-ai-tab.is-active::after{
  transform:translateX(0);
  opacity:1;
}
#ai.oh-ai .oh-ai-tab.is-active::after{width:115px}

#ai.oh-ai .oh-ai-tab:hover{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.08);
  transform:translateX(3px);
}
#ai.oh-ai .oh-ai-tab.is-active{
  background:linear-gradient(105deg,rgba(25,217,255,.10),rgba(141,108,255,.07) 52%,rgba(239,63,180,.055));
  border-color:rgba(141,108,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.16);
  transform:none;
}
#ai.oh-ai .oh-ai-tab-index{font-family:var(--mono);font-size:.48rem;letter-spacing:.13em;color:#67738a}
#ai.oh-ai .oh-ai-tab-title{font-size:1.04rem;letter-spacing:-.02em;font-weight:500}
#ai.oh-ai .oh-ai-tab-arrow{font-size:.85rem;color:#68758c;transition:transform .35s ease,color .35s ease}
#ai.oh-ai .oh-ai-tab.is-active .oh-ai-tab-index{color:var(--cyan)}
#ai.oh-ai .oh-ai-tab.is-active .oh-ai-tab-arrow{color:var(--pink);transform:translate(3px,-3px)}
#ai.oh-ai .oh-ai-panel{
  display:none;
  margin:0 8px 6px;
  padding:22px 25px 23px 56px;
  border-radius:24px;
  background:rgba(0,0,0,.16);
  color:#aeb7c7;font-size:.86rem;line-height:1.62;
  animation:cr8rAiPanelIn .42s ease both;
}
#ai.oh-ai .oh-ai-panel.is-active{display:block}
#ai.oh-ai .oh-ai-panel strong{display:block;margin-bottom:7px;color:#f3f5f9;font-weight:500}
#ai.oh-ai .oh-ai-panel p{margin:0;max-width:480px}
#ai.oh-ai .oh-ai-panel .ai-panel-signal{
  display:block;margin-top:17px;
  font-family:var(--mono);font-size:.46rem;letter-spacing:.13em;text-transform:uppercase;color:#707d93;
}
#ai.oh-ai .oh-ai-panel .ai-panel-signal:before{content:"/ ";color:var(--cyan)}
@keyframes cr8rAiPanelIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

#ai.oh-ai .oh-ai-statement{
  position:relative;
  max-width:1250px;
  margin:clamp(62px,8vw,100px) 0 0;
  padding:27px 0 0;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:clamp(2.6rem,4.5vw,5.6rem);
  line-height:.91;
  letter-spacing:-.07em;
  color:#e5e9f0;
}
#ai.oh-ai .oh-ai-statement:after{
  content:"";position:absolute;left:0;top:-2px;width:24%;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--orange));
  box-shadow:0 0 24px rgba(25,217,255,.22);
}
#ai.oh-ai .oh-ai-statement em{font-style:normal;color:#f3eedf}

@media (max-width:1100px){
  #ai.oh-ai .oh-ai-grid{grid-template-columns:1fr;gap:62px}
  #ai.oh-ai .oh-ai-copy{max-width:900px}
  #ai.oh-ai .oh-ai-system{max-width:760px}
}
@media (max-width:900px){
  #ai.oh-ai{padding-top:70px!important;padding-bottom:78px!important}
  #ai.oh-ai .oh-ai-glow{width:70vw;right:-24vw;top:40%}
  #ai.oh-ai .oh-ai-grid{display:block!important;margin-top:48px}
  #ai.oh-ai .oh-ai-copy h2{font-size:clamp(3.35rem,13vw,5.6rem)!important;line-height:.84!important;letter-spacing:-.08em!important}
  #ai.oh-ai .oh-ai-copy p{font-size:.91rem!important;line-height:1.6!important;margin-top:21px!important}
  #ai.oh-ai .oh-ai-copy .oh-ai-note{margin-top:24px;font-size:.45rem;line-height:1.5}
  #ai.oh-ai .oh-ai-system{margin-top:48px;padding:7px;border-radius:28px}
  #ai.oh-ai .oh-ai-tab{min-height:64px;grid-template-columns:30px 1fr 20px;gap:10px;padding:12px 13px;border-radius:20px}
  #ai.oh-ai .oh-ai-tab-title{font-size:.94rem}
  #ai.oh-ai .oh-ai-tab::before{left:14px;right:14px}
  #ai.oh-ai .oh-ai-tab::after{left:14px;width:58px}
  #ai.oh-ai .oh-ai-tab.is-active::after{width:92px}
  #ai.oh-ai .oh-ai-panel{margin:0 5px 5px;padding:19px 15px 21px 43px;border-radius:20px;font-size:.8rem;line-height:1.55}
  #ai.oh-ai .oh-ai-statement{margin-top:56px!important;padding-top:19px!important;font-size:clamp(2rem,8.7vw,3.2rem)!important;line-height:.95!important;letter-spacing:-.055em!important}
  #ai.oh-ai .oh-ai-statement:after{width:34%}
}
@media (prefers-reduced-motion:reduce){#ai.oh-ai .oh-ai-tab{transition:none}#ai.oh-ai .oh-ai-tab-arrow{transition:none}}