/* Shared brand layer. Status and destructive-action colors remain semantic. */
.secure-cloud h1 span{color:#c2410c}
html[data-theme="dark"] .secure-cloud h1 span{color:#e3aa87}
.secure-cloud .eyebrow .dot{background:#f97316}
@keyframes secureCloudPulse{
 0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(249,115,22,.32)}
 50%{transform:scale(1.12);box-shadow:0 0 0 5px rgba(249,115,22,.14)}
 100%{transform:scale(.92);box-shadow:0 0 0 10px rgba(249,115,22,0)}
}
/* Match the existing red hero artwork to the orange brand without changing its layout. */
.secure-cloud-art img{filter:hue-rotate(35deg) saturate(.74)}
.brand-mark,.brand-logo-box{border-radius:50%}
:root, body, body.dark, html[data-theme="dark"] {
  --primary:#c2410c; --primary-dark:#9a3412; --primary-light:#f3eae5;
  --autofill-bg:#f7f8fa; --autofill-text:#24272c;
}
body:not(.dark), html[data-theme="light"] body {
  --bg:#f7f8fa; --background:#f7f8fa;
  --page-background:linear-gradient(180deg,#fff,#f5f6f8);
  --border:#dfe2e6; --line:#dfe2e6;
}
html[data-theme="dark"],body.dark,html[data-theme="dark"] body {
  --bg:#141518!important; --card:#222429!important; --panel:#1c1e22!important;
  --card-soft:#2b2e34!important; --border:#41454c!important; --line:#41454c!important;
  --muted:#c1c5cb!important; --soft-text:#c1c5cb!important;
  --surface:#222429; --surface-solid:#222429;
  --page-background:#141518; --autofill-bg:#2b2e34; --autofill-text:#f7f8fa;
  background:#141518!important;
}
.hero.secure-cloud {background:#fafbfc}
html[data-theme="dark"] .hero.secure-cloud {background:#191b1d!important}
.cta-box,.cta-card,.cta {background:linear-gradient(120deg,#28303a,#373d45)!important}
.vpn-theme-illustration {filter:hue-rotate(175deg)!important}
html[data-theme="dark"] .typing-word {background-image:linear-gradient(90deg,#eed4c3,#e3aa87)!important}
:is(body.dark,html[data-theme="dark"] body) :is(.text-link,.switch-copy a,.brand span,.logo span){color:#e3aa87}
input:is(:-webkit-autofill,:autofill){border-color:#d7dadf!important}
input:is(:-webkit-autofill,:autofill):focus{border-color:#c2410c!important;box-shadow:0 0 0 1000px var(--autofill-bg) inset,0 0 0 3px #f9731620!important}
:is(body.dark,html[data-theme="dark"] body) :is(.nav,.site-header,#clientSidebar,#adminSidebar){background:#181a1e!important;border-color:#373b41!important}
