/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.0.10_@babel+core@7.28.4_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.0.10_@babel+core@7.28.4_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/page.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * @license
 * ws-system
 * Copyright (C) 2025  WebSocket System
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/* Home Page Styles */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--wss-space-4);
  text-align: center;
  padding: var(--wss-space-6);
}

.error-page h1 {
  margin: 0;
  color: var(--wss-color-error);
}

.error-page p {
  color: var(--wss-text-secondary);
}

/* Home Page Layout */
.home-page {
  max-width: var(--wss-layout-container-xl);
  margin: 0 auto;
  padding: var(--wss-space-6);
}

/* Hero Section */
.hero {
  text-align: center;
  padding: var(--wss-space-8) var(--wss-space-6);
  background: linear-gradient(135deg, var(--wss-brand-primary-lighter) 0%, var(--wss-neutrals-white) 100%);
  border-radius: var(--wss-border-radius-xl);
  margin-bottom: var(--wss-space-7);
}

.hero-logo {
  margin-bottom: var(--wss-space-6);
  display: flex;
  justify-content: center;
}

.hero h1 {
  font-size: var(--wss-font-size-4xl);
  font-weight: var(--wss-font-weight-bold);
  margin: 0 0 var(--wss-space-4) 0;
  color: var(--wss-text-primary);
}

.hero-subtitle {
  font-size: var(--wss-font-size-xl);
  color: var(--wss-text-secondary);
  margin: 0 0 var(--wss-space-6) 0;
}

.hero-actions {
  display: flex;
  gap: var(--wss-space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Features Section */
.features {
  margin-bottom: var(--wss-space-7);
}

.features h2 {
  font-size: var(--wss-font-size-2xl);
  font-weight: var(--wss-font-weight-semibold);
  margin: 0 0 var(--wss-space-5) 0;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--wss-space-6);
}

.feature-card {
  background: var(--wss-bg-primary);
  border: var(--wss-border-width-thin) solid var(--wss-neutrals-gray200);
  border-radius: var(--wss-border-radius-lg);
  padding: var(--wss-space-5);
  text-align: center;
  transition: box-shadow var(--wss-transition-base), transform var(--wss-transition-base);
}

.feature-card:hover {
  box-shadow: var(--wss-shadow-lg);
  transform: translateY(-2px);
}

.feature-card wss-icon {
  color: var(--wss-brand-primary);
  margin-bottom: var(--wss-space-4);
}

.feature-card h3 {
  font-size: var(--wss-font-size-lg);
  font-weight: var(--wss-font-weight-semibold);
  margin: 0 0 var(--wss-space-2) 0;
}

.feature-card p {
  font-size: var(--wss-font-size-sm);
  color: var(--wss-text-secondary);
  margin: 0;
}

/* Demo Sections */
.demo-section {
  margin-bottom: var(--wss-space-7);
  padding: var(--wss-space-6);
  background: var(--wss-bg-secondary);
  border-radius: var(--wss-border-radius-lg);
}

.demo-section h2 {
  font-size: var(--wss-font-size-xl);
  font-weight: var(--wss-font-weight-semibold);
  margin: 0 0 var(--wss-space-5) 0;
}

.button-demo {
  display: flex;
  gap: var(--wss-space-4);
  flex-wrap: wrap;
}

.icons-demo {
  display: flex;
  gap: var(--wss-space-5);
  flex-wrap: wrap;
  align-items: center;
}

.icons-demo wss-icon {
  color: var(--wss-text-primary);
}