/* Clouda — shared design system. Mobile-first, RTL-native, offline-friendly. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F7FAFD;--ink:#0F172A;--slate:#475569;
  --blue:#0067FF;--blue-h:#005EE9;--sky:#37B6FF;--tint:#E7F6FF;--line:#E7ECF2;
  --grad:linear-gradient(125deg,#0067FF,#005EE9 42%,#0F172A);
  --soft:0 18px 44px -28px rgba(15,23,42,.45);
  --maxw:1180px;--font:"Heebo","Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
[data-theme="dark"]{
  --bg:#0B1020;--surface:#11182B;--surface-2:#0E1424;--ink:#F8FAFC;--slate:#9FB0C6;
  --blue:#3B82F6;--blue-h:#60A5FA;--sky:#5CC8FF;--tint:#16223B;--line:#1E293B;
  --grad:linear-gradient(125deg,#1D4ED8,#0F172A 55%,#050A18);
  --soft:0 18px 44px -26px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--slate);line-height:1.62;font-size:16.5px;
  overflow-x:hidden;transition:background .3s,color .3s;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{color:var(--ink);line-height:1.16;letter-spacing:-.3px;text-wrap:balance;transition:color .3s}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px;width:100%}
.icon{width:24px;height:24px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kicker{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;letter-spacing:.6px;color:var(--blue);
  text-transform:uppercase;margin-bottom:10px}
.kicker .icon{width:15px;height:15px}
.muted{color:var(--slate)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;font-weight:800;font-size:15.5px;
  border-radius:13px;cursor:pointer;border:2px solid transparent;transition:transform .18s,background .2s,border-color .2s,box-shadow .2s;
  font-family:var(--font);text-align:center}
.btn .icon{width:18px;height:18px;stroke-width:2.4}
[dir="rtl"] .btn .icon.arr{transform:scaleX(-1)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,103,255,.7)}
.btn-solid{background:#fff;color:#0067FF;box-shadow:0 14px 28px -12px rgba(0,0,0,.45)}
.btn-line{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
@media(hover:hover){
  .btn-primary:hover{background:var(--blue-h);transform:translateY(-2px)}
  .btn-solid:hover{transform:translateY(-2px)}
  .btn-line:hover{background:rgba(255,255,255,.14)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:.3s;padding-top:var(--safe-t)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px;gap:10px}
.nav .logo{height:28px}
[data-theme="dark"] .nav .logo{filter:brightness(0) invert(1)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12.5px;font-weight:800}
.lang button{padding:6px 10px;background:var(--surface);border:0;cursor:pointer;color:var(--slate);font-family:var(--font)}
.lang button.active{background:var(--blue);color:#fff}
.icon-btn{background:var(--surface);border:1px solid var(--line);border-radius:10px;width:38px;height:36px;cursor:pointer;
  color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.2s}
.icon-btn .icon{width:20px;height:20px;stroke-width:2.2}
@media(hover:hover){.icon-btn:hover{border-color:var(--blue);color:var(--blue)}}
.menu-btn{gap:7px;width:auto;padding:0 13px;font-family:var(--font);font-weight:800;font-size:14px}
.menu-btn .icon{width:18px}

/* desktop inline menu */
.dmenu{display:none}
@media(min-width:1040px){
  .dmenu{display:flex;align-items:center;gap:6px}
  .dmenu>a,.dmenu .drop>button{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:700;
    font-size:14.5px;color:var(--ink);background:transparent;border:0;cursor:pointer;padding:9px 13px;border-radius:10px;transition:.2s}
  .dmenu>a:hover,.dmenu .drop:hover>button{background:var(--tint);color:var(--blue)}
  .dmenu>a.cur{color:var(--blue)}
  .dmenu .drop{position:relative}
  .dmenu .drop>button .icon{width:14px;height:14px;transition:transform .2s}
  .dmenu .drop:hover>button .icon{transform:rotate(180deg)}
  .dmenu .panel{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:300px;background:var(--surface);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--soft);padding:8px;opacity:0;visibility:hidden;
    transform:translateY(6px);transition:.2s;z-index:70}
  .dmenu .drop:hover .panel{opacity:1;visibility:visible;transform:none}
  .dmenu .panel a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:11px;transition:.15s}
  .dmenu .panel a:hover{background:var(--tint)}
  .dmenu .panel a .d{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--blue);
    display:flex;align-items:center;justify-content:center}
  .dmenu .panel a .d .icon{width:19px;height:19px}
  .dmenu .panel b{color:var(--ink);font-size:14.5px;display:block}
  .dmenu .panel span{font-size:12.5px;color:var(--slate)}
  .menu-btn{display:none}
}

/* ---------- full-screen page menu (overlay grid) ---------- */
.pmenu{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
  padding:calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 16px)}
.pmenu.open{opacity:1;visibility:visible}
.pmenu .top{display:flex;align-items:center;justify-content:space-between;height:46px;margin-bottom:10px}
.pmenu .top .logo{height:26px}
[data-theme="dark"] .pmenu .top .logo{filter:brightness(0) invert(1)}
.pmenu .grid-pages{display:grid;grid-template-columns:1fr 1fr;gap:11px;overflow-y:auto;padding-bottom:8px;align-content:start}
.ptile{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px 16px;transition:transform .18s,border-color .2s;min-height:96px;justify-content:center}
.ptile:active{transform:scale(.96)}
.ptile .d{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--tint),var(--surface));
  border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center}
.ptile .d .icon{width:23px;height:23px}
.ptile b{color:var(--ink);font-size:16px}
.ptile small{color:var(--slate);font-size:12.5px;font-weight:600}
.ptile.cur{border-color:var(--blue);background:var(--tint)}
.ptile.wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px;min-height:auto;padding:15px 16px}
.pmenu .pm-sub{grid-column:1 / -1;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--slate);padding:14px 4px 2px}
@media(min-width:640px){.pmenu .grid-pages{grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto;width:100%}}

/* ---------- bottom section bar (mobile in-page nav) ---------- */
.snav{position:fixed;inset-inline:0;bottom:0;z-index:90;display:flex;justify-content:center;
  padding:0 10px calc(9px + var(--safe-b));pointer-events:none}
.snav .bar{pointer-events:auto;display:flex;align-items:center;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:30px;padding:6px;box-shadow:0 20px 46px -20px rgba(15,23,42,.6)}
.snav .bar::-webkit-scrollbar{display:none}
.snav a{flex:0 0 auto;display:flex;align-items:center;gap:0;padding:9px;border-radius:24px;color:var(--slate);
  font-weight:800;font-size:13px;white-space:nowrap;transition:padding .24s,background .2s,color .2s}
.snav a .icon{width:19px;height:19px;flex:0 0 auto}
.snav a .lbl{max-width:0;overflow:hidden;opacity:0;transition:max-width .26s ease,opacity .2s,margin .26s}
.snav a.active{background:var(--blue);color:#fff;padding:9px 14px}
.snav a.active .lbl{max-width:140px;opacity:1;margin-inline-start:7px}
body.has-snav{padding-bottom:84px}
@media(min-width:1040px){.snav{display:none}body.has-snav{padding-bottom:0}}

/* ---------- hero (badge sits AFTER <p>, before .hero-cta) ---------- */
.phero{position:relative;color:#fff;padding:54px 0 60px;overflow:hidden;background:var(--grad);background-size:220% 220%;
  animation:flow 17s ease infinite}
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 8%,rgba(125,180,255,.3),transparent 46%);pointer-events:none}
.phero .wrap{position:relative;z-index:2;max-width:740px}
.phero.center .wrap{text-align:center;margin-inline:auto}
.phero.center .hero-cta{justify-content:center}
.phero.center .badge{margin-inline:auto}
.phero h1{color:#fff;font-size:clamp(27px,6.4vw,46px);font-weight:900;margin-bottom:14px}
.phero p{font-size:clamp(15.5px,4vw,19px);opacity:.95;max-width:600px;margin-bottom:16px}
.phero.center p{margin-inline:auto}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);
  color:#fff;padding:8px 16px;border-radius:30px;font-size:13.5px;font-weight:700;margin:0 0 20px}
.badge .icon{width:16px;height:16px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
.crumb{font-size:12.5px;opacity:.85;margin-bottom:14px}
.crumb a{text-decoration:underline;text-underline-offset:3px}

/* ---------- sections + grids + cards ---------- */
section{padding:46px 0;scroll-margin-top:74px}
.alt{background:var(--surface-2)}
.sec-head{max-width:720px;margin:0 auto 28px;text-align:center}
.sec-head.start{text-align:start;margin-inline:0}
.sec-head h2{font-size:clamp(22px,5.2vw,34px);margin-bottom:9px}
.sec-head p{font-size:clamp(15px,3.6vw,17.5px)}
.grid{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:16px}.grid.g3-keep{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}.grid.g2{grid-template-columns:repeat(2,1fr)}
  .grid.g4{grid-template-columns:repeat(4,1fr)}}

.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,border-color .2s,box-shadow .2s;
  opacity:0;transform:translateY(16px) scale(.97)}
.card.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.card:active{transform:scale(.97)}
@media(hover:hover){.card:hover{border-color:var(--blue);box-shadow:0 30px 50px -34px rgba(0,103,255,.4)}
  .card.in:hover{transform:translateY(-4px)}}
html.a11y-noanim .card{opacity:1;transform:none}
.ic{color:var(--blue);width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--tint),var(--surface));border:1px solid var(--line);border-radius:15px;margin-bottom:13px;transition:.2s}
.ic .icon{width:27px;height:27px;stroke-width:2.1}
@media(hover:hover){.card:hover .ic{background:var(--blue);color:#fff;border-color:var(--blue)}}
.card h3{font-size:18.5px;margin-bottom:5px}
.card .lead{color:var(--ink);font-weight:800;font-size:14.5px;margin-bottom:8px}
.card p{font-size:14.5px;flex:1;margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.card .tech{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.3px}
.card .go{margin-top:auto;font-weight:800;color:var(--blue);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.card .go .icon{width:16px;height:16px}[dir="rtl"] .card .go .icon{transform:scaleX(-1)}

/* dual audience */
.duo{display:grid;grid-template-columns:1fr;gap:14px;max-width:920px;margin:0 auto}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--soft)}
.dcard .tagrow{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dcard .pill{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);
  background:var(--tint);border:1px solid var(--line);border-radius:20px;padding:4px 11px}
.dcard h3{font-size:18px;margin-bottom:10px}
.dcard ul,.flist{list-style:none;display:flex;flex-direction:column;gap:9px}
.dcard li,.flist li{display:flex;gap:10px;font-size:14.5px}
.ck{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.ck .icon{width:14px;height:14px;stroke-width:2.6}

/* feature list (2-up) */
.fl{list-style:none;display:grid;grid-template-columns:1fr;gap:11px;max-width:900px;margin:0 auto}
@media(min-width:720px){.fl{grid-template-columns:1fr 1fr}}
.fl li{display:flex;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.fl li .ck{width:30px;height:30px;border-radius:9px}
.fl li b{color:var(--ink);display:block;font-size:15px}
.fl li span{font-size:13.5px}

/* steps */
.steps{display:grid;grid-template-columns:1fr;gap:12px;max-width:1040px;margin:0 auto}
@media(min-width:600px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;
  opacity:0;transform:translateY(14px) scale(.98)}
.step.in{opacity:1;transform:none;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
html.a11y-noanim .step{opacity:1;transform:none}
.step .n{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--blue);font-weight:900;font-size:17px;
  display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.step h3{font-size:16.5px;margin-bottom:5px}.step p{font-size:13.5px}

/* ---------- testimonials carousel ---------- */
.tcar{max-width:760px;margin:0 auto;position:relative}
.tviewport{overflow:hidden;border-radius:20px}
.ttrack{display:flex;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
html.a11y-noanim .ttrack{transition:none}
.tslide{flex:0 0 100%;padding:4px}
.tquote{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:var(--soft);
  min-height:100%}
.tquote .qm{color:var(--blue);opacity:.5}.tquote .qm .icon{width:34px;height:34px}
.tquote p{font-size:16px;color:var(--ink);font-weight:600;margin:12px 0 18px;line-height:1.6}
.tquote .who{display:flex;align-items:center;gap:12px}
.tquote .av{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex:0 0 auto}
.tquote .who b{color:var(--ink);font-size:15px;display:block}
.tquote .who span{font-size:13px}
.tctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.tctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.tctrl button:active{transform:scale(.92)}
@media(hover:hover){.tctrl button:hover{border-color:var(--blue);color:var(--blue)}}
.tctrl button .icon{width:20px;height:20px}
.tdots{display:flex;gap:7px;align-items:center}
.tdots i{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s}
.tdots i.on{background:var(--blue);width:22px;border-radius:5px}

/* ---------- pricing two-angle toggle ---------- */
.angles{display:flex;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:5px;max-width:380px;margin:0 auto 24px}
.angles button{flex:1;font-family:var(--font);font-weight:800;font-size:14px;border:0;background:transparent;color:var(--slate);
  border-radius:24px;padding:10px 12px;cursor:pointer;transition:.2s}
.angles button.on{background:var(--blue);color:#fff}
.angle-body{display:none}.angle-body.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ptier{position:relative}
.ptier .price{font-size:13px;font-weight:800;color:var(--blue);background:var(--tint);border-radius:9px;padding:7px 11px;
  display:inline-block;margin-bottom:12px}
.ptier.feat{border-color:var(--blue);box-shadow:0 30px 60px -38px rgba(0,103,255,.5)}
.ptier .crown{position:absolute;top:14px;inset-inline-end:14px;font-size:11px;font-weight:800;color:#fff;background:var(--blue);
  border-radius:20px;padding:4px 10px}

/* ---------- certs / security ---------- */
.certs{display:grid;grid-template-columns:1fr;gap:12px;max-width:980px;margin:0 auto}
@media(min-width:680px){.certs{grid-template-columns:repeat(3,1fr)}}
.cert{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.cert .d{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--tint),var(--surface));
  border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center}
.cert .d .icon{width:24px;height:24px}
.cert b{color:var(--ink);font-size:14.5px;display:block}.cert span{font-size:12.5px}
.scenario{max-width:820px;margin:22px auto 0;background:var(--ink);color:#cdd7e6;border-radius:18px;padding:22px;overflow:hidden}
[data-theme="dark"] .scenario{background:#070C18}
.scenario .lab{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--sky);margin-bottom:8px}
.scenario h3{color:#fff;font-size:17px;margin-bottom:12px}
.scflow{display:flex;flex-direction:column;gap:9px}
.scflow .li{display:flex;gap:11px;align-items:flex-start;font-size:14px}
.scflow .li .n{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:rgba(55,182,255,.16);color:var(--sky);
  font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.vulns{display:grid;grid-template-columns:1fr;gap:12px;max-width:980px;margin:0 auto}
@media(min-width:760px){.vulns{grid-template-columns:1fr 1fr}}
.vuln{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;
  opacity:0;transform:translateY(14px) scale(.98)}
.vuln.in{opacity:1;transform:none;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
html.a11y-noanim .vuln{opacity:1;transform:none}
.vuln .row{display:flex;gap:11px;align-items:center;margin-bottom:9px}
.vuln .risk{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:rgba(239,68,68,.12);color:#EF4444;
  display:flex;align-items:center;justify-content:center}
.vuln h3{font-size:15.5px}
.vuln .fix{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;border-top:1px solid var(--line);padding-top:11px;margin-top:4px}
.vuln .fix .ck{width:26px;height:26px}

/* ---------- accordion (faq / process detail) ---------- */
.acc{display:flex;flex-direction:column;gap:10px;max-width:780px;margin:0 auto}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.qa[open]{border-color:var(--blue)}
.qa summary{list-style:none;cursor:pointer;padding:15px 17px;font-weight:800;color:var(--ink);font-size:15.5px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:0 0 auto;width:24px;height:24px;color:var(--blue);transition:transform .25s}
.qa[open] summary .pm{transform:rotate(45deg)}
.qa .ans{padding:0 17px 16px;font-size:14px}

/* ---------- cta band ---------- */
.cta-band{background:var(--grad);background-size:220% 220%;animation:flow 17s ease infinite;color:#fff;padding:42px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(20px,5vw,27px);margin-bottom:4px}
.cta-band p{opacity:.92;font-size:15px}

/* ---------- contact ---------- */
.csplit{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;max-width:1000px;margin:0 auto}
@media(min-width:860px){.csplit{grid-template-columns:1fr 1fr;gap:40px}}
.info{display:flex;flex-direction:column;gap:12px}
.info .row{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.info .d{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.info .d .icon{width:20px;height:20px}
.info b{color:var(--ink);display:block;font-size:15px}.info span{font-size:13.5px}
form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--soft)}
.field{margin-bottom:13px}
.field label{display:block;font-weight:800;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,103,255,.15)}
.field textarea{resize:vertical;min-height:92px}
.row2{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.form-note{font-size:12px;color:var(--slate);margin-top:10px;text-align:center}
.chan{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.chan{grid-template-columns:1fr 1fr}}
.chan a{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;transition:transform .18s,border-color .2s}
.chan a:active{transform:scale(.97)}
@media(hover:hover){.chan a:hover{border-color:var(--blue);transform:translateY(-3px)}}
.chan .d{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--tint),var(--surface));
  border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center}
.chan .d .icon{width:24px;height:24px}
.chan b{color:var(--ink);font-size:15.5px;display:block}.chan span{font-size:13px}

/* ---------- logo strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.logos .l{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 16px;color:var(--slate);font-weight:800;font-size:14px}
.logos .l .icon{width:18px;height:18px;color:var(--blue)}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:820px;margin:0 auto}
@media(min-width:680px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 12px}
.stat .num{font-size:30px;font-weight:900;color:var(--blue);line-height:1}
.stat .num .suf{font-size:18px}
.stat .lab{font-size:12.5px;font-weight:700;margin-top:6px}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:40px 0 22px}
footer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
footer .brand{grid-column:1 / -1}
footer .logo{height:30px;margin-bottom:12px}
[data-theme="dark"] footer .logo{filter:brightness(0) invert(1)}
footer p{font-size:14px;max-width:340px}
footer h4{font-size:14px;margin-bottom:10px}
footer a{display:block;padding:5px 0;font-size:14px;color:var(--slate)}
@media(hover:hover){footer a:hover{color:var(--blue)}}
@media(min-width:760px){footer .wrap{grid-template-columns:2fr 1fr 1fr}footer .brand{grid-column:auto}}
.copy{text-align:center;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--slate)}
.tag{position:fixed;bottom:calc(94px + var(--safe-b));inset-inline-start:10px;background:var(--blue);color:#fff;font-size:10px;
  font-weight:800;padding:4px 9px;border-radius:6px;z-index:50;opacity:.85}
@media(min-width:1040px){.tag{bottom:10px}}

/* ---------- accessibility panel ---------- */
.a11y-wrap{position:relative}
.a11y-panel{position:fixed;top:auto;bottom:calc(94px + var(--safe-b));inset-inline:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--soft);padding:12px;z-index:210;display:none;max-width:300px;margin-inline-start:auto}
.a11y-panel.open{display:block}
@media(min-width:1040px){.a11y-panel{position:fixed;top:calc(64px + var(--safe-t));bottom:auto;inset-inline-start:auto;inset-inline-end:16px;width:250px;margin-inline-start:0}}
.a11y-title{font-weight:900;color:var(--ink);font-size:14px;padding:2px 6px 10px}
.opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--line);background:var(--bg);
  border-radius:10px;cursor:pointer;color:var(--ink);font-weight:700;font-size:13px;margin-bottom:6px;font-family:var(--font)}
.opt .icon{width:17px;height:17px;color:var(--blue);flex:0 0 auto}
.opt .lbl{flex:1;text-align:start}.opt .dot{width:16px;height:16px;border-radius:5px;border:2px solid var(--line);flex:0 0 auto}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--tint)}
.opt[aria-pressed="true"] .dot{background:var(--blue);border-color:var(--blue)}
.a11y-reset{width:100%;margin-top:4px;padding:10px;border:2px solid var(--blue);background:transparent;color:var(--blue);
  border-radius:10px;font-weight:800;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px}
.a11y-reset .icon{width:16px;height:16px}
html.a11y-links a:not(.btn):not(.ptile):not(.snav a){text-decoration:underline !important;text-underline-offset:3px}
html.a11y-dys,html.a11y-dys *{font-family:Verdana,Tahoma,sans-serif !important;letter-spacing:.03em;word-spacing:.12em;line-height:1.9 !important}
html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{animation:none !important;transition:none !important}

/* ---------- utilities ---------- */
.center-cta{text-align:center;margin-top:26px}
.anchor-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--slate);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;margin-top:14px}
.anchor-link .icon{width:14px;height:14px;color:var(--blue)}
.lede{font-size:clamp(16px,4vw,19px);color:var(--ink);font-weight:600;max-width:680px}