:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6e6e6e;
  --accent:#d04a1a;
  --border:#1f3a3a;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--bg);
  font-family:'Inter', sans-serif;
  color:var(--text);
}

/* CONTAINER (matches that tight editorial width) */
.container{
  max-width:380px;
  margin:0 auto;
  background:#fff;
}

/* TOP NAV */
.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:18px 10px;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  border-bottom:1px solid #000;
}

.nav span{
  font-weight:500;
}

.nav .divider{
  opacity:0.5;
}

/* HERO IMAGE */
.hero{
  width:100%;
  height:260px;
  overflow:hidden;
}

.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}



/* DOUBLE LINE FOOTER */
.footer-line{
  margin-top:28px;
  padding:0 20px 20px;
}

.footer-line .line{
  height:2px;
  background:var(--border);
  margin-top:6px;
}



/* STORIES SECTION */
.stories{
  padding:20px;
  background:linear-gradient(
    180deg,
    #e6edf3 0%,
    #dfe6ec 60%,
    #d6dde3 100%
  );
}

/* HEADER */
.stories-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

.stories-header h2{
  font-size:24px;
  font-weight:600;
}

/* STORY ITEM */
.story{
  display:flex;
  gap:14px;
  margin-bottom:22px;
}

.story img{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:16px;
  flex-shrink:0;
}

/* CONTENT */
.story-content{
  flex:1;
}

/* TAG */
.tag{
  font-size:14px;
  font-weight:600;
  display:inline-block;
  margin-bottom:6px;
}

.tag.blue{
  color:#2f6fd6;
}

.tag.purple{
  color:#8e44ad;
}

/* HEADLINE */
.story .headline{
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  margin-bottom:10px;
}

/* META */
.meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#777;
}

/* SOURCE ICONS (simple placeholders styled like logos) */
.source{
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-block;
}

.source.reuters{
  background:#f36f21;
}

.source.fox{
  background:#1c3faa;
}

.source.cnn{
  background:#cc0000;
}

.dot{
  opacity:0.6;
}

/* AD STYLE */
.ad{
  font-size:14px;
  color:#777;
  margin-bottom:6px;
}

.ad span{
  color:#999;
}


/* DIVIDER WRAPPER */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 20px;
}

/* LINES */
.section-divider .line{
  flex:1;
  height:4px;
  background:#b3261e; /* refined red */
  border-radius:4px;
}

/* PILL */
.section-divider .pill{
  background:#b3261e;
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:1.5px;
  padding:10px 22px;
  border-radius:999px;

  /* outer soft ring */
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.05);

  display:flex;
  align-items:center;
  justify-content:center;
}

/* GRADIENT DEPTH */
.section-divider .pill{
  background:linear-gradient(
    180deg,
    #d32f2f,
    #b3261e
  );
}



/* ===============================
   BUZZ / TECH SECTION
   Future-proof rebuild
================================ */

/* WRAPPER */
.tech-section{
  position:relative;
  background:#050505;
  padding:34px 16px 42px;
  overflow:hidden;

  display:grid;
  gap:18px;
}

/* giant background word */
.tech-vertical{
  position:absolute;
  left:-34px;
  top:52%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;

  font-size:92px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;

  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* CARD */
.tech-card{
  position:relative;
  z-index:1;

  background:linear-gradient(180deg,#d7f21d 0%, #c4df19 100%);
  border:1px solid rgba(0,0,0,.08);
  border-radius:28px;

  padding:18px;
  overflow:hidden;

  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.tech-card:active{
  transform:scale(.985);
}

.tech-card:hover{
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* TOP */
.tech-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.tech-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#111;
}

.tech-tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#111;
}

.tech-link{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#111;
  text-decoration:none;
  border-bottom:2px solid rgba(0,0,0,.6);
  padding-bottom:2px;
  white-space:nowrap;
}

/* HEADLINE AREA */
.tech-headline-wrap{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}

.tech-line{
  width:4px;
  min-width:4px;
  border-radius:999px;
  background:#111;
  min-height:100%;
}

.tech-headline-content{
  min-width:0;
}

.tech-headline-content h2{
  margin:0;

  font-family:'Playfair Display', serif;
  font-size:30px;
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.03em;
  color:#0d0d0d;

  overflow-wrap:anywhere;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* META */
.tech-meta{
  margin-top:14px;

  display:flex;
  flex-wrap:wrap;
  gap:10px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.72);
}

.tech-meta span{
  margin-left:0;
}

/* IMAGE */
.tech-image{
  margin-top:14px;
}

.tech-image img{
  width:100%;
  aspect-ratio:16/10;
  height:auto;
  object-fit:cover;
  display:block;

  border-radius:18px;
  background:#0d0d0d;
}

/* LIST */
.tech-list{
  margin-top:18px;
}

.tech-item{
  display:grid;
  grid-template-columns:10px 1fr;
  gap:12px;
  align-items:start;
}

.tech-item .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:8px;
  background:#111;
}

.tech-item-content{
  min-width:0;
}

.tech-item-content p{
  margin:0 0 8px;

  font-size:17px;
  line-height:1.32;
  font-weight:800;
  color:#101010;

  overflow-wrap:anywhere;
}

.tech-item-content .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.65);
}

/* DIVIDER */
.tech-list .divider{
  height:1px;
  background:rgba(0,0,0,.14);
  margin:18px 0;
}

/* TABLET */
@media (min-width:760px){

  .tech-section{
    padding:42px 22px 52px;
    grid-template-columns:1fr 1fr;
  }

  .tech-card:first-child{
    grid-column:1 / -1;
  }

  .tech-card:first-child .tech-headline-content h2{
    font-size:42px;
    max-width:92%;
  }

  .tech-card:first-child .tech-image img{
    aspect-ratio:16/8;
  }

  .tech-vertical{
    font-size:132px;
    left:-48px;
  }
}

/* DESKTOP */
@media (min-width:1100px){

  .tech-section{
    max-width:1400px;
    margin:0 auto;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }

  .tech-card:first-child{
    grid-column:span 2;
    grid-row:span 2;
  }

  .tech-card:first-child .tech-headline-content h2{
    font-size:54px;
  }

  .tech-vertical{
    font-size:170px;
    left:-64px;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){

  .tech-card{
    transition:none;
  }
}



/* SECTION */
.short-stories{
  background:#000;
  padding:20px 0 30px;
  color:#fff;
}

/* TOP + BOTTOM ACCENT LINE */
.stories-top-line,
.stories-bottom-line{
  height:3px;
  background:#2a2a2a;
  position:relative;
  margin:0 20px 18px;
}

.stories-top-line span,
.stories-bottom-line span{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:80px;
  background:#ff2b2b;
}

/* TITLE */
.stories-title{
  font-size:28px;
  font-weight:800;
  letter-spacing:1px;
  margin:0 20px 20px;
}

/* SCROLL CONTAINER */
.stories-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:0 20px;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.stories-scroll::-webkit-scrollbar{
  display:none;
}

/* CARD */
.story-card{
  min-width:260px;
  height:360px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;

  scroll-snap-align:start;
}

.story-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* OVERLAY */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.2),
    transparent
  );
}

/* TEXT */
.overlay p{
  font-size:20px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:14px;
}

/* META */
.story-meta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* PLAY BUTTON */
.play{
  width:42px;
  height:42px;
  background:#ff2b2b;
  border-radius:50%;
  position:relative;
}

.play::after{
  content:"";
  position:absolute;
  left:16px;
  top:12px;
  border-left:12px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

/* TIME */
.story-meta span{
  font-size:16px;
  font-weight:500;
}

/* POST WRAPPER */
.ig-post{
  background:#0f0f10;
  border-radius:14px;
  overflow:hidden;
  margin:20px;
  box-shadow:0 2px 12px rgba(0,0,0,0.6);
  font-family:system-ui, -apple-system, sans-serif;
  color:#f5f5f5;
}

/* HEADER */
.ig-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
}

.ig-header .left{
  display:flex;
  gap:10px;
  align-items:center;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}

.name{
  font-weight:700;
  font-size:14px;
  color:#ffffff;
}

.muted{
  font-weight:400;
  color:#a1a1a6;
}

.followers{
  font-size:12px;
  color:#8e8e93;
}

/* BUTTON */
.view-btn{
  background:#1d9bf0;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
  font-size:13px;
}

/* MEDIA */
.ig-media{
  position:relative;
}

.ig-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.ig-track img{
  width:100%;
  height:420px;
  object-fit:cover;
  flex-shrink:0;
  scroll-snap-align:center;
}

.ig-track::-webkit-scrollbar{
  display:none;
}

/* DOTS */
.dots{
  position:absolute;
  bottom:10px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:6px;
}

.dots span{
  width:6px;
  height:6px;
  background:rgba(255,255,255,0.4);
  border-radius:50%;
}

.dots .active{
  background:#ffffff;
}

/* LINK */
.ig-link{
  padding:12px;
  color:#4da3ff;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* ACTIONS */
.ig-actions{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  font-size:20px;
  color:#e5e5ea;
}

.ig-actions .left{
  display:flex;
  gap:14px;
}

/* LIKES */
.likes{
  padding:0 12px 10px;
  font-weight:600;
  font-size:14px;
  color:#f5f5f5;
}

/* COMMENT */
.comment-box{
  display:flex;
  align-items:center;
  border-top:1px solid rgba(255,255,255,0.08);
  padding:10px 12px;
}

.comment-box input{
  flex:1;
  border:none;
  outline:none;
  font-size:14px;
  background:transparent;
  color:#ffffff;
}

.comment-box input::placeholder{
  color:#8e8e93;
}

.ig-icon{
  font-size:18px;
  color:#8e8e93;
}


/* FEED */
.x-feed{
  background:#000;
  padding:10px 0;
  font-family:system-ui, -apple-system, sans-serif;
}

/* POST */
.x-post{
  display:flex;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* AVATAR */
.x-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}

/* CONTENT */
.x-content{
  flex:1;
}

/* HEADER */
.x-header{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}

.x-name{
  font-weight:700;
  color:#fff;
}

.x-handle,
.x-time{
  color:#71767b;
}

.x-dot{
  color:#71767b;
}

/* MORE ICON */
.x-more{
  margin-left:auto;
}

.x-more svg{
  width:18px;
  height:18px;
  fill:#71767b;
}

/* TEXT */
.x-text{
  margin-top:4px;
  font-size:15px;
  color:#e7e9ea;
  line-height:1.5;
}

/* MEDIA */
.x-media{
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
}

.x-media img{
  width:100%;
  height:220px;
  object-fit:cover;
}

/* ACTIONS */
.x-actions{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  max-width:320px;
}

.x-action{
  display:flex;
  align-items:center;
  gap:6px;
  color:#71767b;
  font-size:13px;
  cursor:pointer;
}

.x-action svg{
  width:18px;
  height:18px;
  fill:#71767b;
  transition:0.2s;
}

/* HOVER (X-style subtle) */
.x-action:hover svg{
  fill:#1d9bf0;
}

.x-action:hover span{
  color:#1d9bf0;
}


/* VERIFIED BADGE */
.x-verified{
  width:16px;
  height:16px;
  fill:#1d9bf0;
}

/* LINK */
.x-link{
  color:#1d9bf0;
}

/* EMBED */
.x-embed{
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  margin-top:10px;
  overflow:hidden;
}

.x-embed-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
}

.x-embed-header img{
  width:36px;
  height:36px;
  border-radius:50%;
}

.x-embed-header .name{
  font-weight:700;
  color:#fff;
}

.x-embed-header .handle{
  font-size:13px;
  color:#71767b;
}

.x-logo{
  margin-left:auto;
  color:#71767b;
  font-size:14px;
}

/* EMBED TEXT */
.x-embed-text{
  padding:12px;
  font-size:18px;
  color:#e7e9ea;
  line-height:1.4;
}

/* META */
.x-meta{
  margin-top:10px;
  font-size:13px;
  color:#71767b;
}

.x-meta .views{
  color:#e7e9ea;
  font-weight:500;
}

/* LIKE ACTIVE */
.x-action.liked svg{
  fill:#f91880;
}

.x-action.liked span{
  color:#f91880;
}

/* REPLY */
.x-reply{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.x-reply img{
  width:32px;
  height:32px;
  border-radius:50%;
}

.x-reply input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
}

.x-reply button{
  background:#1d9bf0;
  border:none;
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-weight:600;
}



/* FEED */
.fb-feed{
  background:#f0f2f5;
  padding:16px;
  font-family:system-ui, -apple-system, sans-serif;
}

/* POST */
.fb-post{
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

/* HEADER */
.fb-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.fb-left{
  display:flex;
  gap:10px;
  align-items:center;
}

.fb-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}

/* USER */
.fb-name{
  font-weight:600;
  font-size:15px;
}

.fb-follow{
  color:#1877f2;
  margin-left:6px;
  font-weight:500;
}

.fb-meta{
  font-size:13px;
  color:#65676b;
  display:flex;
  align-items:center;
  gap:4px;
}

.fb-meta svg{
  width:14px;
  height:14px;
  fill:#65676b;
}

/* TOP ACTIONS */
.fb-actions-top{
  display:flex;
  gap:10px;
  color:#65676b;
  font-size:18px;
}

/* TEXT */
.fb-text{
  margin-top:10px;
  font-size:15px;
  line-height:1.5;
  color:#050505;
}

.fb-link{
  color:#1877f2;
  font-weight:500;
}

/* MEDIA */
.fb-media{
  margin-top:10px;
  display:grid;
  gap:4px;
  border-radius:10px;
  overflow:hidden;
}

.fb-media.two{
  grid-template-columns:1fr 1fr;
}

.fb-media img{
  width:100%;
  height:180px;
  object-fit:cover;
}

/* STATS */
.fb-stats{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  font-size:14px;
  color:#65676b;
}

/* REACTIONS */
.reactions{
  display:flex;
}

.like,
.love{
  width:18px;
  height:18px;
  border-radius:50%;
  margin-right:-4px;
}

.like{ background:#1877f2; }
.love{ background:#f02849; }

/* ACTION BUTTONS */
.fb-actions{
  display:flex;
  justify-content:space-around;
  margin-top:10px;
  border-top:1px solid #e4e6eb;
  padding-top:8px;
}

.fb-btn{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#65676b;
  cursor:pointer;
}

.fb-btn svg{
  width:18px;
  height:18px;
  fill:#65676b;
}

/* HOVER */
.fb-btn:hover{
  background:#f0f2f5;
  padding:6px 10px;
  border-radius:6px;
}


/* CAROUSEL WRAPPER */
.social-carousel{
  margin:20px 0;
  overflow:hidden;
}

/* SCROLL TRACK */
.social-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:0 16px;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.social-track::-webkit-scrollbar{
  display:none;
}

/* EACH CARD */
.social-card{
  min-width:92%;
  max-width:92%;
  flex-shrink:0;

  scroll-snap-align:center;
}

/* CLEAN CARD SPACING FIXES */
.social-card .ig-post,
.social-card .fb-post,
.social-card .x-post{
  margin:0;
}

/* FIX X + FB FULL WIDTH INSIDE CARD */
.social-card .x-feed,
.social-card .fb-feed{
  padding:0;
  background:transparent;
}

.social-card{
  min-width:85%;
  max-width:85%;
}


/* SECTION */
.headlines{
  background:#f5f6f7;
  padding:16px;
}

/* HEADER */
.headlines-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}

.headlines-header h2{
  font-size:20px;
  font-weight:700;
}

.fire{
  font-size:20px;
}

/* SCROLL */
.headline-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;

  scroll-snap-type:x mandatory;
}

.headline-scroll::-webkit-scrollbar{
  display:none;
}

/* CARD */
.headline-card{
  min-width:240px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);

  scroll-snap-align:start;
}

.headline-card img{
  width:100%;
  height:130px;
  object-fit:cover;
}

.headline-card-body{
  padding:10px;
}

.headline-card-body p{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
}

.headline-card-body span{
  font-size:13px;
  color:#777;
}

/* LIST */
.headline-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ROW */
.headline-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  padding:12px;
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.headline-row .text{
  flex:1;
}

.headline-row p{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:8px;
}

.headline-row span{
  font-size:13px;
  color:#777;
}

.headline-row img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
}


/* DISCOVER */
.discover{
  background:#0c0c0c;
  color:#fff;
  padding:20px 16px;
}

.discover-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.discover-header h2{
  font-size:18px;
  letter-spacing:1px;
}

.discover .arrow{
  font-size:22px;
  opacity:0.6;
}

/* SCROLL */
.discover-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;

  scroll-snap-type:x mandatory;
}

.discover-scroll::-webkit-scrollbar{
  display:none;
}

/* CARD */
.discover-card{
  min-width:260px;
  background:#111;
  border-radius:14px;
  overflow:hidden;
  padding-bottom:16px;

  scroll-snap-align:start;
}

.discover-card img{
  width:100%;
  height:140px;
  object-fit:cover;
}

.discover-card h3{
  font-size:22px;
  margin:14px;
}

.discover-card p{
  font-size:16px;
  color:#cfcfcf;
  margin:0 14px;
}

/* MUTED CARD */
.discover-card.muted{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1a1a1a;
}

.app-box{
  text-align:center;
}

.bbc{
  background:#000;
  color:#fff;
  padding:10px;
  display:inline-block;
  margin-bottom:10px;
}


/* PREMIUM (UPGRADED — EXPENSIVE) */
.premium{
  margin:24px 16px;
  border-radius:22px;
  padding:28px 22px 26px;
  color:#fff;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06), transparent 50%),
    linear-gradient(135deg, #4aa3e6 0%, #1f4ed8 55%, #1639a6 100%);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* subtle grain / premium texture */
.premium::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:0.4;
  pointer-events:none;
}

/* HEADER */
.premium h3{
  font-size:18px;
  font-weight:600;
  letter-spacing:0.3px;
  opacity:0.95;
  margin-bottom:14px;
}

/* TEXT */
.premium p{
  font-size:17px;
  line-height:1.5;
  margin-bottom:22px;
  max-width:90%;
}

.premium strong{
  font-weight:700;
  color:#ffffff;
}

/* BUTTON */
.premium button{
  background:rgba(255,255,255,0.9);
  color:#0c1b3a;
  border:none;
  padding:14px 18px;
  border-radius:12px;
  font-weight:600;
  font-size:15px;

  backdrop-filter:blur(6px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15);

  transition:0.2s ease;
}

.premium button:active{
  transform:scale(0.97);
}

/* STATS */
.premium-stats{
  display:flex;
  justify-content:space-between;
  margin-top:28px;
  text-align:center;
}

.premium-stats div{
  flex:1;
}

/* BIG NUMBERS */
.premium-stats h2{
  font-size:34px;
  font-weight:600;
  margin-bottom:6px;
}

/* LABEL */
.premium-stats span{
  font-size:13px;
  color:rgba(255,255,255,0.85);
  line-height:1.4;
}


/* FOOTER — PREMIUM BLACK */
.footer{
  background:#050505;
  color:#eaeaea;
  padding:36px 20px 40px;
  position:relative;
}

/* subtle top divider */
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
}

/* TOP */
.footer-top{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:#cfcfcf;
  margin-bottom:22px;
}

/* LINKS */
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  font-size:14px;
  color:#b5b5b5;
  margin-bottom:24px;
}

/* RSS */
.rss{
  font-weight:600;
  letter-spacing:1px;
  color:#ffffff;
  margin-bottom:28px;
}

/* BRAND */
.brand{
  font-size:24px;
  font-weight:700;
  letter-spacing:0.5px;

  background:linear-gradient(
    90deg,
    #4aa3e6,
    #7ab6ff
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  opacity:0.95;
}



/* NAV */
.nav{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;

  font-size:13px;
  font-weight:500;

  color:#6a6a6a;

  overflow-x:auto;
}

/* ITEM */
.nav-item{
  display:flex;
  align-items:center;
  gap:6px;

  white-space:nowrap;

  opacity:0.65;

  transition:all 0.25s ease;
}

/* ACTIVE (feels alive) */
.nav-item.active{
  color:#111;
  opacity:1;
  font-weight:600;
}

/* HOVER = subtle lift */
.nav-item:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* ICON BASE */
.nav-item svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}

/* FIRE GLOW (premium detail) */
.fire{
  filter: drop-shadow(0 2px 6px rgba(255,120,0,0.35));
}

/* PULSE GLOW */
.pulse{
  filter: drop-shadow(0 0 6px rgba(108,60,240,0.4));
}

/* SPARK GLOW */
.spark{
  filter: drop-shadow(0 0 6px rgba(255,183,3,0.35));
}

/* DIVIDER */
.divider{
  width:1px;
  height:12px;
  background:rgba(0,0,0,0.12);
  flex-shrink:0;
}





/* =====================================
   BUZZ PAGED HORIZONTAL RAIL
   EXACTLY 5 CARDS PER SWIPE
===================================== */

.tech-section{
  background:#050505;
  padding:26px 16px 34px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
}

.tech-section::-webkit-scrollbar{
  display:none;
}

/* each page = one snap panel */
.tech-page{
  width:100%;
  min-width:100%;
  scroll-snap-align:start;
  flex:0 0 100%;
}

/* rail */
.tech-pages{
  display:flex;
  gap:16px;
  width:max-content;
}

/* 5 cards layout */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(3, auto);
  gap:14px;
  width:calc(100vw - 32px);
}

/* featured big card */
.tech-grid .tech-card:first-child{
  grid-column:1 / -1;
}

/* CARD */
.tech-card{
  background:linear-gradient(180deg,#d7f21d 0%, #c4df19 100%);
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
}

/* IMAGE */
.tech-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}

.tech-grid .tech-card:first-child .tech-media{
  aspect-ratio:16/8;
}

.tech-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* CONTENT */
.tech-content{
  padding:12px;
}

.tech-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:#111;
}

.tech-title{
  margin:0;
  font-size:18px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.03em;
  color:#111;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.tech-grid .tech-card:first-child .tech-title{
  font-size:28px;
}

.tech-meta{
  margin-top:8px;
  font-size:11px;
  color:rgba(0,0,0,.72);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tech-empty{
  color:rgba(255,255,255,.62);
  padding:18px;
}

/* tablet */
@media (min-width:760px){

  .tech-grid{
    width:720px;
    grid-template-columns:repeat(2,1fr);
  }

  .tech-grid .tech-card:first-child .tech-title{
    font-size:34px;
  }

  .tech-title{
    font-size:20px;
  }
}

/* desktop */
@media (min-width:1100px){

  .tech-grid{
    width:980px;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,auto);
  }

  .tech-grid .tech-card:first-child{
    grid-column:span 2;
    grid-row:span 2;
  }

  .tech-grid .tech-card:first-child .tech-title{
    font-size:40px;
  }
}


/* =========================
HEADER + DRAWER
CENTERED LOGO / TRUE LONG PILL
Your logo drifted right like it had unresolved issues.
This fixes alignment properly.
========================= */

/* HEADER WRAPPER */
.x-header{
  position:sticky;
  top:0;
  z-index:1000;

  padding:10px 12px 12px;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.96),
    rgba(255,255,255,.78),
    transparent
  );

  backdrop-filter:blur(14px);
}

/* LONG PILL */
.x-header-inner{
  position:relative;

  width:100%;
  min-height:72px;
  padding:0 18px;

  background:#fff;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center; /* true center */

  overflow:hidden;

  box-shadow:
    0 10px 28px rgba(0,0,0,.05),
    0 2px 8px rgba(0,0,0,.04);
}

/* soft sheen */
.x-header-inner::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.72) 34%,
    transparent 64%
  );

  opacity:.45;
  pointer-events:none;
}

/* LOGO PERFECT CENTER */
.x-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  text-decoration:none;
  white-space:nowrap;


font-family:'Audiowide',sans-serif;
  font-size:31px;
  line-height:1;
  font-weight:400;
  letter-spacing:-0.02em;

  color:#111;

  z-index:3;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.x-logo span{
  color:#6d28d9;
}


/* RIGHT ACTIONS */
.x-actions{
  margin-left:auto;

  position:relative;
  z-index:4;

  display:flex;
  align-items:center;
  gap:12px;
}

/* ICON BUTTON */
.x-icon-btn{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:none;
  border-radius:50%;
  background:transparent;

  color:#111;
  cursor:pointer;

  transition:transform .14s ease, opacity .14s ease;
}

.x-icon-btn:hover{
  opacity:.72;
}

.x-icon-btn:active{
  transform:scale(.95);
}

.x-icon-btn svg{
  width:24px;
  height:24px;
  display:block;
}

/* =========================
DRAWER
========================= */

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(3px);
  z-index:1400;

  opacity:0;
  transition:opacity .22s ease;
}

.drawer-overlay.active{
  opacity:1;
}

.drawer{
  position:fixed;
  top:0;
  left:0;

  width:min(86vw,340px);
  height:100dvh;

  background:#fff;
  z-index:1500;

  display:flex;
  flex-direction:column;

  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);

  box-shadow:18px 0 40px rgba(0,0,0,.18);
}

.drawer.active{
  transform:translateX(0);
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:18px 16px;
  border-bottom:1px solid #ececec;
}

.drawer-brand{
  font-size:24px;
  font-weight:900;
  letter-spacing:-.04em;
  color:#111;
}

.drawer-brand span{
  color:#6d28d9;
}

.drawer-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  cursor:pointer;
  font-size:18px;
}

.drawer-nav{
  flex:1;
  overflow:auto;
  padding:12px;
}

.drawer-link{
  display:flex;
  align-items:center;

  min-height:54px;
  padding:0 14px;
  margin-bottom:4px;

  border-radius:14px;

  text-decoration:none;
  color:#111;

  font-size:16px;
  font-weight:700;
}

.drawer-link:hover,
.drawer-link:active{
  background:#f6f6f6;
}

.drawer-foot{
  padding:14px;
  border-top:1px solid #ececec;
}

.drawer-cta{
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  text-decoration:none;
  background:#111;
  color:#fff;

  font-size:15px;
  font-weight:800;
}

/* BODY LOCK */
body.drawer-open{
  overflow:hidden;
  touch-action:none;
}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

  .x-header{
    padding:10px;
  }

  .x-header-inner{
    min-height:68px;
    padding:0 16px;
  }

  .x-logo{
    font-size:26px;
  }

  .x-actions{
    gap:10px;
  }

  .x-icon-btn{
    width:38px;
    height:38px;
  }

  .x-icon-btn svg{
    width:22px;
    height:22px;
  }
}

@media (max-width:340px){

  .x-header-inner{
    min-height:64px;
  }

  .x-logo{
    font-size:23px;
  }

  .drawer{
    width:92vw;
  }
}


/* =========================
MOST TRENDS
========================= */

/* =========================
MOST TRENDS - PREMIUM COMPACT
========================= */

.mt-wrap{
  padding:14px 16px 20px;
}

.mt-card{
  background:#f8f8f6;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 10px 24px rgba(0,0,0,.05),
    0 2px 8px rgba(0,0,0,.03);
}

.mt-line{
  height:3px;
  background:linear-gradient(90deg,#cf2e2e,#e14b4b);
}

.mt-head{
  padding:18px 18px 8px;
  text-align:center;
}

.mt-title{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:500;
  font-size:42px;
  line-height:.95;
  letter-spacing:-.03em;
  color:#111;
}

.mt-scroll{
  max-height:420px;
  overflow-y:auto;
  padding:4px 0 6px;
}

.mt-scroll::-webkit-scrollbar{
  width:4px;
}

.mt-scroll::-webkit-scrollbar-thumb{
  background:#d2d2d2;
  border-radius:999px;
}

.mt-item{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:start;

  padding:14px 18px;
  cursor:pointer;
  transition:background .18s ease;
}

.mt-item:hover{
  background:#f1f1ef;
}

.mt-item:not(:last-child){
  border-bottom:1px solid rgba(0,0,0,.05);
}

.mt-rank{
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid #c63c3c;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#c63c3c;
  font-size:17px;
  font-weight:900;
}

.mt-text{
  font-size:16px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.025em;
  color:#111;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.mt-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 18px;
  border-top:1px solid rgba(0,0,0,.05);
  background:#fafaf8;
}

.mt-foot span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#777;
}

.mt-foot button{
  border:none;
  background:#111;
  color:#fff;

  height:38px;
  padding:0 16px;
  border-radius:999px;

  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.mt-foot button:active{
  transform:scale(.97);
}

.mt-loading,
.mt-empty{
  padding:22px 18px;
  text-align:center;
  font-size:14px;
  color:#777;
}

/* small devices */
@media (max-width:360px){

  .mt-title{
    font-size:36px;
  }

  .mt-item{
    grid-template-columns:44px 1fr;
    gap:10px;
    padding:12px 16px;
  }

  .mt-rank{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .mt-text{
    font-size:15px;
  }

  .mt-foot button{
    height:36px;
    padding:0 14px;
  }
}


/* ==========================================
ANTI-SAVE / NATIVE-ASSET FEEL
Apply to homepage hero image only.
Because users long-press everything like raccoons.
========================================== */

/* HERO WRAP */
.hero{
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* IMAGE */
.hero img{
  display:block;
  width:100%;
  height:auto;

  pointer-events:none;                 /* no tap / hold on image itself */
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;

  object-fit:cover;

  /* feels rendered into page */
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* INVISIBLE INTERACTION SHIELD */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;

  background:transparent;

  /* captures long press instead of image */
  pointer-events:auto;

  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* Optional subtle polish */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.02),
      rgba(0,0,0,.02)
    );
}

/* Stop accidental highlight anywhere inside */
.hero,
.hero *{
  -webkit-tap-highlight-color:transparent;
}

/* MOBILE SAFETY */
@media (max-width:768px){

  .hero{
    touch-action:manipulation;
  }

}


.content{
  padding:22px 22px 30px;
  text-align:center;
}

.category{
  margin:0 0 16px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#d85a22;
}

/* HERO TEXT SECTION */
.content .title{
  margin:0 auto;
  max-width:320px;

  font-family:'Audiowide',sans-serif;
  font-size:clamp(26px,7.4vw,42px);
  line-height:1.34;
  letter-spacing:-0.01em;
  font-weight:400;

  color:#111;
  text-align:center;
}

.content .author{
  margin-top:18px;

  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#7a7a7a;
}

.category{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:#d85a22;
}



/* ==========================================
GLOBAL PREMIUM ORANGE OVERRIDE
Drop this LAST in your CSS.
Because random purple values breeding across files is a classic human hobby.
========================================== */

:root{
  --brand-orange:#ff6a00;
  --brand-orange-deep:#e25500;
  --brand-orange-soft:#ff8a33;
}

/* MAIN TEXT / LOGOS */
.x-logo span,
.drawer-brand span,
.brand,
a span{
  color:var(--brand-orange) !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
}

/* ANY OLD PURPLE CLASSES */
.tag.purple,
.purple{
  color:var(--brand-orange) !important;
}

/* JUST-IN ICON / PULSE */
.pulse,
.nav-item .pulse{
  filter:drop-shadow(0 0 8px rgba(255,106,0,.35)) !important;
}

.pulse circle{
  fill:var(--brand-orange) !important;
}

/* SVG PURPLE FILLS / STROKES */
svg [fill="#6c3cf0"],
svg [fill="#6d28d9"],
svg [fill="#8e44ad"],
svg [fill="#7c3aed"],
svg [fill="#9333ea"]{
  fill:var(--brand-orange) !important;
}

svg [stroke="#6c3cf0"],
svg [stroke="#6d28d9"],
svg [stroke="#8e44ad"],
svg [stroke="#7c3aed"],
svg [stroke="#9333ea"]{
  stroke:var(--brand-orange) !important;
}

/* INLINE STYLES CONTAINING PURPLE */
[style*="#6c3cf0"],
[style*="#6d28d9"],
[style*="#8e44ad"],
[style*="#7c3aed"],
[style*="#9333ea"]{
  color:var(--brand-orange) !important;
}

/* BUTTON / PILLS / ACTIVE UI */
.section-divider .pill,
.mt-rank,
.mt-line{
  background:linear-gradient(
    180deg,
    var(--brand-orange-soft),
    var(--brand-orange-deep)
  ) !important;
  border-color:var(--brand-orange-deep) !important;
}

.mt-rank{
  color:#fff !important;
}

/* HOVER ACCENTS */
.nav-item.active,
.nav-item:hover{
  color:var(--brand-orange-deep) !important;
}

/* CLEAN ORANGE GLOW */
.x-logo span,
.drawer-brand span{
  text-shadow:0 0 18px rgba(255,106,0,.12);
}




/* =====================================
GLOBAL BRAND FONT SYSTEM
Because consistency should not be optional.
===================================== */

:root{
  --brand-font:'Audiowide', sans-serif;
}

/* Any known brand text areas */
.x-logo,
.drawer-brand,
.brand,
.author,
.premium h3,
.footer-top span:first-child{
  font-family:var(--brand-font) !important;
  letter-spacing:-0.02em;
}

/* Generic helper class */
.brand-font{
  font-family:var(--brand-font) !important;
  letter-spacing:-0.02em;
}

/* =====================================
HERO HEADLINE FIX
The circled text was shouting.
Now it speaks with money.
===================================== */

.content{
  padding:26px 22px 34px;
}

.content .title{
  max-width:340px;
  font-family:'Audiowide', sans-serif;
  font-size:clamp(23px, 6.2vw, 34px);
  line-height:1.28;
  letter-spacing:-0.015em;
  font-weight:400;
  color:#0f0f0f;
  text-align:center;
  margin:0 auto;
}

.content .author{
  margin-top:20px;
  font-size:13px;
  font-weight:500;
  color:#7a7a7a;
  text-transform:uppercase;
}

.category{
  margin-bottom:18px;
}

/* cleaner mobile fit */
@media (max-width:420px){
  .content .title{
    max-width:315px;
    font-size:clamp(21px, 6vw, 30px);
    line-height:1.26;
  }
}

/* ==========================================
HERO CTA REBUILD (cleaner / premium / fits layout)
Your current button looks like a lost marshmallow.
Replace previous .hero-explore CSS with this.
========================================== */

.hero-explore-wrap{
  margin-top:26px;
  display:flex;
  justify-content:center;
}

.hero-explore{
  height:52px;
  min-width:196px;
  padding:0 10px 0 18px;

  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  text-decoration:none;
  color:#ff6a00;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);

  background:
    linear-gradient(135deg,#ffffff 0%, #fff8f2 58%, #fff2e8 100%);

  box-shadow:
    0 14px 28px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.hero-explore:hover,
.hero-explore:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,106,0,.18);

  box-shadow:
    0 18px 34px rgba(0,0,0,.08);
}

.hero-explore:active{
  transform:scale(.985);
}

.hero-explore-text{
  font-family:'Audiowide',sans-serif;
  font-size:13px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}

.hero-explore-text em{
  font-style:normal;
  color:#ff6a00;
}

.hero-explore-icon{
  width:34px;
  height:34px;
  border-radius:50%;

  display:grid;
  place-items:center;

  background:linear-gradient(180deg,#ff7d1f,#ff6a00);
  color:#fff;

  box-shadow:
    0 8px 18px rgba(255,106,0,.24);

  flex-shrink:0;
}

.hero-explore-icon svg{
  width:15px;
  height:15px;
  display:block;
}

.hero-explore-icon path{
  stroke-width:2.4;
}

/* mobile tighten */
@media (max-width:420px){

  .hero-explore{
    height:50px;
    min-width:182px;
    padding:0 9px 0 16px;
  }

  .hero-explore-text{
    font-size:12px;
  }

  .hero-explore-icon{
    width:32px;
    height:32px;
  }
}