/*
* Generated faithfully from Twinbit Site.html.
* Re-run: node tools/extract-faithful-template.mjs
* Do not hand-edit generated style values; edit the master bundle or extraction script.
*/
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-cyrillic-ext.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: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-vietnamese.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: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-latin-ext.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: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-latin.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: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-cyrillic-ext.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: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-vietnamese.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: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-latin-ext.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: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-latin.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: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-cyrillic-ext.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: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-vietnamese.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: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-latin-ext.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: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-latin.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: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-cyrillic-ext.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: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-vietnamese.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: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-latin-ext.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: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-latin.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: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-cyrillic-ext.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: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-vietnamese.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: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-latin-ext.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: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/manrope-latin.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/space-grotesk-vietnamese.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: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/space-grotesk-latin-ext.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: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/space-grotesk-latin.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/space-grotesk-vietnamese.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: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/space-grotesk-latin-ext.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: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/space-grotesk-latin.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/space-grotesk-vietnamese.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: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/space-grotesk-latin-ext.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: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/space-grotesk-latin.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/space-grotesk-vietnamese.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: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/space-grotesk-latin-ext.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: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/space-grotesk-latin.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;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#08090c;color:#e8e9ec;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc,#5b8cff);text-decoration:none}
a:hover{color:#fff}
::selection{background:var(--acc,#5b8cff);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#23262e;border-radius:6px}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Extracted original inline declarations */
.tw-s1{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--acc,#5b8cff) 26%, transparent), transparent 60%), radial-gradient(900px 600px at 8% 4%, rgba(138,125,255,.20), transparent 58%), radial-gradient(1200px 900px at 50% 120%, rgba(91,140,255,.12), transparent 60%)}
.tw-s2{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 40%,transparent 85%)}
.tw-s3{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.12) .55px,transparent .7px);background-size:4px 4px}
.tw-s4{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.tw-s5{max-width:1280px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:26px}
.tw-s6{display:flex;align-items:center;gap:12px;cursor:pointer;color:#fff}
.tw-s7{height:30px;width:auto;display:block}
.tw-s8{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a8f9a;border-left:1px solid rgba(255,255,255,.18);padding-left:12px;line-height:1.2;max-width:120px}
.tw-s9{flex:1}
.tw-s10{display:flex;gap:6px;align-items:center}
.tw-s11{cursor:pointer;font-size:13.5px;font-weight:700;color:#dfe2e8;padding:9px 15px;border:1px solid rgba(255,255,255,.16);border-radius:11px;transition:all .2s}
.tw-s12{cursor:pointer;font-size:13.5px;font-weight:700;color:#fff;padding:10px 17px;border-radius:11px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));box-shadow:0 8px 24px color-mix(in srgb,var(--acc,#5b8cff) 40%,transparent);transition:transform .2s,box-shadow .2s}
.tw-s13{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 28px}
.tw-s14{padding:76px 0 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.tw-s15{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#cfd3db;padding:7px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03);animation:fadeUp .7s ease both}
.tw-s16{width:7px;height:7px;border-radius:50%;background:var(--acc,#5b8cff);box-shadow:0 0 12px var(--acc,#5b8cff)}
.tw-s17{font-family:'Space Grotesk';font-weight:700;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;animation:fadeUp .7s ease .06s both}
.tw-s18{background:linear-gradient(120deg,var(--acc,#5b8cff),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-s19{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:#a3a8b2;max-width:520px;margin:22px 0 0;animation:fadeUp .7s ease .12s both}
.tw-s20{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;animation:fadeUp .7s ease .18s both}
.tw-s21{cursor:pointer;font-size:15px;font-weight:700;color:#fff;padding:14px 24px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));box-shadow:0 10px 30px color-mix(in srgb,var(--acc,#5b8cff) 42%,transparent);transition:transform .2s}
.tw-s22{cursor:pointer;font-size:15px;font-weight:700;color:#e8e9ec;padding:14px 24px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);transition:all .2s}
.tw-s23{position:relative;height:420px;animation:fadeIn 1s ease .2s both}
.tw-s24{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:center}
.tw-s25{animation:floaty 6s ease-in-out infinite}
.tw-s27{aspect-ratio:9/16;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);box-shadow:0 30px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.tw-s28{font-size:11px;color:#9498a3}
.tw-s29{animation:floaty 6s ease-in-out infinite;animation-delay:1.5s;margin-top:34px}
.tw-s30{padding:44px 0}
.tw-s31{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.tw-s32{font-family:'Space Grotesk';font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0}
.tw-s33{font-size:13px;color:#8a8f9a}
.tw-s34{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.tw-s35{padding:20px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,background .25s}
.tw-s36{width:52px;height:52px;border-radius:14px;object-fit:cover;display:block;box-shadow:0 8px 22px rgba(0,0,0,.4);margin-bottom:14px}
.tw-s37{font-family:'Space Grotesk';font-weight:600;font-size:16px}
.tw-s38{font-size:12px;color:var(--acc,#5b8cff);font-weight:600;margin:3px 0 8px}
.tw-s39{font-size:13px;color:#9498a3;line-height:1.5;min-height:38px}
.tw-s40{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:#dfe2e8;cursor:pointer}
.tw-s41{padding:clamp(28px,4vw,52px);border-radius:26px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.tw-s42{max-width:640px}
.tw-s43{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc,#5b8cff)}
.tw-s44{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin:14px 0 12px;line-height:1.1}
.tw-s45{font-size:16px;line-height:1.6;color:#a3a8b2;margin:0}
.tw-s46{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.tw-s47{display:flex;align-items:center;gap:10px}
.tw-s48{padding:11px 18px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-family:'Space Grotesk';font-weight:600;font-size:14px}
.tw-s49{color:var(--acc,#5b8cff);font-weight:700}
.tw-s50{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.tw-s51{text-align:center;padding:28px 16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tw-s52{font-family:'Space Grotesk';font-weight:700;font-size:clamp(30px,4vw,46px);background:linear-gradient(120deg,var(--acc,#5b8cff),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.tw-s53{font-size:13px;color:#9498a3;margin-top:6px}
.tw-s54{text-align:center;font-size:12px;color:#6b6f7a;margin:16px 0 0}
.tw-s55{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#5b8cff) 16%,#0b0d12),color-mix(in srgb,var(--acc2) 14%,#0b0d12));border:1px solid rgba(255,255,255,.1)}
.tw-s56{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin:0 0 14px;line-height:1.06}
.tw-s57{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tw-s58{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.tw-s59{cursor:pointer;font-size:15px;font-weight:700;color:#fff;padding:14px 24px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));display:inline-block;transition:transform .2s}
.tw-s60{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tw-s61{padding:16px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
.tw-s62{font-size:13.5px;font-weight:600}
.tw-s64{font-family:'Space Grotesk';font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0 0 22px}
.tw-s65{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tw-s66{padding:24px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tw-s67{font-family:'Space Grotesk';font-weight:600;font-size:18px;margin-bottom:8px}
.tw-s68{font-size:14px;color:#9498a3;line-height:1.55}
.tw-s69{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.tw-s70{padding:56px 0 20px}
.tw-s71{text-align:center;padding:clamp(40px,6vw,80px) 28px;border-radius:30px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));position:relative;overflow:hidden;box-shadow:0 30px 80px color-mix(in srgb,var(--acc,#5b8cff) 35%,transparent)}
.tw-s72{position:absolute;inset:0;opacity:.25;background-image:radial-gradient(circle at 20% 30%,#fff 0,transparent 40%),radial-gradient(circle at 80% 70%,#fff 0,transparent 40%)}
.tw-s73{position:relative}
.tw-s74{font-family:'Space Grotesk';font-weight:700;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.02em;margin:0 0 24px;color:#fff;line-height:1.05}
.tw-s75{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.tw-s76{cursor:pointer;font-size:15px;font-weight:700;color:#0b0d12;background:#fff;padding:15px 28px;border-radius:13px;transition:transform .2s}
.tw-s77{cursor:pointer;font-size:15px;font-weight:700;color:#fff;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.4);padding:15px 28px;border-radius:13px}
.tw-s78{position:relative;z-index:1;margin-top:40px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3)}
.tw-s79{max-width:1280px;margin:0 auto;padding:52px 28px 30px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
.tw-s80{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tw-s81{height:26px;width:auto}
.tw-s82{font-size:13.5px;color:#8a8f9a;line-height:1.6;max-width:240px;margin:0}
.tw-s83{font-family:'Space Grotesk';font-weight:600;font-size:14px;margin-bottom:14px}
.tw-s84{display:flex;flex-direction:column;gap:9px}
.tw-s85{font-size:13.5px;color:#9498a3;cursor:pointer;transition:color .2s}
.tw-s86{max-width:1280px;margin:0 auto;padding:20px 28px 40px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#6b6f7a}
.tw-s87{display:flex;gap:20px}
.tw-s88{color:#8a8f9a;cursor:pointer}
.tw-s89{padding:70px 0 40px;max-width:760px}
.tw-s90{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc,#5b8cff);animation:fadeUp .6s ease both}
.tw-s91{font-family:'Space Grotesk';font-weight:700;font-size:clamp(34px,5vw,62px);line-height:1.03;letter-spacing:-.03em;margin:16px 0 18px;animation:fadeUp .6s ease .06s both}
.tw-s92{font-size:18px;line-height:1.6;color:#a3a8b2;margin:0;animation:fadeUp .6s ease .12s both}
.tw-s93{padding:20px 0 40px}
.tw-s94{display:flex;gap:8px;flex-wrap:wrap}
.tw-s95{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#cfd3db}
.tw-s96{padding:20px 0 40px;display:flex;flex-direction:column;gap:18px}
.tw-s97{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:26px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);align-items:center}
.tw-s98{width:132px;height:132px;max-width:100%;border-radius:30px;object-fit:cover;display:block;box-shadow:0 18px 38px rgba(0,0,0,.42)}
.tw-s99{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tw-s100{font-family:'Space Grotesk';font-weight:700;font-size:24px;margin:0;letter-spacing:-.01em}
.tw-s101{font-size:12px;font-weight:600;color:var(--acc,#5b8cff);padding:4px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc,#5b8cff) 40%,transparent)}
.tw-s102{font-size:15px;color:#a3a8b2;line-height:1.55;margin:12px 0 16px;max-width:560px}
.tw-s103{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b6f7a;margin-bottom:8px}
.tw-s104{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.tw-s105{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tw-s106{cursor:pointer;font-size:14px;font-weight:700;color:#fff;padding:11px 20px;border-radius:12px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));display:inline-block}
.tw-s107{padding:30px 0 60px}
.tw-s108{text-align:center;padding:clamp(36px,5vw,64px) 28px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.tw-s109{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.02em;margin:0 0 18px}
.tw-s110{cursor:pointer;font-size:15px;font-weight:700;color:#fff;padding:14px 26px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));display:inline-block;transition:transform .2s}
.tw-s111{padding:70px 0 40px;max-width:800px}
.tw-s112{font-family:'Space Grotesk';font-weight:700;font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.03em;margin:16px 0 18px}
.tw-s113{padding:20px 0 40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tw-s114{padding:28px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tw-s115{font-family:'Space Grotesk';font-weight:600;font-size:20px;margin:0 0 12px}
.tw-s116{font-size:15px;color:#a3a8b2;line-height:1.65;margin:0}
.tw-s117{font-family:'Space Grotesk';font-weight:600;font-size:20px;margin:0 0 14px}
.tw-s118{font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tw-s119{font-family:'Space Grotesk';font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0 0 20px}
.tw-s120{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tw-s121{padding:22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tw-s122{font-family:'Space Grotesk';font-weight:600;font-size:17px;margin-bottom:8px}
.tw-s123{font-size:13.5px;color:#9498a3;line-height:1.55}
.tw-s124{padding:20px 0 60px}
.tw-s125{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.tw-s126{aspect-ratio:16/10;border-radius:22px;background:linear-gradient(135deg,#1a1d26,#0e1016);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;color:#4c515c}
.tw-s127{display:flex;flex-direction:column;justify-content:center;padding:28px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#5b8cff) 16%,#0b0d12),color-mix(in srgb,var(--acc2) 12%,#0b0d12));border:1px solid rgba(255,255,255,.1)}
.tw-s128{font-family:'Space Grotesk';font-weight:700;font-size:26px;margin:0 0 10px}
.tw-s129{font-size:15px;color:#c3c7d0;margin:0 0 20px}
.tw-s130{cursor:pointer;font-size:15px;font-weight:700;color:#fff;padding:13px 24px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.3);display:inline-block;width:fit-content}
.tw-s131{padding:70px 0 30px;max-width:780px}
.tw-s132{font-family:'Space Grotesk';font-weight:700;font-size:clamp(34px,5vw,62px);line-height:1.03;letter-spacing:-.03em;margin:16px 0 18px}
.tw-s133{font-size:18px;line-height:1.6;color:#a3a8b2;margin:0}
.tw-s134{padding:14px 0 30px}
.tw-s135{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tw-s136{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);text-align:center}
.tw-s137{padding:24px 0 30px}
.tw-s138{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.tw-s139{font-size:14px;color:#8a8f9a}
.tw-s140{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.tw-s141{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.tw-s142{color:#6b6f7a}
.tw-s143{flex:1;background:transparent;border:0;outline:none;color:#e8e9ec;font-family:'Manrope';font-size:15px}
.tw-s144{display:flex;flex-direction:column;gap:10px}
.tw-s145{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tw-s146{font-size:12px;color:#6b6f7a;width:80px}
.tw-s147{display:flex;flex-direction:column;gap:12px}
.tw-s148{cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .22s}
.tw-s149{flex:1;min-width:0}
.tw-s150{font-family:'Space Grotesk';font-weight:600;font-size:19px;margin-bottom:8px}
.tw-s151{display:flex;gap:7px;flex-wrap:wrap}
.tw-s152{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tw-s153{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--acc,#5b8cff) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc,#5b8cff) 35%,transparent);color:var(--acc,#5b8cff)}
.tw-s154{font-size:13.5px;color:#9498a3;margin-top:10px}
.tw-s155{font-size:14px;font-weight:700;color:#fff;padding:11px 20px;border-radius:12px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));white-space:nowrap}
.tw-s156{text-align:center;padding:40px;color:#8a8f9a;font-size:15px}
.tw-s157{cursor:pointer;font-weight:700}
.tw-s158{font-family:'Space Grotesk';font-weight:700;font-size:clamp(22px,2.8vw,30px);letter-spacing:-.02em;margin:0 0 20px}
.tw-s159{display:flex;gap:10px;flex-wrap:wrap}
.tw-s160{padding:12px 18px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);font-weight:600;font-size:14px}
.tw-s161{padding:24px 0 60px}
.tw-s162{text-align:center;padding:clamp(40px,6vw,72px) 28px;border-radius:28px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));box-shadow:0 30px 80px color-mix(in srgb,var(--acc,#5b8cff) 35%,transparent)}
.tw-s163{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,4vw,46px);letter-spacing:-.02em;margin:0 0 22px;color:#fff}
.tw-s164{cursor:pointer;font-size:15px;font-weight:700;color:#0b0d12;background:#fff;padding:15px 28px;border-radius:13px}
.tw-s165{cursor:pointer;display:inline-block;margin:30px 0 6px;font-size:14px;font-weight:600;color:#9498a3}
.tw-s166{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:start;padding:10px 0 40px}
.tw-s167{display:flex;flex-direction:column;gap:18px}
.tw-s168{padding:clamp(26px,3vw,40px);border-radius:24px;background:linear-gradient(150deg,color-mix(in srgb,var(--acc,#5b8cff) 18%,#0b0d12),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.tw-s169{position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc,#5b8cff) 40%,transparent),transparent 70%);animation:glowpulse 5s ease-in-out infinite}
.tw-s170{font-family:'Space Grotesk';font-weight:700;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.02em;margin:0 0 14px;line-height:1.05}
.tw-s171{font-size:13px;font-weight:600;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.tw-s172{padding:26px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tw-s173{font-family:'Space Grotesk';font-weight:600;font-size:19px;margin:0 0 10px}
.tw-s174{padding:24px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#5b8cff) 12%,#0b0d12),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.tw-s175{font-family:'Space Grotesk';font-weight:600;font-size:17px;margin:0 0 14px}
.tw-s176{padding:26px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:22px}
.tw-s177{font-family:'Space Grotesk';font-weight:600;font-size:17px;margin:0 0 12px}
.tw-s178{display:flex;gap:11px;font-size:14.5px;color:#c3c7d0;line-height:1.5}
.tw-s179{color:var(--acc,#5b8cff);font-weight:700;flex:none}
.tw-s180{display:flex;align-items:center;gap:8px}
.tw-s181{padding:9px 15px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-weight:600;font-size:13px}
.tw-s182{color:var(--acc,#5b8cff)}
.tw-s183{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tw-s184{cursor:pointer;padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .2s}
.tw-s185{font-weight:600;font-size:15px}
.tw-s186{font-size:12.5px;color:#8a8f9a;margin-top:4px}
.tw-s187{cursor:pointer;padding:18px;border-radius:16px;background:color-mix(in srgb,var(--acc,#5b8cff) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc,#5b8cff) 30%,transparent)}
.tw-s188{font-size:12.5px;color:var(--acc,#5b8cff);margin-top:4px}
.tw-s189{position:sticky;top:90px;padding:26px;border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.tw-s190{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc,#5b8cff);margin-bottom:16px}
.tw-s191{display:flex;flex-direction:column;gap:14px}
.tw-s192{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.tw-s193{color:#8a8f9a}
.tw-s194{font-weight:600;text-align:right}
.tw-s195{cursor:pointer;display:block;text-align:center;margin-top:20px;font-size:15px;font-weight:700;color:#fff;padding:14px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));transition:transform .2s}
.tw-s196{max-width:720px;margin:0 auto;padding:60px 0 60px}
.tw-s197{text-align:center;padding:60px 30px;border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#5b8cff) 16%,#0b0d12),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.tw-s198{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));display:grid;place-items:center;margin:0 auto 22px;font-size:34px;color:#fff}
.tw-s199{font-family:'Space Grotesk';font-weight:700;font-size:34px;margin:0 0 12px}
.tw-s200{font-size:16px;color:#a3a8b2;line-height:1.6;max-width:440px;margin:0 auto 26px}
.tw-s201{cursor:pointer;font-size:15px;font-weight:700;color:#fff;padding:13px 26px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));display:inline-block}
.tw-s202{font-family:'Space Grotesk';font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;margin:14px 0 8px}
.tw-s203{font-size:15px;color:#8a8f9a;margin:0 0 30px}
.tw-s204{padding:clamp(24px,3vw,36px);border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:18px}
.tw-s205{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tw-s206{display:flex;flex-direction:column;gap:7px}
.tw-s207{font-size:13px;font-weight:600;color:#c3c7d0}
.tw-s208{color:#ff6b6b}
.tw-s209{padding:13px 15px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);color:#e8e9ec;font-family:'Manrope';font-size:15px;outline:none}
.tw-s210{padding:13px 15px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);color:#9498a3;font-family:'Manrope';font-size:15px;outline:none}
.tw-s211{padding:28px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.2);background:rgba(0,0,0,.2);text-align:center;transition:border-color .2s}
.tw-s212{font-size:15px;font-weight:600;margin-bottom:4px}
.tw-s213{font-size:12.5px;color:#6b6f7a}
.tw-s214{font-size:11px;color:#6b6f7a;font-weight:500}
.tw-s215{padding:13px 15px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);color:#e8e9ec;font-family:'Manrope';font-size:15px;outline:none;resize:vertical}
.tw-s216{display:flex;align-items:center;gap:11px;padding:14px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08)}
.tw-s217{width:20px;height:20px;border-radius:5px;border:1.5px solid rgba(255,255,255,.25);flex:none}
.tw-s218{font-size:13.5px;color:#9498a3}
.tw-s219{cursor:pointer;text-align:center;font-size:16px;font-weight:700;color:#fff;padding:16px;border-radius:14px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2));box-shadow:0 12px 30px color-mix(in srgb,var(--acc,#5b8cff) 40%,transparent);transition:transform .2s}
.tw-s220{font-size:12px;color:#6b6f7a;text-align:center;margin:0}
.tw-s221{padding:70px 0 30px;max-width:720px}
.tw-s222{font-family:'Space Grotesk';font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em;margin:16px 0 12px}
.tw-s223{font-size:17px;color:#a3a8b2;margin:0}
.tw-s224{padding:14px 0 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tw-s225{font-size:26px;margin-bottom:14px}
.tw-s226{font-family:'Space Grotesk';font-weight:600;font-size:18px}
.tw-s227{font-size:13.5px;color:#9498a3;margin:6px 0 12px;line-height:1.5}
.tw-s228{font-size:14px;font-weight:600;color:var(--acc,#5b8cff)}
.tw-s229{padding:20px 0 60px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.tw-s230{padding:28px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:14px}
.tw-s231{font-family:'Space Grotesk';font-weight:600;font-size:20px;margin:0}
.tw-s232{cursor:pointer;text-align:center;font-size:15px;font-weight:700;color:#fff;padding:14px;border-radius:13px;background:linear-gradient(135deg,var(--acc,#5b8cff),var(--acc2))}
.tw-s233{border-radius:22px;background:linear-gradient(135deg,#1a1d26,#0e1016);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;min-height:300px}
.tw-s234{color:#4c515c;font-size:13px;margin-bottom:auto}
.tw-s235{font-size:14px;color:#9498a3;margin-top:4px}
/* Semantic component styles added during extraction */
.benefit-icon {
display: grid;
width: 34px;
height: 34px;
place-items: center;
margin-bottom: 10px;
background: linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2));
border-radius: 10px;
opacity: .9;
}
.benefit-icon img {
width: 18px;
height: 18px;
}
.benefit-icon--center {
width: 36px;
height: 36px;
margin: 0 auto 12px;
}
.benefit-icon--center img {
width: 19px;
height: 19px;
}
.featured-app-icon {
display: block;
width: 40px;
height: 40px;
margin-bottom: auto;
object-fit: cover;
border-radius: 11px;
box-shadow: 0 8px 18px rgba(0,0,0,.38);
}
.hero-app-screenshot {
display: block;
width: calc(100% + 32px);
height: clamp(150px, 18vw, 220px);
min-height: 0;
flex: 0 0 auto;
margin: -16px -16px 12px;
object-fit: cover;
object-position: center top;
border-radius: 25px 25px 14px 14px;
box-shadow: inset 0 -20px 30px rgba(0,0,0,.18);
}
.hero-app-screenshot + .featured-app-icon {
width: 34px;
height: 34px;
margin: 0 0 8px;
border-radius: 9px;
}
.featured-app-name {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Space Grotesk';
font-size: 14px;
font-weight: 600;
}
.featured-app-name img {
width: 15px;
height: 15px;
flex: none;
padding: 2px;
background: linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2));
border-radius: 4px;
}
.life-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.life-gallery__item {
position: relative;
aspect-ratio: 1;
margin: 0;
overflow: hidden;
background: #0e1016;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
}
.life-gallery__item--lead {
grid-column: span 2;
aspect-ratio: 16 / 10;
}
.life-gallery__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}
.life-gallery__item:hover img {
transform: scale(1.025);
}
.life-gallery__item figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 44px 16px 14px;
color: #fff;
font-size: 13px;
font-weight: 700;
background: linear-gradient(transparent, rgba(0,0,0,.78));
}
/* Life at Twinbit — horizontal scroll-snap carousel on mobile */
@media (max-width: 599px) {
.life-gallery {
display: flex;
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -18px;
padding: 2px 18px 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.life-gallery::-webkit-scrollbar { display: none; }
.life-gallery__item,
.life-gallery__item--lead {
flex: 0 0 82%;
grid-column: auto;
aspect-ratio: 4 / 3;
scroll-snap-align: start;
}
}
/* Life at Twinbit — Lightbox modal viewer */
.life-gallery__link {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
text-decoration: none;
outline: none;
}
.life-gallery__link:focus-visible {
outline: 2px solid var(--acc, #5b8cff);
outline-offset: -2px;
border-radius: 18px;
}
.life-gallery__item figcaption {
pointer-events: none;
}
html.lightbox-open {
overflow: hidden;
}
.lightbox {
box-sizing: border-box;
padding: 0;
border: 0;
background: transparent;
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
color: #fff;
margin: 0;
}
.lightbox:not([open]) {
display: none;
}
.lightbox[open] {
display: flex;
align-items: center;
justify-content: center;
}
.lightbox::backdrop {
background: rgba(5, 6, 9, 0.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.lightbox__frame {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: min(1200px, 92vw);
margin: auto;
pointer-events: none;
}
.lightbox__frame > * {
pointer-events: auto;
}
.lightbox__image {
display: block;
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
opacity: 1;
transition: opacity 0.25s ease;
}
.is-loading .lightbox__image {
opacity: 0.35;
}
.lightbox__caption {
margin: 14px 0 0;
text-align: center;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
}
.lightbox__caption:empty,
.lightbox__caption[hidden] {
display: none;
}
.lightbox__counter {
position: absolute;
top: 24px;
left: 24px;
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
z-index: 2;
}
.lightbox__btn {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
outline: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
z-index: 3;
}
.lightbox__btn:hover {
background: rgba(255, 255, 255, 0.16);
border-color: var(--acc, #5b8cff);
color: var(--acc, #5b8cff);
}
.lightbox__btn:focus-visible {
border-color: var(--acc, #5b8cff);
color: var(--acc, #5b8cff);
outline: 2px solid var(--acc, #5b8cff);
outline-offset: 2px;
}
.lightbox__btn--close {
top: 24px;
right: 24px;
}
.lightbox__btn--prev {
left: 24px;
top: 50%;
transform: translateY(-50%);
}
.lightbox__btn--next {
right: 24px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 599px) {
.lightbox__counter {
top: 16px;
left: 16px;
font-size: 12px;
}
.lightbox__btn {
width: 42px;
height: 42px;
}
.lightbox__btn--close {
top: 14px;
right: 14px;
}
.lightbox__btn--prev {
top: auto;
bottom: 20px;
left: 20px;
transform: none;
}
.lightbox__btn--next {
top: auto;
bottom: 20px;
right: 20px;
transform: none;
}
.lightbox__image {
max-height: 72vh;
}
}
/* ============================================================
Redesigned Home Hero (hero2)
Hand-authored; does not modify generated .tw-sN values.
Satisfies SRS FR-2.1, FR-2.2, NFR-3.2 (in-house iOS identity
clear above the fold, premium dark background, app visuals).
============================================================ */
@keyframes hero2-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.hero2 {
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
min-height: min(86vh, 840px);
padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 60px);
}
/* ---- Left: copy ---- */
.hero2__copy { position: relative; z-index: 2; max-width: 600px; }
.hero2__badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 15px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(255,255,255,.03);
font-size: 12.5px;
font-weight: 600;
color: #cfd3db;
animation: fadeUp .7s ease both;
}
.hero2__badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--acc, #5b8cff);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, #5b8cff) 20%, transparent), 0 0 12px var(--acc, #5b8cff);
animation: glowpulse 2.6s ease-in-out infinite;
}
.hero2__title {
margin: 22px 0 0;
font-family: 'Space Grotesk';
font-weight: 700;
font-size: clamp(42px, 6vw, 78px);
line-height: 1.02;
letter-spacing: -.03em;
animation: fadeUp .7s ease .06s both;
}
.hero2__title .grad {
background: linear-gradient(120deg, var(--acc, #5b8cff), var(--acc2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero2__lead {
max-width: 520px;
margin: 22px 0 0;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.6;
color: #a3a8b2;
animation: fadeUp .7s ease .12s both;
}
.hero2__cta {
display: flex;
gap: 13px;
margin-top: 32px;
flex-wrap: wrap;
animation: fadeUp .7s ease .18s both;
}
.hero2__cta-primary,
.hero2__cta-secondary {
cursor: pointer;
display: inline-block;
padding: 14px 24px;
border-radius: 13px;
font-size: 15px;
font-weight: 700;
}
.hero2__cta-primary {
color: #fff;
background: linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2));
box-shadow: 0 10px 30px color-mix(in srgb, var(--acc, #5b8cff) 42%, transparent);
transition: transform .2s, box-shadow .2s;
}
.hero2__cta-secondary {
color: #e8e9ec;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.03);
transition: border-color .2s, background .2s;
}
.hero2__stats {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 30px);
flex-wrap: wrap;
margin: 38px 0 0;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.08);
animation: fadeUp .7s ease .24s both;
}
.hero2__stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.hero2__stat-v {
font-family: 'Space Grotesk';
font-weight: 700;
font-size: clamp(20px, 2vw, 25px);
letter-spacing: -.02em;
color: #fff;
}
.hero2__stat-l { margin: 0; font-size: 12px; font-weight: 500; color: #8a8f9a; }
/* ---- Right: app bento showcase ---- */
.hero2__stage {
position: relative;
z-index: 1;
min-height: clamp(380px, 44vw, 560px);
animation: fadeIn 1s ease .2s both;
}
.hero2__stage-glow {
position: absolute;
inset: -8% -10% 4% -6%;
z-index: 0;
pointer-events: none;
background: radial-gradient(58% 55% at 62% 42%, color-mix(in srgb, var(--acc, #5b8cff) 42%, transparent), transparent 70%);
opacity: .65;
}
.hero2__bento {
position: relative;
z-index: 1;
height: 100%;
min-height: inherit;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 14px;
}
.hero2__tile {
position: relative;
overflow: hidden;
border-radius: 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 18px 40px rgba(0,0,0,.38);
animation: hero2-pop .6s cubic-bezier(.22,1,.36,1) var(--d, 0s) both;
transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.hero2__tile > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero2__tile:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--acc, #5b8cff) 45%, transparent);
}
.hero2__feature {
grid-column: 1 / 3;
grid-row: 1 / 3;
border-radius: 26px;
animation: floaty 7s ease-in-out infinite, hero2-pop .6s cubic-bezier(.22,1,.36,1) both;
}
/* Tall phone screenshot in a square tile: crop from the top so the app's
branded header stays visible instead of a mid-screen slice. */
.hero2__feature > img {
object-position: top center;
}
.hero2__feature-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0;
padding: 18px;
background: linear-gradient(transparent 42%, rgba(0,0,0,.74));
}
.hero2__feature-row { display: flex; align-items: center; gap: 11px; }
.hero2__feature-ic {
position: static;
width: 40px;
height: 40px;
flex: none;
border-radius: 11px;
box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.hero2__feature-name { font-family: 'Space Grotesk'; font-weight: 600; font-size: 15px; color: #fff; }
.hero2__feature-cat { margin-top: 2px; font-size: 11.5px; color: #c3c7d0; }
.hero2__ping {
position: absolute;
z-index: 3;
top: -14px;
right: 6px;
display: flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
border-radius: 14px;
background: rgba(12,14,18,.72);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px);
box-shadow: 0 16px 40px rgba(0,0,0,.5);
font-weight: 700;
font-size: 13px;
color: #fff;
animation: floaty 6s ease-in-out infinite;
}
.hero2__ping-star {
background: linear-gradient(120deg, var(--acc, #5b8cff), var(--acc2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---- Responsive ---- */
@media (max-width: 1023px) {
.hero2 {
grid-template-columns: 1fr;
gap: 44px;
min-height: 0;
padding-top: clamp(36px, 10vw, 64px);
}
.hero2__copy { max-width: none; }
.hero2__lead { max-width: 560px; }
.hero2__stage { min-height: clamp(320px, 74vw, 460px); max-width: 520px; }
}
@media (max-width: 599px) {
/* 3 equal columns: never leaves a lone stat on its own row (320px+) */
.hero2__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 44px;
padding-top: 30px;
}
.hero2__stat { align-items: center; text-align: center; }
.hero2__cta-primary, .hero2__cta-secondary { flex: 1 1 auto; text-align: center; }
.hero2__ping { top: -10px; right: 0; padding: 7px 11px; font-size: 12px; }
/* Give the app bento room so the featured screenshot reads clearly */
.hero2__stage { min-height: min(116vw, 440px); max-width: 100%; }
/* Shrink the featured caption so it fits the narrow tile on mobile */
.hero2__feature-overlay { padding: 11px; }
.hero2__feature-row { gap: 7px; }
.hero2__feature-ic { width: 28px; height: 28px; border-radius: 8px; }
.hero2__feature-name { font-size: 10.5px; line-height: 1.15; }
.hero2__feature-cat { font-size: 9px; margin-top: 1px; }
}
@media (prefers-reduced-motion: reduce) {
.hero2 *,
.hero2__feature,
.hero2__ping,
.hero2__badge-dot { animation: none !important; }
.hero2__tile,
.lightbox__image,
.lightbox__btn { transition: none !important; }
}
/* ============================================================
Site-wide responsive layer — 5 viewport tiers
Mobile <= 599 @media (max-width: 599px)
Tablet 600 – 1023 @media (max-width: 1023px)
(+ 767px sub-step: small tablet / large phone)
Laptop 1024 – 1279 @media (max-width: 1279px)
Desktop 1280 – 1535 base styles (no query)
Large desktop >= 1536 @media (min-width: 1536px)
Tier-only rules use min-width 600 / 768 / 1024 as the exact
complements. Use ONLY these values for new queries.
Additive only; shared across all pages. Does not change the
generated .tw-sN base declarations.
============================================================ */
/* App Store download badge (replaces text CTA links) */
.appstore-badge-link {
display: inline-block;
margin-top: 14px;
line-height: 0;
border-radius: 8px;
}
.appstore-badge {
display: block;
height: 40px;
width: auto;
transition: transform .2s ease, opacity .2s ease;
}
.appstore-badge-link:hover .appstore-badge { transform: translateY(-2px); opacity: .88; }
.appstore-badge-link:focus-visible { outline: 2px solid var(--acc, #5b8cff); outline-offset: 3px; }
/* ============================================================
Technologies section (after hero) — "The technology behind
our apps". Scoped classes (tech / tech-card).
============================================================ */
.tech__head { max-width: 640px; margin: 0 0 28px; }
.tech__eyebrow {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--acc, #5b8cff);
}
.tech__title {
font-family: 'Space Grotesk';
font-weight: 700;
font-size: clamp(26px, 3.4vw, 40px);
letter-spacing: -.02em;
line-height: 1.08;
margin: 12px 0 10px;
}
.tech__sub {
max-width: 540px;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #a3a8b2;
}
.tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tech-card {
padding: 26px 24px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(8px);
transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, background .28s ease;
}
.tech-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--acc, #5b8cff) 40%, transparent);
background: rgba(255,255,255,.055);
}
.tech-card__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-bottom: 18px;
border-radius: 13px;
color: #fff;
background: linear-gradient(135deg, color-mix(in srgb, var(--acc, #5b8cff) 28%, transparent), color-mix(in srgb, var(--acc2) 20%, transparent));
border: 1px solid rgba(255,255,255,.1);
}
.tech-card__icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.tech-card__title {
font-family: 'Space Grotesk';
font-weight: 600;
font-size: 18px;
letter-spacing: -.01em;
margin: 0 0 8px;
}
.tech-card__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: #9498a3; }
@media (max-width: 1023px) { .tech__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
.tech__grid {
display: flex;
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -18px;
padding: 2px 18px 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tech__grid::-webkit-scrollbar { display: none; }
.tech-card { flex: 0 0 80%; scroll-snap-align: start; }
}
/* ============================================================
Home product showcase (redesign) — highlights the App Store
products to visitors. Scoped classes (apps2-*); home portfolio
section only. Refs: Twinbit Site.html app cards + SRS FR-2.3.
============================================================ */
.apps2__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.apps2__eyebrow {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--acc, #5b8cff);
}
.apps2__title {
font-family: 'Space Grotesk';
font-weight: 700;
font-size: clamp(26px, 3.4vw, 40px);
letter-spacing: -.02em;
line-height: 1.08;
margin: 12px 0 10px;
}
.apps2__sub {
max-width: 540px;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #a3a8b2;
}
.apps2__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 1023px) {
.apps2__grid { grid-template-columns: repeat(2, 1fr); }
}
.apps2-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 22px;
border-radius: 20px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(8px);
transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, background .28s ease;
}
.apps2-card__glow {
position: absolute;
top: -42%;
right: -28%;
width: 220px;
height: 220px;
border-radius: 50%;
background: var(--g, linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2)));
/* Soft glow via a radial mask (no filter: blur) — avoids the WebKit/Safari
blur-layer compositing artifact inside overflow:hidden + backdrop-filter. */
-webkit-mask: radial-gradient(closest-side, #000, transparent);
mask: radial-gradient(closest-side, #000, transparent);
opacity: .32;
pointer-events: none;
transition: opacity .28s ease, transform .28s ease;
}
.apps2-card:hover {
transform: translateY(-6px);
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
}
.apps2-card:hover .apps2-card__glow { opacity: .5; transform: scale(1.1); }
.apps2-card__head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
}
.apps2-card__icon {
width: 58px;
height: 58px;
border-radius: 15px;
object-fit: cover;
display: block;
box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.apps2-card__cat {
font-size: 11.5px;
font-weight: 600;
color: #cfd3db;
padding: 5px 11px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
white-space: nowrap;
}
.apps2-card__name {
font-family: 'Space Grotesk';
font-weight: 700;
font-size: 18px;
letter-spacing: -.01em;
margin: 0 0 6px;
}
.apps2-card__promise {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.55;
color: #9498a3;
}
.apps2-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.apps2-card__tag {
font-size: 11px;
font-weight: 600;
color: #aeb2bc;
padding: 4px 9px;
border-radius: 999px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
}
.apps2-card__cta {
position: relative;
display: block;
height: 40px;
margin-top: auto;
border-radius: 8px;
}
.apps2-badge { display: block; height: 40px; width: auto; }
.apps2-card__cta:focus-visible { outline: 2px solid var(--acc, #5b8cff); outline-offset: 3px; }
/* Mobile: horizontal scroll-snap strip (SRS FR-2.3) */
@media (max-width: 599px) {
.apps2__grid {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -18px;
padding: 2px 18px 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.apps2__grid::-webkit-scrollbar { display: none; }
.apps2-card { flex: 0 0 80%; scroll-snap-align: start; }
}
/* Mobile-nav primitives — inert on desktop (wrapper is layout-neutral) */
.tw-navwrap { display: contents; }
.tw-navtoggle { display: none; }
.tw-navburger { display: none; }
/* ---------- Large desktop: reclaim side space ---------- */
@media (min-width: 1536px) {
.tw-s5, .tw-s13, .tw-s79, .tw-s86 { max-width: 1440px; }
}
/* ---------- Laptop ---------- */
@media (max-width: 1279px) {
.tw-s5 { gap: 18px; }
.tw-s8 { display: none; } /* tagline: frees ~120px so links + CTAs stay on one line down to 1024 */
.tw-s10 { gap: 2px; }
.tw-s10 a { padding: 8px 10px; }
.tw-s10 a, .tw-s11, .tw-s12 { white-space: nowrap; }
}
/* ---------- Tablet: hamburger nav + section stacking ---------- */
@media (max-width: 1023px) {
.tw-s166 { grid-template-columns: 1fr; } /* job: split hero */
.tw-s189 { position: static; top: auto; } /* job: sticky snapshot */
.tw-s125 { grid-template-columns: 1fr; } /* company: map/CTA */
.tw-s229 { grid-template-columns: 1fr; } /* contact: form/map */
.tw-s5 { position: relative; flex-wrap: wrap; gap: 14px; }
.tw-s8 { display: block; } /* hamburger frees the row: tagline back (hidden again <=599) */
.tw-navburger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 42px;
padding: 11px 12px;
cursor: pointer;
border: 1px solid rgba(255,255,255,.16);
border-radius: 12px;
background: rgba(255,255,255,.05);
}
.tw-navburger span {
display: block;
width: 100%;
height: 2px;
background: #e8e9ec;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
.tw-navwrap {
display: none;
position: absolute;
top: calc(100% + 1px);
left: 0;
right: 0;
z-index: 60;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
padding: 16px 20px 20px;
background: rgba(8,9,12,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow: 0 26px 54px rgba(0,0,0,.55);
}
.tw-navtoggle:checked ~ .tw-navwrap { display: flex; }
.tw-navtoggle:checked ~ .tw-navburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tw-navtoggle:checked ~ .tw-navburger span:nth-child(2) { opacity: 0; }
.tw-navtoggle:checked ~ .tw-navburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tw-s10 { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.tw-s10 a { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.tw-s11, .tw-s12 { width: 100%; text-align: center; }
.tw-s55 { grid-template-columns: 1fr; } /* home: career preview */
.tw-s113 { grid-template-columns: 1fr; } /* company: story */
/* footer: brand row on top, 4 link columns below */
.tw-s79 { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.tw-s79 > div:first-child { grid-column: 1 / -1; }
}
/* ---------- Small tablet / large phone ---------- */
@media (max-width: 767px) {
.tw-s79 { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 40px 24px 26px; }
.tw-s79 > div:first-child { grid-column: 1 / -1; }
.tw-s205 { grid-template-columns: 1fr; } /* apply: form fields */
.tw-s60 { grid-template-columns: 1fr 1fr; } /* home: benefits (2-up on mobile) */
.tw-s148 { flex-direction: column; align-items: flex-start; gap: 14px; }
.tw-s155 { align-self: stretch; text-align: center; } /* careers: View Details */
}
/* ---------- Mobile ---------- */
@media (max-width: 599px) {
.tw-s5 { padding-left: 18px; padding-right: 18px; }
.tw-s13 { padding-left: 18px; padding-right: 18px; }
.tw-s8 { display: none; } /* drop logo tagline, keep mark */
.tw-s75 { flex-direction: column; } /* final-CTA button row */
.tw-s75 > a { width: 100%; text-align: center; }
}
/* ---------- Grid balance: no orphan card on a last row ----------
auto-fit grids below produced 4+2 / 5+1 / 2+1 splits at some widths. */
.tw-s183 { grid-template-columns: repeat(2, 1fr); } /* job: related roles (4) → 2×2; mobile 1fr rule wins */
@media (min-width: 1024px) {
.tw-s65 { grid-template-columns: repeat(3, 1fr); } /* home: how we work (6) → 3×2 */
}
@media (min-width: 768px) {
.tw-s120 { grid-template-columns: repeat(3, 1fr); } /* company: values (6) → 3×2 */
}
@media (min-width: 600px) and (max-width: 1023px) {
.tw-s135 { grid-template-columns: repeat(3, 1fr); } /* careers: benefits (6) → 3×2 */
/* home: impact figures (5) → 3 + 2 on a 6-track grid */
.tw-s50 { grid-template-columns: repeat(6, 1fr); }
.tw-s50 > * { grid-column: span 2; }
.tw-s50 > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 767px) {
.tw-s224 > :nth-child(3):last-child { grid-column: 1 / -1; } /* contact: 3rd card full width under 2 */
}
/* ============================================================
Apps page redesign (ap-*) — modern product showcase.
Refs: Twinbit Site.html apps page + SRS 3.3 (FR-3.1..3.5).
Scoped to apps.html; does not affect other pages.
============================================================ */
.ap-eyebrow {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--acc, #5b8cff);
}
/* Hero */
.ap-hero { max-width: 820px; padding: clamp(48px, 7vw, 88px) 0 34px; }
.ap-hero__title {
font-family: 'Space Grotesk';
font-weight: 700;
font-size: clamp(34px, 5.4vw, 64px);
line-height: 1.03;
letter-spacing: -.03em;
margin: 16px 0 18px;
animation: fadeUp .6s ease .05s both;
}
.ap-hero__sub { max-width: 620px; margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: #a3a8b2; }
.ap-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ap-hero__btn {
cursor: pointer;
font-size: 14.5px;
font-weight: 700;
color: #fff;
padding: 13px 22px;
border-radius: 12px;
background: linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2));
box-shadow: 0 10px 26px color-mix(in srgb, var(--acc, #5b8cff) 40%, transparent);
transition: transform .2s ease;
}
.ap-hero__btn:hover { transform: translateY(-2px); color: #fff; }
.ap-hero__btn--ghost { color: #e8e9ec; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
.ap-hero__stats {
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 3vw, 40px);
margin: 34px 0 0;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.08);
}
.ap-hero__stats > div { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ap-hero__stats dt { font-family: 'Space Grotesk'; font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; color: #fff; }
.ap-hero__stats dd { margin: 0; font-size: 12.5px; color: #8a8f9a; }
/* Category chips */
.ap-cats { padding: 8px 0 26px; }
.ap-cats__label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b6f7a; }
.ap-cats__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-cats__chip {
font-size: 13.5px;
font-weight: 600;
color: #cfd3db;
padding: 9px 16px;
border-radius: 999px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ap-cats__chip:hover { color: #fff; border-color: color-mix(in srgb, var(--acc, #5b8cff) 45%, transparent); background: rgba(255,255,255,.06); }
/* App grid */
.ap-grid-sec { padding: 8px 0 20px; }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1023px) { .ap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .ap-grid { grid-template-columns: 1fr; } }
.ap-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 24px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.ap-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.ap-card__art {
position: relative;
aspect-ratio: 16 / 10;
display: grid;
place-items: center;
overflow: hidden;
background: var(--g, linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2)));
}
.ap-card__art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.32), transparent 55%); }
.ap-card__art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.35), transparent 55%); mix-blend-mode: overlay; }
.ap-card__icon {
position: relative;
z-index: 1;
width: 104px;
height: 104px;
border-radius: 24px;
object-fit: cover;
box-shadow: 0 20px 40px rgba(0,0,0,.45);
transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ap-card:hover .ap-card__icon { transform: scale(1.06); }
.ap-card__cat {
position: absolute;
z-index: 2;
top: 14px;
left: 14px;
font-size: 11.5px;
font-weight: 600;
color: #fff;
padding: 6px 12px;
border-radius: 999px;
background: rgba(0,0,0,.4);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
}
.ap-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.ap-card__name { font-family: 'Space Grotesk'; font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0 0 7px; }
.ap-card__promise { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #9498a3; }
.ap-card__label { margin-bottom: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b6f7a; }
.ap-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ap-card__tag { font-size: 11px; font-weight: 600; color: #aeb2bc; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ap-card__cta { position: relative; display: block; height: 40px; margin-top: auto; border-radius: 8px; }
.ap-badge { display: block; height: 40px; width: auto; }
.ap-card__cta:focus-visible { outline: 2px solid var(--acc, #5b8cff); outline-offset: 3px; }
/* Product loop */
.ap-loop-sec { padding: 40px 0 20px; }
.ap-loop__head { max-width: 640px; margin-bottom: 28px; }
.ap-loop__title { font-family: 'Space Grotesk'; font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 10px; }
.ap-loop__sub { max-width: 540px; margin: 0; font-size: 15px; line-height: 1.6; color: #a3a8b2; }
.ap-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ap-loop__step { padding: 22px 20px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s ease, background .25s ease; }
.ap-loop__step:hover { border-color: color-mix(in srgb, var(--acc, #5b8cff) 40%, transparent); background: rgba(255,255,255,.05); }
.ap-loop__num { display: inline-block; margin-bottom: 12px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; color: var(--acc, #5b8cff); }
.ap-loop__step h4 { font-family: 'Space Grotesk'; font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.ap-loop__step p { margin: 0; font-size: 13px; line-height: 1.5; color: #9498a3; }
/* Candidate CTA */
.ap-cta-sec { padding: 30px 0 60px; }
.ap-cta {
position: relative;
overflow: hidden;
border-radius: 28px;
background: linear-gradient(135deg, var(--acc, #5b8cff), var(--acc2));
box-shadow: 0 30px 80px color-mix(in srgb, var(--acc, #5b8cff) 35%, transparent);
}
.ap-cta__glow { position: absolute; inset: 0; opacity: .25; background: radial-gradient(circle at 18% 20%, #fff 0, transparent 42%), radial-gradient(circle at 82% 80%, #fff 0, transparent 42%); }
.ap-cta__inner { position: relative; text-align: center; padding: clamp(40px, 6vw, 72px) 28px; }
.ap-cta__title { font-family: 'Space Grotesk'; font-weight: 700; font-size: clamp(26px, 4vw, 44px); letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.ap-cta__sub { margin: 0 0 24px; font-size: 16px; color: rgba(255,255,255,.85); }
.ap-cta__btn { cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700; color: #0b0d12; background: #fff; padding: 15px 30px; border-radius: 13px; transition: transform .2s ease; }
.ap-cta__btn:hover { color: #0b0d12; }
/* Tablet: 5 steps as 3 + 2 on a 6-track grid (was 2+2+1) */
@media (min-width: 600px) and (max-width: 1023px) {
.ap-loop { grid-template-columns: repeat(6, 1fr); }
.ap-loop > * { grid-column: span 2; }
.ap-loop > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 599px) { .ap-loop { grid-template-columns: 1fr; } .ap-hero__stats { gap: 20px; } .ap-hero__btn { flex: 1 1 auto; text-align: center; } }
/* ============================================================
Mobile polish (<=600) for home content sections:
Why Twinbit is different · Impact figures · Build products
· How we work. Mobile-only; desktop/tablet untouched.
============================================================ */
@media (max-width: 599px) {
/* Why Twinbit is different */
.tw-s41 { padding: 26px 20px; border-radius: 20px; }
.tw-s44 { margin-bottom: 10px; }
.tw-s46 { gap: 8px; margin-top: 22px; }
.tw-s47 { gap: 8px; }
.tw-s48 { padding: 9px 14px; font-size: 13px; }
/* Impact figures — balanced 2-up, last one full width */
.tw-s50 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tw-s50 > div:nth-child(5) { grid-column: 1 / -1; }
.tw-s51 { padding: 22px 14px; border-radius: 16px; }
.tw-s54 { margin-top: 14px; }
/* Build products (career preview) */
.tw-s55 { padding: 28px 22px; gap: 24px; border-radius: 22px; }
.tw-s57 { gap: 7px; margin-bottom: 20px; }
.tw-s59 { display: block; text-align: center; }
.tw-s61 { padding: 14px; }
/* How we work (values) */
.tw-s64 { margin-bottom: 16px; }
.tw-s66 { padding: 20px; border-radius: 16px; }
}
/* ============================================================
Footer redesign — mobile (<=600): centered brand, balanced
2-up link columns, stacked & centered legal bar.
Mobile-only; desktop/tablet footer untouched.
============================================================ */
@media (max-width: 599px) {
.tw-s78 { margin-top: 34px; }
.tw-s79 {
grid-template-columns: 1fr 1fr;
gap: 30px 18px;
padding: 42px 20px 30px;
text-align: center;
}
.tw-s79 > div:first-child { grid-column: 1 / -1; } /* brand: full width */
.tw-s80 { justify-content: center; margin-bottom: 12px; } /* logo centered */
.tw-s82 { max-width: 300px; margin: 0 auto; font-size: 13px; }
.tw-s83 { margin-bottom: 12px; }
.tw-s84 { align-items: center; gap: 11px; } /* centered link list */
.tw-s85 { font-size: 14px; }
.tw-s86 {
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 22px 20px 36px;
}
.tw-s87 { gap: 24px; }
}
/* ============================================================
Apps page — overall mobile polish (<=600). Mobile-only;
desktop/tablet untouched.
============================================================ */
@media (max-width: 599px) {
/* Hero */
.ap-hero { padding-top: clamp(30px, 8vw, 56px); }
.ap-hero__title { font-size: clamp(30px, 8.5vw, 44px); }
.ap-hero__sub { font-size: 15.5px; }
.ap-hero__btn { width: 100%; }
.ap-hero__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 16px;
padding-top: 24px;
}
.ap-hero__stats > div { align-items: center; text-align: center; }
/* Browse by category — edge-to-edge scrollable chip bar */
.ap-cats { padding: 4px 0 22px; }
.ap-cats__label { margin-bottom: 14px; }
.ap-cats__row {
flex-wrap: nowrap;
overflow-x: auto;
gap: 9px;
margin: 0 -18px;
padding: 2px 18px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ap-cats__row::-webkit-scrollbar { display: none; }
.ap-cats__chip { flex: 0 0 auto; padding: 10px 18px; }
/* App cards */
.ap-card__icon { width: 92px; height: 92px; }
.ap-card__body { padding: 20px; }
.ap-card__name { font-size: 19px; }
/* Product loop — compact left-number timeline */
.ap-loop { gap: 12px; }
.ap-loop__step {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 14px;
row-gap: 3px;
align-items: start;
padding: 18px 20px;
}
.ap-loop__num { grid-row: 1 / 3; margin-bottom: 0; font-size: 15px; }
/* Candidate CTA */
.ap-cta__inner { padding-left: 22px; padding-right: 22px; }
.ap-cta__btn { width: 100%; }
}
/* ============================================================
Careers / Job / Apply — mobile polish (<=600).
Scoped per page via [data-page]; mobile-only, no effect on
other pages or on desktop/tablet.
============================================================ */
@media (max-width: 599px) {
/* ---------- Careers ---------- */
[data-page="careers"] .tw-s131 { padding: 54px 0 22px; }
[data-page="careers"] .tw-s135 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
[data-page="careers"] .tw-s140 { padding: 16px; }
[data-page="careers"] .tw-s145 { gap: 8px; }
[data-page="careers"] .tw-s146 { width: 100%; margin-bottom: 2px; }
[data-page="careers"] .tw-s148 { padding: 18px; }
[data-page="careers"] .tw-s150 { font-size: 17px; }
[data-page="careers"] .tw-s151 { gap: 6px; }
[data-page="careers"] .tw-s152,
[data-page="careers"] .tw-s153 { font-size: 11.5px; padding: 4px 9px; }
[data-page="careers"] .tw-s162 { padding: 40px 22px; }
/* ---------- Apply ---------- */
[data-page="apply"] .tw-s196 { padding: 50px 0 50px; }
[data-page="apply"] .tw-s204 { padding: 22px 18px; gap: 16px; }
[data-page="apply"] .tw-s197 { padding: 44px 22px; }
[data-page="apply"] .tw-s202 { font-size: clamp(28px, 8vw, 40px); }
[data-page="apply"] .tw-s211 { padding: 22px; }
/* ---------- Job detail ---------- */
[data-page="job"] .tw-s168 { padding: 24px 20px; }
[data-page="job"] .tw-s170 { font-size: clamp(26px, 7.5vw, 40px); }
[data-page="job"] .tw-s110 { display: block; text-align: center; }
[data-page="job"] .tw-s172,
[data-page="job"] .tw-s174,
[data-page="job"] .tw-s176 { padding: 20px; }
[data-page="job"] .tw-s189 { padding: 22px 20px; }
[data-page="job"] .tw-s183 { grid-template-columns: 1fr; }
}
/* Job: relocated Related-roles block — keep it in the left column on
desktop (same spot as before); on mobile it stacks after the apply card. */
.tw-related { grid-column: 1; }
/* ============================================================
Company / Contact — mobile polish (<=600).
Scoped per page via [data-page]; mobile-only, no effect on
other pages or on desktop/tablet.
============================================================ */
@media (max-width: 599px) {
/* ---------- Company ---------- */
[data-page="company"] .tw-s111 { padding: 54px 0 20px; }
[data-page="company"] .tw-s112 { font-size: clamp(28px, 7.5vw, 42px); }
[data-page="company"] .tw-s114 { padding: 22px; }
[data-page="company"] .tw-s121 { padding: 20px; }
[data-page="company"] .tw-s126 { aspect-ratio: 4 / 3; }
[data-page="company"] .tw-s127 { padding: 26px 22px; }
[data-page="company"] .tw-s130 { display: block; width: auto; text-align: center; }
/* ---------- Contact ---------- */
[data-page="contact"] .tw-s221 { padding: 54px 0 18px; }
[data-page="contact"] .tw-s222 { font-size: clamp(30px, 8vw, 44px); }
[data-page="contact"] .tw-s172 { padding: 22px; }
[data-page="contact"] .tw-s230 { padding: 22px; }
[data-page="contact"] .tw-s233 { min-height: 220px; padding: 22px; }
}
/* Mobile (<=600): top margin on the home carousels so a tapped card's
lift + accent border stays below the section above (no intrusion). */
@media (max-width: 599px) {
.tech__grid,
.apps2__grid { margin-top: 36px; padding-top: 10px; }
}