/* =========================================================
   WEBMATRIX HERO — SCOPED CSS
   Sab kuch .wm-hero ke andar mehdood hai.
   Doosri files/sections ko affect nahi karega.
   ========================================================= */

/* ---------- Scoped variables (sirf hero ke liye) ---------- */
.wm-hero{
  --wm-orange:#e17d25;
  --wm-orange-2:#ff9d4d;
  --wm-bg:#050608;
  --wm-white:#f7f7f5;
  --wm-muted:#a6a8ad;
  --wm-line:rgba(255,255,255,.09);

  font-family:Inter,Arial,sans-serif;
}

/* Box-sizing sirf hero ke andar */
.wm-hero,
.wm-hero *,
.wm-hero *::before,
.wm-hero *::after{
  box-sizing:border-box;
}

/* =========================================================
   HERO BASE
   ========================================================= */
.wm-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:760px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 72% 48%,rgba(225,125,37,.13),transparent 25%),
    radial-gradient(circle at 20% 75%,rgba(225,125,37,.06),transparent 24%),
    #050608;
  color:var(--wm-white);
}

.wm-hero-inner{
  width:min(1240px,calc(100% - 48px));
  margin:auto;
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:20px;
  position:relative;
  z-index:3;
}

.wm-copy{padding:80px 0 70px;max-width:650px}

.wm-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.18em;font-weight:700;
  color:#c9c9c9;margin-bottom:24px;
}
.wm-eyebrow span{
  width:7px;height:7px;border-radius:50%;
  background:var(--wm-orange);
  box-shadow:0 0 18px rgba(225,125,37,.9);
}

.wm-copy h1{
  font-size:clamp(48px,6vw,84px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 26px;
  font-weight:800;
  max-width:680px;
}

.wm-gradient{
  color:var(--wm-orange);
  text-shadow:0 0 50px rgba(225,125,37,.16);
}

.wm-lead{
  color:var(--wm-muted);
  font-size:17px;
  line-height:1.75;
  max-width:570px;
  margin:0 0 34px;
}

.wm-actions{display:flex;gap:12px;flex-wrap:wrap}

.wm-btn{
  text-decoration:none;
  color:#fff;
  padding:15px 20px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  gap:18px;
  align-items:center;
  transition:.3s ease;
  border:1px solid var(--wm-line);
}
.wm-btn b{font-size:17px;font-weight:500}

.wm-btn-primary{
  background:var(--wm-orange);
  border-color:var(--wm-orange);
  box-shadow:0 12px 40px rgba(225,125,37,.2);
}
.wm-btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(225,125,37,.3);
}

.wm-btn-secondary{
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px);
}
.wm-btn-secondary:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-3px);
}

.wm-trust{
  margin-top:30px;color:#777b83;font-size:11px;
  display:flex;align-items:center;gap:9px;
}
.wm-trust strong{color:#ddd}
.wm-trust em{height:12px;width:1px;background:#333;display:block}
.wm-status{
  width:6px;height:6px;border-radius:50%;
  background:#7bdb9b;box-shadow:0 0 12px #7bdb9b;
}

/* =========================================================
   VISUAL / BOT
   ========================================================= */
.wm-visual{
  position:relative;height:610px;
  perspective:900px;transform-style:preserve-3d;
}

.wm-core-wrap{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:4;
  width:270px;height:270px;
  display:flex;align-items:center;justify-content:center;
}

.wm-core{
  width:190px;height:190px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#252321,#0a0b0d 60%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 90px rgba(225,125,37,.13),inset 0 0 50px rgba(225,125,37,.07);
  animation:wmHeroFloat 5s ease-in-out infinite;
}
.wm-core:before{
  content:"";position:absolute;inset:22px;border-radius:50%;
  border:1px solid rgba(225,125,37,.4);
  box-shadow:inset 0 0 35px rgba(225,125,37,.09),0 0 35px rgba(225,125,37,.12);
}
.wm-core-logo{
  font-size:38px;font-weight:800;letter-spacing:-.08em;
  color:#fff;z-index:3;
}
.wm-core-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(225,125,37,.5);
}
.ring-1{inset:-17px;animation:wmHeroSpin 10s linear infinite;border-left-color:transparent;border-right-color:transparent}
.ring-2{inset:-37px;animation:wmHeroSpinReverse 16s linear infinite;border-top-color:transparent;border-bottom-color:rgba(255,255,255,.18)}
.wm-core-line{position:absolute;width:34px;height:1px;background:var(--wm-orange);opacity:.8}
.line-1{top:39px;right:19px;transform:rotate(35deg)}
.line-2{bottom:39px;left:19px;transform:rotate(35deg)}

.wm-orbit{
  position:absolute;left:50%;top:50%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
}
.wm-orbit-a{width:430px;height:230px;animation:wmHeroOrbit 12s linear infinite}
.wm-orbit-b{width:520px;height:300px;animation:wmHeroOrbitReverse 17s linear infinite}
.wm-orbit-c{width:620px;height:380px;border-color:rgba(225,125,37,.09);animation:wmHeroOrbit 22s linear infinite}

/* ---------- Chips ---------- */
.wm-chip{
  position:absolute;display:flex;align-items:center;gap:10px;
  padding:10px 13px;
  background:rgba(13,14,16,.78);
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  backdrop-filter:blur(14px);
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.wm-chip>span{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:8px;background:rgba(225,125,37,.1);
  color:var(--wm-orange);font-size:14px;
}
.wm-chip small{display:block;color:#666;font-size:7px;letter-spacing:.12em;margin-bottom:3px}
.wm-chip b{display:block;font-size:10px;letter-spacing:.02em}

.chip-erp{left:2%;top:23%;animation:wmHeroFloat 5.5s 1s ease-in-out infinite}
.chip-ai{right:0;top:18%;animation:wmHeroFloat 5s .4s ease-in-out infinite}
.chip-cloud{right:2%;bottom:20%;animation:wmHeroFloat 6s 1.5s ease-in-out infinite}
.chip-crm{left:5%;bottom:18%;animation:wmHeroFloat 5.8s .8s ease-in-out infinite}
.chip-chatbot{left:-3%;top:47%;animation:wmHeroFloat 5.7s 1.2s ease-in-out infinite}
.chip-automation{right:-4%;top:48%;animation:wmHeroFloat 5.3s 1.9s ease-in-out infinite}

/* ---------- Data labels ---------- */
.wm-data{position:absolute;font:600 8px/1 Inter,sans-serif;color:#555;letter-spacing:.16em}
.data-1{left:17%;top:8%}
.data-2{right:12%;bottom:8%;color:#68492f}

/* ---------- Background layers ---------- */
.wm-grid{
  position:absolute;inset:0;opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 75%,transparent);
}
.wm-noise{
  position:absolute;inset:0;opacity:.035;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.wm-glow{
  position:absolute;width:400px;height:400px;border-radius:50%;
  filter:blur(110px);pointer-events:none;opacity:.1;
}
.wm-glow-1{background:var(--wm-orange);right:8%;top:20%}
.wm-glow-2{background:#fff;left:-15%;bottom:-20%;opacity:.025}

.wm-particles{position:absolute;inset:0;z-index:1}
.wm-particles i{
  position:absolute;left:var(--x);top:var(--y);
  width:2px;height:2px;background:#aaa;border-radius:50%;
  animation:wmHeroParticle 4s var(--d) ease-in-out infinite;
}

.wm-scroll{
  position:absolute;bottom:25px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:.2em;color:#555;z-index:4;
}
.wm-scroll span{
  display:inline-block;width:25px;height:1px;background:#555;
  vertical-align:middle;margin-right:8px;
}

/* =========================================================
   KEYFRAMES (renamed with wmHero prefix — no clash)
   ========================================================= */
@keyframes wmHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wmHeroSpin{to{transform:rotate(360deg)}}
@keyframes wmHeroSpinReverse{to{transform:rotate(-360deg)}}
@keyframes wmHeroOrbit{to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes wmHeroOrbitReverse{to{transform:translate(-50%,-50%) rotate(-378deg)}}
@keyframes wmHeroParticle{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:.8;transform:translateY(-16px)}}
@keyframes wmHeroBotFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(.7deg)}}
@keyframes wmHeroBotGlow{0%,100%{opacity:.65;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* =========================================================
   BOT / MASCOT
   ========================================================= */
.wm-bot-glow{
  position:absolute;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(225,125,37,.24),rgba(225,125,37,.04) 48%,transparent 72%);
  filter:blur(18px);
  animation:wmHeroBotGlow 4s ease-in-out infinite;
}
.wm-ai-bot{
  position:relative;z-index:3;width:330px;max-width:none;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 25px 35px rgba(0,0,0,.45))
         drop-shadow(0 0 35px rgba(225,125,37,.16));
  animation:wmHeroBotFloat 5s ease-in-out infinite;
  pointer-events:none;user-select:none;
}

/* =========================================================
   RESPONSIVE — 900px
   ========================================================= */
@media(max-width:900px){
  .wm-hero{min-height:850px}
  .wm-hero-inner{grid-template-columns:1fr;min-height:850px}
  .wm-copy{text-align:center;margin:auto;padding:85px 0 0}
  .wm-copy h1{margin-left:auto;margin-right:auto}
  .wm-lead{margin-left:auto;margin-right:auto}
  .wm-actions{justify-content:center}
  .wm-trust{justify-content:center;flex-wrap:wrap}
  .wm-visual{height:390px;margin-top:-10px;transform:scale(.8)}
  .wm-scroll{display:none}

  .wm-ai-bot{width:310px}
  .chip-chatbot{left:0;top:48%}
  .chip-automation{right:0;top:49%}
}

/* =========================================================
   RESPONSIVE — 560px
   ========================================================= */
@media(max-width:560px){
  .wm-hero-inner{width:min(100% - 28px,1240px)}
  .wm-copy{padding-top:65px}
  .wm-copy h1{font-size:46px}
  .wm-lead{font-size:14px}
  .wm-eyebrow{font-size:9px}

  .wm-ai-bot{width:340px}
  .wm-core-wrap{width:260px;height:260px}
  .wm-chip{transform:scale(.95)}
}

/* =========================================================
   LIGHT THEME — White + Orange
   ========================================================= */
.wm-hero{
  background:
    radial-gradient(circle at 73% 45%, rgba(225,125,37,.14), transparent 27%),
    radial-gradient(circle at 20% 82%, rgba(225,125,37,.07), transparent 25%),
    linear-gradient(135deg,#ffffff 0%,#fafafa 52%,#fff8f1 100%);
  color:#161616;
}
.wm-grid{
  opacity:.55;
  background-image:
    linear-gradient(rgba(20,20,20,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.045) 1px,transparent 1px);
}
.wm-copy h1{color:#111}
.wm-gradient{color:var(--wm-orange);text-shadow:0 0 45px rgba(225,125,37,.12)}
.wm-eyebrow{color:#666}
.wm-lead{color:#65676c}
.wm-btn{color:#171717;border-color:rgba(20,20,20,.11)}
.wm-btn-primary{color:#fff;background:var(--wm-orange);border-color:var(--wm-orange)}
.wm-btn-secondary{
  color:#222;background:rgba(255,255,255,.72);
  border-color:rgba(20,20,20,.12);
  box-shadow:0 10px 30px rgba(20,20,20,.06);
}
.wm-btn-secondary:hover{background:#fff}
.wm-trust{color:#888}
.wm-trust strong{color:#333}
.wm-trust em{background:#d9d9d9}
.wm-data{color:#8a8a8a}
.data-2{color:#a86b35}

.wm-orbit{border-color:rgba(20,20,20,.10)}
.wm-orbit-c{border-color:rgba(225,125,37,.15)}

.wm-chip{
  background:rgba(255,255,255,.86);
  border-color:rgba(20,20,20,.10);
  box-shadow:0 18px 45px rgba(25,25,25,.10);
  color:#222;
}
.wm-chip small{color:#8b8b8b}
.wm-chip b{color:#222}
.wm-chip>span{
  background:rgba(225,125,37,.10);
  color:var(--wm-orange);
}
.wm-noise{opacity:.018}
.wm-glow-1{opacity:.07}
.wm-glow-2{background:#000;opacity:.012}
.wm-particles i{background:#777}
.wm-scroll{color:#888}
.wm-scroll span{background:#aaa}

.wm-ai-bot{
  filter:
    drop-shadow(0 25px 35px rgba(0,0,0,.18))
    drop-shadow(0 0 34px rgba(225,125,37,.12));
}
.wm-bot-glow{
  background:
    radial-gradient(circle,
      rgba(225,125,37,.20),
      rgba(225,125,37,.055) 48%,
      transparent 72%);
}

/* =========================================================
   MOBILE FIX — 560px — 6 cards around bot
   ========================================================= */
@media (max-width:560px){
  .wm-hero{overflow:hidden}

  .wm-visual{
    height:480px;
    margin-top:-5px;
    transform:none;
    position:relative;
  }

  .wm-core-wrap{
    width:230px;height:230px;
    z-index:4;top:50%;left:50%;
  }

  .wm-ai-bot{width:245px;max-width:none}

  .wm-chip{
    z-index:8;
    transform:scale(.78);
    white-space:nowrap;
    box-shadow:0 12px 28px rgba(25,25,25,.12);
  }
  .wm-chip:hover{transform:scale(.80)}

  .chip-erp{left:2%;top:4%}
  .chip-ai{right:2%;top:4%}
  .chip-chatbot{left:-2%;top:42%}
  .chip-automation{right:-2%;top:42%}
  .chip-crm{left:2%;bottom:5%;top:auto}
  .chip-cloud{right:2%;bottom:5%;top:auto}

  .wm-orbit-a{width:350px;height:190px}
  .wm-orbit-b{width:410px;height:235px}
  .wm-orbit-c{width:470px;height:285px}

  .wm-data{display:none}
}