/* ==== TaruviBase styles (extracted from original single-file bundle) ==== */
/* latin-ext */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/font-ee032f71.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/font-ad5cac76.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/font-00dd3038.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/font-470caca7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/font-755bc03c.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/font-c4862471.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/font-755bc03c.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/font-c4862471.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/font-755bc03c.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/font-c4862471.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/font-755bc03c.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/font-c4862471.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-c78f6481.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-cb42d851.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-da13d580.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-817833c6.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-46879d15.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-443fd5af.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-491882c1.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-13305830.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-8039137a.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-c78f6481.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-cb42d851.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-da13d580.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-817833c6.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-46879d15.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-443fd5af.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-491882c1.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-13305830.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-8039137a.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-c78f6481.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-cb42d851.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-da13d580.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-817833c6.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-46879d15.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-443fd5af.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-491882c1.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-13305830.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/font-8039137a.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* TaruviBase — shared site styles */
:root {
--void: #050D1F;
--iris: #0F2044;
--amethyst: #1E3A6E;
--lavender: #1E3A6E;
--fuchsia: #7889A7;
--blossom: #D2D7DF;
--mist: #F4F6F9;
--parchment: #F4F6F9;
--ink: #0F2044;
--ink-soft: #566580;
--line: #D2D7DF;
--grad-deep: linear-gradient(135deg, #050D1F, #0F2044, #1E3A6E, #1E3A6E);
--grad-aurora: linear-gradient(135deg, #0F2044, #1E3A6E, #7889A7);
--grad-fuchsia: linear-gradient(90deg, #1E3A6E, #7889A7);
--grad-soft: linear-gradient(180deg, #F4F6F9, #F4F6F9); --grad-silver: linear-gradient(180deg, #FAFBFD 0%, #E6EBF0 50%, #CDD4DE 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--parchment); }
html { scroll-padding-top: 80px; }
body {
font-family: 'DM Sans', sans-serif;
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.eyebrow {
font-family: 'DM Mono', monospace;
font-weight: 500;
font-size: 16px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--lavender);
margin-bottom: 16px;
}
h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; letter-spacing: -1px; line-height: 1.1; color: var(--ink); }
h1 { font-weight: 800; font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -2px; }
h2 { font-weight: 800; font-size: clamp(32px, 4vw, 52px); letter-spacing: -1.5px; }
h3 { font-weight: 700; font-size: 22px; }
p { color: var(--ink-soft); font-size: 16px; }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 680px; line-height: 1.6; }
.dot { color: var(--fuchsia); }
/* ========= NAV ========= */
.nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px);
background: rgba(244, 246, 249, 0.78);
border-bottom: 1px solid rgba(30, 58, 110, 0.12);
}
.nav-inner {
max-width: 1240px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 32px; gap: 24px;
}
.nav-logo {
font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.5px;
color: var(--ink); display: flex; align-items: center; gap: 10px;
}
.nav-logo .glyph {
width: 30px; height: 30px; border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(120,137,167,0.18), rgba(30,58,110,0.08) 60%, transparent 75%);
background-image: url("../img/logo-mark.png");
background-size: 110% 110%; background-position: center; background-repeat: no-repeat;
display: inline-flex; align-items: center; justify-content: center;
filter: drop-shadow(0 2px 6px rgba(30,58,110,0.35));
color: transparent; font-size: 0;
box-shadow: none;
}
.nav-links { display: flex; gap: 28px; flex-wrap: wrap; }
.nav-link {
font-size: 16px; font-weight: 500; color: var(--ink-soft);
position: relative; padding: 6px 0;
}
.nav-link.is-active { color: #ffffff !important; font-weight: 600; }
.nav-link.is-active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
background: #ffffff; border-radius: 3px;
}
.nav-cta {
background: var(--grad-silver); color: #0F2044 !important; border: 1px solid rgba(255,255,255,0.55); padding: 10px 18px;
border-radius: 10px; font-weight: 600; font-size: 16px;
box-shadow: 0 8px 22px rgba(120,137,167,0.35);
}
.nav-cta:hover { transform: translateY(-1px); }
/* ========= BUTTONS ========= */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 16px;
transition: transform 0.15s ease, box-shadow 0.2s ease;
border: none; cursor: pointer;
}
.btn-primary {
background: var(--grad-silver); color: #0F2044;
border: 1px solid rgba(15,32,68,0.18); box-shadow: 0 8px 20px rgba(15,32,68,0.22), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15,32,68,0.32); }
.btn-ghost {
background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-light {
background: var(--grad-silver); color: var(--iris); border: 1px solid rgba(15,32,68,0.18); box-shadow: 0 8px 20px rgba(15,32,68,0.22), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-light:hover { border-color: var(--lavender); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* ========= SECTIONS ========= */
section { padding: 96px 0; }
section.dark { background: var(--void); color: white; }
section.dark h1, section.dark h2, section.dark h3 { color: white; }
section.dark p, section.dark .lede { color: rgba(210,215,223,0.85); }
section.dark .eyebrow { color: var(--fuchsia); }
section.iris { background: var(--iris); color: white; }
section.iris h2 { color: white; }
section.iris p, section.iris .lede { color: rgba(210,215,223,0.85); }
section.iris .eyebrow { color: var(--fuchsia); }
section.mist { background: linear-gradient(180deg, var(--parchment), var(--mist)); }
section.aurora-band {
background: var(--grad-aurora); color: white; position: relative; overflow: hidden;
}
section.aurora-band h2 { color: white; }
section.aurora-band p { color: rgba(255,255,255,0.85); }
.section-head { max-width: 800px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 18px; }
/* ========= GLOW + DECOR ========= */
.glow {
position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.glow.lavender { background: radial-gradient(circle, rgba(30,58,110,0.55), transparent 70%); }
.glow.fuchsia { background: radial-gradient(circle, rgba(120,137,167,0.45), transparent 70%); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,");
}
/* ========= GRID UTILITY ========= */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 880px) {
.grid-3, .grid-4 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
section { padding: 64px 0; }
}
/* ========= CARD ========= */
.card {
background: white; border: 1px solid var(--line); border-radius: 18px;
padding: 28px; position: relative; overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15, 32, 68, 0.10); border-color: rgba(30,58,110,0.4); }
.card .card-icon {
width: 44px; height: 44px; border-radius: 10px; background: var(--grad-aurora);
display: flex; align-items: center; justify-content: center; color: white;
font-family: 'DM Mono', monospace; font-weight: 600; margin-bottom: 18px;
box-shadow: 0 10px 24px rgba(30, 58, 110, 0.3);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; line-height: 1.6; }
/* ========= TRUST STRIP ========= */
.trust { background: var(--ink); color: white; padding: 28px 0; overflow: hidden; }
.trust-row {
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.trust-item {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.5px; font-weight: 600;
text-transform: uppercase; color: #ffffff; text-decoration: none;
display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 12px;
background: linear-gradient(135deg, rgba(30,58,110,0.55), rgba(15,32,68,0.85));
border: 1px solid rgba(120,137,167,0.45);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px rgba(5,13,31,0.35);
cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.trust-item:hover {
background: linear-gradient(135deg, rgba(30,58,110,0.85), rgba(30,58,110,0.95));
border-color: rgba(120,137,167,0.75); transform: translateY(-1px);
}
.trust-item::after { content: none; }
.trust-item:last-child::after { display: none; }
/* ========= FOOTER ========= */
.footer { background: var(--void); color: white; padding: 72px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 48px;
border-bottom: 1px solid rgba(30,58,110,0.18); }
.footer-brand .nav-logo { color: white; margin-bottom: 14px; }
.footer-brand p { color: rgba(210,215,223,0.7); font-size: 16px; max-width: 280px; }
.footer-col h4 {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--lavender); margin-bottom: 14px;
font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(210,215,223,0.85); font-size: 16px; }
.footer-col a:hover { color: white; }
.footer-bottom {
display: flex; justify-content: space-between; padding-top: 24px;
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.6);
letter-spacing: 0.5px; flex-wrap: wrap; gap: 16px;
}
@media (max-width: 880px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ========= ANNOUNCEMENT BANNER (scrolls away under nav) ========= */
.bda-banner {
background: linear-gradient(90deg, #1E3A6E 0%, #566580 100%);
color: #fff; border-bottom: 2px solid #7889A7; box-shadow: 0 2px 14px rgba(5,13,31,0.35);
position: relative; overflow: hidden;
}
.bda-banner::after {
content: ''; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
transform: skewX(-20deg); pointer-events: none; z-index: 0;
animation: bda-shine 5s ease-in-out infinite;
}
@keyframes bda-shine {
0% { left: -60%; } 55%, 100% { left: 130%; }
}
.bda-banner-inner {
position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 11px 32px;
display: flex; align-items: center; justify-content: center; gap: 16px;
flex-wrap: wrap; text-align: center;
}
.bda-banner .pill {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; font-weight: 500;
background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
color: #fff; padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.bda-banner .msg { font-size: 16px; color: rgba(255,255,255,0.92); }
.bda-banner .msg strong { color: #fff; font-weight: 600; }
.bda-banner a.bda-banner-cta {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: 16px; font-weight: 600; color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 1px;
transition: border-color .15s ease;
}
.bda-banner a.bda-banner-cta:hover { border-color: #fff; }
.bda-banner a.bda-banner-cta .arrow { transition: transform .2s ease; }
.bda-banner a.bda-banner-cta:hover .arrow { transform: translateX(3px); }
@media (max-width: 620px) { .bda-banner .msg { font-size: 16px; } }
/* ========= HOMEPAGE BUILDATHON BLOCK ========= */
.bda-home { background: linear-gradient(180deg, var(--parchment), var(--mist)); }
.bda-panel {
position: relative; overflow: hidden;
background: linear-gradient(150deg, #0F2044 0%, #1E3A6E 70%, #050D1F 130%);
border-radius: 26px; padding: 56px 56px 52px;
box-shadow: 0 34px 80px rgba(15,32,68,0.30);
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.bda-panel .glow { width: 420px; height: 420px; top: -160px; right: -120px; opacity: 0.5; }
.bda-panel-copy { position: relative; z-index: 2; }
.bda-panel .eyebrow { color: var(--blossom); margin-bottom: 16px; }
.bda-panel h2 { color: #fff; font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 16px; }
.bda-panel h2 .accent { background: linear-gradient(90deg,#D2D7DF,#7889A7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bda-panel p { color: rgba(210,215,223,0.88); font-size: 16px; max-width: 52ch; margin-bottom: 28px; }
.bda-panel-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.bda-facts {
position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px;
}
.bda-fact {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px; padding: 16px 20px; backdrop-filter: blur(6px);
}
.bda-fact .k {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 5px;
}
.bda-fact .v { font-family: 'Roboto', sans-serif; font-size: 17px; color: #fff; font-weight: 700; letter-spacing: -0.3px; }
@media (max-width: 920px) {
.bda-panel { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
}
/* ========= BUILDATHON PAGE ========= */
.bda-hero-facts {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
margin-top: 44px; background: rgba(120,137,167,0.25);
border: 1px solid rgba(120,137,167,0.25); border-radius: 14px; overflow: hidden;
}
.bda-hero-fact { background: rgba(5,13,31,0.5); padding: 18px 20px; }
.bda-hero-fact .k {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 6px;
}
.bda-hero-fact .v { font-family: 'Roboto', sans-serif; font-size: 16px; color: #fff; font-weight: 700; letter-spacing: -0.3px; }
@media (max-width: 760px) { .bda-hero-facts { grid-template-columns: 1fr 1fr; } }
/* Three things cards */
.bda-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 920px) { .bda-three { grid-template-columns: 1fr; } }
.bda-tcard {
background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px;
display: flex; flex-direction: column;
}
.bda-tcard .tnum {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px; color: var(--lavender);
margin-bottom: 14px; font-weight: 500;
}
.bda-tcard .tlabel {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--ink-soft); margin-bottom: 8px;
}
.bda-tcard h3 { font-size: 21px; margin-bottom: 16px; color: var(--ink); }
.bda-tcard ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.bda-tcard li { position: relative; padding-left: 24px; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.bda-tcard li::before {
content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 3px;
background: var(--grad-fuchsia);
}
/* Timeline (dark band) */
.bda-timeline { display: flex; flex-direction: column; gap: 0; max-width: 880px; }
.bda-tl-row {
display: grid; grid-template-columns: 88px 1fr; gap: 28px;
padding: 26px 0; border-top: 1px solid rgba(120,137,167,0.22);
}
.bda-tl-row:last-child { border-bottom: 1px solid rgba(120,137,167,0.22); }
.bda-tl-time {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--blossom); font-weight: 500;
padding-top: 2px;
}
.bda-tl-body .ph {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
color: var(--fuchsia); margin-bottom: 8px;
}
.bda-tl-body h3 { color: #fff; font-size: 19px; margin-bottom: 8px; letter-spacing: -0.3px; }
.bda-tl-body p { color: rgba(210,215,223,0.82); font-size: 16px; line-height: 1.6; max-width: 60ch; }
@media (max-width: 620px) { .bda-tl-row { grid-template-columns: 1fr; gap: 8px; } }
/* Who's in the room */
.bda-room { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 880px) { .bda-room { grid-template-columns: 1fr; } }
.bda-room-card {
background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px 32px;
}
.bda-room-card .rk {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--lavender); margin-bottom: 14px;
}
.bda-room-card h3 { font-size: 24px; margin-bottom: 12px; }
.bda-room-card p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.bda-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.bda-chip {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.5px;
background: var(--mist); border: 1px solid var(--line); color: var(--amethyst);
padding: 7px 13px; border-radius: 100px;
}
.bda-roles { display: flex; flex-direction: column; gap: 10px; }
.bda-role {
display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink);
}
.bda-role .dotmark { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-fuchsia); flex: none; }
/* Guide offer card */
.bda-guide {
display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0;
background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
box-shadow: 0 24px 60px rgba(30,58,110,0.08);
}
@media (max-width: 820px) { .bda-guide { grid-template-columns: 1fr; } }
.bda-guide-cover {
position: relative; overflow: hidden;
background: linear-gradient(165deg, #1E3A6E 0%, #050D1F 100%);
padding: 40px; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px;
}
.bda-guide-cover .gtag {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
color: var(--blossom);
}
.bda-guide-cover .gtitle {
font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 26px; color: #fff;
line-height: 1.15; letter-spacing: -0.5px;
}
.bda-guide-cover .gmeta {
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.75); letter-spacing: 0.5px;
}
.bda-guide-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.bda-guide-body .eyebrow { margin-bottom: 14px; }
.bda-guide-body h3 { font-size: 26px; margin-bottom: 12px; }
.bda-guide-body p { font-size: 16px; line-height: 1.6; margin-bottom: 22px; max-width: 50ch; }
.bda-guide-note {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft); margin-top: 14px; letter-spacing: 0.3px;
}
/* Schedule form */
.bda-form-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .bda-form-shell { grid-template-columns: 1fr; gap: 36px; } }
.bda-form {
background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px;
box-shadow: 0 24px 60px rgba(30,58,110,0.10);
}
.bda-field { margin-bottom: 18px; }
.bda-field label {
display: block; font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.bda-field input, .bda-field select {
width: 100%; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--ink);
padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist);
transition: border-color .15s ease, box-shadow .15s ease;
}
.bda-field input:focus, .bda-field select:focus {
outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(120,137,167,0.18);
}
.bda-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .bda-form-row { grid-template-columns: 1fr; } }
.bda-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
/* ========= LEAD-CAPTURE PAGES (request + guide) ========= */
.req-points { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.req-points li { position: relative; padding-left: 30px; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.req-points li strong { color: var(--ink); font-weight: 600; }
.req-points li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 5px;
background: var(--grad-fuchsia);
}
.guide-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 56px; align-items: start; }
.guide-main { display: grid; gap: 28px; }
.guide-form-panel { align-self: start; }
.guide-form-panel .bda-form { margin-top: 0; }
@media (max-width: 880px) { .guide-shell { grid-template-columns: 1fr; gap: 36px; } .guide-form-panel { order: 2; } }
.guide-cover {
position: relative; overflow: hidden;
background: linear-gradient(165deg, #1E3A6E 0%, #050D1F 100%);
border: 1px solid rgba(120,137,167,0.3); border-radius: 18px;
padding: 40px; min-height: 420px;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 34px 80px rgba(5,13,31,0.5);
}
.guide-cover .gtag { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--blossom); position: relative; z-index: 2; }
.guide-cover .gtitle { font-family: 'Roboto', sans-serif; font-weight: 800; font-size: clamp(28px, 3.2vw, 38px); color: #fff; line-height: 1.12; letter-spacing: -0.6px; position: relative; z-index: 2; max-width: 14ch; }
.guide-cover .gmeta { font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.78); letter-spacing: 0.5px; position: relative; z-index: 2; }
.guide-cover .cover-mark {
position: absolute; right: -80px; bottom: -90px; width: 360px; height: 360px;
background: url("../img/logo-mark.png") center/contain no-repeat;
opacity: 0.16; pointer-events: none;
}
.guide-copy h1 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 16px; }
.guide-inside { list-style: none; display: grid; gap: 10px; margin-bottom: 30px; }
.guide-inside li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.guide-inside li .si { position: absolute; left: 0; top: 1px; font-family: 'DM Mono', monospace; font-size: 16px; color: var(--blossom); font-weight: 500; }
/* ========= TWEAKS PANEL POSITIONING is handled by tweaks-panel.jsx ========= */
.nav-toggle { display: none; }
@media (max-width: 760px) {
.nav-inner { padding: 12px 18px; gap: 12px; }
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; margin-left: auto;
background: transparent; border: 1px solid rgba(30,58,110,0.25);
border-radius: 10px; cursor: pointer; color: var(--ink);
}
.nav-toggle span {
display: block; width: 18px; height: 2px; background: currentColor;
position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: rgba(244, 246, 249, 0.98);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(30,58,110,0.12);
padding: 8px 18px 16px;
display: none;
}
.nav-links .nav-link {
padding: 12px 4px; border-bottom: 1px solid rgba(30,58,110,0.08);
}
.nav-links .nav-link:last-child { border-bottom: 0; }
.nav[data-open="true"] .nav-links { display: flex; }
.nav[data-open="true"] .nav-toggle { background: rgba(30,58,110,0.08); }
.nav-cta {
padding: 8px 12px; font-size: 16px;
box-shadow: 0 6px 16px rgba(120,137,167,0.28);
}
}
@media (max-width: 420px) {
.nav-cta { display: none; }
.nav-toggle { margin-left: auto; }
}
/* ===== Home ===== */
/* ----- HERO ----- */
.hero {
background: var(--void); color: white; position: relative; overflow: hidden;
padding: 120px 0 100px;
}
.hero .glow.lavender { width: 720px; height: 720px; top: -240px; right: -200px; opacity: 0.55; }
.hero .glow.fuchsia { width: 520px; height: 520px; bottom: -200px; left: -160px; opacity: 0.45; }
.hero-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: white; max-width: 13ch; }
.hero h1 .accent { background: var(--grad-fuchsia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { color: rgba(210,215,223,0.85); margin: 24px 0 36px; font-size: 19px; max-width: 540px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-watch {
display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 16px;
margin-left: 8px; padding: 8px 4px;
}
.hero-watch .play {
width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
display: inline-flex; align-items: center; justify-content: center; color: var(--blossom);
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px; border-radius: 100px;
background: rgba(30, 58, 110, 0.12); border: 1px solid rgba(30, 58, 110, 0.3);
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 24px;
}
.hero-eyebrow .pill {
background: var(--grad-fuchsia); color: white; font-size: 16px; padding: 3px 8px;
border-radius: 100px; font-weight: 600;
}
/* ----- DASHBOARD MOCK ----- */
.dashboard {
background: linear-gradient(160deg, rgba(15,32,68,0.6), rgba(5,13,31,0.8));
border: 1px solid rgba(30,58,110,0.25);
border-radius: 16px; padding: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(20px);
}
.db-chrome {
display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px;
}
.db-dot { width: 11px; height: 11px; border-radius: 50%; }
.db-chrome .url {
flex: 1; background: rgba(0,0,0,0.3); border-radius: 6px; padding: 4px 12px;
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.7);
border: 1px solid rgba(30,58,110,0.2);
}
.db-body { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.db-side {
background: rgba(5,13,31,0.6); border-radius: 10px; padding: 14px 10px;
border: 1px solid rgba(30,58,110,0.15);
}
.db-side-label {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1px;
text-transform: uppercase; color: var(--lavender); margin: 8px 6px;
}
.db-side-item {
display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
font-size: 16px; color: rgba(210,215,223,0.75); margin-bottom: 2px;
}
.db-side-item.active { background: rgba(30,58,110,0.18); color: white; }
.db-side-item .ic { width: 14px; height: 14px; border-radius: 3px; background: var(--lavender); opacity: 0.5; }
.db-side-item.active .ic { opacity: 1; background: var(--fuchsia); }
.db-main {
background: rgba(5,13,31,0.55); border-radius: 10px; padding: 18px;
border: 1px solid rgba(30,58,110,0.15);
}
.db-status {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
.db-stat {
background: rgba(15,32,68,0.5); border: 1px solid rgba(30,58,110,0.18);
border-radius: 8px; padding: 10px 12px;
}
.db-stat .k {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.3px; white-space: nowrap;
text-transform: uppercase; color: var(--lavender); margin-bottom: 6px;
}
.db-stat .v { font-family: 'Roboto', sans-serif; font-size: 16px; color: white; font-weight: 700; }
.db-stat .ok { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #4ade80; box-shadow: 0 0 8px #4ade80; margin-right: 4px; }
.db-rows { display: flex; flex-direction: column; gap: 6px; }
.db-row {
display: grid; grid-template-columns: 14px 1fr 80px 64px;
gap: 12px; align-items: center;
padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 6px;
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.8);
border: 1px solid rgba(30,58,110,0.1);
}
.db-row .check {
width: 14px; height: 14px; border-radius: 4px; background: var(--grad-fuchsia);
display: inline-flex; align-items: center; justify-content: center;
color: white; font-size: 16px;
}
.db-row .tag {
background: rgba(74, 222, 128, 0.15); color: #4ade80; padding: 2px 8px; border-radius: 100px;
font-size: 16px; text-align: center; letter-spacing: 1px; text-transform: uppercase;
}
/* ----- PROBLEM ----- */
.problem-grid {
display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 18px; align-items: stretch;
}
@media (max-width: 980px) { .problem-grid { grid-template-columns: 1fr; } }
.opt {
background: white; border: 1px solid var(--line); border-radius: 18px;
padding: 32px; position: relative;
}
.opt-tag {
display: inline-block; font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.4px; white-space: nowrap;
text-transform: uppercase; padding: 5px 12px; border-radius: 100px;
margin-bottom: 16px; font-weight: 500;
}
.opt.bad .opt-tag { background: #fee; color: #991b1b; }
.opt.bad h3 { color: #566580; }
.opt.bad::before {
content: '✕'; position: absolute; top: 12px; right: 14px; color: #991b1b;
font-size: 18px; opacity: 0.4;
}
.opt.win {
background: linear-gradient(160deg, var(--iris), var(--void)); color: white;
border: none; box-shadow: 0 24px 60px rgba(15,32,68,0.35);
}
.opt.win h3 { color: white; }
.opt.win p { color: rgba(210,215,223,0.85); }
.opt.win .opt-tag { background: var(--grad-fuchsia); color: white; }
.opt.win::before {
content: ''; position: absolute; inset: 0; border-radius: 18px;
background: radial-gradient(circle at 80% 0%, rgba(120,137,167,0.3), transparent 50%);
pointer-events: none;
}
.opt h3 { margin-bottom: 12px; font-size: 22px; }
.opt p { font-size: 16px; line-height: 1.65; }
/* ----- PLATFORM ----- */
.platform-shell {
display: block;
}
@media (max-width: 980px) { .platform-shell { grid-template-columns: 1fr; } }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feat {
background: white; border: 1px solid var(--line); border-radius: 14px;
padding: 22px 22px 20px; transition: all .2s ease;
}
.feat:hover { border-color: var(--lavender); transform: translateY(-2px); }
.feat-ic {
width: 36px; height: 36px; border-radius: 9px; background: var(--mist);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
color: var(--amethyst); font-family: 'DM Mono', monospace; font-weight: 600; font-size: 16px;
}
.feat h4 { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.feat p { font-size: 16px; line-height: 1.55; }
/* schema mock */
.schema {
background: var(--ink); border-radius: 18px; padding: 18px;
box-shadow: 0 30px 80px rgba(15,32,68,0.25);
border: 1px solid rgba(30,58,110,0.2);
}
.schema-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.schema-tab {
font-family: 'DM Mono', monospace; font-size: 16px; padding: 6px 12px; border-radius: 6px;
color: rgba(210,215,223,0.6); border: 1px solid transparent;
}
.schema-tab.active { background: rgba(30,58,110,0.18); color: white; border-color: rgba(30,58,110,0.3); }
.table-mock {
background: rgba(5,13,31,0.6); border: 1px solid rgba(30,58,110,0.18); border-radius: 10px;
overflow: hidden; margin-bottom: 12px;
}
.table-head {
background: rgba(30,58,110,0.12); padding: 10px 14px;
display: flex; align-items: center; justify-content: space-between;
}
.table-head .name { font-family: 'Roboto', sans-serif; font-size: 16px; color: white; font-weight: 700; }
.table-head .count { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--blossom); letter-spacing: 1px; }
.table-row {
display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 12px; padding: 9px 14px;
border-top: 1px solid rgba(30,58,110,0.08);
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.85);
}
.table-row .field { color: white; }
.table-row .type { color: var(--lavender); }
.table-row .meta { color: rgba(210,215,223,0.6); text-align: right; }
.schema-rel {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--blossom); padding: 8px 14px;
display: flex; align-items: center; gap: 6px;
}
.schema-rel .arr { color: var(--fuchsia); }
/* ----- WHY ----- */
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 64px; }
@media (max-width: 880px) { .why-list { grid-template-columns: 1fr; } }
.why-item {
background: white; border: 1px solid var(--line); border-radius: 18px; padding: 32px;
}
.why-num {
font-family: 'DM Mono', monospace; font-weight: 500; font-size: 16px;
letter-spacing: 2px; color: var(--lavender);
display: block; margin-bottom: 14px;
}
.why-item h3 { font-size: 19px; margin-bottom: 10px; }
.why-item p { font-size: 16px; line-height: 1.65; margin-bottom: 10px; }
.why-item p.fix { color: var(--ink); font-weight: 500; }
.why-item p.fix strong { color: var(--amethyst); }
/* comparison table */
.compare {
background: white; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
box-shadow: 0 24px 60px rgba(15,32,68,0.06);
}
.compare-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.compare-cell {
padding: 18px 22px; border-bottom: 1px solid var(--line);
font-size: 16px; color: var(--ink-soft);
display: flex; align-items: center; gap: 8px;
}
.compare-cell.head {
background: var(--mist); font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--ink);
font-size: 16px; letter-spacing: -0.3px;
}
.compare-cell.brand { background: var(--ink); color: white; }
.compare-cell.row-label { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.5px; color: var(--ink); font-weight: 500; }
.compare-grid > div:nth-child(8n+1), .compare-grid > div:nth-child(8n+2),
.compare-grid > div:nth-child(8n+3), .compare-grid > div:nth-child(8n+4) { background: #F4F6F9; }
.compare-cell.head { background: var(--mist) !important; }
.compare-cell.brand { background: var(--ink) !important; }
.compare-grid > div:last-child, .compare-grid > div:nth-last-child(2),
.compare-grid > div:nth-last-child(3), .compare-grid > div:nth-last-child(4) { border-bottom: none; }
.check-y { color: #15803d; }
.check-n { color: #dc2626; opacity: 0.6; }
.check-p { color: #a16207; }
.compare-col-tb { background: rgba(30,58,110,0.06) !important; border-left: 1px solid var(--lavender); border-right: 1px solid var(--lavender); }
/* ----- AI / MCP ----- */
.ai-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;
}
@media (max-width: 880px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-card {
background: rgba(255,255,255,0.04); border: 1px solid rgba(30,58,110,0.25);
border-radius: 18px; padding: 28px; backdrop-filter: blur(10px);
}
.ai-card h3 { color: white; font-size: 19px; margin-bottom: 10px; }
.ai-card p { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.65; }
.ai-card .feat-ic { background: rgba(30,58,110,0.18); border: 1px solid rgba(30,58,110,0.3); color: var(--blossom); }
.mcp-mock {
background: linear-gradient(160deg, rgba(5,13,31,0.6), rgba(15,32,68,0.4));
border: 1px solid rgba(30,58,110,0.3); border-radius: 18px; padding: 24px;
margin-top: 8px;
}
.mcp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; }
@media (max-width: 880px) { .mcp-flow { grid-template-columns: 1fr; } .mcp-arrow { transform: rotate(90deg); } }
.mcp-node {
background: rgba(5,13,31,0.5); border: 1px solid rgba(30,58,110,0.3);
border-radius: 12px; padding: 18px; text-align: center;
}
.mcp-node .lbl {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 8px;
}
.mcp-node .name { font-family: 'Roboto', sans-serif; font-weight: 700; color: white; font-size: 16px; margin-bottom: 4px; }
.mcp-node .meta { font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.6); }
.mcp-node.brand { background: var(--grad-aurora); border-color: transparent; position: relative; }
.mcp-node.brand::before {
content: ''; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
width: 56px; height: 56px; border-radius: 50%;
background: white url("../img/logo-mark.png") center/72% no-repeat;
box-shadow: 0 8px 24px rgba(30,58,110,0.45), 0 0 0 4px rgba(255,255,255,0.15);
}
.mcp-node.brand { padding-top: 36px; }
.mcp-node.brand .lbl { color: rgba(255,255,255,0.7); }
.mcp-node.brand .meta { color: rgba(255,255,255,0.7); }
.mcp-arrow { color: var(--lavender); font-size: 18px; text-align: center; opacity: 0.7; }
.mcp-code {
margin-top: 16px; background: rgba(0,0,0,0.4); border: 1px solid rgba(30,58,110,0.2);
border-radius: 10px; padding: 16px 18px;
font-family: 'DM Mono', monospace; font-size: 16px; line-height: 1.7;
color: rgba(255,255,255,0.92);
}
.mcp-code .kw { color: var(--fuchsia); }
.mcp-code .str { color: #b6f7c4; }
.mcp-code .cm { color: rgba(210,215,223,0.7); }
/* ----- SECURITY ----- */
.sec-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .sec-pillars { grid-template-columns: 1fr; } }
.sec-pillar {
background: white; border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.sec-pillar .feat-ic { background: var(--mist); }
.sec-pillar h4 { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sec-pillar p { font-size: 16px; line-height: 1.55; }
.audit {
background: var(--ink); border-radius: 18px; padding: 18px;
border: 1px solid rgba(30,58,110,0.2);
box-shadow: 0 30px 80px rgba(15,32,68,0.25);
}
.audit-head {
display: flex; justify-content: space-between; padding: 4px 6px 14px;
border-bottom: 1px solid rgba(30,58,110,0.15);
}
.audit-head .ttl { font-family: 'Roboto', sans-serif; color: white; font-weight: 700; font-size: 16px; }
.audit-head .live {
font-family: 'DM Mono', monospace; font-size: 16px; color: #4ade80; letter-spacing: 1px;
display: flex; align-items: center; gap: 6px;
}
.audit-head .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.audit-row {
display: grid; grid-template-columns: 80px 1fr 90px;
gap: 10px; padding: 10px 6px; border-bottom: 1px solid rgba(30,58,110,0.06);
font-family: 'DM Mono', monospace; font-size: 16px;
}
.audit-row .t { color: rgba(210,215,223,0.6); }
.audit-row .a { color: white; }
.audit-row .a .actor { color: var(--blossom); }
.audit-row .a .verb { color: var(--fuchsia); }
.audit-row .tag {
text-align: center; font-size: 16px; padding: 3px 6px; border-radius: 100px;
letter-spacing: 1px; text-transform: uppercase;
}
.audit-row .tag.allow { background: rgba(74,222,128,0.15); color: #4ade80; }
.audit-row .tag.deny { background: rgba(248,113,113,0.18); color: #f87171; }
.insurance-callout {
margin-top: 32px; padding: 28px 32px;
background: linear-gradient(135deg, rgba(30,58,110,0.18), rgba(120,137,167,0.1));
border: 1px solid rgba(120,137,167,0.3); border-radius: 18px;
display: flex; gap: 24px; align-items: center;
}
@media (max-width: 700px) { .insurance-callout { flex-direction: column; align-items: flex-start; } }
.insurance-callout .label {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 8px;
}
.insurance-callout p { color: rgba(210,215,223,0.9); font-size: 16px; line-height: 1.6; }
.insurance-callout .icon-block {
flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; background: var(--grad-fuchsia);
display: flex; align-items: center; justify-content: center; color: white;
font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px;
}
/* ----- AUDIENCE ----- */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .aud-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aud-grid { grid-template-columns: 1fr; } }
.aud-card {
background: white; border: 1px solid var(--line); border-radius: 18px; padding: 28px;
position: relative; overflow: hidden; transition: all .2s ease;
}
.aud-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15,32,68,0.10); border-color: var(--lavender); }
.aud-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-aurora);
}
.aud-card.feature { background: var(--ink); color: white; border: none; }
.aud-card.feature h3 { color: white; }
.aud-card.feature p { color: rgba(210,215,223,0.8); }
.aud-card.feature .aud-tag { color: var(--blossom); }
.aud-card.feature::after {
content: ''; position: absolute; right: -60px; bottom: -60px;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(120,137,167,0.35), transparent 70%);
filter: blur(30px);
}
.aud-tag {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--lavender); margin-bottom: 14px; display: block;
}
.aud-card h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.25; }
.aud-card p { font-size: 16px; line-height: 1.6; }
/* ----- WHAT YOU GET ----- */
.yg-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
@media (max-width: 880px) { .yg-grid { grid-template-columns: 1fr; } }
.yg-block {
background: white; border: 1px solid var(--line); border-radius: 20px; padding: 36px;
}
.yg-block.partner {
background: linear-gradient(160deg, var(--ink), var(--iris)); color: white; border: none;
position: relative; overflow: hidden;
}
.yg-block.partner::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(120,137,167,0.3), transparent 70%);
filter: blur(30px);
}
.yg-block h3 { font-size: 22px; margin-bottom: 8px; }
.yg-block.partner h3 { color: white; }
.yg-block .yg-eyebrow {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--lavender); margin-bottom: 6px;
}
.yg-block.partner .yg-eyebrow { color: var(--blossom); }
.yg-block .lede { font-size: 16px; margin-bottom: 24px; line-height: 1.6; }
.yg-list { list-style: none; }
.yg-list li {
display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
font-size: 16px; color: var(--ink-soft); border-bottom: 1px dashed rgba(30,58,110,0.15);
}
.yg-list li:last-child { border-bottom: none; }
.yg-block.partner .yg-list li { color: rgba(210,215,223,0.85); border-color: rgba(30,58,110,0.18); }
.yg-list li::before {
content: ''; width: 16px; height: 16px; border-radius: 5px;
background: var(--grad-fuchsia); flex-shrink: 0; margin-top: 2px;
display: inline-flex; align-items: center; justify-content: center;
background-image: url("data:image/svg+xml;utf8,"), linear-gradient(90deg,#1E3A6E,#7889A7); background-color: #1E3A6E;
background-repeat: no-repeat; background-position: center;
}
/* ----- FINAL CTA ----- */
.final {
background: var(--grad-deep); color: white; position: relative; overflow: hidden;
padding: 120px 0;
text-align: center;
}
.final .glow.fuchsia { width: 700px; height: 700px; top: -200px; left: -200px; opacity: 0.4; }
.final .glow.lavender { width: 500px; height: 500px; bottom: -200px; right: -200px; opacity: 0.4; }
.final h2 { color: white; max-width: 18ch; margin: 0 auto 18px; }
.final p.lede { color: rgba(210,215,223,0.85); margin: 0 auto 32px; }
.final-mark {
width: 120px; height: 120px; margin: 0 auto 28px;
background: url("../img/logo-mark.png") center/contain no-repeat;
filter: drop-shadow(0 0 32px rgba(120,137,167,0.55));
position: relative; z-index: 2;
flex-shrink: 0;
}
.final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
/* ----- AI AGENT & VIBE CODING ----- */
.vibe-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 880px) { .vibe-grid { grid-template-columns: 1fr; } }
.vibe-card {
background: rgba(255,255,255,0.04); border: 1px solid rgba(30,58,110,0.25);
border-radius: 18px; padding: 32px; backdrop-filter: blur(10px);
position: relative;
}
.vibe-card .vibe-num {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px;
color: var(--fuchsia); margin-bottom: 14px; font-weight: 500;
}
.vibe-card h3 { color: white; font-size: 20px; margin-bottom: 12px; line-height: 1.25; }
.vibe-card p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.65; margin-bottom: 12px; }
.vibe-card p:last-child { margin-bottom: 0; }
.vibe-card .vibe-pull {
font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px;
color: #ffffff; margin-top: 4px; letter-spacing: -0.3px;
}
/* ----- TWEAKS PANEL ROOT ----- */
#tweaks-root { position: fixed; bottom: 16px; right: 16px; z-index: 100; }
/* ----- HERO LOGO WATERMARK ----- */
.hero-mark {
position: absolute; right: -120px; bottom: -160px;
width: 640px; height: 640px;
background: url("../img/logo-mark.png") center/contain no-repeat;
opacity: 0.08; pointer-events: none; z-index: 0;
filter: drop-shadow(0 0 60px rgba(120,137,167,0.4));
}
@media (max-width: 880px) { .hero-mark { display: none; } }
/* ===== Platform ===== */
.page-hero {
background: var(--void); color: white; position: relative; overflow: hidden;
padding: 100px 0 80px;
}
.page-hero .glow.lavender { width: 600px; height: 600px; top: -200px; right: -200px; opacity: 0.5; }
.page-hero .glow.fuchsia { width: 400px; height: 400px; bottom: -160px; left: -120px; opacity: 0.4; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; max-width: 18ch; margin-bottom: 18px; font-size: clamp(40px, 5vw, 64px); }
.page-hero .lede { color: rgba(210,215,223,0.85); margin-bottom: 28px; max-width: 640px; }
[data-page="contact"] .page-hero { padding-bottom: 50px !important; }
[data-page="contact"] .page-hero .lede { margin-bottom: 0; }
[data-page="contact"] section:not(.page-hero) { padding-top: 24px !important; }
[data-page="contact"] .contact-grid { padding-top: 20px; }
.toc {
display: flex; flex-wrap: wrap; gap: 8px;
}
.toc a {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1px;
text-transform: uppercase; padding: 8px 14px; border-radius: 100px;
background: rgba(30, 58, 110, 0.12); border: 1px solid rgba(30, 58, 110, 0.3);
color: var(--blossom);
}
.toc a:hover { background: rgba(30, 58, 110, 0.25); color: white; }
.cap {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
padding: 64px 0; border-bottom: 1px solid var(--line);
}
.cap:last-child { border-bottom: none; }
.cap.flip { grid-template-columns: 1.05fr 1fr; }
.cap.flip .cap-vis { order: -1; }
@media (max-width: 880px) { .cap, .cap.flip { grid-template-columns: 1fr; gap: 32px; } .cap.flip .cap-vis { order: 0; } }
.cap .eyebrow { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px; color: var(--lavender); text-transform: uppercase; margin-bottom: 14px; }
.cap h2 { font-size: 32px; margin-bottom: 14px; }
.cap p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.cap ul { list-style: none; margin-top: 14px; }
.cap ul li {
font-size: 16px; color: var(--ink); padding: 8px 0; padding-left: 28px;
position: relative; line-height: 1.55;
border-bottom: 1px dashed rgba(30,58,110,0.18);
}
.cap ul li:last-child { border-bottom: none; }
.cap ul li::before {
content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border-radius: 5px;
background: var(--grad-fuchsia);
background-image: url("data:image/svg+xml;utf8,"), linear-gradient(90deg,#1E3A6E,#7889A7); background-color: #1E3A6E;
background-repeat: no-repeat; background-position: center;
}
/* visual — code panel */
.codepanel {
background: var(--ink); border-radius: 18px; padding: 22px 24px;
border: 1px solid rgba(30,58,110,0.22);
box-shadow: 0 30px 80px rgba(15,32,68,0.18);
font-family: 'DM Mono', monospace; font-size: 16px; line-height: 1.75; color: rgba(210,215,223,0.85);
}
.codepanel .filename {
font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
color: var(--lavender); margin-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid rgba(30,58,110,0.18);
}
.kw { color: var(--fuchsia); }
.str { color: #a7f3d0; }
.cm { color: rgba(210,215,223,0.6); }
.id { color: white; }
.num { color: #fcd34d; }
.vis-stack { display: flex; flex-direction: column; gap: 12px; }
.vis-row {
background: white; border: 1px solid var(--line); border-radius: 12px;
padding: 14px 16px; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center;
}
.vis-row .ic {
width: 36px; height: 36px; border-radius: 8px; background: var(--mist);
color: var(--amethyst); font-family: 'DM Mono', monospace; font-weight: 600;
display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.vis-row .name { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; }
.vis-row .meta { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft); }
.vis-row .badge {
background: var(--grad-fuchsia); color: white; font-size: 16px; padding: 4px 10px;
border-radius: 100px; letter-spacing: 1px; font-family: 'DM Mono', monospace;
}
.stream {
background: var(--ink); border-radius: 18px; padding: 18px;
border: 1px solid rgba(30,58,110,0.22);
}
.stream-line {
display: grid; grid-template-columns: 60px 1fr 60px; gap: 10px; padding: 9px 12px;
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.85);
border-bottom: 1px solid rgba(30,58,110,0.08);
}
.stream-line .t { color: rgba(210,215,223,0.6); }
.stream-line .lvl { font-size: 16px; padding: 2px 6px; border-radius: 100px; text-align: center;
background: rgba(74,222,128,0.15); color: #4ade80; letter-spacing: 1px;
}
.api-tabs {
display: flex; border-bottom: 1px solid rgba(30,58,110,0.2); margin-bottom: 14px;
}
.api-tabs .tab {
font-family: 'DM Mono', monospace; font-size: 16px; padding: 8px 14px; letter-spacing: 1px;
color: rgba(210,215,223,0.6); border-bottom: 2px solid transparent;
}
.api-tabs .tab.active { color: white; border-bottom-color: var(--fuchsia); }
/* ===== Security ===== */
.page-hero { background: var(--void); color: white; position: relative; overflow: hidden; padding: 100px 0 80px; }
.page-hero .glow.lavender { width: 600px; height: 600px; top: -200px; right: -200px; opacity: 0.5; }
.page-hero .glow.fuchsia { width: 400px; height: 400px; bottom: -160px; left: -120px; opacity: 0.4; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; max-width: 18ch; margin-bottom: 18px; font-size: clamp(40px, 5vw, 64px); }
.page-hero .lede { color: rgba(210,215,223,0.85); margin-bottom: 28px; max-width: 640px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 880px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat {
background: linear-gradient(160deg, rgba(30,58,110,0.6), rgba(30,58,110,0.32));
border: 1px solid rgba(120,137,167,0.75); border-radius: 12px; padding: 18px 20px;
box-shadow: 0 8px 22px rgba(5,13,31,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
}
.stat .k { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
color: var(--blossom); text-transform: uppercase; margin-bottom: 8px; }
.stat .v { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 24px; color: white; }
.pillar {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
padding: 64px 0; border-bottom: 1px solid var(--line);
}
.pillar.flip { grid-template-columns: 1.05fr 1fr; }
.pillar.flip .pillar-vis { order: -1; }
@media (max-width: 880px) { .pillar, .pillar.flip { grid-template-columns: 1fr; gap: 32px; } .pillar.flip .pillar-vis { order: 0; } }
.pillar .eyebrow { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px; color: var(--lavender); text-transform: uppercase; margin-bottom: 14px; }
.pillar h2 { font-size: 32px; margin-bottom: 14px; }
.pillar p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.pillar ul { list-style: none; }
.pillar ul li {
font-size: 16px; padding: 8px 0 8px 28px; position: relative; line-height: 1.55;
border-bottom: 1px dashed rgba(30,58,110,0.18); color: var(--ink);
}
.pillar ul li:last-child { border-bottom: none; }
.pillar ul li::before {
content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border-radius: 5px;
background: var(--grad-fuchsia);
background-image: url("data:image/svg+xml;utf8,"), linear-gradient(90deg,#1E3A6E,#7889A7); background-color: #1E3A6E;
background-repeat: no-repeat; background-position: center;
}
/* Tenant isolation visual */
.tenants { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tenant {
background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px;
position: relative;
}
.tenant.locked { background: linear-gradient(160deg, var(--ink), var(--iris)); color: white; border: none; }
.tenant .lbl { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1px;
color: var(--lavender); text-transform: uppercase; margin-bottom: 10px; }
.tenant.locked .lbl { color: var(--blossom); }
.tenant .name { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.tenant .meta { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft); }
.tenant.locked .meta { color: rgba(210,215,223,0.65); }
.tenant .bar {
height: 6px; background: var(--line); border-radius: 100px; margin-top: 12px; overflow: hidden;
}
.tenant .bar > div { height: 100%; background: var(--grad-fuchsia); border-radius: 100px; }
.tenant.locked .bar { background: rgba(30,58,110,0.18); }
.barrier {
text-align: center; font-family: 'DM Mono', monospace; font-size: 16px;
color: var(--lavender); letter-spacing: 1px; padding: 12px; grid-column: span 2;
border-top: 1px dashed rgba(30,58,110,0.4); border-bottom: 1px dashed rgba(30,58,110,0.4);
}
/* ABAC matrix */
.abac { background: var(--ink); border-radius: 18px; padding: 22px; border: 1px solid rgba(30,58,110,0.22); }
.abac-row {
display: grid; grid-template-columns: 1.1fr 1fr 1fr 80px; gap: 12px; padding: 10px 4px;
font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(210,215,223,0.85);
border-bottom: 1px solid rgba(30,58,110,0.08); align-items: center;
}
.abac-row.head { color: var(--lavender); font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; }
.abac-row .actor { color: white; }
.abac-row .verdict {
text-align: center; font-size: 16px; padding: 3px 6px; border-radius: 100px; letter-spacing: 1px;
}
.abac-row .verdict.allow { background: rgba(74,222,128,0.15); color: #4ade80; }
.abac-row .verdict.deny { background: rgba(248,113,113,0.18); color: #f87171; }
/* RLS code */
.codepanel { background: var(--ink); border-radius: 18px; padding: 22px 24px;
border: 1px solid rgba(30,58,110,0.22); font-family: 'DM Mono', monospace;
font-size: 16px; line-height: 1.75; color: rgba(210,215,223,0.85); }
.codepanel .filename { font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
color: var(--lavender); margin-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid rgba(30,58,110,0.18); }
.kw { color: var(--fuchsia); }
.str { color: #a7f3d0; }
.cm { color: rgba(210,215,223,0.6); }
.id { color: white; }
.num { color: #fcd34d; }
/* Audit feed */
.audit { background: var(--ink); border-radius: 18px; padding: 18px;
border: 1px solid rgba(30,58,110,0.22); }
.audit-row {
display: grid; grid-template-columns: 80px 1fr 90px; gap: 10px; padding: 10px 6px;
border-bottom: 1px solid rgba(30,58,110,0.06);
font-family: 'DM Mono', monospace; font-size: 16px;
}
.audit-row .t { color: rgba(210,215,223,0.6); }
.audit-row .a { color: white; }
.audit-row .a .actor { color: var(--blossom); }
.audit-row .a .verb { color: var(--fuchsia); }
.audit-row .tag {
text-align: center; font-size: 16px; padding: 3px 6px; border-radius: 100px;
letter-spacing: 1px; text-transform: uppercase;
}
.audit-row .tag.allow { background: rgba(74,222,128,0.15); color: #4ade80; }
.audit-row .tag.deny { background: rgba(248,113,113,0.18); color: #f87171; }
/* Vertical band */
.vertical {
background: linear-gradient(135deg, var(--iris), var(--amethyst)); color: white;
padding: 80px 0; position: relative; overflow: hidden;
}
.vertical .glow.fuchsia { width: 600px; height: 600px; top: -200px; right: -200px; opacity: 0.4; }
.vertical .container { position: relative; z-index: 2; }
.vertical h2 { color: white; max-width: 16ch; }
.vertical p { color: rgba(255,255,255,0.95); }
.vertical .lede { color: rgba(255,255,255,0.95); }
.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 880px) { .reg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reg-grid { grid-template-columns: 1fr; } }
.reg {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
border-radius: 14px; padding: 22px;
}
.reg .label { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blossom); margin-bottom: 8px; }
.reg h4 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: white; margin-bottom: 8px; }
.reg p { font-size: 16px; line-height: 1.5; }
.placeholder-cap {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft);
margin-top: 12px; letter-spacing: 0.5px;
}
.placeholder-cap .tag {
display: inline-block; background: #fef3c7; color: #92400e;
padding: 2px 8px; border-radius: 100px; font-size: 16px; margin-right: 8px;
}
/* ===== Who it's for ===== */
.page-hero { background: var(--void); color: white; position: relative; overflow: hidden; padding: 100px 0 80px; }
.page-hero .glow.lavender { width: 600px; height: 600px; top: -200px; right: -200px; opacity: 0.5; }
.page-hero .glow.fuchsia { width: 400px; height: 400px; bottom: -160px; left: -120px; opacity: 0.4; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; max-width: 18ch; margin-bottom: 18px; font-size: clamp(40px, 5vw, 64px); }
.page-hero .lede { color: rgba(210,215,223,0.85); margin-bottom: 28px; max-width: 640px; }
.audience {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
padding: 80px 0; border-bottom: 1px solid var(--line);
}
.audience.flip { grid-template-columns: 1.05fr 1fr; }
.audience.flip .audience-vis { order: -1; }
@media (max-width: 880px) { .audience, .audience.flip { grid-template-columns: 1fr; gap: 32px; } .audience.flip .audience-vis { order: 0; } }
.audience .eyebrow {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 2px;
color: var(--lavender); text-transform: uppercase; margin-bottom: 14px;
}
.audience h2 { font-size: 32px; margin-bottom: 14px; }
.audience p.lede { font-size: 17px; margin-bottom: 22px; max-width: 540px; }
.audience h4 {
font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700;
color: var(--ink); margin: 22px 0 10px;
}
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) { .pain { grid-template-columns: 1fr; } }
.pain-item {
background: white; border: 1px solid var(--line); border-radius: 12px;
padding: 14px 16px;
}
.pain-item .l {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: #991b1b; margin-bottom: 6px;
}
.pain-item .v { font-size: 16px; color: var(--ink); line-height: 1.45; }
.gain {
background: linear-gradient(160deg, var(--iris), var(--void));
color: white; border-radius: 16px; padding: 22px 24px;
}
.gain .l {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 8px;
}
.gain p { color: rgba(210,215,223,0.9); font-size: 16px; line-height: 1.6; }
.audience-cta {
margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap;
}
/* Persona cards (visuals) */
.persona {
background: white; border: 1px solid var(--line); border-radius: 18px;
padding: 28px; box-shadow: 0 24px 60px rgba(15,32,68,0.08);
position: relative; overflow: hidden;
}
.persona::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--grad-aurora);
}
.persona-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar {
width: 52px; height: 52px; border-radius: 14px; background: var(--grad-aurora);
display: flex; align-items: center; justify-content: center;
color: white; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px;
box-shadow: 0 10px 24px rgba(30,58,110,0.3);
}
.persona-head .who h4 {
font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 17px;
margin: 0 0 2px; color: var(--ink);
}
.persona-head .who .role {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft);
}
.persona blockquote {
font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink);
padding: 14px 16px; border-left: 3px solid var(--lavender);
background: var(--mist); border-radius: 8px; margin-bottom: 14px;
}
.persona .meta-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.persona .meta-cell {
background: var(--parchment); border-radius: 8px; padding: 10px 12px;
}
.persona .meta-cell .k {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}
.persona .meta-cell .v {
font-family: 'Roboto', sans-serif; font-size: 16px; color: var(--ink); font-weight: 700;
}
/* Migration visual */
.migrate {
background: white; border: 1px solid var(--line); border-radius: 18px;
padding: 24px; display: grid; gap: 14px;
}
.migrate-row {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
}
@media (max-width: 600px) { .migrate-row { grid-template-columns: 1fr; } }
.migrate-side {
background: var(--parchment); border: 1px solid var(--line); border-radius: 12px;
padding: 16px; text-align: center;
}
.migrate-side.from { background: #fee; border-color: #b91c1c; }
.migrate-side.from .lbl { color: #991b1b; }
.migrate-side.to { background: linear-gradient(160deg, var(--iris), var(--void)); color: white; border: none; }
.migrate-side.to .lbl { color: var(--blossom); }
.migrate-side.to .v { color: white; }
.migrate-side .lbl {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; margin-bottom: 8px;
}
.migrate-side .v {
font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink);
}
.migrate-arrow {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--lavender);
letter-spacing: 1px; padding: 0 4px;
}
/* AI grid visual */
.agents {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.agent {
background: white; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
}
.agent .name {
font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px;
}
.agent .meta {
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ink-soft);
letter-spacing: 0.5px;
}
.agent .stat-bar {
margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap;
}
.agent .chip {
font-family: 'DM Mono', monospace; font-size: 16px; padding: 3px 8px;
border-radius: 100px; background: var(--mist); color: var(--amethyst);
letter-spacing: 1px; text-transform: uppercase;
}
/* ===== Contact ===== */
.page-hero {
background: var(--void); color: white; position: relative; overflow: hidden;
padding: 100px 0 80px;
}
.page-hero .glow.lavender { width: 600px; height: 600px; top: -200px; right: -200px; opacity: 0.5; }
.page-hero .glow.fuchsia { width: 400px; height: 400px; bottom: -160px; left: -120px; opacity: 0.4; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; max-width: 18ch; margin-bottom: 18px; font-size: clamp(40px, 5vw, 64px); }
.page-hero .lede { color: rgba(210,215,223,0.9); margin-bottom: 28px; max-width: 640px; }
.contact-grid {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
padding: 80px 0;
}
@media (max-width: 760px) {
.page-hero { padding: 64px 0 32px; }
.contact-grid { padding: 24px 0 56px; gap: 24px; }
.form-card { padding: 24px; border-radius: 16px; }
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.form-card {
background: var(--void); color: #F4F6F9;
border: 1px solid rgba(30,58,110,0.25); border-radius: 20px;
padding: 36px; box-shadow: 0 30px 80px rgba(5, 13, 31, 0.5);
}
.form-card h2, .form-card .lede { color: #F4F6F9; }
.form-card .lede { color: #D2D7DF; }
.form-card .hs-form label,
.form-card .hs-form .hs-form-field > label,
.form-card .hs-form legend { color: #D2D7DF !important; font-weight: 500; }
.form-card .hs-form .hs-input,
.form-card .hs-form textarea,
.form-card .hs-form select {
background: rgba(255,255,255,0.06) !important;
color: #F4F6F9 !important;
border: 1px solid rgba(30,58,110,0.35) !important;
border-radius: 10px !important;
}
.form-card .hs-form .hs-input::placeholder,
.form-card .hs-form textarea::placeholder { color: #7889A7 !important; }
.form-card .hs-form .hs-input:focus,
.form-card .hs-form textarea:focus,
.form-card .hs-form select:focus {
outline: none;
border-color: var(--fuchsia) !important;
box-shadow: 0 0 0 3px rgba(120,137,167,0.25);
}
.form-card .hs-button {
background: var(--grad-silver) !important;
color: #0F2044 !important;
border: 0 !important;
padding: 12px 22px !important;
border-radius: 10px !important;
font-weight: 600 !important;
box-shadow: 0 8px 20px rgba(15,32,68,0.22);
cursor: pointer;
}
.form-card .hs-error-msgs,
.form-card .hs-error-msg { color: #fda4af !important; }
.form-card .hs-form a { color: var(--fuchsia); }
.form-card h2 { font-size: 24px; margin-bottom: 8px; }
.form-card .lede { font-size: 16px; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--amethyst); font-weight: 500;
}
.field input, .field textarea, .field select {
background: var(--parchment); border: 1px solid var(--line); border-radius: 10px;
padding: 12px 14px; font-family: inherit; font-size: 16px; color: var(--ink);
transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--lavender); background: white;
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 16px; color: var(--ink-soft); }
.submit-row {
display: flex; gap: 12px; align-items: center; margin-top: 22px;
flex-wrap: wrap;
}
.small-note { font-size: 16px; color: var(--ink-soft); }
.sidekick {
display: flex; flex-direction: column; gap: 18px;
}
.sk-card {
background: linear-gradient(160deg, var(--ink), var(--iris)); color: white;
border-radius: 18px; padding: 28px; position: relative; overflow: hidden;
}
.sk-card::before {
content: ''; position: absolute; right: -80px; top: -80px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(120,137,167,0.32), transparent 70%);
filter: blur(20px); pointer-events: none;
}
.sk-card h3 { color: white; font-size: 18px; margin-bottom: 8px; position: relative; z-index: 2; }
.sk-card p { color: rgba(210,215,223,0.85); font-size: 16px; line-height: 1.6; position: relative; z-index: 2; }
.sk-card a {
display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
font-family: 'DM Mono', monospace; font-size: 16px; color: var(--fuchsia);
letter-spacing: 1px; position: relative; z-index: 2;
}
.sk-card.light {
background: var(--mist); color: var(--ink);
}
.sk-card.light h3 { color: var(--ink); }
.sk-card.light p { color: var(--ink-soft); }
.sk-card.light::before { display: none; }
.sk-card.light a { color: var(--amethyst); }
.channels {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
position: relative; z-index: 2;
}
.channel {
background: rgba(255,255,255,0.06); border: 1px solid rgba(30,58,110,0.2);
border-radius: 12px; padding: 12px 14px;
}
.channel .k {
font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blossom); margin-bottom: 4px;
}
.channel .v { font-size: 16px; color: white; font-weight: 500; }
.page-view[hidden] { display: none !important; }
.page-view { animation: pageFade 0.25s ease; }
@keyframes pageFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ===== Mobile responsive fixes ===== */
@media (max-width: 980px) {
.hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 880px) {
.pillar, .pillar.flip, .contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
.dashboard, .pillar-vis, .compare-grid, .compare-table {
max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }
.container { padding: 0 20px; }
}
/* tighten Build-a-thon to Why transition */
section#buildathon-block.bda-home { padding-bottom: 24px !important; }
section#buildathon-block.bda-home + section#why-taruvibase { padding-top: 32px !important; }
@media (max-width: 760px) {
section#buildathon-block.bda-home { padding-bottom: 18px !important; }
section#buildathon-block.bda-home + section#why-taruvibase { padding-top: 24px !important; }
}
/* mobile nav contrast */
@media (max-width: 760px) {
nav.nav .nav-toggle {
color: #ffffff !important;
border-color: rgba(210, 215, 223, 0.35) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
nav.nav[data-open="true"] .nav-toggle {
background: rgba(255, 255, 255, 0.12) !important;
}
nav.nav .nav-links {
background: linear-gradient(180deg, rgba(5, 13, 31, 0.98), rgba(15, 32, 68, 0.98)) !important;
border-bottom: 1px solid rgba(120, 137, 167, 0.32) !important;
box-shadow: 0 18px 36px rgba(5, 13, 31, 0.28) !important;
}
nav.nav .nav-links .nav-link,
nav.nav .nav-links a {
color: rgba(255, 255, 255, 0.88) !important;
}
nav.nav .nav-links .nav-link:hover,
nav.nav .nav-links a:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08) !important;
}
}
/* ==== brand overrides (static) ==== */
/* Brand-aligned nav: dark navy, white text — blends with the hero
instead of creating a white seam over the navy gradient. */
nav.nav {
background: rgba(5, 13, 31, 0.72) !important;
border-bottom: 1px solid rgba(120, 137, 167, 0.18) !important;
}
.nav-logo { color: #ffffff !important; }
.nav-logo .dot { color: #7889A7 !important; }
.nav-link, .nav-links a { color: rgba(255, 255, 255, 0.65) !important; }
.nav-link:hover, .nav-links a:hover { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; }
.nav-link.active, .nav-links a.active { color: #ffffff !important; }
.nav-link { padding: 6px 12px !important; border-radius: 8px !important; }
.nav-link.is-active { color: #ffffff !important; background: rgba(255,255,255,0.10) !important; }
.nav-link.is-active::after { background: #D2D7DF !important; height: 2px !important; }
@media (max-width: 760px) {
nav.nav .nav-toggle {
color: #ffffff !important;
border-color: rgba(210, 215, 223, 0.35) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
nav.nav[data-open="true"] .nav-toggle {
background: rgba(255, 255, 255, 0.12) !important;
}
nav.nav .nav-links {
background: linear-gradient(180deg, rgba(5, 13, 31, 0.98), rgba(15, 32, 68, 0.98)) !important;
border-bottom: 1px solid rgba(120, 137, 167, 0.32) !important;
box-shadow: 0 18px 36px rgba(5, 13, 31, 0.28) !important;
}
nav.nav .nav-links .nav-link,
nav.nav .nav-links a {
color: rgba(255, 255, 255, 0.88) !important;
}
nav.nav .nav-links .nav-link:hover,
nav.nav .nav-links a:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08) !important;
}
}
/* "Don't" path cards — subtle slate tint + stronger border so they read
as the de-emphasised alternatives next to the navy TaruviBase card. */
.opt.bad {
background: rgba(120, 137, 167, 0.05) !important;
border: 1px solid rgba(120, 137, 167, 0.22) !important;
box-shadow: 0 1px 2px rgba(15, 32, 68, 0.04) !important;
}
.opt.bad .opt-tag {
background: rgba(120, 137, 167, 0.12) !important;
color: #566580 !important;
}
/* Shine: a highlight band injected directly into each brand-masked tree
logo. The tree element's own mask clips the band to the tree shape, so no
fragile self-mask is needed. Plain CSS animation auto-runs and restarts
cleanly even when the framework re-renders the logo. The large
translucent homepage hero watermark (.hero-mark) is excluded. */
.tb-shine-band {
position: absolute; top: -50%; left: 0; width: 38%; height: 200%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
pointer-events: none; z-index: 4;
transform: translateX(-180%) skewX(-18deg);
animation: tb-shine-move 2.4s linear infinite;
}
@keyframes tb-shine-move {
0% { transform: translateX(-180%) skewX(-18deg); }
100% { transform: translateX(380%) skewX(-18deg); }
}
/* ==== Brand mark image (silver logo used directly in nav + footer) ==== */
.nav-logo .nav-logo-img { width: 30px; height: 30px; display: inline-block; object-fit: contain; vertical-align: middle; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(5,13,31,0.45)); }
.footer-brand .nav-logo .nav-logo-img { width: 34px; height: 34px; }