/* ============================================================= Medichive — Redesign Light, clinical, airy. Navy ink + mint green on white. Modern serif headline (Newsreader) + clean sans (Hanken Grotesk). Theming via [data-theme] on ; serif via [data-serif]. ============================================================= */ /* ---------- Theme tokens ---------- */ :root { /* type */ --serif: "Newsreader", Georgia, serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* brand theme (default) */ --bg: #FAFCFB; --surface: #FFFFFF; --tint: #EDF6F0; /* mint wash for alt sections */ --tint-2: #F3F7FA; /* cool wash */ --ink: #0E2E4F; /* navy — headings */ --ink-soft: #2A4763; --body: #4A5B6B; /* paragraph slate */ --muted: #8295A2; --border: #E5ECE9; --border-strong: #D6E0DC; --accent: #15915A; /* mint, contrast-safe for text/icons */ --accent-bright: #5FC98E; /* logo mint — fills, dots, glow */ --accent-wash: rgba(95,201,142,0.14); --navy: #123A63; /* primary action */ --navy-hover: #0E2E4F; --on-navy: #F4FAF7; --glow: rgba(95,201,142,0.28); --shadow-card: 0 1px 2px rgba(14,46,79,0.04), 0 8px 24px -12px rgba(14,46,79,0.14); --shadow-float: 0 24px 60px -28px rgba(14,46,79,0.30); --radius: 16px; --radius-sm: 11px; --radius-lg: 24px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* sage — warmer, calmer */ :root[data-theme="sage"] { --bg: #F6F8F3; --surface: #FFFFFF; --tint: #E9F1E2; --tint-2: #EEF3EC; --ink: #163A45; --ink-soft: #2C5059; --body: #4E5F5C; --muted: #87968F; --border: #E3EADD; --border-strong: #D3DECB; --accent: #2E8E5C; --accent-bright: #74C795; --accent-wash: rgba(116,199,149,0.16); --navy: #1C5046; --navy-hover: #143B33; --on-navy: #F2F8F2; --glow: rgba(116,199,149,0.30); } /* ink — navy-forward, crisp/corporate */ :root[data-theme="ink"] { --bg: #F7F9FB; --surface: #FFFFFF; --tint: #EDF2F8; --tint-2: #F0F4F8; --ink: #0B2545; --ink-soft: #244062; --body: #44566A; --muted: #7E90A2; --border: #E5EAF1; --border-strong: #D4DDE9; --accent: #1C5FA8; /* navy-blue accent */ --accent-bright: #5FC98E; /* mint kept as small pop */ --accent-wash: rgba(28,95,168,0.12); --navy: #14406B; --navy-hover: #0B2545; --on-navy: #F2F7FC; --glow: rgba(28,95,168,0.22); } /* serif swaps */ :root[data-serif="spectral"] { --serif: "Spectral", Georgia, serif; } :root[data-serif="instrument"] { --serif: "Instrument Serif", Georgia, serif; } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--body); background: var(--bg); overflow-x: hidden; transition: background 0.4s var(--ease), color 0.4s var(--ease); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--accent-wash); color: var(--ink); } h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; } .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; } em.mark { font-style: italic; color: var(--accent); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; } .section { padding: 120px 0; position: relative; } .section.tint { background: var(--tint); } .section.cool { background: var(--tint-2); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); text-transform: none; padding: 6px 13px 6px 11px; background: var(--accent-wash); border-radius: 100px; margin-bottom: 22px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-wash); } .section-head { max-width: 680px; margin-bottom: 64px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; } .section-head p { margin-top: 20px; font-size: 19px; color: var(--body); line-height: 1.6; max-width: 580px; } .section-head.center p { margin-left: auto; margin-right: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 13px 22px; border-radius: 100px; border: 1px solid transparent; transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); will-change: transform; } .btn svg { transition: transform 0.3s var(--ease); } .btn-primary { background: var(--navy); color: var(--on-navy); box-shadow: 0 10px 24px -12px var(--navy); } .btn-primary:hover { background: var(--navy-hover); box-shadow: 0 16px 30px -14px var(--navy); } .btn-primary:hover svg { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--ink); background: var(--surface); } .btn-mint { background: var(--accent-bright); color: #0B2A1B; box-shadow: 0 10px 24px -12px var(--glow); } .btn-mint:hover { box-shadow: 0 16px 32px -14px var(--glow); } .btn-lg { padding: 16px 28px; font-size: 16px; } .btn-block { width: 100%; } /* ---------- Nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 18px 0; transition: padding 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--border); padding: 11px 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.02em; } .brand img { width: 30px; height: 30px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); padding: 8px 14px; border-radius: 100px; position: relative; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .nav-links a:not(.btn):hover { color: var(--ink); background: var(--accent-wash); } .nav-cta { display: flex; align-items: center; gap: 8px; } .nav-login { font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 9px 8px; } .nav-links .btn-primary { color: #fff; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s var(--ease); } /* ---------- Hero ---------- */ .hero { padding: 168px 0 96px; position: relative; overflow: hidden; } .hero-aura { position: absolute; top: -120px; right: -80px; width: 720px; height: 620px; background: radial-gradient(ellipse at center, var(--glow), transparent 62%); filter: blur(8px); pointer-events: none; z-index: 0; } .hero-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 0%, transparent 70%); opacity: 0.6; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); padding: 7px 15px 7px 11px; border-radius: 100px; box-shadow: var(--shadow-card); margin-bottom: 26px; } .hero-badge .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); position: relative; } .hero-badge .pip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent-bright); animation: ping 2.4s var(--ease) infinite; } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } .hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 78px); line-height: 0.99; letter-spacing: -0.03em; color: var(--ink); } .hero h1 .line2 { display: block; } .hero-lead { margin-top: 26px; font-size: 20px; line-height: 1.6; color: var(--body); max-width: 500px; } .hero-actions { margin-top: 36px; display: flex; gap: 13px; flex-wrap: wrap; } .hero-trust { margin-top: 44px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .hero-stat .num { font-family: var(--serif); font-size: 34px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; } .hero-stat .num .suf { color: var(--accent); } .hero-stat .lbl { font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; margin-top: 2px; } .hero-divider { width: 1px; height: 40px; background: var(--border-strong); } /* Hero visual — record card stack with live vitals */ .hero-visual { position: relative; height: 480px; } .rec-card { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); } .rec-main { inset: 28px 8px 40px 18px; padding: 22px; display: flex; flex-direction: column; } .rec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .rec-avatar { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent-bright), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; } .rec-head .who { font-weight: 700; color: var(--ink); font-size: 15px; } .rec-head .meta { font-size: 12.5px; color: var(--muted); } .rec-share { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-wash); padding: 5px 10px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; } .rec-share .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); } .vital-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; } .vital { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; } .vital .vlbl { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .vital .vval { font-family: var(--serif); font-size: 21px; color: var(--ink); font-weight: 500; margin-top: 3px; } .vital .vval small { font-size: 11px; color: var(--muted); font-weight: 400; } .ecg { margin-top: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .ecg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ecg-top .t { font-size: 12px; color: var(--ink-soft); font-weight: 600; } .ecg-top .b { font-family: var(--serif); font-size: 18px; color: var(--accent); font-weight: 500; } .ecg svg { width: 100%; height: 46px; } .ecg path.trace { stroke: var(--accent-bright); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 0; } .ecg.go path.trace { animation: tracePulse 3s ease-in-out infinite; } @keyframes tracePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } } .float-chip { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-float); padding: 12px 15px; display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } .float-chip .fc-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .float-chip small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); } .chip-a { top: 6px; right: 0; } .chip-b { bottom: 30px; left: -26px; } .fc-mint { background: var(--accent-wash); color: var(--accent); } .fc-navy { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); } .floaty { animation: floaty 6s ease-in-out infinite; } .floaty.d { animation-delay: -3s; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ---------- Logo / trust strip ---------- */ .strip { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .strip-inner { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; justify-content: center; } .strip-label { font-size: 13px; color: var(--muted); font-weight: 500; } .strip-items { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .strip-items span { font-size: 15px; font-weight: 600; color: var(--ink-soft); opacity: 0.7; transition: opacity 0.2s var(--ease), color 0.2s var(--ease); } .strip-items span:hover { opacity: 1; color: var(--accent); } /* ---------- Products: three surfaces ---------- */ .surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .surface-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px 28px; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); display: flex; flex-direction: column; } .surface-card::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-wash), transparent 60%); } .surface-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: var(--border-strong); } .surface-card:hover::before { opacity: 1; } .surface-card.feature { border-color: color-mix(in srgb, var(--accent-bright) 40%, var(--border)); } .surface-tag { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } .surface-ic { width: 52px; height: 52px; border-radius: 14px; margin: 18px 0 18px; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); color: var(--accent); position: relative; z-index: 1; } .surface-card h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; margin-bottom: 8px; position: relative; z-index: 1; } .surface-card > p { font-size: 15.5px; color: var(--body); position: relative; z-index: 1; } .surface-list { margin: 20px 0 22px; display: flex; flex-direction: column; gap: 11px; position: relative; z-index: 1; flex-grow: 1; } .surface-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-soft); } .surface-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); } .surface-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); position: relative; z-index: 1; align-self: flex-start; white-space: nowrap; } .surface-link svg { transition: transform 0.3s var(--ease); } .surface-card:hover .surface-link svg { transform: translateX(4px); } .surface-link .ul { color: var(--accent); } /* ---------- How it works — interactive stepper ---------- */ .how { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .steps-nav { display: flex; flex-direction: column; gap: 6px; position: relative; } .step-item { display: flex; gap: 18px; padding: 20px 20px; border-radius: var(--radius); cursor: pointer; background: transparent; border: 1px solid transparent; text-align: left; width: 100%; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .step-item:hover { background: var(--surface); } .step-item.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-card); } .step-idx { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted); width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); transition: 0.3s var(--ease); } .step-item.active .step-idx { background: var(--navy); color: var(--on-navy); border-color: var(--navy); } .step-tx h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .step-tx p { font-size: 14.5px; color: var(--body); max-height: 0; overflow: hidden; opacity: 0; transition: 0.4s var(--ease); } .step-item.active .step-tx p { max-height: 100px; opacity: 1; margin-top: 4px; } .how-stage { position: sticky; top: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 30px; min-height: 420px; display: flex; flex-direction: column; } .stage-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; } .stage-bar .seg { height: 4px; flex: 1; border-radius: 4px; background: var(--border); overflow: hidden; } .stage-bar .seg i { display: block; height: 100%; width: 0; background: var(--accent-bright); transition: width 0.5s var(--ease); } .stage-bar .seg.done i { width: 100%; } .stage-bar .seg.active i { width: 100%; } .stage-panel { display: none; flex-direction: column; gap: 16px; flex-grow: 1; } .stage-panel.active { display: flex; } .stage-kicker { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; } .stage-panel h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; } .stage-panel > p { font-size: 16px; color: var(--body); } .stage-art { margin-top: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); padding: 20px; min-height: 150px; display: flex; align-items: center; justify-content: center; } /* mini visual bits used in stage art */ .mini-rows { width: 100%; display: flex; flex-direction: column; gap: 9px; } .mini-row { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; } .mini-row .mi { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mini-row .mt { font-size: 13.5px; font-weight: 600; color: var(--ink); } .mini-row .ms { font-size: 12px; color: var(--muted); } .mini-row .mr { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--accent); } .wave-mini { width: 100%; } .wave-mini svg { width: 100%; height: 80px; } .soap-note { width: 100%; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; } .soap-note b { color: var(--accent); } /* ---------- Who it's for — toggle ---------- */ .aud-toggle { display: inline-flex; gap: 5px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; margin-bottom: 44px; box-shadow: var(--shadow-card); position: relative; } .aud-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 100px; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; position: relative; z-index: 1; transition: color 0.25s var(--ease); } .aud-btn.active { color: var(--on-navy); background: var(--navy); box-shadow: 0 8px 18px -10px var(--navy); } .aud-panel { display: none; } .aud-panel.active { display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: center; } .aud-text h3 { font-family: var(--serif); font-size: clamp(28px,3.4vw,40px); font-weight: 500; margin-bottom: 14px; } .aud-text > p { font-size: 18px; color: var(--body); margin-bottom: 26px; max-width: 520px; } .aud-feats { display: grid; gap: 13px; } .aud-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-soft); } .aud-feats li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); } .aud-visual { border-radius: var(--radius-lg); padding: 40px; background: var(--tint); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 320px; } .aud-bignum { font-family: var(--serif); font-size: 84px; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.03em; } .aud-bignum .suf { color: var(--accent); } .aud-biglbl { margin-top: 12px; font-size: 15px; color: var(--body); max-width: 240px; } .aud-ic-lg { width: 60px; height: 60px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 24px; box-shadow: var(--shadow-card); } /* ---------- Security ---------- */ .sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; } .sec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .sec-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .sec-card .sh { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .sec-card .sh .si { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; } .sec-card .sh h4 { font-size: 16px; font-weight: 700; color: var(--ink); } .sec-card ul { display: flex; flex-direction: column; gap: 9px; } .sec-card li { font-size: 13.8px; color: var(--body); display: flex; gap: 8px; align-items: flex-start; } .sec-card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); margin-top: 8px; flex-shrink: 0; } /* Collapsible cards (progressive enhancement — only when JS adds .collapsible) */ .sec-card.collapsible { cursor: pointer; } .sec-card.collapsible .sh { margin-bottom: 0; user-select: none; transition: margin-bottom 0.3s var(--ease); } .sec-card.collapsible .sh .sx { margin-left: auto; color: var(--muted); flex-shrink: 0; transition: transform 0.3s var(--ease); } .sec-card.collapsible ul { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.34s var(--ease), opacity 0.26s var(--ease); } .sec-card.collapsible.open .sh { margin-bottom: 16px; } .sec-card.collapsible.open .sh .sx { transform: rotate(180deg); } .sec-card.collapsible.open ul { max-height: 400px; opacity: 1; } .sec-card.collapsible:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sec-note { margin-top: 28px; font-size: 14px; color: var(--muted); text-align: center; } /* ---------- CTA ---------- */ .cta-card { background: var(--navy); border-radius: var(--radius-lg); padding: 56px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center; } .cta-card::after { content: ""; position: absolute; top: -140px; right: -100px; width: 460px; height: 460px; background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none; } .cta-l { position: relative; z-index: 1; } .cta-l .eyebrow { background: rgba(255,255,255,0.12); color: var(--accent-bright); } .cta-l .eyebrow::before { background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(95,201,142,0.2); } .cta-l h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px,3.8vw,46px); color: #fff; line-height: 1.04; } .cta-l p { margin-top: 18px; font-size: 18px; color: rgba(255,255,255,0.72); max-width: 420px; } .cta-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(6px); } .cta-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cta-form input, .cta-form select, .cta-form textarea { width: 100%; font-family: inherit; font-size: 15px; color: #fff; padding: 13px 15px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 11px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .cta-form textarea { resize: vertical; min-height: 76px; } .cta-form input::placeholder, .cta-form textarea::placeholder { color: rgba(255,255,255,0.5); } .cta-form select { color: rgba(255,255,255,0.6); } .cta-form select option { color: #0E2E4F; } .cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus { outline: none; border-color: var(--accent-bright); background: rgba(255,255,255,0.12); } .cta-form .form-error { margin: 0; color: #ffd6cf; font-size: 0.9rem; } /* ---------- Footer ---------- */ .footer { padding: 72px 0 40px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-brand p { margin-top: 16px; font-size: 14.5px; color: var(--body); max-width: 300px; } .footer-col h5 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .footer-col a { display: block; font-size: 14.5px; color: var(--ink-soft); padding: 6px 0; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; } .footer-bottom p { font-size: 13.5px; color: var(--muted); } .footer-loc { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); } /* ---------- Reveal animation ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal-stagger].in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .nav-links { position: fixed; inset: 64px 16px auto 16px; flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-float); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: 0.3s var(--ease); } .nav-links.open { transform: none; opacity: 1; pointer-events: auto; } .nav-toggle { display: flex; } .hero-inner, .how, .aud-panel.active, .cta-card { grid-template-columns: 1fr; } .hero-visual { height: 420px; margin-top: 12px; } .surfaces { grid-template-columns: 1fr; } .sec-grid { grid-template-columns: repeat(2, 1fr); } .how-stage { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; } .section { padding: 84px 0; } } @media (max-width: 560px) { .wrap { padding: 0 20px; } .sec-grid, .footer-grid { grid-template-columns: 1fr; } .cta-card { padding: 32px 24px; } .cta-form .row2 { grid-template-columns: 1fr; } .hero-trust { gap: 18px; } }