@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#05040a;color:#f7f3fb;font-family:'DM Sans';overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 75% 20%,#8d31ff20,transparent 30%),radial-gradient(circle at 10% 70%,#176bff0d,transparent 30%)}a{text-decoration:none;color:inherit}.noise{position:fixed;inset:0;z-index:100;opacity:.025;pointer-events:none;background:#fff}.cursor{position:fixed;width:220px;height:220px;border-radius:50%;pointer-events:none;z-index:90;transform:translate(-50%,-50%);background:radial-gradient(circle,#a44aff18,transparent 68%)}
/* =========================
   HEADER / NAVIGATION
   ========================= */
header{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1240px,calc(100% - 50px));
  min-height:64px;
  padding:8px 14px 8px 18px;
  display:flex;
  align-items:center;
  z-index:50;
  border:1px solid #ffffff10;
  border-bottom:1px solid #ffffff14;
  border-radius:16px;
  background:#05040ab8;
  backdrop-filter:blur(18px);
}
/* Logo + nom */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font:700 14px 'Space Grotesk';
  letter-spacing:2px;
}
.brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px #a33dff90);
}
/* Navigation */
nav{
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:0;
}

nav a{
  position:relative;
  font:500 11px 'Space Grotesk';
  letter-spacing:.5px;
  color:#9992a4;
  transition:
    color .25s ease,
    transform .25s ease;
}
nav a:hover{
  color:#ffffff;
  transform:translateY(-1px);
}
/* Petit bouton */
.small{
  flex-shrink:0;
  font-size:9px;
  padding:11px 15px;
}
/* Bouton principal */
.cta{
  flex-shrink:0;
  display:inline-block;
  border-radius:30px;
  padding:13px 18px;
  background:linear-gradient(
    105deg,
    #7132df,
    #b442ff
  );
  font:700 10px 'Space Grotesk';
  letter-spacing:1px;
  box-shadow:0 18px 60px #8127e52b;
}
/* =========================
   TABLETTE / MOBILE
   ========================= */
@media(max-width:900px){
  header{
    width:calc(100% - 28px);
  }
  nav{
    display:none;
  }
  .brand{
    gap:9px;
  }
}
@media(max-width:620px){
  header{
    top:10px;
    width:calc(100% - 28px);
    min-height:60px;
    padding:7px 10px 7px 12px;
    border-radius:14px;
  }
  .brand img{
    width:40px;
    height:40px;
  }
  .brand b{
    display:none;
  }
  .small{
    padding:10px;
  }
}
.hero{min-height:100vh;width:min(1240px,calc(100% - 50px));margin:auto;position:relative;display:flex;align-items:center}.grid{position:absolute;inset:0;background-image:linear-gradient(#a357ff0a 1px,transparent 1px),linear-gradient(90deg,#a357ff0a 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(#000,transparent 80%)}.copy{position:relative;z-index:5;width:62%;padding-top:40px}.copy>small{font:9px 'Space Grotesk';letter-spacing:3px;color:#aaa2b2}.copy h1{font:600 clamp(57px,7.5vw,108px)/.87 'Space Grotesk';letter-spacing:-6px;margin-top:28px}.copy h1 em{font-style:normal;color:#a54cff;text-shadow:0 0 70px #9d42ff35}.copy>p{max-width:510px;color:#918a9b;line-height:1.75;font-size:13px;margin-top:30px}.actions{display:flex;align-items:center;gap:25px;margin-top:30px}.actions>a:last-child{font:600 10px 'Space Grotesk';letter-spacing:1px;color:#a29aaa}.bottom{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:space-between;color:#625c6b;font:8px 'Space Grotesk';letter-spacing:2px}
.orb{position:absolute;width:590px;height:590px;right:-15px;top:50%;transform:translateY(-50%)}.orb i{position:absolute;left:50%;top:50%;border:1px solid #a54cff2b;border-radius:50%;transform:translate(-50%,-50%) rotate(35deg) scaleY(.35)}.orb i:nth-child(1){width:570px;height:570px}.orb i:nth-child(2){width:430px;height:430px;transform:translate(-50%,-50%) rotate(-32deg) scaleY(.48);border-color:#42caff24}.orb i:nth-child(3){width:300px;height:300px;transform:translate(-50%,-50%) rotate(72deg) scaleY(.55)}.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:185px;height:185px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#6527a970,#090610 67%);box-shadow:0 0 120px #8d30ff35}.core img{width:125px;height:125px;object-fit:contain;filter:drop-shadow(0 0 25px #a145ff99)}.core b{font:8px 'Space Grotesk';letter-spacing:4px;margin-top:-12px}.orb>span{position:absolute;padding:8px 12px;border:1px solid #b05aff33;border-radius:30px;background:#08050eaa;color:#aaa2b1;font:8px 'Space Grotesk';letter-spacing:2px}.orb>span:nth-of-type(1){left:47%;top:2%}.orb>span:nth-of-type(2){left:8%;top:17%}.orb>span:nth-of-type(3){right:5%;top:17%}.orb>span:nth-of-type(4){left:0;top:48%}.orb>span:nth-of-type(5){right:0;top:48%}.orb>span:nth-of-type(6){left:10%;bottom:17%}.orb>span:nth-of-type(7){right:8%;bottom:17%}.orb>span:nth-of-type(8){left:47%;bottom:2%}
.section{width:min(1240px,calc(100% - 50px));margin:auto;border-top:1px solid #fff1;position:relative;padding:32px 0 175px}.section>small{font:600 9px 'Space Grotesk';letter-spacing:3px;color:#756e80}.two{display:grid;grid-template-columns:48% 52%;align-items:end;margin-top:80px}.two>strong{font:600 clamp(85px,13vw,180px) 'Space Grotesk';letter-spacing:-10px;color:#100c16;text-shadow:0 0 1px #a54cff55}.two h2{font:500 clamp(27px,3vw,43px)/1.1 'Space Grotesk';letter-spacing:-1.5px}.two p{max-width:550px;color:#837c8c;font-size:12px;line-height:1.8;margin-top:28px}
.title{display:flex;align-items:end;justify-content:space-between;margin:75px 0 80px}.title h2{font:500 clamp(55px,7vw,92px)/.88 'Space Grotesk';letter-spacing:-5px}.title h2 em{font-style:normal;color:#a54cff}.title>span{font:9px 'Space Grotesk';letter-spacing:2px;color:#6f6878;text-align:right;line-height:1.8}.title>p{max-width:340px;color:#777080;font-size:11px;line-height:1.7}
.services{border-top:1px solid #fff1}.services article{min-height:125px;display:grid;grid-template-columns:60px 1fr 40px;align-items:center;gap:25px;border-bottom:1px solid #fff1;position:relative;overflow:hidden}.services article:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#8c2eff1b,transparent 70%);transform:translateX(-100%);transition:.45s}.services article:hover:before{transform:translateX(0)}.services article>*{position:relative}.services article>small{color:#655e6d}.services h3{font:500 23px 'Space Grotesk';letter-spacing:-.8px}.services p{color:#777080;font-size:10px;line-height:1.65;max-width:650px;margin-top:7px}.services article:hover h3{color:#d18aff}.services article b{font-size:20px;color:#756e80}.product label{display:block;color:#ad55ff;font:8px 'Space Grotesk';letter-spacing:2px;margin-bottom:7px}
.network{height:610px;position:relative;border:1px solid #a04cff12;background:radial-gradient(circle,#822be50b,transparent 50%);margin-top:10px}.network:before{content:"";position:absolute;inset:18%;border:1px solid #a04cff19;border-radius:50%;transform:scaleY(.5) rotate(30deg)}.network:after{content:"";position:absolute;inset:27%;border:1px solid #a04cff13;border-radius:50%;transform:scaleY(.5) rotate(-25deg)}.network .core{width:155px;height:155px}.network button{position:absolute;width:78px;height:38px;border-radius:25px;border:1px solid #a34fff2c;background:#07050daa;color:#8d8596;font:9px 'Space Grotesk';letter-spacing:2px;cursor:pointer;transition:.3s}.network button:hover{color:#fff;border-color:#b252ff;box-shadow:0 0 40px #9b3cff3d;transform:scale(1.12)}.network button:nth-of-type(1){left:calc(50% - 39px);top:7%}.network button:nth-of-type(2){left:25%;top:23%}.network button:nth-of-type(3){right:25%;top:23%}.network button:nth-of-type(4){left:7%;top:calc(50% - 19px)}.network button:nth-of-type(5){right:7%;top:calc(50% - 19px)}.network button:nth-of-type(6){left:25%;bottom:23%}.network button:nth-of-type(7){right:25%;bottom:23%}.network button:nth-of-type(8){left:calc(50% - 39px);bottom:7%}
.why{padding-bottom:70px}.why h2{font:500 clamp(55px,7vw,92px)/.88 'Space Grotesk';letter-spacing:-5px;margin:75px 0}.why em,.vision em{font-style:normal;color:#a54cff}.whygrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #fff1}.whygrid article{min-height:215px;padding:32px 30px 35px 0;border-bottom:1px solid #fff1}.whygrid article:nth-child(3n+2),.whygrid article:nth-child(3n+3){border-left:1px solid #fff1;padding-left:30px}.whygrid b{color:#a54cff;font:9px 'Space Grotesk';letter-spacing:2px}.whygrid h3{font:18px 'Space Grotesk';margin-top:28px}.whygrid p{max-width:260px;color:#777080;font-size:10px;line-height:1.75;margin-top:12px}.vision{min-height:720px;overflow:hidden}.vision>div:first-of-type{margin:100px 0 0 12%;position:relative;z-index:3}.vision h2{font:500 clamp(54px,7vw,105px)/.88 'Space Grotesk';letter-spacing:-5px;margin-top:22px}.rings{position:absolute;right:-70px;top:110px;width:630px;height:630px;border:1px solid #a44fff18;border-radius:50%;transform:scaleY(.62) rotate(25deg);box-shadow:0 0 100px #8d2bff0a}.rings:before,.rings:after{content:"";position:absolute;inset:80px;border:1px solid #a44fff18;border-radius:50%}.rings:after{inset:160px}
.stage{height:430px;border:1px solid #a64cff1e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,#7427d820,transparent 45%)}.stage>small{font:8px 'Space Grotesk';letter-spacing:4px;color:#756e7d}.stage strong{font:500 38px/1 'Space Grotesk';letter-spacing:-1px;margin-top:20px}.contact{min-height:690px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}.contactorb{position:absolute;width:500px;height:500px;border-radius:50%;background:#8229ff12;filter:blur(80px)}.contact>*:not(.contactorb){position:relative}.contact h2{font:500 clamp(57px,8vw,110px)/.86 'Space Grotesk';letter-spacing:-5px;margin-top:25px}.contact h2 em{font-style:normal;color:#a54cff}.contact p{max-width:450px;color:#807889;font-size:12px;line-height:1.7;margin:30px 0}footer{width:min(1240px,calc(100% - 50px));margin:auto;border-top:1px solid #fff1;padding:35px 0 50px;display:flex;justify-content:space-between;color:#655f6d;font-size:9px}footer div{display:flex;align-items:center;gap:10px;color:#a59eaa;letter-spacing:2px}footer img{width:42px;height:42px;object-fit:contain}
@media(max-width:900px){nav{display:none}.copy{width:100%}.orb{right:-260px;opacity:.5}.two{grid-template-columns:1fr}.two>strong{margin-bottom:55px}.title{display:block}.title span,.title p{display:block;margin-top:25px}.whygrid{grid-template-columns:1fr 1fr}.whygrid article:nth-child(3n+2),.whygrid article:nth-child(3n+3){padding-left:0;border-left:0}.whygrid article:nth-child(2n){border-left:1px solid #fff1;padding-left:25px}.vision>div:first-of-type{margin-left:0}.rings{right:-300px}}
@media(max-width:620px){header{width:calc(100% - 28px);height:70px}.brand img{width:40px;height:40px}.brand b{display:none}.small{padding:10px}.hero,.section,footer{width:calc(100% - 28px)}.hero{min-height:880px;align-items:flex-start}.copy{padding-top:125px}.copy h1{font-size:54px;letter-spacing:-3px}.copy>p{font-size:12px}.actions{flex-direction:column;align-items:flex-start}.orb{top:68%;right:-230px;width:500px;height:500px}.bottom b{display:none}.section{padding-bottom:110px}.title h2,.why h2{font-size:55px;letter-spacing:-3px}.services article{grid-template-columns:38px 1fr 20px;gap:10px;min-height:145px}.services h3{font-size:18px}.network{height:480px}.network button{width:64px;height:33px}.whygrid{grid-template-columns:1fr}.whygrid article,.whygrid article:nth-child(2n){border-left:0;padding:28px 0}.vision h2{font-size:56px}.rings{right:-360px}.stage{height:320px}.stage strong{font-size:28px}.contact{min-height:570px}.contact h2{font-size:57px}.cursor{display:none}footer{display:block;line-height:2}footer div{margin-bottom:15px}}

/* ===== CLEVER ECOSYSTEM MAP ===== */
.ecosystem-map{height:620px;position:relative;overflow:hidden;border:1px solid #a04cff18;background:radial-gradient(circle at 50% 50%,#8b2cff14,transparent 30%),radial-gradient(circle at 20% 20%,#42caff08,transparent 25%);isolation:isolate}
.ecosystem-map:before{content:"";position:absolute;inset:70px 150px;border:1px solid #a44cff12;border-radius:50%;transform:rotate(-14deg) scaleY(.48);box-shadow:0 0 100px #9b3cff08}
.ecosystem-map:after{content:"";position:absolute;inset:130px 230px;border:1px dashed #a44cff12;border-radius:50%;transform:rotate(18deg) scaleY(.55)}
.ecosystem-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ecosystem-lines path{fill:none;stroke:#a64cff25;stroke-width:1;stroke-dasharray:7 10;animation:flowLine 8s linear infinite}
.ecosystem-lines path:nth-child(2n){animation-duration:11s;stroke:#55c9ff1e}
@keyframes flowLine{to{stroke-dashoffset:-170}}
.eco-core{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:205px;height:205px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#6f2cc080,#090610 65%);border:1px solid #b05aff38;box-shadow:0 0 70px #8c30ff22,0 0 150px #8c30ff12}
.eco-core:before,.eco-core:after{content:"";position:absolute;border:1px solid #a44cff28;border-radius:50%;animation:ecoSpin 18s linear infinite}
.eco-core:before{inset:-28px;transform:scaleY(.32) rotate(20deg)}
.eco-core:after{inset:-48px;transform:scaleY(.28) rotate(-30deg);animation-direction:reverse;animation-duration:25s}
@keyframes ecoSpin{to{transform:scaleY(.32) rotate(380deg)}}
.eco-logo{width:112px;height:112px;display:flex;align-items:center;justify-content:center}
.eco-logo img{width:105px;height:105px;object-fit:contain;filter:drop-shadow(0 0 22px #a045ff9c)}
.eco-core b{font:700 11px 'Space Grotesk';letter-spacing:4px;margin-top:-8px}
.eco-core span{font:6px 'Space Grotesk';letter-spacing:2px;color:#82798d;margin-top:8px}
.eco-node{position:absolute;z-index:5;min-width:130px;text-align:center;padding:15px 18px;border:1px solid #a54cff24;background:#07050dcc;backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 15px 50px #0008;transition:.35s}
.eco-node:hover{transform:translateY(-7px) scale(1.05);border-color:#b15bff65;box-shadow:0 20px 70px #922cff22}
.eco-node i{display:block;font-style:normal;font-size:18px;color:#ae58ff;margin-bottom:7px}
.eco-node b{display:block;font:600 15px 'Space Grotesk';letter-spacing:1px}
.eco-node small{display:block;color:#706878;font-size:8px;margin-top:6px}
.eco-node.n1{left:7%;top:10%}.eco-node.n2{left:calc(50% - 65px);top:2%}.eco-node.n3{right:7%;top:10%}.eco-node.n4{left:2%;top:calc(50% - 35px)}.eco-node.n5{right:2%;top:calc(50% - 35px)}.eco-node.n6{left:7%;bottom:10%}.eco-node.n7{left:calc(50% - 65px);bottom:2%}.eco-node.n8{right:7%;bottom:10%}

/* ===== PROJECTS ===== */
.stage{position:relative;height:430px;overflow:hidden;border:1px solid #a64cff1e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,#7427d820,transparent 45%)}
.stage strong{font:500 clamp(45px,6vw,78px)/.88 'Space Grotesk';letter-spacing:-4px;margin-top:20px;position:relative;z-index:3}
.stage strong em{font-style:normal;color:#a54cff}
.stage>p{color:#777080;font-size:10px;margin-top:20px;position:relative;z-index:3}
.stage-orbit{position:absolute;width:330px;height:150px;border:1px solid #a64cff22;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 80px #922cff12}
.stage-orbit:before,.stage-orbit:after{content:"";position:absolute;border:1px solid #a64cff18;border-radius:50%;inset:-35px 45px;transform:rotate(55deg)}
.stage-orbit:after{inset:20px -30px;transform:rotate(-65deg)}

/* ===== V4 : CLEVER TECHNOLOGY ECOSYSTEM ===== */
.ecosystem-section .title{margin-bottom:38px}
.ecosystem-map{height:700px;position:relative;overflow:hidden;border:1px solid #8b55ff22;background:radial-gradient(circle at 50% 50%,#8c39ff16,transparent 28%),radial-gradient(circle at 18% 25%,#2ecbff0b,transparent 25%),#06050d;isolation:isolate}
.ecosystem-map:before{content:"";position:absolute;inset:50px 115px;border:1px solid #6f59ff15;border-radius:50%;transform:rotate(-8deg) scaleY(.54);box-shadow:0 0 130px #693dff0b}
.ecosystem-map:after{content:"";position:absolute;inset:115px 205px;border:1px dashed #4fcfff12;border-radius:50%;transform:rotate(12deg) scaleY(.58)}
.eco-glow{position:absolute;left:50%;top:50%;width:310px;height:310px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#6c31ff25,transparent 66%);filter:blur(16px);z-index:0}
.eco-defs{position:absolute;width:0;height:0;overflow:hidden}
.ecosystem-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.ecosystem-lines path{fill:none;stroke:url(#ecoLine);stroke-opacity:.55;stroke-width:1.35;stroke-linecap:round;stroke-dasharray:3 12;filter:drop-shadow(0 0 5px #6c66ff55);animation:ecoFlow 7s linear infinite}
.ecosystem-lines path:nth-child(3n){animation-duration:10s;animation-direction:reverse}
@keyframes ecoFlow{to{stroke-dashoffset:-180}}
.eco-particles{position:absolute;inset:0;z-index:2;background-image:radial-gradient(circle,#62d9ff 0 1px,transparent 1.5px),radial-gradient(circle,#c052ff 0 1px,transparent 1.5px);background-size:150px 130px,210px 180px;background-position:20px 30px,100px 80px;opacity:.35;mask-image:radial-gradient(circle at center,#000,transparent 72%);animation:particleDrift 18s linear infinite}
@keyframes particleDrift{to{background-position:170px 160px,0 260px}}
.eco-core{position:absolute;z-index:5;left:50%;top:50%;width:235px;height:235px;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#18215a 0,#0a0714 58%,#05040a 75%);border:1px solid #61cfff68;box-shadow:0 0 45px #4e6dff32,0 0 120px #9a32ff18,inset 0 0 45px #3b6fff18}
.eco-core:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid #8b62ff42;box-shadow:0 0 25px #4bcfff1a}
.eco-core-ring{position:absolute;border:1px solid #62cfff42;border-radius:50%;pointer-events:none}
.ring-a{inset:-32px;transform:scaleY(.32) rotate(18deg);animation:ecoRingA 14s linear infinite}
.ring-b{inset:-53px;transform:scaleY(.22) rotate(-24deg);border-color:#b04cff35;animation:ecoRingB 20s linear infinite reverse}
@keyframes ecoRingA{to{transform:scaleY(.32) rotate(378deg)}}
@keyframes ecoRingB{to{transform:scaleY(.22) rotate(-384deg)}}
.eco-logo{width:92px;height:92px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.eco-logo img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 22px #7c4cffb8)}
.eco-core b{position:relative;z-index:2;font:700 14px 'Space Grotesk';letter-spacing:5px;margin-top:-4px}
.eco-core span{position:relative;z-index:2;font:6px 'Space Grotesk';letter-spacing:2px;color:#8f8aa0;margin-top:8px}
.eco-node{position:absolute;z-index:6;min-width:190px;display:flex;align-items:center;gap:13px;padding:13px 17px;border:1px solid #7e5cff35;background:linear-gradient(135deg,#0c0a16dd,#080712cc);backdrop-filter:blur(14px);border-radius:14px;box-shadow:0 18px 60px #0008,0 0 25px #663cff09;transition:transform .35s,border-color .35s,box-shadow .35s}
.eco-node:hover{transform:translateY(-6px) scale(1.035);border-color:#65d8ff80;box-shadow:0 22px 70px #2d67ff20,0 0 30px #9b4cff16}
.eco-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid #5c76ff40;border-radius:11px;background:#101229;color:#5ed8ff;box-shadow:inset 0 0 18px #4d6cff12}
.eco-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.eco-node b{display:block;font:600 13px 'Space Grotesk';letter-spacing:1.5px}
.eco-node small{display:block;color:#817a91;font-size:8px;margin-top:4px;white-space:nowrap}
.node-web{left:4%;top:9%}.node-ai{left:calc(50% - 95px);top:4%}.node-cloud{right:4%;top:9%}
.node-data{left:2%;top:39%}.node-mobile{left:5%;bottom:18%}.node-cyber{right:2%;top:39%}.node-software{right:5%;bottom:18%}
.node-embedded{left:17%;bottom:3%}.node-iot{right:17%;bottom:3%}.node-3d{left:31%;bottom:2%}.node-auto{right:31%;bottom:2%}.node-research{left:calc(50% - 95px);bottom:1%}

/* Project direction: quiet, premium placeholder until the real portfolio is ready. */
.stage{background:radial-gradient(circle at 50% 48%,#7634ff1c,transparent 34%),linear-gradient(120deg,#07060d,#090711 55%,#06050b)}
.stage:before{content:"";position:absolute;inset:35px;border:1px solid #9d5cff12;border-radius:22px;pointer-events:none}
.stage:after{content:"";position:absolute;width:520px;height:160px;border:1px solid #5fcfff12;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 80px #673aff0b}
.stage strong{font-size:clamp(52px,7vw,92px);letter-spacing:-5px}
.stage strong em{background:linear-gradient(100deg,#65d8ff,#a44cff 60%,#d75cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage>p{letter-spacing:2px;text-transform:uppercase;color:#7d7489}
.stage-orbit{z-index:1;width:360px;height:150px;opacity:.8}

@media(max-width:900px){.ecosystem-map{height:760px}.eco-node{min-width:165px}.node-web{left:2%}.node-cloud{right:2%}.node-data{left:1%}.node-cyber{right:1%}.node-mobile{left:2%}.node-software{right:2%}.node-embedded{left:7%}.node-iot{right:7%}.node-3d{left:22%}.node-auto{right:22%}}
@media(max-width:620px){.ecosystem-map{height:900px}.eco-core{width:190px;height:190px}.eco-logo{width:74px;height:74px}.eco-logo img{width:74px;height:74px}.eco-node{min-width:145px;padding:10px 12px;gap:9px}.eco-icon{width:34px;height:34px;flex-basis:34px}.eco-icon svg{width:18px;height:18px}.eco-node b{font-size:10px}.eco-node small{font-size:7px}.node-web{left:2%;top:10%}.node-ai{left:auto;right:2%;top:18%}.node-cloud{right:2%;top:10%}.node-data{left:2%;top:28%}.node-mobile{left:2%;top:42%;bottom:auto}.node-cyber{right:2%;top:36%}.node-software{right:2%;top:51%;bottom:auto}.node-embedded{left:2%;top:58%;bottom:auto}.node-iot{right:2%;top:65%;bottom:auto}.node-3d{left:2%;top:74%;bottom:auto}.node-auto{right:2%;top:79%;bottom:auto}.node-research{left:50%;transform:translateX(-50%);top:88%;bottom:auto}.eco-core{top:49%}.ecosystem-lines{opacity:.7}.stage{height:360px}.stage strong{font-size:55px;letter-spacing:-3px}.stage:before{inset:18px}}

/* ==============================
   V5 — compact, premium & cards
   ============================== */
header{width:min(1240px,calc(100% - 64px));overflow:visible}
.brand b,.no-translate{unicode-bidi:plaintext}
.hero{width:min(1240px,calc(100% - 64px))}
.copy{width:55%;padding-top:20px}
.copy h1{font-size:clamp(64px,8vw,112px);letter-spacing:-7px;margin-top:20px}
.hero-belief{color:#d8d1df!important;font:500 clamp(17px,2vw,25px)/1.15 'Space Grotesk'!important;letter-spacing:-.6px;max-width:500px!important;margin-top:16px!important}
.hero-desc{max-width:440px!important;font-size:11px!important;line-height:1.65!important;margin-top:13px!important}
.actions{margin-top:24px}
.orb{right:-30px}
.core img{width:132px;height:132px}

/* Ecosystem: brighter right-side connections, especially CLOUD/CYBER */
.ecosystem-section .title{margin-bottom:30px}
.ecosystem-heading p{max-width:470px;color:#777080;font-size:11px;line-height:1.7;margin-top:17px}
.ecosystem-map{height:720px}
.ecosystem-lines path{stroke-opacity:.78;stroke-width:1.6;stroke-dasharray:4 10;filter:drop-shadow(0 0 6px #6c66ff77)}
.ecosystem-lines .right-line{stroke-opacity:1;stroke-width:2.2;filter:drop-shadow(0 0 8px #805dffb0)}
.ecosystem-lines .cloud-line,.ecosystem-lines .cyber-line{stroke:#8a72ff;stroke-width:2.8;stroke-opacity:1;filter:drop-shadow(0 0 10px #8a72ffcc) drop-shadow(0 0 20px #45cffff0)}
.ecosystem-lines .cloud-line:after,.ecosystem-lines .cyber-line:after{content:""}
.eco-node.node-cloud,.eco-node.node-cyber{border-color:#8a72ff72;box-shadow:0 18px 60px #0008,0 0 32px #6d5dff24}
.eco-node.node-cloud .eco-icon,.eco-node.node-cyber .eco-icon{border-color:#7d8dff88;background:#111330;color:#7edfff;box-shadow:inset 0 0 22px #667cff24,0 0 18px #6b5cff18}

/* Services as premium cards */
.service-cards{border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service-cards article{min-height:245px;border:1px solid #ffffff10;border-radius:18px;padding:22px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:linear-gradient(145deg,#0b0913,#07060d 65%,#0c0712);box-shadow:inset 0 1px #ffffff05,0 20px 70px #0005;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;background-clip:padding-box}
.service-cards article:before{inset:0;background:radial-gradient(circle at 20% 0,#9d43ff22,transparent 45%);transform:none;opacity:0;transition:opacity .45s}
.service-cards article:hover{transform:translateY(-9px);border-color:#a44cff55;box-shadow:0 28px 80px #0009,0 0 40px #8c38ff16}
.service-cards article:hover:before{opacity:1}
.service-cards .card-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;margin-bottom:38px}
.service-cards .card-top small{color:#8a8195;font:700 9px 'Space Grotesk';letter-spacing:2px}
.service-cards .card-top span{font-size:18px;color:#a855ff;transition:transform .35s}
.service-cards article:hover .card-top span{transform:translate(4px,-4px)}
.service-cards h3{position:relative;z-index:2;font:600 20px/1.05 'Space Grotesk';letter-spacing:-.7px}
.service-cards p{position:relative;z-index:2;color:#777080;font-size:10px;line-height:1.7;margin-top:12px;max-width:300px}
.service-cards .card-line{position:relative;z-index:2;margin-top:auto;width:42px;height:2px;background:linear-gradient(90deg,#38d6ff,#a54cff);box-shadow:0 0 15px #8d44ff77;transition:width .4s}
.service-cards article:hover .card-line{width:90px}

/* BELIEVE — violet and more visible, while text stays compact */
.belief-mark{font-size:clamp(70px,10vw,145px)!important;letter-spacing:-8px!important;color:transparent!important;background:linear-gradient(100deg,#5bd7ff 0%,#9b4dff 48%,#e15cff 100%);-webkit-background-clip:text;background-clip:text;text-shadow:none!important;filter:drop-shadow(0 0 30px #a34cff20)}
.two{margin-top:58px}
.two h2{font-size:clamp(24px,2.6vw,38px)}
.two p{font-size:11px;margin-top:17px}

/* Why / vision / projects copy reduced */
.why h2{font-size:clamp(47px,6.2vw,78px);margin:58px 0}
.whygrid article{min-height:180px;padding-top:27px}
.whygrid h3{margin-top:21px;font-size:16px}
.whygrid p{font-size:9px;line-height:1.65;margin-top:9px}
.vision{min-height:620px}
.vision>div:first-of-type{margin-top:72px}
.vision h2{font-size:clamp(48px,6.4vw,88px)}
.stage{height:390px}
.stage strong{font-size:clamp(48px,6vw,80px)}

/* Contact details */
.contact{min-height:760px}
.contact h2{font-size:clamp(49px,7vw,90px)}
.contact p{font-size:11px;margin:22px 0}
.contact-details{position:relative;z-index:3;margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(850px,100%)}
.contact-details>a,.contact-details>div{padding:18px 16px;border:1px solid #ffffff10;border-radius:14px;background:#08070f99;color:#c5bfcb;font:10px 'Space Grotesk';text-align:left;transition:.3s}
.contact-details>a:hover{border-color:#a44cff55;transform:translateY(-4px)}
.contact-details span{display:block;color:#7f758a;font-size:7px;letter-spacing:2px;margin-bottom:8px}
footer{width:min(1240px,calc(100% - 64px));display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:30px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:10px;color:#a59eaa;letter-spacing:2px}
.footer-brand img{width:50px;height:50px}
.footer-copy{color:#655f6d;line-height:1.7}
.footer-links{display:flex;gap:20px}
.footer-links a{color:#81798b;font:9px 'Space Grotesk';letter-spacing:1px}
.footer-links a:hover{color:#d18aff}

@media(max-width:900px){
  header{width:calc(100% - 30px)}.hero{width:calc(100% - 30px)}.copy{width:100%}.orb{right:-280px;opacity:.48}.service-cards{grid-template-columns:repeat(2,1fr)}
  .contact-details{grid-template-columns:1fr}.contact-details>a,.contact-details>div{text-align:center}.footer-links{display:none}footer{width:calc(100% - 30px);grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .copy h1{font-size:64px;letter-spacing:-4px}.hero-belief{font-size:18px!important}.hero-desc{font-size:10px!important}.service-cards{grid-template-columns:1fr}.service-cards article{min-height:215px}.belief-mark{font-size:72px!important}.two{margin-top:45px}.ecosystem-map{height:900px}.ecosystem-lines{opacity:.85}.ecosystem-lines .right-line{stroke-width:2}.ecosystem-lines .cloud-line,.ecosystem-lines .cyber-line{stroke-width:2.5}.contact h2{font-size:47px}.footer-copy{font-size:8px}footer{grid-template-columns:1fr;padding-bottom:35px}
}

/* =========================================================
   V5.1 — visual corrections requested for CLEVER
   ========================================================= */
:root{
  --violet:#9b4dff;
  --purple:#c14cff;
  --cyan:#53d8ff;
  --pink:#e15cff;
  --ink:#07060d;
}

/* Brand word: never plain white */
.brand b,
.footer-brand b{
  background:linear-gradient(100deg,var(--cyan) 0%,#9b4dff 45%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px #9b4dff20;
}

/* Hero: logo/orb LEFT, typography RIGHT */
.hero{
  display:grid;
  grid-template-columns:minmax(460px,52%) minmax(420px,48%);
  align-items:center;
  min-height:100vh;
}
.hero .hero-orb{
  grid-column:1;
  grid-row:1;
  position:relative;
  left:auto;right:auto;top:auto;
  transform:none;
  justify-self:start;
  width:min(560px,100%);
  height:min(560px,100%);
}
.hero .hero-copy{
  grid-column:2;
  grid-row:1;
  width:100%;
  padding:30px 0 40px 28px;
  z-index:7;
}
.hero-brand{
  background:linear-gradient(105deg,#54d9ff 0%,#8e4dff 42%,#b44cff 68%,#ef5cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px #8e45ff22;
}
.hero .hero-belief{max-width:430px!important}
.hero .hero-desc{max-width:400px!important}

/* Make the hero logo feel premium without a full circular spin */
.hero .core img{transform-origin:50% 50%;backface-visibility:hidden}

/* Ecosystem right-side connections: deliberately stronger than the others */
.ecosystem-lines .cloud-line,
.ecosystem-lines .cyber-line{
  stroke:#b46cff!important;
  stroke-width:3.8!important;
  stroke-opacity:1!important;
  stroke-dasharray:8 7!important;
  filter:drop-shadow(0 0 5px #b46cff)
         drop-shadow(0 0 13px #6f72ff)
         drop-shadow(0 0 24px #45d7ff99)!important;
}
.ecosystem-lines .cloud-line{stroke:#8ee7ff!important}
.ecosystem-lines .cyber-line{stroke:#c76aff!important}
.ecosystem-lines .right-line{stroke-opacity:.9;stroke-width:2.4}
.ecosystem-lines .cloud-end,
.ecosystem-lines .cyber-end{
  stroke:#fff;
  stroke-width:2;
  filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px #9b4dff);
}
.ecosystem-lines .cloud-end{fill:#8ee7ff}
.ecosystem-lines .cyber-end{fill:#c76aff}
.eco-node.node-cloud,.eco-node.node-cyber{
  transform-origin:center;
  border-color:#a66cffaa!important;
  box-shadow:0 18px 60px #0009,0 0 28px #7b55ff33,0 0 70px #45d7ff12!important;
}
.eco-node.node-cloud b,.eco-node.node-cyber b{color:#f4edff}

/* BELIEVE — explicitly protected from translation */
.belief-mark.no-translate{white-space:nowrap}

/* Services: more editorial / premium than generic feature cards */
.service-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-cards article{
  min-height:270px;
  padding:25px 24px 23px;
  border-radius:22px;
  position:relative;
  background:
    radial-gradient(circle at 90% 10%,#a64cff12,transparent 34%),
    linear-gradient(145deg,#0e0b17 0%,#08070f 58%,#0c0813 100%);
  border:1px solid #ffffff12;
  box-shadow:inset 0 1px #ffffff08,0 22px 70px #0007;
}
.service-cards article:after{
  content:"";
  position:absolute;
  right:-45px;top:-45px;
  width:130px;height:130px;border-radius:50%;
  border:1px solid #a64cff18;
  box-shadow:0 0 60px #8d38ff0d;
  transition:.5s;
}
.service-cards article:hover:after{transform:scale(1.35);border-color:#5edcff32}
.service-cards .card-top{margin-bottom:44px}
.service-cards .card-top small{
  display:inline-grid;place-items:center;
  width:34px;height:25px;
  border:1px solid #a64cff28;border-radius:7px;
  background:#a64cff08;
}
.service-cards .card-top span{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid #ffffff0d;border-radius:50%;
  background:#ffffff03;
}
.service-cards h3{font-size:19px;line-height:1.08;letter-spacing:-.5px;max-width:260px}
.service-cards p{font-size:10px;line-height:1.75;color:#858092;max-width:285px}
.service-cards .card-line{width:52px;height:1px}
.service-cards article:hover{transform:translateY(-10px);border-color:#a855ff5c;box-shadow:0 32px 90px #000b,0 0 50px #8c38ff1b}
.service-cards article:hover .card-line{width:115px}

/* Footer: contact is a real part of the footer, not a last-minute line */
.site-footer{
  width:min(1240px,calc(100% - 64px));
  margin:auto;
  padding:58px 0 25px;
  border-top:1px solid #ffffff12;
  color:#777080;
}
.footer-main{
  display:grid;
  grid-template-columns:1.45fr .8fr 1.15fr 1fr;
  gap:44px;
  padding-bottom:48px;
}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:10px;line-height:1.6}
.footer-brand-col{gap:14px}
.footer-brand{display:flex;align-items:center;gap:13px}
.footer-brand img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 22px #9b4dff42)}
.footer-brand b{font:700 15px 'Space Grotesk';letter-spacing:2px}
.footer-brand-col p{color:#777080;font-size:10px;line-height:1.8}
.footer-tagline,.footer-label{font:700 8px 'Space Grotesk';letter-spacing:2.2px;color:#7d7489}
.footer-col>a,.footer-col>span:not(.footer-label){color:#aaa3b0;transition:.25s}
.footer-col>a:hover{color:#d8b1ff;transform:translateX(3px)}
.footer-cta-col{padding-left:26px;border-left:1px solid #ffffff10}
.footer-cta-col p{color:#81798b;max-width:190px}
.footer-button{
  margin-top:8px!important;padding:11px 15px;border-radius:30px!important;
  border:1px solid #a64cff38!important;
  background:linear-gradient(105deg,#5c32b5,#b044ff)!important;
  color:#fff!important;font:700 8px 'Space Grotesk'!important;letter-spacing:1.3px!important;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:20px;border-top:1px solid #ffffff0b;
  font:8px 'Space Grotesk';letter-spacing:1.5px;color:#625b6b;
}

/* Dedicated contact page */
.contact-shell{
  width:min(1240px,calc(100% - 64px));
  margin:0 auto;padding:160px 0 100px;
}
.contact-page-intro{max-width:760px}
.contact-page-intro small{font:600 9px 'Space Grotesk';letter-spacing:3px;color:#756e80}
.contact-page-intro h1{font:500 clamp(58px,8vw,104px)/.88 'Space Grotesk';letter-spacing:-6px;margin-top:26px}
.contact-page-intro h1 em{font-style:normal;background:linear-gradient(100deg,#55d8ff,#9b4dff 48%,#e45cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-page-intro>p{max-width:520px;color:#858092;font-size:12px;line-height:1.8;margin-top:24px}
.contact-page-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;margin-top:75px}
.project-form{padding:30px;border:1px solid #ffffff10;border-radius:24px;background:linear-gradient(145deg,#0d0a16,#07060d);box-shadow:0 25px 90px #0008}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.project-form label{display:block;font:700 8px 'Space Grotesk';letter-spacing:2px;color:#81798b;margin-bottom:18px}
.project-form input,.project-form textarea{
  display:block;width:100%;margin-top:9px;padding:15px 16px;border:1px solid #ffffff12;border-radius:12px;
  outline:none;background:#05040a;color:#eee9f3;font:11px 'DM Sans';transition:.25s;resize:vertical;
}
.project-form input:focus,.project-form textarea:focus{border-color:#a64cff65;box-shadow:0 0 30px #8c38ff10}
.project-form input::placeholder,.project-form textarea::placeholder{color:#514b59}
.form-submit{border:0;color:white;cursor:pointer;margin-top:3px}
.form-note{color:#5f5868;font-size:9px;line-height:1.6;margin-top:15px}
.form-note strong{color:#8e8398}
.contact-side{position:relative;min-height:560px;overflow:hidden;border:1px solid #ffffff0b;border-radius:24px;background:radial-gradient(circle at 50% 35%,#8e37ff17,transparent 40%),#08070e}
.side-orbit{position:absolute;width:430px;height:430px;border:1px solid #9b4dff20;border-radius:50%;left:50%;top:42%;transform:translate(-50%,-50%) rotate(25deg) scaleY(.55);box-shadow:0 0 100px #8d38ff10}
.side-orbit:before,.side-orbit:after{content:"";position:absolute;inset:45px;border:1px solid #55d8ff17;border-radius:50%;transform:rotate(-55deg)}
.side-orbit:after{inset:105px;border-color:#d45cff18}
.side-card{position:relative;z-index:2;padding:35px}
.side-card .footer-label{color:#a855ff}
.side-card h2{font:500 35px/.95 'Space Grotesk';letter-spacing:-2px;margin-top:25px}
.side-card p{color:#777080;font-size:10px;line-height:1.75;margin-top:20px;max-width:290px}
.contact-info-list{position:absolute;left:25px;right:25px;bottom:25px;z-index:3;display:grid;gap:9px}
.contact-info-list a,.contact-info-list div{padding:14px 15px;border:1px solid #ffffff0d;border-radius:13px;background:#06050bce;color:#aaa3b0;font:10px 'Space Grotesk';backdrop-filter:blur(12px)}
.contact-info-list span{display:block;font-size:7px;letter-spacing:2px;color:#706879;margin-bottom:5px}
.contact-footer{padding-top:22px}

@media(max-width:900px){
  .hero{display:flex;flex-direction:column;justify-content:center;padding-top:95px;overflow:hidden}
  .hero .hero-orb{order:1;position:relative;width:560px;height:560px;left:auto;right:auto;transform:none;align-self:center;opacity:.72;margin-top:-35px}
  .hero .hero-copy{order:2;width:100%;padding:10px 0 90px;text-align:left}
  .hero .hero-copy .actions{justify-content:flex-start}
  .footer-main{grid-template-columns:1fr 1fr;gap:35px}
  .footer-cta-col{padding-left:0;border-left:0}
  .contact-page-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero .hero-orb{width:470px;height:470px;margin-top:-10px;transform:scale(.86)}
  .hero .hero-copy{padding-bottom:65px}
  .hero-brand{font-size:64px!important;letter-spacing:-4px!important}
  .service-cards{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:30px}
  .footer-bottom{display:grid;gap:10px}
  .contact-shell{width:calc(100% - 30px);padding-top:135px}
  .form-row{grid-template-columns:1fr}
  .project-form{padding:21px}
  .contact-page-intro h1{font-size:55px;letter-spacing:-4px}
  .contact-side{min-height:570px}
}

/* ===============================
   FINAL RESPONSIVE PASS — CLEVER
   =============================== */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%;height:auto}

@media (max-width: 900px){
  header{
    width:calc(100% - 28px);
    max-width:none;
    padding:0 12px;
    box-sizing:border-box;
    gap:10px;
  }
  header .cta.small{margin-left:auto;white-space:nowrap}
  .hero{width:calc(100% - 28px);min-height:auto;padding:110px 0 70px;box-sizing:border-box}
  .hero .hero-orb{width:min(560px,92vw);height:min(560px,92vw);margin:0 auto -25px;flex-shrink:0}
  .hero .hero-copy{padding:0 0 25px;box-sizing:border-box}
  .hero-brand{font-size:clamp(52px,10vw,78px)!important;letter-spacing:-4px!important}
  .hero-belief{font-size:clamp(16px,3vw,21px)!important;max-width:620px!important}
  .hero-desc{max-width:560px!important}
  .actions{flex-wrap:wrap}

  .section,.ecosystem-section,.why,.vision,.contact{width:calc(100% - 28px);box-sizing:border-box}
  .section{padding-top:75px;padding-bottom:85px}
  .title h2,.why h2{font-size:clamp(48px,8vw,72px);letter-spacing:-4px}

  .ecosystem-map{height:760px;width:100%;}
  .eco-core{width:200px;height:200px}
  .eco-node{min-width:150px;max-width:190px;box-sizing:border-box;padding:11px 13px}
  .eco-node b{font-size:11px}
  .eco-node small{font-size:7px;white-space:normal}
  .ecosystem-lines{opacity:1}
  .ecosystem-lines path{stroke-width:1.8}
  .ecosystem-lines .cloud-line,.ecosystem-lines .cyber-line{stroke-width:3!important}

  .service-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .service-cards article{min-height:220px;padding:19px}

  .whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .whygrid article:nth-child(2n){border-left:1px solid #fff1;padding-left:22px}
  .vision{min-height:620px}
  .vision>div:first-of-type{margin-left:0}
  .rings{right:-280px}

  .contact-details{grid-template-columns:1fr 1fr}
  .site-footer{width:calc(100% - 28px)}
  .footer-main{grid-template-columns:1.2fr 1fr 1fr;gap:25px}
  .footer-cta-col{grid-column:1/-1;border-left:0;border-top:1px solid #ffffff10;padding:22px 0 0}
}

@media (max-width: 620px){
  header{height:68px;width:calc(100% - 18px);padding:0 9px;border-radius:0 0 14px 14px}
  header .brand img{width:38px;height:38px}
  header nav{display:none}
  header .cta.small{font-size:8px!important;padding:10px 12px!important;letter-spacing:.8px!important}

  .hero{width:calc(100% - 24px);padding-top:95px;padding-bottom:45px;min-height:0}
  .hero .hero-orb{width:min(430px,96vw);height:min(430px,96vw);margin:0 auto -20px;opacity:.78}
  .hero .hero-copy{padding:0 0 10px}
  .hero-brand{font-size:clamp(46px,15vw,64px)!important;letter-spacing:-3px!important}
  .hero-belief{font-size:17px!important;line-height:1.2!important}
  .hero-desc{font-size:10px!important;line-height:1.65!important}
  .actions{gap:14px;margin-top:22px;align-items:flex-start}
  .actions .cta{padding:12px 15px;font-size:9px}

  .section,.ecosystem-section,.why,.vision,.contact{width:calc(100% - 24px)}
  .section{padding-top:60px;padding-bottom:70px}
  .title h2,.why h2{font-size:clamp(42px,14vw,58px);letter-spacing:-3px}
  .title p,.ecosystem-heading p{font-size:10px;line-height:1.7}

  .ecosystem-map{height:900px}
  .eco-core{width:175px;height:175px;top:48%}
  .eco-logo,.eco-logo img{width:64px!important;height:64px!important}
  .eco-core b{font-size:11px;letter-spacing:3px}
  .eco-node{min-width:0;width:142px;padding:9px 10px;gap:8px;border-radius:12px}
  .eco-node b{font-size:9px;letter-spacing:1px}
  .eco-node small{font-size:6.5px}
  .eco-icon{width:30px!important;height:30px!important;flex-basis:30px!important}
  .eco-icon svg{width:16px!important;height:16px!important}
  .ecosystem-lines{opacity:1!important}
  .ecosystem-lines path{stroke-width:1.5}
  .ecosystem-lines .cloud-line,.ecosystem-lines .cyber-line{stroke-width:2.7!important;filter:drop-shadow(0 0 7px #8a72ff) drop-shadow(0 0 14px #45cfff)!important}

  .service-cards{grid-template-columns:1fr;gap:12px}
  .service-cards article{min-height:190px;padding:18px}
  .service-cards .card-top{margin-bottom:30px}
  .service-cards h3{font-size:18px}
  .service-cards p{font-size:9px;line-height:1.7}

  .whygrid{grid-template-columns:1fr}
  .whygrid article,.whygrid article:nth-child(2n),.whygrid article:nth-child(3n+2),.whygrid article:nth-child(3n+3){border-left:0;padding:24px 0}
  .whygrid h3{font-size:16px}
  .whygrid p{font-size:9px}

  .vision{min-height:560px}
  .vision h2{font-size:clamp(46px,14vw,62px);letter-spacing:-3px}
  .rings{width:460px;height:460px;right:-300px;top:150px}

  .contact{min-height:0;padding:80px 0}
  .contact h2{font-size:clamp(45px,14vw,58px);letter-spacing:-3px}
  .contact-details{grid-template-columns:1fr;gap:9px}
  .contact-details>a,.contact-details>div{text-align:center}

  .site-footer{width:calc(100% - 24px)}
  .footer-main{grid-template-columns:1fr;gap:28px}
  .footer-cta-col{grid-column:auto;padding-top:20px}
  .footer-links{display:none}
  .footer-bottom{grid-template-columns:1fr;gap:8px;line-height:1.7}

  .contact-shell{width:calc(100% - 24px);padding:105px 0 65px}
  .contact-page-intro h1{font-size:clamp(48px,14vw,62px);letter-spacing:-3px}
  .contact-page-grid{grid-template-columns:1fr;gap:18px;margin-top:45px}
  .project-form{padding:18px;border-radius:18px}
  .form-row{grid-template-columns:1fr;gap:0}
  .project-form input,.project-form textarea{font-size:12px;padding:13px 14px}
  .contact-side{min-height:470px;border-radius:18px}
  .side-orbit{width:350px;height:350px}
  .contact-info-list{left:15px;right:15px;bottom:15px}
}

/* =========================================================
   CLEVER — SPACING / BREATHING PASS
   Responsive premium layout
   ========================================================= */

:root {
  --page-max: 1280px;
  --page-gutter: 48px;
  --section-space: clamp(88px, 9vw, 140px);
  --card-gap: clamp(16px, 2vw, 28px);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

.container,
.inner,
.section-inner,
.content-wrap {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  margin-inline: auto;
}

section {
  padding-block: var(--section-space);
}

.hero,
.hero-section {
  padding-top: clamp(110px, 12vw, 170px);
  padding-bottom: clamp(90px, 10vw, 150px);
}

.services-grid,
.service-grid,
.cards-grid {
  gap: var(--card-gap);
}

.service-card,
.services-card,
.card {
  padding: clamp(24px, 2.6vw, 38px);
}

.service-card p,
.services-card p,
.card p {
  max-width: 48ch;
  line-height: 1.7;
}

.section-title,
.section-heading {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.section-title h2,
.section-heading h2 {
  line-height: .98;
  max-width: 12ch;
}

.ecosystem,
.ecosystem-section,
.ecosystem-map {
  margin-inline: auto;
}

.ecosystem-map {
  min-height: clamp(520px, 55vw, 760px);
  margin-top: clamp(30px, 5vw, 70px);
}

.why,
.why-section {
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(90px, 10vw, 150px);
}

.why-grid,
.why-cards,
.values-grid {
  gap: clamp(20px, 2.5vw, 34px);
}

.contact,
.contact-section {
  padding-top: clamp(90px, 10vw, 140px);
  padding-bottom: clamp(90px, 10vw, 130px);
}

footer {
  padding-top: clamp(64px, 7vw, 100px);
  padding-bottom: clamp(34px, 4vw, 56px);
}

.footer-inner,
.footer-grid {
  gap: clamp(28px, 5vw, 72px);
}

/* Keep large decorative elements inside the viewport. */
img,
svg,
canvas {
  max-width: 100%;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 32px;
    --section-space: 88px;
  }

  .hero,
  .hero-section {
    padding-top: 105px;
    padding-bottom: 88px;
  }

  .ecosystem-map {
    min-height: 600px;
    margin-top: 34px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 20px;
    --section-space: 76px;
    --card-gap: 18px;
  }

  section {
    padding-block: var(--section-space);
  }

  .container,
  .inner,
  .section-inner,
  .content-wrap {
    width: min(calc(100% - 40px), var(--page-max));
  }

  .hero,
  .hero-section {
    padding-top: 92px;
    padding-bottom: 72px;
  }

  .section-title,
  .section-heading {
    margin-bottom: 28px;
  }

  .service-card,
  .services-card,
  .card {
    padding: 22px;
  }

  .ecosystem-map {
    min-height: 500px;
    margin-top: 24px;
  }

  .why,
  .why-section,
  .contact,
  .contact-section {
    padding-block: 76px;
  }

  footer {
    padding-top: 58px;
    padding-bottom: 30px;
  }

  .footer-inner,
  .footer-grid {
    gap: 34px;
  }
}

@media (max-width: 420px) {
  :root {
    --page-gutter: 18px;
  }

  .container,
  .inner,
  .section-inner,
  .content-wrap {
    width: calc(100% - 36px);
  }

  .hero,
  .hero-section {
    padding-top: 84px;
    padding-bottom: 64px;
  }

  section {
    padding-block: 68px;
  }

  .service-card,
  .services-card,
  .card {
    padding: 20px;
  }

  .ecosystem-map {
    min-height: 450px;
  }
}
/* CLEVER V5.2.1 — final responsive polish */
:root{
  --clever-max-width:1280px;
  --clever-gutter:clamp(20px,4vw,48px);
  --clever-section-y:clamp(72px,9vw,140px);
}
html,body{max-width:100%;overflow-x:hidden}
.container,.inner,.section-inner,.content-wrap{
  width:min(calc(100% - (var(--clever-gutter)*2)),var(--clever-max-width));
  margin-inline:auto;
}
section{padding-block:var(--clever-section-y)}

/* Ecosystem: every connector has the same tint/weight. */
.ecosystem-map .line,
.ecosystem-map .connector,
.ecosystem-map .connection,
.ecosystem-map .ecosystem-line,
.ecosystem-map path,
.ecosystem-map line,
.cloud-line,.cyber-line,.cloud-connection,.cyber-connection,
#line-cloud,#line-cyber{
  stroke:rgba(167,139,250,.68)!important;
  stroke-width:1.5!important;
  opacity:.78!important;
  filter:drop-shadow(0 0 5px rgba(167,139,250,.22))!important;
}

/* Mobile: text/name first, logo/visual second. */
@media(max-width:640px){
  .hero-inner,.hero-content,.hero-grid{
    display:flex!important;
    flex-direction:column!important;
  }
  .hero-copy,.hero-text,.hero-content-copy{order:1!important}
  .hero-visual,.hero-logo,.hero-orbit,.hero-art{order:2!important}
  .hero{padding-top:84px;padding-bottom:72px}
  .hero-copy,.hero-text,.hero-content-copy{margin-bottom:34px}
  .hero h1{max-width:9ch;line-height:.95}
}
@media(max-width:420px){
  :root{--clever-gutter:18px;--clever-section-y:68px}
  .hero{padding-top:78px;padding-bottom:64px}
}
@media(min-width:641px) and (max-width:900px){
  :root{--clever-gutter:32px;--clever-section-y:88px}
}



/* =========================================================
   MYCOUNT — FEATURED PROJECT
   ========================================================= */
.projects-showcase{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:22px;align-items:stretch;margin-top:42px}
.project-card{position:relative;display:grid;grid-template-columns:minmax(300px,.95fr) minmax(360px,1.05fr);min-height:460px;overflow:hidden;border:1px solid rgba(126,88,255,.2);border-radius:28px;background:linear-gradient(135deg,#0b0914 0%,#11102a 55%,#090914 100%);box-shadow:0 30px 90px rgba(0,0,0,.22)}
.project-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(117,75,255,.04) 48%,transparent 72%);pointer-events:none}
.project-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:460px;padding:34px;overflow:hidden;border-right:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 35% 35%,rgba(39,177,255,.13),transparent 34%),radial-gradient(circle at 70% 75%,rgba(255,176,0,.1),transparent 32%),#0b0c16}
.project-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(109,157,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(109,157,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}
.project-glow{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}.project-glow-one{width:210px;height:210px;background:rgba(35,181,255,.18);left:8%;top:12%}.project-glow-two{width:190px;height:190px;background:rgba(255,173,0,.14);right:6%;bottom:7%}
.project-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:48px 52px}.project-topline{display:flex;justify-content:space-between;gap:14px;align-items:center;color:#766f82;font:8px 'Space Grotesk';letter-spacing:2.2px}.project-status{color:#040c1b}.project-content h3{margin:22px 0 8px;font:600 clamp(54px,6vw,88px)/.85 'Space Grotesk';letter-spacing:-5px;color:#f2f0f8}.project-content h3 span{background:linear-gradient(95deg,#43d8ff,#2d6dff 50%,#9c5dff);-webkit-background-clip:text;background-clip:text;color:transparent}.project-content h4{margin:0;font:500 18px/1.05 'Space Grotesk';letter-spacing:-.5px;color:#d7d2df}.project-content p{max-width:520px;margin:22px 0;color:#898291;font-size:12px;line-height:1.8}.project-tags{display:flex;flex-wrap:wrap;gap:8px}.project-tags span{padding:8px 10px;border:1px solid rgba(126,88,255,.2);border-radius:999px;background:rgba(255,255,255,.025);color:#9d96a7;font:8px 'Space Grotesk';letter-spacing:1.2px}.project-note{margin-top:26px;color:#6d6675;font:8px 'Space Grotesk';letter-spacing:1.8px}.project-note i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#6e9dff;box-shadow:0 0 12px #6e9dff}
.projects-next{position:relative;min-height:460px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:30px;border:1px solid rgba(166,76,255,.12);border-radius:28px;background:radial-gradient(circle at 50% 42%,rgba(118,52,255,.12),transparent 38%),#09080e}.projects-next:after{content:"";position:absolute;width:330px;height:110px;border:1px solid rgba(164,76,255,.16);border-radius:50%;left:50%;top:54%;transform:translate(-50%,-50%) rotate(-18deg)}.projects-next>*{position:relative;z-index:1}.projects-next>span{color:#716a79;font:8px 'Space Grotesk';letter-spacing:3px}.projects-next strong{margin-top:28px;font:500 38px/.9 'Space Grotesk';letter-spacing:-2px}.projects-next strong em{font-style:normal;background:linear-gradient(100deg,#66d8ff,#a44cff 65%,#d75cff);-webkit-background-clip:text;background-clip:text;color:transparent}.projects-next p{margin:18px 0 0;color:#6f6877;font-size:10px;line-height:1.6}
@media(max-width:900px){.projects-showcase{grid-template-columns:1fr}.project-card{grid-template-columns:1fr}.project-visual{min-height:360px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}.projects-next{min-height:250px}.project-content{padding:40px 34px}}
@media(max-width:620px){.projects-showcase{margin-top:28px;gap:16px}.project-card{min-height:auto;border-radius:22px}.project-visual{min-height:300px;padding:22px}.mycount-logo{max-width:330px;border-radius:14px}.project-content{padding:30px 22px}.project-topline{align-items:flex-start;flex-direction:column}.project-content h3{font-size:58px;letter-spacing:-4px}.project-content h4{font-size:16px}.project-content p{font-size:11px;margin:18px 0}.project-tags{gap:6px}.project-tags span{font-size:7px;padding:7px 8px}.projects-next{min-height:220px;border-radius:22px}.projects-next strong{font-size:34px}}


/* =========================================================
   CLEVER — RESPONSIVE PART 2
   PROJECTS / MY_COUNT
   ========================================================= */

/* ---------- SECTION PROJECTS ---------- */

.projects-showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:20px;
  align-items:stretch;
  margin-top:40px;
}


/* ---------- CARTE MY_COUNT ---------- */

.project-card{
  min-height:300px;

  display:grid;
  grid-template-columns:190px minmax(0,1fr);

  border-radius:20px;
}


/* ---------- VISUEL / LOGO ---------- */

.project-visual{
  min-height:300px;
  padding:24px;

  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:0;
}


/* Logo réellement petit */
.mycount-logo{
  width:95px !important;
  height:auto !important;
  max-width:95px !important;
  object-fit:contain;
}


/* ---------- CONTENU ---------- */

.project-content{
  padding:30px 34px;
  justify-content:center;
}

.project-topline{
  font-size:7px;
  letter-spacing:1.7px;
}

.project-content h3{
  margin:14px 0 6px;

  font-size:clamp(38px,4vw,58px);
  line-height:.88;
  letter-spacing:-3px;
}

.project-content h4{
  font-size:13px;
  line-height:1.1;
}

.project-content p{
  max-width:520px;
  margin:15px 0;

  font-size:10px;
  line-height:1.65;
}

.project-tags{
  gap:5px;
}

.project-tags span{
  padding:6px 8px;
  font-size:7px;
}

.project-note{
  margin-top:15px;
  font-size:7px;
}


/* ---------- NEXT PROJECT ---------- */

.projects-next{
  min-height:300px;
  border-radius:20px;
  padding:24px;
}

.projects-next strong{
  margin-top:20px;
  font-size:30px;
}

.projects-next p{
  font-size:9px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .projects-showcase{
    grid-template-columns:1fr;
  }

  .project-card{
    grid-template-columns:180px minmax(0,1fr);
    min-height:270px;
  }

  .project-visual{
    min-height:270px;
  }

  .project-content{
    padding:26px 28px;
  }

  .projects-next{
    min-height:200px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .projects-showcase{
    display:flex;
    flex-direction:column;

    gap:14px;
    margin-top:28px;
  }

  /* Petite fiche */
  .project-card{
    display:grid;

    grid-template-columns:100px minmax(0,1fr);

    min-height:190px;

    border-radius:16px;
  }

  /* Zone logo */
  .project-visual{
    min-height:190px;
    padding:15px;

    border-right:1px solid rgba(255,255,255,.06);
    border-bottom:0;
  }

  .mycount-logo{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
  }

  /* Contenu compact */
  .project-content{
    padding:18px 16px;
  }

  .project-topline{
    gap:5px;
    flex-direction:column;
    align-items:flex-start;

    font-size:6px;
    letter-spacing:1.2px;
  }

  .project-content h3{
    margin:9px 0 5px;

    font-size:30px !important;
    letter-spacing:-2px;
  }

  .project-content h4{
    font-size:9px !important;
    line-height:1.15;
  }

  .project-content p{
    margin:9px 0;

    font-size:8px;
    line-height:1.5;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .project-tags{
    gap:4px;
  }

  .project-tags span{
    padding:4px 6px;
    font-size:5.5px;
    letter-spacing:.7px;
  }

  .project-note{
    margin-top:8px;
    font-size:5.5px;
    letter-spacing:1px;
  }

  .project-note i{
    width:5px;
    height:5px;
    margin-right:5px;
  }

  /* Bloc More to come */
  .projects-next{
    min-height:150px;
    padding:20px;

    border-radius:16px;
  }

  .projects-next > span{
    font-size:6px;
  }

  .projects-next strong{
    margin-top:12px;
    font-size:25px;
  }

  .projects-next p{
    margin-top:10px;
    font-size:8px;
  }
}


/* =========================================================
   TRÈS PETIT MOBILE
   ========================================================= */

@media(max-width:420px){

  .project-card{
    grid-template-columns:85px minmax(0,1fr);
    min-height:175px;
  }

  .project-visual{
    min-height:175px;
    padding:12px;
  }

  .mycount-logo{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
  }

  .project-content{
    padding:15px 13px;
  }

  .project-content h3{
    font-size:27px !important;
  }

  .project-content h4{
    font-size:8px !important;
  }

  .project-content p{
    font-size:7.5px;
    -webkit-line-clamp:2;
  }

  .project-tags span{
    font-size:5px;
    padding:3px 5px;
  }

  .project-note{
    display:none;
  }
}
/* =========================================================
   FINAL MOBILE FIX
   NAVIGATION + MY_COUNT ULTRA COMPACT
   ========================================================= */

/* =========================
   NAVIGATION MOBILE
   ========================= */

@media (max-width:620px){

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:calc(100% - 20px);
    min-height:58px;

    padding:7px 9px 7px 12px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .brand img{
    width:36px;
    height:36px;
  }

  /* La navigation reste visible */
  nav{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;

    gap:10px;

    margin-left:auto;
    margin-right:8px;
  }

  nav a{
    font-size:7px;
    letter-spacing:.3px;
  }

  /* On cache seulement les liens secondaires
     si ton menu devient trop large */
  nav a:nth-child(n+4){
    display:none;
  }

  .small{
    padding:8px 10px;
    font-size:7px;
  }

  .cta{
    padding:9px 12px;
    font-size:7px;
  }
}


/* =========================
   MY_COUNT — ENCORE PLUS PETIT
   ========================= */

@media(max-width:620px){

  .projects-showcase{
    margin-top:22px;
    gap:10px;
  }

  .project-card{
    grid-template-columns:72px minmax(0,1fr);

    min-height:125px;

    border-radius:12px;
  }

  .project-visual{
    min-height:125px;
    padding:10px;
  }

  .mycount-logo{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
  }

  .project-content{
    padding:11px 12px;
  }

  .project-topline{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;

    gap:5px;

    font-size:5px;
    letter-spacing:.8px;
  }

  .project-status{
    display:none;
  }

  .project-content h3{
    margin:5px 0 3px !important;

    font-size:22px !important;
    line-height:.9 !important;
    letter-spacing:-1.5px !important;
  }

  .project-content h4{
    font-size:7px !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
  }

  .project-content p{
    margin:6px 0;

    font-size:6.5px;
    line-height:1.35;

    -webkit-line-clamp:2;
  }

  .project-tags{
    gap:3px;
  }

  .project-tags span{
    padding:3px 5px;

    font-size:4.5px;
    letter-spacing:.4px;
  }

  .project-note{
    display:none;
  }

  .projects-next{
    min-height:100px;
    padding:14px;

    border-radius:12px;
  }

  .projects-next strong{
    margin-top:7px;
    font-size:20px;
  }

  .projects-next p{
    margin-top:6px;
    font-size:6.5px;
  }
}


/* =========================
   TRÈS PETIT ÉCRAN
   ========================= */

@media(max-width:420px){

  header{
    width:calc(100% - 14px);
    min-height:54px;
  }

  .brand img{
    width:32px;
    height:32px;
  }

  nav{
    gap:7px;
    margin-right:5px;
  }

  nav a{
    font-size:6px;
  }

  .small{
    padding:7px 8px;
  }

  .cta{
    padding:8px 9px;
  }


  /* My_Count encore plus compact */

  .project-card{
    grid-template-columns:62px minmax(0,1fr);
    min-height:112px;
  }

  .project-visual{
    min-height:112px;
    padding:8px;
  }

  .mycount-logo{
    width:36px !important;
    height:36px !important;
    max-width:36px !important;
  }

  .project-content{
    padding:9px 10px;
  }

  .project-content h3{
    font-size:19px !important;
  }

  .project-content h4{
    font-size:6px !important;
  }

  .project-content p{
    font-size:6px;
    -webkit-line-clamp:2;
  }

  .project-tags span{
    font-size:4px;
    padding:2px 4px;
  }
}