/* Oranova agency site. Brand: Night #0B1020, Nova Orange #FF6A3D, Nova Violet #7B5CFF, Paper #F6F4EF;
   Sora (titles), Manrope (text), Cairo (Arabic). Static: works on GitHub Pages, reviews come from reviews.json. */
:root {
  --night: #0B1020; --n2: #121831; --n3: #1A2142; --line: rgba(255,255,255,.1);
  --orange: #FF6A3D; --violet: #7B5CFF; --paper: #F6F4EF; --ink: #0B1020; --muted: #A9AEC2; --muted-d: #565B6E; --line-l: #E3E0D8;
  --display: "Sora", "Cairo", sans-serif; --body: "Manrope", "Cairo", system-ui, sans-serif;
  --wrap: 1180px; --r: 22px;
}
[dir="rtl"] { --display: "Cairo", sans-serif; --body: "Cairo", system-ui, sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--night); color: #fff; font: 500 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--orange); color: var(--night); }
html { scrollbar-color: #2C3460 var(--night); accent-color: var(--orange); scrollbar-gutter: stable; }
input, textarea { caret-color: var(--orange); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; z-index: 100; background: var(--orange); color: var(--night); padding: 10px 14px; border-radius: 8px; }
.skip:focus { inset-inline-start: 8px; }
.grad { color: var(--orange); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 16px/1 var(--body); transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-main { background: linear-gradient(110deg, #6B4DF5, #CF4518); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(0,0,0,.8); }
.btn-line { border: 1px solid rgba(255,255,255,.25); }
.btn-line:hover { border-color: #fff; }

/* Header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.top.solid { background: rgba(11,16,32,.97); box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 76px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 26px; margin-inline-start: auto; font-weight: 600; font-size: 15px; color: #D5D8E4; }
.nav a:hover { color: #fff; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.lang button { min-width: 38px; height: 32px; border-radius: 999px; font: 700 13px/1 var(--body); color: var(--muted); }
.lang button[aria-pressed="true"] { background: #fff; color: var(--night); }
.top .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); place-items: center; }
.burger svg { width: 22px; height: 22px; }
@media (max-width: 980px) {
  .nav { display: none; position: absolute; top: 76px; inset-inline: 12px; flex-direction: column; gap: 0; padding: 10px; background: var(--n2); border: 1px solid var(--line); border-radius: 18px; margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 12px; border-radius: 10px; }
  .nav a:hover { background: var(--n3); }
  .burger { display: grid; margin-inline-start: auto; }
  .top .btn span { display: none; }
  .top .btn { padding: 0 13px; }
}

/* Hero: the headline on the left, a live "tap" on the right (the NFC card meets the phone and the page opens) */
.hero { position: relative; padding: 148px 0 0; overflow: hidden; overflow: clip; isolation: isolate; } /* clip: focusing the cards must never scroll the hero sideways */
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 -10% auto auto; width: 62%; height: 100%; background: radial-gradient(closest-side, rgba(123,92,255,.28), transparent 72%); pointer-events: none; }
.orbit { position: absolute; z-index: -1; aspect-ratio: 1; translate: 0 -50%; pointer-events: none; animation: orbit 90s linear infinite; }
[dir="rtl"] .orbit { animation-direction: reverse; }
@keyframes orbit { to { rotate: 360deg; } }
.hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 48px; align-items: center; }
.hero h1 { font: 700 clamp(44px, 5.7vw, 80px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
[dir="rtl"] .hero h1 { line-height: 1.28; letter-spacing: 0; }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 520px; margin-top: 26px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 34px; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.pill { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: #D5D8E4; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 4px rgba(46,204,113,.18); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: #C9CDDB; }
.stage { --dir: 1; position: relative; aspect-ratio: 1 / .98; }
[dir="rtl"] .stage { --dir: -1; }
.stage > * { position: absolute; }
/* tap the hero to switch between the two NFC cards */
.stage { cursor: pointer; border-radius: 24px; -webkit-tap-highlight-color: transparent; }
.stage .card, .stage .scr { transition: opacity .26s ease; }
.stage.swapping .card, .stage.swapping .scr { opacity: 0; }
.stage .stage-hint { z-index: 5; left: 50%; bottom: -6px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #161D3A; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: #D5D8E4; white-space: nowrap; transition: border-color .2s, color .2s; }
.stage .stage-hint svg { width: 16px; height: 16px; flex: none; color: var(--orange); }
.stage:hover .stage-hint, .stage:focus-visible .stage-hint { border-color: rgba(255,106,61,.7); color: #fff; }
/* the logo's ring, centred on the phone and the card */
.stage .orbit { z-index: 0; left: 50%; top: 50%; width: 172%; translate: -50% -50%; opacity: .9; }
.stage .phone { z-index: 2; inset-inline-end: 5%; top: 1%; width: 45%; border-radius: 36px; padding: 9px; background: #05070F; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); transform: rotate(calc(4deg * var(--dir))); }
/* the phone waits on a dark screen; when the card touches it, the Oranova links page opens */
.stage .phone .scr { position: relative; aspect-ratio: 1 / 2; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 45% at 50% 42%, #1A2142, #070A16); }
.scr .idle { position: absolute; left: 50%; top: 42%; width: 24%; translate: -50% -50%; opacity: .3; animation: wait 7s ease-in-out infinite; }
.scr .page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; animation: open 7s cubic-bezier(.16,1,.3,1) infinite; }
.stage .phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--orange); opacity: 0; animation: lit 7s cubic-bezier(.16,1,.3,1) infinite; }
.stage .card { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.stage .card.c2 { z-index: 1; inset-inline-start: 0; top: 4%; width: 54%; transform: rotate(calc(-9deg * var(--dir))); filter: brightness(.72) saturate(.9); }
.stage .card.c1 { z-index: 3; inset-inline-start: 2%; bottom: 7%; width: 60%; transform: rotate(calc(-6deg * var(--dir))); animation: tap 7s cubic-bezier(.65,0,.35,1) infinite; }
.ripple { z-index: 4; inset-inline-start: 62%; top: 54%; width: 0; height: 0; }
.ripple i { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: ring 7s cubic-bezier(.16,1,.3,1) infinite; }
.ripple i:nth-child(2) { animation-delay: .18s; } .ripple i:nth-child(3) { animation-delay: .36s; }
.stage .tag { z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #161D3A; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; box-shadow: 0 14px 30px -14px rgba(0,0,0,.8); }
.stage .tag svg { width: 18px; height: 18px; flex: none; }
.stage .t1 { inset-inline-end: 0; bottom: 20%; animation: pop 7s cubic-bezier(.16,1,.3,1) infinite; }
.stage .t2 { inset-inline-end: 40%; top: 6%; }
/* 7s loop: rest, slide in, touch (rings + phone lights up), hold, slide back */
@keyframes tap {
  0%, 22% { transform: rotate(calc(-6deg * var(--dir))); }
  38%, 64% { transform: translate(calc(15% * var(--dir)), -16%) rotate(calc(-1deg * var(--dir))); }
  82%, 100% { transform: rotate(calc(-6deg * var(--dir))); }
}
@keyframes ring { 0%, 37% { opacity: 0; transform: scale(.3); } 39% { opacity: .9; } 58%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes open { 0%, 39% { opacity: 0; transform: translateY(8%) scale(.96); } 47%, 74% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes wait { 0%, 100% { opacity: .22; } 20% { opacity: .4; } 39% { opacity: .4; } 45%, 80% { opacity: 0; } }
@keyframes lit { 0%, 38% { opacity: 0; } 42%, 64% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes pop { 0%, 38% { transform: translateY(0); border-color: var(--line); } 44%, 64% { transform: translateY(-6px); border-color: rgba(255,106,61,.7); } 76%, 100% { transform: translateY(0); border-color: var(--line); } }
@media (max-width: 920px) { .hero { padding-top: 116px; } .hero .wrap { grid-template-columns: 1fr; } .stage { max-width: 500px; width: 100%; margin-inline: auto; } }
@media (max-width: 560px) { .hero-foot { margin-top: 10px; } .stage .tag { padding: 8px 11px; font-size: 12.5px; } }


/* Sections */
section { padding: 100px 0; position: relative; }
.light { background: var(--paper); color: var(--ink); }
:root { --dir: 1; } [dir="rtl"] { --dir: -1; }
.h2 { font: 700 clamp(34px, 5vw, 62px)/1.04 var(--display); letter-spacing: -.03em; max-width: 820px; text-wrap: balance; }
[dir="rtl"] .h2 { line-height: 1.35; letter-spacing: 0; }
.sub { color: var(--muted); font-size: 18px; margin-top: 16px; max-width: 600px; text-wrap: pretty; }
.light .sub { color: var(--muted-d); }
/* Section head: the heading on one side, its one-line explanation on the other */
.sec-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 56px; align-items: end; }
.sec-head .sub { margin-top: 0; padding-bottom: 6px; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* Services: an index of what we make, read down two columns */
.services { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 56px; border-bottom: 1px solid var(--line-l); }
.svc { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "ic h" "ic p"; column-gap: 20px; align-content: start; padding: 26px 0 28px; border-top: 1px solid var(--line-l); }
.svc .ic { grid-area: ic; padding-top: 2px; }
.svc .ic svg { display: block; width: 30px; height: 30px; fill: none; stroke: #C2410C; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.svc:hover .ic svg { transform: translateY(-3px) rotate(-6deg); }
.svc h3 { grid-area: h; font: 700 clamp(20px, 2vw, 24px)/1.2 var(--display); letter-spacing: -.015em; }
.svc p { grid-area: p; color: var(--muted-d); font-size: 15.5px; margin-top: 6px; max-width: 44ch; }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; margin-top: 40px; } .svc { grid-template-columns: 30px 1fr; column-gap: 16px; padding: 20px 0 22px; } .svc .ic svg { width: 26px; height: 26px; } }

/* Work: one block per kind of project; every example opens in the in-page viewer */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-weight: 700; font-size: 14.5px; color: #D5D8E4; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--orange); color: #fff; }
.jump b { font: 700 12px/1 var(--display); color: var(--orange); }
.tryhint { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 700; font-size: 15px; color: #FFC9B6; }
.tryhint svg { width: 22px; height: 22px; flex: none; }
.group { content-visibility: auto; contain-intrinsic-size: auto 900px; margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.g-head { display: flex; gap: 20px; align-items: flex-start; max-width: 780px; }
.g-num { font: 700 15px/1 var(--display); color: var(--orange); padding: 9px 11px; border: 1px solid rgba(255,106,61,.4); border-radius: 10px; flex: none; margin-top: 6px; font-variant-numeric: tabular-nums; }
.g-head h2, .g-head h3 { font: 700 clamp(26px, 3.4vw, 40px)/1.12 var(--display); letter-spacing: -.025em; }
.g-head p { color: var(--muted); margin-top: 6px; font-size: 16px; }
.cap { margin-top: 14px; }
.cap b { display: block; font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.cap span { display: block; font: 700 16px/1.3 var(--display); margin-top: 6px; }
[dir="rtl"] .cap b { letter-spacing: 0; font-size: 13.5px; }
.screen { position: relative; border-radius: 30px; padding: 8px; background: #05070F; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.screen img { width: 100%; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 23px; }
/* clickable example: lifts, and shows a "view live / scan" pill */
.ex { cursor: pointer; transition: transform .3s; outline-offset: 6px; }
.ex:hover, .ex.in:hover { transform: translateY(-6px); }
.ex.in { transition: transform .3s; }
.ex .media { position: relative; }
.peek { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--night); font: 800 13.5px/1 var(--body); white-space: nowrap; box-shadow: 0 12px 26px -10px rgba(0,0,0,.7); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.peek svg { width: 16px; height: 16px; flex: none; }
.ex:hover .peek, .ex:focus-visible .peek { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .peek { opacity: 1; transform: translate(-50%, 0); padding: 8px 13px; font-size: 12.5px; bottom: 12px; } }
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 34px; }
.phones.five { grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 1180px) and (min-width: 961px) { .phones.five { grid-template-columns: repeat(3, 1fr); } }
.feature { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 60px; align-items: center; margin-top: 34px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ticks { list-style: none; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: #E3E5EE; }
.ticks svg { width: 22px; height: 22px; flex: none; stroke: var(--orange); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.plaques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.plaques img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.plaques .zf { border-radius: 14px; box-shadow: 0 24px 44px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }

/* NFC cards in 3D: tilt follows the pointer, click flips the card */
.cardset { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 60px; margin-top: 34px; padding: 50px 54px 40px; border-radius: 28px; background: var(--paper); color: var(--ink); }
.cardset figure { width: 100%; max-width: 440px; justify-self: center; }
.cardset .cap span { color: var(--ink); }
.cardset .cap b { color: #C2410C; }
.card3d { perspective: 1300px; aspect-ratio: 85 / 54; cursor: grab; touch-action: pan-y; border-radius: 14px; user-select: none; -webkit-user-select: none; }
.card3d.dragging { cursor: grabbing; }
.card3d img { -webkit-user-drag: none; pointer-events: none; }
.card3d .tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; animation: float 6s ease-in-out infinite; }
.card3d.dragging .tilt { animation-play-state: paused; }
/* js/site.js (setupCards) turns the card: drag it any way, click / tap / Enter flips it, arrow keys turn it */
.card3d .flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--dx, 0deg)) rotateY(var(--dy, 0deg)); transition: transform .9s cubic-bezier(.2,.75,.2,1); }
.card3d.live .flip { transition: none; }
.card3d .face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 34px 50px -26px rgba(11,16,32,.6), 0 0 0 1px rgba(11,16,32,.08); }
.card3d .face img { width: 100%; height: 100%; object-fit: cover; }
.card3d .back { transform: rotateY(180deg); }
.card3d .glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.28), transparent 55%); opacity: 0; transition: opacity .3s; }
.card3d.active .glare { opacity: 1; }
@keyframes float { 0%, 100% { transform: rotateX(8deg) rotateY(-14deg) translateY(0); } 50% { transform: rotateX(4deg) rotateY(-6deg) translateY(-8px); } }
.card-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--line-l); background: #fff; color: var(--ink); font: 700 14px/1 var(--body); transition: border-color .2s; }
.chip-btn:hover { border-color: #C2410C; }
.chip-btn svg { width: 17px; height: 17px; flex: none; }
.card-hint { grid-column: 1 / -1; text-align: center; color: var(--muted-d); font-weight: 600; font-size: 14.5px; }

.soft { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: center; margin-top: 34px; }
.pc { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 34px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12); }
.pc .bar { display: flex; gap: 6px; padding: 10px 12px; background: #1B2140; }
.pc .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A4166; }
.pc img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.play { position: absolute; left: 50%; top: 54%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(110deg, #6B4DF5, #CF4518); box-shadow: 0 0 0 10px rgba(255,255,255,.18), 0 18px 40px -10px rgba(0,0,0,.6); transition: transform .25s; }
.play svg { width: 30px; height: 30px; margin-inline-start: 4px; }
.ex:hover .play { transform: scale(1.08); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.thumbs button { padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); transition: border-color .2s; }
.thumbs button:hover { border-color: var(--orange); }
.thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.soft h4, .soft .soft-title { font: 700 24px/1.25 var(--display); margin-bottom: 18px; }
@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; gap: 34px; } .duo { max-width: 560px; }
  .phones, .phones.five { grid-template-columns: repeat(2, 1fr); }
  .plaques { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cardset { padding: 34px 26px; gap: 34px; }
  .soft { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
  .group { margin-top: 50px; padding-top: 34px; }
  .phones, .duo { gap: 16px; }
  .screen { border-radius: 22px; padding: 6px; } .screen img { border-radius: 17px; }
  .cardset { grid-template-columns: 1fr; padding: 30px 20px; border-radius: 20px; }
  .cap span { font-size: 14.5px; } .cap b { font-size: 11px; }
  .play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

/* In-page viewer: shows the real page inside a phone, the plaque or card next to it, or the software video */
.viewer { position: fixed; inset: 0; z-index: 90; display: none; }
.viewer.open { display: block; }
.viewer .scrim { position: absolute; inset: 0; background: rgba(5,7,15,.93); animation: fade .3s ease; }
.viewer .box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 24px 24px; pointer-events: none; }
.viewer .box > * { pointer-events: auto; }
.v-top { position: absolute; top: 16px; inset-inline: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v-title b { display: block; font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.v-title span { display: block; font: 700 18px/1.3 var(--display); margin-top: 6px; }
[dir="rtl"] .v-title b { letter-spacing: 0; font-size: 13.5px; }
.v-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid var(--line); flex: none; }
.v-close:hover { background: rgba(255,255,255,.18); }
.v-close svg { width: 20px; height: 20px; }
.v-stage { display: flex; align-items: center; justify-content: center; gap: 56px; width: 100%; max-width: 1100px; animation: rise .45s cubic-bezier(.2,.75,.2,1); }
.v-source { width: min(400px, 36vw); display: none; text-align: center; }
.viewer.with-source .v-source { display: block; }
.v-source .src-img { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.v-source .src-img img { width: 100%; }
.v-source .src-img::after { content: ""; position: absolute; inset-inline: 0; height: 26%; top: 0; transform: translateY(-100%); will-change: transform; background: linear-gradient(180deg, transparent, rgba(255,106,61,.4) 85%, rgba(255,140,100,.95)); animation: scan 2.4s cubic-bezier(.45,0,.55,1) infinite; }
.viewer.card-src .v-source .src-img::after { display: none; }
.v-source p { margin-top: 18px; color: var(--muted); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.v-source p svg { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .v-source p svg { transform: scaleX(-1); }
.v-phone { position: relative; height: min(76vh, 760px); aspect-ratio: 9 / 19; border-radius: 46px; padding: 11px; background: #05070F; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 50px 100px -30px rgba(0,0,0,.95); flex: none; }
.v-phone::before { content: ""; position: absolute; z-index: 3; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 99px; background: #05070F; }
.v-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #0E1328; }
.v-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.v-screen .shot { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.v-screen .shot::-webkit-scrollbar { display: none; }
.v-screen .shot img { width: 100%; }
/* Tap: before the page opens, the viewer phone shows an idle screen, moves to the plaque or card, touches it, and comes back with the page */
.v-snap { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.viewer.snap .v-snap { opacity: 1; }
.v-wait { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: radial-gradient(70% 45% at 50% 42%, #1A2142, #070A16); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.v-wait img { width: 24%; opacity: .32; }
.viewer.tapping .v-wait { opacity: 1; transition: none; }
.v-phone { transition: box-shadow .25s; will-change: transform; }
.v-phone.lit { box-shadow: 0 0 0 3px var(--orange), 0 50px 100px -30px rgba(0,0,0,.95); }
.v-ripple { position: fixed; z-index: 6; width: 0; height: 0; pointer-events: none; }
.v-ripple i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.v-ripple.go i { animation: vring 1.2s cubic-bezier(.16,1,.3,1) infinite; } /* keeps pulsing while the phone reads the tag */
.v-ripple.go i:nth-child(2) { animation-delay: .4s; } .v-ripple.go i:nth-child(3) { animation-delay: .8s; }
@keyframes vring { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.9); } }
.v-load { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--muted); font-weight: 600; font-size: 14px; background: #0E1328; z-index: 2; transition: opacity .3s; }
.v-load i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--orange); animation: spin 1s linear infinite; }
.v-load.off { opacity: 0; pointer-events: none; }
.v-notes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.v-open { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: 13.5px; }
.v-open:hover { border-color: var(--orange); }
.v-open svg { width: 15px; height: 15px; flex: none; }
.v-open[hidden] { display: none; }
[dir="rtl"] .v-open svg { transform: scaleX(-1); }
.v-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #D5D8E4; font-weight: 700; font-size: 13.5px; }
.v-note i { width: 8px; height: 8px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 4px rgba(46,204,113,.2); }
.v-note.shot-note i { background: #FFB020; box-shadow: 0 0 0 4px rgba(255,176,32,.2); }
.v-center { display: flex; flex-direction: column; align-items: center; }
.v-video { display: none; width: min(1000px, 100%); }
.viewer.video .v-video { display: block; }
.viewer.video .v-stage, .viewer.video .v-notes { display: none; }
.v-video video { width: 100%; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.95); background: #000; }
.v-gallery { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.v-gallery button { width: 120px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; opacity: .75; }
.v-gallery button:hover { opacity: 1; border-color: var(--orange); }
.v-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.v-big { display: none; width: 100%; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.95); }
.viewer.still .v-big { display: block; } .viewer.still video { display: none; }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(385%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@media (max-width: 860px) {
  .viewer .box { padding: 66px 12px 12px; justify-content: flex-start; }
  .v-stage { flex-direction: column; gap: 14px; height: 100%; }
  .v-center { flex: 1; min-height: 0; width: 100%; }
  .v-source { width: 100%; display: none; }
  .viewer.with-source .v-source { display: flex; align-items: center; gap: 14px; text-align: start; }
  .v-source .src-img { width: 92px; flex: none; border-radius: 10px; }
  .viewer.card-src .v-source .src-img { width: 120px; }
  .v-source p { margin: 0; justify-content: flex-start; font-size: 14px; }
  .v-phone { height: auto; flex: 1; min-height: 0; width: min(100%, 420px); aspect-ratio: auto; border-radius: 30px; padding: 7px; }
  .v-phone::before { display: none; }
  .v-screen { border-radius: 24px; }
  .v-notes { margin-top: 10px; }
  .v-title span { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .card3d .tilt { animation: none; } .v-source .src-img::after { animation: none; display: none; }
  .v-stage, .viewer .scrim { animation: none; }
}

/* Under the NFC cards: what the customer gets, in one row */
.card-points { grid-template-columns: repeat(3, 1fr); gap: 18px 28px; margin-top: 30px; }
@media (max-width: 860px) { .card-points { grid-template-columns: 1fr; } }

[dir="rtl"] .hero .ctas .go { transform: scaleX(-1); }
/* Home page: a short selection, then the link to every project */
.all-work { display: flex; justify-content: center; margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--line); }
.all-work .btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.all-work .count { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
[dir="rtl"] .all-work svg { transform: scaleX(-1); }
#work .plaques { margin-top: 26px; }
.empty-group { display: none; }

/* Full projects page */
.page-head { padding: 140px 0 10px; }
.page-head h1 { font: 700 clamp(40px, 6vw, 76px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
[dir="rtl"] .page-head h1 { line-height: 1.3; letter-spacing: 0; }
.page-head .sub { margin-top: 18px; }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; }
.page-head .meta b { font: 700 15px/1 var(--display); color: var(--orange); font-variant-numeric: tabular-nums; }
.filters-bar { position: sticky; top: 76px; z-index: 20; margin-top: 30px; background: rgba(11,16,32,.98); border-block: 1px solid var(--line); }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: #D5D8E4; transition: background .2s, color .2s, border-color .2s; }
.filters button:hover { border-color: var(--orange); color: #fff; }
.filters button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--night); }
.page-all #work { padding-top: 10px; }
.page-all .group:first-of-type { margin-top: 40px; }

/* Process: four steps on one line that draws itself in */
.steps { --node: 58px; position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 60px; counter-reset: s; }
.steps::before { content: ""; position: absolute; top: calc(var(--node) / 2); inset-inline: calc(var(--node) / 2) calc((100% - 96px) / 4 - var(--node) / 2); height: 2px; background: linear-gradient(90deg, var(--violet), var(--orange)); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.16,1,.3,1) .2s; }
[dir="rtl"] .steps::before { background: linear-gradient(-90deg, var(--violet), var(--orange)); transform-origin: right center; }
.steps.in::before { transform: none; }
.steps li { position: relative; }
.steps li::before { counter-increment: s; content: "0" counter(s); position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: var(--night); border: 2px solid rgba(255,106,61,.55); font: 700 18px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.steps li:last-child::before { background: var(--orange); border-color: var(--orange); color: var(--night); } /* final state; scroll motion lights each step in turn */
.steps h3 { font: 700 clamp(20px, 2vw, 24px)/1.2 var(--display); letter-spacing: -.015em; margin-top: 26px; }
.steps p { color: var(--muted); font-size: 15.5px; margin-top: 10px; max-width: 30ch; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; }
  .steps::before { top: calc(var(--node) / 2); bottom: 40px; inset-inline: calc(var(--node) / 2 - 1px) auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--violet), var(--orange)); transform: scaleY(0); transform-origin: center top; }
  [dir="rtl"] .steps::before { background: linear-gradient(180deg, var(--violet), var(--orange)); transform-origin: center top; }
  .steps li { padding-inline-start: calc(var(--node) + 22px); min-height: var(--node); }
  .steps li::before { position: absolute; inset-inline-start: 0; top: 0; }
  .steps h3 { margin-top: 14px; }
}

/* Team: the four names, no cards */
#team { padding: 84px 0; }
#team .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px 56px; align-items: center; }
#team .h2 { font-size: clamp(30px, 3.8vw, 46px); }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.member .av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font: 700 30px/1 var(--display); color: var(--paper); background: var(--night); box-shadow: 0 16px 30px -18px rgba(11,16,32,.7); transition: background .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.member:nth-child(even) .av { background: var(--orange); color: var(--night); }
.member:hover .av { transform: translateY(-4px) rotate(-4deg); }
.member h3 { font: 700 20px/1.2 var(--display); letter-spacing: -.01em; }
@media (max-width: 900px) { #team .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .member .av { width: 64px; height: 64px; font-size: 24px; } .member h3 { font-size: 16px; } }

/* Reviews */
.rev-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; margin-top: 44px; align-items: start; }
.summary { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r); background: var(--n2); border: 1px solid var(--line); }
.summary[hidden] { display: none; }
.summary .avg { font: 700 54px/1 var(--display); }
.stars { display: inline-flex; gap: 3px; color: #FFB020; }
.stars svg { width: 20px; height: 20px; }
.summary small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.rev-list { display: grid; gap: 14px; margin-top: 16px; max-height: 640px; overflow: auto; padding-inline-end: 4px; }
.rev { padding: 20px 22px; border-radius: var(--r); background: var(--n2); border: 1px solid var(--line); }
.rev .who { display: flex; align-items: center; gap: 12px; }
.rev .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--display); background: var(--n3); border: 1px solid rgba(255,106,61,.4); flex: none; }
.rev b { display: block; font-size: 15.5px; }
.rev small { color: var(--muted); font-size: 13px; }
.rev p { margin-top: 12px; color: #D9DCE7; font-size: 15.5px; }
.empty { padding: 34px 26px; border-radius: var(--r); border: 1px dashed rgba(255,255,255,.2); text-align: center; color: var(--muted); }
.empty b { display: block; color: #fff; font: 700 20px/1.3 var(--display); margin-bottom: 6px; }
.form { padding: 28px 26px; border-radius: var(--r); background: #fff; color: var(--ink); }
.form h3 { font: 700 24px/1.2 var(--display); }
.form .note { color: var(--muted-d); font-size: 14.5px; margin-top: 6px; }
.field { margin-top: 16px; }
.field label, .field legend { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line-l); background: #FAFAF8; color: var(--ink); font-size: 16px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
fieldset.field { border: 0; }
.rate { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .rate { flex-direction: row-reverse; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate label { cursor: pointer; color: #D6D2C6; margin: 0; }
.rate label svg { width: 34px; height: 34px; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: #FFB020; }
.rate input:focus-visible + label { outline: 2px solid var(--orange); border-radius: 6px; }
.form .err { color: #B42318; font-size: 14px; font-weight: 700; margin-top: 6px; min-height: 20px; }
.form .btn { width: 100%; margin-top: 14px; }
.thanks { display: none; text-align: center; padding: 22px 6px; }
.thanks.on { display: block; }
.thanks b { display: block; font: 700 22px/1.3 var(--display); }
.thanks p { color: var(--muted-d); margin-top: 6px; }
@media (max-width: 900px) { .rev-wrap { grid-template-columns: 1fr; } }

/* FAQ */
.faq .wrap { max-width: 860px; }
details { border-bottom: 1px solid var(--line-l); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font: 700 19px/1.35 var(--display); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: #C2410C; font: 600 26px/1 var(--body); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 22px; color: var(--muted-d); }

/* CTA + footer */
/* Closing call: one big orange block, the logo's ring turning in the corner */
.cta-box { position: relative; overflow: hidden; overflow: clip; isolation: isolate; border-radius: 32px; padding: clamp(48px, 7vw, 96px) clamp(26px, 6vw, 80px); background: var(--orange); color: var(--night); }
.cta-box .orbit { inset-inline-end: -8%; top: 50%; width: min(620px, 110vw); opacity: 1; animation-duration: 60s; }
.cta-box .h2 { font-size: clamp(42px, 7vw, 92px); line-height: .98; letter-spacing: -.04em; max-width: 11ch; }
[dir="rtl"] .cta-box .h2 { line-height: 1.3; letter-spacing: 0; max-width: 14ch; }
.cta-box .sub { color: #3B1608; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; max-width: 34ch; margin-top: 22px; }
.cta-box .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.cta-box .btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.cta-box .btn-main { background: var(--night); box-shadow: 0 18px 34px -16px rgba(11,16,32,.8); }
.cta-box .btn-main:hover { box-shadow: 0 22px 40px -16px rgba(11,16,32,.9); }
.cta-box .btn-line { border: 1.5px solid rgba(11,16,32,.4); color: var(--night); }
.cta-box .btn-line:hover { border-color: var(--night); background: rgba(11,16,32,.06); }
.cta-box :focus-visible { outline-color: var(--night); }

/* Quick quote: four questions, then WhatsApp opens with the message written */
.cta-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 44px 56px; align-items: center; }
.cta-box .h2 { font-size: clamp(42px, 5.6vw, 80px); }
.quote { position: relative; padding: 28px 26px 24px; border-radius: 24px; background: var(--night); color: #fff; box-shadow: 0 34px 60px -30px rgba(11,16,32,.85); }
.quote :focus-visible { outline-color: #fff; }
.quote h3 { font: 700 24px/1.15 var(--display); letter-spacing: -.015em; }
.quote .q-note { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.q-field { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.q-field legend, .q-field label { display: block; padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 14px; }
.q-field legend small { font-weight: 600; color: var(--muted); }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip { position: relative; }
.q-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); font-weight: 700; font-size: 14px; color: #D5D8E4; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.q-chip span:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.q-chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--night); }
.q-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.q-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 12px; }
.q-row .q-field { margin-top: 18px; }
.q-field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: var(--n2); color: #fff; font-size: 16px; }
.quote input::placeholder { color: #7D839C; }
.quote input:focus { outline: none; border-color: var(--orange); }
.quote .q-err { min-height: 20px; margin-top: 12px; color: #FFB4A3; font-size: 14px; font-weight: 700; }
.quote .btn-main { width: 100%; margin-top: 4px; background: var(--orange); color: var(--night); box-shadow: none; }
.quote .btn-main:hover { background: #FF7D55; box-shadow: none; }
.quote .btn svg { width: 20px; height: 20px; }
.quote .q-done { margin-top: 10px; color: #8FE3B0; font-size: 14px; font-weight: 700; text-align: center; }
.quote .q-done:empty { display: none; }
@media (max-width: 960px) { .cta-box { grid-template-columns: 1fr; } .quote { max-width: 560px; } }
@media (max-width: 520px) { .quote { padding: 22px 18px 20px; border-radius: 20px; } .q-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cta-box { border-radius: 24px; } .cta-box .orbit { opacity: .55; top: 82%; } .cta-box .btn-line { white-space: normal; text-align: center; font-size: 15px; } }
footer { padding: 54px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
footer img { height: 30px; width: auto; }
footer p, footer a { color: var(--muted); font-size: 15px; }
footer a:hover { color: #fff; }
footer h4 { font: 800 13px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
[dir="rtl"] footer h4 { letter-spacing: 0; font-size: 15px; }
footer ul { list-style: none; display: grid; gap: 8px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.social a:hover { border-color: var(--orange); }
.social svg { width: 19px; height: 19px; }
.copy { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { footer .grid { grid-template-columns: 1fr; } }

.fab { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.fab svg { width: 30px; height: 30px; }

.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .svc .ic svg, .member .av { transition: none; }
  .orbit, .stage .card.c1, .stage .phone::after, .ripple i, .stage .t1, .scr .idle { animation: none; }
  .scr .page { animation: none; opacity: 1; }
  .steps::before { transform: none; transition: none; }
}

/* ================= Scroll motion =================
   Headings wipe up from under a mask when they arrive (works in every browser, one-shot, triggered by the same
   observer as the other reveals). The rest is tied to the scroll itself with the browser's scroll-driven animations,
   which run off the main thread: the process line fills as you read the steps, the hero settles back and its ring
   turns as you leave it, the closing block grows in, and a thin line under the header shows how far you are.
   Browsers without scroll-driven animations keep the earlier behaviour; reduced motion turns all of it off. */
.top .progress { position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--violet), var(--orange)); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
[dir="rtl"] .top .progress { background: linear-gradient(-90deg, var(--violet), var(--orange)); transform-origin: 100% 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* headings: a mask wipe instead of a fade */
  .h2.rv { opacity: 1; transform: none; clip-path: inset(-.2em -.3em 100% -.3em); translate: 0 .32em;
    transition: clip-path .95s cubic-bezier(.16,1,.3,1), translate .95s cubic-bezier(.16,1,.3,1); }
  .h2.rv.in { clip-path: inset(-.2em -.3em -.35em -.3em); translate: 0 0; }
  .hero h1, .page-head h1 { animation: head-in 1.05s cubic-bezier(.16,1,.3,1) .08s both; }
  @keyframes head-in { from { clip-path: inset(-.2em -.3em 100% -.3em); translate: 0 .28em; } to { clip-path: inset(-.2em -.3em -.35em -.3em); translate: 0 0; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* reading progress */
    .top .progress { opacity: 1; animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { to { transform: scaleX(1); } }

    /* hero: the phone and cards settle back as you scroll away, the ring turns with the scroll */
    .hero .stage { animation: stage-out linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    @keyframes stage-out { to { scale: .88; translate: 0 9%; opacity: .45; } }
    .stage .orbit { animation: orbit 90s linear infinite, orbit-scroll linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    @keyframes orbit-scroll { to { transform: rotate(-110deg); } }

    /* process: the line fills while you read the four steps; each step lights up when the line reaches it */
    .steps { view-timeline: --steps block; }
    .steps::before { transition: none; animation: line-fill linear both; animation-timeline: --steps; animation-range: cover 22% cover 58%; }
    @keyframes line-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .steps li::before { animation: node-on linear both; animation-timeline: --steps; }
    .steps li:nth-child(1)::before { animation-range: cover 20% cover 23%; }
    .steps li:nth-child(2)::before { animation-range: cover 31% cover 34%; }
    .steps li:nth-child(3)::before { animation-range: cover 43% cover 46%; }
    .steps li:nth-child(4)::before { animation-range: cover 55% cover 58%; }
    @keyframes node-on { from { background: var(--night); border-color: rgba(255,106,61,.35); color: #fff; } to { background: var(--orange); border-color: var(--orange); color: var(--night); } }

    /* closing block: grows to full size as you reach it, its ring turns with the scroll */
    .cta-box { view-timeline: --cta block; animation: cta-in linear both; animation-timeline: --cta; animation-range: entry 0% cover 45%; }
    @keyframes cta-in { from { scale: .9; } to { scale: 1; } }
    .cta-box .orbit { animation: orbit 60s linear infinite, orbit-scroll linear both; animation-timeline: auto, --cta; animation-range: normal, entry 0% exit 100%; }
  }
  /* phones: the process line runs down the left */
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    @keyframes line-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .steps::before { animation-range: cover 18% cover 72%; }
    .steps li:nth-child(1)::before { animation-range: cover 16% cover 20%; }
    .steps li:nth-child(2)::before { animation-range: cover 34% cover 38%; }
    .steps li:nth-child(3)::before { animation-range: cover 52% cover 56%; }
    .steps li:nth-child(4)::before { animation-range: cover 68% cover 72%; }
  }
}

/* Giant moving words: the services in very large type, two rows */
.bigtype { padding: 70px 0 30px; overflow: hidden; overflow: clip; user-select: none; }
.bt-row { display: flex; align-items: center; gap: .32em; width: max-content; font: 700 clamp(54px, 9.5vw, 150px)/1.05 var(--display); letter-spacing: -.035em; white-space: nowrap; }
.bt-a { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.32); }
.bt-b { color: var(--orange); margin-top: .06em; }
.bt-star { width: .32em; height: .32em; flex: none; fill: var(--orange); }
.bt-b .bt-star { fill: var(--violet); }
[dir="rtl"] .bt-row { letter-spacing: 0; }

/* ================= Scroll motion, part 2 =================
   Tied to the scroll with the browser's scroll-driven animations (moving, turning and fading only, so it stays on
   the graphics card): projects are dealt like cards, plaques stand up, cream sections unfold to full width, the
   giant words slide, service rows slide in while their icons draw, the team pops in. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* phone screens: dealt from below, fanned, straightening one after another */
    .phones > .fx { animation: deal linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 7%) cover calc(32% + var(--i, 0) * 5%); }
    .phones > .fx:nth-child(4n+1) { --i: 0; --tilt: -8deg; } .phones > .fx:nth-child(4n+2) { --i: 1; --tilt: -3deg; }
    .phones > .fx:nth-child(4n+3) { --i: 2; --tilt: 3deg; } .phones > .fx:nth-child(4n+4) { --i: 3; --tilt: 8deg; }
    .phones.five > .fx:nth-child(5n) { --i: 4; --tilt: 10deg; }
    @keyframes deal { from { opacity: 0; translate: 0 160px; rotate: calc(var(--tilt, 6deg) * var(--dir)); scale: .84; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
    .duo > .fx:nth-child(1) { --i: 0; --tilt: -6deg; } .duo > .fx:nth-child(2) { --i: 1; --tilt: 6deg; }
    .duo > .fx { animation: deal linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 8%) cover calc(30% + var(--i, 0) * 6%); }

    /* plaques: tip up from flat to standing, like a plaque set on the counter */
    .plaques { perspective: 1100px; }
    .plaques > .fx { transform-origin: 50% 100%; animation: stand linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 6%) cover calc(34% + var(--i, 0) * 4%); }
    .plaques > .fx:nth-child(4n+2) { --i: 1; } .plaques > .fx:nth-child(4n+3) { --i: 2; } .plaques > .fx:nth-child(4n+4) { --i: 3; }
    @keyframes stand { from { opacity: 0; rotate: x 68deg; translate: 0 70px; } 55% { opacity: 1; } to { opacity: 1; rotate: x 0deg; translate: 0 0; } }

    /* NFC cards (projects page): swing in on their side */
    .cardset { perspective: 1300px; }
    .cardset > .fx { animation: swing linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .cardset > .fx:nth-child(2) { animation-range: entry 8% cover 44%; }
    @keyframes swing { from { opacity: 0; rotate: y calc(-55deg * var(--dir)); translate: calc(-60px * var(--dir)) 40px; } to { opacity: 1; rotate: y 0deg; translate: 0 0; } }

    /* cream sections: a rounded card in the dark that stretches to full width as it arrives */
    .light { position: relative; isolation: isolate; background: transparent; overflow-x: clip; }
    /* the final stretch pushes the rounded corners past the screen edges, so it is larger on narrower screens */
    .light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-radius: 44px; --unfold: 1.08; animation: unfold linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes unfold { from { scale: .86 .96; } to { scale: var(--unfold) 1; } }
    @media (max-width: 1200px) { .light::before { --unfold: 1.12; } }
    @media (max-width: 760px) { .light::before { border-radius: 28px; --unfold: 1.2; } }

    /* giant words: the two rows slide in opposite directions while you scroll past */
    .bt-a { animation: bt-left linear both; animation-timeline: view(); }
    .bt-b { animation: bt-right linear both; animation-timeline: view(); }
    @keyframes bt-left { from { translate: calc(4% * var(--dir)) 0; } to { translate: calc(-34% * var(--dir)) 0; } }
    @keyframes bt-right { from { translate: calc(-36% * var(--dir)) 0; } to { translate: calc(2% * var(--dir)) 0; } }

    /* services: each row slides in from its own side, its icon draws itself */
    .services .svc.rv { opacity: 1; transform: none; transition: none; }
    .services .svc { view-timeline: --svc block; animation: row-in linear both; animation-timeline: --svc; animation-range: entry 0% cover 30%; }
    .services .svc:nth-child(odd) { --from: -80px; } .services .svc:nth-child(even) { --from: 80px; }
    @keyframes row-in { from { opacity: 0; translate: calc(var(--from, -80px) * var(--dir)) 0; } to { opacity: 1; translate: 0 0; } }
    .svc .ic svg [pathLength] { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --svc; animation-range: entry 25% cover 42%; }
    @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  }
}

/* Team, "four people, one goal": the four avatars start as one circle in the middle, spring out to their places,
   and each pulses a ring as it lands (played once by js/site.js when the row is well in view) */
.member .av { position: relative; }
.member .av::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; pointer-events: none; }
.member.landed .av::after { animation: av-ring 1s cubic-bezier(.16,1,.3,1); }
.member.landed .av::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--violet); opacity: 0; pointer-events: none; animation: av-ring 1.2s cubic-bezier(.16,1,.3,1) .15s; }
@keyframes av-ring { from { opacity: .95; transform: scale(.85); } to { opacity: 0; transform: scale(1.7); } }
.team.choreo .member.rv { opacity: 0; transform: none; transition: none; }
.team.played .member.rv { opacity: 1; }

/* Réalisations: way back to the home page */
.nav-home { display: inline-flex; align-items: center; gap: 7px; }
.nav-home svg { width: 17px; height: 17px; flex: none; }
.back-home { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; margin-bottom: 26px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: #D5D8E4; transition: border-color .2s, color .2s, gap .2s; }
.back-home:hover { border-color: var(--orange); color: #fff; gap: 11px; }
.back-home svg { width: 18px; height: 18px; flex: none; color: var(--orange); }
[dir="rtl"] .back-home svg { transform: scaleX(-1); }

/* ================= Hover layer (tasteskill 2.5, references/motion.md) =================
   Every button, pill, link and linked card answers the pointer with the same small, fast steps:
   buttons step 1px up and press 1px down, linked cards lift 2px while their picture zooms 1.03 inside its frame,
   nav and footer words draw a 1px underline. Nothing tilts, rotates, grows or pushes a neighbour.
   Hover only for a mouse; press and focus everywhere. The scroll animations use translate/rotate/scale, so this
   layer's transform stacks on top of them without fighting. */
:root { --m-in: 140ms; --m-out: 200ms; --m-press: 90ms; --m-card: 180ms; --m-image: 600ms; --m-ease: cubic-bezier(.2,.8,.2,1); }

/* buttons and pills */
.btn, .jump a, .filters button, .back-home, .v-open, .chip-btn, .social a, .lang button {
  transition: transform var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease), background-color var(--m-out) var(--m-ease), border-color var(--m-out) var(--m-ease), color var(--m-out) var(--m-ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .jump a:hover, .filters button:hover, .back-home:hover, .v-open:hover, .chip-btn:hover, .social a:hover {
    transform: translateY(-1px); transition-duration: var(--m-in); }
  /* the fill steps 14% toward night; the outline gains a faint fill */
  .btn-main:hover { box-shadow: inset 0 0 0 99px rgba(11,16,32,.14), 0 18px 34px -14px rgba(0,0,0,.8); }
  .cta-box .btn-main:hover { box-shadow: inset 0 0 0 99px rgba(11,16,32,.14), 0 20px 38px -16px rgba(11,16,32,.9); }
  .btn-line:hover { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.7); }
  .jump a:hover, .filters button:hover, .back-home:hover { background-color: rgba(255,255,255,.06); }
}
.btn:active, .jump a:active, .filters button:active, .back-home:active, .v-open:active, .chip-btn:active, .social a:active, .lang button:active {
  transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }

/* the back-home arrow nudges 3px instead of the pill growing */
.back-home, .back-home:hover { gap: 8px; }
.back-home svg { transition: translate var(--m-out) var(--m-ease); }
@media (hover: hover) and (pointer: fine) { .back-home:hover svg { translate: calc(-3px * var(--dir, 1)) 0; transition-duration: var(--m-in); } }
.btn-main svg { transition: translate var(--m-out) var(--m-ease); }
@media (hover: hover) and (pointer: fine) { .btn-main:hover svg:last-child:not(:first-child) { translate: calc(3px * var(--dir, 1)) 0; transition-duration: var(--m-in); } }

/* linked cards (every work example opens the viewer): lift 2px, the picture zooms inside its frame */
.ex, .ex.in { transition: transform var(--m-card) var(--m-ease); }
.ex:hover, .ex.in:hover { transform: translateY(-2px); }
.zf { display: block; overflow: hidden; border-radius: 23px; }
.zf img, .pc > img { transition: transform var(--m-image) var(--m-ease); }
@media (hover: hover) and (pointer: fine) { .ex:hover .zf img, .ex:hover.pc > img { transform: scale(1.03); } }
.ex:hover .play { transform: none; }

/* rows and people are not links: they stay still (no icon tilt, no avatar spin) */
.svc:hover .ic svg, .member:hover .av { transform: none; }

/* nav and footer words: a 1px line draws under the word from the start side and leaves the other way */
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .nav a { padding-block: 4px; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    transition: color var(--m-out) var(--m-ease), background-size var(--m-out) var(--m-ease); }
  .nav a:hover { background-size: 100% 1px; background-position-x: 0; transition-duration: var(--m-in); }
  [dir="rtl"] .nav a { background-position-x: 0; }
  [dir="rtl"] .nav a:hover { background-position-x: 100%; }
}
@media (min-width: 981px) { .nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); } }
@media (hover: hover) and (pointer: fine) {
  footer a:not(.social a) { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; padding-bottom: 2px;
    transition: color var(--m-out) var(--m-ease), background-size var(--m-out) var(--m-ease); }
  footer a:not(.social a):hover { background-size: 100% 1px; background-position-x: 0; transition-duration: var(--m-in); }
}

/* focus: the ring settles in from 6px out; fields take the orange border and a soft 3px ring */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible { animation: ring-in var(--m-out) var(--m-ease); }
  @keyframes ring-in { from { outline-offset: 6px; } }
}
.field input, .field textarea, .quote input, .quote textarea, .quote select { transition: border-color var(--m-in) var(--m-ease), box-shadow var(--m-in) var(--m-ease); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(255,106,61,.18); }
.quote input:focus, .quote textarea:focus, .quote select:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.22); }

@media (prefers-reduced-motion: reduce) {
  .btn, .ex, .zf img, .pc > img, .nav a, footer a { transition: none !important; }
  .ex:hover, .ex.in:hover, .ex:hover .zf img, .ex:hover.pc > img { transform: none; }
}

/* Floating WhatsApp button: the Oranova ring (violet to orange arc, orange star) turns slowly around it */
.fab { isolation: isolate; transition: transform var(--m-out) var(--m-ease); }
.fab .fab-ring { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none;
  animation: orbit 9s linear infinite; }
@media (hover: hover) and (pointer: fine) { .fab:hover { transform: translateY(-1px); transition-duration: var(--m-in); } }
.fab:active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }
@media (prefers-reduced-motion: reduce) { .fab .fab-ring { animation: none; } }

/* ================= The NFC order page link =================
   A "Carte NFC" tab in the header of every page, and a home section that leads to nfc.html */
.nav .nav-nfc { display: inline-flex; align-items: center; gap: 7px; }
.nav .nav-nfc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,106,61,.2); }
.nfc-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.nb-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 32px; }
.nb-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-l); font-size: 14.5px; font-weight: 700; }
.nb-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.nb-pic { position: relative; display: block; aspect-ratio: 1 / .86; }
.nb-pic .zf { position: absolute; border-radius: 18px; box-shadow: 0 30px 50px -30px rgba(11,16,32,.6); }
.nb-pic img { width: 100%; height: auto; transition: scale var(--m-image) var(--m-ease); }
.nb-plate { inset-inline-start: 0; top: 0; width: 66%; }
.nb-card { inset-inline-end: 0; bottom: 0; width: 58%; border-radius: 14px; }
@media (hover: hover) and (pointer: fine) { .nb-pic:hover img { scale: 1.03; } }
@media (max-width: 860px) { .nfc-band .wrap { grid-template-columns: minmax(0, 1fr); } .nb-pic { max-width: 520px; width: 100%; } }