/* Day / night (theme.js). Night = the isystem colours as they are. Day = white and blue, with the same 3D. */

/* ---- the sun / moon button (both modes) ---- */
.theme-toggle{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--accent);cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.theme-toggle:hover{transform:rotate(-12deg);border-color:var(--accent)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .tt-moon svg{fill:currentColor;stroke:none}
.theme-toggle span{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .3s,transform .4s}
html[data-theme="light"] .theme-toggle .tt-moon,html:not([data-theme="light"]) .theme-toggle .tt-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
.theme-toggle.manual:after{content:'';position:absolute;top:3px;inset-inline-end:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---- day colours ---- */
/* Also on body: site.css / demo.css set their own --muted on body.home / body.demo-page (light grey for night). */
html[data-theme="light"],html[data-theme="light"] body,html[data-theme="light"] body.home,html[data-theme="light"] body.demo-page{--bg:#f4f7ff;--panel:#ffffff;--line:#d5def3;--text:#0b1a3c;--muted:#4b5a82;--accent:#1f5eff;color-scheme:light}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] body.home{background:radial-gradient(1200px 700px at 85% -10%,rgba(31,94,255,.12),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(14,165,233,.10),transparent 60%),var(--bg)}
/* Text that was light grey on dark becomes the day text colours. */
html[data-theme="light"] :is(main,footer,.form-page,.dashboard) :is(p,li,span,small,td,th,label,legend,b,strong,h1,h2,h3,h4,em,dt,dd,figcaption){color:inherit}
html[data-theme="light"] :is(main,.form-page,.dashboard){color:var(--text)}
html[data-theme="light"] :is(.muted,.plan-for,.prob span,.feat p,.how-steps p,.svc-item p,.fine,.plan-setup,.plan-total span,.addon-price small,.plan-summary-total,.trust,footer,.section-head p,.need-body p,.num span,.stage-note,.pm-details,.sub-step small,.compare tbody th,.plan-price span){color:var(--muted)!important}
/* Accent words and numbers in blue. */
html[data-theme="light"] :is(.hl,.pp-amount,.num strong,.topups b,.plan-summary-total b,.sum-due b,.svc-price,.section-kicker,.eyebrow,.need-go,.brand-i,.compare thead th,.plan-card.has-addons .pt-monthly,.plan-summary-change,.pricing-plans a,.cc-opt:has(input:checked)){color:var(--accent)!important;text-shadow:none!important}
html[data-theme="light"] .brand-system{color:var(--text)}
/* Surfaces: white cards with a soft blue shadow. */
html[data-theme="light"] .nav{background:rgba(255,255,255,.86);border-bottom-color:var(--line)}
html[data-theme="light"] :is(.need-card,.num,.feat,.prob,.how-steps li,.plan-card,.compare-wrap,.extras-col,.svc-board,.svc-item,.sub-step,.plan-total,.pay-method,.contact-box,.offer-card,.admin-panel,.stat,.sub-status,.plan-summary,.contract-text,.founder-mini,.sys-node,.dev .chip){background:#fff!important;border-color:var(--line)!important;box-shadow:0 10px 30px rgba(31,94,255,.07)}
html[data-theme="light"] .svc-item{background:#f8faff!important}
/* The contract on /subscribe and in the customer account: dark text on white, the "I agree" line clearly visible. */
html[data-theme="light"] .contract-text{color:var(--text)!important;background:#fff!important;border:1px solid #c9d5ef!important}
html[data-theme="light"] .contract-text :is(h3,ol,li){color:var(--text)!important}
html[data-theme="light"] .agree-row{color:var(--text)!important;padding:12px 14px;border:1.5px solid rgba(31,94,255,.45);border-radius:12px;background:rgba(31,94,255,.05)}
html[data-theme="light"] .agree-row span{color:var(--text)!important}
html[data-theme="light"] .sub-step legend,html[data-theme="light"] .sub-step legend span{color:var(--text)!important}
html[data-theme="light"] .plan-card.featured{border-color:rgba(31,94,255,.55)!important;box-shadow:0 0 0 1px rgba(31,94,255,.18),0 24px 60px rgba(31,94,255,.12)}
html[data-theme="light"] .plan-flag,html[data-theme="light"] .how-steps li>b,html[data-theme="light"] .sub-step legend b{background:var(--accent);color:#fff!important}
html[data-theme="light"] :is(.addon:has(input:checked),.pay-method:has(input:checked)){background:rgba(31,94,255,.06)!important;border-color:rgba(31,94,255,.5)!important}
html[data-theme="light"] .addon:hover{background:rgba(31,94,255,.04)}
html[data-theme="light"] .cc-opt:has(input:checked){background:rgba(31,94,255,.07)!important;border-color:var(--accent)!important}
html[data-theme="light"] :is(.cc-opt input,.addon input,.pay-method input,.agree-row input){accent-color:var(--accent)}
html[data-theme="light"] :is(.plan-summary ul,.sum-due,.addon-name,.fine-list,.plan-list li){color:var(--text)!important}
html[data-theme="light"] :is(.pill.live,.svc-pill.on){background:rgba(31,94,255,.12);color:var(--accent)}
html[data-theme="light"] :is(.pill.soon,.svc-pill){background:#eef2fb;color:#5a6890}
html[data-theme="light"] .pill.req{background:rgba(14,165,233,.12);color:#0b78b0}
html[data-theme="light"] .plan-list li.off{color:#9aa6c2!important}
html[data-theme="light"] .plan-list li:before{border-color:var(--accent)}
/* Buttons and fields. */
html[data-theme="light"] .btn{border-color:var(--line);color:var(--text)}
html[data-theme="light"] .btn:not(.primary){color:var(--text)!important;background-color:#fff}
html[data-theme="light"] .btn-try{background:#fff!important;border-color:rgba(230,40,60,.45)!important;box-shadow:0 8px 24px rgba(230,40,60,.12)!important}
html[data-theme="light"] .btn-try :is(span,small){color:var(--text)!important}
html[data-theme="light"] .btn-try small{color:var(--muted)!important}
html[data-theme="light"] .btn-try .try-play svg{fill:#fff}
html[data-theme="light"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff!important}
html[data-theme="light"] .btn.primary *{color:#fff!important}
html[data-theme="light"] .nav-team{color:var(--accent)!important;border-color:var(--accent)!important}
html[data-theme="light"] .nav-try{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 6px 20px rgba(31,94,255,.25)!important}
html[data-theme="light"] .nav-try *{color:#fff!important;fill:#fff}
html[data-theme="light"] .nav-team:hover{background:var(--accent);color:#fff!important}
html[data-theme="light"] .nav > nav > a:not(.nav-team):not(.nav-cta):not(.nav-try){color:#33426b!important}
html[data-theme="light"] .nav-cta{border-color:var(--line);color:var(--text)}
html[data-theme="light"] :is(input,textarea,select){background:#fff;color:var(--text);border-color:#c9d5ef}
html[data-theme="light"] .language-select{background:#fff;color:var(--text)}
html[data-theme="light"] .quick-bar{background:rgba(255,255,255,.92);border-color:var(--line)}
html[data-theme="light"] .quick-bar a{color:var(--text)}
html[data-theme="light"] .quick-bar .qb-try{background:var(--accent);color:#fff}
html[data-theme="light"] footer{border-top-color:var(--line)}
/* The big step words behind the 3D, the ticker and the hero picture. */
/* The big step words: solid blue with a soft blue depth, clearly visible behind the content. */
html[data-theme="light"] .stage-words span{color:#2f6bff!important;-webkit-text-stroke:0!important;filter:none!important;background-image:none!important;
  text-shadow:.012em .012em 0 #5d8cff,.024em .024em 0 #7fa3ff,.036em .036em 0 #a3bdff,.05em .05em 0 #c4d5ff,.07em .09em .12em rgba(31,94,255,.18)!important}
html[data-theme="light"] .stage-words span.on{opacity:.2!important}
/* Outline buttons: a clear blue frame, so they never melt into a white card. */
html[data-theme="light"] :is(.btn.ghost,.nav-cta,.page-back,.cc-opt,.more-box>summary){border:1.5px solid rgba(31,94,255,.5)!important;color:var(--accent)!important}
html[data-theme="light"] :is(.btn.ghost,.nav-cta,.page-back):hover{background:rgba(31,94,255,.08)!important;border-color:var(--accent)!important}
html[data-theme="light"] .btn:not(.primary):not(.ghost):not(.btn-try){border:1.5px solid rgba(31,94,255,.5)!important}
html[data-theme="light"] .language-select,html[data-theme="light"] .theme-toggle{border:1.5px solid rgba(31,94,255,.45)!important}
html[data-theme="light"] .ticker{border-color:var(--line);background:rgba(255,255,255,.75)!important;-webkit-mask-image:none;mask-image:none}
html[data-theme="light"] .ticker:before,html[data-theme="light"] .ticker:after{background:none!important}html[data-theme="light"] .ticker span{color:#2c3d6b}
html[data-theme="light"] .ticker b{color:var(--accent)}
html[data-theme="light"] .hero-bg{opacity:.18;filter:saturate(.6)}
html[data-theme="light"] .scroll-progress i{background:var(--accent)}
/* AI Automation: the channel flow (website / WhatsApp / Telegram / Instagram -> AI -> CRM) and the device stage. */
html[data-theme="light"] :is(.sys-node,.sys-node span){color:var(--text)!important}
html[data-theme="light"] .sys-node svg{stroke:var(--accent);color:var(--accent)}
html[data-theme="light"] .sys-node.out{border-color:rgba(31,94,255,.35)!important}
html[data-theme="light"] .sys-core .core-label :is(b,small){color:#fff!important}
html[data-theme="light"] .sys-core .ring{border-color:rgba(31,94,255,.35)!important}
html[data-theme="light"] .dev .chip{color:var(--text)!important}
html[data-theme="light"] :is(.foot-links a,.foot-social a){color:var(--muted)!important}
html[data-theme="light"] :is(.foot-links a,.foot-social a):hover{color:var(--accent)!important}
html[data-theme="light"] .compare th,html[data-theme="light"] .compare td,html[data-theme="light"] .topups li{border-color:var(--line)}
html[data-theme="light"] .alert{background:#fff4f4;color:#9b1c1c;border-color:#f3c4c4}
html[data-theme="light"] .brand-intro{background:var(--bg)}
html[data-theme="light"] .brand-intro .bi-word{color:var(--text)}
html[data-theme="light"] :is(.more-box,.feat-item){background:#fff!important;border-color:var(--line)!important}
html[data-theme="light"] .feat-item>span{color:var(--muted)!important}
/* Phones: the sun / moon button fits next to Login and the language without pushing the menu off the screen. */
@media (max-width:800px){.nav > nav{gap:12px!important}.theme-toggle{width:34px;height:34px;flex-basis:34px}.theme-toggle svg{width:17px;height:17px}}
@media (max-width:360px){.nav{padding-inline:12px}.nav > nav{gap:8px!important}.nav .language-select{width:70px;min-width:70px}}
html[data-theme="light"] .stage-words span.on{opacity:.3!important}
/* Customer account (client.html) in day mode: contract, payment details, messages, status labels. */
html[data-theme="light"] :is(.contract-card,.payment-instructions,.secret-box,.chat-msg,.contract-terms){background:#fff!important;border:1px solid var(--line)!important;color:var(--text)!important;box-shadow:0 6px 20px rgba(31,94,255,.06)}
html[data-theme="light"] .chat-msg.client{background:rgba(31,94,255,.06)!important;border-color:rgba(31,94,255,.3)!important}
html[data-theme="light"] .chat-msg small{color:var(--muted)!important}
html[data-theme="light"] .status{background:#eef2fb!important;color:var(--text)!important}
html[data-theme="light"] .status.accepted{background:rgba(31,94,255,.12)!important;color:var(--accent)!important}
html[data-theme="light"] .status.pending{background:#fff4d6!important;color:#8a5a00!important}
html[data-theme="light"] .status.rejected{background:#ffe9e9!important;color:#b42318!important}
html[data-theme="light"] .client-alert{background:rgba(31,94,255,.07)!important;border-color:rgba(31,94,255,.35)!important;color:var(--text)!important}
html[data-theme="light"] .client-alert button{color:var(--text)!important}
html[data-theme="light"] :is(.sub-status.waiting,.sub-status.confirmed) .sub-badge{background:#fff4d6;color:#8a5a00}
html[data-theme="light"] .sub-status.renew .sub-badge{background:#ffe9e9;color:#b42318}
html[data-theme="light"] .sub-status.active .sub-badge{background:var(--accent);color:#fff}
html[data-theme="light"] .dashboard :is(h1,h2,h3,b,strong,p,span,label,td,th,a:not(.btn)){color:inherit}
html[data-theme="light"] .dashboard .website-link{color:var(--accent)!important}
html[data-theme="light"] .dashboard table th{color:var(--muted)!important}
html[data-theme="light"] .trial-banner{background:linear-gradient(120deg,rgba(31,94,255,.12),rgba(14,165,233,.08) 60%,#fff)!important;border-color:rgba(31,94,255,.55)!important;box-shadow:0 18px 50px rgba(31,94,255,.15)!important}
html[data-theme="light"] .trial-tag{background:var(--accent);color:#fff!important}
html[data-theme="light"] .trial-banner p{color:var(--muted)!important}
html[data-theme="light"] .trial-btn{animation-name:trialPulseDay}
@keyframes trialPulseDay{0%,100%{box-shadow:0 0 0 0 rgba(31,94,255,.5)}50%{box-shadow:0 0 0 12px rgba(31,94,255,0)}}

/* Two different trials, two colours (founder, 2026-10-21): the FREE demo (2 minutes) is always red;
   the paid 3-day trial ($20) keeps the brand colour and pulses (.trial-btn). Overrides site.css and theme.css. */
.nav .nav-try,body.home .nav .nav-try,html[data-theme="light"] .nav-try{background:#e5243b!important;border-color:#e5243b!important;color:#fff!important;box-shadow:0 6px 20px rgba(229,36,59,.32)!important}
.nav .nav-try *,html[data-theme="light"] .nav-try *{color:#fff!important;fill:#fff!important}
.nav .nav-try:hover,html[data-theme="light"] .nav-try:hover{background:#ff3b52!important;color:#fff!important}
.quick-bar .qb-try,html[data-theme="light"] .quick-bar .qb-try{background:#e5243b!important;color:#fff!important;box-shadow:0 0 24px rgba(229,36,59,.4)!important}
.quick-bar .qb-try *{color:#fff!important;fill:#fff!important}
html[data-theme="light"] .btn-try{background:#e5243b!important;border-color:#e5243b!important}
html[data-theme="light"] .btn-try :is(span,small){color:#fff!important}
.trial-demo{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:12px;background:#e5243b;color:#fff!important;text-decoration:none!important;font-weight:700}
.trial-demo:hover{background:#ff3b52}
html[data-theme="light"] .su-bar{background:#e6ecfa}
html[data-theme="light"] .su-steps{color:var(--text)!important}
html[data-theme="light"] .su-head>b{color:#fff!important}
html[data-theme="light"] .su-st.st-empty{background:#eef2fb;color:#5a6890}
html[data-theme="light"] .su-st.st-saved{background:#fff4d6;color:#8a5a00}
html[data-theme="light"] .su-st.st-connected{background:var(--accent);color:#fff}
html[data-theme="light"] .su-card-mini{border-color:rgba(31,94,255,.45);background:#fff}
html[data-theme="light"] .meter-box{background:#fff;border-color:var(--line)}
html[data-theme="light"] .meter-box.low{border-color:#e0a800}html[data-theme="light"] .meter-box.out{border-color:#d93025}
html[data-theme="light"] .offers.hot .offers-t{color:#8a5a00!important}
html[data-theme="light"] .offer{border-color:rgba(31,94,255,.45);background:#fff;color:var(--text)}
html[data-theme="light"] .offer b{color:var(--accent)!important}
html[data-theme="light"] .dash-box{background:#fff5f6!important;border-color:rgba(229,36,59,.5)!important}html[data-theme="light"] .dash-box.waiting{background:#fff!important;border-color:var(--line)!important}html[data-theme="light"] .dash-btn,html[data-theme="light"] .dash-btn *{color:#fff!important}