#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } #preloader .loader-logo { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 12px; } #preloader .loader-bar-container { width: 200px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; } #preloader .loader-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; } .custom-cursor, .custom-cursor-glow { display: none !important; } @media (hover: none) and (pointer: coarse) { .custom-cursor, .custom-cursor-glow { display: none !important; } } .timeline-section { overflow: visible; padding: 160px 0; background-color: var(--background); } .section-header { text-align: center; max-width: 600px; margin: 0 auto 100px auto; } .section-header h2 { font-size: 2.75rem; margin-bottom: 16px; letter-spacing: -0.02em; } .section-header p { color: var(--text-secondary); } .timeline-wrapper { position: relative; width: 100%; min-height: 560px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .timeline-svg-container { position: absolute; top: 50%; left: 0; width: 100%; height: 120px; transform: translateY(-50%); pointer-events: none; z-index: 3; } .timeline-svg { width: 100%; height: 100%; } .timeline-line-bg { stroke: var(--border); stroke-width: 3px; fill: none; } .timeline-line-animated { stroke: url(#timeline-gradient); stroke-width: 4px; stroke-dasharray: 8 8; fill: none; animation: dash-flow 30s linear infinite; will-change: stroke-dashoffset; } @keyframes dash-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } } .timeline-navigation-container { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin-top: 360px; padding-left: 60px; } .featured-card { position: absolute; top: -210px; left: 0; width: 270px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.6); padding: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08); z-index: 6; pointer-events: none; opacity: 0; transform: translateY(20px); will-change: transform, opacity; transition: opacity 0.3s ease, border-color 0.3s ease; } .featured-card.active { opacity: 1; } .featured-card-media { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 10; margin-bottom: 10px; background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(6, 182, 212, 0.08)); } .featured-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.03); } .featured-card-tag { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #ffffff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(12px); } .featured-card-copy { display: flex; flex-direction: column; gap: 8px; } .card-step { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 6px; } .card-title { font-size: 1.5rem; font-weight: 700; margin: 0; } .card-summary { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: 0.95rem; } .timeline-row { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; z-index: 5; padding: 0 80px; } .timeline-node-wrapper { flex: 1; display: flex; justify-content: center; } .timeline-node { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; justify-content: center; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--text-secondary); cursor: pointer; position: relative; z-index: 5; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, color 0.3s, box-shadow 0.3s; } .timeline-node:hover { transform: scale(1.1); border-color: var(--primary); color: var(--primary); } .timeline-node.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 0 20px rgba(108, 99, 255, 0.4); } .timeline-container-split { display: flex; gap: 60px; align-items: stretch; position: relative; width: 100%; } .timeline-left-column { flex: 1; min-width: 0; } .timeline-right-column { flex: 1.4; min-width: 340px; display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 120px; } .side-info-panel { position: sticky; top: 180px; width: 100%; max-width: 440px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 24px; padding: 28px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateX(40px) scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; z-index: 10; } .side-info-panel.panel-visible { opacity: 1; transform: translateX(0) scale(1); } .panel-illustration-box { width: 100%; height: 150px; background: rgba(108, 99, 255, 0.03); border-radius: 16px; border: 1px dashed rgba(108, 99, 255, 0.15); margin-bottom: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .panel-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; } .panel-orb { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); filter: blur(8px); box-shadow: 0 0 30px rgba(108, 99, 255, 0.4); animation: orb-spin 10s linear infinite alternate; position: absolute; right: 28px; bottom: 28px; z-index: 2; mix-blend-mode: screen; pointer-events: none; } @keyframes orb-spin { 0% { transform: scale(1) rotate(0deg); filter: blur(8px); } 50% { transform: scale(1.2) rotate(180deg); filter: blur(12px); } 100% { transform: scale(0.9) rotate(360deg); filter: blur(6px); } } .panel-side-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--text); margin-bottom: 16px; } .panel-side-desc { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; } .panel-side-list { padding-left: 20px; color: var(--text-secondary); font-size: 0.9rem; } .panel-side-list li { margin-bottom: 8px; } .panel-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 12px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #ffffff; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; text-decoration: none; box-shadow: 0 16px 30px rgba(108, 99, 255, 0.22); transition: transform 0.3s ease, box-shadow 0.3s ease; } .panel-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(108, 99, 255, 0.28); } .timeline-card { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 991px) { .timeline-container-split { flex-direction: column; gap: 40px; } .timeline-right-column { display: none; } .timeline-row { flex-direction: column; gap: 48px; } .timeline-navigation-container { margin-top: 360px; } .timeline-svg-container { display: none; } .featured-card { width: min(100%, 270px); top: -190px; } .featured-card-media { aspect-ratio: 15 / 9; } .card-details-data { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .card-details-data .data-title { font-weight: 700; color: var(--primary); margin-bottom: 8px; } .card-details-data .data-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 12px; } .card-details-data .data-list { padding-left: 20px; font-size: 0.85rem; color: var(--text-secondary); } } .timeline-section { --background: transparent; --surface: rgba(15, 15, 26, 0.4); --primary: #a855f7; --primary-rgb: 168, 85, 247; --secondary: #3b82f6; --accent: #10b981; --success: #22C55E; --text: #FFFFFF; --text-secondary: #9ca3af; --border: rgba(255, 255, 255, 0.08); --glow: rgba(168, 85, 247, 0.18); --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .featured-card, .side-info-panel { background: rgba(15, 15, 26, 0.6) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; } .panel-side-title, .card-title { color: #FFFFFF !important; } .timeline-node { background: rgba(15, 15, 26, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #9ca3af !important; } .timeline-node:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .timeline-node.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #FFFFFF !important; box-shadow: 0 0 25px rgba(168, 85, 247, 0.5) !important; } .timeline-section .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 50px; color: #c084fc; font-weight: 600; font-size: 0.85rem; margin-bottom: 24px; font-family: var(--font-heading); } .timeline-section .badge-dot { width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.6; } } html.light-theme .timeline-section { --background: #FEFDFC; --surface: #FEFDFC; --primary: #8263C8; --primary-rgb: 130, 99, 200; --secondary: #6E4DB5; --accent: #F2EEFB; --text: #1E1033; --text-secondary: #666666; --border: #EEEAF7; } html.light-theme .featured-card, html.light-theme .side-info-panel { background: #FEFDFC !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid #EEEAF7 !important; color: #1E1033 !important; } html.light-theme .panel-side-title, html.light-theme .card-title { color: #1E1033 !important; } html.light-theme .timeline-node { background: #F2EEFB !important; border-color: #EEEAF7 !important; color: #8263C8 !important; } html.light-theme .timeline-node:hover { background: #6E4DB5 !important; border-color: #6E4DB5 !important; color: #FEFDFC !important; } html.light-theme .timeline-node.active { background: #8263C8 !important; border-color: #8263C8 !important; color: #FEFDFC !important; box-shadow: 0 0 25px rgba(130, 99, 200, 0.4) !important; } html.light-theme .timeline-section .badge { background: #F2EEFB !important; border: 1px solid #EEEAF7 !important; color: #8263C8 !important; } #three-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1 !important; pointer-events: none; opacity: 0.35; } html.light-theme .glass-header h1 { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #000000 !important; color: #000000 !important; } html.light-theme .logo-online-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html.light-theme .glass-header nav a, html.light-theme .glass-header nav button, html.light-theme .glass-header nav button span { color: #000000 !important; } html.light-theme .glass-header nav a:hover, html.light-theme .glass-header nav button:hover, html.light-theme .glass-header nav button:hover span { color: #6E4DB5 !important; } html.light-theme .glass-header nav #lang-toggle, html.light-theme .glass-header nav #lang-toggle span { color: #000000 !important; } html.light-theme .glass-header nav #lang-toggle:hover, html.light-theme .glass-header nav #lang-toggle:hover span { color: #6E4DB5 !important; } html.light-theme .glass-header nav svg { stroke: currentColor !important; } html.light-theme .glass-header { background: rgba(254, 253, 252, 0.8) !important; border-bottom: 1px solid #EEEAF7 !important; } footer { background: linear-gradient(135deg, #161026 0%, #0d0918 100%) !important; border-top: 1px solid #2e224d !important; } html.light-theme footer { background: linear-gradient(135deg, #1c1530 0%, #110d21 100%) !important; border-top: 1px solid #3b2c61 !important; } html.light-theme footer h3 span, html.light-theme footer h4 { color: #FFFFFF !important; } html.light-theme footer p, html.light-theme footer a, html.light-theme footer span { color: rgba(255, 255, 255, 0.85) !important; } html.light-theme footer a:hover { color: #FFFFFF !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important; } html.light-theme footer .border-t { border-color: rgba(255, 255, 255, 0.15) !important; } html.light-theme footer .bg-white\/5 { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html.light-theme :not(footer) .text-white:not(button):not(a):not([class*="btn"]):not([class*="pill"]):not([class*="badge"]), html.light-theme :not(footer) h1.text-white, html.light-theme :not(footer) h2.text-white, html.light-theme :not(footer) h3.text-white, html.light-theme :not(footer) h4.text-white, html.light-theme :not(footer) span.text-white:not(button):not(a):not([class*="btn"]):not([class*="pill"]):not([class*="badge"]), html.light-theme :not(footer) p.text-white, html.light-theme :not(footer) .text-slate-100 { color: #1E1033 !important; -webkit-text-stroke: 0 !important; } html.light-theme :not(footer) h2 span, html.light-theme :not(footer) h2 em, html.light-theme :not(footer) h3 span, html.light-theme :not(footer) h3 em, html.light-theme :not(footer) h4 span, html.light-theme :not(footer) h4 em, html.light-theme :not(footer) .text-transparent { background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; -webkit-text-stroke: 0 !important; } .tech-section { position: relative; padding: 6.5rem 0; overflow: hidden; background: transparent; } .tech-dot-texture { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 1; } .tech-bg-glow { position: absolute; top: 50%; right: -5%; transform: translateY(-50%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%); pointer-events: none; z-index: 1; } .tech-eyebrow { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #a78bfa; margin-bottom: 1.25rem; } .tech-heading { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #ffffff; margin-bottom: 1.5rem; } .tech-heading span { display: inline-block; background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tech-body { font-size: clamp(0.9rem, 2vw, 1.05rem); font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.6); max-width: 460px; margin: 0 auto 2.25rem; } @media (min-width: 1024px) { .tech-body { margin-left: 0; margin-right: 0; } } .tech-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin-top: 1.5rem; } @media (min-width: 1024px) { .tech-pills { justify-content: flex-start; } } .tech-pill { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border-radius: 999px; background: #1E1033; color: #ffffff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(30, 16, 51, 0.15); transition: transform 0.25s ease, background 0.25s ease; } .tech-pill:hover { transform: translateY(-1.5px); background: #2D184E; } .tech-stack-column { display: flex; align-items: center; justify-content: center; height: 480px; position: relative; z-index: 2; } .tech-stack-container { position: relative; width: 440px; height: 440px; } .tech-card { position: absolute; top: 50%; left: 50%; width: 176px; height: 176px; border-radius: 28px; background: linear-gradient(135deg, #2D1B4E 0%, #1A1035 100%); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; box-shadow: 0 20px 45px rgba(139, 92, 246, 0.25); transform: translate(-50%, -50%) translate(var(--tx), var(--ty)); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; cursor: default; } .tech-card:hover { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.08) !important; border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 28px 55px rgba(139, 92, 246, 0.4); z-index: 99 !important; } .tech-card__icon { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: 0.45; transition: opacity 0.35s ease; } .tech-card:hover .tech-card__icon { opacity: 1; } .tech-card__name { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); transition: color 0.35s ease; } .tech-card:hover .tech-card__name { color: #fff; } .tech-card--1 { --tx: -96px; --ty: -96px; z-index: 10; opacity: 0.88; } .tech-card--2 { --tx: 144px; --ty: -144px; z-index: 40; opacity: 0.90; } .tech-card--3 { --tx: -48px; --ty: -16px; z-index: 20; opacity: 0.92; } .tech-card--4 { --tx: 16px; --ty: 48px; z-index: 30; opacity: 0.95; } .tech-card--5 { --tx: 80px; --ty: -48px; z-index: 35; opacity: 0.98; } .tech-card--6 { --tx: -192px; --ty: 80px; z-index: 50; opacity: 1.0; } @media (max-width: 640px) { .tech-stack-column { height: 380px; } .tech-stack-container { width: 320px; height: 320px; } .tech-card { width: 130px; height: 130px; border-radius: 20px; } .tech-card__icon { height: 36px; } .tech-card--1 { --tx: -67px; --ty: -67px; } .tech-card--2 { --tx: 100px; --ty: -100px; } .tech-card--3 { --tx: -33px; --ty: -11px; } .tech-card--4 { --tx: 11px; --ty: 33px; } .tech-card--5 { --tx: 56px; --ty: -33px; } .tech-card--6 { --tx: -134px; --ty: 56px; } } html:not(.light-theme) .tech-section { background: transparent !important; } html:not(.light-theme) .tech-heading { color: #ffffff !important; } html:not(.light-theme) .tech-body { color: rgba(255, 255, 255, 0.6) !important; } html:not(.light-theme) .tech-pill { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.light-theme) .tech-pill:hover { background: rgba(255, 255, 255, 0.12) !important; } html:not(.light-theme) .tech-dot-texture { background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important; } html.light-theme .tech-section { background: transparent !important; } html.light-theme .tech-eyebrow { color: #6D5EF8 !important; text-transform: uppercase !important; letter-spacing: .12em !important; font-weight: 600 !important; } html.light-theme .tech-heading { color: #202343 !important; } html.light-theme .tech-heading span { background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html.light-theme .tech-body { color: #7F819C !important; } html.light-theme .tech-pill { background: #ECE8FF !important; color: #6D5EF8 !important; border: 1px solid rgba(109, 94, 248, 0.12) !important; } html.light-theme .tech-pill:hover { background: #6D5EF8 !important; color: #ffffff !important; } html.light-theme .tech-dot-texture { background-image: radial-gradient(rgba(109, 40, 217, 0.04) 1px, transparent 1px) !important; } html.light-theme .tech-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(246, 243, 255, 0.92) 100%) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(124, 99, 255, 0.12) !important; box-shadow: 0 8px 20px rgba(97, 76, 220, 0.08), 0 25px 60px rgba(97, 76, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } html.light-theme .tech-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at top, rgba(122, 96, 255, 0.18), transparent 70%) !important; opacity: 0; transition: 0.4s; pointer-events: none; } html.light-theme .tech-card:hover::before { opacity: 1 !important; } html.light-theme .tech-card:hover { background: #ffffff !important; border: 1px solid rgba(124, 99, 255, 0.18) !important; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.08) !important; box-shadow: 0 25px 70px rgba(92, 82, 230, 0.18), 0 12px 35px rgba(92, 82, 230, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important; } html.light-theme .tech-card__icon { filter: brightness(0) !important; opacity: 0.55 !important; } html.light-theme .tech-card:hover .tech-card__icon { opacity: 1 !important; } html.light-theme .tech-card__name { color: #6B6E8D !important; } html.light-theme .tech-card:hover .tech-card__name { color: #202343 !important; } .svc-section { padding: 6rem 0 7rem; position: relative; overflow: visible; } .svc-outer-card { background: rgba(18, 14, 30, 0.78); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(28px); padding: 2.5rem 2.5rem 2.5rem; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset; } .svc-card-header { text-align: center; padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .svc-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #a78bfa; margin-bottom: 1rem; } .svc-eyebrow::before, .svc-eyebrow::after { content: ''; display: block; width: 1.5rem; height: 1px; background: currentColor; opacity: 0.5; } .svc-display-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: #ffffff; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.75rem; } .svc-display-heading em { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px rgba(167, 139, 250, 0.7); } .svc-display-sub { font-size: 0.9rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); max-width: 36rem; margin: 0 auto; line-height: 1.65; } .svc-plan-hero { display: grid; grid-template-columns: 55% 45%; min-height: 220px; border-radius: 20px; overflow: hidden; text-decoration: none; position: relative; margin-bottom: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), box-shadow 0.4s ease; } .svc-plan-hero:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 28px 60px rgba(130, 99, 200, 0.2); } .svc-plan-hero__left { padding: 2rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0; position: relative; z-index: 2; } .svc-plan-hero__label { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin: 0 0 0.6rem; } .svc-plan-hero__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 1.25rem; } .svc-plan-hero__title em { font-style: italic; color: #c4b5fd; } .svc-plan-hero__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .svc-plan-hero__bullets li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); } .svc-bullet-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(167, 139, 250, 0.8); flex-shrink: 0; } .svc-plan-hero__art { position: relative; overflow: hidden; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 35%, #0ea5e9 70%, #f472b6 100%); } .svc-art-ribbon { position: absolute; border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; mix-blend-mode: screen; pointer-events: none; } .svc-art-ribbon--1 { width: 130%; height: 130%; top: -25%; left: -15%; background: linear-gradient(135deg, rgba(244, 114, 182, 0.7) 0%, rgba(139, 92, 246, 0.5) 50%, rgba(14, 165, 233, 0.6) 100%); animation: ribbonDrift 7s ease-in-out infinite alternate; } .svc-art-ribbon--2 { width: 110%; height: 110%; top: 10%; left: 5%; background: linear-gradient(225deg, rgba(251, 191, 36, 0.55) 0%, rgba(239, 68, 68, 0.5) 40%, rgba(109, 40, 217, 0.4) 100%); border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; animation: ribbonDrift 9s ease-in-out infinite alternate-reverse; } .svc-art-ribbon--3 { width: 90%; height: 90%; bottom: -10%; right: -10%; background: linear-gradient(45deg, rgba(16, 185, 129, 0.4) 0%, rgba(59, 130, 246, 0.6) 60%); border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; animation: ribbonDrift 11s ease-in-out infinite alternate; } .svc-art-ribbon--4 { width: 70%; height: 80%; top: 20%; left: 20%; background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 70%); border-radius: 50%; filter: blur(4px); } .svc-art-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 60%); } @keyframes ribbonDrift { from { transform: rotate(-8deg) scale(1) translate(0, 0); } to { transform: rotate(8deg) scale(1.1) translate(4%, 3%); } } .svc-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .svc-feat-card { border-radius: 18px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; position: relative; transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s ease; min-height: 195px; } .svc-feat-card:hover { transform: translateY(-4px) scale(1.025); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } .svc-feat-card__art { flex: 1; position: relative; overflow: hidden; min-height: 120px; } .svc-feat-card__caption { padding: 0.7rem 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 100%); } .svc-feat-card__caption strong { font-size: 0.72rem; font-weight: 800; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.01em; display: block; } .svc-feat-card__caption span { font-size: 0.62rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.45; display: block; } .svc-feat-card--app .svc-feat-card__art { background: linear-gradient(140deg, #ffb3ba 0%, #ff7096 40%, #e8305a 100%); } .svc-drop { position: absolute; border-radius: 50%; pointer-events: none; } .svc-drop--1 { width: 85px; height: 85px; top: 18px; left: 22px; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 150, 170, 0.55) 45%, rgba(220, 30, 70, 0.2) 100%); box-shadow: inset -8px -8px 22px rgba(180, 20, 50, 0.22), 0 12px 32px rgba(232, 48, 90, 0.4); animation: dropFloat 4s ease-in-out infinite alternate; } .svc-drop--2 { width: 52px; height: 52px; top: 12px; right: 25px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 130, 155, 0.5) 50%, rgba(220, 30, 70, 0.25) 100%); box-shadow: inset -5px -5px 12px rgba(180, 20, 50, 0.18), 0 8px 22px rgba(255, 112, 150, 0.35); animation: dropFloat 5.5s ease-in-out infinite alternate-reverse; } .svc-drop--3 { width: 28px; height: 28px; bottom: 25px; right: 48px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 155, 175, 0.55)); box-shadow: 0 5px 14px rgba(232, 48, 90, 0.3); animation: dropFloat 3.5s ease-in-out infinite alternate; } @keyframes dropFloat { from { transform: translateY(0); } to { transform: translateY(-9px); } } .svc-feat-card--mkt .svc-feat-card__art { background: linear-gradient(140deg, #f0e8ff 0%, #c4b5fd 50%, #9d7df8 100%); } .svc-bubble { position: absolute; border-radius: 50%; pointer-events: none; } .svc-bubble--lg { width: 78px; height: 78px; top: 50%; left: 50%; transform: translate(-50%, -55%); background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.96) 0%, rgba(196, 181, 253, 0.65) 45%, rgba(109, 40, 217, 0.3) 100%); box-shadow: inset -8px -8px 20px rgba(109, 40, 217, 0.18), 0 14px 40px rgba(139, 92, 246, 0.5); animation: bubblePulse 4s ease-in-out infinite; } .svc-bubble--sm { width: 36px; height: 36px; bottom: 30px; right: 30px; background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.9), rgba(196, 181, 253, 0.5)); box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35); animation: bubblePulse 6s ease-in-out infinite reverse; } .svc-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); border-radius: 50%; border: 1.5px solid rgba(139, 92, 246, 0.3); pointer-events: none; animation: rippleGrow 3s ease-out infinite; } .svc-ripple--1 { width: 105px; height: 105px; animation-delay: 0s; } .svc-ripple--2 { width: 140px; height: 140px; animation-delay: 0.8s; } @keyframes rippleGrow { 0% { transform: translate(-50%, -55%) scale(0.8); opacity: 0.5; } 100% { transform: translate(-50%, -55%) scale(1.2); opacity: 0; } } @keyframes bubblePulse { 0%, 100% { transform: translate(-50%, -55%) scale(1); } 50% { transform: translate(-50%, -60%) scale(1.04); } } .svc-feat-card--soft .svc-feat-card__art { background: linear-gradient(140deg, #ecfccb 0%, #a3e635 55%, #65a30d 100%); } .svc-silkwave { position: absolute; width: 220%; height: 90px; left: -60%; border-radius: 40%; pointer-events: none; } .svc-silkwave--1 { bottom: 25px; background: rgba(255, 255, 255, 0.42); animation: silkSway 5s ease-in-out infinite alternate; } .svc-silkwave--2 { bottom: 5px; background: rgba(255, 255, 255, 0.22); animation: silkSway 7s ease-in-out infinite alternate-reverse; } .svc-silkwave--3 { top: 0px; background: rgba(255, 255, 255, 0.12); height: 60px; animation: silkSway 9s ease-in-out infinite alternate; } @keyframes silkSway { from { transform: rotate(-3deg) translateX(0); } to { transform: rotate(3deg) translateX(8px); } } .svc-feat-card--main .svc-feat-card__art { background: linear-gradient(140deg, #dbeafe 0%, #93c5fd 50%, #3b82f6 100%); } .svc-gbubble { position: absolute; border-radius: 50%; pointer-events: none; } .svc-gbubble--1 { width: 72px; height: 72px; top: 18px; left: 22px; background: radial-gradient(circle at 33% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(147, 197, 253, 0.6) 45%, rgba(37, 99, 235, 0.25) 100%); box-shadow: inset -7px -7px 20px rgba(30, 80, 200, 0.2), 0 12px 30px rgba(59, 130, 246, 0.4); animation: dropFloat 4.5s ease-in-out infinite alternate; } .svc-gbubble--2 { width: 46px; height: 46px; top: 14px; right: 24px; background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.88) 0%, rgba(96, 165, 250, 0.55) 50%, rgba(37, 99, 235, 0.25) 100%); box-shadow: inset -5px -5px 12px rgba(30, 64, 175, 0.18), 0 8px 20px rgba(96, 165, 250, 0.38); animation: dropFloat 6s ease-in-out infinite alternate-reverse; } .svc-gbubble--3 { width: 30px; height: 30px; bottom: 22px; right: 22px; background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.88), rgba(147, 197, 253, 0.5)); box-shadow: 0 5px 14px rgba(59, 130, 246, 0.3); animation: dropFloat 3s ease-in-out infinite alternate; } .svc-gbubble--4 { width: 20px; height: 20px; bottom: 35px; left: 60px; background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.85), rgba(96, 165, 250, 0.45)); box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25); animation: dropFloat 5s ease-in-out infinite alternate-reverse; } @media (max-width: 900px) { .svc-plan-hero { grid-template-columns: 1fr; min-height: auto; } .svc-plan-hero__art { min-height: 180px; } } @media (max-width: 600px) { .svc-outer-card { padding: 1.5rem 1.25rem; } .svc-feat-grid { grid-template-columns: 1fr; } .svc-feat-card { min-height: 180px; } } html.light-theme .svc-outer-card { background: #F5F5F5 !important; border-color: rgba(130, 99, 200, 0.1) !important; box-shadow: 0 20px 60px rgba(130, 99, 200, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; } html.light-theme .svc-card-header { border-bottom-color: rgba(130, 99, 200, 0.1) !important; } html.light-theme .svc-display-heading { color: #1E1033 !important; } html.light-theme .svc-display-heading em { background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; -webkit-text-stroke: 0 !important; } html.light-theme .svc-display-sub { color: rgba(31, 31, 31, 0.5) !important; } html.light-theme .svc-eyebrow { color: #8263C8 !important; } html.light-theme .svc-plan-hero { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(130, 99, 200, 0.12) !important; box-shadow: 0 4px 20px rgba(130, 99, 200, 0.1); } html.light-theme .svc-plan-hero__label { color: #8263C8 !important; } html.light-theme .svc-plan-hero__title { color: #1E1033 !important; } html.light-theme .svc-plan-hero__title em { color: #8263C8 !important; } html.light-theme .svc-plan-hero__bullets li { color: #444 !important; } html.light-theme .svc-bullet-dot { background: #8263C8 !important; } html.light-theme .svc-feat-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } html.light-theme .svc-feat-card__caption strong { color: #1E1033 !important; } html.light-theme .svc-feat-card__caption span { color: rgba(31, 31, 31, 0.65) !important; } html.light-theme .svc-feat-card__caption { background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, transparent 100%) !important; } .svc-plan-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.25rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-decoration: none; backdrop-filter: blur(8px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease; width: fit-content; } .svc-plan-cta:hover { background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.5); color: #fff; transform: translateX(3px); } .svc-plan-cta svg { transition: transform 0.3s ease; } .svc-plan-cta:hover svg { transform: translateX(3px); } .svc-feat-card__art { min-height: 160px !important; height: 160px !important; flex: none !important; } .svc-feat-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0; flex-shrink: 0; background: rgba(0, 0, 0, 0.18); } .svc-feat-label { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); margin: 0 0 0.55rem; font-family: 'Inter', sans-serif; } .svc-feat-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.65rem; color: #fff; } .svc-feat-title em { font-style: italic; } .svc-feat-card--app .svc-feat-title em { color: #fda4af; } .svc-feat-card--mkt .svc-feat-title em { color: #c4b5fd; } .svc-feat-card--soft .svc-feat-title em { color: #bef264; } .svc-feat-card--main .svc-feat-title em { color: #93c5fd; } .svc-feat-desc { font-size: 0.72rem; font-weight: 400; color: rgba(255, 255, 255, 0.45); line-height: 1.6; margin: 0 0 0.75rem; font-family: 'Inter', sans-serif; } .svc-feat-bullets { list-style: none; padding: 0; margin: 0 0 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.75rem; } .svc-feat-bullets li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.68rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; font-family: 'Inter', sans-serif; } .svc-feat-dot { display: block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .svc-feat-dot--app { background: #fb7185; box-shadow: 0 0 6px rgba(251, 113, 133, 0.7); } .svc-feat-dot--mkt { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, 0.7); } .svc-feat-dot--soft { background: #a3e635; box-shadow: 0 0 6px rgba(163, 230, 53, 0.7); } .svc-feat-dot--main { background: #60a5fa; box-shadow: 0 0 6px rgba(96, 165, 250, 0.7); } .svc-feat-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.48rem 1rem; border-radius: 999px; border: 1px solid; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; width: fit-content; backdrop-filter: blur(8px); transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; font-family: 'Inter', sans-serif; } .svc-feat-link span { transition: transform 0.25s ease; display: inline-block; } .svc-feat-link:hover span { transform: translateX(3px); } .svc-feat-link:hover { transform: translateY(-1px); } .svc-feat-link--app { color: #fda4af; border-color: rgba(253, 164, 175, 0.3); background: rgba(253, 164, 175, 0.06); } .svc-feat-link--app:hover { background: rgba(253, 164, 175, 0.14); border-color: rgba(253, 164, 175, 0.6); box-shadow: 0 8px 24px rgba(251, 113, 133, 0.2); } .svc-feat-link--mkt { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); background: rgba(196, 181, 253, 0.06); } .svc-feat-link--mkt:hover { background: rgba(196, 181, 253, 0.14); border-color: rgba(196, 181, 253, 0.6); box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2); } .svc-feat-link--soft { color: #bef264; border-color: rgba(190, 242, 100, 0.3); background: rgba(190, 242, 100, 0.06); } .svc-feat-link--soft:hover { background: rgba(190, 242, 100, 0.14); border-color: rgba(190, 242, 100, 0.6); box-shadow: 0 8px 24px rgba(163, 230, 53, 0.2); } .svc-feat-link--main { color: #93c5fd; border-color: rgba(147, 197, 253, 0.3); background: rgba(147, 197, 253, 0.06); } .svc-feat-link--main:hover { background: rgba(147, 197, 253, 0.14); border-color: rgba(147, 197, 253, 0.6); box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2); } html.light-theme .svc-feat-card__body { background: rgba(255, 255, 255, 0.55) !important; } html.light-theme .svc-feat-label { color: rgba(31, 31, 31, 0.35) !important; } html.light-theme .svc-feat-title { color: #1E1033 !important; } html.light-theme .svc-feat-card--app .svc-feat-title em { color: #e11d48 !important; } html.light-theme .svc-feat-card--mkt .svc-feat-title em { color: #7c3aed !important; } html.light-theme .svc-feat-card--soft .svc-feat-title em { color: #4d7c0f !important; } html.light-theme .svc-feat-card--main .svc-feat-title em { color: #1d4ed8 !important; } html.light-theme .svc-feat-desc { color: rgba(31, 31, 31, 0.55) !important; } html.light-theme .svc-feat-bullets { border-top-color: rgba(0, 0, 0, 0.07) !important; } html.light-theme .svc-feat-bullets li { color: rgba(31, 31, 31, 0.6) !important; } html.light-theme .svc-feat-dot--app { background: #e11d48 !important; box-shadow: 0 0 6px rgba(225, 29, 72, 0.4) !important; } html.light-theme .svc-feat-dot--mkt { background: #7c3aed !important; box-shadow: 0 0 6px rgba(124, 58, 237, 0.4) !important; } html.light-theme .svc-feat-dot--soft { background: #4d7c0f !important; box-shadow: 0 0 6px rgba(77, 124, 15, 0.4) !important; } html.light-theme .svc-feat-dot--main { background: #1d4ed8 !important; box-shadow: 0 0 6px rgba(29, 78, 216, 0.4) !important; } html.light-theme .svc-feat-link--app { color: #e11d48 !important; border-color: rgba(225, 29, 72, 0.3) !important; background: rgba(225, 29, 72, 0.05) !important; } html.light-theme .svc-feat-link--mkt { color: #7c3aed !important; border-color: rgba(124, 58, 237, 0.3) !important; background: rgba(124, 58, 237, 0.05) !important; } html.light-theme .svc-feat-link--soft { color: #4d7c0f !important; border-color: rgba(77, 124, 15, 0.3) !important; background: rgba(77, 124, 15, 0.05) !important; } html.light-theme .svc-feat-link--main { color: #1d4ed8 !important; border-color: rgba(29, 78, 216, 0.3) !important; background: rgba(29, 78, 216, 0.05) !important; } html.light-theme .svc-plan-cta { background: rgba(130, 99, 200, 0.08) !important; border-color: rgba(130, 99, 200, 0.25) !important; color: #8263C8 !important; } html.light-theme .svc-plan-cta:hover { background: rgba(130, 99, 200, 0.15) !important; border-color: #8263C8 !important; color: #6E4DB5 !important; } .tstm-section { padding: 8rem 0 9rem; position: relative; overflow: hidden; background: transparent; } .tstm-deco-leaf { position: absolute; pointer-events: none; z-index: 1; opacity: 0.12; color: #a78bfa; } .tstm-deco-leaf--top-right { top: -20px; right: -20px; } .tstm-deco-leaf--bottom-left { bottom: -20px; left: -20px; } .tstm-watercolor { position: absolute; width: 450px; height: 450px; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 1; opacity: 0.08; } .tstm-watercolor--left { bottom: -150px; left: -150px; background: #dc6e4c; } .tstm-watercolor--right { bottom: -100px; right: -150px; background: #e57c5a; } .tstm-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: #e57c5a; margin-bottom: 1rem; } .tstm-eyebrow::before, .tstm-eyebrow::after { content: ''; display: block; width: 1.2rem; height: 1px; background: currentColor; opacity: 0.5; } .tstm-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; color: #ffffff; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; } .tstm-heading em { font-style: italic; background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: 0; } .tstm-sub { font-size: clamp(0.72rem, 2.5vw, 1.05rem); font-weight: 300; color: rgba(255, 255, 255, 0.45); max-width: 100%; margin: 0 auto; line-height: 1.6; white-space: nowrap !important; letter-spacing: -0.01em; } .tstm-sub-bribe { color: rgba(255, 255, 255, 0.25); font-style: italic; font-size: 0.95rem; } .tstm-carousel-container { position: relative; width: 100%; height: 480px; margin: 2.5rem 0 1.5rem; perspective: 1200px; } .tstm-track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; transform-style: preserve-3d; } .tstm-card { position: absolute; left: 0; right: 0; margin: 0 auto; width: 720px; max-width: calc(100vw - 32px); height: 380px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 2.5rem 3rem; display: grid; grid-template-columns: 58% 42%; gap: 1.5rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); transform-origin: center center; user-select: none; cursor: grab; transform-style: preserve-3d; backface-visibility: hidden; } .tstm-card:active { cursor: grabbing; } .tstm-card__left { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } .tstm-quote-mark { font-family: 'Playfair Display', Georgia, serif; font-size: 4.8rem; line-height: 1; color: rgba(229, 124, 90, 0.25); position: absolute; top: -2.4rem; left: -0.6rem; pointer-events: none; } .tstm-quote-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-style: italic; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 1.25rem; position: relative; z-index: 3; } .tstm-author { margin-bottom: 1.25rem; } .tstm-author__name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #fff; display: block; margin-bottom: 0.15rem; } .tstm-author__role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); } .tstm-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.06); margin-bottom: 1.1rem; } .tstm-stat { font-size: 0.72rem; font-style: italic; color: rgba(255, 255, 255, 0.45); margin: 0 0 1.1rem; } .tstm-cta-link { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; color: #e57c5a; text-decoration: none; display: flex; align-items: center; gap: 0.4rem; transition: gap 0.3s ease; width: fit-content; } .tstm-cta-link:hover { gap: 0.65rem; } .tstm-arrow { display: inline-block; } .tstm-card__right { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; z-index: 2; border-left: 1px solid rgba(255, 255, 255, 0.04); padding-left: 1.5rem; } .tstm-profile { position: relative; display: flex; flex-direction: column; align-items: center; } .tstm-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 1.3rem; color: #fff; border: 2px solid rgba(139, 92, 246, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); overflow: hidden; } .tstm-avatar img { width: 100%; height: 100%; object-fit: contain; background: #ffffff; padding: 6px; border-radius: 50%; } .tstm-avatar--vv { background: linear-gradient(135deg, #a78bfa, #7c3aed); } .tstm-avatar--ja { background: linear-gradient(135deg, #ff7096, #e8305a); } .tstm-avatar--ra { background: linear-gradient(135deg, #a3e635, #65a30d); } .tstm-avatar--aj { background: linear-gradient(135deg, #60a5fa, #2563eb); } .tstm-avatar--pj { background: linear-gradient(135deg, #fbbf24, #d97706); } .tstm-avatar--arj { background: linear-gradient(135deg, #38bdf8, #0369a1); } .tstm-role-badge { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; background: #3f6212; color: #fff; padding: 0.22rem 0.65rem; border-radius: 999px; margin-top: -12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .tstm-proj-card { width: 100%; height: 180px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .tstm-mock-dash { width: 80%; height: 75%; background: #121017; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 10px; } .tstm-mock-header { height: 6px; width: 40%; background: rgba(255, 255, 255, 0.15); border-radius: 3px; margin-bottom: 12px; } .tstm-mock-body { display: flex; flex-direction: column; gap: 8px; } .tstm-mock-bar { height: 8px; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 4px; } .tstm-mock-bar--75 { width: 75%; } .tstm-mock-bar--45 { width: 45%; background: linear-gradient(90deg, #ec4899, #f43f5e); } .tstm-mock-bar--90 { width: 90%; background: linear-gradient(90deg, #10b981, #34d399); } .tstm-mock-web { width: 85%; height: 80%; background: #0f172a; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; display: flex; flex-direction: column; } .tstm-mock-hero-art { flex: 1.2; background: linear-gradient(45deg, #1e1b4b, #311042); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tstm-mock-orb { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #f472b6, transparent 70%); } .tstm-mock-lines { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; } .tstm-mock-line { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; } .tstm-mock-portal { width: 80%; height: 75%; } .tstm-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; } .tstm-mock-tile { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; } .tstm-mock-tile--1 { border-color: rgba(163, 230, 53, 0.3); background: rgba(163, 230, 53, 0.03); } .tstm-mock-tile--2 { border-color: rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.03); } .tstm-mock-bcl { width: 80%; height: 75%; display: flex; flex-direction: column; gap: 12px; } .tstm-mock-pill { height: 12px; width: 60px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } .tstm-mock-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; } .tstm-mock-bar-v { flex: 1; background: linear-gradient(to top, #3b82f6, #60a5fa); border-radius: 4px 4px 0 0; } .tstm-mock-map { width: 85%; height: 80%; background: #111827; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } .tstm-mock-pin { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #ef4444; } .tstm-mock-pin::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #ef4444; } .tstm-mock-road { background: rgba(255, 255, 255, 0.06); position: absolute; } .tstm-mock-road--h { width: 100%; height: 6px; top: 50%; left: 0; } .tstm-mock-road--v { width: 6px; height: 100%; top: 0; left: 45%; } .tstm-mock-store { width: 80%; height: 75%; display: flex; flex-direction: column; justify-content: space-around; } .tstm-mock-shelf { height: 25px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); display: flex; gap: 6px; align-items: flex-end; padding-bottom: 2px; } .tstm-mock-item { width: 12px; border-radius: 2px 2px 0 0; opacity: 0.8; } .tstm-mock-item.bg-rose-400 { height: 16px; } .tstm-mock-item.bg-amber-400 { height: 12px; } .tstm-mock-item.bg-teal-400 { height: 18px; } .tstm-mock-item.bg-blue-400 { height: 14px; } .tstm-mock-item.bg-indigo-400 { height: 16px; } .tstm-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: #ffffff; border: none; display: flex; align-items: center; justify-content: center; color: #2a2725; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 10; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .tstm-nav-btn:hover { transform: translateY(-50%) scale(1.08); background: #e57c5a; color: #fff; } .tstm-nav-btn--prev { left: 40px; } .tstm-nav-btn--next { right: 40px; } @media (max-width: 900px) { .tstm-nav-btn { display: none !important; } } .tstm-dots-container { display: flex; justify-content: center; width: 100%; } .tstm-dots { display: flex; gap: 8px; } .tstm-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); border: none; padding: 0; cursor: pointer; transition: width 0.3s cubic-bezier(.16, 1, .3, 1), background-color 0.3s ease; } .tstm-dot.active { width: 28px; background: #e57c5a; } @media (max-width: 780px) { .tstm-carousel-container { height: auto; min-height: 480px; } .tstm-card { grid-template-columns: 1fr; height: auto; padding: 2rem 2rem; gap: 2rem; } .tstm-card__right { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-left: 0; padding-top: 1.5rem; flex-direction: row; justify-content: space-between; align-items: center; } .tstm-proj-card { width: 60%; height: 110px; } .tstm-profile { flex-direction: row; gap: 12px; } .tstm-role-badge { margin-top: 0; } } @media (max-width: 480px) { .tstm-card__right { flex-direction: column; gap: 1.5rem; align-items: center; } .tstm-proj-card { width: 100%; } } html.light-theme .tstm-section { background: transparent !important; } html.light-theme .tstm-deco-leaf { color: #8263C8 !important; opacity: 0.07 !important; } html.light-theme .tstm-watercolor--left { background: #e57c5a !important; } html.light-theme .tstm-watercolor--right { background: #f0a285 !important; } html.light-theme .tstm-eyebrow { color: #dc6e4c !important; } html.light-theme .tstm-heading { color: #2a2725 !important; } html.light-theme .tstm-heading em { background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; -webkit-text-stroke: 0 !important; } html.light-theme .tstm-sub { color: rgba(42, 39, 37, 0.65) !important; } html.light-theme .tstm-sub-bribe { color: rgba(42, 39, 37, 0.4) !important; } html.light-theme .tstm-card { background: #ffffff !important; border-color: rgba(130, 99, 200, 0.08) !important; box-shadow: 0 24px 50px rgba(130, 99, 200, 0.06); } html.light-theme .tstm-quote-mark { color: rgba(229, 124, 90, 0.16) !important; } html.light-theme .tstm-quote-text { color: #2a2725 !important; } html.light-theme .tstm-author__name { color: #2a2725 !important; } html.light-theme .tstm-author__role { color: rgba(42, 39, 37, 0.5) !important; } html.light-theme .tstm-divider { background: rgba(0, 0, 0, 0.06) !important; } html.light-theme .tstm-stat { color: rgba(42, 39, 37, 0.55) !important; } html.light-theme .tstm-cta-link { color: #dc6e4c !important; } html.light-theme .tstm-avatar { border-color: rgba(0, 0, 0, 0.05) !important; } html.light-theme .tstm-role-badge { background: #4d7c0f !important; } html.light-theme .tstm-proj-card { background: #FAF9F6 !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-theme .tstm-mock-dash { background: #f1ede4 !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.light-theme .tstm-mock-header { background: rgba(0, 0, 0, 0.12) !important; } html.light-theme .tstm-mock-line { background: rgba(0, 0, 0, 0.1) !important; } html.light-theme .tstm-mock-web { background: #f1ede4 !important; border-color: rgba(0, 0, 0, 0.07) !important; } html.light-theme .tstm-nav-btn { background: #ffffff !important; color: #2a2725 !important; box-shadow: 0 10px 24px rgba(130, 99, 200, 0.12) !important; } html.light-theme .tstm-nav-btn:hover { background: #dc6e4c !important; color: #fff !important; } html.light-theme .tstm-dot { background: rgba(130, 99, 200, 0.18) !important; } html.light-theme .tstm-dot.active { background: #dc6e4c !important; } .faq-section { position: relative; padding: 6.5rem 0; overflow: hidden; background: transparent; } .faq-bg-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 70%); pointer-events: none; z-index: -1; } .faq-header { text-align: center; margin-bottom: 4.5rem; } .faq-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #c084fc; margin-bottom: 1.15rem; } .faq-eyebrow::before, .faq-eyebrow::after { content: ''; display: block; width: 1.2rem; height: 1px; background: currentColor; opacity: 0.5; } .faq-heading { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.04em; color: #ffffff; margin-bottom: 1.5rem; } .faq-heading span { display: inline-block; background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .faq-desc { font-size: 1.05rem; font-weight: 300; color: #9ca3af; max-width: 38rem; margin: 0 auto; line-height: 1.65; } .faq-accordion { display: flex; flex-direction: column; gap: 1.25rem; position: relative; z-index: 2; } .faq-item { position: relative; border-radius: 20px; background: rgba(15, 15, 26, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .faq-item:hover { transform: translateY(-1px); } .faq-item--purple:hover { border-color: rgba(168, 85, 247, 0.25); box-shadow: 0 12px 30px rgba(168, 85, 247, 0.04); } .faq-item--blue:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 12px 30px rgba(59, 130, 246, 0.04); } .faq-trigger { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; cursor: pointer; list-style: none; outline: none; user-select: none; } .faq-trigger::-webkit-details-marker { display: none; } .faq-question { font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700; color: #ffffff; transition: color 0.3s ease; } .faq-trigger:hover .faq-question { color: #c084fc; } .faq-item--blue .faq-trigger:hover .faq-question { color: #93c5fd; } .faq-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease; flex-shrink: 0; margin-left: 1.2rem; } .faq-trigger:hover .faq-icon { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } .faq-body { padding: 0 2rem 1.75rem; animation: faq-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes faq-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .faq-divider { width: 100%; height: 1px; margin-bottom: 1.25rem; } .faq-divider--purple { background: linear-gradient(90deg, rgba(168, 85, 247, 0.25) 0%, transparent 100%); } .faq-divider--blue { background: linear-gradient(90deg, rgba(59, 130, 246, 0.25) 0%, transparent 100%); } .faq-answer { font-size: 0.95rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.65); } details[open] .faq-icon { transform: rotate(180deg); background: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.3) !important; color: #c084fc !important; } details.faq-item--blue[open] .faq-icon { background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #93c5fd !important; } details[open] .faq-question { color: #c084fc !important; } details.faq-item--blue[open] .faq-question { color: #93c5fd !important; } html.light-theme .faq-heading { color: #1F1F1F !important; } html.light-theme .faq-desc { color: rgba(31, 31, 31, 0.65) !important; } html.light-theme .faq-item { background: #ffffff !important; border-color: #EEEAF7 !important; box-shadow: 0 8px 30px rgba(130, 99, 200, 0.04) !important; } html.light-theme .faq-item:hover { border-color: rgba(130, 99, 200, 0.2) !important; box-shadow: 0 12px 35px rgba(130, 99, 200, 0.08) !important; } html.light-theme .faq-question { color: #1F1F1F !important; } html.light-theme .faq-answer { color: rgba(31, 31, 31, 0.7) !important; } html.light-theme .faq-icon { background: #FAF9F6 !important; border-color: #EEEAF7 !important; color: rgba(31, 31, 31, 0.4) !important; } html.light-theme .faq-trigger:hover .faq-icon { color: #8263C8 !important; border-color: rgba(130, 99, 200, 0.3) !important; } html.light-theme .faq-trigger:hover .faq-question { color: #8263C8 !important; } html.light-theme .faq-divider--purple { background: linear-gradient(90deg, rgba(130, 99, 200, 0.15) 0%, transparent 100%) !important; } html.light-theme .faq-divider--blue { background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%) !important; } html.light-theme details[open] .faq-icon { background: rgba(130, 99, 200, 0.08) !important; border-color: rgba(130, 99, 200, 0.25) !important; color: #8263C8 !important; } html.light-theme details[open] .faq-question { color: #8263C8 !important; } html.light-theme details.faq-item--blue[open] .faq-question { color: #2563eb !important; } .faq-item>button { padding-left: 2rem !important; padding-right: 2rem !important; transition: background 0.3s ease; } .faq-item>button:hover { background: rgba(255, 255, 255, 0.02); } html.light-theme .faq-item>button:hover { background: rgba(130, 99, 200, 0.03) !important; } .faq-item>div>p { padding-left: 2rem !important; padding-right: 2rem !important; padding-top: 0.5rem !important; } .service-cta-card { max-w-4xl mx-auto; border-radius: 28px !important; background: linear-gradient(135deg, rgba(20, 20, 35, 0.82) 0%, rgba(10, 10, 20, 0.96) 100%) !important; border: 1px solid rgba(139, 92, 246, 0.22) !important; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important; transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease !important; } .service-cta-card:hover { border-color: rgba(139, 92, 246, 0.5) !important; box-shadow: 0 45px 95px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transform: translateY(-3px); } .service-cta-card h2 { font-family: 'Outfit', sans-serif !important; font-weight: 900 !important; letter-spacing: -0.025em !important; } .service-cta-card h2 span { font-family: 'Playfair Display', serif !important; font-weight: 700 !important; font-style: italic !important; text-transform: none !important; } .service-cta-card p { color: rgba(224, 224, 255, 0.75) !important; font-size: 1.05rem !important; font-weight: 400 !important; line-height: 1.75 !important; max-w: 32rem; margin-left: auto; margin-right: auto; } .service-cta-card p span { color: #a855f7 !important; font-weight: 600 !important; } html.light-theme .service-cta-card { background: rgba(255, 255, 255, 0.96) !important; border-color: rgba(124, 58, 237, 0.22) !important; box-shadow: 0 30px 65px rgba(124, 58, 237, 0.06) !important; } html.light-theme .service-cta-card:hover { border-color: rgba(124, 58, 237, 0.5) !important; box-shadow: 0 40px 85px rgba(124, 58, 237, 0.12) !important; } html.light-theme .service-cta-card p { color: #334155 !important; } html.light-theme .service-cta-card p span { color: #7c3aed !important; } html.light-theme .service-cta-card a.bg-white, html.light-theme .service-cta-card a[class*="bg-"] { background-color: #7c3aed !important; color: #ffffff !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25) !important; } html.light-theme .service-cta-card a.bg-white:hover, html.light-theme .service-cta-card a[class*="bg-"]:hover { background-color: #6d28d9 !important; box-shadow: 0 12px 28px rgba(124, 58, 237, 0.4) !important; } html.light-theme .service-cta-card a:not([class*="bg-"]) { color: #334155 !important; } html.light-theme .service-cta-card a:not([class*="bg-"]):hover { color: #7c3aed !important; } .iso-card-panel { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #ffffff; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); } .iso-graphic-panel { position: relative; width: 100%; height: 340px; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); overflow: hidden; } .iso-floating-pill { position: absolute; top: 24px; left: 24px; background: #ffffff; padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; color: #0369a1; box-shadow: 0 6px 20px rgba(3, 105, 161, 0.12); z-index: 10; } .iso-scene { position: relative; width: 100%; height: 100%; } .iso-road { position: absolute; width: 2px; height: 480px; background: rgba(255, 255, 255, 0.55); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(55deg) skewX(25deg); box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); } .iso-fork-node { position: absolute; top: 36%; left: 36%; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 10px #ffffff; transform: translate(-50%, -50%); z-index: 4; } .iso-ambient-icon { position: absolute; font-size: 1rem; opacity: 0.25; pointer-events: none; user-select: none; z-index: 2; } .iso-ambient-icon--1 { top: 28%; left: 65%; } .iso-ambient-icon--2 { top: 72%; left: 32%; } .iso-fixed-btn { position: absolute; top: 58%; left: 55%; transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg); background: #ffffff; color: #0369a1; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.55rem 1.25rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(3, 105, 161, 0.15); white-space: nowrap; pointer-events: none; z-index: 6; } .iso-anchored-card { position: absolute; top: 22%; left: 18%; width: 120px; height: 65px; background: #ffffff; border: 1.5px solid #a855f7; border-radius: 14px; padding: 10px; box-shadow: 0 14px 35px rgba(168, 85, 247, 0.22); display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-35deg) skew(-20deg); z-index: 5; pointer-events: none; } .iso-badge { position: absolute; top: -8px; left: -8px; width: 18px; height: 18px; border-radius: 50%; background: #f43f5e; display: flex; align-items: center; justify-content: center; font-size: 9px; box-shadow: 0 4px 10px rgba(244, 63, 94, 0.4); } .iso-card-title-text { font-size: 0.62rem; font-weight: 800; color: #0f172a; } .iso-card-graph { display: flex; flex-direction: column; gap: 4px; } .iso-card-graph-bar { height: 3px; border-radius: 1.5px; background: #c084fc; } .iso-doc { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; } .iso-doc-line { height: 3px; border-radius: 1.5px; background: rgba(3, 105, 161, 0.15); width: 85%; } .iso-doc-line--short { width: 45%; background: rgba(3, 105, 161, 0.35); } .iso-scroll-card { position: absolute; width: 76px; height: 48px; background: #ffffff; border-radius: 8px; padding: 8px; box-shadow: 0 8px 20px rgba(3, 105, 161, 0.08); pointer-events: none; z-index: 3; opacity: 0; } @keyframes isoConveyorScroll { 0% { top: 95%; left: 80%; transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg) scale(1.15); opacity: 0; } 12% { opacity: 0.95; } 88% { opacity: 0.95; } 100% { top: 15%; left: 20%; transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg) scale(0.48); opacity: 0; } } .iso-scroll-card--1 { animation: isoConveyorScroll 5s linear infinite; animation-delay: 0s; } .iso-scroll-card--2 { animation: isoConveyorScroll 5s linear infinite; animation-delay: 1.66s; } .iso-scroll-card--3 { animation: isoConveyorScroll 5s linear infinite; animation-delay: 3.33s; } .iso-copy-panel { padding: 2.25rem 2rem; background: #ffffff; border-top: 1px solid #e2e8f0; text-align: left; } .iso-headline { font-size: 1.25rem; font-weight: 800; line-height: 1.4; color: #0f172a; margin-bottom: 0.5rem; } .iso-subtext { font-size: 0.92rem; font-weight: 400; color: #64748b; } html:not(.light-theme) .iso-card-panel { background: #0f0f1a; border-color: rgba(255, 255, 255, 0.05); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); } html:not(.light-theme) .iso-copy-panel { background: #0f0f1a; border-top-color: rgba(255, 255, 255, 0.06); } html:not(.light-theme) .iso-headline { color: #ffffff; } html:not(.light-theme) .iso-subtext { color: #94a3b8; } html:not(.light-theme) .iso-floating-pill { background: #1e1b4b; color: #a5f3fc; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } html:not(.light-theme) .iso-fixed-btn { background: #1e1b4b; color: #38bdf8; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } html:not(.light-theme) .iso-anchored-card { background: #1e1b4b; border-color: #a855f7; box-shadow: 0 14px 35px rgba(168, 85, 247, 0.35); } html:not(.light-theme) .iso-card-title-text { color: #ffffff; } html:not(.light-theme) .iso-scroll-card { background: #1e1b4b; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } html:not(.light-theme) .iso-doc-line { background: rgba(56, 189, 248, 0.15); } html:not(.light-theme) .iso-doc-line--short { background: rgba(56, 189, 248, 0.35); } html:not(.light-theme) .iso-graphic-panel { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); } html:not(.light-theme) .iso-road { background: rgba(255, 255, 255, 0.15); } footer.premium-footer { position: relative; margin-top: 5rem; padding-top: 6rem; padding-bottom: 3.5rem; overflow: hidden; background: linear-gradient(180deg, #2A1858 0%, #150C2E 100%) !important; border-top: 1px solid #3b2575 !important; } footer.premium-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.015; mix-blend-mode: overlay; } .footer-glow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 2; } .footer-logo-link { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; } .footer-logo-link:hover .footer-logo-icon { transform: scale(1.08) rotate(5deg); filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.6)); } .footer-logo-icon { width: 32px; height: 32px; color: #ffffff; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; } .footer-wordmark { font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 900; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase; color: #ffffff; } .footer-tagline { font-size: 0.88rem; font-weight: 300; line-height: 1.65; color: #9E8FC4; max-width: 18.5rem; } .footer-status-pill { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9E8FC4; background: rgba(139, 92, 246, 0.08); padding: 0.35rem 0.75rem; border-radius: 6px; border: 1px solid rgba(139, 92, 246, 0.15); margin-top: 1rem; } .footer-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #8B5CF6; box-shadow: 0 0 8px #8B5CF6; } .footer-mail-link { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #a78bfa; text-decoration: none; transition: color 0.3s ease; } .footer-mail-link span { display: inline-block; width: 28px; height: 1px; background: rgba(167, 139, 250, 0.35); margin-right: 0.75rem; transition: width 0.3s ease, background-color 0.3s ease; } .footer-mail-link:hover { color: #ffffff; } .footer-mail-link:hover span { width: 42px; background: #ffffff; } .footer-column-header { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(167, 139, 250, 0.72) !important; display: flex; align-items: center; margin-bottom: 2rem; } .footer-column-dot { width: 5px; height: 5px; border-radius: 50%; background: #8B5CF6; box-shadow: 0 0 6px #8B5CF6; margin-right: 0.75rem; } .footer-link-item { margin-bottom: 1.15rem; } .footer-link { font-size: 0.85rem; font-weight: 500; color: #ffffff !important; text-decoration: none !important; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; opacity: 0.85; } .footer-link:hover { color: #60A5FA !important; transform: translateX(4px); opacity: 1; } .footer-social-link { display: flex; align-items: center; text-decoration: none !important; transition: opacity 0.3s ease; } .footer-social-icon-wrapper { width: 34px; height: 34px; border-radius: 10px; background: rgba(139, 92, 246, 0.14) !important; border: 1px solid rgba(139, 92, 246, 0.22) !important; display: flex; align-items: center; justify-content: center; color: #ffffff; margin-right: 0.85rem; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .footer-social-link:hover .footer-social-icon-wrapper { transform: scale(1.08) translateY(-1px); background: rgba(139, 92, 246, 0.28) !important; border-color: rgba(139, 92, 246, 0.8) !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); } .footer-social-label { font-size: 0.85rem; font-weight: 500; color: #ffffff; text-transform: uppercase; letter-spacing: -0.01em; opacity: 0.85; transition: color 0.3s ease, opacity 0.3s ease; } .footer-social-link:hover .footer-social-label { color: #60A5FA; opacity: 1; } .footer-bottom-bar { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; } @media (min-width: 768px) { .footer-bottom-bar { flex-direction: row; gap: 0; } } .footer-meta-left { display: flex; align-items: center; } .footer-meta-tag { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #9E8FC4; border-left: 2px solid rgba(139, 92, 246, 0.3); padding-left: 0.75rem; font-style: italic; } .footer-meta-clock { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.68rem; font-weight: 700; color: #a78bfa; background: rgba(255, 255, 255, 0.04); padding: 0.25rem 0.75rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.05); margin-left: 1rem; } .footer-meta-right { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #9E8FC4; text-align: center; } @media (min-width: 768px) { .footer-meta-right { text-align: right; } } .footer-meta-heart { color: #f43f5e; animation: pulse 1.5s infinite; display: inline-block; margin: 0 0.15rem; } .footer-meta-secure { color: #10b981; opacity: 0.85; margin-left: 0.5rem; } html.light-theme footer.premium-footer { background: linear-gradient(180deg, #23124d 0%, #0d0721 100%) !important; border-top: 1px solid #321c66 !important; } .btn-glass { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; display: inline-flex; align-items: center; justify-content: center; text-align: center; } .btn-glass:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(168, 85, 247, 0.4) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25) !important; } html.light-theme .btn-glass { background: #0b0b17 !important; border: 1.5px solid rgba(139, 92, 246, 0.4) !important; color: #ffffff !important; box-shadow: 0 8px 24px rgba(11, 11, 23, 0.25) !important; } html.light-theme .btn-glass:hover { background: #6D5EF8 !important; border-color: #6D5EF8 !important; box-shadow: 0 12px 28px rgba(109, 94, 248, 0.35) !important; color: #ffffff !important; } html.light-theme #portal-trigger { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important; } html.light-theme #portal-trigger:hover { background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important; box-shadow: 0 12px 28px rgba(124, 58, 237, 0.35) !important; color: #ffffff !important; } html.light-theme button[onclick*="submitConfigQuote"], html.light-theme .view-section button.bg-purple-600 { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important; } html.light-theme button[onclick*="submitConfigQuote"]:hover, html.light-theme .view-section button.bg-purple-600:hover { background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important; box-shadow: 0 12px 28px rgba(124, 58, 237, 0.35) !important; color: #ffffff !important; } html.light-theme a.border-white\/10, html.light-theme button.border-white\/10, html.light-theme a.border-white\/30, html.light-theme button.border-white\/30 { border-color: #1e1033 !important; color: #1e1033 !important; } html.light-theme a.border-white\/10:hover, html.light-theme button.border-white\/10:hover, html.light-theme a.border-white\/30:hover, html.light-theme button.border-white\/30:hover { background-color: rgba(109, 94, 248, 0.08) !important; border-color: #6D5EF8 !important; color: #6D5EF8 !important; } html.light-theme .inline-flex.items-center.rounded-full, html.light-theme .inline-flex.items-center.rounded-sm, html.light-theme [class*="bg-white/5"].rounded-full, html.light-theme [class*="bg-white/10"].rounded-full, html.light-theme [class*="bg-white/5"].rounded-sm, html.light-theme [class*="bg-white/10"].rounded-sm, html.light-theme [class*="bg-white/"][class*="rounded-"] { background-color: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; color: #1e1033 !important; } html.light-theme .inline-flex.items-center.rounded-full *, html.light-theme .inline-flex.items-center.rounded-sm *, html.light-theme [class*="bg-white/5"].rounded-full *, html.light-theme [class*="bg-white/10"].rounded-full *, html.light-theme [class*="bg-white/5"].rounded-sm *, html.light-theme [class*="bg-white/10"].rounded-sm * { color: #1e1033 !important; } html.light-theme [class*="bg-red-500/10"], html.light-theme [class*="bg-red-500/20"]:not(button) { background-color: rgba(239, 68, 68, 0.12) !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; color: #b91c1c !important; } html.light-theme [class*="bg-red-500/10"] *, html.light-theme [class*="bg-red-500/20"]:not(button) * { color: #b91c1c !important; } html.light-theme [class*="bg-blue-500/10"], html.light-theme [class*="bg-blue-500/20"]:not(button) { background-color: rgba(59, 130, 246, 0.12) !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; color: #1d4ed8 !important; } html.light-theme [class*="bg-blue-500/10"] *, html.light-theme [class*="bg-blue-500/20"]:not(button) * { color: #1d4ed8 !important; } html.light-theme [class*="bg-purple-500/10"], html.light-theme [class*="bg-purple-500/20"]:not(button) { background-color: rgba(168, 85, 247, 0.12) !important; border: 1px solid rgba(168, 85, 247, 0.25) !important; color: #6d28d9 !important; } html.light-theme [class*="bg-purple-500/10"] *, html.light-theme [class*="bg-purple-500/20"]:not(button) * { color: #6d28d9 !important; } html.light-theme [class*="bg-amber-500/10"], html.light-theme [class*="bg-amber-500/20"]:not(button) { background-color: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; color: #b45309 !important; } html.light-theme [class*="bg-amber-500/10"] *, html.light-theme [class*="bg-amber-500/20"]:not(button) * { color: #b45309 !important; } html.light-theme [class*="bg-teal-500/10"], html.light-theme [class*="bg-teal-500/20"]:not(button) { background-color: rgba(20, 184, 166, 0.12) !important; border: 1px solid rgba(20, 184, 166, 0.25) !important; color: #0f766e !important; } html.light-theme [class*="bg-teal-500/10"] *, html.light-theme [class*="bg-teal-500/20"]:not(button) * { color: #0f766e !important; } html.light-theme .text-red-400, html.light-theme [class*="text-red-400"] { color: #dc2626 !important; } html.light-theme .text-amber-400, html.light-theme [class*="text-amber-400"] { color: #b45309 !important; } html.light-theme .text-blue-400, html.light-theme [class*="text-blue-400"] { color: #2563eb !important; } html.light-theme .text-emerald-400, html.light-theme [class*="text-emerald-400"] { color: #059669 !important; } html.light-theme .text-purple-400, html.light-theme [class*="text-purple-400"] { color: #7c3aed !important; } .glass-header nav a, .glass-header nav button { position: relative; } .glass-header nav a.nav-active::after, .glass-header nav button.nav-active::after { content: "" !important; position: absolute !important; bottom: 2px !important; left: 15% !important; width: 70% !important; height: 2.5px !important; background: linear-gradient(90deg, #a855f7 0%, #6366f1 100%) !important; border-radius: 99px !important; box-shadow: 0 1px 8px rgba(168, 85, 247, 0.45) !important; } html:not(.light-theme) .glass-header nav a.nav-active, html:not(.light-theme) .glass-header nav button.nav-active span { color: #ffffff !important; } html.light-theme .glass-header nav a.nav-active, html.light-theme .glass-header nav button.nav-active span { color: #7c3aed !important; } html.light-theme .value-card--innovation .value-card-body { background: linear-gradient(180deg, #4C1D95 0%, #7C3AED 100%) !important; } html.light-theme .value-card--collaboration .value-card-body { background: linear-gradient(180deg, #3730A3 0%, #6366F1 100%) !important; } html.light-theme .value-card--excellence .value-card-body { background: linear-gradient(180deg, #5B21B6 0%, #A855F7 100%) !important; } html.light-theme .value-card--integrity .value-card-body { background: linear-gradient(180deg, #1E3A8A 0%, #3B82F6 100%) !important; } html:not(.light-theme) .value-card--innovation .value-card-body { background: linear-gradient(180deg, #32165f 0%, #6731cd 100%) !important; } html:not(.light-theme) .value-card--collaboration .value-card-body { background: linear-gradient(180deg, #2b267e 0%, #4e52ec 100%) !important; } html:not(.light-theme) .value-card--excellence .value-card-body { background: linear-gradient(180deg, #421d80 0%, #9642ec 100%) !important; } html:not(.light-theme) .value-card--integrity .value-card-body { background: linear-gradient(180deg, #182d62 0%, #2c6ee3 100%) !important; } html.light-theme .value-card--innovation:hover .value-card-body { border-color: rgba(124, 58, 237, 0.5) !important; } html.light-theme .value-card--collaboration:hover .value-card-body { border-color: rgba(99, 102, 241, 0.5) !important; } html.light-theme .value-card--excellence:hover .value-card-body { border-color: rgba(168, 85, 247, 0.5) !important; } html.light-theme .value-card--integrity:hover .value-card-body { border-color: rgba(59, 130, 246, 0.5) !important; } html:not(.light-theme) .value-card--innovation:hover .value-card-body { border-color: rgba(103, 49, 205, 0.4) !important; } html:not(.light-theme) .value-card--collaboration:hover .value-card-body { border-color: rgba(78, 82, 236, 0.4) !important; } html:not(.light-theme) .value-card--excellence:hover .value-card-body { border-color: rgba(150, 66, 236, 0.4) !important; } html:not(.light-theme) .value-card--integrity:hover .value-card-body { border-color: rgba(44, 110, 227, 0.4) !important; } .value-card-icon-wrap { position: absolute; } .value-card--integrity .value-card-icon-wrap { top: -40px !important; } .value-card-icon-wrap::before { content: "" !important; position: absolute !important; top: 15% !important; left: 15% !important; width: 70% !important; height: 70% !important; border-radius: 50% !important; z-index: -1 !important; filter: blur(20px) !important; pointer-events: none !important; transition: all 0.3s ease-in-out !important; } html:not(.light-theme) .value-card-icon-wrap::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%) !important; opacity: 0.1 !important; } html.light-theme .value-card-icon-wrap::before { background: none !important; opacity: 0 !important; } html.light-theme .value-card-item .value-card-icon-wrap img { filter: opacity(0.9) drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.15)) !important; } html:not(.light-theme) .value-card-item .value-card-icon-wrap img { filter: invert(1) brightness(0.95) drop-shadow(1px 0 0 rgba(255, 255, 255, 0.15)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.15)) !important; } .bg-clip-text, .text-transparent { padding-top: 0.15em !important; padding-bottom: 0.15em !important; padding-right: 0.25em !important; margin-top: -0.15em !important; margin-bottom: -0.15em !important; margin-right: -0.25em !important; } span.bg-clip-text, span.text-transparent { display: inline-block !important; vertical-align: bottom !important; } .tstm-page-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .tstm-page-card:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 30px 60px rgba(124, 58, 237, 0.2); } html.light-theme .tstm-page-card, html.light-theme .card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important; } html.light-theme .tstm-page-card:hover, html.light-theme .card:hover { border-color: rgba(124, 58, 237, 0.4) !important; box-shadow: 0 25px 50px rgba(124, 58, 237, 0.12) !important; } html.light-theme .tstm-page-card .tstm-name, html.light-theme .card .font-bold.text-white, html.light-theme .card p.font-bold { color: #0f172a !important; } html.light-theme .tstm-page-card .tstm-role, html.light-theme .card .text-gray-400, html.light-theme .card p.text-sm { color: #6d28d9 !important; } html.light-theme .tstm-page-card .tstm-text, html.light-theme .card p.text-gray-300, html.light-theme .card p.text-gray-400 { color: #334155 !important; } html.light-theme .glass-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08) !important; } html.light-theme .glass-card h1, html.light-theme .glass-card h2, html.light-theme .glass-card h3, html.light-theme .glass-card h4, html.light-theme .glass-card p, html.light-theme .glass-card li, html.light-theme .glass-card span, html.light-theme .glass-card div, html.light-theme .glass-card strong, html.light-theme .glass-card dt, html.light-theme .glass-card dd, html.light-theme .glass-card a { color: #1e293b !important; } html.light-theme .glass-card .text-gray-300, html.light-theme .glass-card .text-gray-400, html.light-theme .glass-card .text-gray-500, html.light-theme .glass-card .text-white, html.light-theme .glass-card .text-slate-300, html.light-theme .glass-card .text-slate-400 { color: #334155 !important; } html.light-theme .glass-card .text-purple-400, html.light-theme .glass-card .text-indigo-400, html.light-theme .glass-card .text-purple-300 { color: #7c3aed !important; } html.light-theme .glass-card .text-green-400, html.light-theme .glass-card .text-emerald-400, html.light-theme .glass-card .text-teal-400 { color: #047857 !important; } html.light-theme .glass-card .text-blue-400, html.light-theme .glass-card .text-sky-400, html.light-theme .glass-card .text-cyan-400 { color: #1d4ed8 !important; } html.light-theme .glass-card .bg-white\/5, html.light-theme .glass-card .bg-white\/10, html.light-theme .glass-card .bg-white\/\[0\.02\], html.light-theme .glass-card .bg-gray-800\/50, html.light-theme .glass-card .bg-gray-900\/50, html.light-theme .glass-card .bg-gray-800, html.light-theme .glass-card .bg-slate-900 { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; } html.light-theme .glass-card .border-white\/10, html.light-theme .glass-card .border-white\/20, html.light-theme .glass-card .border-white\/5 { border-color: #cbd5e1 !important; } html.light-theme table, html.light-theme th, html.light-theme td { color: #1e293b !important; border-color: #e2e8f0 !important; } html.light-theme th { background-color: #f1f5f9 !important; color: #0f172a !important; } .tstm-filter-btn { color: rgba(255, 255, 255, 0.7); background: transparent; border: 1px solid transparent; } .tstm-filter-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); } .tstm-filter-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } html.light-theme .tstm-hero-badge { color: #6d28d9 !important; } html.light-theme .tstm-hero-title { color: #1e1033 !important; } html.light-theme .tstm-hero-subtitle { color: #1e1033 !important; } html.light-theme .tstm-hero-desc { color: #334155 !important; } html.light-theme .tstm-stat-card { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important; } html.light-theme .tstm-stat-label { color: #475569 !important; } html.light-theme .tstm-filter-wrap { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important; } html.light-theme .tstm-filter-btn { color: #475569; } html.light-theme .tstm-filter-btn:hover { color: #0f172a; background: #f1f5f9; } html.light-theme .tstm-filter-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; } html.light-theme .tstm-page-card { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important; } html.light-theme .tstm-page-card:hover { border-color: #7c3aed !important; box-shadow: 0 25px 50px rgba(124, 58, 237, 0.15) !important; } html.light-theme .tstm-name { color: #0f172a !important; } html.light-theme .tstm-role { color: #6d28d9 !important; } html.light-theme .tstm-text { color: #334155 !important; } html.light-theme .tstm-page-card [class*="text-purple-300"], html.light-theme .tstm-page-card [class*="text-violet-300"] { color: #6d28d9 !important; } html.light-theme .tstm-page-card [class*="text-pink-300"], html.light-theme .tstm-page-card [class*="text-rose-300"] { color: #be123c !important; } html.light-theme .tstm-page-card [class*="text-emerald-300"] { color: #047857 !important; } html.light-theme .tstm-page-card [class*="text-blue-300"] { color: #1d4ed8 !important; } html.light-theme .tstm-page-card [class*="text-amber-300"] { color: #b45309 !important; } html.light-theme .tstm-page-card [class*="text-sky-300"] { color: #0369a1 !important; } html.light-theme .tstm-page-card [class*="bg-"][class*="/10"], html.light-theme .tstm-page-card [class*="bg-"][class*="/15"] { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; } html.light-theme .tstm-footer { border-top-color: #e2e8f0 !important; } html.light-theme .tstm-cta-banner { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-color: #cbd5e1 !important; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08) !important; } html.light-theme .tstm-cta-title { color: #0f172a !important; } html.light-theme .tstm-cta-desc { color: #475569 !important; } video, .lazy-video { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } html.light-theme .portfolio-header-sub { color: #6d28d9 !important; opacity: 0.9 !important; } html.light-theme .portfolio-header-title { color: #0f172a !important; } html.light-theme .portfolio-header-gradient { background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } html.light-theme .portfolio-card, html.light-theme .card-entry-reveal { box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important; } html.light-theme .portfolio-card h3, html.light-theme .portfolio-card-title, html.light-theme .card-entry-reveal h3, html.light-theme .card-entry-reveal h3.text-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important; } html.light-theme .card-entry-reveal .port-cat-text { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9) !important; filter: brightness(1.6) saturate(1.4) !important; } html.light-theme #detailModal h3, html.light-theme #detailModal #m-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.light-theme #detailModal p, html.light-theme #detailModal #m-desc { color: #cbd5e1 !important; } html.light-theme .google-reviews-badge { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important; } html.light-theme .google-reviews-badge .text-purple-300 { color: #6d28d9 !important; } html.light-theme .google-reviews-badge .text-gray-300 { color: #334155 !important; border-left-color: #cbd5e1 !important; } html, body { max-width: 100% !important; overflow-x: hidden !important; } .hero-fluid-title { font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem) !important; line-height: 1.1 !important; } .section-fluid-heading { font-size: clamp(1.75rem, 4vw + 0.5rem, 3.25rem) !important; line-height: 1.2 !important; } .sub-fluid-heading { font-size: clamp(1rem, 2vw + 0.25rem, 1.35rem) !important; } @media (pointer: coarse), (hover: none) { button, a, input[type="submit"], input[type="button"], select, .btn-glass, .btn-premium-melt, #theme-toggle, #lang-toggle, #portal-trigger, #mobile-menu-button { min-height: 44px !important; min-width: 44px !important; } } @media (hover: none) { .hover\:-translate-y-3:hover, .hover\:-translate-y-2:hover, .hover\:-translate-y-1:hover, .hover\:-translate-y-0\.5:hover { transform: none !important; } } @media (max-width: 479px) { .container { padding-left: 1rem !important; padding-right: 1rem !important; } .svc-outer-card { padding: 1.25rem !important; border-radius: 1rem !important; } .svc-feat-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .tstm-page-card, .glass-card { padding: 1.25rem !important; } .blur-\[120px\], .blur-\[100px\], .blur-\[80px\] { max-width: 280px !important; max-height: 280px !important; } } @media (max-width: 767px) { .svc-plan-hero { flex-direction: column !important; } .svc-plan-hero__art { width: 100% !important; height: 220px !important; } .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; } } @media (min-width: 768px) and (max-width: 1023px) { .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 991px) { .timeline-row { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 10px !important; gap: 0 !important; } .timeline-svg-container { display: block !important; height: 60px !important; top: 50% !important; } } @media (max-width: 767px) { .timeline-navigation-container { margin-top: 2rem !important; padding-left: 0 !important; align-items: center !important; } .featured-card { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; margin: 1.5rem 0 !important; transform: none !important; } [class*="rotate-"], .transform[class*="rotate"] { transform: none !important; } .breakout-badge, .badge-breakout { position: relative !important; top: 0 !important; right: 0 !important; margin-bottom: 0.5rem !important; display: inline-block !important; } [style*="width: 668px"], [style*="width: 460px"] { width: 100% !important; max-width: 100% !important; } .liquid-blob { max-width: 260px !important; max-height: 260px !important; filter: blur(50px) !important; } .tstm-carousel-container { height: auto !important; min-height: 380px !important; overflow: visible !important; margin-top: 10rem !important; padding-top: 3rem !important; } .tstm-sub { font-size: clamp(0.68rem, 3.2vw, 0.88rem) !important; white-space: nowrap !important; letter-spacing: -0.02em !important; margin-bottom: 2rem !important; } .tstm-card { height: auto !important; min-height: auto !important; padding: 1.25rem 1rem !important; gap: 0.75rem !important; } .tstm-quote-text { font-size: 0.92rem !important; line-height: 1.4 !important; margin-bottom: 0.5rem !important; } .tstm-quote-mark { font-size: 2.8rem !important; top: -0.5rem !important; left: -0.25rem !important; } .tstm-stat { margin-bottom: 0.5rem !important; font-size: 0.75rem !important; } .tstm-proj-card { display: none !important; } .tstm-card__right { padding-top: 0.5rem !important; border-top: none !important; } .value-card-item { margin-top: 5rem !important; } .value-card-icon-wrap { position: absolute !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 190px !important; height: 190px !important; top: -85px !important; } .value-card-body { height: auto !important; min-height: 220px !important; padding-top: 75px !important; } .s-scene, .s-card-stack { display: none !important; } } html.light-theme .protocol-level-02, html.light-theme #support-tiers .text-red-400 { color: #000000 !important; }