/* Ambient background for sections below the hero: soft teal glows that repeat down tall sections,
   a fading dot grid and glowing dividers. Decoration only: behind content, no pointer events. */
.frame{--glow-a:rgba(0,161,156,.20);--glow-b:rgba(63,209,200,.11);--dot:rgba(255,255,255,.10);--line-c:rgba(63,209,200,.30);--node:rgba(63,209,200,.8)}
html[data-site-theme="light"] .frame{--glow-a:rgba(0,161,156,.13);--glow-b:rgba(0,161,156,.08);--dot:rgba(0,50,48,.14);--line-c:rgba(0,128,123,.28);--node:rgba(0,128,123,.75)}
.frame:not(.dots){isolation:isolate}

.frame:not(.dots)::before,
.frame:not(.dots)::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none}

/* glows: a 1800px tile with one glow on each side, repeated down the section */
.frame:not(.dots)::before{
  background:
    radial-gradient(ellipse 560px 440px at var(--ax,6%) 340px,var(--glow-a),transparent 70%) 0 0/100% 1800px repeat-y,
    radial-gradient(ellipse 520px 420px at var(--bx,94%) 1240px,var(--glow-b),transparent 70%) 0 0/100% 1800px repeat-y;
}
/* dot grid revealed in soft patches that follow the glows */
.frame:not(.dots)::after{
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 460px 380px at var(--bx,94%) 420px,#000 0%,rgba(0,0,0,.4) 50%,transparent 75%),radial-gradient(ellipse 420px 360px at var(--ax,6%) 1300px,#000 0%,rgba(0,0,0,.4) 50%,transparent 75%);
          mask-image:radial-gradient(ellipse 460px 380px at var(--bx,94%) 420px,#000 0%,rgba(0,0,0,.4) 50%,transparent 75%),radial-gradient(ellipse 420px 360px at var(--ax,6%) 1300px,#000 0%,rgba(0,0,0,.4) 50%,transparent 75%);
  -webkit-mask-size:100% 1800px;mask-size:100% 1800px;
  -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
}
/* alternate sides on consecutive sections */
.frame:not(.dots):nth-of-type(even){--ax:94%;--bx:6%}

/* first section under the hero (same glows) */
.frame.dots + .frame:not(.dots)::before{
  background:
    radial-gradient(ellipse 560px 440px at var(--ax,6%) 340px,var(--glow-a),transparent 70%) 0 0/100% 1800px repeat-y,
    radial-gradient(ellipse 520px 420px at var(--bx,94%) 1240px,var(--glow-b),transparent 70%) 0 0/100% 1800px repeat-y;
}

/* footer: one gentle glow, no grid */
footer .frame::after{content:none}
footer .frame::before{background:radial-gradient(ellipse 600px 300px at 12% 0,var(--glow-b),transparent 70%)}

/* phones: centred, smaller glows */
@media (max-width:760px){
  .frame:not(.dots),.frame:not(.dots):nth-of-type(even){--ax:15%;--bx:85%}
  .frame:not(.dots)::before{
    background:
      radial-gradient(ellipse 260px 300px at var(--ax) 260px,var(--glow-a),transparent 70%) 0 0/100% 1200px repeat-y,
      radial-gradient(ellipse 240px 280px at var(--bx) 860px,var(--glow-b),transparent 70%) 0 0/100% 1200px repeat-y;
  }
  .frame.dots + .frame:not(.dots)::before{
    background:
      radial-gradient(ellipse 260px 300px at var(--ax) 260px,var(--glow-a),transparent 70%) 0 0/100% 1200px repeat-y,
      radial-gradient(ellipse 240px 280px at var(--bx) 860px,var(--glow-b),transparent 70%) 0 0/100% 1200px repeat-y;
  }
  .frame:not(.dots)::after{
    -webkit-mask-image:radial-gradient(ellipse 220px 260px at var(--bx) 300px,#000,transparent 75%),radial-gradient(ellipse 220px 260px at var(--ax) 900px,#000,transparent 75%);
            mask-image:radial-gradient(ellipse 220px 260px at var(--bx) 300px,#000,transparent 75%),radial-gradient(ellipse 220px 260px at var(--ax) 900px,#000,transparent 75%);
    -webkit-mask-size:100% 1200px;mask-size:100% 1200px;
  }
}

/* animated divider (element added by site.js at the top of each section) */
.fx-div{position:absolute;top:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent 6%,var(--line-c) 50%,transparent 94%)}
.fx-div i{position:absolute;top:-1px;left:50%;width:min(220px,30vw);height:3px;margin-left:calc(min(220px,30vw) / -2);border-radius:3px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--node),transparent);filter:blur(.4px)}
.fx-div b{position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--node);box-shadow:0 0 10px var(--node)}
.fx-div b::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--node);opacity:0}
.fx-div.on b{animation:fxnode 3.2s ease-out infinite}
.fx-div.on b::after{animation:fxring 3.2s ease-out infinite}
.fx-div.on i.l{animation:fxl 3.2s cubic-bezier(.35,.1,.25,1) infinite}
.fx-div.on i.r{animation:fxr 3.2s cubic-bezier(.35,.1,.25,1) infinite}
@keyframes fxnode{0%,100%{transform:scale(1)}12%{transform:scale(1.35)}30%{transform:scale(1)}}
@keyframes fxring{0%{transform:scale(1);opacity:.9}55%{transform:scale(4.2);opacity:0}100%{transform:scale(4.2);opacity:0}}
@keyframes fxl{0%{transform:translateX(0);opacity:0}10%{opacity:1}70%{opacity:.9}100%{transform:translateX(-46vw);opacity:0}}
@keyframes fxr{0%{transform:translateX(0);opacity:0}10%{opacity:1}70%{opacity:.9}100%{transform:translateX(46vw);opacity:0}}
html.rm .fx-div b,html.rm .fx-div b::after,html.rm .fx-div i{animation:none!important}
/* divider placed between blocks inside a long section (e.g. services) */
.fx-div.fx-mid{position:relative;display:block;left:auto;right:auto;width:100vw;margin-left:calc(50% - 50vw)}
.feat + .feat{border-top:0}
/* fade glows out before the bottom edge of each section so they never end in a hard line */
.frame:not(.dots)::before{-webkit-mask-image:linear-gradient(#000,#000 calc(100% - 260px),transparent);mask-image:linear-gradient(#000,#000 calc(100% - 260px),transparent)}
footer .frame::before{-webkit-mask-image:none;mask-image:none}

/* contact form: keep fields at their natural height so side-by-side fields line up,
   and make the dropdown match the text fields */
form label{align-content:start}
form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:400;line-height:inherit;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A5A4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px 15px}
form select option{background:var(--card);color:var(--text)}

/* custom dropdown (built by site.js from each form <select>) */
.dd{position:relative;min-width:0}
form .two > label,form label{min-width:0}
.dd-native{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%!important;height:100%!important}
.dd-btn{display:block;width:100%;text-align:left;font:inherit;font-size:.95rem;font-weight:400;line-height:1.6;color:var(--text);background:var(--card);
  border:1px solid var(--line-2);border-radius:10px;padding:12px 40px 12px 13px;cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .25s,box-shadow .25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A5A4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px 15px}
.dd-btn.ph{color:var(--dim)}
.dd-btn:hover{border-color:var(--dim)}
.dd.open .dd-btn,.dd-btn:focus-visible{border-color:var(--violet);box-shadow:0 0 0 4px rgba(0,161,156,.16);outline:none}
.dd.open .dd-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FD1C8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.dd-list{position:absolute;left:0;right:auto;width:max-content;min-width:100%;max-width:min(340px,calc(100vw - 40px));top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;display:none;max-height:300px;overflow:auto;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 22px 48px rgba(0,0,0,.42),0 0 0 1px rgba(63,209,200,.06);outline:none}
.dd.open .dd-list{display:block;animation:ddIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dd.dd-r .dd-list{left:auto;right:0}
.dd-list li{white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;font-size:.93rem;font-weight:500;color:var(--text);cursor:pointer;line-height:1.35}
.dd-list li svg{width:16px;height:16px;flex:none;color:var(--violet-2);opacity:0}
.dd-list li.act{background:var(--card-2)}
.dd-list li[aria-selected="true"]{color:var(--violet-2)}
.dd-list li[aria-selected="true"] svg{opacity:1}
.dd-list li:first-child[aria-selected="false"] span{color:inherit}
html[data-site-theme="light"] .dd-list{box-shadow:0 18px 40px rgba(13,26,26,.14)}
html.rm .dd.open .dd-list{animation:none}
form input,form .dd-btn{line-height:1.6}

/* privacy line under the contact form, legal pages, footer legal links */
.form-note{margin:0;font-size:.8rem;line-height:1.5;color:var(--dim)}
.form-note a{color:var(--violet-2);text-underline-offset:3px}
.legal-doc h2{font-size:clamp(1.2rem,2.4vw,1.45rem)}
footer .legal a{color:inherit;text-decoration:none}
footer .legal a:hover{color:var(--violet-2)}

/* about page */
.about-story{max-width:740px;margin:0 auto}
.about-story p{font-size:1.06rem}
.about-compare{max-width:960px;margin:0 auto}
.tbl td.us{color:var(--violet-2);font-weight:600;background:rgba(0,161,156,.06)}
.tbl th.us{color:var(--violet-2);background:rgba(0,161,156,.10)}
.about-points b{font-size:1.12rem;line-height:1.3;letter-spacing:-.01em;animation:none}
.about-points span{line-height:1.55}

/* industry solution pages */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--dim)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--violet-2)}
.crumbs [aria-current]{color:var(--text)}
.tc-qa{max-width:860px;margin:0 auto}
.tc-qa .answer p{font-size:1.02rem;line-height:1.75}
.tc-caps{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tc-caps .cap h3{font-size:1.08rem;margin:0}
.tc-caps .cap p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.cap h3{margin:0}.cap p{margin:0}
#data .cap p{color:var(--muted);line-height:1.65}
.tc-points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.tc-points li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:.95rem}
.tc-points svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--violet-2)}
.tc-note{font-size:.84rem;color:var(--dim);line-height:1.6;margin:4px 0 0}
.tc-steps li h3{margin:0;font-size:1.05rem}
.tc-steps li p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.tc-guides .post-card{grid-template-columns:1fr auto;align-items:center}
.tc-guides .post-card h3{font-size:1.02rem}
.tc-end{margin-top:28px;align-items:center}
.tc-end > div:first-child{max-width:560px}
.tc-end-h{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 6px;text-align:left}
.tc-end p{margin:0;color:var(--muted)}
.tc-sources{max-width:none;margin-top:30px;font-size:.9rem}
.article.tc-sources h2{font-size:1rem;margin:0 0 6px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ind-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--violet-2);font-weight:600;font-size:.92rem;text-decoration:none}
.ind-more:hover{text-decoration:underline;text-underline-offset:3px}
.related.tc-related{max-width:none}
.article.tc-sources{max-width:none;margin-top:40px}
.tc-demo{margin-top:22px;align-items:center}
.tc-demo > div{max-width:640px}
.tc-demo-h{margin:0 0 6px;font-size:1.25rem;font-family:var(--display)}
.tc-demo p{margin:0;color:var(--muted)}

.tc-demo .tc-demo-note,.demo-sample{margin-top:10px;padding-left:12px;border-left:2px solid var(--violet-line,rgba(0,161,156,.4));font-size:.88rem;color:var(--muted)}
.demo-sample{margin:0;font-size:.84rem}

/* keep the section divider clear of the laptop mockup */
.frame > .showcase{padding-top:clamp(48px,6vw,76px)}

/* real demo screenshots in the Demos page cards */
.demo-vis .win.shot{padding:0;overflow:hidden;background:#0D1111}
.demo-vis .win.shot img{display:block;width:100%;height:auto}
.demos.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.tc-acts{display:flex;flex-direction:column;gap:10px;flex:none}
.tc-acts .btn{justify-content:center}
.demo-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* business system showcase cards (Demos page): customer website + office system */
.sys-list{display:grid;gap:clamp(18px,2.6vw,30px)}
@media (min-width:821px){.sys:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.sys:nth-child(even) .sample-vis{order:2}}
.sys .sample-vis::before{background:radial-gradient(70% 55% at 12% 0%,color-mix(in srgb,var(--sysc) 55%,transparent),transparent 65%),radial-gradient(60% 50% at 100% 100%,color-mix(in srgb,var(--sysc) 30%,transparent),transparent 70%),linear-gradient(160deg,rgba(10,14,22,.55),rgba(6,9,14,.9))}
.sys .sv-bg{object-position:top}
.sys .sv-view img{display:block;width:100%;height:auto;max-width:none;animation:svScroll 10s cubic-bezier(.65,0,.35,1) infinite}
.sys-office{position:absolute;right:4cqw;bottom:12cqw;width:50cqw;z-index:3;border-radius:1.6cqw;overflow:hidden;background:#fff;box-shadow:0 5cqw 9cqw -3cqw rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14);animation:svFloat 5s ease-in-out infinite alternate}
.sys-office .sv-chrome{background:#1E2430}
.sys-office .sv-chrome span{width:auto;padding-right:1.6cqw;background:#2D3442;color:#D2D9E3;font-weight:700}
.sys-office img{display:block;width:100%;height:auto}
.sys-new{position:absolute;left:3cqw;top:12cqw;background:var(--sysc);color:#fff;font-size:1.55cqw;font-weight:800;line-height:1;padding:1.1cqw 1.9cqw;border-radius:99px;box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.55),0 0 0 .5cqw color-mix(in srgb,var(--sysc) 30%,transparent);opacity:0;animation:svIn 10s infinite}
.sys .sv-wa{left:5cqw;bottom:13cqw;width:40cqw}
.sys .sample-body .ind-more{justify-self:start}
html.rm .sys-new{opacity:1}

/* "Don't see your industry?" building blocks (Demos page) */
.blk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.blk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.blk-grid{grid-template-columns:minmax(0,1fr)}}
.blk-see{font-size:.86rem;color:var(--dim);margin-top:auto}
.blk-see a{color:var(--violet-2);font-weight:600;text-decoration:none}
.blk-see a:hover{text-decoration:underline}
.blk-grid .cap{align-content:stretch;grid-template-rows:auto auto 1fr auto}
.combos{margin-top:22px;display:grid;gap:12px}
.combos-h{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.combos-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:960px){.combos-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.combos-g{grid-template-columns:minmax(0,1fr)}}
.combos-g div{border:1px dashed var(--line-2);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.combos-g b{color:var(--text);font-size:.95rem}
.combos-g span{color:var(--muted);font-size:.86rem}

/* project brief form (Contact page) */
#enquiry fieldset{border:0;margin:0;padding:0;min-width:0}
.fstep{display:grid;gap:16px}
.fstep[hidden]{display:none!important}
.fstep>legend{display:grid;gap:2px;padding:0;margin-bottom:4px}
.fstep-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-2)}
.fstep-t{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--text)}
.fsteps{display:flex;gap:6px}
.fsteps span{flex:1;height:4px;border-radius:99px;background:var(--line-2);transition:background .3s}
.fsteps span.on{background:var(--violet)}
.chipq{display:grid;gap:9px}
.chipq>legend{font-size:.84rem;font-weight:600;color:var(--muted);padding:0;margin-bottom:9px}
.chipq>legend small{font-weight:500;color:var(--dim);margin-left:4px}
.chip-set{display:flex;flex-wrap:wrap;gap:8px}
label.chip-opt{display:inline-flex;position:relative;cursor:pointer;font-size:.86rem;letter-spacing:0}
.chip-opt input{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;border:0}
.chip-opt span{padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);font-weight:600;transition:background .2s,border-color .2s,color .2s}
.chip-opt:hover span{border-color:var(--violet-line);color:var(--text)}
.chip-opt input:checked+span{background:var(--violet-soft);border-color:var(--violet);color:var(--violet-2)}
.chip-opt input:checked+span:before{content:"✓ "}
.chip-opt input:focus-visible+span{outline:2px solid var(--violet-2);outline-offset:2px}
.fnav{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:4px}
.fnav .btn-violet{margin-left:auto}
label.consent{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.86rem;cursor:pointer}
.consent input{width:18px;height:18px;padding:0;flex:none;margin-top:2px;accent-color:var(--violet)}
.consent a{color:var(--violet-2)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.failmsg{background:rgba(255,138,138,.1);color:#FF8A8A;padding:12px 14px;border-radius:10px;font-size:.9rem}
html[data-site-theme="light"] .failmsg{color:#B42318;background:#FDECEC}
#enquiry button[disabled]{opacity:.6;cursor:wait}