/* Mediale — design tokens */
:root{
  --porcelain:#F3F4F2;
  --white:#FFFFFF;
  --ink:#0F1B2D;
  --ink-2:#17263C;
  --ink-3:#22344F;
  --steel:#566173;
  --mist:#A9B4C3;
  --rule:#D8DBDF;
  --rule-dark:#2B3D58;
  --brass:#B04E0A;
  --brass-light:#F47820;
  --cyan:#3AC7F3;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --max:1240px;
  --gutter:clamp(20px,4.5vw,56px);
  --section:clamp(72px,11vw,148px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.62;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--brass-light);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:350;letter-spacing:-.018em;margin:0;font-optical-sizing:auto}
h1{font-size:clamp(2.55rem,6.4vw,5.6rem);line-height:1.01;letter-spacing:-.028em}
h2{font-size:clamp(2rem,3.9vw,3.35rem);line-height:1.06}
h3{font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.2;font-weight:400}
.lead{font-size:clamp(1.14rem,1.45vw,1.32rem);line-height:1.55;max-width:38em}
.muted{color:var(--steel)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 1rem/1 var(--sans);padding:1.05em 1.6em;border-radius:2px;text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-brass{background:var(--brass-light);color:var(--ink)}
.btn-brass:hover{background:#FF8A3D}
.btn-line{border-color:var(--rule-dark);color:var(--porcelain)}
.btn-line:hover{border-color:var(--mist)}
.btn-ink{background:var(--ink);color:var(--porcelain)}
.btn-ink:hover{background:var(--ink-3)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--porcelain);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--rule-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-size:1.6rem;letter-spacing:-.01em;font-weight:400}
.brand-mark{width:22px;height:22px;flex:none}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.menu a{text-decoration:none;color:var(--mist);font-size:.95rem;transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--porcelain)}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--brass-light);text-underline-offset:.5em}
.menu .btn{color:var(--ink);padding:.8em 1.2em;font-size:.93rem}
.menu .btn:hover{color:var(--ink)}
.menu-toggle{display:none;background:none;border:1px solid var(--rule-dark);color:var(--porcelain);font:500 .95rem var(--sans);padding:.6em .95em;border-radius:2px;cursor:pointer}

@media (max-width:1020px){
  .menu-toggle{display:block}
  .menu{position:fixed;inset:calc(76px + env(safe-area-inset-top,0px)) 0 auto 0;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 28px;border-bottom:1px solid var(--rule-dark);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .menu.open{opacity:1;transform:none;visibility:visible}
  .menu a{padding:15px 0;border-bottom:1px solid var(--rule-dark);font-size:1.1rem;color:var(--porcelain)}
  .menu .btn{margin-top:20px;justify-content:center;border-bottom:0;padding:1.05em}
}

/* Hero (home) */
.hero{background:var(--ink);color:var(--porcelain);padding:clamp(48px,7vw,96px) 0 clamp(64px,9vw,120px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{max-width:12ch}
.hero .lead{color:var(--mist);margin-top:1.8rem;max-width:34em}
.schematic{width:100%;height:auto}
.schematic .node rect{fill:var(--ink-2);stroke:var(--rule-dark)}
.schematic .node.core rect{fill:none;stroke:var(--brass-light)}
.schematic .node text{fill:var(--porcelain);font:500 13px var(--sans)}
.schematic .node .sub{fill:var(--mist);font:400 11px var(--sans)}
.schematic .node.core text{fill:var(--brass-light);font:400 17px var(--serif)}
.schematic .link{fill:none;stroke:var(--brass-light);stroke-width:1;opacity:.75;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.4s cubic-bezier(.6,.1,.2,1) forwards}
.schematic .node{opacity:0;animation:appear .6s ease forwards}
.schematic .packet{fill:var(--brass-light)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
.hero-foot{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--rule-dark);color:var(--mist);font-size:.95rem}
.hero-foot strong{color:var(--porcelain);font-weight:500}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width:13ch}
}

/* Page hero (subpages) */
.page-hero{background:var(--ink);color:var(--porcelain);padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,104px)}
.crumbs{list-style:none;padding:0;margin:0 0 clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--mist)}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--porcelain)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--rule-dark)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end}
.page-hero h1{font-size:clamp(2.35rem,5.2vw,4.5rem);max-width:18ch}
.page-hero .lead{color:var(--mist);margin-top:1.6rem}
.facts{border-top:1px solid var(--brass-light)}
.facts div{padding:16px 0;border-bottom:1px solid var(--rule-dark)}
.facts dt{font-size:.85rem;color:var(--mist);margin-bottom:4px}
.facts dd{margin:0;color:var(--porcelain)}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;align-items:start}}

/* Sections */
.section{padding:var(--section) 0}
.section-white{background:var(--white)}
.section-ink{background:var(--ink);color:var(--porcelain)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.section-head p{color:var(--steel);max-width:34em;margin:0}
.section-ink .section-head p{color:var(--mist)}
@media (max-width:800px){.section-head{grid-template-columns:1fr}}

/* Statement */
.statement{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.3vw,2.85rem);line-height:1.22;letter-spacing:-.015em;max-width:26em}
.statement-note{margin-top:2rem;color:var(--steel);max-width:36em}

/* Service index (home) */
.services{border-top:1px solid var(--ink)}
.service-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--rule);align-items:start}
.service-row h3{font-size:clamp(1.85rem,3vw,2.7rem);font-weight:350;letter-spacing:-.02em;line-height:1.05}
.service-row h3 a{text-decoration:none;background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat;transition:background-size .35s}
.service-row h3 a:hover{background-size:100% 1px}
.service-row p{color:var(--steel);margin:0 0 1.2em}
.service-row .more{font-weight:500;color:var(--brass);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.service-row .more:hover{color:var(--ink)}
.caps li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:.97rem}
.caps li:first-child{padding-top:0}
@media (max-width:900px){.service-row{grid-template-columns:1fr;gap:14px}.caps{margin-top:8px}}

/* Process — a real sequence, so it is numbered */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:step}
.steps li{border-top:1px solid var(--rule-dark);padding-top:22px;counter-increment:step}
.steps li::before{content:counter(step);display:block;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--brass-light);margin-bottom:22px;font-weight:300}
.steps h3{margin-bottom:.6rem}
.steps p{color:var(--mist);font-size:.98rem;margin:0}
.section:not(.section-ink) .steps li{border-top-color:var(--rule)}
.section:not(.section-ink) .steps li::before{color:var(--brass)}
.section:not(.section-ink) .steps p{color:var(--steel)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* Standards / deliverables */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px)}
.item{padding:28px 0 32px;border-top:1px solid var(--rule)}
.item h3{margin-bottom:.55rem}
.item p{color:var(--steel);margin:0;max-width:32em}
.section-ink .item{border-top-color:var(--rule-dark)}
.section-ink .item p{color:var(--mist)}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Fit list */
.fit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,96px)}
.fit ul li{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.3;padding:18px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:28px 1fr}
.fit ul li::before{content:"";width:9px;height:9px;background:var(--brass);margin-top:.5em}
@media (max-width:800px){.fit{grid-template-columns:1fr}}

/* Products (proof) */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.product{border:1px solid var(--rule-dark);padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .25s,background .25s}
.product:hover{border-color:var(--brass-light);background:var(--ink-2)}
.product h3{font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:350}
.product p{color:var(--mist);margin:0}
.product .url{margin-top:auto;padding-top:18px;color:var(--brass-light);font-size:.95rem}
@media (max-width:760px){.products{grid-template-columns:1fr}}

/* Stack line */
.stack{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,96px)}
.stack p{margin:0}
@media (max-width:800px){.stack{grid-template-columns:1fr;gap:6px}}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:20px;align-items:center;padding:26px 0;font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;justify-self:end;background:linear-gradient(var(--brass),var(--brass)) center/14px 1.5px no-repeat,linear-gradient(var(--brass),var(--brass)) center/1.5px 14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--steel);max-width:44em;margin:-6px 0 28px}

/* CTA */
.cta{background:var(--ink-2);color:var(--porcelain);padding:clamp(72px,10vw,132px) 0}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end}
.cta h2{max-width:16ch}
.cta p{color:var(--mist);margin-top:1.4rem;max-width:34em}
.cta-contact{border-top:1px solid var(--brass-light)}
.cta-contact a{display:block;padding:16px 0;border-bottom:1px solid var(--rule-dark);text-decoration:none;font-family:var(--serif);font-size:1.35rem}
.cta-contact a:hover{color:var(--brass-light)}
.cta-contact span{display:block;font:400 .85rem var(--sans);color:var(--mist);margin-bottom:2px}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}

/* Related services */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.related a{padding:28px 24px 32px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.2}
.related a+a{padding-left:24px;border-left:1px solid var(--rule)}
.related a span{display:block;font:400 .95rem/1.5 var(--sans);color:var(--steel);margin-top:8px}
.related a:hover{color:var(--brass)}
@media (max-width:800px){.related{grid-template-columns:1fr}.related a+a{padding-left:0;border-left:0}}

/* Prose (about) */
.prose{max-width:40em}
.prose p{font-size:1.12rem;line-height:1.7}
.two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,96px)}
@media (max-width:800px){.two-col{grid-template-columns:1fr}}
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,96px);align-items:start}
.founder-card{border-top:1px solid var(--brass);padding-top:22px}
.founder-card h3{font-size:1.9rem}
.founder-card p{color:var(--steel);margin:.3rem 0 0}
@media (max-width:800px){.founder{grid-template-columns:1fr}}
.refs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.refs li{padding:22px 20px 26px 0;border-bottom:1px solid var(--rule)}
.refs strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem}
.refs span{color:var(--steel);font-size:.95rem}
@media (max-width:900px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.refs{grid-template-columns:1fr}}

/* Form */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,7vw,112px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:.9rem;font-weight:500;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:14px 14px;transition:border-color .2s}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--steel)}
.consent input{margin-top:4px;accent-color:var(--ink);width:18px;height:18px;flex:none}
.hp{position:absolute;left:-9999px}
.form .btn{border:0;cursor:pointer;justify-self:start}
@media (max-width:600px){.form{grid-template-columns:1fr}}
.aside-block{border-top:1px solid var(--brass);padding-top:22px;margin-bottom:40px}
.aside-block h2{font-size:1.6rem;margin-bottom:.8rem}
.aside-block p,.aside-block li{color:var(--steel)}
.aside-block a{color:var(--ink)}
.aside-block ol{padding-left:1.2em;margin:0;color:var(--steel)}
.aside-block ol li{margin-bottom:.5em}

/* Footer */
.site-footer{background:var(--ink);color:var(--mist);padding:clamp(56px,7vw,88px) 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr));gap:40px}
.foot-grid h2{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--porcelain);letter-spacing:0;margin-bottom:14px}
.foot-grid li{margin-bottom:9px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--porcelain)}
.foot-grid .brand{color:var(--porcelain);margin-bottom:16px}
.foot-grid p{max-width:26em}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:22px;border-top:1px solid var(--rule-dark);font-size:.88rem}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .schematic .link{stroke-dashoffset:0}
  .schematic .node{opacity:1}
  .schematic .packet{display:none}
}

/* =========================================================
   v2 — product visuals, conversion sections
   ========================================================= */
.hero{padding-bottom:clamp(40px,5vw,64px)}
.hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.hero h1{max-width:13ch}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--mist)}
.trust span::before{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23F47820' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.trust span+span{margin-left:14px}
.page-hero .trust{margin-top:18px}
.section:not(.section-ink):not(.cta) .trust span{color:var(--steel)}

/* systems strip */
.systems{margin-top:clamp(56px,7vw,96px);padding-top:26px;border-top:1px solid var(--rule-dark);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:24px;align-items:center}
.systems p{margin:0;color:var(--mist);font-size:.95rem;max-width:22em}
.systems ul{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between}
.systems li{font-family:var(--serif);font-size:1.3rem;color:#C9D1DC;letter-spacing:-.01em}
@media (max-width:900px){.systems{grid-template-columns:1fr}.systems ul{justify-content:flex-start;gap:10px 26px}}

/* ---------- UI mockups ---------- */
.ui-window{background:#fff;border-radius:10px;overflow:hidden;color:var(--ink);box-shadow:0 50px 90px -40px rgba(2,8,20,.75),0 0 0 1px rgba(255,255,255,.06);font-family:var(--sans);font-size:12px;line-height:1.4}
.section-white .ui-window,.section:not(.section-ink) .ui-window{box-shadow:0 40px 70px -40px rgba(15,27,45,.45),0 0 0 1px rgba(15,27,45,.08)}
.ui-bar{height:34px;background:#EEF0F2;border-bottom:1px solid #E0E3E7;display:flex;align-items:center;gap:10px;padding:0 12px}
.ui-bar::before{content:"";width:34px;height:8px;flex:none;background:radial-gradient(circle,#CDD2D8 3.5px,transparent 4px) 0 0/12px 8px repeat-x}
.ui-url{font-size:11px;color:#6B7584;background:#fff;border-radius:5px;padding:4px 10px;flex:1;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:20px;white-space:nowrap}
.pill.ok{background:#E3F1EA;color:#23694B}
.pill.wait{background:#F6EDD9;color:#80601C}
.pill.info{background:#E4EAF5;color:#2D4A80}
.pill.brass{background:#FDEBDD;color:#9A4309}

.hero-visual{position:relative;padding:28px 0 56px 44px}
.ui-portal{display:grid;grid-template-columns:118px 1fr;min-height:318px}
.ui-side{background:#F6F7F8;border-right:1px solid #E6E8EB;padding:14px 10px}
.ui-side b{display:block;font:500 12px var(--sans);margin:0 6px 14px}
.ui-side span{display:block;padding:6px 8px;border-radius:5px;color:#5E6878;margin-bottom:2px}
.ui-side span.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,27,45,.08);font-weight:500}
.ui-content{padding:16px 18px}
.ui-content h4{font:500 14px var(--sans);margin:0 0 12px}
.ui-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.ui-kpis div{border:1px solid #E6E8EB;border-radius:7px;padding:9px 10px}
.ui-kpis span{display:block;color:#6B7584;font-size:10.5px}
.ui-kpis b{font:400 20px var(--serif);letter-spacing:-.01em}
.ui-table{width:100%;border-collapse:collapse}
.ui-table th{text-align:left;font-weight:500;color:#6B7584;font-size:10.5px;padding:0 6px 7px;border-bottom:1px solid #E6E8EB}
.ui-table td{padding:8px 6px;border-bottom:1px solid #F0F1F3;white-space:nowrap}
.ui-table td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}

.ui-agent{position:absolute;left:0;bottom:0;width:300px;background:var(--ink-2);color:var(--porcelain);border:1px solid var(--rule-dark);border-radius:10px;padding:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);font-size:12px}
.ui-agent header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ui-agent header b{font:400 15px var(--serif)}
.ui-agent header span{display:inline-flex;align-items:center;gap:6px;color:var(--mist);font-size:11px}
.live{width:7px;height:7px;border-radius:50%;background:#5CC593;box-shadow:0 0 0 3px rgba(92,197,147,.18)}
.ui-agent li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--rule-dark);opacity:0;transform:translateY(6px);animation:rise .5s ease forwards}
.ui-agent li strong{font-weight:500;color:var(--porcelain);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-agent li small{color:var(--mist);font-size:11px}
.ui-agent li .pill{grid-row:span 2;align-self:center}
@keyframes rise{to{opacity:1;transform:none}}
.ui-sync{position:absolute;top:0;right:18px;display:flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:30px;padding:9px 14px;font-size:12px;box-shadow:0 20px 40px -18px rgba(0,0,0,.55)}
.ui-sync b{font-weight:500}
@media (max-width:1100px){.ui-agent{width:260px}}
@media (max-width:900px){.hero-visual{padding:24px 0 0}.ui-agent{position:relative;width:auto;margin:-40px 16px 0}.ui-sync{right:10px;top:6px}}
@media (max-width:520px){.ui-portal{grid-template-columns:1fr}.ui-side{display:none}.ui-table th:nth-child(2),.ui-table td:nth-child(2){display:none}}

/* service visuals */
.vis-web .ui-page{padding:18px 20px 22px}
.sk{display:block;background:#E9ECEF;border-radius:3px;height:8px}
.sk.dark{background:var(--ink)}
.ui-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.ui-nav i{display:flex;gap:10px}
.ui-langs{display:flex;gap:4px}
.ui-langs span{font-size:10px;border:1px solid #E0E3E7;border-radius:4px;padding:2px 6px;color:#5E6878}
.ui-langs span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.score{border:1px solid #E6E8EB;border-radius:8px;padding:12px 8px;text-align:center}
.score svg{width:54px;height:54px;margin:0 auto 6px}
.score circle{fill:none;stroke-width:4}
.score .bg{stroke:#E9ECEF}
.score .fg{stroke:#2E8A60;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.score text{font:500 14px var(--sans);fill:var(--ink)}
.score span{color:#5E6878;font-size:11px}

.vis-shop .ui-prod{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;padding:18px}
.ui-img{aspect-ratio:1;border-radius:8px;background:linear-gradient(145deg,#E7EAEE,#D5DAE0);position:relative;overflow:hidden}
.ui-img::before{content:"";position:absolute;inset:26% 22%;border-radius:50%;border:10px solid #9AA5B4;box-shadow:inset 0 0 0 10px #C2C9D2}
.ui-img::after{content:"";position:absolute;left:10%;right:10%;top:44%;height:12%;background:#8C98A8;border-radius:3px}
.ui-prod h5{font:400 17px/1.2 var(--serif);margin:0 0 4px}
.ui-prod .code{color:#6B7584;font-size:11px;margin-bottom:12px;display:block}
.ui-price{font:400 24px var(--serif);letter-spacing:-.01em}
.ui-price s{font:400 12px var(--sans);color:#8B94A1;margin-left:6px}
.ui-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid #F0F1F3;font-size:11.5px;gap:8px}
.ui-row span:first-child{color:#6B7584}
.ui-btn{margin-top:12px;display:flex;gap:8px}
.ui-btn span{border:1px solid #D9DCE0;border-radius:6px;padding:8px 10px;font-size:11.5px}
.ui-btn b{flex:1;background:var(--ink);color:#fff;border-radius:6px;padding:8px 10px;text-align:center;font-weight:500}

.vis-app .ui-flow{padding:18px 20px}
.ui-flow h5{font:500 13px var(--sans);margin:0 0 4px}
.ui-flow .code{color:#6B7584;font-size:11px;display:block;margin-bottom:16px}
.ui-steps li{display:grid;grid-template-columns:20px 1fr auto;gap:12px;padding:10px 0;position:relative}
.ui-steps li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid #C5CBD3;margin-top:3px;background:#fff;z-index:1}
.ui-steps li.done::before{background:#2E8A60;border-color:#2E8A60}
.ui-steps li.now::before{border-color:var(--brass);box-shadow:0 0 0 4px rgba(244,120,32,.25)}
.ui-steps li:not(:last-child)::after{content:"";position:absolute;left:7px;top:22px;bottom:-4px;width:2px;background:#E6E8EB}
.ui-steps strong{font-weight:500;display:block}
.ui-steps small{color:#6B7584}

.vis-ai .ui-chat{padding:18px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:86%;padding:10px 12px;border-radius:10px;font-size:12px}
.bubble.q{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:3px}
.bubble.a{background:#F3F4F6;border-bottom-left-radius:3px}
.bubble.a p{margin:0 0 8px}
.srcs{display:flex;flex-wrap:wrap;gap:6px}
.srcs span{font-size:10.5px;border:1px solid #D9DCE0;border-radius:4px;padding:2px 7px;color:#5E6878;background:#fff}
.ui-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Pains ---------- */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.pain{padding-top:26px;border-top:2px solid var(--ink)}
.pain h3{margin-bottom:.7rem}
.pain p{color:var(--steel);margin:0}
@media (max-width:860px){.pains{grid-template-columns:1fr}}
.pains-foot{margin-top:clamp(40px,5vw,64px);font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.3;max-width:30em}

/* ---------- Service features (home) ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--rule)}
.feature:first-of-type{border-top:1px solid var(--ink)}
.feature:nth-of-type(even) .feature-text{order:2}
.feature h3{font-size:clamp(2rem,3.4vw,3rem);font-weight:350;letter-spacing:-.022em;line-height:1.04;margin-bottom:1rem}
.feature h3 a{text-decoration:none}
.feature .kicker{font-size:.95rem;color:var(--brass);font-weight:500;margin-bottom:.8rem}
.feature p.lead{font-size:1.1rem;color:var(--steel)}
.checks{margin:1.4rem 0 1.8rem}
.checks li{display:grid;grid-template-columns:24px 1fr;padding:9px 0;border-bottom:1px solid var(--rule)}
.checks li::before{content:"";width:14px;height:14px;margin-top:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23B04E0A' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.section-ink .checks li{border-bottom-color:var(--rule-dark)}
.section-ink .checks li::before{filter:brightness(1.5)}
.text-link{font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:3px}
.text-link:hover{color:var(--brass)}
@media (max-width:900px){.feature{grid-template-columns:1fr}.feature:nth-of-type(even) .feature-text{order:0}}

/* ---------- Compare ---------- */
.compare{width:100%;border-collapse:collapse;font-size:1rem}
.compare th{text-align:left;font-weight:500;font-size:.92rem;color:var(--steel);padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.compare th:last-child{color:var(--brass)}
.compare td{padding:20px 16px 20px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.compare td:first-child{font-family:var(--serif);font-size:1.25rem;width:30%}
.compare td:nth-child(2){color:var(--steel);width:33%}
.compare td:last-child{font-weight:500}
@media (max-width:700px){
  .compare thead{display:none}
  .compare tr{display:block;padding:18px 0;border-bottom:1px solid var(--rule)}
  .compare td{display:block;border:0;padding:3px 0;width:auto!important}
  .compare td:nth-child(2)::before{content:"Danes: ";color:var(--steel)}
  .compare td:last-child::before{content:"Po uvedbi: ";color:var(--brass);font-weight:500}
}

/* ---------- Cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
.case{background:var(--ink-2);border:1px solid var(--rule-dark);display:flex;flex-direction:column}
.case-top{padding:26px 26px 22px;border-bottom:1px solid var(--rule-dark);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.case-top h3{font-size:1.9rem;font-weight:350}
.case-body{padding:22px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.case-body p{color:var(--mist);margin:0}
.case-body dl{margin:0;display:grid;gap:10px}
.case-body dt{font-size:.82rem;color:var(--mist)}
.case-body dd{margin:0;color:var(--porcelain)}
.case-result{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule-dark);font-family:var(--serif);font-size:1.2rem;color:var(--brass-light)}
.case a{color:var(--brass-light)}
@media (max-width:960px){.cases{grid-template-columns:1fr}}

/* ---------- Offer ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.offer-card{background:var(--white);color:var(--ink);padding:clamp(28px,4vw,48px);border-top:3px solid var(--brass-light)}
.offer-card h3{font-size:1.7rem;margin-bottom:.4rem}
.offer-card .muted{margin-bottom:1.2rem}
.offer-card .checks li::before{filter:none}
.offer-card .checks li{border-bottom-color:var(--rule)}
.offer-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.4rem 0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.offer-meta span{display:block;font-size:.82rem;color:var(--steel)}
.offer-meta b{font:400 1.25rem var(--serif)}
@media (max-width:860px){.offer{grid-template-columns:1fr}}

/* ---------- Founder note ---------- */
.note{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1.65fr);gap:clamp(24px,5vw,72px);align-items:start}
.mono{width:clamp(88px,10vw,128px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--brass-light);display:grid;place-items:center;font:300 clamp(2rem,3.4vw,2.8rem) var(--serif)}
.note blockquote{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.6vw,2.2rem);line-height:1.3;letter-spacing:-.012em}
.note figcaption{margin-top:1.6rem;color:var(--steel)}
.note figcaption b{color:var(--ink);font-weight:500}
@media (max-width:700px){.note{grid-template-columns:1fr}}

/* ---------- Investment ---------- */
.invest{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.invest-fig{border-top:1px solid var(--ink);padding-top:22px}
.invest-fig span{display:block;color:var(--steel);font-size:.95rem}
.invest-fig b{display:block;font:300 clamp(2.6rem,5vw,4.2rem)/1.05 var(--serif);letter-spacing:-.025em;margin:.3rem 0 .8rem}
.invest-fig p{color:var(--steel);max-width:28em}
@media (max-width:860px){.invest{grid-template-columns:1fr}}

/* ---------- Form on dark ---------- */
.cta-form{background:var(--ink-2);color:var(--porcelain);padding:clamp(72px,10vw,128px) 0}
.cta-form-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px);align-items:start}
.cta-form h2{max-width:14ch}
.cta-form .intro{color:var(--mist);margin-top:1.4rem;max-width:30em}
.cta-form .cta-contact{margin-top:2.2rem}
.dark .field label{color:var(--porcelain)}
.dark .field input,.dark .field select,.dark .field textarea{background:var(--ink);border-color:var(--rule-dark);color:var(--porcelain)}
.dark .field input:focus,.dark .field textarea:focus,.dark .field select:focus{border-color:var(--brass-light)}
.dark .field ::placeholder{color:#6F7C8F}
.dark .consent{color:var(--mist)}
.dark .consent a{color:var(--porcelain)}
.dark .consent input{accent-color:var(--brass-light)}
.form-note{grid-column:1/-1;font-size:.88rem;color:var(--mist);margin:-6px 0 0}
@media (max-width:900px){.cta-form-grid{grid-template-columns:1fr}}

/* ---------- Service hero with visual ---------- */
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.svc-hero-grid h1{max-width:14ch}
.facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule-dark);padding-top:22px}
.facts-row dt{font-size:.85rem;color:var(--mist);margin-bottom:4px}
.facts-row dd{margin:0;font:400 1.2rem var(--serif)}
@media (max-width:900px){.svc-hero-grid{grid-template-columns:1fr}}
@media (max-width:600px){.facts-row{grid-template-columns:1fr;gap:14px}}

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .sticky-cta{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(15,27,45,.96);border-top:1px solid var(--rule-dark);backdrop-filter:blur(8px);transition:transform .25s}
  .sticky-cta.hide{transform:translateY(110%)}
  .sticky-cta .btn{flex:1;justify-content:center;padding:.95em 1em}
  .sticky-cta .btn-line{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .ui-agent li{opacity:1;transform:none}
}
/* v2 refinements */
.hero h1{max-width:15ch;font-size:clamp(2.5rem,5.6vw,4.9rem)}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.hero-visual{padding:30px 0 118px 64px}
.trust{gap:8px 24px}
.trust span+span{margin-left:0}
.systems ul{justify-content:flex-start;gap:10px 34px}
.systems li{font-size:1.2rem}
@media (max-width:900px){.hero-visual{padding:24px 0 0}}
.ui-steps li>.pill{align-self:start;margin-top:2px}.vis-ai .ui-chat{padding:22px 20px 24px;min-height:240px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width:14ch}
  .hero-visual{padding:36px 0 0}
  .ui-agent{position:relative;left:auto;bottom:auto;width:auto;margin:-48px 14px 0}
}
.ui-sync{white-space:nowrap}
@media (max-width:520px){.ui-sync{font-size:11px;padding:7px 11px}.ui-kpis b{font-size:17px}}

/* brand logo + brand accents */
.brand .logo{height:32px;width:auto;display:block}
.foot-grid .brand .logo{height:30px}
.menu a[aria-current="page"]{text-decoration-color:var(--cyan)}
.section-ink .steps li::before,.steps li::before{color:var(--cyan)}
.section:not(.section-ink) .steps li::before{color:var(--brass)}
.systems li{color:#C9D1DC}
.mono{color:var(--cyan)}
@media (max-width:420px){.brand .logo{height:27px}}

/* =========================================================
   Motion — only under html.motion (set in <head> unless the
   visitor prefers reduced motion), driven by main.js
   ========================================================= */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:.32s cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:.55s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}

:root{--ease-out:cubic-bezier(.2,.75,.2,1)}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--brass-light))}

/* logo strokes draw in on the first page of a visit */
.motion:not(.seen) .site-header .logo>path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .7s var(--ease-out) forwards}
.motion:not(.seen) .site-header .logo>path:nth-of-type(2){animation-delay:.12s}
.motion:not(.seen) .site-header .logo>path:nth-of-type(3){animation-delay:.24s}
.motion:not(.seen) .site-header .logo>g{opacity:0;animation:appear .8s .35s ease forwards}

/* hero backdrop: aurora, data-flow canvas, cursor glow */
.hero,.page-hero{position:relative;isolation:isolate;overflow:hidden}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.8s ease;-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.35) 20%,#000 65%);mask-image:linear-gradient(100deg,rgba(0,0,0,.35) 20%,#000 65%)}
.fx-canvas.on{opacity:1}
.fx-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-aurora::before,.fx-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(40px)}
.fx-aurora::before{width:min(70vw,980px);aspect-ratio:1;right:-18%;top:-55%;background:radial-gradient(closest-side,rgba(58,199,243,.17),transparent);animation:drift-a 19s ease-in-out infinite alternate}
.fx-aurora::after{width:min(60vw,820px);aspect-ratio:1;left:-22%;bottom:-70%;background:radial-gradient(closest-side,rgba(244,120,32,.13),transparent);animation:drift-b 23s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(-12%,18%) scale(1.15)}}
@keyframes drift-b{to{transform:translate(16%,-14%) scale(1.1)}}
.fx-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(520px circle at var(--gx,70%) var(--gy,30%),rgba(58,199,243,.09),transparent 65%)}
.fx-glow.on{opacity:1}

/* masked word rise for headings */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;will-change:transform}
.motion .split .w>span{transform:translateY(108%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + var(--sd,0ms))}
.motion .split.in .w>span{transform:none}

/* hero intro */
.motion .hero .lead,.motion .hero .actions,.motion .hero .trust,.motion .page-hero .lead,.motion .page-hero .crumbs,.motion .page-hero .actions,.motion .page-hero .trust,.motion .page-hero .facts-row{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.motion.hero-in .hero .lead,.motion.hero-in .page-hero .lead{opacity:1;transform:none;transition-delay:.45s}
.motion.hero-in .hero .actions,.motion.hero-in .page-hero .actions{opacity:1;transform:none;transition-delay:.6s}
.motion.hero-in .hero .trust,.motion.hero-in .page-hero .trust{opacity:1;transform:none;transition-delay:.75s}
.motion.hero-in .page-hero .crumbs{opacity:1;transform:none}
.motion.hero-in .page-hero .facts-row{opacity:1;transform:none;transition-delay:.9s}
.motion .hero .systems{opacity:0;transition:opacity 1.2s ease 1.1s}
.motion.hero-in .hero .systems{opacity:1}

.motion .hero-visual,.motion .page-hero .ui-window{opacity:0;translate:0 48px;scale:.96;transition:opacity 1.1s var(--ease-out) .25s,translate 1.4s var(--ease-out) .25s,scale 1.4s var(--ease-out) .25s}
.motion.hero-in .hero-visual,.motion.hero-in .page-hero .ui-window{opacity:1;translate:none;scale:none}
.tilt{transform:perspective(1500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform}
.hero-visual.tilt .ui-agent{transform:translateZ(70px)}
.hero-visual.tilt .ui-sync{transform:translateZ(110px)}
.motion .hero-visual .ui-sync{opacity:0;scale:.85;transition:opacity .6s ease 1.25s,scale .7s cubic-bezier(.3,1.6,.5,1) 1.25s}
.motion.hero-in .hero-visual .ui-sync{opacity:1;scale:none}
.motion .hero-visual .ui-agent{opacity:0;translate:-36px 0;transition:opacity .8s ease .85s,translate 1s var(--ease-out) .85s}
.motion.hero-in .hero-visual .ui-agent{opacity:1;translate:none}
.motion .ui-sync .live,.motion .ui-agent .live{animation:live-pulse 2.2s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(92,197,147,.55)}70%{box-shadow:0 0 0 8px rgba(92,197,147,0)}100%{box-shadow:0 0 0 0 rgba(92,197,147,0)}}

/* live portal: incoming orders, ticking numbers */
.ui-table tr.incoming td{animation:row-in .7s var(--ease-out) both,row-flash 2.4s ease both}
@keyframes row-in{from{opacity:0;transform:translateY(-10px)}}
@keyframes row-flash{0%,30%{background:#FFF1E6}100%{background:transparent}}
.ui-table .pill{transition:background .4s,color .4s}
.tick{display:inline-block;animation:tick .5s var(--ease-out)}
b>.tick{font:inherit;color:inherit;display:inline-block}
@keyframes tick{0%{transform:translateY(40%);opacity:0}100%{transform:none;opacity:1}}

/* systems marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.systems .marquee ul{flex-wrap:nowrap;gap:0;justify-content:flex-start}
.systems .marquee li{padding-right:clamp(34px,4vw,56px);white-space:nowrap;transition:color .3s}
.systems .marquee li:hover{color:var(--porcelain)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* scroll reveal */
.motion .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform 1.05s var(--ease-out);transition-delay:var(--d,0s)}
.motion .rv.in{opacity:1;transform:none}
.motion .feature .ui-window.rv{transform:perspective(1400px) translateY(56px) rotateX(10deg);transform-origin:50% 100%}
.motion .feature .ui-window.rv.in{transform:none}

/* pains: rule draws across */
.motion .pain{border-top-color:transparent;position:relative}
.motion .pain::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0s) + .1s)}
.motion .pain.in::before{transform:none}

/* steps: gradient rule draws across, one after another */
.motion .steps li{border-top-color:transparent;position:relative}
.motion .steps li::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--cyan),var(--brass-light));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--d,0s) + .15s)}
.motion .steps li.in::after{transform:none}

/* compare: "after" column highlighted like a marker */
.compare .mark{background:linear-gradient(transparent 58%,rgba(244,120,32,.2) 58%,rgba(244,120,32,.2) 92%,transparent 92%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--ease-out);transition-delay:calc(var(--d,0s) + .45s)}
.compare tr.in .mark,html:not(.motion) .compare .mark{background-size:100% 100%}

/* service mockups play when they come into view */
.motion .vis-web .sk{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out)}
.motion .vis-web.in .sk{transform:none}
.motion .vis-web .sk:nth-of-type(2){transition-delay:.1s}.motion .vis-web .sk:nth-of-type(3){transition-delay:.2s}.motion .vis-web .sk:nth-of-type(4){transition-delay:.3s}.motion .vis-web .sk:nth-of-type(5){transition-delay:.4s}
.score .fg{transition:stroke-dashoffset 1.6s var(--ease-out) .35s}
.motion .vis-shop .ui-row,.motion .vis-shop .ui-btn,.motion .vis-app .ui-steps li,.motion .vis-ai .ui-actions .pill,.motion .vis-ai .srcs span{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.motion .vis-shop.in .ui-row,.motion .vis-shop.in .ui-btn,.motion .vis-app.in .ui-steps li,.motion .vis-ai.answered .ui-actions .pill,.motion .vis-ai.answered .srcs span{opacity:1;transform:none}
.motion .vis-shop .ui-row:nth-of-type(1){transition-delay:.35s}.motion .vis-shop .ui-row:nth-of-type(2){transition-delay:.5s}.motion .vis-shop .ui-row:nth-of-type(3){transition-delay:.65s}.motion .vis-shop .ui-btn{transition-delay:.85s}
.motion .vis-shop.in .ui-btn b{animation:nudge .9s ease 1.6s}
@keyframes nudge{40%{box-shadow:0 0 0 6px rgba(244,120,32,.25)}100%{box-shadow:0 0 0 0 rgba(244,120,32,0)}}
.motion .vis-app .ui-steps li:nth-child(2){transition-delay:.35s}.motion .vis-app .ui-steps li:nth-child(3){transition-delay:.7s}.motion .vis-app .ui-steps li:nth-child(4){transition-delay:1.05s}.motion .vis-app .ui-steps li:nth-child(1){transition-delay:0s}
.motion .vis-app.in .ui-steps li.now::before{animation:now-pulse 1.8s ease-out 1.4s infinite}
@keyframes now-pulse{0%{box-shadow:0 0 0 0 rgba(244,120,32,.45)}100%{box-shadow:0 0 0 10px rgba(244,120,32,0)}}
.motion .vis-ai .bubble{opacity:0;transform:translateY(10px) scale(.98);transform-origin:0 100%;transition:opacity .5s ease,transform .6s var(--ease-out)}
.motion .vis-ai .bubble.q{transform-origin:100% 100%}
.motion .vis-ai.in .bubble.q,.motion .vis-ai.answered .bubble.a{opacity:1;transform:none}
.motion .vis-ai .srcs span:nth-child(2),.motion .vis-ai .ui-actions .pill:nth-child(1){transition-delay:.15s}
.motion .vis-ai .ui-actions .pill:nth-child(2){transition-delay:.3s}
.typing{display:inline-flex;gap:4px;align-self:flex-start;background:#F3F4F6;border-radius:10px;border-bottom-left-radius:3px;padding:12px 13px;animation:row-in .4s var(--ease-out)}
.typing i{width:6px;height:6px;border-radius:50%;background:#9AA3AF;animation:typing 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.feature .ui-window{transition:box-shadow .4s ease}
.feature .ui-window:hover{box-shadow:0 60px 90px -45px rgba(15,27,45,.55),0 0 0 1px rgba(15,27,45,.08)}

/* cases: spotlight border following the cursor */
.case{position:relative;transition:opacity .9s var(--ease-out),transform 1.05s var(--ease-out),translate .5s var(--ease-out)}
.case::before,.case::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .35s}
.case::before{inset:-1px;padding:1px;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0),var(--cyan),rgba(244,120,32,.5) 35%,transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.case::after{inset:0;background:radial-gradient(480px circle at var(--mx,50%) var(--my,0),rgba(58,199,243,.08),transparent 60%)}
.case:hover::before,.case:hover::after{opacity:1}
.case:hover{translate:0 -4px}
.motion .case.rv{transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.05s var(--ease-out) var(--d,0s),translate .5s var(--ease-out)}

/* buttons: shine + magnetic pull */
.btn{position:relative;overflow:hidden;transition:background .2s,color .2s,border-color .2s,transform .35s var(--ease-out)}
.btn-brass::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out);pointer-events:none}
.btn-brass:hover::after{left:130%}
.text-link{background:linear-gradient(var(--brass),var(--brass)) no-repeat 0 100%/0 1px;transition:background-size .4s var(--ease-out),color .2s}
.text-link:hover{background-size:100% 1px}

/* founder monogram: slow gradient ring */
.mono{position:relative}
.motion .mono::before{content:"";position:absolute;inset:-6px;border-radius:50%;padding:1.5px;background:conic-gradient(from var(--a,0deg),var(--cyan),transparent 35%,var(--brass-light) 60%,transparent 85%,var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 9s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}

/* faq: smooth open */
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq{interpolate-size:allow-keywords}

@media (prefers-reduced-motion:reduce){
  .scroll-progress,.fx-canvas,.fx-aurora,.fx-glow,.typing{display:none}
  .score .fg{stroke-dashoffset:0!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}