/* ═══════════════════════════════════════════════════════
   SELMCORP — SELMAi PAGE STYLES
   AI COMMAND CENTER AESTHETIC
   Neural nets, scanning beams, terminal typing, circuit boards
   ═══════════════════════════════════════════════════════ */

/* ═══ HERO ═══ */
.ai-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:clamp(110px,14vh,140px) 0 clamp(3rem,6vh,5rem)}
.ai-hero__orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.25;pointer-events:none;animation:aiOrb 14s ease-in-out infinite}
.ai-hero__orb--1{width:500px;height:500px;background:var(--primary);top:-12%;left:-8%}
.ai-hero__orb--2{width:350px;height:350px;background:var(--cyan);bottom:-8%;right:-5%;animation-delay:-5s}
.ai-hero__orb--3{width:200px;height:200px;background:var(--rose,#f472b6);top:40%;right:15%;animation-delay:-9s}
@keyframes aiOrb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-20px) scale(1.06)}66%{transform:translate(-18px,15px) scale(.94)}}
.ai-hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 35% 45%,black 15%,transparent 60%);-webkit-mask-image:radial-gradient(ellipse at 35% 45%,black 15%,transparent 60%);animation:gridPulse 4s ease-in-out infinite}
@keyframes gridPulse{0%,100%{opacity:.5}50%{opacity:.8}}

/* Neural network background */
.ai-neural{position:absolute;inset:0;pointer-events:none;z-index:1}
.neural-node{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,229,255,.3);animation:nodeGlow 3s ease-in-out infinite;z-index:2}
.neural-node:nth-child(odd){animation-delay:-.5s;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 24px rgba(192,132,252,.3)}
.neural-node:nth-child(3n){animation-delay:-1.5s;width:6px;height:6px}
.neural-node:nth-child(4n){animation-delay:-2.2s;width:10px;height:10px}
@keyframes nodeGlow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.6);opacity:1}}
.neural-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.n-line{stroke:var(--cyan);stroke-width:.15;opacity:0;animation:lineFlow 3s ease-in-out infinite}
.n-line:nth-child(odd){stroke:var(--accent);animation-delay:-.8s}
.n-line:nth-child(2){animation-delay:-.3s}.n-line:nth-child(3){animation-delay:-.6s}
.n-line:nth-child(4){animation-delay:-1.1s}.n-line:nth-child(5){animation-delay:-1.5s}
.n-line:nth-child(6){animation-delay:-1.9s}.n-line:nth-child(7){animation-delay:-2.3s}
.n-line:nth-child(8){animation-delay:-.4s}.n-line:nth-child(9){animation-delay:-2.7s}
.n-line:nth-child(10){animation-delay:-1.2s}
@keyframes lineFlow{0%{opacity:0;stroke-dasharray:0 100}30%{opacity:.4;stroke-dasharray:40 60}70%{opacity:.4;stroke-dasharray:40 60}100%{opacity:0;stroke-dasharray:0 100}}

/* Scanning beam */
.ai-scan{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px var(--cyan),0 0 40px rgba(0,229,255,.3);animation:scanBeam 4s linear infinite;z-index:3;opacity:.5}
@keyframes scanBeam{0%{top:0;opacity:0}5%{opacity:.5}95%{opacity:.5}100%{top:100%;opacity:0}}

/* Terminal */
.ai-terminal{position:absolute;bottom:8%;right:5%;width:280px;background:rgba(6,6,15,.85);border:1px solid rgba(0,229,255,.2);border-radius:12px;overflow:hidden;z-index:4;box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(10px);animation:termFade 1s .5s both}
@keyframes termFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.ai-terminal__bar{display:flex;gap:5px;padding:8px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.ai-terminal__bar span{width:8px;height:8px;border-radius:50%}
.ai-terminal__bar span:nth-child(1){background:#ff5f57}
.ai-terminal__bar span:nth-child(2){background:#ffbd2e}
.ai-terminal__bar span:nth-child(3){background:#28c840}
.ai-terminal__body{padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--cyan);min-height:60px;line-height:1.6}
.ai-type{white-space:pre-wrap}
.ai-cursor{animation:blink 1s step-end infinite;color:var(--cyan);font-weight:700}
@keyframes blink{50%{opacity:0}}

.ai-hero__inner{position:relative;z-index:5;max-width:750px}
.ai-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);font-size:.82rem;font-weight:600;color:var(--primary);backdrop-filter:blur(10px);margin-bottom:1.5rem}
.ai-badge i{color:var(--cyan);font-size:.9rem;animation:robotSpin 4s linear infinite}
@keyframes robotSpin{0%,85%{transform:rotate(0)}90%{transform:rotate(15deg)}95%{transform:rotate(-15deg)}100%{transform:rotate(0)}}
.ai-hero__h1{font-family:'Syne',sans-serif;font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:800;line-height:1.08;margin-bottom:1.2rem;letter-spacing:-.02em}
.ai-hero__h1 em{font-style:normal}
.ai-hero__sub{font-size:clamp(1rem,1.8vw,1.12rem);color:var(--txt2);max-width:600px;line-height:1.75;margin-bottom:2rem}
.ai-hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ai-hero__stats{display:flex;gap:1rem;flex-wrap:wrap}
.ai-stat{display:flex;align-items:center;gap:.4rem;padding:.4rem .9rem;background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.12);border-radius:var(--r-pill);font-size:.78rem;font-weight:600;color:var(--cyan)}
.ai-stat i{font-size:.7rem}

/* ═══ AI DEMO VIDEO ═══ */
.ai-demo{padding:0 0 var(--py);margin-top:-2rem;position:relative;z-index:2}
.ai-demo__box{max-width:900px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(0,229,255,.15);background:var(--bg2);aspect-ratio:16/9;position:relative;box-shadow:0 8px 40px rgba(0,229,255,.08)}
.ai-demo__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;cursor:pointer;transition:all .4s var(--ease)}
.ai-demo__ph:hover{background:rgba(0,229,255,.03)}
.ai-demo__play{width:80px;height:80px;background:linear-gradient(135deg,var(--primary),var(--cyan));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;box-shadow:0 0 30px rgba(0,229,255,.3);transition:all .4s var(--bounce);animation:playPulse 2.5s ease-in-out infinite}
.ai-demo__ph:hover .ai-demo__play{transform:scale(1.12)}
@keyframes playPulse{0%,100%{box-shadow:0 0 30px rgba(0,229,255,.3)}50%{box-shadow:0 0 50px rgba(0,229,255,.5)}}
.ai-demo__ph p{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--txt2)}
.ai-demo__ph span{font-size:.78rem;color:var(--txt3)}
.ai-demo__box video,.ai-demo__box iframe{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;border:none}

/* ═══ AI FEATURES — Alternating image/text layout ═══ */
.ai-features{padding:var(--py) 0;background:var(--bg2)}
.ai-feat-grid{display:flex;flex-direction:column;gap:3rem}
.ai-feat{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(8px);transition:all .5s var(--ease)}
.ai-feat:hover{box-shadow:var(--sh-lg);border-color:rgba(0,229,255,.15)}
.ai-feat--reverse{direction:rtl}
.ai-feat--reverse>*{direction:ltr}
.ai-feat__visual{height:100%;min-height:280px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(108,43,217,.05),rgba(0,229,255,.05))}
.ai-feat__visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ai-feat:hover .ai-feat__visual img{transform:scale(1.05)}
.ai-feat__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--primary);opacity:.1;animation:mechBuild 5s ease-in-out infinite}
@keyframes mechBuild{0%,100%{transform:scale(1) rotate(0deg);opacity:.1}25%{transform:scale(1.1) rotate(5deg);opacity:.15}50%{transform:scale(.95) rotate(-3deg);opacity:.2}75%{transform:scale(1.05) rotate(2deg);opacity:.12}}
.ai-feat__body{padding:2rem 2.5rem 2rem 1.5rem}
.ai-feat--reverse .ai-feat__body{padding:2rem 1.5rem 2rem 2.5rem}
.ai-feat__icon{width:46px;height:46px;background:linear-gradient(135deg,var(--primary),var(--cyan));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;margin-bottom:1rem;transition:transform .4s var(--bounce)}
.ai-feat:hover .ai-feat__icon{transform:scale(1.12) rotate(5deg)}
.ai-feat__body h3{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:.2rem}
.ai-feat__body h4{font-size:.82rem;color:var(--txt3);font-weight:500;margin-bottom:.7rem}
.ai-feat__body p{font-size:.9rem;color:var(--txt2);line-height:1.7;margin-bottom:.8rem}
.ai-feat__body ul{list-style:none;padding:0}
.ai-feat__body ul li{padding:.3rem 0 .3rem 1.3rem;position:relative;font-size:.84rem;color:var(--txt3)}
.ai-feat__body ul li::before{content:'✓';position:absolute;left:0;color:var(--cyan);font-weight:700}

/* ═══ PROCESS (reuses sd-process styles from selmdev.css concepts) ═══ */
.ai-process{padding:var(--py) 0}
.ai-process .sd-process__track{max-width:700px;margin:0 auto;position:relative;padding-left:44px}
.ai-process .sd-process__track::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--cyan),var(--primary),var(--accent));border-radius:2px}
.ai-process .sd-step__num{background:linear-gradient(135deg,var(--cyan),var(--primary))}

/* ═══ PRICING (reuse from selmdev) ═══ */
.ai-pricing{padding:var(--py) 0;background:var(--bg2)}
.ai-pricing .sd-pricing__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;align-items:start}
.ai-pricing .price-card--custom{border-style:dashed;border-color:var(--cyan);background:linear-gradient(135deg,rgba(0,229,255,.03),rgba(108,43,217,.03))}
.ai-pricing .price-card--custom:hover{border-color:var(--primary);box-shadow:0 12px 40px rgba(0,229,255,.12)}
.ai-pricing .amount--custom{font-size:1.8rem!important;background:linear-gradient(135deg,var(--cyan),var(--primary))!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .ai-feat{grid-template-columns:1fr}
  .ai-feat--reverse{direction:ltr}
  .ai-feat__visual{min-height:200px}
  .ai-feat__body{padding:1.5rem!important}
  .ai-terminal{display:none}
  .ai-pricing .sd-pricing__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .ai-hero__actions{flex-direction:column;align-items:flex-start}
  .ai-hero__actions .btn{width:100%;max-width:300px}
  .ai-hero__stats{flex-direction:column}
  .neural-node:nth-child(n+6){display:none}
  .ai-pricing .sd-pricing__grid{grid-template-columns:1fr}
}
@media(max-width:480px){.ai-hero{padding-top:90px}}
@media(prefers-reduced-motion:reduce){
  .ai-hero__orb,.neural-node,.n-line,.ai-scan,.ai-feat__ph{animation:none!important;opacity:.1}
  .ai-terminal{display:none}
}