:root {
    --blue: #4a8fff;
    --blue-dark: #1a3f7a;
    --blue-glow: rgba(74,143,255,0.18);
    --glass: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.09);
    --text: #e8edf5;
    --muted: #7a8a9e;
    --bg: #050a12;
    --bg2: #080f1c;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);font-weight:300;overflow-x:hidden;}

  /* NAV */
  nav{position:fixed;top:0;left:0;width:100%;z-index:100;padding:1.4rem 5%;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);background:rgba(5,10,18,0.7);}
  .nav-logo{display:flex;align-items:center;gap:.8rem;}
  .nav-logo img{height:38px;width:38px;object-fit:contain;}
  .nav-logo span{font-weight:200;font-size:1.1rem;letter-spacing:.25em;color:#c5d4ee;}
  .nav-links{display:flex;gap:2.5rem;list-style:none;}
  .nav-links a{color:var(--muted);font-size:.85rem;font-weight:300;text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .3s;}
  .nav-links a:hover{color:var(--blue);}
  .nav-cta{background:transparent;border:1px solid var(--blue);color:var(--blue);padding:.55rem 1.5rem;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:300;letter-spacing:.15em;cursor:pointer;transition:all .3s;text-transform:uppercase;}
  .nav-cta:hover{background:var(--blue);color:#fff;}

  /* HERO */
  #hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:80px 5% 0;overflow:hidden;}
  .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(26,63,122,0.22) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 20%,rgba(74,143,255,0.06) 0%,transparent 60%);}
  .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(74,143,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(74,143,255,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 100% 80% at 50% 50%,black 0%,transparent 75%);}
  .hero-content{position:relative;text-align:center;max-width:900px;}
  .hero-logo{width:110px;height:110px;object-fit:contain;margin-bottom:2.5rem;filter:drop-shadow(0 0 40px rgba(74,143,255,0.5));}
  .hero-tag{font-size:.72rem;font-weight:400;letter-spacing:.35em;color:var(--blue);text-transform:uppercase;margin-bottom:1.6rem;display:flex;align-items:center;justify-content:center;gap:.8rem;}
  .hero-tag::before,.hero-tag::after{content:'';display:block;width:40px;height:1px;background:var(--blue);opacity:.5;}
  .hero-h1{font-size:clamp(2.8rem,7vw,5.5rem);font-weight:100;line-height:1.08;letter-spacing:-.02em;margin-bottom:1.8rem;}
  .hero-h1 em{font-style:normal;font-weight:200;color:var(--blue);}
  .hero-sub{font-size:1.05rem;font-weight:300;color:var(--muted);max-width:560px;margin:0 auto 3rem;line-height:1.8;letter-spacing:.02em;}
  .hero-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;}
  .btn-primary{background:var(--blue);color:#fff;padding:.85rem 2.4rem;font-family:'Outfit',sans-serif;font-size:.88rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:all .3s;}
  .btn-primary:hover{background:#2a6fe0;transform:translateY(-2px);}
  .btn-ghost{background:transparent;color:var(--text);padding:.85rem 2.4rem;font-family:'Outfit',sans-serif;font-size:.88rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--glass-border);cursor:pointer;transition:all .3s;}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
  .scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;}
  .scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--blue),transparent);animation:scrollPulse 2s ease-in-out infinite;}
  @keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}

  /* STATS BAND */
  .stats-band{padding:3rem 5%;background:var(--bg2);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);}
  .stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
  .stat{text-align:center;}
  .stat-num{font-size:2.6rem;font-weight:100;color:var(--blue);letter-spacing:-.03em;font-family:'Outfit',sans-serif;}
  .stat-label{font-size:.75rem;font-weight:300;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:.3rem;}

  /* SECTION WRAPPER */
  section{padding:7rem 5%;}
  .section-inner{max-width:1100px;margin:0 auto;}
  .section-tag{font-size:.7rem;font-weight:400;letter-spacing:.35em;color:var(--blue);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;}
  .section-tag::before{content:'';display:block;width:30px;height:1px;background:var(--blue);opacity:.6;}
  .section-h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:100;letter-spacing:-.02em;line-height:1.15;margin-bottom:1rem;}
  .section-h2 span{color:var(--blue);}
  .section-sub{font-size:1rem;font-weight:300;color:var(--muted);max-width:520px;line-height:1.8;margin-bottom:4rem;}

  /* SERVICES */
  #services{background:var(--bg);}
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--glass-border);}
  .service-card{background:var(--bg);padding:2.5rem 2rem;transition:background .4s;cursor:default;position:relative;overflow:hidden;}
  .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0;transition:opacity .4s;}
  .service-card:hover{background:var(--bg2);}
  .service-card:hover::before{opacity:1;}
  .service-icon{width:44px;height:44px;margin-bottom:1.5rem;color:var(--blue);opacity:.8;}
  .service-title{font-size:1.1rem;font-weight:300;letter-spacing:.05em;margin-bottom:.8rem;}
  .service-desc{font-size:.88rem;font-weight:300;color:var(--muted);line-height:1.8;}
  .service-arrow{margin-top:1.5rem;font-size:.72rem;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;opacity:0;transition:opacity .3s;}
  .service-card:hover .service-arrow{opacity:1;}

  /* PROCESS */
  #process{background:var(--bg2);}
  .process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
  .process-steps::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--blue-dark),var(--blue-dark),transparent);}
  .process-step{text-align:center;padding:0 1rem;}
  .step-num{width:56px;height:56px;border:1px solid var(--blue-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:.75rem;font-weight:400;letter-spacing:.1em;color:var(--blue);background:var(--bg2);position:relative;z-index:1;}
  .step-title{font-size:.85rem;font-weight:400;letter-spacing:.08em;margin-bottom:.6rem;}
  .step-desc{font-size:.78rem;font-weight:300;color:var(--muted);line-height:1.7;}

  /* REALISATIONS */
  #realisations{background:var(--bg);}
  .projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}
  .project-card{position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--glass-border);aspect-ratio:16/9;}
  .project-mockup{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem;position:relative;overflow:hidden;}
  .project-card:hover .project-overlay{opacity:1;}
  .project-overlay{position:absolute;inset:0;background:rgba(5,10,18,0.88);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;opacity:0;transition:opacity .4s;padding:2rem;}
  .project-tag-list{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
  .ptag{font-size:.65rem;font-weight:400;letter-spacing:.15em;color:var(--blue);border:1px solid var(--blue-dark);padding:.2rem .7rem;text-transform:uppercase;}
  .project-title{font-size:1.2rem;font-weight:200;letter-spacing:.05em;text-align:center;}
  .project-desc{font-size:.82rem;font-weight:300;color:var(--muted);text-align:center;line-height:1.7;}
  .project-link{font-size:.72rem;font-weight:400;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;border-bottom:1px solid var(--blue-dark);padding-bottom:2px;}
  /* Fake UI mockups */
  .mock-browser{width:100%;background:#0d1826;border:1px solid #1a2d4a;border-radius:4px;}
  .mock-bar{height:24px;background:#0a1520;display:flex;align-items:center;gap:5px;padding:0 10px;}
  .mock-dot{width:7px;height:7px;border-radius:50%;}
  .mock-content{padding:12px;}
  .mock-h{height:8px;background:#1a2d4a;border-radius:2px;margin-bottom:8px;width:60%;}
  .mock-line{height:5px;background:#0f1f35;border-radius:2px;margin-bottom:5px;}
  .mock-chart{height:60px;background:#0d1826;border-radius:4px;margin-top:8px;display:flex;align-items:flex-end;gap:4px;padding:8px 6px 0;}
  .mock-bar-item{background:var(--blue-dark);border-radius:2px 2px 0 0;flex:1;}
  .mock-card{background:#0a1520;border-radius:4px;padding:8px 10px;border:1px solid #1a2d4a;margin-bottom:6px;}

  /* TARIFS */
  #tarifs{background:var(--bg2);}
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--glass-border);}
  .pricing-card{background:var(--bg2);padding:2.8rem 2.2rem;position:relative;}
  .pricing-card.featured{background:#060f1e;border-top:2px solid var(--blue);}
  .price-badge{position:absolute;top:1.8rem;right:1.8rem;font-size:.62rem;font-weight:400;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;border:1px solid var(--blue-dark);padding:.25rem .7rem;}
  .price-tier{font-size:.72rem;font-weight:400;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-bottom:1rem;}
  .price-amount{font-size:2.8rem;font-weight:100;color:var(--text);letter-spacing:-.03em;margin-bottom:.3rem;}
  .price-amount sup{font-size:1.2rem;font-weight:300;vertical-align:super;}
  .price-from{font-size:.72rem;font-weight:300;color:var(--muted);letter-spacing:.1em;margin-bottom:2rem;}
  .price-divider{height:1px;background:var(--glass-border);margin-bottom:1.8rem;}
  .price-features{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-bottom:2.2rem;}
  .price-features li{font-size:.85rem;font-weight:300;color:var(--muted);display:flex;align-items:center;gap:.8rem;}
  .price-features li::before{content:'';display:block;width:4px;height:4px;background:var(--blue);border-radius:50%;flex-shrink:0;}
  .price-features li.on{color:var(--text);}
  .price-btn{width:100%;padding:.85rem;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s;}
  .price-btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--glass-border);}
  .price-btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
  .price-btn-solid{background:var(--blue);color:#fff;border:none;}
  .price-btn-solid:hover{background:#2a6fe0;}

  /* WHY US */
  #why{background:var(--bg);}
  .why-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
  .why-visual{position:relative;}
  .why-orb{width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(26,63,122,0.4),rgba(5,10,18,0));border:1px solid rgba(74,143,255,0.15);display:flex;align-items:center;justify-content:center;position:relative;}
  .why-orb::before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid rgba(74,143,255,0.1);}
  .why-orb::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(74,143,255,0.08);}
  .why-orb-logo{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 30px rgba(74,143,255,0.6));}
  .why-points{display:flex;flex-direction:column;gap:2rem;}
  .why-point{display:flex;gap:1.2rem;align-items:flex-start;}
  .why-point-num{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--blue);margin-top:.15rem;flex-shrink:0;opacity:.7;}
  .why-point-title{font-size:.95rem;font-weight:400;letter-spacing:.05em;margin-bottom:.4rem;}
  .why-point-desc{font-size:.85rem;font-weight:300;color:var(--muted);line-height:1.8;}

  /* TEMOIGNAGES */
  #temoignages{background:var(--bg2);}
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
  .testi-card{background:var(--bg);border:1px solid var(--glass-border);padding:2rem;position:relative;}
  .testi-quote{font-size:3rem;font-weight:100;color:var(--blue);opacity:.3;line-height:.8;margin-bottom:1rem;}
  .testi-text{font-size:.9rem;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:1.5rem;font-style:italic;}
  .testi-author{display:flex;align-items:center;gap:.8rem;}
  .testi-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:400;color:var(--blue);}
  .testi-name{font-size:.85rem;font-weight:400;}
  .testi-role{font-size:.72rem;font-weight:300;color:var(--muted);}
  .testi-stars{color:var(--blue);font-size:.75rem;margin-bottom:.6rem;letter-spacing:.1em;}

  /* CTA BAND */
  #cta{background:var(--bg);padding:5rem 5%;text-align:center;position:relative;overflow:hidden;}
  .cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(26,63,122,0.18),transparent);}
  .cta-inner{position:relative;max-width:700px;margin:0 auto;}
  .cta-h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:100;letter-spacing:-.02em;margin-bottom:1.2rem;}
  .cta-sub{font-size:1rem;font-weight:300;color:var(--muted);margin-bottom:2.5rem;line-height:1.8;}

  /* CONTACT */
  #contact{background:var(--bg2);padding:7rem 5%;}
  .contact-layout{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
  .contact-form{display:flex;flex-direction:column;gap:1rem;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  .form-group{display:flex;flex-direction:column;gap:.4rem;}
  .form-label{font-size:.7rem;font-weight:400;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
  .form-input,.form-textarea,.form-select{background:var(--bg);border:1px solid var(--glass-border);color:var(--text);padding:.75rem 1rem;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:300;outline:none;transition:border-color .3s;}
  .form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--blue);}
  .form-select{appearance:none;}
  .form-textarea{min-height:120px;resize:vertical;}
  .contact-info{display:flex;flex-direction:column;gap:2rem;}
  .contact-item{display:flex;flex-direction:column;gap:.3rem;}
  .contact-item-label{font-size:.7rem;font-weight:400;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;}
  .contact-item-val{font-size:.95rem;font-weight:300;color:var(--text);}
  .contact-social{display:flex;gap:1rem;margin-top:1rem;}
  .social-btn{width:38px;height:38px;border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .3s;font-size:.8rem;}
  .social-btn:hover{border-color:var(--blue);color:var(--blue);}

  /* FOOTER */
  footer{background:var(--bg);border-top:1px solid var(--glass-border);padding:3rem 5% 2rem;}
  .footer-inner{max-width:1100px;margin:0 auto;}
  .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;}
  .footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
  .footer-brand img{height:30px;width:30px;object-fit:contain;}
  .footer-brand span{font-size:.9rem;font-weight:200;letter-spacing:.2em;color:#c5d4ee;}
  .footer-desc{font-size:.82rem;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:1rem;}
  .footer-col-title{font-size:.68rem;font-weight:400;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-bottom:1.2rem;}
  .footer-links{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
  .footer-links a{font-size:.82rem;font-weight:300;color:var(--muted);text-decoration:none;transition:color .3s;}
  .footer-links a:hover{color:var(--blue);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid var(--glass-border);}
  .footer-copy{font-size:.75rem;font-weight:300;color:var(--muted);}

  /* REVEAL ANIMATIONS */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;}
  .reveal.visible{opacity:1;transform:translateY(0);}
  .reveal-delay-1{transition-delay:.1s;}
  .reveal-delay-2{transition-delay:.2s;}
  .reveal-delay-3{transition-delay:.3s;}
  .reveal-delay-4{transition-delay:.4s;}
  .reveal-delay-5{transition-delay:.5s;}

  /* MOBILE NAV */
  .hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px;}
  .hamburger span{display:block;width:22px;height:1px;background:var(--text);}

  @media(max-width:900px){
    .nav-links,.nav-cta{display:none;}
    .hamburger{display:flex;}
    .nav-links{
        position:absolute;
        top:70px;
        right:20px;

        display:flex;
        flex-direction:column;
        gap:20px;

        background:var(--blue-glow);color:#fff;
        padding:20px;
        border-radius:12px;

        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);

        transition:all 0.3s ease;
    }

    .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .services-grid,.pricing-grid,.testi-grid{grid-template-columns:1fr;}
    .projects-grid{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr 1fr;}
    .process-steps::before{display:none;}
    .why-layout,.contact-layout,.footer-top{grid-template-columns:1fr;gap:3rem;}
    .form-row{grid-template-columns:1fr;}
    .stats-inner{grid-template-columns:repeat(2,1fr);}
    .why-orb{width:260px;height:260px;margin:0 auto;}
  }