/* ============================================
   KATEK Public Site — site.css (2A Strict)
   ============================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; scroll-behavior:smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#d6d3d1; background:#1c1917; line-height:1.6; min-height:100%; display:flex; flex-direction:column; }
body > footer { margin-top:auto; }

/* NAV */
nav { position:sticky; top:0; z-index:100; background:#0c0a09; border-bottom:1px solid #292524; }
.nav-inner { max-width:1152px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:56px; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand img { width:42px; height:42px; border-radius:8px; object-fit:contain; }
.nav-brand span { color:#fff; font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:0; position:relative; }
.nav-links a { color:#78716c; text-decoration:none; font-size:13px; padding:16px 18px; transition:color .2s; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.nav-links a:hover { color:#e7e5e4; }
.nav-links a.active { color:#fff; }
.nav-indicator { position:absolute; bottom:0; height:2px; background:#06b6d4; transition:left .3s ease, width .3s ease; pointer-events:none; }
.nav-cta { color:#06b6d4!important; font-weight:600; }
.nav-cta:hover { color:#22d3ee!important; }
.nav-login { color:#44403c!important; font-size:12px!important; padding:16px 12px!important; border-bottom:none!important; }
.nav-login:hover { color:#78716c!important; }

/* HERO */
.hero { position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid #292524; }
.hero-bg { position:absolute; inset:0; background:url('/static/images/BWBG.png') center/cover no-repeat; opacity:.08; }
.hero-content { position:relative; z-index:2; max-width:1152px; margin:0 auto; padding:80px 24px; width:100%; }
.hero-accent-line { width:48px; height:3px; background:#06b6d4; margin-bottom:24px; }
.hero-content h1 { font-size:48px; font-weight:800; line-height:1.1; letter-spacing:-1.5px; color:#fff; margin-bottom:20px; max-width:700px; }
.hero-content p { font-size:17px; color:#a8a29e; line-height:1.7; max-width:560px; margin-bottom:36px; }
.hero-buttons { display:flex; gap:12px; }
.btn-primary { background:#06b6d4; color:#fff; padding:14px 28px; border-radius:4px; text-decoration:none; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.5px; transition:all .2s; display:inline-block; border:none; cursor:pointer; font-family:inherit; }
.btn-primary:hover { background:#0891b2; }
.btn-outline { border:1px solid #44403c; color:#d6d3d1; padding:14px 28px; border-radius:4px; text-decoration:none; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.5px; transition:all .2s; display:inline-block; }
.btn-outline:hover { border-color:#78716c; color:#fff; }

/* STATS */
.stats-bar { background:#0c0a09; border-bottom:1px solid #292524; }
.stats-inner { max-width:1152px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:24px; text-align:center; border-right:1px solid #292524; }
.stat-item:last-child { border-right:none; }
.stat-item .val { font-size:28px; font-weight:800; color:#fff; }
.stat-item .val.cyan { color:#06b6d4; }
.stat-item .lbl { font-size:12px; color:#78716c; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }

/* SECTION COMMON */
.inner { max-width:1024px; margin:0 auto; }
.section-label { font-size:12px; font-weight:600; color:#06b6d4; text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
.section-title { margin-bottom:12px; font-size:28px; font-weight:700; color:#fff; }
.section-sub { color:#78716c; font-size:15px; margin-bottom:40px; }
.section-header { text-align:left; margin-bottom:40px; }
.section-header-center { text-align:center; margin-bottom:40px; }

/* SKILLS */
.skills { padding:72px 24px; }
.skills-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:#292524; border:1px solid #292524; }
.skill-card { background:#1c1917; padding:24px 20px; transition:all .2s; }
.skill-card:hover { background:#292524; }
.skill-card i { font-size:20px; color:#06b6d4; margin-bottom:10px; display:block; }
.skill-card h3 { font-size:13px; font-weight:700; color:#fff; margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; }
.skill-card p { font-size:12px; color:#a8a29e; line-height:1.4; }

/* PRODUCT */
.product { padding:72px 24px; background:#0c0a09; border-top:1px solid #292524; border-bottom:1px solid #292524; }
.product-inner { max-width:1024px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.product-text .section-label { margin-bottom:8px; }
.product-text h2 { font-size:28px; font-weight:700; color:#fff; margin-bottom:16px; }
.product-text p { font-size:15px; color:#a8a29e; line-height:1.7; margin-bottom:24px; }
.product-text .features { list-style:none; margin-bottom:28px; }
.product-text .features li { padding:6px 0; font-size:14px; color:#d6d3d1; display:flex; align-items:center; gap:10px; }
.product-text .features li i { color:#06b6d4; font-size:12px; }
.product-visual { background:#1c1917; border:1px solid #292524; padding:24px; }
.product-visual .browser-bar { display:flex; align-items:center; gap:6px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #292524; }
.product-visual .browser-bar span { width:8px; height:8px; border-radius:50%; }
.product-visual .browser-bar .r { background:#ef4444; } .product-visual .browser-bar .y { background:#eab308; } .product-visual .browser-bar .g { background:#22c55e; }
.product-visual .browser-bar .url { margin-left:12px; font-size:11px; color:#78716c; font-family:monospace; }
.product-visual .mock-row { display:flex; gap:12px; margin-bottom:8px; }
.product-visual .mock-stat { flex:1; background:#292524; padding:14px; text-align:center; }
.product-visual .mock-stat .num { font-size:20px; font-weight:700; color:#fff; }
.product-visual .mock-stat .num.cyan { color:#06b6d4; }
.product-visual .mock-stat .txt { font-size:10px; color:#78716c; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.product-visual .mock-alert { background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.2); padding:10px 14px; display:flex; align-items:center; gap:10px; margin-top:8px; }
.product-visual .mock-alert i { color:#06b6d4; font-size:14px; }
.product-visual .mock-alert span { font-size:12px; color:#a8a29e; }

/* PROJECTS */
.projects { padding:72px 24px; }
.projects-inner { max-width:1200px; margin:0 auto; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#292524; border:1px solid #292524; }
.proj-card { background:#1c1917; overflow:hidden; transition:all .2s; }
.proj-card:hover { background:#292524; }
.proj-img { width:100%; height:180px; overflow:hidden; }
.proj-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.8) grayscale(.3); transition:all .3s; }
.proj-card:hover .proj-img img { filter:brightness(1) grayscale(0); }
.proj-click-hint { position:absolute; top:10px; right:10px; color:#06b6d4; font-size:14px; opacity:0; transition:opacity .2s; background:rgba(0,0,0,.5); padding:6px 8px; backdrop-filter:blur(4px); }
.proj-card:hover .proj-click-hint { opacity:1; }
.proj-img { position:relative; }
.proj-body { padding:20px; }
.proj-body h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:2px; }
.proj-body .duration { font-size:12px; color:#78716c; margin-bottom:8px; text-transform:uppercase; letter-spacing:.3px; }
.proj-body p { font-size:13px; color:#a8a29e; margin-bottom:10px; }
.proj-systems { display:flex; gap:6px; flex-wrap:wrap; }
.proj-systems i { font-size:12px; color:#78716c; background:#292524; padding:4px 6px; }
.proj-link { display:inline-block; margin-top:10px; color:#06b6d4; font-weight:600; font-size:13px; text-decoration:none; text-transform:uppercase; letter-spacing:.3px; }
.proj-link:hover { color:#22d3ee; }


/* NEWS */
.news { padding:72px 24px; }
.news-inner { max-width:1024px; margin:0 auto; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:#292524; border:1px solid #292524; }
.news-card { background:#1c1917; padding:24px; transition:background .2s; }
.news-card:hover { background:#292524; }
.news-card .news-date { font-size:11px; color:#57534e; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.news-card h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.news-card p { font-size:13px; color:#a8a29e; line-height:1.5; margin-bottom:10px; }
.news-card a { color:#06b6d4; font-weight:600; font-size:13px; text-decoration:none; text-transform:uppercase; letter-spacing:.3px; }
.news-card a:hover { color:#22d3ee; }

/* CTA + CALLBACK */
.cta { padding:72px 24px; background:#0c0a09; border-top:1px solid #292524; }
.cta-inner { max-width:768px; margin:0 auto; border:1px solid #292524; padding:48px; text-align:center; }
.cta-inner h2 { font-size:28px; font-weight:700; color:#fff; margin-bottom:12px; }
.cta-inner p { font-size:15px; color:#78716c; margin-bottom:28px; }
.callback-form { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:480px; margin:0 auto; }
.callback-form input { flex:1; min-width:200px; padding:14px 16px; background:#1c1917; border:1px solid #44403c; color:#e7e5e4; font-size:14px; border-radius:4px; outline:none; transition:border-color .2s; font-family:inherit; }
.callback-form input:focus { border-color:#06b6d4; }
.callback-form input::placeholder { color:#57534e; }

/* FOOTER */
footer { background:#0c0a09; padding:24px; border-top:1px solid #292524; }
.footer-inner { max-width:1152px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.footer-inner .left { color:#78716c; font-size:13px; }
.footer-inner .left strong { color:#a8a29e; }
.footer-inner .right { color:#44403c; font-size:11px; text-align:right; }
.footer-contacts { display:flex; gap:16px; margin-top:6px; flex-wrap:wrap; }
.footer-contacts a { color:#57534e; text-decoration:none; font-size:12px; transition:color .2s; }
.footer-contacts a:hover { color:#06b6d4; }

/* MAINTENANCE */
.is-maintenance .maint-blur { filter:blur(4px); pointer-events:none; }
.maint-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:3000; }
.is-maintenance .maint-overlay { display:flex; }
.maint-box { background:#292524; border-radius:4px; padding:24px 32px; max-width:600px; margin:0 16px; color:#fff; text-align:center; }
.maint-box h1 { margin-bottom:10px; font-size:1.4rem; }
.maint-box p { color:#a8a29e; }

/* RESPONSIVE */
@media(max-width:900px) {
  .hero-content h1 { font-size:36px; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .skills-grid { grid-template-columns:repeat(3,1fr); }
  .projects-grid { grid-template-columns:1fr 1fr; }
  .product-inner { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .hero-content h1 { font-size:28px; }
  .stats-inner, .projects-grid { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links a:not(.nav-cta):not(.nav-login) { display:none; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-inner .right { text-align:center; }
  .callback-form { flex-direction:column; }
  .mobile-hidden { display:none!important; }
}

/* Fade-in on scroll */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }