/* kiosk.css — Xiphias Safety Kiosk Page (safetykiosk.cshtml) */

/* ===== CSS VARIABLES ===== */
:root {
    --xk-navy: #0A1628;
    --xk-navy-light: #1E3A5F;
    --xk-orange: #FF6B00;
    --xk-orange-soft: rgba(255,107,0,0.12);
    --xk-orange-border: rgba(255,107,0,0.25);
    --xk-green: #00C853;
    --xk-green-soft: rgba(0,200,83,0.12);
    --xk-red: #E53935;
    --xk-indigo: #6366F1;
    --xk-cyan: #06B6D4;
    --xk-amber: #F59E0B;
    --xk-bg-light: #F4F7FF;
    --xk-bg-subtle: #F7F9FF;
    --xk-text-muted: #5A6880;
    --xk-text-hint: #8A9AB5;
    --xk-border: rgba(10,22,40,0.08);
}

/* ===== SHARED ===== */
.xk-section { padding: 5rem 0; }
.xk-section-light { background: var(--xk-bg-light); }
.xk-section-white { background: #fff; }

.xk-pill {
    display: inline-block;
    padding: .375rem 1rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.xk-pill-navy  { background: #EFF4FF; color: var(--xk-navy); }
.xk-pill-orange{ background: #FFF4ED; color: var(--xk-orange); }
.xk-pill-green { background: #EDFFF5; color: var(--xk-green); }
.xk-pill-grey  { background: #F4F7FF; color: var(--xk-text-muted); }

.xk-h2 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--xk-navy);
    line-height: 1.1;
    letter-spacing: -.025em;
}
.xk-h2 .xk-accent { color: var(--xk-orange); }

.xk-lead { color: var(--xk-text-muted); line-height: 1.75; font-size: 1rem; }

/* Fade-up scroll animation */
.xk-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}
.xk-up.xk-show { opacity: 1; transform: translateY(0); }
.xk-up.d1 { transition-delay: .07s; }
.xk-up.d2 { transition-delay: .14s; }
.xk-up.d3 { transition-delay: .21s; }
.xk-up.d4 { transition-delay: .28s; }
.xk-up.d5 { transition-delay: .35s; }

/* ============================================================
   1. HERO
   ============================================================ */
.xk-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--xk-navy);
}

.xk-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.xk-hero-bg .carousel,
.xk-hero-bg .carousel-inner,
.xk-hero-bg .carousel-item { height: 100%; }
.xk-hero-bg .carousel-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.xk-hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(160deg, rgba(4,11,22,.82) 0%, rgba(6,17,31,.86) 50%, rgba(10,22,40,.94) 100%);
}
.xk-hero-grid {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
}
.xk-hero-glow-r {
    position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, #1E4D8F, transparent 70%);
    filter: blur(80px); opacity: .2;
}
.xk-hero-glow-l {
    position: absolute; bottom: 0; left: 0; z-index: 1; pointer-events: none;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, #FF6B00, transparent 70%);
    filter: blur(80px); opacity: .15;
}

.xk-hero-body {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column;
    justify-content: center;
    padding-top: 7rem; padding-bottom: 3rem;
}

.xk-hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .375rem .875rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--xk-orange-soft); border: 1px solid var(--xk-orange-border);
    color: var(--xk-orange); margin-bottom: 1.75rem;
}
.xk-hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800; color: #fff;
    line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.25rem;
}
.xk-hero-title .grad {
    background: linear-gradient(135deg, #FF6B00 0%, #FF9A00 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.xk-hero-sub {
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
    color: rgba(255,255,255,.55); line-height: 1.75;
    max-width: 36rem; margin-bottom: 2.25rem;
}

.xk-btn-primary {
    display: inline-flex; align-items: center; gap: .625rem;
    padding: .875rem 1.75rem; border-radius: .75rem;
    font-weight: 600; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, #FF6B00, #FF8C00);
    border: none; cursor: pointer; text-decoration: none;
    box-shadow: 0 8px 32px rgba(255,107,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .2s, opacity .2s;
}
.xk-btn-primary:hover { transform: scale(1.04); color: #fff; text-decoration: none; }

.xk-btn-ghost {
    display: inline-flex; align-items: center; gap: .75rem;
    padding: .875rem 1.75rem; border-radius: .75rem;
    font-weight: 600; font-size: .95rem; color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06); backdrop-filter: blur(8px);
    cursor: pointer; text-decoration: none; transition: background .2s;
}
.xk-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

.xk-hero-trust {
    display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem;
}
.xk-avatars { display: flex; }
.xk-avatars .av {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 2px solid var(--xk-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: #fff;
    margin-left: -.5rem;
}
.xk-avatars .av:first-child { margin-left: 0; }

.xk-hero-stats { display: flex; gap: 1.5rem; }
.xk-hero-stat .v { font-size: 1.1rem; font-weight: 800; color: var(--xk-orange); line-height: 1; }
.xk-hero-stat .l { font-size: .7rem; color: rgba(255,255,255,.35); }

.xk-hero-controls {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 2.5rem;
}
.xk-dots { display: flex; gap: .5rem; align-items: center; }
.xk-dot {
    height: 8px; border-radius: 4px; width: 8px;
    background: rgba(255,255,255,.25); border: none; cursor: pointer;
    transition: width .3s, background .3s; padding: 0;
}
.xk-dot.active { width: 24px; background: var(--xk-orange); }
.xk-arrows { display: flex; gap: .5rem; }
.xk-arrow {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
.xk-arrow:hover { background: rgba(255,255,255,.15); }
.xk-hero-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 5rem;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none; z-index: 2;
}

/* ============================================================
   2. PROBLEM / SOLUTION
   ============================================================ */
.xk-ps-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 1.5rem; overflow: hidden;
    box-shadow: 0 20px 60px rgba(10,22,40,.12);
    border: 1px solid var(--xk-border);
}
@media(max-width:991px){ .xk-ps-grid{ grid-template-columns:1fr; } }

.xk-ps-side {
    position: relative; padding: 3.5rem; overflow: hidden;
}
.xk-ps-side::before {
    content:''; position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image: repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 1px,transparent 8px);
}
.xk-ps-bad  { background: linear-gradient(160deg,#1C0505 0%,#2A0808 50%,#1C0505 100%); }
.xk-ps-good { background: linear-gradient(160deg,#001509 0%,#002210 50%,#001509 100%); }

.xk-ps-icon {
    width: 3rem; height: 3rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.xk-ps-icon-bad  { background: rgba(229,57,53,.15); border:1px solid rgba(229,57,53,.2); color:#EF5350; }
.xk-ps-icon-good { background: rgba(0,200,83,.15);  border:1px solid rgba(0,200,83,.2);  color:#00C853; }

.xk-ps-item {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem; border-radius: 1rem; margin-bottom: .75rem;
    transition: transform .2s;
}
.xk-ps-item:hover { transform: scale(1.01); }
.xk-ps-item-bad  { background: rgba(229,57,53,.07); border:1px solid rgba(229,57,53,.12); }
.xk-ps-item-good { background: rgba(0,200,83,.07);  border:1px solid rgba(0,200,83,.12);  }

.xk-ps-ic {
    width:1.5rem; height:1.5rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:.7rem;
}
.xk-ps-ic-bad  { background:rgba(229,57,53,.2); color:#EF5350; }
.xk-ps-ic-good { background:rgba(0,200,83,.2);  color:#00C853; }

.xk-ps-callout {
    padding:1rem; border-radius:1rem; margin-top:1.5rem; text-align:center;
}
.xk-ps-callout-bad  { background:rgba(229,57,53,.1); border:1px solid rgba(229,57,53,.2); }
.xk-ps-callout-good { background:rgba(0,200,83,.1);  border:1px solid rgba(0,200,83,.2);  }

/* ============================================================
   3. WHAT SECTION
   ============================================================ */
.xk-what-strip {
    position: relative; border-radius: 1.5rem; overflow: hidden; height: 300px;
    margin-bottom: 3rem;
}
.xk-what-strip img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.xk-what-strip-ov {
    position:absolute; inset:0;
    background: linear-gradient(90deg,rgba(10,22,40,.85) 0%,rgba(10,22,40,.4) 55%,rgba(10,22,40,.1) 100%);
}
.xk-what-strip-copy {
    position:absolute; inset:0;
    display:flex; align-items:center; padding:2.5rem 4rem;
}

.xk-pillar {
    display:flex; flex-direction:column; gap:1rem;
    padding:1.75rem; border-radius:1rem;
    background:var(--xk-bg-subtle); border:1px solid var(--xk-border);
    transition:transform .2s,box-shadow .2s; cursor:default; height:100%;
}
.xk-pillar:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,22,40,.1); }
.xk-pillar-icon {
    width:3rem; height:3rem; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; transition:transform .2s;
}
.xk-pillar:hover .xk-pillar-icon { transform:scale(1.1); }

/* ============================================================
   4. HOW SECTION (6-step alternating)
   ============================================================ */
.xk-how-wrap { position:relative; }
.xk-how-line {
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,rgba(10,22,40,.1) 10%,rgba(10,22,40,.1) 90%,transparent);
}
@media(max-width:991px){ .xk-how-line{ display:none; } }

.xk-how-step {
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; min-height:280px; position:relative;
}
@media(max-width:991px){ .xk-how-step{ grid-template-columns:1fr; } }

.xk-how-node {
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:3rem; height:3rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; color:#fff;
    border:3px solid var(--xk-bg-light);
    box-shadow:0 4px 16px rgba(10,22,40,.2); z-index:5;
}
@media(max-width:991px){ .xk-how-node{ display:none; } }

.xk-how-content { padding:3rem; display:flex; flex-direction:column; justify-content:center; }
.xk-how-content.inset-r { padding-right:4.5rem; }
.xk-how-content.inset-l { padding-left:4.5rem; }
@media(max-width:991px){
    .xk-how-content.inset-r,.xk-how-content.inset-l { padding:2rem 1.5rem; }
}

.xk-how-step-icon {
    width:2.5rem; height:2.5rem; border-radius:.625rem;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; margin-bottom:1rem;
}
.xk-how-step-phase {
    font-size:.7rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; margin-bottom:.75rem;
}
.xk-how-step-title {
    font-size:1.25rem; font-weight:700; color:var(--xk-navy);
    line-height:1.2; margin-bottom:.75rem;
}
.xk-how-step-desc { color:var(--xk-text-muted); line-height:1.75; font-size:.95rem; margin:0; }

.xk-how-img {
    position:relative; overflow:hidden; height:280px;
}
.xk-how-img img { width:100%; height:100%; object-fit:cover; }
.xk-how-img-content {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:3rem;
}
.xk-how-fade-l {
    position:absolute; inset:0;
    background:linear-gradient(90deg,var(--xk-bg-light) 0%,transparent 35%);
}
.xk-how-fade-r {
    position:absolute; inset:0;
    background:linear-gradient(270deg,var(--xk-bg-light) 0%,transparent 35%);
}
.xk-how-badge {
    position:absolute; top:1.25rem;
    padding:.375rem .75rem; border-radius:999px;
    font-size:.75rem; font-weight:700; color:#fff;
}
.xk-how-badge.tl { left:1.25rem; }
.xk-how-badge.tr { right:1.25rem; }

.xk-how-banner {
    margin-top:4rem; border-radius:1rem;
    padding:1.25rem 2rem; background:var(--xk-navy);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem;
}

/* ============================================================
   5. HOW IT WORKS (3 steps)
   ============================================================ */
.xk-journey {
    display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
    justify-content:center; margin-bottom:3rem;
}
.xk-journey-step {
    padding:.5rem 1rem; border-radius:.625rem;
    font-size:.875rem; font-weight:600; background:#fff;
    color:#374151; border:1px solid var(--xk-border);
    box-shadow:0 2px 8px rgba(10,22,40,.06);
}
.xk-journey-step.final { background:var(--xk-navy); color:#fff; }
.xk-journey-sep { color:#CBD5E1; font-size:.875rem; }
.xk-journey-time {
    padding:.5rem .875rem; border-radius:.625rem;
    font-size:.875rem; font-weight:700;
    background:var(--xk-orange); color:#fff;
}

.xk-step-card {
    position:relative; height:100%; border-radius:1.5rem;
    padding:2rem; background:#fff;
    transition:transform .25s,box-shadow .25s; cursor:default;
    display:flex; flex-direction:column; gap:1.25rem;
}
.xk-step-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(10,22,40,.1); }

.xk-step-num {
    font-size:3rem; font-weight:900; color:rgba(10,22,40,.06);
    line-height:1; letter-spacing:-.05em;
}
.xk-step-icon {
    width:3.5rem; height:3.5rem; border-radius:1rem;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.xk-step-label {
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; margin-bottom:.4rem;
}
.xk-step-title {
    font-size:1.3rem; font-weight:700; color:var(--xk-navy); line-height:1.2; margin:0;
}
.xk-step-desc { font-size:.875rem; line-height:1.65; color:var(--xk-text-muted); flex:1; margin:0; }
.xk-step-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.xk-step-tag {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.7rem; font-weight:600;
    padding:.375rem .75rem; border-radius:999px;
}
.xk-step-tag::before {
    content:''; display:inline-block; width:.25rem; height:.25rem;
    border-radius:50%; background:currentColor;
}
.xk-step-bar {
    position:absolute; bottom:0; left:2rem; right:2rem;
    height:2px; border-radius:999px;
}

/* ============================================================
   6. PLATFORM ECOSYSTEM
   ============================================================ */
.xk-orbit-wrap {
    position:relative; width:440px; height:440px; flex-shrink:0;
}
.xk-orbit-ring {
    position:absolute; border-radius:50%; pointer-events:none;
}
.xk-orbit-ring-outer {
    width:340px; height:340px; top:50px; left:50px;
    border:1px dashed rgba(10,22,40,.1);
}
.xk-orbit-ring-inner {
    width:200px; height:200px; top:120px; left:120px;
    border:1px solid rgba(10,22,40,.06);
    background:radial-gradient(circle,rgba(10,22,40,.02),transparent);
}
.xk-orbit-hub {
    position:absolute; width:110px; height:110px;
    top:165px; left:165px; border-radius:1.5rem;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#0A1628,#1E3A5F);
    border:2px solid rgba(255,255,255,.1);
    box-shadow:0 20px 60px rgba(10,22,40,.4),0 0 0 8px rgba(10,22,40,.06);
    z-index:5; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em;
}
.xk-orbit-hub i { font-size:2rem; margin-bottom:.25rem; }
.xk-orbit-node {
    position:absolute; display:flex; flex-direction:column;
    align-items:center; gap:.5rem; transform:translate(-50%,-50%);
    cursor:default; z-index:4;
}
.xk-orbit-node-icon {
    width:3.5rem; height:3.5rem; border-radius:1rem;
    display:flex; align-items:center; justify-content:center;
    background:#fff; font-size:1.2rem;
    transition:transform .25s,box-shadow .25s;
}
.xk-orbit-node:hover .xk-orbit-node-icon { transform:scale(1.1); box-shadow:0 8px 24px rgba(10,22,40,.12); }
.xk-orbit-node-label {
    font-size:.65rem; font-weight:600; text-align:center;
    padding:.25rem .5rem; border-radius:.375rem; line-height:1.3;
    max-width:80px; white-space:normal;
}

.xk-eco-card {
    display:flex; align-items:center; gap:1rem;
    padding:1.25rem; border-radius:1rem;
    background:var(--xk-bg-subtle); border:1px solid var(--xk-border);
    transition:transform .2s,box-shadow .2s; cursor:default; margin-bottom:.75rem;
}
.xk-eco-card:last-child { margin-bottom:0; }
.xk-eco-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,22,40,.08); }
.xk-eco-card-icon {
    width:2.75rem; height:2.75rem; border-radius:.625rem;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
    transition:transform .2s;
}
.xk-eco-card:hover .xk-eco-card-icon { transform:scale(1.1); }
.xk-eco-dot {
    width:.5rem; height:.5rem; border-radius:50%;
    flex-shrink:0; margin-left:auto; opacity:.5;
}

@media(max-width:1199px){
    .xk-orbit-wrap { display:none; }
}

/* ============================================================
   7. DASHBOARD
   ============================================================ */
.xk-dash-frame {
    border-radius:1.5rem; overflow:hidden;
    box-shadow:0 24px 80px rgba(10,22,40,.12); border:1px solid var(--xk-border);
}
.xk-dash-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.5rem; background:var(--xk-navy);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.xk-dash-traffic { display:flex; gap:.375rem; }
.xk-dash-traffic span { width:.75rem; height:.75rem; border-radius:50%; }

.xk-dash-body { background:#EEF2FB; padding:1.25rem; }

.xk-widget {
    background:#fff; border-radius:1rem; padding:1.25rem;
    border:1px solid var(--xk-border);
    transition:box-shadow .2s,transform .2s; height:100%;
}
.xk-widget:hover { box-shadow:0 8px 24px rgba(10,22,40,.08); transform:translateY(-2px); }
.xk-widget-icon {
    width:2.25rem; height:2.25rem; border-radius:.625rem;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.xk-widget-val {
    font-size:1.6rem; font-weight:800; color:var(--xk-navy);
    line-height:1; margin:.5rem 0 .25rem;
}
.xk-widget-lbl { font-size:.75rem; font-weight:500; color:var(--xk-text-muted); }
.xk-widget-sub { font-size:.7rem; }

.xk-activity {
    background:#fff; border-radius:1rem; overflow:hidden;
    border:1px solid var(--xk-border); margin-top:1.25rem;
}
.xk-activity-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.5rem; border-bottom:1px solid rgba(10,22,40,.05);
}
.xk-activity-row {
    display:flex; align-items:center; gap:1rem;
    padding:.875rem 1.5rem; border-bottom:1px solid rgba(10,22,40,.04);
}
.xk-activity-row:last-child { border-bottom:none; }
.xk-av {
    width:2rem; height:2rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; font-weight:700; color:#fff; flex-shrink:0;
}
.xk-badge-ok   { background:rgba(0,200,83,.1);  color:#00C853; font-size:.7rem; font-weight:600; padding:.25rem .625rem; border-radius:999px; }
.xk-badge-warn { background:rgba(245,158,11,.1); color:#F59E0B; font-size:.7rem; font-weight:600; padding:.25rem .625rem; border-radius:999px; }

/* ============================================================
   8. BENTO GRID
   ============================================================ */
.xk-bento-outer {
    background:#F0F4FA; border-radius:1.5rem; padding:.75rem;
}
.xk-bento-cell {
    border-radius:1rem; overflow:hidden; min-height:220px;
}
.xk-bento-photo {
    position:relative; width:100%; min-height:220px; overflow:hidden;
}
.xk-bento-photo img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .7s ease;
}
.xk-bento-photo:hover img { transform:scale(1.05); }
.xk-bento-photo-ov {
    position:absolute; inset:0; background:rgba(10,22,40,.08);
}
.xk-bento-text {
    display:flex; flex-direction:column; justify-content:space-between;
    padding:2rem; min-height:220px;
}
.xk-bento-text.theme-light { background:#fff; }
.xk-bento-text.theme-dark  { background:var(--xk-navy); }
.xk-bento-text.theme-slate { background:#1E3A5F; }

.xk-bento-title {
    font-size:1.35rem; font-weight:700; line-height:1.2; margin-bottom:.875rem;
}
.xk-bento-desc { font-size:.875rem; line-height:1.65; flex:1; }
.xk-bento-link {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.875rem; font-weight:600; margin-top:1.25rem;
    background:none; border:none; cursor:pointer; padding:0;
    text-decoration:none; transition:gap .2s;
}
.xk-bento-link:hover { gap:.875rem; text-decoration:none; }

/* ============================================================
   9. INDUSTRIES
   ============================================================ */
.xk-ind-icon {
    position:relative; width:5rem; height:5rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:2px solid var(--xk-border);
    box-shadow:0 4px 16px rgba(10,22,40,.06);
    transition:transform .25s,box-shadow .25s;
    margin:0 auto .75rem; font-size:1.5rem;
    color:rgba(10,22,40,.35);
}
.xk-ind-item:hover .xk-ind-icon { transform:scale(1.1); box-shadow:0 12px 32px rgba(10,22,40,.1); }
.xk-ind-name { font-size:.78rem; font-weight:600; color:var(--xk-navy); text-align:center; }
.xk-ind-sub  { font-size:.67rem; color:var(--xk-text-hint); text-align:center; margin-top:.125rem; }

.xk-cert-badge {
    display:inline-block; padding:.5rem 1rem; border-radius:.625rem;
    background:#fff; border:1px solid var(--xk-border);
    font-size:.75rem; font-weight:700; color:var(--xk-text-muted);
    letter-spacing:.02em;
}

/* ============================================================
   10. COMPARISON TABLE
   ============================================================ */
.xk-comp-wrap {
    border-radius:1.5rem; overflow:hidden;
    box-shadow:0 20px 60px rgba(10,22,40,.1); border:1px solid var(--xk-border);
}
.xk-comp-head, .xk-comp-row {
    display:grid; grid-template-columns:1.5fr 1fr 1fr;
}
.xk-comp-row { border-top:1px solid rgba(10,22,40,.05); }
.xk-comp-cell {
    padding:1.25rem 1.5rem;
    display:flex; align-items:center; gap:.75rem;
}
.xk-comp-cell-h {
    padding:1.25rem 1.5rem;
    border-right:1px solid rgba(10,22,40,.06);
}
.xk-comp-cell-h:last-child { border-right:none; }
.xk-comp-xp  { background:linear-gradient(90deg,#0C1E36,#0A1628); }
.xk-comp-xpa { background:linear-gradient(90deg,#0E2240,#0A1628); }
.xk-comp-ic {
    width:1.25rem; height:1.25rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:.65rem;
}
.xk-comp-ic-bad  { background:rgba(229,57,53,.1);  color:#E53935; }
.xk-comp-ic-good { background:rgba(0,200,83,.2);   color:#00C853; }

@media(max-width:767px){
    .xk-comp-head,.xk-comp-row { grid-template-columns:1fr 1fr; }
    .xk-comp-cell-h:first-child,.xk-comp-cell:first-child { display:none; }
}

/* ============================================================
   11. SOCIAL PROOF
   ============================================================ */
.xk-kpi {
    text-align:center; padding:2.5rem 1.5rem; border-radius:1.5rem;
    background:#fff; border:1px solid rgba(10,22,40,.07);
    transition:transform .25s,box-shadow .25s; cursor:default; height:100%;
}
.xk-kpi:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(10,22,40,.1); }
.xk-kpi-val {
    font-size:clamp(2.4rem,5vw,3.2rem); font-weight:900;
    line-height:1; letter-spacing:-.03em;
}
.xk-kpi-lbl { font-size:.875rem; font-weight:600; color:var(--xk-navy); margin-top:.5rem; }
.xk-kpi-detail { font-size:.75rem; color:var(--xk-text-hint); margin-top:.25rem; line-height:1.4; }

.xk-tcard {
    padding:2rem; border-radius:1.5rem; background:#fff;
    border:1px solid rgba(10,22,40,.07);
    display:flex; flex-direction:column; gap:1.25rem;
    transition:transform .25s,box-shadow .25s; height:100%;
}
.xk-tcard:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(10,22,40,.1); }
.xk-tcard-stars { display:flex; gap:.25rem; color:var(--xk-orange); }
.xk-tcard-q-icon {
    width:2rem; height:2rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; font-family:Georgia,serif;
}
.xk-tcard-body { font-size:.875rem; line-height:1.7; color:#374151; flex:1; }
.xk-tcard-footer {
    display:flex; align-items:center; gap:.75rem;
    padding-top:.5rem; border-top:1px solid rgba(10,22,40,.06);
}
.xk-tcard-av {
    width:2.5rem; height:2.5rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; color:#fff; flex-shrink:0;
}
.xk-tcard-name { font-size:.875rem; font-weight:600; color:var(--xk-navy); margin:0; }
.xk-tcard-role { font-size:.75rem; color:var(--xk-text-hint); }

.xk-logo-chip {
    padding:.625rem 1.25rem; border-radius:.625rem;
    background:#fff; border:1px solid rgba(10,22,40,.07);
    font-size:.875rem; font-weight:700; color:#CBD5E1;
    letter-spacing:-.01em; transition:box-shadow .2s;
}
.xk-logo-chip:hover { box-shadow:0 4px 16px rgba(10,22,40,.08); }

/* ============================================================
   12. FAQ (new style)
   ============================================================ */
.xk-faq-item {
    border-radius:1rem; overflow:hidden;
    border:1px solid var(--xk-border);
    transition:border-color .2s,box-shadow .2s;
    margin-bottom:.75rem;
}
.xk-faq-item.open {
    border-color:rgba(255,107,0,.2);
    box-shadow:0 4px 24px rgba(255,107,0,.07);
}
.xk-faq-btn {
    width:100%; display:flex; align-items:flex-start; gap:1rem;
    padding:1.25rem 1.5rem; text-align:left;
    background:#fff; border:none; cursor:pointer; transition:background .2s;
}
.xk-faq-item.open .xk-faq-btn { background:#FFFCF9; }
.xk-faq-cat {
    flex-shrink:0; font-size:.7rem; font-weight:700;
    padding:.25rem .625rem; border-radius:999px; margin-top:.125rem;
}
.xk-faq-q { flex:1; font-size:.95rem; font-weight:600; color:var(--xk-navy); line-height:1.4; }
.xk-faq-chev {
    flex-shrink:0; color:#CBD5E1; transition:transform .3s,color .2s;
    margin-top:.125rem;
}
.xk-faq-item.open .xk-faq-chev { transform:rotate(180deg); color:var(--xk-orange); }

.xk-faq-body {
    background:#FFFCF9; border-top:1px solid rgba(255,107,0,.07);
    max-height:0; overflow:hidden; transition:max-height .35s ease,padding .35s ease;
    padding:0 1.5rem;
}
.xk-faq-item.open .xk-faq-body { max-height:500px; padding:.25rem 1.5rem 1.5rem; }
.xk-faq-body p { font-size:.875rem; line-height:1.75; color:var(--xk-text-muted); margin:0; padding-top:.75rem; }

/* ============================================================
   13. FINAL CTA
   ============================================================ */
.xk-cta {
    position:relative; overflow:hidden; padding:6rem 0;
    background:linear-gradient(160deg,#040B16 0%,#06111F 40%,#0A1628 100%);
}
.xk-cta-grid {
    position:absolute; inset:0; pointer-events:none; opacity:.04;
    background-image:
        linear-gradient(rgba(255,255,255,1) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,1) 1px,transparent 1px);
    background-size:48px 48px;
}
.xk-cta-glow {
    position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px);
}
.xk-cta-check {
    display:flex; align-items:center; gap:.75rem;
    font-size:.875rem; color:rgba(255,255,255,.65); margin-bottom:.75rem;
}

/* ============================================================
   PULSE + MISC
   ============================================================ */
@keyframes xk-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.xk-pulse { animation:xk-pulse 2s ease-in-out infinite; }

@media(max-width:575px){
    .xk-ps-side { padding:2rem 1.5rem; }
    .xk-what-strip-copy { padding:1.5rem; }
    .xk-how-content { padding:1.5rem; }
    .xk-bento-text { padding:1.5rem; }
}

/* ============================================================
   HERO KIOSK ILLUSTRATION
   ============================================================ */
.xk-hero-right {
    position: relative; width: 340px; flex-shrink: 0;
    display: flex; align-items: flex-end; justify-content: center;
}
.xk-hero-right-glow {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 60%; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,107,0,.25), transparent 70%);
    filter: blur(24px); pointer-events: none;
}
.xk-kiosk-body {
    position: relative; z-index: 2; width: 200px;
    background: linear-gradient(180deg, #1C2E4A 0%, #0F1E32 50%, #080F1C 100%);
    border-radius: 1.75rem;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
    overflow: hidden;
}
.xk-kiosk-topbar {
    height: 4px; width: 100%;
    background: linear-gradient(90deg, #FF6B00, #FF9A00, #00C853);
}
.xk-kiosk-screen {
    margin: .75rem; border-radius: 1rem; overflow: hidden;
    background: #040810; height: 240px;
    border: 1px solid rgba(255,255,255,.06);
}
.xk-kiosk-screen-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem;
    background: rgba(255,107,0,.9);
}
.xk-kiosk-screen-body {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.25rem .75rem; gap: .625rem;
}
.xk-kiosk-face {
    position: relative; width: 4rem; height: 4rem;
    border-radius: 50%;
    border: 2px solid rgba(0,200,83,.5);
    box-shadow: 0 0 20px rgba(0,200,83,.2);
    display: flex; align-items: center; justify-content: center;
}
.xk-kiosk-face-inner {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: linear-gradient(135deg, rgba(30,58,95,.8), rgba(10,22,40,.9));
}
.xk-kiosk-corner {
    position: absolute; width: .75rem; height: .75rem;
    border-color: #00C853; border-style: solid;
}
.xk-kiosk-corner.tl { top: -2px; left: -2px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.xk-kiosk-corner.tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; }
.xk-kiosk-corner.bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; }
.xk-kiosk-corner.br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }
.xk-kiosk-prog-row { width: 100%; padding: 0; }
.xk-kiosk-prog-bar {
    height: 4px; border-radius: 999px; width: 100%;
    background: rgba(255,255,255,.08); overflow: hidden;
}
.xk-kiosk-prog-fill { height: 100%; border-radius: 999px; }
.xk-kiosk-timer {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem; border-radius: 999px;
    background: rgba(255,107,0,.12); border: 1px solid rgba(255,107,0,.25);
    font-size: .65rem; font-weight: 700; color: #FF6B00;
}
.xk-kiosk-footer {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .625rem;
}
.xk-kiosk-stand {
    display: flex; flex-direction: column; align-items: center;
    z-index: 2;
}
.xk-kiosk-neck { width: 3rem; height: 1.25rem; background: #0d1a2e; border-radius: 0 0 .5rem .5rem; }
.xk-kiosk-base { width: 7rem; height: .5rem; background: rgba(0,0,0,.25); border-radius: 999px; filter: blur(3px); }

.xk-float-card {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem 1rem; border-radius: 1rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px); white-space: nowrap;
}
.xk-float-card-icon {
    width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,200,83,.15);
}
.xk-float-cards-l {
    position: absolute; right: calc(100% + .75rem); top: 1.5rem;
    display: flex; flex-direction: column; gap: .625rem;
}
.xk-float-cards-r {
    position: absolute; left: calc(100% + .75rem); top: 1.5rem;
    display: flex; flex-direction: column; gap: .625rem;
}
.xk-float-stat {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem 1rem; border-radius: 1rem;
    background: rgba(255,107,0,.1); border: 1px solid rgba(255,107,0,.2);
    backdrop-filter: blur(16px);
}

.xk-hero-stat-strip {
    display: flex; gap: 2rem; align-items: center;
}
.xk-hero-stat-strip .v {
    font-size: 1.05rem; font-weight: 800; color: var(--xk-orange); line-height: 1;
}
.xk-hero-stat-strip .l {
    font-size: .7rem; color: rgba(255,255,255,.35);
}

@media(max-width:1199px){ .xk-hero-right { display: none !important; } }
@media(max-width:991px) { .xk-float-cards-l,.xk-float-cards-r { display: none; } }