.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5469 .elementor-element.elementor-element-84bed13{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5469 .elementor-element.elementor-element-52263b1{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-52263b1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-f21bd08{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-f21bd08 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-eb6b0a1{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-eb6b0a1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-6617be6{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-6617be6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-0b672f4{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-0b672f4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-8cebe72{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-8cebe72 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-3f5038a{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-3f5038a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-f7e0db3{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-f7e0db3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-fb67434{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-fb67434 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5469 .elementor-element.elementor-element-e50c952{width:100%;max-width:100%;}.elementor-5469 .elementor-element.elementor-element-e50c952 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );}}@media(max-width:767px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );}}/* Start custom CSS */:root {
      --bg: #f7fcfa;
      --bg-soft: #ecf8f3;
      --panel: rgba(255, 255, 255, 0.84);
      --panel-strong: rgba(255, 255, 255, 0.96);
      --line: rgba(16, 123, 94, 0.12);
      --line-strong: rgba(16, 123, 94, 0.22);
      --text: #143127;
      --muted: #5f786d;
      --brand: #2ebc92;
      --brand-strong: #16956f;
      --brand-warm: #8de1c0;
      --accent-sky: #67b6ff;
      --accent-peach: #ffb48a;
      --accent-lilac: #b39cff;
      --accent-gold: #ffd36e;
      --glow: rgba(46, 188, 146, 0.22);
      --shadow: 0 26px 70px rgba(19, 99, 76, 0.14);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --container: min(1180px, calc(100vw - 40px));
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Manrope", system-ui, sans-serif;
      color: var(--text);
      background: #ffffff;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(103, 182, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 156, 255, 0.04) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at center, black 42%, transparent 85%);
      pointer-events: none;
      opacity: 0.45;
      z-index: -1;
      contain: strict;
      will-change: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: rgba(46, 188, 146, 0.08);
      z-index: 20;
    }

    .scroll-progress__bar {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--brand), #9be3c1, var(--brand-warm));
      box-shadow: 0 0 20px rgba(105, 211, 167, 0.65);
      transform-origin: left center;
    }

    .header-hero-wrap {
      background: linear-gradient(180deg, #2CB789 0%, #2CB789 30%, #8ee4c4 50%, #d4f4e8 65%, #ffffff 85%);
    }

    .site-header {
      position: sticky;
      top: 8px;
      z-index: 10;
      width: var(--container);
      margin: 0 auto;
      border-radius: 20px;
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow:
        0 4px 24px rgba(19, 99, 76, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
      transition: background 400ms ease, box-shadow 400ms ease, top 300ms ease, border-color 400ms ease;
    }

    .site-header.is-scrolled {
      top: 6px;
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(46, 188, 146, 0.12);
      box-shadow:
        0 8px 32px rgba(19, 99, 76, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    }

    .nav {
      width: 100%;
      margin: 0 auto;
      padding: 0 28px;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      box-sizing: border-box;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .brand__mark {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(46, 188, 146, 0.18), rgba(46, 188, 146, 0.04));
      border: 1px solid rgba(46, 188, 146, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .brand__mark span {
      color: var(--brand);
      font-size: 1.05rem;
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .nav__links a:hover {
      color: var(--text);
    }

    /* Hamburger button - hidden on desktop */
    .nav__hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      flex-direction: column;
      gap: 5px;
      z-index: 12;
    }

    .nav__hamburger span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--text);
      border-radius: 2px;
      transition: transform 300ms ease, opacity 200ms ease;
    }

    .nav__hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
    .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 0 28px 20px;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 400ms ease, opacity 300ms ease, padding 300ms ease;
    }

    .mobile-menu.is-open {
      max-height: 400px;
      opacity: 1;
      padding: 12px 28px 20px;
    }

    .mobile-menu__link {
      padding: 12px 0;
      font-size: 1rem;
      color: var(--muted);
      border-bottom: 1px solid var(--line);
    }

    .mobile-menu__link:hover { color: var(--text); }

    .mobile-menu__cta {
      margin-top: 8px;
      text-align: center;
      justify-content: center;
    }

    /* Feature icon */
    .feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.15);
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      flex-shrink: 0;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button--primary {
      color: #ffffff;
      background: linear-gradient(135deg, #89ebbd, var(--brand));
      box-shadow: 0 16px 35px rgba(105, 211, 167, 0.22);
    }

    .button--primary:hover {
      background: linear-gradient(135deg, #a78bfa, #937EF8);
      box-shadow: 0 16px 35px rgba(147, 126, 248, 0.3);
    }

    .button--secondary {
      color: var(--text);
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(46, 188, 146, 0.14);
    }

    .button--secondary:hover {
      background: #2CB789;
      color: #ffffff;
      border-color: #2CB789;
      box-shadow: 0 16px 35px rgba(44, 183, 137, 0.22);
    }

    main {
      width: 100%;
    }

    section {
      width: var(--container);
      margin: 0 auto;
    }

    .hero {
      padding: 64px 0 0;
      position: relative;
      overflow: hidden;
      background: transparent;
      width: 100% !important;
      max-width: 100% !important;
    }

    .hero .hero__shell {
      width: var(--container);
      margin: 0 auto;
    }

    .hero-bg-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .hero__shell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      position: relative;
      z-index: 1;
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(46, 188, 146, 0.12);
      color: #2a6552;
      font-size: 0.88rem;
      letter-spacing: 0.01em;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 16px var(--glow);
    }

    .hero h1,
    .section-head h2,
    .cta h2 {
      margin: 18px 0 14px;
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 0.95;
    }

    .hero h1 {
      font-size: clamp(2.7rem, 6vw, 4.9rem);
      max-width: 18ch;
      color: #ffffff;
    }

    .hero p {
      max-width: 48rem;
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.08rem;
      line-height: 1.75;
      margin: 0 0 20px;
    }

    .hero__actions,
    .hero__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero__chips {
      margin-top: 2px;
      justify-content: center;
    }

    .chip {
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(46, 188, 146, 0.12);
      background: rgba(255, 255, 255, 0.9);
      color: #2a6552;
      font-size: 0.92rem;
    }

    .hero-copy .eyebrow {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      color: #ffffff;
    }

    .hero-copy .eyebrow::before {
      background: #ffffff;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    }

    .hero .button--primary {
      background: #9880FA;
      color: #ffffff;
      font-size: 1.05rem;
      padding: 16px 32px;
    }

    .hero .button--primary:hover {
      background: #7c5ce7;
      box-shadow: 0 16px 35px rgba(152, 128, 250, 0.35);
    }

    .hero-visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-top: 48px;
      perspective: 1200px;
    }

    .hero-visual__orb,
    .hero-visual__grid,
    .hero-visual__halo {
      display: none;
    }

    .hero-media-shell {
      position: relative;
      width: min(100%, 960px);
      transform-origin: center bottom;
    }

    html.js .hero-media-shell {
      opacity: 0;
      transform: translateY(80px) rotateX(8deg) scale(0.92);
      transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 400ms;
    }

    html.js .hero-media-shell.is-visible {
      opacity: 1;
      transform: translateY(0) rotateX(0deg) scale(1);
    }

    .dashboard__image {
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(46, 188, 146, 0.12);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
    }

    .dashboard__image img {
      width: 100%;
      height: auto;
    }

    .metrics {
      padding: 42px 0 72px;
      background: transparent;
      width: 100% !important;
      max-width: 100% !important;
    }

    .metrics .metrics__grid {
      width: var(--container);
      margin: 0 auto;
    }

    .metrics__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .metric {
      padding: 28px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 247, 0.98));
      border: 1px solid rgba(46, 188, 146, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .metric strong {
      display: block;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(2rem, 4vw, 3.2rem);
      letter-spacing: -0.06em;
      margin-bottom: 10px;
    }

    .metric span {
      color: var(--muted);
      line-height: 1.6;
    }

    .section-head {
      display: grid;
      gap: 14px;
      margin-bottom: 26px;
    }

    .section-head h2 {
      font-size: clamp(2.2rem, 4.8vw, 4rem);
      max-width: 12ch;
    }

    .section-head p {
      max-width: 62ch;
      color: var(--muted);
      line-height: 1.8;
      margin: 0;
    }

    .feature-stack .section-head {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
      gap: 14px;
      margin-bottom: 48px;
    }

    .feature-stack .section-head h2 {
      max-width: 20ch;
      font-size: clamp(2.1rem, 4.1vw, 3.8rem);
      margin-bottom: 0;
      color: #ffffff;
    }

    .feature-stack .section-head p {
      max-width: 50ch;
      color: rgba(255,255,255,0.85);
    }

    .feature-stack {
      padding: 80px 0 70px;
      position: relative;
      width: 100% !important;
      max-width: 100% !important;
      background: linear-gradient(135deg, #7c5ce7 0%, #937EF8 30%, #a78bfa 55%, #7c3aed 80%, #6d28d9 100%);
      overflow: hidden;
      contain: layout style;
    }

    /* Animated SVG background for features */
    .feature-stack__bg-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      contain: strict;
    }

    .feature-stack > .section-head,
    .feature-stack > .feature-grid,
    .feature-stack__cta {
      width: var(--container);
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 1;
    }

    .feature-stack__cta {
      text-align: center;
      margin-top: 48px;
    }

    .feature-stack__cta .button--primary {
      background: #fff;
      color: #937EF8;
    }
    .feature-stack__cta .button--primary:hover {
      background: #2CB789;
      color: #fff;
    }

    .section-cta {
      text-align: center;
      margin-top: 48px;
      padding: 0 24px;
    }

    /* Feature grid — visual cards */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: dense;
      gap: 20px;
    }

    .feat {
      position: relative;
      border-radius: 24px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      backdrop-filter: blur(14px);
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: box-shadow 300ms ease;
      overflow: hidden;
    }

    html.js .feat {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms ease;
    }

    html.js .feat.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .feat:hover {
      box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    }

    /* Large screenshot inside featured card */
    .feat--hero {
      grid-column: span 2;
      grid-row: span 2;
      padding: 0;
      display: grid;
      grid-template-rows: 1fr auto;
    }

    .feat--hero .feat__screen {
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 32px 28px 0;
    }

    .feat--hero .feat__screen img {
      width: 100%;
      height: auto;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    }

    .feat--hero .feat__body {
      padding: 28px 28px 32px;
    }

    .feat__icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: rgba(255,255,255,0.12);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .feat__icon svg {
      width: 28px;
      height: 28px;
    }

    .feat h3 {
      margin: 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.2rem;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: #ffffff;
      font-weight: 700;
    }

    .feat--hero h3 {
      font-size: 1.4rem;
    }

    .feat p {
      margin: 0;
      color: rgba(255,255,255,0.72);
      font-size: 0.92rem;
      line-height: 1.65;
    }

    .feat__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }

    .feat__tag {
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.85);
      font-size: 0.78rem;
      font-weight: 600;
    }

    @media (max-width: 1080px) {
      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .feat--hero {
        grid-column: span 2;
        grid-row: span 1;
      }
    }

    @media (max-width: 720px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
      .feat--hero {
        grid-column: span 1;
      }
    }

    .hero-media {
      position: relative;
    }

    .hero-video-trigger {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(20, 49, 39, 0.05);
      border: 0;
      cursor: pointer;
      transition: background 300ms ease;
    }

    .hero-video-trigger:hover {
      background: rgba(20, 49, 39, 0.18);
    }

    .hero-video-trigger:hover .hero-video-trigger__inner {
      transform: scale(1.06);
      box-shadow: 0 22px 44px rgba(19, 99, 76, 0.22);
    }

    .hero-video-trigger__inner {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px 14px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(46, 188, 146, 0.14);
      box-shadow: 0 18px 34px rgba(19, 99, 76, 0.14);
      color: #1f5443;
      font-weight: 700;
      transition: transform 300ms ease, box-shadow 300ms ease;
    }

    .hero-video-trigger__play {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-strong));
      box-shadow: 0 12px 24px rgba(46, 188, 146, 0.24);
    }

    .hero-video-trigger__play::before {
      content: "";
      margin-left: 4px;
      border-left: 14px solid #fff;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
    }

    .story-grid {
      padding: 68px 0 38px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 22px;
      content-visibility: auto;
      contain-intrinsic-size: auto 600px;
    }

    .story-card,
    .video-card {
      border-radius: 30px;
      background: var(--panel);
      border: 1px solid var(--line);
      overflow: hidden;
      backdrop-filter: blur(16px);
    }

    .story-card {
      padding: 34px;
    }

    .story-flow {
      display: grid;
      gap: 18px;
      margin-top: 26px;
    }

    .story-step {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 16px;
      align-items: start;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(46, 188, 146, 0.1);
    }

    .story-step__index,
    .story-step__icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(44, 183, 137, 0.12), rgba(44, 183, 137, 0.04));
      color: var(--brand);
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .story-step strong {
      display: block;
      margin-bottom: 8px;
      font-size: 1rem;
    }

    .story-step span {
      color: var(--muted);
      line-height: 1.7;
    }

    .video-card iframe {
      width: 100%;
      height: 100%;
      min-height: 540px;
      border: 0;
    }

    .testimonials {
      padding: 54px 0;
      width: 100% !important;
      max-width: 100% !important;
      background: linear-gradient(180deg, #f4faf7 0%, #f7fbf9 50%, #ffffff 100%);
      contain: layout style;
    }

    .testimonials > .section-head {
      width: var(--container);
      margin-left: auto;
      margin-right: auto;
    }

    .testimonials .section-head {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
      gap: 14px;
    }

    .testimonials .section-head p {
      max-width: 50ch;
    }

    /* Carousel wrapper */
    .testimonial-carousel {
      margin-top: 32px;
      overflow: hidden;
      width: 100%;
      mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    }

    .testimonial-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: testimonialScroll 35s linear infinite;
      will-change: transform;
    }

    .testimonial-track:hover {
      animation-play-state: paused;
    }

    @keyframes testimonialScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .testimonial {
      padding: 32px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 247, 0.98));
      border: 1px solid rgba(46, 188, 146, 0.12);
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 380px;
      min-width: 380px;
      flex-shrink: 0;
    }

    .testimonial-stars {
      color: #f59e0b;
      font-size: 1.1rem;
      letter-spacing: 2px;
      line-height: 1;
    }

    .testimonial p {
      margin: 0;
      font-size: 1rem;
      line-height: 1.8;
      color: #143127;
      flex: 1;
    }

    .testimonial strong {
      display: block;
      font-size: 0.98rem;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid rgba(46, 188, 146, 0.1);
    }

    .testimonial-avatar {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      min-height: 48px !important;
      border-radius: 50% !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      border: 2px solid rgba(46, 188, 146, 0.16) !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      flex-shrink: 0;
    }

    .testimonial-author span {
      color: var(--muted);
      font-size: 0.95rem;
    }

    .faq {
      padding: 58px 0 50px;
      width: 100% !important;
      max-width: 100% !important;
      content-visibility: auto;
      contain-intrinsic-size: auto 500px;
      background: #ffffff;
    }

    .faq > .section-head,
    .faq > .faq-list {
      width: var(--container);
      margin-left: auto;
      margin-right: auto;
    }

    .faq .section-head,
    .pricing .section-head {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
      gap: 14px;
    }

    .faq .section-head p,
    .pricing .section-head p {
      max-width: 50ch;
    }


    .faq-list {
      display: grid;
      gap: 14px;
      margin-top: 22px;
    }

    .faq-item {
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(46, 188, 146, 0.12);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      padding: 22px 24px;
      background: transparent;
      color: var(--text);
      border: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .faq-question strong {
      font-size: 1rem;
    }

    .faq-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(46, 188, 146, 0.08);
      color: var(--brand);
      font-size: 1.25rem;
      transition: transform 220ms ease;
      flex-shrink: 0;
    }

    .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 260ms ease;
    }

    .faq-answer > div {
      overflow: hidden;
    }

    .faq-answer p {
      margin: 0;
      padding: 0 24px 24px;
      color: var(--muted);
      line-height: 1.8;
    }

    .faq-item.is-open .faq-answer {
      grid-template-rows: 1fr;
    }

    .faq-item.is-open .faq-icon {
      transform: rotate(45deg);
    }

    /* Pricing */
    .pricing {
      padding: 58px 0 50px;
      width: 100% !important;
      max-width: 100% !important;
      background: linear-gradient(180deg, #f6f4fe 0%, #f9f8ff 50%, #ffffff 100%);
      content-visibility: auto;
      contain-intrinsic-size: auto 800px;
    }

    .pricing > .section-head,
    .pricing > .pricing-grid {
      width: var(--container);
      margin-left: auto;
      margin-right: auto;
    }

    .pricing-toggle-row {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
    }

    .pricing-toggle {
      display: flex;
      gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(46, 188, 146, 0.12);
      width: fit-content;
    }

    .pricing-toggle button {
      padding: 10px 20px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      font: inherit;
      font-weight: 600;
      font-size: 0.92rem;
      color: var(--muted);
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease;
    }

    .pricing-toggle button.is-active {
      background: var(--brand);
      color: #fff;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      justify-items: center;
      gap: 20px;
      margin-top: 28px;
    }

    .pricing-card {
      padding: 34px 30px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 247, 0.98));
      border: 1px solid rgba(46, 188, 146, 0.12);
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 520px;
    }

    .pricing-card.is-featured {
      border-color: var(--brand);
      box-shadow: 0 0 0 1px var(--brand), 0 20px 50px rgba(46, 188, 146, 0.14);
    }

    .pricing-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-strong));
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
      width: fit-content;
      margin-bottom: 14px;
    }

    .pricing-card h3 {
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.5rem;
      letter-spacing: -0.03em;
      margin: 0 0 6px;
    }

    .pricing-card .pricing-users {
      color: var(--muted);
      font-size: 0.92rem;
      margin: 0 0 18px;
    }

    .pricing-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px;
    }

    .pricing-price .currency {
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }

    .pricing-price .amount {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(2.4rem, 4vw, 3.2rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--text);
    }

    .pricing-price .period {
      color: var(--muted);
      font-size: 0.92rem;
    }

    .pricing-save {
      color: var(--brand-strong);
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 18px;
      min-height: 1.2em;
    }

    .pricing-divider {
      border: 0;
      border-top: 1px solid rgba(46, 188, 146, 0.1);
      margin: 18px 0;
    }

    .pricing-includes {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 14px;
    }

    .pricing-features {
      display: grid;
      align-content: start;
      gap: 10px;
      margin-bottom: 24px;
      flex: 1;
    }

    .pricing-feature {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.93rem;
      color: var(--text);
    }

    .pricing-feature svg {
      flex-shrink: 0;
      color: var(--brand);
    }

    .pricing-cta {
      margin-top: auto;
    }

    .pricing-cta .button {
      width: 100%;
      text-align: center;
    }

    @media (max-width: 1000px) {
      .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 720px) {
      .pricing-card {
        padding: 28px;
      }
    }

    .cta {
      padding: 40px 0 90px;
      width: 100% !important;
      max-width: 100% !important;
      background: linear-gradient(180deg, #f4faf7 0%, #f7fbf9 100%);
    }

    .cta > .cta__shell {
      width: var(--container);
      margin-left: auto;
      margin-right: auto;
    }

    .cta__shell {
      position: relative;
      padding: 56px 42px;
      border-radius: 34px;
      background: linear-gradient(135deg, #7c5ce7 0%, #937EF8 30%, #a78bfa 55%, #7c3aed 80%, #6d28d9 100%);
      border: none;
      overflow: hidden;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .cta .eyebrow {
      background: rgba(255,255,255,0.18);
      color: #fff;
      border-color: rgba(255,255,255,0.25);
    }

    .cta h2 { color: #fff !important; }

    .cta p { color: rgba(255,255,255,0.85) !important; }

    .cta .button--primary {
      background: #fff;
      color: #937EF8;
    }
    .cta .button--primary:hover {
      background: #2CB789;
      color: #fff;
    }

    .cta__shell > *:not(.cta-bg-svg) {
      position: relative;
      z-index: 2;
    }

    /* Animated SVG background for CTA */
    .cta-bg-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      contain: strict;
    }

    .cta__shell::after {
      content: "";
      position: absolute;
      inset: auto -40px -50px auto;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 180, 138, 0.16), transparent 70%);
      filter: blur(16px);
      pointer-events: none;
    }

    /* Elementor popup override */
    .elementor-popup-modal {
      overflow-y: auto !important;
    }

    .elementor-popup-modal .dialog-widget-content {
      width: min(540px, 94vw) !important;
      max-width: 94vw !important;
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
      box-sizing: border-box !important;
      margin: 20px auto !important;
      position: relative !important;
      top: auto !important;
      transform: none !important;
    }

    .elementor-popup-modal .dialog-message {
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }

    .elementor-popup-modal .dialog-message > *,
    .elementor-popup-modal .elementor-section-wrap,
    .elementor-popup-modal .elementor-section,
    .elementor-popup-modal .elementor-container,
    .elementor-popup-modal .elementor-column,
    .elementor-popup-modal .elementor-widget-wrap,
    .elementor-popup-modal .elementor-widget,
    .elementor-popup-modal .elementor-widget-container,
    .elementor-popup-modal .elementor-form,
    .elementor-popup-modal .elementor-form-fields-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .elementor-popup-modal .elementor-field-group,
    .elementor-popup-modal .elementor-field,
    .elementor-popup-modal input,
    .elementor-popup-modal select,
    .elementor-popup-modal textarea,
    .elementor-popup-modal .elementor-button {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .video-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(20, 49, 39, 0.46);
      backdrop-filter: blur(12px);
      z-index: 40;
    }

    .video-modal.is-open {
      display: flex;
    }

    .video-modal__dialog {
      position: relative;
      width: min(1080px, 100%);
      overflow: hidden;
      border-radius: 28px;
      background: #fff;
      border: 1px solid rgba(46, 188, 146, 0.14);
      box-shadow: 0 30px 70px rgba(19, 99, 76, 0.22);
    }

    .video-modal__close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, 0.95);
      color: #1f5443;
      font-size: 1.4rem;
      cursor: pointer;
      z-index: 1;
    }

    .video-modal video {
      width: 100%;
      display: block;
      background: #000;
    }

    .cta h2 {
      font-size: clamp(2.2rem, 4.4vw, 4rem);
      max-width: 16ch;
    }

    .cta p {
      max-width: 58ch;
      color: rgba(255,255,255,0.85);
      line-height: 1.8;
      margin: 0 0 24px;
    }

    .footer {
      width: var(--container);
      margin: 0 auto;
      padding: 0 0 44px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    /* Estado inicial escondido só existe quando o JS está ativo (html.js).
       Sem JS, o conteúdo é renderizado normalmente. */
    html.js [data-reveal] {
      opacity: 0;
      transform: translateY(28px) scale(0.985);
      transition:
        opacity 700ms cubic-bezier(0.2, 1, 0.3, 1),
        transform 700ms cubic-bezier(0.2, 1, 0.3, 1);
      transition-delay: var(--delay, 0ms);
    }

    html.js [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* (feat card animations are handled inline via .feat class) */

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      html.js [data-reveal],
      html.js [data-reveal].is-visible,
      html.js .feat,
      html.js .feat.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
      }

      .feature-stack::before,
      .feature-stack::after {
        opacity: 1;
        transform: none;
        transition: none;
        clip-path: none;
      }

      html.js .hero-media-shell,
      html.js .hero-media-shell.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
      }
    }

    @media (max-width: 1080px) {
      .story-grid {
        grid-template-columns: 1fr;
      }

      .feature-stack .section-head {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .feature-stack .section-head .eyebrow,
      .feature-stack .section-head h2,
      .feature-stack .section-head p {
        grid-column: auto;
        grid-row: auto;
        max-width: 62ch;
        padding-bottom: 0;
      }

      .testimonials .section-head {
        grid-template-columns: 1fr;
      }

      .testimonials .section-head,
      .faq .section-head,
      .pricing .section-head {
        grid-template-columns: 1fr;
      }

      .testimonials .section-head .eyebrow,
      .testimonials .section-head h2,
      .testimonials .section-head p,
      .faq .section-head .eyebrow,
      .faq .section-head h2,
      .faq .section-head p,
      .pricing .section-head .eyebrow,
      .pricing .section-head h2,
      .pricing .section-head p,
      .pricing .section-head .pricing-toggle {
        grid-column: auto;
        grid-row: auto;
        padding-bottom: 0;
      }

      .metrics__grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .hero-visual {
        min-height: auto;
      }
    }

    @media (max-width: 720px) {
      .site-header {
        position: relative;
      }

      .nav {
        padding: 14px 20px;
        min-height: 60px;
      }

      /* Hide desktop nav links, show hamburger */
      .nav__links {
        display: none;
      }

      .nav__hamburger {
        display: flex;
      }

      .mobile-menu {
        display: flex;
      }

      .hero {
        padding-top: 24px;
      }

      .hero-visual {
        padding-top: 28px;
      }

      .hero h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
      }

      .hero p {
        font-size: 0.95rem;
      }

      .hero .button--primary {
        font-size: 0.95rem;
        padding: 14px 24px;
      }

      .metrics__grid {
        grid-template-columns: 1fr;
      }

      .testimonial {
        width: 300px;
        min-width: 300px;
        padding: 24px;
      }

      .testimonial-track {
        gap: 16px;
      }

      .story-card,
      .cta__shell {
        padding: 24px;
      }

      .feat {
        padding: 24px 20px;
      }

      .video-card iframe {
        min-height: 320px;
      }

      .pricing-grid {
        align-items: stretch;
      }

      section,
      .nav {
        width: min(100vw - 28px, 1180px);
      }
    }

/* ==========================================================================
   MIOLO DA LANDING  ->  secoes/03-para-quem, 04-funcionalidades, 05-como-funciona
   Tokens da identidade Oni + as tres secoes novas + os 6 mockups escopados.
   Comportamento (abas, autoplay, start/stop dos mockups) em js/scripts.html.
   ========================================================================== */

:root {
  --oni-verde: #25b488;
  --oni-verde-top: #2cb789;
  --oni-forest: #0E2A24;
  --oni-ink: #143127;
  --oni-muted: #5f786d;
  --oni-violeta: #7c5ce7;
  --oni-violeta-2: #937ef8;
  --oni-mint: #5eead4;
  --oni-bg: #f7fbf9;
  --oni-branco: #ffffff;
  --oni-linha: #eef2f0;
}

/* ------------------------- cabecalho comum das secoes -------------------- */

.sec-head {
  width: var(--container);
  margin: 0 auto 40px;
  max-width: 62ch;
}

.sec-head--center {
  text-align: center;
}

.sec-eyebrow {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oni-verde);
  margin-bottom: 12px;
}

.sec-head h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--oni-ink);
  margin: 0;
}

.sec-head p {
  margin: 14px 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--oni-muted);
}

.sec-head--center p {
  margin-left: auto;
  margin-right: auto;
}

/* ============================ 1. PARA QUEM =============================== */

.pq {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--oni-branco);
  padding: 76px 0 70px;
}

.pq__grid {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.pq-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-radius: 22px;
  background: var(--oni-bg);
  border: 1px solid var(--oni-linha);
}

.pq-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(37, 180, 136, 0.12);
  color: var(--oni-verde);
}

.pq-card__icon svg {
  width: 22px;
  height: 22px;
}

.pq-card h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--oni-ink);
}

.pq-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--oni-muted);
}

/* ========================= 2. FUNCIONALIDADES ============================ */

.fx {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--oni-bg);
  padding: 76px 0 70px;
}

.fx__grid {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fx-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--oni-branco);
  border: 1px solid var(--oni-linha);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.fx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(14, 42, 36, 0.08);
}

.fx-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(37, 180, 136, 0.12);
  color: var(--oni-verde);
}

.fx-card__icon svg {
  width: 20px;
  height: 20px;
}

.fx-card h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--oni-ink);
}

.fx-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--oni-muted);
}

.fx__cta {
  text-align: center;
  margin-top: 38px;
}

/* ========================== 3. COMO FUNCIONA ============================= */

.showcase {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--oni-branco);
  padding: 76px 0 70px;
}

.showcase__grid,
.showcase__cta {
  width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.showcase__cta {
  text-align: center;
  margin-top: 40px;
}

/* --------------------------------- abas ---------------------------------- */

.showcase__tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-tab {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--oni-ink);
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--oni-linha);
  border-radius: 16px;
  background: var(--oni-bg);
  transition: background 240ms ease, border-color 240ms ease,
              transform 240ms ease, box-shadow 240ms ease, color 240ms ease;
}

.sc-tab:hover {
  border-color: rgba(37, 180, 136, 0.35);
}

.sc-tab.is-active {
  background: var(--oni-forest);
  border-color: var(--oni-forest);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(14, 42, 36, 0.18);
}

.sc-tab__row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sc-tab__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(37, 180, 136, 0.12);
  color: var(--oni-verde);
  transition: background 240ms ease, color 240ms ease;
}

.sc-tab__icon svg { width: 18px; height: 18px; }

.sc-tab.is-active .sc-tab__icon {
  background: var(--oni-verde);
  color: #06231b;
}

.sc-tab__title {
  flex: 1;
  min-width: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.sc-tab__badge {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.72rem;
  border-radius: 999px;
  background: rgba(20, 49, 39, 0.08);
  color: var(--oni-muted);
}

.sc-tab.is-active .sc-tab__badge {
  background: rgba(255, 255, 255, 0.16);
  color: #cdebe0;
}

/* accordion: 0fr -> 1fr anima a altura ate auto */
.sc-tab__acc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 380ms ease, opacity 260ms ease;
}

.sc-tab.is-active .sc-tab__acc {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sc-tab__accinner {
  display: block;
  overflow: hidden;
  min-height: 0;
}

.sc-tab__desc {
  display: block;
  padding: 11px 0 0 47px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.sc-tab__progress {
  display: block;
  margin: 13px 0 2px 47px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.sc-tab__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--oni-verde);
}

/* -------------------------------- palco ---------------------------------- */

.showcase__stagewrap { perspective: 1400px; }

.showcase__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 560px;
  border-radius: 22px;
  background: var(--oni-forest);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(14, 42, 36, 0.2);
}

.sc-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: rotateX(-7deg) translateY(14px);
  transform-origin: 50% 0%;
  transition: opacity 420ms ease,
              transform 460ms cubic-bezier(0.2, 1, 0.3, 1),
              visibility 0s linear 460ms;
}

.sc-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms ease,
              transform 460ms cubic-bezier(0.2, 1, 0.3, 1),
              visibility 0s;
}

/* ------------------------------ navegacao -------------------------------- */

.showcase__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.sc-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--oni-linha);
  background: var(--oni-bg);
  color: var(--oni-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sc-arrow svg { width: 18px; height: 18px; }

.sc-arrow:hover {
  background: var(--oni-verde);
  border-color: var(--oni-verde);
  color: #fff;
}

.sc-dots { display: flex; align-items: center; gap: 8px; }

.sc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 49, 39, 0.18);
  cursor: pointer;
  transition: width 260ms ease, background 260ms ease;
}

.sc-dot.is-active { width: 26px; background: var(--oni-verde); }

.sc-tab:focus-visible,
.sc-arrow:focus-visible,
.sc-dot:focus-visible,
.sc-panel:focus-visible {
  outline: 3px solid var(--oni-verde);
  outline-offset: 3px;
}

/* ------------------------------ responsivo ------------------------------- */

@media (max-width: 1080px) {
  .pq__grid,
  .fx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .showcase__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .showcase__stagewrap { order: -1; }
  .sc-tab.is-active { transform: none; }
}

/* Abaixo de ~700px o 4/3 deixa o palco baixo demais (320x240) e corta os
   mockups, que tem 330-460px de altura. Vira retrato com altura fixa. */
@media (max-width: 700px) {
  .showcase__stage {
    aspect-ratio: auto;
    max-height: none;
    min-height: 580px;
  }

}

@media (max-width: 720px) {
  .pq, .fx, .showcase { padding: 54px 0 50px; }
  .sec-head { margin-bottom: 28px; }
  .pq__grid,
  .fx__grid { grid-template-columns: minmax(0, 1fr); }
  .pq-card { padding: 24px 22px; }
  .fx-card { padding: 22px 20px; }
  .showcase__stage { border-radius: 18px; }
  .sc-tab { padding: 12px 13px; }
  .sc-tab__desc { padding-left: 0; }
  .sc-tab__progress { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-tab,
  .sc-tab__acc,
  .sc-panel,
  .sc-dot,
  .sc-arrow,
  .fx-card { transition: none !important; }

  .sc-panel { transform: none !important; }
  .sc-tab.is-active { transform: none; }
  .sc-tab__progress { display: none; }
}

/* ================= MOCKUPS ESCOPADOS (gerados a partir de Mockups-Site/) =====
   Cada mockup vive sob .mk-N: seletores prefixados, ids sufixados e @keyframes
   renomeados, pra 6 telas com as mesmas classes conviverem na mesma pagina.
   ========================================================================== */

/* ---------- mockup 1 (mockup-1-orcamento.html) ---------- */
.mk-1 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --violeta:#7c5ce7; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --panel-sub:#9fb4ab; --hair:rgba(255,255,255,.07); /* WhatsApp reais */ --wa-header:#008069; --wa-chat:#efeae2; --wa-recv:#ffffff; --wa-time:#667781; --wa-txt:#111b21; }
.mk-1 * { box-sizing:border-box }
.mk-1 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-1 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px rgba(14,42,36,.35) }
.mk-1 .board { position:absolute;inset:0 }
.mk-1 .sent-chip { position:absolute;left:16px;top:16px;z-index:6;display:flex;align-items:center;gap:6px; background:rgba(37,180,136,.16);border:1px solid rgba(37,180,136,.4);border-radius:99px; padding:5px 11px;font:600 11px/1 "Manrope";color:var(--mint); opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s }
.mk-1 .sent-chip.show { opacity:1;transform:none }
.mk-1 .sent-chip svg { width:12px;height:12px }
.mk-1 .landing { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:300px;background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.35);transition:opacity .4s,transform .4s;z-index:4 }
.mk-1 .landing.gone { opacity:0;transform:translate(-50%,-54%) scale(.94);pointer-events:none }
.mk-1 .lp-chrome { display:flex;align-items:center;gap:8px;padding:8px 10px;background:#eef2f0;border-bottom:1px solid #e2e9e5 }
.mk-1 .lp-chrome .dts { display:flex;gap:4px }
.mk-1 .lp-chrome .dts i { width:8px;height:8px;border-radius:99px;background:#cdd6d1 }
.mk-1 .lp-chrome .url { flex:1;font:500 8.5px/1 "Manrope";color:#8a988f;background:#fff;border-radius:6px; padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-1 .lp-body { padding:14px 14px 16px }
.mk-1 .lp-body h3 { margin:0 0 12px;font:700 14px/1.15 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-1 .field { margin-bottom:9px }
.mk-1 .field label { display:block;font:600 8.5px/1 "Manrope";text-transform:uppercase;letter-spacing:.04em; color:#9aa8a0;margin-bottom:4px }
.mk-1 .field .inp { height:28px;border:1.5px solid #e3ebe6;border-radius:8px;background:#f5f8f6; display:flex;align-items:center;padding:0 9px;font:600 11px/1 "Manrope";color:var(--ink); transition:border-color .2s,background .2s;position:relative }
.mk-1 .field.active .inp { border-color:var(--verde);background:#fff }
.mk-1 .field .val { opacity:0 }
.mk-1 .field .caret { width:1.5px;height:14px;background:var(--verde);margin-left:1px;opacity:0 }
.mk-1 .field.active .caret { opacity:1;animation:blink-mk1 .8s steps(1) infinite }
@keyframes blink-mk1 {50%{opacity:0}}
.mk-1 .lp-btn { margin-top:4px;height:34px;border-radius:9px;background:linear-gradient(180deg,var(--verde-top),var(--verde)); color:#fff;font:700 12px/1 "Space Grotesk",sans-serif;display:grid;place-items:center; box-shadow:0 6px 14px rgba(37,180,136,.35);position:relative;overflow:hidden }
.mk-1 .lp-btn.press { transform:scale(.97) }
.mk-1 .lp-btn .ripple { position:absolute;width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.6); left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0 }
.mk-1 .lp-btn .ripple.go { animation:rip-mk1 .5s ease-out }
@keyframes rip-mk1 {from{transform:translate(-50%,-50%) scale(0);opacity:.7}to{transform:translate(-50%,-50%) scale(24);opacity:0}}
.mk-1 .phone-wrap { position:absolute;left:50%;top:50%;z-index:5;width:238px;height:472px; transform:translate(-50%,calc(-50% + 300px));opacity:0; transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s }
.mk-1 .phone-wrap.up { transform:translate(-50%,calc(-50% + 18px));opacity:1 }
.mk-1 .phone-wrap.leaving { opacity:0!important }
.mk-1 .phone { width:100%;height:100%;background:#0b1f1a;border:6px solid #0b1f1a;border-radius:30px; box-shadow:0 26px 55px rgba(0,0,0,.5);overflow:hidden }
.mk-1 .screen { height:100%;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;background:var(--wa-chat) }
.mk-1 .statusbar { height:20px;background:var(--wa-header);display:flex;align-items:center;justify-content:space-between; padding:0 12px;font:700 9px/1 "Manrope";color:#fff }
.mk-1 .statusbar .sb-r { display:flex;gap:4px;align-items:center;opacity:.9 }
.mk-1 .statusbar .sb-r i { display:block;width:12px;height:8px;border:1px solid #fff;border-radius:2px }
.mk-1 .wa-head { background:var(--wa-header);display:flex;align-items:center;gap:8px;padding:7px 10px;color:#fff }
.mk-1 .wa-head .bk { font-size:15px;line-height:1;opacity:.9 }
.mk-1 .wa-head .av { width:30px;height:30px;border-radius:99px;background:#cfe9df;color:#075e54; display:grid;place-items:center;font:700 11px/1 "Space Grotesk" }
.mk-1 .wa-head .who { flex:1;min-width:0 }
.mk-1 .wa-head .who b { display:block;font:700 12px/1.1 "Manrope";white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-1 .wa-head .who small { font:500 9.5px/1.2 "Manrope";color:rgba(255,255,255,.8) }
.mk-1 .wa-head .ic { display:flex;gap:12px;opacity:.9;font-size:13px }
.mk-1 .wa-chat { flex:1;padding:12px 10px;position:relative;overflow:hidden; background-image:radial-gradient(rgba(0,0,0,.03) 1px,transparent 1px);background-size:16px 16px }
.mk-1 .day { align-self:center;margin:0 auto 10px;background:#fff;border-radius:7px;padding:3px 9px; font:600 8.5px/1 "Manrope";color:var(--wa-time);box-shadow:0 1px 1px rgba(0,0,0,.06);width:max-content }
.mk-1 .bubble { max-width:85%;background:var(--wa-recv);border-radius:0 8px 8px 8px;padding:7px 9px 5px; box-shadow:0 1px 1px rgba(0,0,0,.12);margin-bottom:8px;position:relative; opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s,transform .3s }
.mk-1 .bubble.show { opacity:1;transform:none }
.mk-1 .bubble .msg { font:400 11px/1.4 "Manrope";color:var(--wa-txt) }
.mk-1 .bubble .msg b { font-weight:700 }
.mk-1 .bubble .tm { display:block;text-align:right;font:500 8.5px/1 "Manrope";color:var(--wa-time);margin-top:3px }
.mk-1 .bubble::before { content:"";position:absolute;left:-5px;top:0;border:6px solid transparent; border-top-color:var(--wa-recv);border-right:0 }
.mk-1 .doc { max-width:88%;background:var(--wa-recv);border-radius:8px;padding:8px;margin-bottom:8px; box-shadow:0 1px 1px rgba(0,0,0,.12);display:flex;align-items:center;gap:9px; opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s }
.mk-1 .doc.show { opacity:1;transform:none }
.mk-1 .doc .pdf { width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:#fdecea; display:grid;place-items:center;font:800 8px/1 "Space Grotesk";color:#e23b2e }
.mk-1 .doc .dinfo b { display:block;font:600 10.5px/1.2 "Manrope";color:var(--wa-txt); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px }
.mk-1 .doc .dinfo small { font:500 9px/1.3 "Manrope";color:var(--wa-time) }
.mk-1 .typing { display:inline-flex;gap:3px;background:var(--wa-recv);border-radius:0 8px 8px 8px; padding:9px 11px;box-shadow:0 1px 1px rgba(0,0,0,.12);margin-bottom:8px;width:max-content; opacity:0;transition:opacity .25s }
.mk-1 .typing.show { opacity:1 }
.mk-1 .typing i { width:6px;height:6px;border-radius:99px;background:#9aa6a0;animation:td-mk1 1.2s infinite }
.mk-1 .typing i:nth-child(2) { animation-delay:.2s }
.mk-1 .typing i:nth-child(3) { animation-delay:.4s }
@keyframes td-mk1 {0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.mk-1 .promise { position:absolute;right:-14px;top:-14px;z-index:10;display:flex;align-items:center;gap:6px; background:var(--verde);color:#062018;border-radius:99px;padding:6px 11px; font:800 11px/1 "Space Grotesk",sans-serif;box-shadow:0 10px 22px rgba(0,0,0,.4); opacity:0;transform:scale(.4);transform-origin:top right; transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1) }
.mk-1 .promise.show { opacity:1;transform:scale(1) }
.mk-1 .confetti { position:absolute;right:6px;top:-6px;width:0;height:0;z-index:9;pointer-events:none }
.mk-1 .promise svg { width:12px;height:12px }
@media(max-width:560px) {
  .mk-1 .landing { width:270px }
  .mk-1 .phone { width:210px;height:420px }
}

/* ---------- mockup 2 (mockup-2-funil.html) ---------- */
.mk-2 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --violeta:#7c5ce7; --amber:#fbbf24; --blue:#60a5fa; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --panel-txt:#e7f2ec; --panel-sub:#9fb4ab; --hair:rgba(255,255,255,.07); }
.mk-2 * { box-sizing:border-box }
.mk-2 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-2 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06); box-shadow:0 30px 70px rgba(14,42,36,.35);position:relative }
.mk-2 .board { position:absolute;inset:0;padding:16px 14px;display:flex;flex-direction:column;gap:10px }
.mk-2 .board-head { display:flex;align-items:center;justify-content:space-between;flex:0 0 auto }
.mk-2 .board-head .title { display:flex;align-items:center;gap:8px;color:var(--panel-txt); font:600 12px/1 "Space Grotesk",sans-serif }
.mk-2 .board-head .title .k { width:15px;height:15px;border-radius:5px;background:var(--verde); display:grid;place-items:center;color:var(--forest);font-size:9px;font-weight:800 }
.mk-2 .board-head .search { font-size:9.5px;color:var(--panel-sub);border:1px solid var(--hair); border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.03) }
.mk-2 .cols { flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:0 }
.mk-2 .col { background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06); border-radius:12px;padding:8px 7px;display:flex;flex-direction:column;gap:7px;min-width:0 }
.mk-2 .col-head { display:flex;align-items:center;gap:6px;padding:1px 2px 5px; border-bottom:1px solid rgba(255,255,255,.05) }
.mk-2 .dot { width:7px;height:7px;border-radius:99px;flex:0 0 auto }
.mk-2 .col-head .name { font:600 9.5px/1.1 "Space Grotesk",sans-serif;color:var(--panel-txt); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 }
.mk-2 .count { font:700 9px/1 "Manrope";color:#cfe0d8;background:rgba(255,255,255,.08); border-radius:99px;padding:2px 6px;transition:transform .25s }
.mk-2 .count.bump { transform:scale(1.28) }
.mk-2 .card { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07); border-radius:10px;padding:7px 8px;display:flex;gap:7px;align-items:flex-start; box-shadow:0 1px 2px rgba(0,0,0,.2) }
.mk-2 .card .av { width:22px;height:22px;flex:0 0 22px;border-radius:99px;display:grid;place-items:center; font:700 9px/1 "Space Grotesk";color:var(--forest);background:var(--verde) }
.mk-2 .card .av.v { background:var(--violeta);color:#fff }
.mk-2 .card .av.b { background:var(--blue);color:#08213f }
.mk-2 .card .info { min-width:0;flex:1 }
.mk-2 .card .nm { font:700 11px/1.15 "Manrope";color:#f3f7f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-2 .card .sub { font:500 9px/1.2 "Manrope";color:var(--panel-sub);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-2 .card .val { color:var(--mint);font-weight:700 }
.mk-2 #hero-mk2 { position:relative;z-index:5;cursor:grab;border-left:2px solid transparent;will-change:transform }
.mk-2 #hero-mk2.lifting { border-left-color:var(--verde) }
.mk-2 #hero-mk2.flash { animation:flash-mk2 .9s ease }
@keyframes flash-mk2 {0%{box-shadow:0 0 0 2px var(--verde),0 6px 14px rgba(0,0,0,.4)}
                   100%{box-shadow:0 1px 2px rgba(0,0,0,.2)}}
.mk-2 .dropspot { border:1.5px dashed rgba(94,234,212,.5);border-radius:10px;height:38px; background:rgba(94,234,212,.06);opacity:0;transition:opacity .25s }
.mk-2 .dropspot.show { opacity:1 }
.mk-2 .cursor { position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;opacity:0; pointer-events:none;transition:opacity .2s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)) }
.mk-2 .cursor.show { opacity:1 }
@media(prefers-reduced-motion:reduce) {
  .mk-2 #hero-mk2 { transform:none!important }
}
@media(max-width:560px) {
  .mk-2 .card .sub { font-size:8px }
  .mk-2 .card .nm { font-size:10px }
  .mk-2 .col-head .name { font-size:8.5px }
}

/* ---------- mockup 3 (mockup-3-agenda.html) ---------- */
.mk-3 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --violeta:#7c5ce7; --amber:#e6971a; --blue:#4f93e8; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --line:#eef2f0; }
.mk-3 * { box-sizing:border-box }
.mk-3 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-3 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px rgba(14,42,36,.35) }
.mk-3 .board { position:absolute;inset:0 }
.mk-3 .cal { position:absolute;left:50%;top:calc(50% + 12px);transform:translate(-50%,-50%); width:600px;background:#fff;border-radius:14px;padding:14px 14px 16px; box-shadow:0 22px 46px rgba(0,0,0,.3);z-index:3 }
.mk-3 .cal-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px }
.mk-3 .cal-title { font:700 15px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-3 .cal-nav { display:flex;align-items:center;gap:8px;color:var(--muted) }
.mk-3 .cal-nav span { font:600 11px/1 "Manrope" }
.mk-3 .cal-nav .arw { width:22px;height:22px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;font-size:12px }
.mk-3 .cal-wd { display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px }
.mk-3 .cal-wd span { text-align:center;font:700 8.5px/1 "Manrope";text-transform:uppercase;letter-spacing:.04em;color:#aab6af }
.mk-3 .calGrid { display:grid;grid-template-columns:repeat(7,1fr);gap:5px }
.mk-3 .cell { min-height:52px;border:1px solid var(--line);border-radius:8px;padding:4px 5px;position:relative;background:#fff }
.mk-3 .cell.blank { background:#fafcfb;border-color:#f3f6f4 }
.mk-3 .cell .dn { font:600 10px/1 "Manrope";color:#5f786d }
.mk-3 .cell.pulse { animation:cellpulse-mk3 .75s ease }
@keyframes cellpulse-mk3 {0%{box-shadow:0 0 0 0 rgba(37,180,136,.55);background:#eafaf4}
                       100%{box-shadow:0 0 0 12px rgba(37,180,136,0);background:#fff}}
.mk-3 .chip { display:block;height:15px;border-radius:4px;padding:0 5px;margin-top:3px;color:#fff; font:700 7.5px/15px "Manrope";white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-3 .chip.v { background:var(--violeta) }
.mk-3 .chip.g { background:var(--verde) }
.mk-3 .chip.a { background:var(--amber) }
.mk-3 .chip.b { background:var(--blue) }
.mk-3 .tchip { opacity:0;transform:scale(.55);transform-origin:left center; transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1) }
.mk-3 .tchip.show { opacity:1;transform:scale(1) }
.mk-3 .drop-card { position:absolute;left:50%;margin-left:-95px;top:20px;width:190px;z-index:8; background:#fff;border-radius:11px;border-left:3px solid var(--verde); box-shadow:0 20px 38px rgba(0,0,0,.45);padding:9px 11px;display:flex;gap:9px;align-items:center; opacity:0 }
.mk-3 .drop-card .dc-ico { width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--verde); display:grid;place-items:center }
.mk-3 .drop-card .dc-ico svg { width:15px;height:15px }
.mk-3 .drop-card .dc-t { font:700 11.5px/1.2 "Manrope";color:var(--ink) }
.mk-3 .drop-card .dc-s { font:700 8.5px/1 "Space Grotesk";color:var(--verde);text-transform:uppercase; letter-spacing:.05em;margin-top:3px }
.mk-3 .gtoast { position:absolute;left:50%;bottom:18px;transform:translate(-50%,60px);z-index:9; background:#fff;border-radius:11px;box-shadow:0 16px 34px rgba(0,0,0,.4); padding:9px 13px 9px 10px;display:flex;align-items:center;gap:10px;opacity:0; transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1) }
.mk-3 .gtoast.show { opacity:1;transform:translate(-50%,0) }
.mk-3 .gcal { width:26px;height:26px;flex:0 0 26px;position:relative }
.mk-3 .gt-txt b { display:block;font:700 11px/1.1 "Manrope";color:var(--ink) }
.mk-3 .gt-txt small { font:500 9px/1.2 "Manrope";color:var(--muted) }
.mk-3 .gt-arrow { color:var(--muted);font-size:13px;margin-left:2px }
.mk-3 .repdot { position:absolute;width:8px;height:8px;border-radius:99px;background:var(--verde); z-index:10;box-shadow:0 0 0 4px rgba(37,180,136,.25);opacity:0 }
@media(max-width:620px) {
  .mk-3 .cal { width:94% }
  .mk-3 .drop-card { margin-left:-80px;width:160px }
}

/* ---------- mockup 4 (mockup-4-financeiro.html) ---------- */
.mk-4 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --line:#eef2f0; --red:#e5484d; --red-tint:#fdecec; --gray-tint:#eef2f0; }
.mk-4 * { box-sizing:border-box }
.mk-4 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-4 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px rgba(14,42,36,.35) }
.mk-4 .board { position:absolute;inset:0 }
.mk-4 .fin { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:632px;background:#fff;border-radius:14px;padding:16px 16px 14px; box-shadow:0 22px 46px rgba(0,0,0,.3);z-index:3 }
.mk-4 .fin-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px }
.mk-4 .fin-top h3 { margin:0;font:700 15px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-4 .fin-top .per { font:600 10.5px/1 "Manrope";color:var(--muted);border:1px solid var(--line); border-radius:99px;padding:5px 11px }
.mk-4 .kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px }
.mk-4 .kpi { border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fcfdfc }
.mk-4 .kpi .lb { font:700 8.5px/1 "Manrope";text-transform:uppercase;letter-spacing:.05em;color:#9aa8a0 }
.mk-4 .kpi .vl { font:700 20px/1.1 "Space Grotesk",sans-serif;margin-top:5px;color:var(--ink) }
.mk-4 .kpi.rc .vl { color:var(--verde) }
.mk-4 .kpi.vn .vl { color:var(--red) }
.mk-4 .kpi .dt { width:6px;height:6px;border-radius:99px;display:inline-block;margin-right:5px;vertical-align:middle }
.mk-4 .kpi.ar .dt { background:#9aa8a0 }
.mk-4 .kpi.rc .dt { background:var(--verde) }
.mk-4 .kpi.vn .dt { background:var(--red) }
.mk-4 .rows { display:flex;flex-direction:column;gap:7px }
.mk-4 .row { display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px; padding:9px 12px;background:#fff;position:relative }
.mk-4 .row.flash { animation:rowflash-mk4 1s ease }
@keyframes rowflash-mk4 {0%{background:#eafaf4;box-shadow:0 0 0 2px rgba(37,180,136,.4)}100%{background:#fff;box-shadow:none}}
.mk-4 .row .who { flex:1;min-width:0 }
.mk-4 .row .who b { font:700 12px/1.2 "Manrope";color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-4 .row .who small { display:block;font:500 9.5px/1.2 "Manrope";color:var(--muted);margin-top:2px }
.mk-4 .row .amt { font:700 12.5px/1 "Space Grotesk",sans-serif;color:var(--ink);white-space:nowrap }
.mk-4 .pill { display:inline-flex;align-items:center;gap:4px;border-radius:7px;padding:4px 9px; font:700 9px/1 "Manrope";white-space:nowrap;min-width:74px;justify-content:center }
.mk-4 .pill svg { width:10px;height:10px }
.mk-4 .st-recv { background:rgba(37,180,136,.14);color:#12996f }
.mk-4 .st-venc { background:var(--red-tint);color:var(--red) }
.mk-4 .st-avencer { background:var(--gray-tint);color:#6b7a72 }
.mk-4 .pill.pop { animation:pillpop-mk4 .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes pillpop-mk4 {0%{transform:scale(.6)}100%{transform:scale(1)}}
.mk-4 .cursor { position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;opacity:0; pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));transition:opacity .2s }
.mk-4 .cursor.show { opacity:1 }
@media(max-width:660px) {
  .mk-4 .fin { width:94% }
  .mk-4 .kpi .vl { font-size:16px }
}

/* ---------- mockup 5 (mockup-5-operacao.html) ---------- */
.mk-5 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --violeta:#7c5ce7; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --line:#eef2f0; --amber:#e6971a; }
.mk-5 * { box-sizing:border-box }
.mk-5 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-5 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px rgba(14,42,36,.35) }
.mk-5 .board { position:absolute;inset:0 }
.mk-5 .op { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:636px;background:#fff;border-radius:14px;padding:14px 16px 16px; box-shadow:0 22px 46px rgba(0,0,0,.3);z-index:3 }
.mk-5 .op-title { display:flex;align-items:center;gap:8px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line) }
.mk-5 .op-title .cake { width:24px;height:24px;border-radius:7px;background:rgba(124,92,231,.14);color:var(--violeta); display:grid;place-items:center;font-size:12px;font-weight:800 }
.mk-5 .op-title b { font:700 13.5px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-5 .op-title small { font:500 10px/1 "Manrope";color:var(--muted);margin-left:auto }
.mk-5 .cols { display:flex;gap:16px }
.mk-5 .colL { flex:1.55;min-width:0 }
.mk-5 .colR { flex:1;min-width:0;border-left:1px solid var(--line);padding-left:16px }
.mk-5 .sec-h { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px }
.mk-5 .sec-h .t { font:700 8.5px/1 "Manrope";text-transform:uppercase;letter-spacing:.06em;color:#9aa8a0 }
.mk-5 .ring { position:relative;width:40px;height:40px }
.mk-5 .ring svg { transform:rotate(-90deg) }
.mk-5 .ring .num { position:absolute;inset:0;display:grid;place-items:center; font:700 11px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-5 .task { display:flex;align-items:center;gap:9px;padding:6px 2px }
.mk-5 .cb { width:17px;height:17px;flex:0 0 17px;border-radius:99px;border:2px solid #cdd6d1; display:grid;place-items:center;transition:background .2s,border-color .2s }
.mk-5 .cb svg { width:10px;height:10px;opacity:0;transition:opacity .2s }
.mk-5 .task.done .cb { background:var(--verde);border-color:var(--verde) }
.mk-5 .task.done .cb svg { opacity:1 }
.mk-5 .tt { font:600 11.5px/1.25 "Manrope";color:var(--ink);transition:color .25s }
.mk-5 .task.done .tt { color:#a9b4ac;text-decoration:line-through }
.mk-5 .task .resp { margin-left:auto;display:flex;align-items:center;gap:5px;flex:0 0 auto }
.mk-5 .task .resp .av { width:16px;height:16px;border-radius:99px;background:#e3ebe6;color:#5f786d; display:grid;place-items:center;font:700 7px/1 "Space Grotesk" }
.mk-5 .task .resp small { font:600 9px/1 "Manrope";color:var(--muted) }
.mk-5 .task.hot .cb { box-shadow:0 0 0 3px rgba(37,180,136,.18) }
.mk-5 .alldone { margin-top:8px;display:inline-flex;align-items:center;gap:6px;font:700 9.5px/1 "Space Grotesk"; color:var(--verde);background:rgba(37,180,136,.12);border-radius:99px;padding:5px 10px; opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1) }
.mk-5 .alldone.show { opacity:1;transform:scale(1) }
.mk-5 .mem { display:flex;align-items:center;gap:8px;padding:6px 0 }
.mk-5 .mem .av { width:24px;height:24px;flex:0 0 24px;border-radius:99px;display:grid;place-items:center; font:700 9px/1 "Space Grotesk";color:#fff }
.mk-5 .mem .who { min-width:0;flex:1 }
.mk-5 .mem .who b { display:block;font:700 10.5px/1.15 "Manrope";color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-5 .mem .who small { font:500 8.5px/1 "Manrope";color:var(--muted) }
.mk-5 .stp { font:700 8px/1 "Manrope";border-radius:6px;padding:3px 7px;white-space:nowrap }
.mk-5 .stp.ok { background:rgba(37,180,136,.14);color:#12996f }
.mk-5 .stp.pend { background:rgba(230,151,26,.15);color:#b5730f }
.mk-5 .stp.pop { animation:pop-mk5 .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes pop-mk5 {0%{transform:scale(.6)}100%{transform:scale(1)}}
.mk-5 .cursor { position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;opacity:0; pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));transition:opacity .2s }
.mk-5 .cursor.show { opacity:1 }
@media(max-width:660px) {
  .mk-5 .op { width:95% }
  .mk-5 .cols { gap:10px }
  .mk-5 .colR { padding-left:10px }
}

/* ---------- mockup 6 (mockup-6-rsvp.html) ---------- */
.mk-6 { --verde:#25b488; --verde-top:#2cb789; --forest:#0E2A24; --mint:#5eead4; --violeta:#7c5ce7; --blue:#4f93e8; --amber:#e6971a; --ink:#143127; --muted:#5f786d; --bg:#f7fbf9; --line:#eef2f0; }
.mk-6 * { box-sizing:border-box }
.mk-6 .stage-wrap { perspective:1200px;width:100%;max-width:720px }
.mk-6 .stage { aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative; background:linear-gradient(160deg,#123a30 0%,var(--forest) 62%); border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 70px rgba(14,42,36,.35) }
.mk-6 .board { position:absolute;inset:0;display:grid;place-items:center }
.mk-6 .rsvp { width:520px;background:#fff;border-radius:14px;padding:16px 18px 14px; box-shadow:0 22px 46px rgba(0,0,0,.3);z-index:3 }
.mk-6 .r-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px }
.mk-6 .r-top h3 { margin:0;font:700 14px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-6 .r-top h3 small { display:block;font:500 10px/1 "Manrope";color:var(--muted);margin-top:4px }
.mk-6 .live { display:inline-flex;align-items:center;gap:6px;font:700 9.5px/1 "Manrope";color:#12996f; background:rgba(37,180,136,.12);border-radius:99px;padding:5px 10px }
.mk-6 .live i { width:7px;height:7px;border-radius:99px;background:var(--verde);animation:pulse-mk6 1.5s infinite }
@keyframes pulse-mk6 {0%{box-shadow:0 0 0 0 rgba(37,180,136,.5)}70%{box-shadow:0 0 0 8px rgba(37,180,136,0)}100%{box-shadow:0 0 0 0 rgba(37,180,136,0)}}
.mk-6 .count { display:flex;align-items:flex-end;gap:14px;margin-bottom:8px }
.mk-6 .count .big { font:700 34px/1 "Space Grotesk",sans-serif;color:var(--ink) }
.mk-6 .count .of { font:600 11px/1 "Manrope";color:var(--muted);padding-bottom:4px }
.mk-6 .chips { display:flex;gap:8px;margin-left:auto;padding-bottom:5px }
.mk-6 .chip { font:700 10px/1 "Manrope";border-radius:8px;padding:5px 9px;background:#f3f6f4;color:#5f786d }
.mk-6 .chip b { color:var(--ink) }
.mk-6 .bar { height:7px;border-radius:99px;background:#eef2f0;overflow:hidden;margin-bottom:14px }
.mk-6 .bar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--verde-top),var(--verde)); width:57%;transition:width .7s cubic-bezier(.4,0,.2,1) }
.mk-6 .list-h { font:700 8.5px/1 "Manrope";text-transform:uppercase;letter-spacing:.06em;color:#9aa8a0;margin-bottom:8px }
.mk-6 .list { display:flex;flex-direction:column }
.mk-6 .crow { display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:7px; border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;max-height:60px; transition:max-height .45s ease,opacity .4s ease,margin .45s ease,padding .45s ease,transform .4s ease,background .6s ease }
.mk-6 .crow.enter { opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translateY(-5px) }
.mk-6 .crow.flash { background:#eafaf4 }
.mk-6 .crow .av { width:26px;height:26px;flex:0 0 26px;border-radius:99px;display:grid;place-items:center; font:700 9px/1 "Space Grotesk";color:#fff }
.mk-6 .crow .ci { flex:1;min-width:0 }
.mk-6 .crow .ci b { display:block;font:700 11.5px/1.15 "Manrope";color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mk-6 .crow .ci small { font:500 9.5px/1 "Manrope";color:var(--muted) }
.mk-6 .crow .tm { font:600 9px/1 "Manrope";color:#aab6af;white-space:nowrap }
.mk-6 .crow .ck { width:18px;height:18px;flex:0 0 18px;border-radius:99px;background:rgba(37,180,136,.14); display:grid;place-items:center }
.mk-6 .crow .ck svg { width:11px;height:11px }
@media(max-width:560px) {
  .mk-6 .rsvp { width:95% }
  .mk-6 .count .big { font-size:26px }
}

/* ================== ENCAIXE DOS MOCKUPS NO PALCO =========================
   Precisa vir DEPOIS da CSS gerada acima: la os mockups declaram .stage com
   aspect-ratio 4/3 e larguras fixas (desenhados pra um palco de 720px).
   ========================================================================== */

.mk { position: absolute; inset: 0; }

.mk .stage-wrap {
  width: 100%;
  max-width: none;
  height: 100%;
  perspective: none;
}

.mk .stage {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* .row .who b e inline no mockup original, entao o text-overflow:ellipsis nao
   aplicava e o nome invadia o valor quando o palco fica estreito. */
.mk-4 .row .who b { display: block; }

/* larguras fixas viram fluidas pra caberem em qualquer largura de palco */
.mk-3 .cal  { width: min(600px, 96%); }
.mk-4 .fin  { width: min(632px, 96%); }
.mk-5 .op   { width: min(636px, 96%); }
.mk-6 .rsvp { width: min(520px, 94%); }

@media (max-width: 700px) {
  /* o painel de operacao tem duas colunas lado a lado: empilha no estreito */
  .mk-5 .cols { flex-direction: column; gap: 10px; }

  .mk-5 .colR {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 10px;
  }
}/* End custom CSS */