/* ============================
   explore1.css — supercharged animations
   FUTURISTIC NEON: purple → cyan → green gradients
   Big, bold, motion-first UI; respects reduced-motion.
   ============================ */

/* ---------- Fonts (local + fallback) ---------- */
@font-face { font-family:'regsyne'; src:url('Syne-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'boldsyne'; src:url('Syne-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');

/* ---------- Root variables ---------- */
:root{
  --bg:#090712;
  --panel:#0f0e17;
  --muted:#9aa0a6;
  --accent:#00ff99;       /* neon green */
  --accent-2:#5a47ff;     /* purple */
  --accent-3:#00d1ff;     /* cyan */
  --glass: rgba(255,255,255,0.03);
  --white:#e9eefb;
  --radius:14px;
  --container:1200px;
  --ease: cubic-bezier(.16,.84,.32,1);
  --glow: 0 20px 90px rgba(90,71,245,0.08);
  --card-glow: 0 30px 100px rgba(90,71,245,0.06);
  --spark-size: 10px;
}

/* ---------- Reset/Helpers ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'regsyne', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(900px 420px at 8% 6%, rgba(90,71,255,0.03), transparent 8%),
    linear-gradient(180deg,var(--bg) 0%, #050308 100%);
  color:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;overflow-x:hidden;line-height:1.5;
  transition: transform .32s ease;
}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* small helpers */
.muted{color:var(--muted)}
.small{font-size:.95rem}
.hidden{display:none}
.center{display:flex;align-items:center;justify-content:center}

/* ---------- Floating deco elements ---------- */
.float-deco{
  position:fixed;pointer-events:none;z-index:0;mix-blend-mode:screen;filter:blur(28px);opacity:.06;border-radius:18px;
  transition:transform .9s var(--ease), opacity .8s var(--ease);
}
.deco-a{left:-8%;top:10%;width:420px;height:220px;background:linear-gradient(120deg,var(--accent-2),var(--accent));animation:floatA 12s ease-in-out infinite}
.deco-b{right:-6%;top:28%;width:320px;height:180px;background:linear-gradient(120deg,var(--accent-3),var(--accent-2));animation:floatB 14s ease-in-out infinite}
.deco-c{left:20%;bottom:-8%;width:260px;height:150px;background:linear-gradient(120deg,var(--accent),var(--accent-3));animation:floatC 9s ease-in-out infinite}
@keyframes floatA{0%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-18px) rotate(2deg) scale(1.02)}100%{transform:translateY(0) rotate(-2deg) scale(1)}}
@keyframes floatB{0%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-12px) rotate(-1deg)}100%{transform:translateY(0) rotate(2deg)}}
@keyframes floatC{0%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-8px) rotate(-1deg)}100%{transform:translateY(0) rotate(1deg)}}

/* ---------- Header ---------- */
.header.enhanced{position:fixed;left:0;right:0;top:0;z-index:140;backdrop-filter:blur(10px);background:linear-gradient(180deg, rgba(6,6,8,0.55), rgba(6,6,8,0.08));border-bottom:1px solid rgba(255,255,255,0.02)}
.header .header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:12px}
.logo{font-family:'boldsyne';letter-spacing:2px;font-size:1.05rem;color:var(--white);text-decoration:none}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;padding:8px 10px;border-radius:8px;transition:all .18s var(--ease)}
.nav a:hover{color:var(--white);transform:translateY(-3px);background:rgba(255,255,255,0.02)}
.menu-btn{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:10px;cursor:pointer;backdrop-filter: blur(6px)}

/* mobile menu (hidden by default) */
.mobile-menu{position:fixed;top:64px;right:20px;width:260px;background:linear-gradient(180deg, rgba(90,71,255,0.12), rgba(0,0,0,0.6));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 28px 80px rgba(0,0,0,0.6);opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .28s var(--ease), transform .28s var(--ease);pointer-events:none}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-nav{display:flex;flex-direction:column;gap:10px}
.mobile-nav a{color:var(--white);text-decoration:none;padding:8px;border-radius:8px}

/* ---------- Hero / About top ---------- */
.about-section{position:relative;padding-top:96px;padding-bottom:40px;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;padding:40px 20px;min-height:64vh}
.hero-text{max-width:720px}
.gradient-text{font-family:'boldsyne';font-size:clamp(2rem,6.5vw,3.4rem);display:inline-block;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.headline-split .word{display:inline-block;margin-right:8px;opacity:0;transform:translateY(12px) rotateX(6deg);transition:transform .7s var(--ease), opacity .6s ease}
.headline-split .word.visible{opacity:1;transform:translateY(0) rotateX(0)}
.lead{color:#cbd5d9;margin-top:14px;font-size:1.05rem;max-width:68ch}

/* small animated subtitle underline */
.meta.small{margin-top:14px;display:inline-flex;align-items:center;gap:10px}
.meta.small::before{content:'';width:44px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.18;transform:translateY(4px);display:inline-block}

/* hero CTA row */
.hero-cta-row{margin-top:20px;display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;color:var(--white);border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden;will-change:transform}
.btn-primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#020202;border:none;box-shadow:var(--glow)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--white)}
.btn.small{padding:8px 12px;font-size:.95rem}
.btn:active{transform:translateY(-1px) scale(.995)}

/* btn ripple helper */
.btn-ripple{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.1));filter:blur(6px);opacity:.9}

/* magnetic highlight glow on hover */
.btn::after{
  content:'';position:absolute;inset:-40% -20% -40% -20%;background:radial-gradient(circle at 10% 10%, rgba(90,71,245,0.12), transparent 10%), radial-gradient(circle at 85% 85%, rgba(0,255,153,0.06), transparent 8%);opacity:0;transition:opacity .36s var(--ease);
}
.btn:hover::after{opacity:1;transform:translateY(-6px)}

/* hero media */
.hero-media{display:flex;align-items:center;justify-content:center}
.media-wrap{position:relative;width:420px;max-width:48vw;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.about-image{width:100%;display:block;transform-origin:center center;transition:transform .9s var(--ease);will-change:transform}
.media-orb{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--accent-3));box-shadow:0 12px 40px rgba(0,255,153,0.08);opacity:.95}

/* small animated sheen across the image */
.media-wrap::after{
  content:'';position:absolute;left:-30%;top:-20%;width:160%;height:160%;background:linear-gradient(120deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0) 40%);transform:rotate(-24deg);mix-blend-mode:screen;pointer-events:none;filter:blur(8px);
  animation:slideSheen 8.6s linear infinite;
}
@keyframes slideSheen{0%{transform:translateX(-100%) rotate(-24deg)}100%{transform:translateX(100%) rotate(-24deg)}}

/* ---------- Mission / Stats ---------- */
.mission{padding:48px 20px}
.mission-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
.mission-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));padding:22px;border-radius:12px;box-shadow:var(--card-glow)}
.card-glass{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.18));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--glow)}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stat{min-width:110px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.22));padding:12px;border-radius:10px;text-align:center;transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.stat:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(90,71,245,0.06)}
.num{font-family:'boldsyne';font-size:1.6rem;color:var(--accent-2)}

/* tiny pulsing dot at stat */
.stat .label{color:var(--muted);margin-top:6px;display:block}
.stat::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-bottom:6px;opacity:.9;transform:translateY(-4px)}

/* ---------- Services / Tech ---------- */
.services{padding:56px 20px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02))}
.services-wrap{max-width:var(--container);margin:0 auto;padding:10px}
.section-title{font-family:'boldsyne';font-size:1.8rem;color:var(--white);margin-bottom:6px;display:inline-block}
.scribble-underline{position:relative;display:inline-block;padding-bottom:8px}
.scribble-underline::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:skewX(-10deg) scaleX(0);transform-origin:left center;transition:transform .48s var(--ease);border-radius:6px}
.scribble-underline.visible::after{transform:skewX(-10deg) scaleX(1)}

.tech-shelf{display:flex;gap:24px;align-items:center;margin-top:20px}
.tech-card{width:360px;border-radius:12px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.28));box-shadow:var(--glow);transition:transform .6s var(--ease)}
.tech-card:hover{transform:translateY(-8px) rotateZ(-0.4deg)}
.tech-image{width:100%;border-radius:10px}
.tech-list{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px}
.tech-item{padding:10px;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));font-weight:600;color:var(--muted)}

/* fancy tech-card floating glow */
.tech-card::after{content:'';position:absolute;inset:auto -20% -20% -20%;background:linear-gradient(90deg, rgba(90,71,245,0.06), rgba(0,255,153,0.02));transform:rotate(6deg);opacity:0;transition:opacity .6s}
.tech-card:hover::after{opacity:1}

/* ---------- Team ---------- */
.team{padding:56px 20px}
.team-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.team-card{width:280px;padding:22px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.28));box-shadow:0 20px 60px rgba(0,0,0,0.6);text-align:center;transition:transform .4s var(--ease), box-shadow .4s var(--ease);position:relative;overflow:visible}
.team-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 44px 140px rgba(90,71,245,0.08)}
.team-card::before{content:'';position:absolute;left:50%;top:-28px;width:140px;height:120px;transform:translateX(-50%);background:radial-gradient(circle at 30% 30%, rgba(90,71,245,0.08), transparent 20%);border-radius:20px;opacity:0.8;pointer-events:none}
.avatar{width:72px;height:72px;border-radius:14px;margin:0 auto 12px;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 10px 26px rgba(0,0,0,0.6)}
.card-name{font-weight:700;margin-bottom:8px}
.card-role{color:var(--muted);font-size:.95rem;line-height:1.3}

/* avatar color variants */
.avatar-a{background:linear-gradient(90deg,#5a47ff,#00ff99)}
.avatar-b{background:linear-gradient(90deg,#00d1ff,#5a47ff)}
.avatar-c{background:linear-gradient(90deg,#00ff99,#00d1ff)}

/* tiny animated ribbon on team-card hover */
.team-card .ribbon{position:absolute;right:12px;top:12px;padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#031214;font-weight:700;opacity:0;transform:translateY(-6px)}
.team-card:hover .ribbon{opacity:1;transform:none;transition:all .36s var(--ease)}

/* ---------- Showcase ---------- */
.showcase{padding:48px 20px}
.showcase-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{display:inline-block;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));text-decoration:none;color:var(--white);border:1px solid rgba(255,255,255,0.03);transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.pill:hover{transform:translateY(-6px);box-shadow:0 28px 72px rgba(90,71,245,0.06)}

/* mock window SVG polish */
.mock-window{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 20px 80px rgba(0,0,0,0.6);transition:transform .5s var(--ease)}
.mock-window:hover{transform:translateY(-6px)}

/* ---------- Footer ---------- */
.footer{padding:56px 20px;border-top:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, rgba(0,0,0,0.18), transparent)}
.footer-container{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.subscribe-form{display:flex;gap:8px;align-items:center}
.subscribe-form input{padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white);outline:none}
.subscribe-form button{padding:10px 14px;border-radius:999px;border:none;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#020202;font-weight:700;cursor:pointer}
.subscribe-form button.joined{background:linear-gradient(90deg,#6ef2c4,#b8ffef);color:#041010}

/* ---------- Reveal helper ---------- */
.reveal{opacity:0;transform:translateY(18px) scale(.997);transition:opacity .88s var(--ease), transform .88s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ---------- Floating card animation helper ---------- */
.floating-card{will-change:transform;transform-origin:center;transition:transform 0.6s var(--ease)}

/* ---------- Cursor elements ---------- */
.cursor-dot{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;background:var(--accent);box-shadow:0 8px 26px rgba(0,255,153,0.08);opacity:0.95;transition:transform .12s linear}
.cursor-ring{position:fixed;left:0;top:0;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9998;border:2px solid rgba(90,71,245,0.12);opacity:.9;transition:transform .18s linear,opacity .18s linear}

/* ---------- SPARK ELEMENT (spawned by JS) ---------- */
.spark{
  position:fixed;z-index:99999;pointer-events:none;width:8px;height:8px;border-radius:50%;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);mix-blend-mode:screen;opacity:0.92;
}

/* ---------- EXTRA ANIMATIONS: text wave, flicker, neon scan ---------- */
/* subtle floating word */
.word.floating{display:inline-block;animation:wordFloat 5.8s ease-in-out infinite}
@keyframes wordFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* neon flicker (used sparingly) */
.neon-flicker{animation:neonFlicker 3.6s linear infinite}
@keyframes neonFlicker{
  0%{text-shadow:0 0 0 rgba(90,71,245,0)}
  10%{text-shadow:0 10px 40px rgba(90,71,245,0.12)}
  40%{text-shadow:0 4px 20px rgba(90,71,245,0.06)}
  100%{text-shadow:0 0 0 rgba(90,71,245,0)}
}

/* horizontal gradient scan for background areas */
.scan-zone{position:relative;overflow:hidden}
.scan-zone::after{content:'';position:absolute;left:-40%;top:-10%;width:160%;height:120%;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.12), rgba(255,255,255,0.02));transform:skewX(-18deg);opacity:0.08;pointer-events:none;animation:scan 12s linear infinite}
@keyframes scan{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(100%) skewX(-18deg)}}

/* ---------- Interaction micro-animations ---------- */
.team-card:active, .tech-card:active{transform:scale(.995)}
.project-card:active{transform:translateZ(0) scale(.994)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 360px}
  .mission-grid{grid-template-columns:1fr}
  .tech-shelf{flex-direction:column}
  .showcase-grid{grid-template-columns:1fr}
  .team-cards{justify-content:center}
}
@media (max-width:720px){
  .desktop-nav{display:none}
  .menu-btn{display:inline-block}
  .hero-grid{grid-template-columns:1fr;gap:20px;padding:20px}
  .hero-media{order:2}
  .hero-text{order:1;text-align:center}
  .float-deco{display:none}
  .cursor-dot,.cursor-ring{display:none}
  .container{padding:0 14px}
  .gradient-text{font-size:2rem}
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms!important;animation-duration:0.001ms!important}
  .float-deco{display:none}
  .hero-media,.floating-card{animation:none;transform:none}
  canvas#hero-canvas{display:none}
  .scan-zone::after{display:none}
  .spark{display:none}
}

/* ---------- tiny polish ---------- */
a{-webkit-tap-highlight-color:transparent}

/* EOF - enjoy the spice 🌶️ - ANAS*/


/* ===========================
   MOBILE RESPONSIVE ALIGNMENT
   =========================== */

/* Tablets & below */
@media (max-width: 1024px) {
  .hero-grid,
  .mission-grid,
  .showcase-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-media,
  .mission-card,
  .tech-shelf,
  .showcase img,
  .team-cards {
    margin: 0 auto;
  }

  .hero-cta-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .tech-shelf {
    flex-direction: column;
    align-items: center;
  }
}

/* Phones */
@media (max-width: 640px) {
  .container{ padding: 0 14px; }

  .hero-grid{
    padding-top: 40px;
    gap: 24px;
  }

  .media-wrap{ width: 100%; max-width: 340px; }

  .hero-text .gradient-text{
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  .tech-card{ width: 100%; }
  .team-card{ width: 100%; max-width: 320px; }

  /* Nav goes centered on mobile */
  .nav { display: none; }
  .menu-btn { display: block; }

  .footer-container{
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .subscribe-form{
    flex-direction: column;
    width: 100%;
  }

  .subscribe-form input,
  .subscribe-form button{
    width: 100%;
  }
}

/* Extra small screens */
@media (max-width: 420px){
  .gradient-text{
    line-height: 1.15;
  }
  .hero-cta-row{
    gap: 10px;
  }
}