.hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 80px;
  background:
    radial-gradient(1100px 520px at 76% 12%, rgba(37, 99, 235, .22), transparent 62%),
    radial-gradient(900px 460px at 6% 90%, rgba(37, 99, 235, .14), transparent 64%),
    linear-gradient(180deg, #060d1b 0%, #04080f 72%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { font-size: 46px; }
.hero-sub { margin-top: 22px; max-width: 440px; font-size: 16px; color: var(--text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 30px; }
.hero-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.hero-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; }
.hero-media img { width: 100%; height: auto; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); box-shadow: 0 28px 70px rgba(2,8,23,.75), 0 0 90px rgba(37,99,235,.22); transform: rotateY(-12deg) rotateX(2deg); transform-origin: left center; }

.article-section { padding-block: 72px; }
.article-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
.article-card { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); padding: 0; overflow: hidden; border: 1px solid var(--light-border); border-radius: var(--radius-lg); background: var(--light-bg); color: var(--light-text); text-align: left; text-decoration: none; cursor: pointer; font: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.article-card:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: 0 16px 38px rgba(15,23,42,.12); }
.article-card-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; align-self: center; overflow: hidden; background: #0b1220; }
.article-card-visual img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .3s ease, filter .3s ease; }
.article-card:hover .article-card-visual img { transform: scale(1.025); }
.article-card--video:hover .article-card-visual img { filter: brightness(.72); }
.article-card-body { display: flex; flex-direction: column; padding: 28px; }
.article-card-type { margin-bottom: 10px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.article-card-title { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.article-card-lead { margin-top: 10px; color: var(--light-muted); font-size: 14px; line-height: 1.55; }
.article-card-points { margin-top: 16px; }
.article-card-points li { position: relative; padding-left: 14px; color: var(--light-muted); font-size: 12.5px; line-height: 1.65; }
.article-card-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.article-card-link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 20px; color: var(--accent); font-size: 13.5px; font-weight: 700; }
.article-card-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0b1220; box-shadow: 0 12px 40px rgba(0,0,0,.32); transform: translate(-50%,-50%); transition: transform .2s ease; }
.article-card--video:hover .article-card-play { transform: translate(-50%,-50%) scale(1.08); }
.article-card-badge { position: absolute; left: 14px; bottom: 14px; padding: 5px 9px; border-radius: 5px; background: rgba(5,10,22,.88); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.article-trusted { padding-block: 38px 56px; background: #050a13; }

.article-video-open { overflow: hidden; }
.article-video-modal[hidden] { display: none; }
.article-video-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(1,5,12,.92); backdrop-filter: blur(8px); }
.article-video-dialog { width: min(1200px, 96vw); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #05080e; box-shadow: 0 30px 100px rgba(0,0,0,.75); }
.article-video-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: #0a101b; }
.article-video-brand { display: block; margin-bottom: 3px; color: #60a5fa; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.article-video-header h2 { margin: 0; color: #fff; font-size: 17px; }
.article-video-close { width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.article-video-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.article-video-player video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.article-video-loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #000; color: #aab4c5; font-size: 13px; }
.article-video-loading[hidden] { display: none; }
.article-video-spinner { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.18); border-top-color: #fff; border-radius: 50%; animation: articleSpin .8s linear infinite; }
@keyframes articleSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media img { transform: none; }
}
@media (max-width: 620px) {
  .hero { padding-block: 42px 58px; }
  .hero h1 { font-size: 38px; }
  .article-section { padding-block: 54px; }
  .article-card { grid-template-columns: 1fr; }
  .article-card-visual { height: 220px; aspect-ratio: auto; }
  .article-card-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .article-card-body { padding: 22px; }
  .article-video-modal { padding: 10px; }
  .article-video-header h2 { font-size: 14px; }
}