:root{
  --cn-green-600:#16A34A; /* green-600 */
  --cn-green-700:#15803d; /* green-700 */
  --cn-teal-600:#0d9488; /* teal-600 */
  --cn-teal-700:#0f766e; /* teal-700 */
  --cn-blue-600:#2563eb; /* blue-600 */
  --cn-cyan-50:#ecfeff;  /* cyan-50 */
  --cn-border:rgba(14,116,144,.15);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(to right,var(--cn-green-600),var(--cn-teal-600));
  color:#fff;
  border:1px solid rgba(13,148,136,.25);
  box-shadow:0 8px 24px rgba(13,148,136,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(13,148,136,.3);} 
.btn-primary:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(20,184,166,.35), 0 8px 24px rgba(13,148,136,.25);} 

.btn-secondary{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(13,148,136,.25);
  color:var(--cn-teal-700);
  transition:background .15s ease, border-color .15s ease;
}
.btn-secondary:hover{background:rgba(240,253,250,.8); border-color:rgba(13,148,136,.35);} 
.btn-secondary:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(20,184,166,.25);} 

.btn-disabled{
  color:#94a3b8; border:1px dashed rgba(148,163,184,.35); background:rgba(148,163,184,.08); cursor:not-allowed;
}

/* Glass surfaces */
.glass{background:rgba(255,255,255,.7); backdrop-filter: blur(10px); border:1px solid var(--cn-border);} 
.glass-sub{background:rgba(255,255,255,.55); backdrop-filter: blur(6px); border:1px solid rgba(14,116,144,.10);} 
.shadow-lift{box-shadow: 0 24px 48px rgba(2,132,199,.10), 0 10px 20px rgba(13,148,136,.08);} 

/* Mock window */
.mock-window{border-radius:18px; padding:20px; border:1px solid var(--cn-border); background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));}
.mock-window .dot{width:10px; height:10px; border-radius:50%; display:inline-block; background:radial-gradient(circle at 30% 30%, #fff, #94a3b8); border:1px solid rgba(0,0,0,.05);} 
.mock-window .dot + .dot{margin-left:6px}

/* Brand mark */
.brand-mark{width:18px; height:18px; border-radius:6px; display:inline-block; background:linear-gradient(135deg,var(--cn-teal-600),var(--cn-blue-600)); box-shadow:0 2px 6px rgba(13,148,136,.35)}

/* Utilities */
.line-clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-clamp:2}

/* Background grid helper */
.bg-grid::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(13,148,136,.06), transparent 45%),
    radial-gradient(circle at 75% 25%, rgba(37,99,235,.06), transparent 40%),
    linear-gradient(transparent 0, transparent 95%, rgba(14,116,144,.06) 100%),
    linear-gradient(90deg, transparent 0, transparent 95%, rgba(14,116,144,.06) 100%);
  background-size: auto, auto, 80px 80px, 80px 80px;
}