/* Devloppiha landing page — Papier and Encre, one key word per title marked in Signal lime. */
:root {
  /* Devloppiha identity v1: Encre, Signal (lime, rare), Papier, Graphite, Brume */
  --encre: #0B0C0E;
  --signal: #C6F135;
  --papier: #F3F4F1;
  --graphite: #5B6068;
  --brume: #DADCD6;
  --blanc: #FFFFFF;
  --surface: #E9EBE6;
  --line: var(--brume);
  --g400: #9A9EA4;
  --g500: var(--graphite);
  --g600: #474B52;
  --noir: var(--encre);
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --text: Inter, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --radius: 18px;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #FAF9F6; color: var(--noir); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; }
h3 { font-size: 21px; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(72px, 10vw, 128px); }
.label { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g500); margin-bottom: 18px; }
.label-light { color: var(--g400); }
.sub { color: var(--g600); max-width: 52ch; margin-top: 16px; }
.head { margin-bottom: 56px; }
/* key word: a Signal-lime brush stroke behind it (assets/brush-signal.svg, inlined) */
.grad { color: var(--encre); padding: .02em .32em .06em .2em; margin: 0 -.06em; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M10 50 C6 30 10 22 14 22.0 L30 13.0 L50 12.2 L70 14.5 L90 13.0 L110 12.6 L130 15.1 L150 18.9 L170 18.3 L190 18.3 L210 14.7 L230 17.1 L250 15.4 L270 14.9 L290 14.6 L310 15.6 L330 20.8 L396.3 20.0 L352.4 24.0 L359.7 28.0 L345.6 32.0 L395.6 36.0 L348.9 40.0 L364.4 44.0 L352.2 48.0 L385.2 52.0 L347.0 56.0 L360.4 60.0 L347.2 64.0 L376.2 68.0 L345.7 72.0 L363.4 76.0 L342.5 80.0 L373.2 84.0 L349.5 88.0 L340 85.3 L320 85.2 L300 85.4 L280 81.3 L260 82.2 L240 84.6 L220 85.5 L200 86.5 L180 86.8 L160 81.4 L140 85.2 L120 85.8 L100 84.8 L80 82.6 L60 84.9 L40 82.3 C12 86 8 72 10 50 Z%22 fill=%22%23C6F135%22/%3E%3Cpath d=%22M57 38.3 L291 38.7%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.10%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M23 53.0 L340 52.2%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.16%22 stroke-width=%222.0%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M35 49.3 L265 48.8%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.09%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M22 41.9 L295 42.5%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.17%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40 79.8 L252 79.3%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.11%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M46 33.3 L360 34.7%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.14%22 stroke-width=%222.3%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M38 45.9 L329 45.0%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.12%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M44 33.8 L326 35.1%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.11%22 stroke-width=%221.0%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M22 58.7 L308 57.7%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.16%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M38 38.0 L323 36.8%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.18%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M33 42.6 L264 41.3%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.08%22 stroke-width=%221.3%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M37 60.5 L335 60.5%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M48 32.1 L304 32.1%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M71 26.2 L251 26.2%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 50.5 L251 50.5%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M45 37.4 L312 37.4%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M56 77.9 L325 77.9%22 stroke=%22%237FA012%22 stroke-opacity=%22.1%22 stroke-width=%221%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.grad-light { color: var(--signal); }
::selection { background: var(--signal); color: var(--encre); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px var(--display); padding: 16px 26px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--noir); color: var(--blanc); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }
.btn-dark:hover { background: #22252A; }
.btn-ghost { border-color: var(--line); background: var(--blanc); }
.btn-ghost:hover { border-color: var(--g400); }
.btn-light { background: var(--signal); color: var(--encre); }
.btn-light:hover { background: #D4F75C; }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn-full { width: 100%; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,249,246,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; }
.logo { display: block; height: auto; max-width: 100%; }
.links { display: flex; align-items: center; gap: 30px; }
.links a:not(.btn) { text-decoration: none; font-size: 15px; color: var(--g600); }
.links a:not(.btn):hover { color: var(--noir); }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--noir); border-radius: 2px; transition: transform .2s, top .2s; }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 96px) clamp(72px, 9vw, 120px); }
.grid-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(120,116,105,.12); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6vw, 82px); line-height: 1; letter-spacing: -.045em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--g600); max-width: 46ch; margin-top: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chips { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 500 13px var(--mono); color: var(--g600); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--blanc); }

.hero-art { position: relative; aspect-ratio: 1 / .92; max-width: 100%; }
/* Fikra, the mascot (the client's drawing), standing behind the laptop. Two poses, each a set of layers:
   think = body + fist turned to the chin + "hmm" face (+ elbow patch); point = body without the arm + a new
   sleeve reaching to the laptop with the pointing hand. Bodies sit behind the laptop, arms in front of it.
   7s loop: think with a "?" bubble, then point at the screen, then think again. */
.fikra { position: absolute; left: 38%; top: -6%; width: 33%; aspect-ratio: 369 / 965; }
.fikra picture, .fikra img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fikra img.fikra-wide { left: -40.65%; width: 140.65%; max-width: none; }        /* 519px drawings: 150px of reach on the left */
.fikra-body, .fikra-point-body { z-index: 1; }
.fikra-face { z-index: 2; }
.fikra-arm, .fikra-elbow, .fikra-point-arm { z-index: 5; }
.fikra-arm { transform-origin: 10.84% 34.72%; transform: rotate(30deg); }
.fikra-think { animation: f-think 7s ease-in-out infinite; }
.fikra-point { opacity: 0; animation: f-point 7s ease-in-out infinite; }
/* while pointing, the hand taps the screen twice */
.fikra img.fikra-point-arm { animation: f-point 7s ease-in-out infinite, f-tap 7s ease-in-out infinite; }
@keyframes f-tap { 0%, 52% { transform: none; } 55% { transform: translate(-1%, .6%); } 58% { transform: none; } 61% { transform: translate(-1%, .6%); } 64%, 100% { transform: none; } }
.fikra-q { position: absolute; z-index: 6; left: 70%; top: -4%; width: 42%; height: auto; overflow: visible; transform-origin: 0% 100%; opacity: 0; animation: f-q 7s ease-in-out infinite; }
.fikra-spark { position: absolute; z-index: 6; left: 2%; top: 1%; width: 22%; fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: f-spark 7s ease-in-out infinite; }
@keyframes f-think { 0%, 44% { opacity: 1; } 46.5%, 92% { opacity: 0; } 94.5%, 100% { opacity: 1; } }
@keyframes f-point { 0%, 44% { opacity: 0; } 46.5%, 92% { opacity: 1; } 94.5%, 100% { opacity: 0; } }
@keyframes f-q { 0% { opacity: 0; transform: scale(.6); } 6%, 36% { opacity: 1; transform: scale(1); } 42%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes f-spark { 0%, 48% { opacity: 0; } 54%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.laptop { position: absolute; left: 20%; bottom: 14%; width: 70%; z-index: 2; filter: drop-shadow(0 40px 50px rgba(0,0,0,.18)); }
.laptop .lid { background: linear-gradient(160deg, #2E2E2E, #0B0B0B); border-radius: 18px 18px 6px 6px; padding: 12px; aspect-ratio: 16 / 10.4; }
.laptop .scr { background: var(--blanc); border-radius: 6px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.laptop .base { height: 16px; margin: 0 -7%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #E4E4E4, #9C9C9C); }
.s-bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.s-bar { align-items: center; }
.s-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--brume); }
.s-bar .url { margin: 0 auto; font: 400 10px var(--mono); color: var(--g500); background: var(--papier); border-radius: 999px; padding: 2px 12px; transform: translateX(-12px); }
.shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.laptop .scr picture, .phone .scr picture { flex: 1; min-height: 0; display: block; }
.phone .shot-img { height: auto; }
.s-hero { flex: 1; padding: 6% 7%; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(160deg, #FAFAFA, #EDEDED); }
.s-hero b { display: block; width: 64%; height: 14px; border-radius: 7px; background: var(--noir); }
.s-hero em, .phone em { display: block; width: 80%; height: 8px; border-radius: 4px; background: #D0D0D0; }
.s-hero em.short, .phone em.short { width: 52%; }
.s-hero span { display: block; width: 30%; height: 18px; border-radius: 9px; background: var(--noir); margin-top: 6px; }
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 7% 14px; }
.s-cards i { height: 34px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.phone { position: absolute; right: 4%; bottom: 6%; width: 30%; aspect-ratio: 9 / 18.5; z-index: 3; border-radius: 30px; padding: 8px; background: linear-gradient(145deg, #3A3A3A, #0B0B0B 55%, #2A2A2A); box-shadow: 0 40px 60px -24px rgba(0,0,0,.5); transform: rotate(6deg); }
.phone .scr { background: var(--papier); border-radius: 23px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.p-top { height: 12%; background: var(--noir); }
.p-img { height: 34%; background: linear-gradient(160deg, #EDEDED, #C4C4C4); margin-bottom: 6px; }
.phone b { display: block; width: 60%; height: 10px; border-radius: 5px; background: var(--noir); margin-left: 12%; }
.phone em { margin-left: 12%; width: 72%; }
.phone em.short { width: 48%; }
.phone span { display: block; height: 22px; margin: auto 12% 0; border-radius: 11px; background: var(--noir); }
.sticker { position: absolute; right: -6%; top: 13%; z-index: 4; font: 500 15px var(--mono); background: var(--noir); color: var(--blanc); padding: 12px 18px; border-radius: 12px; transform: rotate(4deg); box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); }
.sticker span { color: var(--g400); }
.sticker .c { display: block; color: var(--g500); margin-bottom: 4px; }
.sticker b { font-weight: 500; color: var(--signal); }

/* about */
.about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-copy h2 { font-size: clamp(32px, 3.6vw, 46px); }
.about-copy p { color: var(--g600); max-width: 54ch; }
.about-copy .lead-s { font-size: 19px; color: var(--noir); margin: 22px 0 16px; }
/* about stats: one dark panel, three figures split by thin rules; figures count up once, a soft lime glow drifts behind */
.stats { position: relative; overflow: hidden; list-style: none; margin: 34px 0 0; padding: 22px 8px; display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: 20px; background: var(--encre); color: var(--blanc); }
.stats::before { content: ""; position: absolute; top: -60%; left: -20%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(198,241,53,.16), transparent); animation: glow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes glow { to { transform: translateX(180%); } }
.stats li { position: relative; display: grid; gap: 6px; align-content: start; padding: 2px 18px; }
.stats li + li { border-left: 1px solid rgba(255,255,255,.12); }
.stats b { display: flex; align-items: flex-start; font: 700 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stats sup { font-size: .5em; line-height: 1; margin: .12em 0 0 2px; color: var(--signal); }
.stats li > span { font-size: 13px; line-height: 1.4; color: #A9ADB3; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; aspect-ratio: 4 / 3.2; height: auto; object-fit: cover; object-position: 58% 40%; border-radius: 22px; border: 1px solid var(--line); }
.team-photo figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; }
.team-photo b { font: 600 15px var(--display); }
.team-photo span { font: 400 12.5px var(--mono); color: var(--g500); }

/* problem */
/* pourquoi maintenant: five pain cards (shared .why-card base) and the lime answer card */
.problem { background: #FAF9F6; }
.why-card.answer-card { background: var(--signal); border-color: var(--signal); color: var(--encre); text-decoration: none; display: flex; flex-direction: column; }
.why-card.answer-card::before { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 70%); }
.why-card.answer-card .why-ico { background: var(--encre); border-color: var(--encre); }
.answer-card .why-ico svg { stroke: var(--signal); }
.why-card.answer-card:hover .why-ico { background: var(--encre); border-color: var(--encre); }
.answer-card h3 { font-size: 26px; }
.why-card.answer-card p { color: var(--encre); opacity: .8; }
.answer-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--signal); font-size: 17px; transition: transform .35s; }
.answer-card:hover .answer-go { transform: rotate(-45deg); }
.i-ok { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw2 2.6s ease-in-out infinite; }
@keyframes draw2 { 0%, 15% { stroke-dashoffset: 30; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }

/* 01 by hand: the stack of papers keeps sliding */
.i-paper { position: relative; width: 34px; height: 36px; }
.i-paper span { position: absolute; left: 4px; top: 4px; width: 24px; height: 30px; border: 2.6px solid var(--encre); border-radius: 4px; background: var(--blanc);
  background-image: linear-gradient(var(--encre), var(--encre)), linear-gradient(var(--encre), var(--encre)); background-size: 12px 2px, 8px 2px; background-position: 4px 8px, 4px 14px; background-repeat: no-repeat; animation: shuffle 3s ease-in-out infinite; }
.i-paper span:nth-child(2) { animation-delay: -1s; } .i-paper span:nth-child(3) { animation-delay: -2s; }
@keyframes shuffle { 0% { transform: translate(-4px, -2px) rotate(-10deg); z-index: 1; } 33% { transform: translate(4px, 2px) rotate(8deg); z-index: 3; } 66% { transform: translate(0, 0) rotate(0); z-index: 2; } 100% { transform: translate(-4px, -2px) rotate(-10deg); z-index: 1; } }
/* 02 slow site: the page never finishes loading */
.i-slow { position: relative; width: 38px; height: 30px; border: 2.6px solid var(--encre); border-radius: 5px; }
.i-slow .bar { position: absolute; left: 0; right: 0; top: 0; height: 7px; border-bottom: 2.6px solid var(--encre); display: flex; gap: 2px; padding: 1px 3px; }
.i-slow .bar i { width: 2px; height: 2px; border-radius: 50%; background: var(--encre); }
.i-slow .spin { position: absolute; left: 50%; top: 58%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 2.4px solid var(--brume); border-top-color: var(--encre); border-radius: 50%; animation: spin .9s linear infinite; }
/* 03 lost in the maze: the dot wanders, the "?" blinks */
.i-dot { fill: var(--encre); stroke: none; animation: wander 4s ease-in-out infinite; }
.i-q { fill: var(--encre); stroke: none; animation: blink 1.6s ease-in-out infinite; }
@keyframes wander { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, 12px); } 50% { transform: translate(12px, 12px); } 75% { transform: translate(12px, 0); } }
/* 04 the developer who vanished */
.i-gone { animation: vanish 3s ease-in-out infinite; }
.i-cross { stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw3 3s ease-in-out infinite; }
@keyframes vanish { 0%, 30% { opacity: 1; } 55%, 85% { opacity: .15; } 100% { opacity: 1; } }
@keyframes draw3 { 0%, 40% { stroke-dashoffset: 16; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }
/* 05 the piece that doesn't fit */
.i-puzzle { position: relative; width: 38px; height: 32px; }
.i-puzzle .slot { position: absolute; left: 0; bottom: 0; width: 38px; height: 14px; border: 2.6px dashed var(--encre); border-radius: 4px; }
.i-puzzle .piece { position: absolute; left: 9px; top: 0; width: 18px; height: 12px; border: 2.6px solid var(--encre); border-radius: 50% 50% 4px 4px; background: var(--signal); animation: nofit 2.4s ease-in-out infinite; }
@keyframes nofit { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(8px) rotate(0); } 45% { transform: translateY(6px) rotate(-12deg); } 55% { transform: translateY(6px) rotate(12deg); } 65% { transform: translateY(6px) rotate(-8deg); } 80% { transform: translateY(0) rotate(0); } }

/* services: cards with a looping illustration of each service, a lime spotlight that follows the pointer, lift on hover */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { --mx: 50%; --my: 0%; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; padding: 14px 14px 28px; background: var(--blanc); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(198,241,53,.22), transparent 70%); }
.card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(11,12,14,.45); border-color: #C9CDC2; }
.card:hover::before { opacity: 1; }
.card > *:not(.card-art) { margin-inline: 16px; position: relative; }
.card-dark { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.card-dark::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(198,241,53,.16), transparent 70%); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; margin-bottom: 10px; }
.num { font: 500 12px var(--mono); color: var(--g500); letter-spacing: .08em; }
.card-dark .num { color: var(--g400); }
.go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 16px; transition: transform .35s, background .35s, border-color .35s, color .35s; }
.card-dark .go { border-color: #2A2D33; }
.card:hover .go { transform: rotate(-45deg); background: var(--signal); border-color: var(--signal); color: var(--encre); }
.card h3 { font-size: 26px; }
.tagline { color: var(--g500); margin-top: 6px; }
.card-dark .tagline { color: var(--g400); }
.card ul { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 11px; border-top: 1px solid var(--line); padding-top: 20px; }
.card-dark ul { border-top-color: #24272C; }
.card li { font-size: 15px; padding-left: 22px; color: var(--g600); position: relative; }
.card-dark li { color: #C9CCD0; }
.card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .45; }
.card-dark li::before { color: var(--signal); opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 22px; }
.chips span { font: 500 12.5px var(--text); padding: 5px 10px; border-radius: 999px; background: var(--papier); border: 1px solid var(--line); color: var(--g600); }
.card-dark .chips span { background: #16181C; border-color: #2A2D33; color: #C9CCD0; }

/* the illustration panel */
.card-art { position: relative; height: 190px; border-radius: 16px; background-color: var(--papier); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center;
  background-image: radial-gradient(circle, rgba(11,12,14,.08) 1px, transparent 1.2px); background-size: 14px 14px; }
.card-dark .card-art { background-color: #131518; border-color: #24272C; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.2px); }
.card-art em, .card-art b, .card-art i { display: block; }

/* 01 site web: the page builds itself, the cursor clicks the button */
.art-browser { width: 76%; height: 138px; background: var(--blanc); border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 18px 30px -22px rgba(0,0,0,.35); overflow: hidden; transition: transform .5s; }
.card:hover .art-browser { transform: translateY(-4px) rotate(-1.5deg); }
.ab-bar { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.ab-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--brume); }
.ab-bar span { margin: 0 auto; font: 400 8px var(--mono); color: var(--g500); background: var(--papier); padding: 1px 8px; border-radius: 99px; }
.ab-body { position: relative; padding: 10px 12px; display: grid; gap: 6px; justify-items: start; }
.ab-title { width: 62%; height: 9px; border-radius: 5px; background: var(--encre); animation: build 6s infinite both; }
.ab-line { width: 82%; height: 5px; border-radius: 3px; background: var(--brume); animation: build 6s .25s infinite both; }
.ab-line.short { width: 56%; animation-delay: .45s; }
.ab-btn { font: 600 7.5px var(--display); background: var(--encre); color: var(--blanc); padding: 4px 9px; border-radius: 99px; animation: build 6s .65s infinite both, press 6s infinite; }
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; margin-top: 2px; }
.ab-cards i { height: 22px; border-radius: 5px; background: var(--papier); border: 1px solid var(--line); animation: build 6s infinite both; }
.ab-cards i:nth-child(1) { animation-delay: .85s; } .ab-cards i:nth-child(2) { animation-delay: 1s; } .ab-cards i:nth-child(3) { animation-delay: 1.15s; }
.ab-cursor { position: absolute; width: 14px; height: 14px; left: 72%; top: 78%; fill: var(--encre); stroke: var(--blanc); stroke-width: 1.5; animation: cursor 6s infinite; }
@keyframes build { 0% { opacity: 0; transform: translateY(6px); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes cursor { 0%, 25% { left: 72%; top: 78%; } 40%, 48% { left: 18%; top: 50%; } 52% { left: 18%; top: 52%; } 60%, 100% { left: 72%; top: 78%; } }
@keyframes press { 0%, 47% { background: var(--encre); color: var(--blanc); } 50%, 56% { background: var(--signal); color: var(--encre); } 60%, 100% { background: var(--encre); color: var(--blanc); } }

/* 02 app mobile: a notification drops in, the list slides up */
.art-phone { width: 106px; height: 172px; margin-top: 34px; border-radius: 22px; border: 3px solid #2A2D33; background: #0F1114; padding: 26px 8px 8px; display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform .5s; }
.card:hover .art-phone { transform: translateY(-8px); }
.art-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 30px; height: 8px; border-radius: 6px; background: #000; transform: translateX(-50%); }
.ap-notif { position: absolute; left: -26px; right: -26px; top: 6px; display: flex; gap: 7px; align-items: center; background: var(--blanc); border-radius: 12px; padding: 7px 9px; box-shadow: 0 14px 24px -12px rgba(0,0,0,.6); animation: notif 5s infinite; z-index: 2; }
.ap-notif b { width: 18px; height: 18px; flex: none; border-radius: 6px; background: var(--signal); }
.ap-notif span, .ap-row span { flex: 1; display: grid; gap: 4px; }
.ap-notif em { height: 4px; border-radius: 2px; background: var(--encre); }
.ap-notif em.short, .ap-row em.short { width: 60%; opacity: .5; }
.ap-row { display: flex; gap: 6px; align-items: center; background: #1A1D22; border-radius: 8px; padding: 6px; animation: rowin 5s infinite both; }
.ap-row i { width: 16px; height: 16px; border-radius: 5px; background: #2E3238; flex: none; }
.ap-row:nth-of-type(2) { animation-delay: .15s; } .ap-row:nth-of-type(3) { animation-delay: .3s; } .ap-row:nth-of-type(4) { animation-delay: .45s; }
.ap-row:nth-of-type(2) i { background: var(--signal); }
.ap-row em { height: 3px; border-radius: 2px; background: #5B6068; }
.ap-tab { margin-top: auto; display: flex; justify-content: space-around; padding-top: 4px; }
.ap-tab i { width: 12px; height: 4px; border-radius: 2px; background: #3A3E45; }
.ap-tab i:first-child { background: var(--signal); }
@keyframes notif { 0%, 10% { transform: translateY(-80px); opacity: 0; } 18%, 62% { transform: none; opacity: 1; } 72%, 100% { transform: translateY(-80px); opacity: 0; } }
@keyframes rowin { 0% { opacity: 0; transform: translateY(10px); } 10%, 100% { opacity: 1; transform: none; } }

/* 03 logiciel: the dashboard bars grow */
.art-desk { width: 82%; height: 138px; display: flex; background: var(--blanc); border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 18px 30px -22px rgba(0,0,0,.35); overflow: hidden; transition: transform .5s; }
.card:hover .art-desk { transform: translateY(-4px) rotate(1.5deg); }
.ad-side { width: 26px; background: var(--encre); padding: 10px 6px; display: grid; gap: 7px; align-content: start; }
.ad-side i { height: 4px; border-radius: 2px; background: #3A3E45; }
.ad-side i:first-child { background: var(--signal); }
.ad-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ad-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ad-kpis span { background: var(--papier); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; display: grid; }
.ad-kpis b { font: 700 11px var(--display); color: var(--encre); font-variant-numeric: tabular-nums; }
.ad-kpis em { font: 400 7px var(--mono); color: var(--g500); font-style: normal; }
.ad-chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--line); }
.ad-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--brume); transform-origin: bottom; animation: grow 5s infinite both; }
.ad-chart i:last-child { background: var(--signal); }
.ad-chart i:nth-child(2) { animation-delay: .1s; } .ad-chart i:nth-child(3) { animation-delay: .2s; } .ad-chart i:nth-child(4) { animation-delay: .3s; } .ad-chart i:nth-child(5) { animation-delay: .4s; } .ad-chart i:nth-child(6) { animation-delay: .5s; }
@keyframes grow { 0% { transform: scaleY(.1); } 14%, 84% { transform: scaleY(1); } 96%, 100% { transform: scaleY(.1); } }

/* process: step cards on a track, lime progress fills 01 -> 04 when the section is reached, one animation per step */
.process { background: #FAF9F6; }
.flow { position: relative; }
.flow-track { position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; background: var(--line); border-radius: 2px; }
.flow-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--signal); border-radius: 2px; transition: transform 2.4s cubic-bezier(.4,.1,.2,1) .2s; }
.flow.run .flow-fill { transform: scaleX(1); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; }
.step-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono);
  background: var(--blanc); color: var(--g500); border: 2px solid var(--line); margin-bottom: 18px; transition: background .4s, color .4s, border-color .4s, transform .4s; }
.flow.run .step-dot { background: var(--encre); color: var(--signal); border-color: var(--encre); }
.flow.run .step:nth-child(1) .step-dot { transition-delay: .2s; }
.flow.run .step:nth-child(2) .step-dot { transition-delay: .95s; }
.flow.run .step:nth-child(3) .step-dot { transition-delay: 1.7s; }
.flow.run .step:nth-child(4) .step-dot { transition-delay: 2.45s; background: var(--signal); color: var(--encre); border-color: var(--signal); }
.step-art, .step-body { width: 100%; }
.step-art { height: 150px; border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; display: grid; place-items: center; overflow: hidden; position: relative;
  background-color: var(--blanc); background-image: radial-gradient(circle, rgba(11,12,14,.07) 1px, transparent 1.2px); background-size: 14px 14px; }
.step-last .step-art { background-color: var(--encre); border-color: var(--encre); background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.2px); }
.step-body { flex: 1; padding: 18px 20px 22px; border: 1px solid var(--line); border-radius: 0 0 20px 20px; background: var(--blanc); }
.step, .step-art, .step-body { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.step:hover { transform: translateY(-6px); }
.step:hover .step-body { box-shadow: 0 30px 50px -36px rgba(11,12,14,.45); }
.step:hover .step-dot { transform: scale(1.1); }
.step-meta { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px var(--mono); color: var(--g500); }
.step-meta span:last-child { background: var(--papier); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.step h3 { margin: 12px 0 8px; font-size: 20px; }
.step p { color: var(--g600); font-size: 15px; }
.step-art i, .step-art em, .step-art b { display: block; }

/* 01 call: phone rings, waves pulse, a "..." bubble types */
.art-call { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; }
.art-call svg { width: 28px; height: 28px; fill: var(--encre); animation: shake 2.4s ease-in-out infinite; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--signal); animation: ring 2.4s ease-out infinite; }
.ring.r2 { animation-delay: .8s; }
.bubble { position: absolute; left: 50px; top: -26px; display: flex; gap: 4px; padding: 8px 10px; background: var(--encre); border-radius: 12px 12px 12px 3px; }
.bubble i { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); animation: dots 1.2s ease-in-out infinite; }
.bubble i:nth-child(2) { animation-delay: .15s; } .bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes shake { 0%, 60%, 100% { transform: rotate(0); } 65%, 75%, 85% { transform: rotate(-14deg); } 70%, 80% { transform: rotate(14deg); } }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* 02 wireframe: blocks are sketched one after another, the pen moves along */
.art-wire { position: relative; width: 70%; height: 104px; border: 1.5px dashed #BFC3BA; border-radius: 10px; padding: 10px; display: grid; gap: 7px; align-content: start; }
.art-wire b { width: 50%; height: 7px; border-radius: 4px; background: var(--encre); animation: sketch 4.5s infinite both; }
.w-hero { display: block; height: 30px; border-radius: 6px; border: 1.5px dashed #9EA39A; animation: sketch 4.5s .4s infinite both; }
.w-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.w-row i { height: 22px; border-radius: 5px; border: 1.5px dashed #9EA39A; animation: sketch 4.5s infinite both; }
.w-row i:nth-child(1) { animation-delay: .8s; } .w-row i:nth-child(2) { animation-delay: 1s; } .w-row i:nth-child(3) { animation-delay: 1.2s; background: rgba(198,241,53,.35); border-color: #9EBF2A; }
.w-pen { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; background: var(--encre); animation: pen 4.5s ease-in-out infinite; }
@keyframes sketch { 0% { opacity: 0; transform: scale(.9); } 10%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes pen { 0% { left: 10px; top: 12px; } 15% { left: 60%; top: 12px; } 30% { left: 85%; top: 34px; } 50% { left: 20%; top: 66px; } 65% { left: 82%; top: 70px; } 85%, 100% { left: 10px; top: 12px; } }

/* 03 code: lines type in, a lime "test" badge confirms */
.art-code { width: 78%; height: 108px; background: var(--encre); border-radius: 10px; overflow: hidden; position: relative; }
.c-bar { display: flex; gap: 4px; padding: 7px 8px; border-bottom: 1px solid #24272C; }
.c-bar i { width: 6px; height: 6px; border-radius: 50%; background: #3A3E45; }
.c-lines { padding: 9px 10px; display: grid; gap: 6px; }
.c-lines em { height: 5px; border-radius: 3px; background: #4A4E55; width: 0; animation: type 5s infinite; }
.c-lines em.l { background: var(--signal); }
.c-lines em:nth-child(2) { animation-delay: .3s; } .c-lines em:nth-child(3) { animation-delay: .6s; } .c-lines em:nth-child(4) { animation-delay: .9s; } .c-lines em:nth-child(5) { animation-delay: 1.2s; } .c-lines em:nth-child(6) { animation-delay: 1.5s; }
.c-ok { position: absolute; right: 8px; bottom: 8px; font: 600 9px var(--mono); color: var(--encre); background: var(--signal); padding: 3px 7px; border-radius: 99px; animation: ok 5s infinite; }
@keyframes type { 0% { width: 0; } 12%, 88% { width: var(--w); } 100% { width: 0; } }
@keyframes ok { 0%, 40% { opacity: 0; transform: scale(.6); } 48%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 04 launch: the rocket from the brand lifts off, stars drift past */
.art-launch { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.art-launch svg { width: 38px; height: 60px; fill: var(--papier); stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; animation: lift 3s ease-in-out infinite; position: relative; z-index: 1; }
.art-launch svg circle { fill: var(--signal); }
.l-trail { position: absolute; left: 50%; top: calc(50% + 22px); width: 10px; height: 60px; transform: translateX(-50%); border-radius: 6px; background: linear-gradient(var(--signal), rgba(198,241,53,0)); animation: trail 3s ease-in-out infinite; }
.l-stars { position: absolute; inset: 0; }
.l-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; opacity: .6; animation: star 2s linear infinite; }
.l-stars i:nth-child(1) { left: 22%; } .l-stars i:nth-child(2) { left: 74%; animation-delay: .7s; } .l-stars i:nth-child(3) { left: 36%; animation-delay: 1.3s; }
@keyframes lift { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
@keyframes trail { 0%, 100% { height: 40px; opacity: .8; transform: translate(-50%, 6px); } 50% { height: 58px; opacity: 1; transform: translate(-50%, -8px); } }
@keyframes star { from { top: -6px; } to { top: 100%; } }

/* projects: bento grid, device mockups with self-scrolling screens, filter tabs */
.proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 360px; gap: 20px; }
.proj { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; background: var(--blanc); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, opacity .35s, filter .35s; }
.proj:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(11,12,14,.45); }
.proj-lg { grid-column: span 2; }
.proj-tall { grid-row: span 2; }
.proj-media { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; margin: 12px 12px 0; border-radius: 16px;
  background-color: var(--papier); background-image: radial-gradient(circle, rgba(11,12,14,.08) 1px, transparent 1.2px); background-size: 14px 14px; }
.proj-media > * { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.proj:hover .proj-media > * { transform: translateY(-6px) scale(1.03); }
.proj-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 18px; }
.proj-info h3 { font-size: 20px; margin-top: 6px; }
.proj-info p { font-size: 14px; color: var(--g500); margin-top: 2px; }
.tag { font: 500 11.5px var(--mono); padding: 4px 10px; border-radius: 999px; background: var(--papier); border: 1px solid var(--line); color: var(--g600); }
.proj-link { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); text-decoration: none; color: var(--encre); font-size: 17px; transition: transform .35s, background .35s, border-color .35s; }
.proj:hover .proj-link { transform: rotate(-45deg); background: var(--signal); border-color: var(--signal); }

/* placeholder page that scrolls inside every screen */
.scroll-page { display: grid; gap: 8px; padding: 10px; animation: scrollpage 11s ease-in-out infinite; }
.proj:hover .scroll-page { animation-duration: 5s; }
.scroll-page em, .scroll-page b, .scroll-page i, .scroll-page span { display: block; }
.sp-hero { display: grid; gap: 6px; padding: 14px 12px; border-radius: 8px; background: var(--encre); }
.sp-hero b { width: 64%; height: 10px; border-radius: 5px; background: var(--blanc); }
.sp-hero em { width: 82%; height: 5px; border-radius: 3px; background: #4A4E55; }
.sp-hero em.s { width: 50%; }
.sp-hero span { width: 34%; height: 14px; border-radius: 99px; background: var(--signal); margin-top: 4px; }
.sp-row { display: grid; grid-auto-flow: column; gap: 6px; }
.sp-row i { height: 34px; border-radius: 6px; background: var(--papier); border: 1px solid var(--line); }
.sp-img { height: 70px; border-radius: 8px; background: linear-gradient(135deg, #E4E6E1, #F3F4F1); }
.sp-img.lime { background: linear-gradient(135deg, #DDF59A, #F1FBD2); }
.sp-text { display: grid; gap: 5px; padding: 2px 4px; }
.sp-text em { height: 5px; border-radius: 3px; background: var(--brume); }
.sp-text em.s { width: 60%; }
@keyframes scrollpage { 0%, 12% { transform: translateY(0); } 50%, 62% { transform: translateY(calc(-100% + var(--view, 140px))); } 100% { transform: translateY(0); } }

.mock-browser { width: 86%; height: 82%; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 40px -28px rgba(0,0,0,.4); overflow: hidden; }
.mb-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.mb-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--brume); }
.mb-bar span { margin: 0 auto; font: 400 10px var(--mono); color: var(--g500); background: var(--papier); padding: 2px 12px; border-radius: 99px; }
.mb-screen { flex: 1; overflow: hidden; --view: 220px; }
.mb-screen .scroll-page { grid-template-columns: 1fr; }

.mock-phone { width: 190px; height: 400px; border-radius: 30px; border: 5px solid var(--encre); background: var(--encre); box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); overflow: hidden; position: relative; }
.mock-phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 12px; border-radius: 8px; background: #000; transform: translateX(-50%); z-index: 2; }
.mp-screen { position: absolute; inset: 0; border-radius: 25px; background: var(--blanc); overflow: hidden; padding-top: 22px; --view: 370px; }

.mock-app { width: 86%; height: 78%; display: flex; background: var(--blanc); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 40px -28px rgba(0,0,0,.4); overflow: hidden; }
.ma-side { width: 34px; background: var(--encre); padding: 12px 8px; display: grid; gap: 8px; align-content: start; }
.ma-side i { display: block; height: 5px; border-radius: 3px; background: #3A3E45; }
.ma-side i:first-child { background: var(--signal); }
.ma-main { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 8px; min-width: 0; }
.ma-head { display: flex; justify-content: space-between; align-items: center; }
.ma-head b { display: block; width: 40%; height: 8px; border-radius: 4px; background: var(--encre); }
.ma-head span { display: block; width: 22%; height: 14px; border-radius: 99px; background: var(--signal); }
.ma-rows { flex: 1; overflow: hidden; border-top: 1px solid var(--line); }
.ma-track { display: grid; animation: rows 6s linear infinite; }
.ma-track i { display: block; height: 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent 4%, var(--brume) 4%, var(--brume) 30%, transparent 30%, transparent 40%, #E9EBE6 40%, #E9EBE6 62%, transparent 62%, transparent 76%, #E9EBE6 76%, #E9EBE6 92%, transparent 92%) center / 100% 5px no-repeat; }
.ma-track i:nth-child(3n) { background-image: linear-gradient(90deg, transparent 4%, var(--brume) 4%, var(--brume) 30%, transparent 30%, transparent 40%, #E9EBE6 40%, #E9EBE6 62%, transparent 62%, transparent 76%, var(--signal) 76%, var(--signal) 92%, transparent 92%); }
@keyframes rows { to { transform: translateY(-50%); } }

/* projects: realistic example screens (fictional businesses) */
.rx-web { gap: 0; padding: 0; font-family: var(--text); color: #1F2A30; }
.rw-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 8px; color: #58636A; border-bottom: 1px solid #EEE; }
.rw-nav b { font: 700 10px var(--display); color: #0E3A4E; margin-right: auto; }
.rw-hero { height: 120px; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(120deg, rgba(14,58,78,.92), rgba(14,58,78,.35)), radial-gradient(circle at 84% 34%, rgba(242,194,123,.9) 0 7%, transparent 7.5%), repeating-linear-gradient(170deg, transparent 0 14px, rgba(255,255,255,.06) 14px 16px), linear-gradient(160deg, #2D6E86, #0E3A4E); color: #fff; }
.rw-hero small { display: block; font-size: 7.5px; opacity: .8; }
.rw-hero strong { display: block; font: 700 17px/1.05 var(--display); margin: 3px 0 7px; }
.rw-hero em { font-style: normal; font-size: 8px; font-weight: 600; background: #F2C27B; color: #0E3A4E; padding: 4px 9px; border-radius: 99px; }
.rw-title { font: 700 11px var(--display); padding: 12px 12px 6px; color: #0E3A4E; }
.rw-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; }
.rw-menu div { border: 1px solid #ECEFF0; border-radius: 8px; padding: 6px; display: grid; gap: 3px; }
.rw-menu i { height: 44px; border-radius: 6px; }
.rw-menu .f1 { background: linear-gradient(135deg, #F4D6A8, #D98F4B); } .rw-menu .f2 { background: linear-gradient(135deg, #FBC9B0, #E2674A); } .rw-menu .f3 { background: linear-gradient(135deg, #F7E3A1, #D9A62B); }
.rw-menu b { font: 600 8px var(--display); } .rw-menu span { font-size: 7.5px; color: #2D6E86; font-weight: 600; }
.rw-book { margin: 12px; padding: 10px; border-radius: 8px; background: #F3F7F8; display: grid; gap: 3px; font-size: 7.5px; color: #58636A; }
.rw-book b { font: 700 9px var(--display); color: #0E3A4E; } .rw-book em { font-style: normal; width: fit-content; margin-top: 3px; font-weight: 600; color: #fff; background: #0E3A4E; padding: 3px 9px; border-radius: 99px; }
.rw-map { margin: 0 12px 12px; height: 70px; border-radius: 8px; position: relative; background: repeating-linear-gradient(90deg, #E7EEF0 0 22px, #DFE8EA 22px 24px), #E7EEF0; display: flex; align-items: flex-end; padding: 6px; font-size: 7.5px; color: #0E3A4E; font-weight: 600; }
.rw-map i { position: absolute; left: 48%; top: 22%; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #E2674A; }

.rx-app { gap: 9px; padding: 8px 10px 14px; font-family: var(--text); color: #1B1B1F; }
.ra-top { display: flex; justify-content: space-between; font-size: 7px; font-weight: 600; color: #555; }
.ra-hi small { display: block; font-size: 8px; color: #777; } .ra-hi b { font: 700 13px var(--display); }
.ra-search { font-size: 8px; color: #999; background: #F2F2F4; border-radius: 9px; padding: 7px 9px; }
.ra-cats { display: flex; gap: 5px; } .ra-cats span { font-size: 7.5px; padding: 3px 8px; border-radius: 99px; background: #F2F2F4; }
.ra-cats .on { background: #FF5A36; color: #fff; }
.ra-card { display: flex; gap: 7px; align-items: center; } .ra-card i { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.ra-card .p1 { background: radial-gradient(circle at 40% 40%, #F6C342 0 30%, #D9452B 31% 60%, #F2D7A0 61%); } .ra-card .p2 { background: linear-gradient(135deg, #8B4A2B, #D98F4B); } .ra-card .p3 { background: linear-gradient(135deg, #F7C6D9, #E8869F); }
.ra-card b { display: block; font: 600 9px var(--display); } .ra-card span { font-size: 7px; color: #777; }
.ra-track { border-radius: 10px; background: #1B1B1F; color: #fff; padding: 9px; display: grid; gap: 3px; }
.ra-track b { font: 600 9px var(--display); } .ra-track span { font-size: 7px; color: #BBB; }
.ra-bar { height: 4px; border-radius: 2px; background: #3A3A40; overflow: hidden; } .ra-bar i { width: 65%; height: 100%; background: #FF5A36; animation: deliver 4s ease-in-out infinite; }
@keyframes deliver { 0% { width: 40%; } 100% { width: 90%; } }

.rx-desk .ma-side { width: 38px; padding: 10px 8px; } .rx-desk .ma-side b { color: var(--signal); font: 700 10px var(--display); margin-bottom: 4px; }
.rx-desk .ma-side i.on { background: var(--signal); }
.rd-head { display: flex; justify-content: space-between; align-items: center; } .rd-head b { font: 700 9.5px var(--display); }
.rd-head span { font-size: 7.5px; font-weight: 600; background: var(--encre); color: #fff; padding: 3px 8px; border-radius: 99px; }
.rd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .rd-kpis div { border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
.rd-kpis small { display: block; font-size: 6.5px; color: var(--g500); } .rd-kpis b { font: 700 10px var(--display); font-variant-numeric: tabular-nums; }
.rd-kpis .warn b { color: #C2410C; }
.rd-th, .rd-row { display: grid; grid-template-columns: 1.6fr .6fr .8fr; gap: 6px; align-items: center; font-size: 7.5px; }
.rd-th { color: var(--g500); font-weight: 600; padding: 0 2px 3px; }
.rd-row { height: 21px; padding: 0 2px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.st { width: fit-content; font-size: 6.5px; font-weight: 600; padding: 2px 6px; border-radius: 99px; }
.st.ok { background: #E6F6DB; color: #3E6B0E; } .st.low { background: #FFF1D6; color: #9A5B00; } .st.out { background: #FDE2DC; color: #B42318; }
.ma-track.rd-rows { display: block; }

/* call-to-action card */
.proj-cta { justify-content: center; align-items: flex-start; padding: 28px; border: 1.5px dashed #C9CDC2; background: transparent; }
.proj-cta:hover { border-color: var(--encre); background: var(--blanc); }
.cta-plus { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--signal); margin-bottom: 18px; transition: transform .5s; }
.cta-plus i { position: absolute; left: 50%; top: 50%; width: 20px; height: 2.5px; border-radius: 2px; background: var(--encre); transform: translate(-50%, -50%); }
.cta-plus i + i { transform: translate(-50%, -50%) rotate(90deg); }
.proj-cta:hover .cta-plus { transform: rotate(90deg); }
.proj-cta h3 { font-size: 24px; }
.proj-cta p { color: var(--g500); margin-top: 6px; font-size: 15px; }
.cta-go { margin-top: 18px; font: 600 15px var(--display); border-bottom: 2px solid var(--signal); padding-bottom: 2px; }

/* why: six cards, one looping line icon each, lime spotlight follows the pointer (shared with .card) */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card { --mx: 50%; --my: 0%; position: relative; overflow: hidden; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--blanc);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.why-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(198,241,53,.22), transparent 70%); }
.why-card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(11,12,14,.45); border-color: #C9CDC2; }
.why-card:hover::before { opacity: 1; }
.why-card > * { position: relative; }
.why-card-dark { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.why-card-dark::before { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(198,241,53,.16), transparent 70%); }
.why-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.why-num { font: 500 12px var(--mono); color: var(--g500); letter-spacing: .08em; }
.why-card-dark .why-num { color: var(--g400); }
.why-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--papier); border: 1px solid var(--line); transition: transform .4s, background .4s; }
.why-card-dark .why-ico { background: var(--signal); border-color: var(--signal); }
.why-card:hover .why-ico { transform: rotate(-6deg) scale(1.06); background: var(--signal); border-color: var(--signal); }
.why-card h3 { font-size: 21px; line-height: 1.2; }
.why-card p { margin-top: 10px; color: var(--g600); font-size: 15.5px; }
.why-card-dark p { color: #C9CCD0; }
.why-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* 01 idea: bulb lights up */
.i-spark { animation: spark 2.6s ease-in-out infinite; }
.i-bulb { animation: bulb 2.6s ease-in-out infinite; }
@keyframes spark { 0%, 40%, 100% { opacity: 0; } 55%, 80% { opacity: 1; } }
@keyframes bulb { 0%, 40%, 100% { fill: transparent; } 55%, 80% { fill: #FFFFFF; } }
/* 02 devices: laptop, phone and screen take turns */
.i-dev { position: relative; width: 38px; height: 30px; }
.i-dev span { position: absolute; border: 2.6px solid var(--encre); border-radius: 4px; animation: devhi 3.6s infinite; }
.i-dev .d1 { left: 0; top: 2px; width: 26px; height: 18px; }
.i-dev .d2 { right: 0; top: 8px; width: 12px; height: 20px; border-radius: 3px; animation-delay: 1.2s; background: var(--papier); }
.i-dev .d3 { left: 4px; bottom: 0; width: 18px; height: 4px; border-radius: 2px; animation-delay: 2.4s; }
@keyframes devhi { 0%, 30% { background-color: var(--signal); } 34%, 100% { background-color: transparent; } }
.why-card:hover .i-dev .d2 { background-color: var(--signal); }
/* 03 chat: typing dots, reply pops */
.i-chat { position: relative; width: 38px; height: 32px; }
.i-chat .b1 { position: absolute; left: 0; top: 0; display: flex; gap: 3px; align-items: center; padding: 6px 7px; border: 2.6px solid var(--encre); border-radius: 10px 10px 10px 3px; background: var(--blanc); }
.i-chat .b1 i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--encre); animation: dots 1.2s ease-in-out infinite; }
.i-chat .b1 i:nth-child(2) { animation-delay: .15s; } .i-chat .b1 i:nth-child(3) { animation-delay: .3s; }
.i-chat .b2 { position: absolute; right: 0; bottom: 0; width: 18px; height: 11px; border-radius: 8px 8px 3px 8px; background: var(--encre); animation: reply 2.4s ease-in-out infinite; }
@keyframes reply { 0%, 45% { transform: scale(0); } 55%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
/* 04 planning: the check is drawn on the calendar */
.i-check { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw 2.8s ease-in-out infinite; }
@keyframes draw { 0%, 20% { stroke-dashoffset: 26; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }
/* 05 nearby: the pin bounces, a ripple spreads on the ground */
.i-pin { position: relative; width: 36px; height: 40px; display: grid; place-items: center; }
.i-pin svg { animation: bounce 2s ease-in-out infinite; }
.i-pin .wave { position: absolute; bottom: 0; left: 50%; width: 22px; height: 7px; border: 2px solid var(--encre); border-radius: 50%; transform: translateX(-50%); animation: ripple 2s ease-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes ripple { 0% { transform: translateX(-50%) scale(.6); opacity: 1; } 100% { transform: translateX(-50%) scale(1.6); opacity: 0; } }
/* 06 support: the loop turns around a beating heart */
.i-loop { transform-origin: 24px 24px; animation: spin 6s linear infinite; }
.i-heart { fill: var(--signal); transform-origin: 24px 26px; animation: beat 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(1); } }

/* offer band */
.offer { padding-block: 0; }
.offer-in { background: var(--noir); color: var(--blanc); border-radius: 28px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; position: relative; overflow: hidden; }
.offer-in > div p:last-child { color: var(--g400); max-width: 52ch; margin-top: 18px; }

/* faq */
.faq-in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; }
.qa { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font: 600 18px var(--display); letter-spacing: -.01em; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px var(--text); color: var(--g500); transition: transform .2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--g600); padding: 0 40px 24px 0; }

/* contact (form fields, also used on contact.html) */
.form { background: var(--blanc); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 36px); display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font: 600 14px var(--display); }
input, select, textarea { font: inherit; font-size: 16px; color: var(--noir); background: var(--blanc); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(198,241,53,.55); }
textarea { resize: vertical; min-height: 110px; }
.form-msg { font-size: 14px; color: var(--g600); min-height: 1.4em; }
.form-msg.err { color: #B91C1C; }

/* reveal on scroll: content is visible by default, only nudged in when JS is on */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-in, .about-in, .faq-in, .contact-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { max-width: 560px; margin-top: 90px; }
  .sticker { right: 0; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .flow-track { display: none; }
  .proj-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .proj-lg { grid-column: 1 / -1; }
  .offer-in { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .burger { display: block; }
  .links { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blanc); border-bottom: 1px solid var(--line); padding: 8px 20px 20px; display: none; }
  .links.open { display: flex; }
  .links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .links .btn { margin-top: 16px; }
}
@media (max-width: 560px) {
  .steps, .proj-grid, .why-grid { grid-template-columns: 1fr; }
  .proj-lg, .proj-tall { grid-column: auto; grid-row: auto; }
  .proj-grid { grid-auto-rows: auto; }
  .proj { min-height: 380px; }
  .proj-tall { min-height: 540px; }
  .stats li { padding-inline: 12px; }
  .stats li > span { font-size: 12px; }
  .sticker { display: none; }
  .cta-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
  .stats::before { animation: none; }
  .card-art *, .card-art *::before, .scroll-page, .ma-track, .step-art *, .why-ico * { animation: none !important; opacity: 1 !important; }
  .i-check { stroke-dashoffset: 0; }
  .c-lines em { width: var(--w); }
  .flow-fill { transition: none; }
  .fikra-think, .fikra-point, .fikra-q, .fikra-spark { animation: none; }
  .fikra-think { opacity: 0; }
  .fikra-point { opacity: 1; }
}

/* service pages (site-web.html, app-mobile.html, logiciel-desktop.html) */
.svc-hero-wrap { padding-block: 28px 40px; }
.crumbs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; font-size: 14px; color: var(--g500); }
.crumbs a { color: var(--g600); }
.crumbs nav a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--encre); font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 14px var(--display); color: var(--encre) !important; border: 1px solid var(--line); background: var(--blanc); padding: 8px 16px 8px 8px; border-radius: 999px; transition: border-color .2s; }
.back span { width: 26px; height: 26px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; }
.back:hover { border-color: var(--encre); }
.svc-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--blanc); border: 1px solid var(--line);
  background-image: radial-gradient(circle, rgba(11,12,14,.06) 1px, transparent 1.2px); background-size: 16px 16px; }
.svc-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(198,241,53,.35), rgba(198,241,53,0) 70%); pointer-events: none; }
.svc-hero > * { position: relative; z-index: 1; }
.svc-hero-ico { width: 120px; height: 120px; border-radius: 28px; background: var(--signal); display: grid; place-items: center; animation: float 5s ease-in-out infinite; }
.svc-hero-ico svg { width: 58px; height: 58px; fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
.svc-hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.svc-hero .lead { margin-top: 16px; }
.svc-what { padding-block: 40px; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); column-gap: 40px; }
.svc-item { position: relative; padding: 24px 0 24px 22px; border-bottom: 1px solid var(--line); }
.svc-item::before { content: ""; position: absolute; left: 0; top: 33px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(198,241,53,.25); }
.svc-item h3 { font-size: 19px; }
.svc-item p { color: var(--g600); font-size: 15px; margin-top: 6px; max-width: 46ch; }
.svc-ex { padding-block: 40px 80px; }
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ex-card { border: 1px solid var(--line); border-radius: 22px; background: var(--blanc); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ex-card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(11,12,14,.45); }
.ex-art { height: 190px; display: grid; place-items: center; background-color: var(--papier); border-bottom: 1px solid var(--line);
  background-image: radial-gradient(circle, rgba(11,12,14,.08) 1px, transparent 1.2px); background-size: 14px 14px; }
.ex-card:nth-child(2) .ex-art { background-color: #F1F7DC; }
.ex-info { padding: 18px 20px 22px; }
.ex-tags { display: flex; gap: 6px; }
.tag-dash { background: transparent; border-style: dashed; }
.ex-info h3 { font-size: 19px; margin-top: 12px; }
.ex-info p { color: var(--g600); font-size: 14.5px; margin-top: 6px; }
.svc-others { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.svc-link { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--blanc); text-decoration: none; transition: transform .3s, border-color .3s; }
.svc-link b { font: 600 17px var(--display); flex: 1; }
.svc-link span { transition: transform .3s; }
.svc-link:hover { border-color: var(--encre); transform: translateY(-3px); }
.svc-link:hover span { transform: translateX(4px); }
.ico-sm { width: 26px; height: 26px; fill: none; stroke: var(--encre); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.svc-final { padding-block: 0 96px; }
.svc-final-in { text-align: center; background: var(--encre); color: var(--blanc); border-radius: 28px; padding: clamp(40px, 6vw, 72px) 24px; }
.svc-final-in p { color: var(--g400); margin: 14px auto 26px; max-width: 46ch; }

/* featured real project on a service page: wide card, browser cycling through the real screens */
.ex-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.ex-feature .ex-art { height: auto; min-height: 360px; border-bottom: 0; border-right: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; background-color: #FFF4E8; }
.ex-feature .ex-info { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.ex-feature h3 { font-size: 30px; }
.ex-feature p { font-size: 15.5px; }
.tag-real { background: var(--encre); border-color: var(--encre); color: var(--signal); }
.sc-browser { width: 100%; border-radius: 12px; overflow: hidden; background: var(--blanc); border: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(80,40,0,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ex-feature:hover .sc-browser { transform: translateY(-4px); }
.sc-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sc-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--brume); }
.sc-bar span { margin: 0 auto; font: 400 11px var(--mono); color: var(--g500); background: var(--papier); padding: 2px 12px; border-radius: 99px; }
.sc-screens { position: relative; aspect-ratio: 1200 / 564; }
.sc-shot { position: absolute; inset: 0; opacity: 0; animation: shots calc(var(--n, 4) * 4s) infinite; animation-delay: calc(var(--i, 0) * 4s); }
.sc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sc-tabs span { font: 500 12px var(--text); padding: 5px 12px; border-radius: 99px; background: var(--blanc); border: 1px solid var(--line); color: var(--g600); animation: tab calc(var(--n, 4) * 4s) infinite; animation-delay: calc(var(--i, 0) * 4s); }
/* the visible window is one slot of the cycle: 100% / n, written for 4 and 7 screens */
@keyframes shots { 0% { opacity: 0; transform: scale(1.02); } 3%, 25% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; } }
@keyframes tab { 0%, 1% { background: var(--blanc); color: var(--g600); border-color: var(--line); } 3%, 25% { background: var(--encre); color: var(--blanc); border-color: var(--encre); } 28%, 100% { background: var(--blanc); color: var(--g600); border-color: var(--line); } }
.sc-art[style*="--n:7"] .sc-shot { animation-name: shots7; }
.sc-art[style*="--n:7"] .sc-tabs span { animation-name: tab7; }
@keyframes shots7 { 0% { opacity: 0; transform: scale(1.02); } 2%, 14% { opacity: 1; transform: none; } 16%, 100% { opacity: 0; } }
@keyframes tab7 { 0%, 1% { background: var(--blanc); color: var(--g600); border-color: var(--line); } 2%, 14% { background: var(--encre); color: var(--blanc); border-color: var(--encre); } 16%, 100% { background: var(--blanc); color: var(--g600); border-color: var(--line); } }
/* mirrored, dark variant */
.ex-feature-rev { grid-template-columns: 1fr 1.35fr; }
.ex-feature-rev .ex-art { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.ex-card.ex-dark .ex-art { background-color: #07101F; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.2px); border-color: #07101F; }
.ex-dark .sc-browser { border-color: #1C2A40; background: #0B1424; box-shadow: 0 30px 60px -30px rgba(56,182,255,.35); }
.ex-dark .sc-bar { border-color: #1C2A40; } .ex-dark .sc-bar i { background: #2A3A52; } .ex-dark .sc-bar span { background: #12203A; color: #8EA3C0; }
.ex-card.ex-dark .sc-art .sc-tabs span { animation-name: tab7d; background: transparent; border-color: #22324A; color: #8EA3C0; }
@keyframes tab7d { 0%, 1% { background: transparent; color: #8EA3C0; border-color: #22324A; } 2%, 14% { background: #38B6FF; color: #07101F; border-color: #38B6FF; } 16%, 100% { background: transparent; color: #8EA3C0; border-color: #22324A; } }
.sc-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.sc-points li { position: relative; padding-left: 22px; font-size: 15px; color: var(--g600); }
.sc-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 5px; border-left: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(-45deg); }
@media (max-width: 960px) { .ex-feature, .ex-feature-rev { grid-template-columns: 1fr; } .ex-feature .ex-art { order: 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .sc-shot, .sc-tabs span { animation: none !important; } .sc-shot:first-child { opacity: 1; } }

.tag-concept { background: var(--signal); border-color: var(--signal); color: var(--encre); }
.ex-card.ex-sea .ex-art { background-color: #E6EEF5; }
.ex-card.ex-green .ex-art { background-color: #E8EFDF; }
.ex-demo { margin-top: 22px; width: fit-content; }

/* three-screen slideshow (AstroCardia) */
.sc-art[style*="--n:3"] .sc-shot { animation-name: shots3; }
.ex-card.ex-dark.ex-n3 .sc-art .sc-tabs span { animation-name: tab3d; }
@keyframes shots3 { 0% { opacity: 0; transform: scale(1.02); } 3%, 31% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; } }
@keyframes tab3d { 0%, 1% { background: transparent; color: #8EA3C0; border-color: #22324A; } 3%, 31% { background: #38B6FF; color: #07101F; border-color: #38B6FF; } 35%, 100% { background: transparent; color: #8EA3C0; border-color: #22324A; } }
.ex-n3 .sc-shot img { object-fit: contain; background: #0A0F1C; }

/* five-screen slideshow (CabinetManager) */
.ex-card.ex-mint .ex-art { background-color: #E3F1E6; }
.sc-art[style*="--n:5"] .sc-shot { animation-name: shots5; }
.sc-art[style*="--n:5"] .sc-tabs span { animation-name: tab5; }
@keyframes shots5 { 0% { opacity: 0; transform: scale(1.02); } 2%, 19% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; } }
@keyframes tab5 { 0%, 1% { background: var(--blanc); color: var(--g600); border-color: var(--line); } 2%, 19% { background: var(--encre); color: var(--blanc); border-color: var(--encre); } 22%, 100% { background: var(--blanc); color: var(--g600); border-color: var(--line); } }

/* phone frame for mobile app screens */
.ex-card.ex-rose .ex-art { background-color: #F7E9EC; }
.sc-phone { width: min(250px, 70%); margin: 0 auto; padding: 10px; border-radius: 38px; background: var(--encre); box-shadow: 0 30px 50px -28px rgba(80,20,40,.45); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ex-feature:hover .sc-phone { transform: translateY(-5px) rotate(-1deg); }
.sc-phone .sc-screens { aspect-ratio: 390 / 844; border-radius: 28px; overflow: hidden; background: #fff; }

.ex-card.ex-ember .ex-art { background-color: #1A1410; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.2px); border-color: #1A1410; }
.ex-card.ex-road .ex-art { background-color: #E6ECFB; }
.ex-ember .sc-art .sc-tabs span { animation-name: tab4d; background: transparent; border-color: #3A2E26; color: #C9B8AA; }
@keyframes tab4d { 0%, 1% { background: transparent; color: #C9B8AA; border-color: #3A2E26; } 3%, 25% { background: #FF6B2C; color: #1A0E08; border-color: #FF6B2C; } 28%, 100% { background: transparent; color: #C9B8AA; border-color: #3A2E26; } }
.sc-phone .sc-screens { aspect-ratio: 390 / 830; }

/* example illustrations */
.mx { background: var(--blanc); border: 1px solid var(--line); box-shadow: 0 18px 30px -22px rgba(0,0,0,.35); overflow: hidden; transition: transform .5s; }
.ex-card:hover .mx { transform: translateY(-5px) rotate(-1.5deg); }
.mx i, .mx b, .mx em, .mx span { display: block; }
.mx-web { width: 78%; height: 136px; border-radius: 10px; }
.mx-bar { display: flex; gap: 4px; padding: 7px 8px; background: var(--encre); }
.mx-bar i { width: 6px; height: 6px; border-radius: 50%; background: #4A4E55; }
.mx-phone { width: 92px; height: 164px; border-radius: 18px; border: 4px solid var(--encre); margin-top: 26px; }
.mx-desk { width: 82%; height: 130px; border-radius: 10px; display: flex; }
.mx-side { width: 22px; background: var(--encre); padding: 9px 5px; display: grid; gap: 6px; align-content: start; }
.mx-side i { height: 4px; border-radius: 2px; background: #3A3E45; }
.mx-side i:first-child { background: var(--signal); }
.mx-body { flex: 1; padding: 10px; display: grid; gap: 8px; align-content: start; }
.mx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.mx-lines { display: grid; gap: 5px; }
.mx-lines b { height: 7px; width: 80%; border-radius: 4px; background: var(--encre); }
.mx-lines em { height: 4px; border-radius: 2px; background: var(--brume); }
.mx-lines em.s { width: 60%; }
.mx-lines span { width: 46%; height: 11px; border-radius: 99px; background: var(--signal); margin-top: 3px; }
.mx-photo { height: 74px; border-radius: 7px; background: repeating-linear-gradient(135deg, #E6E8E3 0 8px, #F3F4F1 8px 16px); }
.mx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mx-grid3 i { height: 70px; border-radius: 6px; background: repeating-linear-gradient(135deg, #E6E8E3 0 8px, #F3F4F1 8px 16px); }
.mx-grid3 i.l { background: repeating-linear-gradient(135deg, #DDF59A 0 8px, #F1FBD2 8px 16px); }
.mx-keys i { height: 18px; }
.mx-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.mx-cal i { height: 12px; border-radius: 3px; background: #ECEEE9; }
.mx-cal i.l { background: var(--signal); animation: blink 2.4s ease-in-out infinite; }
.mx-map { height: 70px; border-radius: 8px; background: #EEF0EB; position: relative; overflow: hidden; }
.mx-map .route { position: absolute; left: 12%; right: 20%; top: 50%; height: 0; border-top: 3px dashed var(--encre); }
.mx-map .pin { position: absolute; right: 14%; top: 34%; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(198,241,53,.35); animation: blink 2.4s ease-in-out infinite; }
.mx-card { border-radius: 8px; background: var(--encre); padding: 8px; display: grid; gap: 5px; }
.mx-card b { height: 6px; width: 60%; border-radius: 3px; background: var(--signal); }
.mx-card em { height: 4px; width: 80%; border-radius: 2px; background: #4A4E55; }
.mx-list { display: grid; gap: 5px; }
.mx-list i { height: 14px; border-radius: 5px; background: #ECEEE9; }
.mx-list i.l { background: #E4F7A8; }
.mx-table { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mx-table i { height: 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent 3%, var(--brume) 3%, var(--brume) 34%, transparent 34%, transparent 46%, #ECEEE9 46%, #ECEEE9 70%, transparent 70%) center / 100% 4px no-repeat; }
.mx-table i.l { background-image: linear-gradient(90deg, transparent 3%, var(--brume) 3%, var(--brume) 34%, transparent 34%, transparent 46%, #ECEEE9 46%, #ECEEE9 70%, transparent 70%, transparent 80%, var(--signal) 80%, var(--signal) 96%, transparent 96%); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* service cards on the home page are links now */
a.proj { cursor: pointer; }
a.proj:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

@media (max-width: 960px) {
  .svc-hero { grid-template-columns: 1fr; gap: 24px; }
  .svc-hero-ico { width: 88px; height: 88px; border-radius: 22px; }
  .ex-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svc-list, .ex-grid, .svc-others { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero-ico, .mx-cal i.l, .mx-map .pin { animation: none; }
}

/* contact page */
.ct { padding-block: 28px 96px; }
.ct-head { position: relative; margin-bottom: 40px; }
.ct-head h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.ct-head .lead { margin-top: 16px; }
.ct-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 500 13px var(--mono); padding: 8px 14px; border-radius: 999px; background: var(--encre); color: var(--blanc); }
.ct-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(198,241,53,.7); animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(198,241,53,.7); } 100% { box-shadow: 0 0 0 10px rgba(198,241,53,0); } }
.ct-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.ct-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--blanc);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.cc:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(11,12,14,.45); border-color: #C9CDC2; }
.cc-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.cc-wide .cc-txt { flex: 1; }
.cc-txt { display: grid; gap: 4px; }
.cc-txt span { font: 500 12px var(--mono); color: var(--g500); letter-spacing: .06em; text-transform: uppercase; }
.cc-txt b { font: 600 16px var(--display); overflow-wrap: break-word; }
.cc-act { align-self: flex-start; font: 600 13.5px var(--display); text-decoration: none; color: var(--encre); padding: 7px 14px; border-radius: 999px; background: var(--signal); transition: transform .25s; }
.cc-act:hover { transform: translateX(3px); }
.cc-act.is-off { background: var(--papier); color: var(--g500); pointer-events: none; }
.cc-note { font-size: 13px; color: var(--g500); }
.ci { position: relative; width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--papier); border: 1px solid var(--line); transition: background .35s, transform .35s; }
.cc:hover .ci { background: var(--signal); border-color: var(--signal); transform: rotate(-6deg); }
.ci svg { width: 24px; height: 24px; fill: none; stroke: var(--encre); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ci-phone svg { animation: shake 2.6s ease-in-out infinite; }
.ci-phone .ring { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--signal); animation: ring 2.6s ease-out infinite; }
.ci-wa .dots { position: absolute; display: flex; gap: 2px; top: 20px; left: 17px; }
.ci-wa .dots i { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--encre); animation: dots 1.2s ease-in-out infinite; }
.ci-wa .dots i:nth-child(2) { animation-delay: .15s; } .ci-wa .dots i:nth-child(3) { animation-delay: .3s; }
.ci-mail .flap { transform-origin: 12px 7px; animation: flap 3s ease-in-out infinite; }
@keyframes flap { 0%, 60%, 100% { transform: scaleY(1); } 75%, 85% { transform: scaleY(-1); } }
.ci-pin svg { animation: bounce 2s ease-in-out infinite; }
.ci-pin .wave { position: absolute; bottom: 8px; left: 50%; width: 16px; height: 5px; border: 1.6px solid var(--encre); border-radius: 50%; transform: translateX(-50%); animation: ripple 2s ease-out infinite; }
.ci-clock .m { transform-origin: 12px 12px; animation: spin 4s linear infinite; }
.ci-clock .h { transform-origin: 12px 12px; animation: spin 24s linear infinite; }

.ct-form { position: relative; display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--blanc); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(11,12,14,.5); }
.ct-form::before { content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, var(--signal) 50%, transparent 70%) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sheen 6s linear infinite; }
@keyframes sheen { to { background-position: -300% 0; } }
.ct-form-head { display: grid; gap: 4px; margin-bottom: 4px; }
.ct-form-head b { font: 700 20px var(--display); }
.ct-form-head span { font-size: 13.5px; color: var(--g500); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form input, .ct-form textarea { background: var(--papier); border-color: var(--line); transition: border-color .2s, box-shadow .2s, background .2s; }
.ct-form input:focus, .ct-form textarea:focus { background: var(--blanc); }
.types { border: 0; padding: 0; margin: 0; min-width: 0; }
.types legend { font: 600 14px var(--display); padding: 0; margin-bottom: 8px; }
.type-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chips label { position: relative; cursor: pointer; }
.type-chips input { position: absolute; opacity: 0; pointer-events: none; }
.type-chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--papier); font: 500 14px var(--display); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.type-chips label:hover span { border-color: var(--encre); }
.type-chips input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); transform: scale(1.04); }
.type-chips input:checked + span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.type-chips input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.ct-send .arr { display: inline-block; transition: transform .3s; }
.ct-send:hover .arr { transform: translateX(5px); }
.form-msg.ok { color: #3E6B0E; }
@media (max-width: 960px) { .ct-grid { grid-template-columns: 1fr; } .ct-form { order: -1; } }
@media (max-width: 560px) { .ct-row, .ct-direct { grid-template-columns: 1fr; } .cc-wide { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ci *, .ct-badge i, .ct-form::before { animation: none !important; } }

/* footer: full-width dark band (separator line, call to action, glass card with logo, links and social pills),
   the logo's lines drawn huge and faint in the background */
.footer { position: relative; overflow: hidden; margin-top: 0; padding-block: 0 30px; background: var(--encre); color: var(--blanc);
  background-image: radial-gradient(60% 50% at 85% 30%, rgba(198,241,53,.10), transparent 70%), radial-gradient(50% 45% at 10% 90%, rgba(198,241,53,.07), transparent 70%); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.14); }
.foot-deco { position: absolute; right: -6%; top: 8%; width: min(620px, 60vw); height: auto; stroke: var(--signal); opacity: .09; pointer-events: none; }
.footer > .wrap { position: relative; z-index: 1; }
.foot-cta { text-align: center; padding-block: clamp(64px, 9vw, 112px) clamp(40px, 6vw, 64px); }
.foot-cta h2 { font-size: clamp(36px, 5vw, 64px); color: var(--blanc); }
.foot-cta p { color: #A9ADB3; max-width: 52ch; margin: 18px auto 28px; }
.btn-outline-light { border: 1.5px solid var(--blanc); color: var(--blanc); background: transparent; }
.btn-outline-light:hover { background: var(--signal); border-color: var(--signal); color: var(--encre); }
.foot-card { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1.3fr; gap: 32px; padding: clamp(28px, 4vw, 48px);
  border-radius: 26px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(198,241,53,.05));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.foot-brand p { margin-top: 14px; color: #A9ADB3; font-size: 14px; line-height: 1.6; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col b { font: 600 15px var(--display); margin-bottom: 4px; }
.foot-col a { color: #C9CCD0; text-decoration: none; font-size: 14.5px; width: fit-content; transition: color .2s; }
.foot-col a:hover { color: var(--signal); }
.foot-soc { display: grid; gap: 10px; align-content: start; }
.soc { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; text-decoration: none; color: var(--blanc); font-size: 14px;
  transition: border-color .25s, background .25s, transform .25s; }
.soc svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soc b { font: 600 14px var(--display); }
.soc span { color: #A9ADB3; }
.soc:hover { border-color: var(--signal); background: rgba(198,241,53,.08); transform: translateX(3px); }
.soc:hover svg { color: var(--signal); }
/* contact page footer: a slim FAQ / direct-contact strip instead of the big call to action */
.foot-mini { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding-block: clamp(36px, 5vw, 56px); }
.foot-mini p { color: #A9ADB3; max-width: 56ch; }
.foot-mini b { color: var(--blanc); font: 600 18px var(--display); display: block; margin-bottom: 4px; }
.foot-mini-act { display: flex; gap: 10px; flex-wrap: wrap; }
.foot-copy { text-align: center; color: #8A8E94; font-size: 13.5px; margin-top: 28px; }
@media (max-width: 960px) { .foot-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-card { grid-template-columns: 1fr; } .foot-deco { width: 90vw; right: -30%; top: 2%; } }

/* footer logo links back home */
.foot-home { display: inline-block; border-radius: 8px; transition: opacity .2s; }
.foot-home:hover { opacity: .8; }