/* ===== Cardiodify – Minimal professional theme ===== */
:root{
	  --bg:#0e0f12; --panel:#13151a; --text:#e9edf1; --muted:#9aa3ad;
	    --brand:#5be0b3; --brand-ink:#0b3d32; --line:#5be0b3;
	      --card:#171a20; --card-border:#20242c; --shadow:0 8px 28px rgba(0,0,0,.35);
	        --radius:14px;
	}

	*{ box-sizing:border-box }
	html,body{ height:100% }

	body{
		  margin:0;
		    background:linear-gradient(180deg, var(--bg), #0b0c10 60%);
		      color:var(--text);
		        font:16px/1.55 ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
			  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
		  }

		  .container{ width:min(1120px,100%); margin-inline:auto; padding:24px clamp(16px,3vw,28px); }

		  /* Header */
		  .site-header{ position:sticky; top:0; z-index:10; background:rgba(14,15,18,.7);
			    backdrop-filter:blur(8px); border-bottom:1px solid #171a20; }
			    .header-inner{ display:flex; align-items:center; gap:24px; justify-content:space-between; }
			    .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; }
			    .brand-mark{
				      display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
				        background: radial-gradient(120% 120% at 20% 20%, var(--brand) 0, #24b58b 40%, var(--brand-ink) 100%);
					  color:#001913; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow);
				  }
				  .nav a{ color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:10px; }
				  .nav a:hover{ color:var(--text); background:#151821; }
				  .nav a.active{ color:#0b3027; background:var(--brand); font-weight:700; }

				  /* Hero */
				  .hero{ padding:48px 0 8px; border-bottom:1px solid #171a20; }
				  .hero-compact{ padding:36px 0 4px; }
				  .hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center; }
				  @media (max-width:920px){ .hero-inner{ grid-template-columns:1fr; } }
				  h1{ font-size: clamp(1.8rem, 2.5vw, 2.6rem); line-height:1.2; margin:0 0 12px; }
				  .lead{ color:#cbd3db; max-width:60ch; margin:0 0 16px; }
				  .heritage{ color:#cfe6dd; background:linear-gradient(180deg,#131822,#12151a);
					    border:1px solid #202636; border-radius:var(--radius); padding:12px 14px; }
					    .small-pad{ padding:10px 12px; }

					    .cta{ display:flex; gap:12px; margin:18px 0; }
					    .btn{ display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent; }
					    .btn-primary{ background:var(--brand); color:#08261f; }
					    .btn-primary:hover{ filter:brightness(1.08) contrast(1.05); }
					    .btn-ghost{ color:var(--text); border-color:#2a2f39; background:transparent; }
					    .btn-ghost:hover{ background:#151821; }

					    .badges{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
					    .badge{ border:1px solid #2a2f39; color:#b9c2cc; padding:6px 10px; border-radius:999px; font-size:.85rem;
						      background:linear-gradient(180deg, #12151a, #0e1116); }

						      /* ECG animation (used on index hero) */
						      .hero-visual{ background:var(--panel); border:1px solid #171a20; border-radius:var(--radius); padding:18px; box-shadow: var(--shadow); }
						      .ecg{ width:100%; height:auto; display:block; }
						      .ecg .grid{ stroke:#28303a; stroke-width:1; }
						      .ecg .line{ fill:none; stroke: var(--line); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
							        stroke-dasharray:540; animation: dash 3.5s linear infinite; filter: drop-shadow(0 0 10px rgba(91,224,179,.35)); }
								@keyframes dash{ from{ stroke-dashoffset:540 } to{ stroke-dashoffset:0 } }

								/* Sections */
								.section{ padding:56px 0; }
								.section.alt{ background:#0f1218; border-block:1px solid #171a20; }
								.grid{ display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
								@media (max-width:920px){ .grid{ grid-template-columns:1fr; } }
								.card{ background:var(--card); border:1px solid var(--card-border); padding:18px; border-radius:var(--radius); }
								.card h3{ margin:0 0 6px; font-size:1.05rem; }

								/* Steps list */
								.steps{ display:grid; gap:14px; counter-reset:step; max-width:54ch; margin:12px 0 0; padding:0; }
								.steps li{ list-style:none; background:#12151a; border:1px solid #1c2230; border-radius:12px; padding:12px 14px; }
								.steps li::before{
									  counter-increment:step; content:counter(step);
									    display:inline-grid; place-items:center; width:26px; height:26px; margin-right:8px;
									      background:var(--brand); color:#0b3027; border-radius:50%; font-weight:700;
								      }

								      /* Code block */
								      .code{ background:#0b0e13; color:#dfe7ef; border:1px solid #1b2230; border-radius:12px; padding:16px; overflow:auto; box-shadow:var(--shadow); }
								      .code code{ font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
								      .small{ font-size:.92rem } .muted{ color:var(--muted) }

								      /* People (credits page) */
								      .people{ display:grid; gap:18px; grid-template-columns: repeat(2, 1fr); }
								      @media (max-width:920px){ .people{ grid-template-columns:1fr; } }
								      .person{ display:grid; grid-template-columns: 72px 1fr; gap:14px; align-items:center; }
								      .avatar{
									        width:64px; height:64px; border-radius:14px; display:grid; place-items:center;
										  background: radial-gradient(120% 120% at 20% 20%, var(--brand) 0, #24b58b 40%, var(--brand-ink) 100%);
										    color:#001913; font-weight:900; letter-spacing:.5px;
										      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow);
									      }

									      /* Footer */
									      .site-footer{ border-top:1px solid #171a20; background:#0d0f13; }
									      .footer-inner{ text-align:center; }
									      .footer-inner p{ margin:8px 0; color:#aab3bd; }

									      /* ===== Optional: modal styles (used on index.html if you keep the modal) ===== */
									      .modal{
										        position: fixed; inset: 0;
											  background: rgba(0,0,0,.55);
											    opacity: 0; pointer-events: none;
											      transition: opacity .2s ease-out;
											        z-index: 50;
											}
											.modal:target{ opacity: 1; pointer-events: auto; }
											.modal-panel{
												  position: relative;
												    margin: 6vh auto; max-width: 640px;
												      background: #0f1218; color: var(--text);
												        border: 1px solid #20242c; border-radius: var(--radius);
													  box-shadow: 0 18px 60px rgba(0,0,0,.5);
													    padding: 22px;
												    }
												    .modal-close{
													      position: absolute; top: 8px; right: 12px;
													        text-decoration: none; font-size: 28px; line-height: 1;
														  color: var(--muted);
													  }
													  .modal-close:hover{ color: var(--text); }