/* ═══════════════════════════════════════════════════
   KEMIS ERP — PRESENTATION v3
   Brand Guide v1.0.0 · 2026
   Blue Vivid #2563EB · Deep Blue Black #0A1124
   Blue Based #1E6FD9 · Neutrals · Safety Green #2ECC8F
   Font: DM Sans (Helvetica Now Display web fallback)
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --blue:       #2563EB;
  --blue-d:     #1E6FD9;
  --deep:       #0A1124;
  --n100:       #F4F5F7;
  --n200:       #E2E4E9;
  --n400:       #9EA3AF;
  --n700:       #3A3F4A;
  --green:      #2ECC8F;
  --white:      #FFFFFF;
  --font:       'DM Sans','Helvetica Now Display',Helvetica,Arial,sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--deep); font-family:var(--font); -webkit-font-smoothing:antialiased; }

/* ── CHROME ── */
#shell { position:fixed; inset:0; display:flex; flex-direction:column; }

#topbar {
  height:46px; min-height:46px; background:var(--deep);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
}
.ctr { font-size:11px; color:rgba(255,255,255,.28); letter-spacing:.06em; }

#viewport { flex:1; position:relative; overflow:hidden; }

.slide { position:absolute; inset:0; }
.slide-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.slide-canvas {
  position:relative; aspect-ratio:16/9;
  width:min(100%, calc(100vh * 16/9)); max-height:100%; overflow:hidden;
}

/* ── NAV ── */
#bottomnav {
  height:52px; min-height:52px; background:var(--deep);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; gap:20px; padding:0 24px;
}
#bottomnav a.nav-btn, #bottomnav span.nav-btn {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  width:40px; height:34px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s; cursor:pointer;
}
#bottomnav a.nav-btn:hover { background:rgba(255,255,255,.18); }
#bottomnav span.nav-btn[aria-disabled="true"] { opacity:.22; cursor:not-allowed; pointer-events:none; }
#dots { display:flex; align-items:center; gap:7px; }
.dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); display:block; cursor:pointer; transition:background .2s; }
.dot.active { background:var(--blue); }
.dot:hover:not(.active) { background:rgba(255,255,255,.5); }

/* ── TOPBAR LOGO ── */
.tb-logo { display:flex; align-items:center; gap:11px; }
.tb-icon { position:relative; width:26px; height:26px; flex-shrink:0; }
.tb-icon .l1 { position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:22%; transform:rotate(-10deg) translate(-1px,1px); }
.tb-icon .l2 { position:absolute; inset:0; background:var(--blue-d); border-radius:22%; transform:rotate(-3deg); }
.tb-icon .l3 { position:absolute; inset:0; background:var(--blue); border-radius:22%; }
.tb-icon .l4 { position:absolute; width:36%; height:36%; top:32%; left:32%; background:rgba(255,255,255,.42); border-radius:25%; }
.tb-name { font-size:13px; font-weight:700; color:#fff; letter-spacing:.1em; }
.tb-sub  { font-size:10px; font-weight:400; color:rgba(255,255,255,.3); letter-spacing:.1em; }

/* ── SLIDE HEADER ── */
.s-header {
  position:absolute; top:0; left:0; right:0; height:9%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; border-bottom:1px solid rgba(0,0,0,.07); z-index:2;
}
.s-header.dark { border-bottom-color:rgba(255,255,255,.07); }
.s-header-lbl { font-size:.8vw; color:var(--n400); letter-spacing:.04em; }
.s-header-lbl.light { color:rgba(255,255,255,.3); }
.sh-logo { display:flex; align-items:center; gap:8px; }
.sh-icon { position:relative; width:20px; height:20px; flex-shrink:0; }
.sh-icon .l1 { position:absolute; inset:0; background:rgba(10,17,36,.08); border-radius:22%; transform:rotate(-10deg) translate(-1px,1px); }
.sh-icon .l2 { position:absolute; inset:0; background:var(--blue-d); border-radius:22%; transform:rotate(-3deg); }
.sh-icon .l3 { position:absolute; inset:0; background:var(--blue); border-radius:22%; }
.sh-icon .l4 { position:absolute; width:36%; height:36%; top:32%; left:32%; background:rgba(255,255,255,.45); border-radius:25%; }
.sh-name { font-size:.82vw; font-weight:700; letter-spacing:.08em; }

/* ── DECORATIVE LAYERS (brand motif) ── */
.deco { position:absolute; pointer-events:none; z-index:0; }
.deco .dr { position:absolute; border-radius:18%; }

/* ── FOOTERS ── */
.blue-footer {
  position:absolute; bottom:0; left:0; right:0; height:17%;
  background:var(--blue); display:flex; align-items:center; padding:0 5%; z-index:2;
}
.deep-footer {
  position:absolute; bottom:0; left:0; right:0; height:17%;
  background:var(--deep); border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; padding:0 5%; z-index:2;
}
/* unified modules footer */
.mod-footer {
  position:absolute; bottom:0; left:0; right:0; height:17%;
  background:var(--deep); border-top:2px solid var(--blue);
  display:flex; align-items:center; padding:0 5%; z-index:2;
  gap:3%;
}
.mod-footer-badge {
  background:var(--blue); color:#fff;
  font-size:.72vw; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:1.5% 2.5%; white-space:nowrap; flex-shrink:0;
}
.mod-footer-text { font-size:.85vw; color:rgba(255,255,255,.55); line-height:1.55; }
.mod-footer-text strong { color:rgba(255,255,255,.85); font-weight:600; }
.footer-text { font-size:.88vw; color:rgba(255,255,255,.62); line-height:1.65; }
.footer-line { display:block; width:32px; height:2px; background:rgba(255,255,255,.35); margin:.5% 0; }
.footer-line.blue { background:var(--blue); }

/* ── KICKER ── */
.kicker {
  font-size:.75vw; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin-bottom:1.2%;
}
.kicker.light { color:rgba(255,255,255,.5); }

/* ── SLIDE NUM ── */
.slide-num { position:absolute; right:2.5%; bottom:1.2%; font-size:.78vw; color:rgba(0,0,0,.14); }
.slide-num.light { color:rgba(255,255,255,.1); }

/* ══════════════════════════════
   SLIDE 1 — CAPA
   ══════════════════════════════ */
#sk1 .slide-canvas { background:var(--deep); }
#sk1 .body { position:absolute; inset:0; display:flex; }

#sk1 .lc {
  width:58%; padding:8% 5% 6% 6%;
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid rgba(255,255,255,.05); z-index:1; position:relative;
}
#sk1 .rc {
  width:42%; padding:7% 5% 6% 5%; z-index:1; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  background:rgba(255,255,255,.02);
}

.cover-icon { position:relative; width:clamp(36px,5vw,52px); height:clamp(36px,5vw,52px); flex-shrink:0; margin-bottom:4%; }
.cover-icon .l1 { position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:22%; transform:rotate(-10deg) translate(-2px,2px); }
.cover-icon .l2 { position:absolute; inset:0; background:var(--blue-d); border-radius:22%; transform:rotate(-3deg); }
.cover-icon .l3 { position:absolute; inset:0; background:var(--blue); border-radius:22%; }
.cover-icon .l4 { position:absolute; width:36%; height:36%; top:32%; left:32%; background:rgba(255,255,255,.42); border-radius:25%; }

#sk1 .wordmark { font-size:clamp(20px,4vw,44px); font-weight:700; color:#fff; letter-spacing:.12em; line-height:1; margin-bottom:.5%; }
#sk1 .tagline-t { font-size:1.85vw; font-weight:700; color:#fff; line-height:1.15; margin-bottom:3%; }
#sk1 .blue-line { width:36px; height:2px; background:var(--blue); margin-bottom:3%; }
#sk1 .desc { font-size:.98vw; font-weight:300; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:5%; }
#sk1 .pills { display:flex; flex-wrap:wrap; gap:1.8% 1.5%; margin-bottom:4%; }
#sk1 .pill { font-size:.72vw; color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.12); padding:.5% 1.6%; border-radius:2px; letter-spacing:.02em; }
#sk1 .by { font-size:.75vw; color:rgba(255,255,255,.22); letter-spacing:.04em; }

#sk1 .rc-title { font-size:.72vw; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:4%; }
#sk1 .rc-tagline { font-size:1.4vw; font-weight:700; color:#fff; line-height:1.4; margin-bottom:5%; }
#sk1 .rc-body { font-size:.88vw; color:rgba(255,255,255,.5); line-height:1.65; margin-bottom:5%; font-weight:300; }
#sk1 .rc-box { border:1px solid rgba(37,99,235,.4); padding:4% 5%; margin-bottom:5%; }
#sk1 .rc-box p { font-size:.85vw; color:rgba(255,255,255,.65); line-height:1.6; font-style:italic; }
#sk1 .rc-box span { color:var(--blue); font-style:normal; font-weight:600; }
#sk1 .rc-tags { display:flex; flex-wrap:wrap; gap:1.5%; }
#sk1 .rc-tag { font-size:.68vw; color:var(--blue); border:1px solid rgba(37,99,235,.35); background:rgba(37,99,235,.08); padding:.5% 1.5%; letter-spacing:.03em; }

/* ══════════════════════════════
   SLIDE 2 — SOBRE + KPIs + CLIENTES
   ══════════════════════════════ */
#sk2 .slide-canvas { background:var(--n100); }
#sk2 .body { position:absolute; top:9%; left:0; right:0; bottom:17%; display:flex; }
#sk2 .lc { width:52%; padding:3.5% 3.5% 3% 5%; display:flex; flex-direction:column; }
#sk2 .rc { width:48%; background:var(--deep); padding:4% 4.5% 3% 4%; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }

#sk2 .h2 { font-size:1.9vw; font-weight:700; color:var(--deep); line-height:1.2; margin-bottom:2%; }
#sk2 .body-t { font-size:.85vw; color:var(--n700); line-height:1.6; margin-bottom:2.5%; }
#sk2 .quote { font-size:.95vw; font-style:italic; color:var(--blue); border-left:3px solid var(--blue); padding-left:3.5%; margin-bottom:2.5%; line-height:1.45; }

/* Clients grid */
#sk2 .clients-label { font-size:.68vw; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--n400); margin-bottom:1.5%; }
#sk2 .clients-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2%; margin-bottom:2%; }
#sk2 .client {
  background:var(--white); border-top:2px solid var(--blue);
  padding:2% 2.5%; font-size:.8vw; font-weight:600; color:var(--deep);
  display:flex; align-items:center;
}

/* KPI strip */
#sk2 .kpi-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2%; margin-top:auto; }
#sk2 .kpi-box { background:var(--deep); padding:2.5% 3%; }
#sk2 .kpi-val { font-size:1.35vw; font-weight:700; color:var(--blue); line-height:1; margin-bottom:.5%; font-variant-numeric:tabular-nums; }
#sk2 .kpi-lbl { font-size:.68vw; color:rgba(255,255,255,.45); line-height:1.3; }

/* RC — KPIs grandes */
#sk2 .rc-kpis { display:grid; grid-template-columns:1fr 1fr; gap:1.5%; flex:1; }
#sk2 .rc-kpi { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:4% 4.5%; display:flex; flex-direction:column; justify-content:center; }
#sk2 .rc-kpi-val { font-size:1.8vw; font-weight:700; color:var(--blue); line-height:1; margin-bottom:1%; font-variant-numeric:tabular-nums; }
#sk2 .rc-kpi-lbl { font-size:.72vw; color:rgba(255,255,255,.45); line-height:1.3; }
#sk2 .rc-divider { height:1px; background:rgba(255,255,255,.07); margin:2% 0; }
#sk2 .lgpd-box { background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.3); padding:3% 4%; }
#sk2 .lgpd-title { font-size:.72vw; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:1.5%; }
#sk2 .lgpd-text { font-size:.78vw; color:rgba(255,255,255,.6); line-height:1.5; }

/* ══════════════════════════════
   SLIDE 3 — INFRA + SEGURANÇA
   ══════════════════════════════ */
#sk3 .slide-canvas { background:var(--deep); }
#sk3 .body { position:absolute; top:9%; left:0; right:0; bottom:17%; padding:2.5% 5% 1%; z-index:1; position:relative; }
#sk3 .h1 { font-size:2.1vw; font-weight:700; color:#fff; line-height:1.15; margin-bottom:2%; }
#sk3 .infra-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4%; margin-bottom:1.4%; }
#sk3 .infra-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--blue); padding:3.5% 4%; }
#sk3 .infra-icon { font-size:1.3vw; color:var(--blue); margin-bottom:1.5%; }
#sk3 .infra-t { font-size:.98vw; font-weight:700; color:#fff; margin-bottom:1%; line-height:1.2; }
#sk3 .infra-d { font-size:.8vw; color:rgba(255,255,255,.5); line-height:1.5; }
#sk3 .sec-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4%; }
#sk3 .sec-pill { background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); padding:2.5% 3%; text-align:center; }
#sk3 .sec-pill-icon { font-size:1.1vw; margin-bottom:1%; color:var(--blue); }
#sk3 .sec-pill-t { font-size:.78vw; font-weight:700; color:#fff; margin-bottom:.5%; }
#sk3 .sec-pill-d { font-size:.68vw; color:rgba(255,255,255,.42); line-height:1.35; }

/* ══════════════════════════════
   SLIDE 4 — A PLATAFORMA
   ══════════════════════════════ */
#sk4 .slide-canvas { background:var(--n100); }
#sk4 .body { position:absolute; top:9%; left:0; right:0; bottom:11%; padding:2.5% 5% 2.6%; }
#sk4 .deep-footer { height:11%; padding:0 5%; align-items:center; }
#sk4 .deep-footer .footer-text { font-size:.82vw; line-height:1.5; }
#sk4 .h1 { font-size:2.2vw; font-weight:700; color:var(--deep); line-height:1.15; margin-bottom:.6%; }
#sk4 .sub { font-size:.92vw; color:var(--n700); margin-bottom:2%; line-height:1.5; }
#sk4 .pillar-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:1fr 1fr; gap:1.5%; height:66%; margin-bottom:2%; }
#sk4 .pillar { background:var(--white); border-top:3px solid var(--blue); padding:4% 4.5%; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(10,17,36,.06); }
#sk4 .pillar.v1 { border-top-color:var(--green); }
#sk4 .pillar.v1 .p-num { color:var(--green); }
#sk4 .pillar.v1 .p-tag { color:var(--green); border-color:rgba(46,204,143,.35); background:rgba(46,204,143,.06); }
#sk4 .pillar.v2 { border-top-color:var(--blue-d); }
#sk4 .pillar.v3 { border-top-color:var(--deep); }
#sk4 .pillar.v3 .p-num { color:var(--deep); }
#sk4 .pillar.v3 .p-tag { color:var(--deep); border-color:rgba(10,17,36,.22); background:rgba(10,17,36,.05); }
#sk4 .pillar.v4 { border-top-color:var(--n400); }
#sk4 .p-num { font-size:1.8vw; font-weight:700; color:var(--blue); line-height:1; margin-bottom:1.5%; }
#sk4 .p-title { font-size:1.05vw; font-weight:700; color:var(--deep); margin-bottom:1.5%; line-height:1.2; }
#sk4 .p-desc { font-size:.82vw; color:var(--n700); line-height:1.55; flex:1; }
#sk4 .p-tags { display:flex; flex-wrap:wrap; gap:1.5% 1.2%; margin-top:1.5%; }
#sk4 .p-tag { font-size:.65vw; color:var(--blue); border:1px solid rgba(37,99,235,.25); background:rgba(37,99,235,.05); padding:.3% 1.2%; }

/* ══════════════════════════════
   SLIDES 5 & 6 — MÓDULOS
   ══════════════════════════════ */
#sk5 .slide-canvas, #sk6 .slide-canvas { background:var(--n100); }
#sk5 .body, #sk6 .body { position:absolute; top:9%; left:0; right:0; bottom:11%; padding:2.2% 5% 2.6%; }
#sk5 .mod-footer, #sk6 .mod-footer { height:11%; padding:0 4% 0 5%; align-items:center; }
#sk5 .mod-footer .mod-footer-badge, #sk6 .mod-footer .mod-footer-badge { font-size:.68vw; padding:1.1% 2%; }
#sk5 .mod-footer .mod-footer-text, #sk6 .mod-footer .mod-footer-text { font-size:.78vw; line-height:1.45; }
#sk5 .mod-grid, #sk6 .mod-grid { height:66%; margin-bottom:2%; }
.mod-h1 { font-size:1.95vw; font-weight:700; color:var(--deep); margin-bottom:.5%; }
.mod-sub { font-size:.85vw; color:var(--n700); margin-bottom:2%; }
.mod-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1.5%; height:78%; }
.mod-card { background:var(--white); border-left:3px solid var(--blue); padding:3.5% 4%; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(10,17,36,.05); }
a.mod-card {
  text-decoration:none; color:inherit; cursor:pointer;
  transition:box-shadow .2s ease;
}
a.mod-card:hover { box-shadow:0 4px 16px rgba(10,17,36,.1); }
a.mod-card:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
/* Mesmo padrão do slide 4: 1 verde · 2 blue-d · 3 deep · 4 n400 */
#sk5 .mod-card:nth-child(1), #sk6 .mod-card:nth-child(1) { border-left-color:var(--green); }
#sk5 .mod-card:nth-child(1) .mod-card-num, #sk6 .mod-card:nth-child(1) .mod-card-num { color:var(--green); }
#sk5 .mod-card:nth-child(1) .mod-tag, #sk6 .mod-card:nth-child(1) .mod-tag { color:var(--green); border-color:rgba(46,204,143,.35); background:rgba(46,204,143,.06); }
#sk5 .mod-card:nth-child(2), #sk6 .mod-card:nth-child(2) { border-left-color:var(--blue-d); }
#sk5 .mod-card:nth-child(2) .mod-card-num, #sk6 .mod-card:nth-child(2) .mod-card-num { color:var(--blue-d); }
#sk5 .mod-card:nth-child(2) .mod-tag, #sk6 .mod-card:nth-child(2) .mod-tag { color:var(--blue-d); border-color:rgba(30,111,217,.32); background:rgba(30,111,217,.06); }
#sk5 .mod-card:nth-child(3), #sk6 .mod-card:nth-child(3) { border-left-color:var(--deep); }
#sk5 .mod-card:nth-child(3) .mod-card-num, #sk6 .mod-card:nth-child(3) .mod-card-num { color:var(--deep); }
#sk5 .mod-card:nth-child(3) .mod-tag, #sk6 .mod-card:nth-child(3) .mod-tag { color:var(--deep); border-color:rgba(10,17,36,.22); background:rgba(10,17,36,.05); }
#sk5 .mod-card:nth-child(4), #sk6 .mod-card:nth-child(4) { border-left-color:var(--n400); }
#sk5 .mod-card:nth-child(4) .mod-card-num, #sk6 .mod-card:nth-child(4) .mod-card-num { color:var(--n400); }
#sk5 .mod-card:nth-child(4) .mod-tag, #sk6 .mod-card:nth-child(4) .mod-tag { color:var(--n700); border-color:rgba(62,63,74,.2); background:rgba(62,63,74,.05); }
.mod-card-num { font-size:1.4vw; font-weight:700; color:var(--blue); line-height:1; margin-bottom:.8%; }
.mod-card-title { font-size:1vw; font-weight:700; color:var(--deep); line-height:1.2; margin-bottom:1.5%; }
.mod-card-desc { font-size:.78vw; color:var(--n700); line-height:1.55; flex:1; }
.mod-card-tags { display:flex; flex-wrap:wrap; gap:1.5% 1%; margin-top:1.5%; }
.mod-tag { font-size:.64vw; color:var(--blue-d); font-weight:600; border:1px solid rgba(37,99,235,.22); background:rgba(37,99,235,.04); padding:.35% 1.1%; }

/* ══════════════════════════════
   SLIDE 7 — CONTATO
   ══════════════════════════════ */
#sk7 .slide-canvas { background:var(--deep); }
#sk7 .body { position:absolute; inset:0; display:flex; z-index:1; }
#sk7 .lc { width:50%; padding:7% 4% 6% 6%; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.06); }
#sk7 .rc { width:50%; padding:7% 5% 6% 5%; display:flex; flex-direction:column; justify-content:center; }
#sk7 .big-wordmark { font-size:3.8vw; font-weight:700; color:#fff; letter-spacing:.12em; line-height:1; margin-bottom:1%; }
#sk7 .big-line { width:44px; height:2px; background:var(--blue); margin-bottom:4%; }
#sk7 .tagline { font-size:1.25vw; font-weight:300; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:6%; }
#sk7 .contact-block { display:flex; flex-direction:column; gap:2%; }
#sk7 .contact-item { display:flex; align-items:center; gap:4%; padding:2.8% 0; border-bottom:1px solid rgba(255,255,255,.06); }
#sk7 .contact-item:last-child { border-bottom:none; }
#sk7 .contact-icon { width:2.4vw; height:2.4vw; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.3); border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1vw; }
#sk7 .contact-label { font-size:.7vw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.4%; }
#sk7 .contact-link { font-size:.95vw; color:#fff; text-decoration:none; font-weight:500; transition:color .2s; }
#sk7 .contact-link:hover { color:var(--blue); }
#sk7 .rc-title { font-size:.72vw; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:4%; }
#sk7 .value-items { display:flex; flex-direction:column; gap:1.5%; margin-bottom:5%; }
#sk7 .vi { display:flex; gap:3%; align-items:flex-start; padding:2% 0; border-bottom:1px solid rgba(255,255,255,.06); }
#sk7 .vi:last-child { border-bottom:none; }
#sk7 .vi-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:.5vw; }
#sk7 .vi-t { font-size:.85vw; color:rgba(255,255,255,.65); line-height:1.45; }
#sk7 .cta-box { background:var(--blue); padding:4% 5%; text-align:center; cursor:pointer; }
#sk7 .cta-box a { text-decoration:none; }
#sk7 .cta-text { font-size:1vw; font-weight:700; color:#fff; margin-bottom:.5%; }
#sk7 .cta-sub { font-size:.75vw; color:rgba(255,255,255,.75); }
