:root{--bg:#F5F6F9;--surface:#FFF;--ink:#101C2E;--muted:#55627A;--line:#DCE1EA;--brass:#8C6A2B;--soft:#EEE6D3;--btn-bg:#101C2E;--btn-fg:#F5F6F9;
--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A1424;--surface:#12213A;--ink:#EEF1F6;--muted:#9AA7BD;--line:#22344F;--brass:#D2AE68;--soft:#1B2940;--btn-bg:#EEF1F6;--btn-fg:#0A1424;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0A1424;--surface:#12213A;--ink:#EEF1F6;--muted:#9AA7BD;--line:#22344F;--brass:#D2AE68;--soft:#1B2940;--btn-bg:#EEF1F6;--btn-fg:#0A1424;color-scheme:dark}
.dk{--bg:#0A1424;--surface:#12213A;--ink:#EEF1F6;--muted:#9FACC2;--line:#22344F;--brass:#D9B66F;--soft:#1B2940;--btn-bg:linear-gradient(135deg,#E6C98A,#C99B4B);--btn-fg:#0A1424;background:var(--bg);color:var(--ink)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#0A1424;z-index:40}
a{color:inherit}p{margin:0}
.w{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:0}
h1{font-size:clamp(2.6rem,6.2vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.1rem);max-width:19ch}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(10,20,36,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #22344F}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:var(--serif);font-size:1.45rem;font-weight:600;text-decoration:none}
.logo i{font-style:normal;color:var(--brass)}
.logo span{white-space:nowrap}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.tg{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans,'Hanken Grotesk',sans-serif);font-size:.56rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-top:5px;white-space:nowrap}
.tg::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
footer .tg{margin:0;font-size:.6rem}
@media(max-width:520px){.logo{font-size:1.25rem}.tg{font-size:.5rem;letter-spacing:.2em;gap:6px}.tg::before{width:14px}}
nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:.95rem}
nav a{text-decoration:none;color:var(--muted)}nav a:hover{color:var(--ink)}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:600 .98rem var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn.sm{padding:11px 22px;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.dk .btn.ghost{border-color:#3A4F70}
:is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.hero{position:relative;overflow:hidden;padding:96px 0 110px;background:radial-gradient(60% 70% at 85% 10%,rgba(217,182,111,.22),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(70,110,190,.22),transparent 60%),#0A1424}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent);mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent)}
.hero .w{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-block;border:1px solid #3A4F70;border-radius:999px;padding:7px 16px;font-size:.88rem;color:var(--muted);margin-bottom:28px}
.badge b{color:var(--brass);font-weight:600}
.lead{font-size:1.2rem;color:var(--muted);max-width:46ch;margin:28px 0 38px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.proof{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap}
.proof b{display:block;font:500 1.9rem/1.2 var(--serif)}.proof span{color:var(--muted);font-size:.92rem}.proof b span{color:inherit;font-size:inherit}
.rise>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise>:nth-child(2){animation-delay:.1s}.rise>:nth-child(3){animation-delay:.2s}.rise>:nth-child(4){animation-delay:.3s}.rise>:nth-child(5){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.stage{position:relative;min-height:470px;animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
.mock{position:absolute;top:0;left:0;width:90%;background:#F5F6F9;border-radius:16px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);overflow:hidden;color:#101C2E}
.mock .bar{display:flex;gap:6px;padding:12px 14px;background:#E7EAF0}.mock .bar span{width:9px;height:9px;border-radius:50%;background:#C3CAD6}
.mock .pg{padding:26px;display:grid;gap:14px}
.mock .nv{display:flex;justify-content:space-between;align-items:center}.mock .nv i{width:56px;height:10px;border-radius:5px;background:#101C2E}.mock .nv em{width:70px;height:22px;border-radius:11px;background:#C99B4B}
.mock .t{height:22px;width:75%;border-radius:5px;background:#101C2E}.mock .t.s{width:50%}
.mock .l{height:8px;border-radius:4px;background:#D5DBE5}
.mock .g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.mock .g div{height:84px;border-radius:10px;background:linear-gradient(135deg,#E9DDBF,#CFD6E2)}.mock .g div:nth-child(2){background:linear-gradient(135deg,#1C2E4D,#101C2E)}
.phone{position:absolute;right:0;bottom:0;width:170px;height:330px;border-radius:32px;background:#0E1A2E;border:6px solid #1E2F4C;box-shadow:0 30px 60px -10px rgba(0,0,0,.7);padding:22px 14px;display:grid;gap:10px;align-content:start}
.phone i{display:block;height:9px;border-radius:5px;background:#2A3E5F}.phone i.a{height:70px;border-radius:12px;background:linear-gradient(135deg,#E6C98A,#C99B4B)}
.phone i.b{height:44px;border-radius:10px;background:#18294A}
.chip{position:absolute;left:-6px;bottom:44px;background:rgba(18,33,58,.92);border:1px solid #3A4F70;border-radius:14px;padding:14px 18px;backdrop-filter:blur(8px);box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}
.chip b{display:block;font:500 1.5rem/1.1 var(--serif);color:var(--brass)}.chip span{font-size:.85rem;color:var(--muted)}
section{padding:104px 0}
.hd{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}.hd p{color:var(--muted);max-width:44ch}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card>.btn{margin-top:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px}
.card svg{width:30px;height:30px;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.card h3{font-size:1.6rem;margin-bottom:10px}.card p{color:var(--muted);max-width:44ch}
.card ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-size:.95rem}
.card li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brass);margin-right:12px;vertical-align:middle}
.card.app{background:radial-gradient(80% 60% at 100% 0,rgba(217,182,111,.2),transparent 60%),#0F1D33;border-color:#22344F;color:#EEF1F6;display:flex;flex-direction:column;justify-content:space-between}
.card.app p{color:#9FACC2}.card.app svg{stroke:#D9B66F}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case a{text-decoration:none;display:block}
.th{height:260px;border-radius:18px;margin-bottom:20px;position:relative;overflow:hidden;border:1px solid var(--line)}
.th::before{content:"";position:absolute;left:12%;right:12%;top:16%;bottom:-8%;border-radius:12px 12px 0 0;background:rgba(255,255,255,.88);box-shadow:0 20px 40px -10px rgba(0,0,0,.35)}
.th::after{content:"";position:absolute;left:18%;top:24%;width:44%;height:12px;border-radius:6px;background:#101C2E;box-shadow:0 26px 0 -3px #C9D0DC,0 46px 0 -3px #C9D0DC}
.t1{background:linear-gradient(135deg,#C99B4B,#7A5A22)}.t2{background:linear-gradient(135deg,#2B4A7A,#101C2E)}.t3{background:linear-gradient(135deg,#3C7A6E,#12312C)}
.case h3{font-size:1.4rem}.case p{color:var(--muted);font-size:.95rem;margin-top:6px}.case b{color:var(--brass);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.step{position:relative}
.step b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--brass);color:var(--brass);font:500 1.15rem var(--serif);margin-bottom:22px}
.step h3{font-size:1.3rem;margin-bottom:8px}.step p{color:var(--muted);font-size:.95rem}
.quote{background:var(--soft);border-radius:28px;padding:64px}
.quote blockquote{margin:0;font:400 clamp(1.5rem,3vw,2.3rem)/1.3 var(--serif);max-width:30ch}
.quote cite{display:block;margin-top:28px;font-style:normal;color:var(--muted);font-size:.95rem}
details{border-top:1px solid var(--line);padding:24px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:500 1.3rem var(--serif);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--brass);font-size:1.5rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin-top:14px;max-width:62ch}
.faq{max-width:820px}
.contact{background:radial-gradient(50% 80% at 90% 0,rgba(217,182,111,.18),transparent 60%),#0A1424}
.contact .g{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact .lead{margin-bottom:0}
.f{display:grid;gap:16px}
label{font-size:.9rem;font-weight:600;display:grid;gap:7px}
input,textarea,select{font:inherit;color:var(--ink);background:#12213A;border:1px solid #2C4163;border-radius:12px;padding:14px 16px;width:100%}
textarea{min-height:120px;resize:vertical}
.ok{display:none;color:var(--brass);font-weight:600}
footer{padding:30px 0;border-top:1px solid #22344F;color:var(--muted);font-size:.9rem}
footer .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){
 nav ul{display:none}.hero{padding:56px 0 72px}
 .hero .w,.hd,.contact .g,.bento,.work{grid-template-columns:1fr}
 .stage{min-height:420px}.card.app{grid-row:auto}
 .steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
 section{padding:68px 0}.quote{padding:36px 28px}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}.phone{width:140px;height:280px}header .btn.sm{display:none}}


.btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,155,75,.6)}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%)}
.btn:not(.ghost):hover::after{transform:translateX(120%);transition:transform .7s}
.hero .w{z-index:1}.hero::after{content:"";position:absolute;z-index:0;width:540px;height:540px;right:-120px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(217,182,111,.3),transparent 65%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(-140px,140px) scale(1.2)}}
@keyframes float{50%{transform:translateY(-12px)}}
.mock{animation:float 8s ease-in-out infinite;translate:calc(var(--mx,0)*-10px) calc(var(--my,0)*-8px)}
.phone{animation:float 6s ease-in-out -2s infinite reverse;translate:calc(var(--mx,0)*18px) calc(var(--my,0)*14px)}
.chip{animation:float 5s ease-in-out -1s infinite;translate:calc(var(--mx,0)*26px) calc(var(--my,0)*18px)}
.card{transition:translate .35s,border-color .35s}.card:hover{translate:0 -6px;border-color:var(--brass)}
html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .35s,border-color .35s}
html.js .rv.in{opacity:1;transform:none}
html.js .steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s .3s cubic-bezier(.2,.7,.2,1)}html.js .steps.in::before{transform:scaleX(1)}
details[open] p{animation:rise .5s both}
.act{display:flex;align-items:center;gap:12px}
.lg{font:600 .9rem var(--sans);color:var(--ink);background:transparent;border:1px solid #3A4F70;border-radius:999px;padding:10px 18px;cursor:pointer;transition:border-color .25s,color .25s}.lg:hover{border-color:var(--brass);color:var(--brass)}
html[lang=ar]{--serif:"Noto Naskh Arabic","Amiri",Georgia,serif;--sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang=ar] body{line-height:1.85}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.4}
html[lang=ar] h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
html[dir=rtl] .mock{left:auto;right:0}
html[dir=rtl] .phone{right:auto;left:0}
html[dir=rtl] .chip{left:auto;right:-6px}
html[dir=rtl] .hero::after{right:auto;left:-120px;animation-name:driftr}
@keyframes driftr{to{transform:translate(140px,140px) scale(1.2)}}
html[dir=rtl] .card li::before{margin:0 0 0 12px}
html[dir=rtl] .steps::before,html[dir=rtl] nav a::after{transform-origin:right}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel]{direction:ltr;text-align:right}
.nav{transition:height .3s}header.hs .nav{height:60px}
nav a{position:relative}nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s}nav a:hover::after{transform:scaleX(1)}
header{position:fixed;left:0;right:0;width:100%}
header.dk{background:rgba(10,20,36,.9)}
body{position:relative}
main{padding-top:76px}
@media (max-width:520px){main{padding-top:68px}}
.stage .mock{top:34px}
.tag{position:absolute;top:0;inset-inline-start:0;z-index:3;height:32px;width:190px;background:rgba(18,33,58,.92);border:1px solid #3A4F70;border-radius:999px;font-weight:600;font-size:.88rem;display:flex;align-items:center}
.tag::before{content:"";position:absolute;inset-inline-start:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px rgba(217,182,111,.25)}
.tag span{position:absolute;inset-inline-start:34px;opacity:0;animation:tg 12s infinite both}
.tag span:nth-child(2),.scene:nth-child(2){animation-delay:4s}.tag span:nth-child(3),.scene:nth-child(3){animation-delay:8s}
@keyframes tg{0%{opacity:0;transform:translateY(10px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-10px)}}
.mock .sc{position:relative;height:316px}
.scene{position:absolute;inset:0;padding:24px;display:grid;gap:14px;align-content:start;opacity:0;animation:tg 12s infinite both}
.mock .bt{height:34px;width:120px;border-radius:17px;background:linear-gradient(135deg,#E6C98A,#C99B4B)}
.mock .cart{position:relative;width:26px;height:22px;border-radius:6px;background:#101C2E}
.mock .cart b{position:absolute;top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;background:#C99B4B;animation:pop 12s 4s infinite both}
@keyframes pop{0%,8%{transform:scale(0)}12%{transform:scale(1.35)}16%,100%{transform:scale(1)}}
.mock .pb{height:62px;border-radius:12px;background:linear-gradient(110deg,#101C2E,#2B4A7A)}
.mock .pr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock .pc{display:grid;gap:7px}.mock .pc u{display:block;height:96px;border-radius:10px}.mock .pc i{display:block;height:8px;width:80%;border-radius:4px;background:#C3CAD6}.mock .pc em{display:block;height:16px;width:46px;border-radius:8px;background:#C99B4B}
.mock .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock .kp div{height:54px;border-radius:10px;background:#E9EDF3;padding:12px}.mock .kp b{display:block;height:10px;width:60%;border-radius:5px;background:#101C2E}.mock .kp div:nth-child(2) b{background:#C99B4B}
.mock .ch{height:130px;display:flex;align-items:flex-end;gap:12px;padding:0 6px;border-bottom:1px solid #D5DBE5}
.mock .ch i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(#C99B4B,#E6C98A);transform-origin:bottom;animation:grow 12s calc(8s + var(--i)*.12s) infinite both}
@keyframes grow{0%,1%{transform:scaleY(.08)}12%,100%{transform:none}}
.phone .scene{inset:26px 14px;padding:0;gap:10px}
.phone .sq{display:grid;grid-template-columns:1fr 1fr;gap:8px}.phone .sq u{display:block;height:62px;border-radius:10px;background:linear-gradient(135deg,#E6C98A,#C99B4B)}.phone .sq u:nth-child(2){background:linear-gradient(135deg,#3C7A6E,#1C4A42)}.phone .sq u:nth-child(3){background:linear-gradient(135deg,#2B4A7A,#1C2E4D)}.phone .sq u:nth-child(4){background:linear-gradient(135deg,#8A6AA8,#4B3A66)}
.phone .ring{width:84px;height:84px;border-radius:50%;margin:4px auto;background:conic-gradient(#D9B66F 0 72%,#1E2F4C 0);-webkit-mask:radial-gradient(circle 28px,transparent 98%,#000);mask:radial-gradient(circle 28px,transparent 98%,#000)}
.mb{display:none;width:44px;height:44px;border:1px solid #3A4F70;border-radius:50%;background:transparent;position:relative;cursor:pointer}
.mb::before,.mb::after{content:"";position:absolute;left:13px;right:13px;height:1.5px;background:#EEF1F6;transition:transform .3s,top .3s}
.mb::before{top:17px}.mb::after{top:26px}
header.open .mb::before{top:21px;transform:rotate(45deg)}header.open .mb::after{top:21px;transform:rotate(-45deg)}
@media (max-width:900px){
 .mb{display:block}
 header.open nav ul{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;gap:0;padding:8px 24px 20px;background:#0A1424;border-bottom:1px solid #22344F}
 header.open nav a{display:block;padding:14px 0;font-size:1.1rem;color:#EEF1F6}
 header.open nav li+li{border-top:1px solid #22344F}
}
@media (max-width:520px){
 h1{font-size:2.3rem}h2{font-size:1.85rem}html[lang=ar] h1{font-size:2.1rem}
 .cta .btn{flex:1 1 100%;text-align:center}
 .proof{gap:22px 26px}.proof b{font-size:1.6rem}
 .card{padding:26px}.card.full{gap:18px}
 .nav{height:68px}
 .stage{min-height:410px}.mock .sc{height:290px}
 .mock{width:94%}.mock .g div{height:64px}.mock .pc u{height:72px}.mock .ch{height:104px}
 .phone{width:118px;height:238px;border-width:5px}.phone .scene{inset:20px 10px}
 .chip{left:0;bottom:2px}
 .quote{padding:30px 22px}
 summary{font-size:1.15rem}
}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.four{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.four{grid-template-columns:1fr}}
.direct{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.coord{margin-top:36px;padding:28px}.coord h3{font-size:1.35rem;margin-bottom:18px}.crow{display:grid;gap:2px;margin-bottom:16px}.cl{font-size:.88rem;color:var(--muted)}.cv{font:500 1.15rem var(--serif);text-decoration:none;color:var(--ink);word-break:break-all}.cv:hover{color:var(--brass)}.coord .direct{margin-top:22px}html[dir=rtl] .cv{text-align:right}.note{margin-top:18px;color:var(--muted);font-size:.95rem}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:5px;border:1px solid #2C4163;border-radius:999px;width:fit-content;max-width:100%}
.tabs button{font:600 .92rem var(--sans);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:11px 20px;cursor:pointer}
.tabs button.on{background:#D9B66F;color:#0A1424}
.f[hidden]{display:none}
.wa{position:fixed;z-index:35;inset-inline-end:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .25s}.wa:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.scene,.tag span,.cart b,.ch i{animation:none}.scene,.tag span{opacity:0}.scene:first-child,.tag span:first-child{opacity:1}.ch i{transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rise>*,.stage,.mock,.phone,.chip,.hero::after,details[open] p{animation:none}}
.lgs{display:flex;gap:2px;padding:3px;border:1px solid #3A4F70;border-radius:999px}.lgs button{font:600 .82rem var(--sans);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .2s,color .2s}.lgs button:hover{color:var(--ink)}.lgs button.on{background:#D9B66F;color:#0A1424}
/* ===== Ajouts multi-pages ===== */
.s0{padding-top:0}
.lgs a{font:600 .82rem var(--sans);color:var(--muted);background:transparent;border-radius:999px;padding:7px 12px;text-decoration:none;transition:background .2s,color .2s}
.lgs a:hover{color:var(--ink)}.lgs a.on{background:#D9B66F;color:#0A1424}
.logo{color:#EEF1F6}
.phero{padding:56px 0 60px;background:radial-gradient(60% 90% at 90% 0,rgba(217,182,111,.2),transparent 60%),radial-gradient(50% 70% at 0 100%,rgba(70,110,190,.18),transparent 60%),#0A1424}
.phero h1{font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:22ch;margin-bottom:22px}
.phero .lead{margin:0 0 34px;max-width:60ch}
.phero .meta{color:var(--muted);font-size:.95rem;margin-top:6px}
.crumbs{margin-bottom:26px;font-size:.9rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-inline-end:6px;opacity:.6}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--brass)}
.crumbs [aria-current]{color:var(--brass)}
.card h3 a.sl,a.sl{text-decoration:none;color:inherit}
a.sl:hover{color:var(--brass)}
a.more{display:inline-block;margin-top:18px;color:var(--brass);font-weight:600;text-decoration:none}
a.more::after{content:" →"}html[dir=rtl] a.more::after{content:" ←"}
a.more:hover{text-decoration:underline}
.card.post{display:flex;flex-direction:column}.card.post .meta{margin-top:14px;font-size:.85rem;color:var(--muted)}.card.post a.more{margin-top:auto;padding-top:18px}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.incl li{position:relative;padding:16px 20px 16px 48px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.incl li::before{content:"";position:absolute;left:20px;top:22px;width:10px;height:6px;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
html[dir=rtl] .incl li{padding:16px 48px 16px 20px}html[dir=rtl] .incl li::before{left:auto;right:20px}
.prose{max-width:760px}.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);max-width:none;margin:40px 0 14px}.prose p{color:var(--muted);margin:0 0 18px}.prose a{color:var(--brass)}.prose strong{color:var(--ink)}
.prose mark{background:#3a2f12;color:#f4d98f;padding:1px 6px;border-radius:5px}
.rel{padding-inline-start:20px;color:var(--muted)}.rel a{color:var(--brass)}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px;color:var(--muted)}
.chips a{border:1px solid var(--line);border-radius:999px;padding:7px 16px;text-decoration:none;font-size:.92rem}.chips a:hover{border-color:var(--brass);color:var(--brass)}
.seo h2{max-width:26ch;margin-bottom:18px}.seo p{color:var(--muted);max-width:70ch}
footer .w{display:block}
footer{padding:56px 0 28px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;padding-bottom:36px;border-bottom:1px solid #22344F}
.fgrid h4{font:600 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 16px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fgrid a{color:var(--muted);text-decoration:none}.fgrid a:hover{color:var(--ink)}
.fgrid .fb p{margin-top:18px;max-width:34ch;font-size:.92rem}
.fgrid .fb a.logo{color:#EEF1F6}
.fbot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:24px;font-size:.88rem}
.fbot a{color:var(--muted);text-decoration:none}
.ok.err{color:#FF9C8A}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .fb{grid-column:1/-1}.incl{grid-template-columns:1fr}.phero{padding:40px 0 48px}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* Pages intérieures : bandeau compact, contenu visible dès le premier écran */
.phero{padding:36px 0 40px}
.phero h1{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px}
.phero .lead{margin:0 0 26px;font-size:1.1rem}
.crumbs{margin-bottom:18px}
.phero+section{padding-top:56px}
.phero+.contact{padding-top:56px}
.phero+.contact h2{font-size:clamp(1.7rem,3vw,2.4rem)}
@media (max-width:900px){.phero{padding:28px 0 32px}.phero+section,.phero+.contact{padding-top:40px}}