:root{
  --bg:#050505;
  --panel:#0d0d10;
  --panel-2:#151519;
  --text:#f8f8f4;
  --muted:#a9a9af;
  --line:rgba(255,255,255,.14);
  --accent:#f4f4f4;
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 75% -10%,rgba(255,255,255,.13),transparent 31%),
    radial-gradient(circle at 0 40%,rgba(255,255,255,.06),transparent 24%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit}
button{color:inherit}
.page-shell{width:min(1240px,calc(100% - 36px));margin-inline:auto}
.topbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(20px);
}
.topbar-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:950;font-size:1.2rem;letter-spacing:-.05em}
.brand span{color:#9f9fa5;font-weight:700}
.back-link,.contact-link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--line);border-radius:999px;padding:11px 16px;
  background:rgba(255,255,255,.06);font-size:.84rem;font-weight:850;
  transition:.2s ease;
}
.back-link:hover,.contact-link:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.mobile-label{display:none}
.main{padding:42px 0 88px}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.video-column{min-width:0}
.player-wrap{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  background:#000;box-shadow:0 35px 100px rgba(0,0,0,.5);aspect-ratio:1358/636;
}
.player-wrap video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.player-wrap.is-enhanced video{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.player-overlay{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at center,transparent 0 36%,rgba(0,0,0,.22) 100%);
  opacity:1;transition:opacity .25s ease;
}
.player-wrap.is-playing .player-overlay{opacity:0}
.big-play{
  width:82px;height:82px;border:1px solid rgba(255,255,255,.45);border-radius:50%;
  background:rgba(4,4,4,.64);backdrop-filter:blur(14px);display:grid;place-items:center;
  box-shadow:0 18px 70px rgba(0,0,0,.45);
}
.big-play svg{width:31px;height:31px;margin-left:5px;fill:#fff}
.player-controls{
  position:absolute;left:0;right:0;bottom:0;padding:45px 17px 15px;
  background:linear-gradient(transparent,rgba(0,0,0,.92));
  opacity:1;transform:translateY(0);transition:.22s ease;
}
.player-wrap.is-playing.controls-hidden .player-controls{opacity:0;transform:translateY(10px);pointer-events:none}
.progress-row{display:flex;align-items:center;margin-bottom:11px}
.progress{
  width:100%;height:5px;accent-color:#fff;cursor:pointer;outline:none;border:0;
  appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#fff var(--progress,0%),rgba(255,255,255,.28) var(--progress,0%));border-radius:999px;
}
.progress::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.progress::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff}
.controls-row{display:flex;align-items:center;gap:8px}
.control-btn{
  width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:.16s ease;
}
.control-btn:hover{background:rgba(255,255,255,.14)}
.control-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.control-btn .fill{fill:#fff;stroke:none}
.time{font-size:.78rem;font-weight:750;color:#ececef;white-space:nowrap;margin-left:2px}
.spacer{flex:1}
.volume{
  width:88px;height:4px;cursor:pointer;outline:none;border:0;appearance:none;-webkit-appearance:none;
  border-radius:999px;background:linear-gradient(90deg,#fff var(--volume-progress,100%),rgba(255,255,255,.28) var(--volume-progress,100%));
}
.volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0;box-shadow:none}
.volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0;box-shadow:none}
.speed-select{position:relative;width:76px;flex:0 0 76px}
.speed-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.speed-select-trigger{
  width:100%;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:0 10px;
  color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),rgba(255,255,255,.055);
  display:flex;align-items:center;justify-content:center;gap:5px;font-size:.75rem;font-weight:900;cursor:pointer;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.speed-select-trigger:hover{border-color:rgba(255,255,255,.34);background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05)),rgba(255,255,255,.08);transform:translateY(-1px)}
.speed-select-trigger svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;pointer-events:none}
.speed-select.open .speed-select-trigger{border-color:rgba(255,255,255,.48);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.055)),rgba(255,255,255,.09)}
.speed-select.open .speed-select-trigger svg{transform:rotate(180deg)}
.speed-select-menu{
  position:absolute;z-index:30;right:0;bottom:calc(100% + 10px);width:110px;max-height:250px;overflow-y:auto;
  padding:7px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(10,10,12,.98);
  border:1px solid rgba(255,255,255,.17);border-radius:17px;box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(7px) scale(.97);transform-origin:bottom right;
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
.speed-select.open .speed-select-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.speed-select-option{
  width:100%;min-height:38px;border:0;border-radius:11px;padding:8px 10px;background:transparent;color:#d9d9dd;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;cursor:pointer;outline:none;transition:background .15s ease,color .15s ease,transform .15s ease;
}
.speed-select-option:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(1px)}
.speed-select-option.is-selected{background:linear-gradient(135deg,#fff,#d6d6d6 48%,#8d8d8d);color:#050505}
.speed-select-menu::-webkit-scrollbar{width:6px}
.speed-select-menu::-webkit-scrollbar-track{background:transparent}
.speed-select-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32);border-radius:999px}

.player-wrap:focus,.player-wrap *:focus,.player-wrap:focus-visible,.player-wrap *:focus-visible{outline:none!important}
.player-wrap ::selection{background:transparent;color:inherit}
.player-wrap::-moz-focus-inner,.player-wrap button::-moz-focus-inner{border:0}
.player-wrap:fullscreen,.player-wrap:-webkit-full-screen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#000}
.player-wrap:fullscreen video,.player-wrap:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}
.player-wrap:fullscreen .player-controls,.player-wrap:-webkit-full-screen .player-controls{padding-left:clamp(14px,2vw,30px);padding-right:clamp(14px,2vw,30px);padding-bottom:clamp(14px,2vw,24px)}

.video-meta{padding:28px 2px 0}
.badge-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.badge{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:999px;padding:8px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:#c8c8cc}
h1{font-size:clamp(2.25rem,5vw,5rem);line-height:.93;letter-spacing:-.075em;max-width:900px}
.lead{color:#bcbcc2;font-size:1rem;line-height:1.65;max-width:830px;margin-top:18px}
.notice{margin-top:22px;padding:17px 19px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.045);color:#cfcfd3;line-height:1.55;font-size:.88rem}
.notice strong{color:#fff}
.sidebar{position:sticky;top:103px;display:grid;gap:15px}
.side-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.2)}
.side-card h2{font-size:1rem;letter-spacing:-.035em;margin-bottom:14px}
.feature-list{display:grid;gap:12px;list-style:none}
.feature-list li{position:relative;padding-left:20px;color:#bcbcc2;line-height:1.45;font-size:.88rem}
.feature-list li::before{content:"";position:absolute;left:0;top:.54em;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.55)}
.stat-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.83rem;color:#a8a8ae}
.stat-line:last-child{border-bottom:0;padding-bottom:0}
.stat-line strong{color:#fff;text-align:right}
.next-demo{display:block;overflow:hidden;padding:0}
.next-thumb{aspect-ratio:16/8;overflow:hidden;background:#111}
.next-thumb img{width:100%;height:100%;object-fit:cover;transition:.3s ease}
.next-demo:hover .next-thumb img{transform:scale(1.025)}
.next-body{padding:18px}
.next-label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:#9d9da4;font-weight:900}
.next-title{font-size:1.05rem;font-weight:900;letter-spacing:-.035em;margin-top:8px;line-height:1.2}
.next-arrow{margin-top:14px;font-size:.82rem;font-weight:900;color:#d8d8dc}
.footer{border-top:1px solid var(--line);padding:24px 0 34px;color:#929299;font-size:.8rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:960px){
  .demo-grid{grid-template-columns:1fr}.sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.side-card:first-child{grid-column:1/-1}
}
@media(max-width:680px){
  .page-shell{width:min(100% - 20px,1240px)}.topbar-inner{height:66px}.brand span{display:none}.desktop-label{display:none}.mobile-label{display:inline}.contact-link{padding:10px 13px}.main{padding-top:20px}.player-wrap{border-radius:18px}.player-controls{padding:36px 8px 8px}.control-btn{width:34px;height:34px}.control-btn svg{width:19px;height:19px}.volume{display:none}.speed-select{display:none}.time{font-size:.69rem}.big-play{width:64px;height:64px}.big-play svg{width:25px;height:25px}.video-meta{padding:22px 4px 0}.lead{font-size:.94rem}.sidebar{grid-template-columns:1fr}.side-card:first-child{grid-column:auto}.footer-inner{display:grid}
}