/* Shared depth and motion. All content stays usable without animations. */
:root {
  --shadow-rest: 0 3px 8px #17254105, 0 16px 36px -18px #17254135;
  --shadow-raised: 0 7px 16px -8px #17254125, 0 32px 65px -25px #49346b42;
  --shadow-image: 0 6px 14px -8px #17254130, 0 27px 55px -24px #17254155;
  --ease-out: cubic-bezier(.2,.7,.25,1);
}

/* Light, a translucent header and a clearer hierarchy between surfaces. */
.header {
  background: #fbfaf6e8;
  border-bottom-color: #fff;
  box-shadow: 0 1px 0 #19284307, 0 5px 26px #19284308;
  transition: background .3s, box-shadow .3s;
}
.header.is-scrolled {
  background: #fffdf8f0;
  box-shadow: 0 1px 0 #19284309, 0 8px 30px #19284314;
}
.v2-hero, .saas-hero {
  background:
    radial-gradient(ellipse at 91% 28%, #bba4e042, transparent 54%),
    radial-gradient(ellipse at 5% 95%, #e4eaf470, transparent 48%),
    #f8f8f3;
}
.saas-page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 5% 8%, #ffffffde, transparent 65%),
    linear-gradient(115deg, #f4f0f7, #e8e1f1 72%, #e4eaf3);
  box-shadow: inset 0 -1px 0 #b7a3cf20;
}
.saas-page-head::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 450px;
  height: 450px;
  right: -110px;
  top: -170px;
  border: 1px solid #a995c128;
  border-radius: 50%;
  box-shadow: 0 0 0 50px #ffffff24, 0 0 0 100px #ffffff18, 0 0 0 150px #ffffff12;
}
.saas-tour, .v2-proof {
  background: radial-gradient(ellipse at 90% 15%, #d9cde960, transparent 65%), linear-gradient(130deg, #edf0f5, #ebe8f0);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #d8d5e080;
}
.v2-final {
  background: radial-gradient(ellipse at 50% 0%, #fff9, transparent 70%), linear-gradient(120deg, #e9e0f2, #ddd7ed 70%, #dce5ef);
  box-shadow: inset 0 1px 0 #fff;
}
.v2-group, .saas-group-logo {
  background: radial-gradient(ellipse at 10% 0%, #5d52836b, transparent 65%), linear-gradient(125deg, #202e4b, #111d35);
  box-shadow: 0 20px 55px -23px #17254177, inset 0 1px 0 #ffffff30;
  border: 1px solid #ffffff24;
}

/* Main solution panels: a substantial shadow, softly tinted paper and photos. */
.saas-solutions-list .wrap { gap: 45px; }
.saas-solutions-list article {
  --surface-tint: #e8e3f630;
  padding: 26px;
  gap: 48px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: radial-gradient(ellipse at 100% 0%, var(--surface-tint), transparent 70%), #fff;
  box-shadow: var(--shadow-raised), inset 0 0 0 1px #19284305;
  transition: translate .4s var(--ease-out), box-shadow .4s, border-color .4s;
}
.saas-solutions-list article:nth-child(2) { --surface-tint: #e9d6f242; }
.saas-solutions-list article:nth-child(3) { --surface-tint: #d4e6ee50; }
.saas-solutions-list article>div { padding: 12px 22px 12px 0; }
.saas-solution-picture {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-image);
}
.saas-solution-picture img {
  border-radius: 18px;
  transition: transform .8s var(--ease-out), filter .8s;
}
.saas-solution-picture>span, .v2-photo-status {
  border: 1px solid #fff9;
  background: #ffffffdf;
  box-shadow: 0 3px 12px #17254114;
  backdrop-filter: blur(12px);
}
.v2-hero-photo, .saas-story figure>img {
  box-shadow: var(--shadow-image);
  border: 1px solid #ffffffb0;
}
.v2-hero-note {
  box-shadow: 0 7px 16px #17254110, 0 28px 55px -15px #1725414d;
}
.saas-hero-screen {
  border: 1px solid #fffc;
  box-shadow: 0 8px 16px -12px #17254140, 0 38px 65px -30px #4f377955, inset 0 1px 0 #fff;
  background: linear-gradient(145deg, #f1edf7, #ddd4ea);
}
.saas-pro .saas-hero-screen { background: linear-gradient(145deg, #eef2f6, #d8e2ea); }
.saas-plus .saas-hero-screen { background: linear-gradient(145deg, #f5edf8, #e1d3ed); }
.screen, .saas-preview-grid .screen, .v2-proof .screen {
  box-shadow: var(--shadow-rest);
  border-color: #fff;
  transition: box-shadow .35s, translate .35s var(--ease-out), border-color .35s;
}
.screen-bar { background: linear-gradient(110deg, #fff, #f1eef8); }
.screen-bar span:last-child { transition: translate .3s; }
.saas-catalogue-image .screen { border: 4px solid #fff; }

/* Cards have depth before interaction, so touch screens get the same treatment. */
.v2-solution, .solution-card, .saas-preview-grid article,
.saas-access-grid article, .v2-feature-grid>a, .contact-card {
  border-color: #e6e0ee;
  box-shadow: var(--shadow-rest);
  transition: translate .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
.saas-access-grid article {
  border-top: 3px solid #a595d8;
  background: linear-gradient(160deg, #fff 72%, #f1eef9);
}
.saas-access-grid article:nth-child(2) { border-top-color: #b593cc; }
.saas-access-grid article:nth-child(3) { border-top-color: #8faebd; }
.v2-benefits { gap: 24px; }
.v2-benefits article {
  background: linear-gradient(145deg, #fff, #fbf9fe);
  border: 1px solid #e8e1ef;
  border-top: 3px solid #c8b9df;
  padding: 26px 28px 30px;
  border-radius: 14px;
  box-shadow: var(--shadow-rest);
}
.v2-benefit-number { text-shadow: 0 3px 8px #a58cbc24; }
.v2-journey-grid article {
  border: 1px solid #e6e1eb;
  border-radius: 14px;
  background: #fff;
  padding: 26px;
  box-shadow: var(--shadow-rest);
}
.saas-example, .example, .saas-access-help {
  background: linear-gradient(120deg, #f0ecf6, #eae5f1);
  border: 1px solid #fffc;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px -15px #60457844;
}
.saas-compare { box-shadow: var(--shadow-rest); border-color: #fff; }
.faq details { transition: background .25s, box-shadow .25s; }
.faq details[open] {
  background: #ffffffb3;
  box-shadow: 0 12px 25px -22px #35245055;
}
.faq details[open] p { animation: kopra-fade-in .3s ease both; }

/* Responsive, tangible buttons and small directional details. */
.btn, .access-submit, .q-btn-primary {
  border: 1px solid #ffffff24;
  background: linear-gradient(135deg, #243653, #172541 78%);
  box-shadow: 0 3px 5px #1725410a, 0 9px 18px -8px #17254166, inset 0 1px 0 #ffffff25;
  transition: translate .25s var(--ease-out), box-shadow .25s, background .25s;
}
.btn.secondary, .btn--ghost {
  background: linear-gradient(140deg, #ffffffdf, #f5f2f9c9);
  border-color: #cfc5dd;
  box-shadow: 0 2px 5px #17254104, 0 6px 15px -10px #53426f42, inset 0 1px 0 #fff;
}
.btn>span, .text-link>span, .v2-solution-link>span { transition: translate .25s var(--ease-out); }
.navlinks a { position: relative; }
.navlinks a::after {
  content: '';
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: -7px;
  background: linear-gradient(90deg, #7659c4, #c2afd9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.navlinks a:focus-visible::after, .navlinks a[aria-current]::after { transform: scaleX(1); }
.lightbox[open] { animation: kopra-dialog-in .25s var(--ease-out) both; }
.lightbox::backdrop { background: #071021d9; backdrop-filter: blur(9px); }

/* Form pages share the same depth, with no change to their layout or behavior. */
.access-header { box-shadow: 0 4px 20px #17254109; position: relative; z-index: 1; }
.access-layout { box-shadow: 0 15px 65px -35px #17254150; }
.access-aside {
  background: radial-gradient(ellipse at 0% 20%, #60498577, transparent 65%), linear-gradient(145deg, #1b2b47, #0e182e);
  box-shadow: inset -1px 0 0 #ffffff18;
}
.access-scene img { box-shadow: 0 16px 30px #050a174d; border: 1px solid #ffffff38; }
.access-aside>.access-product-logo, .access-parent img,
.v2-group-brand img, .saas-group-logo img { mix-blend-mode: lighten; }
.access-main { background: radial-gradient(ellipse at 100% 0%, #e6ddf54d, transparent 65%); }
.access-spaces, .access-next, .preview-card, .price-card { box-shadow: var(--shadow-rest); }
.access-next { padding: 17px 20px; background: #fff; border: 1px solid #e8e1ef; border-radius: 10px; }
.access-spaces a { transition: opacity .2s, background .2s, box-shadow .2s; }
.access-spaces a[aria-current] { box-shadow: 0 3px 9px #66518b15, inset 0 1px 0 white; }
.access-submit, .q-btn-primary {
  background: linear-gradient(125deg, #8767dc, #6546b6);
  box-shadow: 0 8px 20px -8px #6842ae75, inset 0 1px 0 #ffffff35;
}
.access-page input:not([type=checkbox]):not([type=radio]), .access-page select, .access-page textarea {
  box-shadow: inset 0 2px 3px #17254104, 0 2px 4px #17254103;
}

@media (hover:hover) and (pointer:fine) {
  .saas-solutions-list article:hover { translate: 0 -5px; border-color: #d8c9e7; box-shadow: 0 7px 16px -8px #17254125, 0 38px 72px -24px #49346b50; }
  .saas-solution-picture:hover img { transform: scale(1.035); filter: saturate(1.06); }
  .v2-solution:hover, .solution-card:hover, .saas-preview-grid article:hover,
  .saas-access-grid article:hover, .v2-feature-grid>a:hover {
    translate: 0 -5px;
    transform: none;
    box-shadow: var(--shadow-raised);
    border-color: #baa6d2;
  }
  .screen:hover { translate: 0 -3px; box-shadow: var(--shadow-image); border-color: #d4c4e9; }
  .screen:hover .screen-bar span:last-child { translate: 2px -1px; }
  .btn:hover, .access-submit:hover, .q-btn-primary:hover {
    translate: 0 -2px;
    box-shadow: 0 5px 10px #17254115, 0 14px 28px -10px #17254166, inset 0 1px 0 #ffffff35;
  }
  .btn:active, .access-submit:active { translate: 0 0; }
  .btn:hover>span, .text-link:hover>span, .v2-solution-link:hover>span { translate: 3px -1px; }
  .navlinks a:hover::after { transform: scaleX(1); }
  .saas-chips a:hover { box-shadow: 0 5px 12px #69508419; }
}

/* One appearance per section; never a permanent animation or a scroll hijack. */
.reveal { transition: opacity .7s var(--ease-out), translate .7s var(--ease-out), box-shadow .35s, border-color .35s; }
.reveal.pending { opacity: 0; translate: 0 24px; }
.reveal:focus-within { opacity: 1; translate: 0 0; }
@keyframes kopra-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kopra-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width:850px) {
  .saas-solutions-list article { padding: 22px; gap: 29px; }
  .saas-solutions-list article>div { padding: 0 5px 10px; }
  .navlinks a::after { bottom: 5px; right: auto; width: 25px; }
  .v2-benefits article { padding: 23px; }
  .v2-journey-grid article { padding: 21px; }
}
@media (max-width:540px) {
  .saas-solutions-list .wrap { gap: 30px; }
  .saas-solutions-list article { padding: 15px; gap: 25px; border-radius: 19px; }
  .saas-solutions-list article>div { padding: 0 7px 12px; }
  .saas-solution-picture, .saas-solution-picture img { border-radius: 13px; }
  .saas-solution-picture img { height: 250px; }
  .saas-page-head::after { right: -300px; opacity: .65; }
  .saas-hero-screen { box-shadow: 0 18px 35px -24px #4f37796b, inset 0 1px 0 #fff; }
  .saas-preview-grid article, .saas-access-grid article { box-shadow: 0 12px 30px -20px #45345f4d; }
  .v2-benefits { gap: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .reveal.pending { opacity: 1; translate: 0 0; }
  .saas-solutions-list article, .v2-solution, .solution-card, .saas-preview-grid article,
  .saas-access-grid article, .v2-feature-grid>a, .screen, .btn, .access-submit, .q-btn-primary { translate: none!important; }
  .saas-solution-picture img, .v2-solution-photo img { transform: none!important; }
}