/* Credanta V97 — clarity carousel
   Desktop: editorial intro + contained interactive rail.
   Mobile: swipe-first carousel with a visible next card. */
:root{
  --p97-navy:#12295d;
  --p97-navy-2:#1a3975;
  --p97-copy:#4d6382;
  --p97-orange:#ee7548;
  --p97-orange-2:#df643b;
  --p97-bg:#eef4f7;
  --p97-line:rgba(18,41,93,.10);
}

.principles-v97{
  position:relative;
  overflow:hidden;
  padding:84px 0 90px;
  background:
    radial-gradient(circle at 93% 8%,rgba(238,117,72,.08),transparent 22%),
    radial-gradient(circle at 5% 92%,rgba(88,177,204,.08),transparent 20%),
    linear-gradient(180deg,#eef4f7 0%,#f5f8fa 100%);
}
.principles-v97::before{
  content:"";
  position:absolute;
  right:-110px;
  top:-95px;
  width:290px;
  height:290px;
  border-radius:50%;
  border:1px solid rgba(18,41,93,.045);
  pointer-events:none;
}
.principles-v97-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:62px;
  align-items:center;
}

/* Left editorial block */
.principles-v97-intro{min-width:0}
.principles-v97-intro .section-tag{margin-bottom:15px}
.principles-v97-intro h2{
  max-width:11.8ch;
  margin:0;
  color:var(--p97-navy);
  font-size:clamp(36px,3.15vw,42px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:810;
}
.principles-v97-lead{
  max-width:31ch;
  margin:18px 0 0;
  color:var(--p97-copy);
  font-size:15.8px;
  line-height:1.58;
}
.principles-v97-nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
}
.principles-v97-drag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--p97-line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#536985;
  font-size:12px;
  line-height:1;
  font-weight:760;
  box-shadow:0 7px 18px rgba(18,41,93,.04);
}
.principles-v97-drag i{font-style:normal;color:var(--p97-orange);font-size:17px}
.principles-v97-buttons{display:flex;gap:8px}
.principles-v97-control{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(18,41,93,.11);
  border-radius:50%;
  background:#fff;
  color:var(--p97-navy);
  box-shadow:0 8px 20px rgba(18,41,93,.055);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,opacity .18s ease;
}
.principles-v97-control:hover:not(:disabled){transform:translateY(-2px);background:var(--p97-navy);color:#fff}
.principles-v97-control:disabled{opacity:.34;cursor:default}
.principles-v97-status{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
}
.principles-v97-count{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:var(--p97-navy);
  white-space:nowrap;
}
.principles-v97-count b{font-size:18px;line-height:1;font-weight:820}
.principles-v97-count i{font-size:11px;font-style:normal;opacity:.35}
.principles-v97-count em{font-size:11px;font-style:normal;font-weight:750;opacity:.55}
.principles-v97-progress{
  width:150px;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(18,41,93,.10);
}
.principles-v97-progress span{
  display:block;
  width:25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--p97-orange),#f39a77);
  transition:width .22s ease;
}

/* Right interactive panel */
.principles-v97-stage{
  min-width:0;
  padding:18px 0 16px 20px;
  border:1px solid rgba(18,41,93,.08);
  border-radius:30px;
  background:rgba(255,255,255,.52);
  box-shadow:0 22px 60px rgba(18,41,93,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.principles-v97-stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 22px 13px 4px;
  color:#647791;
  font-size:11px;
  line-height:1.2;
  font-weight:760;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.principles-v97-stage-head i{font-style:normal;color:#8b9ab0;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none}
.principles-v97-viewport{overflow:hidden;border-radius:24px 0 0 24px}
.principles-v97-rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 24px 10px 2px;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}
.principles-v97-rail::-webkit-scrollbar{display:none}
.principles-v97-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}

.principles-v97-card{
  position:relative;
  flex:0 0 clamp(280px,30vw,325px);
  min-height:330px;
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  scroll-snap-align:start;
  border-radius:24px;
  border:1px solid rgba(18,41,93,.09);
  box-shadow:0 15px 34px rgba(18,41,93,.07);
  transform:scale(.97);
  opacity:.84;
  transition:transform .28s ease,opacity .28s ease,box-shadow .28s ease;
}
.principles-v97-card::before{
  content:"";
  position:absolute;
  right:-58px;
  top:-58px;
  width:155px;
  height:155px;
  border-radius:50%;
  pointer-events:none;
}
.principles-v97-card.is-active{
  transform:scale(1);
  opacity:1;
  box-shadow:0 22px 42px rgba(18,41,93,.11);
}
.principles-v97-card.is-navy{background:linear-gradient(145deg,#142c62,#1b3b78);color:#fff;border-color:rgba(255,255,255,.08)}
.principles-v97-card.is-navy::before{background:rgba(255,255,255,.055)}
.principles-v97-card.is-cream{background:linear-gradient(180deg,#fff,#fffaf7);color:var(--p97-navy);border-color:rgba(238,117,72,.14)}
.principles-v97-card.is-cream::before{background:rgba(238,117,72,.09)}
.principles-v97-card.is-orange{background:linear-gradient(145deg,#ef7a4d,#dd704a);color:#fff;border-color:rgba(255,255,255,.10)}
.principles-v97-card.is-orange::before{background:rgba(255,255,255,.08)}
.principles-v97-card.is-sky{background:linear-gradient(180deg,#f8fcfd,#eef7fa);color:var(--p97-navy);border-color:rgba(87,177,205,.15)}
.principles-v97-card.is-sky::before{background:rgba(87,177,205,.10)}

.principles-v97-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.principles-v97-card-top>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.04em;
}
.is-navy .principles-v97-card-top>span,.is-orange .principles-v97-card-top>span{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.09)}
.is-cream .principles-v97-card-top>span,.is-sky .principles-v97-card-top>span{border:1px solid rgba(238,117,72,.16);background:#fff2ec;color:var(--p97-orange-2)}
.principles-v97-card-top small{font-size:10px;line-height:1;font-weight:800;letter-spacing:.10em;text-transform:uppercase;opacity:.64}
.principles-v97-card-main{position:relative;z-index:1;margin:34px 0 auto}
.principles-v97-question{max-width:12ch;margin:0;font-size:26px;line-height:1.08;letter-spacing:-.03em;font-weight:810}
.principles-v97-answer{max-width:29ch;margin:15px 0 0;font-size:14.5px;line-height:1.52;opacity:.80}
.principles-v97-card-foot{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:36px;
  padding-top:14px;
  border-top:1px solid rgba(18,41,93,.14);
}
.principles-v97-card-foot span{font-size:12px;line-height:1.2;font-weight:760;opacity:.88}
.principles-v97-card-foot i{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-style:normal;
  font-size:15px;
  font-weight:850;
}
.is-navy .principles-v97-card-foot i,.is-orange .principles-v97-card-foot i{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09)}
.is-cream .principles-v97-card-foot i,.is-sky .principles-v97-card-foot i{border:1px solid rgba(238,117,72,.14);background:#fff0e9;color:var(--p97-orange)}

@media (hover:hover) and (pointer:fine){
  .principles-v97-card:hover{transform:translateY(-4px) scale(1);opacity:1;box-shadow:0 24px 48px rgba(18,41,93,.11)}
}

@media (max-width:1050px){
  .principles-v97{padding:74px 0 80px}
  .principles-v97-shell{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:42px}
  .principles-v97-intro h2{font-size:37px}
  .principles-v97-card{flex-basis:300px;min-height:318px}
}

@media (max-width:820px){
  .principles-v97-shell{grid-template-columns:1fr;gap:28px}
  .principles-v97-intro{max-width:620px}
  .principles-v97-intro h2{max-width:15ch;font-size:35px}
  .principles-v97-lead{max-width:48ch}
  .principles-v97-nav{margin-top:20px}
  .principles-v97-status{margin-top:18px}
  .principles-v97-stage{padding-top:15px}
}

@media (max-width:620px){
  .principles-v97{padding:56px 0 62px}
  .principles-v97-shell{width:calc(100% - 28px);gap:24px}
  .principles-v97-intro .section-tag{margin-bottom:12px}
  .principles-v97-intro h2{font-size:30px;line-height:1.09;letter-spacing:-.032em}
  .principles-v97-lead{margin-top:14px;font-size:15.2px;line-height:1.52}
  .principles-v97-nav{justify-content:space-between;margin-top:18px}
  .principles-v97-drag{min-height:39px;font-size:11.5px}
  .principles-v97-control{width:39px;height:39px;font-size:17px}
  .principles-v97-status{margin-top:15px}
  .principles-v97-stage{
    margin-right:-14px;
    padding:14px 0 12px 14px;
    border-radius:24px 0 0 24px;
  }
  .principles-v97-stage-head{padding:0 18px 11px 2px;font-size:10px}
  .principles-v97-stage-head i{display:none}
  .principles-v97-viewport{border-radius:19px 0 0 19px}
  .principles-v97-rail{gap:11px;padding-right:18px}
  .principles-v97-card{
    flex-basis:min(82vw,310px);
    min-height:300px;
    padding:18px 18px 16px;
    border-radius:21px;
  }
  .principles-v97-card-main{margin-top:29px}
  .principles-v97-question{font-size:24px}
  .principles-v97-answer{font-size:14.3px}
  .principles-v97-card-foot{margin-top:30px}
}

@media (max-width:390px){
  .principles-v97-shell{width:calc(100% - 24px)}
  .principles-v97-intro h2{font-size:29px}
  .principles-v97-card{flex-basis:82vw;min-height:292px}
}

@media (prefers-reduced-motion:reduce){
  .principles-v97-card,.principles-v97-control,.principles-v97-progress span{transition:none}
}

.is-navy .principles-v97-card-foot,.is-orange .principles-v97-card-foot{border-top-color:rgba(255,255,255,.22)}

/* V185 responsive hardening: keep the swipe rail internal to the section. */
@media (max-width:620px){
  .principles-v97{overflow-x:hidden}
}
@media (max-width:390px){
  .principles-v97-stage{margin-right:0}
}