/* Perinvo ecosystem layer: header "See more" menu, one card language and one reveal animation.
   Loaded after every page stylesheet so it is the single source of truth for these patterns. */
:root{--eco-navy:#032f61;--eco-navy-2:#011f43;--eco-teal:#05c8cf;--eco-teal-ink:#008f9a;--eco-teal-soft:#e6fafb;--eco-line:#dbe7ee;--eco-muted:#56708b;--eco-card-radius:20px;--eco-ease:cubic-bezier(.22,.8,.24,1)}

/* ---------- Header ---------- */
.site-header .header-inner{gap:24px}
.eco-nav{gap:30px}
.eco-nav>a{font-size:14px}
.eco-more{position:static}
.eco-more-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#475b73;font:inherit;font-size:14px;font-weight:600;padding:27px 0;cursor:pointer;position:relative}
.eco-more-toggle svg{width:12px;height:12px;transition:transform .25s var(--eco-ease)}
.eco-more-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.eco-more-toggle:hover,.eco-more-toggle.active,.eco-more-toggle[aria-expanded="true"]{color:var(--eco-navy)}
.eco-nav .eco-more-toggle::after{content:'';position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--eco-teal);transform:scaleX(0);transition:transform .25s}
.eco-nav .eco-more-toggle.active::after,.eco-nav .eco-more-toggle[aria-expanded="true"]::after{transform:scaleX(1)}

.eco-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--eco-line);box-shadow:0 30px 60px rgba(3,47,97,.14);animation:eco-drop .28s var(--eco-ease)}
.eco-mega[hidden]{display:none}
.eco-mega-inner{width:var(--wrap);margin:auto;display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:28px;padding:34px 0 26px}
.eco-mega-lead{padding-right:22px;border-right:1px solid var(--eco-line)}
.eco-mega-lead p{margin:0 0 14px;color:var(--eco-muted);font-size:14px;line-height:1.6}
.eco-mega .eco-mega-lead .eco-mega-title{color:var(--eco-navy);font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:8px 0 10px}
.eco-mega-eyebrow{display:block;color:var(--eco-teal-ink);font-size:11px;font-weight:700;letter-spacing:.14em}
.eco-mega-col{display:flex;flex-direction:column;gap:6px}
.eco-mega-col .eco-mega-eyebrow{padding:0 10px 6px}
.desktop-nav .eco-mega a{padding:0;font-size:inherit}
.desktop-nav .eco-mega a::after{display:none}
.eco-mega-item{display:flex;align-items:flex-start;gap:12px;padding:10px!important;border-radius:14px;color:var(--eco-navy);transition:background .2s,transform .2s var(--eco-ease)}
.eco-mega-item:hover{background:var(--eco-teal-soft);transform:translateX(3px)}
.eco-mega-icon{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eef6fa;color:var(--eco-navy)}
.eco-mega-item:hover .eco-mega-icon{background:var(--eco-navy);color:var(--eco-teal)}
.eco-mega-icon svg{width:19px;height:19px}
.eco-mega-item b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.eco-mega-item small{display:block;color:var(--eco-muted);font-size:12px;font-weight:500;line-height:1.4;margin-top:2px}
.eco-mega-cta{display:inline-flex;gap:6px;color:var(--eco-navy)!important;font-weight:700;font-size:14px!important;border-bottom:2px solid var(--eco-teal);padding-bottom:3px!important}
.eco-mega-foot{width:var(--wrap);margin:auto;display:flex;flex-wrap:wrap;gap:8px 26px;padding:16px 0 20px;border-top:1px solid var(--eco-line)}
.desktop-nav .eco-mega-foot a{color:#475b73;font-size:13px;font-weight:600}
.desktop-nav .eco-mega-foot a:hover,.desktop-nav .eco-mega-foot a.active{color:var(--eco-teal-ink)}
.eco-mega-foot .v18-nav-group{display:contents}
.eco-mega-foot .v18-nav-group summary{display:none}
.eco-mega-foot .v18-nav-children{display:contents}

.eco-account{position:relative}
.eco-account .header-account{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
.eco-account .header-account svg{width:11px;height:11px}
.eco-account-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:#fff;border:1px solid var(--eco-line);border-radius:16px;box-shadow:0 22px 50px rgba(3,47,97,.14);padding:8px;display:flex;flex-direction:column;animation:eco-drop .22s var(--eco-ease);z-index:5}
.eco-account-menu[hidden]{display:none}
.eco-account-menu a,.eco-account-menu .header-signout button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;color:var(--eco-navy);font-size:13px;font-weight:600;border:0;background:none}
.eco-account-menu a:hover,.eco-account-menu .header-signout button:hover{background:var(--eco-teal-soft)}
.eco-account-menu .header-signout{border-top:1px solid var(--eco-line);margin-top:6px;padding-top:6px;display:block}

@keyframes eco-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:1121px){.site-header .header-account{display:inline-flex}}
@media (max-width:1280px) and (min-width:1121px){.eco-nav{gap:22px}.eco-mega-inner{grid-template-columns:repeat(4,1fr)}.eco-mega-lead{display:none}}
@media (max-width:1120px){.eco-account{display:none}}

/* ---------- One card language ---------- */
.eco-card.eco-card{border:1px solid var(--eco-line);border-radius:var(--eco-card-radius);box-shadow:0 6px 18px rgba(3,47,97,.035);transition:transform .35s var(--eco-ease),box-shadow .35s var(--eco-ease),border-color .35s!important}
.eco-card.eco-card:hover,.eco-card.eco-card:focus-within{transform:translateY(-6px)!important;border-color:#8cd7e2;box-shadow:inset 0 3px 0 var(--eco-teal),0 22px 44px rgba(3,47,97,.11)!important}
.eco-card .card-icon{border-radius:14px;transition:background .3s,color .3s}
.eco-card:hover .card-icon{background:var(--eco-navy);color:var(--eco-teal)}
.eco-card .card-kicker{color:var(--eco-teal-ink);letter-spacing:.12em}
.eco-card .card-bottom b,.eco-card .card-bottom span:first-child{transition:color .25s}
.eco-card:hover .card-bottom span:first-child{color:var(--eco-teal-ink)}

/* Reveal: cards rise in once, staggered per row. Hidden only after JS marks them, so no-JS pages stay visible. */
.eco-pending{opacity:0}
.eco-in{animation:eco-rise .7s var(--eco-ease) backwards;animation-delay:var(--eco-delay,0ms)}
@keyframes eco-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.eco-pending{opacity:1}.eco-in{animation:none}.eco-card.eco-card,.eco-card.eco-card:hover{transition:none!important;transform:none!important}.eco-mega,.eco-account-menu{animation:none}}

/* ---------- Solutions page ---------- */
.eco-solutions{--pad:clamp(44px,5vw,76px);color:#102e52}
.eco-sol-hero{background:radial-gradient(ellipse at 88% 10%,rgba(5,200,207,.16),transparent 45%),linear-gradient(115deg,#fff,#eef8fc);padding:clamp(48px,6vw,84px) 0 clamp(36px,4vw,56px)}
.eco-sol-hero .eco-mega-eyebrow{margin-bottom:14px}
.eco-sol-hero h1{color:var(--eco-navy);font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.035em;margin:0 0 16px;max-width:17ch}
.eco-sol-hero p{color:var(--eco-muted);font-size:17px;line-height:1.65;max-width:62ch;margin:0}
.eco-sol-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.eco-sol-actions .btn{border-radius:999px}
.eco-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.eco-pillar{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid var(--eco-line);color:var(--eco-navy);transition:border-color .25s,background .25s}
.eco-pillar:hover,.eco-pillar.is-current{border-color:var(--eco-teal);background:#fff}
.eco-pillar b{font-size:12px;letter-spacing:.14em;color:var(--eco-teal-ink)}
.eco-pillar span{font-size:14px;font-weight:600}
.eco-sol-section{padding:var(--pad) 0}
.eco-sol-section.is-soft{background:#f4f9fc}
.eco-sol-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.eco-sol-head h2{color:var(--eco-navy);font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin:8px 0 0}
.eco-filter{display:flex;flex-wrap:wrap;gap:8px}
.eco-filter button{border:1px solid var(--eco-line);background:#fff;color:var(--eco-navy);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.eco-filter button:hover{border-color:var(--eco-teal)}
.eco-filter button[aria-pressed="true"]{background:var(--eco-navy);border-color:var(--eco-navy);color:#fff}
.eco-sol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.eco-sol-grid>.product-card{grid-column:auto!important;min-width:0;display:flex;flex-direction:column;background:#fff;padding:24px;overflow:hidden}
.eco-sol-grid>[hidden]{display:none!important}
.eco-sol-grid .product-card h3{color:var(--eco-navy);font-size:20px;line-height:1.3}
.eco-sol-grid .product-card p{color:var(--eco-muted);font-size:14px;line-height:1.6}
.eco-sol-grid .card-bottom{margin-top:auto}
.eco-sol-grid .pvn-card-fit{display:block;font-size:12px;line-height:1.45;color:#476581;margin:8px 0 2px}
.eco-sol-grid .pvn-card-pricing{display:flex;flex-direction:column;gap:3px;margin:12px 0;padding:11px 13px;border:1px solid #dcedf2;border-radius:12px;background:#f1fbfd;color:#073e66}
.eco-sol-grid .pvn-card-pricing strong{font-size:14px}
.eco-sol-grid .pvn-card-pricing small{font-size:11px;color:#506982}
.eco-buy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eco-buy .pvn-box{background:#fff;padding:22px}
.eco-buy h3{color:var(--eco-navy);font-size:18px;margin:6px 0 8px}
.eco-buy p{color:var(--eco-muted);font-size:14px;line-height:1.65;margin:0}
.eco-buy-note{font-size:13px;color:#49627e;margin:18px 0 0;line-height:1.6}
.eco-sol-faq details{border-bottom:1px solid var(--eco-line);padding:16px 0}
.eco-sol-faq summary{cursor:pointer;color:var(--eco-navy);font-weight:600;font-size:16px}
.eco-sol-faq details p{color:var(--eco-muted);line-height:1.65;margin:10px 0 0}
.eco-sol-split{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
/* ---------- My workspace ---------- */
.eco-ws .eco-sol-hero code{background:#fff;border:1px solid var(--eco-line);border-radius:8px;padding:2px 8px;color:var(--eco-navy);font-size:14px}
.eco-ws .eco-sol-hero .notice{margin:20px 0 0;max-width:70ch}
.eco-ws-app{display:flex;flex-direction:column;background:#fff;padding:22px}
.eco-ws-app-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.eco-ws-app .eco-mega-icon{width:44px;height:44px;flex-basis:44px;border-radius:13px}
.eco-ws-app .eco-mega-icon svg{width:22px;height:22px}
.eco-ws-app.is-locked .eco-mega-icon{background:#f1f5f8;color:#6b819a}
.eco-ws-app h3{color:var(--eco-navy);font-size:19px;margin:0 0 6px}
.eco-ws-app p{color:var(--eco-muted);font-size:14px;line-height:1.6;margin:0 0 12px}
.eco-ws-app>p:not(.eco-ws-status){flex:1}
.eco-ws .eco-ws-status{display:flex;align-items:center;gap:8px;color:var(--eco-navy);font-size:13px;font-weight:600;margin:0;padding-top:6px}
.eco-ws-actions{min-height:52px}
.eco-ws-dot{width:8px;height:8px;border-radius:50%;background:#b8c6d3;flex:0 0 8px}
.eco-ws-dot.is-on{background:var(--eco-teal);box-shadow:0 0 0 4px var(--eco-teal-soft)}
.eco-ws-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.eco-ws-actions form{margin:0}
.eco-ws-actions .btn{border-radius:999px}
.eco-ws-link{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--eco-muted);font-size:13px;text-decoration:underline}
.eco-ws-empty{background:#fff;padding:26px;max-width:640px}
.eco-ws-empty h3{color:var(--eco-navy);margin:0 0 6px}
.eco-ws-learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.eco-ws-learn .pvn-box{background:#fff;padding:22px}
.eco-ws-learn h3{color:var(--eco-navy);font-size:18px;margin:0 0 12px}
.eco-ws-learn p{color:var(--eco-muted);font-size:14px;line-height:1.6}
.eco-ws-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.eco-ws-list li{display:grid;gap:4px;margin:0;padding:0 0 14px;border-bottom:1px solid var(--eco-line)}
.eco-ws-list li::before{display:none}
.eco-ws-list li:last-child{border-bottom:0;padding-bottom:0}
.eco-ws-list b{color:var(--eco-navy);font-size:14px}
.eco-ws-list small{color:var(--eco-muted);font-size:12px}
.eco-ws-list .v24-progress{display:block;height:6px;background:#e6eef2;border-radius:999px;overflow:hidden;margin:4px 0}
.eco-ws-list .v24-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--eco-navy),var(--eco-teal))}
.eco-ws-join{justify-self:start;margin-top:6px;border-radius:999px}
.eco-ws-table td,.eco-ws-table th{font-size:14px}
@media (max-width:980px){.eco-ws-learn{grid-template-columns:minmax(0,1fr)}}

@media (max-width:980px){.eco-sol-grid,.eco-buy{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-pillars{grid-template-columns:repeat(2,1fr)}.eco-sol-split{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){.eco-sol-grid,.eco-buy{grid-template-columns:minmax(0,1fr)}.eco-sol-actions .btn{width:100%;text-align:center}}
