/* ELPC shared styles: header, content sections, footer, inner pages.
   The homepage showreel keeps its own inline CSS; everything after it uses this file. */
:root{
  --ink:#07031a; --paper:#f5f1ec;
  --nav-ink:#1a1a1a; --nav-surface:#e3e3e3; --nav-item:#ffffff; --nav-logo:#f1f1f1;
  --nav-cta:#0d0d0d; --nav-cta-ink:#f4f4f4; --nav-shadow:rgba(0,0,0,0.12);
  --glass-dark:rgba(40,36,33,0.55); --glass-border:rgba(255,255,255,0.12);
  --glass-border-soft:rgba(255,255,255,0.14); --hairline:rgba(255,255,255,0.28);
  --card-violet:radial-gradient(95% 80% at 50% 28%, #ddd6fe 0%, #9a73f0 38%, #6d28d9 68%, #34146e 100%);
  --accent:#b794ff;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 523 523'%3E%3Cpath d='M250.168 7.83547C254.034 -2.61195 268.81 -2.61197 272.676 7.83545L296.638 72.5928C322.973 143.76 379.083 199.871 450.25 226.205L515.008 250.167C525.455 254.033 525.455 268.81 515.008 272.676L450.251 296.638C379.084 322.972 322.973 379.083 296.638 450.25L272.676 515.007C268.81 525.455 254.034 525.455 250.168 515.007L226.205 450.25C199.871 379.083 143.76 322.972 72.5933 296.638L7.83596 272.676C-2.61146 268.81 -2.61148 254.033 7.83594 250.167L72.5932 226.205C143.76 199.871 199.871 143.76 226.205 72.5928L250.168 7.83547Z'/%3E%3C/svg%3E");
  --elpc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='12' y='14' width='76' height='18' rx='9'/%3E%3Crect x='12' y='41' width='76' height='18' rx='9'/%3E%3Crect x='12' y='68' width='76' height='18' rx='9'/%3E%3C/svg%3E");
  --font:"Heebo",system-ui,sans-serif;
  --txt-dir:rtl;
}
:root[dir="ltr"]{--txt-dir:ltr}
*{margin:0;padding:0;box-sizing:border-box}
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{background:var(--ink);color:var(--paper);overflow-x:hidden;font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:300;background:#fff;color:#000;padding:10px 16px;border-radius:8px}
.skip:focus{top:16px}
.ltr{direction:ltr}.txt{direction:var(--txt-dir)}
.nw{white-space:nowrap}
.star-mask{background:currentColor;-webkit-mask:var(--elpc-icon) center/contain no-repeat;mask:var(--elpc-icon) center/contain no-repeat}

/* ── Header ── */
.site-header{position:fixed;left:0;top:2vmin;z-index:100;display:flex;width:100%;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .7s ease-in-out,transform .7s ease-in-out}
.site-header.revealed{opacity:1;transform:none}
.nav{pointer-events:auto;display:flex;align-items:stretch;gap:1px;border-radius:8px;background:var(--nav-surface);padding:1px;box-shadow:0 6px 24px var(--nav-shadow)}
.tile{display:flex;height:40px;align-items:center;justify-content:center;border-radius:8px;font-size:15px;color:var(--nav-ink)}
.tile-logo{padding:0 16px;background:var(--nav-logo)}
.tile-logo img{height:28px;width:auto;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.tile-logo:hover img{transform:scale(1.06)}
.nav-links{display:none;list-style:none;align-items:stretch;gap:1px}
@media (min-width:900px){.nav-links{display:flex}}
.nav-links>li{position:relative;display:flex}
.nav-links>li>a,.nav-links>li>button{min-width:88px;padding:0 14px;background:var(--nav-item)}
.nav-links>li>a span,.nav-links>li>button span{transition:opacity .35s}
.nav-links>li>a:hover span,.nav-links>li>button:hover span{opacity:.55}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 #6d28d9}
.nav-links .caret{width:9px;height:9px;margin-inline-start:6px;opacity:.6}
.dropdown{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:260px;border-radius:10px;background:var(--nav-surface);padding:1px;display:grid;gap:1px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.has-dd:hover .dropdown,.has-dd:focus-within .dropdown,.has-dd.open .dropdown{opacity:1;transform:none;pointer-events:auto}
.dropdown a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:var(--nav-item);border-radius:9px;color:var(--nav-ink)}
.dropdown a small{font-size:12px;opacity:.55}
.dropdown a:hover{background:#f4f0ff}
.dropdown.wide{min-width:560px;grid-template-columns:1fr 1fr}
.dropdown .dd-all{grid-column:1/-1;flex-direction:row;justify-content:center;font-weight:500;color:#6d28d9}
.chips a{padding:9px 16px;border-radius:999px;border:1px solid var(--glass-border-soft);font-size:14px;background:rgba(255,255,255,.03);transition:border-color .3s,background .3s}
.chips a:hover{border-color:rgba(183,148,255,.6);background:rgba(154,115,240,.12)}
.tm-note{margin-top:40px;font-size:13px;opacity:.5;max-width:80ch;line-height:1.6}
.tile-lang{width:44px;background:var(--nav-item);font-size:13px;font-weight:500}
.tile-menu{width:40px;background:var(--nav-item)}
@media (min-width:900px){.tile-menu{display:none}}
.tile-cta{background:var(--nav-cta);padding:0 22px;font-weight:500;color:var(--nav-cta-ink)}
@media (max-width:420px){.tile-cta{padding:0 14px;font-size:13px}.tile-logo{padding:0 10px}.tile-logo img{height:24px}}
.mobile-menu{margin-top:1vmin;width:calc(100% - 8vmin);max-width:420px;overflow:hidden;border-radius:8px;background:var(--nav-surface);padding:1px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s cubic-bezier(.34,1.3,.64,1),transform .35s cubic-bezier(.34,1.3,.64,1)}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:1px}
.mobile-menu a{display:flex;min-height:44px;width:100%;align-items:center;justify-content:center;border-radius:8px;background:var(--nav-item);font-size:15px;color:var(--nav-ink)}
.mobile-menu .sub a{font-size:14px;background:#f7f5fb}
@media (min-width:900px){.mobile-menu{display:none}}

/* ── Sections ── */
.content{position:relative;z-index:50;background:var(--ink);color:var(--paper)}
.section{padding:clamp(72px,12vh,140px) max(16px,6vw)}
.section.tight{padding-top:0}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.h-sec{font-size:clamp(34px,5vw,80px);font-weight:400;line-height:1.02;letter-spacing:-0.03em;max-width:18ch}
.h-sec .dim{opacity:.4}
.sec-lede{margin-top:20px;max-width:60ch;font-size:clamp(16px,1.25vw,19px);line-height:1.65;font-weight:300;opacity:.75}
.prose{max-width:70ch;font-size:17px;line-height:1.75;font-weight:300;opacity:.8}
.prose p+p{margin-top:16px}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.grid4,.grid3,.grid2{margin-top:56px;display:grid;gap:16px}
.grid4{grid-template-columns:repeat(4,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}

.svc{position:relative;border-radius:20px;padding:28px;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);overflow:hidden;min-height:320px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
a.svc:hover{border-color:rgba(183,148,255,.55);transform:translateY(-3px)}
.svc::before{content:"";position:absolute;inset:auto -30% -55% auto;width:260px;height:260px;border-radius:50%;background:var(--card-violet);filter:blur(60px);opacity:.28;pointer-events:none}
.svc .ic{width:44px;height:44px;border-radius:12px;background:var(--card-violet);display:grid;place-items:center;margin-bottom:26px;color:#fff}
.svc .ic span{width:18px;height:18px}
.svc .kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.svc h3{font-size:24px;font-weight:500;letter-spacing:-0.01em}
.svc p{font-size:15px;font-weight:300;line-height:1.6;opacity:.7;margin-top:10px}
.svc ul{list-style:none;margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px;position:relative}
.svc li{font-size:15px;font-weight:300;padding-top:10px;border-top:1px solid var(--glass-border)}
.svc .more{margin-top:22px;font-size:14px;color:var(--accent);position:relative}
.svc.compact{min-height:0}

.steps{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--hairline);padding:22px 0 8px;display:flex;gap:18px;align-items:baseline}
.step b{font-size:14px;font-weight:500;color:var(--accent);direction:ltr;min-width:2.2em}
.step h3{font-size:21px;font-weight:400}
.step p{font-size:15px;font-weight:300;opacity:.65;margin-top:6px;line-height:1.55}

.checklist{list-style:none;display:grid;gap:12px}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);font-size:16px;font-weight:300;line-height:1.55}
.checklist li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;background:var(--accent);-webkit-mask:var(--elpc-icon) center/contain no-repeat;mask:var(--elpc-icon) center/contain no-repeat}
.checklist.two{grid-template-columns:1fr 1fr}
@media (max-width:760px){.checklist.two{grid-template-columns:1fr}}
.quotes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quotes li{padding:24px;border-radius:18px;border:1px solid var(--glass-border);background:linear-gradient(160deg,rgba(154,115,240,.12),rgba(255,255,255,.02));font-size:17px;line-height:1.55;font-weight:300}
.quotes li::before{content:"”";display:block;font-size:44px;line-height:.6;color:var(--accent);margin-bottom:10px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chips span{padding:9px 16px;border-radius:999px;border:1px solid var(--glass-border-soft);font-size:14px;background:rgba(255,255,255,.03)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:40px 24px;border-inline-start:1px solid var(--glass-border)}
.stat:first-child{border-inline-start:0}
@media (max-width:900px){.stat:nth-child(3){border-inline-start:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--glass-border)}}
.stat b{display:block;font-size:clamp(44px,5.5vw,88px);font-weight:400;letter-spacing:-0.04em;line-height:1;direction:ltr;text-align:start}
:root[dir="rtl"] .stat b{text-align:right}
.stat span{display:block;margin-top:12px;font-size:15px;font-weight:300;opacity:.7}

/* client logos */
.logos{position:relative;overflow:hidden;padding:8px 0;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-row{display:flex;gap:14px;width:max-content;animation:logos 60s linear infinite}
.logos-row.rev{animation-direction:reverse;margin-top:14px}
.logos:hover .logos-row{animation-play-state:paused}
.logo-chip{flex:none;width:180px;height:92px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:16px 22px}
.logo-chip img{max-width:100%;max-height:58px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.logo-chip:hover img{filter:none;opacity:1}
@keyframes logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* certifications band */
.certs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:26px 30px;border-radius:20px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03)}
.certs .badge{display:flex;align-items:center;gap:10px;font-size:15px}
.certs .badge i{width:30px;height:30px;border-radius:9px;background:var(--card-violet);display:grid;place-items:center;color:#fff;font-style:normal}
.certs .badge i span{width:13px;height:13px}
.certs p{font-size:14px;opacity:.6;flex-basis:100%}

/* FAQ */
.faq{margin-top:48px;display:grid;gap:10px}
.faq details{border-radius:16px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;font-size:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-border-soft);display:grid;place-items:center;font-size:18px;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 24px;font-size:16px;line-height:1.7;font-weight:300;opacity:.75;max-width:80ch}

/* case studies */
.case{border-radius:20px;padding:26px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;min-height:220px}
.case .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.case h3{font-size:21px;font-weight:500;line-height:1.3}
.case p{font-size:15px;font-weight:300;opacity:.7;line-height:1.6;margin-top:auto}

/* compare table */
.compare{width:100%;border-collapse:collapse;margin-top:40px;font-size:15px}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid var(--glass-border);text-align:start;vertical-align:top;font-weight:300;line-height:1.55}
.compare thead th{font-weight:500;font-size:14px;opacity:.7}
.compare td:last-child{color:#e3d7ff}
.compare th[scope="row"]{font-weight:500}
@media (max-width:700px){.compare{font-size:14px}.compare th,.compare td{padding:12px 8px}}

/* quote / person */
.person{padding:36px;border-radius:24px;background:linear-gradient(150deg,rgba(109,40,217,.35),rgba(7,3,26,.2));border:1px solid var(--glass-border)}
.person blockquote{font-size:clamp(19px,1.6vw,24px);line-height:1.55;font-weight:300}
.person figcaption{margin-top:22px;font-size:15px;opacity:.7}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border-radius:28px;padding:clamp(36px,6vw,80px);background:#0d0726}
.cta-band canvas{position:absolute;inset:0;width:100%;height:100%}
.cta-band>*:not(canvas){position:relative}
.cta-band h2{font-size:clamp(32px,4.5vw,68px);font-weight:400;letter-spacing:-0.03em;line-height:1.02;max-width:18ch}
.cta-band p{margin-top:16px;max-width:52ch;font-size:17px;line-height:1.6;opacity:.8;font-weight:300}
.cta-band .btns{margin-top:30px}

.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:8px;font-size:17px}
.btn-light{background:var(--paper);color:var(--ink);font-weight:500}
.btn-glass{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);color:#fff}

/* ── Inner page hero ── */
.page-hero{padding:4vmin}
.page-hero .frame{position:relative;min-height:min(86vh,860px);border-radius:3vmin;overflow:hidden;background:#05030f;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,5vw,72px);padding-top:120px}
.page-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.page-hero .deco{position:absolute;top:50%;inset-inline-end:7%;width:min(34vw,420px);aspect-ratio:1;transform:translateY(-58%);color:#fff;opacity:.92;filter:drop-shadow(0 0 60px rgba(154,115,240,.6));animation:spin 28s linear infinite;background:linear-gradient(135deg,#ffffff,#c9cfdc 35%,#6e7586 50%,#e9edf5 62%,#8a90a0);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
@keyframes spin{to{transform:translateY(-58%) rotate(360deg)}}
@media (max-width:760px){.page-hero .deco{width:44vw;top:150px;transform:none;inset-inline-end:6%;opacity:.55}@keyframes spin{to{transform:rotate(360deg)}}}
.page-hero .inner{position:relative;max-width:900px}
.crumbs{display:flex;gap:8px;font-size:13px;opacity:.65;margin-bottom:22px}
.crumbs a:hover{opacity:1;text-decoration:underline}
.page-hero h1{font-size:clamp(40px,6.4vw,104px);font-weight:400;line-height:.98;letter-spacing:-0.035em}
.page-hero h1 .dim{opacity:.45}
.page-hero .lede{margin-top:24px;max-width:58ch;font-size:clamp(16px,1.3vw,20px);line-height:1.6;font-weight:300;opacity:.85}
.page-hero .btns{margin-top:32px}

/* ── Contact ── */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:6vw}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact-info{margin-top:36px;display:grid;gap:14px;font-size:18px}
.contact-info a{display:inline-flex;gap:12px;align-items:center;opacity:.9;justify-self:start}
.contact-info a:hover{opacity:1;color:#cdb8ff}
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.ways{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ways{grid-template-columns:1fr}}
.way{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:20px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);transition:border-color .3s}
a.way:hover{border-color:rgba(183,148,255,.55)}
.way small{font-size:13px;opacity:.6}
.way b{font-size:22px;font-weight:500}
.way span{font-size:14px;opacity:.6;font-weight:300}
form.lead{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:32px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid var(--glass-border)}
@media (max-width:640px){form.lead{grid-template-columns:1fr;padding:20px}}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px}
.field.full{grid-column:1/-1}
.field span{opacity:.7}
.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--paper);background:rgba(0,0,0,.35);border:1px solid var(--glass-border-soft);border-radius:10px;padding:13px 14px}
.field textarea{min-height:120px;resize:vertical}
.field select option{color:#000}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#9a73f0;box-shadow:0 0 0 3px rgba(154,115,240,.25)}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;opacity:.85}
.check input{margin-top:3px;width:18px;height:18px;accent-color:#9a73f0;flex:none}
.check a,.notice a{text-decoration:underline}
.notice{grid-column:1/-1;font-size:12.5px;line-height:1.55;opacity:.55}
form.lead button{grid-column:1/-1;justify-self:start;border-radius:8px;background:var(--paper);color:var(--ink);padding:15px 36px;font-size:17px;font-weight:500}
.form-status{grid-column:1/-1;font-size:14px;color:#cdb8ff;min-height:1em}

/* ── Footer ── */
.site-footer{border-top:1px solid var(--glass-border);padding:64px max(16px,6vw) 32px;color:rgba(245,241,236,.7);font-size:15px;background:var(--ink);position:relative;z-index:50}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.2fr;gap:40px}
@media (max-width:1100px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-brand img{height:34px;width:auto;margin-bottom:18px}
.f-brand p{max-width:38ch;line-height:1.65;font-weight:300}
.site-footer h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer a:hover{color:var(--paper)}
.f-social{display:flex;gap:10px;margin-top:20px}
.f-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--glass-border-soft);display:grid;place-items:center}
.f-social svg{width:17px;height:17px;fill:currentColor}
.f-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--glass-border);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;opacity:.75}
.f-bottom nav{display:flex;flex-wrap:wrap;gap:10px 22px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.logos-row,.page-hero .deco{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Articles & blog ── */
.page-hero .frame.short{min-height:0;padding-top:150px}
.page-hero .frame.short h1{font-size:clamp(34px,4.6vw,72px);max-width:22ch}
.page-hero .frame.short .deco{width:min(22vw,260px)}
.art-cover{max-width:860px;margin:0 auto 48px}
.art-cover img{width:100%;border-radius:20px}
.article{max-width:760px;margin:0 auto;font-size:18px;line-height:1.85;font-weight:300;color:rgba(245,241,236,.88)}
.article>*+*{margin-top:1.1em}
.article h2{font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.25;margin-top:2em;color:var(--paper);letter-spacing:-0.01em}
.article h3{font-size:22px;font-weight:500;margin-top:1.6em;color:var(--paper)}
.article h4{font-size:19px;font-weight:500;margin-top:1.4em}
.article ul,.article ol{padding-inline-start:1.4em}
.article li+li{margin-top:.45em}
.article li::marker{color:var(--accent)}
.article a{color:#cdb8ff;text-decoration:underline;text-underline-offset:3px}
.article strong{font-weight:500;color:var(--paper)}
.article img{border-radius:14px;margin-inline:auto;height:auto}
.article figure figcaption{font-size:14px;opacity:.6;margin-top:8px;text-align:center}
.article blockquote{padding:18px 22px;border-inline-start:3px solid var(--accent);background:rgba(255,255,255,.04);border-radius:10px}
.article table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.article th,.article td{padding:10px 12px;border-bottom:1px solid var(--glass-border);text-align:start;vertical-align:top}
.post-card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);transition:border-color .3s,transform .3s}
.post-card:hover{border-color:rgba(183,148,255,.55);transform:translateY(-3px)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pc-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-body small{font-size:13px;color:var(--accent);direction:ltr;text-align:end;align-self:flex-start}
.pc-body h3{font-size:20px;font-weight:500;line-height:1.35}
.pc-body p{font-size:15px;font-weight:300;opacity:.65;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-body .more{margin-top:auto;padding-top:8px;font-size:14px;color:var(--accent)}

/* ── Video (click-to-play: nothing loads from YouTube until the visitor presses play) ── */
.yt-fig{margin:0}
.yt{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#05030f;border:1px solid var(--glass-border);cursor:pointer;padding:0}
.yt img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.yt:hover img{transform:scale(1.07);filter:brightness(1.08)}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,3,26,0) 55%,rgba(7,3,26,.75))}
.yt-play{position:absolute;z-index:2;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);transition:transform .3s,background .3s}
.yt-play::before{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.yt:hover .yt-play{transform:scale(1.1);background:var(--card-violet)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cap{margin-top:12px;font-size:15px;font-weight:400;line-height:1.45}
.yt-cap small{display:block;font-size:12.5px;opacity:.55;margin-top:3px}
.shorts{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1100px){.shorts{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.shorts>*{scroll-snap-align:start}}
.ceo{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:5vw;align-items:center}
@media (max-width:820px){.ceo{grid-template-columns:1fr}.ceo .yt-fig{max-width:360px}}
.ceo blockquote{font-size:clamp(20px,1.8vw,28px);line-height:1.55;font-weight:300}
.ceo .sig{margin-top:22px;font-size:16px}
.ceo .sig small{display:block;opacity:.6;font-size:14px;margin-top:2px}
.vid-split{display:grid;grid-template-columns:1.25fr minmax(240px,340px);gap:5vw;align-items:center}
@media (max-width:820px){.vid-split{grid-template-columns:1fr}.vid-split .yt-fig{max-width:340px}}
.cert{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:4vw;align-items:center;margin-top:24px}
@media (max-width:700px){.cert{grid-template-columns:1fr}}
.cert img{width:100%;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.yt.wide{aspect-ratio:16/9}
.page-hero .deco.fx{background:none;-webkit-mask:none;mask:none;animation:none;filter:none;opacity:1;width:min(40vw,520px)}
.page-hero .deco.fx canvas{position:absolute;inset:0;width:100%;height:100%}
.page-hero .frame.short .deco.fx{width:min(26vw,320px)}
@media (max-width:760px){.page-hero .deco.fx{width:52vw;opacity:.75}}
@media (min-width:900px){
  .page-hero .frame:has(.deco.fx) .inner{max-width:60%}
  .page-hero .deco.fx{width:min(34vw,460px);inset-inline-end:5%}
}
@media (max-width:760px){
  .page-hero .frame:has(.deco.fx){padding-top:calc(76px + 44vw)}
  .page-hero .deco.fx{top:70px;left:50%;right:auto;width:44vw;transform:translateX(-50%);opacity:1}
  .page-hero .frame.short:has(.deco.fx){padding-top:calc(76px + 34vw)}
  .page-hero .frame.short .deco.fx{width:34vw}
}
.yt iframe{z-index:1;opacity:0;transition:opacity .5s ease}
.yt.playing iframe{opacity:1}
.yt.loading::before{content:"";position:absolute;z-index:3;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:ytspin .8s linear infinite}
.yt.playing::after{opacity:0}
@keyframes ytspin{to{transform:rotate(360deg)}}

/* ── Cookie consent ── */
.ck{position:fixed;z-index:400;bottom:max(16px,2vmin);inset-inline-start:max(16px,2vmin);width:min(560px,calc(100vw - 32px));font-family:var(--font,"Heebo",system-ui,sans-serif);color:#f5f1ec;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.ck.in{opacity:1;transform:none}
.ck-card{max-height:min(80vh,640px);overflow:auto;border-radius:20px;padding:24px;background:rgba(14,8,36,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(183,148,255,.3);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ck h2{font-size:19px;font-weight:500;margin:0 0 8px}
.ck p{font-size:14px;line-height:1.6;font-weight:300;opacity:.85;margin:0}
.ck a{color:#cdb8ff;text-decoration:underline}
.ck-prefs{margin-top:16px;display:grid;gap:10px}
.ck-cat{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ck-cat-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.ck-cat-h label{font-size:15px;font-weight:500}
.ck-cat p{font-size:13px;opacity:.7}
.ck-always{font-size:12px;color:#b794ff}
.ck-switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.ck-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.ck-switch span{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.18);transition:background .2s}
.ck-switch span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.ck-switch input:checked+span{background:#7c3aed}
:root[dir="rtl"] .ck-switch input:checked+span::after,.ck[dir="rtl"] .ck-switch input:checked+span::after{transform:translateX(-18px)}
.ck[dir="ltr"] .ck-switch input:checked+span::after{transform:translateX(18px)}
.ck-switch input:focus-visible+span{outline:2px solid #b794ff;outline-offset:2px}
.ck-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ck-btn{font:inherit;font-size:15px;font-weight:500;padding:12px 14px;border-radius:10px;border:0;cursor:pointer;background:#f5f1ec;color:#07031a}
.ck-btn.ck-ghost{grid-column:1/-1;background:transparent;color:#f5f1ec;border:1px solid rgba(255,255,255,.25)}
.ck-btn:hover{filter:brightness(.92)}
.ck-btn:focus-visible{outline:2px solid #b794ff;outline-offset:2px}
.f-cookie{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.f-cookie:hover{color:var(--paper)}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* ── Floating WhatsApp CTA (end side; the cookie banner uses the start side) ── */
.wa-fab{position:fixed;z-index:190;bottom:max(18px,2.4vmin);inset-inline-end:max(18px,2.4vmin);display:flex;align-items:center;gap:10px;height:58px;padding:0 6px;border-radius:999px;background:#25D366;color:#fff;box-shadow:0 12px 32px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.3);font:500 15px/1 var(--font,"Heebo",sans-serif);transition:transform .25s ease,box-shadow .25s ease}
.wa-fab svg{width:34px;height:34px;flex:none;margin-inline:6px}
.wa-label{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease,padding .35s ease}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.45),0 4px 12px rgba(0,0,0,.3)}
.wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{max-width:260px;padding-inline-end:14px}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;animation:wa-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.35);opacity:0}}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.wa-fab{height:52px;bottom:14px;inset-inline-end:14px}.wa-fab svg{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.wa-fab::before{animation:none;opacity:0}.wa-label{transition:none}}
.ck-prefs[hidden]{display:none}
@media (max-width:640px){.ck{bottom:10px;inset-inline-start:10px;width:calc(100vw - 20px)}.ck-card{padding:18px}.ck h2{font-size:17px}.ck p{font-size:13px}}

/* ── Header CTA: bright, glowing, with a light sheen – visible on light and dark sections ── */
.tile-cta{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#b794ff 0%,#7c3aed 52%,#c026d3 100%);color:#fff;font-weight:600;letter-spacing:.01em;text-shadow:0 1px 6px rgba(60,10,120,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.6),0 6px 22px rgba(124,58,237,.55),0 0 34px rgba(192,38,211,.4);
  animation:cta-glow 3.2s ease-in-out infinite;transition:transform .25s ease,filter .25s ease}
.tile-cta::after{content:"";position:absolute;inset:-20% -60%;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);transform:translateX(-70%);animation:cta-sheen 3.2s ease-in-out infinite}
.tile-cta:hover,.tile-cta:focus-visible{filter:brightness(1.12) saturate(1.1);transform:translateY(-1px)}
@keyframes cta-sheen{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
@keyframes cta-glow{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.6),0 6px 22px rgba(124,58,237,.5),0 0 26px rgba(192,38,211,.3)}50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.7),0 8px 30px rgba(124,58,237,.75),0 0 48px rgba(192,38,211,.55)}}
@media (prefers-reduced-motion:reduce){.tile-cta,.tile-cta::after{animation:none}.tile-cta::after{display:none}}

/* ── Header as one seamless bar (only the CTA stands apart) ── */
.nav{background:#fff;gap:0;padding:4px;border-radius:12px;align-items:center;box-shadow:0 8px 30px rgba(20,8,60,.14),0 0 0 1px rgba(20,8,60,.06)}
.nav-links{gap:0}
.nav .tile:not(.tile-cta),.nav-links>li>a,.nav-links>li>button{background:transparent;border-radius:8px}
.nav .tile:not(.tile-cta){transition:background .2s ease}
.nav .tile:not(.tile-cta):hover,.has-dd.open>button,.has-dd:focus-within>button{background:#f4f0ff}
.nav-links a[aria-current="page"]{box-shadow:none;color:#6d28d9;font-weight:500}
.tile-cta{margin-inline-start:6px;border-radius:9px}

/* Gold Mark certificate: keep its natural proportions and a modest size */
.cert{grid-template-columns:minmax(160px,230px) 1fr}
.cert img{width:100%;max-width:230px;height:auto;aspect-ratio:707/1000;object-fit:contain}
@media (max-width:700px){.cert img{max-width:200px}}

/* WhatsApp CTA: a perfect circle; the label appears as a tooltip beside it */
.wa-fab{width:58px;height:58px;padding:0;gap:0;justify-content:center;border-radius:50%}
.wa-fab svg{width:32px;height:32px;margin:0}
.wa-label{position:absolute;top:50%;inset-inline-end:calc(100% + 12px);transform:translateY(-50%) translateX(var(--wa-shift,6px));max-width:none;padding:9px 14px;border-radius:999px;background:#0b0620;color:#fff;font-size:14px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
:root[dir="ltr"] .wa-label{--wa-shift:-6px}
.wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{max-width:none;padding:9px 14px;opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:640px){.wa-fab{width:52px;height:52px}.wa-fab svg{width:28px;height:28px}.wa-label{display:none}}


/* Products dropdown: small vendor logo beside each product */
.dropdown.wide a:not(.dd-all){flex-direction:row;align-items:center;gap:12px}
.dd-logo{width:22px;height:22px;flex:none;object-fit:contain;border-radius:5px}
.dd-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Products dropdown: uniform rows - same height, one-line name and description */
.dropdown.wide{min-width:640px;grid-auto-rows:64px}
.dropdown.wide a:not(.dd-all){height:64px;padding:0 16px;gap:12px}
.dropdown.wide .dd-txt{flex:1;overflow:hidden}
.dropdown.wide .dd-txt,.dropdown.wide .dd-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown.wide .dd-txt{font-size:15px;font-weight:500;line-height:1.25}
.dropdown.wide .dd-txt small{display:block;font-size:12.5px;font-weight:400;margin-top:2px}
.dd-logo{width:24px;height:24px}
.dropdown.wide .dd-all{height:48px;grid-auto-rows:auto}
.dropdown.wide{width:640px;max-width:calc(100vw - 32px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* footer CTA band with lead form */
.cta-band .contact{align-items:start}
.cta-band .contact h2{font-size:clamp(30px,3.6vw,56px)}
.cta-band form.lead{background:rgba(13,7,38,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-band .contact>*{min-width:0}
@media (max-width:700px){.cta-band{padding:32px 18px}.cta-band form.lead{padding:18px}}
form.lead .notice,.cta-band form.lead .notice{grid-column:1/-1;max-width:none;margin-top:0;font-size:12px;line-height:1.5;opacity:.55}
.cta-band form.lead .form-status{max-width:none;margin-top:0;font-size:14px}
.cta-certs{margin-top:36px;padding-top:28px;border-top:1px solid var(--glass-border);display:flex;flex-wrap:wrap;gap:12px 22px}
.cta-certs .badge{display:flex;align-items:center;gap:10px;font-size:15px}
.cta-certs .badge i{width:30px;height:30px;border-radius:9px;background:var(--card-violet);display:grid;place-items:center;font-style:normal}
.cta-certs .badge i span{width:13px;height:13px}
#contact-form .cta-band,#contact{scroll-margin-top:96px}
/* floating "big IT questionnaire" tab, pinned to the left edge */
.quiz-tab{position:fixed;z-index:190;left:0;top:50%;display:flex;align-items:center;gap:10px;padding:20px 12px;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);border-radius:14px 0 0 14px;background:linear-gradient(135deg,#b794ff 0%,#7c3aed 52%,#c026d3 100%);color:#fff;text-shadow:0 1px 6px rgba(60,10,120,.45);font:500 15px/1 var(--font,"Heebo",sans-serif);letter-spacing:.01em;box-shadow:0 10px 30px rgba(124,58,237,.45),0 2px 8px rgba(0,0,0,.3);cursor:pointer;transition:padding .25s ease,box-shadow .25s ease}
.quiz-tab svg{width:20px;height:20px;flex:none;transform:rotate(180deg)}
.quiz-tab:hover,.quiz-tab:focus-visible{padding-right:18px;box-shadow:0 14px 38px rgba(124,58,237,.6),0 2px 8px rgba(0,0,0,.3)}
.quiz-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:700px){.quiz-tab{padding:14px 9px;font-size:13px;gap:8px}.quiz-tab svg{width:17px;height:17px}}
@media print{.quiz-tab{display:none}}
/* ── IT questionnaire dialog ── */
.qz{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid var(--glass-border);border-radius:24px;background:#0d0726;color:var(--paper);overflow:auto;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.qz::backdrop{background:rgba(5,3,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qz-hero{position:relative;padding:30px 32px 26px;background:linear-gradient(115deg,#211536 0%,#5b2ea0 60%,#7c3aed 100%)}
.qz-brand{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.qz-hero h2{margin-top:10px;font-size:clamp(24px,3.2vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.qz-sub{margin-top:8px;font-size:14px;opacity:.75}
.qz-x{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.qz-x:hover{background:rgba(255,255,255,.22)}
.qz-body{padding:28px 32px 32px}
.qz form.lead{padding:0;border:0;background:none}
.qz-intro{font-size:15px;opacity:.8;line-height:1.6}
.qz-meta{font-size:13px;opacity:.6;letter-spacing:.02em}
.qz-progress{height:8px;margin:14px 0 22px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.qz-progress>div{height:100%;background:linear-gradient(90deg,#b794ff,#7c3aed);transition:width .25s ease}
.qz-q{font-size:clamp(20px,2.4vw,26px);font-weight:500;line-height:1.35}
.qz-options{display:grid;gap:12px;margin:24px 0}
.qz-opt{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);color:inherit;font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,background .15s}
.qz-opt:hover,.qz-opt.on{border-color:#9a73f0;background:rgba(154,115,240,.14)}
.qz-opt:focus-visible{outline:2px solid #b794ff;outline-offset:2px}
.qz-opt strong{display:block;font-weight:500;font-size:17px}
.qz-opt small{display:block;margin-top:2px;font-size:13px;opacity:.6}
.qz-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.qz-opt.on .qz-dot{border:5px solid #b794ff;background:#fff}
.qz-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:22px}
.qz-btn{padding:13px 24px;border-radius:10px;background:var(--paper);color:var(--ink);font:500 15px/1 var(--font,"Heebo",sans-serif);cursor:pointer}
.qz-btn.ghost{background:rgba(255,255,255,.08);color:var(--paper);border:1px solid var(--glass-border)}
.qz-btn:disabled{opacity:.35;cursor:not-allowed}
.qz-score-wrap{text-align:center}
.qz-score{margin:10px 0 4px;font-size:clamp(44px,8vw,64px);font-weight:600;line-height:1.05}
.qz-status{font-weight:500}
.qz .good{color:#4ade80}.qz .mid{color:#fbbf24}.qz .low{color:#f87171}
.qz-h{margin:30px 0 12px;font-size:20px;font-weight:500}
.qz-chart{max-width:480px;margin:0 auto}
.qz-chart canvas{display:block;width:100%;height:auto}
.qz-domain{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--glass-border);font-size:15px}
.qz-issue{display:grid;gap:4px;margin:10px 0;padding:16px 18px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);font-size:15px;line-height:1.55}
.qz-tag{font-size:12px;font-weight:600;color:#fbbf24}
.qz-muted{font-size:13px;opacity:.6}
.qz-foot{margin-top:18px;font-size:12px;line-height:1.55;opacity:.55}
@media (max-width:700px){.qz-hero{padding:24px 20px 20px}.qz-body{padding:20px}}
@media print{body>*:not(.qz){display:none!important}.qz{position:static;max-height:none;width:auto;border:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qz-x,.qz-actions,.quiz-tab{display:none}}
.qz-intro{grid-column:1/-1}
.qz{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* compact results */
.qz.qz-done .qz-hero{padding:18px 32px 16px}
.qz.qz-done .qz-hero h2{margin-top:4px;font-size:22px}
.qz.qz-done .qz-sub{display:none}
.qz.qz-done .qz-body{padding:20px 32px 22px}
.qz-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.qz-res .qz-chart{max-width:330px;margin:0 auto;width:100%}
.qz-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:6px;font-size:12.5px;opacity:.85}
.qz-legend span{display:inline-flex;align-items:center;gap:6px}
.qz-key{display:inline-block;width:12px;height:12px;border-radius:3px}
.qz-key.now{background:#f87171}
.qz-key.target{border:2px dashed #4ade80;background:rgba(74,222,128,.35)}
.qz-side{text-align:start}
.qz-side .qz-score{margin:4px 0 2px;font-size:46px;text-align:start}
.qz-side .qz-status{font-size:15px}
.qz-domains{margin-top:14px}
.qz-res .qz-domain{display:grid;grid-template-columns:minmax(0,1fr) 70px 42px;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.qz-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.qz-bar i{display:block;height:100%;border-radius:6px;background:#f87171}
.qz-res .qz-domain strong{font-weight:500;text-align:end}
.qz.qz-done .qz-h{margin:18px 0 10px;font-size:16px}
.qz-gaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qz-gaps .qz-issue{margin:0;padding:12px 14px;font-size:13.5px;gap:3px}
.qz-gaps .qz-issue strong{font-weight:500;line-height:1.35}
.qz-actions-2{display:flex;gap:10px}
.qz.qz-done .qz-actions{margin-top:16px;align-items:center}
.qz.qz-done .qz-foot{margin-top:10px;font-size:11px}
.qz.qz-done .form-status{margin-top:8px;font-size:13px}
@media (max-width:700px){.qz-res{grid-template-columns:1fr;gap:12px}.qz-res .qz-chart{max-width:260px}.qz-gaps{grid-template-columns:1fr}.qz.qz-done .qz-hero,.qz.qz-done .qz-body{padding-inline:18px}}
@media (max-width:700px){.qz-res .qz-chart{max-width:230px}.qz-side .qz-score{font-size:38px}}
/* vendor logo on product cards */
.card-logo{display:block;width:40px;height:40px;margin-bottom:16px;border-radius:10px;object-fit:contain;background:#fff;padding:5px}