/* NYRELIX homepage cohesion layer.
   Loaded last to resolve legacy v0.3 rules without rewriting older modules. */

/* Hero final pass */
.hero-grid{
  gap:14px;
  align-items:stretch;
}

.hero-main{
  min-height:540px;
  border-radius:20px;
  border-color:rgba(91,153,210,.28);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.hero-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(4,8,15,.86) 0%,rgba(4,8,15,.52) 44%,rgba(4,8,15,.08) 72%),
    linear-gradient(180deg,rgba(3,7,13,.02) 34%,rgba(3,7,13,.78) 100%);
}

.hero-main-copy{
  z-index:3;
  max-width:760px;
  padding:34px;
}

.hero-main-copy .label{
  margin-bottom:11px;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.11em;
}

.hero-main h1{
  max-width:720px;
  margin-bottom:16px;
  font-size:clamp(46px,4.35vw,68px);
  line-height:.96;
  letter-spacing:-.045em;
}

.hero-main p{
  max-width:610px;
  margin-bottom:22px;
  color:#b6c2d2;
  font-size:15px;
  line-height:1.58;
}

.hero-main .outline-btn{
  min-height:42px;
  padding:0 16px;
  border-color:rgba(104,225,255,.32);
  background:rgba(8,19,31,.4);
  backdrop-filter:blur(9px);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.hero-main .outline-btn:hover,
.hero-main .outline-btn:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(104,225,255,.62);
  background:rgba(36,205,255,.08);
}

.hero-side{
  gap:12px;
}

.hero-side .mini-feature{
  min-height:172px;
  border-radius:16px;
  border-color:rgba(88,135,184,.2);
  box-shadow:0 15px 38px rgba(0,0,0,.2);
}

.hero-side .mini-copy{
  padding:18px;
}

.hero-side .mini-copy h3{
  margin-top:7px;
  font-size:18px;
  line-height:1.1;
}

.hero-side .mini-copy p{
  margin-top:7px;
  color:#a8b5c6;
  font-size:10px;
  line-height:1.42;
}

/* Trending becomes a usable editorial rail instead of a demo strip. */
.trend-strip{
  margin-top:18px;
  padding:0;
  border:1px solid rgba(87,132,177,.16);
  border-radius:17px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0,rgba(255,108,140,.055),transparent 22%),
    linear-gradient(145deg,rgba(11,18,30,.96),rgba(6,11,20,.99));
  box-shadow:0 16px 42px rgba(0,0,0,.18);
}

.trend-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:0 15px;
  border-bottom:1px solid rgba(104,137,174,.12);
  color:#ff91a7;
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
}

.trend-title span{
  filter:saturate(.85);
}

.trend-items{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
}

.trend-items>a{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-height:92px;
  padding:13px 12px;
  border-right:1px solid rgba(104,137,174,.1);
  color:#dce4ef;
  text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}

.trend-items>a:last-child{border-right:0}

.trend-items>a:hover,
.trend-items>a:focus-visible{
  z-index:1;
  background:rgba(255,255,255,.028);
  transform:translateY(-2px);
}

.trend-items>a::after{
  content:"↗";
  position:absolute;
  top:9px;
  right:9px;
  color:#667b93;
  font-size:9px;
  opacity:.7;
}

.trend-items>a>b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(255,122,149,.19);
  border-radius:9px;
  background:rgba(255,104,140,.045);
  color:#ff8ba4;
  font-size:10px;
  font-weight:950;
}

.trend-items>a:nth-child(2)>b{color:#8eeaff;border-color:rgba(83,217,255,.2);background:rgba(83,217,255,.04)}
.trend-items>a:nth-child(3)>b{color:#b69aff;border-color:rgba(170,124,255,.2);background:rgba(170,124,255,.04)}
.trend-items>a:nth-child(4)>b{color:#75e8b2;border-color:rgba(85,225,163,.18);background:rgba(85,225,163,.04)}
.trend-items>a:nth-child(5)>b{color:#ffc67a;border-color:rgba(255,186,103,.18);background:rgba(255,186,103,.04)}

.trend-items>a>span{
  min-width:0;
  font-size:10px;
  font-weight:780;
  line-height:1.3;
}

.trend-items small{
  display:block;
  margin-top:6px;
  color:#74869c;
  font-size:8px;
  font-weight:650;
}

/* Footer final pass */
.footer{
  margin-top:26px;
  border-top:1px solid rgba(95,133,174,.16);
  background:
    radial-gradient(circle at 16% 0,rgba(42,202,255,.045),transparent 25%),
    linear-gradient(180deg,#07101a,#050a12);
}

.footer-main{
  gap:22px;
  align-items:center;
}

.footer-brand img{
  max-width:190px;
}

.footer-brand span{
  color:#72859a;
  font-size:8px;
  letter-spacing:.12em;
}

.footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 16px;
}

.footer nav a{
  color:#91a0b3;
  font-size:10px;
  font-weight:750;
  text-decoration:none;
  transition:color .16s ease;
}

.footer nav a:hover,
.footer nav a:focus-visible{
  color:#aeeeff;
}

.footer .socials{
  opacity:.52;
}

.footer-bottom{
  border-top-color:rgba(95,133,174,.12);
  color:#65778b;
  font-size:8px;
  letter-spacing:.05em;
}

#development,
#platforms,
#reviews{
  scroll-margin-top:96px;
}

#development + #platforms,
#platforms + #reviews{
  margin-top:0;
}

@media(max-width:1120px){
  .trend-items{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .trend-items::-webkit-scrollbar{display:none}
  .trend-items>a{
    flex:0 0 220px;
    scroll-snap-align:start;
  }
}

@media(max-width:760px){
  .hero-main{
    min-height:500px!important;
    border-radius:17px!important;
  }

  .hero-main-copy{
    padding:23px!important;
  }

  .hero-main h1{
    max-width:100%!important;
    font-size:clamp(38px,10.5vw,48px)!important;
    line-height:.98!important;
  }

  .hero-main p{
    max-width:31rem!important;
    font-size:14px!important;
    line-height:1.5!important;
  }

  .hero-side{
    margin-top:11px!important;
    gap:10px!important;
  }

  .hero-side .mini-feature{
    flex:0 0 min(80vw,330px)!important;
    width:min(80vw,330px)!important;
    max-width:min(80vw,330px)!important;
    min-height:220px!important;
    border-radius:16px!important;
  }

  .hero-side .mini-copy{
    padding:17px!important;
  }

  .hero-side .mini-copy h3{
    font-size:21px!important;
  }

  .hero-side .mini-copy p{
    font-size:12px!important;
  }

  .trend-strip{
    margin-top:14px!important;
    border-radius:16px!important;
  }

  .trend-title{
    min-height:44px;
    padding:0 14px!important;
  }

  .trend-items{
    display:flex!important;
  }

  .trend-items>a{
    flex:0 0 min(72vw,285px)!important;
    max-width:none!important;
    min-height:84px!important;
    padding:12px!important;
  }

  .trend-items>a>span{
    font-size:11px;
  }

  #development,
  #platforms,
  #reviews{
    margin-top:30px!important;
    margin-bottom:0!important;
  }

  #development .section-bar,
  #platforms .section-bar,
  #reviews .section-bar{
    gap:12px;
  }

  #development .section-bar h2,
  #platforms .section-bar h2,
  #reviews .section-bar h2{
    max-width:72%;
    font-size:clamp(20px,5.6vw,25px)!important;
    line-height:1.05!important;
    letter-spacing:.025em!important;
  }

  #development .section-bar>a,
  #platforms .section-bar>a,
  #reviews .section-bar>a{
    max-width:28%;
    font-size:10px!important;
    line-height:1.2;
    text-align:right;
  }

  #development .dev-card{
    min-height:184px!important;
  }

  #platforms .platform-card,
  #platforms .platform-card:last-child{
    min-height:174px!important;
  }

  #reviews .review-card{
    min-height:192px!important;
  }

  .footer-main{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    text-align:left!important;
  }

  .footer nav{
    justify-content:flex-start;
  }

  .footer .socials{
    justify-content:flex-start;
  }
}

@media(max-width:620px){
  #development,
  #platforms,
  #reviews{
    margin-top:26px!important;
  }

  #development .section-bar h2,
  #platforms .section-bar h2,
  #reviews .section-bar h2{
    max-width:70%;
    font-size:clamp(19px,5.8vw,23px)!important;
  }

  #development .section-bar>a,
  #platforms .section-bar>a,
  #reviews .section-bar>a{
    max-width:30%;
    font-size:9px!important;
  }

  #development .dev-card{
    min-height:164px!important;
  }

  #platforms .platform-card,
  #platforms .platform-card:last-child{
    min-height:160px!important;
  }

  #reviews .review-card{
    min-height:172px!important;
  }

  #development .dev-card h3,
  #platforms .platform-card h3,
  #reviews .review-card h3{
    font-size:16px!important;
  }
}

@media(max-width:460px){
  .hero-main{
    min-height:455px!important;
  }

  .hero-main-copy{
    padding:20px!important;
  }

  .hero-main h1{
    font-size:36px!important;
  }

  .hero-side .mini-feature{
    flex-basis:78vw!important;
    width:78vw!important;
    max-width:78vw!important;
    min-height:205px!important;
  }

  .trend-items>a{
    flex-basis:78vw!important;
  }

  #development,
  #platforms,
  #reviews{
    margin-top:22px!important;
    padding:12px;
    border-radius:15px;
  }

  #development .section-bar,
  #platforms .section-bar,
  #reviews .section-bar{
    align-items:flex-start!important;
    gap:9px;
    margin-bottom:11px!important;
    padding-bottom:9px!important;
  }

  #development .section-bar h2,
  #platforms .section-bar h2,
  #reviews .section-bar h2{
    max-width:72%;
    font-size:19px!important;
  }

  #development .section-bar>a,
  #platforms .section-bar>a,
  #reviews .section-bar>a{
    max-width:28%;
    padding:5px 6px;
    font-size:8px!important;
  }

  #development .dev-card,
  #platforms .platform-card,
  #platforms .platform-card:last-child,
  #reviews .review-card{
    min-height:0!important;
  }

  #development .dev-card h3,
  #platforms .platform-card h3,
  #reviews .review-card h3{
    font-size:16px!important;
    line-height:1.18!important;
  }

  #development .dev-card p,
  #platforms .platform-card p,
  #reviews .review-card p{
    font-size:11px!important;
    line-height:1.5!important;
  }

  .footer nav{
    gap:8px 12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-main .outline-btn,
  .trend-items>a,
  .footer nav a{
    transition:none;
  }

  .hero-main .outline-btn:hover,
  .trend-items>a:hover{
    transform:none;
  }

  #development .dev-card:hover,
  #platforms .platform-card:hover,
  #reviews .review-card:hover{
    transform:none;
  }
}