:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #0f172a;
    --accent-color: #3b82f6;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-light: #94a3b8;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-dark: #0f172a;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--text-primary); line-height:1.6; overflow-x:hidden; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.navbar { position:fixed; top:0; width:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); box-shadow:var(--shadow); z-index:1000; transition:all 0.3s ease; }
.navbar .container { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 20px; }
.logo { display:flex; align-items:center; gap:12px; font-size:1.5rem; font-weight:700; color:var(--primary-color); text-decoration:none; }
.logo-img { height:48px !important; width:48px !important; max-width:56px; max-height:56px; display:block; object-fit:contain; flex-shrink:0; }
.logo i { font-size:1.8rem; }
.logo-text { display:flex; flex-direction:column; line-height:1.15; gap:2px; }
.logo-text span:first-child { font-size:1.35rem; font-weight:700; letter-spacing:0.02em; color:var(--primary-color); }
.logo-en { font-size:0.62rem; font-weight:600; letter-spacing:0.18em; color:var(--text-secondary); white-space:nowrap; }
.nav-links { display:flex; list-style:none; gap:2rem; }
.nav-links a { text-decoration:none; color:var(--text-primary); font-weight:500; transition:color 0.3s ease; }
.nav-links a:hover { color:var(--primary-color); }
.menu-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.menu-toggle span { width:25px; height:3px; background:var(--text-primary); transition:all 0.3s ease; }
.btn-primary,.btn-secondary { padding:0.75rem 2rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; border:none; }
.btn-primary { background:var(--primary-color); color:white; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-secondary { background:transparent; color:var(--primary-color); border:2px solid var(--primary-color); }
.btn-secondary:hover { background:var(--primary-color); color:white; }
.btn-full { width:100%; }
.hero { min-height:100vh; display:flex; align-items:center; background:linear-gradient(135deg,#f8fafc 0%,#e0f2fe 100%); padding-top:110px; }
.hero .container { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-content h1 { font-size:3.5rem; font-weight:800; line-height:1.2; margin-bottom:1.5rem; color:var(--secondary-color); }
.hero-content p { font-size:1.25rem; color:var(--text-secondary); margin-bottom:2rem; }
.hero-buttons { display:flex; gap:1rem; }
.hero-visual { display:flex; justify-content:center; align-items:center; }
.tech-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.grid-item { width:120px; height:120px; background:white; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--primary-color); box-shadow:var(--shadow-lg); }
.services { padding:6rem 0; background:var(--bg-primary); }
.section-title { font-size:2.5rem; font-weight:800; text-align:center; margin-bottom:1rem; color:var(--secondary-color); }
.section-subtitle { text-align:center; color:var(--text-secondary); font-size:1.1rem; margin-bottom:4rem; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.service-card { background:white; padding:3rem 2rem; border-radius:20px; box-shadow:var(--shadow); transition:all 0.3s ease; border:1px solid var(--border-color); }
.service-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:var(--primary-color); }
.service-icon { width:80px; height:80px; background:linear-gradient(135deg,var(--primary-color),var(--accent-color)); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:white; margin-bottom:1.5rem; }
.service-card h3 { font-size:1.5rem; margin-bottom:1rem; color:var(--secondary-color); }
.service-card p { color:var(--text-secondary); margin-bottom:1.5rem; }
.service-features { list-style:none; }
.service-features li { padding:0.5rem 0; color:var(--text-primary); display:flex; align-items:center; gap:0.5rem; }
.service-features li i { color:var(--primary-color); }
.about { padding:6rem 0; background:var(--bg-secondary); }
.about .container { max-width:900px; }
.about-content h2 { font-size:2.2rem; font-weight:800; margin-bottom:1rem; color:var(--secondary-color); }
.about-text { color:var(--text-secondary); font-size:1rem; margin-bottom:2rem; line-height:1.8; }
.about-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:3rem; }
.gallery-item { position:relative; border-radius:12px; overflow:hidden; height:180px; box-shadow:var(--shadow); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-overlay { position:absolute; bottom:0; left:0; right:0; padding:1rem; background:linear-gradient(to top,rgba(0,0,0,0.8),transparent); color:white; display:flex; align-items:center; gap:0.5rem; font-weight:600; }
.gallery-overlay i { font-size:1.2rem; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item { text-align:center; }
.stat-number { display:block; font-size:2.5rem; font-weight:800; color:var(--primary-color); }
.stat-label { color:var(--text-secondary); font-size:0.9rem; }
.about-image { display:flex; justify-content:center; align-items:center; }
.tech-pattern { width:400px; height:400px; background:linear-gradient(135deg,var(--primary-color),var(--accent-color)); border-radius:30px; position:relative; overflow:hidden; }
.tech-pattern::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.1) 10px,rgba(255,255,255,0.1) 20px); animation:move 20s linear infinite; }
@keyframes move { 0%{transform:translate(0,0)} 100%{transform:translate(50px,50px)} }
.cases { padding:6rem 0; background:var(--bg-primary); }
.cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.case-card { background:white; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:all 0.3s ease; }
.case-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.case-image { height:220px; overflow:hidden; position:relative; }
.case-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.case-card:hover .case-image img { transform:scale(1.1); }
.case-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.7) 100%); }
.case-content { padding:2rem; }
.case-content h3 { font-size:1.3rem; margin-bottom:1rem; color:var(--secondary-color); }
.case-content p { color:var(--text-secondary); margin-bottom:1rem; font-size:0.95rem; }
.case-tag { display:inline-block; padding:0.5rem 1rem; background:linear-gradient(135deg,var(--primary-color),var(--accent-color)); color:white; border-radius:20px; font-size:0.85rem; font-weight:600; }
.contact { padding:6rem 0; background:var(--bg-secondary); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem; }
.contact-info { display:flex; flex-direction:column; gap:2rem; }
.contact-item { display:flex; gap:1.5rem; align-items:flex-start; }
.contact-item i { width:50px; height:50px; background:var(--primary-color); color:white; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.contact-item h4 { font-size:1.1rem; margin-bottom:0.5rem; color:var(--secondary-color); }
.contact-item p { color:var(--text-secondary); font-size:0.95rem; }
.contact-form { background:white; padding:3rem; border-radius:20px; box-shadow:var(--shadow); }
.form-group { margin-bottom:1.5rem; }
.form-group input,.form-group textarea { width:100%; padding:1rem; border:2px solid var(--border-color); border-radius:10px; font-size:1rem; transition:border-color 0.3s ease; font-family:inherit; }
.form-group input:focus,.form-group textarea:focus { outline:none; border-color:var(--primary-color); }
.footer { background:var(--bg-dark); color:white; padding:4rem 0 2rem; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-section h3 { font-size:1.5rem; margin-bottom:1rem; }
.footer-brand { display:flex; flex-direction:column; gap:0.15rem; }
.footer-brand-en { font-size:0.75rem; font-weight:500; letter-spacing:0.08em; color:var(--text-light); text-transform:none; }
.footer-section h4 { font-size:1.2rem; margin-bottom:1.5rem; }
.footer-section p { color:var(--text-light); line-height:1.8; }
.footer-section ul { list-style:none; }
.footer-section ul li { margin-bottom:0.75rem; }
.footer-section ul li a { color:var(--text-light); text-decoration:none; transition:color 0.3s ease; }
.footer-section ul li a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:2rem; display:flex; justify-content:space-between; color:var(--text-light); font-size:0.9rem; }
@media(max-width:968px) {
    .hero .container,.about .container,.contact-grid { grid-template-columns:1fr; }
    .hero-content h1 { font-size:2.5rem; }
    .services-grid,.cases-grid { grid-template-columns:1fr; }
    .stats { grid-template-columns:repeat(2,1fr); }
    .footer-content { grid-template-columns:1fr; }
    .nav-links { display:none; }
    .menu-toggle { display:flex; }
}
@media(max-width:640px) {
    .hero-content h1 { font-size:2rem; }
    .section-title { font-size:2rem; }
    .tech-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .grid-item { width:80px; height:80px; font-size:2rem; }
    .contact-form { padding:2rem; }
}