/* =========================================================================
   PixiCore Studio — studio.css
   Premium, vector-crisp product mockups + index refinements.
   Loaded only on the landing page. Hand-built, no images, no framework.
   Every panel is real DOM + CSS so it stays razor sharp at any zoom.
   ========================================================================= */

/* ---------- shared mockup primitives ------------------------------------ */
.mock {
  --m-bg: #080B14;
  --m-panel: #0C1120;
  --m-panel-2: #0F1525;
  --m-line: #1C2438;
  --m-line-2: #2A344E;
  --m-text: #E7EBF4;
  --m-dim: #9AA3B8;
  --m-mute: #69728C;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.mock, .mock * { box-sizing: border-box; }

/* The lifted glass frame every screenshot sits inside */
.mock-frame {
  position: relative;
  border-radius: 18px;
  padding: 9px;
  background: linear-gradient(150deg, rgba(24,30,52,0.6), rgba(7,9,16,0.92));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 60px 130px -34px rgba(0,0,0,0.8),
    0 24px 60px -24px rgba(124,58,237,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.mock-frame::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
  background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(124,58,237,0.36) 45%, rgba(236,72,153,0.34));
  -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;
  opacity: 0.5; pointer-events: none;
}
.mock-frame > .mock { border-radius: 11px; overflow: hidden; background: var(--m-bg); position: relative; z-index: 1; }

/* glow puddle behind a mockup */
.mock-glow { position: relative; }
.mock-glow::before {
  content: ''; position: absolute; inset: -8% -6% -4%; z-index: 0;
  background: radial-gradient(ellipse at 30% 12%, rgba(0,212,255,0.22), transparent 60%),
              radial-gradient(ellipse at 78% 80%, rgba(236,72,153,0.18), transparent 60%);
  filter: blur(48px); pointer-events: none;
}
.mock-glow > * { position: relative; z-index: 1; }

/* ===========================================================================
   1) BUILDER WINDOW  (the flagship hero screenshot)
   =========================================================================== */
.bw {
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124,58,237,0.10), transparent 60%),
    linear-gradient(180deg, #0B0F1C 0%, #080B14 100%);
  color: var(--m-text);
  font-size: 13px; line-height: 1.4;
  min-width: 720px;
}

/* — title bar — */
.bw__title {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
  border-bottom: 1px solid var(--m-line);
}
.bw__brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bw__brand img { width: 19px; height: 19px; filter: drop-shadow(0 0 6px rgba(0,212,255,0.5)); }
.bw__brand b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.bw__brand b span { background: var(--grad-90); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bw__sep { width: 1px; height: 18px; background: var(--m-line-2); flex-shrink: 0; }
.bw__project {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px; border-radius: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--m-line);
  font-size: 12px; color: var(--m-text); flex-shrink: 0;
}
.bw__project .caret { color: var(--m-mute); }
.bw__icnbtn { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--m-mute); flex-shrink: 0; }
.bw__icnbtn:hover { background: rgba(255,255,255,0.05); color: var(--m-dim); }
.bw__title-spacer { flex: 1; }
.bw__wlt { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }
.bw__credits {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: #5ef2c0; background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.28);
}
.bw__credits b { color: #34D399; }
.bw__search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px; border-radius: 7px; min-width: 132px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--m-line);
  color: var(--m-mute); font-size: 11.5px;
}
.bw__search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--m-line-2); color: var(--m-dim);
}
.bw__win { display: flex; gap: 14px; align-items: center; padding-left: 4px; color: var(--m-mute); flex-shrink: 0; }
.bw__win svg { width: 11px; height: 11px; }
.bw__win .x:hover { color: #ff6b6b; }

/* — ribbon tabs — */
.bw__ribbon {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px; height: 38px;
  border-bottom: 1px solid var(--m-line);
  background: rgba(0,0,0,0.22);
  overflow-x: auto; scrollbar-width: none;
}
.bw__ribbon::-webkit-scrollbar { display: none; }
.bw__rtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--m-dim); flex-shrink: 0;
}
.bw__rtab svg { width: 13px; height: 13px; opacity: 0.8; }
.bw__rtab.is-active {
  color: #fff; background: linear-gradient(180deg, rgba(0,212,255,0.16), rgba(124,58,237,0.12));
  border: 1px solid rgba(0,212,255,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px -4px rgba(0,212,255,0.5);
}
.bw__rtab.is-active svg { opacity: 1; color: var(--c-cyan); }
.bw__rspace { flex: 1; }
.bw__rtag {
  font-size: 10.5px; font-family: var(--font-mono); color: var(--m-mute);
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--m-line); white-space: nowrap; flex-shrink: 0;
}

/* — sub toolbar — */
.bw__sub {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid var(--m-line);
  background: rgba(255,255,255,0.014);
}
.bw__segs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.28); border: 1px solid var(--m-line); }
.bw__seg { padding: 4px 10px; border-radius: 6px; font-size: 11.5px; color: var(--m-dim); white-space: nowrap; }
.bw__seg.is-active { background: rgba(255,255,255,0.07); color: #fff; }
.bw__devs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.28); border: 1px solid var(--m-line); }
.bw__dev { width: 28px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--m-mute); }
.bw__dev svg { width: 14px; height: 14px; }
.bw__dev.is-active { background: rgba(0,212,255,0.14); color: var(--c-cyan); box-shadow: inset 0 0 0 1px rgba(0,212,255,0.3); }
.bw__zoom { font-size: 11.5px; color: var(--m-dim); font-family: var(--font-mono); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--m-line); background: rgba(0,0,0,0.2); }
.bw__sub-spacer { flex: 1; }
.bw__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.bw__btn svg { width: 13px; height: 13px; }
.bw__btn--ghost { color: var(--m-text); background: rgba(255,255,255,0.05); border: 1px solid var(--m-line-2); }
.bw__btn--build { color: #061018; background: var(--grad-90); box-shadow: 0 6px 18px -8px rgba(0,212,255,0.7); }

/* — 3 column body — */
.bw__body { display: grid; grid-template-columns: 212px 1fr 232px; min-height: 432px; }
.bw__left  { border-right: 1px solid var(--m-line); background: rgba(0,0,0,0.2); display: flex; flex-direction: column; min-width: 0; }
.bw__right { border-left: 1px solid var(--m-line);  background: rgba(0,0,0,0.16); display: flex; flex-direction: column; min-width: 0; }
.bw__center { position: relative; min-width: 0; }

/* left: panel tabs + search + components + layer tree */
.bw__ptabs { display: flex; gap: 14px; padding: 10px 12px 8px; border-bottom: 1px solid var(--m-line); }
.bw__ptab { font-size: 11.5px; color: var(--m-mute); padding-bottom: 6px; position: relative; }
.bw__ptab.is-active { color: #fff; }
.bw__ptab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad-90); }
.bw__pinput {
  margin: 10px 12px 4px; display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,0.3); border: 1px solid var(--m-line);
  color: var(--m-mute); font-size: 11px;
}
.bw__pinput svg { width: 12px; height: 12px; flex-shrink: 0; }
.bw__grouplbl { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-mute); padding: 12px 12px 6px; }
.bw__comps { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 2px 12px 12px; }
.comp {
  position: relative; padding: 9px 9px 8px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  border: 1px solid var(--m-line); overflow: hidden;
}
.comp__ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; margin-bottom: 7px;
  background: linear-gradient(135deg, rgba(0,212,255,0.16), rgba(124,58,237,0.14)); color: var(--c-cyan); }
.comp__ic svg { width: 13px; height: 13px; }
.comp__n { font-size: 11px; font-weight: 600; color: var(--m-text); line-height: 1.2; }
.comp__d { font-size: 9.5px; color: var(--m-mute); margin-top: 2px; line-height: 1.3; }
.comp__tag { position: absolute; top: 7px; right: 7px; font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 5px; border-radius: 4px; text-transform: uppercase; }
.comp__tag--pro { color: #ffd76b; background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.3); }
.comp__tag--biz { color: #8fb6ff; background: rgba(96,140,255,0.14); border: 1px solid rgba(96,140,255,0.3); }
.comp--active { border-color: rgba(0,212,255,0.4); box-shadow: inset 0 0 0 1px rgba(0,212,255,0.25), 0 0 16px -6px rgba(0,212,255,0.5); }

.bw__tree { margin-top: auto; border-top: 1px solid var(--m-line); padding: 10px 8px 12px; background: rgba(0,0,0,0.18); }
.bw__tree .bw__grouplbl { padding: 0 4px 8px; }
.tree-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: 11px; color: var(--m-dim); }
.tree-row svg { width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }
.tree-row .tw { color: var(--m-mute); width: 8px; text-align: center; flex-shrink: 0; font-size: 9px; }
.tree-row.lvl2 { padding-left: 16px; }
.tree-row.lvl3 { padding-left: 28px; }
.tree-row.is-sel { background: rgba(0,212,255,0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,212,255,0.22); }
.tree-row.is-sel svg { opacity: 1; color: var(--c-cyan); }

/* center: canvas + device */
.bw__canvas {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(60% 50% at 30% 18%, rgba(0,212,255,0.10), transparent 60%),
    radial-gradient(60% 60% at 78% 86%, rgba(236,72,153,0.08), transparent 60%),
    #06080F;
  display: grid; place-items: center;
}
.bw__canvas::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
.bw__canvaslbl {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; color: var(--m-mute);
  padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.4); border: 1px solid var(--m-line);
}
.bw__canvasbadge {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--m-dim);
  padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.4); border: 1px solid var(--m-line);
}
.bw__canvasbadge .live { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; animation: liveBlink 2.2s ease-in-out infinite; }
@keyframes liveBlink { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* iPhone device inside the canvas */
.iphone {
  position: relative; z-index: 2; width: 210px; height: 416px;
  border-radius: 38px; padding: 8px;
  background: linear-gradient(160deg, #2A2F3E, #0d1018 60%);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 1px rgba(0,0,0,0.6);
}
.iphone::after { /* side button */ content:''; position:absolute; right:-2px; top:120px; width:2px; height:42px; border-radius:2px; background:#2A2F3E; }
.iphone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden;
  background: linear-gradient(185deg, #0B0F1C 0%, #080B14 100%);
}
.iphone__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 19px; border-radius: 12px; background: #000; z-index: 5;
}
.iphone__status {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px 0; font-size: 9.5px; font-weight: 600; color: #fff;
}
.iphone__status .ic { display: inline-flex; gap: 3px; align-items: center; }
.iphone__status .ic svg { width: 11px; height: 11px; }
.iphone__app { padding: 14px 14px 0; position: relative; height: calc(100% - 30px); }
.iphone__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.iphone__topbar .name { font-size: 11px; font-weight: 700; color: #fff; }
.iphone__topbar .links { display: flex; gap: 10px; font-size: 9px; color: var(--m-mute); }
.iphone__h1 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fff; margin-bottom: 7px; }
.iphone__h1 span { background: var(--grad-90); -webkit-background-clip: text; background-clip: text; color: transparent; }
.iphone__p { font-size: 9px; color: var(--m-dim); line-height: 1.5; margin-bottom: 13px; }
.iphone__cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
  font-size: 9.5px; font-weight: 700; color: #061018; background: var(--grad-90); box-shadow: 0 8px 18px -8px rgba(0,212,255,0.7); margin-bottom: 14px; }
.iphone__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.iphone__card { padding: 10px; border-radius: 11px; background: #11162400; background: rgba(20,26,42,0.9); border: 1px solid #20283C; position: relative; }
.iphone__card .ci { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(124,58,237,0.18)); color: var(--c-cyan); }
.iphone__card .ci svg { width: 11px; height: 11px; }
.iphone__card .ct { font-size: 9.5px; font-weight: 700; color: #fff; }
.iphone__card .cd { font-size: 7.5px; color: var(--m-mute); margin-top: 2px; line-height: 1.35; }
.iphone__card .carrow { position: absolute; bottom: 8px; right: 9px; color: var(--c-cyan); }
.iphone__card--sel { border-color: rgba(0,212,255,0.0); }

/* selection overlay drawn over the selected card */
.bw__select {
  position: absolute; z-index: 6; border: 1.5px solid var(--c-cyan);
  border-radius: 11px; box-shadow: 0 0 0 3px rgba(0,212,255,0.14), 0 0 22px -4px rgba(0,212,255,0.6);
  pointer-events: none;
}
.bw__select::before, .bw__select::after,
.bw__select > i { content: ''; position: absolute; width: 6px; height: 6px; background: #06080F; border: 1.5px solid var(--c-cyan); border-radius: 1px; }
.bw__select::before { top: -4px; left: -4px; }
.bw__select::after  { top: -4px; right: -4px; }
.bw__select > i.bl  { bottom: -4px; left: -4px; }
.bw__select > i.br  { bottom: -4px; right: -4px; }
.bw__selecttag {
  position: absolute; top: -22px; left: -1.5px; white-space: nowrap;
  font-size: 9px; font-weight: 600; color: #061018; background: var(--c-cyan);
  padding: 2px 7px; border-radius: 5px; font-family: var(--font-mono);
}

/* right: inspector */
.bw__itabs { display: flex; gap: 13px; padding: 10px 14px 8px; border-bottom: 1px solid var(--m-line); }
.bw__itab { font-size: 11.5px; color: var(--m-mute); padding-bottom: 6px; position: relative; }
.bw__itab.is-active { color: #fff; }
.bw__itab.is-active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background: var(--grad-90); }
.bw__ihead { padding: 11px 14px; border-bottom: 1px solid var(--m-line); }
.bw__ihead .t { font-size: 12.5px; font-weight: 700; color: #fff; display:flex; align-items:center; gap:7px; }
.bw__ihead .t .sw { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg,#301DFF,#903DFF); }
.bw__ihead .s { font-size: 10px; color: var(--m-mute); margin-top: 2px; }
.bw__iscroll { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.igrp__lbl { display: flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-mute); margin-bottom: 9px; }
.igrp__lbl::before { content:''; width: 5px; height: 5px; border-radius: 1px; background: var(--c-cyan); box-shadow: 0 0 6px var(--c-cyan); }
.irow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px; }
.ifield { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,0.28); border: 1px solid var(--m-line); }
.ifield .k { font-size: 9.5px; color: var(--m-mute); }
.ifield .v { font-size: 10.5px; color: var(--m-text); font-family: var(--font-mono); margin-left: auto; }
.ifield--full { grid-column: 1 / -1; }
.ifield .sw { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.16); flex-shrink: 0; }
.iselect { display: flex; align-items: center; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,0.28); border: 1px solid var(--m-line); font-size: 10.5px; color: var(--m-text); grid-column: 1/-1; }
.iselect .caret { margin-left: auto; color: var(--m-mute); }
.islider { grid-column: 1/-1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); position: relative; margin: 4px 0 2px; }
.islider::before { content:''; position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:3px; background: var(--grad-90); }
.islider::after { content:''; position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.5); }
.igrp--collapsed { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--m-line); }
.igrp--collapsed .igrp__lbl { margin: 0; }
.igrp--collapsed .caret { color: var(--m-mute); }

/* status bar */
.bw__status {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 14px; border-top: 1px solid var(--m-line);
  background: rgba(0,0,0,0.28); font-size: 10.5px; color: var(--m-mute); font-family: var(--font-mono);
}
.bw__status .ok { color: #34D399; display: inline-flex; align-items: center; gap: 5px; }
.bw__status .ok::before { content:''; width:5px; height:5px; border-radius:50%; background:#34D399; box-shadow:0 0 6px #34D399; }
.bw__status .sp { flex: 1; }
.bw__status .pill { color: var(--c-cyan); }

/* ===========================================================================
   2) MULTI-DEVICE PREVIEW  (one project → Windows / iPad / iPhone / Android)
   =========================================================================== */
.devices {
  display: grid; grid-template-columns: 1.35fr 1fr 0.62fr 0.62fr; gap: 18px; align-items: end;
  padding: 30px 28px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(124,58,237,0.12), transparent 60%),
    linear-gradient(180deg, #0A0E1A, #07090F);
}
.dvc { position: relative; }
.dvc__label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--m-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.dvc__label svg { width: 12px; height: 12px; color: var(--c-cyan); }
.dvc__screen {
  border-radius: 12px; overflow: hidden; background: linear-gradient(185deg,#0C1120,#080B14);
  border: 1px solid var(--m-line-2); position: relative;
}
.dvc__app { padding: 12px; }
.dvc__h { font-size: 12px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 5px; }
.dvc__h span { background: var(--grad-90); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dvc__sub { font-size: 8.5px; color: var(--m-mute); line-height: 1.5; margin-bottom: 10px; }
.dvc__btn { display: inline-block; padding: 6px 11px; border-radius: 7px; font-size: 8.5px; font-weight: 700; color: #061018; background: var(--grad-90); margin-bottom: 11px; }
.dvc__cards { display: grid; gap: 7px; }
.dvc__c { padding: 8px; border-radius: 8px; background: rgba(20,26,42,0.85); border: 1px solid #20283C; }
.dvc__c .l { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(124,58,237,0.2)); margin-bottom: 18px; }
.dvc__c .t { font-size: 8.5px; font-weight: 700; color: #fff; }
.dvc__c .d { font-size: 7px; color: var(--m-mute); margin-top: 2px; }

/* desktop window variant */
.dvc--win .dvc__screen { border-radius: 10px; }
.dvc--win .dvc__bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--m-line); background: rgba(0,0,0,0.3); }
.dvc--win .dvc__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-line-2); }
.dvc--win .dvc__bar i:nth-child(1){ background:#FF6058 } .dvc--win .dvc__bar i:nth-child(2){ background:#FFBD2E } .dvc--win .dvc__bar i:nth-child(3){ background:#28CA42 }
.dvc--win .dvc__bar .u { margin-left: 8px; font-size: 8px; color: var(--m-mute); font-family: var(--font-mono); }
.dvc--win .dvc__cards { grid-template-columns: 1fr 1fr 1fr; }

/* tablet (iPad) */
.dvc--pad .dvc__screen { border-radius: 16px; padding: 8px; border-width: 4px; }
.dvc--pad .dvc__cards { grid-template-columns: 1fr 1fr; }

/* phones */
.dvc--ios .dvc__screen, .dvc--and .dvc__screen { border-radius: 22px; padding: 6px; border-width: 4px; }
.dvc--ios .dvc__notch { width: 42px; height: 12px; border-radius: 8px; background:#000; margin: 2px auto 8px; }
.dvc--and .dvc__notch { width: 8px; height: 8px; border-radius: 50%; background:#000; margin: 4px auto 8px; }
.dvc--ios .dvc__cards, .dvc--and .dvc__cards { grid-template-columns: 1fr; }
.dvc__flow {
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 10px; color: var(--m-mute);
}

/* ===========================================================================
   3) AI ASSISTANT PANEL
   =========================================================================== */
.aip { display: grid; grid-template-columns: 1fr 270px; min-height: 360px; background: linear-gradient(180deg,#0B0F1C,#080B14); }
.aip__canvas { position: relative; border-right: 1px solid var(--m-line);
  background: radial-gradient(60% 50% at 40% 20%, rgba(0,212,255,0.09), transparent 60%), #06080F; display:grid; place-items:center; padding: 22px; }
.aip__canvas::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size:22px 22px; mask-image: radial-gradient(ellipse at center,#000 40%,transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center,#000 40%,transparent 80%); }
.aip__frame { position: relative; z-index: 1; width: 220px; border-radius: 16px; overflow: hidden; border: 1px solid var(--m-line-2); background: linear-gradient(185deg,#0C1120,#080B14); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8); }
.aip__frame .top { padding: 14px 14px 0; }
.aip__frame .h { font-size: 14px; font-weight: 800; color:#fff; letter-spacing:-0.01em; }
.aip__frame .h span { background: var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aip__frame .glow-card { margin: 12px 14px 14px; padding: 12px; border-radius: 11px; border: 1px solid rgba(0,212,255,0.4); background: linear-gradient(160deg, rgba(0,212,255,0.1), rgba(124,58,237,0.08)); box-shadow: 0 0 24px -6px rgba(0,212,255,0.5), inset 0 0 0 1px rgba(0,212,255,0.1); position: relative; }
.aip__frame .glow-card .badge { position:absolute; top:-9px; left:12px; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#061018; background:var(--grad-90); padding:2px 7px; border-radius:5px; }
.aip__frame .glow-card .ct { font-size:10px; font-weight:700; color:#fff; margin-bottom:4px; }
.aip__frame .glow-card .cl { height:5px; border-radius:3px; background:rgba(255,255,255,0.1); margin-bottom:5px; }
.aip__frame .glow-card .cl.w70{ width:70% } .aip__frame .glow-card .cl.w90{ width:90% } .aip__frame .glow-card .cl.grad{ background:var(--grad-90); opacity:0.7; width:50% }

.aip__panel { display: flex; flex-direction: column; background: rgba(0,0,0,0.2); }
.aip__phead { display:flex; align-items:center; gap:8px; padding: 12px 14px; border-bottom: 1px solid var(--m-line); }
.aip__phead .orb { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); display:grid; place-items:center; color:#061018; box-shadow:0 0 16px -2px rgba(124,58,237,0.7); }
.aip__phead .orb svg{ width:13px; height:13px; }
.aip__phead .t { font-size: 12px; font-weight: 700; color:#fff; }
.aip__phead .t small { display:block; font-size:9px; font-weight:500; color:var(--m-mute); }
.aip__phead .st { margin-left:auto; font-size:9px; color:#34D399; display:inline-flex; align-items:center; gap:5px; }
.aip__phead .st::before{ content:''; width:5px;height:5px;border-radius:50%;background:#34D399;box-shadow:0 0 6px #34D399 }
.aip__chat { flex:1; padding: 13px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.msg { max-width: 90%; font-size: 10.5px; line-height: 1.5; padding: 9px 11px; border-radius: 11px; }
.msg--user { align-self: flex-end; background: rgba(255,255,255,0.06); border:1px solid var(--m-line); color: var(--m-text); border-bottom-right-radius:4px; }
.msg--ai { align-self: flex-start; background: linear-gradient(160deg, rgba(0,212,255,0.08), rgba(124,58,237,0.06)); border:1px solid rgba(0,212,255,0.22); color: var(--m-text); border-bottom-left-radius:4px; }
.msg--ai b { color:#fff; }
.msg__chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.msg__chip { font-size:9px; padding:3px 8px; border-radius:999px; background:rgba(0,212,255,0.12); border:1px solid rgba(0,212,255,0.3); color:var(--c-cyan); }
.msg__apply { display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-size:9.5px; font-weight:700; color:#061018; background:var(--grad-90); padding:5px 10px; border-radius:7px; }
.aip__input { margin: 0 13px 13px; display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius:9px; background:rgba(0,0,0,0.34); border:1px solid var(--m-line-2); }
.aip__input .ph { flex:1; font-size:10px; color:var(--m-mute); }
.aip__input .send { width:22px; height:22px; border-radius:6px; background:var(--grad-90); display:grid; place-items:center; color:#061018; }
.aip__input .send svg{ width:11px; height:11px; }
.typing { display:inline-flex; gap:3px; align-items:center; }
.typing i { width:4px; height:4px; border-radius:50%; background:var(--c-cyan); animation: typedot 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes typedot { 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-2px) } }

/* ===========================================================================
   4) BUILD / EXPORT (DEPLOY) PANEL
   =========================================================================== */
.deploy { display: grid; grid-template-columns: 200px 1fr; min-height: 360px; background: linear-gradient(180deg,#0B0F1C,#080B14); }
.deploy__side { border-right: 1px solid var(--m-line); background: rgba(0,0,0,0.2); padding: 14px 12px; }
.deploy__side .h { font-size: 9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--m-mute); margin: 4px 4px 10px; }
.tgt { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; margin-bottom:6px; border:1px solid transparent; font-size:11.5px; color:var(--m-dim); }
.tgt svg.os { width:16px; height:16px; flex-shrink:0; }
.tgt .nm { color: var(--m-text); }
.tgt .ck { margin-left:auto; width:15px; height:15px; border-radius:5px; display:grid; place-items:center; border:1px solid var(--m-line-2); color:transparent; }
.tgt.on { background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.28); color:#fff; }
.tgt.on .ck { background: var(--grad-90); border-color:transparent; color:#061018; }
.tgt.on .ck svg { width:10px; height:10px; }
.tgt.off { opacity: 0.6; }

.deploy__main { padding: 16px 18px; display:flex; flex-direction:column; gap:14px; }
.deploy__row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.deploy__title { font-size: 13px; font-weight:700; color:#fff; }
.deploy__title small { display:block; font-size:10px; font-weight:500; color:var(--m-mute); margin-top:2px; }
.profile { display:flex; gap:7px; flex-wrap:wrap; }
.profile span { font-size:10px; padding:4px 9px; border-radius:7px; border:1px solid var(--m-line); color:var(--m-dim); }
.profile span.on { background:rgba(124,58,237,0.16); border-color:rgba(124,58,237,0.4); color:#c9b4ff; }
.build-card { border:1px solid var(--m-line); border-radius:11px; background:rgba(0,0,0,0.22); overflow:hidden; }
.build-card .bc-top { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--m-line); }
.build-card .bc-top .ico { width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,rgba(0,212,255,0.18),rgba(124,58,237,0.16)); color:var(--c-cyan); display:grid; place-items:center; }
.build-card .bc-top .ico svg{ width:14px;height:14px }
.build-card .bc-top .nm { font-size:11.5px; font-weight:600; color:#fff; }
.build-card .bc-top .nm small{ display:block; font-size:9.5px; font-weight:500; color:var(--m-mute); font-family:var(--font-mono); }
.build-card .bc-top .pct { margin-left:auto; font-size:11px; font-family:var(--font-mono); color:var(--c-cyan); }
.bc-prog { height:6px; background:rgba(255,255,255,0.07); position:relative; }
.bc-prog i { position:absolute; left:0; top:0; bottom:0; border-radius:0 3px 3px 0; background:var(--grad-90); box-shadow:0 0 12px rgba(0,212,255,0.6); }
.bc-prog i.anim { animation: bcfill 3.4s var(--ease-out) infinite; }
@keyframes bcfill { 0%{ width:8% } 70%{ width:96% } 100%{ width:96% } }
.artifacts { display:flex; flex-direction:column; gap:6px; }
.arti { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:9px; background:rgba(255,255,255,0.025); border:1px solid var(--m-line); font-size:10.5px; }
.arti svg { width:13px; height:13px; color:var(--m-mute); flex-shrink:0; }
.arti .nm { color:var(--m-text); font-family:var(--font-mono); }
.arti .sz { margin-left:auto; color:var(--m-mute); font-family:var(--font-mono); }
.arti .ok { color:#34D399; display:inline-flex; align-items:center; gap:4px; }
.arti .ok svg { color:#34D399; }
.deploy__cta { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; padding:9px 16px; border-radius:9px; font-size:11.5px; font-weight:700; color:#061018; background:var(--grad-90); box-shadow:0 8px 20px -8px rgba(0,212,255,0.6); }
.deploy__cta svg{ width:13px;height:13px }

/* ===========================================================================
   5) READINESS / QUALITY DASHBOARD
   =========================================================================== */
.ready { display:grid; grid-template-columns: 218px 1fr; min-height: 360px; background: linear-gradient(180deg,#0B0F1C,#080B14); }
.ready__score { border-right:1px solid var(--m-line); padding: 20px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; background:rgba(0,0,0,0.18); }
.ring { position:relative; width:128px; height:128px; margin: 6px 0 14px; }
.ring svg { transform: rotate(-90deg); }
.ring__track { fill:none; stroke:rgba(255,255,255,0.07); stroke-width:11; }
.ring__val { fill:none; stroke:url(#ringgrad); stroke-width:11; stroke-linecap:round; stroke-dasharray: 339.292; stroke-dashoffset: 44.1; filter: drop-shadow(0 0 6px rgba(0,212,255,0.5)); }
.ring__num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring__num b { font-size: 30px; font-weight:800; color:#fff; letter-spacing:-0.02em; line-height:1; }
.ring__num b small { font-size:13px; color:var(--m-mute); font-weight:600; }
.ring__num span { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--m-mute); margin-top:5px; }
.ready__verdict { font-size:11px; color:#34D399; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; }
.ready__modes { width:100%; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.ready__modes span { font-size:9px; padding:3px 8px; border-radius:999px; border:1px solid var(--m-line); color:var(--m-dim); }
.ready__modes span.on { background:rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.3); color:var(--c-cyan); }

.ready__main { padding: 16px 18px; display:flex; flex-direction:column; gap:13px; }
.ready__stats { display:grid; grid-template-columns: repeat(4,1fr); gap:9px; }
.rstat { padding:11px; border-radius:10px; background:rgba(255,255,255,0.025); border:1px solid var(--m-line); }
.rstat b { font-size:17px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.rstat span { display:block; font-size:9px; color:var(--m-mute); margin-top:2px; }
.ready__bars { display:flex; flex-direction:column; gap:9px; }
.rbar { }
.rbar .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; font-size:10.5px; }
.rbar .top .nm { color:var(--m-text); display:inline-flex; align-items:center; gap:7px; }
.rbar .top .nm svg{ width:12px; height:12px; color:var(--c-cyan); }
.rbar .top .pc { font-family:var(--font-mono); color:var(--m-dim); }
.rbar .trk { height:6px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; }
.rbar .trk i { display:block; height:100%; border-radius:3px; background:var(--grad-90); }
.audit { display:flex; flex-direction:column; gap:5px; }
.audit .a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,0.02); border:1px solid var(--m-line); font-size:10.5px; color:var(--m-dim); }
.audit .a .dot { width:14px;height:14px;border-radius:5px;display:grid;place-items:center;flex-shrink:0; }
.audit .a .dot svg{ width:9px;height:9px }
.audit .a .pass { background:rgba(52,211,153,0.14); color:#34D399; }
.audit .a .warn { background:rgba(251,191,36,0.14); color:#FBBF24; }

/* ===========================================================================
   6) COMMAND PALETTE  (⌘K overlay)
   =========================================================================== */
.cmdp { width: 100%; max-width: 520px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: rgba(10,13,22,0.96); border: 1px solid var(--m-line-2);
  box-shadow: 0 40px 90px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,212,255,0.1), 0 0 60px -20px rgba(124,58,237,0.5); }
.cmdp__in { display:flex; align-items:center; gap:11px; padding: 14px 16px; border-bottom: 1px solid var(--m-line); }
.cmdp__in svg { width:16px; height:16px; color:var(--c-cyan); }
.cmdp__in .q { flex:1; font-size:13px; color:var(--m-text); }
.cmdp__in .q b { color:#fff; border-right:1.5px solid var(--c-cyan); padding-right:1px; animation: caret 1.1s step-end infinite; }
@keyframes caret { 50%{ border-color: transparent } }
.cmdp__in kbd { font-family:var(--font-mono); font-size:10px; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,0.06); border:1px solid var(--m-line-2); color:var(--m-dim); }
.cmdp__sec { font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--m-mute); padding: 11px 16px 5px; }
.cmdp__row { display:flex; align-items:center; gap:11px; padding: 9px 16px; font-size:12px; color:var(--m-dim); }
.cmdp__row .ic { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,0.045); border:1px solid var(--m-line); color:var(--m-dim); flex-shrink:0; }
.cmdp__row .ic svg{ width:13px; height:13px }
.cmdp__row .nm { color:var(--m-text); }
.cmdp__row .hint { margin-left:auto; font-family:var(--font-mono); font-size:9.5px; color:var(--m-mute); }
.cmdp__row.on { background: linear-gradient(90deg, rgba(0,212,255,0.1), transparent); }
.cmdp__row.on .ic { background: var(--grad-90); border-color:transparent; color:#061018; }
.cmdp__row.on .nm { color:#fff; }

/* ===========================================================================
   SHOWCASE LAYOUT  (alternating copy + mockup rows)
   =========================================================================== */
.showcase { display:flex; flex-direction:column; gap: clamp(56px, 8vw, 104px); }
.show-row { display:grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(28px, 4vw, 60px); align-items:center; }
.show-row--flip .show-copy { order: 2; }
.show-row--flip .show-art  { order: 1; }
.show-copy .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--c-cyan); margin-bottom:16px; }
.show-copy .eyebrow .n { width:22px; height:22px; border-radius:6px; background:var(--grad-soft); border:1px solid var(--border-strong); display:grid; place-items:center; color:var(--c-cyan); }
.show-copy .eyebrow .n svg{ width:12px; height:12px }
.show-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); letter-spacing:-0.025em; line-height:1.12; margin-bottom:14px; }
.show-copy p { font-size: 1.02rem; color: var(--text-dim); line-height:1.7; margin-bottom: 18px; max-width: 460px; }
.show-list { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.show-list li { display:flex; align-items:flex-start; gap:11px; font-size:0.95rem; color:var(--text-dim); }
.show-list li svg { flex-shrink:0; width:18px; height:18px; color:var(--c-cyan); margin-top:2px; }
.show-art { perspective: 1800px; }
.mock-cap { margin-top:16px; text-align:center; font-size:0.82rem; color:var(--text-mute); font-family:var(--font-mono); }

/* full-bleed showcase (device row) */
.showcase__full { margin-top: clamp(56px, 8vw, 100px); }

/* ===========================================================================
   INDEX REFINEMENTS  (hero, platform-flow, marquee, polish)
   =========================================================================== */
.hero__device--studio { transform: none !important; animation: heroFloat 11s ease-in-out infinite; margin-top: clamp(54px, 7vw, 92px); width: 100%; max-width: none; }
@keyframes heroFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
.hero__device--studio::before { inset: -70px -50px 30px; background: radial-gradient(ellipse at top, rgba(124,58,237,0.32) 0%, transparent 66%); }
.hero__shotwrap { position: relative; overflow-x: auto; scrollbar-width: none; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.hero__shotwrap::-webkit-scrollbar { display: none; }

/* platform flow: one Windows program -> four targets */
.flow { display:grid; grid-template-columns: auto auto 1fr; gap: 26px; align-items:center; }
.flow__source {
  padding: 26px 22px; border-radius: 18px; text-align:center; min-width: 196px;
  background: linear-gradient(180deg, rgba(0,212,255,0.07), transparent), var(--surface);
  border: 1px solid rgba(0,212,255,0.4); position:relative;
}
.flow__source::after { content:''; position:absolute; top:0; left:18px; right:18px; height:2px; background:var(--grad-90); border-radius:2px; }
.flow__source .ic { width:54px; height:54px; margin:0 auto 14px; border-radius:14px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--border-strong); color:var(--c-cyan); }
.flow__source .t1 { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-cyan); font-weight:700; margin-bottom:6px; }
.flow__source .t2 { font-size:1.15rem; font-weight:700; color:var(--text); letter-spacing:-0.02em; }
.flow__source .t3 { font-size:0.82rem; color:var(--text-mute); margin-top:4px; }
.flow__arrow { color: var(--text-mute); display:grid; place-items:center; }
.flow__targets { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.ptile { padding: 18px 12px; border-radius:14px; text-align:center; background:var(--surface); border:1px solid var(--border); transition: transform .25s var(--ease-out), border-color .25s; }
.ptile:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.ptile .ic { width:42px; height:42px; margin:0 auto 11px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,0.04); border:1px solid var(--border-strong); color:var(--text); }
.ptile .nm { font-size:0.92rem; font-weight:600; color:var(--text); }
.ptile .rl { font-size:0.72rem; color:var(--text-mute); margin-top:3px; }

/* section sub-eyebrow used in a few places */
.lead-tight { max-width: 680px; margin: 0 auto; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1080px) {
  .show-row { grid-template-columns: 1fr; gap: 30px; }
  .show-row--flip .show-copy, .show-row--flip .show-art { order: initial; }
  .show-copy p, .show-list { max-width: none; }
  .flow { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .flow__arrow { transform: rotate(90deg); }
  .flow__targets { width: 100%; }
}
@media (max-width: 980px) {
  .bw__right { display: none; }
  .bw__body { grid-template-columns: 200px 1fr; }
  .devices { grid-template-columns: 1fr 1fr; gap: 30px 18px; padding: 30px 20px; }
}
@media (max-width: 720px) {
  .bw { min-width: 660px; } /* keep proportions; wrapper scrolls horizontally */
  .aip { grid-template-columns: 1fr; }
  .aip__canvas { display: none; }
  .deploy { grid-template-columns: 1fr; }
  .deploy__side { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--m-line); }
  .deploy__side .h { display: none; }
  .tgt { white-space: nowrap; margin-bottom: 0; }
  .ready { grid-template-columns: 1fr; }
  .ready__score { border-right: 0; border-bottom: 1px solid var(--m-line); }
  .ready__stats { grid-template-columns: 1fr 1fr; }
  .flow__targets { grid-template-columns: 1fr 1fr; }
  .devices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero__device--studio { margin-top: 40px; }
  .mock-frame { padding: 6px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__device--studio, .bc-prog i.anim, .bw__canvasbadge .live, .typing i, .cmdp__in .q b { animation: none !important; }
  .bc-prog i.anim { width: 78% !important; }
}

/* ===========================================================================
   PRICING  (five real tiers from the app's entitlement model)
   =========================================================================== */
.pricing {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 8px;
}
.price-card {
  --tier: var(--c-cyan);
  display: flex; flex-direction: column;
  padding: 26px 20px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.price-card--featured {
  border-color: color-mix(in srgb, var(--tier) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 8%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--tier) 50%, transparent);
}
.price-card--featured::before {
  content: ''; position: absolute; inset: -1px; border-radius: 18px; padding: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 70%, transparent), transparent 55%);
  -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;
}
.price-card__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #06080F; background: var(--tier); padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--tier) 70%, transparent);
}
.price-card__tier {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tier); margin-bottom: 14px;
}
.price-card__tier::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tier); box-shadow: 0 0 10px var(--tier); }
.price-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.price-card__amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1; }
.price-card__per { font-size: 0.78rem; color: var(--text-mute); font-weight: 500; }
.price-card__who { font-size: 0.84rem; color: var(--text-dim); margin: 8px 0 18px; line-height: 1.5; min-height: 38px; }
.price-card__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.price-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--text-dim); line-height: 1.45; }
.price-card__list li svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--tier); margin-top: 2px; }
.price-card__list li.muted { color: var(--text-mute); }
.price-card__list li.muted svg { color: var(--text-mute); }
.price-card__list li b { color: var(--text); font-weight: 600; }
.price-card__cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 12px 14px; border-radius: 11px;
  font-size: 0.88rem; font-weight: 600;
  background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border-strong);
  transition: background .2s, border-color .2s, transform .15s;
}
.price-card__cta:hover { background: rgba(255,255,255,0.07); border-color: var(--tier); transform: translateY(-1px); }
.price-card--featured .price-card__cta { background: var(--tier); color: #06080F; border-color: transparent; }
.price-card--featured .price-card__cta:hover { filter: brightness(1.08); }
.pricing-note {
  margin: 26px auto 0; max-width: 760px; text-align: center;
  font-size: 0.9rem; color: var(--text-dim); line-height: 1.6;
  padding: 14px 20px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
}
.pricing-note strong { color: var(--text); font-weight: 600; }

@media (max-width: 1120px) {
  .pricing { grid-template-columns: repeat(3, 1fr); }
  .price-card__who { min-height: 0; }
}
@media (max-width: 760px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pricing { grid-template-columns: 1fr; }
}