:root{
  --bg:#0b0d12; --bg2:#0f1220; --card:#121521; --text:#e6e9ef; --muted:#9aa4b2;
  --brand:#7c5cff; --brand2:#22d3ee; --radius:18px; --border:#1f2436;
  --shadow:0 4px 20px rgba(0,0,0,.3); --shadow-lg:0 8px 40px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:radial-gradient(1100px 600px at 80% -10%, #1b1f3a, transparent), var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes ambient{
  0%,100%{transform:translateY(-2%) translateX(-2%); opacity:.9;}
  50%{transform:translateY(2%) translateX(2%); opacity:.6;}
}
@keyframes pop{
  0%,100%{transform:translateY(0); filter:saturate(1);}
  50%{transform:translateY(-2px); filter:saturate(1.25);}
}
.card, .product-item, .career-box, .about-box{
  animation:fadeInUp .6s ease-out;
}
.card:nth-child(2){animation-delay:.1s}
.card:nth-child(3){animation-delay:.2s}
a{color:inherit; text-decoration:none; transition:all .3s ease}
img{max-width:100%; display:block; height:auto}
.container{max-width:1200px; margin:auto; padding:0 24px}
.section{padding:80px 0}
.section.alt{background:var(--bg2)}
h1,h2,h3{line-height:1.2; margin:0 0 16px; font-weight:700; letter-spacing:-0.02em}
h1{font-size:48px; background:linear-gradient(135deg,var(--text),var(--muted)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
h2{font-size:32px; color:var(--text)}
h3{font-size:24px; color:var(--text)}
p{color:var(--muted); margin:0 0 20px; line-height:1.7}

/* Header + Nav */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,18,.9); backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:all .3s ease;
}
.header-inner{height:72px; display:flex; align-items:center; justify-content:space-between}
.logo{
  display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; transition:transform .3s ease;
}
.logo:hover{transform:scale(1.05)}
.logo img{width:32px; height:32px; border-radius:8px}
.nav{display:flex; gap:24px; align-items:center}
.nav a{
  opacity:.85; font-weight:500; padding:8px 0; position:relative;
  transition:opacity .3s ease, color .3s ease;
}
.nav a:hover{opacity:1; color:var(--text)}
.nav a.active{
  opacity:1; color:#fff; position:relative; font-weight:600;
}
.nav a.active:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:2px;
}
.nav-toggle{
  display:none; font-size:24px; background:transparent; border:0;
  color:var(--text); cursor:pointer; padding:8px; transition:transform .3s ease;
}
.nav-toggle:hover{transform:scale(1.1)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px; font-weight:600; border:1px solid transparent;
  transition:all .3s ease; cursor:pointer; font-size:15px;
}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#05060a;
  box-shadow:0 4px 15px rgba(124,92,255,.3);
}
.btn.primary:hover{
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(124,92,255,.4);
}
.btn.ghost{
  border-color:#2b3146; background:rgba(43,49,70,.3);
  transition:all .3s ease;
}
.btn.ghost:hover{
  border-color:#3a4260; background:rgba(43,49,70,.5);
  transform:translateY(-2px);
}

/* Home cards */
.grid{display:grid; gap:24px}
.home-cards{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:32px;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transform:scaleX(0); transition:transform .4s ease;
}
.card:hover{
  transform:translateY(-8px); border-color:#3a4260;
  box-shadow:var(--shadow-lg);
}
.card:hover::before{transform:scaleX(1)}
.card .icon{
  width:56px; height:56px; border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid; place-items:center; font-size:24px; margin-bottom:20px;
  box-shadow:0 4px 15px rgba(124,92,255,.3);
  transition:transform .3s ease;
}
.card:hover .icon{transform:scale(1.1) rotate(5deg)}
.card h3{margin-bottom:12px; font-size:22px}
.card p{margin-bottom:20px; font-size:15px}

/* Hero */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  background:rgba(124,92,255,.12); color:var(--brand2);
  border:1px solid rgba(124,92,255,.25);
}
.badge::before{
  content:"●"; font-size:8px;
}
.badge.badge-outline{
  background:transparent; color:var(--muted);
  border:1px solid rgba(255,255,255,.2);
}
.hero{
  padding:120px 0 80px; position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero-copy h1{
  font-size:52px; margin-bottom:16px;
}
.hero-copy .cta-actions{margin-top:28px; gap:16px; display:flex; flex-wrap:wrap}
.hero-visual{
  position:relative;
}
.camera-preview{
  border-radius:32px;
  padding:20px;
  background:linear-gradient(160deg, rgba(124,92,255,.2), rgba(34,211,238,.08));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(5,7,12,.5);
  position:relative;
  overflow:hidden;
}
.camera-preview img{
  border-radius:24px;
  width:100%;
  display:block;
  border:1px solid rgba(255,255,255,.08);
}
.camera-preview.layered::after{
  content:"";
  position:absolute; inset:20px; border-radius:26px;
  border:1px dashed rgba(255,255,255,.15);
  pointer-events:none;
}
.floating-card{
  position:absolute;
  bottom:-18px; left:50%; transform:translate(-50%, 50%);
  background:#0d111b; padding:14px 18px;
  border-radius:16px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 15px 30px rgba(0,0,0,.4);
  font-size:14px; text-align:center; width:220px;
}
.floating-card span{
  display:block; font-size:20px; font-weight:700; color:var(--brand2);
}
.text-info{
  text-align:center; font-size:1.8rem; padding:12px;
  color:#2563eb; font-weight:600;
}
.company-intro{
  position:relative; overflow:hidden;
  border-radius:16px; padding:18px 20px;
  background:rgba(12,14,18,.85);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.company-intro::before{
  content:""; position:absolute; inset:-50%;
  background:radial-gradient(600px circle at 20% 10%, rgba(34,211,238,.16), transparent 45%),
             radial-gradient(700px circle at 80% 30%, rgba(139,92,246,.14), transparent 50%),
             radial-gradient(600px circle at 50% 90%, rgba(244,114,182,.12), transparent 45%);
  animation:ambient 8s ease-in-out infinite;
  pointer-events:none;
}
.company-intro__text{
  position:relative; z-index:1; color:#e6eaf2;
  font-size:1.05rem; line-height:1.75; font-weight:600; letter-spacing:.1px;
}
.hl{
  padding:0 .38em; border-radius:.5em; display:inline-block; margin:0 .05em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  animation:pop 2.4s ease-in-out infinite; text-shadow:0 0 10px currentColor;
}
.hl--cyan{color:#22d3ee; box-shadow:0 0 18px rgba(34,211,238,.35);}
.hl--violet{color:#a78bfa; box-shadow:0 0 18px rgba(167,139,250,.30); animation-delay:.25s;}
.hl--pink{color:#f472b6; box-shadow:0 0 18px rgba(244,114,182,.28); animation-delay:.5s;}

/* Product zig-zag */
.product-item{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  padding:40px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:all .4s ease; box-shadow:var(--shadow);
}
.product-item:hover{
  transform:translateY(-4px); border-color:#3a4260;
  box-shadow:var(--shadow-lg);
}
.product-item + .product-item{margin-top:32px}
.product-media{
  border-radius:16px; overflow:hidden; border:1px solid #2a3045;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  transition:transform .4s ease;
}
.product-item:hover .product-media{transform:scale(1.02)}
.product-media img{width:100%; height:auto; display:block}
.product-desc h2{margin-bottom:16px; font-size:28px}
.product-desc p{margin-bottom:20px; font-size:16px}
.product-desc ul{
  padding-left:24px; margin:0; list-style:none;
  position:relative;
}
.product-desc li{
  margin-bottom:12px; padding-left:24px; position:relative;
  color:var(--muted); font-size:15px;
}
.product-desc li::before{
  content:"✓"; position:absolute; left:0;
  color:var(--brand2); font-weight:bold; font-size:18px;
}
.product-item.reverse .product-media{order:2}
.product-item.reverse .product-desc{order:1}

/* Careers */
.career-box{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px;
  box-shadow:var(--shadow);
}
.career-box .product-media{
  border-radius:16px; overflow:hidden; border:1px solid #2a3045;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.career-links{display:grid; gap:16px}
.career-link{
  padding:20px 24px; border:1px solid #2a3045; border-radius:14px;
  background:rgba(12,15,27,.6); display:flex; justify-content:space-between;
  align-items:center; transition:all .3s ease; font-weight:500;
  position:relative; overflow:hidden;
}
.career-link::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  transform:scaleY(0); transition:transform .3s ease;
}
.career-link:hover{
  border-color:#3a4260; background:rgba(12,15,27,.8);
  transform:translateX(8px);
}
.career-link:hover::before{transform:scaleY(1)}
.career-link span{
  color:var(--brand2); font-weight:600; transition:transform .3s ease;
}
.career-link:hover span{transform:translateX(4px)}

/* About */
.about-box{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:48px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.about-box::before{
  content:""; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(124,92,255,.1) 0%, transparent 70%);
  pointer-events:none;
}
.about-box p{
  font-size:17px; line-height:1.8; position:relative; z-index:1;
  margin-bottom:24px;
}
.about-box p:last-child{margin-bottom:0}

/* Feature highlight */
.feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.feature-copy p{max-width:520px}
.feature-list{
  list-style:none; padding:0; margin:24px 0;
  display:grid; gap:12px;
}
.feature-list li{
  padding-left:28px; position:relative; font-size:15px; color:var(--muted);
}
.feature-list li::before{
  content:""; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  position:absolute; left:0; top:6px;
  box-shadow:0 0 10px rgba(124,92,255,.5);
}
.feature-stats{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:16px;
}
.stat-pill{
  display:flex; flex-direction:column; padding:14px 18px;
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:rgba(12,14,18,.7); min-width:130px;
}
.stat-pill strong{font-size:20px; color:#fff}
.stat-pill small{font-size:12px; color:var(--muted)}
.feature-visual .device-frame{
  border-radius:24px; padding:18px;
  background:linear-gradient(180deg,#151a28,#0d111b);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.feature-visual img{border-radius:18px; border:1px solid rgba(255,255,255,.08)}

/* Testimonials */
.testimonials .section-heading{
  text-align:center; margin-bottom:40px;
}
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testimonial-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:24px; box-shadow:var(--shadow); position:relative;
}
.testimonial-card p{font-size:15px; min-height:120px; color:#d0d6e4}
.testimonial-card footer{
  display:flex; align-items:center; gap:12px; margin-top:18px;
}
.avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#05060a;
}
.testimonial-card small{color:var(--muted)}

/* CTA */
.cta-section{
  padding:60px 0 80px;
}
.cta-inner{
  background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(34,211,238,.2));
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px; padding:40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.cta-inner h2{margin-bottom:12px}
.cta-inner p{margin:0; max-width:520px}
.cta-inner .cta-actions{
  display:flex; gap:16px; flex-wrap:wrap;
}

/* Modal */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  z-index:999;
}
.modal.open{
  opacity:1; pointer-events:auto;
}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(5,7,12,.75); backdrop-filter:blur(6px);
}
.modal__panel{
  position:relative; background:#0f1422; border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:32px; width:min(420px, calc(100% - 32px));
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  transform:translateY(20px); opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.modal.open .modal__panel{
  transform:translateY(0); opacity:1;
}
.modal__close{
  position:absolute; top:16px; right:16px;
  background:rgba(255,255,255,.08); border:0; width:36px; height:36px;
  border-radius:999px; color:#fff; font-size:20px; cursor:pointer;
  transition:background .2s ease;
}
.modal__close:hover{background:rgba(255,255,255,.16);}
.modal__content h3{
  margin:12px 0; font-size:24px;
}
.modal__content p{margin-bottom:14px}
.modal__content .muted{
  color:var(--muted); font-size:14px;
}
body.modal-open{
  overflow:hidden;
}

/* Footer (COMPACT) */
.footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,#0b0d12);
  margin-top:32px;           /* gọn hơn */
  padding:8px 0 6px;         /* giảm chiều cao */
}
.footer-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;                  /* giảm khoảng cách 2 cột */
  align-items:center;        /* canh giữa cho gọn */
}
.footer b{
  display:block;
  margin-bottom:6px;         /* chữ sát nhau hơn */
  font-size:16px;            /* nhỏ hơn */
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer small{
  display:block; color:var(--muted);
  margin-bottom:2px;         /* giảm khoảng cách dòng */
  font-size:11px;            /* nhỏ hơn */
  line-height:1.25;          /* sát dòng hơn */
}
/* nếu footer có <p> thì reset cho gọn */
.footer p{
  margin:0 0 6px;
  line-height:1.35;
  font-size:12px;
}
.footer-links{
  display:flex; gap:12px;    /* giảm khoảng cách link */
  justify-content:flex-end; color:var(--muted);
  align-items:center;
}
.footer-links a{
  font-size:12px;            /* nhỏ hơn */
  line-height:1.2;
  transition:color .3s ease;
}
.footer-links a:hover{color:var(--text)}

/* Hero section */
.hero p{font-size:18px; color:var(--muted); margin-top:12px}

@media (max-width: 900px){
  .home-cards{grid-template-columns:1fr 1fr}
  .product-item, .career-box{grid-template-columns:1fr; gap:32px; padding:32px}
  .product-item.reverse .product-media,
  .product-item.reverse .product-desc{order:unset}
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-copy .cta-actions{justify-content:center}
  .hero-visual{order:-1}
  .floating-card{position:relative; inset:auto; transform:none; margin-top:18px; width:100%}
  .feature-grid{grid-template-columns:1fr; text-align:center}
  .feature-list li{text-align:left}
  .feature-stats{justify-content:center}
  .testimonial-grid{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column; text-align:center}
}

@media (max-width: 640px){
  h1{font-size:36px}
  .section{padding:60px 0}
  .home-cards{grid-template-columns:1fr; gap:20px}
  .card{padding:24px}
  .product-item, .career-box{padding:24px; gap:24px}
  .about-box{padding:32px}
  .nav{
    display:none; position:fixed; top:72px; right:0; width:280px;
    background:rgba(14,17,32,.98); backdrop-filter:blur(12px);
    padding:24px; flex-direction:column; gap:16px;
    border-left:1px solid var(--border); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
  }
  .nav.open{display:flex}
  .nav-toggle{display:block}

  /* Footer mobile (COMPACT) */
  .footer{
    padding:10px 0 8px;
    margin-top:24px;
  }
  .footer-inner{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
  }
  .footer-links{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }

  .hero{padding:80px 0 60px}
  .hero h1{font-size:32px}
  .hero p{font-size:16px}
  .hero-grid{gap:24px}
  .feature-list{gap:8px}
  .feature-stats{flex-direction:column; align-items:stretch}
  .testimonial-grid{grid-template-columns:1fr}
  .cta-inner{padding:30px}
}

@media (prefers-reduced-motion: reduce){
  .company-intro::before,
  .hl{
    animation:none;
  }
}