+
-
-
Samsung Exynos
+
Samsung Exynos NPU
Integrated NPU optimization
-
NXP Neutron
+
NXP Semiconductors' eIQ® Neutron NPU
Automotive and IoT acceleration
-
Apple MPS
-
Metal Performance Shaders for GPU acceleration
+
Apple Metal Performance Shaders (MPS)
+
GPU acceleration on macOS and iOS
-
ARM VGF
+
Arm VGF
Versatile graphics framework support
@@ -1725,10 +970,10 @@
Ready to Deploy AI at the Edge?
window.addEventListener('scroll', function() {
const navbar = document.querySelector('nav');
if (window.scrollY > 50) {
- navbar.style.background = 'rgba(255, 255, 255, 0.98)';
- navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+ navbar.style.background = 'rgba(48,48,48,0.97)';
+ navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
} else {
- navbar.style.background = 'rgba(255, 255, 255, 0.95)';
+ navbar.style.background = 'rgba(48,48,48,0.97)';
navbar.style.boxShadow = 'none';
}
});
@@ -1748,7 +993,7 @@
Ready to Deploy AI at the Edge?
});
// Backend switcher
- function switchBackend(backend) {
+ function switchBackend(backend, event) {
// Hide all backend content
document.querySelectorAll('.backend-content').forEach(content => {
content.classList.remove('active');
@@ -1767,7 +1012,7 @@
Ready to Deploy AI at the Edge?
}
// Platform switcher
- function switchPlatform(platform) {
+ function switchPlatform(platform, event) {
// Hide all platform content
document.querySelectorAll('.platform-content').forEach(content => {
content.classList.remove('active');
@@ -1786,7 +1031,7 @@
Ready to Deploy AI at the Edge?
}
// Multimodal platform switcher
- function switchMultimodalPlatform(platform) {
+ function switchMultimodalPlatform(platform, event) {
// Hide all multimodal platform content
document.querySelectorAll('.multimodal-content').forEach(content => {
content.classList.remove('active');
@@ -1803,6 +1048,22 @@
Ready to Deploy AI at the Edge?
// Add active class to clicked card
event.currentTarget.classList.add('active');
}
+
+ // Hamburger menu toggle
+ function toggleNav() {
+ var navLinks = document.getElementById('navLinks');
+ navLinks.classList.toggle('open');
+ }
+
+ // Highlight active nav link on click
+ document.querySelectorAll('.nav-links a').forEach(function(link) {
+ link.addEventListener('click', function() {
+ document.querySelectorAll('.nav-links a').forEach(function(l) {
+ l.classList.remove('active');
+ });
+ this.classList.add('active');
+ });
+ });
diff --git a/website/style.css b/website/style.css
new file mode 100644
index 00000000000..04ef18442a4
--- /dev/null
+++ b/website/style.css
@@ -0,0 +1,1062 @@
+/* Font Faces */
+@font-face{
+ font-family:'Open Sans';
+ src:url('https://pytorch.org/wp-content/themes/salient/css/fonts/OpenSans-Light.woff') format('woff');
+ font-weight:300;
+ font-style:normal;
+}
+@font-face{
+ font-family:'Open Sans';
+ src:url('https://pytorch.org/wp-content/themes/salient/css/fonts/OpenSans-Regular.woff') format('woff');
+ font-weight:400;
+ font-style:normal;
+}
+@font-face{
+ font-family:'Open Sans';
+ src:url('https://pytorch.org/wp-content/themes/salient/css/fonts/OpenSans-SemiBold.woff') format('woff');
+ font-weight:600;
+ font-style:normal;
+}
+@font-face{
+ font-family:'Open Sans';
+ src:url('https://pytorch.org/wp-content/themes/salient/css/fonts/OpenSans-Bold.woff') format('woff');
+ font-weight:700;
+ font-style:normal;
+}
+
+/* Legacy Container Styles */
+html body[data-header-resize="1"] .container-wrap,
+html body[data-header-format="left-header"][data-header-resize="0"] .container-wrap,
+html body[data-header-resize="0"] .container-wrap,
+body[data-header-format="left-header"][data-header-resize="0"] .container-wrap {
+ padding-top: 0;
+}
+
+.main-content > .row > #breadcrumbs.yoast {
+ padding: 20px 0;
+}
+
+/* CSS Variables */
+:root {
+ --primary: #df3411;
+ --bg-light: #ffffff;
+ --bg-gray: #f8fafc;
+ --text-dark: #1e293b;
+ --text-gray: #3e4c5f;
+ --text-gray-light: #576270;
+ --text-light:var(--bg-gray);
+ --border: #e2e8f0;
+ --border-dark: #2c3440;
+ --boarder-primary: #903321;
+ --max-width: 1200px;
+}
+
+/* Base Styles */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: 'Open Sans',Helvetica,sans-serif;
+ line-height: 1.6;
+ color: var(--text-dark);
+ background: var(--bg-light);
+}
+
+/* Container */
+.container {
+ max-width: var(--max-width);
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Navigation */
+nav {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: rgba(48,48,48,0.97);
+ border-bottom: 1px solid var(--border-dark);
+ z-index: 1000;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.nav-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--text-dark);
+}
+
+.logo img {
+ height: 40px;
+ filter: drop-shadow(0 0 2px var(--bg-gray));
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ color: var(--text-light);
+ text-decoration: none;
+ font-weight: 500;
+ padding-bottom: 2px;
+ transition: color 0.3s, border-bottom 0.3s;
+}
+
+.nav-links a.active,
+.nav-links a:hover {
+ border-bottom: 2px solid var(--primary);
+}
+
+/* nav search */
+.nav-search {
+ margin-left: 2rem;
+}
+
+.nav-search input {
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ font-size: 1rem;
+}
+
+.nav-toggle {
+ display: none;
+ background: none;
+ border: none;
+ font-size: 2rem;
+ color: var(--primary);
+ cursor: pointer;
+ margin-left: 1rem;
+}
+
+/* Sections */
+section {
+ padding: 5rem 0;
+}
+
+section.alt {
+ background: var(--bg-gray);
+}
+
+/* Title Banner */
+.title_banner {
+ background-image: url('et_banner.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 400px;
+ position: relative;
+ filter: drop-shadow(0 0 10px var(--text-gray));
+}
+
+.title_banner-container {
+ position: absolute;
+ left:150px;
+ bottom: 0;
+ display: flex;
+ gap: 12px;
+ padding: 2rem;
+ filter: none;
+}
+
+.title_banner-logo {
+ height: 80px;
+ filter: drop-shadow(0 0 4px var(--bg-gray));
+}
+
+.logo-text-container {
+ font-size: 4rem;
+ font-weight: 800;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+/* Hero */
+.hero {
+ padding: 7rem 0 4rem;
+ text-align: center;
+ background: linear-gradient(180deg, var(--bg-gray) 0%, var(--bg-light) 100%);
+}
+
+.hero-logo {
+ height: 80px;
+}
+
+.hero-subtitle {
+ font-size: 2rem;
+ color: var(--text-gray-light);
+ margin-bottom: 3rem;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+}
+
+/* Typography */
+.section-title {
+ font-size: 3rem;
+ font-weight: 700;
+ text-align: center;
+ margin-bottom: 1rem;
+ color: var(--text-dark);
+}
+
+.section-subtitle {
+ font-size: 1.25rem;
+ text-align: center;
+ color: var(--text-gray);
+ margin-bottom: 3rem;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.highlight {
+ color: var(--primary);
+}
+
+.banner_highlight{
+ color: var( --bg-gray);
+}
+
+/* Card Grid */
+.grid-2x2 {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.card {
+ background: var(--bg-light);
+ padding: 2rem;
+ border-radius: 16px;
+ border: 1px solid var(--border);
+ height: 100%;
+ box-shadow: 0 2px 8px rgba(222,52,18,0.04);
+ transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.card:hover {
+ box-shadow: 0 8px 24px rgba(222,52,18,0.12);
+ border-color: var(--primary);
+ transform: translateY(-4px);
+}
+
+.card-icon {
+ width: 60px;
+ height: 60px;
+ margin-bottom: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-gray);
+ border-radius: 12px;
+ border: 2px solid var(--primary);
+}
+
+.card-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: var(--text-dark);
+}
+
+.card-text {
+ color: var(--text-gray);
+ line-height: 1.6;
+ font-size: 1.25rem;
+}
+
+/* Stats Grid */
+.stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin: 3rem 0;
+}
+
+.stat-card {
+ background: var(--bg-light);
+ padding: 2rem;
+ border-radius: 12px;
+ border: 1px solid var(--border);
+ text-align: center;
+}
+
+.stat-card-clickable {
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.stat-card-clickable:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(222, 52, 18, 0.2);
+ border-color: var(--primary);
+}
+
+.stat-card-clickable:hover .stat-number {
+ color: #c62e10;
+}
+
+.stat-number {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: var(--primary);
+ margin-bottom: 0.5rem;
+}
+
+.stat-label {
+ color: var(--text-gray);
+ font-size: 0.9rem;
+}
+
+/* Grid Layout */
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.grid-2 {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+ align-items: start;
+}
+
+/* Buttons */
+.btn {
+ display: inline-block;
+ padding: 1rem 2rem;
+ border-radius: 8px;
+ text-decoration: none;
+ font-weight: 600;
+ margin: 0.5rem;
+ transition: all 0.3s;
+ font-size: 1rem;
+}
+
+.btn-primary {
+ background: #c62e10;
+ color: white;
+ box-shadow: 0 2px 8px rgba(198, 46, 16, 0.25);
+}
+
+.btn-primary:hover {
+ background: #a82609;
+ transform: translateY(-2px);
+ box-shadow: 0 10px 30px rgba(198, 46, 16, 0.4);
+}
+
+.btn-secondary {
+ background: transparent;
+ color: var(--text-dark);
+ border: 2px solid var(--border);
+}
+
+.btn-secondary:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+}
+
+/* Features Grid */
+.features-3 {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ text-align: center;
+ margin: 3rem 0;
+}
+
+.feature-item {
+ background: var(--bg-light);
+ padding: 2rem;
+ border-radius: 12px;
+ border: 1px solid var(--border);
+}
+
+.feature-title {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--primary);
+ margin-bottom: 0.5rem;
+}
+
+.feature-text {
+ color: var(--text-gray);
+ font-size: 0.9rem;
+}
+
+/* Problem/Solution */
+.problem-solution {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ gap: 2rem;
+ align-items: center;
+ margin: 3rem 0;
+}
+
+.problem-card {
+ text-align: center;
+ padding: 2rem;
+ border-radius: 12px;
+ border: 2px solid var(--border);
+}
+
+.problem-card.good {
+ background: var(--bg-light);
+}
+
+.problem-card.bad {
+ background: #fef2f2;
+ border-color: #fca5a5;
+}
+
+.arrow {
+ font-size: 2rem;
+ color: var(--primary);
+}
+
+/* Issues Grid */
+.issues {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ text-align: center;
+}
+
+.issue-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.issue-icon {
+ color: var(--primary);
+ font-size: 1.2rem;
+}
+
+.issue-title {
+ font-weight: 600;
+ color: var(--text-dark);
+}
+
+.issue-text {
+ color: var(--text-gray);
+ font-size: 0.9rem;
+}
+
+/* Solution Box */
+.solution-box {
+ text-align: center;
+ padding: 3rem;
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+ border-radius: 16px;
+ border: 2px solid #0ea5e9;
+ margin: 3rem 0;
+}
+
+.solution-title {
+ font-size: 1.8rem;
+ margin-bottom: 1rem;
+ color: var(--text-dark);
+}
+
+.solution-text {
+ color: var(--text-gray);
+ font-size: 1.1rem;
+ max-width: 700px;
+ margin: 0 auto;
+}
+
+/* Performance */
+.metric {
+ margin-bottom: 1.5rem;
+}
+
+.metric-header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+}
+
+.metric-value {
+ color: var(--primary);
+ font-weight: 600;
+}
+
+.metric-bar {
+ height: 8px;
+ background: var(--border);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.metric-fill {
+ height: 100%;
+ background: var(--primary);
+ border-radius: 4px;
+}
+
+/* Architecture Flow */
+.flow {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ flex-wrap: wrap;
+ margin: 3rem 0;
+ text-align: center;
+}
+
+.flow-step {
+ background: var(--bg-light);
+ padding: 1.5rem;
+ border-radius: 12px;
+ border: 2px solid var(--border);
+ min-width: 150px;
+}
+
+.flow-step h4 {
+ color: var(--primary);
+ margin-bottom: 0.5rem;
+}
+
+.flow-step p {
+ color: var(--text-gray);
+ font-size: 0.9rem;
+}
+
+.flow-arrow {
+ color: var(--text-gray);
+ font-size: 2rem;
+}
+
+/* Partners */
+.partners {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+}
+
+.partner-card {
+ background: var(--bg-light);
+ padding: 1.5rem;
+ border-radius: 12px;
+ border: 1px solid var(--border);
+ text-align: center;
+}
+
+.partner-name {
+ font-weight: 600;
+ color: var(--text-dark);
+ margin-bottom: 0.5rem;
+}
+
+.partner-desc {
+ color: var(--text-gray);
+ font-size: 0.9rem;
+}
+
+/* Code Section Container */
+.code-section-container {
+ max-width: var(--max-width);
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Backend Grid */
+.backend-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.backend-option {
+ background: #0f172a;
+ border-radius: 12px;
+ padding: 1.5rem;
+ border: 1px solid #334155;
+}
+
+.backend-option h4 {
+ color: #94a3b8;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+.save-code {
+ background: #0f172a;
+ border-radius: 12px;
+ padding: 1.5rem;
+ border: 1px solid #334155;
+}
+
+/* CTA */
+.cta {
+ background: linear-gradient(135deg, var(--text-dark) 0%, #374151 100%);
+ padding: 5rem 0;
+ text-align: center;
+ color: white;
+}
+
+.cta-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+}
+
+.cta-text {
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+ opacity: 0.9;
+}
+
+.cta .btn {
+ background: white;
+ color: #1e293b;
+ border: 2px solid white;
+ font-weight: 700;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.cta .btn:hover {
+ background: #f1f5f9;
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* Footer */
+footer {
+ background: var(--bg-gray);
+ padding: 3rem 0;
+ text-align: center;
+ color: var(--text-gray);
+ border-top: 1px solid var(--border);
+ margin-top: 4rem;
+}
+
+footer a {
+ color: var(--text-gray);
+ margin: 0 1rem;
+ text-decoration: none;
+ font-weight: 500;
+}
+
+/* Domain Slider Animation */
+.domain-slider {
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+}
+
+.domain-track {
+ display: inline-flex;
+ gap: 1.5rem;
+ animation: slide 20s linear infinite;
+}
+
+.domain-track span {
+ background: var(--bg-gray);
+ padding: 0.75rem 1.5rem;
+ border-radius: 25px;
+ font-weight: 600;
+ color: var(--text-dark);
+ flex-shrink: 0;
+}
+
+@keyframes slide {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* Backend Switcher Cards */
+.backend-switcher {
+ margin-bottom: 1rem;
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ background: var(--bg-gray);
+ padding: 1rem;
+}
+
+.backend-cards {
+ display: flex;
+ justify-content: flex-start;
+ gap: 0;
+ margin-bottom: 0;
+ flex-wrap: wrap;
+}
+
+.backend-card {
+ background: var(--bg-light);
+ border: 2px solid var(--border);
+ border-radius: 8px 8px 0 0;
+ border-bottom: none;
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ transition: all 0.3s;
+ text-align: center;
+ min-width: 140px;
+ position: relative;
+}
+
+.backend-card:not(:first-child) {
+ border-left: none;
+ border-radius: 0 8px 0 0;
+}
+
+.backend-card:first-child {
+ border-radius: 8px 0 0 0;
+}
+
+.backend-card:last-child {
+ border-radius: 0 8px 0 0;
+}
+
+.backend-card:only-child {
+ border-radius: 8px 8px 0 0;
+}
+
+.backend-card::after {
+ content: "Click to view code";
+ position: absolute;
+ top: -2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ background: var(--text-dark);
+ color: white;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.7rem;
+ opacity: 0;
+ transition: opacity 0.3s;
+ pointer-events: none;
+ white-space: nowrap;
+}
+
+.backend-card:hover::after {
+ opacity: 1;
+}
+
+.backend-card:hover {
+ border-color: var(--primary);
+ box-shadow: 0 4px 20px rgba(222, 52, 18, 0.1);
+ transform: translateY(-2px);
+}
+
+.backend-card.active {
+ border-color: var(--primary);
+ background: var(--primary);
+ color: white;
+ box-shadow: 0 4px 20px rgba(222, 52, 18, 0.25);
+ transform: translateY(-2px);
+}
+
+.backend-card.active::after {
+ opacity: 0;
+}
+
+.backend-card-title {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--text-dark);
+ margin-bottom: 0.25rem;
+}
+
+.backend-card-desc {
+ font-size: 0.75rem;
+ color: var(--text-gray);
+}
+
+.backend-card.active .backend-card-title {
+ color: white;
+}
+
+.backend-card.active .backend-card-desc {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.backend-card.more-backends {
+ background: linear-gradient(135deg, var(--bg-gray) 0%, #e5e7eb 100%);
+ border-style: dashed;
+ cursor: pointer;
+}
+
+.backend-card.more-backends:hover {
+ border-color: var(--primary);
+ box-shadow: 0 4px 20px rgba(222, 52, 18, 0.1);
+ transform: translateY(-2px);
+}
+
+.backend-card.more-backends::after {
+ content: "View all backends documentation";
+}
+
+.backend-card.more-backends .backend-card-title {
+ color: var(--text-gray);
+}
+
+.backend-card.more-backends .backend-card-desc {
+ color: var(--text-gray);
+ opacity: 0.8;
+}
+
+.backend-content {
+ display: none;
+}
+
+.backend-content.active {
+ display: block;
+}
+
+.backend-content > div {
+ border-radius: 0 8px 8px 8px !important;
+ border-top: none !important;
+}
+
+/* Platform Switcher - Same Style */
+.platform-switcher {
+ margin-bottom: 1rem;
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ background: var(--bg-gray);
+ padding: 1rem;
+}
+
+.platform-cards {
+ display: flex;
+ justify-content: flex-start;
+ gap: 0;
+ margin-bottom: 0;
+ flex-wrap: wrap;
+}
+
+.platform-card {
+ background: var(--bg-light);
+ border: 2px solid var(--border);
+ border-radius: 8px 8px 0 0;
+ border-bottom: none;
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ transition: all 0.3s;
+ text-align: center;
+ min-width: 120px;
+ position: relative;
+}
+
+.platform-card:not(:first-child) {
+ border-left: none;
+ border-radius: 0 8px 0 0;
+}
+
+.platform-card:first-child {
+ border-radius: 8px 0 0 0;
+}
+
+.platform-card:last-child {
+ border-radius: 0 8px 0 0;
+}
+
+.platform-card:only-child {
+ border-radius: 8px 8px 0 0;
+}
+
+.platform-card::after {
+ content: "Click to view code";
+ position: absolute;
+ top: -2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ background: var(--text-dark);
+ color: white;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.7rem;
+ opacity: 0;
+ transition: opacity 0.3s;
+ pointer-events: none;
+ white-space: nowrap;
+}
+
+.platform-card:hover::after {
+ opacity: 1;
+}
+
+.platform-card:hover {
+ border-color: var(--primary);
+ box-shadow: 0 4px 20px rgba(222, 52, 18, 0.1);
+ transform: translateY(-2px);
+}
+
+.platform-card.active {
+ border-color: var(--primary);
+ background: var(--primary);
+ color: white;
+ box-shadow: 0 4px 20px rgba(222, 52, 18, 0.25);
+ transform: translateY(-2px);
+}
+
+.platform-card.active::after {
+ opacity: 0;
+}
+
+.platform-card-title {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--text-dark);
+}
+
+.platform-card.active .platform-card-title {
+ color: white;
+}
+
+.platform-content {
+ display: none;
+}
+
+.platform-content.active {
+ display: block;
+}
+
+.platform-content > div {
+ border-radius: 0 8px 8px 8px !important;
+ border-top: none !important;
+}
+
+/* Multimodal Platform Switcher */
+.multimodal-content {
+ display: none;
+}
+
+.multimodal-content.active {
+ display: block;
+}
+
+.multimodal-content > div {
+ border-radius: 0 8px 8px 8px !important;
+ border-top: none !important;
+}
+
+.code-instruction {
+ text-align: center;
+ color: var(--text-gray);
+ font-size: 0.85rem;
+ margin-bottom: 0.5rem;
+ font-style: italic;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+ .container {
+ padding: 0 1rem;
+ }
+ .nav-search {
+ display: none;
+ }
+ .grid-2x2 {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 0 1rem;
+ }
+ .hero-logo {
+ height: 60px;
+ }
+ .section-title {
+ font-size: 2.2rem;
+ }
+ .grid-2 {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+ .grid-2x2 {
+ grid-template-columns: 1fr;
+ }
+ .features-3 {
+ grid-template-columns: 1fr;
+ }
+ .issues {
+ grid-template-columns: 1fr;
+ }
+ .backend-grid {
+ grid-template-columns: 1fr;
+ }
+ .problem-solution {
+ grid-template-columns: 1fr;
+ }
+ .arrow {
+ transform: rotate(90deg);
+ }
+ .flow {
+ flex-direction: column;
+ }
+ .flow-arrow {
+ transform: rotate(90deg);
+ }
+ .nav-links {
+ display: none;
+ }
+ .nav-search {
+ display: none;
+ }
+}
+
+@media (max-width: 700px) {
+ .nav-links {
+ display: none;
+ flex-direction: column;
+ background: #fff;
+ position: absolute;
+ top: 64px;
+ left: 0;
+ width: 100%;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+ }
+ .nav-links.open {
+ display: flex;
+ }
+ .nav-toggle {
+ display: block;
+ }
+ .nav-content {
+ flex-wrap: wrap;
+ }
+}
+
+@media (max-width: 480px) {
+ .stats {
+ grid-template-columns: 1fr;
+ }
+ .section-title {
+ font-size: 1.8rem;
+ }
+}
+
+