:root{
  --bg-1:#00111a;
  --bg-2:#002a3f;
  --accent:#3ee5c4;
  --accent-2:#2dbf9f;
  --muted:rgba(255,255,255,0.06);
  --text:#e8fbff;
  --card:rgba(255,255,255,0.04);
  --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* HEADER */
.header{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 6vw;background:linear-gradient(180deg,rgba(0,0,0,0.28),rgba(0,0,0,0.12));backdrop-filter:blur(8px);z-index:1200;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{width:52px;height:52px;border-radius:10px;object-fit:contain;box-shadow:0 6px 26px rgba(0,0,0,0.6);background:linear-gradient(180deg,#eafaf6,#c2fff0)}
.title{font-weight:700;letter-spacing:1px;font-size:16px;color:var(--text)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{font-weight:600;color:var(--text);opacity:0.95;padding:8px 10px;border-radius:6px;transition:background .18s,transform .12s}
.nav a:hover{background:var(--muted);transform:translateY(-3px)}
.controls{display:flex;gap:12px;align-items:center}

/* theme picker */
.theme-picker{position:relative}
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:var(--text);cursor:pointer}
.theme-menu{position:absolute;right:0;top:44px;background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(0,0,0,0.5));backdrop-filter:blur(6px);border-radius:8px;padding:10px;display:none;gap:8px}
.theme-swatch{width:34px;height:34px;border-radius:8px;border:2px solid rgba(255,255,255,0.06);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.45)}

/* lang menu */
.lang-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.lang-menu{position:absolute;right:6vw;top:64px;background:linear-gradient(180deg,rgba(0,0,0,0.75),rgba(0,0,0,0.5));backdrop-filter:blur(6px);border-radius:8px;overflow:hidden;display:none;min-width:140px}
.lang-menu div{padding:10px 12px;cursor:pointer;color:var(--text);font-weight:700}
.lang-menu div:hover{background:rgba(255,255,255,0.03)}

/* HERO */
.hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 6vw}
.canvas-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;max-width:1100px;padding:80px 0;text-align:center}
.eyebrow{color:var(--accent);font-weight:700;margin-bottom:6px}
.h-title{font-size:48px;line-height:1.02;margin-bottom:8px;font-weight:800;text-align:center}
.h-lead{font-size:18px;line-height:1.6;color:rgba(232,251,255,0.95);max-width:760px;margin:0 auto;text-align:center}
.cta-row{margin-top:18px;display:flex;gap:12px;align-items:center;justify-content:center}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#002229;padding:12px 22px;border-radius:28px;font-weight:800;box-shadow:0 12px 40px rgba(62,229,196,0.12);border:none;cursor:pointer}
.btn-primary:hover{transform:translateY(-4px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px 18px;border-radius:20px;color:var(--text);cursor:pointer}

/* MOCKUP */
.mockup{margin-top:20px;width:340px;height:340px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 18px 50px rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.logo-3d{width:260px;height:260px;display:flex;align-items:center;justify-content:center;transition:transform .18s}
.logo-3d img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 36px rgba(0,0,0,0.6));transform-origin:center center}

/* SECTIONS */
.section{padding:90px 6vw;position:relative;z-index:6;text-align:center}
.section h2{font-size:28px;color:var(--accent);margin-bottom:12px}
.section p{max-width:920px;margin:0 auto;color:rgba(232,251,255,0.9);line-height:1.7;text-align:center}
.grid{display:grid;gap:22px;margin-top:22px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);padding:22px;border-radius:12px;backdrop-filter:blur(6px);transition:transform .28s,box-shadow .28s;text-align:center}
.card:hover{transform:translateY(-10px);box-shadow:0 24px 60px rgba(2,8,12,0.6)}
.product-icon{width:88px;height:88px;margin:0 auto 12px;display:block}
.product-title{text-align:center;font-weight:700;margin-bottom:10px}
.product-desc{text-align:center;color:rgba(232,251,255,0.9)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;margin-top:18px;align-items:start}
.form{background:var(--card);padding:18px;border-radius:10px;text-align:left}
.input,textarea{width:100%;padding:12px;border-radius:8px;border:none;background:rgba(255,255,255,0.03);color:var(--text);margin-bottom:10px}
textarea{height:140px;resize:none}
.map{border-radius:10px;overflow:hidden;height:100%;min-height:320px}

/* FOOTER */
.footer{padding:30px 6vw;text-align:center;color:rgba(232,251,255,0.8);border-top:1px solid rgba(255,255,255,0.02);margin-top:48px}

/* reveal/fade */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
.fade-in{opacity:0;transform:translateY(18px);animation:fadeInUp 1s ease-out forwards}
@keyframes fadeInUp{to{opacity:1;transform:none}}

/* LIGHT THEME (invert if applied) */
.light-theme{
  --bg-1:#f6fbff;
  --bg-2:#eafcff;
  --text:#0a1720;
  --card:rgba(10,23,32,0.06);
}

/* Responsive */
@media(max-width:980px){
  .hero-inner{padding:40px 0}
  .mockup{width:260px;height:260px}
  .logo-3d{width:200px;height:200px}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .nav{display:none}
  .h-title{font-size:28px}
  .logo-img{width:44px;height:44px}
  .contact-grid{grid-template-columns:1fr}
}