.bg-overlay{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-2;
  overflow:hidden
}
@supports(-webkit-touch-callout:none){
  .bg-overlay{position:absolute;height:100vh}
}
.bg-overlay::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:1;
  background:linear-gradient(180deg,rgba(10,10,11,0.70) 0%,rgba(10,10,11,0.82) 30%,rgba(10,10,11,0.92) 100%)
}
.bg-overlay::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:url("images/hero.png") no-repeat center center;
  background-size:cover;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}

.hero-compact{padding:120px 0 40px;text-align:center}
.hero-compact__title{
  font-family:var(--font-heading);
  font-size:clamp(28px,5vw,42px);
  font-weight:600;
  letter-spacing:4px;
  color:var(--color-text);
  margin-bottom:8px
}
.hero-compact__accent{
  background:linear-gradient(135deg,var(--color-accent) 0%,#d4b86a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.hero-compact__desc{font-size:16px;color:var(--color-text-muted)}

.quick-nav{padding:20px 0 40px}
.quick-nav__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px
}
.quick-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:14px;
  text-decoration:none;
  color:var(--color-text);
  transition:var(--transition)
}
.quick-card:hover{
  background:rgba(18,18,26,1);
  border-color:var(--color-accent);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3)
}

.quick-card--artifacts:hover{
  background:linear-gradient(135deg,rgba(139,92,246,0.1) 0%,rgba(18,18,26,1) 100%);
  border-color:#8b5cf6;
  box-shadow:0 8px 32px rgba(139,92,246,0.2)
}
.quick-card--artifacts .quick-card__arrow{color:#8b5cf6}

.quick-card--calculator:hover{
  background:linear-gradient(135deg,rgba(196,163,90,0.1) 0%,rgba(18,18,26,1) 100%);
  border-color:var(--color-accent);
  box-shadow:0 8px 32px rgba(196,163,90,0.2)
}

.quick-card--ttk:hover{
  background:linear-gradient(135deg,rgba(239,68,68,0.1) 0%,rgba(18,18,26,1) 100%);
  border-color:#ef4444;
  box-shadow:0 8px 32px rgba(239,68,68,0.2)
}
.quick-card--ttk .quick-card__arrow{color:#ef4444}

.quick-card--featured:hover{
  background:linear-gradient(135deg,rgba(59,130,246,0.1) 0%,rgba(18,18,26,1) 100%);
  border-color:#3b82f6;
  box-shadow:0 8px 32px rgba(59,130,246,0.2)
}
.quick-card--featured .quick-card__arrow{color:#3b82f6}
.quick-card__icon{
  width:48px;height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  flex-shrink:0
}
.quick-card__icon svg{width:24px;height:24px}
.quick-card__icon--artifacts{background:rgba(139,92,246,0.15);color:#8b5cf6}
.quick-card__icon--calculator{background:rgba(196,163,90,0.15);color:var(--color-accent)}
.quick-card__icon--ttk{background:rgba(239,68,68,0.15);color:#ef4444}
.quick-card__icon--map{background:rgba(59,130,246,0.15);color:#3b82f6}
.quick-card__content{flex:1;min-width:0}
.quick-card__title{
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:500;
  letter-spacing:0.5px;
  margin-bottom:4px
}
.quick-card__desc{font-size:13px;color:var(--color-text-muted);line-height:1.4}
.quick-card__arrow{
  width:20px;height:20px;
  color:var(--color-accent);
  opacity:0;
  transform:translateX(-8px);
  transition:var(--transition);
  flex-shrink:0
}
.quick-card:hover .quick-card__arrow{opacity:1;transform:translateX(0)}

.content-section{padding:20px 0 40px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.rf-frequencies{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:24px
}
.rf-frequencies__header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--color-border)
}
.rf-frequencies__icon{
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,185,129,0.15);
  border-radius:12px;
  color:#10b981;
  flex-shrink:0
}
.rf-frequencies__icon svg{width:22px;height:22px}
.rf-frequencies__title{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:500;
  letter-spacing:1px
}
.rf-frequencies__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px
}
.rf-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  background:rgba(0,0,0,0.25);
  border-radius:8px;
  border:1px solid transparent;
  transition:var(--transition);
  cursor:pointer;
  position:relative;
  user-select:none
}
.rf-item:hover{border-color:rgba(16,185,129,0.3);background:rgba(16,185,129,0.05)}
.rf-item:active{background:rgba(16,185,129,0.1)}
.rf-item__location{font-size:13px;color:var(--color-text-muted)}
.rf-item__freq{
  font-size:14px;
  font-weight:600;
  color:#10b981;
  font-family:'Roboto Mono',monospace
}
.rf-item--copied{
  border-color:rgba(16,185,129,0.5);
  background:rgba(16,185,129,0.08)
}
.rf-copied-tooltip{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:5px 14px;
  background:rgba(10,10,11,0.95);
  border:1px solid rgba(16,185,129,0.5);
  border-radius:8px;
  color:#10b981;
  font-size:12px;
  font-weight:600;
  font-family:'Roboto Mono',monospace;
  letter-spacing:0.5px;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
  animation:rfCopiedFade 1.5s ease-out forwards
}
.rf-copied-tooltip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:rgba(16,185,129,0.5)
}
@keyframes rfCopiedFade{
  0%{opacity:0;transform:translateX(-50%) translateY(4px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  70%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-4px)}
}

.updates-block{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:24px
}
.updates-block__header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--color-border)
}
.updates-block__icon{
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(196,163,90,0.15);
  border-radius:12px;
  color:var(--color-accent);
  flex-shrink:0
}
.updates-block__icon svg{width:22px;height:22px}
.updates-block__title{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:500;
  letter-spacing:1px
}
.updates-block__content{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:320px;
  overflow-y:auto;
  padding-right:8px
}
.updates-block__content::-webkit-scrollbar{width:4px}
.updates-block__content::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:2px}
.updates-block__content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.update-entry{
  padding:14px;
  background:rgba(0,0,0,0.25);
  border-radius:10px;
  border-left:3px solid var(--color-accent)
}
.update-entry__date{
  display:block;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--color-accent);
  margin-bottom:10px
}
.update-entry__list{
  margin-left:16px;
  font-size:13px;
  color:var(--color-text-muted);
  line-height:1.5
}
.update-entry__list li{margin-bottom:4px}
.update-entry__list li:last-child{margin-bottom:0}

@media(max-width:1024px){
  .content-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero-compact{padding:100px 0 30px}
  .hero-compact__desc{font-size:14px}
  .hero-compact__title{letter-spacing:2px}
  .quick-nav{padding:16px 0 32px}
  .quick-nav__grid{grid-template-columns:1fr}
  .rf-frequencies__grid{grid-template-columns:1fr}
  .content-section{padding:16px 0 32px}
}
@media(max-width:480px){
  .hero-compact__title{font-size:24px;letter-spacing:1px}
  .quick-card{padding:16px}
  .quick-card__icon{width:40px;height:40px}
  .quick-card__icon svg{width:20px;height:20px}
  .rf-frequencies,.updates-block{padding:16px}
  .quick-card:hover{transform:none}
}
@media(hover:none){
  .quick-card:hover{transform:none;box-shadow:none}
  .quick-card:hover .quick-card__arrow{opacity:0}
  .quick-card:active{background:rgba(18,18,26,1);border-color:var(--color-accent)}
  .quick-card--artifacts:active{border-color:#8b5cf6}
  .quick-card--ttk:active{border-color:#ef4444}
  .quick-card--featured:active{border-color:#3b82f6}
}
@media print{
  .hero-compact{padding-top:20px}
  .quick-card{border:1px solid #ccc;break-inside:avoid}
}