@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap'); :root { --bg: #070a12; --bg-soft: #0f1526; --panel: #141d33; --panel-2: #101a30; --text: #ecf1ff; --muted: #afbbd8; --line: #263559; --gold: #f0cf82; --blue: #8dc4ff; --halo: #7ed0ff33; --success: #8cf0bb; --bg-a1: .70; --bg-a2: .70; --btn-a1: 1; --btn-a2: 1; --btn-a3: 1; --band-a1: .22; --band-a2: .24; --band-a3: .20; --heaven-a1: .16; --heaven-a2: .15; --heaven-a3: .16; } /* Theme intensity knob: set on */ body[data-theme="subtle"] { --bg-a1: .48; --bg-a2: .45; --btn-a1: .82; --btn-a2: .82; --btn-a3: .82; --band-a1: .14; --band-a2: .15; --band-a3: .13; --heaven-a1: .10; --heaven-a2: .10; --heaven-a3: .10; } body[data-theme="medium"] { --bg-a1: .70; --bg-a2: .70; --btn-a1: 1; --btn-a2: 1; --btn-a3: 1; --band-a1: .22; --band-a2: .24; --band-a3: .20; --heaven-a1: .16; --heaven-a2: .15; --heaven-a3: .16; } body[data-theme="vibrant"] { --bg-a1: .95; --bg-a2: .95; --btn-a1: 1.18; --btn-a2: 1.18; --btn-a3: 1.18; --band-a1: .32; --band-a2: .34; --band-a3: .30; --heaven-a1: .24; --heaven-a2: .22; --heaven-a3: .24; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: radial-gradient(900px 500px at 8% -10%, rgba(42,62,114,var(--bg-a1)) 0%, transparent 58%), radial-gradient(800px 420px at 95% 4%, rgba(61,39,101,var(--bg-a2)) 0%, transparent 55%), radial-gradient(circle at 20% -10%, #1a2240 0, var(--bg) 50%); color: var(--text); line-height: 1.72; font-size: 18px; text-rendering: optimizeLegibility; } .dark-page { background: radial-gradient(circle at 80% -10%, #1b142d 0, #06080f 55%); } .container { width: min(1100px, 92vw); margin: 0 auto; } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); background: #070a12cf; } .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; } .brand { color: var(--gold); text-decoration: none; font-weight: 700; letter-spacing: .02em; } nav { display: flex; flex-wrap: wrap; justify-content: flex-end; } nav a { color: var(--muted); text-decoration: none; margin-left: 1rem; font-size: 0.95rem; transition: color .2s ease, opacity .2s ease; } nav a:hover { color: var(--text); opacity: .95; } .hero { padding: 5.2rem 0 3rem; } .hero.compact { padding: 4rem 0 2.2rem; } .hero-icon { width: 74px; height: 74px; border-radius: 16px; border: 1px solid var(--line); display: block; margin-bottom: .85rem; } .kicker { color: var(--blue); text-transform: uppercase; font-size: .78rem; letter-spacing: .13em; font-weight: 700; } h1 { margin: .3rem 0 .8rem; font-family: Fraunces, Georgia, serif; font-size: clamp(2.1rem, 4vw, 3.55rem); line-height: 1.08; letter-spacing: -0.01em; } h2 { margin: .2rem 0 .65rem; font-family: Fraunces, Georgia, serif; font-size: 1.45rem; line-height: 1.22; } .graphic-frame { margin: .9rem 0 1.2rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0f1730; } .graphic-frame img { display: block; width: 100%; height: auto; } .graphic-caption { margin: 0; padding: .45rem .75rem .6rem; color: var(--muted); font-size: .88rem; } .lead { color: var(--muted); max-width: 74ch; font-size: 1.07rem; } .actions { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; } .btn { display: inline-block; text-decoration: none; padding: .72rem 1.02rem; border-radius: .7rem; border: 1px solid var(--line); background: #16213b; color: var(--text); font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, background .2s ease; } .btn:hover { background: #1d2a4a; transform: translateY(-1px); box-shadow: 0 10px 22px #00000040; } .btn-muted { background: transparent; color: var(--muted); } .btn-primary { background: linear-gradient(135deg, rgba(53,92,171,var(--btn-a1)) 0%, rgba(111,78,196,var(--btn-a2)) 55%, rgba(138,102,213,var(--btn-a3)) 100%); border-color: #5c63c4; } .btn-primary:hover { background: linear-gradient(135deg, rgba(62,105,193,var(--btn-a1)) 0%, rgba(127,92,219,var(--btn-a2)) 60%, rgba(152,118,226,var(--btn-a3)) 100%); } .section { padding: 1.2rem 0 2rem; } .section.alt { background: linear-gradient(180deg, #0d1221 0, #0b101d 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .heavenly-band { position: relative; background: linear-gradient(120deg, rgba(145,198,255,var(--heaven-a1)) 0%, rgba(194,170,255,var(--heaven-a2)) 45%, rgba(255,223,170,var(--heaven-a3)) 100%), #0f1830; border-top: 1px solid #49639e; border-bottom: 1px solid #49639e; overflow: hidden; } .heavenly-band::before { content: ""; position: absolute; inset: 0; background: url('../assets/texture-divider-2048x512.svg') center/cover no-repeat; opacity: .16; pointer-events: none; } .heavenly-band > .container { position: relative; z-index: 1; } .vibrant-band { background: linear-gradient(120deg, rgba(67,119,220,var(--band-a1)) 0%, rgba(123,87,221,var(--band-a2)) 48%, rgba(173,119,255,var(--band-a3)) 100%); border-top: 1px solid #4557a4; border-bottom: 1px solid #4557a4; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; } .split { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 1rem; } .card { background: linear-gradient(165deg, #111a2f 0%, #0e1424 100%); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.08rem; box-shadow: 0 0 0 1px #ffffff05, 0 10px 30px #00000030; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-2px); border-color: #315086; box-shadow: 0 14px 34px #00000045; } ul, ol { padding-left: 1.2rem; } li { margin-bottom: .4rem; } .links a { color: #a8d5ff; } .links a:hover { color: #d8ecff; } .pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; align-items: stretch; } .node { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; background: #121a2f; box-shadow: inset 0 0 35px var(--halo); position: relative; } @media (min-width: 900px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pipeline .node:not(:last-child)::after { content: '→'; position: absolute; right: -0.62rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-weight: 700; background: var(--bg); border-radius: 999px; padding: 0 .2rem; } } .quick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-top: .7rem; } .quick { border: 1px solid var(--line); border-radius: 12px; padding: .75rem .82rem; background: var(--panel-2); } .quick h3 { margin: 0 0 .4rem; color: var(--success); font-size: 1rem; } .quote { border-left: 3px solid var(--gold); padding-left: .8rem; color: #dce5ff; font-style: italic; } .badge { display: inline-block; font-size: .78rem; padding: .22rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); margin-right: .35rem; } .site-footer { border-top: 1px solid var(--line); margin-top: 2rem; padding: 1rem 0 2rem; color: var(--muted); font-size: .95rem; } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; } .trust-item { border: 1px dashed #355180; border-radius: 12px; padding: .65rem .75rem; background: #10192e; } .trust-item h3 { margin: 0 0 .25rem; font-size: .96rem; color: var(--blue); } .trust-item p { margin: 0; color: var(--muted); font-size: .9rem; } @media (max-width: 900px) { body { font-size: 17px; } } @media (max-width: 760px) { nav a { margin-left: .7rem; font-size: .9rem; } .hero { padding-top: 4rem; } }