@layer bricks {.brxe-code{width:100%}} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --frame: 20px; --accent: #D4FF00; --bg: #0c0c0e; --panel: #121214; --text: #F0F0F0; --f-sans: 'Inter', sans-serif; --f-head: 'Space Grotesk', sans-serif; --f-disp: 'Playfair Display', serif; --f-mono: 'JetBrains Mono', monospace; } body { font-family: var(--f-sans); background: var(--bg); color: var(--text); overflow-x: hidden; min-height: 100vh; padding: var(--frame); } ::selection { background: var(--accent); color: #000; } button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }  .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.08; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 40px 40px; }  #app { position: relative; width: 100%; min-height: calc(100vh - var(--frame) * 2); background: var(--bg); z-index: 10; overflow: hidden; display: flex; flex-direction: column; border-radius: 0 36px 0 36px; }  #ambient-glow { position: absolute; bottom: -10%; left: 25%; right: 25%; height: 35%; border-radius: 50%; filter: blur(120px); pointer-events: none; transition: background 1s ease-out; opacity: .75; z-index: 0; }  header { position: absolute; top: 0; left: 0; z-index: 20; background: var(--panel); height: 80px; padding: 0 40px 0 40px; display: flex; align-items: center; gap: 48px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);border-radius: 0 0 36px 0; } .logo { font-family: var(--f-head); font-weight: 900; font-size: 22px; letter-spacing: -.05em; transform: skewX(-8deg); user-select: none; white-space: nowrap; } .logo .dot { color: var(--accent); } #mobile-menu-btn { display: none; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #ccc; font-family: var(--f-head); font-size: 9px; font-weight: 700; letter-spacing: .15em; transform: skewX(-12deg); transition: all .2s; } #mobile-menu-btn:hover { background: rgba(255,255,255,.1); color: var(--accent); border-color: rgba(212,255,0,.3); } #mobile-menu-btn .inner { transform: skewX(12deg); display: inline-flex; align-items: center; gap: 5px; } nav { display: flex; align-items: center; gap: 32px; } .nav-link { font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #737373; padding: 6px 0; position: relative; transition: color .3s; text-transform: uppercase; } .nav-link:hover { color: var(--accent); } .nav-link.active { color: var(--accent); font-weight: 800; } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); animation: underline-in .3s ease-out; } @keyframes underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }  .hdr-corner-br { position: absolute; bottom: -36px; left: 0; width: 36px; height: 36px; fill: var(--panel); pointer-events: none; } .hdr-corner-tr { position: absolute; right: -36px; top: 0; width: 36px; height: 36px; fill: var(--panel); pointer-events: none; }  #btn-stay-area { position: absolute; top: 20px; right: 24px; z-index: 20; } .skew-btn { display: inline-flex; align-items: stretch; cursor: pointer; transition: transform .2s; box-shadow: 0 4px 20px rgba(0,0,0,.4); transform: skewX(-12deg);} .skew-btn:hover { transform: scale(1.02); } .skew-btn:active { transform: scale(.98); } .skew-btn-label { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); font-family: var(--f-head); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 12px 22px; transform: skewX(-12deg); transition: background .3s; white-space: nowrap; } .skew-btn-label span { transform: skewX(12deg); display: inline-block; } .skew-btn:hover .skew-btn-label { background: rgba(255,255,255,.1); } .skew-btn-arrow { background: var(--accent); color: #000; padding: 12px 14px; margin-left: -1px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; transition: background .3s; } .skew-btn-arrow span { transform: skewX(12deg); display: inline-block; } .skew-btn:hover .skew-btn-arrow { background: #fff; }  #scroll-tab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 192px; background: var(--panel); padding: 24px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; z-index: 10; border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); user-select: none; border-radius: 24px 0 0 24px; } .stab-corner { position: absolute; right: 0; width: 24px; height: 24px; fill: var(--panel); pointer-events: none; } .stab-corner.top { top: -24px; } .stab-corner.bot { bottom: -24px; } .scroll-label { font-family: var(--f-head); font-size: 9px; font-weight: 700; letter-spacing: .25em; color: #737373; text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(180deg); } .scroll-arrow { color: var(--accent); animation: bounce-y 1.8s ease-in-out infinite; } @keyframes bounce-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }  #hero-grid { position: relative; z-index: 10; flex-grow: 1; display: grid; grid-template-columns: 8fr 4fr; padding: 120px 64px 80px 64px; min-height: calc(100vh - var(--frame) * 2); }  #hero-left { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px; padding-bottom: 64px; } .intro-tag { display: flex; align-items: center; gap: 8px; animation: fade-left .6s ease-out both; } .intro-tag-line { width: 24px; height: 1px; background: var(--accent); } .intro-tag-text { font-family: var(--f-head); font-size: 10px; font-weight: 700; letter-spacing: .4em; color: var(--accent); text-transform: uppercase; } .sparkle { color: var(--accent); fill: var(--accent); animation: pulse-a 2s ease-in-out infinite; } @keyframes pulse-a { 0%,100% { opacity: 1; } 50% { opacity: .4; } } @keyframes fade-left { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-headline { font-family: var(--f-disp); font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 900; font-style: italic; line-height: .95; letter-spacing: -.02em; transform: skewX(-8deg); max-width: 600px; color: #fff; animation: fade-up .8s ease-out .1s both; } .headline-grad { background: linear-gradient(90deg, #fff, #f0f0f0, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 13px; color: #a3a3a3; max-width: 420px; font-weight: 300; line-height: 1.7; border-left: 2px solid var(--accent); padding-left: 24px; animation: fade-up .8s ease-out .2s both; } .hero-desc strong { color: #fff; font-weight: 500; }  #btn-get-started { display: inline-flex; align-items: stretch; box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: fade-up .8s ease-out .3s both; margin-top: 8px; } .cta-main { background: var(--accent); color: #000; font-family: var(--f-head); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 18px 40px; transform: skewX(-12deg); transition: background .3s; } .cta-main span { transform: skewX(12deg); display: inline-block; } .cta-arr { background: #fff; color: #000; padding: 18px 20px; transform: skewX(-12deg); margin-left: -2px; display: flex; align-items: center; font-weight: 900; font-size: 13px; transition: background .3s; } .cta-arr span { transform: skewX(12deg); display: inline-block; } #btn-get-started:hover .cta-main { background: #fff; } #btn-get-started:hover .cta-arr { background: var(--accent); } #btn-get-started:hover { transform: scale(1.03); } #btn-get-started:active { transform: scale(.97); }  #paint-hud { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.05); backdrop-filter: blur(12px); padding: 12px 16px; border: 1px solid rgba(255,255,255,.1); margin-top: 24px; animation: fade-up .8s ease-out .4s both; } .paint-hud-label { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .25em; color: var(--accent); text-transform: uppercase; } .swatches { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; background: none; } .swatch:hover { border-color: rgba(255,255,255,.4); } .swatch.active { border-color: var(--accent); transform: scale(1.1); } .swatch-inner { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); transition: transform .3s; } .swatch:hover .swatch-inner { transform: scale(.9); } .swatch-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; } .swatch-sep { width: 1px; height: 24px; background: rgba(255,255,255,.1); margin-left: 6px; } .swatch-name { font-family: var(--f-head); font-size: 12px; font-weight: 500; color: #d4d4d4; letter-spacing: .1em; text-transform: uppercase; }  #hero-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 48px; padding-right: 32px; text-align: right; padding-bottom: 64px; } .stat-block { display: flex; flex-direction: column; align-items: flex-end; } .stat-row { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; } .stat-val { font-family: var(--f-disp); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 900; font-style: italic; line-height: 1; } .stat-val.pop { animation: stat-pop .4s ease-out; } @keyframes stat-pop { from { transform: scale(.88); opacity: .4; } to { transform: scale(1); opacity: 1; } } .stat-unit { font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-left: 4px; } .stat-lbl { font-family: var(--f-head); font-size: 9px; letter-spacing: .2em; color: #737373; text-transform: uppercase; font-weight: 500; margin-top: 4px; } .stat-sub { font-family: var(--f-mono); font-size: 9px; color: #404040; margin-top: 2px; }  #car-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } #car-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1) scale(1); filter: drop-shadow(0 30px 70px rgba(0,0,0,.85)) brightness(1.03) contrast(1.02); transition: opacity .6s ease-out, transform .65s ease-out; } #car-img.fade-out { opacity: 0; transform: scaleX(-1) scale(.97) translateY(10px); }  #br-card { position: absolute; bottom: 0; right: 0; z-index: 20; background: var(--panel); padding: 32px 8px 8px 32px; border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); box-shadow: -10px -10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 16px; max-width: 320px; border-radius: 36px 0 0 0 } .br-corner { position: absolute; width: 24px; height: 24px; fill: var(--panel); pointer-events: none; } .br-corner.left { left: -24px; bottom: 0; } .br-corner.top { top: -24px; right: 0; }  .gallery-wrap { position: relative; width: 265px; height: 133px; overflow: hidden; background: #111; } .gallery-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); transition: transform .7s ease-out; display: block; } .gallery-wrap:hover .gallery-img { transform: scale(1.1); } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); opacity: .6; pointer-events: none; } .gallery-badge { position: absolute; top: 10px; right: 10px; mix-blend-mode: screen; pointer-events: none; animation: spin 20s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gallery-hud { position: absolute; bottom: 8px; left: 12px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); padding: 2px 8px; } .hud-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ping 2s ease-out infinite; } @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%,100% { transform: scale(1.6); opacity: 0; } } .hud-txt { font-family: var(--f-mono); font-size: 7.5px; font-weight: 700; color: #fff; letter-spacing: .15em; text-transform: uppercase; }  .happy-wrap { display: flex; flex-direction: column; gap: 4px; text-align: left; padding-bottom: 10px; position: relative; } .happy-lbl { font-family: var(--f-head); font-size: 9px; font-weight: 700; letter-spacing: .25em; color: #737373; text-transform: uppercase; user-select: none; } .happy-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-right: 16px; } .happy-count { font-family: var(--f-head); font-size: 24px; font-weight: 900; color: #fff; } .avatars { display: flex; align-items: center; } .av-btn { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--panel); margin-left: -12px; cursor: pointer; transition: all .3s; box-shadow: 0 2px 8px rgba(0,0,0,.4); background: none; padding: 0; overflow: hidden; } .av-btn:first-child { margin-left: 0; } .av-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .av-btn:hover { transform: scale(1.15); z-index: 30 !important; } .av-btn.active { border-color: var(--accent); transform: scale(1.15); z-index: 30 !important; }  #review-popup { display: none; position: absolute; bottom: calc(100% + 8px); right: 4px; background: #18181b; border: 1px solid rgba(255,255,255,.1); padding: 14px; text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.8); max-width: 265px; z-index: 50; animation: fade-up .2s ease-out; } #review-popup.show { display: block; } .rv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .rv-name { font-family: var(--f-head); font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .1em; text-transform: uppercase; } .rv-role { font-family: var(--f-mono); font-size: 8px; color: #737373; margin-top: 2px; } .rv-stars { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1px; } .rv-text { font-size: 9px; color: #d4d4d4; margin-top: 8px; line-height: 1.6; font-style: italic; font-weight: 300; } .rv-dismiss { font-family: var(--f-mono); font-size: 8px; color: var(--accent); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; display: block; cursor: pointer; background: none; border: none; padding: 0; } .rv-dismiss:hover { text-decoration: underline; }  footer { position: absolute; bottom: 16px; left: 64px; z-index: 1; display: flex; align-items: center; gap: 32px; font-family: var(--f-mono); font-size: 9px; color: #525252; text-transform: uppercase; letter-spacing: .15em; user-select: none; } footer .acc { color: var(--accent); }  #modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(12px); z-index: 50; align-items: center; justify-content: center; padding: 16px; } #modal-bg.open { display: flex; animation: fade-in .2s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: #0e0e11; border: 1px solid rgba(255,255,255,.1); color: #fff; width: 100%; max-width: 512px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.9); animation: modal-in .4s cubic-bezier(.34,1.56,.64,1); } @keyframes modal-in { from { transform: scale(.95) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .modal-hdr { background: rgba(255,255,255,.05); padding: 24px 32px 16px; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: var(--f-head); font-size: 20px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; display: flex; align-items: center; gap: 4px; } .modal-title .dot { color: var(--accent); } .modal-sub { font-family: var(--f-mono); font-size: 10px; color: #737373; text-transform: uppercase; letter-spacing: .15em; margin-top: 2px; } .modal-close-btn { padding: 6px; background: rgba(255,255,255,.05); color: #737373; cursor: pointer; transition: all .2s; border: none; display: flex; align-items: center; } .modal-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; } .modal-body { padding: 24px 32px; }  .fg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .flbl { font-family: var(--f-head); font-size: 10px; font-weight: 700; color: #737373; letter-spacing: .15em; text-transform: uppercase; } .fi-wrap { position: relative; } .fi-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #525252; pointer-events: none; display: flex; align-items: center; } .f-in, .f-date { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 12px 16px 12px 44px; font-size: 14px; font-family: var(--f-sans); outline: none; transition: border-color .2s; } .f-in:focus, .f-date:focus { border-color: var(--accent); } .f-in::placeholder { color: #525252; } .f-date { color-scheme: dark; } .f-sel { width: 100%; background: #111113; border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 12px 16px; font-size: 14px; font-family: var(--f-sans); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s; } .f-sel:focus { border-color: var(--accent); } .f-check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12px; color: #d4d4d4; margin-top: 4px; } .f-check-row input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } .btn-submit { width: 100%; margin-top: 12px; background: var(--accent); color: #000; font-family: var(--f-head); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; padding: 16px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .3s; box-shadow: 0 20px 40px rgba(0,0,0,.5); } .btn-submit:hover { background: #fff; } .btn-submit:active { transform: scale(.98); }  #form-ok { display: none; flex-direction: column; align-items: center; text-align: center; padding: 24px 0; gap: 20px; } #form-ok.show { display: flex; animation: fade-in .3s ease-out; } .ok-icon { width: 64px; height: 64px; background: rgba(212,255,0,.15); border: 1px solid rgba(212,255,0,.5); display: flex; align-items: center; justify-content: center; color: var(--accent); animation: bounce-ok 1s ease-in-out infinite; } @keyframes bounce-ok { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ok-title { font-family: var(--f-head); font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; } .ok-desc { font-size: 12px; color: #737373; max-width: 380px; line-height: 1.7; } .ticket { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); padding: 16px; text-align: left; font-family: var(--f-mono); font-size: 10px; color: #d4d4d4; display: flex; flex-direction: column; gap: 10px; } .t-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .t-row.sep { border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 8px; } .t-key { color: #525252; font-size: 9px; text-transform: uppercase; white-space: nowrap; } .t-val { color: #fff; font-family: var(--f-sans); font-size: 10px; font-weight: 600; text-align: right; } .t-val.acc { color: var(--accent); font-family: var(--f-head); } .btn-close-portal { width: 100%; background: rgba(255,255,255,.1); color: #fff; font-family: var(--f-head); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 12px 16px; border: none; cursor: pointer; transition: background .2s; } .btn-close-portal:hover { background: rgba(255,255,255,.15); }  #drawer { display: none; position: fixed; inset: 0; background: rgba(12,12,14,.95); backdrop-filter: blur(16px); z-index: 50; flex-direction: column; justify-content: space-between; padding: 24px; } #drawer.open { display: flex; animation: fade-in .2s ease-out; } .drawer-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 16px; } .drawer-close { padding: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; display: flex; transition: background .2s; } .drawer-close:hover { background: rgba(255,255,255,.1); } .drawer-mid { display: flex; flex-direction: column; gap: 20px; padding-left: 8px; margin: auto 0; padding-top: 40px; padding-bottom: 40px; } .drawer-idx-lbl { font-size: 9px; letter-spacing: .3em; font-weight: 700; color: #525252; text-transform: uppercase; font-family: var(--f-mono); } .drawer-links { display: flex; flex-direction: column; gap: 16px; } .drawer-link { font-family: var(--f-head); font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; color: #e5e5e5; text-align: left; cursor: pointer; background: none; border: none; display: flex; align-items: center; gap: 12px; transition: color .2s, transform .2s; } .drawer-link:hover { color: var(--accent); transform: translateX(8px); } .drawer-link.active { color: var(--accent); } .drawer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .drawer-bot { border-top: 1px solid rgba(255,255,255,.05); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .drawer-spec-lbl { font-size: 9px; letter-spacing: .15em; color: #525252; text-transform: uppercase; font-family: var(--f-mono); margin-bottom: 2px; } .drawer-spec-val { font-size: 11px; font-weight: 600; color: #fff; } .btn-drawer-cta { background: var(--accent); color: #000; font-family: var(--f-head); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; padding: 12px 24px; transform: skewX(-12deg); cursor: pointer; border: none; transition: background .3s; } .btn-drawer-cta span { transform: skewX(12deg); display: inline-block; } .btn-drawer-cta:hover { background: #fff; }  @media (max-width: 1024px) { header { padding: 0 16px; height: 64px; gap: 16px; } nav { display: none; } #mobile-menu-btn { display: inline-flex; } #btn-stay-area { top: 4px; right: 16px; } .skew-btn-label { padding: 10px 16px; font-size: 9px; } .skew-btn-arrow { padding: 10px 12px; } #scroll-tab { display: none; } #hero-grid { grid-template-columns: 1fr; padding: 90px 24px 160px; } #hero-right { flex-direction: row; justify-content: flex-start; align-items: center; gap: 40px; text-align: left; padding-right: 0; padding-bottom: 0; border-top: 1px solid rgba(255,255,255,.05); padding-top: 24px; } .stat-block { align-items: flex-start; } .stat-row { justify-content: flex-start; } .stat-sub { display: none; } footer { left: 24px; gap: 16px; flex-wrap: wrap; } .hide-m { display: none; } } @media (max-width: 640px) { :root { --frame: 15px; } #hero-grid { padding: 80px 16px 200px; } .hero-headline { font-size: clamp(1.9rem, 8vw, 2.4rem); } #br-card { max-width: 240px; padding: 24px 6px 6px 20px; } .gallery-wrap { width: 200px; height: 100px; } .fg2 { grid-template-columns: 1fr; } #hero-right { flex-wrap: wrap; gap: 24px; } .stat-val { font-size: clamp(1.8rem, 6vw, 2.4rem); } #stat-accel-block { display: none; } }