/* ============================================================
   WORKSPACES v2 — Marketing Site
   ============================================================ */

/* ── TOKENS ── */
:root {
  --bg:            #0B0C0F;
  --bg-elevated:   #101216;
  --surface:       #16181D;
  --surface-hi:    #1C1F26;
  --text:          #ECEDEF;
  --text-sec:      #9BA1AC;
  --text-muted:    #6B7280;
  --accent:        #4F6BED;
  --accent-hover:  #6075F0;
  --accent-dim:    rgba(79,107,237,0.12);
  --accent-glow:   rgba(79,107,237,0.20);
  --border:        rgba(255,255,255,0.08);
  --border-hi:     rgba(255,255,255,0.14);
  --success:       #3FB950;

  /* Typography scale */
  --fs-h1:        clamp(68px, 9.5vw, 130px);
  --fs-section:   clamp(46px, 6.5vw, 90px);
  --fs-feature:   clamp(34px, 4vw, 56px);
  --fs-pullquote: clamp(36px, 5vw, 68px);
  --fs-decimal:   clamp(120px, 17vw, 220px);
  --track-tight:  -0.035em;
  --track-med:    -0.025em;
  --decimal-ink:  rgba(255,255,255,0.13);

  /* Radius */
  --r-sm:     8px;
  --r-md:     12px;
  --r-lg:     16px;
  --r-window: 11px;

  /* Shadows */
  --shadow-card:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-window: 0 20px 50px -10px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
  --shadow-float:  0 32px 80px -16px rgba(0,0,0,0.7), 0 0 0 1px var(--border);

  /* Spacing */
  --s1:2px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --max-w: 1120px;
  --section-py: clamp(100px,13vh,180px);
}

[data-theme="light"] {
  --bg:          #F5F6F8;
  --bg-elevated: #ECEDF0;
  --surface:     #FFFFFF;
  --surface-hi:  #F0F1F4;
  --text:        #16181D;
  --text-sec:    #5A6069;
  --text-muted:  #909399;
  --border:      rgba(0,0,0,0.08);
  --border-hi:   rgba(0,0,0,0.14);
  --decimal-ink: rgba(0,0,0,0.09);
  --shadow-card:   0 1px 3px rgba(0,0,0,0.10);
  --shadow-window: 0 20px 50px -10px rgba(0,0,0,0.14), 0 0 0 1px var(--border);
  --shadow-float:  0 32px 80px -16px rgba(0,0,0,0.18), 0 0 0 1px var(--border);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}
body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  transition: background 0.2s, color 0.2s;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img,svg { display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
em { font-style:normal; color:var(--text); }

/* ── UTILS ── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--s8); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; padding: 10px 20px;
  border-radius: var(--r-sm);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s, color 0.15s;
  position: relative; overflow: hidden;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,107,237,0.4); }
.btn--accent:active { transform: translateY(0); }
.btn--accent::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.18), transparent 60%);
  opacity:0; transition:opacity 0.2s; pointer-events:none;
}
.btn--accent:hover::after { opacity:1; }
.btn--ghost { color:var(--text-sec); border:1px solid var(--border-hi); }
.btn--ghost:hover { color:var(--text); background:var(--surface); transform:translateY(-1px); }
.btn--trial {
  background: #28C840; color: #fff;
  font-size: 16px; padding: 13px 28px; letter-spacing: -0.015em;
  box-shadow: 0 4px 24px rgba(40,200,64,0.35);
}
.btn--trial:hover { background: #22B035; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(40,200,64,0.45); }
.btn--trial:active { transform: translateY(0); }
.btn--sm { font-size:13px; padding:7px 14px; }
.btn--lg { font-size:16px; padding:13px 28px; }

/* ── TRAFFIC LIGHTS ── */
.traffic-light { display:inline-block; width:12px; height:12px; border-radius:50%; }
.tl-close { background:#FF5F57; }
.tl-min   { background:#FEBC2E; }
.tl-max   { background:#28C840; }

/* ── MAC WINDOW CHROME ── */
.mac-window__bar {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s3) var(--s4);
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border);
}

/* ── APP ICONS ── */
.app-icon {
  width: 28px; height: 28px; border-radius: 7px;
  flex-shrink: 0; position: relative; overflow: hidden; display: inline-block;
}
.app-icon::after { content:''; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.12); }
.app-icon--xs { width:16px; height:16px; border-radius:4px; }
.app-icon--terminal { background:#1A1A1A; }
.app-icon--terminal::before { content:'>'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; color:#33D17A; }
.app-icon--figma { background:linear-gradient(135deg,#F24E1E 0%,#A259FF 100%); }
.app-icon--figma::before { content:'F'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; }
.app-icon--slack { background:#4A154B; }
.app-icon--slack::before { content:'#'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#ECB22E; }
.app-icon--safari { background:linear-gradient(135deg,#006EFF,#56B4FF); }
.app-icon--safari::before { content:'◎'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; }
.app-icon--vscode { background:#0078D4; }
.app-icon--vscode::before { content:'<>'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:700; color:#fff; }
.app-icon--mail { background:#0A84FF; }
.app-icon--mail::before { content:'✉'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.app-icon--xs::before { font-size:8px; }

/* ── SPACE BADGE ── */
.space-badge {
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  color:var(--text-muted); background:var(--bg-elevated);
  border:1px solid var(--border); padding:2px 7px; border-radius:4px;
}
.space-badge--active {
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-dim);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ── REVEAL ── */
.reveal {
  opacity:0; transform:translateY(18px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}



/* ── TAGS ── */
.feat-tag { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s6); }
.tag {
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.1em; color:var(--text-muted);
  border:1px solid var(--border); padding:3px 8px; border-radius:4px;
  background:var(--surface);
}

/* ── SECTION DECIMAL ── */
.section--numbered { position:relative; overflow:hidden; }
.section__decimal {
  position:absolute; left:-0.06em; top:var(--s8);
  font-size:var(--fs-decimal); font-weight:700; line-height:0.85;
  color:var(--decimal-ink); pointer-events:none; user-select:none;
  font-family:var(--font-sans); letter-spacing:-0.04em;
  z-index:2;
}

/* ── ANNOUNCEMENT BAR ── */
.announce-bar {
  background:rgba(79,107,237,0.1); border-bottom:1px solid rgba(79,107,237,0.18);
  text-align:center; padding:8px 16px;
  font-size:13px; color:var(--text-sec);
  display:flex; align-items:center; justify-content:center; gap:var(--s4);
  position:fixed; top:0; left:0; right:0; z-index:102;
  height:37px;
}
.announce-bar__trial {
  color:#28C840; font-weight:600;
  transition:opacity 0.15s;
}
.announce-bar__trial:hover { opacity:0.8; }

/* ── NAV ── */
.nav {
  position:fixed; top:37px; left:0; right:0; z-index:100;
  height:60px; transition:background 0.25s, border-color 0.25s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(11,12,15,0.78);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--border);
}
[data-theme="light"] .nav.scrolled { background:rgba(245,246,248,0.82); }
.nav__inner { display:flex; align-items:center; height:60px; gap:var(--s8); }
.nav__brand { display:flex; align-items:center; gap:var(--s2); font-size:15px; font-weight:600; letter-spacing:-0.02em; color:var(--text); transition:opacity 0.15s; flex-shrink:0; }
.nav__brand:hover { opacity:0.75; }
.nav__glyph { color:var(--accent); flex-shrink:0; }
.nav__links { display:flex; align-items:center; gap:var(--s6); margin:0 auto; }
.nav__links a { font-size:14px; font-weight:500; color:var(--text-sec); transition:color 0.15s; position:relative; }
.nav__links a::after { content:''; position:absolute; bottom:-2px; left:0; right:100%; height:1px; background:var(--accent); transition:right 0.2s var(--ease-out); }
.nav__links a:hover { color:var(--text); }
.nav__links a:hover::after { right:0; }
.nav__actions { display:flex; align-items:center; gap:var(--s4); flex-shrink:0; }
.theme-toggle { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color 0.15s, background 0.15s; }
.theme-toggle:hover { color:var(--text); background:var(--surface); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.icon-sun { display:block; }
.icon-moon { display:none; }
[data-theme="light"] .icon-sun { display:none; }
[data-theme="light"] .icon-moon { display:block; }

/* ── HERO ── */
.hero {
  min-height:100svh; display:flex; align-items:center;
  padding: calc(97px + var(--s24)) 0 var(--s16);
  position:relative; overflow:hidden;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .hero {
  background-image: radial-gradient(rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero__glow {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1200px; height:700px;
  background:radial-gradient(ellipse at 50% -5%, rgba(79,107,237,0.16), transparent 60%);
  pointer-events:none;
}
.hero__inner { display:flex; flex-direction:column; align-items:center; gap:var(--s12); max-width:980px; margin:0 auto; }
.hero__top { text-align:center; display:flex; flex-direction:column; align-items:center; }

/* Large logo in hero */
.hero__logomark {
  margin-bottom:var(--s8);
  position:relative;
  opacity:0;
  transform:scale(0.9);
}
.hero__logomark::before {
  content:'';
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(79,107,237,0.18), transparent 65%);
  border-radius:50%;
  pointer-events:none;
}
.hero__logomark.appeared { opacity:1; transform:scale(1); transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }

.hero__appicon {
  display:block;
  width:96px; height:96px;
  border-radius:22px;
  position:relative; z-index:1;
  animation:iconBreathe 4s ease-in-out infinite;
}
@keyframes iconBreathe {
  0%,100% { box-shadow:0 8px 32px rgba(79,107,237,0.25), 0 0 0 1px rgba(79,107,237,0.15); }
  50%      { box-shadow:0 12px 48px rgba(79,107,237,0.45), 0 0 0 1px rgba(79,107,237,0.30); }
}
@keyframes breathe {
  0%,100% { filter:drop-shadow(0 0 4px rgba(79,107,237,0.4)); }
  50%      { filter:drop-shadow(0 0 14px rgba(79,107,237,0.75)); }
}

.hero__eyebrow { opacity:0; }
.hero__eyebrow.appeared { opacity:1; transition:opacity 0.5s 0.1s; }

.hero__h1 {
  font-size:var(--fs-h1); font-weight:600;
  letter-spacing:var(--track-tight); line-height:1.0;
  margin-bottom:var(--s6); margin-top:var(--s3);
  display:flex; flex-direction:column; align-items:center;
}
.h1-line1, .h1-line2 { display:block; opacity:0; transform:translateY(14px); }
.h1-line1.appeared { opacity:1; transform:translateY(0); transition:opacity 0.65s 0.18s var(--ease-out), transform 0.65s 0.18s var(--ease-out); }
.h1-line2.appeared { opacity:1; transform:translateY(0); transition:opacity 0.65s 0.28s var(--ease-out), transform 0.65s 0.28s var(--ease-out); }

.hero__sub {
  font-size:clamp(17px,1.9vw,21px); color:var(--text-sec); line-height:1.6;
  max-width:580px; margin-bottom:var(--s8);
  opacity:0; transform:translateY(10px);
}
.hero__sub.appeared { opacity:1; transform:translateY(0); transition:opacity 0.6s 0.4s var(--ease-out), transform 0.6s 0.4s var(--ease-out); }

.hero__cta { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; margin-bottom:var(--s3); opacity:0; }
.hero__cta.appeared { opacity:1; transition:opacity 0.5s 0.52s; }

.hero__meta { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); opacity:0; }
.hero__meta.appeared { opacity:1; transition:opacity 0.5s 0.62s; }

/* Hero Spaces strip */
.hero__spaces-wrap {
  width:100%; opacity:0; transform:translateY(16px);
}
.hero__spaces-wrap.appeared {
  opacity:1; transform:translateY(0);
  transition:opacity 0.7s 0.7s var(--ease-out), transform 0.7s 0.7s var(--ease-out);
}

.hero-spaces {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  margin-bottom:var(--s4);
}

.hspace {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease-spring);
  cursor:pointer;
}
.hspace:hover { border-color:var(--border-hi); transform:translateY(-2px); }
.hspace--active {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 20px -4px var(--accent-glow);
  animation:breatheCard 4s ease-in-out infinite;
}
@keyframes breatheCard {
  0%,100% { box-shadow:0 0 0 1px var(--accent), 0 0 14px -4px var(--accent-glow); }
  50%      { box-shadow:0 0 0 1px var(--accent), 0 0 28px -4px var(--accent-glow); }
}

.hspace__bar {
  display:flex; align-items:center; gap:4px; padding:6px 10px;
  background:var(--surface-hi); border-bottom:1px solid var(--border);
}
.hspace__dot { width:7px; height:7px; border-radius:50%; background:var(--border-hi); }
.hspace__title { margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--text-muted); }
.hspace--active .hspace__title { color:var(--accent); }

.hspace__body {
  padding:8px; display:flex; flex-direction:column; gap:4px; min-height:90px;
}
.hspace__win {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; flex:1;
  display:flex; align-items:center; justify-content:center;
}
.hspace__win--large  { flex:2.5; }
.hspace__win--small  { flex:1; }
.hspace__win--half   { flex:1; }
.hspace__win--full   { flex:1 0 100%; }

.hspace__pin {
  display:flex; align-items:center; gap:4px; padding:4px 6px;
  width:100%;
}
.hspace__pin--sm .hpin-badge, .hspace__pin--sm .hpin-lock { display:none; }
.hpin-icon { flex-shrink:0; }
.hpin-name { font-size:10px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.hpin-badge { font-family:var(--font-mono); font-size:8px; color:var(--accent); white-space:nowrap; }
.hpin-lock { flex-shrink:0; }
.hpin-safari   { @extend .app-icon--safari; }
.hpin-terminal { @extend .app-icon--terminal; }
.hpin-figma    { @extend .app-icon--figma; }
.hpin-slack    { @extend .app-icon--slack; }
.hpin-vscode   { @extend .app-icon--vscode; }
.hpin-mail     { @extend .app-icon--mail; }

/* Inline app icons in hero spaces (using same CSS sprites) */
.hpin-safari   { width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#006EFF,#56B4FF); position:relative; display:inline-block; flex-shrink:0; }
.hpin-terminal { width:16px; height:16px; border-radius:4px; background:#1A1A1A; position:relative; display:inline-block; flex-shrink:0; }
.hpin-figma    { width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#F24E1E,#A259FF); position:relative; display:inline-block; flex-shrink:0; }
.hpin-slack    { width:16px; height:16px; border-radius:4px; background:#4A154B; position:relative; display:inline-block; flex-shrink:0; }
.hpin-vscode   { width:16px; height:16px; border-radius:4px; background:#0078D4; position:relative; display:inline-block; flex-shrink:0; }
.hpin-mail     { width:16px; height:16px; border-radius:4px; background:#0A84FF; position:relative; display:inline-block; flex-shrink:0; }

/* Space tabs */
.hspace-tabs { display:flex; gap:var(--s2); justify-content:center; }
.hstab {
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  padding:5px 12px; border-radius:5px; color:var(--text-muted);
  border:1px solid var(--border); background:var(--surface);
  transition:all 0.2s; letter-spacing:0.04em;
}
.hstab:hover { color:var(--text); border-color:var(--border-hi); }
.hstab--active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.hstab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── FEATURE 01: PIN TO SPACES ── */
.feat-section {
  padding: var(--section-py) 0;
  background: var(--bg-elevated);
}
.feat-section__inner {
  display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s16); align-items:center;
  position:relative; z-index:2;
}
.feat-section__h2 {
  font-size:var(--fs-feature); font-weight:600;
  letter-spacing:var(--track-med); line-height:1.1;
  margin-bottom:var(--s6); margin-top:var(--s4);
}
.feat-section__copy p { font-size:17px; color:var(--text-sec); line-height:1.7; margin-bottom:var(--s4); }

/* Pin cards visual */
.pin-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
  padding-left:var(--s4);
}
.pin-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-window); overflow:hidden;
  box-shadow:var(--shadow-window);
  transition:transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.pin-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-float); }

.pin-card__bar {
  display:flex; align-items:center; gap:5px; padding:8px var(--s3);
  background:var(--surface-hi); border-bottom:1px solid var(--border);
}
.pin-card__body {
  padding:var(--s4); display:flex; flex-direction:column;
  align-items:center; gap:var(--s3); min-height:70px; justify-content:center;
}
.pin-card__name { font-size:13px; font-weight:500; }
.pin-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s2) var(--s3); border-top:1px solid var(--border);
  background:var(--bg-elevated);
}
.pin-lock { flex-shrink:0; }

/* ── FEATURE 02: PROFILES ── */
.profiles-section {
  padding: var(--section-py) 0;
  background: var(--bg);
}
.profiles-section__headline {
  margin-bottom:var(--s12); position:relative; z-index:2;
}
.profiles-section__headline h2 {
  font-size:var(--fs-section); font-weight:600;
  letter-spacing:var(--track-tight); line-height:1.0;
}
.profiles-section__body {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:start;
  position:relative; z-index:2;
}

/* Profile panel mockup */
.profile-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-float);
}
.profile-panel__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--border);
  background:var(--surface-hi);
}
.profile-panel__title { font-size:14px; font-weight:600; }
.profile-panel__add { font-size:18px; color:var(--accent); width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:background 0.15s; }
.profile-panel__add:hover { background:var(--accent-dim); }

.profile-list { padding:var(--s2); }
.plist-item {
  display:flex; align-items:center; gap:var(--s3);
  padding:10px var(--s4); border-radius:var(--r-sm);
  cursor:pointer; transition:background 0.15s;
}
.plist-item:hover { background:var(--surface-hi); }
.plist-item--active { background:var(--accent-dim); color:var(--accent); }
.plist-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.plist-dot--a { background:var(--accent); }
.plist-dot--b { background:#FF8C42; }
.plist-dot--c { background:var(--success); }
.plist-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.plist-name { font-size:14px; font-weight:500; }
.plist-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.plist-item--active .plist-meta { color:rgba(79,107,237,0.7); }
.plist-check { font-size:12px; }

/* Profile preview mini-spaces */
.profile-preview {
  margin:0 var(--s2) var(--s2); padding:var(--s4);
  background:var(--bg-elevated); border-radius:var(--r-md);
  border:1px solid var(--border); min-height:90px;
  position:relative; overflow:hidden;
}
.pp-spaces { display:flex; gap:var(--s2); }
.pp-hidden { display:none; }
.pp-space {
  flex:1; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:var(--s2) var(--s3);
  display:flex; flex-direction:column; gap:4px; position:relative;
  min-height:70px;
}
.pp-chip {
  display:flex; align-items:center; gap:4px; font-size:11px;
  color:var(--text-sec); font-weight:500;
  background:var(--surface-hi); padding:3px 6px; border-radius:4px;
}
.pp-label {
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9px; color:var(--text-muted); white-space:nowrap;
}

/* Profiles copy */
.profiles-desc { font-size:17px; color:var(--text-sec); line-height:1.7; margin-bottom:var(--s8); }

.restore-modes { display:flex; flex-direction:column; gap:var(--s4); margin-bottom:var(--s6); }
.restore-mode {
  padding:var(--s4) var(--s6);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); border-left:2px solid var(--accent);
  transition:border-color 0.2s, background 0.2s;
}
.restore-mode:hover { background:var(--surface-hi); border-left-color:var(--accent-hover); }
.restore-mode__label {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.08em; color:var(--accent); display:block; margin-bottom:var(--s2);
}
.restore-mode p { font-size:15px; color:var(--text-sec); line-height:1.65; }

/* ── FEATURE 03: SNAP ZONES ── */
.snap-section {
  padding: var(--section-py) 0;
  background: var(--bg-elevated);
}
.snap-section__inner {
  display:grid; grid-template-columns:4fr 7fr; gap:var(--s16); align-items:center;
  position:relative; z-index:2;
}
.snap-section__copy .feat-section__h2 { margin-top:var(--s4); }
.snap-section__copy p { font-size:17px; color:var(--text-sec); line-height:1.7; margin-bottom:var(--s4); }
.snap-note { font-size:14px; color:var(--text-muted); font-style:italic; margin-top:var(--s2); }

/* ── SNAP MODE TABS ── */
.snap-mode-tabs {
  display:flex; gap:4px; margin-bottom:var(--s3);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:3px; width:fit-content;
}
.snap-mtab {
  font-size:12px; font-weight:500; padding:5px 14px;
  border-radius:calc(var(--r-sm) - 2px); cursor:pointer;
  color:var(--text-muted); background:transparent; border:none;
  transition:background 0.15s, color 0.15s;
}
.snap-mtab:hover { color:var(--text); }
.snap-mtab--active { background:var(--surface-hi); color:var(--text); }

/* ── PINSNAP DEMO ── */
.pinsnap-canvas {
  aspect-ratio:16/10; background:var(--bg); border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-float);
  position:relative; overflow:hidden; touch-action:none; user-select:none;
}
.pinsnap-menubar {
  position:absolute; top:0; left:0; right:0; height:22px;
  background:rgba(16,18,22,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 var(--s3); gap:6px; z-index:10;
  color:var(--text-sec);
}
.pinsnap-menubar__time { margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--text-muted); }

/* Ghost preview */
.pinsnap-ghost {
  position:absolute; pointer-events:none; z-index:5;
  background:rgba(79,107,237,0.12); border:1.5px solid rgba(79,107,237,0.55);
  border-radius:var(--r-sm);
  opacity:0; transition:opacity 0.15s, left 0.2s var(--ease-out), top 0.2s var(--ease-out),
    width 0.2s var(--ease-out), height 0.2s var(--ease-out);
  display:flex; align-items:flex-end; padding:6px 8px;
}
.pinsnap-ghost.ghost-visible { opacity:1; }
.pinsnap-ghost__label {
  font-family:var(--font-mono); font-size:9px; color:var(--accent); opacity:0.8; white-space:nowrap;
}

/* Pins */
.pinsnap-pins { position:absolute; inset:0; pointer-events:none; }
.snap-pin {
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--surface-hi); border:1.5px solid var(--border-hi);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; pointer-events:none;
  opacity:0; transform:scale(0.6);
  transition:opacity 0.22s calc(var(--pin-delay, 0) * 1ms) var(--ease-spring),
             transform 0.22s calc(var(--pin-delay, 0) * 1ms) var(--ease-spring),
             background 0.12s, border-color 0.12s, box-shadow 0.12s;
  z-index:15;
}
/* Anchor positioning */
.snap-pin[data-anchor="tc"] { top:26px;  left:50%; transform:translateX(-50%) scale(0.6); }
.snap-pin[data-anchor="bc"] { bottom:6px; left:50%; transform:translateX(-50%) scale(0.6); }
.snap-pin[data-anchor="lc"] { left:6px;  top:50%;  transform:translateY(-50%) scale(0.6); }
.snap-pin[data-anchor="rc"] { right:6px; top:50%;  transform:translateY(-50%) scale(0.6); }
.snap-pin[data-anchor="tl"] { top:26px;  left:6px; }
.snap-pin[data-anchor="tr"] { top:26px;  right:6px; }
.snap-pin[data-anchor="bl"] { bottom:6px; left:6px; }
.snap-pin[data-anchor="br"] { bottom:6px; right:6px; }

.pinsnap-canvas.pins-visible .snap-pin {
  opacity:1; pointer-events:auto;
}
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="tc"] { transform:translateX(-50%) scale(1); }
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="bc"] { transform:translateX(-50%) scale(1); }
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="lc"] { transform:translateY(-50%) scale(1); }
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="rc"] { transform:translateY(-50%) scale(1); }
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="tl"],
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="tr"],
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="bl"],
.pinsnap-canvas.pins-visible .snap-pin[data-anchor="br"] { transform:scale(1); }

.snap-pin--active {
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 5px rgba(79,107,237,0.25) !important;
  transform:scale(1.15) !important;
  color:#fff;
}
.snap-pin--active[data-anchor="tc"] { transform:translateX(-50%) scale(1.15) !important; }
.snap-pin--active[data-anchor="bc"] { transform:translateX(-50%) scale(1.15) !important; }
.snap-pin--active[data-anchor="lc"] { transform:translateY(-50%) scale(1.15) !important; }
.snap-pin--active[data-anchor="rc"] { transform:translateY(-50%) scale(1.15) !important; }

/* Draggable window */
.pinsnap-window {
  position:absolute; width:40%; z-index:20;
  background:var(--surface); border:1px solid var(--border-hi);
  border-radius:var(--r-md); box-shadow:0 8px 32px rgba(0,0,0,0.5);
  cursor:grab; overflow:hidden;
  transition:left 0.38s var(--ease-spring), top 0.38s var(--ease-spring),
              width 0.38s var(--ease-spring), height 0.38s var(--ease-spring);
}
.pinsnap-window.dragging { cursor:grabbing; transition:none; box-shadow:0 16px 48px rgba(0,0,0,0.7); }
.pinsnap-window__bar {
  height:28px; background:var(--bg-elevated); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 8px; gap:5px;
}
.traffic-light {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.tl-close { background:#ff5f57; }
.tl-min   { background:#febc2e; }
.tl-max   { background:#28c840; }
.pinsnap-window__title {
  font-size:11px; color:var(--text-muted); margin-left:auto; margin-right:auto;
  position:absolute; left:0; right:0; text-align:center; pointer-events:none;
}
.pinsnap-window__body {
  padding:12px 10px; display:flex; flex-direction:column; gap:6px;
  min-height:60px;
}
.pinsnap-line {
  display:block; height:8px; border-radius:4px;
  background:var(--border-hi); opacity:0.6;
}
.pinsnap-line--1 { width:80%; }
.pinsnap-line--2 { width:60%; }
.pinsnap-line--3 { width:72%; }
.pinsnap-line--4 { width:40%; }

/* Pin label callout */
.pin-label {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:var(--surface-hi); border:1px solid var(--border-hi);
  border-radius:var(--r-sm); padding:5px 10px;
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  opacity:0; transform:translateX(-50%) translateY(4px);
  transition:opacity 0.15s, transform 0.15s; pointer-events:none; z-index:30;
}
.pin-label.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.pin-label__name { color:var(--text); }
kbd.pin-label__key {
  font-family:var(--font-mono); font-size:10px; color:var(--accent);
  background:var(--bg); border:1px solid var(--border);
  padding:2px 5px; border-radius:4px; display:inline-block;
}

/* Reset button */
.pinsnap-reset {
  position:absolute; top:30px; right:8px; z-index:25;
  background:var(--surface-hi); border:1px solid var(--border-hi);
  color:var(--text-muted); border-radius:var(--r-sm);
  font-size:11px; padding:3px 8px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity 0.2s, color 0.15s;
}
.pinsnap-reset:hover { color:var(--text); }
.pinsnap-canvas.is-snapped .pinsnap-reset { opacity:1; pointer-events:auto; }

/* Hint */
.pinsnap-hint {
  text-align:center; font-size:13px; color:var(--text-muted);
  margin-top:var(--s3); font-style:italic;
}

/* Snap board (board mode) */
.snap-board {
  position:absolute; inset:0; z-index:25;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,15,0.52);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity 0.18s;
}
.pinsnap-canvas.board-mode.board-open .snap-board { opacity:1; pointer-events:auto; }

/* CursorPinsPanel — faithful recreation */
.cpanel {
  background:rgba(22,24,30,0.90);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;
  padding:7px;
  width:228px;
  box-shadow:0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05) inset;
  display:flex;
  flex-direction:column;
  gap:3px;
}
[data-theme="light"] .cpanel {
  background:rgba(248,249,251,0.94);
  border-color:rgba(0,0,0,0.10);
  box-shadow:0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03) inset;
}
.board-open .cpanel {
  animation:cpanelIn 0.22s var(--ease-spring) forwards;
}
@keyframes cpanelIn {
  from { transform:scale(0.86); opacity:0; }
  to   { transform:scale(1);    opacity:1; }
}

.cpanel__sep {
  height:1px;
  background:rgba(255,255,255,0.08);
  margin:2px 0;
}
[data-theme="light"] .cpanel__sep { background:rgba(0,0,0,0.08); }

.cpanel__specials { display:grid; grid-template-columns:1fr; gap:3px; }
.cpanel__grid     { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.cpanel__thirds   { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.cpanel__twothirds { display:grid; grid-template-columns:1fr 1fr; gap:3px; }

.cpanel__chip {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px 4px 5px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text-sec);
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:500;
  line-height:1.2;
  transition:background 0.1s, border-color 0.1s, transform 0.08s, box-shadow 0.1s, color 0.1s;
}
.cpanel__chip:hover {
  background:rgba(79,107,237,0.18);
  border-color:rgba(79,107,237,0.4);
  color:var(--text);
}
.cpanel__chip--empty {
  pointer-events:none;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.cpanel__chip--hover {
  background:rgba(79,107,237,0.38) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  transform:scale(1.06);
  box-shadow:0 0 0 2px rgba(79,107,237,0.22) !important;
}
[data-theme="light"] .cpanel__chip {
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .cpanel__chip:hover {
  background:rgba(79,107,237,0.10);
  border-color:rgba(79,107,237,0.3);
}
.cpanel__icon {
  font-size:13px; line-height:1; display:block;
  color:var(--text-sec);
  transition:color 0.1s;
}
.cpanel__chip:hover .cpanel__icon { color:var(--accent); }
.cpanel__chip--hover .cpanel__icon { color:#fff; }
/* Special: full-screen chip is single wide row */
.cpanel__chip--wide {
  flex-direction:row;
  gap:6px;
  padding:6px 10px;
  justify-content:flex-start;
}

/* ── FEATURE 04: LOGIN RESTORE ── */
.login-section {
  padding: var(--section-py) 0;
  background: var(--bg);
  text-align:center;
}
.login-section__inner { max-width:720px; margin:0 auto; position:relative; z-index:2; }
.login-section__h2 {
  font-size:var(--fs-pullquote); font-weight:600;
  letter-spacing:var(--track-tight); line-height:1.05;
  margin-bottom:var(--s6); margin-top:var(--s3);
}
.login-section__body {
  font-size:17px; color:var(--text-sec); line-height:1.75;
  margin-bottom:var(--s8);
}

/* Progress bar */
.restore-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.restore-bar-track {
  width:320px; max-width:100%; height:3px;
  background:var(--border); border-radius:2px; overflow:hidden;
}
.restore-bar {
  height:100%; width:0%; background:var(--accent);
  border-radius:2px;
  transition:width 1.2s var(--ease-out);
}
.restore-bar-label {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  transition:color 0.3s;
}
.restore-bar-label.ready { color:var(--success); }

/* ── FEATURES 05+06: DETAIL CARDS ── */
.detail-cards { padding: var(--section-py) 0; background:var(--bg-elevated); }
.detail-cards__inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }

.detail-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s8);
  box-shadow:var(--shadow-card);
  transition:border-color 0.2s, background 0.2s, transform 0.25s var(--ease-spring);
  display:flex; flex-direction:column; gap:var(--s4);
}
.detail-card:hover { border-color:var(--border-hi); background:var(--surface-hi); transform:translateY(-2px); }
.detail-card .eyebrow { color:var(--text-muted); }
.detail-card h3 {
  font-size:clamp(24px,3vw,36px); font-weight:600;
  letter-spacing:var(--track-med); line-height:1.15;
}
.detail-card p { font-size:16px; color:var(--text-sec); line-height:1.7; }
.detail-card__visual { margin-top:auto; padding-top:var(--s4); }

/* Wide card variant */
.detail-card--wide { grid-column:1 / -1; flex-direction:row; gap:var(--s10); align-items:flex-start; }
.detail-card--wide .detail-card__copy { flex:0 0 42%; }
.detail-card--wide .detail-card__visuals { flex:1; display:flex; flex-direction:column; gap:var(--s6); }
.detail-card__bullets {
  list-style:none; padding:0; margin:var(--s4) 0 0;
  display:flex; flex-direction:column; gap:var(--s3);
}
.detail-card__bullets li {
  font-size:15px; color:var(--text-sec); line-height:1.65;
  padding-left:var(--s4); position:relative;
}
.detail-card__bullets li::before {
  content:''; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:0.7;
}

/* Dual display diagram */
.dual-display { display:flex; align-items:center; gap:var(--s3); }
.disp {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden; flex-shrink:0;
}
.disp--main { width:140px; }
.disp--ext  { width:100px; }
.disp__bar  { height:12px; background:var(--surface-hi); border-bottom:1px solid var(--border); }
.disp__body { padding:4px; min-height:70px; display:flex; gap:3px; }
.disp__win  { background:var(--surface); border:1px solid var(--border); border-radius:3px; flex:1; }
.disp__win--full { flex:none; width:100%; }
.disp__win--land { background:var(--accent-dim); border-color:rgba(79,107,237,0.3); }
.disp-arrow { flex-shrink:0; }

/* Menu bar dropdown mockup */
.menubar-detail { display:inline-block; }
.mb-bar {
  background:rgba(22,24,29,0.95); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:0 var(--s4); height:26px;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border); font-size:12px; color:var(--text-sec);
  min-width:280px;
}
[data-theme="light"] .mb-bar { background:rgba(240,240,244,0.95); }
.mb-right-items { display:flex; align-items:center; gap:var(--s3); }
.mb-icon-ws { color:var(--accent); display:flex; align-items:center; }
.mb-time { font-family:var(--font-mono); font-size:11px; }
.mb-left-text { font-size:12px; font-weight:500; }
.mb-dropdown {
  background:var(--surface); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  overflow:hidden; min-width:280px;
}
.mb-dd-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px var(--s4); font-size:13px; color:var(--text-sec);
  transition:background 0.1s, color 0.1s;
}
.mb-dd-item--header { font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; color:var(--text-muted); text-transform:uppercase; padding-top:var(--s3); }
.mb-dd-item--profile { cursor:pointer; }
.mb-dd-item--profile:hover { background:var(--accent-dim); color:var(--text); }
.mb-dd-item--active { background:var(--accent-dim); color:var(--accent); }
.mb-dd-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; }
.mb-dd-dot--a { background:var(--accent); }
.mb-dd-dot--b { background:#FF8C42; }
.mb-dd-arrow { color:var(--text-muted); font-size:10px; margin-left:auto; }
.mb-dd-sep { height:1px; background:var(--border); margin:4px 0; }
.mb-dd-shortcut { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

/* ── USE CASES ── */
.use-cases { padding:var(--section-py) 0; background:var(--bg); }
.use-cases .container { position:relative; z-index:2; }
.uc-header { text-align:center; margin-bottom:var(--s12); }
.uc-header h2 { font-size:var(--fs-section); font-weight:600; letter-spacing:var(--track-tight); line-height:1.05; margin-top:var(--s3); }

.uc-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
}

.uc-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s8);
  display:flex; flex-direction:column; gap:var(--s6);
  transition:border-color 0.2s, background 0.2s, transform 0.25s var(--ease-spring);
}
.uc-card:hover { border-color:var(--border-hi); background:var(--surface-hi); transform:translateY(-2px); }

.uc-role {
  display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
  background:rgba(79,107,237,0.1); border:1px solid rgba(79,107,237,0.2);
  border-radius:var(--r-sm); padding:3px 8px; margin-bottom:var(--s2);
}
.uc-card__name { font-size:clamp(22px,2.5vw,30px); font-weight:600; letter-spacing:var(--track-med); margin:0 0 var(--s3); }
.uc-card__scenario { font-size:15px; color:var(--text-sec); line-height:1.75; margin:0; }

.uc-profiles {
  display:flex; flex-direction:column; gap:var(--s2);
  border-top:1px solid var(--border); padding-top:var(--s4); margin-top:auto;
}
.uc-profile {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  background:var(--bg); border:1px solid var(--border);
}
.uc-profile__dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.uc-profile__detail { display:flex; flex-direction:column; gap:1px; min-width:0; }
.uc-profile__name { font-size:12px; font-weight:600; color:var(--text); }
.uc-profile__apps { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── PRICING ── */
.pricing-section {
  padding: var(--section-py) 0;
  background: var(--bg);
}
.pricing-section__inner { max-width:480px; margin:0 auto; position:relative; z-index:2; }
.pricing-header { margin-bottom:var(--s12); }
.pricing-header h2 {
  font-size:var(--fs-section); font-weight:600;
  letter-spacing:var(--track-tight); line-height:1.0;
}
.pricing-card {
  background:var(--surface); border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:var(--r-lg); padding:var(--s8); box-shadow:var(--shadow-float);
}
.pricing-card__top { margin-bottom:var(--s6); padding-bottom:var(--s6); border-bottom:1px solid var(--border); }
.pricing-card__price { display:flex; align-items:baseline; gap:4px; margin-bottom:var(--s3); }
.price-currency { font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--text-sec); }
.price-amount { font-family:var(--font-mono); font-size:72px; font-weight:600; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.pricing-card__note { font-size:14px; color:var(--text-muted); }
.pricing-card__list { display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s8); }
.pricing-card__list li { display:flex; align-items:flex-start; gap:var(--s3); font-size:15px; color:var(--text-sec); }
.pricing-card__list li svg { margin-top:2px; flex-shrink:0; }
.pricing-card__actions { display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s4); }
.pricing-card__actions .btn { width:100%; justify-content:center; }
.pricing-card__trial { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); text-align:center; }

/* ── FINAL CTA ── */
.cta-section {
  padding:clamp(120px,16vh,220px) 0;
  text-align:center;
  background:var(--bg);
  border-top:1px solid var(--border);
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:'';
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:900px; height:500px;
  background:radial-gradient(ellipse at 50% 100%, rgba(79,107,237,0.18), transparent 65%);
  pointer-events:none;
}
.cta-section__inner { position:relative; z-index:1; }
.cta-section__h2 {
  font-size:var(--fs-h1);
  font-weight:700;
  letter-spacing:var(--track-tight);
  line-height:1.0;
  margin-bottom:var(--s8);
}
.cta-section__meta { margin-top:var(--s4); font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }

/* ── FOOTER ── */
.site-footer { border-top:1px solid var(--border); padding-top:var(--s12); padding-bottom:var(--s8); }
.site-footer__inner { display:grid; grid-template-columns:1fr auto; gap:var(--s16); margin-bottom:var(--s8); align-items:start; }
.footer-brand .nav__brand { margin-bottom:var(--s3); }
.footer-tagline { font-size:14px; color:var(--text-muted); max-width:220px; }
.footer-nav { display:flex; gap:var(--s12); }
.footer-col { display:flex; flex-direction:column; gap:var(--s3); }
.footer-col__title { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s1); }
.footer-col a { font-size:14px; color:var(--text-sec); transition:color 0.15s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid var(--border); padding-top:var(--s6); }
.footer-bottom p { font-size:13px; color:var(--text-muted); }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .feat-section__inner { grid-template-columns:1fr; }
  .pin-cards { padding-left:0; }
  .profiles-section__body { grid-template-columns:1fr; }
  .snap-section__inner { grid-template-columns:1fr; }
  .pinsnap-canvas { max-width:100%; aspect-ratio:16/10; }
  .detail-card--wide { flex-direction:column; }
  .detail-card--wide .detail-card__copy { flex:none; }
  .detail-cards__inner { grid-template-columns:1fr; }
  .uc-grid { grid-template-columns:1fr; }
  .hero-spaces { grid-template-columns:repeat(2,1fr); }
  .site-footer__inner { grid-template-columns:1fr; gap:var(--s8); }
}

@media (max-width:768px) {
  .nav__links { display:none; }
  .hero-spaces { grid-template-columns:repeat(2,1fr); gap:var(--s2); }
  .hspace__body { min-height:70px; }
  .pin-cards { grid-template-columns:1fr; gap:var(--s3); }
  .pin-card--1, .pin-card--2, .pin-card--3 { transform:none!important; }
  .footer-nav { flex-wrap:wrap; gap:var(--s8); }
  .pricing-section__inner { max-width:100%; }
}

@media (max-width:500px) {
  .container { padding:0 var(--s6); }
  .hero-spaces { grid-template-columns:repeat(2,1fr); }
  .hspace__pin { padding:2px 4px; }
  .hpin-badge, .hpin-lock { display:none; }
  .section__decimal { font-size:clamp(80px,22vw,140px); }
  .dual-display { flex-wrap:wrap; justify-content:center; }
  .disp-arrow { transform:rotate(90deg); }
}