:root{
  /* Phone hardware */
  --ph-body-w: 260px;
  --ph-screen-w: 240px;
  --ph-screen-h: 488px;
  --ph-radius: 40px;
  --ph-screen-radius: 26px;
  --ph-pad-x: 10px;
  --ph-pad-top: 14px;
  --ph-pad-bottom: 18px;

  --ph-metal-1: #4a515c;
  --ph-metal-2: #2e343d;
  --ph-metal-3: #1f2329;
  --ph-metal-4: #13161a;
  --ph-black-1: #060709;
  --ph-black-2: #090b0e;
  --ph-black-3: #0f1114;

  --ph-glow: rgba(70, 110, 255, .12);
  --ph-shadow-1: 0 18px 30px rgba(0,0,0,.16);
  --ph-shadow-2: 0 34px 70px rgba(0,0,0,.24);
  --ph-shadow-3: 0 8px 22px rgba(40,90,255,.10);

  --atm: #060d1a;
  --atm2: #08121f;
  --atm3: #0a1830;
  --ph-shell: #0d1824;
  --ph-edge: #162033;

  /* Mobile screen UI tokens */
  --p: #0066cc;
  --pd: #0047b3;
  --pl: #e6f0ff;
  --pm: #4da3ff;
  --ok: #16a34a;
  --wa: #d97706;
  --er: #dc2626;
  --tx: #0f2034;
  --ts: #3d566b;
  --tm: #7a96ae;
  --br: #dde4ed;
  --bg: #f4f7fb;
  --dk: #071e38;
  --dk2: #0b2d55;
}
#mobileHero {
    position: relative;
    padding: 6rem 0 4rem;
    overflow: hidden;
}

.mobile-hero-copy {
    max-width: 38rem;
}

.mobile-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 100, 220, .1);
    border: 1px solid rgba(0, 120, 255, .3);
    padding: 5px 14px 5px 10px;
    border-radius: var(--s-radius-full);
    margin-bottom: 24px;
    font-family: 'Verdana', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--s-primary);
    backdrop-filter: blur(8px);
}

.mobile-hero-title {
    margin: 0;
    line-height: 1.08;
}


.mobile-hero-description {
    max-width: 34rem;
    margin: 0;
}

.mobile-hero-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.25rem;
    border-radius: 0.5rem;
}

.mobile-hero-mockup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-hero-mockup-slot {
    width: 100%;
    max-width: 420px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 1rem;
    text-align: center;
}

@media (max-width: 992px) {
    #mobileHero {
        padding: 5rem 0 3rem;
    }

    .mobile-hero-copy {
        max-width: 100%;
        text-align: center;
        margin-inline: auto;
    }

    .mobile-hero-description {
        margin-inline: auto;
    }

    .mobile-hero-mockup-slot {
        min-height: 420px;
    }
}


/* ========================================================= 
   PRODUCTION PHONE SHELL — PREMIUM DARK GUNMETAL / CHARCOAL
   Screen canvas preserved at 240 x 488 
========================================================= */
/* scene */
.ph-scene{
  perspective: 1600px;
  perspective-origin: 45% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 34px 56px;
  position: relative;
}
.ph-scene::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 165px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 75%);
  filter: blur(10px);
  pointer-events: none;
}

/* tilt target */
.ph-tilt{
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-9deg) rotateX(3deg);
  transition: transform .65s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.ph-tilt.lean-right{ transform: rotateY(9deg) rotateX(3deg); }
.ph-tilt.lean-center{ transform: rotateY(0deg) rotateX(5deg); }

.ph-wrap{
  position: relative;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,.22));
}

/* full phone body = uniform gunmetal shell + bezels */
.ph{
  width: var(--ph-body-w);
  flex-shrink: 0;
  position: relative;
  padding: var(--ph-pad-top) var(--ph-pad-x) var(--ph-pad-bottom);
  border-radius: var(--ph-radius);
  
  /* HOMOGENEOUS GRADIENT ENGINE — Fixed trailing percentage string bug */
  background: linear-gradient(160deg, 
    var(--ph-metal-1) 0%, 
    var(--ph-metal-2) 35%, 
    var(--ph-metal-2) 65%, 
    var(--ph-metal-3) 85%,
    var(--ph-metal-4) 100%
  );
  
  /* 3D Polished Casing Edge Insets */
  box-shadow: 
    inset 0 1.5px 1px rgba(255,255,255,.25), 
    inset 1.5px 0 1px rgba(255,255,255,.12), 
    inset -1.5px 0 1px rgba(0,0,0,.4), 
    inset 0 -1.5px 1px rgba(0,0,0,.6), 
    0 0 0 1px rgba(0,0,0,.45), 
    var(--ph-shadow-1), 
    var(--ph-shadow-2), 
    var(--ph-shadow-3);
  overflow: visible;
  transform-style: preserve-3d;
}

/* slim side edge read, providing consistent metal tint wrapping */
.ph::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--ph-radius) - 1px);
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
  z-index: 3;
}

/* metallic rim reflection */
.ph::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--ph-radius) - 1px);
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.02) 70%, rgba(0,0,0,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
}

/* premium hardware pill notch (floating dynamic island shape) */
.ph-notch{
  width: 74px;
  height: 14px;
  background: #000;
  border-radius: 50px;
  margin: 6px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 5;
  box-shadow: 
    0 1px 1px rgba(255,255,255,.08),
    inset 0 1px 1px rgba(0,0,0,.85);
}
.ph-cam{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #151d29 0%, #030508 75%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.85);
}
.ph-spk{
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #0a0c0e;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.9);
}

/* calibrated display area untouched */
.ph-scr{
  width: var(--ph-screen-w);
  height: var(--ph-screen-h);
  border-radius: var(--ph-screen-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.2);
}

/* blank display preview mode */
.ph-scr.is-blank{
  background: #000;
}
.ph-scr.is-blank::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.04) 0%, transparent 35%);
  pointer-events: none;
}
.ph-scr.is-blank::after{
  content: "DISPLAY PREVIEW";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

/* glass glare — refined down to settle smoothly against charcoal values */
.ph-glare{
  position: absolute;
  inset: 0;
  border-radius: var(--ph-radius);
  background: linear-gradient(140deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 25%, transparent 60%);
  pointer-events: none;
  z-index: 7;
}

/* front ring */
.ph-ring{
  position: absolute;
  inset: 0;
  border-radius: var(--ph-radius);
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none;
  z-index: 8;
}

/* premium slim physical controls */
.ph-btn-left, .ph-btn-left-2, .ph-btn-right{
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ph-metal-1) 0%, var(--ph-metal-3) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  z-index: 2;
}
.ph-btn-left{ left: -2px; top: 96px; width: 3px; height: 30px; }
.ph-btn-left-2{ left: -2px; top: 132px; width: 3px; height: 30px; }
.ph-btn-right{ right: -2px; top: 88px; width: 3px; height: 56px; }


/* Light variant */
.mu-feat.mu-light {
  background: linear-gradient(160deg, #f4f7fb 0%, #ffffff 60%, #f0f5ff 100%);
}
/* Dark variant */
.mu-feat.mu-dark {
  background: var(--atm3);
}



/* ═══════════════════════════════════════════════════════
   FLOATING AMBIENT CARDS — atmospheric detail layer
═══════════════════════════════════════════════════════ */
.mu-fa {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  animation: fa-bob 5s ease-in-out infinite;
}
@keyframes fa-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mu-fa-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(0,80,200,.12);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow:
    0 14px 40px rgba(0,60,180,.18),
    0 4px 12px rgba(0,0,0,.09);
  min-width: 164px;
  max-width: 215px;
}
.mu-dark .mu-fa-card {
  background: rgba(5,13,32,.94);
  border: 1px solid rgba(0,100,220,.32);
  box-shadow:
    0 16px 48px rgba(0,0,0,.62),
    0 0 32px rgba(0,60,200,.26);
}

.mfc-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f2034;
  line-height: 1.25;
  margin-bottom: 2px;
}
.mu-dark .mfc-title { color: rgba(228,238,255,.93); }
.mfc-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: #7a96ae;
}
.mu-dark .mfc-sub { color: rgba(130,170,255,.52); }

.mu-fa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 100px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(0,80,200,.14);
  box-shadow: 0 6px 22px rgba(0,60,180,.15);
  color: #1c3a5e;
}
.mu-dark .mu-fa-badge {
  background: rgba(4,13,38,.91);
  border: 1px solid rgba(0,110,255,.3);
  color: rgba(190,220,255,.9);
  box-shadow: 0 6px 24px rgba(0,0,0,.58);
}
.mfb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 7px #4ade80;
  flex-shrink: 0;
}
.mfb-dot.bl { background: #4da3ff; box-shadow: 0 0 7px #4da3ff; }
.mfb-dot.am { background: #fbbf24; box-shadow: 0 0 7px #fbbf24; }

/* ── Feature copy column ── */
.mu-fc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section number + name */
.mu-fn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Science Gothic", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  /* text-transform: uppercase; */
  color: var(--s-primary);
  margin-bottom: 0.5rem;
}
.mu-fn-bar {
  display: block;
  width: 20px; height: 2px;
  background: linear-gradient(90deg, #0066cc, #0099ff);
  border-radius: 2px;
  box-shadow: var(--s-shadow-lg);
}
.mu-dark .mu-fn { color: var(--s-white); }
.mu-dark .mu-fn-bar { background: var(--s-gradient-white); }

/* Feature description */
.mu-fd {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #4a6078;
  margin-bottom: 24px;
  max-width: 420px;
}
.mu-dark .mu-fd { color: rgba(180,210,255,.6); }

/* Feature bullet list */
.mu-fl {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mu-fl li {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #3d566b;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mu-fl li::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  background: rgba(0,102,204,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 2.5' fill='none' stroke='%230066cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.mu-dark .mu-fl li { color: rgba(180,210,255,.65); }
.mu-dark .mu-fl li::before {
  background-color: rgba(0,102,204,.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 2.5' fill='none' stroke='%234da3ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Feature copy column ── */
.mu-fc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Feature heading */
.mu-fh {
  font-family: 'Science Gothic', 'IBM Plex Sans', sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--s-gray-900, #0f172a);
  margin-bottom: 16px;
}
.mu-dark .mu-fh { color: #ffffff; }

/* Feature description */
.mu-fd {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #4a6078;
  margin-bottom: 24px;
  max-width: 420px;
}
.mu-dark .mu-fd { color: rgba(180,210,255,.6); }

/* ══════════════════════════════════════════════════════
   STATS BAND
══════════════════════════════════════════════════════ */
.mu-band {
  background: var(--atm2);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 36px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.mu-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,80,200,.06) 50%, transparent);
  pointer-events: none;
}
.mu-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mu-stats-row {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}
.mu-stat-item {
  flex: 1;
  text-align: center;
  padding: 0 32px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.mu-stat-item:last-child { border-right: none; }
.mu-stat-num {
  font-family: 'Science Gothic', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(135deg, #4da3ff, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.mu-stat-lbl {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: rgba(160,200,255,.45);
  line-height: 1.4;
}

/* Feature chips rail */
.mu-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.mu-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(0,100,220,.25);
  border-radius: var(--s-radius-full);
  background: rgba(0,60,160,.12);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(160,210,255,.7);
  backdrop-filter: blur(6px);
  transition: all .2s;
}
.mu-chip:hover {
  border-color: rgba(0,150,255,.4);
  background: rgba(0,80,200,.2);
  color: rgba(200,230,255,.9);
}
.mu-chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
  flex-shrink: 0;
}

/* ── Feature copy column ── */
.mu-fc {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* Feature heading */
.mu-fh {
  font-family: 'Science Gothic', 'IBM Plex Sans', sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--s-gray-900, #0f172a);
  margin-bottom: 16px;
}
.mu-dark .mu-fh { color: #ffffff; }

/* Feature description */
.mu-fd {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #4a6078;
  margin-bottom: 24px;
  max-width: 420px;
}
.mu-dark .mu-fd { color: rgba(180,210,255,.6); }

/* Feature bullet list */
.mu-fl {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mu-fl li {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #3d566b;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mu-fl li::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  background: rgba(0,102,204,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 2.5' fill='none' stroke='%230066cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.mu-dark .mu-fl li { color: rgba(180,210,255,.65); }
.mu-dark .mu-fl li::before {
  background-color: rgba(0,102,204,.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 2.5' fill='none' stroke='%234da3ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Feature link */
.mu-flk {
  font-family: 'Science Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--s-primary, #0066cc);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s, color .18s;
}
.mu-flk:hover { gap: 10px; }
.mu-dark .mu-flk { color: #4da3ff; }
.mu-dark .mu-flk:hover { color: #0099ff; }

/* Phone column layout */
.mu-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ═══════════════════════════════════════════════════════
   FEATURE STATS ROW — content section enhancement
═══════════════════════════════════════════════════════ */
.mu-fc-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,80,200,.09);
  border-bottom: 1px solid rgba(0,80,200,.09);
}
.mu-dark .mu-fc-stats {
  border-color: rgba(0,120,255,.16);
}
.mu-fc-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mu-fcs-val {
  font-family: 'Science Gothic', sans-serif;
  font-size: 17px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

.mu-fcs-lbl {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  color: #7a96ae;
  font-weight: 500;
  white-space: nowrap;
}
.mu-dark .mu-fcs-lbl { color: rgba(140,180,255,.5); }

/* ___________________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________________ */

/* =========================================================
   SCREEN VISUALIZATION PRIMITIVES
   Append at end of sapphire_mobile.css
   ========================================================= */

.ph-scr {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.s-bar {
  height: 26px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.s-bar-t {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx);
}

.s-bar-i {
  font-size: 9px;
  color: var(--tm);
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.08em;
}

.s-ab {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid var(--br);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}

.s-ab-bk {
  font-size: 16px;
  line-height: 1;
  color: var(--tm);
}

.s-ab-tt {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-ab-ac {
  font-size: 11px;
  font-weight: 700;
  color: var(--p);
}

.s-ab-bdg {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fee2e2;
  color: var(--er);
}

.s-body {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--bg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-lbl {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  color: var(--tm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s-card {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 8px;
  padding: 10px 11px;
  flex-shrink: 0;
}

.s-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.s-card-tt {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.3;
}

.s-card-sb {
  font-size: 10px;
  color: var(--ts);
  line-height: 1.5;
}

.ph-pill {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.pi-bl {
  background: var(--pl);
  color: var(--p);
}

.pi-gn {
  background: #dcfce7;
  color: var(--ok);
}

.pi-am {
  background: #fef3c7;
  color: var(--wa);
}

.pi-rd {
  background: #fee2e2;
  color: var(--er);
}

.s-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  flex-shrink: 0;
}

.s-kpi {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 7px;
  padding: 9px 10px;
}

.s-kpi-l {
  margin-bottom: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tm);
}

.s-kpi-v {
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--tx);
}

.s-kpi-d {
  margin-top: 2px;
  font-size: 9px;
}

.d-up {
  color: var(--ok);
}

.d-dn {
  color: var(--er);
}

.s-field {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.s-field.on {
  border-color: var(--p);
  box-shadow: 0 0 0 2.5px rgba(0, 102, 204, 0.12);
}

.s-field.done {
  border-color: var(--pm);
}

.s-fl {
  margin-bottom: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tm);
}

.s-fv {
  min-height: 15px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--tx);
}

.s-fv.cur::after {
  content: "|";
  margin-left: 1px;
  color: var(--p);
  animation: s-blink 0.6s step-end infinite;
}

@keyframes s-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.s-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--p), transparent);
  animation: s-scan-move 0.9s ease-in-out 3;
}

@keyframes s-scan-move {
  0%   { top: 15%; opacity: 1; }
  50%  { top: 85%; opacity: 1; }
  100% { top: 15%; opacity: 0; }
}

.s-prog {
  height: 4px;
  overflow: hidden;
  background: var(--br);
  border-radius: 999px;
  flex-shrink: 0;
}

.s-prog-b {
  height: 100%;
  width: 0;
  background: var(--p);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.s-chk {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 7px;
  padding: 7px 10px;
  transition: all 0.3s ease;
}

.s-chk.pass {
  background: #f0fdf4;
  border-color: #86efac;
}

.s-chk.warn {
  background: #fffbeb;
  border-color: #fde68a;
}

.s-chk.fail {
  background: #fef2f2;
  border-color: #fca5a5;
}

.s-cb {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid var(--br);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: all 0.25s ease;
}

.s-chk.pass .s-cb {
  border-color: var(--ok);
  background: #dcfce7;
  color: var(--ok);
}

.s-chk.warn .s-cb {
  border-color: var(--wa);
  background: #fef3c7;
  color: var(--wa);
}

.s-chk.fail .s-cb {
  border-color: var(--er);
  background: #fee2e2;
  color: var(--er);
}

.s-chk-l {
  flex: 1;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ts);
}

.s-chk-r {
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s-chk.pass .s-chk-r,
.s-chk.warn .s-chk-r,
.s-chk.fail .s-chk-r {
  opacity: 1;
}

.s-chk.pass .s-chk-r { color: var(--ok); }
.s-chk.warn .s-chk-r { color: var(--wa); }
.s-chk.fail .s-chk-r { color: var(--er); }

.s-act {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 7px;
  padding: 7px 10px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.s-act.show {
  opacity: 1;
  transform: none;
}

.s-act-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.s-act-txt {
  flex: 1;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ts);
}

.s-act-t {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--tm);
}

.s-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  flex-shrink: 0;
}

.s-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.s-tile.tap {
  border-color: var(--p);
  background: var(--pl);
  transform: scale(0.95);
}

.s-tile-ico {
  font-size: 22px;
  line-height: 1;
}

.s-tile-l {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ts);
}

.s-inv-strip {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.s-inv-c {
  flex: 1;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 7px;
  padding: 7px 8px;
}

.s-inv-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--tx);
}

.s-inv-l {
  margin-top: 1px;
  font-size: 9px;
  color: var(--tm);
}

.s-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--br);
  flex-shrink: 0;
}

.s-tab {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--tm);
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.s-tab.on {
  color: var(--p);
  border-color: var(--p);
}

.s-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 7px;
  padding: 8px 10px;
  transition: all 0.3s ease;
}

.s-item.hi {
  border-color: var(--p);
  background: var(--pl);
}

.s-item.done {
  border-color: var(--ok);
  background: #f0fdf4;
}

.s-item-ico {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

.s-item-n {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tx);
}

.s-item-s {
  font-size: 9px;
  color: var(--tm);
}

.s-item-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  background: var(--ok);
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 700;
}

.s-tl {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.s-tl-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 4px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s-tl-row.show {
  opacity: 1;
}

.s-tl-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-tl-dot {
  width: 9px;
  height: 9px;
  margin-top: 2px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--br);
  border: 1.5px solid var(--tm);
}

.s-tl-dot.ok {
  background: var(--ok);
  border-color: var(--ok);
}

.s-tl-dot.ac {
  background: var(--p);
  border-color: var(--p);
}

.s-tl-ln {
  width: 1px;
  height: 16px;
  background: var(--br);
}

.s-tl-txt {
  font-size: 10px;
  line-height: 1.3;
  color: var(--ts);
}

.s-tl-t {
  margin-top: 1px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--tm);
}

.s-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.s-ov {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

.s-ov.show {
  opacity: 1;
}

.s-ov-c {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--s-danger-light);
  box-shadow: var(--s-shadow-lg);
}

.s-ov-tt {
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
}

.s-ov-rf {
  margin-bottom: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ts);
}

.s-ov-sb {
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
  color: var(--tm);
}

.s-toast {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-8px);
  background: var(--tx);
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

.s-toast.show {
  opacity: 1;
  transform: none;
}

.s-toast-ico {
  flex-shrink: 0;
  font-size: 15px;
}

.s-toast-txt {
  font-size: 11px;
  line-height: 1.4;
}

.s-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px #4ade80;
  animation: s-live-pulse 1.8s ease-in-out infinite;
}

@keyframes s-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.s-rip {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 102, 204, 0.25);
  transform: scale(0);
  animation: s-ripple 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes s-ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(5);
    opacity: 0;
  }
}


/* responsiveness: preserve inner calibration */
@media (max-width: 900px){
  .ph-scene{ padding: 34px 24px 48px; }
  .ph-tilt{ transform: rotateY(10deg) rotateX(3deg) !important; }
  .ph-tilt.lean-right{ transform: rotateY(-10deg) rotateX(3deg) !important; }
  .ph-tilt.lean-center{ transform: rotateY(0deg) rotateX(4deg) !important; }
}

@media (max-width: 768px) {
  .phone-parallax-container,
  .ph-scene,
  .ph-tilt {
    transform: none !important;
    perspective: none !important;
  }

  .phonev2-screen,
  .ph-scr,
  .phone-carousel-img {
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

@media (max-width: 640px){
  .ph{ width: 230px; }
  .ph-scr{ width: 210px; height: 432px; }
  .ph-tilt, .ph-tilt.lean-right{ transform: rotateY(0deg) rotateX(2deg) !important; }
  .ph-tilt.lean-center{ transform: rotateY(0deg) rotateX(3deg) !important; }
}