/* ===============================================
   307ITEC · POWER-STONE SYSTEM
   5 Color Tokens — Space · Mind · Reality · Power · Time
   Shared across all pages.
   =============================================== */
:root{
  --stone-space:#3B6CFF;   /* Blue   — Conception / Web */
  --stone-mind:#F7C948;    /* Yellow — Stratégie */
  --stone-reality:#FF3D6E; /* Red    — UI/UX */
  --stone-power:#A04CFF;   /* Purple — Développement */
  --stone-time:#22D39A;    /* Green  — SEO / Support */
  --stone-soul:#FF8A3D;    /* Orange — Support (optionnel) */

  --bg-0:#05060B;
  --bg-1:#0A0C18;
  --bg-2:#11142A;
  --ink-0:#FFFFFF;
  --ink-1:#C7CCE3;
  --ink-2:#7A809E;

  --grad-hero: radial-gradient(80% 60% at 20% 20%, rgba(59,108,255,.20), transparent 60%),
               radial-gradient(60% 60% at 85% 30%, rgba(160,76,255,.18), transparent 60%),
               radial-gradient(70% 70% at 50% 100%, rgba(34,211,154,.14), transparent 60%);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-0);color:var(--ink-0);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--stone-power);color:#fff}

/* ===== Preloader · reassembly (reverse snap) ===== */
#preloader{position:fixed;inset:0;background:var(--bg-0);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--ease),visibility .9s var(--ease);overflow:hidden}
#preloader.done{opacity:0;visibility:hidden}
#preloader-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pre-wrap{position:relative;text-align:center;z-index:2}
.pre-orb{position:relative;width:14px;height:14px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle at 30% 30%,#fff,var(--stone-power) 60%,rgba(0,0,0,.3));
  box-shadow:0 0 40px var(--stone-power),0 0 90px var(--stone-space);
  animation:reassemble-core 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.pre-orb::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:reassemble-ring 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.pre-orb::before{content:"";position:absolute;inset:-32px;border-radius:50%;border:1px dashed rgba(255,255,255,.10);animation:reassemble-ring2 1.6s cubic-bezier(.22,.61,.36,1) forwards}
.pre-label{margin-top:30px;font-family:'Syne',sans-serif;letter-spacing:.4em;font-size:11px;color:var(--ink-2);opacity:0;animation:reassemble-label .9s cubic-bezier(.22,.61,.36,1) .55s forwards}
.pre-label::after{content:"";display:inline-block;width:.5em}
@keyframes reassemble-core{
  0%{transform:scale(0);opacity:0;filter:blur(6px)}
  70%{transform:scale(1.6);opacity:1;filter:blur(0)}
  85%{transform:scale(2.4);opacity:1;box-shadow:0 0 80px #fff,0 0 160px var(--stone-power)}
  100%{transform:scale(1);opacity:1}
}
@keyframes reassemble-ring{
  0%{transform:scale(.2);opacity:0}
  60%{transform:scale(1);opacity:.7}
  100%{transform:scale(2.8);opacity:0}
}
@keyframes reassemble-ring2{
  0%{transform:scale(.1);opacity:0}
  70%{transform:scale(1);opacity:.5}
  100%{transform:scale(3.4);opacity:0}
}
@keyframes reassemble-label{
  0%{opacity:0;letter-spacing:1.2em;filter:blur(4px)}
  100%{opacity:1;letter-spacing:.4em;filter:blur(0)}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Body materialize : the reverse of the snap-out the user sees on click */
body.materializing{animation:materialize 1.05s cubic-bezier(.22,.61,.36,1) both}
@keyframes materialize{
  0%  {opacity:0;filter:blur(10px) brightness(1.2);transform:scale(1.03)}
  60% {opacity:.85;filter:blur(2px) brightness(1.05);transform:scale(1.005)}
  100%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  body.materializing{animation:none}
  .pre-orb,.pre-orb::after,.pre-orb::before,.pre-label{animation:none;opacity:1}
}

/* ===== Canvas + bg ===== */
#stone-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bg-grad{position:fixed;inset:0;background:var(--grad-hero);z-index:-1;pointer-events:none}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ===== Cursor ===== */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease)}
.cursor.hover{width:42px;height:42px}
@media(hover:none){.cursor{display:none}}

/* ===== Header ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;transition:background .4s,backdrop-filter .4s,padding .4s}
.site-header.scrolled{background:rgba(5,6,11,.7);backdrop-filter:blur(20px) saturate(150%);padding:14px 40px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:12px;font-family:'Syne',sans-serif;font-weight:700;font-size:18px;letter-spacing:.05em}
.brand-mark{width:38px;height:38px;display:block;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(160,76,255,.35));transition:transform .5s var(--ease),filter .4s var(--ease)}
.brand:hover .brand-mark{transform:rotate(72deg) scale(1.06);filter:drop-shadow(0 0 18px rgba(160,76,255,.6))}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:14px;color:var(--ink-1);position:relative;padding:6px 0;transition:color .25s}
.nav a:hover,.nav a.active{color:#fff}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:linear-gradient(90deg,var(--stone-space),var(--stone-power));transition:width .35s var(--ease)}
.nav a:hover::after,.nav a.active::after{width:100%}

.cta-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;font-weight:500;font-size:14px;background:linear-gradient(120deg,var(--stone-power),var(--stone-space));color:#fff;border:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);cursor:pointer}
.cta-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--stone-reality),var(--stone-mind));opacity:0;transition:opacity .35s}
.cta-btn span{position:relative;z-index:2}
.cta-btn i{position:relative;z-index:2}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(160,76,255,.55)}
.cta-btn:hover::before{opacity:1}

.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;font-weight:500;font-size:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);transition:all .3s var(--ease);cursor:pointer;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.btn-ghost i{transition:transform .3s}
.btn-ghost:hover i{transform:translateX(4px)}

/* Mobile nav */
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);align-items:center;justify-content:center;color:#fff;cursor:pointer}
.nav-toggle i{font-size:16px}

/* ===== Section base ===== */
.section{position:relative;padding:140px 40px;z-index:2}
.section-head{max-width:1280px;margin:0 auto 80px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.section-head .sub,.sub-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.section-head .sub::before,.sub-eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--stone-power),transparent)}
.section-head h2{font-family:'Syne',sans-serif;font-size:clamp(34px,4.2vw,58px);line-height:1.05;letter-spacing:-.02em;font-weight:700;max-width:780px}
.section-head h2 em{font-style:normal;background:linear-gradient(120deg,var(--stone-space),var(--stone-power));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{color:var(--ink-1);max-width:400px;font-size:15px}

/* ===== Eyebrow + dot (inner) ===== */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-1);margin-bottom:28px;backdrop-filter:blur(10px)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--stone-time);box-shadow:0 0 14px var(--stone-time);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}

/* ===== Page hero (sub-pages) ===== */
.page-hero{position:relative;padding:170px 40px 100px;z-index:2}
.page-hero-inner{max-width:1280px;margin:0 auto;text-align:center}
.page-hero h1{font-family:'Syne',sans-serif;font-size:clamp(42px,6vw,84px);line-height:1.02;letter-spacing:-.02em;font-weight:800;margin-bottom:22px}
.page-hero h1 .grad{background:linear-gradient(120deg,var(--stone-space) 0%,var(--stone-power) 40%,var(--stone-reality) 70%,var(--stone-mind) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.page-hero p{color:var(--ink-1);font-size:clamp(15px,1.15vw,18px);max-width:680px;margin:0 auto}
.breadcrumb{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);backdrop-filter:blur(10px)}
.breadcrumb a{color:var(--ink-1)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.4}

/* ===== Stones grid (services / features) ===== */
.stones-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.stone-card{position:relative;padding:36px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(20px);overflow:hidden;transition:transform .5s var(--ease),border-color .4s;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.stone-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,30%) var(--my,30%),var(--accent),transparent 60%);opacity:.12;transition:opacity .5s}
.stone-card::after{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,var(--accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.stone-card:hover{transform:translateY(-6px)}
.stone-card:hover::before{opacity:.25}
.stone-card:hover::after{opacity:1}
.stone-card .gem{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),transparent);position:relative;margin-bottom:24px}
.stone-card .gem::before{content:"";position:absolute;inset:6px;border-radius:12px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),var(--accent) 50%,transparent 80%);box-shadow:0 8px 30px var(--accent)}
.stone-card .gem i{position:relative;color:#fff;font-size:22px;z-index:2;mix-blend-mode:overlay}
.stone-card h3{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;margin-bottom:10px}
.stone-card p{color:var(--ink-1);font-size:14.5px;margin-bottom:24px}
.stone-card .num{position:absolute;top:24px;right:28px;font-family:'Syne',sans-serif;font-size:12px;color:var(--ink-2);letter-spacing:.2em}
.stone-card .arrow{align-self:flex-start;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:all .35s}
.stone-card:hover .arrow{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}

.stone-card.c1{grid-column:span 5;--accent:var(--stone-space)}
.stone-card.c2{grid-column:span 4;--accent:var(--stone-mind)}
.stone-card.c3{grid-column:span 3;--accent:var(--stone-reality)}
.stone-card.c4{grid-column:span 4;--accent:var(--stone-power)}
.stone-card.c5{grid-column:span 4;--accent:var(--stone-time)}
.stone-card.c6{grid-column:span 4;--accent:var(--stone-reality)}
.stone-card.full{grid-column:span 12}
.stone-card.half{grid-column:span 6}
.stone-card.third{grid-column:span 4}

/* ===== Stats ===== */
.stats{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:60px 40px;border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.06)}
.stat{text-align:center}
.stat .num{font-family:'Syne',sans-serif;font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1;background:linear-gradient(120deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.stat .label{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-2)}
.stat:nth-child(1){--c1:var(--stone-space);--c2:var(--stone-power)}
.stat:nth-child(2){--c1:var(--stone-mind);--c2:var(--stone-reality)}
.stat:nth-child(3){--c1:var(--stone-reality);--c2:var(--stone-power)}
.stat:nth-child(4){--c1:var(--stone-time);--c2:var(--stone-space)}

/* ===== CTA wrap ===== */
.cta-wrap{max-width:1280px;margin:0 auto;padding:90px 60px;border-radius:34px;background:radial-gradient(circle at 0% 0%,rgba(160,76,255,.35),transparent 60%),radial-gradient(circle at 100% 100%,rgba(59,108,255,.3),transparent 60%),#0A0C18;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;text-align:center}
.cta-wrap::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 0H40M0 40H40M0 0V40M40 0V40' stroke='rgba(255,255,255,0.04)' /></svg>");opacity:.5}
.cta-wrap h2{font-family:'Syne',sans-serif;font-size:clamp(36px,5vw,68px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;position:relative}
.cta-wrap h2 em{font-style:normal;background:linear-gradient(120deg,var(--stone-mind),var(--stone-reality),var(--stone-power));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-wrap p{color:var(--ink-1);max-width:640px;margin:0 auto 36px;font-size:16px;position:relative}
.cta-wrap .btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative}

/* ===== Forms ===== */
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.input-field{position:relative}
.input-field input,.input-field textarea{width:100%;padding:18px 22px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:15px;outline:none;transition:border-color .3s,background .3s;resize:vertical}
.input-field textarea{min-height:160px}
.input-field input:focus,.input-field textarea:focus{border-color:var(--stone-power);background:rgba(160,76,255,.05)}
.input-field input::placeholder,.input-field textarea::placeholder{color:var(--ink-2)}

/* ===== Footer ===== */
.footer{position:relative;padding:100px 40px 40px;z-index:2;border-top:1px solid rgba(255,255,255,.05)}
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:60px}
.footer-grid h4{font-family:'Syne',sans-serif;font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px;color:#fff}
.footer-grid p{color:var(--ink-1);font-size:14px;margin-bottom:14px}
.footer-grid ul{list-style:none}
.footer-grid ul li{margin-bottom:12px}
.footer-grid ul li a{font-size:14px;color:var(--ink-1);transition:color .25s}
.footer-grid ul li a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-1);transition:all .3s}
.socials a:nth-child(1):hover{background:var(--stone-space);border-color:var(--stone-space);color:#fff}
.socials a:nth-child(2):hover{background:var(--stone-reality);border-color:var(--stone-reality);color:#fff}
.socials a:nth-child(3):hover{background:var(--stone-power);border-color:var(--stone-power);color:#fff}
.socials a:nth-child(4):hover{background:var(--stone-mind);border-color:var(--stone-mind);color:#fff}
.newsletter input{width:100%;padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .3s}
.newsletter input:focus{border-color:var(--stone-power)}
.newsletter form{display:flex;gap:10px;margin-top:14px}
.newsletter button{padding:14px 24px;border-radius:999px;border:none;background:linear-gradient(120deg,var(--stone-power),var(--stone-space));color:#fff;font-weight:500;cursor:pointer;font-family:inherit;font-size:14px;white-space:nowrap;transition:transform .3s}
.newsletter button:hover{transform:translateY(-2px)}
.copyright{max-width:1280px;margin:60px auto 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.05);text-align:center;color:var(--ink-2);font-size:13px;letter-spacing:.05em}

.back-top{position:fixed;bottom:30px;right:30px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--stone-power),var(--stone-space));display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;transform:translateY(20px);transition:all .4s var(--ease);z-index:90;border:none;font-size:16px}
.back-top.show{opacity:1;transform:translateY(0)}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ===== Gauntlet visual (about) ===== */
.gauntlet{position:relative;width:340px;height:340px;margin:0 auto}
.gauntlet .stone-dot{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),var(--c) 40%,rgba(0,0,0,.3));box-shadow:0 0 50px var(--c)}
.gauntlet .stone-dot:nth-child(1){--c:var(--stone-space);top:0;left:50%;transform:translateX(-50%)}
.gauntlet .stone-dot:nth-child(2){--c:var(--stone-mind);top:30%;right:0}
.gauntlet .stone-dot:nth-child(3){--c:var(--stone-reality);bottom:5%;right:18%}
.gauntlet .stone-dot:nth-child(4){--c:var(--stone-power);bottom:5%;left:18%}
.gauntlet .stone-dot:nth-child(5){--c:var(--stone-time);top:30%;left:0}
.gauntlet .core{position:absolute;top:50%;left:50%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);border:1px solid rgba(255,255,255,.08);transform:translate(-50%,-50%);animation:spin 22s linear infinite}
.gauntlet .core::before,.gauntlet .core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}
.gauntlet .core::before{inset:-30px;border-style:solid;border-color:rgba(255,255,255,.05)}
.gauntlet .core::after{inset:-60px;border-style:solid;border-color:rgba(255,255,255,.03)}

/* ===== Responsive ===== */
@media(max-width:980px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(5,6,11,.95);backdrop-filter:blur(20px);padding:24px;gap:18px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav.open{display:flex}
  .nav-toggle{display:flex}
  .site-header{padding:18px 22px}
  .site-header.scrolled{padding:14px 22px}
  .page-hero{padding:130px 22px 70px}
  .section{padding:90px 22px}
  .section-head{flex-direction:column;align-items:flex-start;margin-bottom:50px}
  .stones-grid{grid-template-columns:1fr;gap:16px}
  .stone-card{grid-column:span 12!important}
  .stats{grid-template-columns:repeat(2,1fr);padding:40px 24px}
  .cta-wrap{padding:60px 24px}
  .footer{padding:70px 22px 30px}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .input-row{grid-template-columns:1fr;gap:14px}
}