/* ============================================================
   PANTO — Design tokens & global system
   ============================================================ */

:root{
  /* Colors */
  --electric:#0000FF;
  --azur:#4D7FFF;
  --navy:#000B47;
  --sky-soft:#E8ECFF;
  --sky-ice:#F5F7FF;
  --ink:#060818;
  --white:#FFFFFF;
  --grey-100:#EEF0F6;
  --grey-500:#7B8597;

  /* Type */
  --f-sans: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.6, 0.05, 0.2, 1);

  /* Layout */
  --pad-x: clamp(20px, 4vw, 64px);
  --section-y: clamp(80px, 12vw, 200px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html, body{background:var(--white);color:var(--ink);font-family:var(--f-sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body{position:relative}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}

::selection{background:var(--electric);color:#fff}

/* Custom cursor */
@media (hover:hover) and (pointer:fine){
  html, body, * { cursor: none; }
  .cursor{
    position:fixed;top:0;left:0;width:20px;height:20px;border-radius:50%;
    background:var(--electric);mix-blend-mode:difference;
    pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .3s var(--ease-out), height .3s var(--ease-out), opacity .3s;
    will-change:transform;
  }
  .cursor.is-hover{width:56px;height:56px}
  .cursor.is-text{width:4px;height:28px;border-radius:2px}
}
.cursor{display:none}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} }

/* Scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--electric);z-index:9998;transition:width .05s linear;
}

/* ===== Typography ===== */
.eyebrow, .mono{
  font-family:var(--f-mono);font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ink);font-weight:400;
}
.mono-sm{font-family:var(--f-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase}

h1,h2,h3,h4,h5{font-family:var(--f-sans);font-weight:500;letter-spacing:-0.03em;line-height:.92;color:var(--ink)}
.t-hero{font-size:clamp(60px,12vw,200px);font-weight:500;letter-spacing:-0.05em;line-height:.86}
.t-display{font-size:clamp(48px,8vw,120px);font-weight:500;letter-spacing:-0.04em;line-height:.92}
.t-h1{font-size:clamp(40px,6vw,72px);font-weight:500;letter-spacing:-0.035em;line-height:.95}
.t-h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-0.03em;line-height:1}
.t-h3{font-size:clamp(24px,2.5vw,36px);font-weight:500;letter-spacing:-0.02em;line-height:1.1}
.t-lead{font-size:20px;line-height:1.5;color:var(--ink)}
.t-body{font-size:16px;line-height:1.6;color:var(--ink)}
.t-body-mute{font-size:16px;line-height:1.6;color:var(--grey-500)}

i, em, .it{font-style:italic;font-weight:300}
.liquid{
  font-style:italic;font-weight:300;
  background:linear-gradient(135deg,#0000FF 0%, #4D7FFF 40%, #000B47 80%, #0000FF 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 6s ease-in-out infinite;
  display:inline-block;
  padding-right:0.18em;
  padding-bottom:0.18em;
  padding-top:0.06em;
  margin-right:0.05em;
  line-height:inherit;
}

/* Fix descenders & ascenders coupés sur les grands titres */
.hero-title,
.statement-text,
.t-h2,
.testi-quote,
.footer-mark,
.final-title {
  line-height:1.05;
  padding-bottom:0.08em;
  overflow:visible;
}
/* Overflow visible global pour éviter le clipping de .liquid et des descenders */
.hero,.statement,.stats,.services,.process,.portfolio,.testi,.faq,.final-cta,
.who,.main,.section,.reveal,.container,
main, section { overflow:visible !important; }
.reveal{overflow:visible}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Period dot signature */
.dot{font-style:italic;font-weight:300;color:var(--electric);display:inline-block}

/* ===== Liquid blobs ===== */
.blobs{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
.blob{
  position:absolute;border-radius:50%;filter:blur(100px);will-change:transform;
}
.blob-1{width:520px;height:520px;background:var(--electric);opacity:.28;top:-10%;left:-8%;animation:blobA 24s ease-in-out infinite}
.blob-2{width:620px;height:620px;background:var(--azur);opacity:.30;top:35%;right:-15%;animation:blobB 28s ease-in-out infinite}
.blob-3{width:480px;height:480px;background:var(--navy);opacity:.32;bottom:-10%;left:25%;animation:blobC 30s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,120px) scale(1.15)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,-80px) scale(1.2)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,-90px) scale(1.1)}}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);
  mix-blend-mode:difference;
}
.logo{font-family:var(--f-sans);font-weight:600;font-size:24px;letter-spacing:-0.04em;color:#fff;display:inline-flex;align-items:baseline;gap:2px;font-feature-settings:"kern" 1}
.logo .dot{color:#fff;mix-blend-mode:normal} /* difference inverts to keep visibility */
.nav{display:flex;align-items:center;gap:36px;color:#fff}
.nav a{font-size:14px;font-family:var(--f-sans);font-weight:400;position:relative;color:#fff}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:#fff;transition:width .4s var(--ease-out)}
.nav a:hover::after{width:100%}
.nav .cta-pill{
  background:#fff;color:#000;padding:10px 22px;border-radius:999px;font-weight:500;font-size:14px;
  transition:transform .4s var(--ease-out), box-shadow .4s;
}
.nav .cta-pill::after{display:none}
.nav .cta-pill:hover{transform:translateY(-2px)}

@media (max-width:880px){
  .nav .nav-link{display:none}
}

/* Hamburger toggle */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:6px;
  width:40px;height:40px;border-radius:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:10px 12px;z-index:101;
}
.nav-toggle-bar{display:block;width:100%;height:1.5px;background:#fff;transition:transform .4s var(--ease-out),opacity .3s;transform-origin:center}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Mobile nav overlay */
.nav-mobile{
  display:none;position:fixed;inset:0;z-index:99;
  background:var(--ink);
  flex-direction:column;justify-content:center;align-items:center;gap:32px;
  opacity:0;transform:translateY(-16px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  pointer-events:none;
}
.nav-mobile.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-mobile a{
  font-size:clamp(32px,8vw,56px);font-weight:500;letter-spacing:-.03em;
  color:#fff;text-align:center;transition:color .3s;
}
.nav-mobile a:hover{color:var(--electric)}
.nav-mobile .nav-mobile-cta{
  margin-top:16px;background:var(--electric);color:#fff;
  padding:16px 32px;border-radius:999px;font-size:16px;font-weight:500;
}
@media(max-width:880px){
  .nav-toggle{display:flex}
  .nav-mobile{display:flex}
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 28px;border-radius:999px;font-weight:500;font-size:15px;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .3s, color .3s;
  will-change:transform;
}
.btn-primary{background:var(--electric);color:#fff;box-shadow:0 0 0 rgba(0,0,255,0)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -10px rgba(0,0,255,.55)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);padding:17px 27px}
.btn-outline:hover{transform:translateY(-3px);border-color:var(--electric);color:var(--electric)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-3px);background:var(--ink);color:#fff}
.btn-arrow{transition:transform .4s var(--ease-out)}
.btn:hover .btn-arrow{transform:translateX(6px)}

/* ===== Containers ===== */
.section{padding:var(--section-y) var(--pad-x);position:relative}
.container{max-width:1440px;margin:0 auto;width:100%}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.in{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}

/* word reveal */
.split-line{display:block;overflow:hidden}
.split-word{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out)}
.split-word.in{transform:translateY(0)}

/* ===== Loader ===== */
.loader{
  position:fixed;inset:0;background:#000;z-index:10000;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.loader-text{
  color:#fff;font-family:var(--f-sans);font-weight:600;font-size:64px;letter-spacing:-0.06em;
  display:inline-flex;align-items:baseline;
}
.loader-text span{display:inline-block;opacity:0;transform:translateY(20px);animation:letterIn .5s var(--ease-out) forwards}
.loader-text span:nth-child(1){animation-delay:.1s}
.loader-text span:nth-child(2){animation-delay:.2s}
.loader-text span:nth-child(3){animation-delay:.3s}
.loader-text span:nth-child(4){animation-delay:.4s}
.loader-text span:nth-child(5){animation-delay:.5s}
.loader-text span:nth-child(6){animation-delay:.6s;color:var(--electric);font-weight:300;font-style:italic}
@keyframes letterIn{to{opacity:1;transform:translateY(0)}}
.loader.is-hidden{opacity:0;visibility:hidden}

/* page transition overlay */
.page-overlay{
  position:fixed;inset:0;background:#000;z-index:9997;transform:translateY(100%);
  transition:transform .6s var(--ease-io);pointer-events:none;
}
.page-overlay.is-cover{transform:translateY(0)}

/* ===== Waves ===== */
.wave{display:block;width:100%;height:auto}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;animation-iteration-count:1 !important}
}