* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:#f5f7fc; color:#1a1f36; line-height:1.6; }
.dark { background:#0b1424; color:#e0e6f0; }
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,0.04); transition:background 0.2s; }
.dark .site-header { background:rgba(11,20,36,0.9); box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:10px; }
.logo-svg { width:42px; height:42px; }
.brand-name { font-weight:700; font-size:1.4rem; letter-spacing:0.5px; background:linear-gradient(135deg,#1a73e8,#0f4a9a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.dark .brand-name { background:linear-gradient(135deg,#5b9aff,#a0c4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-menu { display:flex; gap:24px; align-items:center; }
.nav-menu a { font-weight:500; padding:6px 0; border-bottom:2px solid transparent; transition:0.2s; }
.nav-menu a:hover, .nav-menu a.active { border-bottom-color:#1a73e8; color:#1a73e8; }
.dark .nav-menu a:hover, .dark .nav-menu a.active { border-bottom-color:#5b9aff; color:#5b9aff; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.hamburger span { width:28px; height:3px; background:#1a1f36; border-radius:4px; transition:0.2s; }
.dark .hamburger span { background:#e0e6f0; }
.dark-toggle { background:transparent; border:1px solid #ccc; border-radius:30px; padding:6px 14px; font-size:0.85rem; cursor:pointer; transition:0.2s; }
.dark-toggle:hover { background:#eef2f9; }
.dark .dark-toggle { border-color:#3a4a6a; color:#e0e6f0; }
.dark .dark-toggle:hover { background:#1f2a44; }
.hero { padding:60px 0 80px; background:linear-gradient(145deg,#f0f5ff 0%,#ffffff 100%); border-radius:0 0 40px 40px; }
.dark .hero { background:linear-gradient(145deg,#0f1a30,#162033); }
.hero-grid { display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.hero-text { flex:1 1 400px; }
.hero-text h1 { font-size:2.8rem; font-weight:700; line-height:1.2; margin-bottom:20px; }
.hero-text p { font-size:1.1rem; opacity:0.8; margin-bottom:30px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary { background:#1a73e8; color:#fff; padding:14px 34px; border-radius:60px; font-weight:600; border:none; cursor:pointer; transition:0.2s; box-shadow:0 8px 20px rgba(26,115,232,0.3); }
.btn-primary:hover { background:#1558b0; transform:scale(1.02); }
.btn-outline { border:2px solid #1a73e8; background:transparent; color:#1a73e8; padding:12px 30px; border-radius:60px; font-weight:600; }
.dark .btn-outline { border-color:#5b9aff; color:#5b9aff; }
.hero-visual { flex:1 1 300px; display:flex; justify-content:center; }
.hero-svg { width:100%; max-width:380px; }
.section-title { font-size:2rem; font-weight:700; margin-bottom:12px; }
.section-sub { font-size:1rem; opacity:0.7; max-width:700px; margin-bottom:40px; }
.card { background:#ffffff; border-radius:28px; padding:28px; box-shadow:0 12px 30px rgba(0,0,0,0.04); transition:0.3s; backdrop-filter:blur(4px); }
.dark .card { background:#1a2740; box-shadow:0 12px 30px rgba(0,0,0,0.3); }
.glass { background:rgba(255,255,255,0.55); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.2); }
.dark .glass { background:rgba(20,35,60,0.6); border-color:rgba(255,255,255,0.05); }
.grid-2, .grid-3, .grid-4 { display:grid; gap:28px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.mt-4 { margin-top:40px; }
.mb-4 { margin-bottom:40px; }
.text-center { text-align:center; }
.brand-story, .culture, .team, .products, .cases, .faq-section, .howto-section, .news-section, .contact-section { padding:60px 0; }
.team-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.team-avatar { width:80px; height:80px; border-radius:50%; background:#1a73e8; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.dark .team-avatar { background:#2f4a7a; }
.value-badge { display:inline-block; background:#eef4ff; padding:6px 16px; border-radius:40px; font-size:0.9rem; margin:4px; }
.dark .value-badge { background:#253a5a; }
.faq-item { border-bottom:1px solid #e0e7f0; padding:18px 0; cursor:pointer; }
.dark .faq-item { border-color:#2a3a5a; }
.faq-q { font-weight:600; display:flex; justify-content:space-between; }
.faq-a { max-height:0; overflow:hidden; transition:0.3s; opacity:0; }
.faq-item.open .faq-a { max-height:300px; opacity:1; margin-top:12px; }
.step { display:flex; gap:16px; margin-bottom:24px; }
.step-num { width:40px; height:40px; border-radius:50%; background:#1a73e8; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.dark .step-num { background:#2f5a9a; }
.footer { background:#0b1424; color:#aab3cc; padding:40px 0; margin-top:60px; }
.footer a { color:#b0c4e8; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; }
.animate-on-scroll { opacity:0; transform:translateY(20px); transition:0.6s ease; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }
.carousel { display:flex; overflow:auto; scroll-snap-type:x mandatory; gap:20px; padding-bottom:10px; }
.carousel-item { min-width:280px; scroll-snap-align:start; background:#fff; border-radius:28px; padding:24px; box-shadow:0 6px 16px rgba(0,0,0,0.03); }
.dark .carousel-item { background:#1a2740; }
@media (max-width:768px) {
  .nav-menu { display:none; flex-direction:column; width:100%; margin-top:12px; background:rgba(255,255,255,0.98); padding:16px; border-radius:24px; }
  .dark .nav-menu { background:#121f38; }
  .nav-menu.open { display:flex; }
  .hamburger { display:flex; }
  .hero-text h1 { font-size:2rem; }
  .section-title { font-size:1.8rem; }
}
.counter-value { font-size:2.2rem; font-weight:700; color:#1a73e8; }
.dark .counter-value { color:#6d9eff; }
.scroll-top { position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%; background:#1a73e8; color:#fff; border:none; font-size:1.5rem; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,0.2); display:none; z-index:99; }
.scroll-top.show { display:block; }
.search-sim { display:flex; max-width:400px; margin:20px auto; border-radius:60px; overflow:hidden; border:1px solid #ccc; }
.search-sim input { flex:1; border:none; padding:12px 20px; background:transparent; }
.search-sim button { padding:12px 24px; background:#1a73e8; color:#fff; border:none; }
.dark .search-sim { border-color:#3a4a6a; }
.news-card { border-radius:24px; overflow:hidden; background:#fff; }
.dark .news-card { background:#1c2a48; }
.news-card img { width:100%; height:160px; object-fit:cover; background:#c0d0e0; }
.news-card-content { padding:18px; }
.news-card-content h3 { font-size:1.1rem; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.08); }
.dark .card:hover { box-shadow:0 16px 40px rgba(0,0,0,0.5); }
.btn-primary:hover { transform:scale(1.04); }
.news-card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,0.06); }
.dark .news-card:hover { box-shadow:0 12px 24px rgba(0,0,0,0.3); }