/* Platforms — shared + distinct accents */
.platform-bar { height:28px; display:flex; align-items:center; background:#0B1220; color:#94A3B8; font-size:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.platform-bar-inner { width:min(calc(100% - 32px),1240px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.platform-header { height:60px; display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.platform-header-inner { width:min(calc(100% - 32px),1240px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; height:100%; }
.platform-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.02em; }
.platform-mark { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:13px; }
.platform-nav { display:flex; gap:4px; align-items:center; }
.platform-nav a { padding:7px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-secondary); }
.platform-nav a:hover, .platform-nav a.is-active { background:var(--surface-muted); color:var(--text-primary); }
.hero-platform { padding:32px 0 20px; border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.hero-platform-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }
.hero-platform h1 { font-size: clamp(28px,4vw,44px); font-weight:900; letter-spacing:-.02em; line-height:1.05; }
.feature-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.feature-media { height:200px; position:relative; overflow:hidden; display:grid; place-items:center; color:rgba(255,255,255,.9); font-weight:800; font-size:14px; }
.grid-platform { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.card-platform { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition: transform var(--ease), box-shadow var(--ease); }
.card-platform:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-media { height:160px; position:relative; overflow:hidden; background:var(--surface-muted); display:grid; place-items:center; color:var(--text-muted); font-weight:700; font-size:12px; }
.card-body { padding:12px; flex:1; display:flex; flex-direction:column; gap:6px; }
.card-body h3 { font-size:14px; font-weight:800; line-height:1.3; }
.card-body p { font-size:12.5px; color:var(--text-secondary); line-height:1.4; }
.card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); }
.filter-platform { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.filter-btn-platform { padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--text-secondary); cursor:pointer; }
.filter-btn-platform.is-active { background:var(--de-navy); color:#fff; border-color:var(--de-navy); }
.search-platform { position:relative; flex:1; max-width:300px; }
.search-platform input { width:100%; padding:9px 12px 9px 34px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:13px; }
.search-platform svg { position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.switcher-platform { position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:300px; background:var(--surface-elevated); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:12px; display:none; }
.switcher-platform.open { display:block; }
@media (max-width: 1100px){ .hero-platform-inner { grid-template-columns:1fr; } .grid-platform { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px){ .grid-platform { grid-template-columns: repeat(2,1fr); } .platform-nav { display:none; } }
@media (max-width: 480px){ .grid-platform { grid-template-columns:1fr; } }