/* Trilyo Business - lighter tone matched to the Trilyo ops dashboard (navy #1e2430, panels #283040/#232a37, ink #e9edf3, teal #00B4D8). Colors only; layout untouched. Staging 21.10.2026. */
:root{--bg:#2c3546;--bg2:#283142;--txt:#e9edf3;--mut:#b9c1cd;--dim:#97a1b0;--line:rgba(255,255,255,.11);--line2:rgba(0,180,216,.38);--cyan:#22D3EE;--teal:#00B4D8;--t2:#48CAE4;--ok:#4ade80;--warn:#F5B759}
.pcard::after{background:linear-gradient(180deg,rgba(30,36,48,0) 50%,rgba(30,36,48,.85))}
.scr{background:#1e2430}
.phone{background:linear-gradient(150deg,#556683,#1A2539 28%,#0C1422 70%,#4a5568)}
.phone .pscr{background:linear-gradient(180deg,#0F2140,#1e2430 45%)}
.btns{background:#4a5568}
.db .sb{background:#1a1f29}
.ind::after{background:linear-gradient(180deg,rgba(26,31,41,.05) 15%,rgba(26,31,41,.6) 50%,rgba(26,31,41,.97) 88%)}
.wl-card{background:linear-gradient(180deg,rgba(40,48,64,.82),rgba(35,42,55,.9))}
.wl select option{background:#1e2430}
.langdd .ddm{background:#1b2029!important}
.cko{background:linear-gradient(180deg,rgba(40,48,64,.82),rgba(35,42,55,.92))}
.mnav .mdd{background:#1b2029!important}
.cs-box{background:#283040}

/* language switcher flags (header) */
.langdd .lf{display:inline-block;margin-inline-end:8px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* trust strip: 4 items after removing the cancel/billing item */
@media (min-width:1024px){.trust{grid-template-columns:repeat(4,1fr)}}
/* design pass 21.10 (staging): one standout CTA, sections divider, mobile hero, video play button */
.btn.p:not(.pulse):not([type=submit]){color:var(--txt);background:rgba(255,255,255,.04);border:1px solid var(--line2);box-shadow:none}
.btn.p:not(.pulse):not([type=submit]):hover{background:rgba(0,180,216,.12)}
main > .sec{border-top:1px solid rgba(255,255,255,.07)}
main > .sec:nth-of-type(even){background:rgba(255,255,255,.018)}
@media (max-width:600px){.hero .call{margin-top:16px!important}}
#explainer-video.has-vplay{position:relative}
.vplay{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#03131F;background:linear-gradient(135deg,#7DF9FF,var(--teal));box-shadow:0 0 0 10px rgba(0,180,216,.18),0 14px 40px rgba(0,0,0,.45);z-index:3}
.vplay svg{width:34px;height:34px;margin-inline-start:4px}
.vplay[hidden]{display:none}
@media (max-width:600px){.vplay{width:64px;height:64px}.vplay svg{width:26px;height:26px}}
/* mobile-polish 23.10.2026 (Idan): one control size in the header, one-line pill, calmer premium hero */
@media (max-width:600px){
header.top{height:60px}
header.top .wrap{gap:8px;align-items:center}
header.top .brand img{height:30px;width:auto}
header.top .langdd>summary.lang,header.top .mnav>summary,header.top .navcta{box-sizing:border-box;height:40px;min-height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;margin:0}
header.top .langdd>summary.lang{padding:0 10px}
header.top .mnav>summary{width:40px;padding:0}
header.top .navcta{padding:0 14px;font-size:14px;font-weight:700;letter-spacing:0;border-color:rgba(0,212,255,.5)!important;background:rgba(0,212,255,.12)!important;color:#E9F9FF!important}
header.top .langdd>summary.lang .lf{margin-inline-end:0}
.hero{padding-top:28px}
.hero .pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;max-width:100%;font-size:13px;line-height:1;padding:6px 14px 6px 6px;border-radius:999px;margin:0 auto 22px}
[dir=rtl] .hero .pill{padding:6px 6px 6px 14px}
.hero .pill b{font-size:11.5px;padding:5px 9px;border-radius:999px;line-height:1;letter-spacing:.02em}
.hero h1{font-size:36px!important;line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
[dir=rtl] .hero h1{letter-spacing:-.01em;line-height:1.18}
.hero .sub .l:first-child{display:block;color:#E9EDF3;margin-bottom:2px}
.hero .sub{font-size:19px!important;font-weight:700;line-height:1.35;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.hero .lead{font-size:16px;line-height:1.65;color:rgba(233,237,243,.72);max-width:34ch;margin-inline:auto;text-wrap:pretty}
.hero .ctas{gap:10px;margin-top:26px}
.hero .ctas .btn{height:54px;padding:0 20px;border-radius:14px;font-size:16.5px}
.hero .ctas .btn.p{box-shadow:0 8px 24px -10px rgba(0,212,255,.55),inset 0 1px 0 rgba(255,255,255,.35);animation:none}
.hero .ctas .btn.p::before,.hero .ctas .btn.p::after{display:none}
.hero .ctas .btn.g{background:transparent;border-color:rgba(255,255,255,.14)}
.hero .micro{gap:8px 14px;font-size:13.5px;margin-top:18px}
}
/* burger far left on mobile, RTL and LTR (Idan 23.10) */
@media (max-width:600px){
header.top .wrap{display:flex}
header.top .mnav{order:-10}
[dir=rtl] header.top .mnav{order:10}
[dir=ltr] header.top .brand,html:not([dir=rtl]) header.top .brand{order:-9}
}
/* header order v2 (Idan 23.10): from the left = burger, language, ... subscribe, logo (RTL); mirrored on LTR */
@media (max-width:600px){
header.top .wrap>*{order:0}
header.top .mnav{order:5}header.top .langdd{order:4}header.top .sp{order:3;flex:1}header.top .navcta{order:2}header.top .brand{order:1}
html:not([dir=rtl]) header.top .mnav{order:1}html:not([dir=rtl]) header.top .langdd{order:2}html:not([dir=rtl]) header.top .sp{order:3}html:not([dir=rtl]) header.top .brand{order:4}html:not([dir=rtl]) header.top .navcta{order:5}
}
/* header order v3 (Idan 23.10 correction): burger, language, subscribe, gap, logo */
@media (max-width:600px){
header.top .brand{order:1}header.top .sp{order:2}header.top .navcta{order:3}header.top .langdd{order:4}header.top .mnav{order:5}
html:not([dir=rtl]) header.top .mnav{order:1}html:not([dir=rtl]) header.top .langdd{order:2}html:not([dir=rtl]) header.top .navcta{order:3}html:not([dir=rtl]) header.top .sp{order:4}html:not([dir=rtl]) header.top .brand{order:5}
}
/* logo +23% on mobile (Idan 23.10) */
@media (max-width:600px){header.top .brand{display:flex;align-items:center;align-self:center}header.top .brand img{height:37px!important;width:auto;display:block}}
/* features (trust) strip on mobile: single column of compact rows (Idan 23.10) */
@media (max-width:600px){
.trust{display:flex!important;flex-direction:column;gap:0;padding:6px 0;border-radius:20px;margin-top:24px}
.trust .tr{display:grid!important;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:start;padding:16px 18px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;min-height:0}
.trust .tr+.tr{border-top:1px solid rgba(255,255,255,.08)!important}
.trust .tr .ic{grid-row:1/3;grid-column:1;width:44px;height:44px;margin:0!important;border-radius:12px;display:flex;align-items:center;justify-content:center;align-self:center}
.trust .tr b{grid-column:2;font-size:16.5px;line-height:1.3;margin:0!important}
.trust .tr span{grid-column:2;font-size:14.5px;line-height:1.45;margin:0!important;color:rgba(233,237,243,.66)}
.trust .tr:empty{display:none!important}
}
/* ===== mobile audit 23.10 (Idan): compact premium sections ===== */
html{scroll-padding-top:76px}
[id]{scroll-margin-top:76px}
a[href^="tel:"],a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important}
.num{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media (max-width:600px){
.sec{padding-top:56px;padding-bottom:56px}
.sec .sh h2{font-size:28px;line-height:1.2;text-wrap:balance}
.sec .sh p{font-size:16px;line-height:1.6}
/* how-it-works + existing-number cards: icon inline with number/title */
.steps{gap:12px;margin-top:28px}
.steps .beam{display:none}
.step,.xc{display:grid!important;grid-template-columns:40px 1fr;column-gap:14px;row-gap:0;align-items:center;padding:18px!important;border-radius:18px!important;min-height:0!important}
.step .ico,.xc .ico{grid-column:1;grid-row:1/3;width:40px!important;height:40px!important;border-radius:12px!important;margin:0!important;box-shadow:0 4px 14px -6px rgba(0,180,216,.55)!important;align-self:center}
.step .ico svg,.xc .ico svg{width:20px;height:20px}
.step .n{grid-column:2;grid-row:1;font-size:12px;line-height:1;letter-spacing:.12em;margin:0 0 4px;align-self:end}
.step h3{grid-column:2;grid-row:2;font-size:17.5px!important;line-height:1.3;margin:0!important;align-self:start;text-wrap:balance}
.xc h3{grid-column:2;grid-row:1/3;font-size:17.5px!important;line-height:1.3;margin:0!important;text-wrap:balance}
.step p,.xc p{grid-column:1/-1;font-size:15px!important;line-height:1.6;margin:12px 0 0!important}
.step .mini{grid-column:1/-1;margin-top:14px!important;padding:10px 12px!important;border-radius:12px!important;font-size:14px;gap:8px;justify-content:flex-start}
.step .mini .waves{flex:1;min-width:0}
.xcs{gap:12px!important;margin-top:28px!important}
.xnote{font-size:13.5px;line-height:1.55;margin-top:16px}
/* industries: tighter cards, image band */
.inds{gap:14px!important}
.ind img{aspect-ratio:16/9;height:auto!important;max-height:190px;object-fit:cover;width:100%}
.ind .in{padding:16px 18px 18px!important}
.ind .in h3{font-size:19px!important}
.ind .sc{margin-top:12px!important;padding:12px!important;border-radius:12px!important}
/* pricing */
.plans,.pr-grid{gap:14px!important}
/* faq */
.qa{border-radius:14px!important}
.qa .q{padding:14px 16px!important;font-size:15.5px;line-height:1.4}
.qa p{padding:0 16px 14px!important;font-size:15px;line-height:1.65}
/* footer */
.ft2 .fcta{padding:22px 18px!important;border-radius:18px!important}
}
@media (max-width:600px){
.ind{display:flex!important;flex-direction:column;min-height:0!important;height:auto!important;position:relative;overflow:hidden}
.ind img{position:relative!important;inset:auto!important;display:block;flex:0 0 auto}
.ind .in{position:relative!important;inset:auto!important;margin:0!important;background:none}
.ind::before,.ind::after{display:none!important}
}
/* footer credit (Idan 23.10) */
.fcopy{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.credit{font-size:12.5px;color:rgba(233,237,243,.45);letter-spacing:.01em}
.credit a{color:rgba(233,237,243,.62);text-decoration:none;border-bottom:1px solid rgba(233,237,243,.18);transition:color .2s,border-color .2s}
.credit a:hover,.credit a:focus-visible{color:#7DF9FF;border-bottom-color:rgba(125,249,255,.5)}
@media (max-width:600px){
.fbar .fcopy{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:space-between;align-items:baseline;width:100%;gap:12px}
.fbar .fcopy>.dim{white-space:nowrap;font-size:13px;unicode-bidi:plaintext}
.fbar .fcopy .credit{white-space:nowrap;font-size:12px}
}
/* header order (Idan 23.10.2026): logo far LEFT, hamburger far RIGHT, language next to it, subscribe button beside language. Same physical order in RTL (he/ar) and LTR (all languages). */
@media (max-width:600px){
html header.top .wrap{direction:ltr}
html[dir=rtl] header.top .wrap>*{direction:rtl}
}
html header.top .wrap>.brand{order:0}html header.top .wrap>.nav{order:1}html header.top .wrap>.sp{order:2}html header.top .wrap>.navcta{order:3}html header.top .wrap>.langdd{order:4}html header.top .wrap>.mnav{order:5}
@media (min-width:601px){html header.top .mnav .mdd,html header.top .langdd .ddm{left:auto;right:0}}

/* ===== anchors 26.10 (Idan): every in-page link lands ~16px under the sticky header (one offset only, no padding+margin stack) ===== */
html{scroll-padding-top:0!important}
[id],#video,#how,#industries,#product,#faq,#pricing,#checkout,#waitlist{scroll-margin-top:95px!important}
@media(max-width:760px){[id],#video,#how,#industries,#product,#faq,#pricing,#checkout,#waitlist{scroll-margin-top:76px!important}}