/* pages/samples.php — generated from Samples.dc.html; 89 elements, 44 shared + 1 per-item classes. */
/*  */
.s1{background:#0B1220;color:#C9D3E3;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.s2{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.96);border-bottom:1px solid #22314D}
.s3{max-width:1280px;margin:0 auto;padding:12px clamp(16px,4.5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px;row-gap:6px}
.s4{order:0;display:flex;align-items:center;min-height:44px;color:#FFFFFF;font-weight:700;font-size:clamp(12px,1.1vw,14px);letter-spacing:.18em;text-decoration:none;white-space:nowrap}
.s5{order:1;flex-basis:auto;display:block;min-width:0;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
.s6{display:flex;flex-direction:row;gap:2px;width:max-content;margin:0 auto}
.s7{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;color:#C9D3E3;font-size:14px;white-space:nowrap;text-decoration:none}
.s7:hover{color:#FFFFFF;background:#111B2E}
.s8{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;color:#FFFFFF;background:#111B2E;font-size:14px;white-space:nowrap;text-decoration:none}
.s9{order:1;margin-left:auto;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid #22314D;background:#111B2E;display:none;align-items:center;justify-content:center;cursor:pointer}
.s10{width:20px;height:20px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s11{order:2;flex-basis:auto;display:flex;gap:8px}
.s12{flex:0 0 auto;justify-content:center;display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#F0B35B;color:#0B1220;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .15s}
.s12:hover{background:#E0A34B;text-decoration:none}
.s13{flex:0 0 auto;justify-content:center;display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#0027E7;color:#FFFFFF;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .15s}
.s13:hover{background:#0020C4;text-decoration:none}
.s14{padding:40px clamp(16px,4.5vw,64px) 56px}
.s15{max-width:1152px;margin:0 auto}
.s16{display:inline-flex;align-items:center;min-height:44px;margin-bottom:4px;font-size:14px;color:#F0B35B;text-decoration:none}
.s16:hover{text-decoration:underline}
.s17{font-size:13px;font-weight:700;letter-spacing:.24em;color:#F0B35B}
.s18{margin:12px 0 0;font-size:clamp(34px,6vw,44px);line-height:1.08;letter-spacing:-.02em;color:#FFFFFF;font-weight:700;text-wrap:balance}
.s19{margin:14px 0 0;max-width:760px;font-size:18px;line-height:1.55;color:#C9D3E3;text-wrap:pretty}
.s20{margin-top:28px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.s21{grid-column:span 3;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:#111B2E;border:1px solid #22314D;min-width:0}
.s22{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#16223A;border:1px solid #2E4266}
.s23{display:block;width:100%;height:100%;object-fit:cover;background:#16223A}
.s24{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:rgba(11,18,32,.35);cursor:pointer}
.s25{width:64px;height:64px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.s26{width:24px;height:24px;fill:#0B1220;margin-left:4px}
.s27{align-self:flex-start;max-width:100%;padding:5px 12px;border-radius:999px;background:#F0B35B;color:#0B1220;font-size:11px;font-weight:700;letter-spacing:.12em;overflow-wrap:anywhere}
.s28{margin:0;font-size:18px;line-height:1.3;font-weight:700;color:#FFFFFF}
.s29{margin:0;font-size:15px;line-height:1.5;color:#C9D3E3;text-wrap:pretty}
.s30{margin-top:auto;font-size:13px;color:#8A97AE}
.s31{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px;border-radius:18px;background:#111B2E;border:1px solid #F0B35B}
.s32{flex:1;min-width:min(100%,320px)}
.s33{margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;font-weight:700;color:#FFFFFF}
.s34{margin:8px 0 0;font-size:16px;line-height:1.55;color:#C9D3E3}
.s35{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:#F0B35B;color:#0B1220;font-size:16px;font-weight:700;text-decoration:none;transition:background .15s}
.s35:hover{background:#E0A34B;text-decoration:none}
.s36{width:18px;height:18px;fill:none;stroke:#0B1220;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.s37{border-top:1px solid #22314D}
.s38{max-width:1280px;margin:0 auto;padding:32px clamp(20px,4.5vw,64px) 40px;display:flex;flex-direction:column;gap:14px}
.s39{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.s40{font-size:13px;letter-spacing:.06em;color:#C9D3E3}
.s41{display:flex;gap:4px;font-size:13px}
.s42{display:flex;align-items:center;min-height:44px;padding:0 10px;color:#C9D3E3}
.s43{font-size:13px;color:#8A97AE}
.s44{font-size:12px;color:#8A97AE}
.s21.is-playing .sr1{display:none}
@media (max-width: 1099px){
  .s20{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s21{grid-column:auto}
}
@media (max-width: 979px){
  .s5{order:3;flex-basis:100%;display:none;padding-bottom:8px}
  .s6{flex-direction:column;width:100%}
  .s9{display:flex}
  body.menu-open .s5{display:block}
}
@media (max-width: 639px){
  .s20{grid-template-columns:1fr}
}
@media (max-width: 599px){
  .s11{flex-basis:100%}
  .s12{flex:1 1 0}
  .s13{flex:1 1 0}
}