/* Enso Health — minimal design system Fonts loaded via Google Fonts in . */ :root{ --paper: #fbfaf7; --paper-2:#ffffff; --ink: #1f1f1f; --muted:#5b5b5b; --navy:#003366; --navy-2:#0B2545; --mist:#E8EEF4; --line: rgba(0,0,0,.10); --shadow: 0 10px 30px rgba(0,0,0,.08); --radius: 18px; --radius-sm: 12px; --max: 1120px; --ease: cubic-bezier(.2,.8,.2,1); } *{ box-sizing: border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--ink); background: radial-gradient(1200px 800px at 12% -10%, rgba(0,51,102,.10), transparent 60%), radial-gradient(1000px 700px at 98% 0%, rgba(11,37,69,.08), transparent 55%), var(--paper); line-height: 1.5; } img{ max-width: 100%; height:auto; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: none; } .container{ width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } header{ position: sticky; top:0; z-index: 50; backdrop-filter: blur(10px); background: rgba(251,250,247,.75); border-bottom: 1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; gap: 16px; } .brand{ display:flex; align-items:center; gap:12px; } .brand svg{ width: 34px; height:34px; } .brand .name{ display:flex; flex-direction:column; line-height:1.1; } .brand .name strong{ font-family: "Playfair Display", Georgia, serif; letter-spacing: .2px; font-size: 18px; } .brand .name span{ font-size: 12px; color: var(--muted); } .navlinks{ display:flex; gap: 16px; align-items:center; font-size: 14px; color: var(--muted); } .navlinks a{ padding: 8px 10px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); } .navlinks a:hover{ background: rgba(0,51,102,.08); color: var(--ink); } .nav-cta{ display:flex; align-items:center; gap: 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.75); box-shadow: 0 6px 18px rgba(0,0,0,.06); font-size: 14px; cursor:pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease); } .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.10); } .btn.primary{ background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-color: transparent; color: #fff; } .btn.ghost{ background: transparent; box-shadow:none; } .menu-btn{ display:none; padding:10px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.7); } .hero{ position: relative; padding: 56px 0 38px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: start; } .kicker{ display:inline-flex; align-items:center; gap:10px; padding: 7px 12px; border-radius:999px; border: 1px solid rgba(0,51,102,.18); background: rgba(255,255,255,.65); color: var(--navy); font-size: 13px; } h1{ margin: 18px 0 10px; font-family: "Playfair Display", Georgia, serif; font-weight: 600; letter-spacing: .2px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; } .lead{ max-width: 62ch; color: #2b2b2b; font-size: 16.5px; line-height: 1.65; margin: 0 0 18px; } .hero-actions{ display:flex; flex-wrap: wrap; gap: 12px; align-items:center; margin-top: 14px; } .quote{ margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.65); } .quote p{ margin:0; font-size: 14px; color: var(--muted); } .quote p strong{ color: var(--ink); font-weight: 600; } .hero-card{ border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.72); box-shadow: var(--shadow); padding: 18px; position: relative; } .hero-card h3{ font-family: "Playfair Display", Georgia, serif; margin: 2px 0 6px; font-size: 18px; } .hero-card p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.55; } .mini-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .badge{ border:1px solid var(--line); background: rgba(0,51,102,.06); padding: 10px 12px; border-radius: 14px; font-size: 13px; color: var(--muted); } .badge strong{ display:block; color: var(--ink); font-size: 13px; margin-bottom: 2px; } .section{ padding: 54px 0; } .section h2{ font-family: "Playfair Display", Georgia, serif; font-size: 30px; margin: 0 0 10px; } .section .sub{ margin:0 0 22px; color: var(--muted); max-width: 80ch; } .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); box-shadow: 0 10px 26px rgba(0,0,0,.06); padding: 18px; } .card h3{ margin: 0 0 6px; font-size: 17px; font-family: "Playfair Display", Georgia, serif; } .card p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.6; } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .list{ margin: 12px 0 0; padding: 0; list-style:none; display:grid; gap: 10px; } .list li{ display:flex; gap: 10px; align-items:flex-start; color: var(--muted); font-size: 14px; } .dot{ width: 9px; height: 9px; border-radius: 99px; background: var(--navy); margin-top: 6px; flex: 0 0 9px; } .figure{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); box-shadow: var(--shadow); overflow:hidden; } .figure img{ display:block; width:100%; } .figure figcaption{ padding: 12px 14px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); } .roadmap{ display:grid; gap: 12px; } .step{ border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.78); padding: 16px 18px; } .step .when{ display:inline-flex; gap: 10px; align-items:center; color: var(--navy); font-size: 13px; font-weight: 600; } .step h3{ margin: 8px 0 6px; font-family: "Playfair Display", Georgia, serif; font-size: 18px; } .step p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.65; } .callout{ border-radius: var(--radius); border: 1px solid rgba(0,51,102,.22); background: rgba(0,51,102,.06); padding: 16px 18px; } form{ display:grid; gap: 12px; } label{ font-size: 13px; color: var(--muted); } input, textarea, select{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.85); font: inherit; } textarea{ min-height: 130px; resize: vertical; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-note{ font-size: 12.5px; color: var(--muted); line-height: 1.55; } .status{ display:none; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--muted); font-size: 13px; } .status.show{ display:block; } footer{ padding: 28px 0; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); background: rgba(255,255,255,.55); } .footer-grid{ display:flex; flex-wrap:wrap; gap: 12px; justify-content: space-between; align-items: center; } small.muted{ color: var(--muted); } .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .reveal.in{ opacity: 1; transform: none; } @media (max-width: 920px){ .hero-grid{ grid-template-columns: 1fr; } .split{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns: 1fr; } .mini-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 720px){ .navlinks{ display:none; position:absolute; left: 24px; right: 24px; top: 68px; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border:1px solid var(--line); border-radius: var(--radius); background: rgba(251,250,247,.98); box-shadow: var(--shadow); } .navlinks.open{ display:flex; } .menu-btn{ display:inline-flex; } .form-row{ grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; transition:none; } .btn{ transition:none; } }