:root{
  --bg:#0e0e10;
  --bg-2:#15151a;
  --bg-3:#1c1c22;
  --card:#15151a;
  --ink:#f3f1ea;
  --ink-2:#b9b6ad;
  --ink-3:#7a7a82;
  --ink-4:#3a3a40;
  --line:rgba(243,241,234,.10);
  --line-2:rgba(243,241,234,.18);

  --c-pink:#ff5e8a;
  --c-orange:#ff5a1f;
  --c-purple:#a23bd6;
  --c-teal:#1fb6a9;
  --c-cyan:#5fc9ff;
  --c-lime:#c6f964;
  --c-green:#1f8a5b;
  --c-amber:#ffb547;
  --c-red:#e84016;

  --sans:'Chillax',-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --serif:'Chillax',Georgia,serif;
  --mono:'Chillax',ui-monospace,Menlo,monospace;
  --display-mono:'Chillax',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;font-feature-settings:"ss01" on,"ss02" on;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{overflow-x:clip;cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
::selection{background:var(--ink);color:var(--bg)}
img{max-width:100%;display:block}

/* === Custom cursor === */
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:999px;background:var(--ink);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s ease, height .25s ease, background .2s ease;will-change:transform}
.cursor.big{width:42px;height:42px;background:rgba(243,241,234,.12);color:var(--ink);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(243,241,234,.22);box-shadow:0 4px 16px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.cursor::after{content:attr(data-label);opacity:0;transition:opacity .2s}
.cursor.big::after{opacity:1;color:var(--ink)}
@media (hover:none){body{cursor:auto}.cursor{display:none}}

/* === NAV === Split twin pills: brand top-left + nav top-right (modern studio layout) */
.nav{position:fixed;top:28px;right:28px;left:auto;transform:none;z-index:100;display:flex;align-items:center;gap:8px;padding:8px;background:rgba(28,28,34,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 36px rgba(0,0,0,.4)}
.brand{position:fixed;top:28px;left:28px;z-index:100;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);background:rgba(28,28,34,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.35);text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.brand:hover{background:rgba(40,40,46,.85);border-color:var(--line-2);transform:translateY(-2px)}
.brand .slash{font-family:var(--mono);font-weight:500;color:var(--ink-3)}

/* Brand becomes its own floating pill at top-left, decoupled from nav */
.nav .brand{position:fixed;top:28px;left:28px;z-index:100;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);background:rgba(28,28,34,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.35);text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.nav .brand:hover{background:rgba(40,40,46,.85);border-color:var(--line-2);transform:translateY(-2px)}
.nav .brand .slash{font-family:var(--mono);font-weight:500;color:var(--ink-3)}

.nav .links{display:flex;gap:2px}
.nav .links a{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--ink-2);border-radius:999px;transition:background .2s, color .2s}
.nav .links a:hover{background:var(--bg-3);color:var(--ink)}
.nav .links a[aria-current="page"]{background:var(--bg-3);color:var(--ink)}
.nav .cta{padding:10px 18px;background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:transform .2s, background .2s}
.nav .cta::before{content:'';display:inline-block;width:14px;height:12px;flex-shrink:0;background-image:linear-gradient(var(--c-red),var(--c-red)),linear-gradient(var(--c-red),var(--c-red)),linear-gradient(var(--c-red),var(--c-red));background-repeat:no-repeat;background-position:0 100%, 6px 100%, 12px 100%;background-size:2px 100%, 2px 50%, 2px 75%;animation:equalizer 1.1s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(232,64,22,.6))}
.nav .cta:hover{background:var(--c-pink);color:#fff}
.nav .cta:hover::before{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
@keyframes equalizer{
  0%, 100%{background-size:2px 100%, 2px 50%, 2px 75%}
  33%{background-size:2px 50%, 2px 100%, 2px 35%}
  66%{background-size:2px 75%, 2px 30%, 2px 100%}
}
@keyframes pulse{50%{opacity:.4}}
@media (max-width:760px){.nav{top:20px;right:20px;padding:5px}.nav .brand{top:20px;left:20px;padding:11px 16px;font-size:13px}.nav .links a{padding:8px 12px;font-size:12px}.nav .cta{padding:8px 14px;font-size:12px}
  /* iOS Safari: prevent auto-zoom on input focus by ensuring 16px+ font */
  .field input,.field textarea,.field select,.demo-field input,.demo-field textarea,.demo-field select,.demo-newsletter-form input{font-size:16px !important}
}

/* === Burger menu (mobile <760px) === */
.nav-burger{display:none;position:fixed;top:20px;right:20px;z-index:101;width:48px;height:48px;background:rgba(28,28,34,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:999px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;transition:background .25s,border-color .25s}
.nav-burger:hover{background:rgba(40,40,46,.85);border-color:var(--line-2)}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:760px){
  .nav-burger{display:flex}
  .nav{background:transparent !important;border-color:transparent !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:0 !important;pointer-events:none}
  .nav .links,.nav>.cta{display:none}
  .nav .brand{pointer-events:auto}
}

/* Menu overlay (mobile) */
.nav-menu-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,10,16,.96);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:80px 24px 40px;opacity:0;transition:opacity .3s ease}
.nav-menu-overlay.open{display:flex;opacity:1}
.nav-menu-overlay a{display:block;font-family:var(--display-mono);font-size:34px;font-weight:300;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:14px 24px;border-radius:12px;transition:background .2s,transform .2s;text-align:center;line-height:1.1}
.nav-menu-overlay a:active{transform:scale(.97)}
.nav-menu-overlay a.cta{margin-top:18px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:14px 32px}
.nav-menu-overlay .menu-section{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;margin-top:24px;margin-bottom:4px}

/* === Hero brand wordmark — gradient pink→amber, floating === */
.hero-sphere{position:absolute;left:8%;bottom:18%;z-index:5;pointer-events:none}
.hero-sphere-label{display:block;font-family:var(--display-mono);font-weight:700;font-size:clamp(36px,5vw,72px);letter-spacing:.14em;text-transform:uppercase;line-height:1;background:linear-gradient(110deg,var(--c-pink) 0%,var(--c-amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:novaLabelFloat 5s ease-in-out infinite;text-shadow:0 0 60px rgba(255,94,138,.15)}
@keyframes novaLabelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:1100px){.hero-sphere{left:6%;bottom:14%}}
@media (max-width:760px){.hero-sphere-label{letter-spacing:.10em}}
@media (max-width:560px){.hero-sphere{display:none}}

/* === NOVA SPHERE — 3D animated chrome/obsidian logo mark === */
.nova-sphere{--size:18px;display:inline-block;width:var(--size);height:var(--size);border-radius:50%;position:relative;vertical-align:middle;flex-shrink:0;background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.85),rgba(255,255,255,.15) 14%,transparent 32%),radial-gradient(circle at 70% 80%,rgba(160,180,200,.18),transparent 50%),radial-gradient(circle at 50% 50%,#1c1c20,#050507);box-shadow:inset 0 -3px 6px rgba(0,0,0,.7),inset -2px -2px 4px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.6),0 0 calc(var(--size) * .5) rgba(255,255,255,.06);animation:novaFloat 6s ease-in-out infinite}
.nova-sphere::before{content:'';position:absolute;top:10%;left:20%;width:35%;height:30%;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.5) 35%,transparent 75%);filter:blur(.5px);animation:novaHighlight 8s ease-in-out infinite;pointer-events:none}
.nova-sphere::after{content:'';position:absolute;bottom:18%;right:22%;width:22%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(140,180,220,.25),transparent 70%);filter:blur(1px);animation:novaSecondary 10s ease-in-out infinite;pointer-events:none}
.nova-sphere.md{--size:48px}
.nova-sphere.lg{--size:120px}
.nova-sphere.xl{--size:240px}
.nav .brand:hover .nova-sphere{animation-duration:3s}
.nav .brand:hover .nova-sphere::before{animation-duration:4s}

@keyframes novaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes novaHighlight{0%,100%{top:10%;left:20%;width:35%;height:30%;opacity:1}33%{top:15%;left:30%;width:38%;height:28%;opacity:.95}66%{top:8%;left:22%;width:32%;height:32%;opacity:.85}}
@keyframes novaSecondary{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}

/* === Scroll-driven dive (hero stays pinned while user scrolls through it) === */
.scroll-stage{position:relative;height:140vh}
.scroll-stage .hero{position:sticky;top:0;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh}

/* === Premium scroll-driven transitions for all sections (modern browsers) === */
@supports (animation-timeline: view()) {
  section, .marquee, .cta-banner, .footer-big, .footer-cols{
    animation:premiumIn linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
    will-change:opacity,transform,filter;
  }
  @keyframes premiumIn{
    from{opacity:0;transform:translateY(60px) scale(.96);filter:blur(6px)}
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }
  /* Subtle exit when section leaves the viewport (scroll past it) */
  section, .cta-banner{
    animation:premiumIn linear both, premiumOut linear both;
    animation-timeline:view(), view();
    animation-range:entry 0% entry 55%, exit 30% exit 100%;
  }
  @keyframes premiumOut{
    from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    to{opacity:0;transform:translateY(-30px) scale(.97);filter:blur(3px)}
  }
  /* Stagger grid items inside services & projects */
  .services .svc, .projects .proj, .stats-row .stat-cell, .footer-cols .fcol{
    animation:premiumIn linear both;
    animation-timeline:view();
    animation-range:entry 10% entry 70%;
  }
  /* Hero stays unaffected (it has its own dive animation) */
  .scroll-stage section, .scroll-stage .hero{animation:none}
}

/* === HERO === */
.hero{position:relative;min-height:100vh;min-height:100dvh;padding:140px 40px 80px;overflow:hidden}
.hero-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:60px;max-width:560px;position:relative;z-index:3}
.hero-meta .live{color:var(--c-lime);display:flex;align-items:center;gap:8px}
.hero-meta .live::before{content:'';width:7px;height:7px;border-radius:999px;background:var(--c-lime);box-shadow:0 0 8px var(--c-lime);animation:pulse 1.6s ease-in-out infinite}

.hero h1{font-family:var(--display-mono);font-weight:700;font-size:clamp(44px,7.5vw,128px);line-height:1;letter-spacing:-.05em;max-width:1100px;position:relative;z-index:3;color:var(--ink);text-transform:uppercase}
.hero h1 .small{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em;text-transform:none;font-size:.92em}
.hero h1 .ink-3{color:var(--ink-3)}

/* === Particle text — full-screen second page === */
.particle-section{position:relative;width:100%;height:100vh;min-height:780px;background:var(--bg);overflow:hidden}

/* Canvas fills the entire section */
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;background:transparent;cursor:none;z-index:1;display:block}

/* Subtle colored glows only — no vignette darkening so particles remain visible everywhere */
.particle-section .ps-bg{position:absolute;inset:0;pointer-events:none;z-index:2;background:
  radial-gradient(ellipse at 20% 80%, rgba(95,201,255,.05) 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, rgba(255,181,71,.04) 0%, transparent 60%),
  radial-gradient(ellipse at 50% 50%, rgba(255,94,138,.04) 0%, transparent 70%);
  mix-blend-mode:screen
}

/* Top header — overlay top */
.particle-section .ps-top{position:absolute;top:36px;left:56px;right:56px;z-index:3;display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.28em;color:var(--ink-3)}
.particle-section .ps-num{font-family:var(--display-mono);font-weight:700;font-size:36px;letter-spacing:-.05em;color:var(--ink);line-height:1}
.particle-section .ps-label{flex:1;color:var(--ink-2)}
.particle-section .ps-meta{color:var(--ink-3)}

/* Center tagline — overlay near bottom (above particles in canvas center) */
.particle-section .ps-center{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:3;text-align:center;pointer-events:none;width:90%;max-width:680px}
.particle-section .ps-tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(16px,1.6vw,22px);color:var(--ink-2);line-height:1.5}
.particle-section .ps-tagline em{font-weight:400;background:linear-gradient(110deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Bottom footer — overlay bottom */
.particle-section .ps-bottom{position:absolute;bottom:36px;left:56px;right:56px;z-index:3;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:var(--ink-3)}
.particle-section .ps-hint{opacity:.55}
.particle-section .ps-scroll{color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;animation:psScroll 2.4s ease-in-out infinite}
@keyframes psScroll{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(4px);opacity:1}}

@media (max-width:760px){.particle-section{height:auto;min-height:100vh}.particle-section .ps-top,.particle-section .ps-bottom{left:24px;right:24px}}
.hero-bottom{position:relative;z-index:3;margin-top:80px;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end}
.hero-desc{max-width:480px;font-size:18px;line-height:1.5;color:var(--ink-2);font-weight:500}
.hero-desc strong{color:var(--ink);font-weight:700}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pill-cta{display:inline-flex;align-items:center;gap:14px;padding:18px 26px;background:var(--ink);color:var(--bg);border-radius:999px;font-weight:600;font-size:15px;transition:background .3s, transform .3s}
.pill-cta:hover{background:var(--c-pink);color:#fff;transform:translateY(-2px)}
.pill-cta .arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--bg);color:var(--ink);transition:transform .3s}
.pill-cta:hover .arrow{transform:rotate(-45deg);background:#fff;color:var(--c-pink)}
.pill-secondary{padding:14px 22px;border:1px solid var(--line-2);color:var(--ink);border-radius:999px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:10px;transition:background .2s, border-color .2s}
.pill-secondary:hover{background:var(--bg-3);border-color:var(--ink-3)}
.hero-fineprint{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
@media (max-width:860px){.hero{padding:120px 20px 60px}.hero-bottom{grid-template-columns:1fr;gap:32px}}

/* === Page hero (smaller, for inner pages) === */
.page-hero{position:relative;padding:160px 40px 80px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.page-hero h1{font-family:var(--display-mono);font-weight:700;font-size:clamp(44px,7vw,118px);line-height:1;letter-spacing:-.05em;color:var(--ink);max-width:1100px;text-transform:uppercase;word-break:keep-all;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em;text-transform:none;font-size:.92em}
.page-hero p{max-width:620px;font-size:17px;line-height:1.55;color:var(--ink-2)}
@media (max-width:860px){.page-hero{padding:130px 20px 60px}}

/* === DIAGONAL CASCADE (signature studio.design, dark) === */
.cascade{position:absolute;top:-60px;right:-25vw;width:80vw;height:160vh;pointer-events:none;z-index:1;transform:rotate(var(--cascade-rot,-12deg)) scale(var(--cascade-scale,1));transform-origin:55% 55%;transition:transform .1s linear;will-change:transform}

.hero-fade{position:absolute;top:0;left:0;width:62%;height:100%;z-index:2;pointer-events:none;background:linear-gradient(to right, var(--bg) 0%, var(--bg) 55%, rgba(14,14,16,.85) 80%, rgba(14,14,16,0) 100%)}
@media (max-width:1100px){.hero-fade{width:75%}}
@media (max-width:760px){.hero-fade{width:100%;background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 60%, rgba(14,14,16,.5) 100%)}}

.cascade-inner{display:flex;flex-direction:column;gap:18px;animation:cascadeSlide 36s linear infinite}
@keyframes cascadeSlide{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.crow{display:block;width:1040px;height:585px;border-radius:18px;overflow:hidden;background:var(--bg-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.55);border:1px solid var(--line);position:relative;flex-shrink:0;text-decoration:none;color:inherit;transition:box-shadow .4s, border-color .4s, transform .4s}
.crow:hover{box-shadow:0 36px 90px -20px rgba(0,0,0,.7);border-color:var(--line-2);transform:translateY(-4px)}
.crow .shot{position:relative;width:100%;height:100%;overflow:hidden}
.crow .shot iframe{position:absolute;top:0;left:0;width:1600px;height:900px;border:0;transform:scale(.65);transform-origin:top left;pointer-events:none}

/* Modular margin pattern repeating every 9 — matches sites count for seamless loop */
.crow:nth-child(9n+1){margin-right:0vw}
.crow:nth-child(9n+2){margin-right:8vw}
.crow:nth-child(9n+3){margin-right:-4vw}
.crow:nth-child(9n+4){margin-right:12vw}
.crow:nth-child(9n+5){margin-right:2vw}
.crow:nth-child(9n+6){margin-right:-8vw}
.crow:nth-child(9n+7){margin-right:6vw}
.crow:nth-child(9n+8){margin-right:-2vw}
.crow:nth-child(9n+9){margin-right:4vw}

.shot svg{width:100%;height:100%;display:block}

/* === MARQUEE === (legacy, no longer used — kept for any leftover refs) */
.marquee{display:none}

/* === MANIFESTO scroll storytelling === */
.manifesto{position:relative;height:200vh;background:
  radial-gradient(ellipse at 20% 30%,rgba(255,94,138,.06) 0%,transparent 60%),
  radial-gradient(ellipse at 80% 70%,rgba(95,201,255,.045) 0%,transparent 60%),
  radial-gradient(ellipse at 50% 50%,rgba(255,181,71,.03) 0%,transparent 70%),
  var(--bg)
}
.manifesto-pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent}

/* Animated background overlay for ambience (extra layer, additive) */
.manifesto-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse at 30% 40%,rgba(255,94,138,.08) 0%,transparent 50%),
  radial-gradient(ellipse at 70% 60%,rgba(95,201,255,.06) 0%,transparent 50%);
  animation:manifestoBg 12s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes manifestoBg{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.15) rotate(6deg)}}

/* Progress dots (right side) */
.manifesto-progress{position:absolute;right:48px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3}
.manifesto-progress .mp-dot{width:6px;height:6px;border-radius:50%;background:rgba(243,241,234,.2);transition:all .4s cubic-bezier(.4,0,.2,1)}
.manifesto-progress .mp-dot.active{background:var(--c-pink);width:8px;height:8px;box-shadow:0 0 12px rgba(255,94,138,.5)}

/* Counter (top-left) */
.manifesto-counter{position:absolute;top:48px;left:48px;font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:var(--ink-3);z-index:3;display:flex;align-items:baseline;gap:6px}
.manifesto-counter .mc-num{font-family:var(--display-mono);font-weight:700;font-size:38px;letter-spacing:-.04em;color:var(--ink);line-height:1;transition:opacity .3s}
.manifesto-counter .mc-sep{opacity:.4}
.manifesto-counter .mc-total{opacity:.5}

/* Statements stacked, only one visible at a time — fills pin so content centers */
.statement{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 60px;opacity:0;transform:translateY(40px) scale(.98);filter:blur(8px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;pointer-events:none}
.statement.active{opacity:1;transform:translateY(0) scale(1);filter:blur(0);pointer-events:auto}
.statement.active.exit{opacity:0;transform:translateY(-40px) scale(.98);filter:blur(8px)}

.statement .stm-tag{display:inline-block;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.32em;color:var(--c-pink);margin-bottom:48px;padding:10px 22px;border:1px solid rgba(255,94,138,.3);border-radius:999px;background:rgba(255,94,138,.05)}
.statement h3{font-family:var(--display-mono);font-weight:700;font-size:clamp(48px,7.5vw,112px);line-height:1;letter-spacing:-.04em;color:var(--ink);text-transform:uppercase;margin-bottom:48px;max-width:min(100%,1200px);overflow-wrap:break-word;hyphens:auto}
.statement[data-stm="2"] h3{font-size:clamp(40px,6vw,96px)}
.statement h3 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;background:linear-gradient(110deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em;margin:0 -.07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.statement p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,32px);line-height:1.5;color:var(--ink-2);max-width:min(100%,820px);margin:0 auto;overflow-wrap:break-word}

@media (max-width:760px){
  .manifesto-counter,.manifesto-progress{right:20px;left:auto;top:24px}
  .manifesto-counter{left:24px;right:auto;font-size:11px}
  .manifesto-counter .mc-num{font-size:28px}
  .statement{padding:0 24px}
}

/* === SECTIONS === */
section{padding:120px 40px;position:relative;z-index:2}
.pill-tag{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.14em;background:var(--bg-2)}
.pill-tag .icon{color:var(--ink-3)}
.sec-head-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:80px}
.sec-title{font-family:var(--display-mono);font-weight:700;font-size:clamp(38px,5.5vw,96px);line-height:1.02;letter-spacing:-.045em;color:var(--ink);text-transform:uppercase;max-width:min(100%,1200px);word-break:keep-all;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.sec-title em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em;text-transform:none;font-size:.92em}
.sec-aside{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:560px}
@media (max-width:760px){section{padding:80px 20px}}

/* === SERVICES (2x2 grid avec previews) === */
.services{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:24px;padding:36px;min-height:480px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s, transform .4s}
.svc:hover{border-color:var(--line-2);transform:translateY(-4px)}
.svc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 0%, rgba(255,255,255,.06), transparent 50%);pointer-events:none}
.svc .preview{flex:1;margin:-36px -36px 24px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%, var(--bg-3), var(--bg-2))}
.svc h3{font-size:32px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.svc h3 em{font-family:var(--serif);font-style:italic;font-weight:400}
.svc p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:420px}
.svc ul{margin-top:18px;display:flex;flex-direction:column;gap:8px;list-style:none}
.svc ul li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.svc ul li::before{content:'✦';color:var(--c-pink);flex-shrink:0;font-size:11px;line-height:1.6}
@media (max-width:860px){.services{grid-template-columns:1fr}}

.pv-glass{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 65%), radial-gradient(circle at 70% 70%, rgba(166,131,255,.5), transparent 60%);filter:drop-shadow(0 30px 50px rgba(120,80,255,.3));position:relative}
.pv-glass::before{content:'';position:absolute;inset:30%;background:rgba(255,255,255,.1);transform:rotate(45deg);border-radius:8px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

.pv-cms{position:absolute;inset:0;display:grid;grid-template-columns:140px 1fr;gap:0;font-family:var(--sans)}
.pv-cms .side{background:rgba(255,255,255,.04);border-right:1px solid var(--line);padding:20px 14px;font-size:11px;color:var(--ink-2)}
.pv-cms .side .row{padding:8px 10px;border-radius:8px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.pv-cms .side .row.on{background:rgba(255,255,255,.08);color:var(--ink)}
.pv-cms .side .row .dot{width:6px;height:6px;border-radius:999px;background:var(--ink-4)}
.pv-cms .side .row.on .dot{background:var(--c-lime)}
.pv-cms .main{padding:24px;display:flex;flex-direction:column;gap:14px}
.pv-cms .main .h{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pv-cms .main .chip{display:inline-block;padding:6px 12px;background:rgba(255,255,255,.06);border-radius:999px;font-family:var(--mono);font-size:10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;align-self:flex-start}
.pv-cms .main .skel{height:8px;background:rgba(255,255,255,.08);border-radius:4px}
.pv-cms .main .skel.s{width:60%}

.pv-code{position:absolute;inset:0;padding:30px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink-2)}
.pv-code .c-1{color:var(--ink-3)}
.pv-code .c-k{color:var(--c-pink)}
.pv-code .c-s{color:var(--c-lime)}
.pv-code .c-v{color:var(--c-amber)}
.pv-code .c-f{color:#7eb8ff}

.pv-3d{width:200px;height:200px;position:relative;perspective:600px}
.pv-3d .cube{position:absolute;inset:0;transform-style:preserve-3d;animation:cubeRot 14s linear infinite;display:flex;align-items:center;justify-content:center}
.pv-3d .face{position:absolute;width:120px;height:120px;background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.3);box-shadow:0 0 40px rgba(255,255,255,.15)}
.pv-3d .face.f1{transform:translateZ(60px)}
.pv-3d .face.f2{transform:rotateY(90deg) translateZ(60px)}
.pv-3d .face.f3{transform:rotateY(180deg) translateZ(60px)}
.pv-3d .face.f4{transform:rotateY(-90deg) translateZ(60px)}
.pv-3d .face.f5{transform:rotateX(90deg) translateZ(60px)}
.pv-3d .face.f6{transform:rotateX(-90deg) translateZ(60px)}
@keyframes cubeRot{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}

/* === SERVICES — extended (delay, tag, deliverables, stack, accent vars) === */
.svc .delay{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-3);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.svc .delay::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--accent,var(--c-pink))}
.svc .tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--accent,var(--c-pink));margin-bottom:14px;line-height:1.4}
.svc .deliverables{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.svc .deliverables span{font-family:var(--mono);font-size:10px;color:var(--ink-2);padding:5px 10px;border:1px solid var(--line);border-radius:999px;letter-spacing:.06em}
.svc .stack-row{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em;display:flex;justify-content:space-between;align-items:center}
.svc .stack-row strong{color:var(--accent,var(--c-pink));font-weight:500}
.svc.s1{--accent:#ff5e8a}
.svc.s2{--accent:#5fc9ff}
.svc.s3{--accent:#c6f964}
.svc.s4{--accent:#ffb547}

/* === SERVICES — preview visuals === */

/* 1 — Brand kit grid */
.pv-brand{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:14px;padding:24px;align-content:center}
.pv-brand .logo{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display-mono);font-weight:700;font-size:42px;color:var(--ink);letter-spacing:.04em}
.pv-brand .logo .star{width:24px;height:24px;background:#ff5e8a;border-radius:50%;box-shadow:0 0 18px rgba(255,94,138,.5)}
.pv-brand .swatches{grid-column:span 2;display:flex;gap:8px;justify-content:center}
.pv-brand .sw{width:48px;height:48px;border-radius:50%;border:2px solid rgba(243,241,234,.1);position:relative}
.pv-brand .sw::after{content:attr(data-hex);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;color:var(--ink-3);letter-spacing:.1em;white-space:nowrap}
.pv-brand .typo{display:flex;flex-direction:column;gap:4px}
.pv-brand .typo .big{font-family:var(--display-mono);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.02em;text-transform:uppercase}
.pv-brand .typo .sm{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-2)}
.pv-brand .typo .lbl{font-family:var(--mono);font-size:8px;color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase;margin-top:4px}

/* 2 — UI/UX : Figma artboard mockup */
/* 2 — UI/UX glassmorphism preview (Neo-Tactile inspired) */
.pv-uiux{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,#080a14 0%,#0e1220 60%,#040810 100%);font-family:var(--mono);isolation:isolate}
.ui-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ui-blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55}
.ui-blob.b1{top:-20%;left:5%;width:55%;height:55%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:blobMove1 9s ease-in-out infinite}
.ui-blob.b2{bottom:-15%;right:0;width:45%;height:45%;background:radial-gradient(circle,#1fb6a9,transparent 70%);animation:blobMove2 11s ease-in-out infinite}
.ui-blob.b3{top:35%;left:55%;width:30%;height:30%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:blobMove3 7s ease-in-out infinite}
@keyframes blobMove1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes blobMove2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-20px)}}
@keyframes blobMove3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}

.ui-glass{position:absolute;left:5%;top:6%;width:48%;height:88%;border-radius:18px;background:rgba(16,22,38,.65);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(95,201,255,.35);box-shadow:0 0 50px rgba(95,201,255,.18),inset 0 0 0 1px rgba(255,255,255,.04);padding:14px 12px;display:flex;flex-direction:column;gap:7px;color:#e6f0ff;font-size:9px;z-index:2;animation:glassPulse 4s ease-in-out infinite}
@keyframes glassPulse{0%,100%{box-shadow:0 0 50px rgba(95,201,255,.18),inset 0 0 0 1px rgba(255,255,255,.04)}50%{box-shadow:0 0 75px rgba(95,201,255,.32),inset 0 0 0 1px rgba(95,201,255,.12)}}

.ui-head{display:flex;align-items:center;gap:6px}
.ui-avatar{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5fc9ff,#ff5e8a);flex-shrink:0}
.ui-avatar.sm{width:10px;height:10px}
.ui-title{flex:1;font-weight:600;color:#fff;font-size:9px}
.ui-menu{color:rgba(255,255,255,.6);font-size:11px}

.ui-toggles{display:flex;gap:4px;margin-top:2px}
.ui-pill{flex:1;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.06);text-align:center;font-size:8px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.08)}
.ui-pill.active{background:#3b82f6;color:#fff;border-color:transparent;box-shadow:0 0 12px rgba(95,150,255,.6);animation:pillPulse 3s ease-in-out infinite}
@keyframes pillPulse{0%,100%{box-shadow:0 0 12px rgba(95,150,255,.5)}50%{box-shadow:0 0 20px rgba(95,150,255,.85)}}

.ui-drop{display:flex;justify-content:space-between;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.06);font-size:8px;border:1px solid rgba(255,255,255,.06);color:#fff}
.ui-drop.sub{margin-top:-3px;background:rgba(255,255,255,.04);font-size:7.5px;color:rgba(255,255,255,.5);width:80%;align-self:flex-end}
.ui-drop .caret{color:rgba(255,255,255,.4)}

.ui-icon-row{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05);margin-top:2px}
.ui-ico{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06);font-size:8px;color:rgba(255,255,255,.7)}
.ui-ico-circle{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid #5fc9ff;box-shadow:0 0 14px rgba(95,201,255,.7),inset 0 0 10px rgba(95,201,255,.25);position:relative}
.ui-ico-circle::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid #5fc9ff;opacity:.5;animation:cyanRing 2s ease-out infinite}
@keyframes cyanRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}

.ui-slider{display:flex;align-items:center;gap:6px;font-size:8px;padding:1px 0}
.ui-slider .lbl{color:rgba(255,255,255,.55);min-width:14px}
.ui-slider .track{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.ui-slider .fill{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:#5fc9ff;box-shadow:0 0 8px rgba(95,201,255,.7);animation:fillSlide1 5s ease-in-out infinite}
.ui-slider .fill.off{animation:fillSlide2 6s ease-in-out infinite}
@keyframes fillSlide1{0%,100%{width:30%}50%{width:75%}}
@keyframes fillSlide2{0%,100%{width:20%}50%{width:50%}}

.ui-switch{width:24px;height:14px;border-radius:999px;background:#3b82f6;box-shadow:0 0 10px rgba(95,150,255,.5);position:relative;flex-shrink:0}
.ui-switch .knob{position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:#fff;animation:knobSlide 4s ease-in-out infinite}
@keyframes knobSlide{0%,100%{left:1px}50%{left:11px}}

.ui-modal{margin-top:auto;background:rgba(255,255,255,.06);border-radius:10px;padding:8px;border:1px solid rgba(255,255,255,.08);font-size:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ui-modal .m-head{display:flex;align-items:center;gap:5px;margin-bottom:5px;font-weight:600;color:#fff}
.ui-modal .m-head .dots{margin-left:auto;color:rgba(255,255,255,.5);letter-spacing:1px}
.ui-modal .m-row{display:flex;justify-content:space-between;padding:4px 0;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.05)}

.ui-ann{position:absolute;right:5%;top:14%;width:36%;display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.65);z-index:3}
.ui-ann .ann{display:flex;align-items:center;gap:9px;position:relative}
.ui-ann .ann::before{content:'';position:absolute;left:-25%;top:50%;width:24%;height:1px;background:linear-gradient(90deg,rgba(95,201,255,.4),rgba(95,201,255,0))}
.ann-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0}
.ann-dot.c{background:#5fc9ff;box-shadow:0 0 10px rgba(95,201,255,.7)}
.ann-dot.p{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.ann-ico{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:9px;color:#fff;flex-shrink:0;font-weight:600}
.ann-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(95,201,255,.2);border-top-color:#5fc9ff;animation:spin 1.5s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* 3 — Code preview + terminal */
.pv-code-block{position:absolute;inset:0;display:flex;flex-direction:column;padding:20px;font-family:var(--display-mono);font-size:11px;line-height:1.65}
.pv-code-block .cb{flex:1;color:var(--ink-2)}
.pv-code-block .terminal{margin-top:12px;padding:10px 12px;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:10px;color:var(--ink-2);line-height:1.7}
.pv-code-block .terminal .ok{color:#c6f964}
.pv-code-block .terminal .arrow{color:var(--ink-3)}
.pv-code-block .terminal .num{color:#ffb547}

/* 4 — Motion : Floating 3D Layers (glassmorphism + chromatic depth) */
.pv-tunnel{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at center,#1a1228 0%,#0a0618 60%,#000 100%);perspective:1100px;perspective-origin:50% 50%;font-family:var(--mono);isolation:isolate}

/* Chromatic background blobs */
.pv-tunnel .ml-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pv-tunnel .ml-blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.7;will-change:transform}
.pv-tunnel .ml-blob.b1{top:-20%;left:5%;width:55%;height:55%;background:radial-gradient(circle,#ff5e8a,transparent 70%);animation:mlBlob1 12s ease-in-out infinite}
.pv-tunnel .ml-blob.b2{bottom:-25%;right:0;width:60%;height:60%;background:radial-gradient(circle,#ffb547,transparent 70%);animation:mlBlob2 14s ease-in-out infinite}
.pv-tunnel .ml-blob.b3{top:30%;right:20%;width:35%;height:35%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:mlBlob3 10s ease-in-out infinite}
@keyframes mlBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.1)}}
@keyframes mlBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-20px) scale(1.05)}}
@keyframes mlBlob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-40px) scale(.9)}}

/* 3D stage with parallax rotation */
.pv-tunnel .ml-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;animation:mlCamera 9s ease-in-out infinite}
@keyframes mlCamera{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.pv-tunnel .ml-rotor{position:relative;width:240px;height:140px;transform-style:preserve-3d;animation:mlRotor 14s ease-in-out infinite}
@keyframes mlRotor{0%{transform:rotateY(-34deg) rotateX(14deg)}50%{transform:rotateY(34deg) rotateX(-10deg)}100%{transform:rotateY(-34deg) rotateX(14deg)}}

/* Generic glass layer */
.pv-tunnel .ml-layer{position:absolute;left:50%;top:50%;border-radius:14px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);border:1px solid rgba(255,255,255,.10);overflow:hidden;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}

/* Layer depths (back to front) */
.pv-tunnel .ml-layer.l4{width:200px;height:120px;margin-left:-100px;margin-top:-60px;transform:translateZ(-120px) translateX(-50px) translateY(20px) rotateZ(-3deg);border-color:rgba(255,94,138,.28);box-shadow:0 14px 40px rgba(255,94,138,.22)}
.pv-tunnel .ml-layer.l3{width:220px;height:130px;margin-left:-110px;margin-top:-65px;transform:translateZ(-40px) translateX(-12px) translateY(-12px) rotateZ(2deg);border-color:rgba(255,181,71,.28);box-shadow:0 14px 40px rgba(255,181,71,.2)}
.pv-tunnel .ml-layer.l2{width:240px;height:140px;margin-left:-120px;margin-top:-70px;transform:translateZ(40px) translateX(15px) translateY(8px) rotateZ(-2deg);border-color:rgba(95,201,255,.32);box-shadow:0 16px 50px rgba(95,201,255,.24)}
.pv-tunnel .ml-layer.l1{width:180px;height:108px;margin-left:-90px;margin-top:-54px;transform:translateZ(120px) translateX(60px) translateY(-15px) rotateZ(4deg);border-color:rgba(255,255,255,.22);box-shadow:0 18px 60px rgba(0,0,0,.65)}

/* Layer 4 — chromatic gradient haze */
.pv-tunnel .ml-grad{position:absolute;inset:-10%;background:linear-gradient(135deg,#ff5e8a 0%,#a23bd6 35%,#5fc9ff 70%,#1fb6a9 100%);filter:blur(2px);opacity:.85;animation:mlGrad 8s ease-in-out infinite}
@keyframes mlGrad{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(8deg)}}

/* Layer 3 — timeline waveform bars */
.pv-tunnel .ml-wave{display:flex;align-items:center;gap:5px;height:60%;padding:0 14px;width:100%}
.pv-tunnel .ml-wave span{flex:1;background:linear-gradient(180deg,#ffb547,#ff5e8a);border-radius:2px;box-shadow:0 0 6px rgba(255,181,71,.55);animation:mlWave 1.6s ease-in-out infinite;transform-origin:center}
.pv-tunnel .ml-wave span:nth-child(1){animation-delay:0s;height:30%}
.pv-tunnel .ml-wave span:nth-child(2){animation-delay:.1s;height:60%}
.pv-tunnel .ml-wave span:nth-child(3){animation-delay:.2s;height:80%}
.pv-tunnel .ml-wave span:nth-child(4){animation-delay:.3s;height:50%}
.pv-tunnel .ml-wave span:nth-child(5){animation-delay:.4s;height:90%}
.pv-tunnel .ml-wave span:nth-child(6){animation-delay:.5s;height:40%}
.pv-tunnel .ml-wave span:nth-child(7){animation-delay:.6s;height:70%}
.pv-tunnel .ml-wave span:nth-child(8){animation-delay:.7s;height:55%}
.pv-tunnel .ml-wave span:nth-child(9){animation-delay:.8s;height:85%}
.pv-tunnel .ml-wave span:nth-child(10){animation-delay:.9s;height:35%}
.pv-tunnel .ml-wave span:nth-child(11){animation-delay:1s;height:65%}
.pv-tunnel .ml-wave span:nth-child(12){animation-delay:1.1s;height:45%}
@keyframes mlWave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* Layer 2 — glowing orb with halo ring */
.pv-tunnel .ml-orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#5fc9ff 40%,#3b82f6 80%);box-shadow:0 0 30px rgba(95,201,255,.7),0 0 60px rgba(95,201,255,.4),inset 0 -8px 16px rgba(59,130,246,.3);animation:mlOrb 3s ease-in-out infinite;position:relative}
.pv-tunnel .ml-orb::before{content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(95,201,255,.5);animation:mlOrbRing 3s ease-out infinite}
@keyframes mlOrb{0%,100%{box-shadow:0 0 30px rgba(95,201,255,.7),0 0 60px rgba(95,201,255,.4),inset 0 -8px 16px rgba(59,130,246,.3)}50%{box-shadow:0 0 45px rgba(95,201,255,.9),0 0 90px rgba(95,201,255,.55),inset 0 -8px 16px rgba(59,130,246,.45)}}
@keyframes mlOrbRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}

/* Layer 1 — wireframe geometric (rotating) */
.pv-tunnel .ml-wire{width:64px;height:64px;border:1px solid rgba(255,255,255,.55);transform:rotate(45deg);position:relative;animation:mlWire 8s linear infinite;box-shadow:0 0 16px rgba(255,255,255,.2)}
.pv-tunnel .ml-wire::before{content:'';position:absolute;inset:8px;border:1px solid rgba(255,255,255,.35);transform:rotate(15deg)}
.pv-tunnel .ml-wire::after{content:'';position:absolute;inset:16px;border:1px solid rgba(255,255,255,.18);transform:rotate(30deg)}
@keyframes mlWire{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}

/* Floating dust particles */
.pv-tunnel .ml-dust{position:absolute;inset:0;pointer-events:none;z-index:5}
.pv-tunnel .ml-dust span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.7);animation:mlDust 8s ease-in-out infinite}
@keyframes mlDust{0%{transform:translate(0,0);opacity:0}10%,90%{opacity:.7}100%{transform:translate(20px,-30px);opacity:0}}

/* Subtle scanline overlay for premium texture */
.pv-tunnel::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px);mix-blend-mode:screen;z-index:7}

/* Light sweep shimmer on each glass card (Apple-keynote style) */
.pv-tunnel .ml-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 48%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.18) 52%,transparent 70%);animation:mlShine 6s ease-in-out infinite;z-index:4}
@keyframes mlShine{0%{transform:translateX(-150%)}45%,100%{transform:translateX(150%)}}
.pv-tunnel .ml-layer.l4 .ml-shine{animation-delay:0s}
.pv-tunnel .ml-layer.l3 .ml-shine{animation-delay:1.5s}
.pv-tunnel .ml-layer.l2 .ml-shine{animation-delay:3s}
.pv-tunnel .ml-layer.l1 .ml-shine{animation-delay:4.5s}

/* Second halo ring on the orb (radar-double-pulse) */
.pv-tunnel .ml-orb::after{content:'';position:absolute;inset:-40px;border-radius:50%;border:1px solid rgba(95,201,255,.35);animation:mlOrbRing2 4s ease-out infinite;animation-delay:1s}
@keyframes mlOrbRing2{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}

/* === Developer workstation 3D scene === */
/* Monitor — glass screen with code lines + blinking caret */
.pv-tunnel .ml-monitor{position:absolute;left:50%;top:50%;width:140px;height:90px;margin:-58px 0 0 -70px;transform:translateZ(70px) translateY(-14px);transform-style:preserve-3d;box-shadow:0 14px 26px rgba(0,0,0,.55);border-radius:5px;z-index:5}
.pv-tunnel .ml-screen{width:100%;height:100%;background:linear-gradient(160deg,rgba(10,15,25,.92),rgba(15,18,32,.85));border:1px solid rgba(95,201,255,.45);border-radius:5px;box-shadow:0 0 22px rgba(95,201,255,.4),inset 0 0 26px rgba(95,201,255,.12);display:flex;flex-direction:column;overflow:hidden;position:relative}
.pv-tunnel .ml-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 49%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.10) 51%,transparent 65%);animation:mlShine 6s ease-in-out infinite;animation-delay:.6s;pointer-events:none}
.pv-tunnel .ml-screen-bar{display:flex;gap:3px;padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.pv-tunnel .ml-screen-bar .dot{width:5px;height:5px;border-radius:50%}
.pv-tunnel .ml-screen-bar .dot.r{background:#ff5e5e;box-shadow:0 0 4px rgba(255,94,94,.6)}
.pv-tunnel .ml-screen-bar .dot.y{background:#ffb547;box-shadow:0 0 4px rgba(255,181,71,.6)}
.pv-tunnel .ml-screen-bar .dot.g{background:#7adc4a;box-shadow:0 0 4px rgba(122,220,74,.6)}
.pv-tunnel .ml-screen-body{flex:1;padding:8px 9px;position:relative;display:flex;flex-direction:column;gap:5px}
.pv-tunnel .ml-code-line{height:3px;border-radius:1px;animation:mlCode 2.4s ease-in-out infinite}
.pv-tunnel .ml-code-line.w1{width:78%;background:linear-gradient(90deg,#5fc9ff,#ff5e8a);box-shadow:0 0 6px rgba(95,201,255,.5);animation-delay:0s}
.pv-tunnel .ml-code-line.w2{width:54%;background:linear-gradient(90deg,#ffb547,#ff5e8a);box-shadow:0 0 6px rgba(255,181,71,.5);animation-delay:.3s}
.pv-tunnel .ml-code-line.w3{width:68%;background:linear-gradient(90deg,#5fc9ff,#1fb6a9);box-shadow:0 0 6px rgba(31,182,169,.5);animation-delay:.6s}
.pv-tunnel .ml-code-line.w4{width:42%;background:linear-gradient(90deg,#a23bd6,#5fc9ff);box-shadow:0 0 6px rgba(162,59,214,.5);animation-delay:.9s}
@keyframes mlCode{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(2px)}}
.pv-tunnel .ml-screen-caret{position:absolute;bottom:10px;left:9px;width:7px;height:1.5px;background:#5fc9ff;box-shadow:0 0 6px #5fc9ff;animation:mlBlink 1.1s steps(2) infinite}
@keyframes mlBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Monitor stand */
.pv-tunnel .ml-monitor::after{content:'';position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:34px;height:8px;background:linear-gradient(180deg,rgba(95,201,255,.35),rgba(95,201,255,.05));border:1px solid rgba(95,201,255,.3);border-top:none;border-radius:0 0 4px 4px}

/* Keyboard — glass with backlit active key */
.pv-tunnel .ml-keyboard{position:absolute;left:50%;top:50%;width:120px;height:34px;margin:0 0 0 -60px;transform:translateZ(110px) translateY(46px) rotateX(48deg);transform-style:preserve-3d;background:rgba(255,255,255,.05);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(95,201,255,.28);border-radius:4px;padding:4px 5px;box-shadow:0 10px 22px rgba(0,0,0,.55),inset 0 0 14px rgba(95,201,255,.10);display:flex;flex-direction:column;justify-content:space-around;gap:2px;z-index:5}
.pv-tunnel .ml-key-row{display:flex;justify-content:center;gap:1.5px}
.pv-tunnel .ml-key-row .key{width:8px;height:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:1.5px}
.pv-tunnel .ml-key-row .key.wide{width:42px}
.pv-tunnel .ml-key-row .key.active{animation:mlKeyPress 1.6s ease-in-out infinite}
@keyframes mlKeyPress{0%,30%,100%{background:rgba(255,255,255,.08);box-shadow:none;transform:scale(1)}10%,18%{background:rgba(95,201,255,.7);box-shadow:0 0 10px rgba(95,201,255,.85);transform:scale(.85)}}

/* Mouse cursor — moves around the scene */
.pv-tunnel .ml-cursor{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;transform-style:preserve-3d;z-index:6;filter:drop-shadow(0 0 5px rgba(95,201,255,.85));animation:mlCursorPath 9s ease-in-out infinite}
@keyframes mlCursorPath{0%,100%{transform:translateZ(150px) translate(-32px,-12px)}25%{transform:translateZ(150px) translate(22px,-26px)}50%{transform:translateZ(150px) translate(38px,8px)}75%{transform:translateZ(150px) translate(-18px,16px)}}

/* Floating code symbols around the scene */
.pv-tunnel .ml-sym{position:absolute;font-family:var(--mono);font-size:11px;font-weight:600;pointer-events:none;text-shadow:0 0 8px currentColor;animation:mlSymFloat 7s ease-in-out infinite;z-index:5}
.pv-tunnel .ml-sym.s1{top:14%;left:6%;color:#5fc9ff;animation-delay:0s}
.pv-tunnel .ml-sym.s2{top:62%;right:8%;color:#ff5e8a;animation-delay:1.6s}
.pv-tunnel .ml-sym.s3{top:24%;right:10%;color:#ffb547;font-size:14px;animation-delay:3.2s}
.pv-tunnel .ml-sym.s4{top:78%;left:14%;color:#c6f964;font-size:13px;animation-delay:4.8s}
@keyframes mlSymFloat{0%,100%{transform:translate(0,0) rotate(-6deg);opacity:.35}50%{transform:translate(8px,-12px) rotate(6deg);opacity:.95}}

/* Light streak comets flying through the scene */
.pv-tunnel .ml-streak{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),#5fc9ff,transparent);box-shadow:0 0 10px rgba(95,201,255,.8),0 0 20px rgba(95,201,255,.4);pointer-events:none;z-index:6;opacity:0}
.pv-tunnel .ml-streak.s1{top:28%;width:120px;animation:mlStreakL 5s linear infinite}
.pv-tunnel .ml-streak.s2{top:55%;width:90px;animation:mlStreakR 6s linear infinite;animation-delay:1.6s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),#ff5e8a,transparent);box-shadow:0 0 10px rgba(255,94,138,.8),0 0 20px rgba(255,94,138,.4)}
.pv-tunnel .ml-streak.s3{top:78%;width:140px;animation:mlStreakL 7s linear infinite;animation-delay:3.2s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),#ffb547,transparent);box-shadow:0 0 10px rgba(255,181,71,.8),0 0 20px rgba(255,181,71,.4)}
@keyframes mlStreakL{0%{transform:translateX(-150px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(100% + 150px));opacity:0}}
@keyframes mlStreakR{0%{transform:translateX(calc(100% + 150px));opacity:0}10%{opacity:.85}90%{opacity:.85}100%{transform:translateX(-150px);opacity:0}}

/* === ABOUT === */
.about-stage{position:relative;padding:140px 40px;overflow:hidden}
.about-stage > .sec-head-center,
.about-stage > .about-text,
.about-stage > .stats-row{position:relative;z-index:2}
.about-stage .shader-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.about-stage .shader-bg canvas{display:block;width:100%;height:100%}
.about-stage .shader-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 0%,rgba(14,14,16,.5) 70%,rgba(14,14,16,.85) 100%)}
.about-text{text-align:center;max-width:1100px;margin:0 auto;font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.about-text .dim{color:var(--ink-3)}
.about-text em{font-family:var(--serif);font-style:italic;font-weight:400;background:linear-gradient(110deg,#fff,#7a7a82);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em;margin:0 -.07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.stats-row{margin-top:120px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat-cell{padding:0 20px}
.stat-cell .lbl{font-family:var(--mono);font-size:13px;color:var(--ink-2);font-weight:500;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px}
.stat-cell .num{font-weight:700;font-size:clamp(80px,12vw,180px);letter-spacing:-.045em;line-height:.9;background:linear-gradient(180deg,var(--ink) 0%, #5a5a60 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:860px){.stats-row{grid-template-columns:1fr;gap:40px}}

/* === PROJECTS (horizontal cards) === */
.projects{display:flex;flex-direction:column;gap:32px}
.proj{position:relative;border-radius:32px;overflow:hidden;min-height:420px;display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--bg-2);border:1px solid var(--line);transition:transform .4s}
.proj:hover{transform:translateY(-4px)}
.proj .left{padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}
.proj .tags{display:flex;flex-wrap:wrap;gap:8px}
.proj .tags .t{padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em}
.proj .pname{font-weight:700;font-size:clamp(48px,6.5vw,92px);letter-spacing:-.04em;line-height:.95;margin-top:auto;color:var(--ink)}
.proj .pname em{font-family:var(--serif);font-style:italic;font-weight:400}
.proj .psub{font-size:18px;color:var(--ink-2);font-weight:500;margin-bottom:16px}
.proj .right{position:relative;overflow:hidden;display:flex;align-items:stretch;justify-content:stretch}
.proj .right svg{position:absolute;inset:0;width:100%;height:100%}

/* Screen frame — no visible border, blends into card via edge gradients */
.proj .screen-frame{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;transform:translateY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.proj:hover .screen-frame{transform:translateY(-3px)}

/* Chrome bar (browser-window identity) */
.proj .screen-chrome{position:absolute;top:0;left:0;right:0;height:24px;background:linear-gradient(180deg,rgba(20,20,28,.85) 0%,rgba(14,14,20,.6) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;padding:0 12px;gap:6px;z-index:3}
.proj .screen-chrome .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}
.proj .screen-chrome .url{margin-left:10px;font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:.06em;background:rgba(255,255,255,.05);padding:3px 10px;border-radius:6px;flex:1;text-align:center;max-width:200px}

/* iframe fills the frame */
.proj .screen-frame iframe{position:absolute;top:24px;left:50%;width:1600px;height:900px;border:0;transform:translateX(-50%) scale(.42);transform-origin:top center;pointer-events:none;will-change:transform}

/* Edge fades on ALL 4 sides — iframe content blends into card bg */
.proj .right::before{content:'';position:absolute;left:0;top:0;bottom:0;width:140px;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 50%,transparent 100%);pointer-events:none;z-index:4}
.proj .right::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:
  linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 12%,transparent 88%,rgba(0,0,0,.6) 100%),
  linear-gradient(270deg,rgba(0,0,0,.5),transparent 18%)
}
.proj .arrow-btn{position:absolute;top:48px;right:48px;width:56px;height:56px;border-radius:999px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:20px;z-index:3;transition:transform .3s}
.proj:hover .arrow-btn{transform:rotate(-45deg) scale(1.05)}

.proj .meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-3);margin-bottom:10px}
.proj .meta::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--proj-accent,var(--c-pink))}
.proj .result{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(95,201,255,.08);border:1px solid rgba(95,201,255,.25);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--c-cyan);letter-spacing:.04em;font-weight:500;width:fit-content}
.proj .result::before{content:'';width:6px;height:6px;border-radius:50%;background:#7adc4a;box-shadow:0 0 8px #7adc4a;animation:pulse 1.6s ease-in-out infinite}

.proj.cryptik{background:linear-gradient(135deg,#1a0805 0%, #3a1408 50%, #2a0a04 100%);--proj-accent:#ff8a3a}
.proj.refract{background:linear-gradient(135deg,#1a1a1d 0%, #44443e 100%);--proj-accent:#5fc9ff}
.proj.petrin{background:linear-gradient(135deg,#1a0d05 0%, #3a1a0c 100%);--proj-accent:#3d4f2c}

.all-projects{margin-top:40px;display:flex;justify-content:center}
.all-projects a{padding:18px 26px;background:transparent;border:1px solid var(--line-2);color:var(--ink);border-radius:999px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:14px;transition:background .2s, border-color .2s}
.all-projects a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.all-projects a .arrow{transition:transform .3s}
.all-projects a:hover .arrow{transform:translateX(4px)}

@media (max-width:860px){.proj{grid-template-columns:1fr;min-height:auto}.proj .right{min-height:240px}.proj .left{padding:32px}.proj .arrow-btn{top:32px;right:32px;width:46px;height:46px}}

/* === MAQUETTES — homepage vignettes (3 niveaux) === */
#maquettes{padding:120px 40px 80px;position:relative}
.maq-grid{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1300px;margin-left:auto;margin-right:auto}
@media (max-width:960px){.maq-grid{grid-template-columns:1fr;max-width:600px}}

.maq-vignette{position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:24px;overflow:hidden;min-height:540px;transition:border-color .4s,transform .4s,box-shadow .4s}
.maq-vignette:hover{border-color:var(--line-2);transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}

.maq-thumb{position:relative;height:300px;overflow:hidden;border-bottom:1px solid var(--line)}
.maq-thumb-bg{position:absolute;inset:0}
.maq-num{position:absolute;top:20px;left:24px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.18em;z-index:3}

/* Teasers gradients per tier */
.m-essentielle .maq-thumb-bg{background:radial-gradient(circle at 30% 40%,rgba(95,201,255,.4),transparent 60%),linear-gradient(135deg,rgba(95,201,255,.18),rgba(31,182,169,.10))}
.m-essentielle .maq-thumb-bg::before{content:'';position:absolute;left:50%;top:50%;width:140px;height:84px;margin:-42px 0 0 -70px;background:rgba(255,255,255,.04);border:1px solid rgba(95,201,255,.45);border-radius:8px;box-shadow:0 0 36px rgba(95,201,255,.3)}
.m-essentielle .maq-thumb-bg::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#5fc9ff;box-shadow:0 0 12px #5fc9ff;animation:essPulse 2.4s ease-in-out infinite}
@keyframes essPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.5);opacity:1}}

.m-signature .maq-thumb-bg{background:radial-gradient(circle at 70% 30%,rgba(255,94,138,.4),transparent 60%),linear-gradient(135deg,rgba(255,94,138,.18),rgba(255,181,71,.12))}
.m-signature .maq-thumb-bg::before{content:'';position:absolute;left:25%;top:30%;width:120px;height:80px;background:rgba(255,255,255,.04);border:1px solid rgba(255,94,138,.45);border-radius:8px;transform:rotate(-3deg);box-shadow:0 14px 30px rgba(255,94,138,.25);animation:sigFloat1 6s ease-in-out infinite}
.m-signature .maq-thumb-bg::after{content:'';position:absolute;left:50%;top:42%;width:120px;height:80px;background:rgba(255,255,255,.06);border:1px solid rgba(255,181,71,.45);border-radius:8px;transform:rotate(3deg);box-shadow:0 14px 30px rgba(255,181,71,.25);animation:sigFloat2 6s ease-in-out infinite}
@keyframes sigFloat1{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-6px,-4px) rotate(-5deg)}}
@keyframes sigFloat2{0%,100%{transform:translate(0,0) rotate(3deg)}50%{transform:translate(6px,4px) rotate(5deg)}}

.m-iconique .maq-thumb-bg{background:linear-gradient(135deg,rgba(162,59,214,.25),rgba(95,201,255,.15) 40%,rgba(255,181,71,.20));overflow:hidden}
.m-iconique .maq-thumb-bg::before{content:'';position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;background:linear-gradient(135deg,#ff5e8a,#a23bd6 40%,#5fc9ff,#ffb547);border-radius:50%;filter:blur(2px);animation:iconRotate 8s linear infinite,iconPulse 3s ease-in-out infinite}
.m-iconique .maq-thumb-bg::after{content:'';position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:1px solid rgba(255,255,255,.5);border-radius:50%;animation:iconRing 3s ease-out infinite}
@keyframes iconRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes iconPulse{0%,100%{filter:blur(2px) brightness(1)}50%{filter:blur(2px) brightness(1.3)}}
@keyframes iconRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}

.maq-info{padding:32px 28px 28px;display:flex;flex-direction:column;flex:1}
.maq-title{font-family:var(--display-mono);font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.maq-tag{font-family:var(--serif);font-style:italic;font-size:18px;margin-bottom:14px}
.m-essentielle .maq-tag em{color:var(--c-cyan);font-style:italic}
.m-signature .maq-tag em{color:var(--c-pink);font-style:italic}
.m-iconique .maq-tag em{background:linear-gradient(110deg,var(--c-purple),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.maq-desc{color:var(--ink-2);font-size:15px;line-height:1.55;margin-bottom:24px;flex:1}
.maq-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid var(--line-2);color:var(--ink);border-radius:999px;font-weight:600;font-size:14px;align-self:flex-start;transition:background .2s,color .2s,border-color .2s,gap .2s}
.maq-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);gap:14px}

/* === MAQUETTES explainer (3 étapes sur projets.html) === */
.maquettes-explainer{padding:80px 40px;max-width:1300px;margin:0 auto}
.explainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.explainer-cell{position:relative;padding:40px 32px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;transition:border-color .4s,transform .4s}
.explainer-cell:hover{border-color:var(--line-2);transform:translateY(-4px)}
.explainer-num{font-family:var(--display-mono);font-weight:700;font-size:42px;background:linear-gradient(135deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em;display:block;margin-bottom:18px}
.explainer-cell h3{font-family:var(--display-mono);font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.2;margin-bottom:12px;color:var(--ink)}
.explainer-cell h3 em{font-family:var(--serif);font-style:italic;font-weight:300}
.explainer-cell p{color:var(--ink-2);font-size:14px;line-height:1.55}
@media (max-width:960px){.explainer-grid{grid-template-columns:1fr;max-width:600px;margin:0 auto}}

/* === TIER PAGES (essentielle / signature / iconique) === */
.tier-page{position:relative;min-height:100vh;overflow:hidden}
.tier-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tier-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.tier-anim{position:absolute;inset:0;pointer-events:none}

/* Essentielle — calme, cyan/teal */
.tier-essentielle .tier-bg{background:radial-gradient(ellipse at center,#0a0e16 0%,#050810 60%,#000 100%)}
.tier-essentielle .tier-blob.b1{top:-10%;left:-5%;width:55%;height:55%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:tierBlob1 14s ease-in-out infinite}
.tier-essentielle .tier-blob.b2{bottom:-15%;right:-5%;width:50%;height:50%;background:radial-gradient(circle,#1fb6a9,transparent 70%);animation:tierBlob2 16s ease-in-out infinite}
.tier-essentielle .tier-blob.b3{top:35%;left:55%;width:30%;height:30%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:tierBlob3 12s ease-in-out infinite}

/* Signature — dynamique, rose/ambre */
.tier-signature .tier-bg{background:radial-gradient(ellipse at center,#16080e 0%,#0a050a 60%,#000 100%)}
.tier-signature .tier-blob.b1{top:-10%;left:-5%;width:55%;height:55%;background:radial-gradient(circle,#ff5e8a,transparent 70%);animation:tierBlob1 14s ease-in-out infinite}
.tier-signature .tier-blob.b2{bottom:-15%;right:-5%;width:50%;height:50%;background:radial-gradient(circle,#ffb547,transparent 70%);animation:tierBlob2 16s ease-in-out infinite}
.tier-signature .tier-blob.b3{top:35%;left:55%;width:30%;height:30%;background:radial-gradient(circle,#a23bd6,transparent 70%);animation:tierBlob3 12s ease-in-out infinite}

/* Iconique — chromatic, max wow */
.tier-iconique .tier-bg{background:radial-gradient(ellipse at center,#0c0815 0%,#070410 60%,#000 100%)}
.tier-iconique .tier-blob.b1{top:-10%;left:-5%;width:55%;height:55%;background:radial-gradient(circle,#a23bd6,transparent 70%);animation:tierBlob1 14s ease-in-out infinite}
.tier-iconique .tier-blob.b2{bottom:-15%;right:-5%;width:55%;height:55%;background:radial-gradient(circle,#5fc9ff,transparent 70%);animation:tierBlob2 16s ease-in-out infinite}
.tier-iconique .tier-blob.b3{top:30%;left:55%;width:35%;height:35%;background:radial-gradient(circle,#ffb547,transparent 70%);animation:tierBlob3 12s ease-in-out infinite}

@keyframes tierBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.1)}}
@keyframes tierBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-30px) scale(1.05)}}
@keyframes tierBlob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-40px) scale(.9)}}

/* Tier overlay — text panel */
.tier-overlay{position:relative;z-index:2;max-width:680px;padding:200px 60px 120px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
@media (max-width:760px){.tier-overlay{padding:180px 30px 80px}}

.tier-back{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em;align-self:flex-start;padding:10px 18px;border:1px solid var(--line);border-radius:999px;transition:color .2s,border-color .2s,background .2s;margin-bottom:20px}
.tier-back:hover{color:var(--ink);border-color:var(--ink-2);background:rgba(255,255,255,.04)}

.tier-eyebrow{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.32em}
.tier-title{font-family:var(--display-mono);font-weight:700;font-size:clamp(60px,9vw,140px);line-height:1;letter-spacing:-.045em;color:var(--ink);text-transform:uppercase;margin-top:6px}
.tier-tag{font-family:var(--serif);font-size:clamp(22px,3vw,36px);font-weight:300;margin-top:6px}
.tier-tag em{font-style:italic}
.tier-essentielle .tier-tag em{background:linear-gradient(110deg,var(--c-cyan),var(--c-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-signature .tier-tag em{background:linear-gradient(110deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-iconique .tier-tag em{background:linear-gradient(110deg,var(--c-purple),var(--c-cyan),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}

.tier-desc{color:var(--ink-2);font-size:18px;line-height:1.55;margin-top:14px;max-width:560px}
.tier-features{list-style:none;padding:0;margin:32px 0 12px;display:flex;flex-direction:column;gap:10px}
.tier-features li{position:relative;padding-left:24px;color:var(--ink-2);font-size:15px;line-height:1.5}
.tier-features li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%}
.tier-essentielle .tier-features li::before{background:var(--c-cyan);box-shadow:0 0 8px rgba(95,201,255,.6)}
.tier-signature .tier-features li::before{background:var(--c-pink);box-shadow:0 0 8px rgba(255,94,138,.6)}
.tier-iconique .tier-features li::before{background:linear-gradient(135deg,var(--c-purple),var(--c-amber));box-shadow:0 0 8px rgba(255,181,71,.5)}

.tier-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* === ESSENTIELLE animation — site mockup + GPS pin + Google stars === */
.tier-essentielle .tier-anim{position:absolute;inset:0;pointer-events:none;z-index:1}

/* Main site mockup (centerpiece, right side) */
.tier-essentielle .ess-mockup{position:absolute;right:8%;top:50%;width:340px;height:440px;transform:translateY(-50%);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(95,201,255,.35);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -10px rgba(95,201,255,.3),inset 0 0 0 1px rgba(255,255,255,.04);display:flex;flex-direction:column;animation:essMockupFloat 6s ease-in-out infinite}
@keyframes essMockupFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-52%)}}
.tier-essentielle .ess-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.05)}
.tier-essentielle .ess-bar .dot{width:8px;height:8px;border-radius:50%}
.tier-essentielle .ess-bar .dot.r{background:#ff5e5e;box-shadow:0 0 4px rgba(255,94,94,.6)}
.tier-essentielle .ess-bar .dot.y{background:#ffb547;box-shadow:0 0 4px rgba(255,181,71,.6)}
.tier-essentielle .ess-bar .dot.g{background:#7adc4a;box-shadow:0 0 4px rgba(122,220,74,.6)}
.tier-essentielle .ess-bar .ess-url{margin-left:14px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.06em}
.tier-essentielle .ess-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px;overflow:hidden}

.tier-essentielle .ess-block{background:rgba(255,255,255,.04);border:1px solid rgba(95,201,255,.18);border-radius:6px;opacity:0;transform:translateY(20px);animation:essBlockBuild 14s ease-in-out infinite}
.tier-essentielle .ess-hero{height:80px;background:linear-gradient(135deg,rgba(95,201,255,.3),rgba(31,182,169,.18));animation-delay:.6s}
.tier-essentielle .ess-text{padding:14px 12px;animation-delay:2s}
.tier-essentielle .ess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;height:80px;animation-delay:3.4s}
.tier-essentielle .ess-grid .ess-cell{background:rgba(95,201,255,.16);border-radius:3px;border:1px solid rgba(95,201,255,.25)}
.tier-essentielle .ess-cta{height:46px;background:linear-gradient(90deg,rgba(95,201,255,.3),rgba(31,182,169,.18));animation-delay:4.8s}
.tier-essentielle .ess-line{height:5px;background:linear-gradient(90deg,rgba(95,201,255,.5),rgba(95,201,255,0));border-radius:1px;margin-bottom:6px}
.tier-essentielle .ess-line.w7{width:70%}
.tier-essentielle .ess-line.w5{width:50%}
@keyframes essBlockBuild{0%{opacity:0;transform:translateY(20px)}8%,68%{opacity:1;transform:translateY(0)}76%,100%{opacity:0;transform:translateY(-10px)}}

/* GPS map widget (above-left of mockup) */
.tier-essentielle .ess-map{position:absolute;top:18%;right:36%;width:140px;height:140px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(95,201,255,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:essFloat1 7s ease-in-out infinite}
@keyframes essFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-8px)}}
.tier-essentielle .ess-map-grid{position:absolute;inset:8px;background-image:linear-gradient(rgba(95,201,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(95,201,255,.14) 1px,transparent 1px);background-size:14px 14px;border-radius:8px;opacity:.6}
.tier-essentielle .ess-map-pin{width:18px;height:18px;background:#ff5e8a;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 14px rgba(255,94,138,.7);position:relative;z-index:3;animation:essPinBounce 2s ease-in-out infinite}
@keyframes essPinBounce{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(2px,-4px)}}
.tier-essentielle .ess-map-ring{position:absolute;width:54px;height:54px;border:2px solid rgba(95,201,255,.6);border-radius:50%;animation:essMapRing 2.2s ease-out infinite}
@keyframes essMapRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(2);opacity:0}}
.tier-essentielle .ess-map-label{position:absolute;bottom:12px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.65);letter-spacing:.2em;text-transform:uppercase}

/* Stars rating widget (below-left of mockup) */
.tier-essentielle .ess-stars{position:absolute;bottom:18%;right:36%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 22px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,181,71,.3);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:essFloat2 7s ease-in-out infinite}
@keyframes essFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(0,8px)}}
.tier-essentielle .ess-stars-row{display:flex;gap:4px}
.tier-essentielle .ess-star{width:18px;height:18px;background:linear-gradient(135deg,#ffb547,#ff8e3c);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:0 0 8px rgba(255,181,71,.5);opacity:0;animation:essStarFill 6s ease-in-out infinite}
.tier-essentielle .ess-star:nth-child(1){animation-delay:.2s}
.tier-essentielle .ess-star:nth-child(2){animation-delay:.5s}
.tier-essentielle .ess-star:nth-child(3){animation-delay:.8s}
.tier-essentielle .ess-star:nth-child(4){animation-delay:1.1s}
.tier-essentielle .ess-star:nth-child(5){animation-delay:1.4s}
@keyframes essStarFill{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
.tier-essentielle .ess-rating{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.08em}

@media (max-width:1100px){.tier-essentielle .ess-map,.tier-essentielle .ess-stars{display:none}}
@media (max-width:840px){.tier-essentielle .ess-mockup{display:none}}

/* === SIGNATURE animation — pages stack 3D + CMS interface + custom cursor === */
.tier-signature .tier-anim{position:absolute;inset:0;pointer-events:none;z-index:1;perspective:1200px}

/* 3D stack of pages */
.tier-signature .sig-stack{position:absolute;right:8%;top:50%;width:340px;height:460px;transform-style:preserve-3d;animation:sigStackTilt 14s ease-in-out infinite}
@keyframes sigStackTilt{0%{transform:translateY(-50%) rotateY(-15deg) rotateX(8deg)}50%{transform:translateY(-50%) rotateY(15deg) rotateX(-4deg)}100%{transform:translateY(-50%) rotateY(-15deg) rotateX(8deg)}}
.tier-signature .sig-page{position:absolute;width:100%;height:100%;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,94,138,.3);border-radius:14px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
.tier-signature .sig-page.p1{transform:translateZ(0);background:linear-gradient(135deg,rgba(255,94,138,.20),rgba(255,181,71,.10));z-index:4}
.tier-signature .sig-page.p2{transform:translateZ(-30px) translateX(-15px) translateY(-10px);opacity:.7;z-index:3;border-color:rgba(255,181,71,.3)}
.tier-signature .sig-page.p3{transform:translateZ(-60px) translateX(-30px) translateY(-20px);opacity:.5;z-index:2;border-color:rgba(162,59,214,.3)}
.tier-signature .sig-page.p4{transform:translateZ(-90px) translateX(-45px) translateY(-30px);opacity:.3;z-index:1;border-color:rgba(255,255,255,.2)}
.tier-signature .sig-page.p1::before{content:'';position:absolute;top:30px;left:30px;right:30px;height:60px;background:linear-gradient(135deg,rgba(255,94,138,.4),rgba(255,181,71,.25));border-radius:6px}
.tier-signature .sig-page.p1::after{content:'';position:absolute;bottom:30px;left:30px;width:120px;height:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,94,138,.5);border-radius:999px}

/* CMS interface (bottom-left of stack) */
.tier-signature .sig-cms{position:absolute;bottom:18%;right:38%;width:240px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,94,138,.3);border-radius:10px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.45);animation:sigCmsFloat 7s ease-in-out infinite}
@keyframes sigCmsFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-8px)}}
.tier-signature .sig-cms-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.06)}
.tier-signature .sig-cms-logo{width:14px;height:14px;background:linear-gradient(135deg,#ff5e8a,#ffb547);border-radius:3px;flex-shrink:0}
.tier-signature .sig-cms-title{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.06em;flex:1}
.tier-signature .sig-cms-dot{width:6px;height:6px;border-radius:50%;background:#7adc4a;box-shadow:0 0 6px #7adc4a;animation:sigCmsLive 1.5s ease-in-out infinite}
@keyframes sigCmsLive{0%,100%{opacity:1}50%{opacity:.4}}
.tier-signature .sig-cms-body{padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.tier-signature .sig-cms-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px}
.tier-signature .sig-cms-key{color:rgba(255,255,255,.45);width:54px;letter-spacing:.04em;text-transform:uppercase}
.tier-signature .sig-cms-val{flex:1;height:8px;background:rgba(255,94,138,.35);border-radius:1px;animation:sigCmsType 4s ease-in-out infinite}
.tier-signature .sig-cms-val.v1{animation-delay:0s}
.tier-signature .sig-cms-val.v2{animation-delay:1.2s;background:rgba(255,181,71,.35)}
.tier-signature .sig-cms-img{flex:1;height:24px;background:linear-gradient(135deg,rgba(255,94,138,.35),rgba(255,181,71,.25));border-radius:2px;animation:sigCmsType 4s ease-in-out infinite;animation-delay:2.4s}
@keyframes sigCmsType{0%{width:10%;opacity:.4}50%{width:80%;opacity:1}100%{width:10%;opacity:.4}}

/* Custom cursor with trail (moves around) */
.tier-signature .sig-cursor{position:absolute;left:50%;top:50%;width:18px;height:18px;animation:sigCursorPath 12s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,94,138,.8));z-index:3}
@keyframes sigCursorPath{0%{transform:translate(-220px,-120px)}25%{transform:translate(100px,-160px)}50%{transform:translate(140px,40px)}75%{transform:translate(-180px,100px)}100%{transform:translate(-220px,-120px)}}

@media (max-width:1100px){.tier-signature .sig-cms{display:none}}
@media (max-width:840px){.tier-signature .sig-stack,.tier-signature .sig-cursor{display:none}}

/* === ICONIQUE animation — 3D shape + orbital rings + chromatic particles + streaks === */
.tier-iconique .tier-anim{position:absolute;inset:0;pointer-events:none;z-index:1;perspective:1500px;overflow:hidden}

/* Stage with overall float */
.tier-iconique .ico-stage{position:absolute;right:18%;top:50%;width:420px;height:420px;transform:translateY(-50%);transform-style:preserve-3d;animation:icoStageFloat 8s ease-in-out infinite}
@keyframes icoStageFloat{0%,100%{transform:translateY(-50%) rotateY(0deg)}50%{transform:translateY(-52%) rotateY(20deg)}}

/* Orbital rings (tilted, spinning) */
.tier-iconique .ico-orbit{position:absolute;inset:0;transform-style:preserve-3d;animation:icoOrbitSpin 22s linear infinite}
@keyframes icoOrbitSpin{from{transform:rotateY(0) rotateX(72deg)}to{transform:rotateY(360deg) rotateX(72deg)}}
.tier-iconique .ico-orbit-ring{position:absolute;inset:0;border:1.5px solid rgba(95,201,255,.4);border-radius:50%;box-shadow:0 0 24px rgba(95,201,255,.3);transform-style:preserve-3d}
.tier-iconique .ico-orbit-ring.r1{border-color:rgba(255,94,138,.5);box-shadow:0 0 24px rgba(255,94,138,.4)}
.tier-iconique .ico-orbit-ring.r2{transform:scale(.78) rotateZ(60deg);border-color:rgba(95,201,255,.55);box-shadow:0 0 22px rgba(95,201,255,.4)}
.tier-iconique .ico-orbit-ring.r3{transform:scale(.55) rotateZ(120deg);border-color:rgba(255,181,71,.55);box-shadow:0 0 18px rgba(255,181,71,.4)}

/* 3D rotating cube */
.tier-iconique .ico-shape{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;transform-style:preserve-3d;animation:icoShapeSpin 14s linear infinite;filter:drop-shadow(0 0 24px rgba(162,59,214,.7))}
@keyframes icoShapeSpin{from{transform:rotateY(0) rotateX(20deg)}to{transform:rotateY(360deg) rotateX(380deg)}}
.tier-iconique .ico-shape .face{position:absolute;width:110px;height:110px;background:linear-gradient(135deg,rgba(255,94,138,.32),rgba(162,59,214,.22),rgba(95,201,255,.32));border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 0 32px rgba(95,201,255,.35)}
.tier-iconique .ico-shape .face.f1{transform:rotateY(0deg) translateZ(55px)}
.tier-iconique .ico-shape .face.f2{transform:rotateY(90deg) translateZ(55px)}
.tier-iconique .ico-shape .face.f3{transform:rotateY(180deg) translateZ(55px)}
.tier-iconique .ico-shape .face.f4{transform:rotateY(-90deg) translateZ(55px)}
.tier-iconique .ico-shape .face.f5{transform:rotateX(90deg) translateZ(55px)}
.tier-iconique .ico-shape .face.f6{transform:rotateX(-90deg) translateZ(55px)}

/* Chromatic particles distributed around the cube */
.tier-iconique .ico-particles{position:absolute;inset:0}
.tier-iconique .ico-particles span{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(95,201,255,.9);animation:icoParticle 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.tier-iconique .ico-particles span:nth-child(odd){background:#ff5e8a;box-shadow:0 0 8px rgba(255,94,138,.9)}
.tier-iconique .ico-particles span:nth-child(3n){background:#ffb547;box-shadow:0 0 8px rgba(255,181,71,.9)}
.tier-iconique .ico-particles span:nth-child(1){transform:translate(-160px,-60px)}
.tier-iconique .ico-particles span:nth-child(2){transform:translate(140px,-90px)}
.tier-iconique .ico-particles span:nth-child(3){transform:translate(180px,40px)}
.tier-iconique .ico-particles span:nth-child(4){transform:translate(80px,160px)}
.tier-iconique .ico-particles span:nth-child(5){transform:translate(-100px,150px)}
.tier-iconique .ico-particles span:nth-child(6){transform:translate(-180px,30px)}
.tier-iconique .ico-particles span:nth-child(7){transform:translate(120px,-150px)}
.tier-iconique .ico-particles span:nth-child(8){transform:translate(-140px,-130px)}
.tier-iconique .ico-particles span:nth-child(9){transform:translate(190px,-30px)}
.tier-iconique .ico-particles span:nth-child(10){transform:translate(-50px,180px)}
.tier-iconique .ico-particles span:nth-child(11){transform:translate(60px,-180px)}
.tier-iconique .ico-particles span:nth-child(12){transform:translate(-190px,90px)}
@keyframes icoParticle{0%,100%{opacity:0}30%,70%{opacity:1}}

/* Light streaks flying through */
.tier-iconique .ico-streak{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),#5fc9ff,transparent);box-shadow:0 0 14px rgba(95,201,255,.85);opacity:0;z-index:2}
.tier-iconique .ico-streak.s1{top:25%;width:200px;animation:icoStreak 7s linear infinite}
.tier-iconique .ico-streak.s2{top:55%;width:160px;animation:icoStreak 8s linear infinite;animation-delay:2.4s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),#ff5e8a,transparent);box-shadow:0 0 14px rgba(255,94,138,.85)}
.tier-iconique .ico-streak.s3{top:75%;width:240px;animation:icoStreak 9s linear infinite;animation-delay:4.8s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),#a23bd6,transparent);box-shadow:0 0 14px rgba(162,59,214,.85)}
@keyframes icoStreak{0%{transform:translateX(-260px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(100vw + 260px));opacity:0}}

@media (max-width:840px){.tier-iconique .ico-stage{display:none}}

/* ==================================================
   DEMO TIER PAGES — sites simulés navigables
   ================================================== */

/* Override base — scroll naturel */
.tier-page{overflow:visible}

/* Demo brand nav */
.tier-page .demo-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:140px 8% 0;margin-bottom:60px;z-index:5}
.tier-page .demo-brand{font-family:var(--display-mono);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.01em;text-decoration:none}
.tier-page .demo-brand em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink-2);margin-left:4px}
.tier-page .demo-nav-links{list-style:none;display:flex;gap:28px;padding:0;margin:0}
.tier-page .demo-nav-links a{font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:.04em;transition:color .2s}
.tier-page .demo-nav-links a:hover{color:var(--ink)}
.tier-page .demo-nav-cta{font-family:var(--mono);font-size:12px;padding:10px 18px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);transition:background .2s,color .2s}
.tier-page .demo-nav-cta:hover{background:var(--ink);color:var(--bg)}
@media (max-width:760px){.tier-page .demo-nav-links{display:none}}

/* Demo persistent banner (fixed bottom) */
.tier-demo-banner{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:24px;padding:14px 24px;background:rgba(28,28,34,.85);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line-2);border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.6);font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.06em;max-width:calc(100vw - 40px);flex-wrap:wrap;justify-content:center}
.tier-demo-banner .back-link{color:var(--ink);transition:color .2s;text-transform:uppercase;letter-spacing:.16em}
.tier-demo-banner .back-link:hover{color:var(--c-cyan)}
.tier-demo-banner .banner-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);padding:0 24px}
.tier-demo-banner .banner-feature{color:var(--ink-2)}
.tier-demo-banner .banner-feature strong{color:var(--ink);font-weight:600}
@media (max-width:760px){.tier-demo-banner{font-size:10px;padding:12px 16px;gap:14px}.tier-demo-banner .banner-label{padding:0 14px}}

/* Feature tag — hidden (was top-right pill on each section) */
.feature-tag{display:none}
.feature-tag-visible{position:absolute;top:32px;right:32px;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:10px;color:var(--ink-2);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(-10px);transition:opacity .6s,transform .6s;z-index:10;pointer-events:none}
.feature-tag.visible{opacity:1;transform:translateY(0)}
.feature-tag .tag-num{color:var(--ink-3);font-weight:600}
.feature-tag .tag-label{color:var(--ink);font-weight:500}
.feature-tag .tag-check{color:var(--c-lime);font-size:11px;margin-left:4px}
@media (max-width:840px){.feature-tag{top:16px;right:16px;padding:6px 10px;font-size:9px}.feature-tag .tag-label{display:none}}

/* Demo section base */
.demo-section{position:relative;padding:80px 8%;min-height:80vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}
.demo-section:first-of-type{border-top:0}
.demo-section h2,.demo-section h3,.demo-section h4{font-family:var(--display-mono);color:var(--ink)}
.demo-section em{font-family:var(--serif);font-style:italic;font-weight:300}
.demo-section-title{font-size:clamp(40px,5.5vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:60px}
.demo-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:block}

.demo-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.demo-cta-primary{padding:16px 26px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;border-radius:999px;transition:transform .2s,gap .2s}
.demo-cta-primary:hover{transform:translateY(-2px)}
.demo-cta-secondary{padding:16px 22px;border:1px solid var(--line-2);color:var(--ink);font-weight:500;font-size:14px;border-radius:999px;transition:background .2s}
.demo-cta-secondary:hover{background:rgba(255,255,255,.05)}

/* Hero common */
.demo-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;min-height:90vh}
.demo-hero h1{font-size:clamp(48px,7vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:24px}
.demo-hero p{color:var(--ink-2);font-size:18px;line-height:1.55;max-width:520px}
.demo-hero-text{position:relative;z-index:2}
.demo-hero-content{position:relative;z-index:2}
@media (max-width:960px){.demo-hero{grid-template-columns:1fr}}

/* ESSENTIELLE specifics */
.tier-essentielle{background:radial-gradient(ellipse at top,#0a0e16 0%,var(--bg) 60%)}
.tier-essentielle .demo-hero h1 em{background:linear-gradient(110deg,var(--c-cyan),var(--c-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-essentielle .feature-tag{border-color:rgba(95,201,255,.3)}
.tier-essentielle .feature-tag .tag-num{color:var(--c-cyan)}
.tier-essentielle .demo-svc-icon{color:var(--c-cyan)}

.tier-essentielle .demo-hero-shape{aspect-ratio:1;background:linear-gradient(135deg,rgba(95,201,255,.25),rgba(31,182,169,.18) 60%,rgba(31,182,169,0));border:1px solid rgba(95,201,255,.3);border-radius:50%;position:relative;animation:essHeroFloat 8s ease-in-out infinite}
.tier-essentielle .demo-hero-shape::before{content:'';position:absolute;inset:20%;background:linear-gradient(135deg,rgba(95,201,255,.3),transparent);border-radius:50%;border:1px solid rgba(95,201,255,.4)}
.tier-essentielle .demo-hero-shape::after{content:'';position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(95,201,255,.4);border-radius:50%;box-shadow:0 0 40px rgba(95,201,255,.6);animation:essHeroPulse 3s ease-in-out infinite}
@keyframes essHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes essHeroPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}

/* About section */
.demo-about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.demo-about h2{font-size:clamp(36px,5vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:24px}
.demo-about p{color:var(--ink-2);font-size:16px;line-height:1.6;margin-bottom:14px}
.demo-photo-placeholder{aspect-ratio:4/5;background:linear-gradient(135deg,rgba(95,201,255,.15),rgba(31,182,169,.10));border:1px solid var(--line-2);border-radius:14px;position:relative;overflow:hidden}
.demo-photo-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(95,201,255,.3),transparent 60%)}
.tier-signature .demo-photo-placeholder{background:linear-gradient(135deg,rgba(255,94,138,.18),rgba(255,181,71,.12))}
.tier-signature .demo-photo-placeholder::before{background:radial-gradient(ellipse at 30% 30%,rgba(255,94,138,.3),transparent 60%)}
@media (max-width:960px){.demo-about{grid-template-columns:1fr}}

/* Services grid */
.demo-services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.demo-services-grid.grid-3{grid-template-columns:repeat(3,1fr)}
.demo-svc-card{padding:32px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.demo-svc-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.demo-svc-icon{display:inline-block;font-size:24px;margin-bottom:18px}
.demo-svc-card h3{font-size:20px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.demo-svc-card p{color:var(--ink-2);font-size:14px;line-height:1.5}
.demo-svc-card.hover-reveal .demo-svc-detail{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;margin-top:14px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;color:var(--c-pink)}
.demo-svc-card.hover-reveal:hover .demo-svc-detail{opacity:1;transform:translateY(0)}
@media (max-width:960px){.demo-services-grid,.demo-services-grid.grid-3{grid-template-columns:1fr}}

/* Localisation (essentielle) */
.demo-localisation{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.demo-loc-map{aspect-ratio:1.2;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:14px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.demo-map-grid{position:absolute;inset:16px;background-image:linear-gradient(rgba(95,201,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(95,201,255,.12) 1px,transparent 1px);background-size:24px 24px;border-radius:8px;opacity:.6}
.demo-map-pin{width:24px;height:24px;background:#ff5e8a;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 20px rgba(255,94,138,.7);position:relative;z-index:3;animation:demoPinBounce 2.4s ease-in-out infinite}
@keyframes demoPinBounce{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-6px)}}
.demo-map-ring{position:absolute;width:80px;height:80px;border:2px solid rgba(95,201,255,.5);border-radius:50%;animation:demoMapRing 2.4s ease-out infinite}
@keyframes demoMapRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(2);opacity:0}}
.demo-map-label{position:absolute;bottom:18px;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.08em;text-align:center;width:100%}
.demo-loc-hours h3{font-size:36px;font-weight:700;margin-bottom:24px;letter-spacing:-.02em}
.demo-loc-hours ul{list-style:none;padding:0}
.demo-loc-hours li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.demo-loc-hours li .day{color:var(--ink)}
@media (max-width:960px){.demo-localisation{grid-template-columns:1fr}}

/* Contact section */
.demo-contact{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.demo-contact h2{font-size:clamp(36px,5vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:18px}
.demo-contact p{color:var(--ink-2);font-size:16px;margin-bottom:32px}
.demo-contact-bits{display:flex;flex-direction:column;gap:14px}
.demo-contact-bits .bit{display:flex;flex-direction:column;gap:4px}
.demo-contact-bits .k{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.2em}
.demo-contact-bits .v{font-size:16px;color:var(--ink)}
.demo-contact-form{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.demo-field{display:flex;flex-direction:column;gap:6px}
.demo-field.full{grid-column:1/-1}
.demo-field span{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em}
.demo-field input,.demo-field textarea,.demo-field select{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s}
.demo-field input:focus,.demo-field textarea:focus,.demo-field select:focus{border-color:var(--c-cyan)}
.demo-submit{grid-column:1/-1;margin-top:6px;padding:14px 24px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;border-radius:999px;transition:transform .2s;border:0;cursor:pointer}
.demo-submit:hover{transform:translateY(-2px)}
@media (max-width:960px){.demo-contact{grid-template-columns:1fr}.demo-contact-form{grid-template-columns:1fr}}

/* Demo footer (per-tier brand) */
.demo-footer{position:relative;padding:60px 8% 40px;border-top:1px solid var(--line)}
.demo-footer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin-bottom:32px;align-items:center}
.demo-footer-brand p{color:var(--ink-3);font-size:13px;margin-top:8px}
.demo-footer-links{display:flex;gap:24px;justify-content:flex-end}
.demo-footer-links a{font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.06em}
.demo-footer-links a:hover{color:var(--ink)}
.demo-footer-copy{padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-align:center}

/* ============= SIGNATURE specifics ============= */
.tier-signature{background:radial-gradient(ellipse at top,#16080e 0%,var(--bg) 60%)}
.tier-signature .demo-hero h1 em{background:linear-gradient(110deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-signature .feature-tag{border-color:rgba(255,94,138,.3)}
.tier-signature .feature-tag .tag-num{color:var(--c-pink)}
.tier-signature .demo-svc-icon{color:var(--c-pink)}
.tier-signature .demo-cta-primary{background:linear-gradient(135deg,var(--c-pink),var(--c-amber));color:#fff}
.tier-signature .demo-field input:focus,.tier-signature .demo-field textarea:focus,.tier-signature .demo-field select:focus{border-color:var(--c-pink)}

.tier-signature .demo-hero{position:relative;overflow:hidden}
.tier-signature .demo-hero-bg-parallax{position:absolute;inset:-10%;background:radial-gradient(circle at 70% 50%,rgba(255,94,138,.25),transparent 60%),radial-gradient(circle at 30% 30%,rgba(255,181,71,.18),transparent 60%);filter:blur(20px);animation:sigParallax 18s ease-in-out infinite;pointer-events:none}
@keyframes sigParallax{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}
.tier-signature .demo-hero-content{grid-column:1/-1;max-width:900px}

.demo-reveal{opacity:0;animation:demoReveal 1.2s ease-out forwards;animation-delay:.3s}
.demo-reveal-big{opacity:0;animation:demoReveal 1.4s ease-out forwards;animation-delay:.3s;font-size:clamp(60px,9vw,160px);font-weight:700;letter-spacing:-.05em;line-height:.95}
@keyframes demoReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.demo-nav-langue{display:flex;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.demo-nav-langue span.active{color:var(--ink)}
.demo-nav-langue span:not(.active){opacity:.5;cursor:pointer}

/* Gallery (signature) */
.demo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.demo-photo{aspect-ratio:1;border-radius:10px;border:1px solid var(--line-2);position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}
.demo-photo:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(255,94,138,.2)}
.demo-photo.p1{background:linear-gradient(135deg,rgba(255,94,138,.3),rgba(255,181,71,.2))}
.demo-photo.p2{background:linear-gradient(135deg,rgba(162,59,214,.3),rgba(255,94,138,.2))}
.demo-photo.p3{background:linear-gradient(135deg,rgba(255,181,71,.3),rgba(95,201,255,.15))}
.demo-photo.p4{background:linear-gradient(135deg,rgba(31,182,169,.3),rgba(95,201,255,.2))}
.demo-photo.p5{background:linear-gradient(135deg,rgba(255,94,138,.25),rgba(162,59,214,.2))}
.demo-photo.p6{background:linear-gradient(135deg,rgba(255,181,71,.25),rgba(255,94,138,.18))}
@media (max-width:760px){.demo-gallery{grid-template-columns:repeat(2,1fr)}}

/* Blog (signature) */
.demo-blog-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:14px}
.demo-blog-head h2{font-size:clamp(40px,5.5vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1}
.demo-cms-badge{font-family:var(--mono);font-size:11px;color:var(--c-amber);background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.3);padding:8px 14px;border-radius:999px;letter-spacing:.08em}
.demo-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demo-article{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .3s,border-color .3s}
.demo-article:hover{transform:translateY(-6px);border-color:var(--line-2)}
.demo-article-img{aspect-ratio:16/10}
.demo-article-img.a1{background:linear-gradient(135deg,rgba(255,94,138,.3),rgba(255,181,71,.2))}
.demo-article-img.a2{background:linear-gradient(135deg,rgba(162,59,214,.3),rgba(95,201,255,.2))}
.demo-article-img.a3{background:linear-gradient(135deg,rgba(31,182,169,.3),rgba(255,181,71,.18))}
.demo-article-date{display:block;padding:18px 22px 0;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase}
.demo-article h3{padding:8px 22px 4px;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.demo-article p{padding:0 22px 22px;color:var(--ink-2);font-size:14px;line-height:1.5}
@media (max-width:960px){.demo-blog-grid{grid-template-columns:1fr}}

/* Testimonials cards (signature) */
.demo-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demo-testi-card{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:32px;transition:transform .3s,border-color .3s}
.demo-testi-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.demo-testi-card p{color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:24px}
.demo-testi-card footer{display:flex;align-items:center;gap:12px}
.demo-testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--c-pink),var(--c-amber));flex-shrink:0}
.demo-testi-avatar.a2{background:linear-gradient(135deg,var(--c-purple),var(--c-cyan))}
.demo-testi-avatar.a3{background:linear-gradient(135deg,var(--c-amber),var(--c-cyan))}
.demo-testi-who cite{display:block;font-style:normal;font-weight:600;color:var(--ink);font-size:14px}
.demo-testi-who span{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}
@media (max-width:960px){.demo-testi-grid{grid-template-columns:1fr}}

/* Footer rich (signature) */
.demo-footer-rich{padding:80px 8% 40px}
.demo-footer-newsletter{margin-bottom:48px;max-width:600px}
.demo-footer-newsletter h3{font-size:36px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.demo-footer-newsletter p{color:var(--ink-2);font-size:14px;margin-bottom:18px}
.demo-newsletter-form{display:flex;gap:8px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 18px}
.demo-newsletter-form input{flex:1;background:transparent;border:0;color:var(--ink);font-family:var(--sans);font-size:14px;outline:none}
.demo-newsletter-form input::placeholder{color:var(--ink-3)}
.demo-newsletter-form button{padding:12px 22px;background:linear-gradient(135deg,var(--c-pink),var(--c-amber));color:#fff;font-weight:600;font-size:13px;border-radius:999px;border:0;cursor:pointer}
.demo-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:32px;border-top:1px solid var(--line);margin-bottom:32px}
.demo-footer-cols .fcol h4{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px}
.demo-footer-cols .fcol a{display:block;color:var(--ink-2);font-size:13px;padding:4px 0;transition:color .2s}
.demo-footer-cols .fcol a:hover{color:var(--ink)}
@media (max-width:760px){.demo-footer-cols{grid-template-columns:repeat(2,1fr)}}

/* ============= ICONIQUE specifics ============= */
.tier-iconique{background:radial-gradient(ellipse at top,#0c0815 0%,var(--bg) 60%)}
.tier-iconique .demo-hero h1 em,.tier-iconique .demo-reveal-big em{background:linear-gradient(110deg,var(--c-purple),var(--c-cyan),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-iconique .feature-tag{border-color:rgba(162,59,214,.4)}
.tier-iconique .feature-tag .tag-num{color:var(--c-purple)}
.tier-iconique .demo-svc-icon{color:var(--c-amber)}
.tier-iconique .demo-cta-primary{background:linear-gradient(135deg,var(--c-purple),var(--c-pink),var(--c-amber));color:#fff}

/* Hero immersif (iconique) */
.tier-iconique .ico-hero{min-height:100vh;position:relative;overflow:hidden}
.ico-hero-3d{position:absolute;right:5%;top:50%;width:480px;height:480px;transform:translateY(-50%);pointer-events:none}
.ico-hero-orb{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;background:radial-gradient(circle at 35% 30%,#fff,#5fc9ff 30%,#a23bd6 70%);border-radius:50%;filter:blur(2px) brightness(1.1);box-shadow:0 0 80px rgba(162,59,214,.6),0 0 140px rgba(95,201,255,.4);animation:icoOrbFloat 6s ease-in-out infinite}
@keyframes icoOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.05)}}
.ico-hero-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.4);border-radius:50%;animation:icoRingExpand 4s ease-out infinite}
.ico-hero-ring.r1{width:300px;height:300px;margin:-150px 0 0 -150px;border-color:rgba(255,94,138,.5)}
.ico-hero-ring.r2{width:420px;height:420px;margin:-210px 0 0 -210px;border-color:rgba(95,201,255,.4);animation-delay:1.5s}
@keyframes icoRingExpand{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media (max-width:960px){.ico-hero-3d{display:none}}

.demo-scroll-indicator{margin-top:60px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.28em;text-transform:uppercase}
.demo-scroll-indicator span{display:inline-block;animation:scrollPulse 2s ease-in-out infinite;margin-left:6px}
@keyframes scrollPulse{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* Manifesto pinning (iconique) */
.demo-manifesto{padding:0;min-height:280vh;display:block}
.ico-manifesto-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 8%}
.ico-stmt{position:absolute;text-align:center;max-width:800px;opacity:0;transform:translateY(30px);will-change:opacity,transform}
.ico-stmt.s1{animation:icoStmt1 16s ease-in-out infinite}
.ico-stmt.s2{animation:icoStmt2 16s ease-in-out infinite}
.ico-stmt.s3{animation:icoStmt3 16s ease-in-out infinite}
.ico-stmt .num{font-family:var(--mono);font-size:14px;color:var(--c-amber);letter-spacing:.4em;display:block;margin-bottom:18px}
.ico-stmt h3{font-size:clamp(40px,6vw,96px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:24px}
.ico-stmt p{color:var(--ink-2);font-size:18px;line-height:1.55;max-width:600px;margin:0 auto}
@keyframes icoStmt1{0%,28%{opacity:1;transform:translateY(0)}33%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes icoStmt2{0%,30%{opacity:0;transform:translateY(30px)}38%,60%{opacity:1;transform:translateY(0)}65%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes icoStmt3{0%,62%{opacity:0;transform:translateY(30px)}70%,100%{opacity:1;transform:translateY(0)}}

/* Portfolio horizontal (iconique) */
.ico-portfolio-row{display:flex;gap:24px;overflow-x:auto;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.ico-portfolio-row::-webkit-scrollbar{height:6px}
.ico-portfolio-row::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.ico-port-card{flex:0 0 320px;height:420px;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);position:relative;transition:transform .4s,box-shadow .4s,border-color .4s;background:var(--bg-2)}
.ico-port-card:hover,.ico-port-card.active{transform:translateY(-12px) scale(1.03);box-shadow:0 30px 60px rgba(162,59,214,.3);border-color:rgba(162,59,214,.5)}
.ico-port-card .img{aspect-ratio:4/3;width:100%}
.ico-port-card.c1 .img{background:linear-gradient(135deg,rgba(255,94,138,.5),rgba(162,59,214,.3))}
.ico-port-card.c2 .img{background:linear-gradient(135deg,rgba(95,201,255,.5),rgba(31,182,169,.3))}
.ico-port-card.c3 .img{background:linear-gradient(135deg,rgba(255,181,71,.5),rgba(255,94,138,.3))}
.ico-port-card.c4 .img{background:linear-gradient(135deg,rgba(162,59,214,.5),rgba(95,201,255,.3))}
.ico-port-card.c5 .img{background:linear-gradient(135deg,rgba(255,94,138,.5),rgba(255,181,71,.3))}
.ico-port-card .info{padding:20px}
.ico-port-card .cat{font-family:var(--mono);font-size:11px;color:var(--c-amber);letter-spacing:.2em;text-transform:uppercase}
.ico-port-card h4{font-size:18px;font-weight:600;margin-top:6px;color:var(--ink)}

/* Process (iconique) */
.ico-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ico-process-step{padding:32px 24px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;transition:transform .3s,border-color .3s,box-shadow .3s}
.ico-process-step:hover{transform:translateY(-8px);border-color:rgba(162,59,214,.4);box-shadow:0 14px 30px rgba(162,59,214,.15)}
.ico-process-step .step-num{font-family:var(--display-mono);font-weight:700;font-size:48px;background:linear-gradient(135deg,var(--c-purple),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em;display:block;margin-bottom:18px}
.ico-process-step h4{font-size:20px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.ico-process-step p{color:var(--ink-2);font-size:14px;line-height:1.5}
@media (max-width:960px){.ico-process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ico-process-grid{grid-template-columns:1fr}}

/* 3D feature (iconique) */
.demo-3d{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ico-3d-stage{position:relative;aspect-ratio:1;perspective:1200px;display:flex;align-items:center;justify-content:center}
.ico-cube{position:relative;width:140px;height:140px;transform-style:preserve-3d;animation:icoCubeSpin 14s linear infinite;filter:drop-shadow(0 0 30px rgba(162,59,214,.6))}
@keyframes icoCubeSpin{from{transform:rotateY(0) rotateX(20deg)}to{transform:rotateY(360deg) rotateX(380deg)}}
.ico-cube .face{position:absolute;width:140px;height:140px;background:linear-gradient(135deg,rgba(255,94,138,.32),rgba(162,59,214,.22),rgba(95,201,255,.32));border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 0 30px rgba(95,201,255,.3)}
.ico-cube .face.f1{transform:rotateY(0deg) translateZ(70px)}
.ico-cube .face.f2{transform:rotateY(90deg) translateZ(70px)}
.ico-cube .face.f3{transform:rotateY(180deg) translateZ(70px)}
.ico-cube .face.f4{transform:rotateY(-90deg) translateZ(70px)}
.ico-cube .face.f5{transform:rotateX(90deg) translateZ(70px)}
.ico-cube .face.f6{transform:rotateX(-90deg) translateZ(70px)}
.ico-3d-particles{position:absolute;inset:0}
.ico-3d-particles span{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(95,201,255,.9);animation:icoParticle 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
.ico-3d-particles span:nth-child(odd){background:#ff5e8a;box-shadow:0 0 6px rgba(255,94,138,.9)}
.ico-3d-particles span:nth-child(3n){background:#ffb547;box-shadow:0 0 6px rgba(255,181,71,.9)}
.ico-3d-particles span:nth-child(1){transform:translate(-110px,-50px)}
.ico-3d-particles span:nth-child(2){transform:translate(120px,-80px)}
.ico-3d-particles span:nth-child(3){transform:translate(150px,30px)}
.ico-3d-particles span:nth-child(4){transform:translate(-100px,80px)}
.ico-3d-particles span:nth-child(5){transform:translate(60px,130px)}
.ico-3d-particles span:nth-child(6){transform:translate(-160px,10px)}
.ico-3d-particles span:nth-child(7){transform:translate(110px,-130px)}
.ico-3d-particles span:nth-child(8){transform:translate(-70px,-110px)}
@keyframes icoParticle{0%,100%{opacity:0}30%,70%{opacity:1}}
.ico-3d-text h2{font-size:clamp(40px,5.5vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:24px}
.ico-3d-text p{color:var(--ink-2);font-size:16px;line-height:1.6}
@media (max-width:960px){.demo-3d{grid-template-columns:1fr}}

/* Testimonials cinematic (iconique) */
.tier-iconique .demo-testimonials{padding:120px 8%}
.ico-testi-stage{max-width:900px;width:100%;margin:0 auto;position:relative;min-height:280px}
.ico-testi-card{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:18px;padding:48px 56px;animation:icoTestiCycle 14s ease-in-out infinite;position:absolute;inset:0}
.ico-testi-card:nth-child(2){animation-delay:7s}
@keyframes icoTestiCycle{0%,40%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}45%,95%{opacity:0;transform:translateY(20px) scale(.96);filter:blur(8px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.ico-testi-card p{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.5;color:var(--ink);margin-bottom:24px}
.ico-testi-card footer{display:flex;justify-content:space-between;align-items:center}
.ico-testi-card cite{font-style:normal;font-weight:600;color:var(--ink);font-size:14px}
.ico-testi-card span{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}

/* CTA final (iconique) */
.demo-cta-final{position:relative;text-align:center;padding:160px 8%;align-items:center}
.ico-cta-bg{position:absolute;inset:20% 30%;background:radial-gradient(circle,rgba(162,59,214,.4),transparent 70%);filter:blur(60px);animation:icoBgPulse 6s ease-in-out infinite}
@keyframes icoBgPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
.demo-cta-final h2{position:relative;font-size:clamp(60px,9vw,140px);font-weight:700;letter-spacing:-.05em;line-height:1;margin-bottom:48px}
.ico-cta-button{position:relative;display:inline-flex;align-items:center;gap:18px;padding:24px 48px;background:var(--bg);color:var(--ink);font-weight:700;font-size:18px;border-radius:999px;transition:transform .3s;border:2px solid transparent;background-image:linear-gradient(var(--bg),var(--bg)),linear-gradient(135deg,var(--c-purple),var(--c-pink),var(--c-amber),var(--c-cyan));background-origin:border-box;background-clip:padding-box,border-box;animation:icoBorderRotate 4s linear infinite}
.ico-cta-button:hover{transform:translateY(-4px)}
@keyframes icoBorderRotate{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* Footer signature (iconique) */
.demo-footer-signature{padding:120px 8% 40px;text-align:center}
.ico-footer-big{font-family:var(--display-mono);font-weight:700;font-size:clamp(80px,14vw,220px);letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,var(--c-purple),var(--c-pink),var(--c-amber),var(--c-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:60px;animation:icoFooterShift 8s linear infinite}
.ico-footer-big em{font-family:var(--serif);font-style:italic;font-weight:300}
@keyframes icoFooterShift{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* === TESTIMONIALS — 3 colonnes scrollantes === */
.testimonials{padding:120px 40px}
.testi-grid{display:flex;justify-content:center;gap:24px;max-height:740px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%)}
.testi-col{display:flex;flex-direction:column;flex:0 0 auto}
.testi-list{list-style:none;display:flex;flex-direction:column;gap:24px;padding:0;margin:0;animation:testiScroll var(--d,40s) linear infinite;will-change:transform}
.testi-col:hover .testi-list{animation-play-state:paused}
@keyframes testiScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.testi{position:relative;width:340px;max-width:90vw;padding:32px;border-radius:24px;background:var(--bg-2);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s}
.testi:hover{transform:translateY(-6px) scale(1.02);border-color:var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,94,138,.18)}
.testi::before{content:'"';position:absolute;top:18px;right:24px;font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;color:var(--c-pink);opacity:.18}
.testi blockquote{margin:0;padding:0}
.testi blockquote p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
.testi blockquote footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.testi img{width:42px;height:42px;border-radius:999px;object-fit:cover;border:1px solid var(--line-2);flex-shrink:0;transition:border-color .3s}
.testi:hover img{border-color:var(--c-pink)}
.testi .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.testi cite{font-style:normal;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.005em}
.testi .role{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}

/* Hide cols progressively on smaller screens */
@media (max-width:1080px){.testi-col.col-3{display:none}}
@media (max-width:760px){.testi-col.col-2{display:none}.testimonials{padding:80px 20px}}

/* === FAQ === */
.faq-list{max-width:1100px;margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;text-align:left;padding:32px 8px;display:flex;justify-content:space-between;align-items:center;gap:32px;font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.015em;color:var(--ink);transition:color .25s}
.faq-q:hover{color:var(--c-pink)}
.faq-q .plus{width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:transform .3s, background .3s, color .3s, border-color .3s;color:var(--ink)}
.faq.open .faq-q .plus{transform:rotate(45deg);background:var(--ink);color:var(--bg);border-color:var(--ink)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1)}
.faq-a-inner{padding:0 80px 32px 8px;color:var(--ink-2);font-size:16px;line-height:1.65;max-width:760px}
.faq-a-inner strong{color:var(--ink);font-weight:700}

/* === CONTACT === */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:stretch}
.contact-side{background:var(--bg-2);border:1px solid var(--line);border-radius:32px;padding:60px;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;position:relative;overflow:hidden}
.contact-side::before{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(255,94,138,.25),transparent 70%);filter:blur(40px)}
.contact-side h3{font-family:var(--display-mono);font-weight:700;font-size:clamp(40px,5.5vw,76px);letter-spacing:-.045em;line-height:1.02;color:var(--ink);position:relative;z-index:2;text-transform:uppercase}
.contact-side h3 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;font-size:.92em}
.contact-bits{position:relative;z-index:2;display:flex;flex-direction:column;gap:0;margin-top:40px}
.bit{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px}
.bit .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.bit .v{color:var(--ink)}

form{background:var(--bg-2);border:1px solid var(--line);border-radius:32px;padding:48px;display:flex;flex-direction:column;gap:22px}
form h4{font-weight:700;font-size:24px;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-size:14px;color:var(--ink);font-weight:600}
.field input, .field textarea, .field select{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);font-family:var(--sans);font-size:15px;outline:none;transition:border-color .3s, background .3s}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3)}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--ink-3);background:var(--bg-3)}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a7a82' stroke-width='1.4' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 18px center;cursor:none;padding-right:40px}
.field select option{background:var(--bg);color:var(--ink)}
.submit{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:22px 28px;background:var(--ink);color:var(--bg);border-radius:999px;font-weight:700;font-size:15px;transition:background .3s}
.submit:hover{background:var(--c-pink);color:#fff}
.ok{padding:14px;border:1px dashed var(--c-lime);color:var(--c-lime);border-radius:14px;font-family:var(--mono);font-size:13px;display:none;text-align:center}
.ok.show{display:block;animation:okIn .4s ease}
@keyframes okIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:980px){.contact-wrap{grid-template-columns:1fr}.contact-side{min-height:auto;padding:40px}form{padding:32px}}

/* === CTA banner (between sections / inner pages) === */
.cta-banner{margin:120px 40px;padding:80px 60px;background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line);border-radius:32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(255,94,138,.15),transparent 70%);filter:blur(40px)}
.cta-banner::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(198,249,100,.12),transparent 70%);filter:blur(40px)}
.cta-banner h2{position:relative;z-index:2;font-family:var(--display-mono);font-weight:700;font-size:clamp(28px,4vw,52px);letter-spacing:-.04em;line-height:1.05;color:var(--ink);max-width:760px;text-transform:uppercase}
.cta-banner h2 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;font-size:.92em}
.cta-banner p{position:relative;z-index:2;color:var(--ink-2);font-size:17px;max-width:520px;line-height:1.55}
.cta-banner .pill-cta{position:relative;z-index:2}
@media (max-width:760px){.cta-banner{margin:80px 20px;padding:48px 28px}}

/* === Footer === */
.footer-big{padding:100px 40px 0;text-align:left}
.footer-big h2{font-family:var(--display-mono);font-weight:700;font-size:clamp(60px,14vw,200px);line-height:.92;letter-spacing:-.05em;color:var(--ink);text-transform:uppercase}
.footer-big h2 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;font-size:.92em;background:linear-gradient(110deg,var(--c-pink),var(--c-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-cols{padding:60px 40px 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;border-top:1px solid var(--line);margin-top:80px}
@media (max-width:1024px){.footer-cols{grid-template-columns:1fr 1fr 1fr;gap:24px}}
@media (max-width:640px){.footer-cols{grid-template-columns:1fr 1fr;gap:20px}}
.fcol h4{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.fcol a, .fcol p{display:block;color:var(--ink-2);font-size:14px;line-height:1.8;font-weight:500;transition:color .2s}
.fcol a:hover{color:var(--ink)}
.copy{padding:24px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
@media (max-width:760px){.footer-cols{grid-template-columns:1fr 1fr;padding:40px 20px}.copy{flex-direction:column;gap:12px;align-items:flex-start;padding:20px}.footer-big{padding:60px 20px 0}}

[data-r]{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
[data-r].in{opacity:1;transform:translateY(0)}

/* === Scramble effect === */
.scrm{display:inline-block;font-variant-numeric:tabular-nums}
.scrm-host{transition:color .35s}

/* === Nova Orb — Midjourney 3D keycap image, bottom-left === */
.nova-orb{position:fixed;bottom:24px;left:24px;width:360px;height:520px;z-index:50;pointer-events:auto;perspective:1200px}
.nova-orb .no-halo{position:absolute;inset:10px 0 30px 0;background:radial-gradient(ellipse at 50% 60%,rgba(95,201,255,.35) 0%,rgba(255,94,168,.22) 35%,rgba(255,181,71,.12) 60%,transparent 80%);filter:blur(28px);z-index:0;animation:noHaloPulse 5s ease-in-out infinite alternate;pointer-events:none}
@keyframes noHaloPulse{from{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.08)}}
.nova-orb .no-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--no-ry,-8deg)) rotateX(var(--no-rx,2deg));transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:1}
.nova-orb .no-img{width:100%;height:100%;object-fit:contain;display:block;animation:orbFloat 4.5s ease-in-out infinite alternate;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,black 60%,transparent 95%);mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,black 60%,transparent 95%);filter:drop-shadow(0 20px 30px rgba(95,201,255,.3)) drop-shadow(0 8px 14px rgba(0,0,0,.6));transition:filter .35s ease}
@keyframes orbFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.nova-orb:hover .no-tilt{transform:rotateY(calc(var(--no-ry,-8deg) - 4deg)) rotateX(var(--no-rx,2deg)) scale(1.04)}
.nova-orb:hover .no-img{filter:drop-shadow(0 24px 40px rgba(95,201,255,.5)) drop-shadow(0 0 30px rgba(255,94,168,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.6))}

/* Floating particles around the orb */
.nova-orb .no-dots{position:absolute;inset:0;z-index:2;pointer-events:none}
.nova-orb .no-dots .d{position:absolute;width:4px;height:4px;border-radius:999px;background:#5fc9ff;box-shadow:0 0 8px #5fc9ff,0 0 14px rgba(95,201,255,.4)}
.nova-orb .no-dots .d:nth-child(1){top:18%;right:8%;animation:dotFlt 5s ease-in-out infinite}
.nova-orb .no-dots .d:nth-child(2){top:38%;left:0;animation:dotFlt 6s ease-in-out infinite 1s;background:#ff5ea8;box-shadow:0 0 8px #ff5ea8}
.nova-orb .no-dots .d:nth-child(3){top:62%;right:0;animation:dotFlt 5.5s ease-in-out infinite 2s;background:#5fffd4;box-shadow:0 0 8px #5fffd4}
.nova-orb .no-dots .d:nth-child(4){top:80%;left:14%;animation:dotFlt 6.5s ease-in-out infinite 3s;background:#ffb547;box-shadow:0 0 8px #ffb547}
@keyframes dotFlt{0%,100%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-18px) scale(1.4);opacity:1}}

@media (max-width:760px){.nova-orb{display:none}}

/* === Scroll progress bar — barber-pole stripes (DA pink/amber), glass + shimmer === */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:18px;z-index:200;pointer-events:none;overflow:hidden}
.scroll-progress .sp-track{position:absolute;inset:0;background:rgba(14,14,16,.14);overflow:hidden;backdrop-filter:blur(4px) saturate(140%);-webkit-backdrop-filter:blur(4px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06)}
.scroll-progress .sp-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);overflow:hidden;transition:width .15s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px rgba(255,94,138,.4),0 0 18px rgba(255,181,71,.25);opacity:.65;mix-blend-mode:screen}
.scroll-progress .sp-fill::before{content:'';position:absolute;left:0;top:0;height:100%;width:calc(100vw + 12px);background:repeating-linear-gradient(-78deg,rgba(28,8,18,.5) 0,rgba(255,94,138,.9) 2px,rgba(255,181,71,1) 3px,rgba(255,94,138,.9) 4px,rgba(28,8,18,.5) 6px);animation:spStripes .9s linear infinite}
/* Glossy top highlight — gives the bar a glass-like reflection */
.scroll-progress::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 45%,transparent 50%,rgba(0,0,0,.18) 100%);pointer-events:none;z-index:5}
/* Sliding shimmer that sweeps across the bar */
.scroll-progress::before{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);filter:blur(2px);animation:spShimmer 3.6s ease-in-out infinite;z-index:6;pointer-events:none}
@keyframes spStripes{from{transform:translateX(0)}to{transform:translateX(-6px)}}
@keyframes spShimmer{0%{left:-40%}55%,100%{left:140%}}

/* === MÉTIER PAGES === */
.page-hero.metier-hero h1{font-size:clamp(36px,5.5vw,82px);line-height:1.08;letter-spacing:-.035em;max-width:1000px;word-break:keep-all;hyphens:none}
.breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;display:flex;gap:8px;align-items:center}
.breadcrumb a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current="page"]{color:var(--ink)}
.metier-prose{max-width:760px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--ink-2)}
.metier-prose p{margin:0 0 24px}
.metier-prose p:last-child{margin-bottom:0}
.metier-prose strong{color:var(--ink);font-weight:600}
.metier-prose h3{font-family:var(--display-mono);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin:56px 0 16px;text-transform:uppercase}
.metier-list{list-style:none;padding:0;margin:24px 0 0}
.metier-list li{padding:18px 0 18px 32px;border-bottom:1px solid var(--line);position:relative}
.metier-list li::before{content:"→";position:absolute;left:0;color:var(--ink-3);font-weight:700}
.metier-list li:last-child{border-bottom:none}
.metier-steps{counter-reset:step;list-style:none;padding:0;margin:32px auto 0;max-width:760px;display:grid;gap:14px}
.metier-steps li{counter-increment:step;padding:24px 28px 24px 84px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;position:relative;color:var(--ink-2);line-height:1.6}
.metier-steps li strong{color:var(--ink);font-weight:700}
.metier-steps li::before{content:"0" counter(step);position:absolute;left:28px;top:26px;font-family:var(--mono);font-size:13px;color:var(--ink-3);letter-spacing:.06em}
.metier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:24px auto 0}
.metier-card{display:block;padding:32px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s}
.metier-card:hover{border-color:var(--ink-3);transform:translateY(-4px)}
.metier-card .card-num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;display:block;margin-bottom:12px}
.metier-card h3{font-family:var(--display-mono);font-size:24px;text-transform:uppercase;margin:0 0 12px;letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.metier-card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 20px}
.metier-card .card-tag{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.tarif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:32px auto 24px}
.tarif-card{padding:36px 32px;background:var(--bg-2);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;gap:14px}
.tarif-card.featured{border-color:var(--ink-3);box-shadow:0 0 0 1px var(--ink-3) inset}
.tarif-card h3{font-family:var(--display-mono);font-size:22px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin:0}
.tarif-card .tarif-price{font-family:var(--display-mono);font-size:30px;color:var(--ink);font-weight:700;margin:0;letter-spacing:-.02em;line-height:1}
.tarif-card .tarif-cible{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0;font-style:italic;min-height:42px}
.tarif-card ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.tarif-card ul li{font-size:14px;color:var(--ink-2);padding-left:22px;position:relative;line-height:1.4}
.tarif-card ul li::before{content:"✓";position:absolute;left:0;color:var(--ink-3);font-weight:700}
.tarif-aside{max-width:760px;margin:8px auto 0;font-size:14px;color:var(--ink-3);text-align:center;font-style:italic;line-height:1.5}
.metier-faq{padding-top:0}
@media (max-width:860px){
  .metier-cards,.tarif-grid{grid-template-columns:1fr}
  .metier-steps li{padding:60px 24px 24px}
  .metier-steps li::before{top:22px;left:28px}
  .metier-prose{font-size:17px}
}

/* === A11Y — Skip link === */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:14px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:0 0 12px 0;z-index:9999;font-weight:700}
.skip-link:focus{left:0;outline:3px solid var(--c-pink,#ff5e8a);outline-offset:2px}

/* === À PROPOS — Founder card === */
.founder-card{display:flex;align-items:center;gap:24px;padding:28px;background:var(--bg-2);border:1px solid var(--line);border-radius:24px;margin:0 0 32px;max-width:760px}
.founder-avatar{width:88px;height:88px;border-radius:999px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--display-mono);font-size:36px;font-weight:700;flex-shrink:0;letter-spacing:-.02em}
.founder-meta{flex:1}
.founder-name{font-family:var(--display-mono);font-size:22px;font-weight:700;color:var(--ink);margin:0;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.founder-role{font-size:15px;color:var(--ink-2);margin:8px 0 0;line-height:1.4}
.founder-loc{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}
@media (max-width:560px){
  .founder-card{flex-direction:column;text-align:center;padding:24px}
  .founder-avatar{width:72px;height:72px;font-size:30px}
}

/* === SERVICES PAGE PREVIEWS (services.html) — Figma artboard + motion tunnel === */

/* UI/UX — Figma artboard mockup (dark mode) overrides for services.html */
.pv-uiux .figma-top{position:absolute;top:0;left:0;right:0;height:32px;background:#15151a;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 12px;gap:10px;font-size:10px;color:#9aa;letter-spacing:.06em;z-index:5}
.pv-uiux .figma-top .flogo{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#ff5ea8 0%,#ffb547 50%,#5fc9ff 100%);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:8px;color:#fff}
.pv-uiux .figma-top .crumb{display:flex;align-items:center;gap:6px;color:#7a7a82}
.pv-uiux .figma-top .crumb strong{color:#e0e0e6;font-weight:500}
.pv-uiux .figma-top .crumb .sep{opacity:.4}
.pv-uiux .figma-top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pv-uiux .figma-top .avatar{width:14px;height:14px;border-radius:50%;background:#5fc9ff;border:1px solid #1a1a1f}
.pv-uiux .figma-top .avatar.b{background:#ff5e8a;margin-left:-6px}
.pv-uiux .figma-top .avatar.c{background:#c6f964;margin-left:-6px}
.pv-uiux .figma-top .badge{padding:2px 6px;background:rgba(95,201,255,.15);color:#5fc9ff;border-radius:3px;font-size:8px;letter-spacing:.1em;font-weight:600}

.pv-uiux .figma-board{position:absolute;top:42px;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;z-index:2}
.pv-uiux .fig-section{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;position:relative}
.pv-uiux .fig-section .stitle{font-size:8px;color:#7a7a82;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.pv-uiux .fig-section .stitle::before{content:'';width:5px;height:5px;border-radius:1px;background:currentColor;color:var(--ink-3)}

.pv-uiux .fig-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pv-uiux .fig-tok{aspect-ratio:1;border-radius:4px;position:relative}
.pv-uiux .fig-tok::after{content:attr(data-label);position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) translateY(100%);font-size:7px;color:#7a7a82;letter-spacing:.04em;white-space:nowrap;line-height:1}

.pv-uiux .fig-type{display:flex;flex-direction:column;gap:4px}
.pv-uiux .fig-type .tline{display:flex;align-items:baseline;gap:8px;color:#e0e0e6}
.pv-uiux .fig-type .tline .name{font-size:7px;color:#5a5a60;width:18px;text-transform:uppercase;letter-spacing:.1em}
.pv-uiux .fig-type .h1{font-family:var(--display-mono);font-size:18px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff}
.pv-uiux .fig-type .h2{font-family:var(--display-mono);font-size:13px;font-weight:600;line-height:1;color:#fff}
.pv-uiux .fig-type .body{font-size:9px;color:#aaa}
.pv-uiux .fig-type .meta{font-size:7px;color:#5a5a60;margin-left:auto}

.pv-uiux .fig-comps{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.pv-uiux .fig-btn{padding:4px 8px;background:#5fc9ff;color:#1a1a1f;font-size:8px;font-weight:600;border-radius:3px;letter-spacing:.04em}
.pv-uiux .fig-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#e0e0e6}
.pv-uiux .fig-input{padding:4px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:3px;font-size:8px;color:#7a7a82;flex:1;min-width:60px}
.pv-uiux .fig-badge{padding:3px 7px;background:rgba(255,94,168,.15);color:#ff5e8a;border:1px solid rgba(255,94,168,.4);font-size:7px;border-radius:99px;letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.pv-uiux .fig-card{padding:5px 7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:3px;font-size:7px;color:#aaa;display:flex;align-items:center;gap:4px}
.pv-uiux .fig-card::before{content:'';width:8px;height:8px;border-radius:1px;background:#c6f964}

.pv-uiux .fig-spacing{display:flex;align-items:center;gap:5px;flex:1}
.pv-uiux .fig-sp{display:flex;flex-direction:column;align-items:center;gap:2px}
.pv-uiux .fig-sp .bar{background:rgba(95,201,255,.6);border-radius:1px;width:3px}
.pv-uiux .fig-sp.s1 .bar{height:4px}
.pv-uiux .fig-sp.s2 .bar{height:8px}
.pv-uiux .fig-sp.s3 .bar{height:14px}
.pv-uiux .fig-sp.s4 .bar{height:22px}
.pv-uiux .fig-sp.s5 .bar{height:32px}
.pv-uiux .fig-sp .lbl{font-size:7px;color:#7a7a82;letter-spacing:.05em}

.pv-uiux .fig-section.selected{border-color:#5fc9ff;box-shadow:inset 0 0 0 1px rgba(95,201,255,.2),0 0 12px rgba(95,201,255,.15);animation:figSel 3s ease-in-out infinite}
@keyframes figSel{0%,100%{box-shadow:inset 0 0 0 1px rgba(95,201,255,.2),0 0 12px rgba(95,201,255,.15)}50%{box-shadow:inset 0 0 0 1px rgba(95,201,255,.4),0 0 18px rgba(95,201,255,.3)}}
.pv-uiux .fig-section.selected::after{content:'';position:absolute;top:-3px;left:-3px;width:5px;height:5px;background:#5fc9ff;border:1px solid #1a1a1f;border-radius:1px}
.pv-uiux .fig-section.selected::before{content:'';position:absolute;top:-3px;right:-3px;width:5px;height:5px;background:#5fc9ff;border:1px solid #1a1a1f;border-radius:1px}

.pv-uiux .fig-cursor{position:absolute;z-index:6;width:14px;height:14px;animation:cursorMove 8s ease-in-out infinite}
.pv-uiux .fig-cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pv-uiux .fig-cursor .tag{position:absolute;top:14px;left:10px;background:#ff5e8a;color:#fff;padding:2px 5px;border-radius:3px;font-size:7px;white-space:nowrap;letter-spacing:.04em;font-weight:500}
@keyframes cursorMove{0%{top:50%;left:25%}25%{top:30%;left:60%}50%{top:65%;left:55%}75%{top:75%;left:30%}100%{top:50%;left:25%}}

/* Motion — 3D tunnel + starfield + beam + dust (used by services.html via .pv-motion) */
.pv-motion{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at center,#0a0a14 0%,#040408 70%,#000 100%);perspective:700px;perspective-origin:center}
.pv-motion .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.pv-motion .star{position:absolute;width:1px;height:1px;background:#fff;border-radius:50%;animation:starTwinkle 3s ease-in-out infinite}
.pv-motion .star.big{width:2px;height:2px;box-shadow:0 0 4px rgba(255,255,255,.6)}
@keyframes starTwinkle{0%,100%{opacity:.2}50%{opacity:.85}}
.pv-motion .beam{position:absolute;top:-50%;left:-100%;width:200%;height:200%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.04) 49%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 51%,transparent 60%);animation:beamDrift 14s linear infinite;z-index:2;pointer-events:none}
@keyframes beamDrift{from{transform:translate(-30%,-30%)}to{transform:translate(30%,30%)}}
.pv-motion .dust{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 4px rgba(255,255,255,.3);animation:dustRise 8s linear infinite;z-index:3;pointer-events:none}
@keyframes dustRise{0%{transform:translateY(120%) translateX(0);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(-20%) translateX(15px);opacity:0}}
.pv-motion .tunnel{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;z-index:4}
.pv-motion .ring{position:absolute;width:520px;height:520px;margin-left:-260px;margin-top:-260px;border:1px solid currentColor;border-radius:0;box-shadow:0 0 14px currentColor,inset 0 0 30px rgba(255,255,255,.02);animation:tunnelMove 5s linear infinite;transform-origin:center}
@keyframes tunnelMove{0%{transform:translateZ(-2400px) rotate(0deg);opacity:0}8%{opacity:.4}50%{opacity:.7}85%{opacity:.4}100%{transform:translateZ(400px) rotate(6deg);opacity:0}}
.pv-motion .ring:nth-child(1){color:rgba(255,255,255,.6);animation-delay:0s}
.pv-motion .ring:nth-child(2){color:rgba(255,255,255,.45);animation-delay:-.42s}
.pv-motion .ring:nth-child(3){color:rgba(255,255,255,.55);animation-delay:-.83s;border-radius:50%}
.pv-motion .ring:nth-child(4){color:rgba(212,160,80,.55);animation-delay:-1.25s}
.pv-motion .ring:nth-child(5){color:rgba(255,255,255,.6);animation-delay:-1.66s}
.pv-motion .ring:nth-child(6){color:rgba(255,255,255,.5);animation-delay:-2.08s;border-radius:50%}
.pv-motion .ring:nth-child(7){color:rgba(255,255,255,.55);animation-delay:-2.5s}
.pv-motion .ring:nth-child(8){color:rgba(212,160,80,.45);animation-delay:-2.91s}
.pv-motion .ring:nth-child(9){color:rgba(255,255,255,.55);animation-delay:-3.33s;border-radius:50%}
.pv-motion .ring:nth-child(10){color:rgba(255,255,255,.6);animation-delay:-3.75s}
.pv-motion .ring:nth-child(11){color:rgba(255,255,255,.45);animation-delay:-4.16s}
.pv-motion .ring:nth-child(12){color:rgba(212,160,80,.55);animation-delay:-4.58s;border-radius:50%}
.pv-motion .vanish{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,235,200,.5) 30%,rgba(212,160,80,.2) 60%,transparent 80%);filter:blur(3px);animation:vanishPulse 3s ease-in-out infinite;z-index:5;pointer-events:none}
@keyframes vanishPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}}
.pv-motion::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px);mix-blend-mode:screen;z-index:7}