@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Cairo:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{
--ink:#2E2230;--ink-dim:#6E5E64;--ink-faint:#A0919A;
--bg:#FBF7F2;--bg-2:#F3EAE0;--bg-3:#3D2040;
--panel:#FFFFFF;--panel-brd:#E7DCCF;
--gold:#C9A96E;--gold-2:#A9863F;--gold-deep:#8C6E33;
--plum:#3D2040;--plum-2:#5A3A5E;--rose:#C0848E;--blush:#F3DCDF;
--surface-deep:#3D2040;
/* text on a gold surface, and the gold surface itself — identical in both themes */
--on-gold:#1B0E1F;--gold-surface:#C9A96E;--gold-surface-end:#A9863F;
--radius:14px;--maxw:1280px;
--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:40px;--sp-5:64px;--sp-6:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Poppins',sans-serif;line-height:1.6;overflow-x:hidden;font-size:15px}
[data-lang="ar"] body,body[data-lang="ar"]{font-family:'Cairo',sans-serif}
[data-lang="ru"] body,body[data-lang="ru"]{font-family:'Montserrat',sans-serif}
/* A button is not a link for colour purposes: it carries its own foreground, and a link
   rule reaching inside one puts light gold on a gold surface. */
a{color:var(--gold-2);text-decoration:none}
a:not(.btn):hover{color:var(--gold-deep)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.01em;text-wrap:pretty;color:var(--plum)}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-3)}
@media(max-width:768px){.container{padding-inline:var(--sp-2)}}
.section{padding-block:var(--sp-6)}
@media(max-width:768px){.section{padding-block:var(--sp-4)}}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.h1{font-size:clamp(34px,5.5vw,64px);line-height:1.08;color:var(--plum)}
.h2{font-size:clamp(28px,4vw,44px);line-height:1.12;color:var(--plum);max-width:20ch}
.h3{font-size:clamp(20px,2.4vw,26px);color:var(--plum)}
.lead{font-size:17px;color:var(--ink-dim);max-width:640px}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.center{text-align:center;margin-inline:auto}
.rule-gold{width:52px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;margin-block:18px}
.center .rule-gold{margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,color .25s;white-space:nowrap}
.btn-gold{background:linear-gradient(135deg,var(--gold-surface),var(--gold-surface-end));color:var(--on-gold);box-shadow:0 8px 26px -8px rgba(169,134,63,.55)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(169,134,63,.65)}
.btn-ghost{border-color:var(--panel-brd);color:var(--plum)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

.hdr{position:fixed;inset-inline:0;top:0;z-index:100;transition:background .3s,backdrop-filter .3s,padding .3s,box-shadow .3s;padding-block:22px}
.hdr.scrolled{background:rgba(251,247,242,.92);backdrop-filter:blur(14px);padding-block:14px;box-shadow:0 1px 0 var(--panel-brd)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--plum);white-space:nowrap;flex-shrink:0}
.hdr-logo img{height:30px;width:auto}
.hdr-nav{display:flex;align-items:center;gap:22px}
.hdr-nav a{font-size:13px;font-weight:500;color:var(--ink-dim);position:relative;white-space:nowrap}
.hdr-nav a:hover{color:var(--plum)}
.hdr-nav a.active{color:var(--gold-deep)}
.hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--panel-brd);background:var(--panel);color:var(--plum);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold-deep)}
.theme-toggle svg{display:block}
@media(max-width:1180px){.hdr-nav{gap:14px}.hdr-nav a{font-size:12.5px}.btn.cta-hdr{padding:12px 18px}}
.lang-switch{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--panel-brd);border-radius:999px;font-size:12px;color:var(--ink-dim);background:#fff}
.lang-btn:hover{color:var(--gold-deep);border-color:var(--gold)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--panel-brd);border-radius:12px;padding:6px;min-width:150px;box-shadow:0 20px 50px -10px rgba(61,32,64,.18);z-index:50}
.lang-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;background:none;border:none;color:var(--ink-dim);font-size:13px;text-align:start}
.lang-menu button:hover{background:var(--bg-2);color:var(--plum)}
.lang-menu button.active{color:var(--gold-deep)}
.burger{display:none;flex-direction:column;gap:5px;width:26px;background:none;border:none;padding:6px}
.burger span{height:2px;background:var(--plum);border-radius:2px;transition:transform .3s,opacity .3s}
@media(max-width:1080px){.hdr-nav{display:none}.hdr .cta-hdr{display:none}.burger{display:flex}}
.mobile-nav{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;padding:100px var(--sp-3) var(--sp-3);transform:translateY(-100%);transition:transform .4s cubic-bezier(.6,0,.2,1);overflow-y:auto}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a:not(.btn){color:var(--plum)}
.mobile-nav a{font-size:24px;font-weight:600;padding-block:14px;border-bottom:1px solid var(--panel-brd)}
.mobile-nav .close-btn{position:absolute;top:24px;inset-inline-end:24px;width:40px;height:40px;border-radius:50%;border:1px solid var(--panel-brd);background:#fff;color:var(--plum);font-size:18px}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:130px;padding-bottom:70px;overflow:hidden;background:var(--plum)}
/* Its own surface token, not the heading colour. --plum is text, and dark mode flips it to
   near-white — which turned this backdrop near-white behind white hero text. */
.heroV{position:relative;height:220vh;background:var(--surface-deep)}
.pre{position:fixed;inset:0;z-index:9999;background:#150A18;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .6s ease,visibility .6s}
.pre.out{opacity:0;visibility:hidden}
.pre-grain{position:absolute;inset:-20%;background:radial-gradient(ellipse at 20% 20%,rgba(201,169,110,.16),transparent 55%),radial-gradient(ellipse at 80% 75%,rgba(192,132,142,.12),transparent 60%);animation:preDrift 14s ease-in-out infinite alternate}
@keyframes preDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.08)}}
.pre-inner{position:relative;z-index:1;width:100%;max-width:640px;padding:var(--sp-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.pre-logo{width:clamp(110px,13vw,168px);height:auto;opacity:0;animation:preIn .8s cubic-bezier(.2,.7,.2,1) .1s forwards}
.pre-fact-wrap{min-height:2.9em;max-width:24ch}
.pre-fact{font-size:clamp(20px,2.6vw,30px);line-height:1.28;color:#F6F1EC;font-weight:500;text-wrap:pretty;animation:preIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.pre-bar{position:relative;height:2px;width:100%;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.pre-bar span{position:absolute;inset:0;display:block;background:linear-gradient(90deg,#C9A96E,#F0D9A8);transform-origin:0 50%;transition:transform .25s linear}
[dir="rtl"] .pre-bar span{transform-origin:100% 50%}
.pre-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%}
.pre-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(240,217,168,.75);font-weight:600}
.pre-pct{font-size:13px;color:rgba(246,241,236,.55);font-variant-numeric:tabular-nums}
@keyframes preIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.heroV-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.heroV-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroV-cnv{opacity:0;transition:opacity .4s ease}
.heroV-sticky .hero-vignette{z-index:1;background:linear-gradient(90deg,rgba(21,10,24,.62),rgba(21,10,24,.18) 55%,rgba(21,10,24,0)),linear-gradient(180deg,rgba(21,10,24,.35),rgba(21,10,24,0) 30%,rgba(21,10,24,0) 75%,rgba(21,10,24,.45))}
[dir="rtl"] .heroV-sticky .hero-vignette{background:linear-gradient(270deg,rgba(21,10,24,.62),rgba(21,10,24,.18) 55%,rgba(21,10,24,0)),linear-gradient(180deg,rgba(21,10,24,.35),rgba(21,10,24,0) 30%,rgba(21,10,24,0) 75%,rgba(21,10,24,.45))}
.heroV-stage{position:absolute;inset:0;display:flex;align-items:center;z-index:2;pointer-events:none;will-change:opacity,transform}
.heroV-stage .btn{pointer-events:auto}
.heroV-center{justify-content:center}
.hdr .container{max-width:none}
.heroV-stage .container{max-width:none;margin-inline:0;padding-inline-start:var(--sp-4)}
[dir="rtl"] .heroV-stage>.container{direction:ltr;padding-inline:var(--sp-4) 0;flex:1 1 auto;width:100%}
[dir="rtl"] .heroV-stage .hero-content,[dir="rtl"] .heroV-stage .heroV-pillars,[dir="rtl"] .heroV-stage>.container>.h2{direction:rtl;text-align:left;max-width:640px;margin-right:auto;margin-left:0}
[dir="rtl"] .heroV-stage .hero-ctas{justify-content:flex-start}
/* The scroll-driven hero words stack in a COLUMN, so their cross axis is horizontal — and in
   a right-to-left box the cross-start edge is the RIGHT one. align-items:flex-start therefore
   pinned تسويق / تقنية / أعمال to the right of the composition, hard against the screen edge
   on a phone. flex-end is the cross-END, which in RTL is the left. The words keep direction
   rtl from the rule above, so Arabic still shapes and reads correctly; only the block's
   horizontal placement moves. English is untouched — it never matches [dir="rtl"]. */
[dir="rtl"] .heroV-stage .heroV-pillars{align-items:flex-end}
.heroV-pillars{display:flex;flex-direction:column;gap:6px;text-align:start}
.heroV-pillar{font-size:clamp(34px,6.2vw,86px);font-weight:700;line-height:1.16;letter-spacing:-.01em;color:rgba(255,255,255,.2);transition:color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.heroV-pillar.on{color:#F0D9A8;text-shadow:0 0 60px rgba(201,169,110,.45)}
.heroV-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none}
.heroV-hint-line{display:block;width:1px;height:46px;background:linear-gradient(180deg,rgba(240,217,168,0),#F0D9A8);animation:heroHint 1.8s ease-in-out infinite}
@keyframes heroHint{0%{transform:scaleY(.2);transform-origin:top;opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
.heroV-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#C9A96E,#F0D9A8);transform:scaleX(0);transform-origin:0 50%;z-index:3}
[dir="rtl"] .heroV-bar{transform-origin:100% 50%}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg image-slot{width:100%;height:100%;object-fit:cover}
.hero-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 30% 45%,rgba(21,10,24,.15),rgba(21,10,24,.72) 68%),linear-gradient(180deg,rgba(21,10,24,.55),rgba(21,10,24,.3) 30%,rgba(21,10,24,.75))}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;opacity:.35;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:680px}
.hero-content .h1,.hero-content .eyebrow{color:#fff}
.hero-content .lead{color:rgba(255,255,255,.78)}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.kw{display:inline-block;opacity:0;transform:translateY(26px);animation:kineticIn .8s cubic-bezier(.2,.7,.2,1) forwards}
h1.h1{display:block}
h1.h1 .kw{white-space:pre}
@keyframes kineticIn{to{opacity:1;transform:translateY(0)}}

.grid{display:grid;gap:var(--sp-3);align-items:stretch}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);padding:28px;min-height:270px;transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 20px 40px -20px rgba(61,32,64,.18)}
.icon-badge{width:46px;height:46px;border-radius:12px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);margin-bottom:16px;flex-shrink:0;background:var(--blush)}
.service-card{position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;border-color:transparent;background:linear-gradient(160deg,var(--panel) 60%,rgba(201,169,110,.06)) padding-box,linear-gradient(135deg,var(--gold) 0%,var(--panel-brd) 35%,var(--panel-brd) 65%,var(--rose) 100%) border-box;border:1px solid transparent}
.service-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% -10%,rgba(201,169,110,.16),transparent 55%)}
.service-card::after{content:'';position:absolute;bottom:0;insetInlineStart:0;insetInlineEnd:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--rose));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.service-card:hover::after{transform:scaleX(1)}
.service-card:hover{transform:translateY(-8px) rotate(-.4deg)}
.service-card .num{position:absolute;top:16px;inset-inline-end:20px;font-size:56px;font-weight:800;color:transparent;-webkit-text-stroke:1px var(--panel-brd);transition:transform .4s cubic-bezier(.2,.7,.2,1),-webkit-text-stroke .4s}
.service-card:hover .num{transform:translateY(-4px);-webkit-text-stroke:1px var(--rose)}
.service-card p{margin-top:auto;padding-top:8px}

.card-feature{position:relative;overflow:visible}
.card-feature::after{content:'';position:absolute;bottom:0;insetInlineStart:28px;insetInlineEnd:28px;height:2px;background:linear-gradient(90deg,var(--gold),var(--rose));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card-feature:hover::after{transform:scaleX(1)}
.card-feature .icon-badge{position:relative}
.card-feature .icon-badge::before{content:'';position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.35),transparent 70%);opacity:0;transition:opacity .4s;z-index:-1}
.card-feature:hover .icon-badge::before{opacity:1}

.process-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:40px}
.process-row::before{content:'';position:absolute;top:19px;insetInlineStart:6%;insetInlineEnd:6%;height:1px;background:linear-gradient(90deg,transparent,var(--panel-brd) 10%,var(--panel-brd) 90%,transparent)}
@media(max-width:900px){.process-row{grid-template-columns:repeat(2,1fr)}.process-row::before{display:none}}
@media(max-width:560px){.process-row{grid-template-columns:1fr}}
.card-process{position:relative;background:none;border:none;padding:0;min-height:auto;text-align:center;display:flex;flex-direction:column;align-items:center;transition:transform .35s}
.card-process:hover{transform:translateY(-6px)}
.card-process .dot{width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--gold);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;position:relative;z-index:1;transition:background .3s,color .3s}
.card-process:hover .dot{background:var(--gold);color:#fff}
.card-process h3{margin-top:16px}



.list-row{position:relative;display:flex;align-items:center;gap:22px;padding:26px 8px;border-bottom:1px solid var(--panel-brd);text-decoration:none;color:inherit;overflow:hidden}
.list-row::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,169,110,.1),transparent 60%);transform:translateX(-100%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.list-row:hover::before{transform:translateX(0)}
.list-row:first-child{border-top:1px solid var(--panel-brd)}
.lr-num{font-size:15px;font-weight:700;color:var(--ink-faint);width:34px;flex-shrink:0;transition:color .3s}
.list-row:hover .lr-num{color:var(--gold)}
.lr-icon{flex-shrink:0;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.list-row:hover .lr-icon{transform:rotate(-8deg) scale(1.08)}
.lr-body{flex:1;min-width:0}
.lr-arrow{flex-shrink:0;color:var(--ink-faint);transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s}
.list-row:hover .lr-arrow{transform:translateX(6px);color:var(--gold)}
@media(max-width:640px){.list-row{gap:14px}.lr-icon{display:none}}

.testi-stage{position:relative;max-width:700px;margin:0 auto;text-align:center;padding:20px 0}
.qmark-big{font-size:80px;font-family:Georgia,serif;color:var(--gold);opacity:.35;line-height:1}
.testi-slide{animation:testiIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes testiIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.testi-quote{font-size:20px;line-height:1.55;font-weight:500}
.testi-who{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;text-align:start}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.testi-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--panel-brd);cursor:pointer;padding:0;transition:background .3s,transform .3s}
.testi-dot.active{background:var(--gold);transform:scale(1.3)}

.showcase{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:stretch;min-height:460px}
.sc-item{display:flex;flex-direction:column;gap:8px;text-align:start;background:none;border:none;padding:18px 4px;cursor:pointer;color:var(--ink-faint);border-bottom:1px solid var(--panel-brd)}
.sc-item:first-child{border-top:1px solid var(--panel-brd)}
.sc-num{font-size:12px;font-weight:700;letter-spacing:.08em}
.sc-title{font-size:19px;font-weight:700;color:var(--ink-dim);transition:color .3s}
.sc-item.active .sc-title,.sc-item.active .sc-num{color:var(--ink)}
.sc-item.active .sc-num{color:var(--gold-deep)}
.sc-bar{display:block;height:2px;background:var(--panel-brd);border-radius:2px;overflow:hidden}
.sc-bar-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--rose));transform:scaleX(0);transform-origin:left}
.showcase-panel{position:relative;border-radius:var(--radius);overflow:hidden;display:block;min-height:340px}
.showcase-panel image-slot{position:absolute;inset:0;animation:scFade .7s ease}
@keyframes scFade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
.showcase-panel-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;background:linear-gradient(180deg,transparent 30%,rgba(21,10,24,.85))}
@media(max-width:840px){.showcase{grid-template-columns:1fr;min-height:auto}.showcase-panel{min-height:280px}}

.why-diag{display:flex;flex-direction:column;gap:0}
.why-item{width:60%;padding:26px 0;border-bottom:1px solid var(--panel-brd)}
.why-item:first-child{border-top:1px solid var(--panel-brd)}
.why-item.alt{align-self:flex-end;text-align:end}
.why-item.alt .icon-badge{margin-inline-start:auto}
.why-num{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:10px}
@media(max-width:760px){.why-item,.why-item.alt{width:100%;align-self:auto;text-align:start}.why-item.alt .icon-badge{margin-inline-start:0}}

.project-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-brd);background:var(--panel);display:flex;flex-direction:column;height:100%}
.project-card image-slot{aspect-ratio:4/3;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project-card:hover image-slot{transform:scale(1.07)}
.project-card .pc-body{padding:20px 22px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .pc-body{transform:translateY(-3px)}
.project-card .pc-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.project-card:hover{border-color:var(--gold);box-shadow:0 24px 46px -22px rgba(61,32,64,.28)}
.product-card{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;height:100%;transition:transform .3s,border-color .3s,box-shadow .3s}
.product-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 20px 40px -20px rgba(61,32,64,.22)}
.product-card image-slot{aspect-ratio:1/1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product-card:hover image-slot{transform:scale(1.05)}
.product-card .pc-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card .pc-price{color:var(--gold-deep);font-weight:600;font-size:15px;margin-top:auto}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:12.5px;color:var(--ink-dim);font-weight:500}
.field label .req{color:var(--rose)}
.input,.select,.textarea{background:#fff;border:1px solid var(--panel-brd);border-radius:10px;padding:13px 15px;color:var(--ink);font-size:14px;font-family:inherit;width:100%;transition:border-color .2s,box-shadow .2s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,110,.18)}
.input.err,.select.err,.textarea.err{border-color:#C55763}
.errtext{font-size:11.5px;color:#C55763}
.textarea{resize:vertical;min-height:110px}
select.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6' fill='%23A9863F'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-inline-end:36px}
[dir="rtl"] select.select{background-position:left 15px center}
.radio-row,.check-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--panel-brd);font-size:13px;color:var(--ink-dim);background:#fff;transition:all .2s}
.chip.active,.chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.chip.active{background:var(--blush)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--panel-brd);border-radius:10px;background:#fff}
.switch{width:42px;height:24px;border-radius:999px;background:var(--panel-brd);position:relative;transition:background .2s;flex-shrink:0;border:none}
.switch::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--gold)}
.switch.on::after{inset-inline-start:calc(100% - 21px)}
.upload-box{border:1.5px dashed var(--panel-brd);border-radius:12px;padding:30px 20px;text-align:center;color:var(--ink-faint);font-size:13px;cursor:pointer;transition:border-color .2s,background .2s;background:#fff}
.upload-box:hover{border-color:var(--gold);background:var(--blush)}
.upload-box svg{margin-inline:auto;margin-bottom:10px}

.accordion-item{border-bottom:1px solid var(--panel-brd)}
.accordion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 4px;background:none;border:none;color:var(--plum);font-size:15px;font-weight:500;text-align:start}
.accordion-btn:hover{color:var(--gold-deep)}
.accordion-chevron{transition:transform .3s;flex-shrink:0}
.accordion-item.open .accordion-chevron{transform:rotate(180deg)}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-panel-inner{padding:0 4px 18px;color:var(--ink-dim);font-size:13.5px;line-height:1.75}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{padding:10px 18px;border-radius:999px;border:1px solid var(--panel-brd);font-size:13px;color:var(--ink-dim);background:#fff}
.tab.active{background:var(--gold);color:#fff;border-color:var(--gold)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.badge-gold{background:var(--blush);color:var(--gold-deep);border:1px solid rgba(169,134,63,.35)}
.badge-ok{background:rgba(94,196,120,.12);color:#3E9A5D;border:1px solid rgba(94,196,120,.4)}
.msg{padding:14px 18px;border-radius:10px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.msg-ok{background:rgba(94,196,120,.1);border:1px solid rgba(94,196,120,.35);color:#2E7A47}
.msg-err{background:rgba(197,87,99,.08);border:1px solid rgba(197,87,99,.3);color:#A5404B}

.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-faint);margin-bottom:20px;flex-wrap:wrap}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--gold-deep)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:36px}
.page-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--panel-brd);background:#fff;color:var(--ink-dim);font-size:13px}
.page-btn.active{background:var(--gold);color:#fff;border-color:var(--gold)}

.overlay{position:fixed;inset:0;background:rgba(46,34,48,.4);backdrop-filter:blur(3px);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(420px,92vw);background:#fff;z-index:301;transform:translateX(110%);transition:transform .4s cubic-bezier(.6,0,.2,1);display:flex;flex-direction:column;border-inline-start:1px solid var(--panel-brd)}
[dir="rtl"] .drawer{transform:translateX(-110%)}
.drawer.open{transform:translateX(0)}
.drawer-hd{padding:22px 22px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--panel-brd)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-ft{padding:20px 22px;border-top:1px solid var(--panel-brd)}
.cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--panel-brd)}
.cart-line image-slot{width:64px;height:64px;border-radius:8px;flex-shrink:0}
.cart-line .cl-name{font-size:13.5px;font-weight:500;color:var(--plum)}
.cart-line .cl-opts{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.qty-stepper{display:flex;align-items:center;gap:10px;border:1px solid var(--panel-brd);border-radius:8px;padding:4px 8px;width:fit-content}
.qty-stepper button{background:none;border:none;color:var(--ink-dim);font-size:15px;width:20px}
.icon-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--panel-brd);background:#fff;color:var(--plum);display:flex;align-items:center;justify-content:center}

/* The footer is a dark surface in BOTH themes, so the on-light text tokens have no business
   inside it — .muted and .faint were painting #6E5E64 onto dark plum at 2.3:1. Redefining the
   tokens here rather than overriding each class means anything that lands in the footer later
   inherits the on-dark palette automatically. */
.footer{background:var(--surface-deep);color:rgba(255,255,255,.7);padding-block:var(--sp-5) var(--sp-3)}
/* .muted and .faint are context-blind: they name a tone for a light surface and the footer is
   a dark one in both themes, so they were painting #6E5E64 onto dark plum at 2.3:1. Scoped to
   the footer rather than redefined as tokens, because components that bring their own light
   surface (.lang-btn) also live in here and must keep their own foreground. */
.footer .muted,.footer .faint{color:rgba(255,255,255,.66)}
.footer h1,.footer h2,.footer h3,.footer h4{color:#fff}
.footer .hdr-logo{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:32px}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer li{margin-bottom:10px;font-size:13.5px}
.footer li a{color:rgba(255,255,255,.65)}
.footer li a:hover{color:var(--gold)}
.footer .icon-close{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;color:rgba(255,255,255,.5)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{color:rgba(255,255,255,.5)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.marquee{display:flex;gap:56px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;animation:marquee 32s linear infinite;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
[dir="rtl"] .marquee-track{animation-direction:reverse}
.reveal{opacity:0;transform:translateY(30px) scale(.96);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.tilt{transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;transform-style:preserve-3d}
.tilt image-slot,.tilt img{display:block}
@keyframes glowPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.65;transform:scale(1.08)}}
.hero-glow{animation:glowPulse 7s ease-in-out infinite}
.hero-glow:nth-of-type(2){animation-delay:-3.2s}
.hero-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-sweep::before{content:'';position:absolute;top:-20%;bottom:-20%;width:36%;inset-inline-start:-40%;background:linear-gradient(100deg,transparent,rgba(201,169,110,.16),transparent);animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%{inset-inline-start:-40%}50%{inset-inline-start:110%}100%{inset-inline-start:110%}}
.icon-badge{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.card:hover .icon-badge{transform:rotate(-8deg) scale(1.08)}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel-brd);border-top-color:var(--gold);animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:70px 20px;color:var(--ink-faint)}
.stat-row{display:flex;gap:40px;flex-wrap:wrap}
.stat-row .stat b{font-size:26px;color:var(--gold-deep);display:block}
.stepper-nav{display:flex;gap:6px;margin-bottom:36px;flex-wrap:wrap}
.stepper-dot{flex:1;min-width:60px;text-align:center;padding-bottom:10px;border-bottom:2px solid var(--panel-brd);font-size:11px;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase}
.stepper-dot.active{border-color:var(--gold);color:var(--gold-deep)}
.stepper-dot.done{border-color:var(--gold);color:var(--ink-dim)}
.faq-page-hero{padding-top:150px;padding-bottom:40px}
.plain-page{padding-top:150px;max-width:760px}
.plain-page h2{margin-top:32px;margin-bottom:10px;font-size:20px}
.plain-page p{color:var(--ink-dim);margin-bottom:8px}
.skip-link:focus{position:fixed;top:8px;inset-inline-start:8px;background:var(--gold);color:#fff;padding:8px 14px;border-radius:8px;z-index:999}
.cur-ring{position:fixed;top:0;left:0;width:36px;height:36px;margin:-18px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.4),rgba(201,169,110,0) 72%);z-index:9998;pointer-events:none;mix-blend-mode:plus-lighter;transition:width .3s,height .3s,margin .3s,opacity .3s}
.cur-ring.hover{width:70px;height:70px;margin:-35px}
@media(max-width:900px){.cur-ring{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

[data-theme="dark"]{
--ink:#F6F1EC;--ink-dim:#C9BFC2;--ink-faint:#8A7E82;
--bg:#150A18;--bg-2:#1E1024;--panel:rgba(255,255,255,0.04);--panel-brd:rgba(201,169,110,0.22);
--gold-deep:#E4C78A;--plum:#F6F1EC;
--surface-deep:#150A18;
}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] a{color:var(--gold)}
[data-theme="dark"] a:not(.btn):hover{color:var(--gold-deep)}
[data-theme="dark"] .hdr.scrolled{background:rgba(21,10,24,.88);box-shadow:0 1px 0 var(--panel-brd)}
[data-theme="dark"] .lang-btn,[data-theme="dark"] .lang-menu,[data-theme="dark"] .input,[data-theme="dark"] .select,[data-theme="dark"] .textarea,[data-theme="dark"] .chip,[data-theme="dark"] .toggle-row,[data-theme="dark"] .upload-box,[data-theme="dark"] .tab,[data-theme="dark"] .page-btn,[data-theme="dark"] .icon-close,[data-theme="dark"] .drawer,[data-theme="dark"] .card,[data-theme="dark"] .project-card,[data-theme="dark"] .product-card,[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.04);color:var(--ink)}
[data-theme="dark"] .mobile-nav{background:var(--bg-2)}
[data-theme="dark"] .mobile-nav a:not(.btn){color:var(--ink)}
[data-theme="dark"] .hero{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
[data-theme="dark"] .footer{background:#0F0712}
[data-theme="dark"] .switch{background:rgba(255,255,255,.15)}
[data-theme="dark"] .theme-toggle{color:var(--gold)}
[data-theme="dark"] .btn-gold{background:linear-gradient(135deg,var(--gold-surface),var(--gold-surface-end));color:var(--on-gold)}
[data-theme="dark"] .icon-badge{background:rgba(201,169,110,.12);color:var(--gold);border-color:var(--gold)}


.svc-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media(max-width:900px){.svc-split{grid-template-columns:1fr;gap:28px}}
.svc-aside{position:sticky;top:120px}
.svc-aside .h2{max-width:16ch}
.svc-count{display:flex;align-items:baseline;gap:8px;margin-top:22px;color:var(--gold-deep)}
.svc-count b{font-size:34px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.svc-count span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.svc-rows{display:flex;flex-direction:column}
.svc-row{display:flex;gap:24px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--panel-brd);transition:padding-inline-start .35s cubic-bezier(.2,.7,.2,1)}
.svc-row:first-child{border-top:1px solid var(--panel-brd)}
.svc-row:hover{padding-inline-start:14px}
.svc-row-n{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold);width:30px;flex-shrink:0;font-variant-numeric:tabular-nums}
.svc-row-t{font-size:clamp(17px,1.6vw,21px);line-height:1.35;color:var(--ink);flex:1;text-wrap:pretty}
.sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:0}
@media(max-width:760px){.sol-grid{grid-template-columns:1fr;gap:0}}
.sol-item{display:flex;gap:14px;align-items:center;padding:17px 2px;border-bottom:1px solid var(--panel-brd);transition:color .3s}
.sol-item svg{flex-shrink:0;color:var(--gold);opacity:.85;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sol-item:hover svg{transform:translateX(3px) scale(1.1);opacity:1}
.sol-txt{font-size:15.5px;line-height:1.4;color:var(--ink-dim);transition:color .3s}
.sol-item:hover .sol-txt{color:var(--ink)}

.heroV-stage .hero-ctas .btn,.heroV-stage .hero-ctas .btn-gold{background:rgba(21,10,24,.42);border:1px solid rgba(201,169,110,.5);color:#F0D9A8;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.heroV-stage .hero-ctas .btn:hover{border-color:var(--gold);color:#fff;background:rgba(201,169,110,.18);transform:translateY(-2px)}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--panel-brd)}
.why-cell{padding:30px 30px 34px;border-bottom:1px solid var(--panel-brd);transition:background .35s}
.why-cell:not(:nth-child(3n+1)){border-inline-start:1px solid var(--panel-brd)}
.why-cell:hover{background:rgba(201,169,110,.06)}
.why-cell-top{display:flex;align-items:center;gap:12px}
.why-cell-n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums}
.why-cell-top svg{color:var(--gold-deep);opacity:.9}
.why-cell h3{font-size:19px;margin-top:16px;line-height:1.3;text-wrap:pretty}
.why-cell p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-dim);text-wrap:pretty}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}.why-cell:not(:nth-child(3n+1)){border-inline-start:0}.why-cell:nth-child(even){border-inline-start:1px solid var(--panel-brd)}}
@media(max-width:600px){.why-grid{grid-template-columns:1fr}.why-cell,.why-cell:nth-child(even){border-inline-start:0}.why-cell{padding:26px 2px 28px}}

.hero-ctas.kw,.heroV-stage .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.heroV-stage,.heroV-stage .h1,.heroV-stage .h2,.heroV-stage .lead,.heroV-stage .eyebrow,.heroV-pillar{cursor:default;-webkit-user-select:none;user-select:none}
.heroV-stage .btn{cursor:pointer}

[dir="rtl"] .heroV-stage .hero-ctas{direction:ltr;flex-direction:row-reverse;justify-content:flex-end}

.prod-list{display:flex;flex-direction:column;border-top:1px solid var(--panel-brd)}
.prod-row{display:grid;grid-template-columns:56px 1fr 200px;gap:24px;align-items:start;padding:34px 4px;border-bottom:1px solid var(--panel-brd);transition:background .35s}
.prod-row:hover{background:rgba(201,169,110,.05)}
.prod-n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);padding-top:8px;font-variant-numeric:tabular-nums}
.prod-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prod-name{font-size:clamp(22px,2.6vw,30px);line-height:1.15;color:var(--ink);font-weight:700}
.prod-status{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--panel-brd);color:var(--ink-faint)}
.prod-status.live{border-color:rgba(201,169,110,.6);color:var(--gold-deep)}
.prod-tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-top:12px}
.prod-desc{margin-top:12px;font-size:15px;line-height:1.6;color:var(--ink-dim);max-width:62ch;text-wrap:pretty}
.prod-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:6px}
.prod-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim)}
.prod-link svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.prod-link:hover{color:var(--gold-deep)}
.prod-link:hover svg{transform:translateX(4px)}
[dir="rtl"] .prod-link svg{transform:scaleX(-1)}
[dir="rtl"] .prod-link:hover svg{transform:scaleX(-1) translateX(4px)}
@media(max-width:860px){.prod-row{grid-template-columns:40px 1fr;gap:18px}.prod-side{grid-column:2;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}}

.prod-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:46px 4px}
.prod-row.alt .prod-visual{order:2}
.prod-visual image-slot{display:block;border:1px solid var(--panel-brd);border-radius:14px}
.prod-row .prod-head{display:flex;align-items:center;gap:14px}
.prod-row .prod-n{padding-top:0}
.prod-row .prod-name{margin-top:16px}
.prod-row .prod-desc{max-width:46ch}
.prod-row .btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.prod-row .btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .prod-row .btn svg{transform:scaleX(-1)}
[dir="rtl"] .prod-row .btn:hover svg{transform:scaleX(-1) translateX(4px)}
@media(max-width:860px){.prod-row,.prod-row.alt{grid-template-columns:1fr;gap:22px;padding:34px 2px}.prod-row.alt .prod-visual{order:0}}

[data-theme="dark"] .select{color-scheme:dark}
[data-theme="dark"] .select option{background:#1E1024;color:#F6F1EC}
.select option{background:#fff;color:#2A1730}

.input,.select,.textarea{border-color:#D8C7B4}
.input::placeholder,.textarea::placeholder{color:#9A8B7D}
.upload-box{border-color:#D3C0AB}
[data-theme="dark"] .input,[data-theme="dark"] .select,[data-theme="dark"] .textarea{border-color:rgba(201,169,110,.42)}
[data-theme="dark"] .upload-box{border-color:rgba(201,169,110,.4)}

.prod-visual image-slot{object-fit:contain;background:var(--bg-2)}
@media(max-width:860px){.prod-visual image-slot{height:300px!important}}

a.sc-item{color:var(--ink-faint);text-decoration:none;transition:padding-inline-start .3s cubic-bezier(.2,.7,.2,1)}
a.sc-item:hover{padding-inline-start:12px;color:var(--ink-dim)}

.lang-menu{background:#fff;border-color:#E0D2C2;box-shadow:0 24px 60px -18px rgba(61,32,64,.35);z-index:60}
.lang-menu button{color:#3A2440}
.lang-menu button:hover{background:#F3EAE0;color:#2A1730}
[data-theme="dark"] .lang-menu{background:#241430;border-color:rgba(201,169,110,.35);box-shadow:0 24px 60px -18px rgba(0,0,0,.7);backdrop-filter:none}
[data-theme="dark"] .lang-menu button{color:#F6F1EC}
[data-theme="dark"] .lang-menu button:hover{background:rgba(201,169,110,.16);color:#fff}
[data-theme="dark"] .lang-menu button.active{color:var(--gold)}

.footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}

@media(max-width:768px){
.eyebrow{font-size:12px;letter-spacing:.18em}
.chip{padding:12px 18px;font-size:14px}
.btn-sm{padding:13px 20px;font-size:13.5px}
.lang-btn{padding:11px 14px;font-size:13px}
.burger{width:34px;padding:10px 4px}
.icon-close{width:44px;height:44px}
.footer li{margin-bottom:4px;font-size:14px}
.footer li a{display:inline-block;padding-block:9px}
.footer-legal{font-size:12.5px}
.prod-status{font-size:11.5px;padding:6px 12px}
.prod-tag{font-size:12px}
.prod-desc{font-size:15px}
.tab{padding:12px 18px;font-size:13.5px}
.svc-aside{position:static}
.svc-row{padding:20px 2px}
.sol-item{padding:16px 2px}
.accordion-panel-inner{font-size:14.5px}
.card{min-height:0}
.testi-quote{font-size:17.5px}
}

@media(max-width:768px){.footer-legal a{display:inline-block;padding-block:10px}.hdr-logo{padding-block:7px}}

@media(max-width:768px){
.heroV-stage .container{padding-inline-start:20px}
[dir="rtl"] .heroV-stage>.container{padding-inline:20px 0}
.heroV-stage .hero-ctas .btn{flex:1 1 140px;justify-content:center}
.heroV-hint{bottom:18px}
}

.skip-link{position:fixed;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:500}
.skip-link:focus{width:auto;height:auto;clip-path:none;padding:12px 18px;background:var(--panel);border:1px solid var(--gold);border-radius:0 0 10px 0}

.wa-fab{position:fixed;bottom:22px;right:22px;z-index:900;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2A1730;color:var(--gold);border:1px solid rgba(201,169,110,.5);box-shadow:0 12px 32px -10px rgba(42,23,48,.55);transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.wa-fab:hover{transform:translateY(-3px) scale(1.06);background:#3A2140;color:#E4C78A;box-shadow:0 18px 42px -12px rgba(42,23,48,.7)}
[data-theme="dark"] .wa-fab{background:linear-gradient(135deg,var(--gold-surface),var(--gold-surface-end));color:var(--on-gold);border-color:rgba(201,169,110,.6);box-shadow:0 12px 32px -10px rgba(0,0,0,.7)}
[data-theme="dark"] .wa-fab:hover{color:#12070F;box-shadow:0 18px 44px -12px rgba(0,0,0,.85)}
.wa-fab svg{stroke-width:1.6}
[dir=rtl] .wa-fab{right:auto;left:22px}
@media(max-width:600px){.wa-fab{width:50px;height:50px;bottom:16px;right:16px}[dir=rtl] .wa-fab{left:16px;right:auto}}

/* The spam honeypot. It used to be parked at left:-9999px, which is invisible in both
   directions but not harmless in both: a right-to-left document scrolls from the right, so
   content 9999px to the left is 9999px of scrollable width. Arabic pages carrying this field
   became ten thousand pixels wide, the browser shrank the layout to fit, and the whole page
   could be swiped sideways. Clipping it in place hides it just as completely and adds no
   scrollable area in either direction. Bots still read it in the DOM, which is the point. */
.hp-field{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;opacity:0;pointer-events:none;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}
.captcha-field label{font-variant-numeric:tabular-nums}
.err-msg{margin-top:6px;font-size:12.5px;color:#C0392B}
[data-theme="dark"] .err-msg{color:#F0857A}

/* long-headline languages (ru/es/de/fr) must not collide with the header */
.heroV-stage{padding-top:120px;padding-bottom:92px;box-sizing:border-box}
.heroV-stage .h1{font-size:clamp(30px,3.6vw,58px);line-height:1.08;overflow-wrap:break-word;hyphens:auto}
.heroV-stage .lead{font-size:clamp(14px,1.15vw,17.5px)}
:lang(ru) .heroV-stage .h1,:lang(es) .heroV-stage .h1,:lang(de) .heroV-stage .h1,:lang(fr) .heroV-stage .h1{font-size:clamp(28px,3vw,50px)}
@media(max-height:760px){.heroV-stage .h1{font-size:clamp(26px,2.6vw,42px)}.heroV-stage .lead{font-size:14.5px}.heroV-stage{padding-top:104px;padding-bottom:72px}}
@media(max-width:600px){.heroV-stage{padding-top:96px;padding-bottom:64px}}

/* ---- blog ---- */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.blog-empty{padding:60px 24px;text-align:center;border:1px dashed var(--panel-brd);border-radius:var(--radius);color:var(--ink-faint)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:28px}
.blog-card-in{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .3s}
.blog-card-in:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 22px 50px -26px rgba(61,32,64,.45);color:var(--ink)}
.blog-cover{height:196px;overflow:hidden;background:var(--bg-2)}
.blog-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.blog-card-in:hover .blog-cover img{transform:scale(1.05)}
.blog-cover.ph,.blog-feat-visual.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--plum),var(--plum-2))}
.blog-cover.ph span,.blog-feat-visual.ph span{font-family:'Montserrat',sans-serif;font-size:64px;font-weight:700;color:rgba(201,169,110,.55);line-height:1}
.blog-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.blog-cat{color:var(--gold-deep);font-weight:600;letter-spacing:.12em}
.blog-card-title{font-size:19.5px;line-height:1.32;margin-top:12px;font-weight:600;text-wrap:pretty}
.blog-card-ex{margin-top:10px;font-size:14px;color:var(--ink-dim);text-wrap:pretty}
.blog-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.blog-more svg{transition:transform .3s}
.blog-card-in:hover .blog-more svg{transform:translateX(4px)}
[dir="rtl"] .blog-more svg{transform:scaleX(-1)}
[dir="rtl"] .blog-card-in:hover .blog-more svg{transform:scaleX(-1) translateX(4px)}
.blog-badge{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-deep);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.blog-feat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--panel-brd);border-radius:var(--radius);overflow:hidden;background:var(--panel);color:var(--ink);transition:border-color .3s,box-shadow .35s}
.blog-feat:hover{border-color:var(--gold);box-shadow:0 26px 60px -30px rgba(61,32,64,.45);color:var(--ink)}
.blog-feat-visual{min-height:380px;overflow:hidden}
.blog-feat-visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.blog-feat:hover .blog-feat-visual img{transform:scale(1.04)}
.blog-feat-main{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.post-narrow{max-width:760px}
.post-title{margin-top:14px;font-size:clamp(28px,3.4vw,50px);line-height:1.1;text-wrap:pretty}
.post-byline{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--panel-brd);font-size:13.5px;color:var(--ink-dim)}
.post-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--plum);color:var(--gold);font-weight:700;font-size:14px}
.post-cover{width:100%;border-radius:var(--radius);border:1px solid var(--panel-brd)}
.post-body{font-size:16.5px;line-height:1.85;color:var(--ink-dim)}
.post-body>*+*{margin-top:20px}
.post-body h2{font-size:26px;line-height:1.25;color:var(--ink);font-weight:600;margin-top:44px}
.post-body h3{font-size:21px;line-height:1.3;color:var(--ink);font-weight:600;margin-top:36px}
.post-body h4{font-size:17px;color:var(--ink);font-weight:600;margin-top:30px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body ul,.post-body ol{padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.post-body li{padding-inline-start:4px}
.post-body blockquote{border-inline-start:2px solid var(--gold);padding:4px 0 4px 22px;font-size:19px;line-height:1.6;color:var(--ink);font-style:italic}
[dir="rtl"] .post-body blockquote{padding:4px 22px 4px 0}
.post-body code{font-family:ui-monospace,monospace;font-size:14px;background:var(--bg-2);padding:2px 6px;border-radius:5px;color:var(--ink)}
.post-body hr{border:none;border-top:1px solid var(--panel-brd);margin-block:36px}
.post-foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:52px;padding-top:26px;border-top:1px solid var(--panel-brd)}
.post-share{display:flex;align-items:center;gap:10px}
[data-theme="dark"] .blog-card-in,[data-theme="dark"] .blog-feat{background:rgba(255,255,255,.025)}
[data-theme="dark"] .post-body code{background:rgba(255,255,255,.07)}
@media(max-width:900px){.blog-feat{grid-template-columns:1fr}.blog-feat-visual{min-height:240px}.blog-feat-main{padding:34px 26px}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;gap:22px}.post-body{font-size:16px}.post-body h2{font-size:23px}}

.blog-card-in.is-rtl,.blog-feat.is-rtl,.post-page.is-rtl{font-family:'Cairo',sans-serif}
.post-page.is-rtl .post-body,.post-page.is-rtl .lead,.post-page.is-rtl .h1{font-family:'Cairo',sans-serif}

/* ---- server-rendered blog (additions; nothing above this line changed) -------------------
   Without JavaScript nothing ever adds .in, so revealed content would stay invisible. The
   inline head script swaps html.no-js for html.js before the first paint; only a reader with
   JavaScript off keeps .no-js, and for them every revealed element is simply shown. */
html.no-js .reveal{opacity:1;transform:none;filter:none}
/* Category chips, language choices and pagination are links on blog pages so a crawler can
   follow them. These rules make an <a> draw exactly what the approved <button> draws. */
a.chip,.lang-menu a,.blog-pager .page-btn{line-height:normal;letter-spacing:normal;text-align:center;-webkit-tap-highlight-color:transparent}
a.chip{display:inline-block}
/* In the mobile menu every <a> is drawn as a large menu entry (.mobile-nav a); the language
   chips there are links on blog pages and must keep the chip's own size, weight and colour. */
.mobile-nav a.chip{font-size:13px;font-weight:400;padding-block:9px}
@media(max-width:768px){.mobile-nav a.chip{padding-block:12px;font-size:14px}}
.mobile-nav a.chip:not(.btn){color:var(--ink-dim)}
.mobile-nav a.chip.active:not(.btn),.mobile-nav a.chip:not(.btn):hover{color:var(--gold-deep)}
[data-theme="dark"] .mobile-nav a.chip:not(.btn),[data-theme="dark"] a.chip:not(.btn):hover{color:var(--ink)}
.lang-menu a{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;background:none;border:none;color:#3A2440;font-size:13px;text-align:start}
.lang-menu a:hover{background:#F3EAE0;color:#2A1730}
.lang-menu a.active{color:var(--gold-deep)}
[data-theme="dark"] .lang-menu a{color:#F6F1EC}
[data-theme="dark"] .lang-menu a:hover{background:rgba(201,169,110,.16);color:#fff}
[data-theme="dark"] .lang-menu a.active{color:var(--gold)}
.blog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:48px}
.blog-pager .page-btn{display:inline-flex;align-items:center;justify-content:center}
.blog-pager .page-btn.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.blog-pager .page-gap{color:var(--ink-faint);padding:0 4px}
.blog-pager .page-prev svg,[dir="rtl"] .blog-pager .page-next svg{transform:scaleX(-1)}
[dir="rtl"] .blog-pager .page-prev svg{transform:none}
/* The article cover: the covers are 1500×1000 landscape images, and the element carries those
   dimensions as attributes so the browser can reserve space before the file arrives. With
   width:100% and no height rule the height attribute won (1000px tall at any width), so the
   picture was stretched. A fixed 3:2 box with object-fit keeps the proportions on every
   screen; a cover that is not exactly 3:2 is cropped from the centre, never distorted. */
.post-cover{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}