
/* Lavio V12 service hub + SaaS panel polish */
:root{--v12-blue:#0077ff;--v12-sky:#00a8ff;--v12-ink:#07111f;--v12-muted:#64748b;--v12-line:#deebfb;--v12-soft:#f5f9ff;--v12-green:#10b981;}
.v12-wrap{background:linear-gradient(180deg,#fff 0%,#f7fbff 50%,#fff 100%)}
.v12-hero{padding:96px 0 54px;border-bottom:1px solid var(--v12-line);background:radial-gradient(circle at 50% 0%,rgba(0,119,255,.08),transparent 36%)}
.v12-eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe6ff;background:#eef7ff;color:#0067e8;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:950}.v12-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--v12-blue);box-shadow:0 0 0 5px rgba(0,119,255,.10)}
.v12-hero h1{max-width:920px;margin:18px 0 16px;font-size:clamp(42px,6vw,86px);line-height:.96;letter-spacing:-.075em;color:var(--v12-ink)}
.v12-hero p{max-width:760px;color:var(--v12-muted);font-size:18px;line-height:1.65;font-weight:700}.v12-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.v12-btn{height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--v12-line);background:#fff;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;font-weight:950;text-decoration:none;box-shadow:0 12px 30px rgba(15,23,42,.045)}.v12-btn.primary{background:#07111f;color:#fff;border-color:#07111f}.v12-btn.blue{background:linear-gradient(135deg,var(--v12-blue),var(--v12-sky));color:#fff;border:0}
.v12-section{padding:82px 0}.v12-section.soft{background:#f6faff;border-top:1px solid var(--v12-line);border-bottom:1px solid var(--v12-line)}.v12-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}.v12-head h2{font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.07em;margin:10px 0 0;color:var(--v12-ink)}.v12-head p{max-width:570px;color:var(--v12-muted);font-weight:700;line-height:1.55;margin:0}
.v12-service-shell{display:grid;grid-template-columns:310px 1fr;gap:24px;align-items:start}.v12-service-nav{position:sticky;top:100px;background:#fff;border:1px solid var(--v12-line);border-radius:30px;padding:14px;box-shadow:0 20px 60px rgba(15,23,42,.055);display:grid;gap:8px}.v12-service-tab{border:0;background:transparent;border-radius:20px;padding:14px 13px;display:grid;grid-template-columns:36px 1fr;align-items:center;text-align:left;gap:12px;cursor:pointer;color:#334155;font-weight:900}.v12-service-tab img{width:24px;height:24px}.v12-service-tab span{display:block;font-size:13px;color:#7a8799;font-weight:800;margin-top:2px}.v12-service-tab.active{background:#eef6ff;color:#005dd6;box-shadow:inset 0 0 0 1px rgba(0,119,255,.08)}
.v12-service-stage{min-height:680px}.v12-service-detail{display:none;animation:v12Fade .22s ease}.v12-service-detail.active{display:block}.v12-panel{background:#fff;border:1px solid var(--v12-line);border-radius:34px;box-shadow:0 22px 70px rgba(15,23,42,.06);overflow:hidden}.v12-panel-top{padding:30px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;border-bottom:1px solid var(--v12-line);background:linear-gradient(135deg,#fff,#f5faff)}.v12-panel h3{font-size:44px;line-height:.98;letter-spacing:-.065em;margin:10px 0 12px;color:var(--v12-ink)}.v12-panel p{color:var(--v12-muted);line-height:1.6;font-weight:700;margin:0}.v12-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.v12-chip{height:32px;padding:0 10px;border-radius:999px;background:#eef6ff;color:#0067e8;display:inline-flex;align-items:center;font-size:12px;font-weight:950}.v12-flow-card{border:1px solid var(--v12-line);background:#fff;border-radius:28px;padding:20px;box-shadow:0 18px 50px rgba(15,23,42,.06)}.v12-mini-flow{display:grid;gap:11px}.v12-mini-step{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center}.v12-mini-step b{width:40px;height:40px;border-radius:14px;background:#eef6ff;color:#0077ff;display:flex;align-items:center;justify-content:center}.v12-mini-step strong{display:block;color:var(--v12-ink)}.v12-mini-step small{display:block;color:#66758b;font-weight:750;margin-top:3px}.v12-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px}.v12-box{background:#f8fbff;border:1px solid var(--v12-line);border-radius:26px;padding:22px}.v12-box h4{font-size:24px;line-height:1.05;letter-spacing:-.05em;margin:0 0 14px;color:var(--v12-ink)}.v12-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.v12-list li{color:#536174;font-weight:760;line-height:1.38}.v12-list li:before{content:"✓";color:#0077ff;margin-right:8px;font-weight:950}.v12-output-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 24px 24px}.v12-output{background:#fff;border:1px solid var(--v12-line);border-radius:22px;padding:16px;color:#0f172a;font-weight:900;box-shadow:0 12px 30px rgba(15,23,42,.04)}.v12-bottom-cta{padding:22px 24px;background:#07111f;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px}.v12-bottom-cta b{font-size:20px}.v12-bottom-cta span{color:#cbd5e1;font-weight:700}
.v12-map{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.v12-map-card{background:#fff;border:1px solid var(--v12-line);border-radius:28px;padding:22px;box-shadow:0 18px 55px rgba(15,23,42,.055)}.v12-map-card img{width:34px;height:34px;margin-bottom:16px}.v12-map-card h3{font-size:21px;letter-spacing:-.04em;margin:0 0 8px;color:var(--v12-ink)}.v12-map-card p{color:var(--v12-muted);line-height:1.5;font-weight:700;margin:0}.v12-map-card:hover{transform:translateY(-4px);transition:.2s;box-shadow:0 28px 80px rgba(0,119,255,.10);border-color:#badbff}
/* SaaS */
.v12-saas-hero{padding:96px 0 70px;background:radial-gradient(circle at 50% 0%,rgba(0,119,255,.10),transparent 38%),linear-gradient(180deg,#fff,#f8fbff);border-bottom:1px solid var(--v12-line)}.v12-saas-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.v12-saas-hero h1{font-size:clamp(42px,6vw,80px);line-height:.97;letter-spacing:-.075em;margin:18px 0;color:var(--v12-ink)}.v12-saas-hero p{font-size:18px;line-height:1.65;color:var(--v12-muted);font-weight:700}.v12-dashboard{background:#fff;border:1px solid var(--v12-line);border-radius:34px;box-shadow:0 30px 90px rgba(15,23,42,.10);overflow:hidden}.v12-dash-top{height:56px;border-bottom:1px solid var(--v12-line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.v12-dots{display:flex;gap:7px}.v12-dots i{width:10px;height:10px;border-radius:50%;background:#cbd5e1}.v12-dash-top b{color:var(--v12-ink)}.v12-status{height:28px;padding:0 10px;border-radius:999px;background:#e9fff4;color:#0d915f;font-size:12px;font-weight:950;display:flex;align-items:center}.v12-dash-body{display:grid;grid-template-columns:160px 1fr;padding:0}.v12-dash-menu{border-right:1px solid var(--v12-line);padding:16px;background:#fbfdff;display:grid;gap:8px}.v12-dash-menu span{height:44px;border-radius:15px;background:#f1f6ff;display:flex;align-items:center;padding:0 12px;color:#536174;font-weight:850}.v12-dash-menu span.active{background:#e6f2ff;color:#0067e8}.v12-dash-main{padding:18px}.v12-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.v12-kpi{border:1px solid var(--v12-line);border-radius:20px;padding:14px;background:#f8fbff}.v12-kpi b{display:block;font-size:28px;letter-spacing:-.05em;color:var(--v12-ink)}.v12-kpi span{color:#66758b;font-size:12px;font-weight:850}.v12-pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.v12-pipe{min-height:116px;border:1px solid var(--v12-line);border-radius:18px;background:#fff;padding:12px}.v12-pipe h4{margin:0 0 8px;font-size:13px;color:#334155}.v12-pill-line{height:32px;border-radius:11px;background:#eef6ff;margin-bottom:8px}.v12-pill-line.blue{background:#dbeafe}.v12-pill-line.green{background:#dcfce7}.v12-saas-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.v12-saas-card{background:#fff;border:1px solid var(--v12-line);border-radius:28px;padding:24px;box-shadow:0 18px 55px rgba(15,23,42,.055)}.v12-saas-card h3{font-size:24px;letter-spacing:-.05em;color:var(--v12-ink);margin:0 0 10px}.v12-saas-card p{color:#64748b;line-height:1.55;font-weight:700}.v12-roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.v12-road{background:#fff;border:1px solid var(--v12-line);border-radius:26px;padding:20px}.v12-road b{width:42px;height:42px;border-radius:14px;background:#07111f;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}.v12-road h3{font-size:19px;margin:0 0 8px;color:var(--v12-ink)}.v12-road p{color:#64748b;font-weight:700;line-height:1.5}.v12-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.v12-compare .bad,.v12-compare .good{border-radius:30px;padding:26px;border:1px solid var(--v12-line)}.v12-compare .bad{background:#fff7f7}.v12-compare .good{background:#f3fbff}.v12-compare h3{font-size:28px;letter-spacing:-.05em;margin:0 0 16px;color:var(--v12-ink)}
@keyframes v12Fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-theme="dark"] .v12-wrap,[data-theme="dark"] .v12-hero,[data-theme="dark"] .v12-saas-hero{background:#07111f}[data-theme="dark"] .v12-panel,[data-theme="dark"] .v12-service-nav,[data-theme="dark"] .v12-map-card,[data-theme="dark"] .v12-dashboard,[data-theme="dark"] .v12-saas-card,[data-theme="dark"] .v12-road,[data-theme="dark"] .v12-box{background:#111827;border-color:rgba(255,255,255,.10)}[data-theme="dark"] .v12-hero h1,[data-theme="dark"] .v12-head h2,[data-theme="dark"] .v12-panel h3,[data-theme="dark"] .v12-box h4,[data-theme="dark"] .v12-map-card h3,[data-theme="dark"] .v12-saas-hero h1,[data-theme="dark"] .v12-saas-card h3,[data-theme="dark"] .v12-road h3,[data-theme="dark"] .v12-kpi b{color:#fff}[data-theme="dark"] .v12-hero p,[data-theme="dark"] .v12-head p,[data-theme="dark"] .v12-panel p,[data-theme="dark"] .v12-list li,[data-theme="dark"] .v12-map-card p,[data-theme="dark"] .v12-saas-hero p,[data-theme="dark"] .v12-saas-card p,[data-theme="dark"] .v12-road p{color:#b6c3d6}
@media(max-width:1100px){.v12-service-shell,.v12-saas-grid,.v12-panel-top,.v12-compare{grid-template-columns:1fr}.v12-service-nav{position:relative;top:0;grid-template-columns:repeat(2,1fr)}.v12-content-grid,.v12-output-grid,.v12-map,.v12-saas-cards,.v12-roadmap{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.v12-service-nav,.v12-content-grid,.v12-output-grid,.v12-map,.v12-saas-cards,.v12-roadmap,.v12-kpis,.v12-pipeline{grid-template-columns:1fr}.v12-bottom-cta{display:block}.v12-dash-body{grid-template-columns:1fr}.v12-dash-menu{border-right:0;border-bottom:1px solid var(--v12-line)}}


/* === Lavio V13 service scenario system === */
.v13-scenarios{
  padding:76px 0;
  background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
  border-top:1px solid #e3ecf8;
}
.v13-scenarios .scenario-head{
  max-width:860px;
  margin:0 auto 34px;
  text-align:center;
}
.v13-scenarios .scenario-head .pill{
  margin-bottom:14px;
}
.v13-scenarios h2{
  margin:0;
  font-size:clamp(34px,5vw,62px);
  letter-spacing:-.065em;
  line-height:.94;
  color:#07111f;
}
.v13-scenarios .scenario-head p{
  margin:18px auto 0;
  max-width:760px;
  color:#66758b;
  font-size:18px;
  line-height:1.6;
  font-weight:650;
}
.v13-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.v13-card{
  position:relative;
  background:#fff;
  border:1px solid #dfe9f7;
  border-radius:30px;
  padding:24px;
  box-shadow:0 18px 55px rgba(15,23,42,.055);
  overflow:hidden;
}
.v13-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#0077ff,#00a8ff);
}
.v13-card .mini-label{
  display:inline-flex;
  height:30px;
  padding:0 12px;
  align-items:center;
  border-radius:999px;
  background:#eaf4ff;
  color:#0077ff;
  font-weight:950;
  font-size:12px;
}
.v13-card h3{
  margin:16px 0 12px;
  color:#07111f;
  font-size:24px;
  letter-spacing:-.045em;
  line-height:1.08;
}
.v13-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #eef3fb;
}
.v13-block b{
  display:block;
  color:#07111f;
  font-size:13px;
  margin-bottom:7px;
}
.v13-block p{
  margin:0;
  color:#66758b;
  font-size:14px;
  line-height:1.55;
  font-weight:650;
}
.v13-flow{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
}
.v13-flow li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  color:#5f6f86;
  font-size:14px;
  line-height:1.35;
  font-weight:750;
}
.v13-flow li:before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  background:#e8f3ff;
  border:1px solid #b9dcff;
  margin-top:1px;
}
.v13-result{
  margin-top:18px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg,#07111f,#101827);
  color:#fff;
}
.v13-result b{
  color:#fff;
}
.v13-result p{
  color:#d6deeb;
}
.v13-usecases{
  margin-top:22px;
  background:#fff;
  border:1px solid #dfe9f7;
  border-radius:30px;
  padding:24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  box-shadow:0 18px 55px rgba(15,23,42,.045);
}
.v13-usecases h3{
  margin:0 0 8px;
  color:#07111f;
  font-size:28px;
  letter-spacing:-.05em;
}
.v13-usecases p{
  margin:0;
  color:#66758b;
  font-weight:650;
  line-height:1.55;
}
.v13-usecases .cta-dark{
  white-space:nowrap;
}
[data-theme="dark"] .v13-scenarios{
  background:linear-gradient(180deg,#0b1220,#101827);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .v13-card,
[data-theme="dark"] .v13-usecases{
  background:#111827;
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .v13-card h3,
[data-theme="dark"] .v13-scenarios h2,
[data-theme="dark"] .v13-block b,
[data-theme="dark"] .v13-usecases h3{
  color:#fff;
}
[data-theme="dark"] .v13-card p,
[data-theme="dark"] .v13-flow li,
[data-theme="dark"] .v13-scenarios .scenario-head p,
[data-theme="dark"] .v13-usecases p{
  color:#a9b6ca;
}
@media(max-width:1050px){
  .v13-grid{grid-template-columns:1fr}
  .v13-usecases{grid-template-columns:1fr}
}
