:root{
  --bg:#06142f;
  --bg2:#0b2d6e;
  --blue:#0d5cff;
  --cyan:#1be7ff;
  --aqua:#00d4ff;
  --red:#ff304f;
  --text:#eaf6ff;
  --muted:#a9bfd8;
  --dark:#031026;
  --card:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.14);
  --white:#ffffff;
  --shadow:0 24px 80px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(27,231,255,.25), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(13,92,255,.35), transparent 35%),
    linear-gradient(135deg,#020817 0%,#06142f 42%,#0b2d6e 100%);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1320px,calc(100% - 40px));margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(3,16,38,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transition:transform .28s ease, background .28s ease;
}
.site-header.header-hidden{transform:translateY(-110%)}
.header-inner{width:min(1320px,calc(100% - 40px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:24px}
.brand-link{display:flex;align-items:center;gap:12px}
.brand-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font:900 26px Space Grotesk;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 28px rgba(27,231,255,.45)}
.brand-text strong{display:block;font:900 26px Space Grotesk;letter-spacing:-.04em}
.brand-text small{display:block;color:var(--muted);font-size:12px}
.custom-logo{max-height:64px;width:auto}
.primary-menu,.footer-menu{display:flex;gap:8px;list-style:none;margin:0;padding:0;align-items:center}
.primary-menu a{
  padding:12px 14px;border-radius:999px;color:var(--text);font-weight:800;font-size:14px;
  transition:.25s ease;position:relative;overflow:hidden;
}
.primary-menu a:hover{background:rgba(27,231,255,.13);color:var(--cyan);box-shadow:0 0 20px rgba(27,231,255,.18)}
.menu-toggle{display:none;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border:0;border-radius:14px;padding:10px 13px;font-size:22px}

.hero-tech{position:relative;padding:84px 0 52px;overflow:hidden}
.hero-tech:before{
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px, transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.hero-tech .container{position:relative}
.hero-kicker{color:var(--cyan);font-weight:900;letter-spacing:.18em;font-size:12px}
.hero-tech h1{font:900 clamp(36px,6vw,72px)/.94 Space Grotesk;margin:14px 0;max-width:940px;letter-spacing:-.06em}
.hero-tech p{max-width:690px;color:var(--muted);font-size:18px;line-height:1.7}

.top-widget-area{margin-bottom:28px}
.ad-strip,.top-banner-widget{
  margin:18px 0 34px;border:1px dashed rgba(27,231,255,.45);border-radius:22px;padding:20px 24px;text-align:center;
  background:rgba(0,212,255,.08);color:#dffbff;font-weight:900;letter-spacing:.04em;box-shadow:inset 0 0 30px rgba(27,231,255,.08)
}
.section-head{margin:10px 0 20px}
.section-head span{display:block;color:var(--cyan);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.section-head h2,.section-head h1{font:900 clamp(28px,4vw,48px)/1 Space Grotesk;margin:8px 0;letter-spacing:-.04em}
.section-head.compact h2{font-size:36px}

.tech-carousel{position:relative;overflow:hidden;border-radius:34px;border:1px solid var(--line);background:rgba(255,255,255,.06);box-shadow:var(--shadow);margin-bottom:44px}
.carousel-track{display:flex;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.carousel-slide{min-width:100%;display:grid;grid-template-columns:1.2fr .8fr;min-height:440px}
.slide-media{overflow:hidden;background:#081b3e}
.slide-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease, filter .4s ease}
.carousel-slide:hover .slide-media img{transform:scale(1.07);filter:saturate(1.2)}
.slide-content{padding:54px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(3,16,38,.8),rgba(13,92,255,.18))}
.slide-content h2{font:900 clamp(30px,4vw,56px)/.98 Space Grotesk;margin:14px 0;letter-spacing:-.05em}
.slide-content p{color:var(--muted);font-size:18px;line-height:1.55}
.chip{display:inline-flex;width:max-content;padding:8px 11px;border-radius:999px;background:rgba(27,231,255,.13);border:1px solid rgba(27,231,255,.28);color:var(--cyan);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.chip.red{background:rgba(255,48,79,.14);border-color:rgba(255,48,79,.35);color:#ff91a3}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(3,16,38,.76);color:#fff;font-size:30px;cursor:pointer;transition:.2s}
.carousel-btn:hover{background:var(--cyan);color:#021028}
.carousel-btn.prev{left:18px}.carousel-btn.next{right:18px}
.carousel-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px}
.carousel-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer}
.carousel-dots button.active{background:var(--cyan);box-shadow:0 0 14px var(--cyan)}

.layout-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.featured-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:24px;margin-bottom:32px}
.main-card,.post-card,.mini-card,.tech-widget,.factoria-card,.ad-card,.article-content{
  background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.22)
}
.interactive-card{transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease}
.interactive-card:hover{transform:translateY(-8px);border-color:rgba(27,231,255,.62);background:rgba(27,231,255,.11);box-shadow:0 24px 70px rgba(27,231,255,.16)}
.main-media img,.post-thumb img{width:100%;height:300px;object-fit:cover}
.main-content,.post-content{padding:24px}
.main-content h2{font:900 34px/1.04 Space Grotesk;margin:12px 0;letter-spacing:-.04em}
.main-content p,.post-content p{color:var(--muted);line-height:1.6}
.secondary-stack{display:grid;gap:14px}
.mini-card{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:14px;align-items:center}
.mini-thumb img,.placeholder-grid.small{width:112px;height:92px;object-fit:cover;border-radius:18px}
.mini-card span{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.mini-card h3{font:900 17px/1.12 Space Grotesk;margin:6px 0}
.cards-grid{display:grid;gap:22px;margin-bottom:42px}
.cards-grid.three{grid-template-columns:repeat(3,1fr)}
.post-thumb img,.placeholder-grid{height:210px;width:100%;object-fit:cover;background:
linear-gradient(135deg,rgba(27,231,255,.25),rgba(13,92,255,.18)),
repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px)}
.post-content h3{font:900 23px/1.08 Space Grotesk;margin:12px 0;letter-spacing:-.03em}

.sidebar{position:sticky;top:104px;display:grid;gap:18px}
.tech-widget{padding:24px}
.widget-title{font:900 22px/1 Space Grotesk;margin:0 0 14px}
.latest-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.latest-list li{border-bottom:1px solid var(--line);padding-bottom:12px}
.latest-list a{font-weight:800;color:#eaf6ff}
.factoria-widget,.factoria-card{
  display:block;padding:28px;background:linear-gradient(145deg,#06142f,#0d5cff);border-color:rgba(27,231,255,.32)
}
.factoria-widget small,.factoria-card small{color:var(--red);font-weight:900;letter-spacing:.14em}
.btn-tech{display:inline-flex;margin-top:12px;background:linear-gradient(135deg,var(--red),#ff6d3d);padding:12px 16px;border-radius:999px;color:#fff;font-weight:900}
.neon-border{box-shadow:0 0 0 1px rgba(27,231,255,.18),0 0 42px rgba(27,231,255,.12)}

.article-content{padding:42px}
.article-header h1{font:900 clamp(36px,5vw,64px)/.96 Space Grotesk;letter-spacing:-.05em}
.article-meta{color:var(--muted)}
.article-image img{border-radius:24px;margin:24px 0}
.article-body{font-size:18px;line-height:1.85;color:#e9f4ff}
.article-body p{margin-bottom:1.2em}

.prefooter-area{margin-top:58px;padding:42px 0;border-top:1px solid var(--line);background:rgba(0,0,0,.16)}
.prefooter-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ad-card{padding:28px}
.ad-card span{color:var(--cyan);font-weight:900;letter-spacing:.14em}
.ad-card strong,.factoria-card strong{display:block;font:900 26px/1.05 Space Grotesk;margin:12px 0}
.site-footer{padding:34px 0;background:#020817;border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;color:var(--muted)}
.credit a{color:var(--cyan);font-weight:900}
.back-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;font-size:22px;box-shadow:0 16px 40px rgba(0,0,0,.35);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}

.not-found{padding:100px 0}
.not-found h1{font:900 90px Space Grotesk;margin:0}

@media(max-width:1024px){
  .layout-with-sidebar,.featured-grid,.carousel-slide{grid-template-columns:1fr}
  .sidebar{position:static}
  .slide-media img,.slide-media{height:320px}
  .cards-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .container,.header-inner{width:min(100% - 24px,1320px)}
  .menu-toggle{display:block}
  .main-nav{position:absolute;left:12px;right:12px;top:76px;background:rgba(3,16,38,.98);border:1px solid var(--line);border-radius:22px;padding:14px;display:none}
  .main-nav.open{display:block}
  .primary-menu{display:grid}
  .hero-tech{padding:54px 0 30px}
  .slide-content{padding:28px}
  .carousel-slide{min-height:auto}
  .cards-grid.three{grid-template-columns:1fr}
  .prefooter-grid,.footer-inner{grid-template-columns:1fr}
  .mini-card{grid-template-columns:92px 1fr}
  .mini-thumb img,.placeholder-grid.small{width:92px;height:78px}
  .main-media img,.post-thumb img{height:220px}
}