:root{
  --bg:#eef0f7;
  --card:#fff;
  --txt:#111827;
  --muted:#9ca3af;
  --accent:#3b5bff;
  --r:16px;
  --gap:14px;
  --card-w:272px;
  /* tag */
  --c-fin:#3b82f6;--c-pay:#10b981;--c-del:#6366f1;
  --c-sch:#f59e0b;--c-par:#f97316;--c-src:#14b8a6;
  --c-fac:#8b5cf6;--c-mkt:#ec4899;
  /* chip */
  --ch-g-bg:#d1fae5;--ch-g:#059669;
  --ch-b-bg:#dbeafe;--ch-b:#2563eb;
  --ch-i-bg:#e0e7ff;--ch-i:#4338ca;
}

body{background:#fff;overflow-x:hidden}

/* ══ NAV ══ */
.tp01__nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #e5e7eb;
  height:64px;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;

      position: fixed;
    width: 100%;
    background: none;
}
.tp01__logo{
  display:flex;align-items:center;gap:9px;
  font-size:20px;font-weight:800;color:var(--txt);text-decoration:none;
}
.tp01__nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin-bottom: initial;}
.tp01__nav-links a{
  font-size:14px;font-weight:500;color:#6b7280;
  text-decoration:none;transition:color .2s;
}
.tp01__nav-links a:hover,.tp01__nav-links a.active{color:var(--accent)}
.tp01__nav-btn{
  background:var(--accent);color:#fff;border:none;
  border-radius:50px;padding:10px 26px;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:background .2s,transform .15s;
}
.tp01__nav-btn:hover{background:#2a47e0;transform:translateY(-1px)}

/* burger */
.tp01__burger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;width:40px;height:40px;
  background:none;border:none;cursor:pointer;padding:8px;z-index:301;
}
.tp01__burger span{
  display:block;width:22px;height:2px;
  background:var(--txt);border-radius:2px;
  transition:transform .38s cubic-bezier(.77,0,.18,1),opacity .22s;
}
.tp01__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tp01__burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.tp01__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══ PREMIUM LIGHT MOBILE MENU ══ */
.tp01__mob{
  position:fixed;inset:0;z-index:300;
  background:#f8f9fc;
  transform:translateX(100%);
  transition:transform .48s cubic-bezier(.77,0,.18,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.tp01__mob.open{transform:translateX(0)}

/* subtle top gradient accent */
.tp01__mob::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#6366f1,#10b981);
  z-index:1;
}

/* faint geometric accent top-right */
.tp01__mob-geo{
  position:absolute;top:-60px;right:-60px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,91,255,.07) 0%,transparent 70%);
  pointer-events:none;
}
.tp01__mob-geo2{
  position:absolute;bottom:-40px;left:-40px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%);
  pointer-events:none;
}

/* topbar inside menu */
.tp01__mob-bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:64px;
  border-bottom:1px solid #e8eaf0;
}
.tp01__mob-bar-logo{
  display:flex;align-items:center;gap:8px;
  font-size:18px;font-weight:800;color:var(--txt);
}
.tp01__mob-close{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid #e0e4ef;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#6b7280;
  transition:border-color .2s,color .2s,background .2s,transform .25s;
  flex-shrink:0;
}
.tp01__mob-close:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(59,91,255,.06);
  transform:rotate(90deg);
}

.tp01__mob-inner{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;
  padding:36px 28px 44px;
}

.tp01__mob-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#b0b8cc;
  margin-bottom:28px;
}

/* nav items */
.tp01__mob-links{list-style:none;flex:1}
.tp01__mob-links li{
  border-bottom:1px solid #eaecf2;
  opacity:0;transform:translateX(20px);
  transition:opacity .38s,transform .38s;
}
.tp01__mob.open .tp01__mob-links li:nth-child(1){transition-delay:.14s}
.tp01__mob.open .tp01__mob-links li:nth-child(2){transition-delay:.21s}
.tp01__mob.open .tp01__mob-links li:nth-child(3){transition-delay:.28s}
.tp01__mob.open .tp01__mob-links li{opacity:1;transform:translateX(0)}

.tp01__mob-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
  font-size:24px;font-weight:700;letter-spacing:-.03em;
  color:#1f2937;text-decoration:none;
  transition:color .2s;
}
.tp01__mob-links a:hover{color:var(--accent)}
.tp01__mob-links a.active{color:var(--accent)}

.tp01__mob-arrow{
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid #e0e4ef;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#9ca3af;flex-shrink:0;
  transition:border-color .2s,color .2s,background .2s,transform .2s;
}
.tp01__mob-links a:hover .tp01__mob-arrow,
.tp01__mob-links a.active .tp01__mob-arrow{
  border-color:var(--accent);color:var(--accent);
  background:rgba(59,91,255,.06);
  transform:rotate(-30deg);
}
.tp01__mob-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:10px;
  vertical-align:middle;margin-bottom:2px;
}

/* footer */
.tp01__mob-footer{
  opacity:0;transform:translateY(14px);
  transition:opacity .38s .38s,transform .38s .38s;
}
.tp01__mob.open .tp01__mob-footer{opacity:1;transform:translateY(0)}

.tp01__mob-cta{
  display:block;width:100%;
  background:var(--accent);color:#fff;
  border:none;border-radius:14px;padding:17px 28px;
  font-size:15px;font-weight:700;cursor:pointer;
  letter-spacing:-.01em;
  box-shadow:0 6px 28px rgba(59,91,255,.28);
  transition:background .2s,transform .15s;
}
.tp01__mob-cta:hover{background:#2a47e0;transform:translateY(-1px)}

.tp01__mob-badges{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:18px;
}
.tp01__mob-tag{
  background:#fff;border:1px solid #e5e7eb;border-radius:50px;
  padding:5px 12px;font-size:11px;font-weight:500;color:#6b7280;
}

/* ══ SECTION ══ */
.tp01__section{background:var(--bg);padding:72px 0 80px;overflow:hidden}

.tp01__hero{text-align:center;padding:0 16px;margin-bottom:56px}
.tp01__badge{
  display:inline-block;background:#fff;
  border:1px solid #e5e7eb;border-radius:50px;
  padding:7px 18px;font-size:13px;font-weight:500;color:#6b7280;
  margin-bottom:24px;
}
.tp01__title{
  font-size:clamp(34px,6vw,60px);font-weight:800;
  color:var(--txt);line-height:1.1;margin-bottom:20px;
}
.tp01__desc{
  font-size:clamp(14px,2vw,16px);color:var(--muted);
  line-height:1.65;max-width:540px;margin:0 auto;
}

/* ── CAROUSEL ── */
.tp01__co{
  position:relative;
  /* stop overflow leaking */
  overflow:hidden;
}

/* fade + blur masks */
.tp01__co::before,.tp01__co::after{
  content:'';position:absolute;top:0;bottom:0;
  width:clamp(56px,10vw,140px);z-index:2;pointer-events:none;
}
.tp01__co::before{
  left:0;
  background:linear-gradient(to right,var(--bg) 20%,transparent 100%);
}
.tp01__co::after{
  right:0;
  background:linear-gradient(to left,var(--bg) 20%,transparent 100%);
}

/* each row is a separate infinite strip */
.tp01__row-wrap{
  display:flex;              /* single horizontal line */
  gap:var(--gap);
  width:max-content;
  padding:6px 0;
  /* will be animated by JS */
  will-change:transform;
  cursor:grab;
}
.tp01__row-wrap:active{cursor:grabbing}
.tp01__row-wrap+.tp01__row-wrap{margin-top:var(--gap)}

/* card */
.tp01__card{
  background:var(--card);border-radius:var(--r);
  padding:26px 22px 22px;
  flex:0 0 var(--card-w);width:var(--card-w);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .3s,box-shadow .3s,filter .35s,opacity .35s;
  user-select:none;
}
/* edge blur applied by JS */
.tp01__card.blur{
  filter:blur(3px);opacity:.48;pointer-events:none;
}
.tp01__card:not(.blur):hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.09);
}

.tp01__card-tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tp01__card-title{font-size:16.5px;font-weight:700;color:var(--txt);line-height:1.3;flex:1}
.tp01__card-chip{
  display:inline-flex;align-items:center;
  border-radius:50px;padding:5px 12px;
  font-size:11px;font-weight:600;align-self:flex-start;
}
.chip-g{background:var(--ch-g-bg);color:var(--ch-g)}
.chip-b{background:var(--ch-b-bg);color:var(--ch-b)}
.chip-i{background:var(--ch-i-bg);color:var(--ch-i)}

.t-fin{color:var(--c-fin)}.t-pay{color:var(--c-pay)}.t-del{color:var(--c-del)}
.t-sch{color:var(--c-sch)}.t-par{color:var(--c-par)}.t-src{color:var(--c-src)}
.t-fac{color:var(--c-fac)}.t-mkt{color:var(--c-mkt)}

/* ══ RESPONSIVE ══ */
@media(max-width:991px){
  .tp01__nav-links,.tp01__nav-btn{display:none}
  .tp01__burger{display:flex}
}
@media(max-width:575px){
  :root{--card-w:calc((100vw - 60px)/2)}
  .tp01__section{padding:48px 0 56px}
  .tp01__hero{margin-bottom:36px}
  .tp01__card{padding:15px 13px 13px}
  .tp01__card-title{font-size:13px}
  .tp01__card-tag{font-size:9px}
  .tp01__co::before,.tp01__co::after{width:28px}
}