/* ============================================================ REDESIGN.CSS โ€” 765 Digital Brutalist-Minimal Dark Tech Design System Horizon (headings) ยท Montserrat (body + labels) ============================================================ */ /* 1. FONTS ============================================================ */ @font-face { font-family: 'Horizon'; src: url('/assets/fonts/Horizon.woff2') format('woff2'), url('/assets/fonts/Horizon.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Horizon Outlined'; src: url('/assets/fonts/Horizon_Outlined.woff2') format('woff2'), url('/assets/fonts/Horizon_Outlined.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; } @font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: block; } /* 2. CUSTOM PROPERTIES ============================================================ */ :root { color-scheme: dark; /* Backgrounds */ --bg: #080808; --bg2: #0e0e0e; --bg3: #141414; --bg4: #1c1c1c; /* Borders */ --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13); --border3: rgba(255,255,255,0.24); /* Text */ --white: #f0f0ee; --muted: rgba(240,240,238,0.68); --dim: rgba(240,240,238,0.40); --faint: rgba(240,240,238,0.07); /* Typography */ --sans: 'Horizon', sans-serif; --outlined: 'Horizon Outlined', sans-serif; --mono: 'Montserrat', sans-serif; /* Text on --white surfaces */ --on-white: #000; --on-white-muted: rgba(0,0,0,0.50); --on-white-dim: rgba(0,0,0,0.45); --on-white-divider: rgba(0,0,0,0.12); --on-white-border: rgba(0,0,0,0.20); --on-white-bg: rgba(0,0,0,0.06); /* Ghost / stroke effects */ --stroke-ghost: rgba(240,240,238,0.08); --stroke-outline: rgba(240,240,238,0.30); --stroke-outline-hi: rgba(240,240,238,0.45); /* Card surfaces */ --card-shine: rgba(255,255,255,0.22); --card-shine-hover: rgba(255,255,255,0.45); --card-glow: rgba(255,255,255,0.07); --card-hover-border: rgba(255,255,255,0.20); --card-hover-bg: rgba(255,255,255,0.025); --card-surface: rgba(255,255,255,0.04); /* Ghost number overlays */ --ghost-num: rgba(255,255,255,0.035); --ghost-num-hover: rgba(255,255,255,0.08); /* Component-specific */ --nav-bg: rgba(8,8,8,0.97); --tb-off: #2a2a2a; --cta-hover: #d4d4d2; --hero-sp-bg: #181818; --iso-overlay: rgba(0,0,0,0.75); --scanline: rgba(0,0,0,0.03); } /* 2b. LIGHT MODE THEME Activate with ============================================================ */ [data-theme="light"] { color-scheme: light; /* Backgrounds */ --bg: #f8f8f6; --bg2: #f1f1ef; --bg3: #eaeae8; --bg4: #e1e1df; /* Borders */ --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.13); --border3: rgba(0,0,0,0.22); /* Text */ --white: #111110; --muted: rgba(17,17,16,0.65); --dim: rgba(17,17,16,0.42); --faint: rgba(17,17,16,0.06); /* Text on --white surfaces (now dark surfaces) */ --on-white: #f0f0ee; --on-white-muted: rgba(240,240,238,0.70); --on-white-dim: rgba(240,240,238,0.55); --on-white-divider: rgba(240,240,238,0.18); --on-white-border: rgba(240,240,238,0.28); --on-white-bg: rgba(240,240,238,0.10); /* Ghost / stroke effects */ --stroke-ghost: rgba(17,17,16,0.08); --stroke-outline: rgba(17,17,16,0.26); --stroke-outline-hi: rgba(17,17,16,0.45); /* Card surfaces */ --card-shine: rgba(0,0,0,0.07); --card-shine-hover: rgba(0,0,0,0.15); --card-glow: rgba(0,0,0,0.05); --card-hover-border: rgba(0,0,0,0.18); --card-hover-bg: rgba(0,0,0,0.03); --card-surface: rgba(0,0,0,0.03); /* Ghost number overlays */ --ghost-num: rgba(0,0,0,0.05); --ghost-num-hover: rgba(0,0,0,0.10); /* Component-specific */ --nav-bg: rgba(248,248,246,0.97); --tb-off: #c8c8c6; --cta-hover: #1e1e1c; --hero-sp-bg: #eaeae8; --iso-overlay: rgba(248,248,246,0.88); --scanline: transparent; } /* Light mode: logo swap, marquee inversion */ [data-theme="light"] .nav-logo img, [data-theme="light"] .footer-logo img, [data-theme="light"] .mobile-menu-top img { filter: invert(1); } [data-theme="light"] .mq-item img { filter: grayscale(100%) invert(1); } /* 3. RESET + GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; overflow-x: clip; overflow-y: auto; scrollbar-gutter: stable; } html.scroll-ready { scroll-behavior: smooth; } body { background: var(--bg); color: var(--white); font-family: var(--mono); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100vw; overflow-x: clip; } /* Scanline CRT overlay */ body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, var(--scanline) 3px, var(--scanline) 4px ); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* 4. TYPOGRAPHY UTILITIES ============================================================ */ .sec-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); background: var(--faint); border: 1px solid var(--border2); padding: 5px 13px; margin-bottom: 20px; } .live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--white); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } .sec-head { font-family: var(--sans); font-size: clamp(24px, 3.3vw, 43px); font-weight: 400; letter-spacing: 1px; line-height: 1.1; text-transform: uppercase; margin-bottom: 20px; } .outlined { color: transparent; -webkit-text-stroke-color: var(--stroke-outline-hi); } .sec-head .outlined { display: inline; font-family: var(--outlined); -webkit-text-stroke: 1.2px var(--stroke-outline-hi); } .sec-sub { font-family: var(--mono); font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 600px; margin-bottom: 48px; } /* 5. SECTION LAYOUT ============================================================ */ .section { padding: 120px 64px; background: var(--bg); position: relative; } .section.alt { background: var(--bg2); overflow: clip; } .section.dark { background: var(--bg3); } .inner { max-width: 1320px; margin: 0 auto; } .section-cta-wrap { margin-top: 56px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } /* 6. URGENCY BAR ============================================================ */ .urgency-bar { background: var(--white); color: var(--on-white); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 10px 0; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .urgency-bar > * { padding: 0 20px; border-right: 1px solid var(--on-white-divider); display: flex; align-items: center; justify-content: center; gap: 8px; } .urgency-bar > *:last-child { border-right: none; } /* 7. NAVIGATION ============================================================ */ .nav-wrapper { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .nav-sys { display: flex; align-items: center; justify-content: space-between; padding: 7px 64px; border-bottom: 1px solid var(--border2); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--on-white-muted); background: var(--white); } .nav-sys-links { display: flex; align-items: center; gap: 24px; } .nav-sys-links a:hover { color: var(--on-white); } .nav-lang { display: flex; gap: 12px; align-items: center; } .nav-lang a { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--on-white-dim); padding: 3px 8px; border: 1px solid transparent; transition: 0.15s; } .nav-lang a:hover, .nav-lang a.active { color: var(--on-white); border-color: var(--on-white-border); background: var(--on-white-bg); } .nav-main { display: flex; align-items: center; justify-content: space-between; padding: 16px 64px; background: var(--nav-bg); border-bottom: 1px solid var(--border2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-logo img { height: 35px; width: auto; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { color: var(--dim); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border: 1px solid transparent; transition: 0.15s; } .nav-links a:hover { color: var(--white); border-color: var(--border2); background: var(--faint); } .nav-cta { background: var(--white); color: var(--on-white); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 11px 24px; transition: opacity 0.15s; display: inline-block; } .nav-cta:hover { opacity: 0.82; } .theme-toggle { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; padding: 0; margin-right: 56px; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: flex; align-items: center; padding: 3px 6px; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; } .theme-toggle .icon-sun { border: 1px solid var(--on-white-border); color: var(--on-white-dim); } .theme-toggle .icon-moon { border: 1px solid var(--on-white-border); border-left: none; color: var(--on-white); background: var(--on-white-bg); } .theme-toggle .icon-sun:hover { border-color: var(--on-white); } .theme-toggle .icon-moon:hover { border-color: var(--on-white); box-shadow: -1px 0 0 0 var(--on-white); } [data-theme="light"] .theme-toggle .icon-sun { color: var(--on-white); background: var(--on-white-bg); } [data-theme="light"] .theme-toggle .icon-moon { color: var(--on-white-dim); background: transparent; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .hamburger span { display: block; width: 22px; height: 1px; background: var(--white); transition: 0.2s; } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--bg); border-right: 1px solid var(--border2); padding: 32px 32px; display: flex; flex-direction: column; gap: 0; transform: translateX(-100%); transition: transform 0.3s ease; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; } .mobile-menu-top img { height: 28px; width: auto; } .mobile-close { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); background: none; border: 1px solid var(--border2); padding: 8px 14px; cursor: pointer; } .mobile-nav-links { display: flex; flex-direction: column; gap: 0; } .mobile-nav-links a { font-family: var(--sans); font-size: clamp(20px, 5vw, 36px); text-transform: uppercase; letter-spacing: 1px; color: var(--dim); padding: 12px 0; border-bottom: 1px solid var(--border); transition: color 0.15s, padding-left 0.15s; } .mobile-nav-links a:hover { color: var(--white); padding-left: 8px; } .mobile-menu-cta { margin-top: 24px; } .mobile-menu-lang { display: none; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border2); } .mobile-menu-lang .theme-toggle { margin-right: 0; } .mobile-menu-lang .theme-toggle .icon-sun, .mobile-menu-lang .theme-toggle .icon-moon { padding: 5px 8px; } .mobile-menu-lang .theme-toggle .icon-sun { border-color: var(--border2); color: var(--dim); background: transparent; } .mobile-menu-lang .theme-toggle .icon-moon { border-color: var(--border2); color: var(--white); background: var(--faint); } .mobile-menu-lang .theme-toggle .icon-sun:hover { border-color: var(--border3); } .mobile-menu-lang .theme-toggle .icon-moon:hover { border-color: var(--border3); box-shadow: -1px 0 0 0 var(--border3); } [data-theme="light"] .mobile-menu-lang .theme-toggle .icon-sun { border-color: var(--border2); color: var(--white); background: var(--faint); } [data-theme="light"] .mobile-menu-lang .theme-toggle .icon-moon { border-color: var(--border2); color: var(--dim); background: transparent; } .mobile-menu-lang .nav-lang { gap: 16px; } .mobile-menu-lang .nav-lang a { font-size: 11px; padding: 5px 12px; color: var(--dim); border-color: transparent; background: transparent; } .mobile-menu-lang .nav-lang a:hover, .mobile-menu-lang .nav-lang a.active { color: var(--white); border-color: var(--border2); background: var(--faint); } /* 8. LOADER ============================================================ */ .loader-done #loader { display: none !important; } #loader { position: fixed; inset: 0; z-index: 99999; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; } .loader-terminal { width: min(560px, 88vw); animation: none; } .loader-terminal .term-body { min-height: 410px; } .loader-pct { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--dim); min-width: 28px; text-align: right; } .loader-progress-bar { height: 1px; background: var(--border2); position: relative; } .loader-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--white); transition: width 0.15s ease; } .loader-cursor { display: inline-block; color: var(--white); font-family: var(--mono); font-size: 12px; animation: cursorBlink 0.7s step-end infinite; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .tl.tp { color: var(--dim); } .tl.tc { color: var(--white); } .tl.to { color: var(--muted); } .tl.tow { color: var(--white); } /* 9. HERO ============================================================ */ .hero { padding: 0 64px 0; background: var(--bg); position: relative; display: flex; flex-direction: column; min-height: 100svh; } .hero-inner { display: flex; align-items: center; flex: 1; padding-top: 105px; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, calc(9vw - 52px), 80px); align-items: stretch; max-width: 1320px; width: 100%; margin: 0 auto; transform: translateZ(0); } .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--faint); border: 1px solid var(--border2); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); padding: 7px 14px; margin-bottom: 28px; } .hero-social-proof { margin-bottom: 28px; } .hsp-stars { letter-spacing: 2px; } .hero-heading { font-family: var(--sans); font-size: clamp(28px, calc(5.5vw - 30px), 51px); font-weight: 400; letter-spacing: 2px; line-height: 1.05; text-transform: uppercase; margin-bottom: 24px; animation: fadeUp 0.8s ease both; } .hero-heading .outlined { display: inline; font-family: var(--outlined); -webkit-text-stroke: 1.2px var(--stroke-outline-hi); } .hero-sub { font-family: var(--mono); font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 480px; margin-bottom: 36px; animation: fadeUp 0.8s 0.15s ease both; } .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; animation: fadeUp 0.8s 0.3s ease both; } /* Hero marquee โ€” flush to bottom of hero, bleeds past hero padding */ .hero-marquee { margin-left: -64px; margin-right: -64px; } .hero-marquee .marquee-wrap { margin-top: 0; } /* Isometric scene */ .iso-scene { position: relative; width: 100%; animation: fadeUp 0.8s 0.2s ease both; background: var(--bg3); border: 1px solid var(--border); } #wrap { position: absolute; inset: 0; overflow: visible; } #iso-canvas { display: block; position: absolute; top: -18%; left: -18%; width: 136%; height: 136%; } .iso-corner { position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); pointer-events: none; transition: opacity 0.15s ease; } .iso-corner.tl { top: 12px; left: 14px; } .iso-corner.tr { top: 12px; right: 14px; display: flex; align-items: center; gap: 6px; } .iso-corner.bl { bottom: 12px; left: 14px; } .iso-corner.br { bottom: 12px; right: 14px; } /* Node info panel (top-left) */ .iso-node-info { position: absolute; top: 12px; left: 14px; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.15s ease; } .iso-node-info.visible { opacity: 1; } /* Hover HUD panel */ .iso-hud { position: absolute; bottom: 36px; left: 14px; pointer-events: none; z-index: 10; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .iso-hud.visible { opacity: 1; transform: translateY(0); } .iso-hud-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border); } .iso-hud-role { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; } .iso-hud-stat { display: flex; gap: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.9; } .iso-hud-stat-key { color: var(--dim); } .iso-hud-stat-val { color: var(--white); } /* Shared terminal utility classes (used by loader) */ .term-win { background: var(--bg3); border: 1px solid var(--border2); animation: fadeUp 0.8s 0.2s ease both; } .term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border2); } .tb { width: 11px; height: 11px; border-radius: 50%; background: var(--tb-off); } .tb.on { background: var(--white); } .term-title { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-left: 8px; } .term-body { padding: 24px 28px; font-family: var(--mono); } .tl { display: block; font-size: 12px; line-height: 2; } .tp { color: var(--dim); } .tc { color: var(--white); font-weight: 600; } .to { color: var(--muted); padding-left: 18px; font-size: 11px; display: block; line-height: 1.9; } .to.w { color: var(--white); } .cursor { display: inline-block; width: 7px; height: 13px; background: var(--white); vertical-align: middle; animation: blink 1s ease infinite; } /* 9. BUTTONS ============================================================ */ .cta-primary { background: var(--white); color: var(--on-white); font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; padding: 18px clamp(14px, calc(5.8vw - 49px), 36px); display: inline-block; text-align: center; transition: background-color 0.15s; } .cta-primary:hover { background: var(--cta-hover); } .cta-secondary { border: 1px solid var(--border2); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; padding: 18px clamp(14px, calc(5.8vw - 49px), 36px); display: inline-block; text-align: center; transition: 0.15s; } .cta-secondary:hover { border-color: var(--border3); color: var(--white); } /* 10. MARQUEE / TECH STACK ============================================================ */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(18px, 1.9vw, 28px) 0; margin-top: 0; } .marquee-inner { display: flex; width: max-content; animation: mq 32s linear infinite paused; align-items: center; } .mq-item { display: flex; align-items: center; padding: 0 56px; flex-shrink: 0; } .mq-item img { height: 42px; width: auto; filter: grayscale(100%); } .mq-sep { display: none; } /* 11. SERVICES / MODULE CARDS ============================================================ */ .module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .module-card { background: var(--bg3); border: 1px solid var(--border); padding: 0 44px 48px; box-shadow: inset 3px 0 0 var(--card-shine); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; position: relative; } @media (hover: hover) { .module-card:hover { border-color: var(--card-hover-border); background: var(--card-hover-bg); box-shadow: inset 3px 0 0 var(--card-shine-hover); } } /* Four-corner bracket system */ .module-card::before, .module-card::after { content: ''; position: absolute; width: 12px; height: 12px; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; opacity: 0.45; } /* top-left */ .module-card::before { top: 14px; left: 14px; border-top: 1px solid var(--white); border-left: 1px solid var(--white); } /* bottom-right */ .module-card::after { bottom: 14px; right: 14px; border-bottom: 1px solid var(--white); border-right: 1px solid var(--white); } .m-corner { position: absolute; inset: 0; pointer-events: none; } /* top-right */ .m-corner::before { position: absolute; content: ''; width: 12px; height: 12px; top: 14px; right: 14px; border-top: 1px solid var(--white); border-right: 1px solid var(--white); opacity: 0.45; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; } /* bottom-left */ .m-corner::after { position: absolute; content: ''; width: 12px; height: 12px; bottom: 14px; left: 14px; border-bottom: 1px solid var(--white); border-left: 1px solid var(--white); opacity: 0.45; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; } /* Hover: brackets grow and brighten */ @media (hover: hover) { .module-card:hover::before, .module-card:hover::after { width: 18px; height: 18px; opacity: 0.85; } .module-card:hover .m-corner::before, .module-card:hover .m-corner::after { width: 18px; height: 18px; opacity: 0.85; } } .module-strip { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .module-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 0; } .module-title { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 14px; } .module-body { font-family: var(--mono); font-size: 15px; font-weight: 300; color: var(--muted); line-height: 1.8; } /* Offer callout */ .offer-card { border: 1px solid var(--border3); background: var(--card-surface); box-shadow: inset 0px 1px 0px var(--card-glow); padding: 48px 52px; margin-top: 20px; position: relative; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; } .offer-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--white); color: var(--on-white); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 18px; white-space: nowrap; } .offer-text { flex: 1; min-width: 280px; } .offer-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .offer-headline { font-family: var(--sans); font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; line-height: 1.15; margin-bottom: 6px; } .offer-headline .outlined { font-family: var(--outlined); -webkit-text-stroke: 1.2px var(--stroke-outline-hi); } .offer-sub { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; } /* 12. STATS ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border2); margin-top: 56px; } .stat-card { padding: 48px 40px; border-right: 1px solid var(--border2); } .stat-card:last-child { border-right: none; } .stat-num { font-family: var(--outlined); font-size: clamp(52px, 7vw, 80px); font-weight: 400; letter-spacing: 2px; line-height: 1; text-transform: uppercase; margin-bottom: 12px; color: transparent; -webkit-text-stroke: 1px var(--dim); } .stat-title { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); line-height: 1.15; margin-bottom: 10px; text-transform: uppercase; } .stat-desc { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 12px; } .stat-source { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); border: 1px solid var(--border); padding: 4px 10px; display: inline-block; } .stat-source:hover { border-color: var(--border2); color: var(--muted); } /* 13. PORTFOLIO ============================================================ */ .portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .portfolio-card { background: var(--bg3); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s; display: flex; flex-direction: column; } .portfolio-card:hover { border-color: var(--border2); } .portfolio-card-img, .port-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; display: block; } .portfolio-card-img img, .port-img-wrap .port-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; filter: brightness(0.88) saturate(0.7); } .portfolio-card:hover .portfolio-card-img img, .port-card:hover .port-img { transform: scale(1.03); } .portfolio-card-body { padding: 28px 32px; flex: 1; display: flex; flex-direction: column; } .portfolio-card-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .portfolio-card-name { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 8px; } .portfolio-card-desc { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 20px; flex: 1; } .portfolio-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--border); } .portfolio-tags { display: flex; gap: 8px; flex-wrap: wrap; } .portfolio-tag { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); background: var(--faint); border: 1px solid var(--border); padding: 3px 8px; } .portfolio-link { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); transition: color 0.15s; flex-shrink: 0; } .portfolio-link:hover { color: var(--white); } .portfolio-card.hidden { display: none; } .load-more-wrap { margin-top: 40px; text-align: center; } /* 14. TESTIMONIALS ============================================================ */ .testi-section-top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 48px; } .testi-source { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; } .testi-source:hover { opacity: 0.75; } .testi-stars { letter-spacing: 2px; color: var(--white); } .testi-source img { height: 18px; width: auto; opacity: 0.7; } .testi-source-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .testi-slider-wrap { position: relative; } .testi-slider { touch-action: pan-y; display: grid; grid-template-columns: 1fr; } .testi-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .testi-slide.active { visibility: visible; opacity: 1; pointer-events: auto; } .testi-card { background: var(--bg3); border: 1px solid var(--border2); padding: 48px 52px; box-shadow: inset 0px 1px 0px var(--card-glow); } .testi-quote { font-family: var(--mono); font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.85; margin-bottom: 40px; max-width: 860px; } .testi-client { display: flex; align-items: center; gap: 20px; } .testi-avatar { width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--border2); flex-shrink: 0; } .testi-avatar img { width: 100%; height: 100%; object-fit: cover; } .testi-avatar-initial { width: 48px; height: 48px; background: var(--faint); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 16px; text-transform: uppercase; color: var(--dim); flex-shrink: 0; } .testi-name { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 3px; } .testi-role { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .testi-nav { display: flex; align-items: center; gap: 16px; margin-top: 32px; } .testi-btn { width: 44px; height: 44px; border: 1px solid var(--border2); background: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--dim); cursor: pointer; transition: 0.15s; } .testi-btn:hover { border-color: var(--border3); color: var(--white); } @media (hover: none) { .testi-btn:hover { border-color: var(--border2); color: var(--dim); } .testi-btn:active { border-color: var(--border3); color: var(--white); } } .testi-count { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-left: auto; } /* 15. PROCESS / STEPS ============================================================ */ .process-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .process-left { position: sticky; top: 100px; } .steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .step-card { background: var(--bg3); border: 1px solid var(--border); padding: 40px 36px; transition: border-color 0.2s; } .step-card:hover { border-color: var(--border2); } .s-num { font-family: var(--mono); font-size: clamp(48px, 5vw, 72px); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--border2); line-height: 1; margin-bottom: 20px; } .step-title { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 10px; color: var(--white); } .step-body { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.75; } /* TIMELINE V2 */ .timeline-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .timeline-left { position: sticky; top: 100px; } .timeline-track { position: relative; } .timeline-track::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--border2); } .timeline-step { position: relative; padding-left: 28px; padding-bottom: 52px; } .timeline-step:last-child { padding-bottom: 0; } .timeline-marker { position: absolute; left: 0; top: 5px; width: 7px; height: 7px; background: var(--white); } .timeline-num { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; margin-bottom: 10px; } .timeline-title { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 10px; } .timeline-body { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.75; } /* CREATIVE TIMELINE V3 */ .ct-sec-tag-wrap { text-align: center; position: relative; z-index: 2; } .ct-header { text-align: center; margin-bottom: 72px; position: relative; z-index: 2; } .ct-footer { margin-top: 64px; text-align: center; } .creative-timeline { position: relative; } .ct-progress-track { position: absolute; left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); z-index: 0; } .ct-axis-line { position: absolute; inset: 0; background: var(--border); } .ct-axis-fill { position: sticky; top: 0; height: 50svh; margin-top: -50svh; background: var(--white); } .ct-axis-cover { position: absolute; top: -50svh; height: 50svh; width: 5px; left: -2px; background: var(--bg2); } .ct-step { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; padding: 32px 0; border-top: 1px solid var(--faint); position: relative; } .ct-node { display: flex; justify-content: center; align-items: center; z-index: 2; position: relative; } .ct-dot { width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--white); transition: background 0.2s; } .ct-dot.active { background: var(--white); } .ct-content { position: relative; z-index: 1; } .ct-content.ct-left { text-align: right; padding-right: 52px; } .ct-content.ct-right { text-align: left; padding-left: 52px; } .ct-content.ct-left .ct-body { margin-left: auto; } .ct-ghost { font-family: var(--outlined); font-size: clamp(72px, 9vw, 120px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--stroke-ghost); user-select: none; pointer-events: none; position: relative; z-index: 1; transition: -webkit-text-stroke-color 0.4s; } .ct-step.active .ct-ghost { -webkit-text-stroke-color: var(--dim); } .ct-ghost.ct-left { text-align: right; padding-right: 52px; } .ct-ghost.ct-right { text-align: left; padding-left: 52px; } .ct-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; margin-bottom: 10px; display: none; } .ct-title { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 12px; } .ct-body { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 380px; } /* 16. WHY US / OUTCOME ROWS ============================================================ */ /* 16. WHY US โ€” BENTO GRID ============================================================ */ .bento-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 12px; } .bento-card { background: var(--bg3); border: 1px solid var(--border2); padding: 40px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 300px; transition: border-color 0.2s; } @media (hover: hover) { .bento-card:hover { border-color: var(--border3); } } .bento-wide { grid-column: span 2; } /* Ghost number behind card content */ .bento-ghost { position: absolute; bottom: -16px; right: 8px; font-family: var(--sans); font-size: clamp(100px, 12vw, 160px); font-weight: 400; color: var(--ghost-num); line-height: 1; pointer-events: none; user-select: none; letter-spacing: -2px; transition: color 0.3s ease; } @media (hover: hover) { .bento-card:hover .bento-ghost { color: var(--ghost-num-hover); } } .bento-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dim); } .bento-title { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); line-height: 1.15; flex: 1; } .bento-body { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-top: auto; } /* Focus card: big stat */ .bento-stat { font-family: var(--outlined); font-size: clamp(52px, 6.5vw, 88px); font-weight: 400; letter-spacing: -1px; color: transparent; -webkit-text-stroke: 1px var(--dim); line-height: 1; flex: 1; } .bento-stat-label { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); line-height: 1.15; } /* 17. CONTACT / FINAL CTA ============================================================ */ .final-cta { padding: 140px 64px; background: var(--bg3); text-align: center; position: relative; } .final-cta-head { font-family: var(--sans); font-size: clamp(35px, 6vw, 80px); font-weight: 400; letter-spacing: 2px; line-height: 1; text-transform: uppercase; margin-bottom: 32px; } .final-cta-head .outlined { display: inline; font-family: var(--outlined); -webkit-text-stroke: 1.2px var(--stroke-outline-hi); } .final-cta-sub { font-family: var(--mono); font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 600px; margin: 0 auto 40px; } .final-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; } .cal-wrap { max-width: 900px; margin: 0 auto; border: 1px solid var(--border2); } /* 18. FAQ ACCORDION ============================================================ */ .faq-inner { max-width: 820px; margin: 56px auto 0; } .faq-item { border: 1px solid var(--border); margin-bottom: -1px; cursor: pointer; transition: border-color 0.15s; } .faq-item:hover, .faq-item.open { border-color: var(--border2); } .faq-q { font-family: var(--mono); font-size: 15px; font-weight: 600; padding: 22px 24px; display: flex; align-items: center; gap: 14px; user-select: none; } .faq-q::before { content: none; } .faq-icon { margin-left: auto; width: 24px; height: 24px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; transition: 0.15s; background: var(--faint); flex-shrink: 0; color: var(--dim); font-family: var(--mono); line-height: 1; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-a { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); padding: 0 24px 24px 52px; line-height: 1.85; display: none; } .faq-a a { text-decoration: underline; color: var(--muted); } .faq-a a:hover { color: var(--white); } .faq-item.open .faq-a { display: block; } /* 19. FOOTER ============================================================ */ .site-footer { background: var(--bg); border-top: 1px solid var(--border2); padding: 64px 64px 28px; } .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; } .footer-logo { margin-bottom: 32px; } .footer-logo img { height: 32px; width: auto; } .footer-contact-block { margin-bottom: 20px; } .footer-contact-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; } .footer-contact-val { font-family: var(--mono); font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; } .footer-contact-val a { transition: color 0.15s; } .footer-contact-val a:hover { color: var(--white); } .footer-nav { display: flex; flex-direction: column; gap: 0; padding-top: 8px; } .footer-nav a { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--dim); padding: 10px 0; border-bottom: 1px solid var(--border); transition: color 0.15s, padding-left 0.15s; letter-spacing: 0.3px; } .footer-nav a:hover { color: var(--white); padding-left: 6px; } .footer-bottom { padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--dim); letter-spacing: 0.5px; } .footer-legal a { font-family: var(--mono); font-size: 11px; color: var(--dim); transition: color 0.15s; } .footer-legal a:hover { color: var(--muted); } /* 20. COOKIE BANNER ============================================================ */ #cw-cookie-banner { position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 480px; background: var(--bg3); border: 1px solid var(--border2); padding: 28px 32px; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } #cw-cookie-banner.cw-visible { opacity: 1; visibility: visible; pointer-events: auto; } #cw-cookie-banner h3 { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } #cw-cookie-banner p { font-family: var(--mono); font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 20px; } #cw-cookie-banner p a { text-decoration: underline; color: var(--muted); } #cw-btn-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--dim); font-size: 14px; cursor: pointer; padding: 4px; line-height: 1; } #cw-btn-close:hover { color: var(--white); } .cw-button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .cw-button_primary { background: var(--white); color: var(--on-white); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 20px; cursor: pointer; border: none; flex: 1; } .cw-button_secondary { background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 20px; cursor: pointer; border: 1px solid var(--border2); flex: 1; } .cw-button_secondary:hover { border-color: var(--border3); color: var(--white); } .cw-choose-link { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; } #cw-cookie-options { margin-top: 16px; display: none; border-top: 1px solid var(--border); padding-top: 16px; } #cw-cookie-options.visible { display: block; } .cw-cookie_options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .cw-option-row { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .cw-option-row input[type="checkbox"] { accent-color: var(--white); } #cw-cookie-icon { position: fixed; bottom: 24px; left: 24px; z-index: 9997; width: 30px; height: 30px; padding: 4px; background: var(--bg3); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } #cw-cookie-icon.cw-visible { opacity: 0.6; visibility: visible; pointer-events: auto; } /* 21. SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* 22. ANIMATIONS ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(var(--mq-shift, -50%)); } } @keyframes dashFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes ledBlink { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.15; } } /* 23. RESPONSIVE BREAKPOINTS ============================================================ */ @media (max-width: 1280px) { .nav-sys { padding: 7px 40px; } .nav-main { padding: 16px 40px; } .section { padding: 100px 48px; } .final-cta { padding: 120px 48px; } .site-footer { padding: 56px 48px 24px; } .stat-card { padding: 36px 28px; } .stat-num { font-size: clamp(44px, 5.5vw, 72px); } } @media (max-width: 1024px) { .nav-sys { padding: 7px 28px; } .nav-main { padding: 14px 28px; } .nav-logo img { height: 27px; } .nav-links { display: none; } .nav-cta { display: none; } .hamburger { display: flex; } .hero { padding: 0 32px 0; } .hero-content { grid-template-columns: 1fr; gap: 0; transform: none; } .hero-marquee { margin-left: -32px; margin-right: -32px; background: var(--bg); position: relative; z-index: 1; } .hero-marquee .marquee-wrap { padding: 12px 0; } .hero-marquee .mq-item { padding: 0 32px; } .hero-marquee .mq-item img { height: 35px; } .hero-left { position: relative; z-index: 1; } .hero-social-proof { background: var(--hero-sp-bg); } .hero-heading { max-width: 600px; } .hero-heading .outlined { font-family: var(--sans); color: var(--bg); -webkit-text-stroke: 1.2px var(--stroke-outline-hi); } .cta-secondary-solid { background: var(--bg); } .hero-actions { flex-wrap: wrap; } .cta-primary, .cta-secondary { white-space: normal; padding: 14px 27px; } .iso-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; margin: 0; border: none; background: transparent; pointer-events: none; } .iso-hud { display: none; } .iso-node-info { display: none; } .iso-scene::after { content: ''; position: absolute; inset: 0; background: var(--iso-overlay); pointer-events: none; } .section { padding: 80px 32px; } .final-cta { padding: 100px 32px; } .site-footer { padding: 48px 32px 24px; } .stat-card { padding: 28px 20px; } .stat-num { font-size: clamp(50px, 5vw, 60px); } .process-layout { grid-template-columns: 1fr; gap: 40px; } .process-left { position: static; } .timeline-layout { grid-template-columns: 1fr; gap: 40px; } .timeline-left { position: static; } .ct-step { display: flex; flex-direction: row; align-items: center; gap: 0; } .ct-ghost { display: none; } .ct-node { order: 1; flex: 0 0 40px; position: relative; z-index: 2; } .ct-content { order: 2; flex: 1 1 0; min-width: 0; position: relative; z-index: 2; } .ct-content.ct-left { text-align: left; padding-right: 0; padding-left: 20px; } .ct-content.ct-right { text-align: left; padding-left: 20px; padding-right: 0; } .ct-content.ct-left .ct-body { margin-left: 0; } .ct-label { display: block; font-family: var(--outlined); font-size: clamp(56px, 14vw, 96px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--stroke-ghost); letter-spacing: 0; text-transform: none; margin-bottom: 8px; transition: -webkit-text-stroke-color 0.4s; } .ct-step.active .ct-label { -webkit-text-stroke-color: var(--dim); } .ct-progress-track { left: 20px; transform: translateX(-50%); } .ct-axis-fill { height: 60svh; margin-top: -60svh; } .ct-axis-cover { top: -60svh; height: 60svh; } .steps-grid { grid-template-columns: 1fr 1fr; } .footer-top { grid-template-columns: 1fr; gap: 40px; } .testi-section-top { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { .urgency-bar { grid-template-columns: 1fr; } .urgency-bar > * { border-right: none; border-bottom: 1px solid var(--on-white-divider); padding: 8px 16px; } .urgency-bar > *:last-child { border-bottom: none; } .hero { padding: 0 20px 0; } .hero-marquee { margin-left: -20px; margin-right: -20px; } .hero-heading { font-size: clamp(24px, 6.7vw, 37px); } .section { padding: 64px 20px; } .final-cta { padding: 80px 20px; } .site-footer { padding: 40px 20px 20px; } .module-grid { grid-template-columns: 1fr; } .module-card.is-focused { border-color: var(--card-hover-border); background: var(--card-hover-bg); box-shadow: inset 3px 0 0 var(--card-shine-hover); } .module-card.is-focused::before, .module-card.is-focused::after { width: 18px; height: 18px; opacity: 0.85; } .module-card.is-focused .m-corner::before, .module-card.is-focused .m-corner::after { width: 18px; height: 18px; opacity: 0.85; } .steps-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .stat-card { border-right: none; border-bottom: 1px solid var(--border2); } .stat-card:last-child { border-bottom: none; } .testi-card { padding: 32px 24px; } .offer-card { flex-direction: column; gap: 24px; align-items: stretch; } .offer-body { width: 100%; } .bento-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .bento-wide { grid-column: span 2; } .bento-card { min-height: 220px; padding: 28px; } .bento-ghost { font-size: 80px; } } .tag-short { display: none; } @media (max-width: 480px) { .bento-grid { grid-template-columns: 1fr; gap: 8px; } .bento-wide { grid-column: span 1; } .bento-card.is-focused { border-color: var(--border3); } .bento-card.is-focused .bento-ghost { color: var(--ghost-num-hover); } .tag-full { display: none; } .tag-short { display: inline; } .nav-sys { display: none; } .mobile-menu-lang { display: flex; } .mobile-nav-links a:last-child { border-bottom: none; } .urgency-bar { font-size: 9px; } #cw-cookie-icon { bottom: 0; left: 0; } .hero-inner { padding-top: 77px; } .hero-social-proof { margin-bottom: 18px; padding-left: 6px; padding-right: 6px; } .hero-heading { margin-bottom: 14px; } .hero-sub { margin-bottom: 20px; } body { line-height: 1.4; } .hero-sub, .sec-sub, .module-body { line-height: 1.5; } .offer-sub, .stat-desc { line-height: 1.45; } .testi-quote { font-size: 15px; line-height: 1.5; } .hero-heading .outlined { -webkit-text-stroke-width: 0.8px; } .sec-head .outlined, .offer-headline .outlined, .final-cta-head .outlined { -webkit-text-stroke-width: 0.6px; } }