/* Site design (2026-10-14, from home page version B): header (.hbh), footer (.hbf), home page sections (.hb-*)
   and the inner-page restyle at the end. Loaded on every page after style.css; uses its colour/font tokens. */
:root{--hb-bg:#FAFAF8;--hb-tint:#F3F4F1;--hb-line:#E6E7E3;--hb-ink:#0B0F19;--hb-soft:#5E6573;--hb-r:28px}
.hb{background:var(--hb-bg);color:var(--hb-ink)}
.hb-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.hb h1,.hb h2,.hb h3{font-family:var(--font-head);color:var(--hb-ink);letter-spacing:-.035em;margin:0}
.hb p{margin:0}
.hb-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .25s}

/* buttons & links */
.hb-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hb-btn{display:inline-flex;align-items:center;gap:10px;padding:.95em 1.5em;border-radius:999px;font-weight:600;font-size:.98rem;line-height:1;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.hb-btn:hover{text-decoration:none;transform:translateY(-1px)}
.hb-btn:hover .hb-arrow{transform:translateX(3px)}
.hb-btn--dark{background:var(--hb-ink);color:#fff}
.hb-btn--dark:hover{background:#000;color:#fff;box-shadow:0 10px 30px rgba(11,15,25,.18)}
.hb-btn--ghost{color:var(--hb-ink);box-shadow:inset 0 0 0 1px var(--hb-line);background:#fff}
.hb-btn--ghost:hover{color:var(--hb-ink);box-shadow:inset 0 0 0 1px var(--hb-ink)}
.hb-btn--red{background:var(--red);color:#fff}
.hb-btn--red:hover{background:var(--red-600);color:#fff}
.hb-btn--light{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hb-btn--light:hover{color:#fff;background:rgba(255,255,255,.14)}
.hb-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--hb-ink);white-space:nowrap}
.hb-link:hover{text-decoration:none;color:var(--red-600)}
.hb-link:hover .hb-arrow{transform:translateX(3px)}

/* hero */
.hb-hero{padding:clamp(56px,9vw,120px) 0 48px}
.hb-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
.hb-chip{display:inline-flex;align-items:center;gap:8px;padding:.45em .9em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--hb-line);font-size:.82rem;font-weight:600;color:var(--hb-soft);margin-bottom:28px}
.hb-chip i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-50)}
.hb-hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;font-weight:800;margin-bottom:28px}
.hb-hero h1 span{color:var(--red)}
.hb-hero__copy > p{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.6;color:var(--hb-soft);max-width:34em;margin-bottom:36px}
.hb-hero__visual{position:relative;aspect-ratio:1/1;border-radius:var(--hb-r);background:radial-gradient(120% 90% at 70% 20%,#fff 0%,var(--hb-tint) 60%,#E9EAE6 100%);display:grid;place-items:center;overflow:hidden}
.hb-hero__visual::after{content:"";position:absolute;inset:auto 18% 14% 18%;height:18px;border-radius:50%;background:rgba(11,15,25,.18);filter:blur(16px)}
.hb-hero__visual img{position:relative;z-index:1;width:82%;height:auto;max-height:78%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hb-hero__visual:hover img{transform:scale(1.03) rotate(-1deg)}
.hb-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:72px 0 0;border-top:1px solid var(--hb-line)}
.hb-stats > div{padding:24px 24px 0 0}
.hb-stats > div + div{padding-left:24px;border-left:1px solid var(--hb-line)}
.hb-stats dt{font:800 1.15rem var(--font-head);letter-spacing:-.02em}
.hb-stats dd{margin:4px 0 0;color:var(--hb-soft);font-size:.92rem}

/* sections */
.hb-section{padding:clamp(64px,8vw,112px) 0}
.hb-section--tint{background:var(--hb-tint)}
.hb-section--last{padding-top:0}
.hb-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.hb-head h2,.hb-split h2,.hb-cta h2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.04;font-weight:800}

/* bento */
.hb-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(260px,auto));gap:16px}
.hb-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:var(--hb-r);background:#fff;box-shadow:inset 0 0 0 1px var(--hb-line);padding:28px;color:var(--hb-ink);min-height:260px;transition:box-shadow .3s,transform .3s}
.hb-tile:hover{text-decoration:none;transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--hb-line),0 24px 50px rgba(11,15,25,.08)}
.hb-tile--1{grid-row:span 2;background:var(--hb-ink);box-shadow:none;color:#fff}
.hb-tile--1 h3{color:#fff}
.hb-tile--1 p{color:#AEB6C6}
.hb-tile--4{grid-column:span 2}
.hb-tile__text{position:relative;z-index:1;max-width:22em}
.hb-tile h3{font-size:1.45rem;line-height:1.15;margin-bottom:8px}
.hb-tile p{color:var(--hb-soft);font-size:.95rem;line-height:1.5}
.hb-tile img{align-self:flex-end;width:62%;max-height:180px;object-fit:contain;margin-top:16px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hb-tile--1 img{width:100%;max-height:none;margin-top:32px}
.hb-tile--4 img{position:absolute;right:24px;bottom:16px;width:44%;max-height:220px}
.hb-tile:hover img{transform:scale(1.05)}
.hb-tile__go{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hb-tint);color:var(--hb-ink);transition:background .25s,color .25s,transform .25s}
.hb-tile--1 .hb-tile__go{background:rgba(255,255,255,.1);color:#fff}
.hb-tile:hover .hb-tile__go{background:var(--red);color:#fff;transform:rotate(-45deg)}

/* features: hairline numbered list */
.hb-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.hb-split__head{position:sticky;top:110px}
.hb-split__head p{color:var(--hb-soft);font-size:1.08rem;margin:20px 0 28px;max-width:24em}
.hb-features{list-style:none;margin:0;padding:0;border-top:1px solid #D9DBD5}
.hb-features li{border-bottom:1px solid #D9DBD5}
.hb-features a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:24px 4px;color:var(--hb-ink);transition:padding .25s}
.hb-features a:hover{text-decoration:none;padding-left:12px}
.hb-features a:hover .hb-arrow{color:var(--red);transform:translateX(4px)}
.hb-features__n{font:600 .85rem var(--font);color:#9AA0AB;font-variant-numeric:tabular-nums}
.hb-features__t b{display:block;font:700 1.2rem/1.3 var(--font-head);letter-spacing:-.015em}
.hb-features__t small{display:block;margin-top:4px;color:var(--hb-soft);font-size:.92rem;line-height:1.5}

/* news */
.hb-news{list-style:none;margin:0;padding:0;border-top:1px solid var(--hb-line)}
.hb-news li{border-bottom:1px solid var(--hb-line)}
.hb-news a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:28px 4px;color:var(--hb-ink)}
.hb-news a:hover{text-decoration:none}
.hb-news a:hover b{color:var(--red-600)}
.hb-news a:hover .hb-arrow{transform:translateX(4px)}
.hb-news__tag{color:#9AA0AB;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hb-news b{display:block;font:700 1.2rem/1.35 var(--font-head);letter-spacing:-.015em;transition:color .2s}
.hb-news small{display:block;margin-top:6px;color:var(--hb-soft);font-size:.95rem;line-height:1.55;max-width:60em}

/* CTA */
.hb-cta{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:40px;align-items:end;background:var(--hb-ink);color:#fff;border-radius:var(--hb-r);padding:clamp(36px,5vw,64px)}
.hb-cta h2{color:#fff;max-width:16em}
.hb-cta p{color:#AEB6C6;margin-top:16px;font-size:1.05rem}

/* reveal on scroll (only when JS + motion allowed) */
.hb-js .hb-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hb-js .hb-reveal.is-in{opacity:1;transform:none}

@media (max-width:980px){
	.hb-hero__grid,.hb-split{grid-template-columns:1fr}
	.hb-hero__visual{aspect-ratio:4/3}
	.hb-split{gap:32px}.hb-split__head{position:static}
	.hb-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
	.hb-tile--1{grid-row:auto;grid-column:span 2}
	.hb-tile--1 img{width:60%;margin-top:16px}
	.hb-cta{grid-template-columns:1fr;align-items:start}
}
@media (max-width:640px){
	.hb-wrap{padding:0 16px}
	.hb-stats{grid-template-columns:1fr;margin-top:48px}
	.hb-stats > div,.hb-stats > div + div{padding:16px 0;border-left:0;border-bottom:1px solid var(--hb-line)}
	.hb-bento{grid-template-columns:1fr}
	.hb-tile--1,.hb-tile--4{grid-column:auto}
	.hb-tile--4 img{position:static;width:62%}
	.hb-head{flex-direction:column;align-items:flex-start}
	.hb-news a{grid-template-columns:1fr auto;gap:6px 16px}
	.hb-news__tag{grid-column:1/-1}
	.hb-features a{grid-template-columns:36px minmax(0,1fr) auto}
}

/* ---------- B header ---------- */
.hb-body{background:#FAFAF8}
.hbh-announce{background:#0B0F19;color:#C9CED8;font-size:.84rem}
.hbh-announce .hb-wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;text-align:center;padding-top:6px;padding-bottom:6px}
.hbh-announce a{color:#fff;font-weight:600;white-space:nowrap}
.hbh-announce__dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(228,0,43,.25);flex:none}
.hbh{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.admin-bar .hbh{top:32px}
.hbh.is-scrolled{border-bottom-color:#E6E7E3;background:rgba(250,250,248,.9)}
.hbh__bar{display:flex;align-items:center;gap:28px;height:76px}
.hbh__logo{flex:none}
.hbh__logo img{display:block;height:36px;width:auto}
.hbh__nav{flex:1;display:flex;justify-content:center}
.hbh__menu{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.hbh__menu > li{position:relative}
.hbh__menu > li > a{display:flex;align-items:center;gap:6px;padding:.55em .95em;border-radius:999px;color:#0B0F19;font-weight:500;font-size:.95rem;transition:background .2s}
.hbh__menu > li > a:hover,.hbh__menu > li.current-menu-item > a{background:rgba(11,15,25,.06);text-decoration:none}
.hbh__menu > li.menu-item-has-children > a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.hbh__menu .sub-menu{list-style:none;margin:0;padding:10px;position:absolute;top:calc(100% + 10px);left:50%;min-width:240px;background:#fff;border-radius:18px;box-shadow:0 0 0 1px #E6E7E3,0 24px 60px rgba(11,15,25,.12);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .2s,visibility .2s}
.hbh__menu .sub-menu::before{content:"";position:absolute;inset:-12px 0 auto 0;height:12px}
.hbh__menu > li:hover > .sub-menu,.hbh__menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hbh__menu .sub-menu a{display:block;padding:.6em .85em;border-radius:10px;color:#0B0F19;font-size:.93rem}
.hbh__menu .sub-menu a:hover{background:#F3F4F1;color:var(--red-600);text-decoration:none}
.hbh__actions{display:flex;align-items:center;gap:14px;flex:none}
.hbh__phone{display:inline-flex;align-items:center;gap:8px;color:#0B0F19;font-weight:600;font-size:.92rem}
.hbh__phone:hover{text-decoration:none;color:var(--red-600)}
.hbh__phone svg{width:16px;height:16px;fill:currentColor}
.hb-btn--sm{padding:.75em 1.2em;font-size:.9rem}
.hbh__toggle{display:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(11,15,25,.06);cursor:pointer;position:relative}
.hbh__toggle span{position:absolute;left:13px;right:13px;height:2px;background:#0B0F19;border-radius:2px;transition:transform .25s,top .25s}
.hbh__toggle span:first-child{top:17px}.hbh__toggle span:last-child{top:25px}
.hbh.is-open .hbh__toggle span:first-child{top:21px;transform:rotate(45deg)}
.hbh.is-open .hbh__toggle span:last-child{top:21px;transform:rotate(-45deg)}
.hbh__mobile-extra{display:none}
.hb-lock{overflow:hidden}

/* ---------- marketing sections ---------- */
.hb-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-600);margin-bottom:14px}
.hb-eyebrow--light{color:#FF8FA3}
.hb-head--center{flex-direction:column;align-items:center;text-align:center}
.hb-section--tight{padding-top:24px}
.hb-hero__visual{overflow:visible}
.hb-float{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(11,15,25,.06),0 16px 40px rgba(11,15,25,.12);font-size:.82rem;color:var(--hb-soft);animation:hb-bob 6s ease-in-out infinite}
.hb-float b{font:800 .98rem var(--font-head);color:var(--hb-ink)}
.hb-float--a{top:12%;left:-24px}
.hb-float--b{bottom:14%;right:-20px;animation-delay:-3s}
@keyframes hb-bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hb-float{animation:none}}
.hb-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hb-value{background:#fff;border-radius:var(--hb-r);box-shadow:inset 0 0 0 1px var(--hb-line);padding:32px}
.hb-value__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--red-50);margin-bottom:22px}
.hb-value__icon svg{width:26px;height:26px;fill:none;stroke:var(--red-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hb-value h3{font-size:1.3rem;margin-bottom:10px}
.hb-value p{color:var(--hb-soft);line-height:1.6}
.hb-statement{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--hb-line);border-bottom:1px solid var(--hb-line)}
.hb-statement p{font:800 clamp(1.9rem,4.6vw,4rem)/1.08 var(--font-head);letter-spacing:-.035em;color:var(--hb-ink);max-width:18em}
.hb-statement em{font-style:normal;color:#A3A8B1}
.hb-uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hb-use{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--hb-r);background:#fff;box-shadow:inset 0 0 0 1px var(--hb-line);color:var(--hb-ink);transition:transform .3s,box-shadow .3s}
.hb-use:hover{text-decoration:none;transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--hb-line),0 24px 50px rgba(11,15,25,.08)}
.hb-use__n{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9AA0AB}
.hb-use h3{font-size:1.25rem}
.hb-use p{color:var(--hb-soft);font-size:.95rem;line-height:1.6;flex:1}
.hb-use .hb-link{font-size:.9rem;margin-top:8px}
.hb-use:hover .hb-link{color:var(--red-600)}
.hb-use:hover .hb-arrow{transform:translateX(3px)}

/* ---------- B footer ---------- */
.hbf{position:relative;overflow:hidden;background:#F3F4F1;color:#5E6573;padding:clamp(64px,8vw,104px) 0 0;border-top:1px solid #E6E7E3}
.hbf__top{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;padding-bottom:56px;border-bottom:1px solid #DCDDD8}
.hbf__top h2{font-family:var(--font-head);color:#0B0F19;margin:0;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;letter-spacing:-.04em;font-weight:800}
.hbf__cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;padding:56px 0}
.hbf__brand img{height:34px;width:auto}
.hbf__brand p{margin:18px 0 20px;font-size:.92rem;line-height:1.65;max-width:30em}
.hbf h4{font:700 .8rem var(--font);letter-spacing:.12em;text-transform:uppercase;color:#0B0F19;margin:0 0 16px}
.hbf ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.hbf a{color:#0B0F19}
.hbf a:hover{color:var(--red-600);text-decoration:none}
.hbf .hb-btn--dark,.hbf .hb-btn--dark:hover{color:#fff}
.hbf__social{display:flex;gap:10px}
.hbf__social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px #E0E1DC;transition:background .2s}
.hbf__social a:hover{background:#0B0F19}
.hbf__social svg{width:17px;height:17px;fill:#0B0F19;transition:fill .2s}
.hbf__social a:hover svg{fill:#fff}
.hbf__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;border-top:1px solid #DCDDD8;font-size:.84rem}
.hbf__word{font:800 clamp(5rem,19vw,17rem)/.8 var(--font-head);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #D6D8D2;text-align:center;white-space:nowrap;margin:8px 0 -.12em;user-select:none}

@media (max-width:1080px){
	.hbh__nav{position:fixed;top:var(--hbh-bottom,76px);left:0;right:0;bottom:0;background:#FAFAF8;flex-direction:column;justify-content:flex-start;padding:16px 24px 32px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
	.hbh.is-open .hbh__nav{opacity:1;visibility:visible;transform:none}
	.hbh__menu{flex-direction:column;gap:0}
	.hbh__menu > li{border-bottom:1px solid #E6E7E3}
	.hbh__menu > li > a{font:700 1.4rem var(--font-head);padding:.8em 0;border-radius:0;justify-content:space-between}
	.hbh__menu > li > a:hover{background:none}
	.hbh__menu .sub-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:none;padding:0 0 12px;display:none;min-width:0}
	.hbh__menu > li.is-open > .sub-menu{display:block}
	.hbh__menu > li:hover > .sub-menu{transform:none}
	.hbh__mobile-extra{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px}
	.hbh__mobile-extra .hb-btn{color:#fff}
	.hbh__toggle{display:block}
	.hbh__actions .hbh__phone span{display:none}
	.hb-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hbf__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
	.hbf__brand{grid-column:1/-1}
}
@media (max-width:980px){.hb-float--a{left:12px}.hb-float--b{right:12px}.hb-values{grid-template-columns:1fr}}
@media (max-width:640px){
	.hbh__actions .hb-btn--sm{display:none}
	.hb-uses{grid-template-columns:1fr}
	.hbf__cols{grid-template-columns:1fr 1fr}
	.hbf__top{align-items:flex-start}
	.hb-float{display:none}
}
/* open mobile menu: a backdrop-filter would make the header the containing block of the fixed menu panel */
@media (max-width:1080px){.hbh.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:#FAFAF8}}

/* ---------- content from the ABP "Simpler Security & More Remote Power" deck (2026-10-14) ---------- */
.hb-stats{grid-template-columns:repeat(4,1fr)}
.hb-cloud{background:#0B0F19;color:#AEB6C6;padding:clamp(64px,8vw,112px) 0;margin-top:24px}
.hb-cloud__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.hb-cloud h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;font-weight:800;margin-bottom:22px}
.hb-cloud p{font-size:1.1rem;line-height:1.65;max-width:34em}
.hb-cloud p b{color:#fff;font-weight:700}
.hb-cloud__apps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hb-cloud__apps li{padding:.6em 1.05em;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#E7EAF0;font-weight:500;font-size:.95rem}
.hb-cloud__apps li:nth-child(3n+1){background:rgba(228,0,43,.14);box-shadow:inset 0 0 0 1px rgba(228,0,43,.35)}
.hb-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hb-pillar{background:#fff;border-radius:var(--hb-r);box-shadow:inset 0 0 0 1px var(--hb-line);padding:28px}
.hb-pillar h3{font-size:1.25rem;margin-bottom:14px}
.hb-pillar ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hb-pillar li{position:relative;padding-left:22px;color:var(--hb-soft);font-size:.94rem;line-height:1.5}
.hb-pillar li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.hb-section--flush{padding-top:0}
.hb-scale{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--hb-line);border-bottom:1px solid var(--hb-line)}
.hb-scale > div{padding:32px 24px}
.hb-scale > div + div{border-left:1px solid var(--hb-line)}
.hb-scale dt{font:800 clamp(2.2rem,4vw,3.4rem)/1 var(--font-head);letter-spacing:-.04em;color:var(--hb-ink)}
.hb-scale dd{margin:10px 0 0;color:var(--hb-soft);font-size:.92rem;line-height:1.45}
.hb-cta__list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.hb-cta__list li{position:relative;padding-left:26px;color:#D5DAE3;font-size:.95rem;line-height:1.45}
.hb-cta__list li::before{content:"";position:absolute;left:0;top:.3em;width:14px;height:8px;border-left:2px solid #FF8FA3;border-bottom:2px solid #FF8FA3;transform:rotate(-45deg)}
.hb-cta h2{max-width:18em}
@media (max-width:1080px){.hb-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-cloud__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:980px){.hb-stats,.hb-scale{grid-template-columns:repeat(2,1fr)}.hb-stats > div:nth-child(3){padding-left:0;border-left:0}.hb-scale > div:nth-child(3){border-left:0}.hb-scale > div:nth-child(n+3){border-top:1px solid var(--hb-line)}}
@media (max-width:640px){.hb-pillars,.hb-cta__list{grid-template-columns:1fr}.hb-stats{grid-template-columns:1fr}.hb-scale > div{padding:24px 12px}}
.hbf{padding-top:16px}

/* ---------- hero with rotating background images (same slides as draytekusa.com), 2026-10-14 ---------- */
.hb-hero--bg{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:min(78vh,720px);padding:clamp(88px,12vw,140px) 0 clamp(72px,9vw,112px);background:#0B0F19;color:#fff}
.hb-hero__slides{position:absolute;inset:0;z-index:-2}
.hb-hero__slide{position:absolute;inset:0;background:#0B0F19 center/cover no-repeat;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 7s ease-out}
.hb-hero__slide.is-on{opacity:1;transform:scale(1)}
.hb-hero--bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,11,19,.92) 0%,rgba(8,11,19,.78) 38%,rgba(8,11,19,.35) 72%,rgba(8,11,19,.2) 100%),linear-gradient(0deg,rgba(8,11,19,.55) 0%,rgba(8,11,19,0) 35%)}
.hb-hero__inner{width:100%}
.hb-hero--bg .hb-hero__copy{max-width:640px}
.hb-hero--bg h1{color:#fff;font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:.98;font-weight:800;margin-bottom:28px;text-wrap:balance}
.hb-hero--bg h1 span{color:var(--red)}
.hb-hero--bg .hb-hero__copy > p{color:rgba(255,255,255,.82);font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.6;max-width:34em;margin-bottom:36px}
.hb-hero--bg .hb-btn--light{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hb-hero__dots{position:absolute;left:0;right:0;bottom:28px;display:flex;gap:8px}
.hb-hero__dots button{width:28px;height:4px;border:0;border-radius:4px;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s,width .3s}
.hb-hero__dots button.is-on{width:44px;background:#fff}
.hb-hero--bg + .hb-cloud{margin-top:0;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:640px){
	.hb-hero--bg{min-height:0;padding:72px 0 88px}
	.hb-hero--bg::after{background:linear-gradient(180deg,rgba(8,11,19,.7) 0%,rgba(8,11,19,.88) 100%)}
}
@media (prefers-reduced-motion:reduce){.hb-hero__slide{transition:opacity .6s ease;transform:none}.hb-hero__slide.is-on{transform:none}}

/* ---------- sections 5-12 as bands (2026-10-14): same hairline separator, alternating white / light gray ---------- */
.hb-band{border-top:1px solid #E3E4DF;padding:clamp(64px,8vw,104px) 0;margin:0}
.hb-band--white{background:#FFFFFF}
.hb-band--tint{background:#F3F4F1}
.hb-hero--bg + .hb-band{border-top:0}
.hb-band--white .hb-value,.hb-band--white .hb-pillar,.hb-band--white .hb-use,.hb-band--white .hb-tile:not(.hb-tile--1){background:#FAFAF8}
.hb-band .hb-split__head{top:96px}
/* 5: the cloud section, now light */
.hb-cloud.hb-band{color:var(--hb-soft)}
.hb-cloud.hb-band h2{color:var(--hb-ink)}
.hb-cloud.hb-band p b{color:var(--hb-ink)}
.hb-cloud.hb-band .hb-cloud__apps li{background:#F3F4F1;box-shadow:inset 0 0 0 1px #E3E4DF;color:var(--hb-ink)}
.hb-cloud.hb-band .hb-cloud__apps li:nth-child(3n+1){background:var(--red-50);box-shadow:inset 0 0 0 1px #F7C7D0;color:var(--red-600)}
/* 7+8: numbers row under the product tiles */
.hb-band .hb-scale{margin-top:48px}
/* 9: statement, separators come from the band */
.hb-statement.hb-band{border-bottom:0}
.hb-head{margin-bottom:36px}
.hb-head--center h2{margin-top:0}
.hbf{border-top:1px solid #E3E4DF}

/* ---------- Products mega menu (li.dt-mega, added in functions.php): categories as columns with their products ---------- */
.hbh__menu > li.dt-mega{position:static}
.hbh__menu > li.dt-mega > .sub-menu{top:100%;width:min(1040px,calc(100vw - 48px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 20px;padding:24px}
.hbh__menu > li.dt-mega > .sub-menu > li > a{font:800 .76rem var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--red-600);padding:.5em .85em .7em;border-bottom:1px solid #EEEFEB;border-radius:0;margin-bottom:6px}
.hbh__menu > li.dt-mega > .sub-menu > li > a:hover{background:none;color:var(--hb-ink)}
.hbh__menu .sub-menu .sub-menu{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;background:none;padding:0;min-width:0;display:block}
.hbh__menu .sub-menu .sub-menu::before{display:none}
.hbh__menu .sub-menu .sub-menu a{padding:.42em .85em;font-size:.9rem}
.hbh__menu > li:not(.dt-mega) .sub-menu .sub-menu{display:none}
@media (max-width:1080px){
	.hbh__menu > li.dt-mega{position:relative}
	.hbh__menu > li.dt-mega > .sub-menu{width:auto;display:none;grid-template-columns:1fr;padding:0 0 12px}
	.hbh__menu > li.dt-mega.is-open > .sub-menu{display:block}
	.hbh__menu > li.dt-mega > .sub-menu > li > a{padding:.9em 0 .4em;border:0;margin:0}
	.hbh__menu .sub-menu a{padding:.5em 0}
	.hbh__menu .sub-menu .sub-menu a{padding:.35em 0 .35em 14px;color:#5E6573}
}

/* ---------- inner pages in the same style (2026-10-14) ---------- */
:root{--ink:#0B0F19;--mist:#F3F4F1;--line:#E3E4DF;--radius:20px}
.page-hero{background:#fff;color:var(--hb-ink);padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px);border-bottom:1px solid #E3E4DF}
.page-hero h1{color:var(--hb-ink);font:800 clamp(2.2rem,4.6vw,3.8rem)/1.02 var(--font-head);letter-spacing:-.04em;margin:.25em 0 0;text-wrap:balance}
.crumbs{font-size:.88rem;color:#8A909B}
.crumbs a{color:#5E6573}
.crumbs a:hover{color:var(--red-600);text-decoration:none}
.dt-tabs__bar{top:76px}
.admin-bar .dt-tabs__bar{top:108px}
.card,.dt-tile,.dt-feature,.dt-card,.dt-partner,.dt-audience,.dt-form{box-shadow:inset 0 0 0 1px #E3E4DF;border-color:transparent}
.card:hover,.dt-tile:hover,.dt-feature:hover,.dt-card:hover,.dt-partner:hover,.dt-audience:hover{box-shadow:inset 0 0 0 1px #E3E4DF,0 24px 50px rgba(11,15,25,.08)}
.sidebar .widget{border-radius:var(--radius)}
.dt-btn{font-weight:600}
.dt-btn--primary{background:var(--red)}
.dt-btn--outline{border-color:#E3E4DF}
.dt-tiles-hero{background:#fff;border-bottom-color:#E3E4DF}
.hbh__menu > li.dt-mega > .sub-menu::before{inset:-28px 0 auto 0;height:28px}
.hb-hero--bg .hb-hero__copy > p a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.hb-hero--bg .hb-hero__copy > p a:hover{text-decoration-color:var(--red)}
/* bigger logo (2026-10-14): the draytekusa.com logo.png, 300x73 */
.hbh__logo img,.hbh__logo .custom-logo{height:50px;width:auto}
.hbh__bar{gap:24px}
@media (max-width:640px){.hbh__logo img,.hbh__logo .custom-logo{height:40px}}
.hbf__brand img{height:42px}
/* logo at the original image size (300x73, no scaling) on desktop; the header grows to fit */
.hbh__logo img,.hbh__logo .custom-logo{width:300px;height:73px;max-width:none}
.hbh__bar{height:100px}
.dt-tabs__bar{top:100px}
.admin-bar .dt-tabs__bar{top:132px}
@media (max-width:1080px){.hbh__bar{height:84px}.hbh__logo img,.hbh__logo .custom-logo{width:246px;height:60px}.dt-tabs__bar{top:84px}.admin-bar .dt-tabs__bar{top:116px}}
@media (max-width:640px){.hbh__bar{height:72px}.hbh__logo img,.hbh__logo .custom-logo{width:180px;height:44px}.dt-tabs__bar{top:72px}}
/* product buttons: "Live GUI Demo" gets a browser-window + pointer icon (open the device web interface), 2026-10-14 */
.dt-product .dt-btn-demo > .wp-block-button__link{gap:.55em}
.dt-product .dt-btn-demo > .wp-block-button__link::before{content:"";flex:none;width:1.15em;height:1.15em;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M3 8.5h18'/%3E%3Cpath d='M6.5 6.2h.01M9 6.2h.01'/%3E%3Cpath d='M14 13l7 2.6-3 1.2-1.2 3z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M3 8.5h18'/%3E%3Cpath d='M6.5 6.2h.01M9 6.2h.01'/%3E%3Cpath d='M14 13l7 2.6-3 1.2-1.2 3z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- home page as blocks (2026-10-14): the same design for the block version of each section ---------- */
:root{--hb-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.hb .wp-block-group,.hb .wp-block-image{margin-block-start:0}
/* hero */
.hb-hero--bg h1 strong{color:var(--red);font-weight:inherit}
.hb-ctas.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hb-ctas .wp-block-button{margin:0}
.hb-ctas .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;padding:.95em 1.5em;border-radius:999px;font-weight:600;font-size:.98rem;line-height:1;border:0;transition:background .2s,color .2s,transform .2s,box-shadow .2s;text-decoration:none}
.hb-ctas .wp-block-button__link:hover{transform:translateY(-1px);text-decoration:none}
.hb-ctas .hb-btn--red > .wp-block-button__link{background:var(--red);color:#fff}
.hb-ctas .hb-btn--red > .wp-block-button__link:hover{background:var(--red-600);color:#fff}
.hb-ctas .hb-btn--red > .wp-block-button__link::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--hb-arrow) center/contain no-repeat;mask:var(--hb-arrow) center/contain no-repeat;transition:transform .25s}
.hb-ctas .hb-btn--red > .wp-block-button__link:hover::after{transform:translateX(3px)}
.hb-ctas .hb-btn--light > .wp-block-button__link{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hb-ctas .hb-btn--light > .wp-block-button__link:hover{background:rgba(255,255,255,.16);color:#fff}
.hb-hero--bg .hb-hero__copy > p a{color:#fff}
/* section headers with a "more" link */
.hb p.hb-link{margin:0}
.hb p.hb-link a,.hb-use__more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--hb-ink);white-space:nowrap}
.hb p.hb-link a:hover{color:var(--red-600);text-decoration:none}
.hb p.hb-link a::after,.hb-use__more::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--hb-arrow) center/contain no-repeat;mask:var(--hb-arrow) center/contain no-repeat;transition:transform .25s}
.hb p.hb-link a:hover::after,.hb-use:hover .hb-use__more::after{transform:translateX(3px)}
.hb-head__title h2{margin:0}
/* 5 */
.hb-cloud p strong{color:var(--hb-ink)}
.hb-cloud__apps.wp-block-list{margin:0}
/* 6: pillar icon = rounded square (::before) + icon mask (::after) chosen by the hb-pillar--* class */
.hb-pillar{position:relative}
.hb-pillar::before{content:"";display:block;width:52px;height:52px;border-radius:16px;background:var(--red-50);margin-bottom:22px}
.hb-pillar::after{content:"";position:absolute;top:41px;left:41px;width:26px;height:26px;background:var(--red-600);-webkit-mask:var(--hb-icon) center/contain no-repeat;mask:var(--hb-icon) center/contain no-repeat}
.hb-pillar--signal{--hb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10.5 10.5 0 0 1 14 0M8.5 16a5.5 5.5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19.2' r='1.2' fill='black'/%3E%3C/svg%3E")}
.hb-pillar--shield{--hb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.hb-pillar--lock{--hb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3M12 14.5v2.5'/%3E%3C/svg%3E")}
.hb-pillar--cloud{--hb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z'/%3E%3C/svg%3E")}
.hb-pillar .wp-block-list{margin:0}
/* 7: product tiles - the whole tile is clickable (title link stretched), arrow circle drawn by ::after */
.hb-tile h3 a{color:inherit}
.hb-tile h3 a::before{content:"";position:absolute;inset:0;z-index:1}
.hb-tile h3 a:hover{text-decoration:none}
.hb-tile::after{content:"";position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;background:var(--hb-tint);transition:background .25s,transform .25s}
.hb-tile::before{content:"";position:absolute;z-index:1;top:35px;right:35px;width:18px;height:18px;background:var(--hb-ink);-webkit-mask:var(--hb-arrow) center/contain no-repeat;mask:var(--hb-arrow) center/contain no-repeat;transition:transform .25s,background .25s}
.hb-tile--1::after{background:rgba(255,255,255,.1)}
.hb-tile--1::before{background:#fff}
.hb-tile:hover::after{background:var(--red)}
.hb-tile:hover::before{background:#fff;transform:rotate(-45deg)}
.hb-tile > .wp-block-image{margin:16px 0 0;align-self:flex-end;width:62%}
.hb-tile .wp-block-image img{width:100%;max-height:180px;margin:0;align-self:auto;object-fit:contain}
.hb-tile--1 > .wp-block-image{width:100%;margin-top:32px}
.hb-tile--1 .wp-block-image img{max-height:none}
.hb-tile--4 > .wp-block-image{position:absolute;right:24px;bottom:16px;width:44%;margin:0}
.hb-tile--4 .wp-block-image img{max-height:220px}
.hb-tile p{margin:0}
/* 8 */
.hb-scale .hb-scale__n{font:800 clamp(2.2rem,4vw,3.4rem)/1 var(--font-head);letter-spacing:-.04em;color:var(--hb-ink);margin:0}
.hb-scale .hb-scale__t{margin:10px 0 0;color:var(--hb-soft);font-size:.92rem;line-height:1.45}
/* 10: use cases - whole card clickable */
.hb-use{position:relative}
.hb-use h3 a{color:inherit}
.hb-use h3 a::before{content:"";position:absolute;inset:0;z-index:1}
.hb-use h3 a:hover{text-decoration:none}
.hb-use p{margin:0}
.hb-use .hb-use__n,.hb-use .hb-use__more{flex:none}
.hb-use .hb-use__more{font-size:.9rem;margin-top:8px}
.hb-use:hover .hb-use__more{color:var(--red-600)}
@media (max-width:980px){.hb-tile--1 > .wp-block-image{width:60%;margin-top:16px}}
@media (max-width:640px){.hb-tile--4 > .wp-block-image{position:static;width:62%;margin-top:16px}}
/* whole product tile clickable: the title link's overlay must be sized by the tile, not by the text box */
.hb-tile .hb-tile__text{position:static}
.hb-tile h3 a::before{z-index:2}
.hb-tile::before,.hb-tile::after{pointer-events:none}
/* announcement strip content = the "Announcement strip" pattern (2026-10-14); same look in the editor (.dt-announce) */
.hbh-announce__content,.hbh-announce__content .dt-announce{background:none;padding:0;margin:0}
.hbh-announce__content p{margin:0}
.hbh-announce__content a{color:#fff;font-weight:600}
.dt-announce{background:#0B0F19;color:#C9CED8;font-size:.84rem;text-align:center;padding:12px 16px}
.dt-announce p{margin:0}
.dt-announce a{color:#fff;font-weight:600}

/* ---------- header & footer as block template parts (2026-10-14) ----------
   Appearance -> Template Parts -> Header / Footer. Same look as before; the menu is the core Navigation block. */
/* announcement strip */
.hbh-announce{display:flex;justify-content:center;align-items:center;min-height:40px;padding:6px 16px;text-align:center;margin:0}
.hbh-announce p{margin:0;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.hbh-announce p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(228,0,43,.25);flex:none}
.hbh-announce a{color:#fff;font-weight:600}
/* bar */
.hbh{margin:0}
.hbh__logo.wp-block-image{margin:0;flex:none}
.hbh__logo a{display:block}
.hbh__actions{margin:0}
p.hbh__phone{margin:0}
p.hbh__phone a{display:inline-flex;align-items:center;gap:8px;color:#0B0F19;font-weight:600;font-size:.92rem}
p.hbh__phone a::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
p.hbh__phone a:hover{color:var(--red-600);text-decoration:none}
.hbh__cta.wp-block-buttons{margin:0}
.hbh__cta .wp-block-button__link{background:#0B0F19;color:#fff;border-radius:999px;padding:.75em 1.2em;font-size:.9rem;font-weight:600;line-height:1;transition:background .2s,box-shadow .2s,transform .2s}
.hbh__cta .wp-block-button__link:hover{background:#000;color:#fff;box-shadow:0 10px 30px rgba(11,15,25,.18);transform:translateY(-1px)}
/* navigation (desktop) */
.hbh__nav.wp-block-navigation{flex:1;justify-content:center;font-size:.95rem}
.hbh .wp-block-navigation__container{gap:4px}
.hbh .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{padding:.55em .95em;border-radius:999px;color:#0B0F19;font-weight:500;transition:background .2s}
.hbh .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.hbh .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content{background:rgba(11,15,25,.06);text-decoration:none}
.hbh .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content{padding-right:.35em}
.hbh .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon{margin:0 .7em 0 0;width:10px;height:10px;opacity:.6}
.hbh .wp-block-navigation .has-child .wp-block-navigation__submenu-container{background:#fff;color:#0B0F19;border:0;border-radius:18px;box-shadow:0 0 0 1px #E6E7E3,0 24px 60px rgba(11,15,25,.12);padding:10px;min-width:240px}
.hbh .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container{top:calc(100% + 10px);left:50%;transform:translateX(-50%)}
.hbh .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hbh .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:.6em .85em;border-radius:10px;font-size:.93rem;color:#0B0F19}
.hbh .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{background:#F3F4F1;color:var(--red-600);text-decoration:none}
@media (min-width:1081px){
	/* Products: a 4-column panel under the whole header, categories as column titles with their products listed */
	.hbh .wp-block-navigation,.hbh .wp-block-navigation__responsive-container,.hbh .wp-block-navigation__responsive-close,
	.hbh .wp-block-navigation__responsive-dialog,.hbh .wp-block-navigation__responsive-container-content,.hbh .wp-block-navigation__container,
	.hbh .wp-block-navigation-item.dt-mega{position:static}
	.hbh .dt-mega > .wp-block-navigation__submenu-container{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 20px;width:min(1040px,calc(100vw - 48px)) !important;top:100% !important;padding:24px}
	.hbh .dt-mega > .wp-block-navigation__submenu-container::before{top:-28px;height:28px}
	.hbh .dt-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item{display:block}
	.hbh .dt-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{font:800 .76rem var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--red-600);padding:.5em .85em .7em;border-bottom:1px solid #EEEFEB;border-radius:0;margin-bottom:6px;display:block}
	.hbh .dt-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover{background:none;color:#0B0F19}
	.hbh .dt-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{position:static !important;visibility:inherit !important;opacity:inherit !important;width:auto !important;height:auto !important;min-width:0;overflow:visible !important;transform:none;box-shadow:none;background:none;padding:0;border-radius:0;left:auto;top:auto}
	.hbh .dt-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:.42em .85em;font-size:.9rem}
	.hbh .dt-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{display:none}
}
/* tablet / phone: the core hamburger + full-screen menu, used up to 1080px (core switches at 600px) */
.hbh .wp-block-navigation__responsive-container-open{width:44px;height:44px;border-radius:50%;background:rgba(11,15,25,.06);align-items:center;justify-content:center;color:#0B0F19}
@media (min-width:600px) and (max-width:1080px){
	.hbh .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
	.hbh .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
@media (max-width:1080px){
	.hbh__nav.wp-block-navigation{flex:0 0 auto;order:3}
	p.hbh__phone a{font-size:0;gap:0}
	p.hbh__phone a::before{width:18px;height:18px}
	.hbh .wp-block-navigation__responsive-container.is-menu-open{background:#FAFAF8 !important;color:#0B0F19 !important;padding:20px 24px 32px}
	.hbh .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:56px;align-items:stretch}
	.hbh .is-menu-open .wp-block-navigation__container{gap:0;align-items:stretch}
	.hbh .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{border-bottom:1px solid #E6E7E3;align-items:flex-start}
	.hbh .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{font:700 1.35rem var(--font-head);padding:.7em 0;border-radius:0;background:none}
	.hbh .is-menu-open .has-child .wp-block-navigation__submenu-container{box-shadow:none;background:none;padding:0 0 12px;border-radius:0;transform:none}
	.hbh .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:.35em 0;font-size:.98rem}
	.hbh .is-menu-open .dt-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{font:800 .76rem var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--red-600);padding-top:.9em}
	.hbh .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding-left:14px;color:#5E6573}
}
@media (max-width:640px){.hbh__cta{display:none}}
/* footer */
.hbf{margin:0}
.hbf__brand .wp-block-image{margin:0}
.hbf__col h4{margin:0 0 16px}
.hbf ul.wp-block-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hbf__social.wp-block-social-links{gap:10px;margin:0;padding:0}
.hbf__social .wp-social-link{background:#fff !important;color:#0B0F19 !important;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px #E0E1DC;display:grid;place-items:center;margin:0;transition:background .2s}
.hbf__social .wp-social-link a{padding:0 !important;color:inherit !important;display:grid;place-items:center}
.hbf__social .wp-social-link svg{width:17px;height:17px;fill:currentColor}
.hbf__social .wp-social-link:hover{background:#0B0F19 !important;color:#fff !important;transform:none}
.hbf__bottom p{margin:0}
p.hbf__word{margin:8px 0 -.12em}
/* fixes for the block header on small screens (2026-10-14) */
.hbh-announce p{display:block}
.hbh-announce p::before{display:inline-block;vertical-align:middle;margin:0 10px 2px 0}
.hbh .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container{min-width:260px}
html.has-modal-open .hbh{-webkit-backdrop-filter:none;backdrop-filter:none}   /* else the full-screen menu is positioned inside the header */
@media (max-width:1080px){
	.hbh__bar{flex-wrap:nowrap;gap:12px}
	.hbh__nav.wp-block-navigation{flex:0 0 auto !important;width:auto !important;order:3;margin:0}
	.hbh__actions{margin-left:auto}
}
@media (max-width:640px){.hbh .hbh__cta{display:none}}
@media (max-width:1080px){   /* undo the old custom header's mobile panel rules (.hbh__nav) - the Navigation block has its own overlay */
	.hbh .hbh__nav.wp-block-navigation{position:static;inset:auto;opacity:1;visibility:visible;transform:none;background:none;padding:0;overflow:visible;flex-direction:row}
}
.hbh .wp-block-navigation__responsive-container.is-menu-open{--navigation-layout-justification-setting:flex-start;--navigation-layout-justify:flex-start;--navigation-layout-align:flex-start;text-align:left}
.hbh .is-menu-open .wp-block-navigation__responsive-container-content,.hbh .is-menu-open .wp-block-navigation__container,
.hbh .is-menu-open .wp-block-navigation-item,.hbh .is-menu-open .wp-block-navigation__submenu-container{align-items:flex-start !important;text-align:left;width:100%}
/* announcement bar from flagged News items (2026-10-14): [dt_announcement]; several items take turns */
.hbh-announce{position:relative}
.hbh-announce__item{display:none !important}
.hbh-announce__item.is-on{display:block !important;animation:hb-ann-in .5s ease}
@keyframes hb-ann-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hbh-announce__item a{color:#C9CED8;font-weight:400}
.hbh-announce__item a:hover{text-decoration:none}
.hbh-announce__text{color:#fff;font-weight:600}
.hbh-announce__more{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;white-space:nowrap}
.hbh-announce__item a:hover .hbh-announce__more{text-decoration-color:var(--red)}
/* News listing (/news, archive-news.php) */
.dt-newslist{max-width:980px}
.dt-newslist .hb-news a{grid-template-columns:120px minmax(0,1fr) auto}
.dt-newslist .navigation.pagination{margin-top:28px}
.dt-newslist .nav-links{display:flex;gap:8px}
.dt-newslist .page-numbers{padding:.5em .9em;border-radius:999px;box-shadow:inset 0 0 0 1px #E3E4DF;color:#0B0F19}
.dt-newslist .page-numbers.current{background:#0B0F19;color:#fff}
@media (max-width:640px){.dt-newslist .hb-news a{grid-template-columns:1fr auto;gap:6px 16px}.dt-newslist .hb-news__tag{grid-column:1/-1}}
/* FAQ listing (/faq, archive-faq.php): cards with question, answer preview and Read more */
.dt-faqlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dt-faq{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px #E3E4DF;padding:26px;transition:box-shadow .25s,transform .25s}
.dt-faq:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #E3E4DF,0 24px 50px rgba(11,15,25,.08)}
.dt-faq__q{margin:0;font:800 1.08rem/1.3 var(--font-head);letter-spacing:-.01em;text-transform:none}
.dt-faq__q a{color:#0B0F19}
.dt-faq__q a::after{content:"";position:absolute;inset:0}
.dt-faq__q a:hover{text-decoration:none}
.dt-faq__a{margin:0;color:#5E6573;font-size:.95rem;line-height:1.6;flex:1}
.dt-faq__more{margin:0}
.dt-faq__more a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--red-600)}
.dt-faq:hover .dt-faq__more .hb-arrow{transform:translateX(3px)}
.dt-faq__help{margin:32px 0 0;color:#5E6573}
@media (max-width:760px){.dt-faqlist{grid-template-columns:1fr}}
/* news articles built with blocks (.dt-news), 2026-10-14 */
.dt-news{max-width:880px}
.dt-news .dt-news__lede{font-size:1.18rem;line-height:1.65;color:#0B0F19;margin:0 0 28px}
.dt-news .dt-figures{margin:0 0 36px}
.dt-news h2.wp-block-heading{font-size:1.6rem;margin:40px 0 12px}
.dt-news .wp-block-columns{gap:20px;margin:8px 0 32px}
.dt-news .wp-block-column{background:#F3F4F1;border-radius:20px;padding:24px}
.dt-news .wp-block-column h3{margin:0 0 8px;font-size:1.3rem;color:var(--red-600)}
.dt-news .wp-block-column p{margin:0 0 12px;color:#0B0F19;font-weight:500}
.dt-news .wp-block-column ul{margin:0;padding-left:1.1em;color:#5E6573;font-size:.95rem;display:grid;gap:6px}
.dt-news .wp-block-image{margin:28px 0}
.dt-news .wp-block-image img{border-radius:16px;box-shadow:0 0 0 1px #E3E4DF;height:auto}
.dt-news .wp-element-caption{color:#8A909B;font-size:.88rem;margin-top:10px;text-align:left}
.dt-news__cta.wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.dt-news .wp-block-button__link{border-radius:999px;padding:.8em 1.35em;font-weight:700;font-size:.95rem;background:var(--red);color:#fff;border:2px solid transparent}
.dt-news .is-style-outline > .wp-block-button__link{background:#fff;color:#0B0F19;border-color:#E3E4DF}
@media (max-width:781px){.dt-news .wp-block-columns{flex-wrap:wrap !important}.dt-news .wp-block-column{flex-basis:100% !important}}
.hb-split > p:empty,.hb-wrap > p:empty{display:none}
/* home page bands (2026-10-14): smooth white <-> light gray transitions instead of hard edges and divider lines */
:root{--hb-fade:clamp(64px,9vw,128px)}
.hb-band{border-top:0 !important}
.hb-band--tint{background:linear-gradient(180deg,#FFFFFF 0,#F3F4F1 var(--hb-fade),#F3F4F1 calc(100% - var(--hb-fade)),#FFFFFF 100%)}
.hb-statement.hb-band{border-bottom:0}
.hb-body .hbf{border-top:0;background:linear-gradient(180deg,#FFFFFF 0,#F3F4F1 var(--hb-fade),#F3F4F1 100%)}
/* stronger band definition (2026-10-14): darker gray, shorter soft edge */
:root{--hb-fade:clamp(28px,3.5vw,52px);--hb-band-gray:#ECEDE8}
.hb-band--tint{background:linear-gradient(180deg,#FFFFFF 0,var(--hb-band-gray) var(--hb-fade),var(--hb-band-gray) calc(100% - var(--hb-fade)),#FFFFFF 100%)}
.hb-body .hbf{background:linear-gradient(180deg,#FFFFFF 0,var(--hb-band-gray) var(--hb-fade),var(--hb-band-gray) 100%)}
:root{--hb-band-gray:#F0F1ED}   /* one step lighter (2026-10-14) */
:root{--hb-band-gray:#F2F3EF;--hb-fade:clamp(48px,6vw,88px)}   /* one more step lighter, longer soft edge (2026-10-14) */
.hb-body .hbf{background:var(--hb-band-gray);border-top:1px solid #E3E4DF}   /* footer: a clean line, no fade (2026-10-14) */
.hb-body .hbf{border-top:0}   /* footer starts with a sharp gray edge, no line (2026-10-14) */
.hbf__social.wp-block-social-links{display:flex;flex-direction:row;flex-wrap:wrap}
/* article pages built with blocks (.dt-article, e.g. Key Features > Remote Worker Solutions), 2026-10-15 */
.dt-article .dt-step{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:.35em;border-radius:50%;background:var(--red);color:#fff;font-size:.8em;vertical-align:.12em}
.dt-article .dt-note{background:#F3F4F1;border-left:3px solid var(--red);border-radius:0 12px 12px 0;padding:12px 16px;font-size:.95rem;margin:16px 0}
.dt-article .dt-vpn-table{margin:20px 0}
.dt-article .dt-vpn-table table{border-collapse:collapse;width:100%;font-size:.95rem;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #E3E4DF}
.dt-article .dt-vpn-table th{background:#0B0F19;color:#fff;text-align:left;padding:.75em 1em;font-weight:600;border:0}
.dt-article .dt-vpn-table td{padding:.75em 1em;border:0;border-top:1px solid #E3E4DF;vertical-align:top}
.dt-article .dt-vpn-table tr:nth-child(even) td{background:#FAFAF8}
.dt-article .dt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0 36px}
.dt-article .dt-card{display:flex;flex-direction:column;gap:6px;text-align:left}
.dt-article .dt-card .wp-block-image{margin:0 0 6px;text-align:center}
.dt-article .dt-card .wp-block-image img{max-height:120px;width:auto;box-shadow:none;border-radius:0}
.dt-article .dt-card h4{margin:0;font-size:1.05rem}
.dt-article .dt-card p{margin:0}
.dt-article .dt-card .dt-card__spec{color:var(--red-600);font-weight:600;font-size:.88rem}
.dt-article ol.wp-block-list{padding-left:1.3em;display:grid;gap:8px}
@media (max-width:600px){.dt-article .dt-grid--4{grid-template-columns:1fr}.dt-article .dt-vpn-table{overflow-x:auto}}
.dt-article .dt-vpn-table table{table-layout:auto}
.dt-article .dt-vpn-table td:first-child{white-space:nowrap}
@media (max-width:600px){.dt-article .dt-vpn-table th,.dt-article .dt-vpn-table td{padding:.6em .7em;font-size:.88rem}}
/* icon cards in articles (Threat Protection), 2026-10-15 */
.dt-article .dt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 32px}
.dt-article .dt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 32px}
.dt-article .dt-card--icon .dt-icon{margin:0 0 6px;text-align:left}
.dt-article .dt-card--icon .dt-icon img{width:56px;height:56px;max-height:56px}
.dt-article .dt-card ul.wp-block-list{margin:4px 0 0;padding-left:1.1em;color:#5E6573;font-size:.92rem;display:grid;gap:4px}
.dt-article > .dt-news__cta + .dt-note{margin-top:10px}
@media (max-width:900px){.dt-article .dt-grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dt-article .dt-grid--3,.dt-article .dt-grid--2{grid-template-columns:1fr}}

/* ---- YouTube video card + modal (2026-10-15): Image block with class "dt-video" linked to a YouTube URL ---- */
.dt-video{margin:2rem 0}
.dt-video a{position:relative;display:block;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(16,24,40,.45);isolation:isolate}
.dt-video img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.dt-video a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,22,.05) 40%,rgba(10,14,22,.55));z-index:1;transition:background .3s}
.dt-video a::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;z-index:2;
  background:#d7192d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50%/38px no-repeat;
  box-shadow:0 0 0 0 rgba(215,25,45,.55);animation:dt-pulse 2.4s infinite;transition:transform .3s ease}
.dt-video a:hover img,.dt-video a:focus-visible img{transform:scale(1.03)}
.dt-video a:hover::after,.dt-video a:focus-visible::after{transform:scale(1.1)}
.dt-video a:focus-visible{outline:3px solid #d7192d;outline-offset:3px}
.dt-video figcaption{text-align:center;margin-top:.75rem}
@keyframes dt-pulse{0%{box-shadow:0 0 0 0 rgba(215,25,45,.55)}70%{box-shadow:0 0 0 22px rgba(215,25,45,0)}100%{box-shadow:0 0 0 0 rgba(215,25,45,0)}}
@media (prefers-reduced-motion:reduce){.dt-video a::after{animation:none}.dt-video img{transition:none}}
html.dt-modal-open{overflow:hidden}
.dt-vmodal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,12,20,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.dt-vmodal.is-open{opacity:1;visibility:visible}
.dt-vmodal__box{position:relative;width:min(1100px,100%);transform:scale(.96);transition:transform .25s ease}
.dt-vmodal.is-open .dt-vmodal__box{transform:none}
.dt-vmodal__frame{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.dt-vmodal__frame iframe{width:100%;height:100%;border:0;display:block}
.dt-vmodal__close{position:absolute;top:-48px;right:0;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:40px;cursor:pointer;transition:background .2s}
.dt-vmodal__close:hover,.dt-vmodal__close:focus-visible{background:#d7192d;outline:none}
@media (max-width:600px){.dt-video a::after{width:64px;height:64px;margin:-32px 0 0 -32px;background-size:30px}}
/* video card: keep 16:9 and centered on product pages (their images are capped at 460px high) */
.dt-video a{max-width:900px;margin-inline:auto}
.wp-block-image.dt-video img{max-height:none;width:100%%;height:auto}

/* ---- Port / interface callouts (2026-10-16): the numbers under a product interface photo ("1 Power Input") are
 * drawn as the same red numbered dots used in the photo, so they read as callouts, not as a count ---- */
p:has(> .number-sm){display:flex;align-items:center;gap:12px;margin:0 0 12px}
.number-sm{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:#E93A52;color:#fff;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px rgba(233,58,82,.15)}
.number-sm + .interface_intro{line-height:1.35}
.wp-block-columns:has(.number-sm){gap:12px 40px}
/* light button as a Button block: the class sits on the wrapper div, so only the link (pill) keeps the glass look - no rectangle behind it (2026-10-16) */
.wp-block-button.hb-btn--light{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.wp-block-button.hb-btn--red,.wp-block-button.hb-btn--red:hover{background:none}   /* red stays on the rounded link only (2026-10-16) */

/* ---- Product Overview headings (2026-10-16): imported draytek.com titles were centred, and sub-titles were tiny
 * h6 (10.7px). Section titles (h2/h3 in a section) are now left-aligned with a red accent bar and the highlighted
 * <span> part in red; h4-h6 sub-titles are a readable 17-18px. Key figures (.dt-figure) keep their own style. ---- */
.dt-tab--overview .wp-block-heading:not(.dt-tab__title){text-align:left;font-family:var(--font-head);color:var(--hb-ink,#0B0F19);text-transform:none}
.dt-tab--overview .dt-figure .wp-block-heading{text-align:center;color:inherit}
.dt-tab--overview .dt-figure h4.wp-block-heading{color:#C20025}
.dt-tab--overview .dt-section > :is(h2,h3).wp-block-heading{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;margin:0 0 .8em;max-width:30ch}
.dt-tab--overview .dt-section > :is(h2,h3).wp-block-heading:first-child::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:#E4002B;margin:0 0 .65em}
.dt-tab--overview .dt-section > :is(h2,h3).wp-block-heading span{color:#E4002B}
.dt-tab--overview :is(.wp-block-column,.dt-cell,.dt-grid) > :is(h2,h3).wp-block-heading{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0 0 .45em}
.dt-tab--overview h4.wp-block-heading:not(.dt-figure h4){font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:1.4em 0 .4em}
.dt-tab--overview :is(h5,h6).wp-block-heading{font-size:1.0625rem;font-weight:700;letter-spacing:-.005em;line-height:1.35;margin:1.4em 0 .35em}
.dt-tab--overview :is(h4,h5,h6).wp-block-heading:first-child{margin-top:0}
.dt-tab--overview :is(h4,h5,h6).wp-block-heading + p{margin-top:0}
.dt-tab--overview .dt-section{margin-bottom:clamp(44px,5vw,72px)}


/* ---- Hero keywords (2026-10-16, v2): scattered over the right side of each background image, each set styled to
 * belong to its picture (not buttons, not site colours):
 *   1 data-centre racks  -> teal rack-label / status-LED readouts, monospace
 *   2 security network   -> glowing cyan network nodes, like the shields in the image
 *   3 Wi-Fi lobby (light)-> dark ink with a white halo and a signal-ring mark, echoing the AP waves
 *   4 city light beams   -> white beacons with a light beam falling below, like the city's light pillars ---- */
.hb-hero--bg .hb-hero__inner{position:relative;z-index:1}
.hb-hero__kws{position:absolute;inset:0;z-index:0;pointer-events:none}
.hb-kwset{position:absolute;top:12%;bottom:16%;left:max(56%,calc(50% + 120px));right:max(4%,calc(50% - 600px))}
.hb-kw{position:absolute;white-space:nowrap;line-height:1.1;opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:0s}
.hb-kw::before,.hb-kw::after{content:"";position:absolute;pointer-events:none}
.hb-kwset.is-on .hb-kw{opacity:1;transform:none;transition-delay:var(--d,0s)}
.hb-kw--title::before,.hb-kw--title::after{display:none}
/* scattered positions inside the right-hand area */
.hb-kw--title{top:0;left:4%}
.hb-kw--1{top:14%;left:32%}
.hb-kw--2{top:27%;left:4%}
.hb-kw--3{top:40%;left:46%}
.hb-kw--4{top:53%;left:12%}
.hb-kw--5{top:66%;left:42%}
.hb-kw--6{top:79%;left:6%}
.hb-kw--7{top:91%;left:48%}
.hb-kw--8{top:6%;left:62%}

/* 1 - data centre: rack labels with a status LED */
.hb-kwset--1 .hb-kw{font:500 clamp(.78rem,.68rem + .3vw,.92rem)/1 ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#8FEFE3;padding:6px 0 6px 22px;border-left:1px solid rgba(143,239,227,.35);text-shadow:0 0 10px rgba(40,210,190,.45)}
.hb-kwset--1 .hb-kw::before{left:9px;top:50%;width:6px;height:6px;margin-top:-3px;background:#3FE6CF;box-shadow:0 0 8px 1px rgba(63,230,207,.8)}
.hb-kwset--1.is-on .hb-kw::before{animation:hb-led 3.2s steps(1) infinite;animation-delay:calc(var(--d,0s) * 7)}
.hb-kwset--1 .hb-kw--title{padding:0;border:0;color:rgba(143,239,227,.6);font-size:clamp(.68rem,.6rem + .25vw,.8rem);letter-spacing:.24em}
.hb-kwset--1 .hb-kw--title::before{content:"// ";display:inline;position:static;background:none;box-shadow:none;width:auto;height:auto;margin:0;animation:none}
@keyframes hb-led{0%,92%{opacity:1}94%{opacity:.25}96%{opacity:1}98%{opacity:.4}}

/* 2 - security: glowing network nodes */
.hb-kwset--2 .hb-kw{font:600 clamp(.92rem,.8rem + .4vw,1.08rem)/1 var(--font-head);letter-spacing:.01em;color:#BFEBFF;padding-left:24px;
  text-shadow:0 0 14px rgba(40,170,255,.85),0 0 2px rgba(120,210,255,.9)}
.hb-kwset--2 .hb-kw::before{left:0;top:50%;width:11px;height:11px;margin-top:-6.5px;border-radius:50%;border:1.5px solid #6FD3FF;
  background:radial-gradient(circle,#CFF3FF 0 2px,transparent 2.5px);box-shadow:0 0 10px rgba(56,182,255,.9),inset 0 0 6px rgba(56,182,255,.6)}
.hb-kwset--2 .hb-kw::after{right:100%;top:50%;width:46px;height:1px;margin-right:-1px;background:linear-gradient(270deg,rgba(111,211,255,.7),rgba(111,211,255,0));transform-origin:right center;transform:rotate(-24deg)}
.hb-kwset--2 .hb-kw:nth-child(odd)::after{transform:rotate(28deg)}
.hb-kwset--2.is-on .hb-kw::before{animation:hb-node 3.6s ease-in-out infinite;animation-delay:calc(var(--d,0s) * 5)}
.hb-kwset--2 .hb-kw--title{padding:0;color:#6FD3FF;font-size:clamp(.7rem,.62rem + .25vw,.82rem);font-weight:700;letter-spacing:.28em;text-transform:uppercase}
@keyframes hb-node{0%,100%{box-shadow:0 0 8px rgba(56,182,255,.7),inset 0 0 6px rgba(56,182,255,.5)}50%{box-shadow:0 0 18px 3px rgba(56,182,255,.95),inset 0 0 6px rgba(56,182,255,.8)}}

/* 3 - Wi-Fi lobby (bright photo): ink with a white halo and a signal-ring mark; kept below the access point */
.hb-kwset--3 .hb-kw{font:700 clamp(.95rem,.82rem + .45vw,1.14rem)/1 var(--font-head);letter-spacing:-.01em;color:#141A26;padding-left:26px;
  text-shadow:0 0 16px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9),0 0 1px #fff}
.hb-kwset--3 .hb-kw::before{left:3px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#141A26;
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 0 4.5px rgba(20,26,38,.45),0 0 0 8px rgba(255,255,255,.45),0 0 0 9.5px rgba(20,26,38,.22)}
.hb-kwset--3.is-on .hb-kw::before{animation:hb-ring 4s ease-out infinite;animation-delay:calc(var(--d,0s) * 6)}
.hb-kwset--3 .hb-kw--title{padding:0;color:rgba(20,26,38,.7);font-size:clamp(.7rem,.62rem + .25vw,.82rem);font-weight:800;letter-spacing:.28em;text-transform:uppercase}
@keyframes hb-ring{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 0 4.5px rgba(20,26,38,.45),0 0 0 8px rgba(255,255,255,.45),0 0 0 9.5px rgba(20,26,38,.22)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 0 5.5px rgba(20,26,38,.35),0 0 0 11px rgba(255,255,255,.3),0 0 0 12.5px rgba(20,26,38,.12)}}

/* 4 - city light beams: beacons with a beam of light below; kept off the bright sky */
.hb-kwset--4 .hb-kw{font:600 clamp(.9rem,.78rem + .4vw,1.05rem)/1 var(--font-head);color:#fff;padding-left:18px;text-shadow:0 0 12px rgba(110,170,255,.95),0 0 2px rgba(180,215,255,.9)}
.hb-kwset--4 .hb-kw::before{left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(200,225,255,.95),0 0 18px 6px rgba(110,170,255,.55)}
.hb-kwset--4 .hb-kw::after{left:3px;top:calc(50% + 6px);width:1px;height:clamp(40px,6vw,80px);background:linear-gradient(180deg,rgba(200,225,255,.85),rgba(110,170,255,0))}
.hb-kwset--4.is-on .hb-kw::before{animation:hb-beacon 5s ease-in-out infinite;animation-delay:calc(var(--d,0s) * 6)}
.hb-kwset--4 .hb-kw--title{padding:0;color:rgba(214,230,255,.85);font-size:clamp(.7rem,.62rem + .25vw,.82rem);font-weight:700;letter-spacing:.28em;text-transform:uppercase}
@keyframes hb-beacon{0%,100%{opacity:1}50%{opacity:.55}}

@media (max-width:1080px){.hb-hero__kws{display:none}}
@media (prefers-reduced-motion:reduce){.hb-kw{transition:opacity .4s ease;transform:none}.hb-kwset.is-on .hb-kw::before{animation:none}}
/* 3 - Wi-Fi lobby v2: white like the access point and its signal waves, soft shadow for the light photo */
.hb-kwset--3 .hb-kw{color:#fff;text-shadow:0 1px 2px rgba(10,14,22,.55),0 2px 14px rgba(10,14,22,.45)}
.hb-kwset--3 .hb-kw::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 0 4.5px rgba(255,255,255,.7),0 0 0 8px rgba(255,255,255,.12),0 0 0 9.5px rgba(255,255,255,.45),0 2px 10px rgba(10,14,22,.4)}
.hb-kwset--3 .hb-kw--title{color:rgba(255,255,255,.9)}
@keyframes hb-ring{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 0 4.5px rgba(255,255,255,.7),0 0 0 8px rgba(255,255,255,.12),0 0 0 9.5px rgba(255,255,255,.45),0 2px 10px rgba(10,14,22,.4)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,.15),0 0 0 5.5px rgba(255,255,255,.55),0 0 0 11px rgba(255,255,255,.08),0 0 0 12.5px rgba(255,255,255,.3),0 2px 10px rgba(10,14,22,.4)}}