/* V168 · Own VPN: clearer supplier story + motion. Loaded after own-vpn-v155.css. */

/* ---------- icons used by the refreshed page ---------- */
.own-vpn-page .ico-bot{--vicon:url('/static/vendor/lucide-pack/bot.svg')}
.own-vpn-page .ico-monitor{--vicon:url('/static/vendor/lucide-pack/monitor.svg')}
.own-vpn-page .ico-store{--vicon:url('/static/vendor/lucide-pack/store.svg')}
.own-vpn-page .ico-users{--vicon:url('/static/vendor/lucide-pack/users.svg')}
.own-vpn-page .ico-zap{--vicon:url('/static/vendor/lucide-pack/zap.svg')}
.own-vpn-page .ico-check{--vicon:url('/static/vendor/lucide-pack/circle-check.svg')}
.own-vpn-page .ico-layers{--vicon:url('/static/vendor/lucide-pack/layers.svg')}
.own-vpn-page .ico-send{--vicon:url('/static/vendor/lucide-pack/send.svg')}
.own-vpn-page .ico-package{--vicon:url('/static/vendor/lucide-pack/package.svg')}
.own-vpn-page .ico-arrow-right{--vicon:url('/static/vendor/lucide-pack/arrow-right.svg')}

/* ---------- scroll reveal (progressive: visible if JS never runs) ---------- */
.own-vpn-page.ov-motion [data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .58s cubic-bezier(.22,.7,.3,1),transform .58s cubic-bezier(.22,.7,.3,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.own-vpn-page.ov-motion [data-reveal].is-in{opacity:1;transform:none}

/* ---------- hero polish ---------- */
.own-vpn-page .ov-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid rgb(var(--theme-rgb)/.24);border-radius:999px;background:rgb(var(--theme-rgb)/.07);color:var(--own-vpn-accent);font-size:.63rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.own-vpn-page .ov-badge i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:ovPulse 2.4s ease-in-out infinite}
@keyframes ovPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.own-vpn-page .own-vpn-hero-copy p.ov-lead{font-size:.85rem;line-height:1.7;color:var(--own-vpn-muted)}
.own-vpn-page .own-vpn-trust>span{transition:transform .2s ease}
.own-vpn-page .own-vpn-trust>span:hover{transform:translateY(-2px)}
.own-vpn-page .own-vpn-register-main{position:relative;overflow:hidden}
.own-vpn-page .own-vpn-register-main::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,rgb(var(--theme-rgb)/.22),transparent);transform:skewX(-18deg);animation:ovSheen 4.6s ease-in-out infinite}
@keyframes ovSheen{0%,62%{left:-60%}88%,100%{left:120%}}

/* ---------- pipeline: us -> your platform -> client ---------- */
.own-vpn-page .ov-flow{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr);align-items:stretch;gap:0;padding:20px!important}
.own-vpn-page .ov-node{display:grid;grid-template-rows:auto auto auto;gap:9px;align-content:start;justify-items:center;padding:16px 12px;border:1px solid var(--border);border-radius:16px;background:rgb(var(--theme-rgb)/.03);text-align:center;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.own-vpn-page .ov-node:hover{transform:translateY(-3px);border-color:rgb(var(--theme-rgb)/.34);background:rgb(var(--theme-rgb)/.06)}
.own-vpn-page .ov-node-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:14px;background:rgb(var(--theme-rgb)/.07)}
.own-vpn-page .ov-node-icon .vicon{width:22px!important;height:22px!important}
.own-vpn-page .ov-node b{color:var(--own-vpn-ink);font-size:.82rem;line-height:1.35;font-weight:650}
.own-vpn-page .ov-node small{display:block;color:var(--own-vpn-muted);font-size:.7rem;line-height:1.55}
.own-vpn-page .ov-node.is-you{border-color:rgb(var(--theme-rgb)/.32);background:rgb(var(--theme-rgb)/.075)}
.own-vpn-page .ov-node-tag{display:inline-flex;padding:3px 8px;border-radius:999px;background:rgb(var(--theme-rgb)/.1);color:var(--own-vpn-accent);font-size:.58rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.own-vpn-page .ov-wire{position:relative;align-self:center;height:2px;margin:0 6px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--theme-rgb)/.1),rgb(var(--theme-rgb)/.34),rgb(var(--theme-rgb)/.1));overflow:visible}
.own-vpn-page .ov-wire::after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--own-vpn-accent);box-shadow:0 0 0 4px rgb(var(--theme-rgb)/.14);animation:ovTravel 2.8s cubic-bezier(.5,0,.5,1) infinite}
.own-vpn-page .ov-wire.is-late::after{animation-delay:.6s}
@keyframes ovTravel{0%{left:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
.own-vpn-page .ov-flow-note{grid-column:1/-1;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);color:var(--own-vpn-muted);font-size:.72rem;line-height:1.6;text-align:center}
.own-vpn-page .ov-flow-note b{color:var(--own-vpn-ink)}

/* ---------- who does what ---------- */
.own-vpn-page .ov-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.own-vpn-page .ov-split-card{padding:18px!important}
.own-vpn-page .ov-split-card h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--own-vpn-ink);font-size:.86rem;font-weight:650}
.own-vpn-page .ov-split-card h3 .vicon{width:19px!important;height:19px!important}
.own-vpn-page .ov-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.own-vpn-page .ov-list li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px;align-items:start;color:var(--own-vpn-muted);font-size:.75rem;line-height:1.6}
.own-vpn-page .ov-list li .vicon{width:15px!important;height:15px!important;margin-top:3px;color:var(--own-vpn-accent)!important}

/* ---------- where you sell ---------- */
.own-vpn-page .ov-channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.own-vpn-page .ov-channel{display:grid;gap:9px;padding:16px!important;transition:transform .22s ease,border-color .22s ease}
.own-vpn-page .ov-channel:hover{transform:translateY(-4px)}
.own-vpn-page .ov-channel-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:12px;background:rgb(var(--theme-rgb)/.065)}
.own-vpn-page .ov-channel-icon .vicon{width:20px!important;height:20px!important}
.own-vpn-page .ov-channel b{color:var(--own-vpn-ink);font-size:.8rem;font-weight:650}
.own-vpn-page .ov-channel p{margin:0;color:var(--own-vpn-muted);font-size:.72rem;line-height:1.6}

/* ---------- steps + features motion ---------- */
.own-vpn-page .own-vpn-step,.own-vpn-page .own-vpn-feature{transition:transform .22s ease,border-color .22s ease}
.own-vpn-page .own-vpn-step:hover,.own-vpn-page .own-vpn-feature:hover{transform:translateY(-3px)}
.own-vpn-page .ov-step-n{position:absolute;top:12px;right:14px;color:rgb(var(--theme-rgb)/.34);font-size:.95rem;font-weight:700;letter-spacing:.04em}
.own-vpn-page .own-vpn-step{position:relative}

/* ---------- price cards ---------- */
.own-vpn-page .own-vpn-price-card{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.own-vpn-page .own-vpn-price-card:hover{transform:translateY(-3px);border-color:rgb(var(--theme-rgb)/.34);background:rgb(var(--theme-rgb)/.07)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .own-vpn-page .ov-channels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .own-vpn-page .ov-flow{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px!important}
  .own-vpn-page .ov-wire{width:2px;height:26px;justify-self:center;margin:0}
  .own-vpn-page .ov-wire::after{left:50%!important;margin-left:-4px;animation:ovTravelV 2.8s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes ovTravelV{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
  .own-vpn-page .ov-split{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .own-vpn-page .ov-channels{grid-template-columns:minmax(0,1fr)}
  .own-vpn-page .ov-node{padding:14px 10px}
}
@media(prefers-reduced-motion:reduce){
  .own-vpn-page *,.own-vpn-page *::before,.own-vpn-page *::after{animation:none!important;transition:none!important}
  .own-vpn-page.ov-motion [data-reveal]{opacity:1!important;transform:none!important}
}
