/* Connect Vartelio site: the features overview and the page chrome that the
   inline stylesheet does not carry. Colours come from the page's own tokens
   (--ground, --paper, --ink, --soft, --rule, --accent) so both themes work. */

.skip-link { position: fixed; inset: 10px auto auto 10px; z-index: 100; transform: translateY(-180%); background: var(--accent); color: var(--accent-ink); padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { transform: none; }
#top { scroll-margin-top: 96px; }
#top:focus-visible { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mobile-nav { display: none; position: relative; }
.hero .fade-in { opacity: 1; animation: none; }
/* Moving panels must not dim their text below a readable contrast. */
[data-scrub] .sc-tabs button, [data-scrub] .x-card { opacity: 1; }
.rd-old span { opacity: 1; color: var(--soft); }
.seg button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-radius: 999px; }
@media (min-width: 1081px) { .sd { min-height: 680px; } }
.sd .ac-group { color: #94A3B8; }

/* -- hero ------------------------------------------------------------------ */
.brandline { font: 600 .95rem/1 var(--display); color: var(--accent); margin-bottom: 14px; }
#headline { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 18ch; line-height: 1.08; }
.intro .lead { max-width: 62ch; }
.textlink { align-self: center; color: var(--ink); text-underline-offset: 5px; padding-inline: 6px; }
.textlink:hover { color: var(--accent); }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; color: var(--soft); font-size: .95rem; }
.proof li { display: inline-flex; align-items: center; gap: 9px; }
.proof img { opacity: .85; }
:root[data-theme="light"] .proof img { filter: invert(1) brightness(.4); }

.intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.hero-shot { margin: 0; perspective: 1400px; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(34,211,238,.08), 0 0 60px -10px rgba(34,211,238,.25);
  transform: rotateY(-9deg) rotateX(3deg); transform-origin: 30% 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hero-shot:hover img { transform: rotateY(-3deg) rotateX(1deg); }
@media (max-width: 980px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .hero-shot img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-shot img { transition: none; } }

/* -- features: a bento of what the product does ---------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.b-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.b-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.b-card h3 { font-size: 1.12rem; line-height: 1.3; }
.b-card p { color: var(--soft); font-size: .97rem; line-height: 1.55; }
.b-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 26px; }
.b-plain img { opacity: .9; }
:root[data-theme="light"] .b-plain img { filter: invert(1) brightness(.4); }
.b-viz { position: relative; height: 150px; border-radius: 12px; background: color-mix(in srgb, var(--ground) 70%, var(--paper)); border: 1px solid var(--rule); overflow: hidden; }
.b-wide .b-viz { height: 210px; }

/* remote help: two cursors that do not drag each other, and a chat */
.rv-screen { position: absolute; inset: 0; }
.rv-win { position: absolute; left: 6%; top: 12%; width: 38%; height: 50%; border-radius: 8px; background: var(--dev-panel, #182235); border: 1px solid var(--dev-line, #2B3953); }
.rv-win2 { left: 26%; top: 40%; width: 30%; height: 44%; background: var(--dev-panel-2, #1F2B42); }
.rv-cur { position: absolute; width: 16px; height: 22px; filter: drop-shadow(0 2px 3px #0008); }
.rv-cur path { stroke: #fff; stroke-width: 1.2; }
.rv-emp path { fill: #F2C94C; }
.rv-adm path { fill: var(--accent); }
.rv-emp { left: 18%; top: 28%; animation: rv-emp 7s ease-in-out infinite; }
.rv-adm { left: 46%; top: 60%; animation: rv-adm 7s ease-in-out infinite; }
.rv-tag { position: absolute; font: 600 10px/1 var(--text); padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.rv-tag-emp { background: #F2C94C; color: #2A2000; left: calc(18% + 14px); top: calc(28% + 22px); animation: rv-emp 7s ease-in-out infinite; }
.rv-tag-adm { background: var(--accent); color: var(--accent-ink); left: calc(46% + 14px); top: calc(60% + 22px); animation: rv-adm 7s ease-in-out infinite; }
@keyframes rv-emp { 0%, 100% { translate: 0 0; } 30% { translate: 30px 10px; } 60% { translate: 8px 36px; } }
@keyframes rv-adm { 0%, 100% { translate: 0 0; } 25% { translate: -60px -40px; } 50% { translate: -30px 6px; } 75% { translate: 10px -24px; } }
.rv-chat { position: absolute; right: 10px; top: 14px; bottom: 14px; display: grid; align-content: end; gap: 6px; width: 36%; padding-left: 10px; border-left: 1px dashed var(--rule); }
.rv-chat i { font-style: normal; font-size: 11px; line-height: 1.3; padding: 6px 9px; border-radius: 10px 10px 10px 3px; background: var(--paper); border: 1px solid var(--rule); opacity: 0; animation: rv-chat 7s ease-out infinite; }
.rv-chat i.me { justify-self: end; border-radius: 10px 10px 3px 10px; background: color-mix(in srgb, #F2C94C 22%, var(--paper)); animation-delay: 1.4s; }
@keyframes rv-chat { 0%, 12% { opacity: 0; transform: translateY(6px); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* tasks: rows arrive, the first is ticked */
.tk { display: grid; align-content: center; gap: 8px; padding: 14px; }
.tk-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; animation: tk-in 6s ease-out infinite; }
.tk-row:nth-child(2) { animation-delay: .35s; }
.tk-row:nth-child(3) { animation-delay: .7s; }
.tk-row b { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--soft); }
.tk-row:first-child b { animation: tk-tick 6s ease-out infinite; }
.tk-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row em { font-style: normal; font-size: 11px; color: var(--amber); }
@keyframes tk-in { 0% { opacity: 0; transform: translateX(-10px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tk-tick { 0%, 40% { background: transparent; border-color: var(--soft); } 50%, 90% { background: var(--accent); border-color: var(--accent); } }

/* security centre: the ring fills */
.hc { display: grid; place-items: center; }
.hc svg { position: absolute; width: 112px; height: 112px; rotate: -90deg; }
.hc circle { fill: none; stroke-width: 8; }
.hc-track { stroke: var(--rule); }
.hc-ring { stroke: #3FB950; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; animation: hc-fill 5s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes hc-fill { 0% { stroke-dashoffset: 264; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .4; } }
.hc b { position: relative; font: 700 22px/1 var(--display); margin-top: -8px; }
.hc span { position: relative; font-size: 11px; color: #3FB950; margin-top: 30px; position: absolute; letter-spacing: .04em; }

/* browser: an allowed page opens, a blocked one does not */
.bw { padding: 12px; display: grid; gap: 10px; align-content: start; }
.bw-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); }
.bw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3FB950; }
.bw-url { height: 8px; border-radius: 4px; background: var(--rule); width: 0; animation: bw-type 6s steps(18) infinite; }
@keyframes bw-type { 0% { width: 0; } 30%, 100% { width: 70%; } }
.bw-page { display: grid; gap: 8px; }
.bw-page span { font-size: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); opacity: 0; animation: bw-line 6s ease-out infinite; }
.bw-ok { color: #3FB950; animation-delay: 1.6s !important; }
.bw-no { color: var(--danger); animation-delay: 2.6s !important; }
@keyframes bw-line { 0% { opacity: 0; transform: translateY(6px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* sign-in: our tile, the server says yes */
.si { display: grid; place-items: center; background: linear-gradient(160deg, #0c1a2e, #142a3a 60%, #1d2a33); }
.si-tile { display: grid; justify-items: center; gap: 6px; padding: 14px 18px; border-radius: 14px; background: rgba(12,19,34,.75); border: 1px solid rgba(255,255,255,.08); min-width: 62%; }
.si-tile i { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); mask: url("icons/nav-lock.svg") center / 18px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.si-tile b { font-size: 13px; color: #E8EEF7; }
.si-pw { font-size: 12px; letter-spacing: .2em; color: #AEBACB; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); overflow: hidden; white-space: nowrap; width: 0; animation: si-type 6s steps(8) infinite; }
.si-ok { font-size: 11px; color: #3FB950; opacity: 0; animation: si-ok 6s ease-out infinite; }
@keyframes si-type { 0% { width: 18px; } 30%, 100% { width: 96px; } }
@keyframes si-ok { 0%, 40% { opacity: 0; transform: translateY(4px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* the rest, as a quiet list under the bento */
.b-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 34px; }
.b-list article { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding-block: 22px; border-top: 1px solid var(--rule); }
.b-list img { margin-top: 2px; opacity: .9; }
:root[data-theme="light"] .b-list img { filter: invert(1) brightness(.4); }
.b-list h3 { font-size: 1.05rem; }
.b-list p { color: var(--soft); margin-top: 6px; font-size: .95rem; line-height: 1.55; }

@media (max-width: 980px) {
  .b-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-wide { grid-column: span 2; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .b-wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .b-list { grid-template-columns: minmax(0, 1fr); }
  .top .wrap { gap: 12px; }
  .mobile-nav { display: block; margin-left: auto; }
  .mobile-nav summary { cursor: pointer; padding: 8px; }
  .mobile-nav nav { position: absolute; right: 0; top: 44px; display: grid; min-width: 230px; padding: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 30px #0005; z-index: 50; }
  .mobile-nav nav a { display: block !important; padding: 7px; }
  .top > .wrap > nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-cur, .rv-tag, .rv-chat i, .tk-row, .tk-row b, .hc-ring, .bw-url, .bw-page span, .si-pw, .si-ok { animation: none !important; opacity: 1 !important; }
  .si-pw { width: 96px; }
  .hc-ring { stroke-dashoffset: 0; }
  .bw-url { width: 70%; }
  .b-card { transition: none; }
}