/* ----------------- Variables & Reset ----------------- */
  :root{
    --blue-900:#032b5b;
    --blue-700:#0b66ff;
    --blue-500:#4fb3ff;
    --sky-200:#eaf7ff;
    --white:#ffffff;
    --glass: rgba(255,255,255,0.6);
    --card-shadow: 0 18px 50px rgba(11,102,255,0.08);
    --duration: 0.9s;
    --ease: cubic-bezier(.22,.9,.34,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;-webkit-font-smoothing:antialiased;background:linear-gradient(180deg,var(--white),#f7fbff);color:var(--blue-900);overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  /* ----------------- Page layout ----------------- */
  .wrap{max-width:1200px;margin:28px auto;padding:28px}
  header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 4px}
  .brand{display:flex;align-items:center;gap:14px}
  .logo{
    width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:28px;
    box-shadow:0 20px 50px rgba(11,102,255,0.18);position:relative;overflow:hidden;
    animation:logo-top 4s var(--ease) infinite;
  }
  @keyframes logo-top{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
  nav{display:flex;gap:18px;align-items:center}
  nav a{font-weight:700;color:var(--blue-700);position:relative;padding:6px 8px;border-radius:8px}
  nav a::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:3px;background:linear-gradient(90deg,var(--blue-700),var(--blue-500));border-radius:6px;transform:scaleX(0);transform-origin:left;transition:transform .35s}
  nav a:hover::after{transform:scaleX(1)}

  /* ----------------- Animated background shapes ----------------- */
  .bg-shapes{
    position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  }
  .bg-shapes .circle{
    position:absolute;border-radius:50%;filter:blur(28px);opacity:.12;
    animation:floaty 18s linear infinite;
  }
  .c1{width:420px;height:420px;background:radial-gradient(circle,#0b66ff,#4fb3ff);left:-12%;bottom:-8%}
  .c2{width:340px;height:340px;background:radial-gradient(circle,#59a6ff,#ffffff);right:-6%;top:-12%;animation-duration:22s}
  .c3{width:240px;height:240px;background:radial-gradient(circle,#0b66ff,#59a6ff);left:40%;top:-10%;opacity:.08;animation-duration:25s}
  @keyframes floaty{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-32px) rotate(6deg)}100%{transform:translateY(0) rotate(0deg)}}


  /* Team */

 



  /* ----------------- Hero ----------------- */
  .hero{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;margin-top:10px}
  .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,255,255,0.95));border-radius:20px;padding:34px;box-shadow:var(--card-shadow);backdrop-filter:blur(6px);border:1px solid rgba(11,102,255,0.06);overflow:hidden}
  .kicker{display:inline-block;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,var(--blue-500),var(--blue-700));color:#fff;font-weight:800;letter-spacing:.6px;margin-bottom:14px}
  .hero h1{font-size:34px;line-height:1.03;color:var(--blue-900);margin-bottom:12px;animation:fade-up var(--duration) var(--ease) both}
  .hero p{color:rgba(3,43,91,0.85);margin-bottom:18px;font-size:16px;animation:fade-up .95s var(--ease) both}
  .cta-row{display:flex;gap:12px;align-items:center}
  .btn{
    display:inline-block;padding:12px 20px;border-radius:12px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--blue-700),var(--blue-500));
    box-shadow:0 18px 46px rgba(11,102,255,0.14);position:relative;overflow:hidden;transition:transform .22s;
  }
  .btn:hover{transform:translateY(-6px)}
  /* shine effect */
  .btn::after{content:'';position:absolute;left:-60%;top:-30%;width:40%;height:160%;background:linear-gradient(120deg,rgba(255,255,255,0.18),rgba(255,255,255,0.06),rgba(255,255,255,0.18));transform:skewX(-20deg);transition:all .85s}
  .btn:hover::after{left:120%}
  .btn.ghost{background:transparent;color:var(--blue-700);border:2px solid rgba(11,102,255,0.12)}

  /* typing subtitle (pure CSS) */
  .type-wrap{font-weight:800;color:var(--blue-700);font-size:18px;height:30px;margin-bottom:14px;white-space:nowrap;overflow:hidden}
  .type{display:inline-block;animation:typing 4s steps(28,end) infinite, blink .8s step-end infinite}
  @keyframes typing{0%{width:0}30%{width:100%}70%{width:100%}100%{width:0}}
  @keyframes blink{50%{border-right:2px solid rgba(3,43,91,0.9)}}

  /* device mock */
  .device{
    background:linear-gradient(180deg,#f7fbff,#fff);border-radius:18px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    box-shadow:0 28px 60px rgba(11,102,255,0.06);border:1px solid rgba(11,102,255,0.06)
  }
  .device .box{width:260px;height:200px;border-radius:16px;background:linear-gradient(180deg,#fff,#f2fbff);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--blue-700);font-size:22px;box-shadow:0 24px 46px rgba(11,102,255,0.08);position:relative;overflow:hidden}
  .device .box::after{content:'';position:absolute;inset:-8px;background:radial-gradient(circle at 10% 10%, rgba(11,102,255,0.05), transparent 25%);z-index:0}
  .device small{display:block;margin-top:12px;color:rgba(3,43,91,0.7);font-weight:700}

  /* ----------------- Sections & grid ----------------- */
  section{padding:56px 0}
  .section-title{font-size:26px;color:var(--blue-700);text-align:center;margin-bottom:18px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
  .card{
    background:#fff;border-radius:14px;padding:18px;box-shadow:0 14px 36px rgba(2,43,91,0.04);transition:transform .36s var(--ease),box-shadow .36s;
    transform-origin:center;
  }
  .card:hover{transform:translateY(-12px) rotate(-.6deg);box-shadow:0 28px 56px rgba(11,102,255,0.09)}

  /* flip-card effect (pure css) */
  .flip-wrap{perspective:1200px}
  .flip{
    width:100%;height:220px;border-radius:12px;position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease)
  }
  .flip-wrap:hover .flip{transform:rotateY(180deg)}
  .flip .face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:18px}
  .front{background:linear-gradient(180deg,#f7fbff,#fff);color:var(--blue-700);box-shadow:inset 0 -8px 18px rgba(11,102,255,0.02)}
  .back{background:linear-gradient(180deg,var(--blue-700),var(--blue-500));color:#fff;transform:rotateY(180deg)}

  /* timeline/problem with slide/fade */
  .timeline{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
  .step{background:#fff;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 10px 28px rgba(2,43,91,0.03)}
  .step .num{min-width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--blue-700),var(--blue-500));color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}

  /* why choose & testimonials */

  /* Why Choose Fluxen */
.features-title {
  font-size: 2rem;
  text-align: center;
  animation: slideDown 1s ease forwards, glowPulse 2s infinite alternate;
}

.qr-card {
  width: 260px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(11,121,208,0.15);
  animation: fadeIn 1.2s ease-in-out;
}

.qr-img {
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  box-shadow: 0 0 0 rgba(11,121,208,0.4);
}

.qr-img:hover {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 0 25px rgba(11,121,208,0.6);
}

/* أنيميشن دخول الكارد */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* أنيميشن scan line فوق الـ QR */
.qr-card {
  position: relative;
  overflow: hidden;
}

.qr-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(
    90deg,
    rgba(11,121,208,0) 0%,
    rgba(11,121,208,0.4) 50%,
    rgba(11,121,208,0) 100%
  );
  animation: scan 2.5s linear infinite;
}

@keyframes scan {
  0% { top: -50%; }
  100% { top: 120%; }
}


.feature-item {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeSlide 1s ease forwards;
}
.feature-item:nth-child(1) {animation-delay: 0.3s;}
.feature-item:nth-child(2) {animation-delay: 0.6s;}
.feature-item:nth-child(3) {animation-delay: 0.9s;}
.feature-item:nth-child(4) {animation-delay: 1.2s;}

.feature-item::before {
  content: "✔";
  margin-right: 10px;
  color: #007BFF;
  animation: bounceCheck 1.5s infinite;
}

/* Testimonials */
.testimonial {
  background: #fff;
  border: 2px solid #007BFF;
  border-radius: 15px;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 0 15px rgba(0,123,255,0.2);
  transform: rotateY(90deg);
  opacity: 0;
  animation: flipIn 1s ease forwards;
}
.testimonial:nth-child(1) {animation-delay: 1.5s;}
.testimonial:nth-child(2) {animation-delay: 2s;}

.testimonial:hover {
  transform: scale(1.05) rotateY(0deg);
  box-shadow: 0 0 25px rgba(0,123,255,0.6);
  transition: all 0.5s ease;
}

/* Call to Action */
.cta {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #007BFF, #00f, #0099ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 5s infinite, wiggle 3s infinite;
  position: relative;
}
.cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 3px;
  background: #007BFF;
  animation: underlineWave 2s infinite;
}

/* Keyframes */
@keyframes slideDown {
  from {opacity: 0; transform: translateY(-50px);}
  to {opacity: 1; transform: translateY(0);}
}
@keyframes glowPulse {
  from {text-shadow: 0 0 5px #007BFF;}
  to {text-shadow: 0 0 20px #00f, 0 0 30px #0099ff;}
}
@keyframes fadeSlide {
  from {opacity: 0; transform: translateX(-50px);}
  to {opacity: 1; transform: translateX(0);}
}
@keyframes bounceCheck {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-4px);}
}
@keyframes flipIn {
  from {opacity: 0; transform: rotateY(90deg);}
  to {opacity: 1; transform: rotateY(0);}
}
@keyframes gradientMove {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
@keyframes wiggle {
  0%, 100% {transform: rotate(0);}
  25% {transform: rotate(2deg);}
  75% {transform: rotate(-2deg);}
}
@keyframes underlineWave {
  0%, 100% {transform: scaleX(0);}
  50% {transform: scaleX(1);}
}

  

  /* contact */
  .contact-form{max-width:520px;margin:0 auto;background:linear-gradient(180deg,#fff,#f9fdff);padding:22px;border-radius:12px;box-shadow:0 20px 46px rgba(11,102,255,0.04)}
  .contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(11,102,255,0.12);margin-bottom:10px;outline:none}
  .contact-form input:focus,.contact-form textarea:focus{box-shadow:0 8px 26px rgba(11,102,255,0.08);border-color:var(--blue-700)}

  /* footer */

  


  /* ----------------- Animations set ----------------- */
  @keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fade-left{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
  @keyframes scale-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  @keyframes slide-in-left{0%{transform:translateX(-80px);opacity:0}100%{transform:translateX(0);opacity:1}}
  @keyframes slide-in-right{0%{transform:translateX(80px);opacity:0}100%{transform:translateX(0);opacity:1}}

  .fade-up{animation:fade-up var(--duration) var(--ease) both}
  .fade-left{animation:fade-left var(--duration) var(--ease) both}
  .scale-in{animation:scale-in .9s var(--ease) both}
  .slide-left{animation:slide-in-left 1s var(--ease) both}
  .slide-right{animation:slide-in-right 1s var(--ease) both}
  .delay-1{animation-delay:.18s}
  .delay-2{animation-delay:.36s}
  .delay-3{animation-delay:.54s}

  /* responsiveness */
  @media(max-width:1000px){
    .hero{grid-template-columns:1fr}
    .why-grid{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .grid-3{grid-template-columns:1fr}
    nav{display:none}
    .logo{width:60px;height:60px;font-size:22px}
  }