/* =================================================================
   Dee Digital Solutions — detail pages (services / work / blog / pages)
   ================================================================= */

/* Breadcrumb / back */
.back-row{padding-top:120px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:600;transition:color .3s}
.back:hover{color:var(--cyan)}
.crumbs{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.crumbs .sep{margin:0 10px;opacity:.5}
.crumbs .now{color:var(--cyan)}

/* Case / service hero */
.case-hero{padding:48px 0 80px}
.case-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.35);color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.case-h1{font-size:clamp(38px,5.4vw,80px);font-weight:900;letter-spacing:-0.03em;line-height:1.04;margin:24px 0 0;text-wrap:balance;max-width:1100px}
.case-h1 .grad{background:linear-gradient(95deg,#00F5FF 0%,#5BB8FF 45%,#9B30FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.case-lede{font-size:18px;color:#c9c9d6;line-height:1.6;margin-top:28px;max-width:760px}
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:60px;padding-top:32px;border-top:1px solid var(--stroke)}
.case-meta .k{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.case-meta .v{font-size:15px;color:#fff;font-weight:600;margin-top:8px;line-height:1.4}

/* Featured visual */
.case-visual{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--stroke);margin-top:60px;background:#0c0c14;min-height:640px;height:680px}
.case-visual .case-host{position:absolute;inset:0}
/* Live-demo variant: interactive demos get a guaranteed, device-appropriate
   height. The generic min-height is cleared per-breakpoint so phones aren't
   over-tall or clipping the phone-prototype demo, and scrollable regions get
   momentum scrolling on touch. */
.case-visual.has-demo .case-host{-webkit-overflow-scrolling:touch}
.case-visual.has-demo .case-host *{-webkit-overflow-scrolling:touch}
.case-visual img{width:100%;height:100%;object-fit:cover}
.case-visual .badge{position:absolute;right:32px;top:28px;z-index:10;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:600;border:1px solid var(--stroke)}

/* Stat strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:48px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:linear-gradient(180deg,rgba(45,0,87,.12),transparent)}
.kpi{padding:0 28px}
.kpi .v{font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.1;color:var(--cyan);text-shadow:0 0 24px rgba(0,245,255,.4);letter-spacing:-0.02em}
.kpi .label{font-size:13px;color:#cfcfdc;margin-top:12px;font-weight:500}
.kpi .sub{font-size:11px;color:var(--grey-2);margin-top:6px;letter-spacing:.05em}

/* Body sections */
.case-body{padding:80px 0}
.case-grid{display:grid;grid-template-columns:240px 1fr;gap:60px;align-items:start}
.case-section + .case-section{margin-top:64px}
.case-section .label{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan)}
.case-section .label .n{color:var(--grey-2);margin-right:8px}
.case-section h2{font-size:clamp(28px,3vw,42px);font-weight:900;letter-spacing:-0.02em;line-height:1.1;margin-bottom:18px;color:#fff;max-width:760px}
.case-section p{font-size:16px;color:#c9c9d6;line-height:1.7;max-width:720px}
.case-section p + p{margin-top:14px}
.case-section ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.case-section ul li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:#c9c9d6;line-height:1.55;max-width:720px}
.case-section ul li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-top:9px}

/* Tech / included pills */
.tech-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;max-width:760px}
.tech-pill{padding:8px 14px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.04em;border:1px solid var(--stroke);background:rgba(255,255,255,.03);color:#cfcfdc;transition:all .3s ease}
.tech-pill:hover{border-color:rgba(0,245,255,.5);color:var(--cyan);box-shadow:0 0 18px -4px rgba(0,245,255,.5)}

/* Quote */
.case-quote{position:relative;padding:80px 0;text-align:center;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:linear-gradient(180deg,#0a0a0f,#0c0814)}
.case-quote .mark{font-family:Georgia,serif;font-size:200px;line-height:0;color:var(--violet-3);opacity:.5;text-shadow:0 0 40px rgba(155,48,255,.5);position:absolute;left:50%;top:80px;transform:translateX(-50%)}
.case-quote .text{position:relative;font-size:clamp(20px,2.4vw,30px);font-weight:300;line-height:1.5;color:#fff;letter-spacing:-0.01em;max-width:900px;margin:50px auto 0;padding-top:30px}
.case-quote .who{margin-top:32px;font-size:12px;color:var(--cyan);font-weight:600;letter-spacing:.22em;text-transform:uppercase}

/* Next link */
.next-block{padding:100px 0;border-top:1px solid var(--stroke)}
.next-head{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-2);font-weight:600;margin-bottom:18px}
.next-link{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:36px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);transition:padding .35s ease}
.next-link:hover{padding:46px 0}
.next-link h2{font-size:clamp(28px,4vw,56px);font-weight:900;letter-spacing:-0.02em;line-height:1.05;color:#fff;transition:color .3s ease}
.next-link:hover h2{color:var(--cyan)}
.next-link .arrow-big{width:64px;height:64px;border-radius:50%;border:1px solid var(--stroke);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:none;transition:.3s ease}
.next-link:hover .arrow-big{background:var(--cyan);color:#001318;border-color:var(--cyan);transform:translateX(6px)}

/* Bottom CTA */
.case-cta{padding:120px 0;text-align:center;position:relative;overflow:hidden;background:linear-gradient(120deg,#2D0057,#6B00B6,#9B30FF,#00F5FF);background-size:300% 300%;animation:gradShift 14s ease infinite}
.case-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 30%,rgba(10,10,15,0),rgba(10,10,15,.5))}
.case-cta .wrap{position:relative}
.case-cta h2{color:#fff;font-size:clamp(36px,5vw,68px);font-weight:900;letter-spacing:-0.02em;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.case-cta p{color:rgba(255,255,255,.85);font-size:17px;max-width:560px;margin:18px auto 32px}

/* Visual placeholders */
.viz{position:absolute;inset:0;background:linear-gradient(135deg,#190938,#0a0a0f)}
.viz.v1{background:radial-gradient(70% 60% at 80% 20%,rgba(0,245,255,.5),transparent 60%),radial-gradient(60% 80% at 20% 100%,rgba(107,0,182,.85),transparent 60%),linear-gradient(135deg,#190938,#0a0a0f)}
.viz.v2{background:radial-gradient(70% 70% at 30% 30%,rgba(155,48,255,.7),transparent 60%),radial-gradient(60% 60% at 80% 80%,rgba(0,245,255,.4),transparent 60%),linear-gradient(135deg,#0a0a0f,#190938)}
.viz.v3{background:conic-gradient(from 220deg at 70% 30%,rgba(0,245,255,.45),rgba(155,48,255,.6),rgba(45,0,87,.85),rgba(0,245,255,.45)),linear-gradient(135deg,#0a0a0f,#0a0a0f)}
.viz.v4{background:radial-gradient(60% 60% at 50% 30%,rgba(0,245,255,.55),transparent 65%),linear-gradient(160deg,#0d0a1f,#1a0438 60%,#0a0a0f)}
.viz.v5{background:radial-gradient(70% 70% at 75% 60%,rgba(155,48,255,.7),transparent 60%),radial-gradient(50% 50% at 25% 30%,rgba(0,245,255,.35),transparent 60%),linear-gradient(135deg,#0a0a0f,#160a2e)}
.viz.v6{background:radial-gradient(60% 60% at 20% 80%,rgba(0,245,255,.5),transparent 60%),radial-gradient(60% 60% at 80% 20%,rgba(155,48,255,.55),transparent 60%),linear-gradient(135deg,#0a0a0f,#1a0a3a)}
.viz.v7{background:radial-gradient(80% 80% at 50% 50%,rgba(155,48,255,.6),transparent 65%),radial-gradient(40% 40% at 90% 90%,rgba(0,245,255,.5),transparent 60%),linear-gradient(135deg,#0c0820,#0a0a0f)}
.viz.v8{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(0,245,255,.07) 16px 17px),radial-gradient(60% 60% at 70% 40%,rgba(0,245,255,.4),transparent 60%),linear-gradient(135deg,#0a0a0f,#190938)}
.viz-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;z-index:2}
.viz-label span{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff;opacity:.75;font-weight:600}
.viz-label h3{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-0.02em;color:#fff;margin-top:14px;max-width:640px;line-height:1.1}

/* ===== Mockup primitives used by the interactive demos ===== */
.win{position:relative;background:#0d0d18;height:100%;display:flex;flex-direction:column}
.win-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.02);flex:none}
.win-dots{display:flex;gap:6px}
.win-dots span{width:10px;height:10px;border-radius:50%;background:#3b3b48}
.win-url{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:8px;padding:5px 12px;font-size:11px;font-family:ui-monospace,Menlo,monospace;color:#c0c0d0;letter-spacing:.02em}
.win-url .lock{color:var(--cyan);margin-right:6px}
.win-content{flex:1;padding:24px;overflow:hidden;position:relative}
.chat{display:flex;flex-direction:column;gap:10px;padding:14px;height:100%;overflow:hidden}
.bubble{max-width:78%;padding:10px 14px;border-radius:14px;font-size:12.5px;line-height:1.45}
.bubble.them{background:rgba(255,255,255,.05);border:1px solid var(--stroke);align-self:flex-start;border-bottom-left-radius:4px;color:#e6e6f0}
.bubble.me{background:linear-gradient(135deg,#00F5FF 0%,#5BB8FF 100%);color:#001318;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.bubble.typing{display:flex;gap:4px}
.bubble.typing span{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6;animation:typing 1.4s ease-in-out infinite}
.bubble.typing span:nth-child(2){animation-delay:.2s}
.bubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.phone{width:260px;height:540px;border-radius:38px;border:8px solid #1a1a26;background:#000;position:relative;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,245,255,.3),0 0 0 1px rgba(255,255,255,.05)}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:80px;height:22px;background:#000;border-radius:14px;z-index:5}
.phone-screen{position:absolute;inset:0;background:#0a0a0f;overflow:hidden}

/* ===== Archive grids (services / work / blog) ===== */
.dds-archive{padding:160px 0 120px;min-height:60vh}
.archive-head{margin-bottom:60px;max-width:760px}
.archive-head h1{font-size:clamp(40px,5vw,72px);font-weight:900;letter-spacing:-0.02em;line-height:1.05}
.archive-head p{color:var(--grey);font-size:17px;margin-top:18px;line-height:1.6}

/* Blog */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:start}
.post-list{display:flex;flex-direction:column;gap:34px}
.post-card{border:1px solid var(--stroke);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.post-card:hover{border-color:rgba(0,245,255,.4);box-shadow:0 30px 80px -30px rgba(0,245,255,.4);transform:translateY(-3px)}
.post-card .thumb{height:260px;position:relative;overflow:hidden;border-bottom:1px solid var(--stroke)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:30px 32px 34px}
.post-card .pmeta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
.post-card h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-0.01em;line-height:1.18;margin:14px 0 12px}
.post-card h2 a{color:#fff;transition:color .3s}
.post-card h2 a:hover{color:var(--cyan)}
.post-card .excerpt{color:var(--grey);font-size:15px;line-height:1.65}
.post-card .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:600}

/* Single post / page content */
.single-wrap{padding:150px 0 110px}
.entry-hero{max-width:820px;margin:0 auto 50px;text-align:center}
.entry-hero .pmeta{justify-content:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);font-weight:600;display:flex;gap:14px}
.entry-hero h1{font-size:clamp(34px,4.6vw,64px);font-weight:900;letter-spacing:-0.02em;line-height:1.08;margin-top:20px}
.entry-feat{max-width:1100px;margin:0 auto 60px;border-radius:24px;overflow:hidden;border:1px solid var(--stroke)}
.entry-feat img{width:100%;height:auto;display:block}
.entry-content{max-width:760px;margin:0 auto;font-size:17px;line-height:1.8;color:#cfcfdc}
.entry-content > *{margin-bottom:24px}
.entry-content h2{font-size:32px;font-weight:800;color:#fff;letter-spacing:-0.01em;margin-top:44px}
.entry-content h3{font-size:24px;font-weight:700;color:#fff;margin-top:36px}
.entry-content a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:24px}
.entry-content li{margin-bottom:10px}
.entry-content blockquote{border-left:3px solid var(--cyan);padding-left:24px;font-size:20px;font-style:italic;color:#fff}
.entry-content img{border-radius:14px}
.entry-content code{background:rgba(255,255,255,.06);padding:2px 7px;border-radius:5px;font-size:.9em}
.entry-content pre{background:#06060a;border:1px solid var(--stroke);border-radius:12px;padding:20px;overflow:auto}

/* Sidebar / widgets */
.dds-sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:28px}
.widget{border:1px solid var(--stroke);border-radius:18px;padding:24px;background:rgba(255,255,255,.02)}
.widget-title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:16px}
.widget ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.widget a{color:var(--grey);font-size:14px;transition:color .25s}
.widget a:hover{color:var(--cyan)}
.widget select,.widget input[type=search]{width:100%;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:10px;color:#fff;font-family:inherit}

/* Pagination & comments */
.dds-pagination{margin-top:60px;display:flex;gap:8px;flex-wrap:wrap}
.dds-pagination .page-numbers{padding:10px 16px;border:1px solid var(--stroke);border-radius:10px;color:#cfcfdc;font-size:14px;font-weight:600;transition:.25s}
.dds-pagination .page-numbers.current,.dds-pagination .page-numbers:hover{background:var(--cyan);color:#001318;border-color:var(--cyan)}
.comments-area{max-width:760px;margin:70px auto 0;border-top:1px solid var(--stroke);padding-top:50px}
.comments-area .comment-list{list-style:none}
.comments-area h2,.comments-area h3{color:#fff}
.comment-body{border:1px solid var(--stroke);border-radius:14px;padding:20px 22px;margin-bottom:18px}
.comment-author{font-weight:700;color:#fff}
.comment-meta{font-size:12px;color:var(--grey-2)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:10px;color:#fff;font-family:inherit;margin-top:6px}
.comment-form label{font-size:13px;color:#cfcfdc;display:block;margin-top:16px}

/* 404 / search empty */
.dds-empty{padding:200px 0 140px;text-align:center;min-height:70vh}
.dds-empty h1{font-size:clamp(60px,12vw,160px);font-weight:900;letter-spacing:-0.04em;background:linear-gradient(95deg,#00F5FF,#9B30FF);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.dds-empty p{color:var(--grey);font-size:18px;margin:20px auto 32px;max-width:480px}

/* Search form */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type=search]{flex:1;padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:999px;color:#fff;font-family:inherit;font-size:15px}
.search-form button{padding:14px 26px;border-radius:999px;border:none;background:var(--cyan);color:#001318;font-weight:700;cursor:pointer}

@media (max-width:1024px){
  .case-grid{grid-template-columns:1fr;gap:18px}
  .case-meta{grid-template-columns:1fr 1fr}
  .stats-strip{grid-template-columns:1fr 1fr;gap:32px}
  .case-visual{height:380px}
  .case-visual.has-demo{height:560px;min-height:0}
  .blog-layout{grid-template-columns:1fr;gap:40px}
  .dds-sidebar{position:static}
}
@media (max-width:768px){
  .case-meta,.stats-strip{grid-template-columns:1fr}
  .kpi{padding:0}
  .next-link{flex-direction:column;align-items:flex-start;gap:18px}
  .post-card .thumb{height:200px}
  .case-visual.has-demo{height:600px;min-height:0}
}
@media (max-width:560px){
  .case-visual.has-demo{height:620px;min-height:0}
}

/* =================================================================
   Blog / News Hub
   ================================================================= */
.hub{padding-top:150px}
.hub-head{max-width:760px;margin-bottom:64px}
.hub-head h1{font-size:clamp(40px,5.5vw,80px);font-weight:900;letter-spacing:-0.03em;line-height:1.02;margin-top:18px}
.hub-head p{color:var(--grey);font-size:18px;line-height:1.6;margin-top:20px}
.hub-section-label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:28px}
.hub-section-label .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}

/* Featured */
.hub-featured{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
.feat-card{position:relative;border:1px solid var(--stroke);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));display:flex;flex-direction:column;transition:border-color .35s,box-shadow .35s,transform .35s}
.feat-card:hover{border-color:rgba(0,245,255,.45);box-shadow:0 30px 80px -30px rgba(0,245,255,.45);transform:translateY(-4px)}
.feat-thumb{position:relative;overflow:hidden;display:block}
.feat-thumb img,.feat-thumb .viz{width:100%;height:100%;object-fit:cover;display:block}
.feat-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,0) 35%,rgba(10,10,15,.7) 100%)}
.feat-meta{padding:26px 28px 28px;display:flex;flex-direction:column;gap:10px}
.feat-tags{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.feat-tags a{color:var(--cyan)}
.feat-title{font-weight:800;letter-spacing:-0.01em;line-height:1.15;color:#fff}
.feat-excerpt{color:var(--grey);font-size:14.5px;line-height:1.6}
.feat-date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);font-weight:600;margin-top:4px}
.hub-featured .feat-main{grid-row:span 3}
.hub-featured .feat-main .feat-thumb{aspect-ratio:16/10}
.hub-featured .feat-main .feat-title{font-size:clamp(24px,2.4vw,34px)}
.feat-side{flex-direction:row;align-items:stretch}
.feat-side .feat-thumb{width:42%;flex:none}
.feat-side .feat-meta{padding:18px 20px;justify-content:center}
.feat-side .feat-title{font-size:16px}
.feat-side .feat-excerpt{display:none}

/* Video grid */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.yt-embed{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);background:#06060a;box-shadow:0 30px 80px -40px rgba(0,245,255,.35)}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Filter chips */
.hub-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.filter-chip{padding:9px 16px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.02);color:#cfcfdc;font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:.25s}
.filter-chip:hover{border-color:rgba(0,245,255,.4);color:var(--cyan)}
.filter-chip.on{background:var(--cyan);color:#001318;border-color:var(--cyan);font-weight:600;box-shadow:0 0 24px -6px rgba(0,245,255,.7)}

/* Hub layout */
.hub-layout{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start;margin-top:8px}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hub-card{transition:border-color .35s,box-shadow .35s,transform .35s,opacity .4s,scale .4s}
.hub-card.filtered-out{display:none}
.hub-card .body{padding:24px 24px 26px}
.hub-card h2{font-size:20px;margin:12px 0 10px}
.hub-empty-filter{color:var(--grey);font-size:16px;padding:30px 0}

/* Sidebar bits */
.hub-sidebar .widget{margin-bottom:0}
.trend-list{display:flex;flex-direction:column}
.trend-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--stroke)}
.trend-item:last-child{border-bottom:none}
.trend-n{font-size:13px;font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(0,245,255,.7);flex:none;line-height:1.3}
.trend-t{font-size:13.5px;color:#e6e6f0;font-weight:600;line-height:1.35;transition:color .25s}
.trend-item:hover .trend-t{color:var(--cyan)}
.yt-side-list{display:flex;flex-direction:column;gap:12px}
.yt-side{display:flex;gap:12px;align-items:center}
.yt-side-thumb{position:relative;width:92px;height:56px;flex:none;border-radius:8px;overflow:hidden;border:1px solid var(--stroke)}
.yt-side-thumb img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;background:rgba(0,0,0,.35);text-shadow:0 0 8px rgba(0,0,0,.6)}
.yt-side-meta{display:flex;flex-direction:column;gap:3px}
.yt-side-tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.yt-side-title{font-size:13px;color:#e6e6f0;font-weight:600}
.ad-widget{display:flex;flex-direction:column;gap:8px}
.ad-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.ad-slot{display:flex;align-items:center;justify-content:center;min-height:250px;overflow:hidden}
.ad-slot img{max-width:100%;height:auto;border-radius:8px}
.ad-placeholder{flex-direction:column;gap:6px;border:1px dashed var(--stroke);border-radius:12px;color:var(--grey-2);font-size:13px;font-weight:600;text-align:center;padding:20px}
.ad-placeholder small{font-size:10px;color:var(--grey-2);font-weight:400;opacity:.7}

/* Homepage banner */
.home-banner{padding:0 0 40px}
.home-banner .ad-slot{min-height:0}

/* Newsletter */
.news-block{margin-top:100px;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(120deg,#2D0057,#6B00B6,#9B30FF,#00F5FF);background-size:300% 300%;animation:gradShift 14s ease infinite;padding:1px}
.news-inner{background:rgba(8,6,16,.86);border-radius:27px;padding:56px 60px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.news-copy h2{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-0.02em;color:#fff}
.news-copy p{color:#cfcfdc;font-size:15px;margin-top:12px;line-height:1.6;max-width:420px}
.news-signup{display:flex;gap:10px;flex-wrap:wrap}
.news-signup input[type=email]{flex:1;min-width:200px;padding:15px 18px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:15px;outline:none}
.news-signup input[type=email]:focus{border-color:var(--cyan)}
.news-fine{display:block;margin-top:12px;font-size:11px;color:var(--grey-2);letter-spacing:.04em}

@media (max-width:1024px){
  .hub-layout{grid-template-columns:1fr;gap:40px}
  .hub-featured{grid-template-columns:1fr}
  .hub-featured .feat-main{grid-row:auto}
  .news-inner{grid-template-columns:1fr;gap:24px;padding:40px}
}
@media (max-width:768px){
  .video-grid,.post-grid{grid-template-columns:1fr}
  .feat-side{flex-direction:column}
  .feat-side .feat-thumb{width:100%;aspect-ratio:16/9}
  .feat-side .feat-excerpt{display:block}
}