/* ============================================================
   Servi landing v2 — components (loads after styles.css)
   Dashboard mock (on dark scene), use cards, band, lang, calculator.
   ============================================================ */

/* ---------- language switcher ---------- */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--pill);
  background:var(--sand);border:1px solid var(--line)}
.lang__btn{border:none;background:transparent;color:var(--faint);font:inherit;font-size:.78rem;
  font-weight:600;padding:5px 11px;border-radius:var(--pill);cursor:pointer;transition:.2s}
.lang__btn:hover:not(.is-active){color:var(--ink)}
.lang__btn.is-active{background:var(--white);color:var(--palm);box-shadow:var(--sh-sm)}
@media (max-width:560px){.lang__btn{padding:5px 9px;font-size:.74rem}}

/* ---------- dashboard block (dark scene) ---------- */
.dash-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center}
.dash-copy h2{color:#fff;margin-bottom:16px}
.dash-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.dash-list li{position:relative;padding-left:28px;color:#C9DCD1;font-size:.98rem}
.dash-list li strong{color:#fff;font-weight:600}
.dash-list li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:9px;
  border-left:2.4px solid var(--gold);border-bottom:2.4px solid var(--gold);transform:rotate(-45deg)}

.hero-dash{position:relative;justify-self:end;width:100%;max-width:470px}
/* the mock is a bright white card, pops on the dark scene */
.dash-mock{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh-lg);padding:20px;color:var(--ink)}
.dash-bar{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.dash-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.dash-bar em{margin-left:10px;font-style:normal;font-size:.85rem;color:var(--faint);font-weight:500}
.live-badge{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--teal);font-weight:600}
.live-badge .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.live-badge .pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--teal);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.7);opacity:0}}

.branch-tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.branch-tab{height:30px;padding:0 13px;border-radius:9px;border:1px solid var(--line);background:var(--cream);
  font:inherit;font-size:.82rem;font-weight:500;color:var(--faint);cursor:pointer;transition:.2s}
.branch-tab:hover{color:var(--ink)}
.branch-tab.active{background:linear-gradient(135deg,var(--coral),var(--gold));border-color:transparent;color:#fff}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dash-stats div{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.dash-stats strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.7rem;color:var(--ink)}
.dash-stats span{font-size:.74rem;color:var(--faint)}
.feed-label{font-size:.76rem;color:var(--faint);margin-bottom:10px;font-weight:500}
.dash-rows{list-style:none;display:flex;flex-direction:column;gap:8px}
.dash-rows li{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--cream);
  border:1px solid var(--line);border-radius:12px;transition:background .6s,border-color .6s}
.dash-rows li.enter{animation:rowin .5s var(--spring)}
.dash-rows li.fresh{background:var(--gold-tint);border-color:var(--gold)}
@keyframes rowin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.dash-rows .t{font-family:var(--font-display);font-weight:600;color:var(--coral-600);width:46px}
.dash-rows .n{flex:1;font-size:.9rem;color:var(--ink)}
.dash-rows .s{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:var(--pill);
  background:var(--palm-tint);color:var(--palm)}
.dash-rows .s.new{background:var(--gold-tint);color:var(--gold-600)}

.floating-chip{position:absolute;left:-20px;bottom:-24px;z-index:6;max-width:250px;padding:12px 15px;
  border-radius:16px;border-bottom-left-radius:5px;font-size:.84rem;color:var(--ink);line-height:1.4;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh);animation:floaty 4.5s var(--ease) infinite}
.floating-chip small{display:block;color:var(--coral-600);font-size:.7rem;margin-bottom:3px;font-weight:600}
.floating-chip strong{color:var(--ink);font-weight:600}

/* ---------- image band (lighter, warmer treatment) ---------- */
.band-img{position:relative;isolation:isolate;background-size:cover;background-position:center;margin:0}
.band-img::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1e5f46,#f0623d);
  mix-blend-mode:color;opacity:.72}
.band-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,59,43,.42),rgba(18,59,43,.72))}
.band-img__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,12vw,150px) 28px;text-align:center}
.band-img__line{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.6vw,3.3rem);
  line-height:1.04;letter-spacing:-.02em;color:#fff;max-width:20ch;margin:0 auto}
.band-img__sub{margin:16px auto 0;max-width:52ch;color:rgba(255,255,255,.85);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6}

/* ---------- use cases ---------- */
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.use{padding:0;overflow:hidden;display:flex;flex-direction:column}
.use__img{height:172px;position:relative;isolation:isolate;background-size:cover;background-position:center}
.use__img.duo::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1e5f46,#f0623d);
  mix-blend-mode:color;opacity:.5}
.use__img.duo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(18,59,43,.5))}
.use__body{padding:24px;position:relative}
.use__body h3{color:var(--ink);margin-bottom:10px} .use__body p{color:var(--ink-2);font-size:.94rem;line-height:1.5}
.use .tag{position:absolute;top:-14px;right:20px;left:auto}
.use-chat{display:block;margin-top:16px;padding:11px 14px;border-radius:13px;border-bottom-left-radius:5px;
  font-size:.86rem;color:var(--palm);background:var(--palm-tint);border:1px solid var(--palm-tint)}
.use.featured{border:2px solid var(--gold)}

/* ---------- interactive calculator ---------- */
.calc{background:var(--palm-deep);color:#EAF2EC;position:relative;overflow:hidden}
.calc .eyebrow{color:var(--gold)} .calc .eyebrow::before{background:var(--gold)}
.calc h2{color:#fff} .calc .section-lede{color:#B7CCC0}
.calc__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.calc__copy h2{max-width:15ch}
.calc__panel{padding:30px;background:var(--white)}
.calc__row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;margin-bottom:24px}
.calc__row > span{font-size:.92rem;color:var(--ink-2);font-weight:500}
.calc__row > b{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--palm);
  justify-self:end;min-width:96px;text-align:right}
.calc__row input[type=range]{grid-column:1/3;width:100%;-webkit-appearance:none;appearance:none;height:8px;
  border-radius:var(--pill);background:linear-gradient(90deg,var(--coral),var(--gold));outline:none;margin-top:4px}
.calc__row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--coral);cursor:pointer;box-shadow:var(--sh-sm);transition:transform .15s}
.calc__row input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}
.calc__row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--coral);cursor:pointer}
.calc__out{margin-top:8px;padding:22px;border-radius:16px;background:linear-gradient(135deg,var(--palm),var(--palm-deep));
  color:#EAF2EC;text-align:center}
.calc__out > div:first-child{font-size:.85rem;color:#B7CCC0;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.calc__out strong{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,4vw,2.8rem);color:#fff;margin:6px 0 4px}
.calc__note{font-size:.85rem;color:#9DBBAD}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .dash-wrap{grid-template-columns:1fr}
  .hero-dash{justify-self:start;max-width:440px}
  .use-grid{grid-template-columns:repeat(2,1fr)}
  .calc__in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .use-grid{grid-template-columns:1fr}
  .dash-stats{gap:8px}
  .floating-chip{position:static;margin-top:16px;max-width:none;animation:none}
}