/* ===== AiLife Media — "Cinematic Depth" (Tailwind + custom) ===== */

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
html{scroll-padding-top:110px}
body{background:#05070d}

::selection{background:rgba(24,99,220,.4);color:#fff}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#1863dc;color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ===== shared ===== */
.eyebrow{color:#38bdf8;font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-family:"Space Grotesk",sans-serif}
.section-h2{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em;font-size:clamp(2rem,4.5vw,3.4rem);margin-top:.6rem}
.text-gradient{background:linear-gradient(100deg,#1863dc,#38bdf8 45%,#6d5efc);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}

.glass{background:rgba(255,255,255,.045);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.97rem;padding:12px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s;white-space:nowrap;will-change:transform}
.btn-lg{padding:15px 32px;font-size:1.04rem}
.btn-sm{padding:9px 18px;font-size:.88rem}
.btn-primary{background:linear-gradient(135deg,#1863dc,#0f47a0);color:#fff;box-shadow:0 12px 34px -10px rgba(24,99,220,.7)}
.btn-primary:hover{box-shadow:0 18px 44px -10px rgba(56,189,248,.7)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-white{background:#fff;color:#0f47a0}
.play-dot{width:9px;height:9px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}

/* ===== backdrop aura (fixed depth) ===== */
.bg-aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40rem 30rem at 80% -5%,rgba(24,99,220,.20),transparent 60%),
             radial-gradient(34rem 28rem at 5% 35%,rgba(109,94,252,.13),transparent 60%),
             radial-gradient(40rem 30rem at 60% 110%,rgba(56,189,248,.12),transparent 60%)}
main,header,footer{position:relative;z-index:1}

/* ===== header / nav ===== */
#nav-shell{box-shadow:0 10px 40px -20px rgba(0,0,0,.8)}
header.shrink #nav-shell{height:3.4rem;background:rgba(8,11,20,.8)}
.nav-link{color:#cbd2e0;position:relative;transition:color .2s}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:linear-gradient(90deg,#1863dc,#38bdf8);transition:right .3s;border-radius:2px}
.nav-link:hover::after,.nav-link.active::after{right:0}
.mobile-nav{position:fixed;inset:84px 16px auto 16px;z-index:40;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:rgba(10,14,24,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s}
.mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-link{padding:12px 14px;border-radius:12px;color:#cbd2e0;font-weight:500}
.mobile-link:hover{background:rgba(255,255,255,.05);color:#fff}
#burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== hero ===== */
.hero-orb{position:absolute;top:-12%;right:-8%;width:46rem;height:46rem;border-radius:50%;
  background:radial-gradient(circle,rgba(24,99,220,.45),rgba(56,189,248,.12) 45%,transparent 70%);filter:blur(30px)}
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;
  -webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%)}
.spark{position:absolute;border-radius:50%;background:#38bdf8;filter:blur(1px);box-shadow:0 0 16px 4px rgba(56,189,248,.7)}
.spark-1{width:10px;height:10px;top:28%;left:12%;background:#1863dc;box-shadow:0 0 18px 5px rgba(24,99,220,.7)}
.spark-2{width:7px;height:7px;top:62%;left:40%}
.spark-3{width:6px;height:6px;top:20%;left:62%;background:#6d5efc;box-shadow:0 0 16px 5px rgba(109,94,252,.7)}
.hero-media{position:relative;justify-self:center}
.hero-media-glow{position:absolute;inset:6% 12%;border-radius:50%;background:radial-gradient(circle,rgba(24,99,220,.5),transparent 65%);filter:blur(34px)}
.hero-robot{position:relative;max-height:62svh;width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.25);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue span{width:4px;height:8px;border-radius:2px;background:#38bdf8;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}

/* ===== marquee ===== */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll-x 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:40px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.5;transition:opacity .25s}
.marquee-track img:hover{opacity:1}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ===== stats ===== */
.stat{border-radius:18px;padding:26px 20px;text-align:center}
.stat-num{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(2rem,4vw,2.8rem);background:linear-gradient(120deg,#fff,#9ec5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{color:#8b93a7;font-size:.86rem;margin-top:4px}

/* ===== video ===== */
.video-frame{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.video-frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .4s}
.video-frame:hover img{transform:scale(1.04);opacity:.8}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.play-btn{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;background:rgba(24,99,220,.92);box-shadow:0 12px 50px rgba(24,99,220,.7);transition:transform .3s}
.video-frame:hover .play-btn{transform:scale(1.1)}
.play-btn::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff;transform:translateX(4px)}

/* ===== tilt (cards/media) ===== */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;position:relative}
.about-media,.course-media{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.about-media img,.course-media img{width:100%;display:block}
.course-media{max-width:420px;margin-inline:auto}

/* ===== cards (services) ===== */
.card{position:relative;border-radius:20px;padding:30px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .3s,background .3s}
.card::after{content:"";position:absolute;width:16rem;height:16rem;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 65%);left:var(--mx,50%);top:var(--my,0%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{border-color:rgba(56,189,248,.35);background:rgba(255,255,255,.06)}
.card:hover::after{opacity:1}
.card-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#38bdf8;background:rgba(24,99,220,.16);margin-bottom:18px}
.card-ico svg{width:26px;height:26px}
.card-h{font-family:"Space Grotesk",sans-serif;font-weight:600;color:#fff;font-size:1.2rem;margin-bottom:10px}
.card-p{color:#9aa3b5;font-size:.95rem;line-height:1.6}
.card-cta{background:linear-gradient(150deg,#1863dc,#0f47a0);border:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* ===== offer ===== */
.offer{position:relative;border-radius:26px;padding:clamp(28px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;background:linear-gradient(130deg,rgba(24,99,220,.14),rgba(12,17,32,.6))}
.glow-border{position:relative}
.glow-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#1863dc,#38bdf8,#6d5efc);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}

/* ===== portfolio ===== */
.pf{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/10;background:#0c1120}
.pf img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pf:hover img{transform:scale(1.06)}
.pf figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 16px;color:#fff;font-weight:600;font-family:"Space Grotesk",sans-serif;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transform:translateY(10px);transition:.3s}
.pf:hover figcaption{opacity:1;transform:none}

/* ===== reviews ===== */
.reviews-summary{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 18px;border-radius:999px}
.reviews-summary .stars{color:#fbbf24;letter-spacing:2px}
.review-card{border-radius:18px;padding:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{width:44px;height:44px;border-radius:50%;background:rgba(24,99,220,.18);color:#38bdf8;display:grid;place-items:center;font-weight:700;overflow:hidden}
.review-avatar img{width:100%;height:100%;object-fit:cover}
.review-name{color:#fff;font-weight:600;font-size:.96rem}
.review-stars{color:#fbbf24;font-size:.82rem;letter-spacing:1px}
.review-text{color:#9aa3b5;font-size:.94rem;line-height:1.6}

/* ===== course ===== */
.check-list{list-style:none;display:grid;gap:12px;padding:0}
.check-list li{position:relative;padding-left:34px;color:#e6e9f0}
.check-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#1863dc,#38bdf8);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat}

/* ===== contact ===== */
.contact-glow{position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:60rem;height:34rem;background:radial-gradient(circle,rgba(24,99,220,.2),transparent 65%);pointer-events:none}
.contact-form{border-radius:24px;padding:clamp(24px,4vw,40px)}
.contact-info{border-radius:20px;padding:30px}
.field{display:grid;gap:8px;font-size:.86rem;color:#e6e9f0;font-weight:500}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.field textarea{resize:vertical}
.field select option{background:#0c1120}
.info-line{display:block;color:#fff;font-weight:500;font-size:1.05rem;margin-bottom:8px}
.info-line:hover{color:#38bdf8}
.form-status{font-size:.9rem;min-height:1em;margin-top:10px}
.form-status.ok{color:#4ade80}.form-status.err{color:#f87171}

/* ===== footer ===== */
.footer-line{position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#1863dc,#38bdf8,transparent);opacity:.6}
.footer-link{color:#9aa3b5;transition:color .2s}.footer-link:hover{color:#fff}

/* ===== floats ===== */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s}
.wa-float:hover{transform:scale(1.1)}
.cookie-banner{position:fixed;left:16px;bottom:16px;z-index:70;max-width:380px;border-radius:18px;padding:18px 20px}

/* ===== reveal (only when JS+motion on) ===== */
.gsap-ready [data-reveal]{opacity:0}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .gsap-ready [data-reveal]{opacity:1!important}
  .hero-robot{animation:none}
  [data-parallax],[data-tilt]{transform:none!important}
  .marquee-track{animation:none;transform:none}
}

/* ===== responsive ===== */
@media (max-width:768px){
  .hero-robot{max-height:42svh}
  .scroll-cue{display:none}
  .marquee-track{gap:40px}
  .offer{flex-direction:column;align-items:flex-start}
  [data-tilt]{transform:none!important}
}