/* ProSchool brand experience layer: green and blue sampled from the official raster logo. */
:root {
  --experience-green: #398545;
  --experience-green-dark: #1f6039;
  --experience-blue: #4a748e;
  --experience-blue-dark: #2b556d;
}

.experience-progress {
  position: fixed;
  z-index: 999;
  inset: 0 0 auto;
  height: 4px;
  pointer-events: none;
  background: transparent;
}

.experience-progress::after {
  content: "";
  display: block;
  width: var(--scroll-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--experience-green), var(--experience-blue));
  box-shadow: 0 0 14px rgba(74, 116, 142, 0.34);
  transition: width 80ms linear;
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--experience-blue-dark), var(--experience-green-dark));
  box-shadow: 0 16px 34px rgba(16, 33, 43, 0.2);
  opacity: 0;
  transform: translateY(1rem) scale(0.9);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.back-to-top:hover {
  filter: brightness(1.12);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 13% 18%, rgba(57, 133, 69, 0.27), transparent 20rem),
    radial-gradient(circle at 84% 17%, rgba(74, 116, 142, 0.25), transparent 22rem),
    linear-gradient(135deg, #effaf1 0%, #f7fbfc 48%, #edf6fa 100%);
  border-color: rgba(74, 116, 142, 0.16);
  box-shadow: 0 32px 80px rgba(43, 85, 109, 0.16);
}

.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.home-hero::before {
  width: 17rem;
  height: 17rem;
  right: 18%;
  bottom: -10rem;
  background: rgba(216, 239, 220, 0.75);
  animation: brandAura 16s ease-in-out infinite alternate;
}

.home-hero::after {
  width: 12rem;
  height: 12rem;
  top: -7rem;
  left: 39%;
  background: rgba(215, 232, 240, 0.72);
}

.home-hero__copy h1 {
  max-width: 13ch;
  font-size: clamp(2.65rem, 5vw, 5.1rem);
  line-height: 0.99;
  letter-spacing: -0.052em;
  background: linear-gradient(112deg, #183241 0%, #398545 48%, #4a748e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-hero__copy > p {
  max-width: 62ch;
  font-size: clamp(1.04rem, 1.2vw, 1.23rem);
  color: #2b556d;
}

.home-hero__copy .page-hero__eyebrow {
  color: #1f6039;
  background: linear-gradient(135deg, rgba(216, 239, 220, 0.92), rgba(215, 232, 240, 0.88));
  border-color: rgba(57, 133, 69, 0.22);
}

.home-hero__copy .meta-pill {
  color: #23485d;
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(74, 116, 142, 0.2);
}

.home-hero__copy .ghost-button {
  color: #23485d;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(74, 116, 142, 0.26);
}

.hero-device {
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(57, 133, 69, 0.38), transparent 18rem),
    linear-gradient(145deg, #183f51, #2b556d 58%, #1f6039);
  box-shadow: 0 34px 68px rgba(43, 85, 109, 0.23), 0 0 0 10px rgba(255, 255, 255, 0.22);
  animation: deviceFloat 7s ease-in-out infinite;
}

.hero-floating {
  color: #23485d;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 38px rgba(43, 85, 109, 0.16);
}

.hero-floating--one { animation: chipFloat 5s ease-in-out infinite; }
.hero-floating--two { animation: chipFloat 6s ease-in-out -0.8s infinite; }
.hero-floating--three { animation: chipFloat 5.5s ease-in-out -1.6s infinite; }
.hero-floating--four { animation: chipFloat 6.5s ease-in-out -2.2s infinite; }

.button,
.ghost-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::before,
.ghost-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -120%;
  width: 70%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 520ms ease;
}

.button:hover::before,
.ghost-button:hover::before {
  left: 140%;
}

.problem-card,
.commercial-feature-card,
.profile-card,
.trust-card,
.pricing-card,
.mockup-card,
.info-card,
.journey-step {
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease, border-color 220ms ease;
}

.problem-card:hover,
.commercial-feature-card:hover,
.profile-card:hover,
.trust-card:hover,
.pricing-card:hover,
.mockup-card:hover,
.info-card:hover,
.journey-step:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 116, 142, 0.28);
  box-shadow: 0 24px 52px rgba(43, 85, 109, 0.15);
}

.commercial-feature-card__icon,
.info-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(57, 133, 69, 0.2), rgba(74, 116, 142, 0.19));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  font-size: 1.55rem;
}

.journey-switcher__tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--experience-green), var(--experience-blue));
  box-shadow: 0 12px 26px rgba(74, 116, 142, 0.23);
}

.journey-panel.is-active {
  animation: panelEnter 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.demo-banner,
.final-cta {
  background:
    radial-gradient(circle at 10% 20%, rgba(57, 133, 69, 0.46), transparent 18rem),
    radial-gradient(circle at 90% 20%, rgba(74, 116, 142, 0.48), transparent 19rem),
    linear-gradient(135deg, #183f51, #1f6039 48%, #2b556d);
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow: 0 30px 72px rgba(24, 50, 65, 0.23);
}

.demo-banner h2,
.final-cta h2,
.demo-banner p,
.final-cta p {
  color: #fff;
}

.is-disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  filter: saturate(0.52);
}

.establishment-preview {
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid rgba(74, 116, 142, 0.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 239, 0.72));
}

.product-home-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.product-home-card .ghost-button {
  margin-top: auto;
}

.home-installation-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-installation-steps li {
  position: relative;
  display: grid;
  gap: 0.7rem;
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px solid rgba(74, 116, 142, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #fff, rgba(238, 246, 250, 0.8));
}

.home-installation-steps li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: -0.72rem;
  color: var(--experience-green);
  font-weight: 900;
}

.home-installation-steps span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--experience-green), var(--experience-blue));
  box-shadow: 0 8px 20px rgba(74, 116, 142, 0.2);
}

.year-cycle {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 16%, rgba(57, 133, 69, 0.16), transparent 19rem),
    radial-gradient(circle at 92% 85%, rgba(74, 116, 142, 0.16), transparent 21rem),
    linear-gradient(145deg, #f5fbf6, #f7fbfd 56%, #eef7fa);
  border-color: rgba(74, 116, 142, 0.17);
}

.year-cycle__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.year-cycle__heading > div {
  display: grid;
  gap: 0.75rem;
}

.year-cycle__heading .meta-pill {
  max-width: 24rem;
  color: var(--experience-blue-dark);
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(74, 116, 142, 0.2);
}

.year-cycle__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.year-cycle__grid::before {
  content: '';
  position: absolute;
  top: 2.05rem;
  right: 7%;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, rgba(57, 133, 69, 0.35), rgba(74, 116, 142, 0.35));
}

.year-cycle__card {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 17rem;
  padding: 1.15rem;
  border: 1px solid rgba(74, 116, 142, 0.15);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 38px rgba(43, 85, 109, 0.1);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.year-cycle__card:hover {
  transform: translateY(-6px);
  border-color: rgba(57, 133, 69, 0.28);
  box-shadow: 0 24px 48px rgba(43, 85, 109, 0.15);
}

.year-cycle__card:nth-child(even) {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(215, 232, 240, 0.56));
}

.year-cycle__card:nth-child(odd) {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(216, 239, 220, 0.58));
}

.year-cycle__index {
  display: grid;
  place-items: center;
  width: 4.1rem;
  height: 4.1rem;
  border: 0.45rem solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--experience-green), var(--experience-blue));
  box-shadow: 0 14px 28px rgba(43, 85, 109, 0.2);
}

.year-cycle__card .page-hero__eyebrow {
  width: fit-content;
  color: var(--experience-green-dark);
  background: rgba(216, 239, 220, 0.82);
  border-color: rgba(57, 133, 69, 0.2);
}

.year-cycle__card h3 {
  color: #183241;
}

.year-cycle__card p {
  color: #4b6574;
}

@media (max-width: 1024px) {
  .year-cycle__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .year-cycle__grid::before {
    display: none;
  }
}

.guide-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background:
    radial-gradient(circle at 10% 30%, rgba(57, 133, 69, 0.15), transparent 16rem),
    radial-gradient(circle at 90% 20%, rgba(74, 116, 142, 0.15), transparent 18rem),
    #fff;
}

.guide-banner > div:first-child {
  display: grid;
  gap: 0.7rem;
  max-width: 50rem;
}

.stagger-group > * {
  transition-delay: calc(var(--stagger-index, 0) * 65ms);
}

@keyframes brandAura {
  from { transform: translate3d(-1rem, -0.5rem, 0) scale(0.96); }
  to { transform: translate3d(1.5rem, 1.5rem, 0) scale(1.04); }
}

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::before,
  .hero-device,
  .hero-floating,
  .journey-panel.is-active {
    animation: none !important;
  }

  .experience-progress::after {
    transition: none;
  }
}

@media (max-width: 768px) {
  .year-cycle__heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .back-to-top {
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .home-hero__copy h1 {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
  }

  .home-installation-steps {
    grid-template-columns: 1fr;
  }

  .home-installation-steps li {
    grid-template-columns: auto 1fr;
    align-items: center;
    min-height: auto;
  }

  .home-installation-steps li:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: auto;
    bottom: -0.85rem;
    left: 1.6rem;
  }

  .guide-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .year-cycle__grid {
    grid-template-columns: 1fr;
  }

  .year-cycle__card {
    min-height: auto;
  }

  .shell-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand-mark,
  .brand-copy {
    min-width: 0;
  }

  .brand-copy span {
    display: none;
  }

  .shell-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .shell-actions .lang-switch,
  .shell-actions > a,
  .shell-actions > button {
    width: 100%;
  }

  .lang-switch button {
    flex: 1;
  }

  .home-hero {
    padding: 1rem;
  }

  .home-hero__copy h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10.6vw, 2.75rem);
    overflow-wrap: anywhere;
  }

  .home-hero__copy > p {
    font-size: 1rem;
  }

  .home-hero__copy .page-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-hero__copy .page-hero__actions > * {
    width: 100%;
  }

  .home-hero__visual,
  .hero-device {
    min-width: 0;
  }

  .hero-device {
    border-radius: 1.25rem;
  }

  .hero-floating {
    padding: 0.65rem 0.8rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 360px) {
  .home-hero__copy h1 {
    font-size: clamp(1.95rem, 10.1vw, 2.25rem);
  }
}

/* ProSchool 2026 responsive navigation and product portal additions */
.shell-inner{gap:1rem;align-items:center}.brand-mark{min-width:max-content}.brand-logo{object-fit:contain;filter:drop-shadow(0 8px 14px rgba(22,89,59,.12))}.main-nav{display:flex;align-items:center;gap:.25rem;flex:1;justify-content:center}.nav-link,.nav-dropdown__trigger{border:0;background:transparent;color:var(--color-ink,#17384a);font:inherit;font-weight:700;padding:.7rem .72rem;border-radius:999px;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.nav-link:hover,.nav-dropdown__trigger:hover,.nav-dropdown.is-active>.nav-dropdown__trigger,.nav-link.is-active{background:rgba(57,133,69,.10);color:#246c37}.nav-dropdown{position:relative}.nav-dropdown__trigger{display:flex;align-items:center;gap:.35rem}.nav-chevron{font-size:.88rem;transition:transform .2s ease}.nav-dropdown.is-open .nav-chevron{transform:rotate(180deg)}.nav-dropdown__panel{position:absolute;top:calc(100% + .55rem);left:50%;transform:translate(-50%,-8px);min-width:235px;padding:.5rem;background:rgba(255,255,255,.98);border:1px solid rgba(46,111,76,.13);border-radius:18px;box-shadow:0 18px 50px rgba(21,55,74,.16);opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease;z-index:60}.nav-dropdown:hover .nav-dropdown__panel,.nav-dropdown:focus-within .nav-dropdown__panel,.nav-dropdown.is-open .nav-dropdown__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.nav-dropdown__panel a{display:block;padding:.75rem .8rem;border-radius:12px;text-decoration:none;color:#244454;font-weight:650}.nav-dropdown__panel a:hover,.nav-dropdown__panel a.is-current{background:linear-gradient(135deg,rgba(57,133,69,.11),rgba(74,116,142,.10));color:#216b35}.shell-actions{gap:.5rem}.footer-contact a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}.brand-mark--footer{align-items:flex-start}

.download-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.download-card{position:relative;overflow:hidden;border:1px solid rgba(57,133,69,.14);border-radius:22px;padding:1.25rem;background:linear-gradient(145deg,#fff,#f6fbf8);box-shadow:0 15px 35px rgba(24,68,54,.08)}.download-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#398545,#4a748e)}.download-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(57,133,69,.1);font-size:1.55rem;margin-bottom:.8rem}.download-card h3{margin:.25rem 0}.download-card__meta{display:flex;flex-wrap:wrap;gap:.35rem;margin:.75rem 0}.download-card__meta span{font-size:.78rem;padding:.25rem .55rem;border-radius:999px;background:#edf5f1;color:#31594b}.download-card .availability{font-size:.83rem;font-weight:700;margin:.7rem 0}.availability--ready{color:#27743b}.availability--pending{color:#8a6420}.download-card .inline-actions{margin-top:1rem}.download-card .button[aria-disabled="true"]{opacity:.55;pointer-events:none}.download-note{margin-top:1rem;padding:1rem 1.15rem;border-radius:16px;background:#f4f8fb;border-left:4px solid #4a748e}

.contact-grid-pro{display:grid;grid-template-columns:.82fr 1.18fr;gap:1.2rem;align-items:start}.contact-cards{display:grid;gap:.8rem}.contact-channel{padding:1rem;border-radius:18px;border:1px solid rgba(57,133,69,.14);background:#fff}.contact-channel strong{display:block;margin-bottom:.25rem}.contact-channel a{color:#286c3a;font-weight:700}.contact-form-card{border-radius:24px;padding:1.25rem;background:linear-gradient(145deg,#fff,#f4faf6);border:1px solid rgba(57,133,69,.16);box-shadow:0 16px 38px rgba(22,73,51,.08)}

.activation-layout{display:grid;grid-template-columns:1fr .8fr;gap:1.2rem;align-items:start}.activation-card{padding:1.35rem;border:1px solid rgba(57,133,69,.16);border-radius:24px;background:linear-gradient(145deg,#fff,#f4faf6)}.activation-result{margin-top:1rem;padding:1rem;border-radius:16px;background:#edf7f0;display:none}.activation-result.is-visible{display:block}.activation-key{display:block;margin:.65rem 0;padding:.8rem;border:1px dashed rgba(57,133,69,.45);border-radius:12px;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;letter-spacing:.04em;overflow-wrap:anywhere}.security-panel{padding:1.2rem;border-radius:22px;background:linear-gradient(145deg,#17384a,#2c586d);color:#fff}.security-panel h3{color:#fff}.security-panel li{margin:.55rem 0}

.guide-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.guide-card{padding:1.3rem;border-radius:24px;border:1px solid rgba(57,133,69,.15);background:#fff}.guide-card__head{display:flex;gap:.8rem;align-items:center}.guide-card__icon{font-size:2rem}.guide-card ul{padding-left:1.1rem}.guide-card li{margin:.35rem 0}.guide-card .inline-actions{margin-top:1rem}

.architecture-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.65rem;align-items:center;margin-top:1rem}.architecture-node{padding:1rem;border-radius:18px;text-align:center;border:1px solid rgba(57,133,69,.15);background:#fff}.architecture-node--server{background:linear-gradient(145deg,#286f3c,#398545);color:#fff}.architecture-arrow{font-size:1.4rem;color:#4a748e;font-weight:800}.architecture-node strong{display:block;margin-bottom:.3rem}.platform-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}.platform-badges span{padding:.35rem .65rem;border-radius:999px;background:rgba(74,116,142,.10);color:#315c72;font-weight:700;font-size:.8rem}

.portal-highlight{background:linear-gradient(135deg,rgba(57,133,69,.08),rgba(74,116,142,.08));border:1px solid rgba(57,133,69,.12);border-radius:22px;padding:1.2rem}.product-status-ready{color:#27743b;font-weight:800}.whatsapp-button{background:#2d8b48!important;color:#fff!important}.whatsapp-button:hover{background:#24713a!important}.hero-brand-logo{width:min(260px,55vw);height:auto;filter:drop-shadow(0 18px 32px rgba(25,83,55,.18));margin:0 auto 1rem;display:block}