/* TreyTech.ai section theme: shared by Home (#ai) and the AI Studio page. */
@keyframes spin{to{transform:rotate(360deg)}}
.ai { background:radial-gradient(60% 80% at 80% 20%, rgba(138,109,255,.2), transparent 60%), #05050a; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.ai-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.ai h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(36px,4.8vw,64px); line-height:1.02; letter-spacing:-.025em; margin:18px 0 0; }
.ai p { font-family:var(--font-body); font-size:17px; line-height:1.7; color:#fff; max-width:52ch; margin:24px 0 0; }
/* He pops first; the studio glyphs pop in after him, then drift. */
.ai-orb .core { opacity:0; transform:scale(.3); }
.ai-orb.in .core { animation:aiPop .9s cubic-bezier(.34,1.56,.64,1) .15s both; }
@keyframes aiPop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.ai-orb .core .aic .chassis{animation-play-state:paused}
.ai-orb.in .core .aic .chassis{animation-delay:.35s;animation-play-state:running}
.aif-orbit{position:absolute;inset:0;z-index:4;pointer-events:none}
.aif{position:absolute;width:15%;aspect-ratio:1;opacity:0;transform:scale(0)}
.ai-orb.in .aif{animation:aifPop .7s cubic-bezier(.34,1.56,.64,1) var(--d) both}
@keyframes aifPop{from{opacity:0;transform:scale(0) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.aif-in{display:block;width:100%;height:100%;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;filter:drop-shadow(0 0 12px currentColor);animation:aifFloat 5.6s ease-in-out var(--fd) infinite}
@keyframes aifFloat{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(6px,-10px) rotate(3deg)}50%{transform:translate(-4px,-16px) rotate(-2deg)}75%{transform:translate(-8px,-6px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.ai-orb .core,.aif{opacity:1!important;transform:none!important;animation:none!important}.aif-in{animation:none}}
.ai-intake { margin-top:26px; padding-left:16px; border-left:2px solid rgba(207,139,255,.55); max-width:52ch; }
.ai-intake-k { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#cf8bff; }
.ai .ai-intake p { font-size:15px; line-height:1.65; margin:8px 0 0; }
.ai-orb { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.ai-orb .ring { position:absolute; border-radius:50%; border:1px solid rgba(207,139,255,.3); }
.ai-orb .ring.r1 { inset:6%; animation:spin 26s linear infinite; border-style:dashed; }
.ai-orb .ring.r2 { inset:20%; animation:spin 18s linear infinite reverse; }
.ai-orb .ring.r3 { inset:34%; animation:spin 12s linear infinite; border-color:rgba(207,139,255,.5); }
.ai-orb .core { position:absolute; left:30%; top:30%; width:40%; height:40%; margin:0; border-radius:50%; }
.ai-orb .core .aic { position:absolute; z-index:2; left:19%; top:19%; width:62%; height:62%; margin:0; overflow:visible; transform-origin:50% 50%; animation:aiBreathe 3.6s ease-in-out infinite; }
@keyframes aiBreathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(155,107,255,.55))}50%{transform:scale(1.06);filter:drop-shadow(0 0 30px rgba(94,233,255,.7))}}
.aic .chassis{stroke-dasharray:104;animation:aiDraw 1.5s cubic-bezier(.22,1,.36,1) both}
@keyframes aiDraw{from{stroke-dashoffset:104;opacity:0}40%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
.aic .eyes{animation:aiScanEyes 4.4s cubic-bezier(.4,0,.6,1) infinite 1.2s}
@keyframes aiScanEyes{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.5px)}52%{transform:translateX(1.5px)}80%{transform:translateX(0)}}
.aic .eye{transform-box:fill-box;transform-origin:center;animation:aiBlink 4.4s ease-in-out infinite 1.2s}
@keyframes aiBlink{0%,30%,100%{transform:scaleY(1)}34%,36%{transform:scaleY(.12)}40%{transform:scaleY(1)}68%,70%{transform:scaleY(.12)}74%{transform:scaleY(1)}}
.aic .spark{transform-box:fill-box;transform-origin:center;animation:aiSpark 2.2s ease-in-out infinite}
.aic .spark.s2{animation-delay:.7s}.aic .spark.s3{animation-delay:1.4s}
@keyframes aiSpark{0%,100%{opacity:0;transform:scale(.4) translateY(0)}45%{opacity:.95;transform:scale(1) translateY(-3px)}75%{opacity:0;transform:scale(.6) translateY(-6px)}}
.aic-swirl{position:absolute;left:50%;top:50%;width:104%;height:104%;margin:-52% 0 0 -52%;box-sizing:border-box;border-radius:50%;border:6px solid transparent;border-top-color:rgba(94,233,255,.75);border-right-color:rgba(155,107,255,.7);filter:blur(.6px);transform-origin:50% 50%;animation:spin 2.4s linear infinite;pointer-events:none}
.aic-pulse{position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(155,107,255,.5);animation:aiPulse 2.8s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
.aic-pulse.p2{animation-delay:.95s}.aic-pulse.p3{animation-delay:1.9s}
@keyframes aiPulse{from{transform:scale(.7);opacity:.6}to{transform:scale(1.55);opacity:0}}
.aic-scan{position:absolute;z-index:3;left:18%;right:18%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#12d6ff,transparent);animation:aiScan 2.4s ease-in-out infinite}
@keyframes aiScan{0%,100%{top:14%;opacity:0}50%{top:84%;opacity:.85}}
@media (prefers-reduced-motion:reduce){.aic,.aic .chassis,.aic .eyes,.aic .eye,.aic .spark,.aic-swirl,.aic-pulse,.aic-scan{animation:none}}
@media (max-width:820px){ .ai-grid{ grid-template-columns:1fr; gap:28px; } .ai-orb{ order:-1; display:flex!important; width:min(300px,78vw); max-width:none; margin:0 auto; visibility:visible!important; } }
.ai .eb{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.ai .wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.ai .wrap{padding:0 22px}}
.ai .grad-purple{background:linear-gradient(115deg,#cf8bff,#9b6bff,#6a4dff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:grad-swirl 13s ease-in-out infinite}
.ai{padding:clamp(72px,9vw,120px) 0;color:#fff}
#ai-meet h2,.ai h2{color:#fff!important;-webkit-text-fill-color:#fff}
#ai-meet h2 .grad-purple{-webkit-text-fill-color:transparent}
#ai-meet p,#ai-meet .ai-intake p{color:#fff!important}

/* AI Studio: hero and TreyTech.ai merged into one header */
.tt-ai-hero{background:radial-gradient(60% 80% at 80% 20%, rgba(138,109,255,.2), transparent 60%), #05050a!important;padding:150px 0 90px!important}
.tt-ai-hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}
.tt-ai-hero-copy{min-width:0}
.tt-ai-hero .ai-orb{width:100%;max-width:440px;justify-self:end}
.tt-ai-hero .ai-intake{margin-top:30px}
@media (max-width:820px){.tt-ai-hero{padding:120px 0 64px!important}.tt-ai-hero .ai-orb{justify-self:center;width:min(280px,72vw)}}
.tt-ai-hero h1{font-size:clamp(40px,5.2vw,76px)!important;line-height:1.02!important}
.tt-ai-hero-copy > div:first-child, .tt-ai-hero-copy > div:first-child *{white-space:nowrap}
@media (max-width:1100px){.tt-ai-hero-grid{grid-template-columns:1fr;gap:32px}.tt-ai-hero .ai-orb{order:-1;justify-self:center;width:min(300px,70vw)}}