/* ═══════════════════════════════
   LANDING PAGE DESIGN TOKENS
   Chrome-Palette — Developer Aesthetic
═══════════════════════════════ */
:root {
  /* Backgrounds */
  --bg-base:         #0b0c10;
  --bg-surface:      #0f1014;
  --bg-card:         rgba(20, 21, 28, 0.92);
  --bg-card-hover:   rgba(24, 26, 34, 0.98);

  /* Chrome Brand Palette */
  --chrome-blue:     #4285F4;
  --chrome-red:      #EA4335;
  --chrome-yellow:   #FBBC05;
  --chrome-green:    #34A853;

  /* Muted/alpha variants */
  --blue-dim:        rgba(66, 133, 244, 0.12);
  --blue-border:     rgba(66, 133, 244, 0.22);
  --red-dim:         rgba(234, 67, 53, 0.1);
  --red-border:      rgba(234, 67, 53, 0.2);
  --yellow-dim:      rgba(251, 188, 5, 0.1);
  --yellow-border:   rgba(251, 188, 5, 0.22);
  --green-dim:       rgba(52, 168, 83, 0.1);
  --green-border:    rgba(52, 168, 83, 0.22);

  /* Borders */
  --border-faint:    rgba(255, 255, 255, 0.06);
  --border-card:     rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.12);

  /* Text */
  --text-1:  #e8eaf0;
  --text-2:  rgba(200, 205, 220, 0.60);
  --text-3:  rgba(160, 165, 185, 0.38);

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 100px;

  /* Typography */
  --ff-display: 'Inter', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;
  --ff-mono:    'DM Mono', 'Fira Mono', monospace;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
  --shadow-mockup: 0 40px 120px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.07);
}

/* ═══════════════════════════════
   RESET & BASE
═══════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--bg-base);
  color: var(--text-1);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Subtle grid noise texture */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(66,133,244,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,133,244,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 20%, black 0%, transparent 100%);
}

/* ═══════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════ */
.announce {
  position: relative; z-index: 101;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 20px;
  background: rgba(66,133,244,0.07);
  border-bottom: 1px solid rgba(66,133,244,0.18);
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--chrome-blue);
  letter-spacing: 0.04em;
}
.announce-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chrome-green); box-shadow: 0 0 6px var(--chrome-green);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 48px;
  background: rgba(11,12,16,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-faint);
}
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nav-logo img { width: 26px; height: 26px; border-radius: 6px; }
.nav-logo-name {
  font-family: var(--ff-display); font-size: 15px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text-1);
}
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--text-2);
  text-decoration: none; transition: color 0.15s; letter-spacing: -0.01em;
}
.nav-links a:hover { color: var(--text-1); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  background: var(--chrome-blue); color: #fff;
  font-size: 13px; font-weight: 600; border-radius: var(--r-md);
  text-decoration: none; transition: all 0.18s;
  letter-spacing: -0.01em;
  box-shadow: 0 0 20px rgba(66,133,244,0.3);
}
.nav-cta:hover {
  background: #5a95f5;
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(66,133,244,0.45);
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  padding: 52px 80px 48px;
  min-height: calc(100vh - 82px);
}
.hero-content { max-width: 540px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
  color: var(--chrome-blue); letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--chrome-green); box-shadow: 0 0 5px var(--chrome-green);
  animation: blink 2.4s ease-in-out infinite;
}

.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.04em;
  color: var(--text-1); margin-bottom: 18px;
}
/* Chrome-multicolor title accent — one word per color */
.hero-title .grad {
  background: linear-gradient(100deg, var(--chrome-blue) 0%, var(--chrome-red) 40%, var(--chrome-yellow) 70%, var(--chrome-green) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: 15px; font-weight: 400; color: var(--text-2);
  line-height: 1.72; margin-bottom: 26px; max-width: 460px;
  letter-spacing: -0.01em;
}

.hero-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.hero-bullet {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  letter-spacing: -0.01em;
}
.hb-icon {
  width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0;
  background: var(--green-dim); border: 1px solid var(--green-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--chrome-green);
}
.hb-icon svg { stroke: var(--chrome-green); }

.hero-ctas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px;
  background: var(--chrome-blue);
  color: #fff; font-size: 14px; font-weight: 600;
  border-radius: var(--r-md); text-decoration: none; cursor: pointer;
  border: none; transition: all 0.18s; letter-spacing: -0.01em;
  box-shadow: 0 2px 16px rgba(66,133,244,0.35);
}
.btn-primary:hover {
  background: #5a95f5;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(66,133,244,0.5);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 500;
  border-radius: var(--r-md); text-decoration: none; cursor: pointer;
  border: 1px solid var(--border-strong); transition: all 0.18s;
  letter-spacing: -0.01em;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  border-color: rgba(255,255,255,0.18);
}

/* ═══════════════════════════════
   HERO PREVIEW — mockup shell wrapper
   (The shell itself is NOT touched)
═══════════════════════════════ */
.hero-preview {
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
}
/* Subtle blue glow — replacing the purple one */
.hero-preview::before {
  content: '';
  position: absolute; width: 340px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(66,133,244,0.1) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}

.mockup-shell {
  position: relative; z-index: 2;
  width: 360px;
  max-height: 560px;
  border-radius: 14px;
  box-shadow: var(--shadow-mockup);
  overflow: hidden;
  animation: lp-float 6s ease-in-out infinite;
}
@keyframes lp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ═══════════════════════════════
   MOCKUP INTERNAL STYLES
   (scoped via .mockup-shell — DO NOT MODIFY)
═══════════════════════════════ */
.mockup-shell {
  --pp-accent:       #a78bfa;
  --pp-accent2:      #60a5fa;
  --pp-success:      #34d399;
  --pp-danger:       #f87171;
  --pp-warning:      #fbbf24;
  --pp-text-main:    rgba(255,255,255,.92);
  --pp-text-muted:   rgba(255,255,255,.50);
  --pp-text-dim:     rgba(255,255,255,.28);
  --pp-glass-border: rgba(255,255,255,.18);
  --pp-glass-shine:  rgba(255,255,255,.22);
  --pp-glass-bg:     linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --pp-glass-bg2:    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --pp-bg-grad:      linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);
  --pp-thumb-w:      88px;

  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color-scheme: dark;
  background: var(--pp-bg-grad);
  color: var(--pp-text-main);
  display: flex;
  flex-direction: column;
}

/* Animations */
@keyframes pp-spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pp-bounce { 0%{transform:scale(1)} 30%{transform:scale(1.35)} 55%{transform:scale(.85)} 75%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes pp-ad-pulse { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes pp-slide-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* SVG icon sprite */
.mockup-shell .svg-icon {
  display: inline-flex; width: 14px; height: 14px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.mockup-shell .icon-reload    {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E");}
.mockup-shell .icon-close     {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");}
.mockup-shell .icon-search    {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");}
.mockup-shell .icon-audio     {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");}
.mockup-shell .icon-grid      {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");}
.mockup-shell .icon-no-audio  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");}
.mockup-shell .icon-external  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");}
.mockup-shell .icon-chevrons  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E");}
.mockup-shell .icon-chev-flip {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E");}
.mockup-shell .icon-vol       {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");}
.mockup-shell .icon-vol-mute  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(248,113,113,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");}
.mockup-shell .icon-play      {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");}
.mockup-shell .icon-pause     {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E");}
.mockup-shell .icon-prev      {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E");}
.mockup-shell .icon-next      {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E");}
.mockup-shell .icon-pip       {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Crect x='12' y='11' width='9' height='6' rx='1'/%3E%3C/svg%3E");}
.mockup-shell .icon-open-tab  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");}
.mockup-shell .icon-mute-all  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");}
.mockup-shell .icon-pause-all {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E");}
.mockup-shell .icon-reset     {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 .49-3.51'/%3E%3C/svg%3E");}
.mockup-shell .icon-chev-down {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");}
.mockup-shell .icon-chev-up   {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(167,139,250,1)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");}

/* Header */
.mockup-shell .pp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--pp-glass-border);
  backdrop-filter:blur(12px);
  flex-shrink:0;
}
.mockup-shell .pp-brand { display:flex; align-items:center; gap:8px; flex:1; }
.mockup-shell .pp-logo  { border-radius:6px; width:22px; height:22px; }
.mockup-shell .pp-title { font-size:13px; font-weight:600; color:var(--pp-text-main); letter-spacing:-.01em; }
.mockup-shell .pp-header-right { display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
.mockup-shell .pp-icon-btn {
  background:transparent; border:none;
  color:var(--pp-text-muted); cursor:pointer;
  padding:5px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s,background .15s;
}
.mockup-shell .pp-icon-btn:hover { color:var(--pp-text-main); background:rgba(255,255,255,.08); }

/* Global bar */
.mockup-shell .pp-global-bar {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0; background:transparent; border-bottom:none;
}
.mockup-shell .pp-gact-btn {
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  cursor:pointer; transition:all .16s; position:relative;
}
.mockup-shell .pp-gact-btn .svg-icon { width:13px; height:13px; }
.mockup-shell .pp-gact-btn:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
.mockup-shell .pp-gact-btn:active { transform:scale(.92); }
.mockup-shell #btnMuteAll  { border-color:rgba(248,113,113,.25); background:rgba(248,113,113,.08); }
.mockup-shell #btnMuteAll:hover  { background:rgba(248,113,113,.18); border-color:rgba(248,113,113,.5); box-shadow:0 0 10px rgba(248,113,113,.25); }
.mockup-shell #btnMuteAll.on     { background:rgba(248,113,113,.28); border-color:#f87171; box-shadow:0 0 12px rgba(248,113,113,.45); }
.mockup-shell #btnPauseAll { border-color:rgba(251,191,36,.2); background:rgba(251,191,36,.07); }
.mockup-shell #btnPauseAll:hover { background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.45); box-shadow:0 0 10px rgba(251,191,36,.2); }
.mockup-shell #btnPauseAll.on    { background:rgba(251,191,36,.25); border-color:#fbbf24; box-shadow:0 0 12px rgba(251,191,36,.4); }
.mockup-shell .pp-gact-reset { border-color:rgba(167,139,250,.22); background:rgba(167,139,250,.07); }
.mockup-shell .pp-gact-reset:hover { background:rgba(167,139,250,.16); border-color:rgba(167,139,250,.45); box-shadow:0 0 10px rgba(167,139,250,.2); }

/* Search */
.mockup-shell .pp-search-wrap {
  position:relative; padding:8px 12px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.mockup-shell .pp-search-ico { position:absolute; left:22px; top:50%; transform:translateY(-50%); pointer-events:none; width:13px; height:13px; }
.mockup-shell .pp-search-input {
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--pp-text-main);
  font:inherit; font-size:12px;
  padding:6px 44px 6px 30px;
  outline:none;
  transition:border-color .15s,background .15s;
}
.mockup-shell .pp-search-input::placeholder { color:var(--pp-text-dim); }
.mockup-shell .pp-search-input:focus { border-color:rgba(167,139,250,.5); background:rgba(255,255,255,.09); }
.mockup-shell .pp-search-input::-webkit-search-cancel-button { display:none; }

/* List */
.mockup-shell .pp-list {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:8px;
  display:flex; flex-direction:column; gap:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
  max-height:460px;
}
.mockup-shell .pp-list::-webkit-scrollbar { width:3px; }
.mockup-shell .pp-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.mockup-shell .pp-section-label {
  display:flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--pp-text-dim);
  padding:4px 2px 3px; margin-top:2px;
}
.mockup-shell .pp-section-label .svg-icon { width:11px; height:11px; }
.mockup-shell .pp-section-label--all { margin-top:10px; }
.mockup-shell .pp-badge {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--pp-text-dim);
  border-radius:9px; padding:0 5px;
  font-size:10px; min-width:16px; text-align:center;
}

/* Audio card wrap */
.mockup-shell .pp-audio-wrap {
  display:flex; flex-direction:column;
  margin-bottom:7px;
  border-radius:14px;
  border:1px solid rgba(167,139,250,.2);
  overflow:hidden;
  background:rgba(167,139,250,.04);
  min-height: fit-content;
}
.mockup-shell .pp-audio-wrap .pp-item { border-radius:0; border:none; margin-bottom:0; }

/* Card */
.mockup-shell .pp-item {
  position:relative;
  width:100%; min-height:88px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 0 0 rgba(255,255,255,.22) inset, 0 -1px 0 0 rgba(0,0,0,.3) inset, 0 8px 28px rgba(0,0,0,.45);
  display:flex; align-items:stretch;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  cursor:default; user-select:none;
  flex-shrink:0;
  margin-bottom:7px;
}
.mockup-shell .pp-item::before {
  content:''; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 60%);
  pointer-events:none;
}
.mockup-shell .pp-item:hover {
  transform:translateY(-1px);
  box-shadow: 0 2px 0 0 var(--pp-glass-shine) inset, 0 -1px 0 0 rgba(0,0,0,.3) inset, 0 14px 40px rgba(0,0,0,.55), 0 4px 12px rgba(167,139,250,.15);
}
.mockup-shell .pp-audio-wrap .pp-item--audio.ctrl-open { transform:none; }

/* Thumbnail */
.mockup-shell .pp-thumb-wrap {
  position:relative;
  width:88px; flex-shrink:0; align-self:stretch;
  border-radius:13px 0 0 13px;
  overflow:hidden; z-index:2;
  background:linear-gradient(135deg,#1a1040,#3b2075);
}
.mockup-shell .pp-audio-wrap .pp-thumb-wrap { border-radius:0; }
.mockup-shell .pp-thumb-img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.75); transition:filter .22s;
  background:linear-gradient(135deg,#1a1040,#3b2075);
}
.mockup-shell .pp-thumb-wrap:hover .pp-thumb-img { filter:brightness(.35); }
.mockup-shell .pp-thumb-overlay {
  position:absolute; inset:0;
  display:flex; align-items:stretch;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.mockup-shell .pp-thumb-wrap:hover .pp-thumb-overlay { opacity:1; pointer-events:all; }
.mockup-shell .pp-goto-area { flex:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mockup-shell .pp-thumb-goto {
  width:30px; height:30px; border-radius:50%;
  background:rgb(97 97 97 / 63%);
  border:1.5px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,transform .15s;
}
.mockup-shell .pp-thumb-goto .svg-icon { width:14px; height:14px; }
.mockup-shell .pp-goto-area:hover .pp-thumb-goto { background:rgba(255,255,255,.3); transform:scale(1.1); }
.mockup-shell .pp-thumb-favicon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:6px; object-fit:contain; filter:none !important; z-index:1;
}
.mockup-shell .pp-thumb-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.mockup-shell .pp-thumb-placeholder .svg-icon { width:24px; height:24px; opacity:.3; }
.mockup-shell .pp-placeholder-hidden { display:none !important; }

/* Ctrl trigger pill */
.mockup-shell .pp-ctrl-trigger {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:3px 10px 3px 8px; width:100%;
  border-radius:0 0 0 13px;
  background:rgba(167,139,250,.16);
  border:1px solid rgba(167,139,250,.32);
  color:rgba(255,255,255,.65);
  cursor:pointer; font:inherit; font-size:10px; font-weight:500;
  letter-spacing:.02em; white-space:nowrap;
  pointer-events:none; opacity:0;
  transition:opacity .22s ease, background .15s, border-color .15s;
  z-index:4; backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.mockup-shell .pp-ctrl-trigger .svg-icon { width:10px; height:10px; flex-shrink:0; }
.mockup-shell .pp-item--audio:hover .pp-ctrl-trigger,
.mockup-shell .pp-item--audio.ctrl-open .pp-ctrl-trigger { opacity:1; pointer-events:all; }
.mockup-shell .pp-item--audio.ctrl-open .pp-ctrl-trigger { background:rgba(167,139,250,.26); border-color:rgba(167,139,250,.55); color:var(--pp-accent); }
.mockup-shell .pp-ctrl-trigger:hover { background:rgba(167,139,250,.26); border-color:rgba(167,139,250,.5); color:var(--pp-text-main); }
.mockup-shell .pp-audio-wrap .pp-ctrl-trigger { border-radius:0; }

/* Item body */
.mockup-shell .pp-item-body {
  flex:1; min-width:0; min-height:88px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; z-index:1;
}
.mockup-shell .pp-item-content {
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10px 10px 10px 12px;
  flex:1;
  transition:opacity .2s,transform .2s;
  gap:6px;
}
.mockup-shell .pp-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.mockup-shell .pp-item-meta { min-width:0; flex:1; }
.mockup-shell .pp-item-title { font-size:12.5px; font-weight:500; color:var(--pp-text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; max-width:150px; }
.mockup-shell .pp-item-sub   { font-size:10.5px; color:var(--pp-text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }

/* Play button */
.mockup-shell .pp-play-btn {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(96,165,250,.2));
  border:1px solid rgba(167,139,250,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; z-index:2;
  transition:all .18s;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(167,139,250,.25);
  margin-right:10px; align-self: center;
}
.mockup-shell .pp-play-btn .svg-icon { width:13px; height:13px; }
.mockup-shell .pp-play-btn:hover { background:linear-gradient(135deg,rgba(167,139,250,.42),rgba(96,165,250,.36)); border-color:rgba(167,139,250,.7); transform:scale(1.08); box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 18px rgba(167,139,250,.4); }
.mockup-shell .pp-play-btn:active { transform:scale(.95); }

/* Progress bar */
.mockup-shell .pp-progress-bar { position:absolute; bottom:0; left:13px; right:13px; display:none; height:2px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.mockup-shell .pp-progress-fill { height:100%; background:linear-gradient(90deg,#a78bfa,#60a5fa); border-radius:2px; }

/* Badge */
.mockup-shell .pp-badge-slot { display:flex; align-items:center; flex-shrink:0; }
.mockup-shell .pp-state-badge { display:flex; align-items:center; gap:3px; padding:2px 6px; border-radius:6px; font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid; cursor:pointer; transition:all .15s; flex-shrink:0; }
.mockup-shell .pp-state-badge.active   { background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); color:#34d399; }
.mockup-shell .pp-state-badge.muted    { background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.3); color:#f87171; }
.mockup-shell .pp-state-badge.inactive { background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.3); color:#fbbf24; }
.mockup-shell .pp-state-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.mockup-shell .pp-state-badge.active .pp-state-dot { box-shadow:0 0 4px #34d399; }

/* Volume row */
.mockup-shell .pp-vol-row { display:flex; align-items:center; gap:6px; }
.mockup-shell .pp-vol-icon-btn { width:16px; height:16px; flex-shrink:0; cursor:pointer; background-size:contain; background-repeat:no-repeat; background-position:center; opacity:.7; transition:opacity .15s; }
.mockup-shell .pp-vol-icon-btn:hover { opacity:1; }
.mockup-shell .pp-vol-track { position:relative; flex:1; height:18px; display:flex; align-items:center; cursor:pointer; }
.mockup-shell .pp-vol-rail  { position:absolute; left:0; right:0; height:3px; background:rgba(255,255,255,.12); border-radius:3px; pointer-events:none; }
.mockup-shell .pp-vol-fill  { position:absolute; left:0; height:3px; border-radius:3px; background:linear-gradient(90deg,#a78bfa,#60a5fa); pointer-events:none; transition:width .04s; }
.mockup-shell .pp-vol-mid-tick { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:8px; background:rgba(255,255,255,.28); border-radius:1px; pointer-events:none; box-shadow:0 0 3px rgba(167,139,250,.5); }
.mockup-shell .pp-vol-thumb { position:absolute; width:10px; height:10px; border-radius:50%; background:white; box-shadow:0 0 6px rgba(167,139,250,.9); pointer-events:none; transform:translate(-50%,-50%); top:50%; opacity:0; transition:opacity .15s; }
.mockup-shell .pp-vol-track:hover .pp-vol-thumb { opacity:1; }
.mockup-shell .pp-vol-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; margin:0; padding:0; }
.mockup-shell .pp-vol-pct   { font-size:9.5px; font-weight:600; color:var(--pp-accent); min-width:30px; text-align:right; flex-shrink:0; }

/* Plain card */
.mockup-shell .pp-item--plain {
  height:48px; min-height:48px; background:var(--pp-glass-bg2);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  cursor:pointer;
}
.mockup-shell .pp-item--plain:hover { box-shadow:0 4px 16px rgba(0,0,0,.4),0 2px 8px rgba(167,139,250,.08); }
.mockup-shell .pp-item--plain .pp-thumb-wrap { width:52px; height:48px; border-radius:13px 0 0 13px; }
.mockup-shell .pp-item--plain .pp-item-body  { height:48px; min-height:48px; }
.mockup-shell .pp-item--plain .pp-item-content { padding:8px 8px 8px 10px; justify-content:center; }
.mockup-shell .pp-item--plain .pp-item-title  { font-size:11.5px; max-width:130px; }
.mockup-shell .pp-item--plain .pp-item-sub    { font-size:10px; margin-top:1px; max-width:130px; }
.mockup-shell .pp-plain-actions { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 8px; flex-shrink:0; align-self:center; }
.mockup-shell .pp-plain-act { width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--pp-text-dim); transition:color .14s,background .14s; flex-shrink:0; }
.mockup-shell .pp-plain-act .svg-icon { width:12px; height:12px; }
.mockup-shell .pp-plain-act:hover { color:var(--pp-text-main); background:rgba(255,255,255,.08); }
.mockup-shell .pp-plain-act.close-plain:hover { color:var(--pp-danger); background:rgba(248,113,113,.12); }
.mockup-shell .pp-plain-act.close-plain.confirm { color:var(--pp-danger); background:rgba(248,113,113,.28); animation:pp-bounce .34s cubic-bezier(.36,.07,.19,.97); }
.mockup-shell .pp-plain-act.reload-act:hover { color:var(--pp-accent2); background:rgba(96,165,250,.12); }

/* Inline controls */
.mockup-shell .pp-inline-ctrl {
  padding:0 12px; background:rgba(255,255,255,.02);
  border-top:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .28s cubic-bezier(.4,0,.2,1), opacity .22s ease, padding .28s ease, border-color .2s;
}
.mockup-shell .pp-inline-ctrl.open { padding:10px 12px 8px; max-height:200px; opacity:1; border-top-color:rgba(167,139,250,.15); }
.mockup-shell .pp-seekbar-wrap { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.mockup-shell .pp-seek-time { font-size:10px; color:var(--pp-text-dim); min-width:32px; text-align:center; flex-shrink:0; }
.mockup-shell .pp-seek-track { flex:1; position:relative; height:4px; background:rgba(255,255,255,.1); border-radius:2px; cursor:pointer; }
.mockup-shell .pp-seek-fill  { position:absolute; top:0; left:0; bottom:0; background:linear-gradient(90deg,#a78bfa,#60a5fa); border-radius:2px; width:0%; pointer-events:none; transition:width .25s linear; }
.mockup-shell .pp-seek-thumb { position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:white; box-shadow:0 0 0 2px var(--pp-accent); transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .15s; }
.mockup-shell .pp-seek-track:hover .pp-seek-thumb { opacity:1; }
.mockup-shell .pp-seek-input { position:absolute; inset:0; width:100%; height:200%; top:-50%; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; margin:0; }
.mockup-shell .pp-ctrl-row { display:flex; align-items:center; gap:4px; margin-top:4px; }
.mockup-shell .pp-ctrl-row .pp-transport--card { flex:1; }
.mockup-shell .pp-transport--card { display:flex; align-items:center; justify-content:center; gap:5px; }
.mockup-shell .pp-transport-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--pp-text-muted); cursor:pointer; font:inherit; font-size:10.5px; font-weight:500; transition:all .15s; white-space:nowrap; }
.mockup-shell .pp-transport-btn .svg-icon { width:12px; height:12px; }
.mockup-shell .pp-transport-btn:hover { color:var(--pp-text-main); border-color:rgba(167,139,250,.4); background:rgba(167,139,250,.12); }
.mockup-shell .pp-pip-btn { color:var(--pp-accent); border-color:rgba(167,139,250,.3); background:rgba(167,139,250,.08); }
.mockup-shell .pp-pip-btn:hover { border-color:var(--pp-accent); background:rgba(167,139,250,.18) !important; }
.mockup-shell .pp-reconnect-btn { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--pp-text-dim); transition:color .14s,background .14s; flex-shrink:0; }
.mockup-shell .pp-reconnect-btn .svg-icon { width:12px; height:12px; }
.mockup-shell .pp-reconnect-btn:hover { color:var(--pp-accent2); background:rgba(96,165,250,.12); }
.mockup-shell .pp-ic-close { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--pp-text-dim); transition:color .14s,background .14s; flex-shrink:0; }
.mockup-shell .pp-ic-close .svg-icon { width:12px; height:12px; }
.mockup-shell .pp-ic-close:hover { color:var(--pp-danger); background:rgba(248,113,113,.12); }

/* Empty / Error */
.mockup-shell .pp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:36px 16px; color:var(--pp-text-dim); font-size:12px; text-align:center; }
.mockup-shell .pp-empty-ico { width:36px; height:36px; }
.mockup-shell mark { background:rgba(251,191,36,.25); color:var(--pp-warning); border-radius:2px; padding:0 1px; }
.mockup-shell .hidden { display:none !important; }
.mockup-shell .pp-global-toast { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); padding:7px 14px; border-radius:9px; font-size:11px; text-align:center; white-space:nowrap; background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.3); color:var(--pp-success); z-index:200; animation:pp-slide-in .2s ease; box-shadow:0 4px 20px rgba(0,0,0,.5); }

/* ═══════════════════════════════
   STATS BAR — chrome 4-color segment
═══════════════════════════════ */
.stats-bar {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  background: rgba(255,255,255,0.01);
}
.stat {
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid var(--border-faint);
  position: relative;
}
.stat:last-child { border-right: none; }
/* Each stat gets its own Chrome color top-accent */
.stat:nth-child(1)::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--chrome-blue); border-radius:0 0 2px 2px; }
.stat:nth-child(2)::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--chrome-red); border-radius:0 0 2px 2px; }
.stat:nth-child(3)::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--chrome-yellow); border-radius:0 0 2px 2px; }
.stat:nth-child(4)::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--chrome-green); border-radius:0 0 2px 2px; }
.stat-val {
  font-family: var(--ff-mono); font-size: 28px; font-weight: 700;
  letter-spacing: -0.04em; color: var(--text-1);
  line-height: 1;
}
.stat-lbl {
  font-family: var(--ff-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin-top: 6px;
}

/* ═══════════════════════════════
   SECTIONS
═══════════════════════════════ */
.section { position: relative; z-index: 1; padding: 64px 80px; }

.sec-hdr { margin-bottom: 40px; }
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--chrome-blue);
  margin-bottom: 12px;
}
.sec-eyebrow::before {
  content: ''; display: block; width: 16px; height: 1px;
  background: var(--chrome-blue); opacity: 0.6;
}
.sec-title {
  font-family: var(--ff-display); font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800; letter-spacing: -0.04em; color: var(--text-1); line-height: 1.1;
}
.sec-sub {
  font-size: 14px; color: var(--text-2); margin-top: 12px;
  max-width: 580px; line-height: 1.72;
  letter-spacing: -0.01em;
}

/* Feature grid — 4-card, each with a different Chrome color left-border */
.feat-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
}
.feat-card {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--r-lg); padding: 22px 22px 18px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
/* Left-accent bar — Chrome palette cycling */
.feat-card:nth-child(1) { border-left: 2px solid var(--chrome-blue); }
.feat-card:nth-child(2) { border-left: 2px solid var(--chrome-red); }
.feat-card:nth-child(3) { border-left: 2px solid var(--chrome-yellow); }
.feat-card:nth-child(4) { border-left: 2px solid var(--chrome-green); }
.feat-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* Icon color per card */
.feat-card:nth-child(1) .feat-icon { background: var(--blue-dim); border-color: var(--blue-border); }
.feat-card:nth-child(1) .feat-icon svg { color: var(--chrome-blue); }
.feat-card:nth-child(2) .feat-icon { background: var(--red-dim); border-color: var(--red-border); }
.feat-card:nth-child(2) .feat-icon svg { color: var(--chrome-red); }
.feat-card:nth-child(3) .feat-icon { background: var(--yellow-dim); border-color: var(--yellow-border); }
.feat-card:nth-child(3) .feat-icon svg { color: var(--chrome-yellow); }
.feat-card:nth-child(4) .feat-icon { background: var(--green-dim); border-color: var(--green-border); }
.feat-card:nth-child(4) .feat-icon svg { color: var(--chrome-green); }

.feat-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; flex-shrink: 0;
}
.feat-icon svg { width: 17px; height: 17px; }
.feat-title {
  font-family: var(--ff-display); font-size: 14px; font-weight: 700;
  color: var(--text-1); margin-bottom: 8px; letter-spacing: -0.02em;
}
.feat-desc {
  font-size: 13px; line-height: 1.7; color: var(--text-2); letter-spacing: -0.01em;
}
.feat-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; padding: 3px 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono); font-size: 9px; font-weight: 500;
  color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase;
}
code.inl {
  background: rgba(66,133,244,0.1); padding: 1px 5px;
  border-radius: 3px; font-family: var(--ff-mono); font-size: 11.5px;
  color: var(--chrome-blue);
}

/* ═══════════════════════════════
   PRIVACY SECTION
═══════════════════════════════ */
.privacy-sec {
  background: rgba(255,255,255,0.01);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.priv-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.priv-shields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.priv-shield {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--r-md); padding: 14px 14px;
  display: flex; align-items: flex-start; gap: 11px;
  transition: border-color 0.2s;
}
.priv-shield:hover { border-color: var(--green-border); }
.priv-si {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--green-dim); border: 1px solid var(--green-border);
  display: flex; align-items: center; justify-content: center;
}
.priv-si svg { width: 13px; height: 13px; color: var(--chrome-green); }
.priv-slabel { font-size: 12px; font-weight: 600; color: var(--text-1); letter-spacing: -0.01em; }
.priv-sdesc  { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

/* ═══════════════════════════════
   FINAL CTA SECTION
═══════════════════════════════ */
.cta-sec {
  position: relative; z-index: 1;
  padding: 64px 80px; text-align: center;
  border-top: 1px solid var(--border-faint);
}
/* Subtle chrome multi-color glow at top */
.cta-sec::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 480px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome-blue) 25%, var(--chrome-red) 50%, var(--chrome-yellow) 75%, transparent);
  opacity: 0.5;
}

/* Inline privacy badges — green themed */
.priv-badge-local {
  padding: 6px 14px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  color: var(--chrome-green); letter-spacing: 0.06em; text-transform: uppercase;
}
.priv-badge-oss {
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-card);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 80px;
  border-top: 1px solid var(--border-faint);
}
.footer-logo { display: flex; align-items: center; gap: 9px; }
.footer-logo img { width: 20px; height: 20px; border-radius: 5px; }
.footer-name { font-family: var(--ff-display); font-size: 13px; font-weight: 700; color: var(--text-1); }
.footer-sub  { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-links a {
  font-size: 12px; font-weight: 500; color: var(--text-3);
  text-decoration: none; transition: color 0.15s; letter-spacing: -0.01em;
}
.footer-links a:hover { color: var(--text-2); }
.footer-copy { font-family: var(--ff-mono); font-size: 10.5px; color: var(--text-3); }

/* ═══════════════════════════════
   ANIMATIONS
═══════════════════════════════ */
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }

.hero-content > * { animation: slideUp 0.55s ease both; }
.hero-content > *:nth-child(1) { animation-delay: 0.06s; }
.hero-content > *:nth-child(2) { animation-delay: 0.14s; }
.hero-content > *:nth-child(3) { animation-delay: 0.22s; }
.hero-content > *:nth-child(4) { animation-delay: 0.30s; }
.hero-content > *:nth-child(5) { animation-delay: 0.38s; }
.hero-preview { animation: fadeIn 0.8s ease 0.3s both; }

.reveal { opacity:0; transform:translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 1100px) {
  .hero, .section, .cta-sec, .footer { padding-left: 48px; padding-right: 48px; }
  .hero { gap: 36px; }
  .stats-bar .stat { padding: 18px 16px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 40px 28px; min-height: auto; }
  .hero-content { max-width: 100%; }
  .hero-preview { justify-content: center; }
  .mockup-shell { animation: none; }
  .section, .cta-sec { padding: 48px 28px; }
  .feat-grid { grid-template-columns: 1fr; }
  .priv-inner { grid-template-columns: 1fr; gap: 32px; }
  .nav { padding: 10px 22px; }
  .nav-links { display: none; }
  .footer { flex-direction: column; gap: 16px; padding: 20px 28px; text-align: center; }
  .footer-links { gap: 14px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
}
@media (max-width: 580px) {
  .hero-title { font-size: 28px; }
  .priv-shields { grid-template-columns: 1fr; }
  .mockup-shell { width: 100%; max-width: 360px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
}