.lbl{font-size:.9rem;letter-spacing:2px}
.tabs-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.tab-btn{background:transparent;border:1.5px solid var(--bdr2);color:var(--txt2);font-family:inherit;font-weight:700;font-size:.92rem;padding:11px 22px;border-radius:var(--md-sys-shape-corner-full);cursor:pointer;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-short4);transition-timing-function:var(--md-sys-motion-easing-standard)}
.tab-btn:hover{border-color:var(--blue);color:var(--blue)}
.tab-btn.active{background:var(--md-sys-color-primary-filled);border-color:var(--blue);color:#fff}
.tab-btn--cta{border-style:dashed}
.tab-btn--cta.active{background:var(--sky);border-color:var(--sky)}

.tab-panel{display:none}
.tab-panel.active{display:block;animation:tabIn .35s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.tab-panel-grid{display:grid;grid-template-columns:1fr 1.3fr;grid-template-areas:"text shot" "cta shot";column-gap:44px;row-gap:22px;align-items:center;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);padding:40px;box-shadow:var(--shadow)}
.tab-panel-content{grid-area:text}
.tab-panel-cta{grid-area:cta}
.tab-panel-shot{grid-area:shot;align-self:center;border-radius:var(--md-sys-shape-corner-large);overflow:hidden;border:1px solid var(--bdr2);box-shadow:var(--shadow-md);aspect-ratio:16/9;background:var(--bg2)}
.tab-panel-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.tab-panel-content h3{font-size:1.5rem;font-weight:900;color:var(--txt);margin-bottom:12px}
.tab-panel-content>p{color:var(--txt2);line-height:1.9;margin-bottom:20px;font-size:1rem}
.tab-features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.tab-features li{display:flex;align-items:flex-start;gap:8px;color:var(--txt2);font-size:.92rem;line-height:1.6}
.tab-features li::before{content:"✓";color:var(--blue);font-weight:800;flex-shrink:0}

.tab-cta{text-align:center;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);padding:56px 40px;box-shadow:var(--shadow)}
.tab-cta h3{font-size:1.6rem;font-weight:900;color:var(--txt);margin-bottom:12px}
.tab-cta p{color:var(--txt2);line-height:1.9;max-width:480px;margin:0 auto 26px;font-size:1rem}
.tab-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:800px){
  .tab-panel-grid{grid-template-columns:1fr;grid-template-areas:"text" "shot" "cta";padding:28px 24px;text-align:center}
  .tab-panel-shot{margin:4px 0}
  .tab-features{grid-template-columns:1fr;text-align:right}
}
.tabs-arrow{display:none}
@media(max-width:640px){
  .tabs-nav-wrap{display:flex;align-items:center;gap:6px;margin-bottom:22px}
  .tabs-nav{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;padding:0 2px 6px;scrollbar-width:none}
  .tabs-nav::-webkit-scrollbar{display:none}
  .tab-btn{flex-shrink:0;padding:9px 18px;font-size:.85rem;white-space:nowrap}
  .tabs-arrow{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--bdr2);background:var(--card);color:var(--blue);font-size:1rem;line-height:1;cursor:pointer;flex-shrink:0;box-shadow:var(--shadow)}
  .tabs-arrow:active{background:var(--bg2)}

  .tab-panel-grid{padding:24px 18px;text-align:right}
  .tab-panel-shot{margin:2px 0}
  .tab-panel-content h3{text-align:right}
  .tab-panel-content>p{text-align:right}
  .tab-features{text-align:right}
  .tab-features li{align-items:flex-start}
  .tab-panel-cta{display:flex;justify-content:center}
}

#cases{background:var(--bg2)}

.cases-wrap{position:relative;display:flex;align-items:center;gap:14px}
.cases-track{flex:1;min-width:0;display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:6px 2px 18px;cursor:grab;user-select:none;scrollbar-width:none;-ms-overflow-style:none}
/* Snapping starts at the first interaction (pages/index.*.js): snapping the
   overflowing track during first layout is a scroll, and Chrome then stops
   recording Largest Contentful Paint for the page. */
.cases-track.snap{scroll-snap-type:x proximity}
.cases-track.dragging{cursor:grabbing;scroll-behavior:auto}
.cases-track::-webkit-scrollbar{display:none}

.case-card{flex:0 0 320px;scroll-snap-align:start;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--md-sys-shape-corner-large-increased);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform var(--md-sys-motion-duration-medium2) cubic-bezier(.22,.8,.28,1),box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
.case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue)}
.case-img{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg2);overflow:hidden;flex-shrink:0}
.case-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform var(--md-sys-motion-duration-long2) cubic-bezier(.22,.8,.28,1)}
.case-card:hover .case-img img{transform:scale(1.06)}
.case-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.case-title{font-size:.88rem;font-weight:800;color:var(--txt);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.cases-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--bdr2);background:var(--card);color:var(--blue);font-size:1.15rem;line-height:1;cursor:pointer;flex-shrink:0;box-shadow:var(--shadow);transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.cases-arrow:hover{background:var(--bg2);transform:scale(1.08)}
.cases-arrow:active{transform:scale(.92)}

.cases-dots{display:flex;align-items:center;justify-content:center;gap:0;margin-top:20px}
.cases-dot{position:relative;width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer}
/* 24px target; the visible 6px dot (22px when active) is drawn inside. */
.cases-dot::before{content:"";position:absolute;top:9px;inset-inline-start:9px;width:6px;height:6px;border-radius:var(--md-sys-shape-corner-full);background:var(--bdr2);transition:width var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),inset-inline-start var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),background var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
.cases-dot:hover::before{background:var(--txt2)}
.cases-dot.active::before{width:22px;inset-inline-start:1px;background:var(--blue)}

.cases-more{display:flex;justify-content:center;margin-top:32px}

@media(max-width:640px){
  .cases-arrow{display:none}
  .case-card{flex-basis:280px}
}

.logos-wrap{display:flex;flex-direction:column;gap:20px}
.logos-row{direction:ltr;overflow:hidden;padding:10px 0;margin:-10px 0;-webkit-mask-image:linear-gradient(to left,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.logos-track{display:flex;gap:20px;width:max-content;animation:marqueeL 38s linear infinite}
.logos-row--rev .logos-track{animation-name:marqueeR}
.logos-row:hover .logos-track{animation-play-state:paused}
@keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.logos-track{animation:none}}

.logo-card{flex:0 0 auto;width:150px;height:88px;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--md-sys-shape-corner-large);display:flex;align-items:center;justify-content:center;padding:16px 22px;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.logo-card:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.logo-card img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) opacity(60%);transition:filter var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.logo-card:hover img{filter:grayscale(0) opacity(100%)}
/* Dark mode: logos are dark-ink artwork, so give each card a soft light plate like the light theme */
[data-theme="dark"] .logo-card{background:#eef2f7;border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .logo-card:hover{border-color:var(--blue);background:#f7fafd}
[data-theme="dark"] .logo-card img{filter:grayscale(1) opacity(70%)}
[data-theme="dark"] .logo-card:hover img{filter:grayscale(0) opacity(100%)}
[data-theme="dark"] .partner-modal-logo{background:#eef2f7;border-radius:var(--md-sys-shape-corner-medium);padding:12px 16px;box-sizing:content-box}

.partner-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.partner-modal.open{display:flex}
.partner-modal-overlay{position:absolute;inset:0;background:rgba(10,20,35,.6);backdrop-filter:blur(2px)}
.partner-modal-box{position:relative;background:var(--card);border-radius:var(--rl);box-shadow:var(--shadow-md);max-width:420px;width:100%;padding:38px 32px 32px;text-align:center;z-index:1;animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.partner-modal-close{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--bdr2);background:var(--bg2);color:var(--txt2);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.partner-modal-close:hover{background:var(--bdr2)}
.partner-modal-logo{width:110px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.partner-modal-logo img{max-width:100%;max-height:100%;object-fit:contain}
.partner-modal-box h3{font-size:1.2rem;font-weight:900;color:var(--txt);margin-bottom:12px}
.partner-modal-box h3 a{color:var(--blue);text-decoration:none;border-bottom:1.5px solid var(--cmp-good-hd-bdr);transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.partner-modal-box h3 a:hover{border-color:var(--blue)}
.partner-modal-box p{font-size:.92rem;color:var(--txt2);line-height:1.9;margin-bottom:0}

@media(max-width:640px){
  .logo-card{width:120px;height:74px;padding:12px 16px}
}

.einvoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.einvoice-card{display:flex;gap:20px;align-items:flex-start;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);padding:32px;box-shadow:var(--shadow);text-decoration:none;transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.einvoice-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue)}
.einvoice-ico{width:120px;height:120px;flex-shrink:0;border-radius:var(--md-sys-shape-corner-large);background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.einvoice-ico img{width:118%;height:118%;max-width:none;object-fit:contain}
.einvoice-body h3{font-size:1.1rem;font-weight:900;color:var(--txt);margin-bottom:10px;line-height:1.4}
.einvoice-body p{font-size:.9rem;color:var(--txt2);line-height:1.85;margin-bottom:14px}
.einvoice-link{color:var(--blue);font-weight:700;font-size:.88rem}

@media(max-width:800px){
  .einvoice-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .einvoice-card{flex-direction:column;text-align:center;padding:26px 22px}
  .einvoice-ico{margin:0 auto}
}

.integ-hub{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto}
.integ-lines{position:absolute;inset:0;width:100%;height:100%}
.integ-lines line{stroke:var(--bdr2);stroke-width:.6;stroke-dasharray:2.2 2.4;vector-effect:non-scaling-stroke}

.integ-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2;animation:integPulse 3s ease-in-out infinite}
.integ-center img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@keyframes integPulse{0%,100%{box-shadow:var(--shadow-md),0 0 0 0 var(--blue-glow)}50%{box-shadow:var(--shadow-md),0 0 0 14px transparent}}

.integ-item{position:absolute;transform:translate(-50%,-50%);z-index:1}
.integ-item--1{left:50%;top:12.5%}
.integ-item--2{left:82.48%;top:31.25%}
.integ-item--3{left:82.48%;top:68.75%}
.integ-item--4{left:50%;top:87.5%}
.integ-item--5{left:17.52%;top:68.75%}
.integ-item--6{left:17.52%;top:31.25%}

.integ-item-inner{width:104px;height:104px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:20px;transition:box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.integ-item:hover .integ-item-inner{box-shadow:var(--shadow-md)}
.integ-item-inner img{max-width:100%;max-height:100%;object-fit:contain}

.integ-item{cursor:pointer}
.integ-item::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;background:var(--card);color:var(--txt);font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--md-sys-shape-corner-small);border:1px solid var(--bdr2);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);z-index:3}
.integ-item::before{content:'';position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);border:6px solid transparent;border-top-color:var(--bdr2);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);z-index:3}
.integ-item:hover::after,.integ-item:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}

.integ-item--1 .integ-item-inner{animation:integFloat1 7s ease-in-out infinite}
.integ-item--2 .integ-item-inner{animation:integFloat2 8s ease-in-out infinite}
.integ-item--3 .integ-item-inner{animation:integFloat3 6.5s ease-in-out infinite}
.integ-item--4 .integ-item-inner{animation:integFloat4 7.5s ease-in-out infinite}
.integ-item--5 .integ-item-inner{animation:integFloat5 9s ease-in-out infinite}
.integ-item--6 .integ-item-inner{animation:integFloat6 8.5s ease-in-out infinite}

@keyframes integFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-10px)}}
@keyframes integFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-9px,8px)}}
@keyframes integFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,10px)}}
@keyframes integFloat4{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-7px)}}
@keyframes integFloat5{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,6px)}}
@keyframes integFloat6{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,9px)}}

@media(max-width:640px){
  .integ-hub{max-width:280px}
  .integ-center{width:88px;height:88px}
  .integ-item-inner{width:60px;height:60px;padding:13px}
}
@media(prefers-reduced-motion:reduce){
  .integ-center,.integ-item-inner{animation:none}
}